/* =========================================================================
   genel.css — Site geneli paylaşılan stiller
   (Inline <style> blokları ve sık tekrarlanan inline style'lar buraya taşındı)
   ========================================================================= */

:root {
    color-scheme: light;
    --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #eaeaea; --gray-300: #d1d5db;
    --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151;
    --gray-800: #1f2937; --gray-900: #111827;
    --brand-400: #818cf8; --brand-500: #6366f1; --brand-600: #4f46e5;
}

/* --------- Welcome (landing) sayfası --------- */
.welcome-page * { box-sizing: border-box; }
.welcome-page {
    margin: 0;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #fff;
    min-height: 100vh;
    color: #e2e8f0;
}
.welcome-page .nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; }
.welcome-page .nav .brand { font-weight: 800; font-size: 1.1rem; color: #fff; }
.welcome-page .nav a { color: #cbd5e1; margin-left: 14px; text-decoration: none; }
.welcome-page .nav a.btn { background: #4f46e5; color: #fff; padding: 8px 14px; border-radius: 10px; font-weight: 600; }
.welcome-page .hero { max-width: 1100px; margin: 48px auto; padding: 0 24px; text-align: center; }
.welcome-page .hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0 0 14px; color: #fff; }
.welcome-page .hero p { font-size: 1.05rem; max-width: 720px; margin: 0 auto 26px; color: #cbd5e1; line-height: 1.6; }
.welcome-page .cta { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.welcome-page .cta a { display: inline-block; padding: 12px 18px; border-radius: 12px; text-decoration: none; font-weight: 700; }
.welcome-page .cta .primary { background: #4f46e5; color: #fff; }
.welcome-page .cta .ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.welcome-page .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 1100px; margin: 60px auto; padding: 0 24px; }
.welcome-page .card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 20px; }
.welcome-page .card h3 { margin: 0 0 8px; color: #fff; }
.welcome-page .card p { margin: 0; color: #cbd5e1; }

/* --------- Auth (login / register) sayfaları --------- */
.auth-page * { box-sizing: border-box; }
.auth-page {
    margin: 0;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: linear-gradient(135deg, #f5f7ff 0%, #edf2ff 45%, #f1f5f9 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #0f172a;
}
.auth-page .card {
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
    padding: 28px;
}
.auth-page h1 { margin: 0 0 8px; font-size: 1.5rem; }
.auth-page .subtitle { margin: 0 0 20px; color: #475569; font-size: .95rem; }
.auth-page .field { margin-bottom: 14px; }
.auth-page label { display: block; margin-bottom: 6px; font-weight: 600; font-size: .9rem; }
.auth-page input[type="text"],
.auth-page input[type="email"],
.auth-page input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: .95rem;
    outline: none;
    transition: border-color .15s ease;
    background: #fff;
}
.auth-page input:focus { border-color: #6366f1; }
.auth-page .remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: #334155;
    font-size: .9rem;
}
.auth-page .btn {
    width: 100%;
    border: 0;
    border-radius: 10px;
    padding: 11px 14px;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    background: #4f46e5;
    color: #fff;
}
.auth-page .btn:hover { background: #4338ca; }
.auth-page .errors {
    margin-bottom: 16px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #9f1239;
    font-size: .9rem;
}
.auth-page .footer { margin-top: 14px; text-align: center; font-size: .9rem; }
.auth-page .footer a { color: #4f46e5; text-decoration: none; }

/* --------- Exam runner (Livewire) --------- */
.runner { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.runner.collapsed { grid-template-columns: 1fr; }
/* Exam ihbar modal overlay */
.exam-modal-overlay { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 9999; padding: 20px; }

/* Cevap kağıdı - detaylı ABCD modu (Optik Form stili) */
.answer-sheet-detailed {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 4px 0;
}
.answer-row {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px 2px 0;
    /* Her satır içeriğe göre boyutlanır, 2 sütun için %50 */
    width: 50%;
    box-sizing: border-box;
    margin: 2px 0px;
}
.answer-row-num {
    flex-shrink: 0; width: 18px; height: 20px; border-radius: 0;
    border: none; background: none;
    font-size: .65rem; font-weight: 700; color: var(--gray-600);
    cursor: pointer; display: flex; align-items: center; justify-content: flex-end;
    padding-right: 2px;
    transition: color .1s;
    font-variant-numeric: tabular-nums;
}
.answer-row-num:hover { color: var(--brand-600); }
.answer-row-num.current { color: var(--brand-600); font-weight: 800; }
.answer-row-choice {
    width: 25px; height: 25px; border-radius: 50%;
    border: 1.5px solid #9ca3af;
    background: #fff;
    font-size: .6rem; font-weight: 700; color: #6b7280;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all .1s; flex-shrink: 0; line-height: 1;
    padding: 0;
}
.answer-row-choice:hover { border-color: #4f46e5; color: #4f46e5; }
.answer-row-choice.selected { background: #1e293b; border-color: #1e293b; color: #fff; }
/* Görünüm geçiş butonu */
.sheet-mode-btn {
    border: 1px solid var(--gray-200); background: var(--gray-50);
    border-radius: 5px; padding: 2px 7px; font-size: .68rem;
    font-weight: 600; color: var(--gray-500); cursor: pointer; transition: all .12s;
}    background: #fff;
border: 1px solid var(--gray-200);
border-radius: .75rem;
padding: 14px;
position: sticky;
top: 16px;
max-height: calc(100vh - 32px);
overflow: auto;
.sheet-mode-btn:hover { border-color: var(--brand-400); color: var(--brand-600); background: #f5f7ff; }
/* Optik form başlık */
.optik-header {
    width: 100%;
    display: flex; justify-content: flex-end;
    font-size: .6rem; font-weight: 700; color: var(--gray-400);
    letter-spacing: .05em; padding-bottom: 3px;
    border-bottom: 1px solid var(--gray-200); margin-bottom: 2px;
}
.optik-header span { margin-right: 2px; }
.palette2 {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: .75rem;
    padding: 14px;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow: auto;
}
.palette1 {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: .75rem;
    padding: 14px;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow: auto;
}
.palette .grid-cells { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }

/* Sınav Cevap Kağıdı Stili */
.answer-sheet {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}
.answer-sheet-row { display: contents; }
.answer-sheet-col-divider { display: none; }
.answer-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    border-radius: 8px;
    border: 1.5px solid var(--gray-200);
    cursor: pointer;
    font-weight: 600;
    font-size: .9rem;
    background: var(--gray-50);
    color: var(--gray-700);
}
.answer-cell:hover { border-color: var(--brand-600); background: #f5f7ff; }
.answer-cell.current {
    border: 1.5px solid var(--brand-500);
    background: #fafbff;
}
.answer-cell.filled { border-color: #16a34a; background: #f0fdf4; }
.answer-cell.filled.current { border-color: #16a34a; }
.answer-cell .q-num {
    font-size: .65rem;
    font-weight: 700;
    color: var(--gray-500);
    line-height: 1;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.answer-cell .q-answer {
    font-size: .75rem;
    font-weight: 700;
    color: #16a34a;
    letter-spacing: .5px;
    height: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.answer-cell .q-empty {
    font-size: .75rem;
    color: var(--gray-300);
    height: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ghost1{
    background: #fff;
    color: var(--gray-900);
    border-color: var(--gray-300);
    font-size: 16px;
    height: 40px;
    display: flex;
    width: 40px;
    padding: 3px 0px 0px 0px;
}
.ghost1:disabled {
    opacity: .5;
    border-color: var(--gray-300);
    cursor: not-allowed;
}

.ghost2{
    background: #fff;
    color: var(--gray-900);
    border-color: var(--gray-300);
    font-size: 16px;
    height: 40px;
    display: flex;
    width: 40px;
    padding: 3px 0px 0px 0px;
}
.ghost2:disabled {
    opacity: .5;
    border-color: var(--gray-300);
    cursor: not-allowed;
}

.cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    cursor: pointer;
    font-weight: 600;
    font-size: .9rem;
    background: var(--gray-50);
    color: var(--gray-700);
}
.cell.answered { background: #dcfce7; border-color: #86efac; color: #065f46; }
.cell.current { outline: 3px solid var(--brand-600); }
.timer {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 1rem;
    color: var(--gray-900);
    min-width: 54px;
    display: inline-block;
    text-align: center;
    letter-spacing: .02em;
}
.timer.danger { color: var(--red-600); }
.question-card { background: #fff; border: 1px solid var(--gray-200); border-radius: .75rem; padding: 24px; }
.choices { display: grid; gap: 10px; margin-top: 14px; }
.choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--gray-200);
    border-radius: .5rem;
    padding: 12px 14px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.choice:hover { border-color: var(--brand-600); background: #f5f7ff; }
.choice.selected { border-color: var(--brand-600); background: #eef2ff; }
.choice .key { font-weight: 800; padding: 2px 8px; border-radius: 6px; background: #eef2ff; color: #3730a3; flex-shrink: 0; }
.choice .choice-body { flex: 1 1 auto; min-width: 0; line-height: 1.5; word-break: break-word; overflow-wrap: anywhere; }
.choice .choice-body > *:first-child { margin-top: 0; }
.choice .choice-body > *:last-child  { margin-bottom: 0; }
.choice .choice-body p  { margin: 0 0 .5em; }
.choice .choice-body img,
.choice .choice-body video,
.choice .choice-body iframe { max-width: 100%; height: auto; border-radius: .5rem; }
.image-thumb img { max-width: 100%; border-radius: .5rem; margin: 8px 0; border: 1px solid var(--gray-200); }
@media (max-width: 768px) { .runner { grid-template-columns: 1fr; } }

/* Exam-runner içindeki sık kullanılan küçük yardımcılar */
.runner-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.runner-header h1 { font-size: 1.125rem; font-weight: 600; color: var(--gray-900); margin: 0; }
.runner-header .actions { display: flex; gap: 8px; }
.q-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.q-meta strong { font-size: .95rem; color: var(--gray-900); }
.q-meta .badge {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: var(--gray-100);
    color: var(--gray-600);
    padding: 3px 8px;
    border-radius: 6px;
}
.q-body {
    line-height: 1.6;
    font-size: 1.05rem;
    color: var(--gray-800);
    margin-bottom: 25px;
    min-height: 80px;
    /* HTML içerikli sorularda (p, ul, table, img, br…) flex layout child'ları
       sıkıştırıp düzeni bozuyordu. Block layout + iç içe içerik için doğal akış. */
    display: block;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.q-body > *:first-child { margin-top: 0; }
.q-body > *:last-child  { margin-bottom: 0; }
.q-body p  { margin: 0 0 .75em; }
.q-body ul,
.q-body ol { margin: 0 0 .75em 1.25em; padding: 0; }
.q-body li { margin: .15em 0; }
.q-body img,
.q-body video,
.q-body iframe { max-width: 100%; height: auto; border-radius: .5rem; }
.q-body pre {
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200);
    border-radius: .5rem;
    padding: 10px 12px;
    overflow-x: auto;
    font-size: .9em;
}
.q-body code { background: var(--gray-100); padding: 1px 6px; border-radius: 4px; font-size: .9em; }
.q-body table { border-collapse: collapse; max-width: 100%; margin: .25em 0 .75em; }
.q-body table th,
.q-body table td { border: 1px solid var(--gray-200); padding: 6px 10px; }
.q-body blockquote {
    margin: 0 0 .75em;
    padding: .25em 0 .25em .9em;
    border-left: 3px solid var(--gray-200);
    color: var(--gray-600);
}
.q-extra { margin-top: 8px; font-size: .875rem; color: var(--gray-500); }
.choice-body-extra { font-size: .85rem; color: var(--gray-500); }
.open-ended-hint { margin-top: 10px; font-size: .875rem; color: var(--gray-500); }
.open-ended-input { margin-top: 8px; width: 100%; }
.runner-nav { display: flex; gap: 8px; margin-top: 20px; }
.runner-nav .spacer { flex: 1; }
.runner-empty { text-align: center; color: var(--gray-400); padding: 32px; }
.palette-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.palette-header strong { font-size: .875rem; color: var(--gray-900); }
.palette-progress { margin-bottom: 10px; font-size: .75rem; color: var(--gray-500); }
.timer.center { text-align: center; writing-mode: horizontal-tb; padding: 8px 4px; }

/* --------- Front layout küçük yardımcıları --------- */
.front-body { background: var(--gray-50); min-height: 100vh; }
.front-nav {
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    padding: 0 24px;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.front-nav .brand { font-size: .875rem; font-weight: 600; color: var(--gray-900); text-decoration: none; }
.front-nav .user-name { font-size: .875rem; color: var(--gray-500); }
.front-nav .spacer { flex: 1; }
.front-main { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
.inline-form { display: inline; }

/* --------- Panel — sayfa başlığı, filtre çubuğu, tablo --------- */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gray-100);
    margin-bottom: 20px;
}
.page-head h1 { font-size: 1.5rem; font-weight: 600; color: var(--gray-900); margin: 0; }

.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.filter-bar .search-wrap { position: relative; flex: 1; min-width: 220px; }
.filter-bar .search-icon {
    pointer-events: none;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--gray-400);
}
.filter-bar input[type="search"] {
    width: 100%;
    background: var(--gray-100);
    border: none;
    border-radius: 9999px;
    padding: 8px 12px 8px 36px;
    font-size: .875rem;
}
.filter-bar select {
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: .875rem;
    background: #fff;
}

.data-table-wrap { overflow-x: auto; border: 1px solid var(--gray-200); border-radius: .5rem; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead tr { border-bottom: 1px solid var(--gray-100); }
.data-table th:first-child{
    width: auto;
}
.data-table th {
    width: 75px;
    text-align: left;
    padding: 10px 16px;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gray-500);
}
.data-table th.actions { text-align: right; }
.data-table tbody tr { border-bottom: 1px solid var(--gray-100); transition: background .12s; }
.data-table tbody tr:hover { background: var(--gray-50); }
.data-table td { padding: 12px 16px; font-size: .875rem; color: var(--gray-600); }
.data-table td.primary { max-width: 360px; }
.data-table td.primary .title {
    font-size: .875rem;
    font-weight: 500;
    color: var(--gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.data-table td.primary .meta { font-size: .75rem; color: var(--gray-400); }
.data-table td.actions { width:150px;text-align: right; }
.data-table td.actions .row-actions { display: flex; justify-content: flex-end; gap: 6px; }
.data-table .empty { padding: 32px; text-align: center; color: var(--gray-400); }
.pagination-wrap { margin-top: 12px; }

/* =========================================================================
   Workspace — Panel sayfaları için 2 kolonlu modüler düzen
   Sol: liste / form (ana içerik, max-width ile sınırlı)
   Sağ: bilgi, arama, aksiyon kartları (modüler "side-card"lar)
   ========================================================================= */
.workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}
.workspace-main {
    min-width: 0;
    width: 100%;
}
.workspace-main.narrow { }
.workspace-side {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media (max-width: 1024px) {
    .workspace { grid-template-columns: 1fr; }
    .workspace-side { position: static; order: -1; }
}

/* — Modüler yan kart — */
.side-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: .625rem;
    overflow: hidden;
}
.side-card + .side-card { margin-top: 0; }
.side-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--gray-100);
}
.side-card-head h3 {
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.side-card-body { padding: 14px; }
.side-card-body.tight { padding: 10px 14px; }
.side-card-body.actions { display: flex; flex-direction: column; gap: 8px; }
.side-card-body.actions .btn { justify-content: center; }

.lm4{
    width: 100%;
}
.ln1{
    text-align: center;
    font-size: 12px;
}
.ln2{
    display: block;
}
.ln3{
    font-size: 14px;
    color: #000;
    font-weight: 600;
    margin-top: 5px;
    display: block;
}
/* Side card içinde sık kullanılan: meta-list (etiket + değer satırları) */
.meta-list { display: flex; flex-direction: column; gap: 10px; }
.meta-list .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.meta-list .row .label { font-size: .75rem; color: var(--gray-500); }
.meta-list .row .value { font-size: .8125rem; font-weight: 600; color: var(--gray-900); }
.meta-list .row .value.muted { color: var(--gray-500); font-weight: 500; }
.meta-list .dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    font-weight: 600;
}
.meta-list .dot::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: var(--gray-300);
}
.meta-list .dot.green { color: var(--emerald-600); }
.meta-list .dot.green::before { background: var(--emerald-500); }
.meta-list .dot.muted { color: var(--gray-500); }

/* Side card arama girdisi */
.side-search { position: relative; display: flex; align-items: center; }
.side-search .icon {
    pointer-events: none;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--gray-400);
}
.side-search input[type="search"] {
    width: 100%;
    background: var(--gray-100);
    border: none;
    border-radius: 9999px;
    padding: 8px 32px 8px 36px;   /* sağda clear butonu için yer */
    font-size: .8125rem;
    color: var(--gray-900);
    outline: none;
}
/* Tarayıcının varsayılan temizle (×) butonunu gizle */
.side-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.side-search input[type="search"]::-ms-clear { display: none; }
/* Input içinde sağ köşede duran temizle butonu */
.side-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: var(--gray-300);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 120ms;
    line-height: 1;
}
.side-search-clear:hover { background: var(--gray-400); }

/* =========================================================================
   Kategori listesi (Workspace sol kolon)
   ========================================================================= */
.cat-list {
    list-style: none; margin: 0; padding: 0;
}
.cat-list li, .cat-list ul { list-style: none; margin: 0; padding: 0; }

/* ── cat-item: Sortable öğesi (li wrapper) ── */
.cat-item { position: relative; }
.lll{
    font-size: 13px;
    padding-top: 2px;
}
/* ── cat-row: Flex satır içeriği ── */
.cat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 10px;
    transition: background 120ms;
    border-radius: 10px;
    margin: 2px 0px;
}
.cat-row:hover { background: #f5f7ff; }

/* Drag handle — her zaman sol başta sabit */
.cat-row .drag {
    flex-shrink: 0;
    width: 22px;
    cursor: grab;
    user-select: none;
    color: var(--gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 120ms;
}
.cat-row:hover .drag { color: var(--gray-400); }
.cat-row .drag:active { cursor: grabbing; }

/* ── cat-indent: Depth girintisi spacer (drag handle'dan sonra, avatar'dan önce) ── */
.cat-row .cat-indent {
    flex-shrink: 0;
    width: 0;
    transition: width 150ms;
}
.cat-item.depth-1 > .cat-row .cat-indent { width: 14px; }
.cat-item.depth-2 > .cat-row .cat-indent { width: 28px; }
.cat-item.depth-3 > .cat-row .cat-indent { width: 42px; }
.cat-item.depth-4 > .cat-row .cat-indent { width: 56px; }

/* ── Avatar — depth bazlı renk ── */
.cat-row .avatar {
    display: flex;
    width: 34px; height: 34px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: .8125rem;
    font-weight: 700;
    transition: background 200ms, color 200ms;
}
/* Depth renk paleti */
.cat-item.depth-0 > .cat-row .avatar { background: #dbeafe; color: #1e40af; }
.cat-item.depth-1 > .cat-row .avatar { background: #d1fae5; color: #065f46; }
.cat-item.depth-2 > .cat-row .avatar { background: #fef3c7; color: #92400e; }
.cat-item.depth-3 > .cat-row .avatar { background: #fce7f3; color: #9d174d; }
.cat-item.depth-4 > .cat-row .avatar { background: #ede9fe; color: #5b21b6; }

/* ── Nested drop hint — alt ders sürükleme alanı ── */
/* Aynı UL içinde gerçek (is-curriculum) çocuk varsa "Alt ders için sürükleyin"
   ipucunu gizle (drop sonrası hint çakılı kalmasın). */
.cat-list:has(> li.is-curriculum) > .nested-drop-hint { display: none; }
/* Sürükleme sırasında boş UL'e gözle görünür bir drop alanı çizimi */
.cat-list.sortable-drag-over { background: rgba(99, 102, 241, .05); border-radius: 8px; }


/* ── İçerik alanı ── */
.cat-row .info { min-width: 0; flex: 1; }
.cat-row .info .name { font-size: .875rem; font-weight: 600; color: var(--gray-900); text-decoration: none; display: block; }
.cat-row .info .slug { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; color: var(--gray-400); margin: 2px 0 0; }
.cat-row .status { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cat-row .status .pos { font-size: .7rem; color: var(--gray-300); }
.cat-row .status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; color: var(--gray-400); }
.cat-row .status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 9999px; background: var(--gray-300); flex-shrink: 0; }
.cat-row .status-pill.active { color: var(--gray-600); }
.cat-row .status-pill.active::before { background: var(--emerald-500); }
.cat-row .actions { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }

/* ── Global status-pill (table cells etc.) ── */
.status-pill { display: inline-block; width: 8px; height: 8px; border-radius: 9999px; background: var(--gray-300); flex-shrink: 0; }
.status-pill.active { background: var(--emerald-500); }

/* ── Alt kategori listesi ── */
.cat-children {
    margin-left: 24px;
}


.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 16px; text-align: center; background: #fff; border-radius: .625rem; }
.empty-state .icon-box {
    display: flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--gray-100);
    color: var(--gray-400);
}
.empty-state h2 { margin: 16px 0 4px; font-size: .9375rem; font-weight: 600; color: var(--gray-900); }
.empty-state p { margin: 0; font-size: .8125rem; color: var(--gray-500); }
.empty-state .cta { margin-top: 16px; }

.ff_area{
    padding: 20px;
    background-color: #fbfbfb;
    border-radius: 10px;
}

/* =========================================================================
   Form sayfaları — sol kolonda form, alt aksiyon barı
   ========================================================================= */
.form-sheet {
    /* border: 1px solid var(--gray-200); */
    border-radius: .625rem;
}
.form-sheet .tabs {
    display: flex;
    gap: 0;
    padding: 0 22px;
    height: 45px;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
}
.form-sheet .tabs::-webkit-scrollbar { display: none; }
.form-sheet .tab-pane { display: none !important; flex-direction: column; gap: 18px; }
.form-sheet .tab-pane.active { display: flex !important; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form-grid-2 { grid-template-columns: 1fr; } }
.field.inline-toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}
.field.inline-toggle label { margin: 0; cursor: pointer; user-select: none; }
.form-actions {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-100);
    display: block;
    gap: 8px;
    text-align: right;
}
.req-star { color: var(--red-600); }

/* =========================================================================
   JSON yardımcı pre-block (side-card içinde)
   ========================================================================= */
.code-block {
    border-radius: 6px;
    background: var(--gray-50);
    padding: 10px 12px;
    font-size: .7rem;
    color: var(--gray-600);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    line-height: 1.55;
    overflow-x: auto;
    margin: 0 0 10px;
    white-space: pre;
}

/* Soru-form içindeki şık radio'su için tutarlı görünüm */
.choice-correct {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: .875rem;
    user-select: none;
}

/* =========================================================================
   JSON Drawer (sağdan açılan panel)
   ========================================================================= */
.json-drawer { display: none; position: fixed; inset: 0; z-index: 50; }
.json-drawer.open { display: block; }
.json-drawer-backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, .4); }
.json-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    width: 100%;
    max-width: 36rem;
    flex-direction: column;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, .12);
    transform: translateX(100%);
    transition: transform 200ms ease-out;
}
.json-drawer-panel.in { transform: translateX(0); }
.json-drawer-head {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--gray-200);
    padding: 16px 20px;
}
.json-drawer-head h2 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--gray-900); }
.json-drawer-head p  { margin: 2px 0 0; font-size: .875rem; color: var(--gray-500); }
.json-drawer-head .icon-btn { margin-left: auto; }
.json-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.json-drawer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}
.json-textarea {
    min-height: 20rem;
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .75rem;
}

/* =========================================================================
   Toggle switch — düzeltme
   panel.css'teki `input[type=checkbox]` genel kuralı (0,1,1) attribute-
   selector özgünlüğüyle `.toggle` (0,1,0) sınıfının üzerine geçtiği için
   switch küçük bir kareye dönüyordu. Aşağıdaki `input.toggle` selektörü
   (0,1,1) eşit özgünlükte + sonra tanımlandığı için kazanır.
   ========================================================================= */
input.toggle,
input[type="checkbox"].toggle {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
    width: 2.25rem;
    height: 1.25rem;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    background: var(--gray-300);
    border-radius: 9999px;
    cursor: pointer;
    transition: background 180ms ease;
    accent-color: auto;          /* native accent-color etkisini kapat */
    vertical-align: middle;
}
input.toggle::after,
input[type="checkbox"].toggle::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 9999px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: transform .18s cubic-bezier(.2, .7, .2, 1);
}
input.toggle:checked,
input[type="checkbox"].toggle:checked {
    background: var(--brand-600);
}
input.toggle:checked::after,
input[type="checkbox"].toggle:checked::after {
    transform: translateX(1rem);
}
input.toggle:focus-visible,
input[type="checkbox"].toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .25);
}
input.toggle:disabled,
input[type="checkbox"].toggle:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Toggle alanı: switch + label hizalama */
.field.inline-toggle {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.field.inline-toggle > label {
    margin: 0;
    font-weight: 500;
    color: var(--gray-700);
    cursor: pointer;
    user-select: none;
}

/* =========================================================================
   Confirm Dialog (silme / kaydetme onay modalı)
   ========================================================================= */
.confirm-dialog {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.confirm-dialog.open { display: flex; }
.confirm-dialog .backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, .45);
    opacity: 0;
    transition: opacity 160ms ease;
}
.confirm-dialog.in .backdrop { opacity: 1; }

.confirm-dialog .panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transform: translateY(8px) scale(.98);
    opacity: 0;
    transition: transform 160ms ease, opacity 160ms ease;
}
.confirm-dialog.in .panel { transform: translateY(0) scale(1); opacity: 1; }

.confirm-dialog .body {
    display: flex;
    gap: 14px;
    padding: 20px 20px 16px;
}
.confirm-dialog .icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.confirm-dialog .icon.danger { background: #fee2e2; color: #b91c1c; }
.confirm-dialog .icon.primary { background: #eef2ff; color: #4338ca; }
.confirm-dialog .icon.warning { background: #fef3c7; color: #b45309; }
.confirm-dialog .icon svg { width: 22px; height: 22px; }

.confirm-dialog .text { min-width: 0; flex: 1; }
.confirm-dialog .text h3 {
    margin: 0 0 4px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--gray-900);
}
.confirm-dialog .text p {
    margin: 0;
    font-size: .8125rem;
    color: var(--gray-500);
    line-height: 1.5;
}
.confirm-dialog .actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
}

/* ══════════════════════════════════════════════
   SINAV LİSTESİ + DETAY SAYFA (front/exams)
   ══════════════════════════════════════════════ */

/* Başlık satırı */
.exams-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;flex-wrap:wrap;}
.exams-title{font-size:1.5rem;font-weight:600;color:var(--gray-900);margin:0;}

/* Arama formu */
.exams-search-form{position:relative;}
.exams-search-icon{pointer-events:none;position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--gray-400);}
.exams-search-input{background:var(--gray-100);border:none;border-radius:9999px;padding:8px 12px 8px 36px;font-size:.875rem;width:240px;outline:none;transition:box-shadow .15s;}
.exams-search-input:focus{box-shadow:0 0 0 2px var(--brand-300,#a5b4fc);}

/* Kart ızgarası */
.exams-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:24px;}
.exams-empty{grid-column:1/-1;}
.exams-pagination{margin-bottom:24px;}

/* Sınav kartı */
.exam-card{display:flex;flex-direction:column;gap:8px;padding:0;overflow:hidden;}
.exam-card-image{width:100%;height:160px;overflow:hidden;background:var(--gray-100);flex-shrink:0;}
.exam-card-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease;}
.exam-card:hover .exam-card-img{transform:scale(1.04);}
.exam-card .exam-meta-badges ~ .exam-card-title{padding-top:0;}
.exam-card-title{margin:0 0 4px;font-size:1rem;font-weight:600;color:var(--gray-900);padding:1.25rem 1.5rem 0;}
.exam-card-desc{font-size:.875rem;color:var(--gray-500);margin:0 0 8px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0 1.5rem;}
.exam-card-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;padding:0 1.5rem;}
.exam-card-btn{margin-top:auto;display:block;margin-left:1.5rem;margin-right:1.5rem;margin-bottom:1.5rem;}

/* Kategori ekmek kırıntısı rozetleri */
.exam-meta-badges{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:4px;padding:1.5rem 1.5rem 0;}
.exam-meta-sep{font-size:.75rem;color:var(--gray-400);line-height:1;}

/* Badge temel stilleri (Bootstrap badge override) */
.badge{display:inline-flex;align-items:center;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:9999px;border:1px solid transparent;}
.badge.brand,.badge.brand-badge{color:var(--brand-600,#4f46e5);background:var(--brand-50,#eef2ff);border-color:var(--brand-200,#c7d2fe);}
.badge.red{color:#dc2626;background:#fef2f2;border-color:#fecaca;}
.badge.yellow{color:#d97706;background:#fffbeb;border-color:#fde68a;}
/* varsayılan (gri) */
.badge:not(.brand):not(.red):not(.yellow){color:var(--gray-600);background:var(--gray-100);border-color:var(--gray-200);}

/* Alert bileşeni */
.alert{border-radius:10px;padding:14px 16px;margin-bottom:16px;font-size:.875rem;}
.alert-danger{background:#fef2f2;border:1px solid #fca5a5;color:#dc2626;}
.alert-warning{background:#fffbeb;border:1px solid #fcd34d;display:flex;align-items:flex-start;gap:12px;}
.alert-icon{flex-shrink:0;margin-top:2px;color:#d97706;}
.alert-heading{margin:0 0 4px;font-weight:600;color:#92400e;font-size:.9rem;}
.alert-body{margin:0 0 10px;color:#78350f;font-size:.8375rem;}
.btn.warning{background:#d97706;border-color:#d97706;color:#fff;}
.btn.warning:hover{background:#b45309;}

/* Sınav detay */
.exam-show-wrap{max-width:1100px;margin:0 auto;}
.exam-show-back{margin-bottom:20px;}
.exam-show-title{font-size:1.25rem;font-weight:600;color:var(--gray-900);margin:0 0 8px;}
.exam-show-desc{font-size:.875rem;color:var(--gray-600);margin:0 0 16px;}

/* Sınav detay kartı (sol — col-9) */
.exam-show-card{padding:0;overflow:hidden;}
.exam-show-image{width:100%;max-height:280px;overflow:hidden;background:var(--gray-100);}
.exam-show-image img{width:100%;height:100%;max-height:280px;object-fit:cover;display:block;}
.exam-show-body{padding:1.5rem;}

/* İstatistik kartı (sağ — col-3) */
.exam-stats-card{padding:0;overflow:hidden;position:sticky;top:84px;}
.exam-stats-head{
    display:flex;align-items:center;gap:8px;
    padding:14px 16px;border-bottom:1px solid var(--gray-100,#f3f4f6);
    background:var(--gray-50,#f9fafb);
    font-size:.8rem;font-weight:700;color:var(--gray-700,#374151);
    text-transform:uppercase;letter-spacing:.04em;
}
.exam-stats-list{padding:6px 0;}
.exam-stat-item{
    display:flex;align-items:center;gap:12px;
    padding:12px 16px;
    border-bottom:1px solid var(--gray-100,#f3f4f6);
}
.exam-stat-item:last-child{border-bottom:none;}
.exam-stat-icon{
    width:36px;height:36px;border-radius:9px;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;font-size:14px;
}
.exam-stat-info{flex:1;min-width:0;}
.exam-stat-label{
    font-size:.68rem;font-weight:600;color:var(--gray-500,#6b7280);
    text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px;
}
.exam-stat-value{font-size:1rem;font-weight:700;color:var(--gray-900,#111827);line-height:1.1;}
.exam-stat-sub{font-size:.7rem;color:var(--gray-400,#9ca3af);margin-top:2px;}
.exam-stats-empty{
    padding:24px 16px;text-align:center;
    display:flex;flex-direction:column;align-items:center;gap:6px;
}
.exam-stats-empty-text{font-size:.85rem;font-weight:600;color:var(--gray-600,#4b5563);}
.exam-stats-empty-sub{font-size:.75rem;color:var(--gray-400,#9ca3af);}
@media (max-width: 991.98px){
    .exam-stats-card{position:static;}
}

/* Sonuç sayfası kapsayıcı (site ile uyumlu wrap) */
.result-page{max-width:1100px;margin:0 auto;}

/* Basit tablo yardımcıları */
.section-title{font-size:1.125rem;font-weight:600;color:var(--gray-900);margin-bottom:12px;}
.table-wrap{overflow-x:auto;border:1px solid var(--gray-200);border-radius:.5rem;}
.data-table{width:100%;border-collapse:collapse;}
.data-table thead tr{border-bottom:1px solid var(--gray-100);}
.data-table th{text-align:left;padding:10px 16px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-500);}
.data-table td{padding:10px 16px;font-size:.875rem;color:var(--gray-900);border-bottom:1px solid var(--gray-100);}
.data-table tbody tr:last-child td{border-bottom:none;}
.text-muted{color:var(--gray-500) !important;}
.text-right{text-align:right;}