/* Inter — premium ürün fontu (self-host, Türkçe latin + latin-ext) */
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('/static/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('/static/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* =========================================================================
   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: var(--fs-xl); line-height: var(--lh-normal);
    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: var(--fs-4xl); 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: var(--fs-2xs); 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: var(--fs-4xl); 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: var(--fs-3xl); 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: var(--fs-2xs); 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: var(--fs-xl); 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: var(--fs-2xs); 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: var(--fs-4xl); letter-spacing: .04em; color: var(--gold-bright); font-weight: 700; }
.dim { color: var(--ink-dim); font-size: var(--fs-lg); line-height: var(--lh-normal); }
.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: var(--fs-xs); 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: var(--fs-sm); 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: var(--fs-xl);
    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: var(--fs-lg); 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: var(--fs-md); 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: var(--fs-2xl); }
.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: var(--fs-2xs); 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: var(--fs-sm); color: var(--ink-dim); }
.kind-tag { font-size: var(--fs-2xs); 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: var(--fs-2xl); 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: var(--lh-relaxed); }
#explain-body h2 { font-size: var(--fs-2xl); 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: var(--fs-xs); 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: var(--fs-2xl); }
.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: var(--fs-md); 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: var(--fs-4xl); 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: var(--fs-xs); 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: var(--fs-4xl); color: var(--ink); text-align: center; }
.flash-back { font-size: var(--fs-2xl); 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: var(--fs-xs); 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: var(--fs-lg); }
.mini-link { color: var(--teal); cursor: pointer; text-decoration: underline; font-size: var(--fs-md); }
.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: var(--lh-normal); color: var(--ink-soft); font-size: var(--fs-lg); }

/* 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: var(--fs-lg); }
.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: var(--fs-2xl); }
.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: var(--fs-md); 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: var(--fs-lg); 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: var(--fs-md); 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: var(--fs-lg); margin: .15rem 0; }
.mi-meta { font-size: var(--fs-sm); 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: var(--fs-xl); }
.mk-chead:hover { background: rgba(255,255,255,.03); }
.mk-chead b { font-size: var(--fs-xl); color: var(--ink); }
.mk-caret { color: var(--gold); font-size: var(--fs-sm); width: .9rem; display: inline-block; }
.mk-acc { font-weight: 700; padding: .05rem .4rem; border-radius: 6px; font-size: var(--fs-sm); }
.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: var(--fs-md); }
.mk-table th { text-align: left; color: var(--ink-dim); font-weight: 600; font-size: var(--fs-sm); 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: var(--lh-normal); }
.hw-body h2 { font-size: var(--fs-xl); 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: var(--lh-normal);
    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: var(--fs-lg); }
.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: var(--fs-2xl); }   /* 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: var(--fs-sm); 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: var(--fs-md); }

/* ============ 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: var(--fs-2xl); line-height: var(--lh-snug); height: auto; }
.login-err { color: var(--coral); font-size: var(--fs-md); 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: var(--fs-md); font-weight: 700; color: var(--gold-bright); line-height: 1;
    user-select: none; transition: opacity .25s, filter .25s; }
.streak-chip .streak-ico { font-size: var(--fs-xl); 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: var(--fs-2xs); 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: var(--fs-2xs); 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: var(--fs-sm); 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: var(--fs-4xl); color: var(--ink); flex: 1; }
.kb-exam { font-size: var(--fs-sm); 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: var(--fs-md); color: var(--ink-dim); letter-spacing: .04em; text-transform: uppercase; }
.dp-chip {
    font-size: var(--fs-md); 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: block; }   /* dış kap — asıl ızgaralar bölüm başına .cg (aşağıda) */
.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: var(--fs-3xl); font-weight: 700; color: var(--gold-bright); }
.bc-sub { font-size: var(--fs-sm); 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: var(--fs-md); 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: var(--fs-2xl); 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: var(--fs-lg); 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: var(--fs-sm); 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: var(--fs-2xs); 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: var(--fs-3xl); letter-spacing: .02em; color: var(--gold-bright); line-height: var(--lh-snug); }
.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: var(--fs-4xl) !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: var(--fs-4xl); }
.bc-title { font-family: var(--serif); font-weight: 600; font-size: var(--fs-2xl) !important; line-height: var(--lh-tight); 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: var(--fs-lg); 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: var(--fs-xl); 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: var(--fs-xs); 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: var(--fs-md); 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: var(--fs-2xl); 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: var(--fs-2xl);
    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: var(--fs-md);
    letter-spacing: .35em; text-transform: uppercase; color: var(--pomo-accent);
    margin: .1rem 0 .4rem; transition: color .4s;
}
.pomo-studied { text-align: center; font-size: var(--fs-sm); 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: var(--fs-3xl);
    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: var(--fs-md); 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: var(--fs-md); letter-spacing: .04em; transition: color .2s; }
.pomo-reset:hover { color: var(--pomo-accent); }
.pomo-mute { background: none; border: none; cursor: pointer; font-size: var(--fs-2xl); 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: var(--fs-md); 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: var(--fs-xs); 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: var(--fs-2xl); color: var(--ink); }
.di-course { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.di-badge { font-size: var(--fs-xs); 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: var(--fs-lg); }
.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: var(--fs-md); 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;
    /* 2026-07-28: taban eskiden SABİT rgba(29,40,54) idi — kartlar temayı hiç
       takip etmiyordu, üstelik iki neredeyse aynı lacivert arasındaki geçiş
       kartı düz gösteriyordu. Taban artık temadan türüyor ve gerçek bir ton
       aralığı var: üstte ışık alan yüzey, altta gölgeye düşen kenar. */
    background:
        linear-gradient(168deg, var(--tint), transparent 72%),
        linear-gradient(168deg,
            color-mix(in srgb, var(--panel-2) 90%, var(--gold-bright)) 0%,
            var(--panel-2) 40%,
            var(--panel) 78%,
            color-mix(in srgb, var(--panel) 86%, var(--void)) 100%);
}
.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 — 3 BÖLÜM (Bugün · Sınava Hazırlık · Araçlar) ===================== */
/* #card-grid artık dış kap; her bölüm kendi .cg ızgarasında. Bölüm başlığı tipografisi
   marka alt-yazısıyla aynı ses (küçük, aralıklı, uppercase, teal ▸). */
.card-grid { display: block; }
.home-sec {
    font-size: var(--fs-2xs); letter-spacing: .22em; text-transform: uppercase;
    color: var(--ink-dim); margin: 1.6rem .15rem .7rem;
}
.home-sec::before { content: "▸ "; color: var(--teal); }
#card-grid .home-sec:first-child { margin-top: .1rem; }
.cg { display: grid; gap: 1.1rem; }

/* BUGÜN — günlük ritüel: anlatım (hero, tam satır) → altında test + tekrar yan yana */
.cg-bugun { grid-template-columns: repeat(2, 1fr); }
.cg-bugun .big-card { min-height: 128px; }
.cg-bugun .big-card[data-card="gunluk-anlatim"] {
    grid-column: 1 / -1; justify-content: center; gap: .55rem; padding: 1.9rem 1.7rem; min-height: 168px;
}
.cg-bugun .big-card[data-card="gunluk-anlatim"] .bc-icon { font-size: 3.3rem; }
.cg-bugun .big-card[data-card="gunluk-anlatim"] .bc-title { font-size: 1.5rem !important; }
.cg-bugun .big-card[data-card="gunluk-anlatim"] .bc-sub { font-size: var(--fs-xl); }
.cg-bugun .big-card[data-card="gunluk-test"] .bc-icon,
.cg-bugun .big-card[data-card="tekrar"] .bc-icon { font-size: 2.5rem; }
.cg-bugun .big-card[data-card="gunluk-test"] .bc-title,
.cg-bugun .big-card[data-card="tekrar"] .bc-title { font-size: var(--fs-4xl) !important; }

/* SINAVA HAZIRLIK + YÖNETİM — eşit kartlar, kendiliğinden akar */
.cg-sinav   { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.cg-yonetim { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* ARAÇLAR — kompakt karo: ikon solda, başlık+alt yazı sağda (görsel yük düşer) */
.cg-arac { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .7rem; }
.tool-card {
    position: relative; display: flex; align-items: center; gap: .7rem;
    text-align: left; padding: .7rem .9rem; min-height: 54px;
    background: linear-gradient(165deg,
        color-mix(in srgb, var(--panel-2) 91%, var(--teal)) 0%,
        var(--panel-2) 45%,
        color-mix(in srgb, var(--panel) 88%, var(--void)) 100%);
    border: 1px solid var(--panel-edge); border-radius: var(--radius);
    cursor: pointer; font: inherit; color: var(--ink-soft);
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.tool-card:hover { transform: translateY(-2px); border-color: var(--teal); box-shadow: var(--glow-teal); }
.tc-icon { color: var(--gold-bright); flex: 0 0 auto; display: flex; }
.tc-icon .ic { width: 21px; height: 21px; display: block; }
.tc-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tc-title { font-size: var(--fs-lg); font-weight: 600; color: var(--ink); line-height: var(--lh-tight); }
.tc-sub { font-size: var(--fs-xs); color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-card .bc-edit { top: 50%; transform: translateY(-50%); right: 8px; }

/* dar ekran: her bölüm iki sütun, araçlar sıkışık */
@media (max-width: 760px) {
    .cg { gap: .8rem; }
    .cg-sinav, .cg-yonetim { grid-template-columns: repeat(2, 1fr); }
    .cg-sinav .big-card, .cg-yonetim .big-card { min-height: 116px; }
    .cg-arac { grid-template-columns: repeat(2, 1fr); gap: .55rem; }
    .home-sec { margin: 1.25rem .1rem .55rem; }
}

/* ============ BENİMSEME: kaydol + sıralama + havuz + geri sayım ============ */
.login-switch { text-align: center; margin-top: .9rem; font-size: var(--fs-md); 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: var(--fs-md); 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: var(--fs-xs); 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: var(--fs-3xl); text-align: center; }
.lb-rank { font-size: var(--fs-sm); 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: var(--fs-sm); color: var(--ink-dim); white-space: nowrap; }
.lb-score { color: var(--teal); font-size: var(--fs-2xl); }

/* 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: var(--fs-lg); color: var(--gold-bright); }
.pool-n { font-size: var(--fs-md); 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: var(--fs-sm); 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: var(--fs-xs); 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: var(--fs-xl); line-height: var(--lh-tight); }
.bk-author { font-size: var(--fs-sm); color: var(--teal); }
.bk-desc { font-size: var(--fs-sm); color: var(--ink-dim); line-height: var(--lh-snug);
    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: var(--fs-2xs); 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: var(--fs-2xs); 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: var(--lh-snug); }
.ck-opts { margin: .35rem 0; display: grid; gap: .15rem; }
.ck-opt { font-size: var(--fs-md); 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: var(--fs-2xs); 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: var(--fs-4xl); font-weight: 700; }
.pf-sub { font-size: var(--fs-sm); color: var(--ink-dim); margin: .15rem 0; }
.pf-streak { font-size: var(--fs-lg); color: var(--gold-bright); }
.pf-tier { font-size: var(--fs-2xs); 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: var(--fs-2xl); 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: var(--fs-4xl); }
.pf-stat-val { font-size: var(--fs-3xl); font-weight: 700; color: var(--gold-bright); margin: .15rem 0; }
.pf-stat-lbl { font-size: var(--fs-2xs); color: var(--ink-dim); }
.pf-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.pf-badge { font-size: var(--fs-sm); 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: var(--fs-md); 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: var(--fs-md); }
.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: var(--fs-xs); 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: var(--fs-2xl); 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: var(--fs-3xl); 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: var(--fs-sm); font-weight: 800; color: #1a1206; background: linear-gradient(135deg,var(--gold-bright),var(--gold)); padding: .15rem .5rem; border-radius: 999px; }
.pk-streak { font-size: var(--fs-md); 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: var(--fs-md); color: var(--gold-bright); letter-spacing: 2px; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.pk-rarity-lbl { display: block; font-size: var(--fs-3xs); letter-spacing: .04em; color: var(--ink-soft); margin-top: -2px; }

.pk-meta { font-size: var(--fs-sm); 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: var(--fs-2xs); 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: var(--fs-2xs); 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: var(--fs-2xl); }
.pk-stat-val { font-size: var(--fs-xl); font-weight: 800; color: var(--gold-bright); }
.pk-stat-lbl { font-size: var(--fs-3xs); color: var(--ink-dim); }

.pk-badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.pk-badge { font-size: var(--fs-xs); 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: var(--fs-2xs); line-height: var(--lh-tight); }
.bdg.off .bdg-lbl { color: var(--ink-dim); }
.bdg-chk { font-size: var(--fs-3xs); 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: var(--fs-3xl); font-weight: 800; }
.bm-how { font-size: var(--fs-lg); color: var(--ink-soft); margin: .35rem 0 .7rem; }
.bm-status { font-size: var(--fs-md); 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: var(--fs-2xs); color: var(--ink-dim); font-style: italic; }
.pk-no { font-size: var(--fs-2xs); 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: var(--fs-2xs); 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: var(--fs-sm); 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: var(--fs-3xl); 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: var(--fs-2xs); text-align: center; line-height: var(--lh-tight); }

/* 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: var(--fs-2xl); 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: var(--fs-xl); }
.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: var(--fs-2xl); 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: var(--fs-4xl); }

/* 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: var(--fs-md); 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: var(--fs-sm); }
.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"]{
    /* OLİMPOS — Ege gecesi: derin deniz-mavisi zemin, mermer-krem metin, Olimpos altını,
       Ege turkuazı vurgu. Klasik temanın dengesinde ama denizel kimlikle. */
    --void:#0a141f; --deep:#0e1a28; --panel:#142434; --panel-2:#1a2f44; --panel-edge:#2e4a6a; --surface-3:#1d3452;
    --ink:#e9f0f9; --ink-soft:#aec3de; --ink-dim:#7089a8;
    --gold:#e2b75f; --gold-bright:#f2d288; --gold-deep:#bd9548;
    --teal:#44aec8; --coral:#e08a6e; --hal:#d16a7e; --violet:#8494dc;
    --glow-gold:0 0 14px rgba(226,183,95,.26); --glow-teal:0 0 14px rgba(68,174,200,.24);
    --shadow:0 16px 40px rgba(4,10,20,.5);
}
body[data-theme="olimpos"]::after{     /* deniz-mavisi vinyet — derinlik, göz ortaya toplanır */
    background: radial-gradient(130% 130% at 50% 32%, transparent 50%, rgba(5,12,22,.6) 100%) !important;
}
body[data-theme="olimpos"]::before{ opacity: .5 !important; }   /* Ege dokusu çok hafif */
body[data-theme="olimpos"] .kb-k, body[data-theme="olimpos"] .brand-title { text-shadow: 0 0 18px rgba(226,183,95,.22); }
body[data-theme="olimpos"] .big-card { background: linear-gradient(165deg, var(--panel-2), var(--panel)) !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: var(--fs-sm); 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: var(--fs-md); }
.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: var(--fs-sm); }
.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: var(--fs-3xl); 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: var(--fs-sm); }
.cap-pill { font-size: var(--fs-2xs); 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: var(--fs-sm); 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: var(--fs-3xs); 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: var(--fs-sm); padding:.2rem .5rem; }
.tts-btn:hover { border-color:var(--gold); }
.msg-tts { float:right; margin-left:.4rem; padding:.05rem .35rem; font-size: var(--fs-xs); }

/* =========================================================================
   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: var(--fs-xl); line-height: var(--lh-normal); 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: var(--fs-2xl); 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: var(--fs-lg); }
.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: var(--fs-sm); 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: var(--fs-sm); color: var(--ink-dim); margin-bottom: .5rem; }
.rem-actions { display: flex; gap: .45rem; flex-wrap: wrap; }
.rem-actions .btn { font-size: var(--fs-sm); 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: var(--fs-md); 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: var(--fs-4xl); font-weight: 700; color: var(--ink); }
.chat-empty-s { font-size: var(--fs-lg); }

/* 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: var(--lh-normal); word-break: break-word; }
.cmsg.assistant { position: relative; align-self: stretch; padding-left: 38px; color: var(--ink-soft); line-height: var(--lh-relaxed); }
.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: var(--fs-md); }
.cmsg.assistant .cbody p { margin: .35rem 0; }
.cmsg.assistant .cbody h2 { font-size: var(--fs-2xl); 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: var(--fs-2xl); line-height: var(--lh-normal); 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: var(--fs-sm); 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: var(--fs-xs); 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: var(--fs-md);
    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: var(--fs-3xs); 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); }
/* Olimpos daha sakin bir zemin ister; ama renkler yine TEMADAN gelsin
   (eskiden sabit rgba idi, tema değişkenleri değişince yerinde kalıyordu). */
body[data-theme="olimpos"] .starfield {
    background:
        radial-gradient(760px 560px at 20% 22%, color-mix(in srgb, var(--teal) 15%, transparent), transparent 70%),
        radial-gradient(820px 620px at 80% 70%, color-mix(in srgb, var(--gold) 12%, transparent), 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: var(--fs-md); }
.fac-table-wrap { overflow-x: auto; }
.fac-table { width: 100%; font-size: var(--fs-md); }
.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: var(--lh-read); font-size: var(--fs-xl); color: var(--ink-soft); }
.md-body p { margin: .65rem 0; }
.md-body h2 { font-size: var(--fs-3xl); 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: var(--fs-xl); 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: var(--fs-lg); }
.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: var(--fs-3xl); letter-spacing: .01em; display: flex; align-items: center; gap: .5rem; }
.vprog { font-size: var(--fs-xs); 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: var(--fs-2xs); 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: var(--lh-tight); }
.t-foot { font-size: var(--fs-xs); 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: var(--fs-2xl); line-height: var(--lh-relaxed); }
.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: var(--fs-sm); 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: var(--fs-lg); }
.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: var(--fs-xs); 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: var(--lh-relaxed); 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: var(--lh-normal); }
.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: var(--fs-lg); }

/* 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: var(--fs-2xs); 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: var(--fs-xl); flex-wrap: wrap; }
.set-lbl { flex: 0 0 150px; color: var(--ink-dim); font-size: var(--fs-sm); 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: var(--fs-xl); }
.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: var(--fs-sm); 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: var(--fs-sm); 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: var(--fs-2xl); 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: var(--fs-xs); 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: var(--fs-xl);
    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: var(--fs-2xl);
    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); }

/* =========================================================================
   PROFİL: "Sana özel" + "Kişi ara" kutuları profil-kartı diliyle (altın folyo çerçeve)
   ========================================================================= */
.pf-secret, .pf-search {
    position: relative; margin-top: 1.2rem; padding: 3px; border-radius: 16px;
    background: linear-gradient(135deg,#ffe39a,#b8893a 45%,#ffd87a 70%,#9a7a3a);
    box-shadow: 0 14px 36px rgba(0,0,0,.4), 0 0 22px rgba(240,205,134,.22);
}
.pf-secret > *, .pf-search > * { position: relative; z-index: 1; }
/* iç yüzey: kartın koyu paneli + ince altın çeper */
.pf-secret::before, .pf-search::before {
    content: ""; position: absolute; inset: 3px; border-radius: 13px; z-index: 0;
    background: linear-gradient(165deg, var(--panel-2), var(--deep));
    border: 1px solid rgba(240,205,134,.25);
}
/* iç içerik: çerçeve payı için padding */
.pf-secret { padding: 3px; }
.pf-secret .pf-grid, .pf-secret > h3, .pf-secret > h4, .pf-secret .pf-weaks,
.pf-secret .pf-mast-wrap, .pf-secret > p, .pf-search > h3, .pf-search .pf-q, .pf-search .pf-results {
    margin-left: 1rem; margin-right: 1rem;
}
.pf-secret > h3, .pf-search > h3 { margin-top: 1rem; color: var(--gold-bright);
    font-family: var(--serif); letter-spacing: .02em; }
.pf-secret > *:last-child, .pf-search > *:last-child { margin-bottom: 1rem; }
/* Olimpos: açık yüzey */
body[data-theme="olimpos"] .pf-secret::before, body[data-theme="olimpos"] .pf-search::before {
    background: linear-gradient(165deg, #f7fafd, #e7eef7); }

/* katalog: konu satırında gün damgası tarih girişi */
.pd-item { display: flex; align-items: center; gap: .5rem; }
.pd-item > span:first-child { flex: 1; }
.pd-date { flex: 0 0 auto; font-size: var(--fs-xs); padding: .2rem .4rem; border-radius: 7px;
    border: 1px solid var(--panel-edge); background: rgba(255,255,255,.04); color: var(--ink-soft);
    color-scheme: dark; }
.pd-date:focus { outline: none; border-color: var(--gold); }
.pd-date[value=""], .pd-date:not([value]) { opacity: .6; }
body[data-theme="olimpos"] .pd-date { color-scheme: light; }

/* =========================================================================
   PROFESYONEL CİLA v1 — "sci-fi oyun" → "premium klinik ürün"
   Neon glow yumuşatılır, renkler olgunlaşır, tipografi/boşluk rafine edilir.
   (Dosya sonunda → mevcut kuralları ölçülü biçimde ezer.)
   ========================================================================= */
:root {
    /* daha olgun, daha az doygun palet — premium his */
    --gold:        #d8b06a;
    --gold-bright: #ecc987;
    --gold-deep:   #8f7238;
    --teal:        #74c6bb;
    --ink:         #eef2f7;
    --ink-soft:    #b3c0cf;
    --ink-dim:     #7c8b9e;
    /* neon glow → çok hafif ışıma (ürün, tabela değil) */
    --glow-gold:   0 0 0 1px rgba(216,176,106,.18);
    --glow-teal:   0 0 0 1px rgba(116,198,187,.18);
    /* katmanlı, yumuşak gölge sistemi (elevation) */
    --shadow:      0 10px 30px rgba(4,8,14,.42);
    --shadow-sm:   0 2px 8px rgba(4,8,14,.28);
    --shadow-lg:   0 20px 48px rgba(4,8,14,.5);
    --radius:      14px;
    --radius-sm:   9px;
}

/* tipografi: net hiyerarşi + ferah satır + normalize harf aralığı */
html, body { letter-spacing: 0; font-size: var(--fs-xl); line-height: var(--lh-relaxed); }
.vhead h2, .card h2 { letter-spacing: -.01em; font-weight: 700; }
h2, h3, h4 { letter-spacing: -.01em; }
.dim { letter-spacing: 0; }

/* kalan sci-fi köşe pahlarını kapat — düz, sakin köşeler */
.card, .tile, .login-box, .big-card { clip-path: none !important; }

/* KARTLAR: neon kenar/parlama → ince kenar + yumuşak yükselen gölge */
.big-card {
    border: 1px solid var(--panel-edge) !important;
    box-shadow: var(--shadow-sm) !important;
    animation: none !important;                 /* sürekli "floaty" salınım = amatör his */
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.big-card::before { opacity: .5 !important; }   /* içteki ışık süpürmesi çok hafif */
.big-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow) !important;
    border-color: var(--gold-deep) !important;  /* hover'da neon değil, zarif altın kenar */
}
.big-card::after { animation: none !important; opacity: .3 !important; }

/* BUTON: tutarlı, sakin — glow yerine net dolgu + ince gölge */
.btn { border-radius: 10px; font-weight: 600; letter-spacing: 0; transition: filter .15s, transform .1s, box-shadow .15s; }
.btn:active { transform: translateY(1px); }
.btn.glow {
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
    color: #1c1608; border: none; box-shadow: var(--shadow-sm);
}
.btn.glow:hover { filter: brightness(1.05); box-shadow: var(--shadow-sm), 0 0 0 1px var(--gold-deep); }

/* form elemanları: tutarlı, ferah */
input, select, textarea { border-radius: 10px; }
input:focus, select:focus, textarea:focus { box-shadow: none; outline: 1px solid var(--gold-deep); }

/* içerik kartları: yumuşak derinlik, keskin neon değil */
#content-body .card .card, .pf-secret::before, .pf-search::before { box-shadow: none; }
.tile { box-shadow: none; }
.tile:hover { box-shadow: var(--shadow-sm); }

/* alt menü + üst bar: daha durgun, cam his */
.bottom-nav { background: linear-gradient(180deg, rgba(20,28,38,.9), rgba(13,19,27,.97)); }
.nav-item.active .nav-ico svg { filter: drop-shadow(0 0 4px rgba(216,176,106,.35)); }

/* halo orb: aşırı parlaklığı kıs */
.hal { box-shadow: 0 0 12px rgba(116,198,187,.35), inset 0 0 6px rgba(0,0,0,.3) !important; }

/* çok yerdeki köşe-parantez / tarama-çizgisi süslerini sustur (dikkat dağıtan detay) */
.card::before { opacity: .5; }

/* =========================================================================
   DÜZELTMELER v2 — profil kutuları + sayfa başlığı üst boşluğu
   ========================================================================= */
/* profil "Sana özel" + "Kişi ara": profil kartı gibi → ince ALTIN kenar, LACİVERT iç
   (önceki sürüm tüm alanı altın gösteriyordu). ::before hilesi kaldırıldı, net kenar+bg. */
.pf-secret, .pf-search {
    background: linear-gradient(165deg, var(--panel-2), var(--deep)) !important;
    border: 2px solid var(--gold-deep) !important;
    box-shadow: 0 10px 28px rgba(4,8,14,.4), inset 0 0 0 1px rgba(236,201,135,.18) !important;
    border-radius: 16px; padding: 1rem 1.15rem 1.15rem; margin-top: 1.2rem;
}
.pf-secret::before, .pf-search::before { display: none !important; }   /* eski lacivert overlay iptal */
.pf-secret > *, .pf-search > * { margin-left: 0; margin-right: 0; }     /* iç margin sıfırla (artık gerek yok) */
.pf-secret > h3, .pf-search > h3 { margin-top: .2rem; color: var(--gold-bright); }

/* SAYFA BAŞLIĞI ÜST BOŞLUĞU: alt sayfada topbar gizli → .stage margin ve .app padding
   boşluk bırakıyordu. In-view'da bunları sıfırla; page-head kendi güvenli-alan payını verir. */
body.in-view .stage { margin-top: 0; }
body.in-view .app { padding-top: 0; }
.page-head { margin-top: 0 !important; }

/* Admin kullanıcı detay paneli */
.user-row { cursor: pointer; transition: border-color .15s, background .15s; }
.user-row:hover { border-color: var(--gold-deep); background: rgba(255,255,255,.03); }
.ud-card { width: min(560px, 100%); max-height: 88vh; overflow-y: auto; }
.ud-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; margin-bottom: 1rem; }
.ud-name { font-size: var(--fs-3xl); font-weight: 700; color: var(--gold-bright); }
.ud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.ud-field { display: flex; flex-direction: column; gap: .25rem; font-size: var(--fs-md); }
.ud-field > span { color: var(--ink-dim); text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-2xs); }
.ud-field input, .ud-field select, .ud-field textarea {
    padding: .5rem .65rem; border-radius: 9px; border: 1px solid var(--panel-edge);
    background: rgba(255,255,255,.04); color: var(--ink); font: inherit; font-size: var(--fs-lg); color-scheme: dark; }
.ud-field.ud-full { grid-column: 1 / -1; margin-top: .7rem; }
.ud-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.ud-actions .btn { font-size: var(--fs-md); }
body[data-theme="olimpos"] .ud-field input, body[data-theme="olimpos"] .ud-field select { color-scheme: light; }
@media (max-width: 520px) { .ud-grid { grid-template-columns: 1fr; } }

/* full-bleed topbar/page-head GERİ ALINDI (kullanıcı isteği: ekranı kaplamasın, eski hâli).
   Topbar artık .app genişliğinde (ortalanmış içerik hizasında) durur. */
/* geri bildirim sil butonu hizası */
.fb-head { position: relative; }
.fb-del { margin-left: auto; opacity: .6; }
.fb-del:hover { opacity: 1; color: var(--coral); }

/* Günlük anlatım admin düzenleme paneli */
.daily-edit { margin: .2rem 0 1rem; border: 1px solid var(--panel-edge); border-radius: 12px; overflow: hidden; }
.daily-edit > summary { cursor: pointer; padding: .6rem .9rem; font-weight: 600; color: var(--gold-bright);
    background: rgba(224,177,92,.06); list-style: none; }
.daily-edit > summary::-webkit-details-marker { display: none; }
.daily-edit > summary::before { content: "⚙ "; }
.de-body { padding: .8rem .9rem; }
.kc-list li .de-rm { margin-left: auto; opacity: .5; flex: 0 0 auto; }
.kc-list li .de-rm:hover { opacity: 1; color: var(--coral); }
.kc-list li { justify-content: flex-start; }

/* Fakülte panosu zenginleştirme */
.fac-intro { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--ink-soft); margin: .2rem 0 1rem;
    padding: .8rem 1rem; border-left: 3px solid var(--gold); background: rgba(216,176,106,.06); border-radius: 0 10px 10px 0; }
.fac-note { font-size: var(--fs-sm); color: var(--ink-dim); margin: -.2rem 0 .6rem; }
.mast-rank { flex: 0 0 22px; text-align: center; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-dim); }
.fac-table td:nth-child(5) b { color: var(--gold-bright); }

/* Kart başlık düzenleme (admin) — kartın köşesinde kalem */
.big-card { position: relative; }
.bc-edit { position: absolute; top: 8px; right: 10px; z-index: 3; font-size: var(--fs-md);
    width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
    border-radius: 7px; color: var(--ink-dim); background: rgba(0,0,0,.2); opacity: 0; transition: opacity .15s, color .15s; }
.big-card:hover .bc-edit { opacity: .8; }
.bc-edit:hover { opacity: 1 !important; color: var(--gold-bright); background: rgba(0,0,0,.35); }
@media (hover: none) { .bc-edit { opacity: .5; } }   /* dokunmatik: hep görünür */

/* =========================================================================
   PREMIUM CLEAN v2 — "iyi ama profesyonellik eksik" hissini kapatır
   Inter fontu + sakin arka plan + tutarlı boşluk/gölge + kısılmış efekt.
   ========================================================================= */
:root {
    --serif: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --term:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html, body {
    font-family: var(--term);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11","ss01"; letter-spacing: -.006em;
}
/* başlıklar: Inter'in sıkı optik hizası */
h2, h3, h4, .vhead h2, .bc-title, .pk-name, .ud-name { letter-spacing: -.02em; font-weight: 650; }
.dim, .t-label, .bc-sub { letter-spacing: 0; }

/* ARKA PLAN: oyun hissi veren hareketli efektleri SAKINLEŞTIR (premium = durgun zemin) */
.starfield { animation: none !important; opacity: .5; }
.starfield::after { opacity: .5; }         /* grid dokusu daha silik */
body[data-theme]::before, body[data-theme="klasik"]::before { opacity: .45 !important; }  /* tema deseni çok hafif */
.bg-base { filter: saturate(.92); }        /* zemin biraz daha nötr */

/* KARTLAR & PANELLER: tutarlı yumuşak gölge + ince kenar (neon yok) */
.card, .tile, .kc-block, .rem-card, .fb-item, .lb-row, .off-row, .q-block, .bk-card, .ui-modal-card {
    /* 2026-07-28: kenar rengi eskiden panel-edge'in %80'i + şeffaflıktı — zaten
       zemine eşit olan bir rengi daha da soluklaştırıyordu, kartlar kayboluyordu.
       Artık tema vurgusundan türeyen --edge. Üstteki iç ışık çizgisi kartı
       kenar çizmeden zeminden ayırır (gerçek yüzeyler üstten ışık yakalar). */
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 15%, transparent),
                0 1px 2px rgba(4,8,14,.2), 0 4px 16px rgba(4,8,14,.16) !important;
    border-color: var(--edge) !important;
}
.big-card { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 16%, transparent),
                0 1px 2px rgba(4,8,14,.2), 0 4px 14px rgba(4,8,14,.18) !important; }
.big-card:hover { box-shadow: 0 6px 22px rgba(4,8,14,.28) !important; }

/* içerik başlıkları arasında tutarlı ritim */
.sec-title { margin: 1.4rem 0 .5rem; font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.01em; }
.vhead { margin-bottom: 1.1rem; padding-bottom: .8rem; }
.md-body { font-size: var(--fs-xl); }

/* butonlar: daha oturaklı, tutarlı yükseklik */
.btn { padding: .55rem .95rem; font-weight: 550; border-radius: 9px; }
.btn.glow { font-weight: 600; }

/* alt menü + üst bar: cam his, ince ayrım */
.bottom-nav { backdrop-filter: blur(12px) saturate(1.1); border-top-color: color-mix(in srgb, var(--panel-edge) 70%, transparent); }
.topbar { backdrop-filter: blur(10px) saturate(1.05); }

/* input/select: tutarlı, sakin odak */
input, select, textarea { border-radius: 9px; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold-deep);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 14%, transparent) !important; }

/* skeleton shimmer daha ince (premium yükleniş) */
.skel-line, .skel-tile, .skel-row { background:
    linear-gradient(90deg, rgba(216,176,106,.05) 25%, rgba(216,176,106,.11) 50%, rgba(216,176,106,.05) 75%);
    background-size: 200% 100%; }

/* vurgu rengini dizginle: violet/coral yalnız gerçek anlamlarda (etiket/hata) — genel altın+teal */
.cap-pill { border-color: var(--gold-deep); color: var(--gold-bright); }

@media (prefers-reduced-motion: no-preference) {
    .big-card, .btn, .lb-row, .kc-block, .bk-card { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
}

/* Kurul banner: teorik sınav tarihi tipografisi — oturaklı, hizalı */
.kb-exam { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: var(--fs-md); }
.kb-exam-lbl { color: var(--ink-dim); text-transform: uppercase; letter-spacing: .05em; font-size: var(--fs-2xs); font-weight: 600; }
.kb-exam-date { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* Boş durumlar (empty state): amatör "yazı" yerine zarif ortalanmış blok */
.empty { text-align: center; padding: 2.2rem 1.2rem; color: var(--ink-dim); font-weight: 500;
    font-size: var(--fs-xl); line-height: var(--lh-relaxed); max-width: 440px; margin: 1rem auto; }
.empty::before { content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 1rem;
    border-radius: 50%; border: 1.5px solid var(--panel-edge);
    background:
        radial-gradient(circle, transparent 55%, color-mix(in srgb, var(--gold) 18%, transparent) 56%, transparent 62%),
        color-mix(in srgb, var(--panel-2) 60%, transparent); opacity: .7; }
.empty b { color: var(--ink-soft); }

/* bildirim satırı: emoji kalktı → tipografiyle ayrım */
.mi-title { font-weight: 600; }
.mi-meta { font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* =========================================================================
   SIRALAMA — tipografi + boşluk profesyonelleştirme
   ========================================================================= */
.lb-row { display: flex; align-items: center; gap: .8rem; padding: .7rem .85rem; cursor: pointer; }
.lb-main { flex: 1; min-width: 0; }
.lb-name { font-weight: 600; font-size: var(--fs-xl); letter-spacing: -.01em; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-you { font-size: var(--fs-2xs); font-weight: 700; color: var(--gold-bright);
    background: color-mix(in srgb, var(--gold) 16%, transparent); padding: .05rem .4rem;
    border-radius: 999px; margin-left: .4rem; vertical-align: middle; }
.lb-meta { font-size: var(--fs-sm); color: var(--ink-dim); margin-top: .12rem; letter-spacing: 0;
    font-variant-numeric: tabular-nums; }
.lb-score { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end;
    font-size: var(--fs-4xl); font-weight: 700; color: var(--gold-bright); line-height: 1; letter-spacing: -.02em; }
.lb-score-lbl { font-size: var(--fs-3xs); font-weight: 600; color: var(--ink-dim);
    text-transform: uppercase; letter-spacing: .08em; margin-top: .15rem; }
/* puan açıklaması: dağınık cümle yerine düzenli lejant */
.lb-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
    margin-top: 1.1rem; padding: .8rem 1rem; border: 1px solid var(--panel-edge);
    border-radius: 12px; background: rgba(255,255,255,.02); font-size: var(--fs-md); color: var(--ink-soft); }
.lb-legend-t { font-weight: 650; color: var(--ink); width: 100%; margin-bottom: .1rem;
    font-size: var(--fs-sm); letter-spacing: -.01em; }
.lb-legend b { color: var(--gold-bright); font-variant-numeric: tabular-nums; }

/* =========================================================================
   İÇERİK TİPOGRAFİSİ — tüm sekmelerde tutarlı ritim (başlık/paragraf/boşluk)
   ========================================================================= */
.card p { line-height: var(--lh-relaxed); margin: .55rem 0; }
.card p:first-child { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card > p.dim, .card .dim { line-height: var(--lh-normal); }
/* kart içi ikincil başlıklar (inline h2 style'ları yerine tutarlı) */
.card h2:not(.vhead h2) { font-size: var(--fs-2xl); font-weight: 650; letter-spacing: -.01em;
    margin: 1.3rem 0 .5rem; color: var(--gold-bright); }
.card h3 { font-size: var(--fs-xl); font-weight: 650; margin: 1rem 0 .4rem; color: var(--teal); }
/* açıklama paragrafları (view başında) tutarlı boşluk */
.card > .vhead + p, .card > .vhead + .dim { margin-top: 0; margin-bottom: 1rem; }
/* listeler tutarlı */
.card ul:not(.kc-list):not(.md-body ul) { margin: .5rem 0 .8rem; padding-left: 1.25rem; line-height: var(--lh-relaxed); }
/* sayısal her yerde hizalı */
.t-value, .lb-score, .pk-stat-val, .mast-pct, .kb-exam-date { font-variant-numeric: tabular-nums; }
/* form içi etiketler tutarlı */
label { font-size: var(--fs-lg); }

/* =========================================================================
   İLK GİRİŞ ONBOARDING — kaydırmalı tanıtım + ana ekran ipucu şeridi
   ========================================================================= */
.ob-overlay { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center;
    justify-content: center; padding: 1.2rem;
    background: radial-gradient(120% 120% at 50% 0%, rgba(14,22,38,.92), rgba(6,10,18,.97));
    backdrop-filter: blur(6px); animation: ob-in .3s ease; }
.ob-overlay.out { animation: ob-out .26s ease forwards; }
@keyframes ob-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ob-out { to { opacity: 0; } }
.ob-card { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--panel-edge);
    border-radius: 20px; padding: 2rem 1.6rem 1.5rem; text-align: center; position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.ob-skip { position: absolute; top: 1rem; right: 1.1rem; background: none; border: none;
    color: var(--ink-dim); font-size: var(--fs-md); cursor: pointer; padding: .3rem; }
.ob-skip:hover { color: var(--ink); }
.ob-slide { animation: ob-slide-in .32s ease; min-height: 260px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; }
@keyframes ob-slide-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.ob-ic { width: 76px; height: 76px; display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.3rem; border-radius: 22px; color: var(--gold-bright);
    background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 18%, transparent), transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); }
.ob-ic svg { width: 40px; height: 40px; }
.ob-t { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .7rem; color: var(--ink); }
.ob-d { font-size: var(--fs-xl); line-height: var(--lh-relaxed); color: var(--ink-soft); margin: 0; max-width: 340px; }
.ob-d b { color: var(--gold-bright); }
.ob-dots { display: flex; gap: .5rem; justify-content: center; margin: 1.5rem 0 1.3rem; }
.ob-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--panel-edge); transition: all .25s; }
.ob-dot.on { background: var(--gold-bright); width: 22px; border-radius: 4px; }
.ob-next { width: 100%; padding: .8rem; font-size: var(--fs-2xl); }

/* ana ekran tek seferlik ipucu şeridi */
.home-hint { display: flex; align-items: center; gap: .8rem; margin: 0 0 1rem; padding: .8rem 1rem;
    border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent); border-radius: 14px;
    background: linear-gradient(100deg, color-mix(in srgb, var(--gold) 8%, transparent), transparent);
    animation: ob-in .35s ease; }
.home-hint.out { animation: ob-out .24s ease forwards; }
.hh-txt { flex: 1; font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--ink-soft); }
.hh-txt b { color: var(--gold-bright); }
.hh-ico { display: inline-flex; vertical-align: middle; color: var(--teal); }
.hh-ico svg { width: 15px; height: 15px; }
.hh-x { flex: 0 0 auto; background: none; border: none; color: var(--ink-dim); cursor: pointer;
    font-size: var(--fs-2xl); padding: .2rem .4rem; border-radius: 6px; }
.hh-x:hover { color: var(--coral); background: rgba(0,0,0,.2); }

/* onboarding: KVKK onay formu + gezinme (atla kaldırıldı, geri/devam) */
.ob-nav { display: flex; gap: .6rem; }
.ob-nav .ob-back { flex: 0 0 auto; }
.ob-nav .ob-next { flex: 1; }
.ob-consent { text-align: left; margin-top: 1.2rem; display: flex; flex-direction: column; gap: .7rem; }
.ob-check { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-md); line-height: var(--lh-normal);
    color: var(--ink-soft); cursor: pointer; }
.ob-check input { margin-top: .15rem; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--gold-bright); cursor: pointer; }
.ob-check b { color: var(--ink); }
.ob-check a { color: var(--gold-bright); text-decoration: underline; }
.ob-next:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.4); }
.kvkk-body p { font-size: var(--fs-lg); line-height: var(--lh-relaxed); margin: .6rem 0; color: var(--ink-soft); }
.kvkk-body b { color: var(--ink); }

/* TTS hoparlör butonu — anlık geri bildirim (spinner / durdur) */
.tts-spin { animation: tts-spin 0.7s linear infinite; }
@keyframes tts-spin { to { transform: rotate(360deg); } }
.tts-btn.tts-busy { color: var(--gold-bright); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.tts-btn { transition: color .15s, border-color .15s; }

/* =========================================================================
   TOPBAR STANDARDİZASYONU — tüm chip'ler EŞİT YÜKSEKLİK (34px) + tutarlı font
   (kullanıcı: "tüm kabarcıklar aynı yükseklikte, yazı tipi aynı olsun")
   ========================================================================= */
.topbar { align-items: center; gap: .5rem; }
.topbar-tools { gap: .5rem; align-items: center; }
.topbar-tools .tool-btn {
    height: 34px; min-height: 34px; padding: 0 .75rem; font-size: var(--fs-md); font-weight: 500;
    border-radius: 999px; display: inline-flex; align-items: center; gap: .4rem; box-sizing: border-box; }
.topbar-tools .tool-btn .tool-lbl { font-size: var(--fs-md); letter-spacing: 0; }
.music-btn { width: 34px !important; height: 34px !important; padding: 0 !important; }
.music-vol { align-self: center; }
/* streak / avatar / sınıf / çık — hepsi 34px chip */
.streak-chip { height: 34px; padding: 0 .65rem; gap: .3rem; border-radius: 999px;
    display: inline-flex; align-items: center; font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.streak-chip .streak-ico { display: inline-flex; }
.streak-chip .streak-ico svg { width: 15px; height: 15px; }
.user-chip { gap: .45rem; align-items: center; }
.uc-go { height: 34px; display: inline-flex; align-items: center; gap: .45rem; padding: 0 .7rem 0 .35rem;
    border-radius: 999px; border: 1px solid var(--panel-edge); background: rgba(255,255,255,.02); cursor: pointer; }
.uc-go:hover { border-color: var(--gold); }
.uc-name { color: var(--gold-bright); font-weight: 600; font-size: var(--fs-md); letter-spacing: -.01em; }
.uc-role { height: 34px; display: inline-flex; align-items: center; padding: 0 .7rem; font-size: var(--fs-xs);
    font-weight: 600; letter-spacing: .04em; border-radius: 999px; border: 1px solid var(--panel-edge);
    color: var(--ink-soft); text-transform: none; }
.uc-out { height: 34px; display: inline-flex; align-items: center; padding: 0 .8rem; font-size: var(--fs-sm);
    font-weight: 500; border-radius: 999px; border: 1px solid var(--panel-edge); background: none;
    color: var(--ink-dim); cursor: pointer; text-decoration: none; }
.uc-out:hover { color: var(--coral); border-color: color-mix(in srgb, var(--coral) 45%, transparent); }
/* avatar chip içindeki görsel de 34px hizada */
.uc-go .chip-avatar, .uc-go .uc-avatar { width: 24px; height: 24px; }

/* =========================================================================
   BUTON YENİDEN TASARIM — "sapsarı ve alakasız" primary buton olgunlaştırıldı
   ========================================================================= */
.btn.glow {
    color: #1c1408 !important;
    background: linear-gradient(180deg, #d9b168, #c09848) !important;
    border: 1px solid rgba(140,110,50,.4) !important;
    font-weight: 600 !important; text-shadow: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 3px 10px rgba(180,140,66,.2) !important;
}
.btn.glow:hover {
    color: #1c1408 !important; transform: translateY(-1px);
    box-shadow: 0 3px 16px rgba(180,140,66,.34) !important;
    filter: brightness(1.04);
}
.btn.glow:active { transform: translateY(0) scale(.98); }
.btn.glow::before { display: none !important; }   /* aşırı parıltı süzülmesini kaldır (rahatsız ediyordu) */
/* test başlat butonları: daha oturaklı, kompakt */
#ts-start, #wk-test, .test-setup .btn.glow { padding: .7rem 1.4rem; font-size: var(--fs-xl); letter-spacing: -.01em; }

/* =========================================================================
   SESLİ OKUMA OYNATICISI — ikonize (yazısız), oynat/duraklat + ±5sn + PDF
   ========================================================================= */
.voice-bar { display: inline-flex; align-items: center; gap: .25rem; vertical-align: middle; }
.vb-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    width: 32px; height: 32px; padding: 0; border-radius: 999px; box-sizing: border-box;
    border: 1px solid var(--panel-edge); background: rgba(255,255,255,.02); color: var(--ink-soft);
    transition: color .15s, border-color .15s, background .15s, transform .12s; }
.vb-btn:hover { color: var(--gold-bright); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.vb-btn:active { transform: scale(.9); }
.vb-main { width: 38px; height: 38px; color: var(--gold-bright);
    border-color: color-mix(in srgb, var(--gold) 40%, transparent);
    background: color-mix(in srgb, var(--gold) 10%, transparent); }
.voice-bar[data-state="play"] .vb-main { background: color-mix(in srgb, var(--gold) 20%, transparent); }
.voice-bar[data-state="load"] .vb-main { color: var(--ink-dim); }
.vb-seek { position: relative; }
.vb-pdf { margin-left: .35rem; }
/* İbni Sina mesaj oynatıcısı: kompakt, mesaj metnine değmez */
.msg-vbar { margin-top: .5rem; }
.msg-vbar .vb-main { width: 30px; height: 30px; }
.msg-vbar .vb-main svg { width: 14px; height: 14px; }

/* =========================================================================
   PAGE-HEAD (her sekmedeki siyah "← Başlık" çubuğu) TAM GENİŞLİK — soldan sağa
   ekranı kaplar; içerik .app hizasında kalır.
   NOT: Ana sayfa üst barı (.topbar / HEKİM logolu) DOKUNULMAZ — o iyiydi.
   ========================================================================= */
.page-head {
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    padding-left: max(1.4rem, calc(50vw - 590px + 1.4rem));
    padding-right: max(1.4rem, calc(50vw - 590px + 1.4rem));
    box-sizing: border-box; border-radius: 0 !important;
    border-left: none !important; border-right: none !important;
}

/* =========================================================================
   PRIMARY BUTON (v3) — CIRTLAK sarı dolgu YERİNE gradient ÇERÇEVELİ (çok renkli kenar),
   koyu/hafif iç dolgu, altın metin (kullanıcı: "çok cırtlak, tek renk olmayan çerçeveli")
   ========================================================================= */
.btn.glow {
    color: var(--gold-bright) !important;
    border: 1.5px solid transparent !important;
    background:
        linear-gradient(160deg, rgba(216,177,104,.14), rgba(18,24,36,.55)) padding-box,
        linear-gradient(135deg, #e6c37e, #6fcfc2 55%, #d8b06a) border-box !important;
    font-weight: 600 !important; text-shadow: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.22) !important;
    transition: filter .15s, transform .12s, box-shadow .15s !important;
}
.btn.glow:hover {
    color: #fff5df !important; transform: translateY(-1px);
    background:
        linear-gradient(160deg, rgba(216,177,104,.26), rgba(18,24,36,.4)) padding-box,
        linear-gradient(135deg, #f0d089, #7fdccb 55%, #e6c37e) border-box !important;
    box-shadow: 0 4px 16px rgba(120,180,170,.22) !important; filter: none !important;
}
.btn.glow:active { transform: translateY(0) scale(.98); }

/* read-head: ses oynatıcı + PDF ikonu hizası */
.read-head { gap: .5rem; align-items: center; }
/* günlük anlatım kaynak meta satırı: sade, tutarlı */
.study-src, .md-body + .dim { font-size: var(--fs-sm); color: var(--ink-dim); }

/* page-head = bottom-nav ile aynı renk & stil (kullanıcı isteği) */
.page-head {
    background: linear-gradient(180deg, rgba(20,28,38,.9), rgba(13,19,27,.97)) !important;
    backdrop-filter: blur(12px) saturate(1.1) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--panel-edge) 70%, transparent) !important;
}
/* kurul banner: Teorik + Pratik sınav yan yana, aynı tipografi */
.kb-exams { display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: flex-start; }
.kb-exam { display: flex; flex-direction: column; gap: .15rem; }
.kb-exam-lbl { color: var(--ink-dim); text-transform: uppercase; letter-spacing: .05em;
    font-size: var(--fs-2xs); font-weight: 600; }
.kb-exam-date { color: var(--ink); font-weight: 600; font-size: var(--fs-lg);
    font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* =========================================================================
   INFO ikonu + açıklama balonu (kurul deneme, haftalık)
   ========================================================================= */
.info-i { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
    border-radius: 50%; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
    background: color-mix(in srgb, var(--gold) 10%, transparent); color: var(--gold-bright);
    font-size: var(--fs-xs); font-weight: 700; font-style: italic; cursor: pointer; vertical-align: middle;
    margin-left: .4rem; line-height: 1; padding: 0; flex: 0 0 auto; }
.info-i:hover { background: color-mix(in srgb, var(--gold) 20%, transparent); }
.info-pop { position: fixed; z-index: 5000; padding: .7rem .85rem; border-radius: 12px;
    background: linear-gradient(180deg, #1a2230, #131a25); border: 1px solid var(--gold-deep);
    color: var(--ink-soft); font-size: var(--fs-md); line-height: var(--lh-normal); box-shadow: 0 8px 28px rgba(0,0,0,.5);
    animation: ob-in .18s ease; }
.cov-line { display: flex; align-items: center; gap: .2rem; flex-wrap: wrap; }
.vhead h2 .info-i { vertical-align: middle; }

/* =========================================================================
   ANKİ TEKRAR KARTI — profil kartı gibi ALTIN kenarlık, iç tema rengi
   ========================================================================= */
.flashcard {
    border: 1.5px solid var(--gold) !important;
    border-radius: 16px !important;
    background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 8%, var(--panel)), var(--panel-2)) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 8px 26px rgba(0,0,0,.28),
        inset 0 1px 0 color-mix(in srgb, var(--gold) 22%, transparent) !important;
    position: relative;
}
.flashcard::before {
    content: ""; position: absolute; inset: 4px; border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); pointer-events: none;
}

/* =========================================================================
   OLİMPOS artık KOYU tema — eski AÇIK-hardcode override'ları koyulaştır
   ========================================================================= */
body[data-theme="olimpos"] .tool-btn { background: rgba(255,255,255,.04) !important; }
body[data-theme="olimpos"] .pomo-modal,
body[data-theme="olimpos"] .ui-modal, body[data-theme="olimpos"] .pz-modal,
body[data-theme="olimpos"] .av-modal { background: rgba(4,10,20,.68) !important; }
body[data-theme="olimpos"] .ui-modal-card, body[data-theme="olimpos"] .av-card,
body[data-theme="olimpos"] .pomo-card { background: var(--panel) !important; border-color: var(--panel-edge) !important; }
body[data-theme="olimpos"] .composer { background: var(--panel-2) !important; box-shadow: 0 6px 22px rgba(3,8,18,.4) !important; }
body[data-theme="olimpos"] .msg.user, body[data-theme="olimpos"] .cmsg.user {
    background: linear-gradient(180deg, var(--surface-3), var(--panel-2)) !important; color: var(--ink) !important; }
body[data-theme="olimpos"] .cmsg.assistant { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; }
body[data-theme="olimpos"] code { background: rgba(74,151,224,.14) !important; color: var(--teal) !important; }
body[data-theme="olimpos"] .svg-box { background: rgba(74,151,224,.06) !important; }
body[data-theme="olimpos"] .toast { background: var(--panel) !important; color: var(--ink) !important; border: 1px solid var(--panel-edge) !important; }
body[data-theme="olimpos"] .pd-date, body[data-theme="olimpos"] .ud-field input,
body[data-theme="olimpos"] .ud-field select { color-scheme: dark !important; }
body[data-theme="olimpos"] .chat-scroll { background: transparent !important; }
/* başlıklar/altın vurgular biraz parlasın (koyu zeminde) */
body[data-theme="olimpos"] .kb-k, body[data-theme="olimpos"] .bc-title { text-shadow: 0 0 16px rgba(224,184,90,.25); }

/* Katalog: sınıf-bazlı sınav takvimi editörü */
.sched-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.sched-head select { max-width: 130px; }
.sched-grid { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .7rem; }
.sched-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .5rem .7rem; border: 1px solid var(--panel-edge); border-radius: 10px; background: rgba(255,255,255,.02); }
.sch-k { min-width: 64px; font-weight: 600; font-size: var(--fs-md); color: var(--gold-bright); }
.sch-theme { max-width: 160px; }
.sch-dl { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); color: var(--ink-dim); }
.sch-dl input { min-width: 130px; }

/* Kurul banner: içeriği dikey ORTALA (baseline yüzünden yukarıda duruyordu) */
.kurul-banner { align-items: center !important; }

/* Yönetici panosu: sınıf dağılımı satırı */
.pano-sinif { display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0 .2rem; }
.pano-sinif .bk-tags { font-size: var(--fs-sm); color: var(--ink-soft); padding: .2rem .6rem;
    border: 1px solid var(--panel-edge); border-radius: 999px; background: rgba(255,255,255,.02); }

/* =========================================================================
   TEST BİTTİ — büyük ortalanmış ekran + submit sonrası bant (estetik)
   ========================================================================= */
.test-done { text-align: center; padding: 3rem 1.5rem; max-width: 460px; margin: 1.5rem auto; }
.test-done .td-ico { width: 68px; height: 68px; margin: 0 auto 1.2rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: var(--gold-bright);
    background: color-mix(in srgb, var(--gold) 14%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.td-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .6rem; color: var(--ink); }
.td-sub { font-size: var(--fs-xl); line-height: var(--lh-relaxed); color: var(--ink-soft); margin: 0; }
.test-done-band { display: flex; align-items: center; justify-content: center; gap: .5rem;
    margin: 1rem 0; padding: .8rem 1.1rem; border-radius: 12px; text-align: center;
    background: linear-gradient(100deg, color-mix(in srgb, var(--gold) 12%, transparent), transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); color: var(--ink);
    font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.test-done-band .tdb-ico { display: inline-flex; color: var(--gold-bright); }
.test-done-band b { color: var(--gold-bright); }

/* Katalog takvim: "Denemeyi aç" onay kutusu */
.sch-open { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs);
    color: var(--gold-bright); cursor: pointer; white-space: nowrap; }
.sch-open input { width: 16px; height: 16px; accent-color: var(--gold-bright); cursor: pointer; }

/* =========================================================================
   TEST MOTORU — 3 adımlı sihirbaz (temiz, profesyonel)
   ========================================================================= */
.em-dots { display: flex; gap: .5rem; justify-content: center; margin: .2rem 0 1.3rem; }
.em-dot { width: 30px; height: 4px; border-radius: 999px; background: var(--panel-edge); transition: background .25s; }
.em-dot.on { background: var(--gold-bright); }
.em-dot.done { background: var(--gold-deep); }
.em-step { min-height: 200px; animation: ob-slide-in .28s ease; }
.em-q { font-size: var(--fs-3xl); font-weight: 650; letter-spacing: -.01em; margin-bottom: 1rem; color: var(--ink); }
.em-nrow { display: flex; align-items: center; gap: 1rem; margin-bottom: .7rem; }
.em-nrow input[type=range] { flex: 1; accent-color: var(--gold-bright); }
.em-nv { font-size: 1.8rem; font-weight: 700; color: var(--gold-bright); min-width: 48px; text-align: right;
    font-variant-numeric: tabular-nums; }
.em-search { width: 100%; margin-bottom: .7rem; }
.em-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; min-height: 1.5rem; }
.em-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px;
    font-size: var(--fs-md); cursor: pointer; background: color-mix(in srgb, var(--gold) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); color: var(--ink); }
.em-chip b { color: var(--gold-bright); }
.em-list { display: flex; flex-direction: column; gap: .3rem; max-height: 280px; overflow-y: auto; }
.em-item { text-align: left; padding: .55rem .8rem; border-radius: 9px; border: 1px solid var(--panel-edge);
    background: rgba(255,255,255,.02); color: var(--ink-soft); font-size: var(--fs-lg); cursor: pointer; transition: border-color .15s, color .15s; }
.em-item:hover { border-color: var(--gold); color: var(--ink); }
.em-diffs { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-bottom: 1rem; }
.em-diff { padding: .8rem; border-radius: 12px; border: 1px solid var(--panel-edge); background: rgba(255,255,255,.02);
    color: var(--ink-soft); font-size: var(--fs-xl); font-weight: 550; cursor: pointer; transition: all .15s; }
.em-diff.on { border-color: var(--gold-bright); color: var(--gold-bright);
    background: color-mix(in srgb, var(--gold) 12%, transparent); }
.em-summary { margin-top: 1rem; padding: .8rem 1rem; border-radius: 12px; text-align: center; font-size: var(--fs-xl);
    color: var(--ink); background: rgba(255,255,255,.02); border: 1px solid var(--panel-edge); font-variant-numeric: tabular-nums; }
.em-nav { display: flex; gap: .6rem; margin-top: 1.4rem; }
.em-nav .btn { flex: 1; padding: .75rem; }

/* =========================================================================
   SORU BİLDİRME (test) + havuz filtreleri + bildirim listesi
   ========================================================================= */
.q-block { position: relative; }
.q-report { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
    border: 1px solid color-mix(in srgb, var(--coral) 45%, transparent); background: rgba(0,0,0,.15);
    color: var(--coral); font-weight: 800; font-size: var(--fs-md); font-style: italic; opacity: .55; transition: opacity .15s; }
.q-report:hover { opacity: 1; background: color-mix(in srgb, var(--coral) 18%, transparent); }
.qr-q { padding: .6rem .8rem; border-radius: 10px; background: rgba(255,255,255,.03);
    border: 1px solid var(--panel-edge); font-size: var(--fs-lg); line-height: var(--lh-normal); color: var(--ink-soft); }
/* havuz filtreleri */
.pool-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.pool-filters select { max-width: 150px; }
.pf-flag { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-md); color: var(--ink-soft); cursor: pointer; }
.pf-flag input { width: 16px; height: 16px; accent-color: var(--coral); }
/* bildirilen soru rozeti */
.pool-row.flagged { border-color: color-mix(in srgb, var(--coral) 40%, transparent); background: color-mix(in srgb, var(--coral) 6%, transparent); }
.flag-badge { display: inline-block; font-size: var(--fs-2xs); font-weight: 700; color: var(--coral);
    border: 1px solid color-mix(in srgb, var(--coral) 45%, transparent); border-radius: 999px; padding: .05rem .4rem; vertical-align: middle; }
/* soru bildirim listesi */
.qrep-item { position: relative; padding: .7rem .9rem; margin-bottom: .5rem; border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--coral) 30%, transparent); background: color-mix(in srgb, var(--coral) 5%, transparent); }
.qrep-q { font-size: var(--fs-lg); line-height: var(--lh-normal); color: var(--ink); padding-right: 1.6rem; }
.qrep-msg { font-size: var(--fs-md); color: var(--ink-soft); margin-top: .3rem; font-style: italic; }
.qrep-meta { font-size: var(--fs-xs); color: var(--ink-dim); margin-top: .3rem; }
.qrep-x { position: absolute; top: .5rem; right: .6rem; background: none; border: none; color: var(--ink-dim);
    cursor: pointer; font-size: var(--fs-xl); padding: .2rem .35rem; border-radius: 6px; }
.qrep-x:hover { color: var(--coral); background: rgba(0,0,0,.2); }

/* =========================================================================
   ŞİFRE: göster/gizle + "şifremi unuttum" akışı (login kutusu içinde)
   Tipografi login diliyle aynı: başlıklar .brand-sub ölçüsü, kod alanı
   büyük/harf-aralıklı, vurgular altın — yeni renk/yeni font yok.
   ========================================================================= */
.pw-wrap { position: relative; margin-bottom: .7rem; }
.login-box .pw-wrap input { margin-bottom: 0; padding-right: 2.9rem; }
.pw-eye {
    position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
    width: 2.2rem; height: 2.2rem; display: flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 8px; cursor: pointer;
    color: var(--ink-dim); transition: color .15s;
}
.pw-eye svg { width: 19px; height: 19px; display: block; }
.pw-eye:hover, .pw-eye.on { color: var(--gold-bright); }

/* adım başlığı: marka alt-yazısıyla aynı ses (küçük, aralıklı, uppercase) */
.fp-title {
    font-size: var(--fs-2xs); letter-spacing: .25em; text-transform: uppercase;
    color: var(--ink-dim); text-align: center; margin: .2rem 0 .55rem;
}
.fp-title::before { content: "▸ "; color: var(--teal); }
.fp-desc {
    font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--ink-soft);
    text-align: center; margin: 0 0 1rem;
}
.fp-desc b, .fp-mail { color: var(--gold-bright); font-weight: 600; }
.fp-ttl { color: var(--ink-dim); font-size: var(--fs-sm); }

/* 6 haneli onay kodu: büyük, eş-aralıklı rakam, altın vurgu */
.login-box input.fp-code {
    text-align: center; font-size: 1.45rem; font-weight: 700;
    letter-spacing: .42em; text-indent: .42em;   /* harf aralığının sağa itmesini dengele */
    color: var(--gold-bright); font-variant-numeric: tabular-nums;
    padding: .55rem .6rem; margin-bottom: .8rem;
}
.login-box input.fp-code::placeholder { color: var(--panel-edge); letter-spacing: .42em; }

/* alt bağlantı satırı (girişe dön · tekrar gönder) */
.login-box .login-switch { margin-top: .8rem; }
.login-box .login-switch a { text-decoration: none; border-bottom: 1px dotted currentColor; }
.login-box .login-switch a:hover { color: var(--teal); }
.fp-sep { color: var(--ink-dim); margin: 0 .5rem; }
#fp-resend.wait { color: var(--ink-dim); pointer-events: none; border-bottom-color: transparent; }
.fp-ttl { white-space: nowrap; }   /* "10 dk geçerli" satır ortasından bölünmesin */

/* ---- Okunabilirlik: uzun metin ~72 karakterde dursun (anlatım + sohbet) ---- */
.md-body { max-width: 72ch; }
.cmsg.assistant { max-width: calc(72ch + 44px); }   /* 44px = soldaki avatar boşluğu */
.cmsg.user { max-width: min(72ch, 82%); }

/* süre kapısı ⓘ hizası: başlık satırında buton + info yan yana */
.gate-wrap { display: inline-flex; align-items: center; gap: .45rem; }
.test-foot .info-i { flex: 0 0 auto; }

/* ---- PINCH-ZOOM modu (.vv-zoom): şemaya yakınlaşırken ağır efektler kapanır — donma biter ---- */
body.vv-zoom .starfield { display: none; }                      /* aurora + grid animasyonu */
body.vv-zoom::after { display: none; }                          /* vinyet katmanı */
body.vv-zoom .topbar, body.vv-zoom .bottom-nav { backdrop-filter: none !important; }
body.vv-zoom .big-card::after { animation: none !important; }   /* nefes alan noktalar */
body.vv-zoom .hal, body.vv-zoom .hal::before, body.vv-zoom .hal::after { animation: none !important; }
body.vv-zoom * { transition: none !important; }

/* Şema kutuları: içleri dış sayfa düzenini etkilemesin (tarayıcı daha az yeniden hesap yapar) */
.mermaid-box, .svg-box { contain: layout paint; }
.mermaid-box svg, .svg-box svg { max-width: 100%; height: auto; }

/* ============ ÜYELİK ÖDEMESİ POPUP (manuel IBAN/EFT) ============ */

/* ============ FORUM (not paylaşımı + soru/tartışma) ============ */
/* ============ FORUM (fm-) — kart tabanlı, avatarlı düzen ============
   Eski hâli düz metin listesiydi ("çok textvari"). Artık her gönderi bir kart:
   sol tarafta kullanıcı adından türeyen renkli avatar, ortada başlık + alıntı,
   sağda yanıt sayacı. Renk kullanıcı adının hash'inden gelir → aynı kişi hep
   aynı renk, ekstra veri/istek gerekmez. */
.fm-wrap { max-width: 780px; margin: 0 auto; }

/* --- sekmeler --- */
.fm-tabs { display: flex; gap: .35rem; padding: .3rem; margin-bottom: 1rem;
  background: var(--panel-2); border: 1px solid var(--panel-edge); border-radius: 999px; }
.fm-tab { flex: 1; background: none; border: none; border-radius: 999px; cursor: pointer;
  padding: .5rem .8rem; font-size: var(--fs-lg); font-weight: 600; color: var(--ink-dim);
  transition: background .2s, color .2s; }
.fm-tab:hover { color: var(--ink-soft); }
.fm-tab.on { background: var(--panel); color: var(--gold-bright);
  box-shadow: 0 1px 6px rgba(0,0,0,.35), inset 0 0 0 1px rgba(224,177,92,.35); }

.fm-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: .9rem; flex-wrap: wrap; }
.fm-desc { font-size: var(--fs-lg); color: var(--ink-dim); margin: 0; flex: 1 1 220px; line-height: var(--lh-normal); }

/* --- avatar --- */
.fm-av { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-2xl); color: #fff; user-select: none;
  background: linear-gradient(140deg, hsl(var(--av-h) 52% 46%), hsl(var(--av-h) 46% 30%));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.fm-av.big { width: 46px; height: 46px; font-size: var(--fs-4xl); }

/* --- gönderi listesi --- */
.fm-list { display: flex; flex-direction: column; gap: .6rem; }
.fm-card { display: flex; align-items: flex-start; gap: .8rem; width: 100%; text-align: left;
  padding: .85rem .95rem; border: 1px solid var(--panel-edge); border-radius: var(--radius);
  background: var(--panel-2); cursor: pointer;
  transition: border-color .2s, transform .2s, box-shadow .2s; }
.fm-card:hover, .fm-card:focus-visible { border-color: rgba(111,207,194,.55);
  transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.35); outline: none; }
.fm-card.pin { border-color: rgba(224,177,92,.45); }
.fm-main { flex: 1 1 auto; min-width: 0; }
.fm-title { margin: 0 0 .22rem; font-size: var(--fs-xl); font-weight: 650; color: var(--ink);
  line-height: var(--lh-snug); overflow-wrap: anywhere; }
.fm-pin { display: inline-block; margin-right: .4rem; padding: .05rem .4rem; border-radius: 4px;
  font-size: var(--fs-3xs); letter-spacing: .08em; font-weight: 700; vertical-align: 2px;
  color: var(--gold-bright); background: rgba(224,177,92,.14); border: 1px solid rgba(224,177,92,.4); }
.fm-excerpt { margin: 0 0 .35rem; font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--ink-dim);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fm-meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--ink-dim); }
.fm-meta b { color: var(--ink-soft); font-weight: 600; }
.fm-dot { opacity: .5; }
.fm-chip { padding: .08rem .45rem; border-radius: 999px; font-size: var(--fs-2xs);
  color: var(--teal); background: rgba(111,207,194,.12); border: 1px solid rgba(111,207,194,.3); }

.fm-count { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .55rem; border-radius: 999px; font-size: var(--fs-md);
  color: var(--teal); background: rgba(111,207,194,.1); border: 1px solid rgba(111,207,194,.28); }
.fm-count svg { width: 15px; height: 15px; }
.fm-count.zero { color: var(--ink-dim); background: transparent; border-color: var(--panel-edge); }

/* --- boş durum --- */
.fm-empty { text-align: center; padding: 3rem 1rem; color: var(--ink-dim); }
.fm-empty svg { width: 40px; height: 40px; opacity: .35; margin-bottom: .8rem; }
.fm-empty p { margin: 0 0 .3rem; font-size: var(--fs-2xl); color: var(--ink-soft); }
.fm-empty span { font-size: var(--fs-md); }

/* --- gönderi detayı --- */
.fm-back { background: none; border: none; cursor: pointer; padding: .3rem 0; margin-bottom: .7rem;
  font-size: var(--fs-lg); color: var(--ink-dim); }
.fm-back:hover { color: var(--gold-bright); }
.fm-post { padding: 1rem 1.1rem; border: 1px solid var(--panel-edge); border-radius: var(--radius);
  background: var(--panel-2); }
.fm-post-top { display: flex; align-items: flex-start; gap: .8rem; }
.fm-post-title { margin: 0 0 .3rem; font-size: var(--fs-3xl); line-height: var(--lh-snug); color: var(--ink);
  overflow-wrap: anywhere; }
.fm-del { flex: 0 0 auto; background: none; border: 1px solid var(--panel-edge); cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%; color: var(--ink-dim); line-height: 1; }
.fm-del:hover { color: var(--coral, #e0683c); border-color: rgba(224,104,60,.5); }
.fm-post-body { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--panel-edge);
  font-size: var(--fs-xl); line-height: var(--lh-relaxed); color: var(--ink-soft); overflow-wrap: anywhere; }

/* --- ayraç --- */
.fm-sep { display: flex; align-items: center; gap: .7rem; margin: 1.3rem 0 .8rem; }
.fm-sep::before, .fm-sep::after { content: ""; flex: 1; height: 1px; background: var(--panel-edge); }
.fm-sep span { font-size: var(--fs-sm); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: 600; }

/* --- yanıtlar --- */
.fm-replies { display: flex; flex-direction: column; gap: .55rem; }
.fm-reply { display: flex; align-items: flex-start; gap: .7rem; padding: .75rem .85rem;
  border-radius: var(--radius); background: var(--panel-2);
  border: 1px solid var(--panel-edge); border-left: 2px solid rgba(111,207,194,.45); }
.fm-reply .fm-av { width: 32px; height: 32px; font-size: var(--fs-lg); }
.fm-reply-body { margin-top: .28rem; font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--ink-soft);
  overflow-wrap: anywhere; }
.fm-noreply { text-align: center; padding: 1.4rem; font-size: var(--fs-lg); color: var(--ink-dim); }

/* yanıta eklenen görsel */
.fm-shot { display: block; margin-top: .55rem; max-width: 320px; border-radius: 10px;
  overflow: hidden; border: 1px solid var(--panel-edge); line-height: 0; }
.fm-shot img { width: 100%; height: auto; display: block; }
.fm-shot:hover { border-color: var(--teal); }

/* yanıta eklenen BELGE (PDF) — satır içi gösterilmez, indirme çipi olarak durur */
.fm-file { display: inline-flex; align-items: center; gap: .5rem; margin-top: .55rem;
  padding: .45rem .7rem; border-radius: 10px; text-decoration: none; max-width: 100%;
  background: var(--panel); border: 1px solid var(--panel-edge); }
.fm-file:hover { border-color: var(--teal); }
.fm-file-ico { flex: 0 0 auto; font-size: var(--fs-3xs); font-weight: 800; letter-spacing: .06em;
  padding: .2rem .35rem; border-radius: 4px; color: #fff; background: #c0392b; }
.fm-file-ad { flex: 1 1 auto; min-width: 0; font-size: var(--fs-md); color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-file-in { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--teal); }

/* seçilen belgenin önizleme çipi */
.fm-photo-doc { display: inline-block; padding: .5rem .75rem; font-size: var(--fs-md);
  color: var(--ink-soft); max-width: 240px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }

/* --- yanıt kutusu --- */
.fm-box { margin-top: 1rem; padding: .75rem; border: 1px solid var(--panel-edge);
  border-radius: var(--radius); background: var(--panel-2); }
.fm-box textarea { width: 100%; resize: vertical; min-height: 62px; }
.fm-box-bar { display: flex; align-items: center; gap: .5rem; margin-top: .55rem; }
/* DİKKAT: butonlar flex-shrink:0 — dar telefonda ezilip 0 genişliğe düşmesinler */
.fm-box-bar .btn, .fm-attach { flex: 0 0 auto; }
.fm-box-bar .btn.glow { margin-left: auto; }
.fm-attach { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  padding: .42rem .7rem; border-radius: 999px; font-size: var(--fs-md);
  color: var(--ink-dim); background: none; border: 1px solid var(--panel-edge); }
.fm-attach:hover { color: var(--teal); border-color: rgba(111,207,194,.5); }

.fm-photo-prev { position: relative; display: inline-block; margin-top: .55rem;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--panel-edge); line-height: 0; }
.fm-photo-prev img { max-width: 190px; max-height: 150px; display: block; }
.fm-photo-x { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px;
  border-radius: 50%; cursor: pointer; border: none; line-height: 1; font-size: var(--fs-sm);
  color: #fff; background: rgba(11,16,24,.8); }
.fm-photo-x:hover { background: var(--coral, #e0683c); }

@media (max-width: 560px) {
  .fm-card { padding: .75rem .8rem; gap: .65rem; }
  .fm-av { width: 34px; height: 34px; font-size: var(--fs-xl); }
  .fm-count b { display: none; }
  .fm-shot, .fm-photo-prev img { max-width: 100%; }
  .fm-attach span { display: none; }
}


/* ============ 3D ANATOMİ ATLASI ============ */
.an3-wrap { display: flex; flex-direction: column; gap: .6rem; }
.an3-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.an3-title { font-weight: 800; font-size: var(--fs-2xl); color: var(--ink); letter-spacing: .01em; }
.an3-layers { display: flex; gap: .4rem; flex-wrap: wrap; }
.an3-lay { padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--panel-edge);
    background: var(--panel); color: var(--ink-soft); font-size: var(--fs-md); font-weight: 700; cursor: pointer;
    transition: all .15s; }
.an3-lay:hover { border-color: var(--teal); color: var(--ink); }
.an3-lay.on { background: linear-gradient(180deg, rgba(111,207,194,.22), rgba(111,207,194,.08));
    border-color: var(--teal); color: var(--ink); box-shadow: var(--glow-teal); }

.an3-stage { position: relative; width: 100%; height: min(68vh, 560px);
    background: radial-gradient(120% 120% at 50% 20%, #12202c 0%, #0b141c 70%, #070d13 100%);
    border: 1px solid var(--panel-edge); border-radius: var(--radius); overflow: hidden;
    touch-action: none; user-select: none; }
.an3-stage canvas { display: block; width: 100% !important; height: 100% !important; }

.an3-loading { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .8rem;
    align-items: center; justify-content: center; color: var(--ink-soft); font-size: var(--fs-lg);
    background: rgba(8,14,20,.55); z-index: 6; text-align: center; padding: 1rem; }
.an3-loading[hidden] { display: none; }
.an3-info[hidden] { display: none; }
.an3-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--panel-edge);
    border-top-color: var(--teal); animation: an3rot .8s linear infinite; }
@keyframes an3rot { to { transform: rotate(360deg); } }

/* pinli etiketler */
.an3-pins { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.an3-pin { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 5px;
    pointer-events: auto; cursor: pointer; white-space: nowrap; }
.an3-pdot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal);
    box-shadow: 0 0 0 3px rgba(111,207,194,.25), 0 0 8px rgba(111,207,194,.6); flex: none; }
.an3-plabel { font-size: var(--fs-xs); font-weight: 700; color: var(--ink); background: rgba(11,20,28,.82);
    border: 1px solid rgba(111,207,194,.35); border-radius: 6px; padding: 1px 7px; backdrop-filter: blur(3px);
    box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.an3-pin:hover .an3-plabel { border-color: var(--teal); color: var(--teal); }

/* seçim bilgi kutusu */
.an3-info { position: absolute; left: 12px; top: 12px; z-index: 7; max-width: 70%;
    background: linear-gradient(180deg, rgba(20,32,44,.95), rgba(13,23,32,.95));
    border: 1px solid var(--teal); border-radius: 10px; padding: .55rem .8rem .6rem;
    box-shadow: var(--shadow), var(--glow-teal); }
.an3-itr { font-weight: 800; font-size: var(--fs-2xl); color: var(--ink); padding-right: 18px; }
.an3-ila { font-size: var(--fs-md); font-style: italic; color: var(--teal); margin-top: 2px; }
.an3-iclose { position: absolute; top: 4px; right: 6px; background: none; border: none; color: var(--ink-dim);
    font-size: var(--fs-3xl); line-height: 1; cursor: pointer; padding: 2px 4px; }
.an3-iclose:hover { color: var(--hal); }

.an3-hint { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); z-index: 5;
    font-size: var(--fs-2xs); color: var(--ink-dim); background: rgba(8,14,20,.6); padding: 3px 10px; border-radius: 999px;
    white-space: nowrap; max-width: 94%; overflow: hidden; text-overflow: ellipsis; }
.an3-tools { position: absolute; right: 10px; bottom: 10px; z-index: 7; display: flex; gap: .35rem; }
.an3-btn { padding: .4rem .6rem; border-radius: 8px; border: 1px solid var(--panel-edge);
    background: rgba(13,23,32,.85); color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
    backdrop-filter: blur(3px); transition: all .15s; }
.an3-btn:hover { border-color: var(--teal); color: var(--ink); }
.an3-btn.on { border-color: var(--gold); color: var(--gold-bright); box-shadow: var(--glow-gold); }
.an3-credit { position: absolute; left: 10px; bottom: 10px; z-index: 5; font-size: var(--fs-3xs); color: var(--ink-dim);
    opacity: .7; }
@media (max-width: 560px) {
    .an3-hint { display: none; }
    .an3-plabel { font-size: var(--fs-2xs); padding: 0 5px; }
    .an3-stage { height: 62vh; }
}

/* ============ AR-GE ÖLÇÜM PANOSU (admin) ============ */
.rg-readywrap { display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0 .6rem; }
.rg-ready { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .7rem;
  border: 1px solid var(--panel-edge); border-radius: 999px; background: var(--panel-2);
  font-size: var(--fs-md); color: var(--ink-dim); }
.rg-ready b { color: var(--ink-dim); font-weight: 600; }
.rg-ready.on { border-color: rgba(111,207,194,.55); color: var(--ink-soft); }
.rg-ready.on b { color: var(--teal); }
.rg-dot { width: 8px; height: 8px; border-radius: 50%; background: #3a4a5e; flex: 0 0 auto; }
.rg-ready.on .rg-dot { background: var(--teal); box-shadow: 0 0 8px rgba(111,207,194,.7); }

.rg-counts { display: flex; flex-wrap: wrap; gap: .9rem; font-size: var(--fs-sm); color: var(--ink-dim);
  padding: .5rem .1rem .2rem; }
.rg-counts b { color: var(--gold-bright); font-family: ui-monospace, "Consolas", monospace; }

.rg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .6rem; margin: .5rem 0 .8rem; }
.rg-kpi { border: 1px solid var(--panel-edge); border-radius: var(--radius); padding: .6rem .75rem;
  background: var(--panel-2); display: flex; flex-direction: column; gap: .15rem; }
.rg-kpi span { font-size: var(--fs-xs); color: var(--ink-dim); }
.rg-kpi b { font-size: var(--fs-4xl); font-family: ui-monospace, "Consolas", monospace; color: var(--ink); }
.rg-kpi i { font-size: var(--fs-2xs); color: var(--ink-dim); font-style: normal; }
.rg-kpi.rg-win { border-color: rgba(111,207,194,.5); }
.rg-kpi.rg-win b { color: var(--teal); }
.rg-kpi.rg-lose { border-color: rgba(224,104,60,.5); }
.rg-kpi.rg-lose b { color: var(--coral, #e0683c); }

.rg-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); margin: .3rem 0 .5rem; }
.rg-table th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-dim); font-weight: 600; padding: .4rem .5rem; border-bottom: 1px solid var(--panel-edge); }
.rg-table td { padding: .38rem .5rem; border-bottom: 1px solid rgba(50,67,88,.35);
  font-family: ui-monospace, "Consolas", monospace; }
.rg-table tr:last-child td { border-bottom: none; }
.rg-good { color: var(--teal); }
.rg-bad { color: var(--coral, #e0683c); }
.rg-note { font-size: var(--fs-sm); line-height: var(--lh-normal); margin: .2rem 0 .6rem; }

.rg-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem; }
.rg-stage { border: 1px solid var(--panel-edge); border-radius: var(--radius); padding: .6rem .7rem;
  background: var(--panel-2); }
.rg-stage-h { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  font-size: var(--fs-sm); color: var(--ink-soft); font-weight: 600; margin-bottom: .4rem;
  padding-bottom: .35rem; border-bottom: 1px solid rgba(50,67,88,.4); }
.rg-stage-h b { font-family: ui-monospace, "Consolas", monospace; color: var(--gold-bright); }
.rg-line { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--ink-dim);
  padding: .15rem 0; }
.rg-line b { font-family: ui-monospace, "Consolas", monospace; color: var(--ink-soft); }

.rg-abbar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: .3rem 0 .6rem; }
.rg-abbar > span:first-child { font-size: var(--fs-md); color: var(--ink-dim); }
.rg-abbar b { color: var(--gold-bright); }

.rg-params { display: flex; flex-direction: column; gap: .45rem; }
.rg-badge { align-self: flex-start; font-size: var(--fs-xs); letter-spacing: .1em; padding: .28rem .7rem;
  border-radius: 999px; border: 1px solid var(--panel-edge); color: var(--ink-dim); background: var(--panel-2); }
.rg-badge.on { border-color: var(--gold); color: var(--gold-bright); box-shadow: var(--glow-gold); }
.rg-plist { display: flex; flex-wrap: wrap; gap: .9rem; font-size: var(--fs-md); color: var(--ink-dim); }
.rg-plist b { font-family: ui-monospace, "Consolas", monospace; color: var(--ink); }

/* =========================================================================
   TİPOGRAFİ & BOŞLUK SİSTEMİ  (2026-07-28)
   -------------------------------------------------------------------------
   Önce burada ne olduğu: uygulamada 351 font-size bildirimi ~40 farklı
   değerle yazılmıştı (.82 / .84 / .85 / .86 / .88 — gözle ayırt edilemeyen,
   birbirinden habersiz kararlar). 46 farklı boşluk değeri, 1.5/1.55/1.6/
   1.62/1.65 diye beş ayrı satır yüksekliği vardı. Bu bir ölçek değil,
   zamanla biriken serbest değerlerdi.

   Sistem TEK bir ayrım üzerine kurulu: bu uygulamada iki tipografik kip var.

     ALET KİPİ   — listeler, sayılar, rozetler, sekmeler, panel içi arayüz.
                   Sıkı, küçük, taranmak için. Varsayılan kip.
     OKUMA KİPİ  — konu anlatımı (.md-body). Uzun tıp metni, dakikalarca
                   okunur. Geniş satır arası, sınırlı satır uzunluğu, gerçek
                   paragraf ritmi.

   Şimdiye kadar ikisi aynı ölçekleri paylaştığı için anlatım sıkışık,
   arayüz gürültülü duruyordu. Ayrım artık açık.
   ========================================================================= */
:root {
    /* --- Boyut merdiveni: 9,5px → 20px arası arayüz metni ---------------
       Basamaklar mevcut değerlere göre seçildi; hiçbir öğe 0,8px'den fazla
       kaymaz, yani düzen bozulmaz — sadece 40 değer 10 basamağa iner.
       20px üstü başlık/marka boyutlarına dokunulmadı: onlar tekil,
       kasıtlı seçimler, savrulma değil. */
    --fs-3xs:  .594rem;   /*  9.5px  — mikro rozet */
    --fs-2xs:  .656rem;   /* 10.5px  — üst etiket (eyebrow) */
    --fs-xs:   .719rem;   /* 11.5px  — yardımcı bilgi */
    --fs-sm:   .781rem;   /* 12.5px  — ikincil arayüz */
    --fs-md:   .828rem;   /* 13.25px — BASKIN arayüz boyutu */
    --fs-lg:   .875rem;   /* 14px    — vurgulu arayüz */
    --fs-xl:   .953rem;   /* 15.25px — OKUMA gövdesi */
    --fs-2xl: 1.016rem;   /* 16.25px — kart başlığı */
    --fs-3xl: 1.141rem;   /* 18.25px — bölüm başlığı */
    --fs-4xl: 1.25rem;    /* 20px    — panel başlığı */

    /* --- Satır yüksekliği: beş değil, beş amaç ------------------------- */
    --lh-tight:   1.2;    /* büyük başlık */
    --lh-snug:    1.35;   /* kart/arayüz */
    --lh-normal:  1.5;    /* varsayılan */
    --lh-relaxed: 1.6;    /* kısa açıklama */
    --lh-read:    1.75;   /* uzun tıp metni */

    /* --- Optik harf aralığı --------------------------------------------
       Küçük metin daha açık, büyük metin daha sıkı ister. Gövdeye tek bir
       -.006em vermek 10px'lik etiketleri okunmaz yapıyordu. */
    --tr-micro:  .06em;   /* VERSAL mikro etiket */
    --tr-tight: -.011em;  /* başlık */
    --tr-body:  -.004em;  /* gövde */

    /* --- Boşluk merdiveni: 4px tabanlı --------------------------------- */
    --sp-1: .25rem;  --sp-2: .375rem; --sp-3: .5rem;  --sp-4: .75rem;
    --sp-5: 1rem;    --sp-6: 1.5rem;  --sp-7: 2rem;   --sp-8: 3rem;

    /* Okuma satır uzunluğu. 72ch fazlaydı: `ch` sıfır karakterin genişliği
       olduğu için oransal fontta ~85 gerçek karaktere denk düşüyor, gözün
       satır başını kaybettiği yer. 66ch ≈ 72 karakter. */
    --measure: 66ch;
}

/* --- Inter değişken font: optik boyut açık ------------------------------ */
html, body { font-optical-sizing: auto; letter-spacing: var(--tr-body); }

/* --- SAYILAR: sabit genişlik ------------------------------------------
   Bu bir çalışma uygulaması; ekranda sürekli puan, seri, yüzde ve geri
   sayan bir pomodoro var. Oransal rakamlarda "1" dar, "8" geniş olduğu için
   sayaç her saniye titrer, puan her güncellemede zıplar. Tablo rakamı bunu
   bitirir — rakamlar aynı hücre genişliğini paylaşır. */
.pf-stat-val, .pk-stat-val, .lb-score, .mast-pct, .pomo-count, .fm-count,
.pf-streak, .pk-streak, .pomo-time, .stat-val, .kpi-val,
[class*="-pct"], [class*="-score"], [class*="-count"] {
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}

/* --- VERSAL mikro etiketler -------------------------------------------
   Büyük harf metin küçüldükçe harfler birbirine yapışır; ayrıca Türkçede
   İ/I ayrımı sıkışık aralıkta kaybolur. Mikro etiketlere pozitif aralık. */
.t-label, .pf-stat-lbl, .pk-stat-lbl, .lb-score-lbl {
    letter-spacing: var(--tr-micro); font-weight: 600;
}

/* =========================================================================
   OKUMA KİPİ — konu anlatımı
   Öğrencinin en uzun süre gözünü diktiği yüzey. Arayüzün sıkışık ölçeğinden
   çıkarılıp kendi ritmine kavuşturuluyor.
   ========================================================================= */
.md-body {
    font-size: var(--fs-xl);
    line-height: var(--lh-read);
    max-width: var(--measure);
    letter-spacing: 0;                /* uzun metinde negatif aralık yorar */
    text-wrap: pretty;                /* satır sonu tek kelime kalmasın */
}
.md-body p { margin: 0 0 var(--sp-5); }
.md-body > :first-child { margin-top: 0; }
.md-body > :last-child  { margin-bottom: 0; }

/* Başlıklar: üstteki boşluk alttakinin ~3 katı. Böylece başlık kendinden
   ÖNCEKİ bloktan kopar, kendinden SONRAKİ metne yapışır — okuyucu başlığın
   neye ait olduğunu düşünmeden görür. */
.md-body h2 {
    font-size: var(--fs-3xl); line-height: var(--lh-snug);
    letter-spacing: var(--tr-tight);
    margin: var(--sp-7) 0 var(--sp-3);
}
.md-body h3 {
    font-size: var(--fs-2xl); line-height: var(--lh-snug);
    letter-spacing: var(--tr-tight);
    margin: var(--sp-6) 0 var(--sp-2);
}
.md-body h2:first-child, .md-body h3:first-child { margin-top: 0; }

.md-body ul, .md-body ol { margin: 0 0 var(--sp-5); padding-left: var(--sp-6); }
.md-body li { margin: 0 0 var(--sp-2); }
.md-body li:last-child { margin-bottom: 0; }
.md-body li > ul, .md-body li > ol { margin: var(--sp-2) 0 0; }

.md-body table { font-size: var(--fs-md); line-height: var(--lh-snug); }
.md-body code  { font-size: .92em; }        /* em: çevresiyle orantılı kalsın */

/* Dar ekranda satır uzunluğu zaten kısıtlı; boyutu bir basamak düşürmek
   yerine satır arasını hafif toplamak metni daha derli toplu gösterir. */
@media (max-width: 640px) {
    .md-body { line-height: var(--lh-relaxed); }
    .md-body h2 { margin-top: var(--sp-6); }
}

/* Erişilebilirlik tabanı: kullanıcı hareketi kısmışsa geçişleri sustur. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important; scroll-behavior: auto !important;
    }
}

/* =========================================================================
   ZEMİN & TEMA UYUMU  (2026-07-28)
   -------------------------------------------------------------------------
   Üç ayrı şikâyetin tek bir kök sebebi vardı: renkler SABİT yazılmıştı.
   Panel `rgba(29,40,54,.9)`, araç butonu `rgba(11,16,24,.5)`, ızgara
   `rgba(111,207,194,.04)` — tema değişkenleri değişse de bunlar yerinde
   kalıyordu. Şeker temasına geçince zemin pembe oluyor, kartlar lacivert
   kalıyordu. Hepsi color-mix ile tema değişkenine bağlandı.
   ========================================================================= */

/* --- IZGARA: tüm ekranı kaplar, büyür, temaya uyar --------------------
   Eskiden ::after'a `inset: 20%` verilmişti. Üst katman zaten `inset:-20%`
   ile viewport'un %140'ı olduğu için ızgara ekranın ortasındaki dar bir
   alanda kalıyor, kenarlara hiç değmiyordu. inset:0 → her yeri kaplar. */
.starfield::after {
    inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--teal) 14%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--teal) 14%, transparent) 1px, transparent 1px);
    background-size: 72px 72px, 72px 72px;   /* 46px → 72px: daha iri, daha okunur */
    /* kenarlarda yumuşakça sönsün ki kesik görünmesin */
    -webkit-mask-image: radial-gradient(120% 110% at 50% 40%, #000 45%, transparent 92%);
            mask-image: radial-gradient(120% 110% at 50% 40%, #000 45%, transparent 92%);
    opacity: 1;
}

/* --- AURORA: temaya uyar, daha belirgin, çok yavaş gezinir ------------- */
.starfield {
    opacity: 1;
    background:
        radial-gradient(760px 560px at 20% 22%, color-mix(in srgb, var(--teal) 22%, transparent), transparent 70%),
        radial-gradient(820px 620px at 80% 70%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 70%),
        radial-gradient(620px 620px at 58% 34%, color-mix(in srgb, var(--violet, var(--teal)) 14%, transparent), transparent 72%);
    animation: aurora 44s ease-in-out infinite alternate !important;  /* durgunluk = düz his */
}

/* --- ZEMİN DERİNLİĞİ: düz renk hissini kır ---------------------------
   Tek yönlü bir gradyan (deep→void) iki renk birbirine yakın olunca düz
   görünür. Üstten ışık + kenarlarda vinyet, gözü ortaya toplar.
   NOT: body::before tema dokusuna (klasik kıvılcımlar vb.), body::after
   vinyete ayrılmış. Zeminin sahibi .bg-base, katman oraya biniyor. */
.bg-base {
    background:
        radial-gradient(150% 95% at 50% -12%, color-mix(in srgb, var(--panel-2) 62%, transparent), transparent 62%),
        radial-gradient(115% 115% at 50% 58%, transparent 40%, color-mix(in srgb, var(--void) 78%, transparent) 100%),
        linear-gradient(168deg, var(--deep) 0%, color-mix(in srgb, var(--deep) 55%, var(--void)) 52%, var(--void) 100%);
}

/* --- PANELLER: temanın kendi rengini alır ----------------------------- */
.card, .login-box {
    background: linear-gradient(170deg,
        color-mix(in srgb, var(--panel-2) 92%, var(--gold-bright)) 0%,
        var(--panel-2) 38%,
        var(--panel) 80%,
        color-mix(in srgb, var(--panel) 88%, var(--void)) 100%);
}

/* Üstteki gerçek sekmeler de düz duruyordu: seçili olan artık hafif bir
   yükselti alıyor — altın vurgu yukarıdan aşağı sönerek zemine karışıyor. */
.tab.active {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--gold) 16%, transparent) 0%,
        color-mix(in srgb, var(--gold) 4%, transparent) 70%,
        transparent 100%);
}

/* --- BUTONLAR: sabit lacivert yerine tema tonu ------------------------ */
.tool-btn { background: color-mix(in srgb, var(--panel) 72%, transparent); }
.tool-btn:hover { background: color-mix(in srgb, var(--gold) 12%, var(--panel)); }
.tab:hover { background: color-mix(in srgb, var(--gold) 9%, transparent); }
.btn:hover { background: color-mix(in srgb, var(--teal) 14%, transparent); }
.doc-item:hover, .topic-item:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.topic-item.sel { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.icon-btn:hover { background: color-mix(in srgb, var(--coral) 12%, transparent); }
.source-pill  { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.kind-tag     { background: color-mix(in srgb, var(--violet, var(--teal)) 16%, transparent); }
.chip.ok  { border-color: color-mix(in srgb, var(--teal) 45%, transparent); }
.chip.bad { border-color: color-mix(in srgb, var(--coral) 40%, transparent); }
.mermaid-box { background: color-mix(in srgb, var(--void) 55%, transparent); }

/* =========================================================================
   BAŞLIK / ALT BAŞLIK AYRIMI
   Araç karolarında başlık 14px, alt yazı 11,5px idi — aradaki fark 1,22 kat.
   Göz bu kadar yakın iki boyutu "aynı" okur, hangisinin başlık olduğunu
   anlamak için düşünmek gerekir. Boyut farkı açıldı, üstüne renk ve kalınlık
   farkı da bindirildi; hiyerarşi tek bakışta çözülsün.
   ========================================================================= */
.tc-title { font-size: var(--fs-lg);  font-weight: 650; color: var(--ink); }
.tc-sub   { font-size: var(--fs-2xs); font-weight: 500; color: var(--ink-dim); }
.bc-sub   { font-size: var(--fs-xs);  color: var(--ink-dim); }
.cg-bugun .big-card[data-card="gunluk-anlatim"] .bc-sub { font-size: var(--fs-lg); }

/* =========================================================================
   KART KENARLARI — ayrıştırıcı renk  (2026-07-28)
   -------------------------------------------------------------------------
   Kenarlar `--panel-edge` ile çiziliyordu; o renk (#2b3340 gibi) panel
   zeminine neredeyse eşit, yani kenar aslında hiç görünmüyordu. Zemin
   belirginleşince kartlar büsbütün zeminin içinde eridi.
   Çözüm: kenar rengi artık temanın VURGU renginden türüyor. Böylece hem
   görünür oluyor hem de tema değişince onunla birlikte dönüyor.
   ========================================================================= */
:root {
    /* panel-edge'e vurgu karıştır: görünür ama bağırmayan kenar */
    --edge: color-mix(in srgb, var(--gold) 34%, var(--panel-edge));
    --edge-cool: color-mix(in srgb, var(--teal) 34%, var(--panel-edge));
}

/* .card / .big-card kenar+gölgesi kaynağında düzeltildi (bkz. "KARTLAR &
   PANELLER" bloğu); burada yalnız oraya girmeyen yüzeyler kalıyor. */
.login-box { border-color: var(--edge); }
.tool-card { border-color: var(--edge-cool);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--teal) 14%, transparent); }

/* Kilitli kart: kasıtlı olarak sönük kalsın, ayrışmasın */
.card.locked { border-color: var(--panel-edge); }

/* Odak halkası da görünür olsun (klavyeyle gezenler için) */
.big-card:focus-visible, .tool-card:focus-visible, .btn:focus-visible, .tab:focus-visible {
    outline: 2px solid var(--gold-bright); outline-offset: 2px;
}

/* Kalan sabit-renkli yüzeyler: topbar ve pomodoro kartı da temadan türesin
   (ikisi de rgba(29,40,54) ile çivilenmişti). */
.topbar {
    background: linear-gradient(172deg,
        color-mix(in srgb, var(--panel-2) 90%, var(--gold-bright)) 0%,
        var(--panel-2) 45%,
        color-mix(in srgb, var(--panel) 90%, var(--void)) 100%);
    border-color: var(--edge);
}
.pomo-card {
    background: linear-gradient(172deg,
        color-mix(in srgb, var(--panel-2) 92%, var(--pomo-accent, var(--coral))) 0%,
        var(--panel-2) 48%,
        color-mix(in srgb, var(--panel) 88%, var(--void)) 100%);
    border-color: var(--edge);
}

/* =========================================================================
   TOPBAR MENÜSÜ  (2026-07-28)
   -------------------------------------------------------------------------
   Topbar'da beş ayrı kategori yan yana yarışıyordu: marka, ortam kontrolü
   (müzik), geçici araç (pomodoro), durum (seri) ve hesap (profil/çıkış).
   Dağınık görünmesinin sebebi buydu — göze tek bir okuma sırası verilmiyordu.
   Şimdi: SOLDA kim olduğu (marka), SAĞDA çalışırken sık dokunulan tek şey
   (müzik), gerisi menünün ardında. Menü de kimlik altında toplanıyor.
   ========================================================================= */
.tb-menu-btn {
    position: relative; flex: 0 0 auto;
    width: 38px; height: 38px; display: inline-flex;
    align-items: center; justify-content: center;
    margin-left: .6rem; padding: 0; cursor: pointer;
    color: var(--ink-soft);
    background: color-mix(in srgb, var(--panel) 72%, transparent);
    border: 1px solid var(--edge); border-radius: 999px;
    transition: color .2s, border-color .2s, box-shadow .2s, transform .12s;
}
.tb-menu-btn svg { width: 19px; height: 19px; display: block; }
.tb-menu-btn:hover { color: var(--gold-bright); border-color: var(--gold); box-shadow: var(--glow-gold); }
.tb-menu-btn:active { transform: scale(.94); }
.tb-menu-btn.on { color: var(--gold-bright); border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 14%, var(--panel)); }

/* Seri işareti: menü kapalıyken de haber versin diye butonun köşesinde. */
.tb-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px;
    border-radius: 50%; background: var(--ink-dim); }
.tb-dot.hot { background: var(--coral); box-shadow: 0 0 8px var(--coral); }

.tb-menu {
    position: fixed; z-index: 60;
    /* içeriği kadar genişler — sabit genişlik, kısa satırların yanında boşluk bırakır */
    width: max-content; min-width: 170px; max-width: calc(100vw - 20px);
    padding: .45rem; border-radius: 14px;
    border: 1px solid var(--edge);
    background: linear-gradient(172deg,
        color-mix(in srgb, var(--panel-2) 92%, var(--gold-bright)) 0%,
        var(--panel-2) 42%,
        color-mix(in srgb, var(--panel) 88%, var(--void)) 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 16%, transparent),
                0 18px 44px rgba(4,8,14,.5);
    backdrop-filter: blur(6px);
    opacity: 0; transform: translateY(-6px) scale(.98);
    transition: opacity .15s ease, transform .15s ease;
}
.tb-menu.in { opacity: 1; transform: none; }
body.in-view .tb-menu { display: none; }   /* alt sayfada topbar gizli, menü de gizli */

/* Başlık: kimlik + seri. Seri bir EYLEM değil, kişiye ait bir bilgi —
   o yüzden listenin içinde değil, kimliğin yanında duruyor. */
.tbm-head {
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem .6rem .6rem;
    border-bottom: 1px solid color-mix(in srgb, var(--edge) 70%, transparent);
    margin-bottom: .35rem;
}
.tbm-id { display: flex; align-items: center; gap: .55rem; min-width: 0; flex: 1; }
/* max-content genişlikte kesme ancak bir sınır varsa çalışır — uzun kullanıcı
   adı menüyü enlemesine şişirmesin, üç noktayla kesilsin. */
.tbm-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 150px; }
.tbm-who .uc-name { font-size: var(--fs-lg); line-height: var(--lh-tight);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbm-sinif { font-size: var(--fs-2xs); color: var(--ink-dim); letter-spacing: .04em; }
.tb-menu .streak-chip { flex: 0 0 auto; }

.tbm-actions { display: flex; flex-direction: column; gap: 2px; }
.tbm-item {
    display: flex; align-items: center; gap: .6rem;
    width: 100%; padding: .55rem .6rem; text-align: left;
    font: inherit; font-size: var(--fs-md); color: var(--ink-soft);
    background: none; border: none; border-radius: 9px; cursor: pointer;
    transition: background .15s, color .15s;
}
.tbm-item:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold-bright); }
.tbm-ico { flex: 0 0 auto; display: flex; color: var(--teal); }
.tbm-ico svg { width: 18px; height: 18px; display: block; }
.tbm-item:hover .tbm-ico { color: var(--gold-bright); }
.tbm-txt { font-weight: 600; }
.tbm-out { color: var(--ink-dim); }
.tbm-out .tbm-ico { color: var(--ink-dim); }
.tbm-out:hover { background: color-mix(in srgb, var(--coral) 14%, transparent); color: var(--coral); }
.tbm-out:hover .tbm-ico { color: var(--coral); }
.tb-menu-btn:focus-visible, .tbm-item:focus-visible {
    outline: 2px solid var(--gold-bright); outline-offset: 2px;
}

/* =========================================================================
   ALT ÇUBUK KALDIRILDI → KÜNYE  (2026-07-28)
   -------------------------------------------------------------------------
   Alt gezinme çubuğundaki beş yol da ana ekranda kart olarak zaten vardı;
   alt sayfalarda "←" geri dönüyor. Yani çubuk gezinme EKLEMİYOR, yalnız
   ekranın altından 58px yiyordu.
   --nav-h SİLİNMEDİ, sıfırlandı: sohbet ekranı yüksekliği, toast konumu ve
   birkaç yapışkan öğe onun üzerinden hesaplanıyor — sıfırlayınca hepsi
   kendiliğinden toparlanıyor, o dosyalara dokunmaya gerek kalmıyor.
   ========================================================================= */
:root { --nav-h: 0px; }

/* KÜNYE — kitap ve dergilerde eserin sonuna konan yapımcı imzası.
   Sayfanın dibinde durur, kaydırınca görünür. Sessiz ama sahipli. */
.colophon {
    display: flex; flex-direction: column; align-items: center; gap: .55rem;
    padding: var(--sp-8) var(--sp-5) var(--sp-6);
    user-select: none;
}
body.in-view .colophon { display: none; }   /* çalışma sayfalarında görünmez */

/* İki ucu sönen saç teli çizgi — kartların üst çizgisiyle aynı dil */
.col-rule {
    width: min(200px, 46%); height: 1px;
    background: linear-gradient(90deg, transparent, var(--edge), transparent);
}
.col-mark {
    width: 15px; height: 23px; display: block;
    fill: none; stroke: var(--gold); stroke-width: 3.4;
    stroke-linecap: round; stroke-linejoin: round;
    opacity: .3; transition: opacity .4s ease;
}
.col-text {
    font-size: var(--fs-3xs); letter-spacing: .26em; text-transform: uppercase;
    color: var(--ink-dim); opacity: .55; transition: opacity .4s ease;
    font-variant-numeric: tabular-nums;
}
.col-sep { color: var(--gold); opacity: .7; }
/* Üstüne gelince hafifçe canlanır: fark eden görsün, aramayan görmesin. */
.colophon:hover .col-mark { opacity: .55; }
.colophon:hover .col-text { opacity: .8; }

/* =========================================================================
   DİKEY MOBİLDE TAM GENİŞLİK: Test Motoru + Ayarlar  (2026-07-28)
   -------------------------------------------------------------------------
   İkisi de bölümlerinin SONUNDA ve iki karo genişliğinde duruyor.
   Simetri sorunu şuydu: Test Motoru dikey bir .big-card (ikon üstte, altında
   başlık), Ayarlar ise yatay bir .tool-card (ikon solda). Tam genişlikte
   dikey kart uzun boş bir kutuya dönüşüyor ve ikisi hiç benzemiyordu.
   Çözüm: bu kipte Test Motoru da yatay düzene geçiyor — ızgara ile, işaretleme
   değiştirmeden. Böylece aynı yüksekliği, aynı ritmi paylaşıyorlar.
   Yalnız DİKEY mobil: yatay çevirince ızgara zaten farklı akıyor.
   ========================================================================= */
@media (max-width: 760px) and (orientation: portrait) {
    .cg-sinav .big-card[data-card="test-motoru"],
    .cg-arac  .tool-card[data-card="ayarlar"] {
        grid-column: 1 / -1;      /* iki karo genişliği */
        order: 99;                /* bölümün sonuna */
    }

    /* Test Motoru: dikey kart → yatay satır (ikon solda, başlık+alt yazı sağda) */
    .cg-sinav .big-card[data-card="test-motoru"] {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas: "ico baslik" "ico altyazi";
        align-items: center; align-content: center;
        column-gap: .7rem; row-gap: 1px;
        min-height: 56px; padding: .7rem .9rem;
    }
    .cg-sinav .big-card[data-card="test-motoru"] .bc-icon  { grid-area: ico; font-size: 1.45rem; }
    .cg-sinav .big-card[data-card="test-motoru"] .bc-title { grid-area: baslik; }
    .cg-sinav .big-card[data-card="test-motoru"] .bc-sub   { grid-area: altyazi; }
    /* nefes alan teal nokta bu dar satırda başlığa değiyor — kapat */
    .cg-sinav .big-card[data-card="test-motoru"]::after { display: none; }

    .cg-arac .tool-card[data-card="ayarlar"] { min-height: 56px; }
}

/* =========================================================================
   TABLET + MASAÜSTÜ: Araçlar ızgarası  (2026-07-28)
   -------------------------------------------------------------------------
   Araçlar 7 kart — asal sayı, hiçbir sütun düzenine tam bölünmüyor. Üstelik
   `auto-fill` sütun sayısını ekran genişliğine göre kendi seçtiği için tablette
   3 ya da 4 sütun çıkıyor, her iki hâlde de son satırda yetim karo kalıyordu
   (3 sütun → 3+3+1, 4 sütun → 4+3). Asimetrinin sebebi buydu.

   Çözüm sayıyı düzeltmek: Ayarlar tam genişlikte alta alınınca geriye 6 kart
   kalıyor, 6 da 3 sütuna tam iki satır olarak oturuyor. Ayarlar zaten dikey
   mobilde de böyle davranıyor — kırılımlar arası tutarlı.
   Üst sınır YOK: .app zaten max-width:1180px ile kapalı, yani içerik ~1135px'i
   geçmiyor ve 3 sütun geniş masaüstünde de ~370px'de kalıyor. Ayrı bir masaüstü
   kırılımı yazmaya gerek kalmadan yatay/geniş ekran da düzeliyor.
   ========================================================================= */
@media (min-width: 761px) {
    .cg-arac { grid-template-columns: repeat(3, 1fr); }
    .cg-arac .tool-card[data-card="ayarlar"] {
        grid-column: 1 / -1;   /* üç karo genişliği = tam satır */
        order: 99;
        min-height: 56px;
    }
}

/* --- TABLET + MASAÜSTÜ: Sınava Hazırlık ızgarası -----------------------------------
   Araçlar'la aynı hastalık: 5 kart, `auto-fill` tablette 4 sütun seçince
   4+1 oluyor, son satırda yetim karo kalıyordu.
   Test Motoru tam genişliğe alınınca geriye 4 kart kalıyor → tek temiz satır,
   altında tam genişlik çubuğu. Araçlar'daki düzenin aynısı: karo ızgarası +
   altında çubuk. Dikey mobildeki davranışla da tutarlı. */
@media (min-width: 761px) {
    .cg-sinav { grid-template-columns: repeat(4, 1fr); }
    .cg-sinav .big-card[data-card="test-motoru"] {
        grid-column: 1 / -1; order: 99;
        /* tam genişlikte dikey kart uzun boş bir kutu olur — mobildeki gibi
           yatay düzene geçiyor (ikon solda, başlık+alt yazı sağda) */
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas: "ico baslik" "ico altyazi";
        align-items: center; align-content: center;
        column-gap: .7rem; row-gap: 1px;
        min-height: 56px; padding: .7rem .9rem;
    }
    .cg-sinav .big-card[data-card="test-motoru"] .bc-icon  { grid-area: ico; font-size: 1.45rem; }
    .cg-sinav .big-card[data-card="test-motoru"] .bc-title { grid-area: baslik; }
    .cg-sinav .big-card[data-card="test-motoru"] .bc-sub   { grid-area: altyazi; }
    .cg-sinav .big-card[data-card="test-motoru"]::after    { display: none; }
}

/* =========================================================================
   YATAY GÖRÜNÜM (tablet yatay + masaüstü)  (2026-07-28)
   -------------------------------------------------------------------------
   Geri alma: Sınava Hazırlık'ta Test Motoru'nu tam genişliğe çekmiştim —
   gereksizmiş, beş kart yatayda zaten sığıyor. Kart normal hâline dönüyor.
   Yeni düzen: yedi araç TEK SIRA. Genişlik hesabı — .app 1180px'de kapalı,
   yani içerik en fazla ~1135px; yedi sütun ≈ 152px, 1024px'lik tablette
   ≈ 130px. Bu genişlikte yatay karo (ikon solda) sıkışır, o yüzden bu kipte
   karo dikeye dönüyor: ikon üstte, başlık altında.
   Alt yazılar bu sırada gizli — "Sohbet", "Forum", "Kütüphane" kendini zaten
   anlatıyor, 130px'e sıkıştırılmış bir açıklama okunmuyor, sadece gürültü.
   ========================================================================= */
@media (min-width: 761px) and (orientation: landscape) {

    /* --- Sınava Hazırlık: müdahale öncesi hâline dön --- */
    .cg-sinav { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .cg-sinav .big-card[data-card="test-motoru"] {
        display: flex; flex-direction: column; align-items: flex-start;
        grid-column: auto; order: 0;
        gap: .3rem; min-height: 130px; padding: 1.4rem 1.3rem;
    }
    .cg-sinav .big-card[data-card="test-motoru"] .bc-icon  { font-size: 2.1rem; }
    .cg-sinav .big-card[data-card="test-motoru"]::after     { display: block; }

    /* --- Araçlar: yedisi tek sıra --- */
    .cg-arac { grid-template-columns: repeat(7, 1fr); gap: .6rem; }
    .cg-arac .tool-card {
        flex-direction: column; justify-content: center; text-align: center;
        gap: .4rem; padding: .8rem .5rem; min-height: 78px;
    }
    .cg-arac .tool-card[data-card="ayarlar"] { grid-column: auto; order: 0; min-height: 78px; }
    .cg-arac .tc-txt   { align-items: center; width: 100%; }
    .cg-arac .tc-title { font-size: var(--fs-sm); line-height: var(--lh-snug);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .cg-arac .tc-sub   { display: none; }
    .cg-arac .tc-icon .ic { width: 23px; height: 23px; }
    /* düzenle kalemi dikey karoda ortada duruyordu — köşeye al */
    .cg-arac .tool-card .bc-edit { top: 6px; right: 6px; transform: none; }
}

/* =========================================================================
   SAYFA BAŞLIĞI ÇUBUĞU (.page-head)  (2026-07-28)
   -------------------------------------------------------------------------
   Zemini `rgba(20,28,38,.9)` diye sabit yazılmış ve `!important` ile
   kilitlenmişti — sekmeye girince ekranın üstünde temadan bağımsız lacivert
   bir şerit duruyordu. Kenarı da panel-edge'in %70'iydi, yani neredeyse yok.
   Artık kartlar/topbar/menü ile aynı dili konuşuyor: temadan türeyen ton
   aralığı, --edge kenar, üstte iç ışık çizgisi.
   ========================================================================= */
.page-head {
    background: linear-gradient(178deg,
        color-mix(in srgb, var(--panel-2) 93%, var(--gold-bright)) 0%,
        var(--panel-2) 45%,
        color-mix(in srgb, var(--panel) 90%, var(--void)) 100%) !important;
    border-bottom: 1px solid var(--edge) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 14%, transparent),
                0 8px 24px rgba(4,8,14,.3);
}

/* Geri butonu: menü butonuyla aynı aile — yuvarlak, --edge kenar, altın hover.
   Üstüne gelince SOLA kayıyor: nereye götürdüğünü söyleyen küçük bir işaret. */
.ph-back {
    background: color-mix(in srgb, var(--panel) 70%, transparent);
    border: 1px solid var(--edge);
    color: var(--ink-soft);
    font-size: var(--fs-2xl);
    transition: color .2s, border-color .2s, box-shadow .2s, transform .15s;
}
.ph-back:hover {
    color: var(--gold-bright); border-color: var(--gold);
    box-shadow: var(--glow-gold); transform: translateX(-2px);
}
.ph-back:active { transform: scale(.93); }
.ph-back:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* Başlık: büyük puntoda Inter sıkı optik hiza ister; ayrıca solundaki küçük
   turkuaz işaret kart başlıklarındaki dille aynı — "buradasın" demek. */
.ph-title {
    letter-spacing: -.015em;
    display: inline-flex; align-items: center; gap: .55rem;
}
.ph-title::before {
    content: ""; width: 7px; height: 7px; border-radius: 2px;
    background: var(--teal); box-shadow: var(--glow-teal); flex: 0 0 auto;
}