/* =========================================================================
   HEKİM — PIXEL KOMUTA MERKEZİ (CRT / mission-control / fütüristik)
   Fosfor neon, tarama çizgileri, HUD köşe parantezleri, pixel fontlar.
   ========================================================================= */
:root {
    --void:        #0b1018;   /* yumuşak derin slate */
    --deep:        #0f1722;
    --panel:       #18222e;
    --panel-2:     #1d2836;
    --panel-edge:  #324358;   /* yumuşak slate kenar */
    --surface-3:   #283648;

    --ink:         #e7eef6;   /* yumuşak beyaz */
    --ink-soft:    #aab8c9;
    --ink-dim:     #708296;

    --gold:        #e0b15c;   /* yumuşak amber */
    --gold-bright: #f0cd86;
    --gold-deep:   #9a7a3a;
    --teal:        #6fcfc2;   /* yumuşak teal (soft holo) */
    --coral:       #f08a72;
    --hal:         #e8617a;   /* yumuşak gül-kırmızı (uyarı) */
    --violet:      #a99cf0;   /* yumuşak lavanta (etiket) */

    --radius:      12px;
    --radius-sm:   8px;
    --glow-gold:   0 0 16px rgba(224,177,92,.28);
    --glow-teal:   0 0 16px rgba(111,207,194,.28);
    --shadow:      0 12px 38px rgba(0,0,0,.5);

    /* Türkçe'yi tam karşılayan temiz, yumuşak-fütüristik stack */
    --serif:       "Segoe UI", system-ui, "Inter", "Trebuchet MS", sans-serif;
    --term:        "Segoe UI", system-ui, "Inter", "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    min-height: 100%;
    /* Taban DÜZ renk (var(--void)) → içerik ne kadar kısa/uzun olursa olsun taşan her yeri tek
       renk doldurur, asla "kesik zemin"/dikiş olmaz. Temaya göre değişen GRADYAN ise içerikten
       BAĞIMSIZ, viewport'a sabit .bg-base katmanında (aşağıda). */
    background: var(--void);
    color: var(--ink);
    font-family: var(--term);
    font-size: 15px; line-height: 1.55;
    letter-spacing: .005em;
    -webkit-font-smoothing: antialiased;
}

/* Temaya göre değişen ana gradyan — viewport'a SABİT, içerik boyutundan bağımsız tam-ekran katman.
   (Eskiden html/body'deydi → kısa içerikte/uzun kaydırmada kesik görünüyordu.) */
.bg-base {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, var(--deep) 0%, var(--void) 100%);
}

/* yumuşak akışkan zemin: yavaşça gezinen holo ışık lekeleri (aurora) + çok ince grid */
.starfield {
    position: fixed; inset: -20%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(620px 460px at 22% 24%, rgba(111,207,194,.12), transparent 70%),
        radial-gradient(680px 520px at 78% 68%, rgba(224,177,92,.09), transparent 70%),
        radial-gradient(520px 520px at 60% 30%, rgba(169,156,240,.08), transparent 72%);
    animation: aurora 26s ease-in-out infinite alternate;
}
.starfield::after {  /* çok hafif grid dokusu */
    content: ""; position: absolute; inset: 20%;
    background-image:
        linear-gradient(rgba(111,207,194,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(111,207,194,.04) 1px, transparent 1px);
    background-size: 46px 46px, 46px 46px;
}
@keyframes aurora {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(2%, -1.5%) scale(1.06); }
    100% { transform: translate(-2.5%, 2%) scale(1.04); }
}

/* yumuşak vinyet */
body::after {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(130% 130% at 50% 40%, transparent 62%, rgba(0,0,0,.4) 100%);
}

.app { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 1.4rem 1.4rem 4rem; }

/* ====== Alt menü (native uygulama hissi) + sayfa başlık çubuğu ====== */
:root { --nav-h: 58px; }
/* içerik alt menünün ALTINDA kalmasın */
.app { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 16px); }
.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; justify-content: space-around; align-items: stretch; height: var(--nav-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: linear-gradient(180deg, rgba(26,22,20,.92), rgba(16,13,11,.98));
    border-top: 1px solid var(--panel-edge); backdrop-filter: blur(10px);
}
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; background: none; border: 0; color: var(--ink-dim); cursor: pointer; font: inherit;
    padding: 6px 0; transition: color .15s, transform .1s; }
.nav-ico { font-size: 1.25rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.nav-ico svg { width: 22px; height: 22px; display: block; opacity: .8; transition: opacity .15s; }
.nav-item.active .nav-ico svg { opacity: 1; filter: drop-shadow(0 0 6px rgba(224,177,92,.45)); }
.nav-lbl { font-size: .64rem; letter-spacing: .02em; }
.nav-item.active { color: var(--gold-bright); }
.nav-item.active .nav-ico { filter: none; transform: translateY(-1px); }
.nav-item:active { transform: scale(.92); }

/* Sayfa başlık çubuğu — her alt sayfanın üstünde sabit "← Başlık" (kenardan kenara) */
.page-head { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .7rem;
    margin: -1.4rem -1.4rem 1.1rem; padding: .75rem 1.1rem;
    padding-top: calc(.75rem + env(safe-area-inset-top, 0px));
    background: linear-gradient(180deg, rgba(28,23,21,.97), rgba(24,20,18,.88));
    border-bottom: 1px solid var(--panel-edge); backdrop-filter: blur(8px); }
.ph-back { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    background: var(--panel-2); border: 1px solid var(--panel-edge); color: var(--gold-bright);
    font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ph-back:hover { border-color: var(--gold); }
.ph-title { font-family: var(--serif); font-size: 1.14rem; font-weight: 700; color: var(--gold-bright); }
/* eski yüzen geri butonu artık yok; toast'ı alt menünün üstüne al */
#toast-host { bottom: calc(1.4rem + var(--nav-h) + env(safe-area-inset-bottom, 0px)); }

/* ------------------------------ Üst bar ------------------------------ */
.topbar {
    display: flex; align-items: center; gap: 1.4rem;
    flex-wrap: wrap;
    padding: 1rem 1.3rem;
    background: linear-gradient(180deg, rgba(42,36,32,.92), rgba(26,22,20,.8));
    border: 1px solid var(--panel-edge);
    border-radius: var(--radius);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(224,201,135,.08);
    backdrop-filter: blur(6px);
    /* sıradışı: sol üst & sağ alt köşe çentikli */
    clip-path: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.brand { display: flex; align-items: center; gap: .8rem; }
.brand-title {
    font-family: var(--serif);
    font-size: 1.8rem; font-weight: 700; letter-spacing: .28em;
    color: var(--gold-bright);
    text-shadow: var(--glow-gold);
}
.brand-sub { font-size: .68rem; color: var(--ink-dim); letter-spacing: .25em; text-transform: uppercase; }

/* "kor gözü" — amber/altın, yavaş nabız + hafif dönen halka */
.hal {
    position: relative;
    width: 30px; height: 30px; border-radius: 50%;
    background: radial-gradient(circle at 50% 42%, #fff4d8 0, #e0c987 16%, var(--gold) 42%, #6e4a1e 100%);
    box-shadow: 0 0 16px rgba(201,162,74,.75), inset 0 0 8px rgba(0,0,0,.5);
    animation: halpulse 3.6s ease-in-out infinite;
}
.hal::before {  /* dönen ince altın halka */
    content: ""; position: absolute; inset: -5px; border-radius: 50%;
    border: 1.5px solid transparent; border-top-color: rgba(224,201,135,.8); border-right-color: rgba(168,72,47,.5);
    animation: halospin 4s linear infinite;
}
.hal.off { background: radial-gradient(circle at 50% 45%, #3a352f 0, #221d19 60%, #000 100%); box-shadow: inset 0 0 8px #000; animation: none; }
.hal.off::before { animation: none; border-top-color: #4a3d31; border-right-color: transparent; }
@keyframes halpulse { 0%,100% { box-shadow: 0 0 10px rgba(201,162,74,.5), inset 0 0 8px rgba(0,0,0,.5);} 50% { box-shadow: 0 0 24px rgba(224,201,135,.95), inset 0 0 8px rgba(0,0,0,.5);} }
@keyframes halospin { to { transform: rotate(360deg); } }

/* tab nav */
.tabs { position: relative; display: flex; gap: .2rem; flex: 1; flex-wrap: wrap; }
.tab {
    position: relative;
    background: none; border: none;
    color: var(--ink-dim);
    font: inherit; font-size: .96rem; letter-spacing: .12em;
    text-transform: uppercase;
    padding: .55rem .95rem; cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color .25s, background .25s, transform .15s;
}
.tab:hover { color: var(--ink-soft); background: rgba(255,255,255,.04); }
.tab.active { color: var(--gold-bright); }
.tab:active { transform: scale(.96); }
.tab-ink {
    position: absolute; bottom: -3px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--gold), var(--teal));
    box-shadow: var(--glow-gold);
    transition: left .35s cubic-bezier(.6,.05,.2,1), width .35s cubic-bezier(.6,.05,.2,1);
}

.status-pods { display: flex; gap: .5rem; }
.pod {
    font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
    padding: .35rem .6rem; border-radius: 999px;
    border: 1px solid var(--panel-edge); color: var(--ink-dim);
    display: flex; align-items: center; gap: .35rem;
}
.pod .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-dim); }
.pod.ok .dot { background: var(--teal); box-shadow: var(--glow-teal); }
.pod.ok { color: var(--teal); border-color: rgba(125,155,94,.45); }
.pod.bad .dot { background: var(--hal); box-shadow: 0 0 10px var(--hal); }
.pod.bad { color: var(--coral); border-color: rgba(168,72,47,.45); }

/* ------------------------------ Sahne / görünümler ------------------------------ */
.stage { margin-top: 1.4rem; }
.panel-view { display: none; animation: warp .45s cubic-bezier(.2,.7,.2,1); }
.panel-view.active { display: block; }
@keyframes warp {
    from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(3px); }
    to   { opacity: 1; transform: none; filter: none; }
}

/* kartlar */
.card {
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
    border: 1px solid var(--panel-edge);
    border-radius: var(--radius);
    padding: 1.3rem 1.4rem;
    margin-bottom: 1.2rem;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}
.card::before {  /* üstte ince altın çizgi */
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), var(--teal), transparent);
    opacity: .6;
}
.card h2 { font-family: var(--serif); margin: 0 0 .7rem; font-size: 1.25rem; letter-spacing: .04em; color: var(--gold-bright); font-weight: 700; }
.dim { color: var(--ink-dim); font-size: .9rem; line-height: 1.5; }
.split { display: grid; grid-template-columns: 320px 1fr; gap: 1.2rem; align-items: start; }

/* tiles */
.grid-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.tile {
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--panel-edge); border-radius: var(--radius);
    padding: 1.1rem 1.2rem; position: relative; overflow: hidden;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--glow-gold); border-color: var(--gold-deep, #6b5320); }
.tile .t-label { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-dim); }
.tile .t-value { font-size: 2rem; font-weight: 700; color: var(--gold-bright); margin-top: .2rem; }
.tile .t-foot { font-size: .76rem; color: var(--teal); margin-top: .2rem; }

/* ------------------------------ formlar / butonlar ------------------------------ */
input[type=text], input[type=date], select, textarea {
    background: rgba(7,9,15,.6);
    border: 1px solid var(--panel-edge);
    color: var(--ink);
    font: inherit; font-size: .92rem;
    padding: .6rem .8rem; border-radius: var(--radius-sm);
    outline: none; transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: var(--glow-teal); }
::placeholder { color: var(--ink-dim); }

.btn {
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--panel-edge);
    color: var(--ink-soft);
    font: inherit; font-size: .9rem; letter-spacing: .06em;
    padding: .6rem 1.2rem;
    cursor: pointer; position: relative; overflow: hidden;
    /* sıradışı: köşeleri pahlı (notched) */
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
    box-shadow: inset 0 1px 0 rgba(224,201,135,.1);
    transition: transform .12s, color .2s, border-color .2s, box-shadow .2s, background .2s;
}
.btn:hover { color: var(--gold-bright); border-color: var(--gold); box-shadow: var(--glow-gold), inset 0 1px 0 rgba(224,201,135,.18); transform: translateY(-1px); }
.btn:active { transform: scale(.96); }
.btn.small { padding: .42rem .8rem; font-size: .82rem; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.btn.big { padding: .9rem 1.9rem; font-size: 1.05rem; }
.btn.glow { color: #20160a; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border-color: var(--gold-bright); font-weight: 700; text-shadow: 0 1px 0 rgba(255,255,255,.25); }
.btn.glow:hover { box-shadow: 0 0 26px rgba(201,162,74,.65); color: #1a1006; }
.btn:disabled { opacity: .5; cursor: wait; }
/* altın parıltı süzülmesi (hover'da soldan sağa geçer) */
.btn::before {
    content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(224,201,135,.35), transparent);
    transform: skewX(-18deg); transition: left .6s ease;
}
.btn:hover::before { left: 140%; }

.upload-row, .add-topic { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: .6rem; }
.upload-row input[type=text] { flex: 1; min-width: 160px; }
.add-topic input { flex: 1; }
.file-btn { display: inline-block; padding: .6rem 1rem; border: 1px dashed var(--panel-edge); border-radius: var(--radius-sm); cursor: pointer; color: var(--ink-soft); }
.file-btn:hover { border-color: var(--teal); color: var(--teal); }

.chip { font-size: .66rem; padding: .2rem .5rem; border-radius: 999px; border: 1px solid var(--panel-edge); color: var(--ink-dim); vertical-align: middle; }
.chip.ok { color: var(--teal); border-color: rgba(65,214,195,.4); }
.chip.bad { color: var(--coral); border-color: rgba(255,45,45,.35); }

/* ------------------------------ doküman listesi ------------------------------ */
.doc-item, .topic-item {
    display: flex; align-items: center; gap: .8rem;
    padding: .7rem .9rem; border-radius: var(--radius-sm);
    border: 1px solid transparent; transition: background .2s, border-color .2s;
}
.doc-item:hover, .topic-item:hover { background: rgba(255,255,255,.03); border-color: var(--panel-edge); }
.doc-item .d-main, .topic-item .t-main { flex: 1; }
.doc-item .d-title { color: var(--ink); }
.doc-item .d-meta, .topic-item .t-meta { font-size: .76rem; color: var(--ink-dim); }
.kind-tag { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; padding: .15rem .5rem; border-radius: 999px; background: rgba(143,123,255,.15); color: var(--violet); }
.st-hazir { color: var(--teal); } .st-hata { color: var(--coral); } .st-isleniyor { color: var(--gold-bright); }
.icon-btn { background: none; border: none; color: var(--ink-dim); cursor: pointer; font-size: 1rem; padding: .2rem .4rem; border-radius: 6px; }
.icon-btn:hover { color: var(--coral); background: rgba(255,45,45,.1); }

/* topic list */
.topic-item.sel { background: rgba(217,178,90,.1); border-color: var(--gold); }
.topic-item .t-name { color: var(--ink); cursor: pointer; }

/* ------------------------------ anlatım ------------------------------ */
.explain-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.explain-actions { display: flex; gap: .4rem; }
#explain-body { line-height: 1.65; }
#explain-body h2 { font-size: 1.05rem; color: var(--teal); margin: 1.1rem 0 .5rem; letter-spacing: .08em; }
#explain-body ul { margin: .3rem 0 .8rem; padding-left: 1.2rem; }
#explain-body li { margin: .3rem 0; color: var(--ink-soft); }
#explain-body strong { color: var(--gold-bright); }
.mermaid-box { background: rgba(7,9,15,.6); border: 1px solid var(--panel-edge); border-radius: var(--radius-sm); padding: 1rem; margin: .8rem 0; text-align: center; overflow-x: auto; }
.sources { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--panel-edge); }
.source-pill { display: inline-block; font-size: .72rem; color: var(--ink-dim); background: rgba(255,255,255,.04); border: 1px solid var(--panel-edge); border-radius: 999px; padding: .2rem .6rem; margin: .2rem; }

/* loader: monolit tarama çizgisi */
.thinking { display: flex; align-items: center; gap: .8rem; color: var(--ink-dim); padding: 1rem 0; }
.scanbar { width: 120px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.scanbar::after { content:""; display:block; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, var(--teal), transparent); animation: scan 1.1s ease-in-out infinite; }
@keyframes scan { 0%{transform: translateX(-120%);} 100%{transform: translateX(320%);} }

/* ------------------------------ test ------------------------------ */
.q-block { padding: 1rem 0; border-bottom: 1px solid var(--panel-edge); }
.q-stem { color: var(--ink); margin-bottom: .7rem; font-size: 1rem; }
.opt {
    display: block; width: 100%; text-align: left;
    background: rgba(7,9,15,.5); border: 1px solid var(--panel-edge);
    color: var(--ink-soft); padding: .6rem .9rem; margin: .35rem 0;
    border-radius: var(--radius-sm); cursor: pointer;
    transition: border-color .2s, background .2s, transform .1s;
}
.opt:hover { border-color: var(--teal); }
.opt.chosen { border-color: var(--gold); background: rgba(217,178,90,.12); color: var(--gold-bright); }
.opt.correct { border-color: var(--teal); background: rgba(65,214,195,.15); color: var(--teal); }
.opt.wrong { border-color: var(--hal); background: rgba(255,45,45,.12); color: var(--coral); }
.q-exp { font-size: .85rem; color: var(--ink-dim); margin-top: .5rem; padding-left: .5rem; border-left: 2px solid var(--teal); }
.test-foot { display: flex; align-items: center; gap: 1.2rem; margin-top: 1rem; }
#test-score { font-size: 1.2rem; color: var(--gold-bright); }

/* ------------------------------ flashcard / SRS ------------------------------ */
.srs-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.srs-stats .s { text-align: center; }
.srs-stats .s b { display: block; font-size: 1.8rem; color: var(--gold-bright); }
.srs-stats .s span { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-dim); }
.srs-stage { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.flashcard {
    width: 100%; max-width: 560px; min-height: 170px;
    background: linear-gradient(160deg, var(--panel-2), var(--panel));
    border: 1px solid var(--gold); border-radius: var(--radius);
    box-shadow: var(--glow-gold);
    padding: 1.6rem; margin-bottom: 1.2rem;
    display: flex; flex-direction: column; justify-content: center;
    cursor: pointer; transition: transform .3s;
}
.flashcard:hover { transform: translateY(-2px); }
.flash-front { font-size: 1.25rem; color: var(--ink); text-align: center; }
.flash-back { font-size: 1.05rem; color: var(--teal); text-align: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--panel-edge); }
#srs-controls { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.q-btn { padding: .6rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--panel-edge); background: var(--panel-2); color: var(--ink-soft); cursor: pointer; transition: all .15s; }
.q-btn:hover { transform: translateY(-2px); }
.q-btn.again { border-color: var(--hal); color: var(--coral); }
.q-btn.hard { border-color: var(--coral); color: var(--coral); }
.q-btn.good { border-color: var(--teal); color: var(--teal); }
.q-btn.easy { border-color: var(--gold); color: var(--gold-bright); }

/* ------------------------------ sohbet / monolit ------------------------------ */
.chat-hero { text-align: center; padding: 3rem 1.4rem; }
.monolith {
    width: 70px; height: 150px; margin: 0 auto 1.5rem;
    background: linear-gradient(180deg, #05070d, #0c1018);
    border: 1px solid #1d2740;
    box-shadow: 0 0 40px rgba(65,214,195,.15), inset 0 0 20px rgba(0,0,0,.8);
    animation: float 5s ease-in-out infinite;
}
@keyframes float { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-12px);} }

/* ------------------------------ toast ------------------------------ */
#toast-host { position: fixed; bottom: 1.4rem; right: 1.4rem; z-index: 50; display: flex; flex-direction: column; gap: .5rem; }
.toast {
    background: var(--panel-2); border: 1px solid var(--panel-edge);
    border-left: 3px solid var(--teal);
    padding: .7rem 1rem; border-radius: var(--radius-sm);
    box-shadow: var(--shadow); color: var(--ink);
    animation: slidein .3s ease;
}
.toast.error { border-left-color: var(--hal); }
.toast.ok { border-left-color: var(--teal); }
@keyframes slidein { from { opacity:0; transform: translateX(30px);} to{opacity:1; transform:none;} }

.empty { color: var(--ink-dim); font-style: italic; padding: 1rem 0; }

/* ---- v2 ekleri ---- */
.gilt-card { border-color: var(--gold); }
.quick-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.plan-sec { margin: .6rem 0; }
.plan-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-dim); margin-bottom: .3rem; }

.weak-row { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; }
.weak-row span:first-child { flex: 1; color: var(--ink-soft); }
.weak-bar { width: 90px; height: 6px; background: var(--surface-3, #20283d); border-radius: 4px; overflow: hidden; }
.weak-fill { height: 100%; border-radius: 4px; }
.acc-low { background: var(--hal); color: var(--coral); }
.acc-mid { background: var(--gold); color: var(--gold-bright); }
.acc-hi  { background: var(--teal); color: var(--teal); }
b.acc-low { background: none; } b.acc-mid { background: none; } b.acc-hi { background: none; }

.trend-svg { width: 100%; height: 130px; }
.wrong-item { padding: .5rem 0; border-bottom: 1px solid var(--panel-edge); }
.wi-q { color: var(--ink-soft); font-size: .9rem; }
.mini-link { color: var(--teal); cursor: pointer; text-decoration: underline; font-size: .82rem; }
.mini-link:hover { color: var(--gold-bright); }
.why-box { background: rgba(7,9,15,.5); border-left: 2px solid var(--teal); padding: .6rem .8rem; border-radius: var(--radius-sm); margin-top: .5rem; line-height: 1.55; color: var(--ink-soft); font-size: .9rem; }

/* Test öncesi ayar paneli (zorluk + soru sayısı) */
.test-setup { display: flex; flex-direction: column; gap: 1rem; max-width: 460px; }
.ts-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.ts-row > label { min-width: 90px; color: var(--ink-soft); font-size: .9rem; }
.ts-row input[type=range] { flex: 1; min-width: 140px; accent-color: var(--teal); }
.ts-nv { min-width: 2.2rem; text-align: center; font-weight: 700; color: var(--gold-bright); font-size: 1.05rem; }
.seg { display: inline-flex; border: 1px solid var(--panel-edge); border-radius: var(--radius-sm); overflow: hidden; }
.seg button { background: var(--panel-2); color: var(--ink-soft); border: none; padding: .42rem .9rem; cursor: pointer; font-size: .85rem; border-right: 1px solid var(--panel-edge); }
.seg button:last-child { border-right: none; }
.seg button.on { background: var(--teal); color: #0a1016; font-weight: 700; }

/* Bildirimler (Duolingo tarzı) */
.msg-form { display: flex; flex-direction: column; gap: .55rem; max-width: 540px; }
.msg-form input[type=text], .msg-form textarea { width: 100%; }
.msg-row { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.msg-row label { color: var(--ink-soft); font-size: .9rem; display: inline-flex; align-items: center; gap: .4rem; }
.msg-days { display: flex; gap: .4rem; flex-wrap: wrap; }
.day-chip { display: inline-flex; align-items: center; gap: .25rem; background: var(--panel-2); border: 1px solid var(--panel-edge); border-radius: var(--radius-sm); padding: .25rem .5rem; font-size: .82rem; color: var(--ink-soft); cursor: pointer; }
.msg-item { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .2rem; border-bottom: 1px solid var(--panel-edge); }
.msg-item.off { opacity: .55; }
.mi-main { flex: 1; min-width: 0; }
.mi-title { font-weight: 600; color: var(--ink); }
.mi-body { color: var(--ink-soft); font-size: .9rem; margin: .15rem 0; }
.mi-meta { font-size: .76rem; color: var(--ink-dim); }
.mi-acts { display: flex; gap: .2rem; flex-shrink: 0; }

/* Sınıf hataları — ders → konu kırılımı */
.mk-course { margin-bottom: .55rem; border: 1px solid var(--panel-edge); border-radius: var(--radius-sm); background: rgba(7,9,15,.25); overflow: hidden; }
.mk-chead { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; width: 100%; text-align: left;
    background: none; border: none; cursor: pointer; color: var(--ink); padding: .6rem .7rem; font-size: .95rem; }
.mk-chead:hover { background: rgba(255,255,255,.03); }
.mk-chead b { font-size: .98rem; color: var(--ink); }
.mk-caret { color: var(--gold); font-size: .8rem; width: .9rem; display: inline-block; }
.mk-acc { font-weight: 700; padding: .05rem .4rem; border-radius: 6px; font-size: .8rem; }
.mk-acc.acc-low { color: var(--coral); } .mk-acc.acc-mid { color: var(--gold-bright); } .mk-acc.acc-hi { color: var(--teal); }
.mk-topics { padding: 0 .7rem .5rem; }
.mk-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.mk-table th { text-align: left; color: var(--ink-dim); font-weight: 600; font-size: .76rem; border-bottom: 1px solid var(--panel-edge); padding: .25rem .3rem; }
.mk-table td { padding: .28rem .3rem; border-bottom: 1px solid rgba(255,255,255,.04); color: var(--ink-soft); }
.mk-table td.acc-low { color: var(--coral); font-weight: 700; } .mk-table td.acc-mid { color: var(--gold-bright); font-weight: 700; } .mk-table td.acc-hi { color: var(--teal); font-weight: 700; }

.illus-box { text-align: center; margin: .6rem 0; }
.illus-box img { max-width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--gold); box-shadow: var(--glow-gold); }

/* ödev */
.hw-item { border: 1px solid var(--panel-edge); border-radius: var(--radius-sm); padding: .9rem 1rem; margin-bottom: .8rem; }
.hw-item.done { opacity: .55; }
.hw-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.hw-head b { color: var(--gold-bright); }
.hw-head .dim { flex: 1; }
.hw-body { line-height: 1.55; }
.hw-body h2 { font-size: .95rem; color: var(--teal); margin: .6rem 0 .3rem; }
.hw-body ul { margin: .2rem 0 .6rem; padding-left: 1.2rem; }
.hw-body li { color: var(--ink-soft); margin: .2rem 0; }

/* sohbet */
/* Sohbet (İbni Sina) — mobil-öncelikli, baloncuk tarzı sohbet penceresi */
.chat-card { display: flex; flex-direction: column; min-height: 55vh;
    height: calc(100dvh - 210px); max-height: 760px; }   /* üst bar + sayfa başlığı + alt menü payı */
.chat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .6rem .15rem 1rem;
    display: flex; flex-direction: column; gap: .55rem; -webkit-overflow-scrolling: touch; }
/* her satır: avatar + baloncuk */
.msg { max-width: 86%; padding: .6rem .85rem; border-radius: 16px; line-height: 1.5;
    position: relative; word-break: break-word; box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.msg.user { align-self: flex-end; border-bottom-right-radius: 5px;
    background: linear-gradient(180deg, rgba(217,178,90,.20), rgba(217,178,90,.12));
    border: 1px solid var(--gold-deep, #6b5320); color: var(--gold-bright); }
.msg.assistant { align-self: flex-start; border-bottom-left-radius: 5px;
    background: var(--panel-2); border: 1px solid var(--panel-edge); color: var(--ink-soft); }
.msg.assistant::before { content: "⚕"; position: absolute; left: -34px; bottom: 0;
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--panel-2); border: 1px solid var(--gold-deep, #6b5320);
    color: var(--gold-bright); font-size: .9rem; }
.chat-log .msg.assistant { margin-left: 34px; }   /* avatara yer aç */
.msg.assistant.typing { color: var(--ink-dim); font-style: italic; letter-spacing: 2px; }
/* giriş çubuğu: alta yapışır, telefon güvenli alanını korur */
.chat-input-row { display: flex; gap: .5rem; align-items: center; padding: .6rem .15rem;
    margin-top: .4rem; position: sticky; bottom: var(--nav-h); background: var(--panel);
    border-top: 1px solid var(--panel-edge); }   /* alt menünün ÜSTÜnde dursun */
.chat-input-row input { flex: 1 1 auto; min-width: 0; min-height: 44px; border-radius: 22px;
    padding: .55rem 1rem; font-size: 16px; }   /* 16px → iOS odakta yakınlaştırma yapmaz */
.chat-input-row .btn { min-height: 44px; border-radius: 22px; padding: .55rem 1.1rem; }

/* ayar */
.field { margin-bottom: 1.1rem; }
.field > label { display: block; font-size: .8rem; letter-spacing: .08em; color: var(--ink-dim); margin-bottom: .35rem; text-transform: uppercase; }
.field input, .field select { width: 100%; max-width: 420px; }
code { background: rgba(7,9,15,.6); padding: .1rem .35rem; border-radius: 5px; color: var(--teal); font-size: .85rem; }

/* ============ Hareketli tab ikonları + sıradışı şekiller ============ */
.tab::before {
    display: inline-block; margin-right: .35rem; font-size: .95em;
    transition: transform .25s ease;
}
.tab[data-tab="panel"]::before  { content: "🏛"; }
.tab[data-tab="slayt"]::before  { content: "🖼"; }
.tab[data-tab="kaynak"]::before { content: "📚"; }
.tab[data-tab="konular"]::before{ content: "🧠"; }
.tab[data-tab="test"]::before   { content: "✒"; }
.tab[data-tab="tekrar"]::before { content: "🔁"; }
.tab[data-tab="hata"]::before   { content: "⚷"; }
.tab[data-tab="odev"]::before   { content: "📜"; }
.tab[data-tab="sohbet"]::before { content: "💬"; }
.tab[data-tab="ayar"]::before   { content: "⚙"; }
.tab:hover::before  { transform: translateY(-2px) rotate(-8deg) scale(1.18); }
.tab.active::before { animation: iconpop .5s ease; }
@keyframes iconpop { 0%{transform:scale(1);} 40%{transform:scale(1.35) rotate(6deg);} 100%{transform:scale(1);} }
.tab.active .nav-mark, .tab.active { text-shadow: 0 0 10px rgba(201,162,74,.35); }

/* tab altı gösterge: altın → fitil kırmızısı (sıcak) */
.tab-ink { background: linear-gradient(90deg, var(--gold), var(--hal)) !important; }

/* kartlara hafif çentikli üst-sağ köşe (sıradışı, kütüphane mührü hissi) */
.card { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.card::before { background: linear-gradient(90deg, transparent, var(--gold), var(--hal), transparent) !important; }

/* tile: köşe pahı + hover'da altın kalkış */
.tile { clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.tile .t-value { font-family: var(--serif); }

/* flashcard: mum ışığı parıltısı nabzı */
.flashcard { animation: candle 4s ease-in-out infinite; }
@keyframes candle { 0%,100%{ box-shadow: 0 0 14px rgba(201,162,74,.30);} 50%{ box-shadow: 0 0 26px rgba(201,162,74,.55);} }

/* başlık seç: parşömen serif sıcaklığı */
#explain-body h2, .hw-body h2, .besin-chart-h { font-family: var(--serif); }

/* ============ v4: login + kart ızgarası + kütüphane ============ */
.login-screen { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; }
.login-box {
    width: 340px; max-width: 90vw; padding: 2rem 1.8rem;
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    border: 1px solid var(--gold); border-radius: var(--radius);
    box-shadow: var(--shadow), var(--glow-gold);
    display: flex; flex-direction: column; gap: .7rem;
    clip-path: polygon(0 16px, 16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}
.login-box input { width: 100%; box-sizing: border-box; display: block;
    padding: .75rem .9rem; margin-bottom: .7rem; font-size: 1rem; line-height: 1.3; height: auto; }
.login-err { color: var(--coral); font-size: .85rem; text-align: center; min-height: 1rem; }

/* Günlük giriş serisi çipi (üst bar, sade) */
.streak-chip { display: flex; align-items: center; gap: .25rem; padding: .2rem .55rem;
    border: 1px solid rgba(224,160,48,.45); border-radius: 999px;
    background: rgba(224,160,48,.08); font-family: var(--term, monospace);
    font-size: .82rem; font-weight: 700; color: var(--gold-bright); line-height: 1;
    user-select: none; transition: opacity .25s, filter .25s; }
.streak-chip .streak-ico { font-size: .95rem; filter: drop-shadow(0 0 4px rgba(255,150,40,.6)); }
.streak-chip.cold { opacity: .55; filter: grayscale(.6); border-color: var(--panel-edge); }
.streak-chip.cold .streak-ico { filter: grayscale(.7); }
.user-chip { display: flex; align-items: center; gap: .5rem; }
.uc-name { color: var(--gold-bright); font-weight: 600; }
.uc-role { font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--panel-edge); color: var(--ink-dim); }
.uc-role.admin { color: var(--hal); border-color: rgba(168,72,47,.5); }
.uc-role.user { color: var(--teal); border-color: rgba(125,155,94,.5); }
.uc-net { font-size: .64rem; letter-spacing: .04em; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--panel-edge); }
.uc-net.on { color: var(--teal); border-color: rgba(111,207,194,.45); }
.uc-net.off { color: var(--coral); border-color: rgba(240,138,114,.5); }
.uc-out { background: none; border: none; color: var(--ink-dim); cursor: pointer; font-size: .8rem; text-decoration: underline; }
.uc-out:hover { color: var(--coral); }

.kurul-banner {
    display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
    padding: 1rem 1.4rem; margin-bottom: 1.4rem;
    background: linear-gradient(110deg, rgba(168,72,47,.14), rgba(201,162,74,.06));
    border: 1px solid var(--panel-edge); border-radius: var(--radius);
    border-left: 4px solid var(--gold);
}
.kb-k { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--gold-bright); letter-spacing: .08em; }
.kb-theme { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); flex: 1; }
.kb-exam { font-size: .8rem; color: var(--ink-dim); }

/* Günlük plan şeridi: bugün ne yapmalı (vadesi gelen tekrar + zayıf konu + yeni slayt) */
.daily-plan {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
    padding: .55rem .9rem; margin: -.6rem 0 1.2rem;
    background: rgba(43,158,144,.07); border: 1px solid var(--panel-edge);
    border-left: 3px solid var(--teal); border-radius: var(--radius);
}
.dp-label { font-family: var(--serif); font-size: .82rem; color: var(--ink-dim); letter-spacing: .04em; text-transform: uppercase; }
.dp-chip {
    font-size: .82rem; color: var(--ink); padding: .25rem .6rem; border-radius: 999px;
    background: rgba(255,255,255,.04); border: 1px solid var(--panel-edge);
}
button.dp-chip { cursor: pointer; }
.dp-chip.hot { color: var(--gold-bright); border-color: var(--gold); background: rgba(201,162,74,.12); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.1rem; }
.big-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
    padding: 1.4rem 1.3rem; min-height: 130px;
    background: linear-gradient(160deg, var(--panel-2), var(--panel));
    border: 1px solid var(--panel-edge); color: var(--ink);
    cursor: pointer; position: relative; overflow: hidden; text-align: left;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.big-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), var(--hal), transparent); opacity: .55; }
.big-card:hover { transform: translateY(-4px); box-shadow: var(--glow-gold); border-color: var(--gold); }
.bc-icon { font-size: 2.1rem; line-height: 1; transition: transform .25s; color: var(--gold-bright); }
/* Çizgi-ikon: 1em = .bc-icon font boyutu (≈32px); hover/animasyon span'a uygulandığı için bozulmaz */
.bc-icon .ic { width: 1em; height: 1em; display: block; }
.big-card:hover .bc-icon { color: var(--gold-bright); }
.big-card:hover .bc-icon { transform: scale(1.18) rotate(-6deg); }
.bc-title { font-family: var(--serif); font-size: 1.18rem; font-weight: 700; color: var(--gold-bright); }
.bc-sub { font-size: .8rem; color: var(--ink-dim); }

/* İçerik alanı = ayrı bir "sekme" gibi: temiz, çerçeveli, kendi başlığıyla açılır */
.content-host { }
.content-host.page-enter { animation: pageIn .2s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.back-btn { margin-bottom: 1rem; }
/* Alt sayfalarda üstteki müzik + pomodoro araçları GİZLİ (yalnızca ana ekranda görünür) →
   her sayfa sade, tek-amaçlı bir sekme gibi durur. Marka + kullanıcı çipi kalır (kimlik/gezinme). */
/* ALT SAYFA = TAM EKRAN: HEKİM topbar'ı yalnız ana ekranda; içerik açılınca tamamen gizlenir */
body.in-view .topbar { display: none; }
.vhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.vprog { font-size: .82rem; color: var(--ink-dim); }
.topic-chip { display: inline-block; padding: .5rem .9rem; background: rgba(201,162,74,.1); border: 1px solid var(--gold-deep); border-radius: var(--radius-sm); color: var(--ink); margin: .4rem 0; }

/* kurul */
.kurul-courses { margin-top: .8rem; }
.kc-block { margin-bottom: 1rem; border-bottom: 1px solid var(--panel-edge); padding-bottom: .6rem; }
.kc-head { display: flex; align-items: center; gap: .7rem; font-family: var(--serif); font-size: 1.05rem; color: var(--gold-bright); margin-bottom: .3rem; }
.kc-list { list-style: none; padding: 0; margin: 0; columns: 2; }
.kc-list li { padding: .2rem 0; color: var(--ink-soft); font-size: .9rem; break-inside: avoid; }
.kc-list li span { cursor: pointer; }
.kc-list li span:hover { color: var(--gold-bright); text-decoration: underline; }
.kc-list li.done { color: var(--teal); }
.kc-list li.done::before { content: "✓ "; }

/* kütüphane */
.lib-add { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.lib-add input { flex: 1; min-width: 120px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .9rem; }
.lib-item {
    display: flex; flex-direction: column; gap: .2rem; padding: 1rem;
    background: var(--panel-2); border: 1px solid var(--panel-edge); border-radius: var(--radius-sm);
    text-decoration: none; color: var(--ink); position: relative; transition: transform .15s, border-color .15s;
}
.lib-item:hover { transform: translateY(-2px); border-color: var(--gold); }
.li-icon { font-size: 1.4rem; }
.li-title { color: var(--gold-bright); font-weight: 600; }
.li-meta { font-size: .76rem; color: var(--ink-dim); }
.li-del { position: absolute; top: .4rem; right: .5rem; color: var(--ink-dim); cursor: pointer; }
.li-del:hover { color: var(--coral); }

.card.locked { border-color: var(--panel-edge); opacity: .9; }

@media (max-width: 820px) {
    .split { grid-template-columns: 1fr; }
    .kc-list { columns: 1; }
}

/* =====================================================================
   YUMUŞAK HOLO KATMANI (soft futuristic — temiz font, nazik hareket)
   ===================================================================== */

/* başlıklar: temiz font, yumuşak vurgu (neon yok) */
.brand-title { font-family: var(--serif); font-weight: 600; font-size: 1.55rem !important; letter-spacing: .18em; color: var(--ink); text-shadow: 0 0 18px rgba(111,207,194,.3); }
.brand-sub { font-family: var(--term); font-size: .68rem; color: var(--ink-dim); letter-spacing: .22em; }
.brand-sub::before { content: "▸ "; color: var(--teal); }
.card h2, .vhead h2 { font-family: var(--serif); font-weight: 600; font-size: 1.12rem; letter-spacing: .02em; color: var(--gold-bright); line-height: 1.3; }
.card h2::before, .vhead h2::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--teal); margin-right: .5rem; box-shadow: var(--glow-teal); vertical-align: middle; }
.kb-k { font-family: var(--serif) !important; font-weight: 700; font-size: 1.2rem !important; letter-spacing: .1em; color: var(--teal) !important; text-shadow: 0 0 14px rgba(111,207,194,.35); }
.kb-theme { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; }
.bc-title { font-family: var(--serif); font-weight: 600; font-size: 1.05rem !important; line-height: 1.25; letter-spacing: .01em; color: var(--ink); }
.t-value, .srs-stats .s b { font-family: var(--serif) !important; font-weight: 700; }
.dim, .bc-sub, .d-meta, .li-meta, .vprog, .kb-exam { font-family: var(--term); }

/* paneller: yumuşak yuvarlak, hafif cam, çok ince köşe işareti */
.card, .login-box { clip-path: none !important; border: 1px solid var(--panel-edge); border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(29,40,54,.9), rgba(24,34,46,.9));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), var(--shadow); backdrop-filter: blur(4px); }
.card::before, .card::after { content: ""; position: absolute; width: 12px; height: 12px; background: none !important; pointer-events: none; opacity: .5; }
.card::before { top: 8px; left: 8px; border-top: 1.5px solid var(--teal); border-left: 1.5px solid var(--teal); border-top-left-radius: 4px; right: auto; }
.card::after  { bottom: 8px; right: 8px; border-bottom: 1.5px solid var(--gold-deep); border-right: 1.5px solid var(--gold-deep); border-bottom-right-radius: 4px; }

/* topbar: yumuşak şerit, nazik nefes alan durum */
.topbar { clip-path: none !important; border: 1px solid var(--panel-edge); border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(29,40,54,.92), rgba(20,29,40,.86)); position: relative; backdrop-filter: blur(6px); }
/* "● online" rozeti kaldırıldı (sadelik) */
@keyframes breathe { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

/* yumuşak nefes alan orb */
.hal { background: radial-gradient(circle at 42% 38%, #eafffb 0, var(--teal) 42%, #1d5b54 100%) !important;
    box-shadow: 0 0 16px rgba(111,207,194,.5), inset 0 0 6px rgba(0,0,0,.3) !important; border-radius: 50%; animation: orbpulse 4s ease-in-out infinite !important; }
.hal::before { border-top-color: rgba(240,205,134,.7) !important; border-right-color: rgba(111,207,194,.5) !important; animation: halospin 7s linear infinite !important; }
.hal.off { background: radial-gradient(circle at 50% 50%, #2a3645 0, #141d28 70%, #0b1018) !important; box-shadow: inset 0 0 6px #000 !important; animation: none !important; }
@keyframes orbpulse { 0%,100% { box-shadow: 0 0 12px rgba(111,207,194,.4), inset 0 0 6px rgba(0,0,0,.3); } 50% { box-shadow: 0 0 22px rgba(111,207,194,.7), inset 0 0 6px rgba(0,0,0,.3); } }

/* butonlar: yumuşak yuvarlak, nazik */
.btn { clip-path: none !important; border-radius: 999px; font-family: var(--term); font-size: .9rem; letter-spacing: .03em; text-transform: none;
    background: var(--surface-3); border: 1px solid var(--panel-edge); color: var(--ink-soft); box-shadow: none; }
.btn:hover { background: rgba(111,207,194,.12); color: var(--teal); border-color: var(--teal); box-shadow: var(--glow-teal); transform: translateY(-1px); }
.btn.glow { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #20160a; border-color: var(--gold-bright); font-weight: 600; }
.btn.glow:hover { background: var(--gold-bright); box-shadow: var(--glow-gold); color: #1a1206; }

/* girişler: yumuşak */
input[type=text], input[type=password], input[type=date], select, textarea {
    font-family: var(--term); font-size: .95rem; background: rgba(11,16,24,.6);
    border: 1px solid var(--panel-edge); color: var(--ink); border-radius: var(--radius-sm); }
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: var(--glow-teal); }
::placeholder { color: var(--ink-dim); }

.pod { font-family: var(--term); font-size: .72rem; border-radius: 999px; border-color: var(--panel-edge); }

/* büyük kartlar: yumuşak modüller — nazikçe süzülür, üzerinden ışık geçer */
/* FPS: backdrop-filter kaldırıldı (12+ kartta ayrı blur katmanı = mobilde ana kare düşürücü);
   zemin zaten ~%90 opak, görsel fark yok. floaty/sheen transform-tabanlı, GPU'da ucuz. */
.big-card { clip-path: none !important; border: 1px solid var(--panel-edge); border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(29,40,54,.92), rgba(22,33,45,.96));
    animation: floaty 7s ease-in-out infinite; }
.big-card::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius); pointer-events: none;
    background: linear-gradient(120deg, transparent 30%, rgba(111,207,194,.10) 50%, transparent 70%);
    background-size: 220% 100%; background-position: 120% 0; transition: none; animation: sheen 6s ease-in-out infinite; opacity: .8; }
.big-card::after { content: ""; position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: var(--glow-teal); opacity: .55; animation: breathe 3s ease-in-out infinite; }
.big-card:hover { border-color: var(--teal); box-shadow: var(--glow-teal); transform: translateY(-5px); }
.big-card:hover .bc-icon { transform: scale(1.16) translateY(-2px); }
.bc-icon { font-size: 2rem; transition: transform .3s ease; }
.big-card:nth-child(2n) { animation-delay: -2.3s; }
.big-card:nth-child(3n) { animation-delay: -4.1s; }
.big-card:nth-child(4n) { animation-delay: -1.2s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes sheen { 0%,100% { background-position: 130% 0; } 50% { background-position: -30% 0; } }

.login-box { box-shadow: 0 0 40px rgba(111,207,194,.18), var(--shadow) !important; }
.login-box .btn { width: 100%; }

.kurul-banner { clip-path: none; border-radius: var(--radius); border: 1px solid var(--panel-edge); border-left: 3px solid var(--teal);
    background: linear-gradient(110deg, rgba(111,207,194,.08), rgba(224,177,92,.04)); }

.mermaid-box { background: rgba(11,16,24,.6); border-color: var(--panel-edge); border-radius: var(--radius-sm); }
.topic-chip { border-radius: 999px; border-color: var(--teal); background: rgba(111,207,194,.08); }
.uc-name { font-family: var(--serif); font-weight: 600; color: var(--teal); }

/* ===================== TOPBAR ARAÇLARI (müzik + pomodoro) ===================== */
.topbar-tools { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.tool-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: var(--term); font-size: .82rem; letter-spacing: .04em;
    color: var(--ink-soft); cursor: pointer;
    background: rgba(11,16,24,.5); border: 1px solid var(--panel-edge);
    border-radius: 999px; padding: .42rem .8rem;
    transition: color .2s, border-color .2s, box-shadow .2s, transform .12s;
}
.tool-btn:hover { color: var(--gold-bright); border-color: var(--gold); box-shadow: var(--glow-gold); }
.tool-btn:active { transform: scale(.95); }
.tool-btn .tool-ico { font-size: 1.05rem; line-height: 1; display: flex; align-items: center; }
.tool-btn .tool-ico svg { width: 18px; height: 18px; display: block; }
.music-btn { width: 38px; height: 38px; justify-content: center; padding: 0; }
.music-btn:not(.muted) { color: var(--teal); border-color: rgba(111,207,194,.5); box-shadow: var(--glow-teal); }
.music-btn:not(.muted) .tool-ico { animation: notePulse 2.4s ease-in-out infinite; }
.music-btn.muted { color: var(--ink-dim); opacity: .65; }
.music-btn.muted .tool-ico svg { opacity: .55; }
@keyframes notePulse { 0%,100% { transform: translateY(0); opacity: .85; } 50% { transform: translateY(-2px); opacity: 1; } }

/* ===================== POMODORO: popup (Pomotroid esinli) ===================== */
.pomo-modal {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(7,11,17,.74); backdrop-filter: blur(6px);
}
.pomo-card {
    --pomo-accent: var(--coral);
    position: relative; width: min(340px, 88vw); padding: 1rem 1.3rem 1.3rem;
    background: linear-gradient(180deg, rgba(29,40,54,.97), rgba(18,26,37,.99));
    border: 1px solid var(--panel-edge); border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(224,201,135,.06);
    animation: pomoIn .3s cubic-bezier(.2,.8,.2,1);
}
.pomo-card.focus { --pomo-accent: var(--coral); }
.pomo-card.short { --pomo-accent: var(--teal); }
.pomo-card.long  { --pomo-accent: var(--violet); }
@keyframes pomoIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

.pomo-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .2rem; }
.pomo-mini { background: none; border: none; cursor: pointer; color: var(--ink-dim); font-size: 1rem;
    width: 30px; height: 30px; border-radius: 8px; transition: color .2s, background .2s; }
.pomo-mini:hover { color: var(--gold-bright); background: rgba(255,255,255,.05); }
.pomo-x:hover { color: var(--coral); }

.pomo-ring { position: relative; width: 220px; height: 220px; margin: .4rem auto .2rem; }
/* hale ışığı kutuya HAPSOLMASIN: SVG taşmaya açık + arkada yumuşak ortam ışığı (abartısız) */
.pomo-ring::before { content: ""; position: absolute; inset: -26px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--pomo-accent) 16%, transparent) 0%, transparent 68%);
    transition: background .4s; }
.pomo-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.pomo-ring-svg circle { fill: none; stroke-width: 5; }
.pr-bg { stroke: var(--panel-edge); opacity: .4; }
.pr-fg { stroke: var(--pomo-accent); stroke-linecap: round;
    filter: drop-shadow(0 0 10px var(--pomo-accent)); transition: stroke-dashoffset 1s linear, stroke .4s; }
.pomo-count {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-size: 3.1rem; font-weight: 300;
    color: var(--ink); letter-spacing: .02em;
    cursor: pointer; border-radius: 50%;
}
.pomo-count:hover { color: var(--gold-bright); }
.pomo-count-input {
    width: 130px; text-align: center; font-family: var(--serif); font-size: 2.6rem; font-weight: 300;
    background: rgba(255,255,255,.05); color: var(--ink); border: 1px solid var(--pomo-accent);
    border-radius: 12px; padding: .1rem .3rem; outline: none;
}
.pomo-state {
    text-align: center; font-family: var(--term); font-size: .82rem;
    letter-spacing: .35em; text-transform: uppercase; color: var(--pomo-accent);
    margin: .1rem 0 .4rem; transition: color .4s;
}
.pomo-studied { text-align: center; font-size: .8rem; color: var(--ink-dim); margin: 0 0 1rem; }

.pomo-controls { display: flex; align-items: center; justify-content: center; gap: 1.4rem; }
.pomo-skip { background: none; border: none; cursor: pointer; color: var(--ink-soft); font-size: 1.1rem;
    width: 40px; height: 40px; border-radius: 50%; transition: color .2s, transform .12s; }
.pomo-skip:hover { color: var(--pomo-accent); }
.pomo-skip:active { transform: scale(.9); }
.pomo-play {
    width: 64px; height: 64px; border-radius: 50%; cursor: pointer;
    background: rgba(255,255,255,.03); border: 2px solid var(--pomo-accent); color: var(--pomo-accent);
    font-size: 1.5rem; display: flex; align-items: center; justify-content: center;
    transition: transform .12s, box-shadow .2s, border-color .4s, color .4s;
}
.pomo-play:hover { box-shadow: 0 0 18px color-mix(in srgb, var(--pomo-accent) 55%, transparent); }
.pomo-play:active { transform: scale(.93); }

.pomo-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1.1rem; padding: 0 .2rem; }
.pomo-round { font-family: var(--term); font-size: .82rem; color: var(--ink-dim); letter-spacing: .06em; }
.pomo-reset { background: none; border: none; cursor: pointer; color: var(--ink-soft); font-family: var(--term);
    font-size: .82rem; letter-spacing: .04em; transition: color .2s; }
.pomo-reset:hover { color: var(--pomo-accent); }
.pomo-mute { background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--ink-dim); transition: transform .12s; }
.pomo-mute:active { transform: scale(.9); }

.pomo-settings-panel {
    display: flex; flex-direction: column; gap: .55rem; margin-top: 1rem;
    padding-top: 1rem; border-top: 1px solid var(--panel-edge);
}
.pomo-settings-panel label { display: flex; align-items: center; justify-content: space-between;
    font-family: var(--term); font-size: .82rem; color: var(--ink-soft); letter-spacing: .04em; }
.pomo-settings-panel input { width: 72px; text-align: center; padding: .3rem .4rem; }
.pomo-settings-panel .btn { margin-top: .3rem; }

/* ===================== CADUCEUS İKONU (paylaşılan) ===================== */
.cad { width: 100%; height: 100%; overflow: visible; display: block; }
.cad-staff { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; fill: none; }
.cad-snake { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cad-wing  { fill: var(--gold-bright); opacity: .92; }
.cad-knob, .cad-head { fill: var(--gold-bright); }

/* sürekli hafif nabız (yükleme/bekleme göstergesi) */
.cad.pulse { animation: cadPulse 1.4s ease-in-out infinite; transform-origin: center; }
@keyframes cadPulse { 0%,100% { transform: scale(.9); opacity: .65; } 50% { transform: scale(1.05); opacity: 1; } }

/* ===================== AÇILIŞ EKRANI ===================== */
.boot-screen {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
    background: radial-gradient(ellipse at 50% 42%, #1c1611 0, #100b08 55%, #070504 100%);
}
.boot-cad-wrap {
    width: 128px; height: 190px;
    filter: drop-shadow(0 0 16px rgba(224,177,92,.55));
    animation: cadFloat 3.2s ease-in-out infinite;
}
@keyframes cadFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* caduceus "kurulur": gövde + yılanlar çizilir, kanatlar ve toplar elastik açılır */
.boot-screen .cad { animation: cadPopIn .9s cubic-bezier(.34,1.56,.64,1) both; transform-origin: center; }
@keyframes cadPopIn { 0% { transform: scale(.45); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.boot-screen .cad-staff { stroke-dasharray: 80; stroke-dashoffset: 80; animation: cadDraw .65s ease .1s forwards; }
.boot-screen .cad-snake { stroke-dasharray: 130; stroke-dashoffset: 130; animation: cadDraw 1.05s ease .3s forwards; }
@keyframes cadDraw { to { stroke-dashoffset: 0; } }

.boot-screen .cad-wings { transform-origin: 32px 24px; animation: cadWingIn .8s cubic-bezier(.34,1.6,.55,1) .55s both; }
@keyframes cadWingIn { 0% { transform: scale(0) rotate(-8deg); } 70% { transform: scale(1.12) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }

.boot-screen .cad-knob, .boot-screen .cad-head { transform-origin: center; transform-box: fill-box;
    animation: cadDot .5s cubic-bezier(.34,1.56,.64,1) .9s both; }
@keyframes cadDot { 0% { transform: scale(0); } 100% { transform: scale(1); } }

.boot-title {
    font-family: var(--serif); font-size: 2.1rem; font-weight: 700; letter-spacing: .3em;
    color: var(--gold-bright); text-shadow: var(--glow-gold);
    animation: bootUp .7s ease 1.25s both;
}
.boot-sub {
    font-family: var(--term); font-size: .72rem; letter-spacing: .35em; text-transform: uppercase; color: var(--ink-dim);
    animation: bootUp .7s ease 1.45s both;
}
@keyframes bootUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.boot-screen.boot-out { animation: bootOut .7s cubic-bezier(.5,0,.75,0) forwards; }
@keyframes bootOut { to { opacity: 0; transform: scale(1.1); visibility: hidden; } }

/* thinking() içindeki mini caduceus */
.cad-mini { display: inline-block; width: 22px; height: 32px; vertical-align: middle; margin-right: .5rem; }

/* ===================== SES SEVİYESİ BARI ===================== */
.music-vol {
    -webkit-appearance: none; appearance: none;
    width: 84px; height: 4px; margin: 0; cursor: pointer; background: transparent;
}
.music-vol::-webkit-slider-runnable-track {
    height: 4px; border-radius: 999px;
    background: linear-gradient(90deg, var(--teal), var(--gold)) ; opacity: .85;
}
.music-vol::-moz-range-track { height: 4px; border-radius: 999px; background: var(--panel-edge); }
.music-vol::-moz-range-progress { height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--gold)); }
.music-vol::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; margin-top: -5px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--gold-bright); border: 1px solid rgba(0,0,0,.4);
    box-shadow: var(--glow-gold); transition: transform .12s;
}
.music-vol::-moz-range-thumb {
    width: 14px; height: 14px; border: 1px solid rgba(0,0,0,.4); border-radius: 50%;
    background: var(--gold-bright); box-shadow: var(--glow-gold);
}
.music-vol:hover::-webkit-slider-thumb { transform: scale(1.15); }
.music-vol:focus { outline: none; }

/* ===================== GÜNLÜK DERS KARTLARI ===================== */
.day-item { border: 1px solid var(--panel-edge); border-radius: var(--radius-sm);
    padding: .8rem .9rem; margin-bottom: .7rem; background: rgba(11,16,24,.35); transition: border-color .2s, background .2s; }
.day-item.done { border-color: rgba(125,155,94,.5); background: rgba(111,207,194,.05); }
.di-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .5rem; }
.di-title { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }
.di-course { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.di-badge { font-size: .72rem; color: var(--teal); white-space: nowrap; }
.di-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.di-out { margin-top: .6rem; }
.di-out:empty { margin-top: 0; }

/* ===================== DERS PROGRAMI EDİTÖRÜ ===================== */
.prog-day { border: 1px solid var(--panel-edge); border-radius: var(--radius-sm); padding: .8rem .9rem; margin: .7rem 0; }
.pd-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.pd-head > b { font-family: var(--serif); color: var(--gold-bright); }
.pd-head .icon-btn { margin-left: auto; }
.pd-items { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .6rem; }
.pd-item { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .35rem .6rem; border-radius: 6px; background: rgba(255,255,255,.03); font-size: .9rem; }
.pd-add { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ===================== TEKRAR (ANKI) VADE UYARISI ===================== */
.big-card.due {
    border-color: rgba(231,200,120,.65) !important;
    background: linear-gradient(180deg, rgba(231,200,120,.18), rgba(150,120,55,.10)) !important;
    box-shadow: 0 0 20px rgba(231,200,120,.30) !important;
}
.big-card.due .bc-icon { animation: dueNudge 1.6s ease-in-out infinite; }
.big-card.due .bc-sub { color: var(--gold-bright); }
.big-card.due::after { display: none; }   /* teal nokta yerine ünlem rozeti */
@keyframes dueNudge { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }

.due-badge {
    position: absolute; top: 8px; right: 10px; z-index: 4;
    width: 21px; height: 21px; border-radius: 50%;
    align-items: center; justify-content: center;   /* display JS ile flex/none */
    background: radial-gradient(circle at 40% 35%, #fff0c2, #e7c878 55%, #b8902f 100%);
    color: #2a1d08; font-family: var(--serif); font-weight: 800; font-size: .82rem; line-height: 1;
    box-shadow: 0 0 10px rgba(231,200,120,.9), 0 1px 2px rgba(0,0,0,.4);
    animation: dueBlink 1.1s ease-in-out infinite;
}
@keyframes dueBlink { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } }

@media (prefers-reduced-motion: reduce) {
    .boot-cad-wrap, .boot-screen .cad, .boot-screen .cad-wings, .boot-screen .cad-staff,
    .boot-screen .cad-snake, .boot-screen .cad-knob, .boot-screen .cad-head,
    .boot-title, .boot-sub, .cad.pulse, .due-badge, .big-card.due .bc-icon { animation: none !important; }
    .boot-screen .cad-staff, .boot-screen .cad-snake { stroke-dashoffset: 0 !important; }
}

/* ===================== HER KARTA ÇOK HAFİF KENDİ TONU ===================== */
/* dikkatli bakınca fark edilir, göze çarpmaz: ~%8 opak hue, koyu zemine biner */
.big-card { --tint: transparent;
    background:
        linear-gradient(180deg, var(--tint), transparent 72%),
        linear-gradient(180deg, rgba(29,40,54,.88), rgba(22,33,45,.92));
}
.big-card[data-card="gunluk-anlatim"] { --tint: rgba(96,150,214,.085); }   /* mavi */
.big-card[data-card="gunluk-test"]    { --tint: rgba(165,135,232,.085); }  /* mor */
.big-card[data-card="telafi"]         { --tint: rgba(120,194,132,.085); }  /* yeşil */
.big-card[data-card="haftalik"]       { --tint: rgba(228,182,104,.085); }  /* kehribar */
.big-card[data-card="kurul"]          { --tint: rgba(212,172,92,.085); }   /* altın */
.big-card[data-card="tekrar"]         { --tint: rgba(110,202,192,.085); }  /* teal */
.big-card[data-card="kutuphane"]      { --tint: rgba(222,150,92,.085); }   /* turuncu */
.big-card[data-card="sohbet"]         { --tint: rgba(104,202,212,.085); }  /* camgöbeği */
.big-card[data-card="slayt"]          { --tint: rgba(232,132,150,.085); }  /* gül */
.big-card[data-card="kaynak"]         { --tint: rgba(152,162,204,.085); }  /* lavanta-slate */
.big-card[data-card="kullanicilar"]   { --tint: rgba(180,170,140,.085); }  /* kum */
.big-card[data-card="program"]        { --tint: rgba(120,180,170,.085); }  /* nane */

/* ===================== ANA IZGARA — BENTO (asimetrik boyutlar) ===================== */
/* iki büyük: günlük anlatım + günlük test sol üstte; sağda sohbet/kütüphane/kurul küçük
   alt alta; altta tekrar/telafi/haftalık. (slayt+kaynak yalnızca admin → altta akar) */
.card-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, minmax(94px, auto));
    grid-auto-rows: minmax(94px, auto);
    grid-template-areas:
        "anlatim anlatim anlatim anlatim sohbet   sohbet"
        "anlatim anlatim anlatim anlatim kutup    kutup"
        "test    test    test    test    kurul    kurul"
        "test    test    test    test    kurul    kurul"
        "tekrar  tekrar  telafi  telafi  haftalik haftalik";
}
.card-grid .big-card { min-height: 0; }
.big-card[data-card="gunluk-anlatim"] { grid-area: anlatim; }
.big-card[data-card="gunluk-test"]    { grid-area: test; }
.big-card[data-card="sohbet"]         { grid-area: sohbet; }
.big-card[data-card="kutuphane"]      { grid-area: kutup; }
.big-card[data-card="kurul"]          { grid-area: kurul; }
.big-card[data-card="tekrar"]         { grid-area: tekrar; }
.big-card[data-card="telafi"]         { grid-area: telafi; }
.big-card[data-card="haftalik"]       { grid-area: haftalik; }
/* admin kartları: 5 sabit satırdan sonra alt satırlara akar (ikişerli) */
.big-card[data-card="kullanicilar"]   { grid-column: 1 / 4; }
.big-card[data-card="program"]        { grid-column: 4 / 7; }
.big-card[data-card="slayt"]          { grid-column: 1 / 4; }
.big-card[data-card="kaynak"]         { grid-column: 4 / 7; }

/* iki büyük kart: içerik ortalı, daha iri ikon/başlık */
.big-card[data-card="gunluk-anlatim"], .big-card[data-card="gunluk-test"] {
    justify-content: center; gap: .55rem; padding: 1.8rem 1.7rem;
}
.big-card[data-card="gunluk-anlatim"] .bc-icon,
.big-card[data-card="gunluk-test"] .bc-icon { font-size: 3.3rem; }
.big-card[data-card="gunluk-anlatim"] .bc-title,
.big-card[data-card="gunluk-test"] .bc-title { font-size: 1.5rem !important; }
.big-card[data-card="gunluk-anlatim"] .bc-sub,
.big-card[data-card="gunluk-test"] .bc-sub { font-size: .92rem; }

/* dar ekran: bento'yu bırak, basit iki sütun */
@media (max-width: 760px) {
    .card-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-template-areas: none; }
    .big-card { grid-area: auto !important; grid-column: auto !important; min-height: 120px; }
    .big-card[data-card="gunluk-anlatim"], .big-card[data-card="gunluk-test"] { grid-column: 1 / -1 !important; }
}

/* ============ BENİMSEME: kaydol + sıralama + havuz + geri sayım ============ */
.login-switch { text-align: center; margin-top: .9rem; font-size: .85rem; color: var(--ink-dim); }
.login-switch a { color: var(--gold-bright); cursor: pointer; text-decoration: underline; }
#signup-form input { margin-bottom: .6rem; }
.ac-toggle { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--ink-dim); white-space: nowrap; }

/* kurul geri sayım rozeti */
.kb-cd { display: inline-block; margin-left: .4rem; padding: .1rem .5rem; border-radius: 999px;
    font-size: .74rem; font-weight: 700; border: 1px solid var(--panel-edge); color: var(--teal); }
.kb-cd.hot { color: var(--gold-bright); border-color: var(--gold); box-shadow: 0 0 8px rgba(224,160,48,.35); }
.kb-cd.past { color: var(--ink-dim); }

/* sıralama listesi */
.lb-list { display: flex; flex-direction: column; gap: .35rem; }
.lb-row { display: grid; grid-template-columns: 2rem 1fr auto auto; align-items: center; gap: .6rem;
    padding: .5rem .7rem; border: 1px solid var(--panel-edge); border-radius: 10px; background: rgba(255,255,255,.02); }
.lb-row.me { border-color: var(--gold); background: rgba(224,160,48,.08); }
.lb-pos { font-size: 1.1rem; text-align: center; }
.lb-rank { font-size: .8rem; color: var(--ink-dim); }
.lb-name { font-weight: 600; color: var(--gold-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-meta { font-size: .76rem; color: var(--ink-dim); white-space: nowrap; }
.lb-score { color: var(--teal); font-size: 1.05rem; }

/* sınıf havuzu */
.pool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.pool-cell { padding: .55rem .7rem; border: 1px solid var(--panel-edge); border-radius: 10px; background: rgba(255,255,255,.02); }
.pool-course { font-weight: 600; font-size: .9rem; color: var(--gold-bright); }
.pool-n { font-size: .82rem; color: var(--teal); margin-top: .15rem; }

@media (max-width: 760px) {
    .lb-row { grid-template-columns: 1.6rem 1fr auto; }
    .lb-meta { display: none; }
}

/* Kurul: günün dersi kilitli konu */
.kc-list li.locked-topic > span { color: var(--ink-dim); cursor: not-allowed; opacity: .7; }
.kc-list li.locked-topic > span:hover { color: var(--ink-dim); }

/* Günlük: paylaşımlı slayt bilgisi */
.di-slide { font-size: .76rem; color: var(--ink-dim); margin-top: .35rem; }
.di-slide b { color: var(--teal); font-weight: 600; }
.di-del { color: var(--coral, #e0683c); cursor: pointer; text-decoration: underline; }
.slide-row { display: flex; align-items: center; gap: .4rem; padding: .15rem 0; }
.slide-row .di-del { margin-left: auto; }

/* Kayıtlı anlatımlar (çevrimdışı) */
.off-list { display: flex; flex-direction: column; gap: .35rem; }
.off-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; width: 100%;
    padding: .55rem .7rem; border: 1px solid var(--panel-edge); border-radius: 10px;
    background: rgba(255,255,255,.02); color: var(--ink); cursor: pointer; text-align: left; }
.off-row:hover { border-color: var(--gold); }
.off-title { font-weight: 600; color: var(--gold-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.off-date { font-size: .74rem; color: var(--ink-dim); white-space: nowrap; }

/* ============ KÜTÜPHANE KATALOĞU (pokemon kartı gibi) ============ */
.bk-add-box { margin-bottom: .8rem; border: 1px solid var(--panel-edge); border-radius: 10px; padding: .4rem .7rem; }
.bk-add-box summary { cursor: pointer; color: var(--gold-bright); font-weight: 600; }
.bk-add { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.bk-add input, .bk-add textarea { background: rgba(0,0,0,.25); border: 1px solid var(--panel-edge);
    border-radius: 8px; color: var(--ink); padding: .45rem .6rem; font: inherit; }
.bk-add input[type=text], .bk-add input[type=number] { flex: 1 1 140px; min-width: 120px; }
.bk-add textarea { flex: 1 1 100%; min-height: 56px; resize: vertical; }

.bk-search { width: 100%; box-sizing: border-box; margin: .2rem 0 1rem; padding: .55rem .8rem;
    background: rgba(0,0,0,.25); border: 1px solid var(--panel-edge); border-radius: 999px; color: var(--ink); font: inherit; }
.bk-search:focus { outline: none; border-color: var(--gold); }

.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .9rem; }
.bk-card { display: flex; flex-direction: column; border: 1px solid var(--panel-edge); border-radius: 12px;
    overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12));
    transition: transform .15s, box-shadow .15s, border-color .15s; }
.bk-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--glow-gold, 0 6px 20px rgba(224,160,48,.2)); }
.bk-cover-wrap { aspect-ratio: 1 / 1.414; background: #0c0f14; }   /* A4 dikey oran */
.bk-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-noimg { display: flex; align-items: center; justify-content: center; font-size: 2.6rem; color: var(--ink-dim); }
.bk-body { padding: .55rem .6rem .65rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.bk-title { font-weight: 700; color: var(--gold-bright); font-size: .92rem; line-height: 1.2; }
.bk-author { font-size: .76rem; color: var(--teal); }
.bk-desc { font-size: .76rem; color: var(--ink-dim); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bk-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: auto; padding-top: .35rem; }
.bk-tags span { font-size: .66rem; padding: .1rem .45rem; border-radius: 999px;
    border: 1px solid var(--panel-edge); color: var(--ink-dim); }
.bk-tags span.bk-cat-tag { color: var(--gold-bright); border-color: var(--gold-deep); font-weight: 600; }

/* Havuzlar (soru + anlatım) */
.pool-row { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem .2rem; border-bottom: 1px solid var(--panel-edge); }
.pool-main { flex: 1; min-width: 0; }
.prov-tag { font-size: .66rem; padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--panel-edge); white-space: nowrap; align-self: center; }
.prov-tag.prov-claude { color: var(--teal); border-color: rgba(111,207,194,.5); }
.prov-tag.prov-other { color: var(--coral); border-color: rgba(240,138,114,.5); }
.btn.danger { border-color: rgba(240,138,114,.5); color: var(--coral); }
/* Çıkmış havuzu kontrol */
.ck-q { font-weight: 600; line-height: 1.35; }
.ck-opts { margin: .35rem 0; display: grid; gap: .15rem; }
.ck-opt { font-size: .82rem; padding: .12rem .4rem; border-radius: 6px; }
.ck-opt.ck-correct { color: var(--teal); background: rgba(111,207,194,.1); border: 1px solid rgba(111,207,194,.35); font-weight: 600; }
.ck-stamps { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .2rem; }
.ck-stamp { font-size: .68rem; padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--panel-edge); color: var(--gold-bright); white-space: nowrap; }
/* Öğrenci profili */
.pf-head { display: flex; gap: 1rem; align-items: center; padding-bottom: .8rem; border-bottom: 1px solid var(--panel-edge); margin-bottom: .8rem; }
.pf-avatar { width: 64px; height: 64px; border-radius: 50%; flex: 0 0 64px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 700; color: #1a1206; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); }
.pf-name { font-size: 1.25rem; font-weight: 700; }
.pf-sub { font-size: .8rem; color: var(--ink-dim); margin: .15rem 0; }
.pf-streak { font-size: .9rem; color: var(--gold-bright); }
.pf-tier { font-size: .65rem; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--panel-edge); vertical-align: middle; }
.pf-tier.pf-altin, .pf-tier.pf-gold { color: #ffcf5c; border-color: rgba(255,207,92,.5); }
.pf-tier.pf-gumus, .pf-tier.pf-silver { color: #cfd6dd; }
.pf-tier.pf-bronz, .pf-tier.pf-bronze { color: #d59a6a; }
.pf-section { margin-top: 1rem; }
.pf-section h3 { font-size: 1rem; margin: 0 0 .5rem; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)); gap: .5rem; }
.pf-stat { background: rgba(255,255,255,.03); border: 1px solid var(--panel-edge); border-radius: 10px; padding: .6rem .3rem; text-align: center; }
.pf-stat-ico { font-size: 1.2rem; }
.pf-stat-val { font-size: 1.15rem; font-weight: 700; color: var(--gold-bright); margin: .15rem 0; }
.pf-stat-lbl { font-size: .68rem; color: var(--ink-dim); }
.pf-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.pf-badge { font-size: .78rem; padding: .25rem .6rem; border-radius: 999px; border: 1px solid rgba(255,207,92,.4); color: var(--gold-bright); background: rgba(255,207,92,.07); }
.pf-weaks { display: flex; flex-direction: column; gap: .25rem; }
.pf-weak { display: flex; justify-content: space-between; font-size: .85rem; padding: .25rem .4rem; border-bottom: 1px solid var(--panel-edge); }
.pf-weak b { color: var(--coral); }

/* Konu Hâkimiyeti (BKT) çubukları */
.pf-mast-wrap { display: flex; flex-direction: column; gap: .55rem; }
.pf-mast { font-size: .82rem; }
.pf-mast-top { display: flex; justify-content: space-between; align-items: baseline; }
.pf-mast-top b { color: var(--mint, #1fe0c4); }
.pf-mast-bar { height: 7px; border-radius: 4px; background: var(--panel-edge); overflow: hidden; margin: .2rem 0; }
.pf-mast-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffb000, #1fe0c4); }
.pf-mast-sub { font-size: .72rem; color: var(--muted, #8fa3ad); }

/* ===== Öğrenci kartı — Steam iskeleti / Pokémon kartı ===== */
.pf-wrap { max-width: 420px; margin: 0 auto; }
.pf-secret { margin-top: 1rem; }
.pf-secret h3 { font-size: 1rem; margin: 0 0 .6rem; }

.pkcard {
    position: relative; border-radius: 18px; padding: 4px;
    perspective: 900px;
    transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transform-style: preserve-3d; transition: transform .12s ease-out;
    box-shadow: 0 18px 48px rgba(0,0,0,.55), var(--frame-glow,0 0 24px rgba(224,177,92,.25));
    background: var(--frame, linear-gradient(135deg, var(--gold-bright), var(--gold-deep) 55%, var(--gold-bright)));
    overflow: hidden; touch-action: pan-y;
}
.pk-gold   { --frame: linear-gradient(135deg,#ffe39a,#b8893a 45%,#ffd87a 70%,#9a7a3a); --frame-glow: 0 0 28px rgba(240,205,134,.4); }
.pk-silver { --frame: linear-gradient(135deg,#eef3f8,#8b97a6 48%,#dfe6ee 72%,#7f8b9a); --frame-glow: 0 0 22px rgba(207,214,221,.32); }
.pk-bronze { --frame: linear-gradient(135deg,#e8b98a,#9a6238 48%,#d59a6a 72%,#7d4f30); --frame-glow: 0 0 20px rgba(213,154,106,.3); }

/* holografik foil — kart üstünde gezinen prizma parıltısı */
.pk-foil {
    position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: 18px;
    mix-blend-mode: color-dodge; opacity: .35;
    background:
        repeating-linear-gradient(115deg, rgba(255,0,128,.18) 0 12px, rgba(0,200,255,.18) 12px 24px, rgba(120,255,120,.18) 24px 36px, transparent 36px 60px);
    -webkit-mask: radial-gradient(220px 220px at var(--mx,50%) var(--my,40%), #000 0%, rgba(0,0,0,.25) 45%, transparent 75%);
            mask: radial-gradient(220px 220px at var(--mx,50%) var(--my,40%), #000 0%, rgba(0,0,0,.25) 45%, transparent 75%);
}
.pk-shine {
    position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: 18px;
    background: radial-gradient(160px 160px at var(--mx,50%) var(--my,40%), rgba(255,255,255,.28), transparent 70%);
    mix-blend-mode: screen; opacity: .5;
}

.pk-inner {
    position: relative; z-index: 2; border-radius: 15px;
    background: linear-gradient(180deg, var(--panel-2), var(--deep));
    padding: .8rem .85rem 1rem;
}
.pk-topband { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pk-name { font-size: 1.15rem; font-weight: 800; letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.pk-hp { display: flex; align-items: center; gap: .4rem; }
.pk-lv { font-size: .78rem; font-weight: 800; color: #1a1206; background: linear-gradient(135deg,var(--gold-bright),var(--gold)); padding: .15rem .5rem; border-radius: 999px; }
.pk-streak { font-size: .85rem; color: var(--gold-bright); font-weight: 700; }

/* sanat penceresi — kadüse fonu + dev avatar harfi */
.pk-art {
    position: relative; margin: .6rem 0 .5rem; height: 150px; border-radius: 12px;
    border: 1px solid var(--panel-edge); overflow: hidden;
    background:
        radial-gradient(120px 120px at 30% 20%, rgba(111,207,194,.18), transparent 70%),
        radial-gradient(140px 140px at 75% 80%, rgba(224,177,92,.16), transparent 70%),
        linear-gradient(160deg, #142233, #0c1420);
    display: flex; align-items: center; justify-content: center;
}
.pk-art-cad { position: absolute; right: 8px; bottom: -6px; height: 132px; opacity: .16; fill: none; stroke: var(--gold-bright); stroke-width: 2; stroke-linecap: round; }
.pk-avatar {
    width: 96px; height: 96px; border-radius: 22px; display: flex; align-items: center; justify-content: center;
    font-size: 3rem; font-weight: 800; color: #1a1206;
    background: linear-gradient(135deg, var(--gold-bright), var(--gold));
    box-shadow: 0 6px 22px rgba(0,0,0,.5), inset 0 2px 6px rgba(255,255,255,.4);
    transform: translateZ(40px);
}
.pk-rarity { position: absolute; left: 8px; top: 6px; font-size: .82rem; color: var(--gold-bright); letter-spacing: 2px; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.pk-rarity-lbl { display: block; font-size: .58rem; letter-spacing: .04em; color: var(--ink-soft); margin-top: -2px; }

.pk-meta { font-size: .76rem; color: var(--ink-dim); text-align: center; }
.pk-meta .pf-tier { margin-left: .25rem; }

.pk-xp { margin: .55rem 0 .35rem; }
.pk-xp-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--panel-edge); overflow: hidden; }
.pk-xp-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--gold-bright)); box-shadow: 0 0 10px rgba(240,205,134,.5); }
.pk-xp-txt { font-size: .65rem; color: var(--ink-dim); text-align: right; margin-top: .2rem; }

.pk-divider { display: flex; align-items: center; gap: .5rem; margin: .7rem 0 .5rem; color: var(--ink-dim); font-size: .65rem; letter-spacing: .12em; font-weight: 700; }
.pk-divider::before, .pk-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--panel-edge), transparent); }

.pk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.pk-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; background: rgba(255,255,255,.03); border: 1px solid var(--panel-edge); border-radius: 9px; padding: .45rem .2rem; }
.pk-stat-ico { font-size: 1rem; }
.pk-stat-val { font-size: .95rem; font-weight: 800; color: var(--gold-bright); }
.pk-stat-lbl { font-size: .62rem; color: var(--ink-dim); }

.pk-badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.pk-badge { font-size: .72rem; padding: .2rem .55rem; border-radius: 999px; border: 1px solid rgba(240,205,134,.4); color: var(--gold-bright); background: rgba(240,205,134,.08); }

/* rozet vitrini — tasarlanmış madalyonlar (kazanılan renkli+canlı, kazanılmamış siyah-beyaz) */
.bdg-case { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.bdg { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; cursor: pointer;
    background: rgba(255,255,255,.03); border: 1px solid var(--panel-edge); border-radius: 12px; padding: .55rem .25rem;
    color: var(--ink-soft); font-family: inherit; transition: border-color .15s, transform .12s; }
.bdg:hover { transform: translateY(-2px); border-color: var(--gold); }
.bdg.on { border-color: rgba(240,205,134,.45); box-shadow: 0 0 14px rgba(240,205,134,.12); }
.bdg-coin { width: 62px; height: 62px; }
.bdg-coin img { width: 62px; height: 62px; display: block; }
.bdg.on .bdg-coin img { filter: drop-shadow(0 2px 6px rgba(240,205,134,.3)); }   /* canlı */
.bdg.off .bdg-coin img { filter: grayscale(1) brightness(.7) contrast(.95); opacity: .6; }  /* siyah-beyaz */
.bdg-lbl { font-size: .64rem; line-height: 1.15; }
.bdg.off .bdg-lbl { color: var(--ink-dim); }
.bdg-chk { font-size: .58rem; color: var(--gold-bright); font-weight: 700; }
.bdg-prog { width: 80%; height: 5px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.bdg-prog i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--gold-bright)); }

/* rozet detay modalı (tıklayınca ad + nasıl kazanılır) */
.bm-card { position: relative; text-align: center; width: min(320px, 100%); }
.bm-coin { width: 120px; height: 120px; margin: .4rem auto .2rem; }
.bm-coin img { width: 120px; height: 120px; }
.bm-coin.off img { filter: grayscale(1) brightness(.7) contrast(.95); opacity: .6; }
.bm-coin.on img { filter: drop-shadow(0 3px 10px rgba(240,205,134,.4)); }
.bm-name { font-size: 1.15rem; font-weight: 800; }
.bm-how { font-size: .86rem; color: var(--ink-soft); margin: .35rem 0 .7rem; }
.bm-status { font-size: .82rem; color: var(--ink-dim); }
.bm-status.on { color: var(--gold-bright); font-weight: 700; }
.bm-bar { display: block; width: 70%; margin: .4rem auto 0; height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.bm-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--gold-bright)); }

.pk-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .8rem; padding-top: .55rem; border-top: 1px solid var(--panel-edge); }
.pk-flavor { font-size: .64rem; color: var(--ink-dim); font-style: italic; }
.pk-no { font-size: .68rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .pkcard { transition: none; } }

/* avatar görseli (chibi) */
.pk-avatar-img { padding: 0; background: linear-gradient(135deg,#1a2733,#0e151d); object-fit: cover; border: 2px solid rgba(240,205,134,.55); }
.pk-edit { position: absolute; right: 8px; bottom: 8px; z-index: 3; font-size: .68rem; padding: .2rem .5rem; border-radius: 999px;
    border: 1px solid var(--panel-edge); background: rgba(13,20,28,.72); color: var(--gold-bright); cursor: pointer; backdrop-filter: blur(3px); }
.pk-edit:hover { border-color: var(--gold); }

/* topbar chip avatarı */
.uc-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 26px; border: 1px solid var(--panel-edge); vertical-align: middle; }
.uc-av-init { display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; color: #1a1206; background: linear-gradient(135deg,var(--gold-bright),var(--gold)); }

/* avatar seçici modal */
.av-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem;
    background: rgba(6,10,15,.72); backdrop-filter: blur(4px); }
.av-card { width: min(440px, 100%); max-height: 86vh; overflow: auto; background: linear-gradient(180deg,var(--panel-2),var(--deep));
    border: 1px solid var(--panel-edge); border-radius: 16px; box-shadow: var(--shadow); padding: 1rem; }
.av-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-weight: 700; margin-bottom: .8rem; }
.av-x { background: none; border: none; color: var(--ink-dim); font-size: 1.1rem; cursor: pointer; }
.av-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.av-cell { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .5rem .3rem; cursor: pointer;
    background: rgba(255,255,255,.03); border: 1px solid var(--panel-edge); border-radius: 12px; color: var(--ink-soft); transition: border-color .15s, transform .12s; }
.av-cell:hover { transform: translateY(-2px); border-color: var(--gold); }
.av-cell.sel { border-color: var(--gold-bright); box-shadow: 0 0 0 1px var(--gold-bright) inset, var(--glow-gold); }
.av-cell img, .av-cell .av-init { width: 72px; height: 72px; border-radius: 14px; }
.av-cell .av-init { display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; color: #1a1206; background: linear-gradient(135deg,var(--gold-bright),var(--gold)); }
.av-lbl { font-size: .66rem; text-align: center; line-height: 1.2; }

/* chip: avatar+isim tıklanır → profil */
.uc-go { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; border-radius: 999px; padding: 2px 4px 2px 2px; }
.uc-go:hover { background: rgba(255,255,255,.06); }

/* profil: başkasının kartından dön */
.pf-back { margin-bottom: .7rem; }

/* profil: kişi ara */
.pf-search { margin-top: 1rem; }
.pf-search h3 { font-size: 1rem; margin: 0 0 .6rem; }
.pf-q { width: 100%; padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--panel-edge);
    background: rgba(255,255,255,.04); color: var(--ink); font-family: inherit; font-size: .95rem; }
.pf-q:focus { outline: none; border-color: var(--gold); box-shadow: var(--glow-gold); }
.pf-results { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }
.pf-result { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; cursor: pointer;
    background: rgba(255,255,255,.03); border: 1px solid var(--panel-edge); border-radius: 12px; padding: .45rem .6rem; color: var(--ink); transition: border-color .15s, transform .12s; }
.pf-result:hover { border-color: var(--gold); transform: translateX(2px); }
.pr-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 38px; border: 1px solid var(--panel-edge); }
.pr-av-init { display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 800; color: #1a1206; background: linear-gradient(135deg,var(--gold-bright),var(--gold)); }
.pr-name { font-weight: 600; flex: 1; }
.pr-go { color: var(--ink-dim); font-size: 1.2rem; }

/* hazırlık panosu (kurul-banner içinde) */
.kb-ready { margin-top: .6rem; border-top: 1px solid var(--panel-edge); padding-top: .5rem; }
.kb-ready > summary { cursor: pointer; font-size: .82rem; color: var(--ink-soft); list-style: none; }
.kb-ready.ok > summary { color: var(--teal); }
.kb-ready > summary::-webkit-details-marker { display: none; }
.rd-row { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; font-size: .76rem; }
.rd-name { flex: 0 0 38%; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-bar { flex: 1; height: 7px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.rd-bar i { display: block; height: 100%; border-radius: 999px; background: var(--gold); }
.rd-bar i.ok { background: var(--teal); }
.rd-pct { flex: 0 0 34px; text-align: right; color: var(--ink-dim); }

/* =========================================================================
   TEMALAR (altın üyelik) — YALNIZ renk değişkenleri override; iskelet/layout AYNI
   ========================================================================= */
body[data-theme="skull"]{
    --void:#05070a; --deep:#0a0d12; --panel:#11151c; --panel-2:#161b24; --panel-edge:#2b3340; --surface-3:#202734;
    --ink:#eaeef3; --ink-soft:#aeb6c2; --ink-dim:#6b7480;
    --gold:#cfd3da; --gold-bright:#eef1f6; --gold-deep:#6b7079; --teal:#9aa3af; --coral:#d98b8b;
    --glow-gold:0 0 16px rgba(207,211,218,.22); --glow-teal:0 0 16px rgba(154,163,175,.2);
}
body[data-theme="candy"]{
    --void:#2a1430; --deep:#3a1a42; --panel:#4a2150; --panel-2:#5a2a62; --panel-edge:#854594; --surface-3:#6a3274;
    --ink:#fff0fb; --ink-soft:#f6cdec; --ink-dim:#d99bcf;
    --gold:#ff8ad0; --gold-bright:#ffb3e0; --gold-deep:#c85aa0; --teal:#8ad0ff; --coral:#ff9ec4;
    --glow-gold:0 0 18px rgba(255,138,208,.4); --glow-teal:0 0 18px rgba(138,208,255,.35);
}
body[data-theme="cyberpunk"]{
    --void:#06080f; --deep:#0a0f1e; --panel:#101a2e; --panel-2:#15233d; --panel-edge:#1f3a66; --surface-3:#1a2e52;
    --ink:#e6fbff; --ink-soft:#9fe6f5; --ink-dim:#5aa6c0;
    --gold:#00e5ff; --gold-bright:#6cf6ff; --gold-deep:#0096a8; --teal:#ff2bd6; --coral:#ffe14d;
    --glow-gold:0 0 18px rgba(0,229,255,.45); --glow-teal:0 0 18px rgba(255,43,214,.4);
}
body[data-theme="steampunk"]{   /* victorian pirinç + deri-kahve: zengin altın vurgu */
    --void:#140c05; --deep:#1e1209; --panel:#2c1c0e; --panel-2:#3a2613; --panel-edge:#7a5526; --surface-3:#4d3417;
    --ink:#f8eccf; --ink-soft:#dcc08a; --ink-dim:#a8854f;
    --gold:#e0a73e; --gold-bright:#ffd277; --gold-deep:#9c6a1e; --teal:#c79a4a; --coral:#cf7a3a; --hal:#bb5a2c; --violet:#caa05a;
    --glow-gold:0 0 20px rgba(255,210,119,.42); --glow-teal:0 0 16px rgba(199,154,74,.32);
    --shadow:0 12px 40px rgba(20,10,2,.62);
}
/* ---- OLİMPOS: beyaz-mavi-altın AÇIK tema (Yunan tapınağı esintisi) ---- */
body[data-theme="olimpos"]{
    /* KIRIK BEYAZ / FİLDİŞİ tonlar — bembeyaz parlaklık yerine mermer sıcaklığı */
    --void:#d9e2ee; --deep:#e6edf6; --panel:#f6f8fb; --panel-2:#ebf0f7; --panel-edge:#a9bdd8; --surface-3:#dde6f1;
    --ink:#1d2c47; --ink-soft:#41597c; --ink-dim:#748aa8;
    --gold:#b8932a; --gold-bright:#8f7414; --gold-deep:#7d631a; --teal:#2f6fba; --coral:#c96450; --hal:#b94b60; --violet:#5a6fc0;
    --glow-gold:0 0 12px rgba(184,147,42,.25); --glow-teal:0 0 12px rgba(47,111,186,.22);
    --shadow:0 14px 34px rgba(35,62,105,.18);
}
body[data-theme="olimpos"]::after{     /* belirgin ama yumuşak mavi VİNYET — göz ortaya toplanır */
    background: radial-gradient(125% 125% at 50% 38%, transparent 55%, rgba(52,84,135,.2) 100%) !important;
}
/* derinlik: kart ve modallara katmanlı gölge (açık temada gölge = hiyerarşi) */
body[data-theme="olimpos"] .card,
body[data-theme="olimpos"] .ui-modal-card, body[data-theme="olimpos"] .av-card, body[data-theme="olimpos"] .pz-card {
    box-shadow: 0 10px 26px rgba(45,75,125,.14), 0 2px 6px rgba(45,75,125,.1); }
body[data-theme="olimpos"] .big-card { box-shadow: 0 8px 20px rgba(45,75,125,.12), 0 1px 4px rgba(45,75,125,.08); }
body[data-theme="olimpos"] .big-card:hover { box-shadow: 0 14px 30px rgba(45,75,125,.2), var(--glow-gold); }
body[data-theme="olimpos"] .tool-btn { background: rgba(255,255,255,.75); }
body[data-theme="olimpos"] .bottom-nav { box-shadow: 0 -6px 18px rgba(45,75,125,.1); }
/* ---- AKADEMİ: kahverengi dark-academia (deri cilt + sepya mürekkep) ---- */
body[data-theme="akademi"]{
    --void:#171009; --deep:#211711; --panel:#2c2015; --panel-2:#382a1b; --panel-edge:#6d5334; --surface-3:#463323;
    --ink:#f0e6d2; --ink-soft:#cfbb99; --ink-dim:#9a8264;
    --gold:#c9974d; --gold-bright:#e8bf7d; --gold-deep:#8a6430; --teal:#a3b18a; --coral:#c0673f; --hal:#b0503c; --violet:#b08968;
    --glow-gold:0 0 18px rgba(201,151,77,.35); --glow-teal:0 0 14px rgba(163,177,138,.25);
    --shadow:0 12px 40px rgba(15,8,2,.6);
}
/* klasik = :root varsayılan (override yok) */

/* Düz renk (temasız) — koyu taban korunur; TÜM vurgu paleti (gold+teal+glow) tek renge döner.
   (Önceden yalnız --gold değişiyordu, UI çoğunlukla --teal kullandığı için "değişmiyor" görünüyordu.) */
body[data-solid="teal"]{ --gold:#6fcfc2; --gold-bright:#9fe6dc; --gold-deep:#3f8f86; --teal:#6fcfc2;
    --glow-gold:0 0 16px rgba(111,207,194,.32); --glow-teal:0 0 16px rgba(111,207,194,.32); }
body[data-solid="amber"]{ --gold:#e0b15c; --gold-bright:#f0cd86; --gold-deep:#9a7a3a; --teal:#e0b15c;
    --glow-gold:0 0 16px rgba(224,177,92,.32); --glow-teal:0 0 16px rgba(224,177,92,.32); }
body[data-solid="kirmizi"]{ --gold:#f0726a; --gold-bright:#ff9a92; --gold-deep:#a8443d; --teal:#f0726a;
    --glow-gold:0 0 16px rgba(240,114,106,.32); --glow-teal:0 0 16px rgba(240,114,106,.32); }
body[data-solid="mor"]{ --gold:#a99cf0; --gold-bright:#c7bdff; --gold-deep:#6f63b0; --teal:#a99cf0;
    --glow-gold:0 0 16px rgba(169,156,240,.32); --glow-teal:0 0 16px rgba(169,156,240,.32); }
body[data-solid="yesil"]{ --gold:#7ec96b; --gold-bright:#a6e398; --gold-deep:#4f8f42; --teal:#7ec96b;
    --glow-gold:0 0 16px rgba(126,201,107,.32); --glow-teal:0 0 16px rgba(126,201,107,.32); }
/* yeni yaygın renkler: mavi / turuncu / pembe */
body[data-solid="mavi"]{ --gold:#5aa9f0; --gold-bright:#8cc6ff; --gold-deep:#33689c; --teal:#5aa9f0;
    --glow-gold:0 0 16px rgba(90,169,240,.32); --glow-teal:0 0 16px rgba(90,169,240,.32); }
body[data-solid="turuncu"]{ --gold:#f0975a; --gold-bright:#ffb583; --gold-deep:#a85f2f; --teal:#f0975a;
    --glow-gold:0 0 16px rgba(240,151,90,.32); --glow-teal:0 0 16px rgba(240,151,90,.32); }
body[data-solid="pembe"]{ --gold:#f07ab8; --gold-bright:#ffa3d1; --gold-deep:#a84a7c; --teal:#f07ab8;
    --glow-gold:0 0 16px rgba(240,122,184,.32); --glow-teal:0 0 16px rgba(240,122,184,.32); }

/* =========== TEMA ARKA PLANLARI: gerçek illüstrasyon/animasyon (emoji değil) ===========
   z-index:1 ŞART — body::before ilk çocuk olarak boyanır; z-index:0'da SONRAKİ .bg-base
   (opak zemin gradyanı) üstünü örtüyordu → desenler HİÇ görünmüyordu (katman bug'ı).
   z-index:1'de: zemin + starfield'ın ÜSTÜNDE, .app içeriğinin (z-index:1, DOM'da sonra) ALTINDA. */
body[data-theme="klasik"]::before, body[data-theme="skull"]::before, body[data-theme="candy"]::before,
body[data-theme="cyberpunk"]::before, body[data-theme="steampunk"]::before,
body[data-theme="akademi"]::before, body[data-theme="olimpos"]::before{
    content:""; position:fixed; inset:0; z-index:1; pointer-events:none; background-repeat:repeat;
}
/* KLASİK: arkada dolanan, parlayıp sönen altın kıvılcımlar.
   FPS: background-position animasyonu her karede repaint yapar → bunun yerine TILE yüksekliği
   (640px) kadar uzatılmış katman transform ile kaydırılır (composited, GPU) + opaklık twinkle. */
body[data-theme="klasik"]::before{
    inset: 0 0 -640px 0;                        /* bir desen periyodu kadar uzat → kayma dikişsiz */
    background-image:
        radial-gradient(2.2px 2.2px at 18% 82%, rgba(240,205,134,.9), transparent 65%),
        radial-gradient(1.6px 1.6px at 44% 61%, rgba(224,177,92,.8), transparent 65%),
        radial-gradient(2.6px 2.6px at 71% 87%, rgba(240,205,134,.7), transparent 65%),
        radial-gradient(1.4px 1.4px at 86% 44%, rgba(224,177,92,.7), transparent 65%),
        radial-gradient(2px 2px at 31% 28%, rgba(240,205,134,.6), transparent 65%),
        radial-gradient(1.5px 1.5px at 62% 17%, rgba(224,177,92,.55), transparent 65%),
        radial-gradient(1.2px 1.2px at 9% 52%, rgba(240,205,134,.5), transparent 65%);
    background-size: 460px 640px;
    will-change: transform, opacity;
    animation: sparkDrift 30s linear infinite, sparkTwinkle 3.6s ease-in-out infinite alternate;
}
@keyframes sparkDrift { to { transform: translate3d(0, -640px, 0); } }
@keyframes sparkTwinkle { from { opacity: .3; } to { opacity: .75; } }
/* KURU KAFA: gerçek kafatası çizimi (çizgi sanat), hafif dönük iki boyut */
body[data-theme="skull"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='%23cfd3da' stroke-opacity='.13' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M62 18c-19 0-31 13-31 30 0 11 5 19 12 24v12h38V72c7-5 12-13 12-24 0-17-12-30-31-30z'/%3E%3Ccircle cx='51' cy='51' r='7'/%3E%3Ccircle cx='73' cy='51' r='7'/%3E%3Cpath d='M62 60l-5 10h10z'/%3E%3Cpath d='M52 84v8M62 84v9M72 84v8'/%3E%3C/g%3E%3Cg fill='none' stroke='%23cfd3da' stroke-opacity='.1' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M170 60l70 44M240 60l-70 44'/%3E%3Ccircle cx='166' cy='56' r='5'/%3E%3Ccircle cx='174' cy='64' r='5'/%3E%3Ccircle cx='244' cy='56' r='5'/%3E%3Ccircle cx='236' cy='64' r='5'/%3E%3Ccircle cx='166' cy='108' r='5'/%3E%3Ccircle cx='174' cy='100' r='5'/%3E%3Ccircle cx='244' cy='108' r='5'/%3E%3Ccircle cx='236' cy='100' r='5'/%3E%3C/g%3E%3Cg fill='none' stroke='%23cfd3da' stroke-opacity='.09' stroke-width='2' stroke-linecap='round' transform='rotate(-16 90 210)'%3E%3Cpath d='M90 178c-12 0-20 9-20 20 0 7 3 12 8 15v8h24v-8c5-3 8-8 8-15 0-11-8-20-20-20z'/%3E%3Ccircle cx='83' cy='200' r='4.4'/%3E%3Ccircle cx='97' cy='200' r='4.4'/%3E%3Cpath d='M90 206l-3 6h6z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23cfd3da' stroke-opacity='.08' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M196 196l44 28'/%3E%3Ccircle cx='193' cy='193' r='4'/%3E%3Ccircle cx='199' cy='201' r='4'/%3E%3Ccircle cx='243' cy='219' r='4'/%3E%3Ccircle cx='237' cy='227' r='4'/%3E%3C/g%3E%3C/svg%3E"); }
/* ŞEKER: sarmal lolipop + ambalajlı şeker çizimi */
body[data-theme="candy"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='%23ff8ad0' stroke-opacity='.16' stroke-width='2.4' stroke-linecap='round'%3E%3Cellipse cx='58' cy='52' rx='16' ry='12'/%3E%3Cpath d='M42 52L26 42v20zM74 52l16-10v20z'/%3E%3Cpath d='M50 48c4 6 12 6 16 0'/%3E%3C/g%3E%3Cg fill='none' stroke='%238ad0ff' stroke-opacity='.15' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='200' cy='70' r='17'/%3E%3Cpath d='M200 70a4.5 4.5 0 0 1 9 0a9 9 0 0 1-18 0a13 13 0 0 1 26 0'/%3E%3Cpath d='M200 87v32'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffd166' stroke-opacity='.15' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M64 178v52'/%3E%3Cpath d='M64 178a13 13 0 0 1 26 0'/%3E%3Cpath d='M64 192l8-6M64 206l8-6M64 220l8-6'/%3E%3C/g%3E%3Cg fill='%23ff8ad0' fill-opacity='.12'%3E%3Cpath d='M196 196a7 7 0 0 1 12 5c0 7-12 15-12 15s-12-8-12-15a7 7 0 0 1 12-5z'/%3E%3C/g%3E%3Cg fill='%238ad0ff' fill-opacity='.1'%3E%3Ccircle cx='150' cy='150' r='6'/%3E%3Ccircle cx='250' cy='170' r='5'/%3E%3Ccircle cx='30' cy='120' r='5'/%3E%3C/g%3E%3C/svg%3E"); }
/* CYBERPUNK: neon ızgara + tarama çizgileri + ufuk parlaması.
   FPS: background-position kaydırması yerine ucuz opaklık nabzı (composited). */
body[data-theme="cyberpunk"]::before{
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%2300e5ff' stroke-opacity='.12' stroke-width='2' stroke-linecap='round'%3E%3Crect x='40' y='40' width='34' height='34' rx='4'/%3E%3Cpath d='M48 40v-10M57 40v-10M66 40v-10M48 74v10M57 74v10M66 74v10M40 48h-10M40 57h-10M40 66h-10M74 48h10M74 57h10M74 66h10'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ff2bd6' stroke-opacity='.1' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M180 60h40l14 14v30'/%3E%3Ccircle cx='180' cy='60' r='3.5'/%3E%3Ccircle cx='234' cy='104' r='3.5'/%3E%3Cpath d='M200 200h-30l-14 14v26'/%3E%3Ccircle cx='200' cy='200' r='3.5'/%3E%3Ccircle cx='156' cy='240' r='3.5'/%3E%3C/g%3E%3Cg fill='none' stroke='%2300e5ff' stroke-opacity='.1' stroke-width='2'%3E%3Cpath d='M250 180l12 7v14l-12 7-12-7v-14z'/%3E%3Cpath d='M250 208l12 7v14l-12 7-12-7v-14z' stroke-opacity='.06'/%3E%3C/g%3E%3C/svg%3E"),
        repeating-linear-gradient(0deg, rgba(0,229,255,.06) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(0,229,255,.09) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(0deg, rgba(255,43,214,.07) 0 1px, transparent 1px 64px),
        linear-gradient(180deg, transparent 55%, rgba(0,229,255,.12) 100%);
    will-change: opacity;
    animation: neonPulse 4.5s ease-in-out infinite alternate;
}
@keyframes neonPulse { from { opacity: .55; } to { opacity: 1; } }
/* STEAMPUNK: gerçek dişli çarklar (çizgi sanat) */
body[data-theme="steampunk"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23e0a73e' stroke-opacity='.13' stroke-width='2.2'%3E%3Ccircle cx='62' cy='62' r='24'/%3E%3Ccircle cx='62' cy='62' r='9'/%3E%3Cpath d='M62 30v-9M62 94v9M30 62h-9M94 62h9M39 39l-6-6M85 85l6 6M85 39l6-6M39 85l-6 6'/%3E%3C/g%3E%3Cg fill='none' stroke='%23e0a73e' stroke-opacity='.1' stroke-width='2.2'%3E%3Ccircle cx='118' cy='108' r='14'/%3E%3Ccircle cx='118' cy='108' r='5'/%3E%3Cpath d='M118 90v-6M118 126v6M100 108h-6M136 108h6'/%3E%3C/g%3E%3Cg fill='none' stroke='%23e0a73e' stroke-opacity='.12' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='222' cy='80' r='26'/%3E%3Ccircle cx='222' cy='80' r='20'/%3E%3Cpath d='M222 68v12l8 6'/%3E%3Cpath d='M222 50v-8M216 42h12'/%3E%3C/g%3E%3Cg fill='none' stroke='%23e0a73e' stroke-opacity='.1' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='90' cy='222' r='13'/%3E%3Cpath d='M101 229l52 34'/%3E%3Cpath d='M138 253l6-9M150 261l6-9'/%3E%3C/g%3E%3C/svg%3E"); }
/* AKADEMİ: dark-academia çizimleri — kitap yığını, sütun, tüy kalem, defne dalı */
body[data-theme="akademi"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23c9974d' stroke-opacity='.13' stroke-width='2' stroke-linecap='round'%3E%3Crect x='26' y='176' width='52' height='12' rx='2'/%3E%3Crect x='31' y='162' width='46' height='12' rx='2'/%3E%3Crect x='24' y='148' width='48' height='12' rx='2'/%3E%3Cpath d='M34 182h30M40 168h26'/%3E%3C/g%3E%3Cg fill='none' stroke='%23c9974d' stroke-opacity='.11' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M188 24h56M192 32h48M196 36v52M208 36v52M220 36v52M232 36v52M192 92h48M188 100h56'/%3E%3C/g%3E%3Cg fill='none' stroke='%23c9974d' stroke-opacity='.13' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M40 96C56 70 82 52 98 40 82 62 66 82 52 100z'/%3E%3Cpath d='M52 100l-8 10'/%3E%3C/g%3E%3Cg fill='none' stroke='%23c9974d' stroke-opacity='.11' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M170 268c24-6 44-24 52-48'/%3E%3Cellipse cx='182' cy='260' rx='9' ry='4' transform='rotate(-24 182 260)'/%3E%3Cellipse cx='198' cy='248' rx='9' ry='4' transform='rotate(-38 198 248)'/%3E%3Cellipse cx='210' cy='232' rx='9' ry='4' transform='rotate(-56 210 232)'/%3E%3C/g%3E%3Cg fill='none' stroke='%23c9974d' stroke-opacity='.11' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M96 236h28l-4 18H100z'/%3E%3Cpath d='M110 236v-10c0-4 4-6 8-4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23c9974d' stroke-opacity='.1' stroke-width='2'%3E%3Ccircle cx='250' cy='170' r='11'/%3E%3Ccircle cx='276' cy='170' r='11'/%3E%3Cpath d='M261 170h4'/%3E%3C/g%3E%3C/svg%3E"); }
/* OLİMPOS: yunan sütunu + defne + meander (açık mavi, çok hafif) */
body[data-theme="olimpos"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%232f6fba' stroke-opacity='.1' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M28 62L76 34l48 28z'/%3E%3Cpath d='M32 62h88M36 70h80'/%3E%3Cpath d='M42 74v40M60 74v40M78 74v40M96 74v40'/%3E%3Cpath d='M36 118h80M32 126h88'/%3E%3C/g%3E%3Cg fill='none' stroke='%23b8932a' stroke-opacity='.12' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M212 96a44 44 0 1 0 56 0'/%3E%3Cellipse cx='215' cy='112' rx='9' ry='4' transform='rotate(-60 215 112)'/%3E%3Cellipse cx='208' cy='130' rx='9' ry='4' transform='rotate(-80 208 130)'/%3E%3Cellipse cx='265' cy='112' rx='9' ry='4' transform='rotate(60 265 112)'/%3E%3Cellipse cx='272' cy='130' rx='9' ry='4' transform='rotate(80 272 130)'/%3E%3C/g%3E%3Cg fill='none' stroke='%232f6fba' stroke-opacity='.1' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M70 210c0-8 8-10 14-8M98 210c0-8-8-10-14-8'/%3E%3Cpath d='M72 210h24l-3 34c-1 8-17 8-18 0z'/%3E%3Cpath d='M76 218h16'/%3E%3C/g%3E%3Cg fill='none' stroke='%23b8932a' stroke-opacity='.1' stroke-width='2'%3E%3Cpath d='M180 252h14v14h-14zM194 252v-8h22v22h-8M208 266h-8v-8'/%3E%3Cpath d='M224 252h14v14h-14zM238 252v-8h22v22h-8M252 266h-8v-8'/%3E%3C/g%3E%3C/svg%3E"); }

/* Kişiselleştir butonu + modal */
.home-foot { text-align:center; margin: 1.4rem 0 .6rem; }
.pz-modal { position:fixed; inset:0; z-index:60; background:rgba(5,8,14,.72); display:flex; align-items:center; justify-content:center; padding:1rem; }
.pz-card { background:var(--panel); border:1px solid var(--panel-edge); border-radius:var(--radius); padding:1rem 1.2rem; max-width:460px; width:100%; box-shadow:var(--shadow); }
.pz-sec { font-size:.8rem; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.08em; margin:.9rem 0 .4rem; }
.pz-grid { display:flex; flex-wrap:wrap; gap:.5rem; }
.pz-opt, .pz-solid { padding:.45rem .8rem; border-radius:var(--radius-sm); border:1px solid var(--panel-edge); background:var(--panel-2); color:var(--ink-soft); cursor:pointer; font-size:.85rem; }
.pz-opt.on, .pz-solid.on { border-color:var(--gold); color:var(--gold-bright); box-shadow:var(--glow-gold); }
.pz-solid { display:inline-flex; align-items:center; gap:.4rem; }
.pz-solid::before { content:""; width:14px; height:14px; border-radius:50%; display:inline-block; background:currentColor; }
.sw-teal{ color:#6fcfc2; } .sw-amber{ color:#e0b15c; } .sw-kirmizi{ color:#f0726a; } .sw-mor{ color:#a99cf0; } .sw-yesil{ color:#7ec96b; }
.sw-mavi{ color:#5aa9f0; } .sw-turuncu{ color:#f0975a; } .sw-pembe{ color:#f07ab8; } .sw-none{ color:var(--ink-dim); }
.bk-actions { display: flex; gap: .35rem; margin-top: .45rem; }
.bk-actions .btn.small { flex: 1; padding: .3rem .2rem; font-size: .76rem; }
.btn.small.danger { color: var(--coral, #e0683c); border-color: rgba(224,104,60,.5); flex: 0 0 auto; }

/* Kurul konu sayfası: alt test butonu */
.topic-test-foot { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--panel-edge); }
.topic-test-foot .btn { width: 100%; }

/* Sohbet: görsel ekleme (Claude vision aktifken) */
.chat-icon { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
    border:1px solid var(--panel-edge); border-radius:10px; cursor:pointer; font-size:1.1rem; flex:0 0 auto; }
.chat-icon:hover { border-color: var(--gold); }
.chat-img-bar { padding:.35rem .6rem; margin:.3rem 0; border:1px dashed var(--panel-edge); border-radius:8px; font-size:.8rem; }
.cap-pill { font-size:.66rem; padding:.1rem .45rem; border-radius:999px; border:1px solid var(--teal); color:var(--teal); }

/* Yönetici panosu — 14 günlük trend çubukları */
.panel-trend { margin:.6rem 0; padding:.6rem .7rem; border:1px solid var(--panel-edge); border-radius:10px; }
.pt-title { font-size:.76rem; margin-bottom:.4rem; }
.pb-row { display:flex; align-items:flex-end; gap:.25rem; height:74px; }
.pb-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:.2rem; }
.pb-bar { width:100%; max-width:18px; background:linear-gradient(180deg,var(--gold),rgba(224,160,48,.4)); border-radius:3px 3px 0 0; }
.pb-x { font-size:.56rem; color:var(--ink-dim); }

/* Sonnet SVG diyagramları + sesli okuma */
.svg-box { margin:.6rem 0; padding:.5rem; background:rgba(0,0,0,.18); border:1px solid var(--panel-edge); border-radius:10px; overflow:auto; }
.svg-box svg { max-width:100%; height:auto; display:block; }
.read-head { display:flex; justify-content:flex-end; margin-bottom:.3rem; }
.tts-btn { background:rgba(255,255,255,.04); border:1px solid var(--panel-edge); border-radius:8px;
    color:var(--gold-bright); cursor:pointer; font-size:.78rem; padding:.2rem .5rem; }
.tts-btn:hover { border-color:var(--gold); }
.msg-tts { float:right; margin-left:.4rem; padding:.05rem .35rem; font-size:.7rem; }

/* =========================================================================
   UI CİLASI v1 — yumuşak içerik geçişi + skeleton + temalı modal + yardımcılar
   ========================================================================= */

/* içerik yumuşak girer (view render'ları setContent ile basar) */
.swap-in { animation: swapIn .22s ease; }
@keyframes swapIn { from { opacity: 0; transform: translateY(6px); } }

/* skeleton: tema uyumlu altın-alfa shimmer (gri değil) */
.skel { display: flex; flex-direction: column; gap: .55rem; padding: .2rem 0; }
.skel-line, .skel-tile, .skel-row {
    background: linear-gradient(90deg, rgba(224,177,92,.06) 25%, rgba(224,177,92,.16) 50%, rgba(224,177,92,.06) 75%);
    background-size: 200% 100%; animation: skelShimmer 1.2s infinite; border-radius: 6px;
}
.skel-line { height: 13px; }
.skel-line:nth-child(3n) { width: 82%; }
.skel-line:nth-child(4n) { width: 64%; }
.skel-row { height: 46px; border-radius: 10px; }
.skel-q { display: flex; flex-direction: column; gap: .45rem; padding: .8rem .9rem; margin-bottom: .6rem;
    border: 1px solid var(--panel-edge); border-radius: var(--radius); background: rgba(255,255,255,.02); }
.skel-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; margin-bottom: .6rem; }
.skel-tile { height: 68px; border-radius: var(--radius-sm); }
@keyframes skelShimmer { to { background-position: -200% 0; } }

/* temalı modal (native confirm/alert yerine) */
.ui-modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
    padding: 1rem; background: rgba(6,10,15,.72); backdrop-filter: blur(4px); animation: uiModalIn .16s ease; }
.ui-modal.out { opacity: 0; transition: opacity .16s; }
@keyframes uiModalIn { from { opacity: 0; } }
.ui-modal-card { width: min(380px, 100%); background: linear-gradient(180deg, var(--panel-2), var(--deep));
    border: 1px solid var(--panel-edge); border-radius: 16px; box-shadow: var(--shadow); padding: 1.1rem;
    animation: uiCardIn .18s ease; }
@keyframes uiCardIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.ui-modal-card.danger { border-color: rgba(240,138,114,.45); }
.ui-modal-title { font-weight: 700; color: var(--gold-bright); margin-bottom: .5rem; }
.ui-modal-body { color: var(--ink-soft); font-size: .93rem; line-height: 1.5; white-space: pre-line; }
.ui-modal-btns { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.ui-modal-card.danger .btn.glow.danger { border-color: var(--coral); color: var(--coral);
    box-shadow: 0 0 14px rgba(240,138,114,.25); }

/* tekrar eden inline stiller yerine yardımcı sınıflar */
.stack { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.mt-s { margin-top: .4rem; } .mt-m { margin-top: .8rem; } .mb-m { margin-bottom: .8rem; }
.sec-title { font-size: 1rem; font-weight: 700; color: var(--gold-bright); margin: 1rem 0 .45rem; }

/* hâkimiyet (BKT) barları — telafi görünümü */
.mast-row { display: flex; align-items: center; gap: .6rem; margin: .3rem 0; font-size: .86rem; }
.mast-name { flex: 1 1 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mast-track { flex: 1 1 60%; height: 10px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.mast-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--coral), var(--gold)); transition: width .5s ease; }
.mast-fill.mid { background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }
.mast-fill.high { background: linear-gradient(90deg, var(--teal), #9be8dc); }
.mast-pct { flex: 0 0 auto; font-size: .78rem; color: var(--ink-soft); min-width: 60px; text-align: right; }

/* gidişat sparkline */
.spark-box { margin: .4rem 0 .8rem; padding: .55rem .7rem; border: 1px solid var(--panel-edge); border-radius: 10px; }
.spark-box svg { display: block; width: 100%; height: 44px; }

/* telafi aksiyon kartları */
.rem-card { border: 1px solid var(--panel-edge); border-radius: var(--radius); padding: .75rem .85rem;
    margin: .55rem 0; background: rgba(255,255,255,.02); }
.rem-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .35rem; }
.rem-topic { font-weight: 700; color: var(--ink); }
.rem-why { font-size: .76rem; color: var(--ink-dim); margin-bottom: .5rem; }
.rem-actions { display: flex; gap: .45rem; flex-wrap: wrap; }
.rem-actions .btn { font-size: .8rem; padding: .35rem .6rem; }

/* kademeli test sonucu + hâkimiyet deltası */
.opt.correct, .opt.wrong { transition: background .35s, border-color .35s, box-shadow .35s; }
.opt.reveal-pulse { animation: revealPulse .4s ease; }
@keyframes revealPulse { 40% { transform: scale(1.015); } }
.mast-delta { font-size: .84rem; padding: .3rem .55rem; border-radius: 8px; margin: .25rem 0;
    background: rgba(255,255,255,.03); border: 1px solid var(--panel-edge); }
.mast-delta.up b { color: var(--teal); }
.mast-delta.down b { color: var(--coral); }

/* Bugün şeridi: öneri çipi vurgulu, zayıf konu çipleri tıklanır */
.plan-chip-btn { cursor: pointer; }
.plan-chip-btn:hover { border-color: var(--gold); }
.plan-suggest { border-color: var(--gold-bright) !important; color: var(--gold-bright) !important;
    box-shadow: 0 0 10px rgba(224,177,92,.18); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    .swap-in, .ui-modal, .ui-modal-card, .opt.reveal-pulse { animation: none !important; }
    .skel-line, .skel-tile, .skel-row { animation: none !important; }
    .mast-fill { transition: none !important; }
    body[data-theme="klasik"]::before, body[data-theme="cyberpunk"]::before { animation: none !important; transform: none !important; }
}

/* =========================================================================
   İBNİ SİNA v2 — Claude uygulaması tarzı tam ekran sohbet
   ========================================================================= */
.chat-page { display: flex; flex-direction: column; max-width: 780px; margin: 0 auto;
    height: calc(100dvh - var(--nav-h) - 120px); min-height: 320px; }
.chat-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .4rem .2rem 1rem;
    display: flex; flex-direction: column; gap: 1rem; -webkit-overflow-scrolling: touch; }

/* boş durum: karşılama */
.chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; }
.chat-empty-orb { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem; color: var(--gold-bright); background: var(--panel-2); border: 1px solid var(--gold-deep);
    box-shadow: var(--glow-gold); }
.chat-empty-t { font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.chat-empty-s { font-size: .88rem; }

/* kullanıcı: sağda yumuşak balon; asistan: balonsuz düz metin + küçük avatar (Claude tarzı) */
.cmsg.user { align-self: flex-end; max-width: 82%; padding: .6rem .9rem; border-radius: 18px 18px 5px 18px;
    background: linear-gradient(180deg, rgba(217,178,90,.18), rgba(217,178,90,.1));
    border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); color: var(--ink); line-height: 1.55; word-break: break-word; }
.cmsg.assistant { position: relative; align-self: stretch; padding-left: 38px; color: var(--ink-soft); line-height: 1.62; }
.cmsg.assistant .cav { position: absolute; left: 0; top: 2px; width: 27px; height: 27px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: var(--panel-2); border: 1px solid var(--gold-deep); color: var(--gold-bright); font-size: .85rem; }
.cmsg.assistant .cbody p { margin: .35rem 0; }
.cmsg.assistant .cbody h2 { font-size: 1.02rem; margin: .7rem 0 .3rem; color: var(--gold-bright); }
.cmsg.assistant .cbody ul { margin: .3rem 0; padding-left: 1.2rem; }
.cmsg.assistant .msg-tts { position: absolute; right: 0; top: 0; float: none; }
/* yazıyor: üç nokta nabzı */
.cdots { display: inline-flex; gap: 5px; padding: .5rem 0; }
.cdots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-dim); animation: cdot 1.1s ease-in-out infinite; }
.cdots i:nth-child(2){ animation-delay: .18s; } .cdots i:nth-child(3){ animation-delay: .36s; }
@keyframes cdot { 0%,100% { opacity: .25; transform: translateY(0); } 45% { opacity: 1; transform: translateY(-3px); } }

/* kompozer: yuvarlatılmış kutu — üstte textarea, altta çipler + gönder */
.composer-wrap { flex: 0 0 auto; padding: .4rem 0 .2rem; }
.composer { background: var(--panel-2); border: 1px solid var(--panel-edge); border-radius: 20px;
    padding: .55rem .7rem .5rem; box-shadow: 0 6px 24px rgba(0,0,0,.28); transition: border-color .15s; }
.composer:focus-within { border-color: var(--gold); box-shadow: 0 6px 24px rgba(0,0,0,.28), var(--glow-gold); }
.composer textarea { width: 100%; background: none; border: none; outline: none; resize: none;
    color: var(--ink); font: inherit; font-size: 16px; line-height: 1.5; max-height: 160px; padding: .15rem .2rem; }
.comp-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .3rem; }
.comp-left, .comp-right { display: flex; align-items: center; gap: .4rem; }
.comp-ico { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; border: none; background: none; color: var(--ink-dim); cursor: pointer; }
.comp-ico:hover { background: rgba(255,255,255,.06); color: var(--ink-soft); }
.comp-ico svg { width: 19px; height: 19px; }
.comp-chip { border: 1px solid var(--panel-edge); background: none; color: var(--ink-dim); cursor: pointer;
    border-radius: 999px; padding: .28rem .65rem; font-size: .78rem; transition: all .15s; }
.comp-chip:hover { border-color: var(--gold-deep); color: var(--ink-soft); }
.comp-chip.on { border-color: var(--gold); color: var(--gold-bright); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.comp-send { width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #1a1206; box-shadow: var(--glow-gold); }
.comp-send:hover { filter: brightness(1.08); }
.comp-send svg { width: 18px; height: 18px; }
.comp-hint { font-size: .7rem; text-align: center; margin-top: .35rem; }

@media (max-width: 820px) { .chat-page { height: calc(100dvh - var(--nav-h) - 104px); } }
@media (prefers-reduced-motion: reduce) { .cdots i { animation: none; } }

/* =========================================================================
   ÖNCELİKLİ PDF — altın folyo kart (profil kartı havası) + ekleme butonu
   ========================================================================= */
.bk-pri-btn { padding: .45rem .8rem; border-radius: var(--radius-sm); cursor: pointer; font-size: .85rem;
    border: 1px solid var(--panel-edge); background: var(--panel-2); color: var(--ink-soft); transition: all .15s; }
.bk-pri-btn.on { border-color: var(--gold); color: #1a1206;
    background: linear-gradient(135deg, var(--gold-bright), var(--gold)); box-shadow: var(--glow-gold); font-weight: 700; }
.bk-card.bk-gold { position: relative; border: 1px solid var(--gold);
    background: linear-gradient(150deg, rgba(224,177,92,.16), rgba(224,177,92,.05) 45%, rgba(240,205,134,.14));
    box-shadow: 0 0 18px rgba(224,177,92,.22), inset 0 1px 0 rgba(240,205,134,.25); }
.bk-card.bk-gold::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255,235,190,.14) 48%, transparent 62%);
    background-size: 240% 100%; animation: goldShine 4.5s ease-in-out infinite; }
@keyframes goldShine { 0%,55%,100% { background-position: 120% 0; } 25% { background-position: -60% 0; } }
.bk-card.bk-gold .bk-title { color: var(--gold-bright); }
.bk-pri-badge { position: absolute; top: 8px; right: 8px; z-index: 2; font-size: .62rem; font-weight: 700;
    padding: .14rem .5rem; border-radius: 999px; color: #1a1206;
    background: linear-gradient(135deg, var(--gold-bright), var(--gold)); box-shadow: var(--glow-gold); }

/* =========================================================================
   OLİMPOS AYDINLATMA — sabit-koyu gradyanlı bileşenler açık temada beyaz+altın olur
   ========================================================================= */
body[data-theme="olimpos"] .big-card {
    background: linear-gradient(180deg, rgba(249,251,254,.96), rgba(233,240,249,.98));
    border-color: var(--panel-edge); }
body[data-theme="olimpos"] .big-card::before {
    background: linear-gradient(120deg, transparent 30%, rgba(201,162,39,.12) 50%, transparent 70%); }
body[data-theme="olimpos"] .bottom-nav {
    background: linear-gradient(180deg, rgba(247,250,253,.94), rgba(230,238,248,.98));
    border-top-color: var(--panel-edge); }
body[data-theme="olimpos"] .page-head {
    background: linear-gradient(180deg, rgba(247,250,253,.97), rgba(235,242,250,.92));
    border-bottom-color: var(--panel-edge); }
body[data-theme="olimpos"] .topbar {
    background: linear-gradient(180deg, rgba(247,250,253,.94), rgba(233,240,249,.9)); }
body[data-theme="olimpos"] .pomo-card {
    background: linear-gradient(180deg, #f7fafd, #e7eef7); border-color: var(--panel-edge);
    box-shadow: 0 24px 60px rgba(40,70,120,.25), inset 0 1px 0 rgba(201,162,39,.12); }
body[data-theme="olimpos"] .pomo-modal { background: rgba(210,224,240,.6); }
body[data-theme="olimpos"] .ui-modal, body[data-theme="olimpos"] .pz-modal,
body[data-theme="olimpos"] .av-modal { background: rgba(205,220,238,.62); }
body[data-theme="olimpos"] .ui-modal-card, body[data-theme="olimpos"] .av-card {
    background: linear-gradient(180deg, #f7fafd, #e9f0f8); }
body[data-theme="olimpos"] .composer { background: #f7fafd; box-shadow: 0 6px 22px rgba(40,70,120,.14); }
body[data-theme="olimpos"] .msg.user, body[data-theme="olimpos"] .cmsg.user {
    background: linear-gradient(180deg, rgba(201,162,39,.14), rgba(201,162,39,.07)); color: var(--ink); }
body[data-theme="olimpos"] code { background: #e8eef7; color: #2f6fba; }
body[data-theme="olimpos"] .svg-box { background: rgba(47,111,186,.05); }
body[data-theme="olimpos"] .starfield {
    background:
        radial-gradient(620px 460px at 22% 24%, rgba(47,111,186,.08), transparent 70%),
        radial-gradient(680px 520px at 78% 68%, rgba(201,162,39,.07), transparent 70%); }
body[data-theme="olimpos"]::before { opacity: 1; }
body[data-theme="olimpos"] .toast { background: #f7fafd; color: var(--ink); border: 1px solid var(--panel-edge); }
body[data-theme="olimpos"] .skel-line, body[data-theme="olimpos"] .skel-tile, body[data-theme="olimpos"] .skel-row {
    background: linear-gradient(90deg, rgba(47,111,186,.08) 25%, rgba(47,111,186,.16) 50%, rgba(47,111,186,.08) 75%);
    background-size: 200% 100%; }

/* özgün SVG ikonlar: sayfa başlığı + profil kart istatistikleri + Sana özel */
.ph-ico { display: inline-flex; vertical-align: -3px; margin-right: .45rem; }
.ph-ico .ico, .ph-ico svg { width: 19px; height: 19px; }
.pk-stat-ico .ico, .pk-stat-ico svg { width: 20px; height: 20px; display: block; margin: 0 auto .1rem; color: var(--gold-bright); }
.pf-stat-ico .ico, .pf-stat-ico svg { width: 22px; height: 22px; display: block; margin: 0 auto .15rem; color: var(--teal); }
.pf-secret h3 .ph-ico { color: var(--gold-bright); }

/* FAKÜLTE hesabı: öğrenci kısayolları (alt nav) tamamen gizli — yalnız analitik panosu */
body.role-fakulte .bottom-nav { display: none; }
body.role-fakulte .app { padding-bottom: 1.5rem; }
.fac-sinif { max-width: 140px; padding: .35rem .5rem; border-radius: var(--radius-sm);
    background: var(--panel-2); color: var(--ink); border: 1px solid var(--panel-edge); font: inherit; font-size: .84rem; }
.fac-table-wrap { overflow-x: auto; }
.fac-table { width: 100%; font-size: .84rem; }
.fac-table th { text-align: left; color: var(--ink-dim); font-weight: 600; padding: .35rem .5rem; border-bottom: 1px solid var(--panel-edge); }
.fac-table td { padding: .35rem .5rem; border-bottom: 1px solid rgba(255,255,255,.05); }

/* =========================================================================
   ANLATIM TİPOGRAFİSİ (.md-body) — ferah, yapılandırılmış, "ders dosyası" hissi
   ========================================================================= */
.md-body { line-height: 1.75; font-size: .96rem; color: var(--ink-soft); }
.md-body p { margin: .65rem 0; }
.md-body h2 { font-size: 1.12rem; color: var(--gold-bright); margin: 1.5rem 0 .6rem;
    padding: .35rem 0 .35rem .7rem; border-left: 3px solid var(--gold);
    background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 8%, transparent), transparent 70%);
    border-radius: 0 8px 8px 0; }
.md-body h2:first-child { margin-top: .2rem; }
.md-body h3 { font-size: .98rem; color: var(--teal); margin: 1.1rem 0 .35rem; font-weight: 700; }
.md-body ul, .md-body ol { margin: .5rem 0 .8rem; padding-left: 1.35rem; }
.md-body li { margin: .3rem 0; }
.md-body li::marker { color: var(--gold); }
.md-body strong { color: var(--gold-bright); font-weight: 700; }
.md-body em { color: var(--teal); font-style: normal; }
.md-body code { background: rgba(111,207,194,.1); border: 1px solid rgba(111,207,194,.22);
    color: var(--teal); padding: .06rem .38rem; border-radius: 6px; font-size: .86em; }
.md-hr { border: none; border-top: 1px solid var(--panel-edge); margin: 1.2rem 0; }
.md-quote { margin: .7rem 0; padding: .55rem .9rem; border-left: 3px solid var(--teal);
    background: rgba(111,207,194,.06); border-radius: 0 10px 10px 0; color: var(--ink-soft); }
/* tablolar: AI'ın "Anahtar Kavramlar" tabloları artık gerçek tablo */
.md-table-wrap { overflow-x: auto; margin: .8rem 0 1rem; border: 1px solid var(--panel-edge);
    border-radius: 12px; }
.md-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.md-table th { text-align: left; padding: .55rem .75rem; color: var(--gold-bright);
    background: rgba(224,177,92,.08); border-bottom: 1px solid var(--panel-edge);
    font-weight: 700; white-space: nowrap; }
.md-table td { padding: .5rem .75rem; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: top; }
.md-table tr:last-child td { border-bottom: none; }
.md-table tr:nth-child(2n) td { background: rgba(255,255,255,.02); }
.md-body .mermaid-box, .md-body .svg-box { margin: 1rem 0; }

/* =========================================================================
   TASARIM GEÇİŞİ v2 — görünümler "2000'ler amatör site" hissinden çıkar
   ========================================================================= */
/* görünüm başlığı: tutarlı, ferah, alt çizgili */
.vhead { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    margin: 0 0 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--panel-edge); }
.vhead h2 { margin: 0; font-size: 1.18rem; letter-spacing: .01em; display: flex; align-items: center; gap: .5rem; }
.vprog { font-size: .74rem; color: var(--ink-dim); border: 1px solid var(--panel-edge);
    padding: .18rem .6rem; border-radius: 999px; white-space: nowrap; }

/* karolar (tile) — telafi/panel/fakülte */
.grid-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .7rem; margin: .3rem 0 .9rem; }
.tile { padding: .8rem .9rem; border: 1px solid var(--panel-edge); border-radius: 14px;
    background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
    transition: border-color .15s; }
.tile:hover { border-color: var(--gold-deep); }
.t-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); }
.t-value { font-size: 1.55rem; font-weight: 700; color: var(--gold-bright); margin: .15rem 0; line-height: 1.1; }
.t-foot { font-size: .72rem; color: var(--ink-dim); }

/* SRS flashcard — kart hissi güçlensin */
.flashcard { border-radius: 18px !important; border: 1px solid var(--panel-edge);
    background: linear-gradient(165deg, var(--panel-2), var(--deep)) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
    padding: 2rem 1.6rem !important; min-height: 190px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: 1.05rem; line-height: 1.65; }
.q-btn { border-radius: 12px !important; padding: .65rem .5rem !important; font-weight: 700; }

/* sıralama satırları */
.lb-row { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; margin: .4rem 0;
    border: 1px solid var(--panel-edge); border-radius: 12px;
    background: linear-gradient(90deg, rgba(255,255,255,.03), transparent);
    transition: border-color .15s, transform .12s; }
.lb-row:hover { border-color: var(--gold-deep); transform: translateX(2px); }
.lb-row:nth-child(1) { border-color: rgba(240,205,134,.5); box-shadow: 0 0 14px rgba(224,177,92,.12); }
.lb-pos { width: 26px; height: 26px; flex: 0 0 26px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--panel-2); border: 1px solid var(--panel-edge);
    font-size: .78rem; font-weight: 700; color: var(--gold-bright); }

/* kütüphane/çıkmış kitap kartları */
.bk-card { border-radius: 14px; overflow: hidden; transition: transform .16s, border-color .16s, box-shadow .16s; }
.bk-card:hover { transform: translateY(-3px); border-color: var(--gold-deep); box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.bk-title { font-weight: 700; }

/* zayıf konu barları (telafi) — weak-row'u mast-row diliyle hizala */
.weak-row { display: flex; align-items: center; gap: .6rem; margin: .35rem 0; font-size: .86rem; }
.weak-row > span:first-child { flex: 1 1 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weak-bar { flex: 1 1 60%; height: 10px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.weak-fill { display: block; height: 100%; border-radius: 999px; transition: width .5s ease; }

/* kayıtlı anlatımlar listesi */
.off-row { display: flex; justify-content: space-between; align-items: center; width: 100%;
    padding: .7rem .85rem; margin: .35rem 0; border: 1px solid var(--panel-edge); border-radius: 12px;
    background: rgba(255,255,255,.025); color: var(--ink-soft); cursor: pointer; font: inherit;
    transition: border-color .15s, transform .12s; }
.off-row:hover { border-color: var(--gold); transform: translateX(2px); color: var(--ink); }
.off-date { font-size: .72rem; color: var(--ink-dim); }

/* test soru blokları — daha net ayrım, ferah şıklar */
.q-block { border: 1px solid var(--panel-edge); border-radius: 14px; padding: 1rem 1.1rem;
    margin: .9rem 0; background: rgba(255,255,255,.02); }
.q-stem { font-weight: 600; line-height: 1.6; margin-bottom: .7rem; color: var(--ink); }
.opt { display: block; width: 100%; text-align: left; margin: .35rem 0; padding: .6rem .8rem;
    border-radius: 10px; line-height: 1.5; }
.q-exp { margin-top: .6rem; padding: .55rem .8rem; border-left: 3px solid var(--teal);
    background: rgba(111,207,194,.06); border-radius: 0 10px 10px 0; font-size: .88rem; }

/* kaynak rozetleri (anlatım altı) */
.sources { margin-top: 1.1rem; padding-top: .7rem; border-top: 1px dashed var(--panel-edge); }
.source-pill { display: inline-block; font-size: .68rem; padding: .12rem .5rem; margin: .12rem .15rem;
    border: 1px solid var(--panel-edge); border-radius: 999px; color: var(--ink-dim);
    background: rgba(255,255,255,.03); }

/* geniş kart (Profilim) — ızgarada 2 sütun kaplar */
.big-card.wide { grid-column: span 2; }
@media (max-width: 560px) { .big-card.wide { grid-column: span 1; } }

/* Ayarlar sekmesi */
.set-row { display: flex; align-items: baseline; gap: .7rem; padding: .5rem .2rem;
    border-bottom: 1px solid rgba(255,255,255,.05); font-size: .92rem; flex-wrap: wrap; }
.set-lbl { flex: 0 0 150px; color: var(--ink-dim); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.set-form { display: flex; flex-direction: column; gap: .55rem; max-width: 420px; }
.set-form input, .set-form select, .set-form textarea { padding: .55rem .8rem; border-radius: 10px;
    border: 1px solid var(--panel-edge); background: rgba(255,255,255,.04); color: var(--ink);
    font: inherit; font-size: .92rem; }
.set-form input:focus, .set-form textarea:focus { outline: none; border-color: var(--gold); box-shadow: var(--glow-gold); }
.set-form textarea { resize: vertical; min-height: 90px; }

/* admin: gelen geri bildirimler */
.fb-item { border: 1px solid var(--panel-edge); border-radius: 12px; padding: .6rem .8rem; margin: .45rem 0;
    background: rgba(255,255,255,.02); }
.fb-head { display: flex; gap: .6rem; align-items: baseline; font-size: .8rem; color: var(--ink-dim); margin-bottom: .25rem; }
.fb-subject { color: var(--gold-bright); font-weight: 700; text-transform: capitalize; }
.fb-item.yeni { border-color: var(--gold-deep); }

/* sıralama madalyaları (emoji yerine): altın/gümüş/bronz rütbe rozeti */
.lb-medal { width: 26px; height: 26px; flex: 0 0 26px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: .8rem; font-weight: 800; color: #1a1206; }
.lb-medal.m1 { background: linear-gradient(135deg, #f0cd86, #c9992e); box-shadow: 0 0 10px rgba(224,177,92,.4); }
.lb-medal.m2 { background: linear-gradient(135deg, #dfe5ec, #9aa6b4); }
.lb-medal.m3 { background: linear-gradient(135deg, #e0aa7a, #a86f3f); }
/* kilitli konu göstergesi (emoji yerine ince kilit çizgisi) */
.locked-topic .lk::before { content: ""; display: inline-block; width: 10px; height: 8px; margin-right: .45rem;
    border: 1.6px solid var(--ink-dim); border-radius: 2px; border-top: none;
    box-shadow: 0 -5px 0 -1.6px transparent; position: relative; }
.locked-topic .lk { opacity: .65; }
/* pomodoro ses butonu: sessizken soluk */
.pomo-mute.muted { opacity: .45; }
/* streak alevi SVG boyutu */
.streak-ico svg { width: 15px; height: 15px; display: block; }

/* =========================================================================
   AÇIK DÜZEN v3 — "lacivert kabarcık" iptal: içerik sayfaları sohbet gibi
   doğrudan zeminde, ortalanmış sütunda yaşar. Yapıyı artık iç bileşenler
   (q-block, tile, composer, tablo) taşır; dış slab yok.
   ========================================================================= */
#content-body > .card {
    background: transparent; border: none; box-shadow: none;
    padding: 0; margin: 0 auto 1.2rem; max-width: 820px;
    clip-path: none !important; overflow: visible;
}
#content-body > .card::before, #content-body > .card::after { display: none; }
/* iç (vurgu) kartları kutulu kalır: profil "Sana özel" vb. */
#content-body .card .card { background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
    border: 1px solid var(--panel-edge); padding: 1.1rem 1.2rem; }

/* İBNİ SİNA ÇERÇEVESİ — sohbet artık serbest değil: mazgal dokulu çerçeveli panel */
.chat-scroll {
    border: 1px solid var(--panel-edge); border-radius: 18px;
    padding: 1rem 1.1rem;
    background:
        linear-gradient(rgba(111,207,194,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(111,207,194,.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.14));
    background-size: 42px 42px, 42px 42px, 100% 100%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.22);
}
body[data-theme="olimpos"] .chat-scroll {
    background:
        linear-gradient(rgba(47,111,186,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47,111,186,.06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.6), rgba(230,238,248,.75));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 26px rgba(45,75,125,.12);
}

/* zemindeki mazgal (grid) biraz öne çıksın — tüm sayfalarda derinlik hissi */
.starfield::after {
    background-image:
        linear-gradient(rgba(111,207,194,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(111,207,194,.06) 1px, transparent 1px);
}

/* TİPOGRAFİ: italik YOK — vurgular kalın */
.empty { font-style: normal; font-weight: 600; color: var(--ink-dim); }
.pk-flavor { font-style: normal; }
.msg.assistant.typing { font-style: normal; }

/* RENK UYUMU: köşe parantezleri ve karışık vurgu çizgileri sadeleşir —
   palet: altın (birincil) + teal (ikincil), kırmızı yalnız hata/tehlike */
.card::before { background: linear-gradient(90deg, transparent, var(--gold), transparent) !important; }
.vprog { color: var(--ink-dim); border-color: var(--panel-edge); }
.bc-sub { color: var(--ink-dim); }
.big-card::after { background: var(--gold); box-shadow: var(--glow-gold); opacity: .4; }

/* =========================================================================
   YÜZEY SİSTEMİ v4 — slab yok ama çıplak metin de yok: her mantıksal grup
   zarif bir yüzeyde yaşar (Kurul dersleri, listeler). + ambiyans güçlendirme
   ========================================================================= */
/* Kurul: her ders yumuşak yüzey kartında */
.kc-block { margin: 0 0 .9rem; padding: .9rem 1.1rem 1rem; border: 1px solid var(--panel-edge);
    border-bottom: 1px solid var(--panel-edge); border-radius: 14px;
    background: linear-gradient(165deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
    transition: border-color .15s; }
.kc-block:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--panel-edge)); }
.kc-head { display: flex; align-items: center; gap: .6rem; font-family: var(--serif);
    font-size: 1.02rem; font-weight: 700; color: var(--gold-bright);
    margin: 0 0 .55rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.kc-head .dim { font-size: .7rem; font-weight: 700; color: var(--ink-dim);
    border: 1px solid var(--panel-edge); border-radius: 999px; padding: .12rem .55rem;
    margin-left: auto; letter-spacing: .03em; }
.kc-list { columns: 1 !important; }
.kc-list li { padding: .5rem .6rem; margin: .15rem 0; border-radius: 9px; font-size: .92rem;
    display: flex; align-items: center; transition: background .12s; }
.kc-list li:hover { background: rgba(255,255,255,.045); }
.kc-list li span { cursor: pointer; display: block; width: 100%; }
.kc-list li span:hover { text-decoration: none; color: var(--gold-bright); }
.kc-list li.done { color: var(--teal); }
.kc-list li.done::before { content: "✓"; margin-right: .5rem; font-weight: 700; }
.kc-list li.locked-topic { opacity: .55; }
/* kurul başlık çipi: daha asil */
.topic-chip { font-family: var(--serif); font-weight: 700; font-size: 1.02rem;
    background: linear-gradient(135deg, rgba(224,177,92,.16), rgba(224,177,92,.05));
    border: 1px solid var(--gold-deep); box-shadow: inset 0 1px 0 rgba(240,205,134,.15); }

/* ambiyans: açık düzenin "boş arka plan" hissini doldur — aurora + grid biraz daha canlı */
.starfield {
    background:
        radial-gradient(620px 460px at 22% 24%, rgba(111,207,194,.16), transparent 70%),
        radial-gradient(680px 520px at 78% 68%, rgba(224,177,92,.13), transparent 70%),
        radial-gradient(520px 520px at 60% 30%, rgba(169,156,240,.1), transparent 72%);
}

/* İBNİ SİNA: asistan mesajları da KABARCIK içinde (kullanıcı isteği) */
.cmsg.assistant { padding: .7rem .95rem .7rem 44px; border-radius: 18px 18px 18px 5px;
    background: linear-gradient(180deg, var(--panel-2), color-mix(in srgb, var(--panel-2) 80%, var(--deep)));
    border: 1px solid var(--panel-edge); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.cmsg.assistant .cav { left: 9px; top: 9px; }
.cmsg.assistant .msg-tts { right: 8px; top: 8px; }
body[data-theme="olimpos"] .cmsg.assistant { background: linear-gradient(180deg, #f7fafd, #edf2f9); }