/* Paylasilan tasarim katmani: olcek, iki palet, tema dugmesi, sayfa alti SEO metni.
   Her sayfada style.css / program.css / soru-robotu.css / tercih.css / notebook.css'ten
   sonra yuklenir; degisken adlarinin hepsini birden karanlik temaya bagliyor. */

:root {
    color-scheme: light;
    --yuzey: #ffffff;
    --yuzey-2: #f6f8fb;
    --yuzey-3: #eef2f8;
    --cizgi: #e4e9f2;
    --cizgi-guclu: #d3dbe8;
    --muted: #6b7789;
    --yazi-yesil: #047857;
    --yazi-kirmizi: #991b1b;
    --yazi-sari: #b45309;
    --ton-mavi: #eff6ff;
    --ton-yesil: #d1fae5;
    --ton-kirmizi: #fee2e2;
    --ton-sari: #fffbeb;
    --ton-mor: #ede9fe;
    --golge-1: 0 1px 2px rgba(15, 23, 42, .06);
    --golge-2: 0 8px 22px rgba(15, 23, 42, .09);
}

html[data-tema="karanlik"] {
    color-scheme: dark;

    /* style.css sozlugu */
    --bg-color: #0d1117;
    --sidebar-bg: #111826;
    --text-primary: #e8edf6;
    --text-secondary: #b6c2d3;
    --accent: #5b7cfa;
    --accent-glow: rgba(91, 124, 250, .35);
    --glass-bg: #151b26;
    --glass-border: #273142;
    --purple: #a78bfa;
    --success: #34d399;
    --danger: #f87171;
    --warning: #fbbf24;
    --shadow-main: 0 4px 18px rgba(0, 0, 0, .45);

    /* program.css / soru-robotu.css / tercih.css sozlugu */
    --bg-dark: #0d1117;
    --card-bg: #151b26;
    --border: #273142;
    --primary: #5b7cfa;
    --primary-hover: #7d97ff;
    --secondary: #a78bfa;
    --text-main: #e8edf6;
    --text-muted: #9aa7ba;

    /* notebook.css sozlugu */
    --paper-color: #151b26;
    --ink-color: #e8edf6;
    --desk-color: #0d1117;
    --shadow: 0 4px 18px rgba(0, 0, 0, .45);

    
    /* kvkk / hakkimizda / iletisim / 404 / profil / yonetim sozlugu */
    --bg: #0d1117;
    --kart: #151b26;
    --panel: #151b26;
    --panel2: #1e2836;
    --yazi: #e8edf6;
    --yazi2: #b6c2d3;
    --yazi3: #8c99ad;
    --lacivert: #5b7cfa;
    --mavi: #6f8cff;
    --mor: #a78bfa;
    --yesil: #34d399;
    --sari: #fbbf24;
    --kirmizi: #f87171;

    /* ortak */
    --yuzey: #151b26;
    --yuzey-2: #1b2331;
    --yuzey-3: #222c3c;
    --cizgi: #273142;
    --cizgi-guclu: #38445a;
    --muted: #8c99ad;
    --yazi-yesil: #6ee7b7;
    --yazi-kirmizi: #fca5a5;
    --yazi-sari: #fcd34d;
    --ton-mavi: #172338;
    --ton-yesil: #12302a;
    --ton-kirmizi: #351d1d;
    --ton-sari: #332b16;
    --ton-mor: #241f3d;
    --golge-1: 0 1px 2px rgba(0, 0, 0, .45);
    --golge-2: 0 10px 26px rgba(0, 0, 0, .5);
}



body, .glass, .card, input, select, textarea, button {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* --- Tema dugmesi --- */
.tema-yuva { display: inline-flex; align-items: center; }
.tema-dugme {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; margin: 0;
    border: 1px solid var(--cizgi); border-radius: 9px;
    background: var(--yuzey); color: var(--muted);
    cursor: pointer; font-size: 15px; line-height: 1; box-shadow: var(--golge-1);
}
.tema-dugme:hover { border-color: var(--cizgi-guclu); color: var(--text-primary, #0f172a); }
.tema-dugme .ay { display: none; }
html[data-tema="karanlik"] .tema-dugme .gunes { display: none; }
html[data-tema="karanlik"] .tema-dugme .ay { display: inline; }

/* --- Sayfa altindaki SEO metni --- */
.seo-metin {
    max-width: 900px; margin: 30px auto 0; padding: 18px 20px 24px;
    border-top: 1px solid var(--cizgi);
    color: var(--muted); font-size: .84rem; line-height: 1.75;
}
.seo-metin h1, .seo-metin h2, .seo-metin h3 {
    font-size: .96rem; font-weight: 600; color: var(--muted); margin: 0 0 .5rem;
}
.seo-metin p { margin: 0 0 .6rem; color: var(--muted); }
.seo-metin b, .seo-metin strong { color: var(--muted); font-weight: 600; }

/* --- Paylasilan mobil alt menu (kenar cubugu olmayan sayfalar) --- */
.alt-menu { display: none; }
.daha-arka { display: none; position: fixed; inset: 0; z-index: 300; background: rgba(2, 6, 23, .45); align-items: flex-end; }
.daha-arka.acik { display: flex; }

@media (max-width: 768px) {
    .alt-menu {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
        background: var(--yuzey);
        border-top: 1px solid var(--cizgi);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -2px 14px rgba(2, 6, 23, .12);
    }
    .alt-menu-og {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 4px; min-width: 0; padding: 12px 2px 13px;
        background: none; border: 0; cursor: pointer;
        color: var(--muted); text-decoration: none; font: inherit;
    }
    .alt-menu-og i { font-size: 1.08rem; line-height: 1; }
    .alt-menu-og span {
        font-size: .64rem; line-height: 1.15; max-width: 100%;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .alt-menu-og.etkin { color: var(--lacivert, #1e3a8a); font-weight: 600; }
    body.alt-menu-var { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
    .daha-sayfa {
        background: var(--yuzey); width: 100%; border-radius: 18px 18px 0 0;
        padding: 10px 16px calc(88px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -8px 30px rgba(2, 6, 23, .3);
    }
    .daha-tut { width: 42px; height: 4px; border-radius: 99px; background: var(--cizgi); margin: 4px auto 14px; }
    .daha-sayfa button {
        display: flex; align-items: center; gap: 13px; width: 100%;
        background: none; border: none; border-bottom: 1px solid var(--cizgi);
        padding: 15px 4px; font: inherit; font-size: 14px;
        color: var(--text-primary, var(--yazi, #0f172a)); text-align: left; cursor: pointer;
    }
    .daha-sayfa button i { font-size: 16px; color: var(--lacivert, #1e3a8a); width: 22px; }
    .daha-sayfa button.kapat { justify-content: center; color: var(--muted); border-bottom: none; margin-top: 6px; }
}

/* Alt menu varken sabit sohbet balonu ustte kalsin */
@media (max-width: 768px) {
    body.alt-menu-var .chat-widget { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   ROZETLER
   ========================================================================== */
.badge-item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 11px 6px 10px;
    border: 1px solid var(--cizgi);
    border-radius: 14px;
    background: var(--yuzey);
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.badge-item:hover { transform: translateY(-2px); border-color: var(--cizgi-guclu); box-shadow: var(--golge-2); }
.badge-item:focus-visible { outline: 2px solid var(--lacivert, #1e3a8a); outline-offset: 2px; }

.badge-item > i {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    font-size: 1.15rem; line-height: 1;
    background: var(--yuzey-2); color: var(--muted);
    border: 1px solid var(--cizgi);
}
.badge-item > span {
    font-size: .66rem; line-height: 1.25; text-align: center;
    color: var(--muted); max-width: 100%;
}

.badge-item.unlocked > i {
    background: linear-gradient(145deg, #f5c451, #d99b1f);
    color: #4a3005; border-color: #e0ab33;
    box-shadow: 0 2px 8px rgba(217, 155, 31, .35);
}
.badge-item.unlocked > span { color: var(--text-primary, var(--yazi, #0f172a)); font-weight: 600; }
.badge-item.unlocked { border-color: rgba(217, 155, 31, .45); }

/* kilitli rozete kucuk kilit */
.badge-item:not(.unlocked)::after {
    content: "\ea0b"; /* remixicon: lock-line */
    font-family: "remixicon" !important;
    position: absolute; top: 8px; right: 9px;
    font-size: .62rem; color: var(--muted); opacity: .75;
}

/* eski hover baloncugu artik gerekmiyor */
.badge-tooltip { display: none !important; }

/* --- Rozet penceresi --- */
.rozet-arka {
    display: none; position: fixed; inset: 0; z-index: 10050;
    background: rgba(2, 6, 23, .55);
    align-items: center; justify-content: center; padding: 20px;
}
.rozet-arka.acik { display: flex; }
.rozet-kutu {
    position: relative; width: 100%; max-width: 320px;
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: 18px; padding: 26px 22px 22px; text-align: center;
    box-shadow: 0 24px 60px rgba(2, 6, 23, .35);
}
.rozet-kapat {
    position: absolute; top: 10px; right: 10px;
    width: 30px; height: 30px; border: 0; border-radius: 8px;
    background: none; color: var(--muted); cursor: pointer; font-size: 16px;
}
.rozet-kapat:hover { background: var(--yuzey-2); color: var(--text-primary, #0f172a); }
.rozet-nisan {
    width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--yuzey-2); border: 1px solid var(--cizgi);
    color: var(--muted); font-size: 1.9rem;
}
.rozet-nisan.acik {
    background: linear-gradient(145deg, #f5c451, #d99b1f);
    border-color: #e0ab33; color: #4a3005;
    box-shadow: 0 6px 20px rgba(217, 155, 31, .38);
}
.rozet-ad { font-size: 1.02rem; font-weight: 700; color: var(--text-primary, var(--yazi, #0f172a)); }
.rozet-durum {
    display: inline-block; margin: 8px 0 12px; padding: 3px 11px;
    border-radius: 99px; font-size: .7rem; font-weight: 600;
    background: var(--yuzey-2); color: var(--muted);
}
.rozet-durum.acik { background: var(--ton-yesil); color: var(--yazi-yesil); }
.rozet-kosul { font-size: .84rem; line-height: 1.6; color: var(--muted); }
/* === ortak rozet karti (ana sayfa + profil) === */
.rz-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:9px}
.rz-kart{display:flex;gap:9px;align-items:flex-start;text-align:left;padding:10px;border-radius:12px;
  border:1px solid var(--cizgi,#e2e8f0);background:var(--kart,var(--card-bg,#fff));cursor:pointer;transition:transform .12s ease,border-color .12s ease}
.rz-kart:hover{transform:translateY(-1px);border-color:var(--mavi,#3b82f6)}
.rz-kart .rz-ikon{width:32px;height:32px;flex:0 0 32px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--bg,rgba(148,163,184,.14));color:var(--yazi3,#94a3b8);font-size:16px}
.rz-kart.unlocked .rz-ikon{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff}
.rz-kart .rz-gov{flex:1;min-width:0}
.rz-kart .rz-ad{display:block;font-weight:600;font-size:12.5px;line-height:1.25}
.rz-kart .rz-not{font-size:10.5px;color:var(--yazi2,var(--text-secondary,#64748b));margin-top:2px}
.rz-kart .rz-cubuk{height:4px;border-radius:3px;background:var(--cizgi,#e2e8f0);margin-top:6px;overflow:hidden}
.rz-kart .rz-cubuk i{display:block;height:100%;background:var(--mavi,#3b82f6);border-radius:3px}
.rz-kart.unlocked .rz-cubuk i{background:#10b981}
.rz-kart:not(.unlocked) .rz-ad{color:var(--yazi2,var(--text-secondary,#64748b))}
.rz-kart .badge-tooltip{display:none}
[data-tema="karanlik"] .rz-kart .rz-ikon{background:rgba(148,163,184,.16)}

/* rozet seridi: ana sayfada tek sirada yatay kayar */
.rz-serit{display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.rz-serit .rz-kart{flex:0 0 auto;width:168px;scroll-snap-align:start}
.rz-serit::-webkit-scrollbar{height:6px}
.rz-serit::-webkit-scrollbar-thumb{background:var(--cizgi,#e2e8f0);border-radius:4px}

/* site-alt taban bosluk (tema.css: alt menulu tum sayfalar) */
@media (max-width: 900px){
  .site-alt{padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px)) !important}
}

/* === soru metni: formul, sekil ve uzun ifadeler === */
.soru-metin{white-space:normal;line-height:1.75;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.soru-metin .soru-duz{white-space:pre-wrap;display:block}
.soru-metin .soru-sekil{
  display:block;white-space:pre;overflow-x:auto;max-width:100%;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:.92em;line-height:1.45;margin:10px 0;padding:10px 12px;
  background:var(--yuzey-2,rgba(148,163,184,.10));border:1px solid var(--cizgi,#e2e8f0);
  border-radius:9px;tab-size:4}
.soru-metin .katex{font-size:1.06em}
.soru-metin .katex-display{margin:10px 0;overflow-x:auto;overflow-y:hidden;padding-bottom:2px}
.option-btn-large{white-space:normal;text-align:left;line-height:1.55;overflow-wrap:anywhere}
.option-btn-large .soru-sekil{margin:6px 0;font-size:.88em}
@media(max-width:620px){
  .soru-metin .soru-sekil{font-size:.82em;padding:8px 9px}
}

/* === paylasim karti penceresi === */
.pk-arka{position:fixed;inset:0;background:rgba(8,12,26,.72);backdrop-filter:blur(4px);z-index:10090;
  display:none;align-items:center;justify-content:center;padding:16px}
.pk-arka.acik{display:flex}
.pk-kutu{width:100%;max-width:420px;max-height:92vh;overflow-y:auto;background:var(--kart,var(--card-bg,#fff));
  color:var(--yazi,var(--text-primary,#0f172a));border-radius:18px;padding:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:12px}
.pk-bas{display:flex;align-items:center;justify-content:space-between;font-size:15px}
.pk-kapat{border:none;background:transparent;color:inherit;font-size:20px;cursor:pointer;line-height:1;padding:2px 4px}
.pk-sablonlar{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.pk-cip{flex:0 0 auto;border:1px solid var(--cizgi,#e2e8f0);background:transparent;color:inherit;
  font:inherit;font-size:12.5px;padding:6px 11px;border-radius:999px;cursor:pointer;white-space:nowrap}
.pk-cip.secili{background:var(--lacivert,#1e3a8a);border-color:var(--lacivert,#1e3a8a);color:#fff;font-weight:600}
.pk-onizleme{width:100%;overflow:hidden;border-radius:14px;background:var(--bg,#f1f5f9)}
.pk-sahne{width:540px;height:540px;transform-origin:top left}
.pk-temalar{display:flex;gap:8px;justify-content:center}
.pk-tema{width:30px;height:30px;border-radius:50%;padding:3px;border:2px solid transparent;background:transparent;cursor:pointer}
.pk-tema span{display:block;width:100%;height:100%;border-radius:50%}
.pk-tema.secili{border-color:var(--mavi,#3b82f6)}
.pk-anahtarlar{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--yazi2,#64748b)}
.pk-anahtarlar label{display:flex;align-items:center;gap:6px;cursor:pointer}
.pk-anahtarlar input:disabled+*{opacity:.5}
.pk-dugmeler{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pk-dugme{font:inherit;font-size:13px;font-weight:600;padding:11px 12px;border-radius:11px;cursor:pointer;
  border:1px solid var(--cizgi,#e2e8f0);background:transparent;color:inherit;display:flex;align-items:center;justify-content:center;gap:6px}
.pk-dugme.birincil{background:var(--lacivert,#1e3a8a);border-color:var(--lacivert,#1e3a8a);color:#fff}
.pk-dugme:hover{filter:brightness(1.06)}
.pk-link{display:flex;gap:6px;flex-wrap:wrap}
.pk-link.gizli{display:none}
.pk-link input{flex:1;min-width:150px;font:inherit;font-size:12.5px;padding:9px 10px;border-radius:10px;
  border:1px solid var(--cizgi,#e2e8f0);background:var(--bg,#f8fafc);color:inherit}
.pk-not{font-size:12px;color:var(--yazi2,#64748b);min-height:16px}
.pk-not.hata{color:#ef4444}
.pk-ac{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  padding:9px 14px;border-radius:11px;border:1px solid transparent;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff}
.pk-ac:hover{filter:brightness(1.07)}
@media(max-width:420px){.pk-dugmeler{grid-template-columns:1fr}}

/* === soru yukleme iskeleti === */
.iskelet{display:flex;flex-direction:column;gap:12px;padding:4px 2px 8px;width:100%}
.isk-ust{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;
  color:var(--text-secondary,var(--yazi2,#64748b));font-weight:500}
.isk-cubuk-kutu{height:7px;border-radius:5px;background:var(--cizgi,#e2e8f0);overflow:hidden}
.isk-cubuk{display:block;height:100%;width:0;border-radius:5px;
  background:linear-gradient(90deg,#4f46e5,#7c3aed);transition:width .25s ease}
.isk-satir,.isk-sekil,.isk-secenek{border-radius:9px;
  background:linear-gradient(90deg,var(--cizgi,#e9edf5) 25%,rgba(148,163,184,.28) 37%,var(--cizgi,#e9edf5) 63%);
  background-size:400% 100%;animation:iskAkis 1.5s ease-in-out infinite}
.isk-satir{height:15px}
.isk-sekil{height:120px;border-radius:14px}
.isk-secenekler{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.isk-secenek{height:44px}
@keyframes iskAkis{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion: reduce){.isk-satir,.isk-sekil,.isk-secenek{animation:none}}

/* === soru sekli (yapay zeka cizimi) === */
.soru-sekil-alani{margin:4px 0 14px}
.soru-cizim{display:block;max-width:360px;margin:0 auto;padding:12px;border-radius:14px;
  background:var(--yuzey-2,rgba(148,163,184,.08));border:1px solid var(--cizgi,#e2e8f0);
  color:var(--text-primary,var(--yazi,#0f172a))}
.soru-cizim svg{display:block;width:100%;height:auto;overflow:visible}

/* === hatali soru bildirimi === */
.bildir-alani{display:flex;justify-content:flex-end;margin:-4px 0 8px}
.soru-bildir{font:inherit;font-size:11.5px;font-weight:500;color:var(--yazi2,#64748b);
  background:transparent;border:1px solid var(--cizgi,#e2e8f0);border-radius:999px;
  padding:4px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.soru-bildir:hover{color:#b45309;border-color:rgba(245,158,11,.55);background:rgba(245,158,11,.10)}
.soru-bildir:disabled{opacity:.7;cursor:default}


/* ================= DUYURU / POPUP ================= */
.duyuru-arka {
    position: fixed; inset: 0; z-index: 10090;
    background: rgba(8, 12, 24, .62); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 18px; opacity: 0; transition: opacity .22s ease;
}
.duyuru-arka.acik { opacity: 1; }
.duyuru-kutu {
    position: relative; width: 100%; max-width: 420px;
    background: var(--yuzey, var(--panel, #fff)); color: var(--text-primary, var(--yazi, #111827));
    border: 1px solid var(--cizgi, var(--glass-border, rgba(0,0,0,.12)));
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
    transform: translateY(10px) scale(.98); transition: transform .22s ease;
    max-height: 88vh; overflow-y: auto;
}
.duyuru-arka.acik .duyuru-kutu { transform: none; }
.duyuru-kapat {
    position: absolute; top: 8px; right: 10px; z-index: 2;
    width: 32px; height: 32px; border-radius: 50%;
    border: none; cursor: pointer; font-size: 22px; line-height: 1;
    background: rgba(15, 23, 42, .45); color: #fff;
}
.duyuru-gorsel { background: var(--yuzey-2, var(--panel2, #f1f5f9)); }
.duyuru-gorsel img { display: block; width: 100%; height: auto; }
.duyuru-icerik { padding: 20px 22px 22px; text-align: center; }
.duyuru-icerik h3 { margin: 0 0 8px; font-size: 1.12rem; font-weight: 700; line-height: 1.3; }
.duyuru-icerik p { margin: 0 0 16px; font-size: .9rem; line-height: 1.55; color: var(--text-secondary, var(--yazi2, #64748b)); }
.duyuru-btn {
    display: block; width: 100%; padding: 12px 16px;
    border: none; border-radius: 10px; cursor: pointer;
    background: var(--accent, var(--mavi, #2746a6)); color: #fff;
    font: 600 .92rem/1.2 inherit; text-decoration: none; text-align: center;
}
.duyuru-btn:hover { filter: brightness(1.08); }
.duyuru-gec {
    display: block; width: 100%; margin-top: 8px; padding: 9px;
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary, var(--yazi2, #64748b)); font: 500 .82rem/1.2 inherit;
}

/* --- ust serit --- */
.duyuru-serit {
    position: relative; z-index: 10060;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 44px 10px 16px;
    background: var(--accent, #2746a6); color: #fff; font-size: .85rem;
}
.duyuru-serit-metin { flex: 1; min-width: 160px; }
.duyuru-serit-btn {
    background: rgba(255, 255, 255, .18); color: #fff; text-decoration: none;
    padding: 5px 12px; border-radius: 999px; font-weight: 600; font-size: .8rem;
}
.duyuru-serit-kapat {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; line-height: 1;
}
@media (max-width: 520px) {
    .duyuru-kutu { max-width: 100%; }
    .duyuru-icerik { padding: 16px 16px 18px; }
}