/* ============ Yazı tipi: Plus Jakarta Sans (yerel) ============
   Font ARTIK YEREL. Sebep: native pakette uzak Google Fonts bağlantısı yok
   (build-native.js kaldırıyor) — çevrimdışı bir WebView'da font hiç yüklenmez
   ve paylaşım kartı (app.js, `await document.fonts.ready` → canvas) sessizce
   yedek yüzle çizilirdi.

   latin + latin-ext ikisi de ZORUNLU: Türkçe'nin ğ/ş/ı/İ karakterleri
   latin-ext alt kümesindedir, yalnız latin alınırsa bu harfler yedek fonta
   düşer ve metin içinde yüz karışır.

   Dosyalar fonts/ altında (build-files.js DIRS). Ağırlıklar AYRIK yüklenir
   (400/500/600/700/800) — CLAUDE.md'nin uyardığı gibi 650 gibi ara değerler
   sentezlenir, kullanma. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plus-jakarta-sans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plus-jakarta-sans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plus-jakarta-sans-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plus-jakarta-sans-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/plus-jakarta-sans-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/plus-jakarta-sans-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/plus-jakarta-sans-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/plus-jakarta-sans-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/plus-jakarta-sans-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/plus-jakarta-sans-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* ============ Native (Capacitor) katmanı ============
   YALNIZCA uygulamada geçerli; `kk-native` sınıfını kk-native.js ekliyor.
   Dondurulmuş web derlemesi bu bloktan etkilenmez. */

/* Kaydırma çubukları. Mobil uygulamada sürekli görünen çubuk yabancı duruyor
   ve içeriğin üstüne biniyor. WebView'ın KENDİ (native) çubuğu ayrıca
   MainActivity'de setVerticalScrollBarEnabled(false) ile kapatılıyor —
   buradaki kural sayfa içindeki overflow'lu kapları hedefliyor. */
html.kk-native *::-webkit-scrollbar{width:0;height:0;display:none}
html.kk-native *{scrollbar-width:none;-ms-overflow-style:none}

/* Durum çubuğu: ŞEFFAF DEĞİL, tema rengiyle dolu bir bant.
   Gezinme çubuğu şeffaf kalır (içerik altına akar); istenen ayrım bu.
   Android 15+'ta setStatusBarColor artık işlemiyor, bu yüzden bandı
   uygulama kendi çiziyor. Sabit konumlu ve en üstte durur ki kaydırılan
   içerik altından geçerken saat/pil simgelerine karışmasın. */
html.kk-native body::before{
  content:"";position:fixed;top:0;left:0;right:0;
  height:env(safe-area-inset-top);
  background:var(--bg);
  z-index:9999;pointer-events:none;
}

/* ============ Material You tokens ============ */
:root{
  --primary:#8B5000; --on-primary:#FFFFFF; --primary-c:#FFDCBE; --on-primary-c:#2D1600;
  --secondary:#755845; --on-secondary:#FFFFFF; --secondary-c:#F4DDCB; --on-secondary-c:#2A170B;
  --tertiary:#785A0B; --on-tertiary:#FFFFFF; --tertiary-c:#FFDF9E; --on-tertiary-c:#261A00;
  --hinar:#9D4147; --hinar-c:#FFDADB; --on-hinar-c:#40000A;
  --error:#BA1A1A; --on-error:#FFFFFF; --error-c:#FFDAD6; --on-error-c:#410002;
  --surface:#FBF7F2; --surface-dim:#DED8D2; --sc-lowest:#FFFFFF; --sc-low:#F6F0EA;
  --sc:#F0EAE4; --sc-high:#EAE4DE; --sc-highest:#E4DED8;
  --on-surface:#201B16; --on-surface-v:#4F453C; --outline:#817466; --outline-v:#D0C5B9;
  --shadow:0 1px 3px rgba(45,30,15,.10),0 4px 14px rgba(45,30,15,.08);
  --shadow-lg:0 6px 24px rgba(45,30,15,.16);
  --ok:#226C3B; --ok-c:#B8F1C4;
  --ease:cubic-bezier(.2,.7,.1,1); --spring:cubic-bezier(.34,1.56,.5,1);
  /* Köşe merdiveni artık ayrı bir ölçek değil, aşağıdaki ortak ölçü
     tokenlerinin takma adıdır: eski --r-* isimleri uygulamanın her yerinde
     kullanıldığı için korunuyor, değerleri tek yerden geliyor. */
  --r-xl:var(--r-card); --r-lg:var(--r-tile); --r-md:var(--r-well); --r-sm:11px;
  /* Vurgu paleti. Mor / parlak mavi / teal kaldırıldı: dekoratif kullanılıyorlardı
     ve ekranı parçalıyorlardı. Geriye YALNIZ semantik bağı olan rose kaldı
     (favori = kalp, .challenge). Yeni bir hue eklemeden önce onun anlamını yaz. */
  --c-rose:#C43D5C;
  /* Kart yüzeyi düz dolgudur; ayrım degradeyle değil luminans + ince kenarlık +
     geniş/düşük opaklıklı gölgeyle kurulur (bkz. --surface-1 / --line / --elev-1). */
  --card-bg:var(--surface-1);
  --card-bd:var(--line);
  /* --acc: aktif hue, --acc-2: degradelerin ikinci tonu (aynı aile, hue kaymadan).
     --on-acc: dolu aksan yüzeylerinin üstündeki metin. Aksanlar açık temada koyu,
     koyu temada açık olduğu için --surface her iki temada da doğru kontrastı verir. */
  --acc:var(--primary); --acc-2:var(--tertiary); --on-acc:var(--surface);

  /* ---------- Ortak tasarım tokenleri (tema bağımsız) ----------
     Ana sayfadaki bütün kart/kutu ailesi ölçüsünü buradan okur. Bileşenin
     içine sabit radius/padding/gölge yazma; token değişince tüm aile
     birlikte hareket etmeli. Renk tokenleri tema başına AYRI tanımlıdır
     (aşağıdaki [data-theme="dark"] ve :root:not([data-theme="dark"]) blokları). */
  --r-card:20px;      /* birincil kart */
  --r-tile:18px;      /* ikili ızgara kutuları */
  --r-well:13px;      /* ikon yuvası */
  --pad-card:16px;
  --pad-tile:14px;
  --gap-grid:10px;    /* ızgara boşluğu */
  --gap-stack:10px;   /* dikey kart aralığı */
  --well:40px;        /* ikon yuvası kenarı */
  --track-h:7px;      /* TEK ilerleme dili: standart ray yüksekliği */
  --track-h-sm:6px;   /* satır içi kompakt ray (liste satırı, rozet satırı) */
  --ring-w:8;         /* TEK ilerleme dili: halka kalınlığı (SVG birimi) */
}
[data-theme="dark"]{
  /* Eski Material token ailesi KORUNUR (uygulamanın her yeri onu okur) ama
     artık kendi değerleri yoktur: hepsi aşağıdaki semantik katmana bağlanır.
     Böylece tek bir tokeni değiştirmek bütün ekranlarda aynı anda karşılık
     bulur ve iki tema tek bir sistemin iki ayarı olarak kalır. */
  --primary:var(--accent); --on-primary:var(--on-accent);
  --primary-c:var(--accent-soft); --on-primary-c:var(--accent-ink);
  --secondary:#E5C0A8; --on-secondary:#422B1B; --secondary-c:#5B4130; --on-secondary-c:#F4DDCB;
  --tertiary:var(--accent); --on-tertiary:var(--on-accent);
  --tertiary-c:var(--accent-soft); --on-tertiary-c:var(--accent-ink);
  --hinar:#FFB3B4; --hinar-c:#7F2B32; --on-hinar-c:#FFDADB;
  --error:#FFB4AB; --on-error:#690005; --error-c:#93000A; --on-error-c:#FFDAD6;
  --surface:var(--bg); --surface-dim:var(--bg);
  --sc-lowest:var(--surface-1); --sc-low:var(--surface-1);
  --sc:var(--surface-2); --sc-high:var(--surface-2); --sc-highest:var(--surface-3);
  --on-surface:var(--text-1); --on-surface-v:var(--text-2);
  --outline:var(--text-3); --outline-v:var(--line-2);
  --shadow:var(--elev-1); --shadow-lg:var(--elev-2);
  --ok:var(--ok-fg); --ok-c:#0E3A22;
  --c-rose:#FF8FA3;

  /* ---------- Koyu temanın semantik renk tokenleri ----------
     Açık temanın tersine çevrilmiş hâli DEĞİLDİR: kendi yüzey merdiveni,
     kendi kenarlık opaklığı, kendi gölge yoğunluğu var. Ölçülen kontrastlar
     (kart yüzeyi #14151A üstünde): text-1 16.1 · text-2 7.8 · text-3 5.0 ·
     accent 8.9 — hepsi WCAG AA eşiğinin üstünde. */
  --bg:#0A0B0F;
  --surface-1:#14151A;          /* kart */
  --surface-2:#1D1E25;          /* gömülü yüzey: ray, ikon yuvası */
  --surface-3:#262832;          /* gömülü merdivenin bir üst basamağı (açık/basılı) */
  --text-1:#F2EEE9;
  --text-2:#ADA7A1;
  --text-3:#8A847E;
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.14);
  --accent:#F2A33A;
  /* İkon KÜTLESİ rolü. Koyu temada aksanın kendisiyle aynı; açık temada bir
     kademe açıktır (grafik eşiği 3:1, metin eşiği değil). Token iki temada da
     TANIMLI olmalı — yalnız açık temada tanımlıyken koyu temada var() boşa
     çözülüyor ve ikon kütlesi kayboluyordu. */
  --accent-graphic:var(--accent);
  --accent-ink:#F7B65C;         /* tonlu yüzey üstündeki aksan metni */
  --accent-soft:#241A0E;        /* tonlu aksan yüzeyi (kart zemini) */
  --accent-line:rgba(242,163,58,.24);
  --on-accent:#241503;
  --ok-fg:#6FCF97;
  --data-mark:#5A5342;          /* pasif veri işareti (grafik çubuğu), 2.4:1 */
  --elev-1:0 1px 2px rgba(0,0,0,.34),0 12px 26px -22px rgba(0,0,0,.70);
  --elev-2:0 2px 6px rgba(0,0,0,.40),0 26px 52px -30px rgba(0,0,0,.76);
  /* Karakulak Icon System — tema kontrollü, renk hiyerarşisi formdan sonra gelir. */
  --ki-ink:#DDD7CF;
  --ki-muted:#9B948C;
  --ki-plane:#2C2A28;
  /* ODAK, AKSANIN AYNISI OLAMAZ. Eskiden --ki-focus = --accent (#F2A33A) idi;
     ikonun kütlesi de çoğu kapta aksan rengine boyandığı için (.spic, .action-ic,
     .ic-accent, seçili hedef çipi) odak katmanı kütleyle BİREBİR aynı renge
     düşüyor ve altındaki oyulmuş ayrıntıyı geri dolduruyordu. Ölçüm: feather'ın
     tüy sapı 802 px'ten 37 px'e iniyordu — yani aksan, vurgulaması gereken
     ayrıntıyı siliyordu. (icon-system.js:178 streak yorumu aynı olguyu tarif
     ediyor; düzeltme orada tek ikona uygulanmıştı, kök neden buradaydı.)
     Artık odak, aksan ailesinin BİR BASAMAK KOYU tonu: hem amber kütle üstünde
     hem --ki-ink kütle üstünde ayrışır. */
  --ki-focus:#B4700F;
  --ki-well:#20222A;
  /* Karakulak Objects — renk yalnızca obje glifinin içinde kalır. */
  --wa-ink:#241D18;
  --wa-divider:#5E5349;
  --wa-paper:#F2E7CE;
  --wa-well:#20222A;
  /* Malzeme paleti — 6 hue. Eskiden 4'tü (amber/terra/sage/sand) ve setin
     %81'i sand+terra'ya düşüyordu; ikisi de aynı sıcak kahve ailesinden
     olduğu için 51 ders sembolü tek bir kahverengi lekeye iniyordu
     (ölçüm: sand S=19%, sage S=20%). Kroma referans seviyesine çekildi ve
     mavi + kırmızı ders setine açıldı. Renk YALNIZCA glifin içinde kalır. */
  --wa-amber:#B86C1C;--wa-amber-hi:#F2A33A;
  --wa-terra:#A8462A;--wa-terra-hi:#E8734B;
  --wa-sage:#5C7A33;--wa-sage-hi:#8FB554;
  --wa-sand:#9C8355;--wa-sand-hi:#D3BC8E;

  /* RENK KELİMELERİ + malzeme rolü. --wa-blue ve --wa-red artık ders
     sembollerinde de kullanılıyor (soru, teknoloji, ulaşım, renkler…);
     geri kalanlar hâlâ yalnız renk sözcüklerinin glifinde. Hiçbiri
     yüzeye/kenarlığa sızmaz. */
  --wa-red:#A6322B;--wa-red-hi:#E5544A;
  --wa-blue:#2F6394;--wa-blue-hi:#6BA3D8;
  /* MALZEME rolleri — renk SOZCUKLERINDEN ayri. cblue/cred swatch'lari
     --wa-blue/--wa-red kullanir ve TEMA PAKETIYLE DEGISMEZ (uygulama renk
     kelimelerini ogretiyor). cool/brick ise ders/gorev/rozet malzemesidir. */
  --wa-cool:#2F6394;--wa-cool-hi:#6BA3D8;--wa-brick:#A6322B;--wa-brick-hi:#E5544A;
  /* -fx: GERCEK DUNYA RENGI SABIT semboller icin dokunulmamis kopya.
     Tema paketleri --wa-* uzerine yazar; bunlar YAZILMAZ. */
  --wa-amber-fx:#B86C1C;--wa-amber-hi-fx:#F2A33A;--wa-terra-fx:#A8462A;--wa-terra-hi-fx:#E8734B;--wa-sage-fx:#5C7A33;--wa-sage-hi-fx:#8FB554;--wa-sand-fx:#9C8355;--wa-sand-hi-fx:#D3BC8E;--wa-cool-fx:#2F6394;--wa-cool-hi-fx:#6BA3D8;--wa-paper-fx:#F2E7CE;--wa-ink-fx:#241D18;--wa-divider-fx:#5E5349;
  --wa-green:#2F7D4A;--wa-green-hi:#57BC7B;
  --wa-yellow:#A38224;--wa-yellow-hi:#E8C64E;
  --wa-black:#17171A;--wa-black-hi:#43434A;
  --wa-white:#9A968E;--wa-white-hi:#F4F2EE;
  --wa-grey:#5E5E64;--wa-grey-hi:#A0A0A6;
  --wa-purple:#5B3E77;--wa-purple-hi:#8E6FAF;
  --wa-pink:#A34E6B;--wa-pink-hi:#DC85A2;
  --wa-orange:#A8551A;--wa-orange-hi:#E0873A;
  --wa-brown:#5C3F2B;--wa-brown-hi:#9C7050;
  --wa-locked-base:#5F5A54;--wa-locked-face:#88817A;
}
/* ============ Vurgu (accent) yardımcı sınıfları ============
   Bir kaba .acc-* eklemek, içindeki ikon kutusu / ilerleme dolgusu /
   halka / eyebrow renklerini tek seferde o hue'ya çevirir.
   .acc-violet / .acc-blue / .acc-teal KALDIRILDI: dekoratif kullanılıyorlardı
   (istatistik kutuları, pratik kartları) ve ekranı parçalıyorlardı. Geriye
   marka amberi ile semantik bağı olan rose kaldı (favori = kalp, .challenge).
   Yeni bir hue eklemeden önce onun hangi anlamı taşıdığını yaz. */
.acc-amber{--acc:var(--accent);--acc-2:var(--accent)}
.acc-rose{--acc:var(--c-rose);--acc-2:var(--c-rose)}
/* Aksan yüzeyleri: tonlu dolgu + eşleşen ince kenarlık */
.accsurf{
  background:color-mix(in srgb,var(--acc) 12%,var(--surface-1));
  border:1px solid color-mix(in srgb,var(--acc) 26%,transparent);
  color:var(--acc);
}
.accglow{box-shadow:var(--shadow)}
/* ============ Base ============ */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* istek 1: scrollbar'ı tüm kaydırma alanlarında gizle */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;display:none}
html{height:100%;background:var(--surface);color-scheme:light}
/* PWA: aşağı çekince yenileme, kenarda lastik gibi esneme ve iç kaydırıcıdan
   sayfaya taşan zincirleme kaydırma kapalı — uygulama gibi dursun. */
html,body{overscroll-behavior:none}
html[data-theme="dark"]{color-scheme:dark}
/* İlk görünüm kararı verilene kadar ana ekranı boyama. Onboarding/auth katmanı
   DOM'a yerleşmeden önce oluşan kısa ana sayfa parlamasını engeller. */
html.boot-pending #app,
html.boot-pending #bottomNav{visibility:hidden}
body{
  margin:0;min-height:100dvh;background:var(--surface);color:var(--on-surface);
  font-family:'Plus Jakarta Sans',ui-rounded,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;
  transition:background .35s var(--ease),color .35s var(--ease);
  /* istek 1: çift dokunuşla yakınlaştırmayı engelle (kaydırma korunur) */
  touch-action:manipulation;
}
/* İç kaydırma alanları sonuna gelince hareketi arkadaki sayfaya devretmez. */
#exBody,.passage,.sheet,.ai-chats,#aiBody,.tkBody,.onb-body,#authGate,.mo-scroll,
.mo-share-scroll,.overlay,.dlg{overscroll-behavior:contain}
#app{
  max-width:520px;margin:0 auto;min-height:100dvh;background:var(--surface);
  position:relative;padding:0 18px calc(90px + env(safe-area-inset-bottom));
  transition:background .35s var(--ease);
}
@media(min-width:640px){
  #app{max-width:660px;padding:0 28px calc(96px + env(safe-area-inset-bottom))}
}
@media(min-width:1024px){
  body{padding-left:248px}
  #app{max-width:880px;padding:0 40px 56px}
}
h1{font-size:1.58rem;font-weight:800;letter-spacing:-.02em;margin:.1em 0 0}
h2{font-size:1.07rem;font-weight:700;margin:0 0 4px}
button{font:inherit;color:inherit;border:none;background:none;cursor:pointer;padding:0}
input{font:inherit;color:inherit}
::selection{background:var(--primary-c);color:var(--on-primary-c)}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:8px}
/* En küçük metin katmanı kompaktlaştırmadan MUAF: kartlar/ikonlar küçülürken
   etiketler de küçültülürse arayüz "minyatür" hissi veriyor. Bu tabana dokunma. */
.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--on-surface-v)}
.muted{color:var(--on-surface-v)}
[lang="en"]{font-weight:800}
/* ============ Screens & header ============ */
.screen{display:none;padding-top:calc(12px + env(safe-area-inset-top))}
.screen.active{display:block}
.screen.active>*{animation:rise .45s var(--ease) both}
.screen.active>*:nth-child(2){animation-delay:.04s}.screen.active>*:nth-child(3){animation-delay:.08s}
.screen.active>*:nth-child(4){animation-delay:.12s}.screen.active>*:nth-child(5){animation-delay:.16s}
.screen.active>*:nth-child(6){animation-delay:.2s}.screen.active>*:nth-child(7){animation-delay:.24s}
.screen.active>*:nth-child(8){animation-delay:.28s}
/* Ana ekran bölüm başlıklarıyla 9 öğeye çıktı; kademe buraya kadar
   uzatılmazsa son kartlar gecikmesiz açılıp sırayı bozuyor. */
.screen.active>*:nth-child(9){animation-delay:.32s}
.screen.active>*:nth-child(10){animation-delay:.36s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px}
.statchips{display:flex;gap:7px}
/* Ana sayfa istatistik hapları: tonal ikon dairesi + değer/etiket kolonu (MD3) */
/* min-height dokunma hedefi için tabanda tutulur; kompaktlık dolgudan gelir. */
.statpill{display:flex;align-items:center;gap:7px;background:var(--card-bg);border:1px solid var(--card-bd);box-shadow:var(--shadow);border-radius:999px;padding:3px 12px 3px 3px;min-height:40px;transition:transform .2s var(--spring),background .25s}
.statpill:active{transform:scale(.95)}
.statpill .spic{
  width:29px;height:29px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;color:var(--acc);
  background:color-mix(in srgb,var(--acc) 13%,var(--surface-1));
  border:1px solid color-mix(in srgb,var(--acc) 34%,transparent);
}
.statpill.streak{--acc:var(--tertiary)}
.statpill.xp{--acc:var(--primary)}
.statpill .spic .ic{width:15px;height:15px}
.statpill .spmeta{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;gap:1px}
.statpill .spmeta b{font-size:.86rem;font-weight:800;font-variant-numeric:tabular-nums}
.statpill .spmeta span{font-size:.58rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--on-surface-v)}
/* Home header: brand block (logo + wordmark) sharing one axis with the stat chips */
.top-home{flex-direction:column;align-items:stretch;gap:11px}
.home-brandrow{display:flex;justify-content:space-between;align-items:center;gap:10px}
.brandline{display:flex;align-items:center;gap:10px;min-width:0}
.brandmark{width:39px;height:39px;flex:0 0 39px;border-radius:13px;overflow:hidden;display:grid;place-items:center;background:var(--sc-high);border:1px solid var(--outline-v)}
.brandmark img{width:100%;height:100%;object-fit:cover;display:block}
.brandname{font-weight:800;font-size:1.32rem;letter-spacing:-.03em;line-height:1;color:var(--on-surface)}
.home-greet{margin:0}
.home-greet-wave{display:inline-grid;place-items:center;width:1.08em;height:1.08em;margin-left:.08em;vertical-align:-.17em}
.home-greet-wave .word-art{width:100%;height:100%}
/* Telefon ölçüleri. Eskiden bu blok yalnız koyu temaya yazılmıştı ve içinde
   kendi degradesi/gölgesi vardı — iki tema başlıkta farklı ölçüye oturuyordu.
   Artık tema bağımsız ve renk taşımıyor; renk tasarım sisteminden geliyor. */
@media(max-width:639px){
  #scr-home{padding-top:calc(16px + env(safe-area-inset-top))}
  #scr-home .top-home{gap:13px;margin-bottom:16px}
  #scr-home .brandline{gap:8px;min-width:0}
  #scr-home .brandmark{width:35px;height:35px;flex-basis:35px;border-radius:12px}
  #scr-home .brandname{font-size:1.22rem;letter-spacing:-.045em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #scr-home .statchips{gap:7px}
  #scr-home .statpill{min-height:40px;padding:3px 10px 3px 3px;gap:6px}
  #scr-home .statpill .spic{width:29px;height:29px}
  #scr-home .statpill .spic .ic{width:15px;height:15px}
  #scr-home .statpill .spmeta b{font-size:.85rem}
  #scr-home .home-greet{font-size:1.55rem;line-height:1.15;letter-spacing:-.035em}
}
/* ============ Chips ============ */
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;
  background:var(--sc-high);font-size:.81rem;font-weight:700;color:var(--on-surface);
  position:relative;overflow:hidden;transition:background .25s,transform .15s var(--spring);
  border:1px solid transparent;min-height:34px;
}
.chip:active{transform:scale(.94)}
/* Header stat badges brought into the card surface/border language (single accent) */
.chip.sel{
  background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-line);
}
.chip.outline{background:transparent;border-color:var(--outline-v)}
.chip.lock{opacity:.5}
.chiprow{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none;margin:0 -2px}
.chiprow::-webkit-scrollbar{display:none}
.chiprow .chip{flex:0 0 auto}
/* ============ SVG icons ============ */
/* SOFTFORM — kontursuz dolgu sistemi. Derinlik tek bir kontrollü ton farkından
   gelir: ana kütle tam opaklık, "sakin düzlem" aynı rengin düşük opaklıklı
   tonu. Sakin düzlem daima kütleden OYULMUŞ bir bölgedir (aynı renk üst üste
   binerse ton farkı doğmaz), bu yüzden opaklığı hiçbir seviyede 0 olamaz. */
.ic{
  --ki-plane-opacity:.32;--ki-secondary-opacity:.5;--ki-focus-opacity:1;
  width:1.15em;height:1.15em;display:inline-block;vertical-align:-.22em;
  fill:currentColor;stroke:none;flex:0 0 auto;
}
.ki-icon{
  --ki-plane-opacity:.32;
  --ki-secondary-opacity:.5;
  --ki-focus-opacity:1;
  display:inline-block;
  flex:0 0 auto;
  color:var(--ki-ink);
  fill:currentColor;
  stroke:none;
  overflow:visible;
  vertical-align:-.22em;
}
.ki-utility{
  --ki-plane-opacity:.32;
  --ki-secondary-opacity:.5;
  --ki-focus-opacity:1;
}
/* Seçili sekmede ikonun kütlesi zaten aksana döndüğü için odağa ayrıca aksan
   VERİLMEZ — verildiğinde iki katman aynı renge düşüp ayrıntı kayboluyordu
   (bkz. :root --ki-focus notu). Odak global koyu amber tonunda kalır; seçili
   durumun sinyalini kütle rengi ve dolu gösterge taşır. */
.navitem[aria-current="page"] .ki-icon,
.navitem[aria-current="page"] .ic{
  --ki-focus-opacity:1;
}
/* Dolu AI düğmesinde turuncu üstüne turuncu binmesin; yalnız bu durumda aynı
   hue'nun koyu tonu ayrıntı rengi olarak kalır. */
#navAiBtn.is-open .ki-icon,
#navAiBtn.is-open .ic{
  --ki-focus:color-mix(in srgb,var(--accent) 52%,#2A1400);
  --ki-focus-opacity:1;
}
.ki-lesson{
  --ki-plane-opacity:.42;
  --ki-secondary-opacity:.64;
  --ki-focus-opacity:.92;
}
.ki-achievement{
  --ki-plane-opacity:.52;
  --ki-secondary-opacity:.76;
  --ki-focus-opacity:1;
}
/* ============ Karakulak Objects ============ */
.wa-icon{
  --wa-main:var(--wa-sand-hi);
  --wa-base:var(--wa-sand);
  --wa-detail:var(--wa-terra-hi);
  --wa-detail-base:var(--wa-terra);
  --wa-focus:var(--wa-amber-hi);
  --wa-focus-opacity:.92;
  --wa-ink-opacity:.82;
  display:inline-block;flex:0 0 auto;fill:currentColor;stroke:none;overflow:visible;
  vertical-align:-.22em;
}
/* Gercek dunya rengi sabit semboller: tema paketinin --wa-* yazmasini
   ELEMAN DUZEYINDE geri alir. Ozel ozellik cozumlemesi kullanim aninda
   elemanin kendi degerine bakar, bu yuzden .wa-p-* kurallarinin sirasi
   onemli degil — var(--wa-amber-hi) burada -fx degerine cozulur. */
.wa-icon.wa-fixed{--wa-amber:var(--wa-amber-fx);--wa-amber-hi:var(--wa-amber-hi-fx);--wa-terra:var(--wa-terra-fx);--wa-terra-hi:var(--wa-terra-hi-fx);--wa-sage:var(--wa-sage-fx);--wa-sage-hi:var(--wa-sage-hi-fx);--wa-sand:var(--wa-sand-fx);--wa-sand-hi:var(--wa-sand-hi-fx);--wa-cool:var(--wa-cool-fx);--wa-cool-hi:var(--wa-cool-hi-fx);--wa-paper:var(--wa-paper-fx);--wa-ink:var(--wa-ink-fx);--wa-divider:var(--wa-divider-fx)}
/* ODAK TONU BİRİNCİL MALZEMEDEN TÜRER — global tek ton KULLANILAMAZ.
   Taban `--wa-focus` amber-hi'dir; amber gövdeli bir sembolde odak, gövdeyle
   BİREBİR aynı renge düşüyordu (ölçüldü: 21 sembolde odak/altındaki düzlem
   kontrastı tam 1.00 — `xp`, `star`, `bolt`, `key`, `award`, `insight`,
   `gift`, `bus`, `cow` … odak ayrıntısı hiç görünmüyor). Aynı sorun cool ve
   brick rolleri devreye girince onlarda da oluşurdu.
   Amber gövdede odak `--wa-paper`a çevrilir. İki alternatif ölçüldü ve ELENDİ:
   (a) global "bir basamak koyu amber" — amber gövdede 1.71 veriyor ama brick
   gövdede 1.00–1.21'e düşüyor, hatayı taşıyor; (b) rolün kendi derin tonu
   (`--wa-amber`) — bu sefer odak, altındaki LIFT gölge düzlemiyle (`--wa-base`,
   aynı token) çakışıyor ve 21 sembolün 10'u yine 1.00'de kalıyor.
   `paper` doğru cevap çünkü tanımı gereği siluet üretmez, DAİMA bir kütlenin
   içinde durur — odak düzleminin işi tam olarak budur. Projenin kupa ve
   rozet yıldızında elle seçtiği çözüm de buydu ("yıldız önce bir paper
   düzleme oturur"). Ölçüldü, 5 paket × 2 tema: paper/amber-hi min 1.58,
   paper/amber min 3.03 — aile tabanı 1.35'in üstünde.
   cool ve brick gövdede odak amber-hi KALIR: farklı hue olduğu için çakışma
   yok, üstelik "ikon başına tek amber vurgu" kuralı korunur.
   sand/terra/sage gövdede de amber odak korunur (ölçülen 1.28–1.29 kasıtlı
   ve setin dilidir). */
.wa-p-amber{--wa-main:var(--wa-amber-hi);--wa-base:var(--wa-amber);--wa-focus:var(--wa-paper)}
.wa-p-terra{--wa-main:var(--wa-terra-hi);--wa-base:var(--wa-terra)}
.wa-p-sage{--wa-main:var(--wa-sage-hi);--wa-base:var(--wa-sage)}
.wa-p-sand{--wa-main:var(--wa-sand-hi);--wa-base:var(--wa-sand)}
/* cool = soğuk/soyut/sistem · brick = uyarı/silme (semantik, pakette dönmez).
   Bu dört kural 2026-08-03'teki "4 → 6 hue" turunda YAZILMAMIŞTI: render()
   sınıfı basıyordu ama CSS karşılığı olmadığı için 33 sembol `.wa-icon`
   varsayılanına (sand) düşüyordu — mavi ve kırmızı ekranda hiç görünmedi. */
.wa-p-cool{--wa-main:var(--wa-cool-hi);--wa-base:var(--wa-cool)}
/* brick gövdede odak da paper'a alınır: amber vurgu kırmızı üstünde koyu
   temada 1.13'e düşüyordu (setin tabanı 1.28). paper/brick-hi min 2.97. */
.wa-p-brick{--wa-main:var(--wa-brick-hi);--wa-base:var(--wa-brick);--wa-focus:var(--wa-paper)}
.wa-s-amber{--wa-detail:var(--wa-amber-hi);--wa-detail-base:var(--wa-amber);--wa-focus:var(--wa-paper)}
.wa-s-terra{--wa-detail:var(--wa-terra-hi);--wa-detail-base:var(--wa-terra)}
.wa-s-sage{--wa-detail:var(--wa-sage-hi);--wa-detail-base:var(--wa-sage)}
.wa-s-sand{--wa-detail:var(--wa-sand-hi);--wa-detail-base:var(--wa-sand)}
.wa-s-cool{--wa-detail:var(--wa-cool-hi);--wa-detail-base:var(--wa-cool)}
.wa-s-brick{--wa-detail:var(--wa-brick-hi);--wa-detail-base:var(--wa-brick);--wa-focus:var(--wa-paper)}
/* Odağın altına KENDİ paper düzlemini çizen semboller (icon-objects.js →
   PLATE_FOCUS): onlarda paper odak, altlığın kendisiyle çakışırdı. Amber
   vurguda kalırlar. (0,2,0) olduğu için rol kuralını ezer; kilitli durumun
   `.lnode.lock .wa-icon` (0,3,0) kuralı bunu da ezmeye devam eder. */
.wa-icon.wa-plate{--wa-focus:var(--wa-amber-hi)}
.wa-p-red{--wa-main:var(--wa-red-hi);--wa-base:var(--wa-red)}
.wa-s-red{--wa-detail:var(--wa-red-hi);--wa-detail-base:var(--wa-red)}
.wa-p-blue{--wa-main:var(--wa-blue-hi);--wa-base:var(--wa-blue)}
.wa-s-blue{--wa-detail:var(--wa-blue-hi);--wa-detail-base:var(--wa-blue)}
.wa-p-green{--wa-main:var(--wa-green-hi);--wa-base:var(--wa-green)}
.wa-s-green{--wa-detail:var(--wa-green-hi);--wa-detail-base:var(--wa-green)}
.wa-p-yellow{--wa-main:var(--wa-yellow-hi);--wa-base:var(--wa-yellow)}
.wa-s-yellow{--wa-detail:var(--wa-yellow-hi);--wa-detail-base:var(--wa-yellow)}
.wa-p-black{--wa-main:var(--wa-black-hi);--wa-base:var(--wa-black)}
.wa-s-black{--wa-detail:var(--wa-black-hi);--wa-detail-base:var(--wa-black)}
.wa-p-white{--wa-main:var(--wa-white-hi);--wa-base:var(--wa-white)}
.wa-s-white{--wa-detail:var(--wa-white-hi);--wa-detail-base:var(--wa-white)}
.wa-p-grey{--wa-main:var(--wa-grey-hi);--wa-base:var(--wa-grey)}
.wa-s-grey{--wa-detail:var(--wa-grey-hi);--wa-detail-base:var(--wa-grey)}
.wa-p-purple{--wa-main:var(--wa-purple-hi);--wa-base:var(--wa-purple)}
.wa-s-purple{--wa-detail:var(--wa-purple-hi);--wa-detail-base:var(--wa-purple)}
.wa-p-pink{--wa-main:var(--wa-pink-hi);--wa-base:var(--wa-pink)}
.wa-s-pink{--wa-detail:var(--wa-pink-hi);--wa-detail-base:var(--wa-pink)}
.wa-p-orange{--wa-main:var(--wa-orange-hi);--wa-base:var(--wa-orange)}
.wa-s-orange{--wa-detail:var(--wa-orange-hi);--wa-detail-base:var(--wa-orange)}
.wa-p-brown{--wa-main:var(--wa-brown-hi);--wa-base:var(--wa-brown)}
.wa-s-brown{--wa-detail:var(--wa-brown-hi);--wa-detail-base:var(--wa-brown)}
.wa-category{--wa-focus-opacity:.86;--wa-ink-opacity:.74}
.wa-lesson{--wa-focus-opacity:.94;--wa-ink-opacity:.82}
.wa-achievement{--wa-focus-opacity:1;--wa-ink-opacity:.9}

/* ============ DERS İÇİ OBJELER — ZEMİN KURALI ============
   Ders ekranındaki mikrofon / ses çal / başarılı / hata / ipucu simgeleri
   de bu ailededir (ders kartlarıyla aynı görünsünler diye). Obje kendi
   rengini taşır ve `currentColor`'ı YOK SAYAR — bu yüzden tokenleri tek
   renge yeniden bağlayan bir "on-accent" rolü denendi ve ELENDİ: kontrastı
   kurtarıyor ama iki tonlu hacmi ve renk kimliğini siliyor, simge düz bir
   siluete iniyordu. Kural bunun tersi: MALZEME KORUNUR, ZEMİN uyarlanır.

   Ölçüldü (açık tema): agree/--ok-c 2.31 · refuse/--error-c 3.51 ·
   insight/--sc-high 2.58 — hepsi 1.35 tabanının çok üstünde, o yüzden
   geri bildirim paneli, ipucu ve küçük ikon butonları OLDUĞU GİBİ kalır.
   Tek istisna .audiobig'dir; yüzeyi kendi kuralında tonala çevrildi. */
/* İkonu aksan rengine boyayan yardımcı. Eski adı `.icon-line` idi ve yanıltıcıydı:
   svgIcon() DAİMA dolu aileyi (#ki-*) basar, line aile (#kl-*) bu yoldan hiç
   kullanılmaz. Ad artık ne yaptığını söylüyor. */
.ic-accent{color:var(--accent)}
.iconbtn .ic,.sicon .ic{width:20px;height:20px}
.bigemoji .ic{width:27px;height:27px}
/* Lesson card artwork */
.lesson-artbox{
  font-size:0;
  overflow:visible;
}

/* Ders, kategori ve rozetler renkli obje ailesidir; utility ikonları yukarıdaki
   QUIETFORM yolunda kalır. İki aile yalnızca 32×32 artboard'u paylaşır. */
.lesson-art,
.word-art,
.badge-svg,
.badge-mini{
  fill:none;
  stroke:none;
  filter:none;
  overflow:visible;
}
/* Ders/görev kataloğundaki obje simgesi kelime simgesinden bir kademe küçüktür
   (40 → 36, %10): katalog satırları yan yana dizildiğinde 40px başlıkla aynı
   optik ağırlığa çıkıp listeyi kalabalık gösteriyordu. .word-art paylaşımlıdır
   (kelime kartı, sözlük çipi, okuma başlığı) — onun ölçüsü değişmez. */
.word-art{width:40px;height:40px}
.lesson-art{width:36px;height:36px}
.badge.lock .wa-icon,
.achnext.lock .wa-icon,
.demoji.badge-dialog-lock .wa-icon{
  --wa-main:var(--wa-locked-face);
  --wa-base:var(--wa-locked-base);
  --wa-detail:var(--wa-locked-face);
  --wa-detail-base:var(--wa-locked-base);
  --wa-focus:var(--wa-locked-face);
}
.inline-word-art{
  display:inline-grid;
  width:1.28em;
  height:1.28em;
  margin-inline:.08em;
  vertical-align:-.28em;
}
.inline-word-art .word-art{width:100%;height:100%}
.flash .fem .word-art{width:76px;height:76px}
.chip .word-art{width:19px;height:19px;flex:0 0 19px}
/* Metinle aynı satırda duran simgeler (ders başlığı) — punto ile ölçeklenir */
.exq .word-art{width:1.3em;height:1.3em;display:inline-block;vertical-align:-.26em}
.wordrow .em .word-art{width:31px;height:31px}
.bigemoji .word-art{width:42px;height:42px}
.exsub .word-art{width:52px;height:52px;margin:0 auto}
/* Flat dilde gölge yok: koyu temada simgelere bindirilen drop-shadow kaldırıldı. */
.audiobig .ic{width:38px;height:38px}
.favstar{color:var(--on-surface-v);transition:color .2s var(--ease),transform .2s var(--spring)}
.favstar.is-favorite,#shFav.is-favorite{color:var(--error)}
.favstar.is-favorite .ki-icon,#shFav.is-favorite .ki-icon{
  --ki-ink:var(--error);--ki-focus:var(--error)
}
.favstar.is-favorite{transform:scale(1.06)}
#shFav{color:var(--on-surface-v)}
.favstar .ic{width:19px;height:19px;display:block}
.bem .ic{width:29px;height:29px}
.demoji .ic{width:56px;height:56px}
/* Diyalogdaki obje simgesi (seviye atlama) arayüz ikonundan bir tık büyük:
   iki düzlemli malzeme aynı kutuda daha küçük okunuyor. */
.demoji .demoji-art{width:84px;height:84px;display:block;margin:0 auto}
/* ============ Cards ============ */
/* Tek kart ailesi: düz yüzey, tek ince kenarlık, tek yumuşak gölge.
   Ölçüler tokenden gelir — bileşene sabit radius/padding/gölge yazma. */
.card{
  background:var(--card-bg);border:1px solid var(--card-bd);
  border-radius:var(--r-card);padding:var(--pad-card);margin-bottom:var(--gap-stack);
  box-shadow:var(--shadow);
  position:relative;overflow:hidden;transition:background .35s var(--ease),border-color .35s var(--ease);
}
.card.tonal{background:var(--surface-2);border-color:transparent;box-shadow:none}
/* Kart başlığı: solda h2, sağda tek kontrol (bağlantı, ay, sayı, aç/kapat).
   Yerleşim BİLEŞENDE durur, ekran id'sinde değil — kural bir zamanlar yalnız
   #scr-home altındaydı ve aynı satır profilde kuruluyordu. h2 ölçüsü de burada
   sabitlenir: paylaşılan h2 (1.07rem) kart başlıklarında kardeşlerinden bir
   punto büyük kalıyordu. */
.cardhead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cardhead h2{margin:0;font-size:1rem;letter-spacing:-.01em}
.card.click{cursor:pointer;transition:transform .2s var(--spring),background .35s,border-color .35s}
.card.click:active{transform:scale(.975)}
/* Aksanlı kart: düz tonlu yüzey + eşleşen kenarlık. Degrade ve dış parıltı yok —
   vurgu renkten gelir, ışıktan değil. */
.card.accent,.hero,.challenge{
  background:color-mix(in srgb,var(--acc) 12%,var(--surface-1));
  border-color:color-mix(in srgb,var(--acc) 26%,transparent);
  box-shadow:var(--shadow);
  color:var(--on-surface);
}
.card.accent .eyebrow,.hero .eyebrow,.challenge .eyebrow{color:var(--acc)}
.hero{--acc:var(--accent)}
.challenge{--acc:var(--c-rose)}
/* Hero alt satırı: yüzde + "Devam et →" aksan renginde */
.hero-foot{display:flex;justify-content:space-between;margin-top:7px;font-size:.76rem;font-weight:600;color:var(--acc)}
.cardrow{display:flex;align-items:center;gap:12px}
/* İkon yuvaları tek dil: gömülü nötr yüzey, kenarlıksız, gölgesiz. Hue taşımaz —
   rengi ikonun kendi malzemesi verir. */
.bigemoji{
  font-size:1.6rem;width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;
  background:var(--surface-2);border-radius:var(--r-well);border:0;
}
.bigemoji.lesson-artbox{background:var(--wa-well)}
/* Hero "continue" play button — düz dolu aksan */
.playcta{
  width:44px;height:44px;flex:0 0 44px;border-radius:999px;display:grid;place-items:center;
  background:var(--acc);box-shadow:none;
}
.playcta .ic{width:20px;height:20px;color:var(--on-acc);transform:translateX(1px)}
.card.hero.click:active .playcta{transform:scale(.92);transition:transform .15s var(--spring)}
/* Next-achievement motivator */
.achnext{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:0;border-radius:var(--r-well);padding:11px}
.achnext-ic{
  width:var(--well);height:var(--well);flex:0 0 var(--well);border-radius:var(--r-well);
  display:grid;place-items:center;color:var(--acc);
  background:var(--surface-1);border:0;
}
.achnext-ic .ic{width:23px;height:23px}
.achnext-n{font-weight:800;font-size:.76rem;white-space:nowrap;color:var(--on-surface-v)}
/* "Tümü" rozet popup'ı: achnext satırının kilitli / kazanıldı varyantları */
.achsec{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.achnext.lock{opacity:.72;filter:none}
.achnext.done .achnext-ic{background:var(--acc);color:var(--on-acc);border-color:transparent}
/* ============ Home bento grid (mobile-first, max 2 columns) ============ */
.quick-actions-row,.stat-grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.quick-actions-row>.card,.stat-grid-2col>.card{margin-bottom:0;padding:14px}
/* Satır-kart (hızlı eylem). Yerleşim BİLEŞENİN KENDİSİNDE durur, ekrana
   göre değil: eskiden yatay dizilim, sola hizalı metin ve sağdaki ok yalnız
   `#scr-home` öneki altında tanımlıydı, bu yüzden aynı kart profilde dikey
   diziliyor (ok metnin ALTINA düşüyor) ve içeriğe göre daralıp 339px yerine
   219px kalıyordu. Aynı bileşen her ekranda aynı görünmeli. */
.card.action{
  display:flex;flex-direction:row;align-items:center;justify-content:flex-start;
  gap:12px;min-height:110px;text-align:left;width:100%;position:relative;
  padding-right:52px;
}
/* İkon yuvası: nötr gömülü yüzey (bkz. .bigemoji — aynı dil) */
.action-ic{
  width:var(--well);height:var(--well);flex:0 0 var(--well);border-radius:var(--r-well);
  display:grid;place-items:center;position:relative;
  background:var(--surface-2);border:0;box-shadow:none;
}
.action-ic .ic{width:30px;height:30px;color:var(--acc);overflow:visible}
.action-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;
  align-items:flex-start;text-align:left}
/* Ok DAİMA sağda, dikey ortalı. Akışta bıraksaydık metin sarınca alta düşerdi. */
.action-go{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:999px;display:grid;place-items:center;
  color:var(--accent);background:var(--surface-2);border:1px solid var(--card-bd);
  box-shadow:none;pointer-events:none;
}
.action-go .ic{width:13px;height:13px;display:block;color:currentColor}
.action-title{font-weight:700;font-size:.94rem;line-height:1.15}
.action-sub{font-size:.78rem;line-height:1.2;color:var(--text-2);font-weight:500}
.action-sub.muted{color:var(--text-2)}
.action-badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--acc);color:var(--on-acc);font-size:.68rem;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 2px var(--surface-1)}
/* Paired stat cards (progress ring + level number) */
.stat-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;min-height:110px}
.stat-card .eyebrow{color:var(--text-3)}
.ring.ring-sm{width:62px;height:62px;flex:0 0 62px}
.stat-label{font-weight:800;font-size:.88rem;line-height:1.15}
.stat-sub{font-size:.7rem;line-height:1.2}
.stat-big b{font-size:2.2rem;line-height:1;letter-spacing:-.02em;font-weight:800}
.stat-track{width:100%;height:6px;margin-top:2px}
/* ============ ANA SAYFA GÖRSEL SİSTEMİ ============
   Tek bir bileşen ailesi. Bütün kartlar aynı radius / kenarlık / gölge /
   dolgu tokenlerini okur, TEK bir ilerleme dili ve TEK bir aksan (amber)
   kullanır. Bileşenin içine renk yazılmaz — her değer semantik tokenden
   gelir ve tokenler tema başına AYRI tanımlıdır (bkz. dosya başındaki
   [data-theme="dark"] ve :root:not([data-theme="dark"]) blokları).

   Kapsam #scr-home'dur: id özgüllüğü hem paylaşılan .card kurallarını hem
   de açık tema katmanını ezer, diğer ekranlar etkilenmez. Bu yüzden burada
   tema başına ayrı kural yazmak GEREKMEZ; iki tema da aynı yapıyı kendi
   token değerleriyle boyar. */

/* Sayfa zemini iki temada da tek düz yüzey; dekoratif radyal degradeler yok. */
body:has(#scr-home.active),
#app:has(#scr-home.active){background:var(--bg)}

/* --- Başlık --- */
#scr-home .top-home{margin-bottom:15px}
#scr-home .brandname{color:var(--text-1);font-weight:700}
#scr-home .home-greet{font-size:1.46rem;font-weight:700;letter-spacing:-.02em;color:var(--text-1)}
/* Durum çipleri kart değil: gölgesiz, ince kenarlıklı hafif yüzey. */
#scr-home .statpill{
  background:var(--surface-1);border:1px solid var(--line);box-shadow:none;
  padding:3px 11px 3px 3px;
}
#scr-home .statpill .spic{background:var(--surface-2);border:0;box-shadow:none}
#scr-home .statpill .spic .ic{color:var(--accent)}
#scr-home .statpill .spmeta b{color:var(--text-1);font-weight:700}
#scr-home .statpill .spmeta span{color:var(--text-3);font-weight:600}

/* --- Ortak kart ailesi --- */
#scr-home .card{
  background:var(--surface-1);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:var(--pad-card);
  margin-bottom:var(--gap-stack);
  box-shadow:var(--elev-1);
}
#scr-home h2{font-size:1rem;font-weight:700;letter-spacing:-.01em;color:var(--text-1);margin:0}
#scr-home .eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.08em;color:var(--text-3)}
/* Kart başlığı + sağdaki kontrol artık EKRAN BAĞIMSIZ bir bileşen
   (bkz. .cardhead, "Cards" bölümü) — .card.action ile aynı gerekçe: aynı
   satır ana sayfada, profilde ve mağazada aynı görünmeli. */
#scr-home .achhead{margin-bottom:12px}
#scr-home .btn.text{
  color:var(--accent);font-weight:600;font-size:.82rem;
  padding:0 2px;min-height:32px;
}

/* --- 1. Öğrenmeye devam et: ekrandaki TEK vurgulu yüzey --- */
#scr-home .hero{
  width:100%;text-align:left;
  background:var(--accent-soft);
  border-color:var(--accent-line);
  box-shadow:var(--elev-1);
  color:var(--text-1);
}
#scr-home .hero-txt{flex:1;min-width:0}
#scr-home .hero .eyebrow{color:var(--accent-ink)}
#scr-home .hero h2{font-size:1.06rem}
#scr-home .hero .cardrow{gap:12px;margin-top:10px}
#scr-home .hero .bigemoji{
  width:46px;height:46px;flex:0 0 46px;border-radius:var(--r-well);
  background:var(--surface-1);border:0;box-shadow:none;
}
#scr-home .hero-sub{font-size:.85rem;font-weight:500;color:var(--text-2);margin-top:1px}
#scr-home .hero-track{margin-top:14px}
#scr-home .hero-foot{margin-top:9px;font-size:.76rem;font-weight:600;color:var(--accent-ink)}
#scr-home .playcta{
  width:44px;height:44px;flex:0 0 44px;
  background:var(--accent);box-shadow:none;
}
#scr-home .playcta .ic{width:20px;height:20px;color:var(--on-accent)}

/* --- 2/3. İkili ızgaralar: dört kutu da aynı aile --- */
#scr-home .quick-actions-row,
#scr-home .stat-grid-2col{gap:var(--gap-grid);margin-bottom:var(--gap-stack)}
/* Masaüstünde iki hızlı eylem, 1040px içerik sütununun tamamına yayıldığında
   öncü ikonlar birbirinden kopuyordu. Çift kendi kompakt ölçüsünde ortalanır;
   dar ekranda min() sayesinde yine kullanılabilir genişliğin tamamını alır. */
/* Geniş ekranda ana sayfanın TAMAMI tek sütun genişliğinde durur.
   Eskiden yalnız .quick-actions-row 820px'e sabitlenmişti; kardeş kartlar
   (misyonlar, haftalık grafik) 936px kalıyordu. İki farklı genişlik üst
   üste gelince eylem kartları içeriye kaçmış gibi duruyor, satır-kartın
   metniyle oku arasında tarif edilemeyen bir boşluk açılıyordu.
   Ölçüldü (1280px): ızgara 820 · misyon kartı 936 · #app 1032. */
@media(min-width:1024px){
  /* Sütun KABIN KENDİSİNE verilir, çocuklara değil.
     Çocukları tek tek ortalamak (max-width + margin:auto) denendi ve
     ELENDİ: `margin` kısayolu yazan daha özgül kurallar auto'yu eziyordu
     — bölüm etiketi kuralı (1,1,0) düz çocuk seçicisini (1,0,0) yener —
     hero'da da aynısı oluyordu. Ölçüm: çocukların hepsi 820px genişlikteydi
     ama sol kenarları 578 / 580 / 640 diye üçe ayrılmıştı — ekranda
     "kayma" olarak görünen buydu. Kap ortalanınca çocuklar kendi
     margin'leriyle oynasa bile aynı sütunda kalır. */
  #scr-home{max-width:820px;margin-left:auto;margin-right:auto}
}
#scr-home .quick-actions-row>.card,
#scr-home .stat-grid-2col>.card{
  border-radius:var(--r-tile);padding:var(--pad-tile);margin-bottom:0;
}
/* Bu blok eskiden yatay yerleşimi #scr-home altında tarif ediyordu; artık
   .card.action bileşeninde (yukarıda). Burada yalnız ızgara hücresine özgü
   sıkıştırma kaldı — profildeki tam genişlik kartlar bundan etkilenmez. */
@media(max-width:420px){
  /* Ok, 2 SÜTUNLU ızgarada gizlenir. Ölçüldü (375px): kart 165px, ok için
     ayrılan 38px dolguyla metne yalnız 73px kalıyor ve "+20 bonus XP" üç
     satıra kırılıyordu — okun maliyeti kartın dörtte biri. Kartın tamamı
     zaten tıklanabilir; bu ölçekte chevron bilgi değil dekorasyon.
     Profildeki TAM GENİŞLİK satır-kartlarda ok yerinde kalır (orada yer
     bol ve satır bir listede duruyor, dokunulabilirliği o işaret veriyor). */
  #scr-home .quick-actions-row>.card.action{padding:8px 10px 8px 8px;gap:9px}
  #scr-home .quick-actions-row>.card.action .action-go{display:none}
  #scr-home .card.action .action-ic{width:36px;height:36px;flex-basis:36px}
  #scr-home .card.action .action-ic .ic{width:27px;height:27px}
  #scr-home .card.action .action-txt{max-width:none}
  #scr-home .action-go{right:8px;width:24px;height:24px}
  #scr-home .action-go .ic{width:11px;height:11px}
}
/* İkon yuvası: kenarlıksız, gölgesiz, tek nötr gömülü yüzey. Hue taşımaz —
   rengi ikonun kullanım seviyesine göre belirlenen katmanları verir. */
#scr-home .action-ic,
#scr-home .achnext-ic{
  width:var(--well);height:var(--well);flex:0 0 var(--well);
  border-radius:var(--r-well);background:var(--surface-2);
  border:0;box-shadow:none;
}
/* Bu kabın ZEMİNİ aksan değil, nötr bir yuvadır (--surface-2); yalnız İKONUN
   kütlesi amberdir. Aksanı burada koyulaştırmak hataydı: aksan bölgesi çoğu
   ikonda OYUKTUR (quiz'in seçenek satırları, repeat'in ok ucu), yani arkasında
   amber değil açık yuva görünür — koyu kahve işaret beyazın üstüne düşünce
   siyah leke gibi okunuyordu. Varsayılan amber aksan hem kütlenin üstünde
   ölçülü bir ton adımı, hem oyukta doğru renk veriyor; sadece kütle bir kademe
   açılır, çünkü o metin değil GRAFİKTİR (3:1 eşiği, 4.5 değil). */
#scr-home .action-ic .ic{width:30px;height:30px;color:var(--accent)}
/* Sabit #C4680B artık --accent-graphic tokeninden geliyor. Değer AYNI kaldı;
   ayrılmasının sebebi tema paketleri: paket aksanı değiştirdiğinde bu ikon
   kütlesi de birlikte dönmeli, yoksa Okyanus temasında ana sayfanın eylem
   ikonları amber kalıp ekranı ikiye bölerdi. */
:root:not([data-theme="dark"]) #scr-home .action-ic .ic,
:root:not([data-theme="dark"]) .action-ic .ic,
:root:not([data-theme="dark"]) .achnext-ic .ic{color:var(--accent-graphic)}
#scr-home .action-title{font-size:.93rem;font-weight:700;letter-spacing:-.01em;color:var(--text-1)}
#scr-home .action-sub,
#scr-home .action-sub.muted{font-size:.78rem;font-weight:500;color:var(--text-2)}
/* Tek semantik istisna: "tamamlandı" durumu. Marka aksanı değil, başarı tonu. */
#scr-home .action-sub.is-ok{color:var(--ok-fg);font-weight:600}
#scr-home .action-badge{
  background:var(--accent);color:var(--on-accent);font-weight:700;
  box-shadow:0 0 0 2px var(--surface-1);
}
#scr-home .stat-card{min-height:110px;gap:8px}
#scr-home .stat-main{
  width:100%;min-width:0;display:flex;align-items:center;justify-content:center;gap:12px;
}
#scr-home .stat-copy{
  width:auto;display:flex;flex-direction:column;align-items:center;
  gap:3px;text-align:center;min-width:0;
}
#scr-home .stat-copy .eyebrow{white-space:nowrap}
#scr-home .stat-card .eyebrow{color:var(--text-3)}
#scr-home .stat-hint{font-size:.72rem;line-height:1.2;font-weight:500;color:var(--text-2)}
#scr-home .stat-big b{font-size:2rem;font-weight:700;color:var(--text-1)}
#scr-home .stat-label{font-size:.86rem;font-weight:600;color:var(--text-1)}
#scr-home .ring.ring-sm{width:62px;height:62px;flex:0 0 62px}
#scr-home .ring.ring-sm svg{width:100%;height:100%}
#scr-home .ring .mid{color:var(--text-1);font-variant-numeric:tabular-nums}
#scr-home .level-stat-card .stat-track{width:min(84%,210px);margin-left:auto;margin-right:auto}
@media(max-width:420px){
  #scr-home .stat-grid-2col>.stat-card{padding:8px}
  #scr-home .stat-main{gap:6px}
  #scr-home .ring.ring-sm{width:48px;height:48px;flex-basis:48px}
  #scr-home .goal-stat-card .ring .mid b{font-size:.84rem;line-height:1}
  #scr-home .goal-stat-card .ring .mid .muted{font-size:.5rem;line-height:1}
  #scr-home .level-stat-card .stat-track{width:82%}
}
#scr-home .ring .mid b{font-size:1.06rem;font-weight:700}
#scr-home .ring .mid .muted{color:var(--text-3);font-weight:600}
/* Hedef/kazanılan XP basamak sayısı arttıkça halka içi tipografi kademeli
   küçülür. En uzun iki değer ölçülür; böylece hem 0/1000 hem 12500/1000
   güvenli biçimde halkanın içinde kalır. */
#scr-home .goal-stat-card .ring .mid[data-digits="3"] b{font-size:.98rem}
#scr-home .goal-stat-card .ring .mid[data-digits="4"] b{font-size:.86rem}
#scr-home .goal-stat-card .ring .mid[data-digits="5"] b{font-size:.74rem}
#scr-home .goal-stat-card .ring .mid[data-digits="6"] b{font-size:.64rem}
@media(max-width:420px){
  #scr-home .goal-stat-card .ring .mid[data-digits="3"] b{font-size:.78rem}
  #scr-home .goal-stat-card .ring .mid[data-digits="4"] b{font-size:.68rem}
  #scr-home .goal-stat-card .ring .mid[data-digits="5"] b{font-size:.59rem}
  #scr-home .goal-stat-card .ring .mid[data-digits="6"] b{font-size:.52rem}
}

/* --- TEK İLERLEME DİLİ ---
   Ray = gömülü nötr yüzey · dolgu = düz aksan · halka = aynı aksan, aynı
   kalınlık oranı, aynı yuvarlak uç. Degrade, parıltı ve ikinci hue yok:
   yüzde bilgisi ekranın her yerinde aynı görsel kodla okunur. */
#scr-home .track,
#scr-home .stat-track{height:var(--track-h);background:var(--surface-2);border-radius:99px}
#scr-home .fill{background:var(--accent);box-shadow:none;border-radius:99px}
#scr-home .hero .track{background:color-mix(in srgb,var(--accent) 22%,var(--surface-1))}
#scr-home .ring .bg{stroke:var(--surface-2);stroke-width:var(--ring-w)}
#scr-home .ring .fg{stroke:var(--accent);stroke-width:var(--ring-w);filter:none}

/* --- 4. Bu hafta --- */
#scr-home .bars{height:92px;gap:6px;margin-top:14px}
#scr-home .bar i{max-width:26px;border-radius:7px;background:var(--data-mark)}
#scr-home .bar.today i{background:var(--accent)}
#scr-home .bar b{font-size:.68rem;font-weight:600;color:var(--text-3)}

/* --- 5. Başarılar: iç içe kart yok, kartın içinde düz satır --- */
#scr-home .achnext{
  background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;gap:12px;
}
#scr-home .achnext-txt{flex:1;min-width:0}
#scr-home .achnext-t{font-weight:700;font-size:.92rem;color:var(--text-1)}
#scr-home .achnext-d{font-size:.79rem;font-weight:500;color:var(--text-2)}
#scr-home .achnext-n{font-size:.76rem;font-weight:600;color:var(--text-3)}
#scr-home .achnext .track{height:var(--track-h-sm);margin-top:8px}
#scr-home .achrow{margin-top:14px;padding-bottom:2px}
#scr-home .achrow .chip{
  background:var(--surface-2);border:1px solid transparent;color:var(--text-2);
  font-weight:600;box-shadow:none;
}
/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;
  border-radius:999px;padding:12px 22px;font-size:.95rem;position:relative;overflow:hidden;
  transition:transform .15s var(--spring),background .25s,opacity .25s,box-shadow .25s;
  min-height:46px;
}
.btn:active{transform:scale(.96)}
/* Dolu / tonlu / metin: üç durum, üçü de düz dolgu. Degrade ve renkli parıltı
   yok — buton hiyerarşisi doygunluktan gelir, ışıktan değil. */
.btn.filled{
  background:var(--acc);
  color:var(--on-acc);
  box-shadow:none;
}
.btn.tonal{
  background:color-mix(in srgb,var(--acc) 12%,var(--surface-1));
  border:1px solid color-mix(in srgb,var(--acc) 26%,transparent);color:var(--acc);
}
.btn.gold{background:var(--accent);color:var(--on-accent);box-shadow:none}
.btn.text{background:transparent;color:var(--primary);padding:9px 14px}
.btn.outline{background:transparent;border:1.5px solid var(--outline-v);color:var(--on-surface);box-shadow:none}
.btn.outline.accent{border-color:color-mix(in srgb,var(--primary) 55%,transparent);color:var(--primary)}
.btn.wide{width:100%}
/* Secondary/tertiary action pair: two equal columns under the primary CTA */
.actrow{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.actrow .btn{width:100%;padding-left:12px;padding-right:12px;line-height:1.25}
.btn.sm{padding:8px 15px;min-height:40px;font-size:.85rem}
.btn:disabled{opacity:.38;pointer-events:none;box-shadow:none}
/* Practice: three equal vertical cards (icon on top, single title below) */
.practice-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:14px}
.practice-cards>.pcard{margin-bottom:0}
/* istek 7: justify-content:center başlık uzunluğuna göre ikonu aşağı kaydırıyordu
   (tek satırlık "Serbest pratik" ikonu diğerlerinden alçakta kalıyordu). flex-start
   ile üç ikon da aynı hizada (üstte) sabitlenir. */
.pcard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;min-width:0;min-height:110px;padding:14px 7px}
.pcard-ic{
  width:44px;height:44px;flex:0 0 44px;border-radius:14px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--acc) 13%,var(--surface-1));
  border:1px solid color-mix(in srgb,var(--acc) 32%,transparent);
  box-shadow:none;
}
.pcard-ic .ic{width:24px;height:24px;color:var(--acc)}
.pcard-title{font-weight:800;font-size:.8rem;line-height:1.2;color:var(--on-surface)}
.iconbtn{
  width:44px;height:44px;border-radius:999px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--sc-high);position:relative;overflow:hidden;font-size:1.15rem;
  transition:transform .15s var(--spring),background .25s;
}
.iconbtn:active{transform:scale(.9)}
.iconbtn.primary{
  background:color-mix(in srgb,var(--acc) 13%,var(--surface-1));
  border:1px solid color-mix(in srgb,var(--acc) 32%,transparent);color:var(--acc);
}
/* ============ Progress — TEK GÖRSEL DİL ============
   Ray = gömülü nötr yüzey · dolgu = düz aksan · halka = aynı aksan, aynı
   kalınlık oranı, aynı yuvarlak uç. Degrade, parıltı ve ikinci hue yok:
   yüzde bilgisi uygulamanın her yerinde aynı kodla okunur. Yeni bir yüzde
   göstergesi eklerken bu üçlünün dışına çıkma. */
.track{height:var(--track-h);border-radius:99px;background:var(--surface-2);overflow:hidden}
.fill{
  height:100%;border-radius:99px;transition:width .5s var(--ease),background .35s var(--ease);
  background:var(--acc);
  box-shadow:none;
}
.hero .track,.challenge .track{background:color-mix(in srgb,var(--acc) 22%,var(--surface-1))}
/* Goal ring */
.ring{position:relative;width:74px;height:74px;flex:0 0 74px}
.ring svg{transform:rotate(-90deg)}
.ring .bg{stroke:var(--surface-2);stroke-width:var(--ring-w)}
.ring .fg{stroke:var(--acc);stroke-width:var(--ring-w);stroke-linecap:round;transition:stroke-dashoffset .9s var(--ease);filter:none}
.ring .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:.58rem;font-weight:700;line-height:1.1;overflow:hidden}
.ring .mid b{font-size:1.05rem;display:block}
.ring .mid .muted{white-space:nowrap}
/* ============ Bottom navigation ============ */
#bottomNav{
  /* Mobil ve tablet kabuğunda gezinme, ekranın alt kenarına bağlı gerçek bir
     uygulama çubuğudur. Safe-area yalnız iç boşluğu büyütür; çubuğu yukarı itmez. */
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  display:flex;justify-content:space-around;align-items:center;width:100%;max-width:none;margin:0;
  background:color-mix(in srgb,var(--sc) 90%,transparent);backdrop-filter:blur(20.7px);-webkit-backdrop-filter:blur(20.7px);
  min-height:calc(64px + env(safe-area-inset-bottom));
  padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  border:1px solid color-mix(in srgb,var(--outline-v) 55%,transparent);border-width:1px 0 0;border-radius:0;
  box-shadow:0 -8px 24px -20px color-mix(in srgb,var(--on-surface) 42%,transparent);
  transition:background .35s var(--ease);
}
@media(min-width:1024px){
  #bottomNav{
    top:0;bottom:0;left:0;right:auto;width:248px;max-width:none;margin:0;
    flex-direction:column;justify-content:flex-start;align-items:stretch;gap:4px;
    border-radius:0;border:none;border-right:1px solid color-mix(in srgb,var(--outline-v) 55%,transparent);
    box-shadow:none;padding:22px 12px 16px;
  }
  #bottomNav .navitem{flex-direction:row;justify-content:flex-start;gap:13px;max-width:none;font-size:.9rem;min-height:48px;padding:0 10px;border-radius:16px;transition:background .25s}
  #bottomNav .navitem[aria-current="page"]{background:color-mix(in srgb,var(--primary) 16%,transparent)}
  #bottomNav .navitem[aria-current="page"] .pill{background:transparent;border:none}
  #bottomNav .navitem .pill{width:32px;height:32px}
  #bottomNav #navAiBtn{
    flex:0 0 56px;align-self:center;width:56px;max-width:56px;height:56px;min-height:56px;
    top:0;margin:8px 0;padding:0;border-radius:18px;justify-content:center;
  }
  #bottomNav #navAiBtn .pill{width:100%;height:100%}
}
.navitem{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:46px;font-size:.66rem;font-weight:700;color:var(--on-surface-v);flex:1;max-width:88px}
.navitem .pill{
  width:47px;height:27px;border-radius:999px;display:grid;place-items:center;
  transition:background .3s var(--ease),transform .3s var(--spring);
}
.navitem svg{width:21px;height:21px;fill:currentColor;transition:transform .3s var(--spring)}
.navitem[aria-current="page"]{color:var(--primary)}
.navitem[aria-current="page"] .pill{
  background:color-mix(in srgb,var(--accent) 13%,var(--surface-1));
  border:1px solid color-mix(in srgb,var(--primary) 30%,transparent);
}
.navitem[aria-current="page"] svg{transform:scale(1.08)}
.navitem .dot{position:absolute;top:-6px;right:0;min-width:16px;height:16px;border-radius:99px;background:var(--error);color:var(--on-error);font-size:.62rem;font-weight:800;display:grid;place-items:center;padding:0 4px;box-shadow:0 0 0 2px var(--surface)}
/* Merkez FAB: AI sohbetini bir sekme değil, alt çubuğun ana eylemi olarak gösterir. */
#navAiBtn{
  --acc:var(--primary);--acc-2:var(--tertiary);
  position:relative;top:0;isolation:isolate;flex:0 0 56px;max-width:56px;width:56px;height:56px;min-height:56px;
  margin:0 3px;border-radius:18px;color:var(--on-acc);
  background:var(--acc);
  border:1px solid color-mix(in srgb,var(--acc) 44%,var(--surface));
  box-shadow:0 0 0 4px var(--surface),0 11px 22px -14px color-mix(in srgb,var(--acc) 62%,transparent),var(--shadow);
  transition:transform .2s var(--spring),box-shadow .25s var(--ease),filter .25s var(--ease);
}
#navAiBtn:hover{transform:translateY(-2px);filter:saturate(1.06)}
#navAiBtn:active{transform:scale(.92)}
#navAiBtn:focus-visible{outline:3px solid color-mix(in srgb,var(--acc) 55%,var(--surface));outline-offset:7px}
#navAiBtn .pill{
  position:relative;width:100%;height:100%;border:0!important;background:transparent!important;
  color:inherit;display:grid;place-items:center;
}
#navAiBtn .ai-fab-svg{position:absolute;width:24px;height:24px;transition:opacity .18s var(--ease),transform .3s var(--spring)}
#navAiBtn .ai-fab-close{opacity:0;transform:rotate(-70deg) scale(.55)}
#navAiBtn.is-open .ai-fab-mark{opacity:0;transform:rotate(70deg) scale(.55)}
#navAiBtn.is-open .ai-fab-close{opacity:1;transform:none}
#navAiBtn.is-open{box-shadow:0 0 0 4px var(--surface),0 9px 20px -14px color-mix(in srgb,var(--acc) 56%,transparent),var(--shadow)}
@media(max-width:1023px){
  /* Telefonda AI ayrı bir tam ekran akıştır; ana gezinme yalnız panel
     kapatıldığında geri gelir. Güvenli alt boşluğu AI dock'u yönetir. */
  body.ai-open #bottomNav{display:none}
  body.ai-open #aiChat{padding-bottom:0}
  [data-theme="dark"] #bottomNav{
    background:color-mix(in srgb,var(--surface-1) 88%,transparent);
    border-top-color:rgba(255,255,255,.10);
    box-shadow:0 -10px 26px -22px rgba(0,0,0,.76),inset 0 1px 0 rgba(255,255,255,.035);
  }
  [data-theme="dark"] .navitem{gap:1px;font-size:.66rem;font-weight:700;color:#9E9CA0}
  [data-theme="dark"] .navitem .pill{width:47px;height:27px}
  [data-theme="dark"] .navitem svg{width:21px;height:21px}
  [data-theme="dark"] .navitem[aria-current="page"]{color:#FFB54A}
  [data-theme="dark"] .navitem[aria-current="page"] .pill{
    color:#FFE2B0;
    background:var(--accent-soft);
    border-color:rgba(255,183,75,.20);
    box-shadow:inset 0 1px 0 rgba(255,222,166,.08);
  }
  [data-theme="dark"] #navAiBtn{
    color:var(--on-acc);background:var(--acc);
    border-color:color-mix(in srgb,var(--acc) 34%,#fff);
    box-shadow:0 0 0 4px #111216,0 11px 22px -14px color-mix(in srgb,var(--acc) 64%,transparent),var(--shadow);
  }
  [data-theme="dark"] #navAiBtn.is-open{box-shadow:0 0 0 4px #111216,0 9px 20px -14px color-mix(in srgb,var(--acc) 58%,transparent),var(--shadow)}
}
/* ============ Lists & tiles ============ */
.tilegrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.tile{background:var(--card-bg);border:1px solid var(--card-bd);box-shadow:var(--shadow);border-radius:var(--r-tile);padding:var(--pad-tile);transition:background .35s}
/* Kutu etiketi aksan değil bölüm etiketidir: aynı roldeki altı etiket altı ayrı
   hue kullanınca ekran parçalanıyordu. Hue'yu ikon taşır, etiket nötr kalır. */
.tile .eyebrow{color:var(--text-3)}
.tile b{font-size:1.3rem;font-weight:700;letter-spacing:-.02em;display:block;margin-top:2px;color:var(--text-1)}
.tile .eyebrow{display:flex;gap:6px;align-items:center}
.wordrow{
  display:flex;align-items:center;gap:11px;padding:10px 7px;border-radius:var(--r-md);
  cursor:pointer;transition:background .2s;width:100%;text-align:left;
}
.wordrow:active{background:var(--sc-high)}
.wordrow .em{font-size:1.35rem;width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;background:var(--sc-high);border:1px solid var(--card-bd);border-radius:13px}
.wordrow .wr-main{flex:1;min-width:0}
.wordrow .wr-ku{font-weight:800;font-size:.96rem}
.wordrow .wr-en{font-size:.81rem;color:var(--on-surface-v);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stagepips{display:flex;gap:3px}
.stagepips i{width:6px;height:6px;border-radius:99px;background:color-mix(in srgb,var(--on-surface) 15%,transparent)}
.stagepips i.on{background:var(--primary)}
.favstar{font-size:1.1rem;padding:8px;border-radius:99px}
/* Dictionary sticky header (search + filter chips) */
.dicthead{position:sticky;top:0;z-index:5;background:var(--surface);padding-top:8px;margin-top:-8px;transition:background .35s var(--ease)}
/* Search */
.search{
  display:flex;align-items:center;gap:10px;background:var(--sc-high);border:1px solid var(--card-bd);border-radius:999px;
  padding:4px 8px 4px 18px;margin-bottom:12px;transition:box-shadow .25s,border-color .25s;
}
.search:focus-within{border-color:color-mix(in srgb,var(--acc) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
.search input{flex:1;border:none;background:none;outline:none;min-height:44px;font-size:1rem}
/* Segmented */
.seg{display:flex;background:var(--sc-high);border:1px solid var(--card-bd);border-radius:999px;padding:3px;margin-bottom:13px}
.seg button{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;padding:9px;border-radius:999px;font-weight:700;font-size:.86rem;background:transparent;color:var(--on-surface-v);-webkit-text-fill-color:currentColor;text-shadow:none;transition:background .25s,color .25s;position:relative;overflow:hidden}
.seg button.sel{
  background:var(--accent-soft);color:var(--accent-ink);
  -webkit-text-fill-color:currentColor;box-shadow:inset 0 0 0 1px var(--accent-line);
}
/* İlerleme başlığının sağındaki dar görünüm değiştirici */
.seg.seg-mini{padding:3px;margin:0;align-self:flex-end;flex:0 0 auto}
.seg.seg-mini button{flex:0 0 auto;min-height:34px;padding:6px 12px;font-size:.76rem}
/* Öğren bölümleri başlığın altında tek, tam genişlikte birincil gezinme satırıdır. */
#scr-learn>.top{min-width:0;margin-bottom:12px}
#scr-learn>.top>div:first-child{min-width:0}
.section-tabs{
  width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  padding:4px;margin-bottom:14px;
}
.section-tabs button{
  width:100%;min-width:0;gap:6px;padding:8px 6px;white-space:nowrap;font-size:.78rem;
}
.section-tabs .section-tab-ic{width:18px;height:18px;flex:0 0 18px;color:currentColor}
.learn-tab-enter{animation:learnTabEnter .3s var(--ease) both}
@keyframes learnTabEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.learn-tab-enter{animation:none}}
.progress-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
#scr-stats>.top{margin-bottom:12px}
@media(max-width:380px){
  .learn-tabs button{gap:4px;padding-left:3px;padding-right:3px;font-size:.7rem}
  .learn-tabs .section-tab-ic{width:16px;height:16px;flex-basis:16px}
}
#learnReview,#learnReview>*{min-width:0;max-width:100%}
/* ============ Lig (Sıralama) ============ */
.league-hero{display:flex;align-items:center;gap:13px}
.lbadge{
  width:var(--lbadge-size,72px);height:var(--lbadge-size,72px);
  display:inline-grid;place-items:center;position:relative;flex:0 0 auto;
  border-radius:18px;background:var(--ki-well);color:var(--ki-ink);
}
.lbadge-icon{width:56%;height:56%}
/* Lig basamakları: aynı madalya, farklı malzeme. Tonlar renk kelimeleriyle
   aynı havuzdan gelir, yeni hue açılmaz. */
.lbadge.lg-bronz  .lbadge-icon{--wa-main:var(--wa-brown-hi); --wa-base:var(--wa-brown)}
.lbadge.lg-gumus  .lbadge-icon{--wa-main:var(--wa-grey-hi);  --wa-base:var(--wa-grey)}
.lbadge.lg-altin  .lbadge-icon{--wa-main:var(--wa-yellow-hi);--wa-base:var(--wa-yellow)}
.lbadge.lg-platin .lbadge-icon{--wa-main:var(--wa-white-hi); --wa-base:var(--wa-white)}
.lbadge.lg-elmas  .lbadge-icon{--wa-main:var(--wa-blue-hi);  --wa-base:var(--wa-blue)}
.lbadge.lg-usta   .lbadge-icon{--wa-main:var(--wa-purple-hi);--wa-base:var(--wa-purple)}
.lbadge b{
  position:absolute;right:8%;bottom:7%;min-width:18px;padding:2px 4px;
  border-radius:7px;background:var(--surface-1);color:var(--ki-muted);
  font-size:.58rem;line-height:1.15;text-align:center;
}
.league-hero .lbadge{animation:badgepop .55s var(--spring) both}
@keyframes badgepop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.league-hero h2{font-size:1.22rem;margin:2px 0 3px;letter-spacing:-.01em}
.league-nextrow{display:flex;justify-content:space-between;gap:10px;margin-top:7px;font-size:.75rem;font-weight:700;color:var(--on-surface-v)}
.lrow{display:flex;align-items:center;gap:11px;padding:9px 7px;border-radius:var(--r-md);animation:rise .45s var(--ease) both}
.lrow:nth-child(2){animation-delay:.05s}.lrow:nth-child(3){animation-delay:.1s}
.lrow:nth-child(4){animation-delay:.15s}.lrow:nth-child(5){animation-delay:.2s}
.lrow.me{
  background:color-mix(in srgb,var(--acc) 13%,var(--surface-1));
  border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);
}
.lrow .lrank{width:28px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums;flex:0 0 28px}
.lrow .lava{width:36px;height:36px;flex:0 0 36px;border-radius:11px;background:var(--sc-high);border:1px solid var(--card-bd);display:grid;place-items:center;font-size:1.15rem}
.lrow .lava .league-avatar-svg{width:27px;height:27px;display:block}
.lrow.me .lava{background:color-mix(in srgb,var(--acc) 18%,transparent);border-color:color-mix(in srgb,var(--acc) 30%,transparent)}
.lrow .lname{flex:1;min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .lxp{font-weight:800;font-size:.88rem;font-variant-numeric:tabular-nums}
.lblink{font:inherit;font-size:inherit;font-weight:800;color:var(--primary);text-decoration:underline;text-underline-offset:2px;padding:0}
/* ============ Akıllı Ders kartı ============
   Listenin en üstündeki tek büyük kart. Ünite kartlarından AYRIŞIR ama
   dilin dışına çıkmaz: ayrım yeni bir hue'dan ya da degrade/parıltıdan
   değil, YÜZEY DEĞİŞİMİNDEN gelir — ünite kartları düz `--surface-1`,
   bu kart `.card.accent`/`.hero` ile aynı tonlu aksan yüzeyi. Böylece
   "aynı ailenin vurgulu üyesi" okunur.
   İlerleme yine TEK dildedir (ray `--surface-2` yerine tonlu aksan ray,
   dolgu düz `--acc`) — .hero/.challenge ile birebir aynı kural. */
.card.smart{
  --acc:var(--accent);
  display:block;width:100%;text-align:left;
  background:color-mix(in srgb,var(--acc) 12%,var(--surface-1));
  border:1px solid color-mix(in srgb,var(--acc) 26%,transparent);
  color:var(--on-surface);
  box-shadow:var(--elev-2);
  margin-bottom:16px;
}
.card.smart .eyebrow{color:var(--acc)}
.card.smart .track{background:color-mix(in srgb,var(--acc) 22%,var(--surface-1))}
/* İkon yuvası: tonlu yüzeyin üstünde AÇIK levha (bkz. .achnext-ic — aynı
   desen). Dolu aksan yuva kullanılmaz: obje ikonları kendi malzemesini
   taşır ve dolu aksan üstünde kütle/zemin kontrastı düşüyor. */
.card.smart .smart-ic{
  width:52px;height:52px;flex:0 0 52px;border-radius:var(--r-well);
  display:grid;place-items:center;background:var(--surface-1);
}
.card.smart .smart-ic .ic{width:32px;height:32px;display:block}
.smart-head{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.smart-title{font-weight:700;font-size:1.02rem;line-height:1.2;letter-spacing:-.01em}
.smart-next{font-size:.79rem;line-height:1.3;color:var(--text-2);font-weight:500}
.smart-next b{font-weight:700;color:var(--on-surface)}
/* Ünite içi konum: "3/6". Sayı olduğu için tabular — liste kaydırılırken
   basamak genişliği oynamasın. */
/* Dolgu %20'den %12'ye indirildi: aksan metni, aksanla tonlanmış kartın (%12)
   üstünde ikinci kez tonlanmış bir çipin (%20) üstünde duruyordu — yani metin
   ~%29 aksan tonunun üstündeydi. Ölçüldü: 10 paket/tema kombinasyonunun
   6'sında AA altında, en kötü 3.48 (default/berry/mono açık). Dolguyu
   incelmek İKİ temada da işe yarar (açıkta zemin açılır, koyuda koyulaşır);
   açık temada ayrıca aşağıdaki merkezi koyulaştırma kuralına dahil edildi. */
.smart-step{
  margin-left:5px;padding:1px 6px;border-radius:99px;
  background:color-mix(in srgb,var(--acc) 12%,transparent);
  color:var(--acc);font-weight:700;font-size:.71rem;font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
/* Alt satır: kart boş görünmesin diye iki somut rakam. ÇİP/ROZET DEĞİL —
   .hero-foot deseninin aynısı (aksan renginde ince, kutusuz satır). Denendi
   ve elendi: yuvarlak çipler ilerleme çubuğuyla birlikte kartı üç ayrı
   bileşenli bir panoya çeviriyordu. */
.smart-foot{font-variant-numeric:tabular-nums}
.card.smart.click:active .playcta{transform:scale(.92);transition:transform .15s var(--spring)}
/* Oynatma düğmesi DOLU aksan kalır: kartın birincil eylemi.
   .playcta'nın taban kuralı açık temada TONAL'e çevriliyor (satır ~3036) ama
   ikonun rengi `.playcta .ic` ile --on-acc'te (neredeyse beyaz) kalıyor —
   ölçüldü: %12 tonlu daire üstünde beyaz üçgen silik okunuyor. #scr-home
   aynı sorunu kendi önekiyle çözüyor; burada da aynısı yapılır ve açık tema
   katmanı KENDİ önekiyle ezilir (düz seçici sırayla değil ÖZGÜLLÜKLE kaybeder). */
.card.smart .playcta{background:var(--accent);border:0;box-shadow:none}
.card.smart .playcta .ic{color:var(--on-accent)}
/* Dar ekranda (2 satıra kırılan başlık) oynatma düğmesi kütlesi azalır. */
@media(max-width:380px){
  .card.smart .smart-ic{width:46px;height:46px;flex:0 0 46px}
  .card.smart .smart-ic .ic{width:28px;height:28px}
}

/* ============ Learn path ============ */
.unit{margin-bottom:12px}
/* Progress: thin bar + inline percentage at its right end */
.progressrow{display:flex;align-items:center;gap:9px;margin-top:11px}
.progressrow .track{flex:1;height:var(--track-h-sm)}
.pct{font-size:.69rem;font-weight:800;color:var(--on-surface-v);min-width:32px;text-align:right;font-variant-numeric:tabular-nums;display:flex;justify-content:flex-end;align-items:center}
.pct .ic{width:13px;height:13px;color:var(--primary);display:block}
/* Top-right expand/collapse toggle: lesson list ↔ close */
.navtoggle{
  width:44px;height:44px;flex:0 0 44px;border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--card-bd);
  box-shadow:var(--shadow);
  position:relative;overflow:hidden;transition:transform .15s var(--spring),background .25s;
}
.navtoggle:active{transform:scale(.9)}
.navtoggle .ntic{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .22s,transform .3s var(--spring)}
.navtoggle .ic{width:19px;height:19px;color:var(--primary);display:block}
.navtoggle .ntplay{transform:translateX(1px)}
.navtoggle .ntx{opacity:0;transform:rotate(-45deg) scale(.6)}
.card.unit.open .navtoggle{background:var(--sc-highest);border-color:var(--card-bd)}
.card.unit.open .navtoggle .ic{color:var(--on-surface-v)}
.card.unit.open .navtoggle .ntplay{opacity:0;transform:rotate(45deg) scale(.6)}
.card.unit.open .navtoggle .ntx{opacity:1;transform:none}
/* Collapsible icon row (revealed inside the card) */
.lessonicons{
  display:flex;align-items:center;gap:10px;min-width:0;
  max-height:0;opacity:0;margin:0;padding:0;overflow:hidden;pointer-events:none;
  scrollbar-width:none;transition:max-height .35s var(--ease),opacity .25s,margin .3s var(--ease);
}
.lessonicons::-webkit-scrollbar{display:none}
/* 1. Başlangıç (En Sol): Sadece sağda karartma */
.card.unit.open .lessonicons {
  max-height:76px; opacity:1; margin:11px -6px 0; padding:6px;
  pointer-events:auto; overflow-x:auto;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 32px), transparent 100%);
  transition: mask-image 0.2s, -webkit-mask-image 0.2s;
}

/* 2. Ortadayken: Hem sol hem sağda karartma */
.card.unit.open .lessonicons.scrolled {
  -webkit-mask-image: linear-gradient(90deg, transparent 0px, #000 16px, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0px, #000 16px, #000 calc(100% - 32px), transparent 100%);
}

/* 3. Sona Ulaşıldığında: Sadece solda karartma (Sağ taraf net) */
.card.unit.open .lessonicons.scroll-end {
  -webkit-mask-image: linear-gradient(90deg, transparent 0px, #000 16px, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0px, #000 16px, #000 100%);
}

/* Kaydırma gerekmediğinde maskeyi tamamen kaldıran sınıf */
.card.unit.open .lessonicons.no-mask {
  -webkit-mask-image: none;
  mask-image: none;
}

.lnode{
  width:44px;height:44px;flex:0 0 44px;border-radius:999px;display:grid;place-items:center;
  background:var(--sc-highest);color:var(--on-surface-v);position:relative;
  visibility:hidden;opacity:0;transform:translateX(-10px) scale(.55);pointer-events:none;
  transition:opacity .25s var(--ease),transform .4s var(--spring),background .25s,visibility 0s .3s;
}
/* 19px'de kart + nokta + çubuk ayrıntıları birbirine giriyordu; düğüm 44px
   olduğu için ikon yarısına çıkarıldı. */
.lnode .ic{width:23px;height:23px;display:block}
.card.unit.open .lnode{
  visibility:visible;opacity:1;transform:none;pointer-events:auto;
  transition-delay:calc(var(--i)*35ms);
}
.card.unit.open .lnode:active{transform:scale(.9);transition-delay:0s}
.lnode.now{
  background:color-mix(in srgb,var(--acc) 13%,var(--surface-1));
  color:var(--acc);box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 40%,transparent);
}
/* First startable lesson in the card — glows to invite a tap once expanded.
   Yüzey DOLU aksandan tonala çevrildi (2026-08-03): içindeki simge artık obje
   ailesinden ve kendi rengini taşıyor, dolu amber üstünde okunmuyordu. Davet
   hissini zaten halka + nabız animasyonu taşıyor, dolgu değil. */
.card.unit.open .lnode.glow{
  background:color-mix(in srgb,var(--acc) 16%,var(--surface-1));
  color:var(--acc);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--acc) 45%,transparent);
  animation:lnodeGlow 1.7s var(--ease) infinite;
}
@keyframes lnodeGlow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 28%,transparent)}55%{box-shadow:0 0 0 5px color-mix(in srgb,var(--primary) 0%,transparent)}}
.lnode.done{color:var(--primary)}
.lnode.lock,.lessonnav.open .lnode.lock{opacity:.45}
/* Kilitli düğümdeki obje simgeleri opaklıkla değil TOKEN YENİDEN BAĞLAMAYLA
   söner (`.badge.lock` ile aynı desen). Opaklık düşürmek bu projede kural
   dışı: emphasis ton değiştirerek verilir. */
.lnode.lock .wa-icon{
  --wa-main:var(--wa-locked-face);--wa-base:var(--wa-locked-base);
  --wa-detail:var(--wa-locked-face);--wa-detail-base:var(--wa-locked-base);
  --wa-focus:var(--wa-locked-face);
}
.lnode .bdg{
  position:absolute;top:-3px;right:-3px;width:17px;height:17px;border-radius:99px;
  background:var(--primary);color:var(--on-primary);display:grid;place-items:center;
  box-shadow:0 0 0 2px var(--sc-low);
}
.lnode .bdg .ic{width:9px;height:9px}
/* Softform ikon kendi --ki-ink rengini kullandığı için yalnız `color:white`
   yetmez. Açık temadaki koyu rozet üstünde tamamlandı tiki beyaz kalır. */
:root:not([data-theme="dark"]) .lnode .bdg .ic{
  color:#FFFFFF;--ki-ink:#FFFFFF;--ki-focus:#FFFFFF;
}
.lnode:focus-visible,.navtoggle:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* ============ Lesson overlay ============ */
.overlay{
  position:fixed;inset:0;z-index:60;background:var(--surface);display:none;flex-direction:column;
  max-width:560px;margin:0 auto;box-shadow:var(--shadow-lg);
}
.overlay.open{display:flex;animation:overlayIn .35s var(--ease)}
@keyframes overlayIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.lTop{display:flex;align-items:center;gap:11px;padding:calc(12px + env(safe-area-inset-top)) 18px 8px}
.lTop .track{flex:1;height:var(--track-h)}
.lTop .track .fill{background:var(--acc)}
.lchip{font-size:.76rem;font-weight:800;color:var(--tertiary)}
#exBody{flex:1;overflow-y:auto;padding:6px 18px 16px;display:flex;flex-direction:column}
.exwrap{animation:exIn .4s var(--ease) both;display:flex;flex-direction:column;flex:1;min-height:100%}
@keyframes exIn{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
/* Soru başlığı, telaffuz düğmesini SATIR İÇİNDE taşır. Düz blok akışta 44px'lik
   yuvarlak buton kendi satırına düşüp metnin altında sola yapışık duruyordu;
   flex satırı onu metnin yanına, dikeyde ortalı biçimde oturtur. Başlıkta
   kullanıldığı için buton bir kademe küçüktür — dokunma hedefi 40px korunur. */
.exq{font-size:1.18rem;font-weight:800;letter-spacing:-.01em;margin:8px 0 4px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.exq .iconbtn{width:40px;height:40px;min-height:40px;flex:0 0 40px}
.exq .iconbtn .ic{width:19px;height:19px}
.exsub{color:var(--on-surface-v);font-size:.88rem;margin-bottom:11px}
/* Akıllı derste araya serpilen tekrar yuvasının işareti. Egzersizin kendi
   etiket satırının (.eyebrow) başına girer — ayrı bir satır açmaz, çünkü
   soru başlığı zaten dar. Tonlu aksan yüzeyi, projenin "seçili/etkin durum"
   dilidir; emphasis tonla verilir, opaklıkla değil. Ölçü mikro etiket
   katmanındadır ve .eyebrow'un letter-spacing'ini devralır. */
.rev-tag{
  display:inline-flex;align-items:center;gap:4px;vertical-align:2px;
  margin-right:7px;padding:2px 7px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-ink);
}
.rev-tag .ic{width:11px;height:11px;flex:0 0 11px}
.lBottom{
  display:flex;gap:11px;align-items:center;padding:12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid color-mix(in srgb,var(--outline-v) 60%,transparent);
}
.lBottom .btn.filled{flex:1}
/* Options */
.opts{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.opt{
  text-align:left;padding:13px 16px;border-radius:var(--r-md);background:var(--card-bg);
  border:2px solid var(--outline-v);font-weight:600;font-size:.97rem;position:relative;overflow:hidden;
  transition:border-color .2s,background .2s,transform .15s var(--spring);
}
.opt:active{transform:scale(.97)}
.opt.sel{
  border-color:var(--accent-line);
  background:var(--accent-soft);
  color:var(--accent-ink);
}
.opt.right{border-color:var(--ok);background:var(--ok-c);color:var(--on-primary-c);animation:pop .4s var(--spring)}
.opt.wrong{border-color:var(--error);background:var(--error-c);color:var(--on-error-c);animation:shake .4s}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.045)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-7px)}55%{transform:translateX(6px)}80%{transform:translateX(-3px)}}
/* Flashcard */
.flash{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:10px 0}
.flash .fem{
  font-size:3.1rem;width:110px;height:110px;display:grid;place-items:center;border-radius:38px;
  background:color-mix(in srgb,var(--acc) 13%,var(--surface-1));
  border:1px solid color-mix(in srgb,var(--acc) 32%,transparent);
  animation:pop .55s var(--spring);
  box-shadow:var(--shadow);
}
.flash-wordline{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px}
.flash .fku{font-size:1.82rem;font-weight:800;line-height:1;letter-spacing:-.02em;margin:0}
.flash .fen{font-size:1.02rem;color:var(--on-surface-v);font-weight:600}
.flash .ftr{font-size:.82rem;color:var(--on-surface-v)}
.flash .fex{
  margin-top:13px;background:var(--sc);border-radius:var(--r-lg);padding:12px 15px;font-size:.91rem;max-width:100%;
}
.flash .fex [lang="en"]{display:block;font-size:.98rem}
.flash .fex span{color:var(--on-surface-v);font-weight:500}
/* Word bank / ordering */
.slotline{
  min-height:52px;border-bottom:2px dashed var(--outline-v);display:flex;flex-wrap:wrap;gap:7px;
  align-items:center;padding:7px 2px;margin:8px 0 15px;
}
.bank{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.wchip{
  padding:10px 14px;border-radius:12px;background:var(--sc-high);font-weight:700;font-size:.95rem;
  border:1px solid var(--outline-v);position:relative;overflow:hidden;
  transition:transform .2s var(--spring),opacity .2s,background .2s;animation:pop .35s var(--spring);
}
.wchip:active{transform:scale(.92)}
.wchip.ghost{opacity:.25;pointer-events:none}
/* Sahnede nesneye dokun — prosedürel canvas.
   Sahneler 1000×600 tasarım uzayında çizilir; en-boy oranı burada da korunur,
   yoksa tkFit'in kırpması ile bölge kutuları farklı yerlere düşer. */
.scenewrap{position:relative;width:100%;aspect-ratio:5/3;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface-2);box-shadow:var(--elev-1);margin-top:6px}
.scenecv{display:block;width:100%;height:100%;cursor:pointer;touch-action:manipulation}
/* Karakulak mini diyalog — maskot + konuşma balonu.
   Görevlerin .tkb balonu YENİDEN KULLANILMADI: o balon canvas üstünde durmak
   üzere tasarlanmış (mutlak konum, backdrop-filter, .tkFrame'e bağlı kuyruk),
   ders gövdesinde akış içinde yaşayamaz. */
.dlgrow{display:flex;align-items:flex-end;gap:10px;margin:6px 0 4px}
.dlgmascot{width:74px;height:74px;flex:0 0 74px;object-fit:contain;object-position:bottom center;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.22))}
.dlgbub{
  position:relative;flex:1;min-width:0;padding:11px 13px;border-radius:16px;border-bottom-left-radius:6px;
  background:var(--surface-2);color:var(--text-1);font-weight:700;font-size:.95rem;line-height:1.35;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
}
.dlgbub::after{content:"";position:absolute;left:-6px;bottom:6px;width:0;height:0;
  border:7px solid transparent;border-right-color:var(--surface-2);border-left:0}
/* Çeviri satırı: TON düşürülür, opaklık değil (projenin emphasis kuralı). */
.dlgtr{flex:1 0 100%;font-size:.8rem;font-weight:500;color:var(--text-3)}
/* Resimden seç — 2×2 görsel şık. Metin taşımadığı için kutu kare, simge büyük;
   erişilebilir ad aria-label ile verilir (bkz. buildOpts). */
/* Izgara SINIRLANDIRILIR: 1fr 1fr tam genişlikte 165px'lik kutular veriyordu ve
   ekranın diğer bileşenleriyle (52px eşleştirme kutusu, 46px buton) aynı ölçü
   ailesinden okunmuyordu. Tavan + ortalama ile kutu ~120px'e iniyor. */
.picopts{display:grid;grid-template-columns:repeat(2,minmax(0,120px));gap:10px;margin-top:10px;justify-content:center}
.pictile{
  aspect-ratio:1;border-radius:var(--r-lg);background:var(--card-bg);border:2px solid var(--outline-v);
  display:grid;place-items:center;position:relative;overflow:hidden;min-height:0;
  transition:border-color .2s,background .2s,transform .15s var(--spring);
}
.pictile:active{transform:scale(.96)}
.pictile .word-art{width:64%;height:64%}
/* Anlam notu — "orange (fruit)" gibi ayrımlar öğretilen dizeden ayrılıp (data.js)
   yalnız burada geri gelir. Ton düşürülür, opaklık DEĞİL (projenin emphasis kuralı);
   taban ölçü mikro etiket katmanıdır, yani kart/ikon küçülmesinden muaftır. */
.wnote{font-size:.72rem;font-weight:500;color:var(--text-3);margin-left:5px;white-space:nowrap}
/* Geri bildirimdeki "kabul edildi ama farkı şu" notunun simgesi: satır içi,
   metin ağırlığında. Panel zaten küçük — simge ondan büyük görünmemeli. */
.fbnote-ic{width:15px;height:15px;vertical-align:-3px;margin-right:5px;display:inline-block}
/* Matching
   Kutular İKİ AYRI FLEX KOLONUNDA duruyordu (.mcol): sol İngilizce, sağ Türkçe.
   Kolonlar birbirinden bağımsız aktığı için uzun bir Türkçe karşılık (ör.
   "kütüphaneci") sarınca o kolonun ALTINDAKİ HER KUTU kayıyor ve iki sütunun
   satır hizası tamamen bozuluyordu. Artık kutular doğrudan grid'e giriyor ve
   sütun/satırlarını AÇIKÇA alıyor (BUILD.match) — böylece her iki sütun da
   kendi içinde bağımsız karıştırılmaya devam ederken satırlar hizalı kalıyor. */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:8px;align-items:stretch}
.mtile{
  /* Dolgu SİMETRİK. Eskiden 13px 10px idi ve üstüne #lesson .mtile{padding-right:38px}
     biniyordu; buton metni varsayılan olarak ortalı olduğu için her kutu kalıcı
     olarak ~14px sola kayık görünüyordu. Rozet artık köşede duruyor ve metin
     kutusundan yer çalmıyor. */
  padding:13px 14px;border-radius:var(--r-md);background:var(--card-bg);border:2px solid var(--outline-v);
  font-weight:700;font-size:.93rem;min-height:52px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;
  transition:border-color .2s,background .2s,opacity .3s,transform .15s var(--spring);
}
.mtile:active{transform:scale(.95)}
.mtile.sel{
  border-color:var(--accent-line);
  background:var(--accent-soft);
  color:var(--accent-ink);
}
.mtile.hit{border-color:var(--ok);background:var(--ok-c);color:var(--on-primary-c);opacity:.55;pointer-events:none;animation:pop .4s var(--spring)}
.mtile.miss{border-color:var(--error);background:var(--error-c);animation:shake .4s}
/* Typing */
.typebox{
  width:100%;border:2px solid var(--outline-v);border-radius:var(--r-lg);background:var(--sc-low);
  padding:14px;font-size:1.06rem;font-weight:600;outline:none;transition:border-color .2s;min-height:56px;resize:none;
  font-family:inherit;color:var(--on-surface);
}
.typebox:focus{border-color:color-mix(in srgb,var(--acc) 65%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)}
/* Ders durumu renk sözleşmesi yalnız #lesson altında yaşar. Onboarding ve görev
   akışları aynı .opt/.typebox adlarını kullansa da bu paletten etkilenmez. */
#lesson{
  --lesson-choice-bg:var(--surface-1);
  --lesson-choice-fg:var(--text-1);
  --lesson-choice-border:color-mix(in srgb,var(--text-3) 78%,var(--surface-1));
  --lesson-selected-bg:var(--accent-soft);
  --lesson-selected-fg:var(--accent-ink);
  --lesson-selected-border:var(--accent-ink);
  --lesson-success-bg:var(--ok-c);
  --lesson-success-fg:var(--ok-fg);
  --lesson-success-border:var(--ok-fg);
  --lesson-error-bg:var(--error-c);
  --lesson-error-fg:var(--on-error-c);
  --lesson-error-border:var(--error);
  --lesson-disabled-bg:var(--surface-2);
  --lesson-disabled-fg:var(--text-3);
  /* Durum işaretleri GEOMETRİK çizilir, yazı karakteriyle DEĞİL — bkz. ::after
     kuralındaki gerekçe. Yollar viewBox'ın merkezine (12,12) simetrik oturur:
     yuvarlak uç payı (stroke/2) iki yönde de eşit taştığı için boyanan kutu da
     ortalı kalır. Renk maskeden gelmez, currentColor'dan gelir. */
  --mark-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.3 12.5L9.6 16.8L18.7 7.2' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mark-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.6 7.6L16.4 16.4M16.4 7.6L7.6 16.4' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
#lesson .opt,
#lesson .mtile,
#lesson .pictile{
  background:var(--lesson-choice-bg);color:var(--lesson-choice-fg);
  border-color:var(--lesson-choice-border);
}
#lesson .opt{padding:13px 16px}
/* Durum rozeti (✓ / ×) MASKE ile çizilir, yazı karakteriyle değil.
   Ölçüldü (Plus Jakarta Sans, canvas TextMetrics): "×" glifinin mürekkebi
   tamamen taban çizgisinin ÜSTÜNDE (actualBoundingBoxDescent = 0), yani glif
   kendi satır kutusunda yüksekte oturuyor. `place-items:center` satır kutusunu
   ortalar, GLİFİ değil — sonuç, rozet eşleştirme kutusunda 2.5px, şık
   kutusunda 3.5px AŞAĞIDA duruyordu. "✓" aynı kurulumda 0.5px sapıyordu, yani
   hata düzenin değil o glifin metriğinindi; font'a bağlı bir düzeltme
   (magic nudge) ağırlık/boyut değişince sessizce bozulurdu.
   Maske yolu font metriğinden bağımsızdır ve renk yine currentColor'dan gelir,
   yani tema/paket bağı korunur. */
#lesson .opt::after,
#lesson .mtile::after,
#lesson .pictile::after{
  content:"";position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;opacity:0;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
#lesson .opt.sel,
#lesson .mtile.sel,
#lesson .pictile.sel{
  background:var(--lesson-selected-bg);color:var(--lesson-selected-fg);
  border-color:var(--lesson-selected-border);
  box-shadow:inset 0 0 0 1px var(--lesson-selected-border);
}
#lesson .opt.sel::after,
#lesson .mtile.sel::after,
#lesson .pictile.sel::after{
  content:none;
}
#lesson .opt.right,
#lesson .mtile.hit,
#lesson .pictile.right,
#lesson .typebox.is-right{
  background:var(--lesson-success-bg);color:var(--lesson-success-fg);
  border-color:var(--lesson-success-border);
}
#lesson .opt.right::after,
#lesson .mtile.hit::after,
#lesson .pictile.right::after{
  opacity:1;color:var(--lesson-success-fg);
  -webkit-mask-image:var(--mark-check);mask-image:var(--mark-check);
}
#lesson .opt.wrong,
#lesson .mtile.miss,
#lesson .pictile.wrong,
#lesson .typebox.is-wrong{
  background:var(--lesson-error-bg);color:var(--lesson-error-fg);
  border-color:var(--lesson-error-border);
}
#lesson .opt.wrong::after,
#lesson .mtile.miss::after,
#lesson .pictile.wrong::after{
  opacity:1;color:var(--lesson-error-fg);
  -webkit-mask-image:var(--mark-cross);mask-image:var(--mark-cross);
}
#lesson .opt.right,
#lesson .opt.wrong{padding-right:48px}
/* Rozet dikeyde ORTALI kalır (taban kuralın top:50% + translateY'si korunur);
   değişen yalnız sağ kenara yaklaşması ve küçülmesi. Metni itmiyor: rozet
   mutlak konumlu, kutuyu daraltan şey eskiden .mtile'a yazılan 38px sağ
   dolguydu — kaldırıldı, dolgu artık simetrik. */
#lesson .mtile::after,
#lesson .pictile::after{right:8px;width:18px;height:18px}
#lesson .mtile.hit{opacity:1;pointer-events:none}
#lesson .typebox{background:var(--lesson-choice-bg);color:var(--lesson-choice-fg);border-color:var(--lesson-choice-border)}
#lesson .typebox:focus{border-color:var(--lesson-selected-border);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
/* Global açık tema .btn.filled'ı tonala çeviriyor; dersin birincil eylemi
   bilinçli olarak gerçek dolu aksan kalır. Diğer ekranların düğmeleri değişmez. */
#lesson .btn.filled{background:var(--accent);color:var(--on-accent);border:1px solid transparent;box-shadow:none}
#lesson .btn.filled:disabled{
  opacity:1;background:var(--lesson-disabled-bg);color:var(--lesson-disabled-fg);
  border-color:transparent;filter:none;
}
#lesson #feedback.good{background:var(--lesson-success-bg);color:var(--lesson-success-fg)}
#lesson #feedback.bad{background:var(--lesson-error-bg);color:var(--lesson-error-fg)}
#lesson #feedback.good .btn{background:var(--lesson-success-border);color:var(--surface)}
#lesson #feedback.bad .btn{background:var(--error);color:var(--on-error)}
/* Audio / speak */
/* Yüzey DOLU aksandan tonala çevrildi (2026-08-03). İçindeki hoparlör/
   mikrofon artık obje ailesinden ve kendi rengini taşıyor; dolu amber
   üstünde mercan gövde 1.35'e — kontrast tabanının tam üstüne — düşüyordu.
   Tonal zeminde 4.4. Aynı tonal dil `.iconbtn.primary`de zaten kullanılıyor,
   buton 90px'te hâlâ birincil eylem olarak okunuyor. */
.audiobig{
  width:90px;height:90px;border-radius:31px;color:var(--acc);
  background:color-mix(in srgb,var(--acc) 14%,var(--surface-1));
  border:1.5px solid color-mix(in srgb,var(--acc) 30%,transparent);
  display:grid;place-items:center;font-size:2.1rem;margin:14px auto;
  box-shadow:var(--shadow-lg);
  position:relative;overflow:hidden;transition:transform .2s var(--spring);
}
.audiobig:active{transform:scale(.92)}
.audiobig.pulse{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 22%,transparent)}55%{box-shadow:0 0 0 14px transparent}}
.micstate{text-align:center;font-weight:700;margin-top:9px;min-height:24px}
/* Reading passage */
.passage{background:var(--sc);border-radius:var(--r-lg);padding:14px 16px;max-height:34dvh;overflow-y:auto;margin-bottom:12px;font-size:.97rem;line-height:1.62}
/* Grammar note */
.gnote{background:var(--sc);border-radius:var(--r-lg);padding:15px;margin-top:9px;font-size:.94rem}
.gnote table{width:100%;border-collapse:collapse;margin:9px 0}
.gnote td{padding:6px 6px;border-bottom:1px solid var(--outline-v);font-size:.91rem}
.gnote td:first-child{font-weight:800}
.gnote .hl{background:var(--tertiary-c);color:var(--on-tertiary-c);padding:1px 6px;border-radius:6px;font-weight:800}
/* ============ Feedback sheet ============ */
/* istek 3: eski geçiş var(--spring) idi; yay hedefi aşıp (overshoot) paneli
   yukarı fırlatıyor, altta koyu bir boşluk açıyordu. Aşmayan bir ease-out'a
   çevrildi; ayrıca ::after ile alta bir zemin "kuyruğu" eklenerek her ihtimale
   karşı (iOS rubber-band vb.) boşluk kapatıldı. */
#feedback{
  position:absolute;left:0;right:0;bottom:0;padding:16px 18px calc(16px + env(safe-area-inset-bottom));
  border-radius:24px 24px 0 0;transform:translateY(105%);transition:transform .42s cubic-bezier(.22,.86,.24,1);z-index:5;
  box-shadow:0 -8px 30px rgba(0,0,0,.18);
}
/* Açık temada sert siyah gölge, açık zemin üstünde kirli gri bir bulut gibi
   okunuyordu. Panel zaten dolu renkli bir blok — ayrımı gölge değil rengin
   kendisi taşır; kalan gölge yalnız ince bir ayrım payıdır. */
:root:not([data-theme="dark"]) #feedback{
  box-shadow:0 -1px 0 rgba(30,26,22,.06),0 -10px 24px -18px rgba(30,26,22,.22);
}
#feedback::after{content:"";position:absolute;top:100%;left:0;right:0;height:60px;background:inherit}
#feedback.show{transform:none}
#feedback.good{background:var(--ok-c);color:var(--on-primary-c)}
#feedback.bad{background:var(--error-c);color:var(--on-error-c)}
#feedback .fbTitle{font-size:1.14rem;font-weight:800;display:flex;gap:9px;align-items:center}
/* Ders geri bildirimindeki obje, başlığın yanında küçük kalmasın; yalnız bu
   panelde optik ölçüsü büyür, diğer ders ve menü simgeleri etkilenmez. */
#feedback .fbTitle>.ic{width:1.32em;height:1.32em}
#feedback .fbSub{margin:5px 0 12px;font-size:.93rem}
#feedback .btn{width:100%}
#feedback.good .btn{background:var(--ok);color:#fff}
[data-theme="dark"] #feedback.good .btn{color:var(--on-primary)}
#feedback.bad .btn{background:var(--error);color:var(--on-error)}
/* ============ Results ============ */
#results{
  position:absolute;inset:0;background:var(--surface);z-index:6;display:none;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;gap:7px;
}
#results.show{display:flex}
/* Kutlama simgesi ekranın kahramanıdır: 3.4rem'lik emoji ölçüsünden çıkıp
   sabit 104px'e alındı (375px'te genişliğin ~%28'i). Obje ailesi kendi
   rengini taşıdığı için kap renk vermez. */
#results .remoji{
  width:132px;height:132px;display:grid;place-items:center;
  margin-bottom:2px;animation:pop .7s var(--spring);
}
/* .word-art tabanı 40px sabittir; kutlama simgesi kabı doldurmalı. */
#results .remoji .remoji-art{width:100%;height:100%;display:block}
@media(max-width:380px){#results .remoji{width:120px;height:120px}}
/* Ekran alçaldığında (klavye yok ama küçük cihaz) kahraman simge küçülür ki
   XP/doğruluk/süre kutuları ve Devam düğmesi katlanmasın. */
@media(max-height:680px){#results .remoji{width:96px;height:96px}}
/* Kusursuz ders kupası: önce yaylı giriş, sonra düşük genlikli canlılık.
   Parıltılar bağımsız katmandır; SVG'nin temiz obje dili değişmez. */
@media (prefers-reduced-motion:no-preference){
  #results #resEmoji.is-trophy{
    position:relative;isolation:isolate;
    animation:trophyEnter .78s cubic-bezier(.2,.9,.25,1.22) both;
  }
  #results #resEmoji.is-trophy .remoji-art{
    transform-origin:50% 76%;
    animation:trophyAlive 2.2s .82s ease-in-out infinite;
  }
  #results #resEmoji.is-trophy::before,
  #results #resEmoji.is-trophy::after{
    content:"";position:absolute;z-index:-1;left:50%;top:48%;width:7px;height:7px;
    border-radius:999px;background:var(--tertiary);opacity:0;pointer-events:none;
  }
  /* Ofsetler kupa 70px'ken ayarlanmıştı; simge 132px'e çıkınca parıltılar
     gövdenin ÜSTÜNE düşüyordu. 1.5× dışarı alındı, en geniş ikisi 375px'te
     ekrandan taşmasın diye ±72'de tutuldu. */
  #results #resEmoji.is-trophy::before{
    box-shadow:-72px -32px 0 -1px var(--primary),68px -38px 0 -1px var(--tertiary),
      -59px 47px 0 -2px var(--tertiary),65px 44px 0 -2px var(--primary);
    animation:trophySpark 1.05s .18s var(--ease) both;
  }
  #results #resEmoji.is-trophy::after{
    width:5px;height:5px;
    box-shadow:-42px -65px 0 -1px var(--tertiary),45px -60px 0 -1px var(--primary),
      -72px 8px 0 -1px var(--tertiary),70px 11px 0 -1px var(--primary);
    animation:trophySpark .95s .34s var(--ease) both;
  }
}
@keyframes trophyEnter{
  0%{transform:translateY(18px) scale(.55) rotate(-8deg);opacity:0}
  58%{transform:translateY(-5px) scale(1.12) rotate(4deg);opacity:1}
  78%{transform:translateY(2px) scale(.97) rotate(-1.5deg)}
  100%{transform:none;opacity:1}
}
@keyframes trophyAlive{
  0%,100%{transform:translateY(0) rotate(0)}
  35%{transform:translateY(-3px) rotate(-1.8deg)}
  68%{transform:translateY(-1px) rotate(1.5deg)}
}
@keyframes trophySpark{
  0%{transform:translate(-50%,-50%) scale(.25) rotate(-12deg);opacity:0}
  32%{opacity:1}
  72%{opacity:.85}
  100%{transform:translate(-50%,-50%) scale(1.18) rotate(8deg);opacity:0}
}
#results h2{font-size:1.48rem;font-weight:800;margin:5px 0 2px}
.resrow{display:flex;gap:10px;margin:14px 0 20px;width:100%;max-width:340px}
.resbox{flex:1;border-radius:var(--r-lg);padding:12px 7px;font-weight:800;font-size:1.18rem}
.resbox small{display:block;font-size:.67rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;opacity:.75;margin-bottom:2px}
.resbox.xp{background:var(--tertiary-c);color:var(--on-tertiary-c)}
.resbox.acc{background:var(--primary-c);color:var(--on-primary-c)}
.resbox.time{background:var(--sc-high)}
/* ============ Sheet / dialog / toast ============ */
#scrim{position:fixed;inset:0;background:rgba(10,16,11,.45);z-index:70;opacity:0;pointer-events:none;transition:opacity .3s}
#scrim.show{opacity:1;pointer-events:auto}
#sheet{
  position:fixed;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;z-index:71;background:var(--sc-low);
  border-radius:24px 24px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom));
  transform:translateY(105%);transition:transform .42s cubic-bezier(.22,.86,.24,1);max-height:86dvh;overflow-y:auto;
  will-change:transform;
}
#sheet.show{transform:none}
.grab{width:34px;height:4px;border-radius:99px;background:var(--outline-v);margin:0 auto 12px}
.dlg{
  position:fixed;inset:0;z-index:72;display:none;place-items:center;padding:24px;
}
.dlg.show{display:grid}
.dlgcard{
  position:relative;
  background:var(--sc-low);border-radius:var(--r-xl);padding:22px;max-width:340px;width:100%;text-align:center;
  animation:dlgIn .4s var(--spring);box-shadow:var(--shadow-lg);
}
/* Top-right close affordance shared by dialogs and the bottom sheet */
.popclose{
  position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px;border-radius:999px;
  display:grid;place-items:center;background:var(--sc-high);color:var(--on-surface-v);
  transition:transform .15s var(--spring),background .25s,color .25s;
}
.popclose:hover{background:var(--sc-highest);color:var(--on-surface)}
.popclose:active{transform:scale(.9)}
.popclose .ic{width:18px;height:18px}
#sheet .popclose{top:14px;right:16px}
@keyframes dlgIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.dlgcard .demoji{font-size:2.8rem}
/* Yalnız ders çıkışı: ikincil eylem nötr, geri döndürülemez eylem hata renginde. */
.lesson-exit-dialog .lesson-exit-stay{
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--text-1);
}
#dlgCard .lesson-exit-dialog .lesson-exit-quit:not(:disabled){
  opacity:1;background:var(--error);background-image:none;
  border:1px solid var(--error);color:var(--on-error);filter:none;
}
/* Streak / XP status dialogs */
.daystrip{display:flex;gap:5px;justify-content:space-between}
.daycell{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:.69rem;font-weight:800;color:var(--on-surface-v)}
.daycell i{width:100%;max-width:34px;aspect-ratio:1;border-radius:11px;display:grid;place-items:center;background:var(--sc-high)}
.daycell.on i{background:var(--primary-c);color:var(--on-primary-c)}
.daycell.on i .ic{width:17px;height:17px}
.xpstat{display:flex;justify-content:space-between;align-items:center;background:var(--sc-high);border-radius:12px;padding:10px 14px;font-weight:800}
#toast{
  position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:calc(88px + env(safe-area-inset-bottom));
  background:var(--sc-highest);color:var(--on-surface);padding:11px 18px;border-radius:14px;font-weight:600;
  font-size:.88rem;z-index:80;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease);
  box-shadow:var(--shadow-lg);max-width:86%;text-align:center;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ============ Stats ============ */
.bars{display:flex;align-items:flex-end;gap:7px;height:112px;margin-top:12px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}
.bar i{
  width:100%;max-width:26px;border-radius:7px;background:var(--data-mark);
  transition:height .8s var(--ease);min-height:4px;position:relative;
}
.bar.today i{background:var(--accent)}
.bar b{font-size:.68rem;font-weight:600;color:var(--text-3)}
.bar span{font-size:.66rem;color:var(--text-3);font-weight:600}
/* 12 sütun × 7 gün. Hücre kare kaldığı için yükseklik kart genişliğine bağlıydı:
   kart dolgusu 20→16'ya inince ızgara genişleyip UZAMIŞTI. Sütun genişliğine
   tavan konup ızgara ortalanır — hücre kare kalır, yükseklik ~%11 düşer. */
.heat{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,20px);justify-content:center;grid-template-rows:repeat(7,1fr);gap:3px;margin-top:11px}
/* Isı haritası: tek hue'nun üç yoğunluğu (aynı ilerleme dili). */
.heat i{width:100%;aspect-ratio:1;border-radius:4px;background:var(--surface-2)}
.heat i.h1{background:color-mix(in srgb,var(--accent) 26%,var(--surface-2))}
.heat i.h2{background:color-mix(in srgb,var(--accent) 58%,var(--surface-2))}
.heat i.h3{background:var(--accent)}
.heat i.tdy{outline:2px solid var(--accent);outline-offset:1px}
.legend{display:flex;justify-content:flex-end;align-items:center;gap:5px;margin-top:10px;font-size:.7rem;color:var(--on-surface-v)}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
/* ============ Profile ============ */
/* ---- Kimlik kartı ----
   ⚠ TONLU AKSAN YÜZEYİ DENENDİ VE ELENDİ. Ana sayfadaki .hero ile aynı
   malzeme verilmişti (ekran başına tek vurgulu yüzey fikri), ama hero bir
   EYLEM kartıdır — kimlik kartı bir eylem değil, sayfanın künyesi. Renkli
   tek kart, altındaki nötr kardeşlerinden kopuyor ve ekranın en üstünde
   gereksiz bir vurgu yaratıyordu. Kart kardeşleriyle aynı: düz yüzey, aynı
   kenarlık, aynı yükselti. Vurgu yalnız ilerleme dolgusunda. */
/* Yerleşim MERKEZÎ: avatar ve ad sayfanın künyesi olduğu için eksende durur,
   yardımcı bilgi (ünvan, seviye, ilerleme) altına dizilir. Satır-kart dizilimi
   (avatar solda, metin ortada, düğme sağda) burada bir liste öğesi gibi
   okunuyordu — oysa bu bir liste satırı değil, ekranın başlığı. */
.pid{text-align:center;padding-top:20px}
/* Avatar YUVARLAK ÇERÇEVEDE ve ortalanmış. Kap 66→112px büyütüldüğü için halka
   figürü küçültmez (eski levha itirazının sebebi buydu): çerçeve içindeki
   görüntü alanı 104px, yani öncekinden büyük. */
/* ⚠ Seçici .avatar.pid-av (0,2,0) olmalı: .avatar taban kuralı bu bloktan
   SONRA geliyor ve eşit özgüllükte olsaydı ölçüyü geri alırdı. */
.avatar.pid-av{
  width:112px;height:112px;flex:none;border-radius:50%;
  margin:0 auto 13px;padding:10px;
}
/* Kalem, merkezî kolonu bölmesin diye köşede durur. .card zaten
   position:relative. */
.pid-edit{position:absolute;top:10px;right:10px;z-index:1}
.pid-name{margin:0;font-size:1.35rem;font-weight:700;letter-spacing:-.02em;
  line-height:1.25;overflow-wrap:anywhere}
/* Emphasis TONLA verilir: ad --text-1, ünvan/seviye --text-2.
   Opaklık düşürmek yok (proje kuralı). */
.pid-meta{margin:4px 0 0;font-size:.85rem;font-weight:500;color:var(--text-2);
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;line-height:1.3}
.pid-meta b{font-weight:700;color:var(--text-1)}
/* Ayırıcı nokta metin tonunu PAYLAŞIR (--text-2). Bir basamak soluk
   (--text-3) denendi: tonlu aksan yüzeyinin üstünde açık temada 4.42'ye
   düşüyor (Erik/Gül paketleri) — AA eşiği 4.5. */
.pid-sep{color:inherit}
/* Ray/dolgu uygulamanın ortak ilerleme dilinde kalır (ray --surface-2, dolgu
   düz --accent) — kart nötr olduğu için ayrıca tonlanmasına gerek yok. */
.pid-track{margin-top:17px}
/* Alt satır ana sayfadaki .hero-foot yerleşimini tekrarlar (uçlar etiketli ray)
   ama RENGİNİ almaz: nötr kartta tüm satırı aksana boyamak ikinci bir vurgu
   katmanı oluyordu. Yüzde, dolgunun sayısal karşılığı olduğu için aksan
   mürekkebinde; kalan XP ikincil metin.
   ⚠ .hero-foot sınıfı kullanılmıyor: açık tema katmanında o sınıfı (0,3,0) ile
   koyulaştıran bir kural var ve buradaki rengi sessizce eziyordu. */
.pid-foot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-top:9px;font-size:.76rem;font-weight:600;color:var(--text-2)}
.pid-pct{color:var(--accent-ink);font-weight:700;font-variant-numeric:tabular-nums}
/* Üç sayı: ana sayfadaki durum şeridinin (.statstrip) aynı üçlüsü, aynı
   diyaloglara açılır — ama kart içinde kutu-içinde-kutu olmasın diye şerit
   kabı değil, hairline'la ayrılmış üç eşit sütun kullanılır. */
.pid-stats{
  display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr;align-items:center;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
}
.pid-stat{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:4px 2px;min-height:44px;justify-content:center;
  transition:transform .15s var(--spring);
}
.pid-stat:active{transform:scale(.94)}
.pid-stat b{font-size:1.12rem;font-weight:700;line-height:1;color:var(--text-1);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* Mikro etiket tabanı korunur (bkz. "UI yoğunluğu"): .7rem'in altına inilmez. */
.pid-stat span{font-size:.7rem;font-weight:600;letter-spacing:.04em;color:var(--text-3);line-height:1.2}
.pid-sdiv{width:1px;height:26px;background:var(--line-2);justify-self:center}
/* Avatarların ARKA PLANI YOK: görseller zaten şeffaf PNG ve kendi siluetleri
   var; arkalarına tonlu bir levha koymak onları "ikon kutusu" gibi gösterip
   figürü küçültüyordu. Dolgu da kalktı — figür kabın tamamını kullanıyor. */
.avatar{
  width:66px;height:66px;border-radius:24px;display:grid;place-items:center;font-size:2rem;
  background:transparent;flex:0 0 66px;
  position:relative;overflow:hidden;transition:transform .2s var(--spring);
}
/* ⚠ Buradaki eski `#avatarBtn{padding:0}` KALDIRILDI: (1,0,0) özgüllüğüyle
   .avatar.pid-av'ın dolgusunu eziyordu. Dolgu artık gerekli — yuvarlak
   çerçevede figürün daire dışında kalan kısmı kırpılıyor. Ölçüldü (13 avatar,
   112px kap): dolgusuz %8.1'e kadar kırpma (premium avatarların omuzları),
   6px'te %0.79, 8px'te %0.13, **10px'te 13 avatarın hiçbirinde kırpma yok**. */
.avatar-svg{width:100%;height:100%;display:block}
.avatar-img{width:100%;height:100%;display:block;object-fit:contain;pointer-events:none;user-select:none}
.avatar:active{transform:scale(.93)}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
/* Avatar seçici rozet ızgarasını miras alır ama rozetlerin 92px min-height'ını
   almaz. Dört eşit kare tek bir blok olarak ortalanır; dar ekranda sütunlar
   birlikte küçülür, en-boy oranı değişmez. */
#sheet .avatar-grid{
  grid-template-columns:repeat(4,minmax(54px,72px));
  justify-content:center;justify-items:center;gap:clamp(8px,3vw,16px);width:100%;
}
#sheet .avatar-grid .avatar-choice{
  width:100%;height:auto;min-height:0;aspect-ratio:1;padding:4px;
  justify-self:center;border-radius:20px;position:relative;
}
/* Kilitli premium avatar: figür sönümlenir, üstüne kilit rozeti düşer.
   Sönümleme opaklıkla DEĞİL gri tonlamayla — projede emphasis ton
   değiştirerek verilir; ayrıca opaklık figürü zeminle karıştırıyordu. */
#sheet .avatar-grid .avatar-choice.lock .avatar-img{filter:grayscale(1) brightness(.72)}
#sheet .avatar-grid .avatar-choice .av-lock{
  position:absolute;right:5px;bottom:5px;width:22px;height:22px;border-radius:999px;
  display:grid;place-items:center;background:var(--surface-1);border:1px solid var(--line-2);
  color:var(--text-2);box-shadow:var(--elev-1);
}
#sheet .avatar-grid .avatar-choice .av-lock .ic{width:12px;height:12px}
.badge{
  background:var(--surface-2);border:1px solid var(--card-bd);
  border-radius:17px;padding:10px 6px 11px;text-align:center;font-size:.71rem;min-height:92px;
  font-weight:700;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;line-height:1.22;
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 3%,transparent);transition:transform .2s var(--spring),background .25s;
}
.badge:active{transform:scale(.94)}
/* Yuva flat: iç highlight ve dış gölge kaldırıldı — hacim iddiası yok,
   ayrım yalnızca yüzey basamağından gelir. */
.badge .bem{
  position:relative;width:52px;height:52px;border-radius:17px;display:grid;place-items:center;
  background:var(--wa-well);border:0;box-shadow:none;
}
.badge-svg{width:32px;height:32px;display:block;overflow:visible;filter:none}
.badge.lock{opacity:1;color:var(--text-2)}
.badge.lock .bem{background:var(--wa-well);border-color:var(--card-bd)}
/* Kilitli rozet: grayscale/brightness FİLTRESİ değil token yeniden bağlama.
   Filtre siluetin kontrastını da düşürüyordu (açık temada 1.2'ye kadar);
   token yolu biçimi bozmadan yalnızca tonu indirir ve iki temada da ölçülebilir
   kalır. Küçük boyda okunabilirlik için çizgi ikincil tonda kalır. */
.badge.lock .badge-svg,
.demoji.badge-dialog-lock .badge-svg{
  --wa-main:var(--wa-locked-face);--wa-base:var(--wa-locked-base);
  --wa-detail:var(--wa-locked-face);--wa-detail-base:var(--wa-locked-base);
  --wa-focus:var(--wa-locked-face);
}
.badge:not(.lock):hover .badge-svg{transform:translateY(-1px)}
/* ---- Rozet ızgarası ----
   Profildeki rozet listesi tek yüzey katmanına indirildi: hücrenin kart
   chrome'u (degrade + kenarlık + gölge) kaldırıldı, siluet yalnızca ikon
   kutusundan gelir. Böylece 17 rozet 17 ayrı kart gibi yarışmaz. Kilit
   baloncuğu da kaldırıldı — kilitli/açık ayrımı ikon kutusunun aksan tonu,
   rozetin doygunluğu ve başlıktaki sayaç üzerinden okunur.
   Not: .badge sınıfı avatar seçicide de kullanılıyor, o yüzden bu kurallar
   #badgeGrid ile kapsanır. */
/* Aç/kapat kontrolü kardeş kartlardaki "Tümü →" metin düğmesinin ta kendisi;
   fark yalnız yön işaretinde (ok = gezinme, chevron = katlanma).
   ⚠ Seçici .btn.badges-more (0,2,0) olmalı: düz .badges-more (0,1,0) daha
   önce gelen .btn.text/.btn.sm dolgularını ezemez. */
/* Dokunma hedefi 44px, KAPLADIĞI yer 32px: negatif DİKEY margin fazlalığı
   geri alır, böylece başlık satırı kardeş kartlardaki "Tümü →" ile aynı
   yükseklikte kalır. Yatayda negatif margin YOK — 320px'te başlığın
   scrollWidth'ini kabından taşırıyordu (görünür bir hata değil ama ölçümü
   kirletiyor); 66px'lik hedef genişliği zaten yeterli. */
.btn.badges-more{
  gap:5px;padding:0 2px;min-height:44px;margin:-6px 0;
  font-size:.82rem;font-weight:600;color:var(--accent);
}
.badges-chev{
  width:15px;height:15px;flex:0 0 auto;color:currentColor;
  transition:transform .28s var(--ease);
}
.badges-card.open .badges-chev{transform:rotate(180deg)}
/* Koleksiyon ilerlemesi uygulamanın TEK ilerleme dilinde: ray --surface-2,
   dolgu düz --accent. Sayı tek başınayken (0 / 17) ne kadar yol kaldığını
   göstermiyordu. */
.badges-meter{display:flex;align-items:center;gap:10px;margin-top:12px}
.badges-meter .track{flex:1}
.badges-count{
  font-size:.76rem;font-weight:700;color:var(--text-2);
  font-variant-numeric:tabular-nums;flex:0 0 auto;
}
/* Katlanma: 17 hücrenin tamamı DOM'da kalır, yükseklik iki satırın tam
   sınırında kesilir (JS satır sınırını ölçer) — yarım kalmış hücre görünmez,
   o yüzden alt kenara maske/soluklaşma gerekmez. */
#badgeGrid{gap:2px;margin-top:10px;overflow:hidden;transition:max-height .34s var(--ease)}
@media (prefers-reduced-motion:reduce){
  #badgeGrid,.badges-chev{transition:none}
}
#badgeGrid .badge{
  background:none;border:0;box-shadow:none;border-radius:16px;
  padding:10px 5px 11px;min-height:0;gap:8px;
}
/* Kutu artık tek siluet katmanı olduğu için karttan luminance'la ayrılmalı:
   koyu temada --sc-high kart zeminine neredeyse eşit, o yüzden bir basamak
   açılır. */
#badgeGrid .badge .bem{
  width:54px;height:54px;border-radius:18px;border:0;box-shadow:none;
  background:var(--wa-well);
}
/* Durum rengi yuvaya sızmaz; kazanılmış/kilitli ayrımı obje ve metinle okunur. */
#badgeGrid .badge:not(.lock) .bem{background:var(--wa-well)}
#badgeGrid .badge-svg{width:33px;height:33px}
#badgeGrid .badge .btxt{color:var(--on-surface-v)}
#badgeGrid .badge:not(.lock) .btxt{color:var(--on-surface);font-weight:800}
.badge-mini{width:25px;height:25px;display:block;overflow:visible;filter:none}
.achnext-ic .badge-mini{width:28px;height:28px}
.chip .badge-mini{width:19px;height:19px}
.demoji .badge-svg{width:72px;height:72px;margin:0 auto;filter:none}
/* Flat set: gölge yok. Eskiden koyu temada rozetlere drop-shadow bindiriliyordu;
   hacim iddiası taşıyan her katman bu dilde kaldırıldı. */
/* Açık temada SVG'nin kendi filtre gölgesi kapanır; yüzey ve kontur ayrım için yeterlidir. */
:root:not([data-theme="dark"]) #gk-shadow feDropShadow,
:root:not([data-theme="dark"]) #fl-soft-shadow feDropShadow,
:root:not([data-theme="dark"]) #sf feDropShadow{flood-opacity:0}
/* Categorised settings: labelled groups, each in its own rounded card */
.settings-title{margin:6px 2px 11px}
.settings-account{padding:5px 14px}
.settings-group{margin-bottom:13px}
/* Bölüm etiketi: emphasis OPAKLIK düşürerek değil ayrı bir metin tonuyla
   verilir. %66 saydam ikincil metin koyu temada 4.12 kontrasta düşüyordu. */
.settings-head{font-size:.7rem;font-weight:600;letter-spacing:.1em;color:var(--text-3);padding:0 6px 6px}
.settings-card{padding:2px 14px;margin-bottom:0}
.setrow{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 4px;
  border-bottom:1px solid color-mix(in srgb,var(--outline-v) 55%,transparent);font-weight:600;
}
.setrow:last-child{border-bottom:none}
.settings-account-data #accountRows .setrow,
.settings-account-data #accountActions .setrow{border-bottom:1px solid color-mix(in srgb,var(--outline-v) 55%,transparent)}
/* Ayar ikonu KUTUYA HAPSEDİLMEZ: her satırda ayrı krem kare, listeyi 8 ayrı
   kart gibi okutuyordu. Konteyner kaldırıldı; hizalamayı sabit genişlikli
   sütun sağlıyor. Kutu gerektiğinde (.sicon.well) küçük, düşük kontrastlı ve
   standart ölçüdedir — dekoratif değil. */
.setrow .sicon{
  width:24px;height:24px;display:grid;place-items:center;flex:0 0 24px;
  background:none;border:0;box-shadow:none;
}
.setrow .sicon.well{
  width:28px;height:28px;flex-basis:28px;border-radius:9px;background:var(--ki-well);
}
.setrow .sicon .ic{width:22px;height:22px;overflow:visible}
.setrow .sval{margin-left:auto;color:var(--on-surface-v);font-size:.84rem;font-weight:700}
a.setrow{color:inherit;text-decoration:none}
/* Baş harf tonlu yüzeyin üstünde duruyor: dolu aksanın metni (--on-primary)
   değil, tonlu yüzeyin metni (--accent-ink) kullanılmalı — aksi hâlde iki
   temada da 1.0–1.2 kontrast veriyordu. */
.acctrow .acctav{width:36px;height:36px;border-radius:12px;flex:0 0 36px;object-fit:cover;overflow:hidden;display:grid;place-items:center;font-weight:700;font-size:1rem;color:var(--accent-ink);background:var(--accent-soft)}
.acctrow .acctmeta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.acctrow .acctname{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acctrow .acctmail{font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Switch */
.sw{width:52px;height:32px;border-radius:99px;background:var(--sc-highest);border:2px solid var(--outline);position:relative;transition:background .25s,border-color .25s;flex:0 0 52px;margin-left:auto}
.sw i{position:absolute;top:50%;left:4px;transform:translateY(-50%);width:16px;height:16px;border-radius:99px;background:var(--outline);transition:all .25s var(--spring)}
.sw.on{background:var(--primary);border-color:var(--primary)}
.sw.on i{left:24px;width:24px;height:24px;background:var(--on-primary)}
/* Ripple */
.ripple{
  position:absolute;border-radius:50%;background:currentColor;opacity:.18;transform:scale(0);
  animation:rip .55s var(--ease) forwards;pointer-events:none;
}
@keyframes rip{to{transform:scale(2.6);opacity:0}}
/* Confetti + hidden */
#confetti{position:fixed;inset:0;z-index:90;pointer-events:none}
.hide{display:none!important}
.ai-nav-label{display:none}
hr.soft{border:none;border-top:1px solid color-mix(in srgb,var(--outline-v) 55%,transparent);margin:6px 0}
/* ============ Gemini AI assistant ============ */
/* Chat overlay reuses the .overlay base (fixed, centered, max-width) */
#aiChat{background:var(--surface)}
/* Glass control buttons floating over the stage sky (no header bar) */
/* Top Header */
.ai-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(12px + env(safe-area-inset-top)) 18px 0;
  background: var(--surface);
  z-index: 10;
  position: relative;
}

.ai-topbar-title {
  font-weight: 600; /* SemiBold */
  font-size: 1.02rem;
  letter-spacing: 0.05em;
  color: var(--on-surface);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* Artık buton: sohbetin konusunu gösterir, tıklayınca sohbet listesi açılır */
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 58%;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  padding: 6px 12px;
  border-radius: 99px;
  transition: background .2s;
}
.ai-topbar-title:hover, .ai-topbar-title.open { background: var(--sc-high) }
.ai-topbar-title:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px }
.ai-topbar-title .tt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ai-topbar-title .chev { width: 15px; height: 15px; flex: 0 0 15px; color: var(--on-surface-v); transition: transform .25s var(--ease) }
.ai-topbar-title.open .chev { transform: rotate(180deg) }

/* Yeni sohbet: genel gri iconbtn yerine AI kontrolleriyle aynı iki tonlu
   line dili. Konuşma gövdesi nötr, yeni eylemini anlatan + amberdir. */
#aiClear.ai-new-chat{
  width:44px;height:44px;border-radius:15px;
  background:color-mix(in srgb,var(--accent) 11%,var(--surface-1));
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  color:var(--text-2);box-shadow:none;
}
#aiClear.ai-new-chat .ic{width:21px;height:21px;--ki-focus:var(--accent)}

/* Sohbet listesi menüsü (Material menu yüzeyi) */
.ai-chats { position: absolute; top: calc(100% + 6px); left: 50%; transform: translate(-50%, 0); width: min(340px, calc(100% - 24px)); max-height: min(340px, 55vh); overflow-y: auto; background: var(--sc-high); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 60; animation: aiMenuIn .22s var(--ease) both }
.ai-chats.hide { display: none }
@keyframes aiMenuIn { from { opacity: 0; transform: translate(-50%, -8px) scale(.97) } to { opacity: 1; transform: translate(-50%, 0) scale(1) } }
.ai-chat-item { display: flex; align-items: center; border-radius: var(--r-md) }
.ai-chat-item.on { background: color-mix(in srgb, var(--primary) 13%, transparent) }
.ai-chat-open { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: none; border: 0; cursor: pointer; padding: 9px 12px; border-radius: var(--r-md); font-family: inherit; text-align: left; color: var(--on-surface) }
.ai-chat-open:hover { background: color-mix(in srgb, var(--on-surface) 7%, transparent) }
.ai-chat-open:focus-visible, .ai-chat-del:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px }
.ai-chat-open .t { font-weight: 600; font-size: .92rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ai-chat-open .d { font-size: .76rem; color: var(--on-surface-v) }
.ai-chat-del { flex: 0 0 36px; height: 36px; display: grid; place-items: center; background: none; border: 0; border-radius: 99px; color: var(--on-surface-v); cursor: pointer; margin-right: 4px; transition: color .2s, background .2s }
.ai-chat-del:hover, .ai-chat-del:focus-visible { color: var(--error); background: color-mix(in srgb, var(--error) 12%, transparent) }
.ai-chat-del .ic { width: 17px; height: 17px }
.ai-chats-empty { padding: 16px; text-align: center; color: var(--on-surface-v); font-size: .88rem }

/* Avatar alanı: sakin sahnenin çevresinde sabit ve geniş boşluk. */
.ai-avatar-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 14px 10px;
  background: var(--surface);
  z-index: 5;
  position: relative;
  flex: 0 0 auto;
}

/* İnce, hareketsiz çerçeve; hareketi maskotun kendi nefes animasyonu taşır. */
.ai-avatar-frame {
  /* GENİŞ DİKDÖRTGEN çerçeve: eski çemberin dili (kenarlık + yumuşak
     gölge) korunur, yalnız biçim değişir. Daire, odanın raf hattını ve
     kenarlardaki eşyaları kırpıyordu; dikdörtgen onları açıyor.
     Uçtan uca YAPILMADI — çerçeve, sahneyi sohbetin içinde bir "pencere"
     olarak tutuyor ve maskot onun ortasında duruyor. */
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card);
  position: relative;
  background: var(--surface);
  border: 5px solid var(--surface-2);
  box-shadow:0 1px 2px color-mix(in srgb,var(--text-1) 7%,transparent);

  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0); 
}

/* Çok hafif iç sınır, dairesel kırpmayı tanımlar. */
.ai-avatar-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
  pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--text-1) 8%,transparent);
  z-index: 10; 
}

.ai-bodywrap{flex:1;display:flex;min-height:0}
#aiBody {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 13px 4px 15px 16px; /* sağ boşluk ray sütununa bırakıldı */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Sayfalı görünüm: her seferinde tek soru-cevap turu gösterilir */
.ai-page{display:flex;flex-direction:column;gap:12px;min-height:100%}
.ai-page.slide-up-in{animation:aiPageUp .3s var(--ease) both}
.ai-page.slide-down-in{animation:aiPageDown .3s var(--ease) both}
@keyframes aiPageUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes aiPageDown{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
/* Dikey tur rayı: her tur bir baloncuk; aktif olan büyür, limite yaklaşınca uyarır */
#aiRail{flex:0 0 26px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:8px 0}
#aiRail:empty{display:none}
.ai-dot{width:8px;height:8px;border-radius:99px;border:0;padding:0;background:var(--outline-v);cursor:pointer;transition:background .2s,transform .2s}
.ai-dot.new{animation:aiDotPop .45s var(--spring) both}
.ai-dot.on{background:var(--primary);transform:scale(1.5)}
.ai-dot.warn{background:var(--error);animation:aiDotWarn 1.4s var(--ease) infinite}
.ai-dot.new.warn{animation:aiDotPop .45s var(--spring) both,aiDotWarn 1.4s var(--ease) .45s infinite}
@keyframes aiDotPop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes aiDotWarn{0%,100%{opacity:.55}50%{opacity:1}}
.ai-msg{max-width:85%;padding:10px 13px;border-radius:16px;font-size:.91rem;line-height:1.5;white-space:pre-wrap;word-wrap:break-word;animation:aiMsgIn .28s var(--ease) both}
@keyframes aiMsgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ai-msg.user{align-self:flex-end;background:var(--primary);color:var(--on-primary);border-bottom-right-radius:6px}
.ai-msg.bot{align-self:flex-start;background:var(--sc-high);color:var(--on-surface);border-bottom-left-radius:6px}
.ai-msg.bot b{color:var(--primary)}
.ai-msg.bot code{background:color-mix(in srgb,var(--on-surface) 10%,transparent);padding:1px 5px;border-radius:6px;font-size:.88em}
.ai-msg.err{background:var(--error-c);color:var(--on-error-c)}
.ai-msg.typing{display:flex;gap:5px;align-items:center}
.ai-msg.typing i{width:7px;height:7px;border-radius:99px;background:var(--on-surface-v);opacity:.5;animation:aiDot 1.2s var(--ease) infinite}
.ai-msg.typing i:nth-child(2){animation-delay:.18s}.ai-msg.typing i:nth-child(3){animation-delay:.36s}
.ai-msg.limit{align-self:center;max-width:92%;text-align:center;font-size:.85rem;background:transparent;color:var(--on-surface-v);border:1px dashed color-mix(in srgb,var(--on-surface) 30%,transparent)}
/* Yapay zekâ içeriğini bildir — her model yanıtının altında (Google Play
   "AI-Generated Content" şartı). Balonun kendisi white-space:pre-wrap olduğu
   için düğme kendi akışını geri alır. Metin mikro etiket tabanında (.7rem)
   kalır: sohbeti bölmemeli ama bulunabilir olmalı. Dokunma hedefi 32px —
   balonun içindeki ikincil eylem, birincil kontrol değil. */
.ai-msg .ai-report{
  display:inline-flex;align-items:center;gap:5px;white-space:normal;
  margin:8px 0 0;padding:5px 9px 5px 7px;min-height:32px;
  border-radius:99px;border:1px solid var(--line);background:transparent;
  /* --text-3 (soluk) denendi: koyu temada balon zeminine karşı 4.49 veriyor,
     yani AA eşiğinin (4.5) altında. Sessizlik bir basamak yukarıdan, --text-2
     ile veriliyor — proje kuralı gereği opaklık düşürerek değil. */
  color:var(--text-2);font-size:.7rem;font-weight:600;line-height:1;
  transition:color .18s,border-color .18s,background .18s;
}
.ai-msg .ai-report .ic{width:14px;height:14px}
.ai-msg .ai-report:hover:not(:disabled),
.ai-msg .ai-report:focus-visible{color:var(--text-1);border-color:var(--line-2)}
.ai-msg .ai-report:active:not(:disabled){transform:scale(.96)}
.ai-msg .ai-report.done{color:var(--ok-fg);border-color:color-mix(in srgb,var(--ok-fg) 40%,transparent);opacity:1}
.ai-report-err a{color:var(--accent-ink);font-weight:600}
#aiClear.attn{color:var(--primary);border-radius:99px;animation:lnodeGlow 1.7s var(--ease) infinite}
@keyframes aiDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.ai-empty{margin:0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 14px 16px}
.ai-empty .ai-ava{width:60px;height:60px;flex:0 0 60px}
.ai-empty .ai-ava .ic{width:32px;height:32px}
/* Stage — sakin ama malzeme ayrımı güçlü çalışma odası Canvas tarafında çizilir. */

/* HTML Canvas (maskotun arkasında) */
.ai-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: var(--r-card);
}

/* Stage — çerçeve: boyutlandırma + dairesel kırpma sağlar, arka planı yok */
.ai-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--r-card);
  overflow: hidden;
  display: block !important; /* Çökmeyi engeller */
  transition: background 1.4s var(--ease);
}
/* Katman Sıralaması */
.ai-canvas  { z-index: 3; }
.ai-mascot  { z-index: 4; }

/* Maskot (Canvas Üstünde) - Kesin Ortalama */
.ai-mascot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4%; /* Çerçevenin en alt kavisinden doğal şekilde kesilmesi için */
  margin: 0 auto; 
  width: 90%;
  height: 90%;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.16));
}

.ai-mascot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center; /* Çemberin tam alt ortasında durur */
  transform-origin: 50% 95%; /* Nefes alma animasyonunun dipten çalışması için */
  display: block;
}

/* Maskot Animasyonları (TranslateX çakışmaları giderildi) */
@media(prefers-reduced-motion:no-preference){
  .ai-mascot[data-app="idle"] img { animation: mBreathe 3.5s ease-in-out infinite; }
  .ai-mascot[data-app="thinking"] img { animation: mLean 2.2s ease-in-out infinite; }
  .ai-mascot[data-app="typing"] img { animation: mBob .8s ease-in-out infinite; }
  .ai-mascot[data-app="error"] img { animation: mShake .5s ease-in-out; }
}

@keyframes mBreathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.008) translateY(-0.5%); } 
}
/* Salınım ±1.5°/2.2s idi ve sürekli dönüyordu; küçük ekranda maskot
   "sallanıyor" gibi okunuyordu. Genlik yarıya indi, süre uzadı. */
@keyframes mLean {
  0%, 100% { transform: rotate(-0.7deg); }
  50% { transform: rotate(0.7deg); }
}
/* mBob ARTIK KULLANILMIYOR (aşağıya bak) ama tanımı duruyor: başka bir
   durum için gerekirse genliği/süresi burada zaten sakinleştirilmiş. */
@keyframes mBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.8%); }
}
@keyframes mShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3%); }
  40% { transform: translateX(2.5%); }
  60% { transform: translateX(-2%); }
  80% { transform: translateX(1.5%); }
}

.ai-empty h3{margin:0;font-size:1.15rem}
.ai-greet-wave{display:inline-grid;place-items:center;width:1.12em;height:1.12em;margin-left:.06em;vertical-align:-.2em}
.ai-greet-wave .word-art{width:100%;height:100%}
.ai-empty p{margin:0;color:var(--on-surface-v);font-size:.9rem;max-width:280px}
/* ---- Karşılama ekranı önerileri ------------------------------------
   istek: öneriler YALNIZCA ilk karşılama ekranında ve karşılama metninin
   ALTINDA listelenir (çip barı orada gizlenir). "İngilizce Pratik Yapalım!"
   vurgulu ana karttır; diğerleri katmanlı ders simgeli sade kutucuklardır. */
.ai-welcome{width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:2px}
.aiw-defs{position:absolute;width:0;height:0;overflow:hidden}
/* Her öneri kendi başına duran tek satırlık bir etiket-çip: simge + metin.
   Genişlik içeriğe göre; çipler satır satır sarmalanır ve her satır kendi
   içinde ortalanır (son satır ortada kalır). */
.ai-wsug{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;
  padding:5px 11px 5px 5px;border-radius:999px;
  background:var(--sc-high);color:var(--on-surface);border:1px solid var(--outline-v);
  font-size:.77rem;font-weight:600;line-height:1.3;
  transition:transform .15s var(--spring),background .2s,border-color .2s,box-shadow .2s;
}
.ai-wsug:hover{background:var(--sc-highest);border-color:var(--outline)}
.ai-wsug:active{transform:scale(.95)}
.ai-wico{flex:0 0 22px;width:22px;height:22px;display:block;filter:none}
.ai-wico svg{display:block;width:100%;height:100%}
.ai-wico-svg{width:100%;height:100%}
/* Dolu aksan zemininde (turuncu CTA) ikonun sakin düzlemi %32 opaklıkta
   yıkanıp kayboluyor, amber aksan da amberin üstüne düşüyordu — ikon tek düz
   leke okunuyordu. Bu kaplarda düzlem güçlendirilir, aksan aynı hue'nun koyu
   tonuna çevrilir. */
.ai-chip.glow .ic,.ai-wsug.hero .ic,.ai-send .ic{
  --ki-plane-opacity:.58;
  --ki-focus:color-mix(in srgb,var(--accent) 46%,#2A1400);
  --ki-focus-opacity:1;
}
.ai-wlabel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-wlist{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
/* Vurgulu ana öneri: diğer etiketlerle aynı hap dilinde ama dolu aksan
   yüzeyi + eşleşen parıltıyla öne çıkan, kendi satırında duran çip. */
.ai-wsug.hero{
  padding:6px 12px 6px 6px;border:none;color:var(--on-primary);font-size:.86rem;font-weight:800;
  background:var(--accent);
  box-shadow:0 10px 22px -14px color-mix(in srgb,var(--primary) 90%,transparent);
}
.ai-wsug.hero:hover{background:var(--accent);filter:brightness(1.04)}
.ai-wsug.hero .ai-wico{
  flex:0 0 28px;width:28px;height:28px;padding:2px;border-radius:999px;
  background:color-mix(in srgb,var(--surface) 26%,transparent);
}
.ai-wgo{width:16px;height:16px;flex:0 0 16px;opacity:.75}
@media(prefers-reduced-motion:no-preference){.ai-wsug.hero{animation:aiHeroGlow 2.6s var(--ease) infinite alternate}}
@keyframes aiHeroGlow{
  0%{box-shadow:0 12px 26px -16px color-mix(in srgb,var(--primary) 90%,transparent)}
  100%{box-shadow:0 12px 30px -11px color-mix(in srgb,var(--primary) 66%,transparent)}
}
/* 5 sn gönderim aralığı: bekleme boyunca öneriler sönük ve tıklanamaz */
.ai-welcome.cool .ai-wsug,.ai-chips.cool .ai-chip{opacity:.5;pointer-events:none}
.ai-suggest{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:4px}
.ai-suggest button{padding:9px 14px;border-radius:999px;background:var(--sc-high);color:var(--on-surface);font-size:.82rem;font-weight:600;transition:background .2s,transform .15s var(--spring)}
.ai-suggest button:active{transform:scale(.95)}
/* Bağlama duyarlı öneri çipleri: metin kutusunun ÜSTÜNDE tek bir "dock" olarak
   kompozerle birleşir — üstte tek ayraç çizgisi, altında çipler + giriş satırı. */
.ai-dock{flex:0 0 auto;border-top:1px solid color-mix(in srgb,var(--outline-v) 60%,transparent);background:var(--surface)}
.ai-chips{
  display:flex;gap:8px;overflow-x:auto;padding:10px 16px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 18px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 18px),transparent);
}
.ai-chip{
  flex:0 0 auto;padding:8px 14px;border-radius:999px;white-space:nowrap;
  background:var(--sc-high);color:var(--on-surface);border:1px solid var(--outline-v);
  font-size:.82rem;font-weight:600;line-height:1;
  transition:transform .15s var(--spring),background .2s,border-color .2s;
}
.ai-chip:hover{background:var(--sc-highest);border-color:var(--outline)}
.ai-chip:active{transform:scale(.94)}
/* AI'nın ürettiği hızlı yanıt çipleri (sorulara örnek cevaplar / takip soruları):
   "dokun ve cevapla" hissi için hafif primary tonu */
.ai-chip.dyn{background:color-mix(in srgb,var(--primary) 14%,var(--sc-high));border-color:color-mix(in srgb,var(--primary) 35%,var(--outline-v))}
.ai-chip.dyn:hover{background:color-mix(in srgb,var(--primary) 22%,var(--sc-high))}

.ai-chip.glow {
  background: var(--accent);
  color: var(--on-primary);
  border: none;
  animation: chipPulse 1.5s infinite alternate;
}
@keyframes chipPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 22%, transparent); transform: scale(1); }
  100% { box-shadow: 0 0 0 4px transparent; transform: scale(1.015); }
}

.ai-composer{display:flex;gap:10px;align-items:flex-end;padding:10px 14px 7px}
.ai-note{margin:0;padding:0 16px calc(10px + env(safe-area-inset-bottom));text-align:center;font-size:.72rem;font-weight:600;color:var(--on-surface-v)}
.ai-note a{color:inherit;font-weight:700;text-decoration:underline}
#aiInput{flex:1;min-width:0;width:100%;resize:none;max-height:120px;padding:11px 14px;border-radius:20px;background:var(--sc-low);border:2px solid var(--outline-v);font-family:inherit;font-size:.92rem;line-height:1.4;color:var(--on-surface);outline:none;transition:border-color .2s}
#aiInput::placeholder{color:var(--on-surface-v);font-family:inherit}
#aiInput:focus{border-color:var(--primary)}
.ai-send{position:relative;width:44px;height:44px;flex:0 0 44px;border-radius:999px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 9%,var(--surface-1));color:var(--text-1);border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);box-shadow:none;transition:transform .15s var(--spring),opacity .2s,background .2s,color .2s,border-color .2s}
.ai-send .ic{width:20px;height:20px;color:inherit;--ki-focus:var(--accent);transition:opacity .2s}
.ai-send:active{transform:scale(.9)}
.ai-send:disabled{opacity:1;background:var(--surface-2);color:var(--text-2);border-color:var(--line);filter:none;box-shadow:none}
.ai-send:disabled .ic{--ki-focus:var(--text-3)}
/* Gönderim aralığı: uçak yerine kalan saniye */
.ai-send.cooling:disabled{opacity:.72}
.ai-send.cooling .ic{opacity:0}
.ai-send.cooling::after{content:attr(data-cd);position:absolute;inset:0;display:grid;place-items:center;font-size:.92rem;font-weight:800;font-variant-numeric:tabular-nums}
/* Voice input (speech-to-text) button */
.ai-mic{width:44px;height:44px;flex:0 0 44px;border-radius:999px;display:grid;place-items:center;background:var(--surface-1);border:1px solid var(--line);color:var(--text-2);box-shadow:none;transition:transform .15s var(--spring),background .2s,color .2s,border-color .2s}
.ai-mic .ic{width:20px;height:20px;color:inherit;--ki-focus:var(--accent)}
.ai-mic:active{transform:scale(.9)}
.ai-mic.hide{display:none}
.ai-mic.listening{background:var(--error);color:var(--on-error);animation:aiMicPulse 1.3s var(--ease) infinite}
@keyframes aiMicPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--error) 28%,transparent)}50%{box-shadow:0 0 0 5px transparent}}
/* ============ Görevler (senaryo görevleri) ============ */
/* Öğren > Görevler sekmesindeki görev kartları — ders kartıyla aynı dil (.card) */
.tkcard{display:block;text-align:left;width:100%}
.tkcard .bigemoji{transition:filter .2s,background .2s}
.tkcard .lesson-art{width:36px;height:36px}
.tkgo{
  width:44px;height:44px;flex:0 0 44px;border-radius:999px;display:grid;place-items:center;
  background:var(--surface-2);
  border:1px solid var(--card-bd);color:var(--primary);box-shadow:var(--shadow);
  transition:transform .15s var(--spring),background .25s,color .25s;
}
.tkgo .ic{width:19px;height:19px}
.tkcard:active .tkgo{transform:scale(.9)}
.tkcard.lock .tkgo{color:var(--on-surface-v);opacity:.72}
.tkcard.done .tkgo{background:var(--surface-2);color:var(--primary)}
.tkcard.done .bigemoji{background:var(--wa-well)}
.tkcard.lock{opacity:.72}
.tkcard.lock .bigemoji{filter:none;opacity:.72}
.tkc-foot{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:11px}
.tkxp{font-size:.72rem;font-weight:800;color:var(--tertiary);background:color-mix(in srgb,var(--tertiary) 15%,transparent);padding:3px 9px;border-radius:999px}
.tkc-lv{font-size:.7rem;font-weight:800;letter-spacing:.06em;color:var(--on-surface-v);border:1px solid var(--outline-v);padding:3px 8px;border-radius:999px}
.tkbest{margin-left:auto;font-size:.78rem;font-weight:800;color:var(--primary);display:inline-flex;align-items:center;gap:4px}
.tkbest .ic{width:15px;height:15px}
.tkc-req{display:flex;align-items:center;gap:7px;font-size:.74rem;font-weight:700;color:var(--on-surface-v);background:var(--sc-high);border-radius:var(--r-sm);padding:7px 10px;line-height:1.3;margin-top:10px}
.tkc-req .ic{width:15px;height:15px;flex:0 0 15px}
.tk-empty{text-align:center;padding:30px 18px;color:var(--on-surface-v)}
/* Oturum sonu cevap özeti (kontrol ekranı) */
.tkrevlist{display:flex;flex-direction:column;gap:8px}
.tkrev{background:var(--sc-low);border:1px solid var(--outline-v);border-radius:var(--r-md);padding:10px 12px}
.tkrev-q{font-size:.74rem;font-weight:700;color:var(--on-surface-v);margin-bottom:3px}
.tkrev-a{display:flex;gap:7px;font-size:.95rem;font-weight:600;line-height:1.35;color:var(--on-surface)}
.tkrev-ic{opacity:.7}
/* Görev oturumu overlay */
.tkTop{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(14px + env(safe-area-inset-top)) 18px 4px}
.tkTitle{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;font-size:1rem;font-weight:700;max-width:58%;justify-content:center;pointer-events:none}
.tkTitleArt{display:grid;place-items:center;flex:0 0 23px}
.tkTitleArt .lesson-art{width:23px;height:23px}
.tkTitle b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkTop .stagepips{flex:0 0 auto}
/* Yuvarlatılmış dikdörtgen sahne çerçevesi (AI penceresindeki dairenin muadili) */
.tkFrame{position:relative;flex:0 0 auto;margin:6px 16px 0;aspect-ratio:16/10;max-height:38dvh;border-radius:var(--r-xl);border:7px solid var(--sc-high);overflow:hidden;isolation:isolate;transform:translateZ(0);background:var(--sc-low);box-shadow:var(--shadow)}
.tkFrame::after{content:"";position:absolute;inset:0;border-radius:calc(var(--r-xl) - 7px);pointer-events:none;box-shadow:inset 0 6px 20px rgba(0,0,0,.18);z-index:10}
.tkStage{position:absolute;inset:0}
.tk-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.tk-mascot{position:absolute;left:var(--tk-actor-x,53%);right:auto;bottom:var(--tk-actor-bottom,-3%);width:var(--tk-actor-width,47%);height:var(--tk-actor-height,90%);z-index:4;display:flex;justify-content:center;align-items:flex-end;pointer-events:none;filter:drop-shadow(0 6px 12px rgba(0,0,0,.28));transition:left .35s var(--ease),width .35s var(--ease),bottom .35s var(--ease)}
.tk-mascot img{width:100%;height:100%;object-fit:contain;object-position:bottom center;transform-origin:50% 95%;display:block}
@media(prefers-reduced-motion:no-preference){
  .tk-mascot[data-app="idle"] img{animation:mBreathe 3.5s ease-in-out infinite}
  .tk-mascot[data-app="thinking"] img{animation:mLean 3.6s ease-in-out infinite}
  /* "typing" = KULLANICI cevabını yazıyor. Burada maskot 0.8sn'de bir
     -2.5% zıplıyordu (mBob): göz yazı alanındayken yanındaki figürün
     sürekli sıçraması dikkat dağıtıyor. Yazarken maskot idle ile aynı
     sakin nefes alma hareketini kullanır — canlı kalır, yarışmaz. */
  .tk-mascot[data-app="typing"] img{animation:mBreathe 4.5s ease-in-out infinite}
  .tk-mascot[data-app="error"] img{animation:mShake .5s ease-in-out}
}
/* Konuşma balonları — maskotun yanında sırayla belirir; en yeni balonun sağ-alt
   köşesinde kediye dönük bir kuyruk vardır (kedi ile balonu ilişkilendirir).
   Kapsayıcı tıklama almaz; sahneye dokununca ileri geçilmez. */
.tkBubbles{position:absolute;left:11px;top:12px;right:38%;z-index:6;display:flex;flex-direction:column;gap:7px;align-items:flex-start;pointer-events:none}
.tkFrame[data-actor-side="left"] .tkBubbles{left:38%;right:11px;align-items:flex-end}
.tkb{position:relative;max-width:100%;padding:8px 12px;border-radius:15px;border-bottom-right-radius:6px;background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--on-surface);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);box-shadow:0 4px 14px rgba(0,0,0,.18);font-size:.86rem;font-weight:600;line-height:1.34;animation:tkbIn .32s var(--spring) both}
.tkb.fact{background:color-mix(in srgb,var(--primary) 18%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 45%,transparent);font-weight:700}
@keyframes tkbIn{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
.tkb.old{opacity:.5;font-size:.79rem;padding:6px 11px}
.tkb.tip::after{content:"";position:absolute;right:-6px;bottom:5px;width:0;height:0;border:7px solid transparent;border-left-color:color-mix(in srgb,var(--surface) 92%,transparent);border-right:0}
.tkb.fact.tip::after{border-left-color:color-mix(in srgb,var(--primary) 18%,var(--surface))}
.tkFrame[data-actor-side="left"] .tkb.tip::after{left:-6px;right:auto;border-left:0;border-right:7px solid color-mix(in srgb,var(--surface) 92%,transparent)}
.tkFrame[data-actor-side="left"] .tkb.fact.tip::after{border-right-color:color-mix(in srgb,var(--primary) 18%,var(--surface))}
/* Görev gövdesi: yönerge + bağlamsal yazma alanı + sonuç */
.tkBody{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:14px 18px calc(14px + env(safe-area-inset-bottom))}
.tkgoal{display:flex;gap:7px;font-size:.82rem;font-weight:700;color:var(--on-surface-v);line-height:1.35}
.tkrole-note{display:flex;align-items:flex-start;gap:7px;padding:8px 10px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--primary) 10%,var(--sc-low));color:var(--on-surface-v);font-size:.74rem;font-weight:700;line-height:1.35}
/* Durum/dosya kartı — olgu balonda değil BURADA durur. "own" görevlerinde hiç çizilmez.
   .brief (B1/B2 pozisyon görevleri) daha belirgin: veriye bakarak yazılıyor. */
.tkcase{display:flex;align-items:flex-start;gap:8px;padding:9px 11px;border-radius:var(--r-sm);
  background:var(--sc-low);border:1px solid var(--card-bd);color:var(--on-surface);
  font-size:.8rem;line-height:1.42}
.tkcase b{flex:0 0 auto;font-size:.7rem;font-weight:800;letter-spacing:.02em;opacity:.72;padding-top:1px}
.tkcase span{font-weight:600}
.tkcase.brief{background:color-mix(in srgb,var(--acc) 9%,var(--sc-low));
  border-color:color-mix(in srgb,var(--acc) 26%,transparent);
  border-left:3px solid color-mix(in srgb,var(--acc) 58%,transparent)}
.tkq{font-size:.98rem;font-weight:800;letter-spacing:-.01em;line-height:1.3}
/* Yazma alanı */
.tkcompose{display:flex;flex-direction:column;gap:8px}
.typebox{width:100%;resize:none;min-height:54px;max-height:130px;padding:12px 15px;border-radius:18px;background:var(--sc-low);border:2px solid var(--outline-v);font-family:inherit;font-size:.95rem;line-height:1.4;color:var(--on-surface);outline:none;transition:border-color .2s}
.typebox:focus{border-color:color-mix(in srgb,var(--acc) 65%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)}
.typebox::placeholder{color:var(--on-surface-v)}
.tkgh{position:relative}
.tkgh-mirror{position:absolute;inset:0;padding:12px 15px;border:2px solid transparent;border-radius:18px;font-family:inherit;font-size:.95rem;line-height:1.4;white-space:pre-wrap;word-wrap:break-word;overflow:hidden;pointer-events:none;box-sizing:border-box;z-index:2}
.tkgh-typed{color:transparent}
.tkgh-hint{color:var(--on-surface-v);opacity:.68;pointer-events:auto;cursor:pointer;border-radius:4px}
.tkgh-input{background:transparent;position:relative;z-index:1}
.tkgh-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tkrow{display:flex;align-items:center;gap:10px}
.tkcount{flex:1;font-size:.72rem;font-weight:700;color:var(--on-surface-v);font-variant-numeric:tabular-nums}
.tkmic{width:44px;height:44px;flex:0 0 44px;border-radius:999px;display:grid;place-items:center;background:var(--sc-high);color:var(--on-surface-v);transition:transform .15s var(--spring),background .2s,color .2s}
.tkmic .ic{width:22px;height:22px}
.tkmic:active{transform:scale(.9)}
.tkmic.hide{display:none}
.tkmic.listening{background:var(--error);color:var(--on-error);animation:aiMicPulse 1.3s var(--ease) infinite}
.tkcont{display:flex;justify-content:flex-end;gap:10px;align-items:center}
/* Değerlendirme beklerken */
.tkwait{display:flex;align-items:center;gap:12px;color:var(--on-surface-v);font-size:.92rem;font-weight:600;padding:10px 0}
.tkwait .dots{display:flex;gap:5px}
.tkwait .dots i{width:7px;height:7px;border-radius:99px;background:var(--on-surface-v);opacity:.5;animation:aiDot 1.2s var(--ease) infinite}
.tkwait .dots i:nth-child(2){animation-delay:.18s}.tkwait .dots i:nth-child(3){animation-delay:.36s}
/* Sonuç paneli */
.tkres{display:flex;flex-direction:column;gap:11px;animation:aiMsgIn .3s var(--ease) both}
.tkres-head{display:flex;align-items:center;gap:12px}
.tkres-badge{font-size:1.85rem;width:50px;height:50px;flex:0 0 50px;display:grid;place-items:center;background:var(--sc-high);border-radius:16px}
.tkres-meta{min-width:0}
.tkres-ov{font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.tkres-sub{font-size:.85rem;font-weight:700;color:var(--on-surface-v)}
.tkscores{display:flex;flex-direction:column;gap:9px}
.tkscore{display:flex;flex-direction:column;gap:4px}
.tkscore .tks-top{display:flex;justify-content:space-between;font-size:.82rem;font-weight:700}
.tkscore .tks-top b{color:var(--on-surface-v);font-variant-numeric:tabular-nums}
.tkscore .track{height:var(--track-h)}
.tkfeedback{background:var(--sc-low);border:1px solid var(--outline-v);border-radius:var(--r-md);padding:12px 14px;font-size:.9rem;line-height:1.45}
.tkfix{background:color-mix(in srgb,var(--primary) 8%,var(--sc-low));border:1px solid color-mix(in srgb,var(--primary) 25%,var(--outline-v));border-radius:var(--r-md);padding:12px 14px}
.tkfix-lbl{font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--primary);margin-bottom:5px;display:flex;align-items:center;gap:6px}
.tkfix-lbl .ic{width:14px;height:14px}
.tkfix-en{font-size:.95rem;line-height:1.45;font-weight:600;display:flex;align-items:flex-start;gap:8px}
.tkfix-en>span{flex:1}
.tkxpchip{align-self:flex-start;font-size:.88rem;font-weight:800;color:var(--on-primary);background:var(--accent);padding:7px 15px;border-radius:999px}
.tkxpchip.zero{color:var(--on-surface-v);background:var(--sc-high)}
.tkres-actions{display:flex;gap:10px;margin-top:2px}
.tknote{margin:1px 0 0;text-align:center;font-size:.72rem;font-weight:600;color:var(--on-surface-v)}
.tknote a{color:inherit;font-weight:700;text-decoration:underline}
.tkbtn-say{width:32px;height:32px;flex:0 0 32px;border-radius:999px;display:grid;place-items:center;background:var(--sc-high);color:var(--on-surface-v)}
.tkbtn-say .ic{width:17px;height:17px}
/* ============ Desktop (sidebar layout) overrides ============ */
@media(min-width:1024px){
  /* Masaüstü kabuğu: mobil ölçüler ve davranışlar bu kırılımın altında aynen kalır. */
  #app{width:100%;max-width:1040px;padding:0 48px 72px}
  .screen{padding-top:28px}
  .tilegrid{grid-template-columns:repeat(3,1fr)}
  #unitsList{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  #unitsList .unit{margin-bottom:0}
  #unitsList>.card:only-child{grid-column:1/-1}

  /* Sol gezinme telefon çubuğunun büyütülmüş hâli değil, gerçek bir masaüstü rayıdır. */
  #bottomNav{gap:6px;padding:24px 14px 18px}
  #bottomNav .navitem{
    flex:0 0 52px;width:100%;height:52px;min-height:52px;align-self:stretch;
    padding:0 12px;border-radius:18px;
  }
  #bottomNav .navitem:last-child{margin-top:auto}
  #bottomNav #navAiBtn{
    flex:0 0 52px;align-self:stretch;width:100%;max-width:none;height:52px;min-height:52px;
    top:0;margin:0;padding:0 12px;border-radius:18px;justify-content:flex-start;gap:14px;
    color:var(--on-surface-v);background:transparent;border:0;box-shadow:none;filter:none;
  }
  #bottomNav #navAiBtn:hover{transform:none;filter:none;background:color-mix(in srgb,var(--primary) 10%,transparent)}
  #bottomNav #navAiBtn:active{transform:scale(.98)}
  #bottomNav #navAiBtn.is-open{color:var(--primary);background:color-mix(in srgb,var(--primary) 16%,transparent);box-shadow:none}
  #bottomNav #navAiBtn .pill{
    flex:0 0 32px;width:32px;height:32px;border-radius:12px!important;
    color:var(--on-acc);background:var(--acc)!important;
    box-shadow:none;
  }
  #bottomNav #navAiBtn .ai-fab-svg{width:20px;height:20px}
  #bottomNav #navAiBtn:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
  .ai-nav-label{display:inline;font-size:.95rem;font-weight:700;white-space:nowrap}

  /* Tam ekran akışlar kalan masaüstü alanını gerçekten kaplar. */
  .overlay{
    left:248px;right:0;top:0;bottom:0;max-width:none;width:auto;margin:0;
    box-shadow:none;border-left:1px solid color-mix(in srgb,var(--outline-v) 42%,transparent);
  }

  /* Ders oturumu: geniş ekranda okunabilir, ortalanmış bir çalışma alanı. */
  #lesson.overlay.open{
    display:grid;grid-template-rows:auto minmax(0,1fr) auto;
    padding:18px clamp(24px,5vw,72px) 24px;
  }
  #lesson .lTop{width:100%;max-width:900px;margin:0 auto;padding:0 0 14px}
  #lesson #exBody{width:100%;max-width:760px;margin:0 auto;padding:18px 8px 20px}
  #lesson .lBottom{width:100%;max-width:760px;margin:0 auto;padding:14px 8px 0}
  #lesson .opts{gap:10px}
  #lesson .opt{padding:15px 18px}
  #lesson .opt.right,#lesson .opt.wrong{padding-right:52px}
  #lesson .flash .fem{width:126px;height:126px}
  #lesson #feedback{
    left:50%;right:auto;width:min(760px,calc(100% - 64px));border-radius:28px 28px 0 0;
    transform:translate(-50%,105%);
  }
  #lesson #feedback.show{transform:translate(-50%,0)}

  /* AI: sahne ve konuşma alanı yan yana; mesaj girişi konuşma kolonuna bağlıdır. */
  #aiChat.overlay.open{
    display:grid;grid-template-columns:minmax(260px,360px) minmax(360px,700px);
    grid-template-rows:auto minmax(0,1fr) auto;justify-content:center;
    column-gap:24px;padding:24px 32px 28px;
  }
  #aiChat .ai-topbar{grid-column:1/-1;grid-row:1;padding:0 0 14px;background:transparent}
  #aiChat .ai-avatar-wrapper{
    grid-column:1;grid-row:2/4;align-self:start;padding:16px;
    background:var(--card-bg);border:1px solid var(--card-bd);border-radius:var(--r-xl);
    box-shadow:var(--shadow);overflow:hidden;
  }
  #aiChat .ai-avatar-frame{width:100%;aspect-ratio:1/1}
  #aiChat .ai-bodywrap{
    grid-column:2;grid-row:2;min-height:0;background:var(--sc-low);
    border:1px solid var(--card-bd);border-bottom:0;border-radius:var(--r-xl) var(--r-xl) 0 0;
  }
  #aiChat #aiBody{padding:20px 10px 18px 20px}
  #aiChat .ai-empty{justify-content:center;min-height:100%;padding:22px}
  #aiChat .ai-empty p{max-width:440px}
  #aiChat .ai-welcome{max-width:440px}
  #aiChat .ai-msg{max-width:78%}
  #aiChat .ai-dock{
    grid-column:2;grid-row:3;background:var(--sc-low);border:1px solid var(--card-bd);
    border-top-color:color-mix(in srgb,var(--outline-v) 60%,transparent);
    border-radius:0 0 var(--r-xl) var(--r-xl);overflow:hidden;
  }
  #aiChat .ai-note{padding-bottom:12px}

  /* Senaryo görevleri geniş ekranda sahne + yanıt çalışma alanı olarak açılır. */
  #taskRun.overlay.open{
    display:grid;grid-template-columns:minmax(280px,.9fr) minmax(360px,1.1fr);
    grid-template-rows:auto minmax(0,1fr);justify-content:center;gap:18px 22px;
    padding:24px 32px 28px;
  }
  #taskRun .tkTop{grid-column:1/-1;grid-row:1;width:100%;max-width:1080px;justify-self:center;padding:0 2px 4px}
  #taskRun .tkFrame{grid-column:1;grid-row:2;width:100%;max-height:min(520px,calc(100dvh - 116px));margin:0;align-self:start}
  #taskRun .tkBody{
    grid-column:2;grid-row:2;align-self:stretch;padding:20px;max-height:calc(100dvh - 98px);
    background:var(--card-bg);border:1px solid var(--card-bd);border-radius:var(--r-xl);box-shadow:var(--shadow);
  }

  /* Rapor ve paylaşım katmanları genişler ama satır uzunluğu kontrollü kalır. */
  #monthsOverlay.overlay.open,#reportOverlay.overlay.open,#shareOverlay.overlay.open{padding:20px 32px 28px}
  .mo-top,.mo-scroll,.mo-share-scroll{width:100%;max-width:920px;margin-left:auto;margin-right:auto}

  /* Alt sayfa masaüstünde merkez modal; uyarı diyalogları daha ferah. */
  #sheet{
    left:calc(50% + 124px);right:auto;top:50%;bottom:auto;
    width:min(620px,calc(100vw - 312px));max-width:none;max-height:min(80dvh,720px);margin:0;
    border:1px solid var(--card-bd);border-radius:var(--r-xl);padding:24px 26px;
    opacity:0;pointer-events:none;transform:translate(-50%,-46%) scale(.97);
    transition:opacity .22s var(--ease),transform .3s var(--ease);box-shadow:var(--shadow-lg);
  }
  #sheet.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
  #sheet .grab{display:none}
  #sheet .popclose{top:16px;right:16px}
  .dlg{left:248px;padding:34px}
  .dlgcard{max-width:440px;padding:26px}
  #toast{left:calc(50% + 124px);bottom:32px;max-width:min(520px,70vw)}
}
/* ============ Onboarding (ilk kurulum — sistem/açık/koyu tema duyarlı) ============ */
#onb{position:fixed;inset:0;z-index:75;background:var(--surface);display:flex;flex-direction:column;align-items:center}
/* Kapanış: katman yukarı süzülerek çekilir, altındaki ana ekranın `rise`
   girişi görünür kalsın diye de gecikmeli başlar (bkz. app.js finishOnboarding). */
#onb.closing{opacity:0;transform:translateY(-10px);transition:opacity .34s var(--ease),transform .34s var(--ease);pointer-events:none}
.onb-wrap{width:100%;max-width:520px;flex:1;display:flex;flex-direction:column;min-height:0;padding:0 20px}
@media(min-width:640px){.onb-wrap{max-width:560px;padding:0 32px}}
.onb-top{display:flex;align-items:center;padding:calc(18px + env(safe-area-inset-top)) 2px 6px}
.onb-top .track{flex:1;height:var(--track-h-sm)}
.onb-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-height:0;padding:6px 2px 4px}
/* İçerik dikeyde ortalanır; taşma durumunda auto marginler sıfırlanıp normal kaydırmaya döner */
/* HAREKET DİLİ: dikey. Eskiden `exIn` (translateX 36px) kullanılıyordu — o,
   ders/quiz akışının dili; onboarding uygulama kabuğunun parçası ve kabuk
   dikey hareket ediyor (`rise` 14px, `overlayIn` 24px, `aiPageUp` 26px).
   Yatay kaydırma onboarding'i sınav gibi okutuyordu. Mesafe de kabuğunkiyle
   aynı: 14px. */
.onb-step{display:flex;flex-direction:column;margin:auto 0;animation:onbIn .38s var(--ease) both}
.onb-step.back{animation:onbBack .38s var(--ease) both}
@keyframes onbIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes onbBack{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
/* Footer gövdeyle birlikte gelir; eskiden hiç animasyonu yoktu ve gövde
   kayarken CTA yerinde durup etiketi anında değişiyordu. */
.onb-foot .onb-nav,.onb-foot .onb-skip{animation:onbIn .38s var(--ease) both;animation-delay:.05s}
/* Maskot görselleri saydam zeminli WebP — açık/koyu her temada olduğu gibi gösterilir.
   (Görsellerin içerik GENİŞLİĞİ %52–75 arasında değişiyor ama yükseklikleri
   %94–96 dolu ve kapladıkları ALAN %29.9–35.7 — yani algılanan kütle zaten
   tutarlı. Genişliğe göre telafi ölçeklemesi denendi ve geri alındı: figürler
   dikey olduğu için yüksekliği taşırıyordu.) */
.onb-art{width:min(46vw,186px);aspect-ratio:1;flex:0 0 auto;margin:0 auto 15px}
.onb-art img{
  width:100%;height:100%;object-fit:contain;display:block;
  opacity:0;transition:opacity .2s var(--ease);
}
/* Görsel gövdeyle BİRLİKTE gelir. Eskiden .35s'lik kendi geçişi .4s'lik adım
   animasyonunun üstüne biniyordu: ekrandaki en büyük öğe iki kez, gecikmeli
   giriyordu. Artık yalnızca "yüklendi" anahtarı — hareketi gövde taşır. */
.onb-art img.ld{opacity:1}
/* Görsel hiç yüklenemezse (ağ/dosya hatası) kap tamamen çöker; eskiden
   opacity:0'da kalıp 132–186px'lik boş delik bırakıyordu. */
.onb-art.failed{display:none}
.onb-step.has-opts .onb-art{width:min(32vw,132px);margin:0 auto 14px}
@media(max-height:640px){.onb-step.has-opts .onb-art{width:92px;margin:0 auto 10px}}
/* Geniş ekran: aynı ortalanmış kolon, ölçekleri büyütülmüş */
@media(min-width:768px){
  .onb-wrap{max-width:600px}
  .onb-art{width:250px;margin-bottom:24px}
  .onb-step.has-opts .onb-art{width:180px;margin-bottom:18px}
  .onb-title{font-size:1.55rem}
  .onb-desc{font-size:.98rem;max-width:46ch}
  .onb-splash .onb-art{width:280px}
}
/* 800 ağırlığı bu üründen kalktı; hiyerarşi 500/600/700 ile kurulur (Plus Jakarta
   Sans yalnız ayrık ağırlıklar yükler). Ana ekranın bütün başlıkları 700 —
   onboarding tek istisnaydı. */
.onb-title{font-size:1.34rem;font-weight:700;letter-spacing:-.02em;margin:0 0 7px;text-align:center;color:var(--text-1)}
.onb-title:focus{outline:none}
.onb-desc{margin:0 auto;text-align:center;color:var(--text-2);font-size:.91rem;line-height:1.55;max-width:42ch}

/* ---- Tercih kartları ----
   Bunlar `.opt` (ders/quiz cevap butonu) sınıfını devralıyor; ölçüleri ana
   ekranın kart diline çekilir, çünkü onboarding kabuğun parçası:
   köşe --r-card (14px değil 20px) · dolgu --pad-card · kenarlık aksan tonlu
   ince çizgi (2px beyaz alfa değil) · --elev-1 yükselti. */
.onb-opts{display:flex;flex-direction:column;gap:var(--gap-stack,10px);margin-top:18px}
.onb-opts .opt{
  display:flex;align-items:center;gap:12px;
  padding:12px var(--pad-card,16px);
  border-radius:var(--r-card,20px);
  background:var(--surface-1);
  border:1px solid var(--line-2);
  box-shadow:var(--elev-1);
  transition:border-color .2s,background .2s,box-shadow .2s,transform .15s var(--spring);
}
.onb-opts .opt:active{transform:scale(.985)}   /* quiz refleksi (.97) kart için fazla sertti */
.onb-opts .opt.sel{
  background:var(--accent-soft);
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  box-shadow:var(--elev-1);
}
/* İkon yuvası karttan luminance ile ayrılmalı; --sc-high kart zeminine
   neredeyse eşitti (ölçüm 1.1:1) ve yuva görünmüyordu. */
.onb-opts .opt .oic{width:36px;height:36px;flex:0 0 36px;border-radius:var(--r-tile,12px);background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--accent)}
.onb-opts .opt .oic .ic{width:20px;height:20px}
.onb-opts .opt.sel .oic{background:color-mix(in srgb,var(--accent) 16%,var(--surface-1));border-color:transparent}
.onb-opts .opt .ol{flex:1;min-width:0}
.onb-opts .opt .ot{display:block;font-weight:700;font-size:1rem;line-height:1.25;color:var(--text-1)}
.onb-opts .opt .os{display:block;font-size:.8rem;font-weight:500;color:var(--text-2);margin-top:2px}
.onb-opts .opt.sel .ot{color:var(--accent-ink)}
/* Emphasis TON değiştirerek verilir, opaklık düşürerek değil. Eski
   `color:inherit;opacity:.75` açık temada 3.02:1'e düşüyordu (eşik 4.5). */
.onb-opts .opt.sel .os{color:var(--text-2)}
/* Boş seçim halkası: --outline-v ile kart üstünde 1.36–1.51:1 idi, yani
   pratikte görünmüyordu (WCAG 1.4.11 eşiği 3.0). Kendi tokeni yok, bu yüzden
   metin tonundan türetiliyor. */
.onb-opts .opt .ock{width:22px;height:22px;flex:0 0 22px;border-radius:99px;border:2px solid var(--text-3);display:grid;place-items:center;color:transparent;transition:background .2s,border-color .2s,color .2s}
.onb-opts .opt.sel .ock{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* Tik rengi .ock'tan KALITILAMAZ: `.ki-icon` kendi `color:var(--ki-ink)`
   değerini taşıyor ve kalıtım yerine o kazanıyor. Sonuç, seçilmemiş halkaların
   içinde soluk bir tik görünmesi (seçim durumu okunmuyordu) ve seçili halkada
   tikin kaybolmasıydı. Renk doğrudan ikona verilir. */
.onb-opts .opt .ock .ic{width:12px;height:12px;color:transparent}
.onb-opts .opt.sel .ock .ic{color:var(--on-accent)}
.onb-opts .opt:disabled{opacity:.45;pointer-events:none}
/* Hedef seçimi küçük telefonlarda diğer onboarding adımlarından daha yoğun durmasın. */
@media(max-width:639px){
  .onb-step[data-step="goal"] .onb-opts{gap:8px;margin-top:16px}
  .onb-step[data-step="goal"] .onb-opts .opt{padding:11px 14px;gap:11px}
  .onb-step[data-step="goal"] .onb-opts .oic{width:36px;height:36px;flex-basis:36px}
  .onb-step[data-step="goal"] .onb-opts .oic .ic{width:20px;height:20px}
  .onb-step[data-step="goal"] .onb-opts .ot{font-size:.92rem}
  .onb-step[data-step="goal"] .onb-opts .os{font-size:.75rem}
}
.onb-foot{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;padding:12px 2px calc(18px + env(safe-area-inset-bottom))}
.onb-nav{display:flex;gap:10px}
.onb-nav .btn.filled,.onb-nav .onb-gbtn{flex:1}
.onb-skip{align-self:center}

/* ============ Zorunlu giriş kapısı ============ */
#authGate{position:fixed;inset:0;z-index:80;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;overflow-y:auto}
#authGate.hide{display:none}
.ag-box{width:100%;max-width:340px;display:flex;flex-direction:column;gap:12px;animation:exIn .4s var(--ease) both}
.ag-brand{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:10px;text-align:center}
.ag-brand img{width:64px;height:64px;display:block}   /* köşe SVG'nin içinde — bkz. .onb-brand img */
.ag-brand h1{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;margin:0}
.ag-brand p{margin:0;color:var(--on-surface-v);font-size:.88rem}
.ag-main{gap:10px;min-height:50px;font-size:.94rem}
.ag-main .ic{width:1.35em;height:1.35em}
.ag-mailic{width:64px;height:64px;border-radius:50%;background:var(--secondary-c);color:var(--on-surface);display:grid;place-items:center}
.ag-mailic .ic{width:30px;height:30px}
.ag-back{align-self:center;margin-top:2px}
.ag-err{color:var(--error);font-size:.85rem;font-weight:700;text-align:center;min-height:1.2em;margin:0}
.ag-legal{margin:0;text-align:center;font-size:.78rem;font-weight:600;color:var(--on-surface-v)}
.ag-legal a{color:var(--primary);font-weight:700;text-decoration:none}
.ag-alt{background:none;border:none;color:var(--primary);font-weight:700;font-size:.85rem;cursor:pointer;padding:6px;text-decoration:underline}
/* Google butonu: nötr yüzey. Marka kılavuzu renkli "G" işaretini dolu/renkli
   bir zeminde göstermeyi kabul etmiyor; ayrıca dört renkli logo amber dolgunun
   üstünde zaten leke gibi okunuyordu. */
.onb-gbtn{background:var(--surface-1);border:1px solid var(--line-2);color:var(--text-1);box-shadow:var(--elev-1)}
:root:not([data-theme="dark"]) .onb-gbtn{background:var(--light-surface);border-color:var(--light-border);box-shadow:var(--light-shadow)}
/* Marka işareti currentColor almaz — sabit renkleri korunur (bkz. app-firebase.js
   GOOGLE_MARK). Boyut, yanındaki .ic ailesiyle optik olarak eşitlenir. */
.ag-gmark{width:19px;height:19px;flex:0 0 auto;display:block}
.sicon .ag-gmark{width:20px;height:20px}
.onb-splash{position:absolute;inset:0;z-index:2;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;transition:opacity .45s var(--ease)}
.onb-splash.out{opacity:0;pointer-events:none}
/* SPLASH GİRİŞİ — kademeli. Eskiden yalnız `pop` vardı ve `pop` scale(1)'den
   scale(1)'e gidiyor (aradaki tepe %4.5): yani gerçek bir giriş DEĞİL, hafif
   bir nefes. Marka yazısı ile slogan ise hiç animasyonlu değildi, birden
   beliriyordu. Artık üçü sırayla gelir; hareket dili adımlarınkiyle aynı. */
.onb-splash .onb-art{width:min(62vw,236px);margin:0 0 26px;animation:onbRise .5s var(--spring) both}
.onb-splash .onb-brand{animation:onbRise .5s var(--spring) both;animation-delay:.10s}
.onb-splash .onb-tag{animation:onbRise .5s var(--spring) both;animation-delay:.18s}
@keyframes onbRise{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.onb-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:2rem;letter-spacing:-.03em;color:var(--accent)}
/* Marka karosunun köşesi SVG'nin İÇİNDE çizilir (clipPath rx=112 ≈ %28).
   Buraya ayrıca border-radius yazma: iki maske üst üste binince karonun
   köşesi ikinci kez kesiliyor ve amber kenarda çentik kalıyordu (38px'te
   12px CSS maskesi vs 6.5px SVG köşesi). object-fit de gereksiz — kare,
   opak bir karo. */
.onb-brand img{width:38px;height:38px;display:block}
.onb-tag{color:var(--text-2);font-weight:600;font-size:.95rem;margin-top:6px}

/* Onboarding'in tamamı hareket tercihine saygı duyar. Dosyadaki üç mevcut
   reduced-motion bloğunun hiçbiri bu katmanı kapsamıyordu; her adımda zorunlu
   bir kaydırma vardı. Opaklık geçişleri korunur — yalnız yer değiştirme ve
   ölçek kalkar. */
@media (prefers-reduced-motion:reduce){
  .onb-step,.onb-step.back,
  .onb-foot .onb-nav,.onb-foot .onb-skip,
  .onb-splash .onb-art,.onb-splash .onb-brand,.onb-splash .onb-tag{
    animation:onbFade .01s linear both;animation-delay:0s;
  }
  #onb.closing{transform:none}
  .onb-opts .opt:active{transform:none}
  .onb-top .fill{transition:none}
}
@keyframes onbFade{from{opacity:0}to{opacity:1}}
/* Material You Saat Seçici (24 Saat Sistemi) */
.tp-header { display: flex; justify-content: center; align-items: center; gap: 9px; font-size: 2.9rem; margin-bottom: 18px; font-variant-numeric: tabular-nums; font-weight: 500; }
.tp-box { background: var(--sc-high); border-radius: var(--r-md); padding: 10px 15px; line-height: 1; cursor: pointer; transition: all 0.2s; border: 2px solid transparent; color: var(--on-surface); }
.tp-box.active { background: var(--primary-c); color: var(--on-primary-c); border-color: var(--primary); }
.tp-dial-wrap { position: relative; width: 240px; height: 240px; border-radius: 50%; background: var(--sc-high); margin: 0 auto; user-select: none; touch-action: none; }
.tp-center { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); transform: translate(-50%, -50%); }
.tp-hand { position: absolute; bottom: 50%; left: calc(50% - 1px); width: 2px; height: 38%; background: var(--primary); transform-origin: bottom center; pointer-events: none; transition: transform 0.3s var(--ease), height 0.3s var(--ease); }
.tp-hand::after { content:""; position: absolute; top: -16px; left: -16px; width: 34px; height: 34px; border-radius: 50%; background: var(--primary); z-index: 1; }
.tp-num { position: absolute; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; font-weight: 600; transform: translate(-50%, -50%); cursor: pointer; z-index: 2; transition: color 0.2s; color: var(--on-surface); }
.tp-num.sel { color: var(--on-primary); }
/* ============ XP İlerlemem (sade aylık özet) ============ */
.mo-entry{display:block;width:100%;text-align:left;padding:16px}
/* Kart başlığı kardeşleriyle aynı desende: başlık solda, kontrol sağda.
   `.mo-ic` (38px ikon kutusu) ve `.mo-head-copy` KALDIRILDI — ikon kutusu
   bu kartı "Aktivite" kartından görsel olarak üste çıkarıyordu, eyebrow ise
   sayfa başlığındaki "İLERLEME" kelimesini tekrarlıyordu. */
.mo-entry .mo-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
/* font-size override'ı YOK: kardeş kart başlığıyla (Aktivite) aynı ölçüde
   dursun. 1.04rem idi, tabanı 1.07 — fark görünmüyordu ama iki başlığı
   aynı hizaya getirirken ölçüyü de eşitlemek doğrusu. */
.mo-head h2{margin:0;letter-spacing:-.02em}
.mo-month{
  margin-left:auto;padding:5px 9px;border-radius:999px;background:var(--sc-high);
  color:var(--on-surface-v);font-size:.69rem;font-weight:800;white-space:nowrap;
}
.mo-metrics{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px}
.mo-cur{min-width:0}
.mo-cur .eyebrow{margin-bottom:4px}
.mo-cur b{font-size:2.1rem;font-weight:800;letter-spacing:-.045em;line-height:.95;font-variant-numeric:tabular-nums}
.mo-cur b small{font-size:.78rem;font-weight:800;margin-left:5px;color:var(--on-surface-v);letter-spacing:0}
.mo-week{
  min-width:98px;padding:9px 11px;border-radius:14px;background:color-mix(in srgb,var(--primary) 7%,var(--sc-low));
  border:1px solid color-mix(in srgb,var(--primary) 13%,var(--card-bd));display:flex;flex-direction:column;gap:2px;
}
.mo-week span{font-size:.61rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--on-surface-v)}
.mo-week b{font-size:.88rem;font-weight:800;color:var(--primary);font-variant-numeric:tabular-nums}
.mo-chart-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}
.mo-chart-head .eyebrow{font-size:.65rem}
.mo-active{font-size:.69rem;font-weight:700;color:var(--on-surface-v)}
.mo-entry .bars{height:78px;margin-top:9px;gap:9px}
.mo-entry .bar{gap:4px}
.mo-entry .bar i{max-width:22px;border-radius:6px 6px 3px 3px;background:color-mix(in srgb,var(--primary) 42%,var(--sc-high))}
.mo-entry .bar.today i{background:var(--primary)}
.mo-entry .bar span{display:none}
.mo-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid color-mix(in srgb,var(--outline-v) 42%,transparent);margin-top:12px;padding-top:11px;
}
.mo-cycle{font-size:.69rem;font-weight:600;color:var(--on-surface-v);line-height:1.35}
.mo-latest{flex:0 0 auto;padding:8px 12px;min-height:36px;font-size:.73rem}
.mo-latest .ic{width:15px;height:15px}
@media(max-width:380px){
  .mo-entry{padding:14px}.mo-entry .mo-head{margin-bottom:12px}
  .mo-cur b{font-size:1.92rem}.mo-week{min-width:92px;padding:8px 10px}
  .mo-foot{align-items:flex-start;flex-direction:column}.mo-latest{width:100%}
}

/* Tam ekran aylık grafik overlay */
#monthsOverlay,#reportOverlay,#shareOverlay{z-index:70}
#reportOverlay{z-index:72}#shareOverlay{z-index:74}
.mo-top{display:flex;align-items:center;gap:11px;padding:calc(12px + env(safe-area-inset-top)) 18px 6px}
.mo-top .iconbtn{width:42px;height:42px;flex:0 0 42px}
.mo-top .mo-ttl{min-width:0}
.mo-top .mo-ttl .eyebrow{line-height:1.1}
.mo-top .mo-ttl h2{margin:0;font-size:1.14rem}
.mo-scroll{flex:1;overflow-y:auto;padding:8px 20px calc(24px + env(safe-area-inset-bottom))}
.mo-scroll>*{animation:rise .45s var(--ease) both}
.mo-scroll>*:nth-child(2){animation-delay:.05s}.mo-scroll>*:nth-child(3){animation-delay:.1s}.mo-scroll>*:nth-child(4){animation-delay:.15s}

/* Finans tarzı aylık çubuk grafik */
.mo-chart{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.mbars{display:flex;align-items:flex-end;gap:9px;height:178px;min-width:100%;padding-top:22px}
.mbar{flex:0 0 auto;width:42px;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end;position:relative;background:none;text-align:center}
.mbar .mbar-v{font-size:.72rem;font-weight:800;color:var(--on-surface-v);font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .25s}
.mbar .mbar-col{width:100%;flex:1;display:flex;align-items:flex-end}
.mbar .mbar-fill{width:100%;border-radius:9px 9px 4px 4px;background:var(--primary-c);min-height:6px;transition:height .8s var(--spring),background .3s;position:relative}
.mbar .mbar-lbl{font-size:.68rem;font-weight:800;color:var(--on-surface-v);line-height:1.15}
.mbar .mbar-yr{font-size:.58rem;font-weight:700;opacity:.6}
/* Tamamlanmış aya dokunulabilir */
.mbar.done{cursor:pointer}
.mbar.done:active .mbar-fill{transform:scaleY(.97);transform-origin:bottom}
.mbar.done .mbar-fill{box-shadow:inset 0 -2px 0 rgba(0,0,0,.05)}
/* En yüksek ay — doğal vurgu */
.mbar.best .mbar-fill{background:var(--accent)}
.mbar.best .mbar-v{color:var(--primary)}
.mbar .mo-crown{position:absolute;top:-4px;left:50%;transform:translateX(-50%);color:var(--tertiary)}
.mbar .mo-crown .ic{width:18px;height:18px}
/* Devam eden ay — kilitli/çizgili */
.mbar.cur .mbar-fill{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--primary) 32%,var(--sc-high)) 0 7px,color-mix(in srgb,var(--primary) 18%,var(--sc-high)) 7px 14px);border:1.5px dashed color-mix(in srgb,var(--primary) 55%,transparent)}
.mbar.cur .mbar-lbl{color:var(--primary)}
.mbar.cur .mbar-dot{position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 60%,transparent);animation:moPulse 1.8s var(--ease) infinite}
@keyframes moPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 55%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.mbar.empty .mbar-fill{background:color-mix(in srgb,var(--on-surface) 10%,transparent)}
.mo-baseline{height:1px;background:var(--outline-v);margin-top:-1px}
.mo-chart-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:11px;font-size:.74rem;color:var(--on-surface-v);font-weight:700}
.mo-chart-legend span{display:inline-flex;align-items:center;gap:6px}
.mo-chart-legend i{width:12px;height:12px;border-radius:4px;display:inline-block}

/* Devam eden ay kilit / ilerleme kartı */
.mo-hero{background:var(--accent-soft);color:var(--on-primary-c)}
.mo-hero .eyebrow{color:color-mix(in srgb,var(--on-primary-c) 72%,transparent)}
.mo-hero-row{display:flex;align-items:center;gap:14px}
.mo-hero-xp{font-size:2.05rem;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.mo-hero-xp small{font-size:.92rem;font-weight:800;margin-left:5px;opacity:.75}
.mo-lockbadge{width:46px;height:46px;flex:0 0 46px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--on-primary-c) 16%,transparent);margin-left:auto}
.mo-lockbadge .ic{width:26px;height:26px}
.mo-hero .track{margin-top:16px;background:color-mix(in srgb,var(--on-primary-c) 18%,transparent)}
.mo-hero .track .fill{background:var(--acc)}
.mo-hero-note{font-size:.8rem;font-weight:700;margin-top:10px;display:flex;align-items:center;gap:7px;color:color-mix(in srgb,var(--on-primary-c) 85%,transparent)}
.mo-hero-note .ic{width:15px;height:15px;flex:0 0 15px}

/* Rapor overlay */
.mo-rep-hero{text-align:center;padding:14px 0 6px}
.mo-rep-badge{width:56px;height:56px;border-radius:19px;display:grid;place-items:center;margin:0 auto 10px;background:var(--accent-soft);color:var(--on-primary-c)}
.mo-rep-badge .ic{width:28px;height:28px}
.mo-rep-hero .eyebrow{margin-bottom:6px}
.mo-rep-xp{font-size:2.7rem;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--primary)}
.mo-rep-xp small{font-size:1rem;font-weight:800;color:var(--on-surface-v);margin-left:6px}
.mo-rep-sub{font-size:.9rem;font-weight:700;color:var(--on-surface-v);margin-top:6px}
/* Rapor içi günlük mini çubuklar */
.mo-daily{display:flex;align-items:flex-end;gap:3px;height:64px;margin-top:16px}
.mo-daily i{flex:1;border-radius:3px 3px 1px 1px;background:var(--primary-c);min-height:3px;transition:height .7s var(--ease)}
.mo-daily i.top{background:var(--primary)}
/* AI özet kartı */
.mo-ai{display:flex;gap:13px;align-items:flex-start}
.mo-ai-av{width:46px;height:46px;flex:0 0 46px;border-radius:50%;overflow:hidden;background:var(--sc-high);display:grid;place-items:center}
.mo-ai-av img{width:100%;height:100%;object-fit:cover}
.mo-ai-body{min-width:0;flex:1}
.mo-ai-body .eyebrow{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.mo-ai-txt{font-size:.94rem;line-height:1.5}
.mo-ai-txt b{color:var(--primary);font-weight:800}
.mo-ai-txt code{font-weight:800;background:var(--sc-high);padding:1px 6px;border-radius:6px}
.mo-ai.loading .mo-ai-txt{display:flex;gap:5px;align-items:center;color:var(--on-surface-v)}
.mo-ai-dots{display:inline-flex;gap:4px}
.mo-ai-dots i{width:7px;height:7px;border-radius:50%;background:var(--outline);animation:moTyping 1.2s infinite}
.mo-ai-dots i:nth-child(2){animation-delay:.15s}.mo-ai-dots i:nth-child(3){animation-delay:.3s}
@keyframes moTyping{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.mo-share-btn{margin-top:2px}

/* Paylaşım kartı overlay */
.mo-share-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:6px 20px calc(20px + env(safe-area-inset-bottom))}
.mo-canvas-wrap{width:100%;max-width:340px;margin:6px auto 4px;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);background:#1B1206}
.mo-canvas-wrap canvas{width:100%;height:auto;display:block}
.mo-share-actions{display:flex;gap:12px;width:100%;max-width:340px;margin-top:16px}
.mo-share-actions .btn{flex:1}
.mo-share-hint{font-size:.78rem;color:var(--on-surface-v);text-align:center;margin-top:12px;max-width:340px;line-height:1.4}
#shareFmtSeg{max-width:340px;width:100%;margin:2px auto 10px}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* ============ Karanlık tema yüzey ayarları ============ */
/* ============ Light theme visual system ============
   This layer is intentionally scoped to light mode. Do not move these values
   into the shared :root block: the dark theme below must remain byte-for-byte
   independent from this rendering system. */
:root:not([data-theme="dark"]){
  /* Luminance merdiveni. Her basamak bir öncekinden gözle ayırt edilebilir:
     çerçeve → sayfa → kart → gömülü yüzey. Kontrast bu merdivenden gelir,
     kalın kenarlık veya sert gölgeden değil.
     NOT: --light-* değişkenlerinin sabit değerleri kaldırıldı; artık hepsi
     aşağıdaki semantik katmanın takma adıdır (bkz. blok sonu). İsimler
     korunuyor çünkü açık tema katmanının geri kalanı onları okuyor. */
  --light-frame:#EDE9E3;

  /* Eski Material token ailesi KORUNUR ama kendi değeri yoktur: hepsi
     aşağıdaki semantik katmana bağlanır (koyu temadaki köprünün aynısı).
     Açık temanın kendi değerleri o semantik katmanda tanımlıdır — iki tema
     birbirinin negatifi değil, aynı yapının iki ayrı ayarıdır. */
  --primary:var(--accent); --on-primary:var(--on-accent);
  --primary-c:var(--accent-soft); --on-primary-c:var(--accent-ink);
  --secondary:#5E5650; --on-secondary:#FFFFFF; --secondary-c:#EAE5DE; --on-secondary-c:#241F1B;
  --tertiary:var(--accent); --on-tertiary:var(--on-accent);
  --tertiary-c:var(--accent-soft); --on-tertiary-c:var(--accent-ink);
  --surface:var(--bg); --surface-dim:#DCD7CE;
  --sc-lowest:var(--surface-1); --sc-low:var(--surface-1);
  --sc:var(--surface-2); --sc-high:var(--surface-2); --sc-highest:var(--surface-3);
  --on-surface:var(--text-1); --on-surface-v:var(--text-2);
  --outline:var(--text-3); --outline-v:var(--line-2);
  --shadow:var(--elev-1); --shadow-lg:var(--elev-2);
  --c-rose:#AF3F58;
  --card-bg:var(--surface-1);
  --card-bd:var(--line);
  --acc-2:var(--accent);
  --on-acc:var(--on-accent);
  /* Eski açık tema değişkenleri: geri kalan kurallar hâlâ bunları okuduğu için
     duruyorlar, ama artık tek kaynak semantik katmandır. */
  --light-border:var(--line);
  --light-border-strong:var(--line-2);
  --light-shadow:var(--elev-1);
  --light-shadow-raised:var(--elev-2);
  --light-bg:var(--bg);
  --light-surface:var(--surface-1);
  --light-surface-secondary:var(--surface-2);
  --light-surface-raised:var(--surface-1);
  --light-text-primary:var(--text-1);
  --light-text-secondary:var(--text-2);
  --light-text-tertiary:var(--text-3);
  --light-accent:var(--accent);
  --light-accent-strong:var(--accent-ink);
  --light-accent-soft:var(--accent-soft);

  /* ---------- Açık temanın semantik renk tokenleri ----------
     Koyu temanın negatifi değil: kendi yüzey merdiveni (sayfa → kart →
     gömülü), kendi kenarlık opaklığı, kendi gölge ağırlığı. Ölçülen
     kontrastlar (beyaz kart üstünde): text-1 16.9 · text-2 7.8 ·
     text-3 5.6 · accent 5.4 · accent-ink 7.0 — hepsi AA eşiğinin üstünde
     ve mikro etiketlerde pay bırakacak kadar yüksek. */
  --bg:#F7F4EF;
  --surface-1:#FFFFFF;          /* kart */
  --surface-2:#EFEAE1;          /* gömülü yüzey: ray, ikon yuvası */
  --surface-3:#E5DFD3;          /* gömülü merdivenin bir üst basamağı (açık/basılı) */
  --text-1:#1C1917;
  --text-2:#57514A;
  --text-3:#6E675E;
  --line:rgba(28,25,23,.085);
  --line-2:rgba(28,25,23,.15);
  --accent:#A85400;
  --accent-graphic:#C4680B;     /* ikon KÜTLESİ: grafik eşiği 3:1, metin değil */
  --accent-ink:#8A4700;         /* tonlu yüzey üstündeki aksan metni */
  /* Tonlu aksan yüzeyi. İlk değer (#FDF2E4) sayfa zeminiyle 1.01 luminans
     farkındaydı — kart yalnızca kenarlıkla ayrılıyordu. 1.08'e çıkarıldı:
     ayrım önce luminanstan, sonra ince kenarlıktan gelmeli. */
  --accent-soft:#FBEAD3;
  --accent-line:rgba(178,94,0,.22);
  --on-accent:#FFFFFF;
  --ok-fg:#1F6B45;
  --data-mark:#CDBEA1;          /* pasif veri işareti (grafik çubuğu), 2.0:1 */
  --elev-1:0 1px 2px rgba(30,26,22,.04),0 10px 24px -20px rgba(30,26,22,.30);
  --elev-2:0 2px 6px rgba(30,26,22,.055),0 24px 48px -30px rgba(30,26,22,.32);
  --ki-ink:#3F3A34;
  --ki-muted:#746D64;
  --ki-plane:#EAE2D7;
  /* Açık temada kütle koyu amber (#A85400); odak bu kez bir basamak AÇIK
     amberdir — yön ters, gerekçe aynı (bkz. koyu tema --ki-focus notu). */
  --ki-focus:#DE8A1E;
  --ki-well:#F2EDE5;
  --wa-ink:#3A2E25;
  --wa-divider:#75685B;
  --wa-paper:#E8DCC0;
  --wa-well:#F2EDE5;
  /* Koyu temanın negatifi DEĞİL: yuva burada L=%93 olduğu için yüzeyler
     orta luminansta tutulur (koyu temada 52–76, burada 44–60). Hue ve kroma
     ilişkisi ortak, değerler ayrı ayarlanmıştır. */
  --wa-amber:#A85400;--wa-amber-hi:#D97B14;
  --wa-terra:#8E3A22;--wa-terra-hi:#D25C36;
  --wa-sage:#4A6B22;--wa-sage-hi:#79A33C;
  --wa-sand:#8A7047;--wa-sand-hi:#C0A472;

  /* RENK KELİMELERİ + malzeme rolü — bkz. koyu tema bloğundaki not. */
  --wa-red:#96281F;--wa-red-hi:#D6402F;
  --wa-blue:#255480;--wa-blue-hi:#3F86C4;
  --wa-cool:#255480;--wa-cool-hi:#3F86C4;--wa-brick:#96281F;--wa-brick-hi:#D6402F;
  /* -fx: GERCEK DUNYA RENGI SABIT semboller icin dokunulmamis kopya.
     Tema paketleri --wa-* uzerine yazar; bunlar YAZILMAZ. */
  --wa-amber-fx:#A85400;--wa-amber-hi-fx:#D97B14;--wa-terra-fx:#8E3A22;--wa-terra-hi-fx:#D25C36;--wa-sage-fx:#4A6B22;--wa-sage-hi-fx:#79A33C;--wa-sand-fx:#8A7047;--wa-sand-hi-fx:#C0A472;--wa-cool-fx:#255480;--wa-cool-hi-fx:#3F86C4;--wa-paper-fx:#E8DCC0;--wa-ink-fx:#3A2E25;--wa-divider-fx:#75685B;
  --wa-green:#256B3C;--wa-green-hi:#3E9E5F;
  --wa-yellow:#8F6E12;--wa-yellow-hi:#CFA928;
  --wa-black:#17171A;--wa-black-hi:#43434A;
  --wa-white:#9A968E;--wa-white-hi:#F4F2EE;
  --wa-grey:#5E5E64;--wa-grey-hi:#A0A0A6;
  --wa-purple:#5B3E77;--wa-purple-hi:#8E6FAF;
  --wa-pink:#A34E6B;--wa-pink-hi:#DC85A2;
  --wa-orange:#A8551A;--wa-orange-hi:#E0873A;
  --wa-brown:#5C3F2B;--wa-brown-hi:#9C7050;
  --wa-locked-base:#8C857D;--wa-locked-face:#AAA39B;
}
/* Gövde ve içerik sütunu aynı basamakta: #app ortalandığı için farklı bir gövde
   rengi geniş ekranda iki yanda koyu bant olarak görünüyordu. Merdiven artık
   sayfa → kart → gömülü yüzey olarak işliyor; çerçeve basamağı yalnızca
   kenar çubuğu gibi ayrı panellerde kullanılır. */
:root:not([data-theme="dark"]) body{
  background:var(--light-bg);
  text-rendering:optimizeLegibility;
}
:root:not([data-theme="dark"]) #app{
  background:var(--light-bg);
}
:root:not([data-theme="dark"]) h1,
:root:not([data-theme="dark"]) h2,
:root:not([data-theme="dark"]) h3,
:root:not([data-theme="dark"]) .action-title,
:root:not([data-theme="dark"]) .pcard-title{
  color:var(--light-text-primary);
  text-wrap:balance;
}
:root:not([data-theme="dark"]) .muted,
:root:not([data-theme="dark"]) .stat-sub,
:root:not([data-theme="dark"]) .tkcount,
:root:not([data-theme="dark"]) .ai-note,
:root:not([data-theme="dark"]) .bar b,
:root:not([data-theme="dark"]) .bar span,
:root:not([data-theme="dark"]) .legend,
:root:not([data-theme="dark"]) .daycell,
:root:not([data-theme="dark"]) .achnext-n,
:root:not([data-theme="dark"]) .wordrow .wr-en,
:root:not([data-theme="dark"]) .ai-chat-open .d,
:root:not([data-theme="dark"]) .ai-chats-empty,
:root:not([data-theme="dark"]) .mo-share-hint{color:var(--light-text-secondary)}
/* Bölüm etiketleri: birincil metinle yarışmaz ama zeminde de kaybolmaz.
   Emphasis düşürmek için opaklık değil, ayrı bir metin tonu kullanılır. */
:root:not([data-theme="dark"]) .eyebrow,
:root:not([data-theme="dark"]) .settings-head{
  color:var(--light-text-tertiary);
  font-weight:800;
}
/* İstatistik kutularından üçünde etiket rengi satır içi sabit yazılmış
   (#06B6D4/#EF4444/#8B5CF6): aynı roldeki altı etiketten üçü farklı mantık
   kullanıyor ve açık zeminde 2.2–3.8 kontrasta düşüyorlar. Satır içi değerler
   koyu temanın davranışı olduğu gibi kalsın diye silinmiyor, yalnızca açık
   temada merkezi etiket tonuna geri alınıyor. Kutunun hue'sunu zaten ikon taşır. */
:root:not([data-theme="dark"]) #statsView .tile .eyebrow[style*="color"]{
  color:var(--light-text-tertiary)!important;
}
:root:not([data-theme="dark"]) :focus-visible{
  outline:2px solid var(--primary);
  outline-offset:3px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 15%,transparent);
}

/* Surfaces: low-contrast edges and broad, quiet elevation. */
:root:not([data-theme="dark"]) .card,
:root:not([data-theme="dark"]) .tile,
:root:not([data-theme="dark"]) .statpill{
  border-color:var(--light-border);
  box-shadow:var(--light-shadow);
}
:root:not([data-theme="dark"]) .card.tonal{
  background:var(--surface-2);
  border-color:transparent;
  box-shadow:none;
}
:root:not([data-theme="dark"]) .statpill{
  background:var(--surface-1);
  box-shadow:none;
}
:root:not([data-theme="dark"]) .tkrev,
:root:not([data-theme="dark"]) .tkfeedback{
  background:var(--surface-2);
  border-color:transparent;
  box-shadow:none;
}
/* Vurgu kartının içindeki ray da kartla birlikte tonlanır; beyaz bir şerit
   sıcak yüzeyin üstünde yamalı görünüyordu. */
:root:not([data-theme="dark"]) .hero .track,
:root:not([data-theme="dark"]) .challenge .track,
:root:not([data-theme="dark"]) .card.smart .track{
  background:color-mix(in srgb,var(--acc) 22%,#FFFFFF);
}
/* Akıllı Ders'in oynatma düğmesi açık temada da DOLU kalır (bkz. .card.smart
   .playcta): yukarıdaki tonal kural ikonu --on-acc'te bırakıp siliyor. */
:root:not([data-theme="dark"]) .card.smart .playcta{
  background:var(--accent);border-color:transparent;color:var(--on-accent);box-shadow:none;
}

/* İkon yuvaları TEK dil: nötr gömülü yüzey, kenarlıksız, gölgesiz. Hue taşımaz —
   rengi ikonun kullanım seviyesine göre belirlenen katmanları verir. */
:root:not([data-theme="dark"]) .bigemoji,
:root:not([data-theme="dark"]) .action-ic,
:root:not([data-theme="dark"]) .pcard-ic,
:root:not([data-theme="dark"]) .achnext-ic,
:root:not([data-theme="dark"]) .statpill .spic,
:root:not([data-theme="dark"]) .wordrow .em,
:root:not([data-theme="dark"]) .lrow .lava,
:root:not([data-theme="dark"]) .onb-opts .opt .oic,
/* YALNIZ .well. Kapsamsız `.setrow .sicon` yazılırsa (1,3,0) özgüllüğüyle
   temel kuralı (0,2,0) ezer ve AÇIK TEMADA her ayar simgesinin arkasında
   renkli bir kare belirir — kutunun kaldırıldığı kararı geri alır. */
:root:not([data-theme="dark"]) .setrow .sicon.well{
  background:var(--surface-2);
  border-color:transparent;
  box-shadow:none;
}

/* CTA ve buton durumları: düz dolgu, degrade ve renkli parıltı yok. */
:root:not([data-theme="dark"]) .playcta,
:root:not([data-theme="dark"]) .btn.filled,
:root:not([data-theme="dark"]) .btn.gold,
/* Açık tema da tonal (bkz. .audiobig ana kuralı): içindeki hoparlör/mikrofon
   obje ailesinden ve kendi rengini taşıyor, dolu aksan üstünde okunmuyordu. */
:root:not([data-theme="dark"]) .audiobig{
  background:color-mix(in srgb,var(--acc) 12%,#FFFFFF);
  border-color:color-mix(in srgb,var(--acc) 28%,transparent);
  color:var(--acc);
  box-shadow:none;
}
:root:not([data-theme="dark"]) .btn.gold{background:var(--accent);color:var(--on-accent)}
:root:not([data-theme="dark"]) .btn.tonal{
  background:color-mix(in srgb,var(--acc) 12%,var(--surface-1));
  border-color:color-mix(in srgb,var(--acc) 26%,transparent);
  color:var(--acc);
  box-shadow:none;
}
:root:not([data-theme="dark"]) .btn.outline,
:root:not([data-theme="dark"]) .chip.outline,
:root:not([data-theme="dark"]) .onb-gbtn{
  background:var(--light-surface);
  border-color:var(--light-border-strong);
  box-shadow:none;
}
:root:not([data-theme="dark"]) .btn.text{color:var(--primary)}
/* Disabled: nötr bir yüzeye düşer, yarı saydam bir aksan lekesi olarak kalmaz —
   böylece ikincil metinle karışmaz. */
/* Devre dışı: nötr bir yüzeye düşer, yarı saydam bir aksan lekesi olarak
   kalmaz. Metin tonu 2.61 → 3.44 kontrasta çıkarıldı: pasif olduğu okunmalı
   ama "Kontrol et" gibi bir eylemin adı okunamaz hâle gelmemeli. */
:root:not([data-theme="dark"]) .btn:disabled,
:root:not([data-theme="dark"]) .onb-opts .opt:disabled{
  opacity:1;
  background:var(--surface-2);
  border-color:transparent;
  color:#7F786E;
  filter:none;
  box-shadow:none;
}

/* Chips, choices and selected states. */
:root:not([data-theme="dark"]) .chip,
:root:not([data-theme="dark"]) .ai-chip,
:root:not([data-theme="dark"]) .ai-suggest button{
  background:var(--light-surface);
  border:1px solid rgba(32,28,24,.11);
  color:var(--light-text-primary);
  box-shadow:none;
}
:root:not([data-theme="dark"]) .chip.sel,
:root:not([data-theme="dark"]) .opt.sel:not(.right):not(.wrong),
:root:not([data-theme="dark"]) .mtile.sel:not(.hit):not(.miss){
  background:var(--accent-soft);
  border-color:var(--accent-line);
  color:var(--accent-ink);
}
:root:not([data-theme="dark"]) .lnode.now,
:root:not([data-theme="dark"]) .lrow.me,
:root:not([data-theme="dark"]) .ai-chat-item.on{
  background:color-mix(in srgb,var(--acc) 11%,#FFFFFF);
  border-color:color-mix(in srgb,var(--acc) 28%,transparent);
  color:var(--acc);
}
:root:not([data-theme="dark"]) .opt,
:root:not([data-theme="dark"]) .mtile,
:root:not([data-theme="dark"]) .wchip{
  background:var(--light-surface);
  border-color:rgba(32,28,24,.13);
  box-shadow:none;
}
/* Onboarding tercih kartları bu kuralın DIŞINDA. Yukarıdaki `.opt` quiz cevap
   butonudur ve açık temada bilinçli olarak gölgesizdir; onboarding kartları ise
   kabuğun kart dilini izler (ana ekran `.card` gibi: luminance + ince kenarlık
   + geniş/düşük opaklıklı gölge). Aynı önek kullanılmalı — özgüllük (1,3,0)
   olmadan bu kural onları geri eziyordu. */
:root:not([data-theme="dark"]) .onb-opts .opt{
  background:var(--surface-1);
  border-color:var(--light-border);
  box-shadow:var(--light-shadow);
}
/* Kilitli: doygunluk ve emphasis düşer, form okunabilirliği korunur. */
:root:not([data-theme="dark"]) .chip.lock,
:root:not([data-theme="dark"]) .lnode.lock,
:root:not([data-theme="dark"]) .tkcard.lock{
  opacity:.72;
  filter:saturate(.4);
}

/* Inputs and segmented controls. */
:root:not([data-theme="dark"]) .search,
:root:not([data-theme="dark"]) .typebox{
  background:var(--light-surface);
  border-color:rgba(32,28,24,.14);
  box-shadow:none;
}
:root:not([data-theme="dark"]) .seg{
  background:var(--light-surface-secondary);
  border-color:rgba(32,28,24,.075);
  box-shadow:none;
}
:root:not([data-theme="dark"]) .search:focus-within,
:root:not([data-theme="dark"]) .typebox:focus{
  border-color:color-mix(in srgb,var(--primary) 70%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent);
}
/* Placeholder ikincil metinden açık, disabled metinden koyu: yazılabilir bir
   alan olduğu okunur ama girilen metinle karışmaz. */
:root:not([data-theme="dark"]) input::placeholder,
:root:not([data-theme="dark"]) textarea::placeholder{color:#7D766C;opacity:1}

/* İlerleme, grafik ve ısı haritasının açık tema kopyaları KALDIRILDI: bu
   değerler artık tek yerde (Progress bölümü) tanımlı ve --surface-2 / --accent /
   --data-mark tokenleri üzerinden iki temaya da uyarlanıyor. Buraya yeniden
   tema başına degrade yazma — ilerleme dilinin ikiye ayrılması tam olarak
   düzeltilen sorundu. */
:root:not([data-theme="dark"]) .daycell.on i{
  background:color-mix(in srgb,var(--accent) 14%,var(--surface-1));
  color:var(--accent-ink);
}

/* Navigation: translucent separation with less visual mass. */
:root:not([data-theme="dark"]) #bottomNav{
  background:rgba(255,255,255,.9);
  border-color:rgba(32,28,24,.09);
  box-shadow:0 -2px 8px rgba(30,26,22,.04),0 -18px 42px -34px rgba(30,26,22,.34);
  -webkit-backdrop-filter:blur(23px) saturate(1.05);
  backdrop-filter:blur(23px) saturate(1.05);
}
:root:not([data-theme="dark"]) .navitem{color:var(--light-text-secondary)}
:root:not([data-theme="dark"]) .navitem[aria-current="page"]{color:var(--primary)}
:root:not([data-theme="dark"]) .navitem[aria-current="page"] .pill{
  background:color-mix(in srgb,var(--primary) 14%,#FFFFFF);
  border-color:color-mix(in srgb,var(--primary) 24%,transparent);
  box-shadow:none;
}
:root:not([data-theme="dark"]) #navAiBtn{
  background:var(--accent);
  border-color:color-mix(in srgb,var(--primary) 22%,transparent);
  box-shadow:0 0 0 3px var(--light-bg),0 2px 5px rgba(30,26,22,.08),0 14px 28px -20px color-mix(in srgb,var(--primary) 54%,transparent);
}
:root:not([data-theme="dark"]) #navAiBtn.is-open{
  box-shadow:0 0 0 3px var(--light-bg),0 2px 5px rgba(30,26,22,.08),0 12px 24px -20px color-mix(in srgb,var(--primary) 48%,transparent);
}

/* Secondary icon controls. */
:root:not([data-theme="dark"]) .iconbtn,
:root:not([data-theme="dark"]) .navtoggle,
:root:not([data-theme="dark"]) .tkgo,
:root:not([data-theme="dark"]) .tkmic,
:root:not([data-theme="dark"]) .ai-mic,
:root:not([data-theme="dark"]) .tkbtn-say,
:root:not([data-theme="dark"]) .popclose{
  background:var(--light-surface-secondary);
  border-color:rgba(32,28,24,.075);
  color:var(--light-text-secondary);
  box-shadow:none;
}
:root:not([data-theme="dark"]) .navtoggle{
  border-color:color-mix(in srgb,var(--primary) 22%,transparent);
}
:root:not([data-theme="dark"]) .card.unit.open .navtoggle{
  background:var(--light-surface-secondary);
  border-color:rgba(32,28,24,.09);
  color:var(--light-text-secondary);
  box-shadow:none;
}

/* Settings and switches. */
:root:not([data-theme="dark"]) .settings-card{
  background:var(--light-surface);
  border-color:var(--light-border);
  box-shadow:var(--light-shadow);
}
:root:not([data-theme="dark"]) .setrow{
  color:var(--light-text-primary);
  border-bottom-color:rgba(32,28,24,.085);
  font-weight:600;
}
:root:not([data-theme="dark"]) .settings-account-data #accountRows .setrow,
:root:not([data-theme="dark"]) .settings-account-data #accountActions .setrow{
  border-bottom-color:rgba(32,28,24,.085);
}
/* Sağdaki durum metinleri ("Açık", "Kapalı", "Kalıcı") ikincil ama net. */
:root:not([data-theme="dark"]) .setrow .sval{color:var(--light-text-secondary);font-weight:600}
:root:not([data-theme="dark"]) .sw{
  background:#DDD8D0;
  border-color:#ADA69C;
}
:root:not([data-theme="dark"]) .sw i{background:#7C756B}
:root:not([data-theme="dark"]) .sw.on{
  background:var(--primary);
  border-color:var(--primary);
  box-shadow:none;
}
:root:not([data-theme="dark"]) .sw.on i{
  background:#FFFFFF;
  box-shadow:0 1px 2px rgba(30,26,22,.16);
}

/* Dividers, menus, sheets, dialogs and feedback surfaces. */
:root:not([data-theme="dark"]) hr.soft,
:root:not([data-theme="dark"]) .lBottom,
:root:not([data-theme="dark"]) .mo-foot{border-color:rgba(32,28,24,.09)}
:root:not([data-theme="dark"]) #sheet,
:root:not([data-theme="dark"]) .dlgcard{
  background:var(--light-surface);
  border:1px solid rgba(32,28,24,.08);
  box-shadow:var(--light-shadow-raised);
}
:root:not([data-theme="dark"]) #scrim{
  background:rgba(36,32,29,.34);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
:root:not([data-theme="dark"]) #toast{
  background:#2C2926;
  color:#FFFEFC;
  box-shadow:0 12px 28px -18px rgba(24,21,18,.58);
}
:root:not([data-theme="dark"]) .daycell i,
:root:not([data-theme="dark"]) .xpstat,
:root:not([data-theme="dark"]) .tkres-badge{
  background:var(--light-surface-secondary);
  border-color:rgba(32,28,24,.075);
}
:root:not([data-theme="dark"]) .tkfix,
:root:not([data-theme="dark"]) .tkrole-note{
  background:color-mix(in srgb,var(--primary) 8%,#FFFFFF);
  border-color:color-mix(in srgb,var(--primary) 18%,transparent);
}
:root:not([data-theme="dark"]) .tkFrame{
  border-color:#ECEAE6;
  box-shadow:0 1px 2px rgba(30,26,22,.03),0 16px 34px -28px rgba(30,26,22,.28);
}
:root:not([data-theme="dark"]) .tkb{
  background:rgba(255,255,255,.92);
  box-shadow:0 6px 20px -14px rgba(30,26,22,.32);
}
:root:not([data-theme="dark"]) .tkb.fact{
  background:color-mix(in srgb,var(--primary) 9%,#FFFFFF);
  border-color:color-mix(in srgb,var(--primary) 16%,transparent);
}

/* Pointer states: one calm elevation step, no hard outlines or jumps. */
@media (hover:hover){
  :root:not([data-theme="dark"]) .card.click:hover,
  :root:not([data-theme="dark"]) .statpill:hover,
  :root:not([data-theme="dark"]) .tile:hover{
    border-color:rgba(32,28,24,.13);
    box-shadow:0 2px 5px rgba(30,26,22,.045),0 16px 32px -26px rgba(30,26,22,.30);
  }
  :root:not([data-theme="dark"]) .card.click:hover{transform:translateY(-1px)}
  /* Tek bir aksan mantığı: her hover aynı marka tonunun aynı yoğunluğu.
     DOLU butonlar bu daldan MUAF: background-color'ı burada ezmek onların
     som aksan zeminini %8'lik saydam tona indiriyordu, yani "Kontrol et"
     hover'da bambaşka bir buton gibi görünüyordu. Onlar aşağıdaki
     brightness dalında kalır. */
  :root:not([data-theme="dark"]) .btn:hover:not(:disabled):not(.filled):not(.gold),
  :root:not([data-theme="dark"]) .chip:hover:not(:disabled),
  :root:not([data-theme="dark"]) .setrow:hover,
  :root:not([data-theme="dark"]) .wordrow:hover,
  :root:not([data-theme="dark"]) .iconbtn:hover,
  :root:not([data-theme="dark"]) .ai-chip:hover,
  :root:not([data-theme="dark"]) .ai-suggest button:hover,
  :root:not([data-theme="dark"]) .popclose:hover{
    background-color:color-mix(in srgb,var(--primary) 8%,transparent);
    border-color:color-mix(in srgb,var(--primary) 24%,transparent);
  }
  :root:not([data-theme="dark"]) .btn.filled:hover:not(:disabled),
  :root:not([data-theme="dark"]) .playcta:hover,
  :root:not([data-theme="dark"]) .ai-send:hover:not(:disabled),
  :root:not([data-theme="dark"]) .seg button.sel:hover{
    filter:brightness(.96) saturate(1.02);
  }

  /* Ders etkileşimleri kendi durum rengini korur; genel amber hover'a sızmaz. */
  #lesson .opt:hover:not(:disabled):not(.sel):not(.right):not(.wrong),
  #lesson .mtile:hover:not(:disabled):not(.sel):not(.hit):not(.miss){
    background:var(--surface-2);
    border-color:var(--text-3);
  }
  #lesson .opt.sel:hover:not(:disabled),
  #lesson .mtile.sel:hover:not(:disabled){
    background:var(--lesson-selected-bg);
    border-color:var(--lesson-selected-border);
    box-shadow:inset 0 0 0 1px var(--lesson-selected-border);
  }
  #lesson .typebox:hover:not(:focus):not(.is-right):not(.is-wrong){
    border-color:var(--text-3);
  }
  #lesson .btn.filled:hover:not(:disabled){
    background:var(--accent);color:var(--on-accent);
    filter:brightness(.96) saturate(1.02);
  }
  #dlgCard .lesson-exit-stay:hover{
    background:var(--surface-3);border-color:var(--text-3);color:var(--text-1);
  }
  #dlgCard .lesson-exit-quit:hover:not(:disabled){
    background:var(--error);border-color:var(--error);color:var(--on-error);
    filter:brightness(.94);
  }
}
:root:not([data-theme="dark"]) .btn:active:not(:disabled),
:root:not([data-theme="dark"]) .chip:active:not(:disabled),
:root:not([data-theme="dark"]) .iconbtn:active,
:root:not([data-theme="dark"]) .popclose:active{filter:brightness(.96)}

@media(min-width:1024px){
  /* Kenar çubuğu ana içerikle aynı sıcak nötr aileden; yalnızca bir basamak
     aşağıda durur, ayrı bir krem panel gibi kopmaz. */
  :root:not([data-theme="dark"]) #bottomNav{
    background:#F0ECE5;
    border-right-color:rgba(32,28,24,.09);
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  :root:not([data-theme="dark"]) #bottomNav .navitem[aria-current="page"]{
    background:color-mix(in srgb,var(--primary) 13%,#FFFFFF);
    box-shadow:none;
  }
  :root:not([data-theme="dark"]) #bottomNav #navAiBtn{
    background:transparent;
    border-color:transparent;
    box-shadow:none;
  }
  :root:not([data-theme="dark"]) #bottomNav #navAiBtn:hover{
    background:color-mix(in srgb,var(--primary) 8%,#FFFFFF);
  }
  :root:not([data-theme="dark"]) #bottomNav #navAiBtn .pill{
    background:var(--accent)!important;
    box-shadow:none;
  }
  :root:not([data-theme="dark"]) .overlay{border-left-color:rgba(32,28,24,.09)}
  :root:not([data-theme="dark"]) #taskRun .tkBody{background:var(--light-surface)}
}

/* ---- Başarı kartları ----
   Hiyerarşi iki basamağa indi: kart yüzeyi → ikon kutusu → SVG. Rozet
   hücresinin kendi kart chrome'u yok (bkz. #badgeGrid), bu yüzden ikon
   kutusu kartın bir basamak altındaki tondan boyanır; açılmış rozette
   aynı basamak aksanla tonlanır. */
:root:not([data-theme="dark"]) .badge{
  background:var(--card-bg);
  border-color:var(--light-border);
  box-shadow:var(--light-shadow);
  color:var(--light-text-primary);
}
:root:not([data-theme="dark"]) .badge .bem{
  background:var(--surface-2);
  border-color:rgba(32,28,24,.08);
  box-shadow:none;
}
:root:not([data-theme="dark"]) #badgeGrid .badge .bem{
  background:#EAE5DB;
}
:root:not([data-theme="dark"]) #badgeGrid .badge:not(.lock) .bem{
  background:var(--wa-well);
}
:root:not([data-theme="dark"]) #badgeGrid .badge .btxt{color:var(--light-text-secondary)}
:root:not([data-theme="dark"]) #badgeGrid .badge:not(.lock) .btxt{color:var(--light-text-primary)}
/* Sayacın açık tema override'ı KALDIRILDI: sayı artık rayın ETİKETİ (bkz.
   .badges-meter) ve iki temada da aynı rolde — ton farkı yaratmak yerine
   ortak --text-2 okunur. Ölçüldü: #57514A / beyaz kart = 7.6:1. */
/* Kilitli rozet: doygunluk düşer ama ton basamakları korunur — tek gri kütle
   oluşmasın diye kontrast biraz yükseltilir, opaklık neredeyse hiç düşmez. */
:root:not([data-theme="dark"]) .badge.lock .badge-svg,
:root:not([data-theme="dark"]) .achnext.lock .badge-mini,
:root:not([data-theme="dark"]) .demoji.badge-dialog-lock .badge-svg{
  filter:none;
  opacity:.92;
}
:root:not([data-theme="dark"]) .achnext.lock{opacity:.86;filter:none}

/* ---- Karakulak AI ----
   Sohbet uygulamanın geri kalanıyla aynı ışığı taşır: tuval sayfa zemini,
   balonlar ve besteci onun üstünde birer basamak. */
:root:not([data-theme="dark"]) .ai-chats{
  background:var(--light-surface);
  border:1px solid rgba(32,28,24,.08);
  box-shadow:var(--light-shadow-raised);
}
:root:not([data-theme="dark"]) .ai-msg.bot:not(.err):not(.limit){
  background:var(--light-surface);
  border:1px solid rgba(32,28,24,.08);
  color:var(--light-text-primary);
  box-shadow:0 1px 2px rgba(30,26,22,.03),0 8px 20px -20px rgba(30,26,22,.28);
}
:root:not([data-theme="dark"]) .ai-msg.err{
  background:#FDECE9;
  border:1px solid color-mix(in srgb,var(--error) 26%,transparent);
  color:#7A1410;
}
/* Kullanıcı balonu: dolu turuncu blok değil, marka ailesinden tonlanmış bir
   yüzey — metin kontrastı yüksek kalır. */
:root:not([data-theme="dark"]) .ai-msg.user{
  background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--primary) 26%,transparent);
  color:#3B2408;
  box-shadow:none;
}
:root:not([data-theme="dark"]) .ai-msg.bot b{color:var(--light-accent-strong)}
:root:not([data-theme="dark"]) .ai-msg.bot code{
  background:#F2EFE9;
  border:1px solid rgba(32,28,24,.08);
  color:#6B3D08;
}
:root:not([data-theme="dark"]) .ai-msg.limit{
  color:var(--light-text-secondary);
  border-color:rgba(32,28,24,.2);
}
:root:not([data-theme="dark"]) .ai-msg.typing{
  background:var(--light-surface);
  border:1px solid rgba(32,28,24,.08);
  box-shadow:none;
}
:root:not([data-theme="dark"]) .ai-msg.typing i{background:#8E877D;opacity:.75}
:root:not([data-theme="dark"]) .ai-dock{
  background:var(--light-bg);
  border-top-color:rgba(32,28,24,.1);
}
:root:not([data-theme="dark"]) #aiInput{
  background:var(--light-surface);
  border-color:rgba(32,28,24,.15);
  color:var(--light-text-primary);
  box-shadow:none;
}
:root:not([data-theme="dark"]) #aiInput:focus{
  border-color:color-mix(in srgb,var(--primary) 72%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent);
}
:root:not([data-theme="dark"]) #aiInput::placeholder{color:#7D766C;opacity:1}
:root:not([data-theme="dark"]) .ai-send{
  background:color-mix(in srgb,var(--accent) 8%,#FFFFFF);
  color:var(--light-text-primary);
  border-color:color-mix(in srgb,var(--accent) 24%,transparent);
  box-shadow:none;
}
:root:not([data-theme="dark"]) .ai-send:disabled{
  background:#E5E0D8;
  color:#615B53;
  border-color:rgba(32,28,24,.10);
  opacity:1;
  filter:none;
  box-shadow:none;
}
:root:not([data-theme="dark"]) .ai-mic{
  background:#FFFFFF;color:var(--light-text-secondary);border-color:rgba(32,28,24,.12);
}
:root:not([data-theme="dark"]) #aiClear.ai-new-chat{
  background:color-mix(in srgb,var(--accent) 10%,#FFFFFF);
  border-color:color-mix(in srgb,var(--accent) 27%,transparent);
  color:var(--light-text-secondary);
}
:root:not([data-theme="dark"]) .ai-chip.dyn{
  background:color-mix(in srgb,var(--primary) 11%,#FFFFFF);
  border-color:color-mix(in srgb,var(--primary) 28%,transparent);
  color:var(--light-accent-strong);
}
:root:not([data-theme="dark"]) .ai-avatar-frame{border-color:var(--light-surface-secondary)}
:root:not([data-theme="dark"]) .ai-avatar-frame::after{box-shadow:inset 0 5px 16px rgba(30,26,22,.10)}
:root:not([data-theme="dark"]) .ai-dot{background:#CCC5BA}
:root:not([data-theme="dark"]) .ai-empty p{color:var(--light-text-secondary)}
:root:not([data-theme="dark"]) .ai-send.cooling:disabled{background:#EDE7DE;color:var(--light-text-secondary);opacity:1}
/* Karşılama önerileri: kart sınırı önce luminance, sonra ince kenarlık. */
:root:not([data-theme="dark"]) .ai-wsug{
  background:var(--light-surface);
  border-color:rgba(32,28,24,.11);
  color:var(--light-text-primary);
  box-shadow:0 1px 2px rgba(30,26,22,.06);
}
:root:not([data-theme="dark"]) .ai-wsug:hover{background:#FFFFFF;border-color:rgba(32,28,24,.2)}
:root:not([data-theme="dark"]) .ai-wico{filter:none}
:root:not([data-theme="dark"]) .ai-wsug.hero,
:root:not([data-theme="dark"]) .ai-wsug.hero:hover{
  background:var(--accent);
  border:none;color:#FFFFFF;
}
:root:not([data-theme="dark"]) .ai-wsug.hero .ai-wico{background:rgba(255,255,255,.2)}

/* Aksanla tonlanmış bir yüzeyin üstüne yine aksan rengiyle yazılan metin
   (hero altlığı, seçili çip, tonal buton) beyaz zemindekinden daha az kontrast
   alır. Hue korunur, birincil metne doğru bir tık koyulaştırılır: "%17
   tamamlandı" / "Devam et" 4.5'ten ~5.8'e çıkar. Bu blok, aynı bileşenlere
   color veren yukarıdaki kuralların ardından gelmek zorunda. */
:root:not([data-theme="dark"]) .hero-foot,
:root:not([data-theme="dark"]) .lrow.me,
:root:not([data-theme="dark"]) .btn.tonal,
:root:not([data-theme="dark"]) .smart-step,
:root:not([data-theme="dark"]) .ai-chip.dyn{
  color:color-mix(in srgb,var(--acc) 82%,var(--light-text-primary));
}
/* İstatistik kutuları ve hedef çipleri artık tema başına ayrı "chunky" bir
   görünüme sahip değil: iki temada da aynı kutu ailesini (yüzey / kenarlık /
   gölge / radius tokenleri) kullanıyorlar. Buradaki kurallar yalnızca bu
   bileşenlere özgü ÖLÇÜ ve tipografiyi taşır, renk taşımaz. */
.tile .eyebrow {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
}
.tile .eyebrow .ic { width: 20px; height: 20px; flex: 0 0 20px }
/* İstatistik ve Tekrar metriklerindeki line ikonlar koyu yüzeyde navbar ile
   aynı birincil beyazı kullanır. Amber odak yolu kendi tokeninde kalır;
   açık tema mevcut koyu konturunu korur. */
[data-theme="dark"] #scr-stats .metric-line-ic,
[data-theme="dark"] #learnReview .metric-line-ic{color:var(--text-1)}

/* ============ Günlük hedef (100 / 250 / 500 / 1000 XP) ============
   Yatay kaydırılan çip satırı DEĞİL segmented control. Ölçüldü (375px):
   dört çip 380px yer istiyordu, kap 309px — sonuncusu her zaman ekranın
   dışında yarım kalıyordu ve kart "bozuk" okunuyordu. Dört seçenek sabit
   bir raya oturunca hepsi aynı anda görünür ve karşılaştırılabilir olur;
   "birini seç" dili zaten uygulamanın .seg bileşeni.
   Değerin kendisi (100 XP) başlığın sağında, seçimin ANLAMI ise altındaki
   tek satırda — bu yüzden segmentlerde yalnız sayı var, sığdırma sorunu yok. */
.goal-cur{
  font-size:.82rem;font-weight:700;color:var(--accent-ink);
  font-variant-numeric:tabular-nums;flex:0 0 auto;
}
.goalseg{margin:13px 0 0}
.goalseg button{gap:5px;padding:9px 4px;font-variant-numeric:tabular-nums}
.goalseg .goal-ic{width:18px;height:18px;flex:0 0 18px}
/* Seçili hedef: ikon kütlesi etiketle AYNI rengi alır (--accent-ink), amber
   odak katmanı kendi tonunda kalır.
   ⚠ Eski değer --ki-focus'tu ve bu, CLAUDE.md'de kayıtlı hatanın ta kendisi:
   kütle de odak da aynı token olunca ikonun oyulmuş ayrıntısı geri doluyor
   (tüy sapı, alev çekirdeği kayboluyordu). Ayrıca tonlu aksan hapının üstünde
   amber kütle 2.30 kontrast veriyordu; --accent-ink token gereği ≥4.5. */
.goalseg button.sel .goal-ic{color:var(--accent-ink)}
/* Açıklama ORTALANIR: kontrolün altındaki tek satır, dört segmentin ortak
   altlığı gibi okunmalı — sola yaslandığında ilk segmente ait bir dipnot
   gibi duruyordu. */
.goal-note{margin:11px 0 0;font-size:.78rem;line-height:1.35;color:var(--text-2);text-align:center}
@media(max-width:359px){
  /* En dar cihazlarda ikon düşer, sayı kalır: dört seçeneğin hepsi görünür
     olmalı — kaydırma bu kontrolde bilgi gizler. */
  .goalseg .goal-ic{display:none}
  .goalseg button{font-size:.82rem;padding:9px 2px}
}

/* ============ Avatar Seçim Menüsü Kutu Görünümü ============ */
#sheet .badges .badge{
  background:var(--surface-2);
  border:1px solid transparent;
  border-radius:var(--r-tile);
  box-shadow:none;
}
/* Profil avatarı YUVARLAK ÇERÇEVEDE durur (ölçü/konum .pid-av'da).
   Buradaki kural eskiden levhayı kaldırıyordu — o itiraz 2.5D dönemindeki
   TONLU KARE levhayaydı: figürü bir ikon kutusuna çeviriyor ve küçültüyordu.
   Halka farklı bir şey: kap 112px'e büyüdüğü için figür küçülmüyor, ortalanmış
   künye kompozisyonunda avatar eksende bir nesne olarak duruyor.
   ⚠ Bu kural (1,0,0) açık tema katmanındaki hiçbir sınıf seçicisiyle
   ezilemez; ölçüler .pid-av'da (0,1,0) kalabilir çünkü onlar burada tanımlı
   değil, ama YÜZEY/KENARLIK burada tanımlanmak zorunda. */
#avatarBtn{
  background:var(--surface-2);
  border:2px solid var(--line-2);
  box-shadow:none;
}

/* ============ ALT GEZİNME — ana sayfa tasarım sistemiyle hizalı ============
   Aynı token ailesi: yüzey --surface-1, kenarlık --line, pasif metin/ikon
   --text-3, aktif --accent. Merkezdeki pati butonu birincil eylem olduğu
   için DOLU aksan kalır; azaltılan şey kütlesidir: 56px + 4px yüzey halkası
   + geniş aksan parıltısı → 48px + tek yumuşak gölge. Artık çubuğa hâkim
   olmuyor, yalnızca ondan öne çıkıyor.

   Özgüllük notu: açık tema katmanındaki kurallar :root:not([data-theme="dark"])
   önekiyle (1,3,0) yazılmış. Aynı öneki burada da kullanmak zorunludur —
   düz #bottomNav (1,0,0) o katmanı sırayla değil özgüllükle kaybeder.
   Kapsam max-width:1023px: ≥1024px'te gezinme bir kenar çubuğuna dönüşüyor
   ve kendi yerleşim kurallarına sahip; oraya dokunulmadı. */
@media(max-width:1023px){
  :root:not([data-theme="dark"]) #bottomNav,
  [data-theme="dark"] #bottomNav{
    background:color-mix(in srgb,var(--surface-1) 88%,transparent);
    border-top:1px solid var(--line);
    box-shadow:none;
    -webkit-backdrop-filter:blur(20.7px);backdrop-filter:blur(20.7px);
  }
  :root:not([data-theme="dark"]) .navitem,
  [data-theme="dark"] .navitem{color:var(--text-3);font-weight:600}
  :root:not([data-theme="dark"]) .navitem[aria-current="page"],
  [data-theme="dark"] .navitem[aria-current="page"]{color:var(--accent)}
  :root:not([data-theme="dark"]) .navitem[aria-current="page"] .pill,
  [data-theme="dark"] .navitem[aria-current="page"] .pill{
    background:var(--accent-soft);
    border:1px solid var(--accent-line);
    color:var(--accent);
    box-shadow:none;
  }
  :root:not([data-theme="dark"]) #navAiBtn,
  [data-theme="dark"] #navAiBtn{
    flex:0 0 48px;max-width:48px;width:48px;height:48px;min-height:48px;
    background:var(--accent);
    border:1px solid transparent;
    color:var(--on-accent);
    box-shadow:var(--elev-1);
  }
  :root:not([data-theme="dark"]) #navAiBtn.is-open,
  [data-theme="dark"] #navAiBtn.is-open{box-shadow:var(--elev-1)}
  #navAiBtn .ai-fab-svg{width:22px;height:22px}
}

/* ============ AI butonu — marka patisi ============
   Butonun zemini daima dolu aksandır (koyu turuncu). --on-accent koyu temada
   koyu kahve (#241503) olduğu için işaret amber üstünde yeterince ayrışmıyordu;
   bu yüzden pati temadan BAĞIMSIZ beyaz basılır. Pati marka markası olduğundan
   diğer nav ikonlarından bir kademe büyüktür — kural yalnız .ai-fab-mark'ı
   hedefler, açık durumdaki kapatma işareti kendi rengini korur.

   Büyütme BURADAN yapılır, artboard'dan DEĞİL: sembolün kadrajı 4–28
   güvenli alanını yatayda tam dolduruyor (ölçüldü), yani çizimi büyütmek
   ailenin kadraj sözleşmesini kırardı. 56px'lik butonda 28px = yarısı. */
#navAiBtn .ai-fab-mark{width:32px;height:32px;color:#FFFFFF}
#bottomNav #navAiBtn .ai-fab-mark{width:28px;height:28px;color:#FFFFFF}
/* ≥1024px'te gezinme kenar çubuğuna dönüşür: buton artık 56px'lik bir FAB
   değil, 32px'lik küçük bir aksan karesi + metin etiketi taşıyan bir satır
   (bkz. "Sol gezinme … gerçek bir masaüstü rayıdır" bloğu). Oranın ikon
   ölçüsü 20px'tir; marka patisi bir kademe büyük kalır ama 28px o kareyi
   neredeyse tamamen dolduruyordu.
   ⚠ Bu kural yukarıdakiyle AYNI özgüllükte (2,1,0) — yalnızca dosyada SONRA
   geldiği için kazanır. Yukarı taşımayın, sessizce etkisiz kalır. Aynı sebeple
   masaüstü bloğundaki 20px'lik .ai-fab-svg kuralı da patiyi hiç tutmuyordu. */
@media(min-width:1024px){
  #bottomNav #navAiBtn .ai-fab-mark{width:22px;height:22px}
}

/* ============ PWA: METİN SEÇİMİ KAPALI ============
   Uygulama ana ekrandan / TWA içinden açıldığında (standalone, fullscreen,
   minimal-ui) uzun basış metni seçip mavi tutamaçlar ve "Kopyala" balonunu
   çıkarıyordu — bu ders ekranında dokunma etkileşimini yarıda kesiyor ve
   web sayfası hissi veriyor. Tarayıcı sekmesinde ise seçim MEŞRUDUR
   (kullanıcı kelime kopyalayabilmeli), o yüzden kural media query ile
   kapsanır; kapsamsız yazılmaz.
   Girdi alanları muaftır: user-select:none bazı motorlarda yazılan metnin
   imleçle seçilmesini de engeller (AI sohbet kutusu, görev cevabı, ayarlar). */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  body{
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none;   /* iOS uzun basış menüsü */
  }
  input, textarea, select, [contenteditable="true"]{
    -webkit-user-select:text; user-select:text;
    -webkit-touch-callout:default;
  }
}

/* ============ GRUPLANMIŞ METRİK ÖZETLERİ ============
   İlerleme ve Tekrar ekranlarında bağımsız kartlar tek sakin yüzeyde toplanır. */
.metrics-overview{padding:5px;margin-bottom:var(--gap-stack);overflow:hidden;box-shadow:none!important}
.metrics-overview .tilegrid{gap:0;margin:0}
.metrics-overview .tile{
  min-height:78px;padding:12px;background:transparent;border:0;border-radius:0;box-shadow:none;
  display:flex;flex-direction:column;justify-content:center;
}
.metrics-overview .tile:nth-child(odd){border-right:1px solid var(--line)}
#statsView .metrics-overview .tile:nth-child(-n+4),
#learnReview .metrics-overview .tile:nth-child(-n+2){border-bottom:1px solid var(--line)}
.metrics-overview .tile b{margin-top:5px}
.metrics-overview:hover,
.metrics-overview:active,
.metrics-overview .tile,
.metrics-overview .tile:hover,
.metrics-overview .tile:active{box-shadow:none!important;filter:none}
.review-metrics-overview .tilegrid{grid-template-columns:1fr 1fr}

@media(min-width:1024px){
  #statsView .metrics-overview .tile:nth-child(odd){border-right:0}
  #statsView .metrics-overview .tile:not(:nth-child(3n)){border-right:1px solid var(--line)}
  #statsView .metrics-overview .tile:nth-child(-n+4){border-bottom:0}
  #statsView .metrics-overview .tile:nth-child(-n+3){border-bottom:1px solid var(--line)}
}

@media(max-width:420px){
  .metrics-overview .tile{min-height:74px;padding:10px}
}

/* ============ RAFİNE BÖLÜM SEKME VE SEVİYE ÇİPLERİ ============
   Aynı seviyedeki bölüm gezinmeleri tek segmented dili kullanır;
   CEFR seviyeleri daha hafif filtreler olarak kalır. */
.section-tabs{
  display:flex;grid-template-columns:none;gap:2px;padding:4px;border-radius:22px;background:var(--surface-2);
  border-color:var(--line);box-shadow:none;
}
.section-tabs button{
  flex:1 1 0;width:auto;
  min-height:44px;padding:8px 6px;border:1px solid transparent;border-radius:17px;
  color:var(--text-2);font-size:.8rem;font-weight:600;letter-spacing:-.01em;
  box-shadow:none;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .15s var(--spring);
}
.section-tabs button.sel{
  background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink);
  box-shadow:none;
}
.section-tabs .section-tab-ic{opacity:.82}
.section-tabs button.sel .section-tab-ic{opacity:1}
.section-tabs button:active{transform:scale(.98)}

#scr-learn .learn-tabs{margin-bottom:14px}
#scr-learn>#levelChips{gap:8px;padding:0 2px;margin:0 -2px 14px}
#scr-learn>#levelChips .chip{
  min-height:38px;padding:7px 13px;border-radius:14px;background:var(--surface-2);
  border:1px solid transparent;color:var(--text-2);font-size:.82rem;font-weight:600;
  box-shadow:none;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .15s var(--spring);
}
#scr-learn>#levelChips .chip.sel{
  background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink);
  box-shadow:none;
}
#scr-learn>#levelChips .chip:hover{box-shadow:none}

/* Ders listesi: 8px ritim; nefes alan fakat ölü boşluk üretmeyen kart sistemi. */
#unitsList .unit{min-height:128px;padding:16px;margin-bottom:14px}
/* Görev kartları da Dersler ile aynı 14px dikey kart ritmini kullanır. */
#learnTasks .tkcard{margin-bottom:14px}
#unitsList .unit .cardrow{min-height:52px;gap:12px;align-items:center}
#unitsList .unit .bigemoji{
  width:48px;height:48px;flex-basis:48px;border-radius:16px;
}
#unitsList .unit h2{font-size:1.03rem;line-height:1.25;letter-spacing:-.012em}
#unitsList .unit .muted{line-height:1.35;margin-top:2px}
#unitsList .unit .navtoggle{
  width:44px;height:44px;flex-basis:44px;box-shadow:none;
}
#unitsList .unit .progressrow{gap:12px;margin-top:16px}
#unitsList .unit .progressrow .track{height:5px}
#unitsList .unit .pct{min-width:34px;font-size:.72rem}

@media(min-width:1024px){
  #unitsList .unit{margin-bottom:0}
}

@media(max-width:380px){
  .section-tabs button{font-size:.72rem;padding-left:3px;padding-right:3px}
  #scr-learn>#levelChips .chip{padding-left:11px;padding-right:11px}
  #unitsList .unit{min-height:124px;padding:14px}
  #unitsList .unit .cardrow{gap:10px}
}

/* ============ EKONOMİ: tüy, mağaza, misyonlar, çark, nişan ============
   Bütün blok yalnız semantik token okur (--surface-*, --text-*, --accent*,
   --ok-fg, --line, --elev-*, --r-card, --pad-card). Ham renk YOK, yeni hue
   YOK; tema paketi değiştiğinde bu bileşenler kendiliğinden uyum sağlar.
   Emphasis ton değiştirerek verilir, opaklık düşürerek değil. */

/* ---- Durum şeridi (seri · XP · tüy) ----
   Üç ayrı .statpill'in yerini alır. Ölçüm: üç hap 375px'te 233px yiyordu
   (her biri kendi zemini + kenarlığı + 29px ikon dairesi + mikro etiketi
   ile) ve marka kelimesini 84px'ten 22px'e düşürüyordu. Şerit tek kap,
   tek kenarlık, ikon + değer: ~150px.

   Etiketler SİLİNMEDİ, .sr-only'ye taşındı — mikro etiket katmanını
   küçültme yasağı metni yok etmeyi değil ölçeğini korumayı söyler; burada
   metin ekran okuyucuda tam hâliyle duruyor. */
.statstrip{display:flex;align-items:center;background:var(--card-bg);border:1px solid var(--card-bd);
  box-shadow:var(--shadow);border-radius:999px;padding:0 2px;height:40px;flex:0 0 auto}
.statstrip .ss{display:flex;align-items:center;gap:4px;padding:0 7px;height:38px;min-width:44px;
  justify-content:center;border-radius:999px;transition:transform .2s var(--spring)}
.statstrip .ss:active{transform:scale(.94)}
/* Tek hue: ikonlar marka aksanı, değerler birincil metin. Üç ayrı hue
   (eski haplar: tertiary/primary) aynı roldeki üç sayıyı birbirinden
   koparıyordu — "renk yalnızca iki anlam taşır" kuralı. */
.statstrip .ss .ic{width:16px;height:16px;color:var(--accent);flex:0 0 16px}
.statstrip .ss b{font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-1);line-height:1}
.statstrip .ssdiv{width:1px;height:18px;background:var(--line-2);flex:0 0 1px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- Ana ekran bölüm başlıkları ----
   Kartlar eskiden tek bir yığındı; "bugün ne yapayım" ile "nerede
   duruyorum" aynı görsel ağırlıkta yan yanaydı. Başlık iki bloğu ayırır. */
/* Etiket, kart başlıklarıyla YARIŞMAMALI: .82rem/700 denendi ve aynı ölçek
   ailesine girip ekranı iki başlık katmanına bölüyordu. Taban artık projenin
   mikro etiket ölçüsü (.eyebrow ile aynı .7rem) ve ağırlık 600; ayrım
   büyüklükten değil VERSALDAN ve harf aralığından geliyor.
   Ritim: üstte geniş boşluk (önceki bloktan ayırır), altta dar boşluk
   (kendi içeriğine bağlar) — 28/12 oranı kartlar arası 12px'lik boşlukla
   birlikte okununca dengeli çıkıyor. */
/* ⚠ `#scr-home` öneki ZORUNLU: `#scr-home h2` (1,0,1) düz `.home-sec`'i
   (0,1,0) eziyor ve etiket 16px/700'e dönüyordu. Id ile kapsamak bu
   bölümün belgelenmiş deseni — hem paylaşılan h2 kuralını hem açık tema
   katmanını (0,2,1) tek seferde geçer. */
#scr-home .home-sec{font-size:.7rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-3);margin:28px 2px 12px;line-height:1.1}
#scr-home>.home-sec:first-of-type{margin-top:22px}

/* Ders sonucu: tüy kazancı XP kutularının altında ayrı satır (dört kutu
   375px'te sıkışıyor, ayrıca tüy harcanabilir bakiye — XP ile aynı ölçüde
   bir başarı metriği değil). */
.rescoin{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;flex-wrap:wrap}
.rescoin .ic{width:19px;height:19px}
.rescoin b{font-size:1.02rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-1)}
.rescoin span{font-size:.78rem;color:var(--text-2)}
.rescoin .resboost{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-ink);font-size:.72rem;font-weight:600}
.rescoin .resboost .ic{width:14px;height:14px}
.coingain{display:flex;align-items:center;justify-content:center;gap:7px}
.coingain .ic{width:19px;height:19px}
.coingain b{font-size:1.02rem;font-weight:700;color:var(--text-1)}
.coingain span{font-size:.78rem;color:var(--text-2)}

/* ---- Mağaza (tam ekran sayfa) ----
   Bottom sheet elendi: kategori değiştikçe sheet yüksekliği içeriğe göre
   uzayıp kısalıyor, sayfa gözle takip edilemez biçimde zıplıyordu. */
#shopOverlay .mo-top{align-items:center}
/* Geri oku: sprite'ta sola bakan ok yok, sağa bakan chevron çevriliyor. */
#shopClose .ic,#helpClose .ic,#inviteClose .ic{transform:rotate(180deg)}   /* sağ chevron → geri oku */
.shopbal{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:auto;
  background:var(--accent-soft);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.shopbal .ic{width:17px;height:17px}
.shopbal b{font-size:.95rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent-ink)}
.seg.shopseg{margin:2px 18px 14px}
@media(min-width:1024px){.seg.shopseg{width:100%;max-width:920px;margin-left:auto;margin-right:auto}}
.shoplist{display:flex;flex-direction:column;gap:10px;padding-bottom:24px}

/* ---- Kozmetik kartlari (nisan / avatar / tema) ----
   Sarf malzemeleri LISTE kalir: onlarin degeri aciklama metninde
   ("elinde 0/3"), dikey kart o metni kirpardi. Kozmetikler ise gorsel;
   40px kucuk resim premium avatar sanatini ziyan ediyordu. Izgara zaten
   projenin deseni (rozetler, avatar secici, hizli eylemler). */
.shopgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding-bottom:24px}
@media(min-width:560px){.shopgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.shopgrid{grid-template-columns:repeat(4,1fr)}}
.shopcard{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  padding:14px 10px 12px;border-radius:var(--r-card);
  background:var(--surface-1);border:1px solid var(--line);box-shadow:var(--elev-1)}
.shopcard.owned{border-color:var(--line-2)}
/* Sanat alani: kare, kabin genisligini kullanir. */
.shop-art{width:100%;max-width:96px;aspect-ratio:1;flex:0 0 auto;display:grid;place-items:center;
  border-radius:18px;background:var(--surface-2)}
.shop-art .avatar-img{width:100%;height:100%;object-fit:contain}
.shop-art .ic{width:38px;height:38px}
/* Magazada avatar da DIGER OGELERLE AYNI kutuda durur: izgarada bazi
   kartlarin sanat alani levhali bazilari levhasiz olunca satir ritmi
   kiriliyordu. (Profildeki buyuk avatar levhasiz kalir — orasi tekil bir
   kimlik alani, izgara degil.) */
.shop-art.art-avatar{padding:6px}
.shopcard .shop-t{font-weight:600;font-size:.88rem;color:var(--text-1);line-height:1.2}
.shopcard .shop-d{font-size:.7rem;color:var(--text-3);margin-top:-4px}
/* Aciklama uzunlugu karttan karta degisiyor; buton AUTO MARGIN ile dibe
   itilir, boylece izgaradaki butun butonlar ayni hatta durur. */
.shopcard .shop-act{width:100%;display:flex;justify-content:center;margin-top:auto;padding-top:4px}
.shopcard .shop-note{font-size:.68rem;font-weight:600;color:var(--accent-ink);
  background:var(--accent-soft);border-radius:999px;padding:2px 8px}
.shopcard .shop-act .btn{width:100%;min-height:36px;padding:0 10px;font-size:.8rem;gap:5px}
.shopcard .shop-on{justify-content:center;width:100%;min-height:36px}
/* Tema karti paletin KENDISINI onizler — ikon degil uc renk seridi. */
.pkprev{display:flex;width:100%;height:100%;border-radius:18px;overflow:hidden}
.pkprev i{flex:1;display:block}
.pkprev i:nth-child(1){background:var(--s1)}
.pkprev i:nth-child(2){background:var(--s2)}
.pkprev i:nth-child(3){background:var(--s3)}
[data-theme="dark"] .pkprev[data-pk="default"]{--s1:var(--pk-default-accent-d);--s2:var(--pk-default-soft-d);--s3:var(--pk-default-focus-d)}
:root:not([data-theme="dark"]) .pkprev[data-pk="default"]{--s1:var(--pk-default-accent-l);--s2:var(--pk-default-soft-l);--s3:var(--pk-default-focus-l)}
[data-theme="dark"] .pkprev[data-pk="ocean"]{--s1:var(--pk-ocean-accent-d);--s2:var(--pk-ocean-soft-d);--s3:var(--pk-ocean-focus-d)}
:root:not([data-theme="dark"]) .pkprev[data-pk="ocean"]{--s1:var(--pk-ocean-accent-l);--s2:var(--pk-ocean-soft-l);--s3:var(--pk-ocean-focus-l)}
[data-theme="dark"] .pkprev[data-pk="forest"]{--s1:var(--pk-forest-accent-d);--s2:var(--pk-forest-soft-d);--s3:var(--pk-forest-focus-d)}
:root:not([data-theme="dark"]) .pkprev[data-pk="forest"]{--s1:var(--pk-forest-accent-l);--s2:var(--pk-forest-soft-l);--s3:var(--pk-forest-focus-l)}
[data-theme="dark"] .pkprev[data-pk="plum"]{--s1:var(--pk-plum-accent-d);--s2:var(--pk-plum-soft-d);--s3:var(--pk-plum-focus-d)}
:root:not([data-theme="dark"]) .pkprev[data-pk="plum"]{--s1:var(--pk-plum-accent-l);--s2:var(--pk-plum-soft-l);--s3:var(--pk-plum-focus-l)}
[data-theme="dark"] .pkprev[data-pk="rose"]{--s1:var(--pk-rose-accent-d);--s2:var(--pk-rose-soft-d);--s3:var(--pk-rose-focus-d)}
:root:not([data-theme="dark"]) .pkprev[data-pk="rose"]{--s1:var(--pk-rose-accent-l);--s2:var(--pk-rose-soft-l);--s3:var(--pk-rose-focus-l)}

.shoprow{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r-card);
  background:var(--surface-1);border:1px solid var(--line);box-shadow:var(--elev-1)}
.shop-ic{width:40px;height:40px;flex:0 0 40px;border-radius:13px;display:grid;place-items:center;
  background:var(--surface-2)}
.shop-ic .ic{width:22px;height:22px}
.shoprow .shop-av{width:40px;height:40px;flex:0 0 40px;border-radius:13px;object-fit:cover;display:block}
.shop-txt{flex:1;min-width:0}
.shop-t{font-weight:600;font-size:.94rem;color:var(--text-1)}
.shop-d{font-size:.78rem;color:var(--text-3);margin-top:2px}
.shop-act{flex:0 0 auto}
.shop-act .btn.sm{white-space:nowrap;gap:5px}
.shop-act .btn.sm .ic{width:14px;height:14px}
/* Sahip olunan ürün: "tamamlandı" rengi, ekonomideki tek ikinci anlam. */
.shop-on{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:600;color:var(--ok-fg)}
.shop-on .ic{width:15px;height:15px}
.shoprow.owned{border-color:var(--line-2)}

/* ================================================================
   DAVET (referral)
   ----------------------------------------------------------------
   Mağazadaki giriş satırı ZATEN var olan `.card.action` bileşenidir
   (yatay dizilim, sola hizalı metin, sağda ok) — burada yalnız mağaza
   ızgarasından ayrılsın diye alt boşluk ve tonlu yüzey veriliyor.
   Ekran kapsamına ALINMADI: `.card.action` kuralları bileşene bağlıdır
   ve ekran id'siyle kapsanmamalı (bkz. CLAUDE.md "satır-kart" notu).

   Kod kutusu tek vurgulu öğedir: kartın kendisi tonlu aksan, kod ise
   gömülü yüzeyde monospace. İkinci bir hue ya da degrade eklenmez —
   ilerleme/vurgu dili tek (ray --surface-2, dolgu düz --accent).
================================================================ */
/* Kart listenin ALTINDA. Üst boşluk küçük tutulur çünkü .shopgrid zaten
   24px alt dolgu taşıyor; ikisi toplanınca bölüm ayrımı yeterli oluyor. */
.invite-cta{margin:4px 0 8px;background:var(--accent-soft);border-color:transparent}
.invite-cta .action-ic{background:var(--surface-1)}

.inv-load{text-align:center;color:var(--text-2);font-size:.9rem;padding:26px 0;
  display:flex;align-items:center;justify-content:center;gap:8px}
.inv-load .ic{width:17px;height:17px}
.inv-hero{background:var(--accent-soft);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--pad-card);text-align:center}
.inv-lead{margin:0 0 14px;font-size:.88rem;line-height:1.5;color:var(--accent-ink)}
.inv-lead b{font-weight:700}
/* Kod elle okunup yazılıyor: monospace + geniş harf aralığı, 0/O ve 1/I
   ayrımını gözle mümkün kılar (alfabe zaten ikisini de dışarıda tutuyor). */
.inv-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.7rem;font-weight:700;letter-spacing:.22em;text-indent:.22em;
  color:var(--text-1);background:var(--surface-1);border-radius:var(--r-well);
  padding:14px 10px;user-select:all;-webkit-user-select:all}
.inv-acts{display:flex;gap:9px;margin-top:12px}
.inv-acts .btn{flex:1;min-height:44px}
.inv-cap{margin:11px 0 0;font-size:.72rem;color:var(--accent-ink)}

.inv-sec{margin-top:18px;background:var(--surface-1);border:1px solid var(--line);
  border-radius:var(--r-card);padding:var(--pad-card)}
.inv-sec h3{margin:0 0 4px;font-size:.95rem;font-weight:700;color:var(--text-1)}
.inv-sub{margin:0 0 12px;font-size:.8rem;color:var(--text-2)}
.inv-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--line)}
.inv-row:first-of-type{border-top:0;padding-top:2px}
.inv-ic{width:32px;height:32px;flex:0 0 32px;border-radius:11px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--text-3)}
.inv-ic.ok{color:var(--ok-fg)}
.inv-ic .ic{width:16px;height:16px}
.inv-txt{min-width:0;display:flex;flex-direction:column}
.inv-txt b{font-size:.85rem;font-weight:600;color:var(--text-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-txt i{font-style:normal;font-size:.72rem;color:var(--text-2)}
.inv-used{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--text-2)}
.inv-used .ic{width:18px;height:18px;color:var(--ok-fg);flex:0 0 18px}
/* Engel bildirimi başarı DEĞİLDİR: "tamamlandı" yeşili ekonomideki tek
   ikinci anlamdır ve kod giremeyen kullanıcıya verilmemeli. */
.inv-used.inv-note .ic{color:var(--text-3)}
.inv-used.inv-note{align-items:flex-start;line-height:1.5}

.inv-form{display:flex;gap:9px}
.inv-input{flex:1;min-width:0;min-height:46px;padding:0 14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.05rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-1);background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-well);outline:none}
.inv-input:focus{border-color:var(--accent)}
.inv-input::placeholder{color:var(--text-3);letter-spacing:.16em}
.inv-form .btn{min-height:46px;flex:0 0 auto}
/* Hata metni --error değil --text-2 üstünde kırmızı kütle: satır içi tek
   satırlık bir uyarı, panel değil. Boşken yer kaplamaz. */
.inv-err{margin:8px 0 0;font-size:.78rem;color:var(--error);min-height:0}
.inv-err:empty{display:none}
.inv-foot{text-align:center;font-size:.72rem;color:var(--text-3);margin:16px 0 4px;line-height:1.5}

/* ---- Misyonlar ---- */
.mislist{display:flex;flex-direction:column;gap:11px}
.misrow{display:flex;align-items:center;gap:11px}
.mis-ic{width:34px;height:34px;flex:0 0 34px;border-radius:11px;display:grid;place-items:center;
  background:var(--surface-2)}
.mis-ic .ic{width:19px;height:19px}
.mis-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.mis-t{font-size:.88rem;font-weight:500;color:var(--text-1)}
.track.mis-track{height:6px}
.mis-act{flex:0 0 auto;min-width:44px;display:flex;justify-content:flex-end}
.mis-n{font-size:.78rem;font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums}
.mis-ok{display:grid;place-items:center;color:var(--ok-fg)}
.mis-ok .ic{width:18px;height:18px}
.btn.sm.mis-claim{min-height:32px;padding:0 12px;font-size:.8rem}
.misrow.claimed .mis-t{color:var(--text-3)}
#misCard .cardhead{margin-bottom:14px}

/* ---- Günlük çark ---- */
.wheelbox{text-align:center}
/* 248px/72vw denendi ve büyük geldi: diyalogda başlık, ödül satırı ve buton
   ile birlikte çark ekranı ele geçiriyordu. Diyalog bir onay yüzeyi, bir
   oyun ekranı değil.

   Boyut SVG'nin KENDİ viewBox oranından gelir (width:100% + height:auto),
   ebeveynin yüksekliğinden değil. Eskiden `height:100%` idi ve `.wheelwrap`
   kuralı herhangi bir sebeple uygulanmazsa (eski önbellek, kısmi stil)
   yüzde yüksekliği çözülemeyip çark devasa büyüyüp diyalogdan taşıyordu.
   Bu hâliyle en kötü ihtimalle kabının genişliğine oturur. */
.wheelwrap{position:relative;width:min(196px,56vw);max-width:100%;margin:2px auto 0}
.wheelsvg{width:100%;max-width:100%;height:auto;display:block}
/* Dilimler İKİ TON: gömülü yüzey ve tonlu aksan yüzeyi. Üçüncü bir renk
   eklenmez — çark dekoratif bir hue tarlası değil, uygulamanın yüzeyi. */
.wsl{fill:var(--surface-2);stroke:var(--line);stroke-width:1}
.wsl.alt{fill:var(--accent-soft)}
.wlb{fill:var(--text-1);font-size:15px;font-weight:700;font-family:inherit}
/* Dilim simgesi: tüy miktarının yanındaki para birimi işareti ve
   sarf ödüllerinin kendi simgesi. currentColor sprite'tan miras alınmaz,
   fill doğrudan verilir. */
.wico{color:var(--accent-ink);fill:currentColor}
.whub{fill:var(--accent);stroke:var(--surface-1);stroke-width:3}
/* Kart üstündeki mini çark.
   Büyük çarkın dilim renkleri (--surface-2 / --accent-soft) BURADA
   KULLANILAMAZ: ikon yuvasının zemini de --surface-2, yani dilimler
   ölçüldüğünde yuvayla BİREBİR aynı renge düşüyordu (rgb(239,234,225) =
   rgb(239,234,225)) ve çark görünmüyordu. Kardeş ikonlar dolu aksan
   kütlesi taşıyor; mini çark da aynı ağırlıkta olmalı. İki ton da aksan
   ailesinden: kütle + kütlenin yüzeyle karışımı (opaklık değil TON). */
.wheelmini{width:30px;height:30px;display:block}
.wheelmini .wsl{fill:var(--accent-graphic);stroke:none}
.wheelmini .wsl.alt{fill:color-mix(in srgb,var(--accent-graphic) 40%,var(--surface-1))}
.wheelmini .whub{fill:var(--surface-1);stroke:none}
.wheelpin{position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;
  border-top:15px solid var(--accent);filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.wheelprize{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px}
.wheelprize .ic{width:22px;height:22px}
.wheelprize b{font-size:1.02rem;font-weight:700;color:var(--text-1)}
@media(prefers-reduced-motion:reduce){#wheelRot{transition:none!important}}

/* ---- Nişan: isim yanındaki kozmetik çip ---- */
/* margin-left ZORUNLU: çip isme bitişik basılıyor (esc(name)+flairChip(...)),
   arada boşluk karakteri yok — yoksa "Agah" ile çip yapışık duruyor. */
.flairchip{display:inline-flex;align-items:center;gap:5px;margin-left:8px;
  padding:3px 9px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--line);
  font-size:.7rem;font-weight:600;letter-spacing:.01em;vertical-align:middle;white-space:nowrap}
/* Sıralama satırında ad kısalabilir; çip küçülmemeli. */
.lname .flairchip{margin-left:6px;flex:0 0 auto}
.flairchip .ic{width:13px;height:13px}

/* ============ TEMA PAKETLERİ (mağazadan alınır) ============
   Paket YALNIZCA aksan ailesini değiştirir: --accent, --accent-graphic,
   --accent-ink, --accent-soft, --accent-line, --ki-focus. Obje paleti
   (--wa-*) DAHİL DEĞİLDİR — ders/kelime simgeleri kimliklerini renkten
   alıyor ("malzeme korunur, zemin uyarlanır").

   ⚠ KURAL: paket blokları --accent ve --ki-focus'a ASLA HAM HEX YAZMAZ,
   yalnız var() ile bağlar. İki sebep:
   1) "Bileşene renk yazma, tokeni oku" kuralı burada da geçerli — palet
      değerleri adlandırılmış --pk-* tokenlerinde tek yerde durur.
   2) tests/bottom-nav.test.js styles.css'te TAM İKİ adet --accent:#hex ve
      iki adet --ki-focus:#hex bekliyor (odak tonunun aksanla aynı olmadığını
      denetleyen sözleşme). Ham hex yazılsaydı o test her yeni pakette
      kırılırdı. tests/theme-packs.test.js bu kuralı ayrıca bekçiliyor.

   İki tema BİRBİRİNDEN BAĞIMSIZ ayarlanmıştır (biri diğerinin negatifi
   değil). Ölçülen değerler (tests/theme-packs.test.js doğruluyor):
   accent/kart >= 4.5 · ink/soft >= 4.5 · soft~bg luminans >= 1.07 ·
   graphic/kart >= 3.0 · ki-focus != accent.
   -d soneki koyu tema, -l soneki açık tema. */
:root{
  /* Varsayilan (amber) paketin ONIZLEME kopyasi. Mağaza karti paletin
     kendisini gosterir; aktif paket ne olursa olsun "Amber" karti amberi
     gostermeli, o yuzden --accent uzerinden okunamaz (o ezilmis olabilir). */
  --pk-default-accent-d:#F2A33A; --pk-default-soft-d:#241A0E; --pk-default-focus-d:#B4700F;
  --pk-default-accent-l:#A85400; --pk-default-soft-l:#FBEAD3; --pk-default-focus-l:#DE8A1E;

  --pk-ocean-accent-d:#4FB3E8; --pk-ocean-ink-d:#7CC8F0; --pk-ocean-soft-d:#0E1D26;
  --pk-ocean-focus-d:#2A7FAE;  --pk-ocean-line-d:rgba(79,179,232,.24);
  --pk-ocean-accent-l:#0A6089; --pk-ocean-ink-l:#075170; --pk-ocean-soft-l:#D9EDF8;
  --pk-ocean-focus-l:#2E97C9;  --pk-ocean-line-l:rgba(10,96,137,.22); --pk-ocean-graphic-l:#1A7FAE;

  --pk-forest-accent-d:#6ECF7F; --pk-forest-ink-d:#93DC9F; --pk-forest-soft-d:#0F1F14;
  --pk-forest-focus-d:#3E9550;  --pk-forest-line-d:rgba(110,207,127,.24);
  --pk-forest-accent-l:#146B37; --pk-forest-ink-l:#0F5A2D; --pk-forest-soft-l:#DCEFE1;
  --pk-forest-focus-l:#3FA55F;  --pk-forest-line-l:rgba(20,107,55,.22); --pk-forest-graphic-l:#218B4C;

  --pk-plum-accent-d:#C98CE8; --pk-plum-ink-d:#DBADF0; --pk-plum-soft-d:#1C1226;
  --pk-plum-focus-d:#8F55B4;  --pk-plum-line-d:rgba(201,140,232,.24);
  --pk-plum-accent-l:#7A3399; --pk-plum-ink-l:#652A80; --pk-plum-soft-l:#EFE0F5;
  --pk-plum-focus-l:#A860C8;  --pk-plum-line-l:rgba(122,51,153,.22); --pk-plum-graphic-l:#9645B8;

  --pk-rose-accent-d:#F58AA0; --pk-rose-ink-d:#F8A9BA; --pk-rose-soft-d:#26121A;
  --pk-rose-focus-d:#B85268;  --pk-rose-line-d:rgba(245,138,160,.24);
  --pk-rose-accent-l:#A8264A; --pk-rose-ink-l:#8C1D3D; --pk-rose-soft-l:#FADFE6;
  --pk-rose-focus-l:#D45B79;  --pk-rose-line-l:rgba(168,38,74,.22); --pk-rose-graphic-l:#C63A63;
}

:root{
  /* Obje paleti (ders / gorev / rozet simgeleri) — tema paketi basina.
     Uretim: OKLCH sabit acisal yuvalar; ACIKLIK (L) temel paletten AYNEN
     korunur, degisen yalniz hue ve bir miktar kroma. Bkz. CLAUDE.md. */
  --pk-ocean-wa-amber-d:#158BC3;--pk-ocean-wa-amber-hi-d:#58C2FF;--pk-ocean-wa-terra-d:#007686;--pk-ocean-wa-terra-hi-d:#00ADC4;--pk-ocean-wa-sage-d:#79609F;--pk-ocean-wa-sage-hi-d:#B492E8;--pk-ocean-wa-sand-d:#6C89AF;--pk-ocean-wa-sand-hi-d:#A4C1E8;--pk-ocean-wa-cool-d:#864B5D;--pk-ocean-wa-cool-hi-d:#CA889A;--pk-ocean-wa-brick-d:#00706B;--pk-ocean-wa-brick-hi-d:#00A19A;--pk-ocean-wa-paper-d:#D8EBF8;--pk-ocean-wa-ink-d:#1A1F23;--pk-ocean-wa-divider-d:#4D575D;
  --pk-ocean-wa-amber-l:#0077AA;--pk-ocean-wa-amber-hi-l:#00A1E5;--pk-ocean-wa-terra-l:#006371;--pk-ocean-wa-terra-hi-l:#0096AA;--pk-ocean-wa-sage-l:#6A5090;--pk-ocean-wa-sage-hi-l:#A27ED7;--pk-ocean-wa-sand-l:#5C7699;--pk-ocean-wa-sand-hi-l:#8BABD5;--pk-ocean-wa-cool-l:#733E4E;--pk-ocean-wa-cool-hi-l:#B2667D;--pk-ocean-wa-brick-l:#00635E;--pk-ocean-wa-brick-hi-l:#009089;--pk-ocean-wa-paper-l:#CCE0EF;--pk-ocean-wa-ink-l:#293239;--pk-ocean-wa-divider-l:#616C75;
  --pk-forest-wa-amber-d:#3A9659;--pk-forest-wa-amber-hi-d:#66D086;--pk-forest-wa-terra-d:#577506;--pk-forest-wa-terra-hi-d:#84A936;--pk-forest-wa-sage-d:#007C92;--pk-forest-wa-sage-hi-d:#12B9D8;--pk-forest-wa-sand-d:#5D9480;--pk-forest-wa-sand-hi-d:#97CDB8;--pk-forest-wa-cool-d:#535B8E;--pk-forest-wa-cool-hi-d:#8F9AD2;--pk-forest-wa-brick-d:#6B6300;--pk-forest-wa-brick-hi-d:#9A8E00;--pk-forest-wa-paper-d:#DCEDDF;--pk-forest-wa-ink-d:#1B201C;--pk-forest-wa-divider-d:#4F5851;
  --pk-forest-wa-amber-l:#1C8345;--pk-forest-wa-amber-hi-l:#3CB065;--pk-forest-wa-terra-l:#486204;--pk-forest-wa-terra-hi-l:#6F9413;--pk-forest-wa-sage-l:#006B7E;--pk-forest-wa-sage-hi-l:#00A4C1;--pk-forest-wa-sand-l:#4D816F;--pk-forest-wa-sand-hi-l:#7BB7A1;--pk-forest-wa-cool-l:#464D7B;--pk-forest-wa-cool-hi-l:#707BBD;--pk-forest-wa-brick-l:#5F5700;--pk-forest-wa-brick-hi-l:#8A7F00;--pk-forest-wa-paper-l:#CFE3D3;--pk-forest-wa-ink-l:#2A332C;--pk-forest-wa-divider-l:#636E65;
  --pk-plum-wa-amber-d:#9D68B6;--pk-plum-wa-amber-hi-d:#D799F7;--pk-plum-wa-terra-d:#665AAE;--pk-plum-wa-terra-hi-d:#9689EF;--pk-plum-wa-sage-d:#A05559;--pk-plum-wa-sage-hi-d:#EA8388;--pk-plum-wa-sand-d:#9F7899;--pk-plum-wa-sand-hi-d:#D8B0D1;--pk-plum-wa-cool-d:#795923;--pk-plum-wa-cool-hi-d:#BB9761;--pk-plum-wa-brick-d:#3859B5;--pk-plum-wa-brick-hi-d:#5884F7;--pk-plum-wa-paper-d:#EEE3F5;--pk-plum-wa-ink-d:#201D22;--pk-plum-wa-divider-d:#59535C;
  --pk-plum-wa-amber-l:#8A54A3;--pk-plum-wa-amber-hi-l:#B777D6;--pk-plum-wa-terra-l:#564B93;--pk-plum-wa-terra-hi-l:#8273DA;--pk-plum-wa-sage-l:#904449;--pk-plum-wa-sage-hi-l:#D86E74;--pk-plum-wa-sand-l:#8B6785;--pk-plum-wa-sand-hi-l:#C398BC;--pk-plum-wa-cool-l:#684B1A;--pk-plum-wa-cool-hi-l:#A27933;--pk-plum-wa-brick-l:#2F4EA4;--pk-plum-wa-brick-hi-l:#4873E9;--pk-plum-wa-paper-l:#E4D8EB;--pk-plum-wa-ink-l:#342E37;--pk-plum-wa-divider-l:#6F6773;
  --pk-rose-wa-amber-d:#C05D70;--pk-rose-wa-amber-hi-d:#FF90A2;--pk-rose-wa-terra-d:#9A467B;--pk-rose-wa-terra-hi-d:#D871B0;--pk-rose-wa-sage-d:#916521;--pk-rose-wa-sage-hi-d:#D4993F;--pk-rose-wa-sand-d:#AB7870;--pk-rose-wa-sand-hi-d:#E5B0A8;--pk-rose-wa-cool-d:#4C6A38;--pk-rose-wa-cool-hi-d:#88AA74;--pk-rose-wa-brick-d:#863D92;--pk-rose-wa-brick-hi-d:#BC60CB;--pk-rose-wa-paper-d:#F9E1E4;--pk-rose-wa-ink-d:#231D1D;--pk-rose-wa-divider-d:#5E5253;
  --pk-rose-wa-amber-l:#AC485C;--pk-rose-wa-amber-hi-l:#E26A81;--pk-rose-wa-terra-l:#823A67;--pk-rose-wa-terra-hi-l:#C25B9B;--pk-rose-wa-sage-l:#815501;--pk-rose-wa-sage-hi-l:#C3851B;--pk-rose-wa-sand-l:#966760;--pk-rose-wa-sand-hi-l:#D19890;--pk-rose-wa-cool-l:#3F5A2E;--pk-rose-wa-cool-hi-l:#678E4E;--pk-rose-wa-brick-l:#793384;--pk-rose-wa-brick-hi-l:#AE4EBD;--pk-rose-wa-paper-l:#F0D5D8;--pk-rose-wa-ink-l:#392D2F;--pk-rose-wa-divider-l:#756668;
}

[data-theme="dark"][data-pack="ocean"]{--accent:var(--pk-ocean-accent-d);--accent-ink:var(--pk-ocean-ink-d);--accent-soft:var(--pk-ocean-soft-d);--accent-line:var(--pk-ocean-line-d);--ki-focus:var(--pk-ocean-focus-d);--wa-amber:var(--pk-ocean-wa-amber-d);--wa-amber-hi:var(--pk-ocean-wa-amber-hi-d);--wa-terra:var(--pk-ocean-wa-terra-d);--wa-terra-hi:var(--pk-ocean-wa-terra-hi-d);--wa-sage:var(--pk-ocean-wa-sage-d);--wa-sage-hi:var(--pk-ocean-wa-sage-hi-d);--wa-sand:var(--pk-ocean-wa-sand-d);--wa-sand-hi:var(--pk-ocean-wa-sand-hi-d);--wa-cool:var(--pk-ocean-wa-cool-d);--wa-cool-hi:var(--pk-ocean-wa-cool-hi-d);--wa-paper:var(--pk-ocean-wa-paper-d);--wa-ink:var(--pk-ocean-wa-ink-d);--wa-divider:var(--pk-ocean-wa-divider-d)}
[data-theme="dark"][data-pack="forest"]{--accent:var(--pk-forest-accent-d);--accent-ink:var(--pk-forest-ink-d);--accent-soft:var(--pk-forest-soft-d);--accent-line:var(--pk-forest-line-d);--ki-focus:var(--pk-forest-focus-d);--wa-amber:var(--pk-forest-wa-amber-d);--wa-amber-hi:var(--pk-forest-wa-amber-hi-d);--wa-terra:var(--pk-forest-wa-terra-d);--wa-terra-hi:var(--pk-forest-wa-terra-hi-d);--wa-sage:var(--pk-forest-wa-sage-d);--wa-sage-hi:var(--pk-forest-wa-sage-hi-d);--wa-sand:var(--pk-forest-wa-sand-d);--wa-sand-hi:var(--pk-forest-wa-sand-hi-d);--wa-cool:var(--pk-forest-wa-cool-d);--wa-cool-hi:var(--pk-forest-wa-cool-hi-d);--wa-paper:var(--pk-forest-wa-paper-d);--wa-ink:var(--pk-forest-wa-ink-d);--wa-divider:var(--pk-forest-wa-divider-d)}
[data-theme="dark"][data-pack="plum"]{--accent:var(--pk-plum-accent-d);--accent-ink:var(--pk-plum-ink-d);--accent-soft:var(--pk-plum-soft-d);--accent-line:var(--pk-plum-line-d);--ki-focus:var(--pk-plum-focus-d);--wa-amber:var(--pk-plum-wa-amber-d);--wa-amber-hi:var(--pk-plum-wa-amber-hi-d);--wa-terra:var(--pk-plum-wa-terra-d);--wa-terra-hi:var(--pk-plum-wa-terra-hi-d);--wa-sage:var(--pk-plum-wa-sage-d);--wa-sage-hi:var(--pk-plum-wa-sage-hi-d);--wa-sand:var(--pk-plum-wa-sand-d);--wa-sand-hi:var(--pk-plum-wa-sand-hi-d);--wa-cool:var(--pk-plum-wa-cool-d);--wa-cool-hi:var(--pk-plum-wa-cool-hi-d);--wa-paper:var(--pk-plum-wa-paper-d);--wa-ink:var(--pk-plum-wa-ink-d);--wa-divider:var(--pk-plum-wa-divider-d)}
[data-theme="dark"][data-pack="rose"]{--accent:var(--pk-rose-accent-d);--accent-ink:var(--pk-rose-ink-d);--accent-soft:var(--pk-rose-soft-d);--accent-line:var(--pk-rose-line-d);--ki-focus:var(--pk-rose-focus-d);--wa-amber:var(--pk-rose-wa-amber-d);--wa-amber-hi:var(--pk-rose-wa-amber-hi-d);--wa-terra:var(--pk-rose-wa-terra-d);--wa-terra-hi:var(--pk-rose-wa-terra-hi-d);--wa-sage:var(--pk-rose-wa-sage-d);--wa-sage-hi:var(--pk-rose-wa-sage-hi-d);--wa-sand:var(--pk-rose-wa-sand-d);--wa-sand-hi:var(--pk-rose-wa-sand-hi-d);--wa-cool:var(--pk-rose-wa-cool-d);--wa-cool-hi:var(--pk-rose-wa-cool-hi-d);--wa-paper:var(--pk-rose-wa-paper-d);--wa-ink:var(--pk-rose-wa-ink-d);--wa-divider:var(--pk-rose-wa-divider-d)}

:root:not([data-theme="dark"])[data-pack="ocean"]{--accent:var(--pk-ocean-accent-l);--accent-graphic:var(--pk-ocean-graphic-l);--accent-ink:var(--pk-ocean-ink-l);--accent-soft:var(--pk-ocean-soft-l);--accent-line:var(--pk-ocean-line-l);--ki-focus:var(--pk-ocean-focus-l);--wa-amber:var(--pk-ocean-wa-amber-l);--wa-amber-hi:var(--pk-ocean-wa-amber-hi-l);--wa-terra:var(--pk-ocean-wa-terra-l);--wa-terra-hi:var(--pk-ocean-wa-terra-hi-l);--wa-sage:var(--pk-ocean-wa-sage-l);--wa-sage-hi:var(--pk-ocean-wa-sage-hi-l);--wa-sand:var(--pk-ocean-wa-sand-l);--wa-sand-hi:var(--pk-ocean-wa-sand-hi-l);--wa-cool:var(--pk-ocean-wa-cool-l);--wa-cool-hi:var(--pk-ocean-wa-cool-hi-l);--wa-paper:var(--pk-ocean-wa-paper-l);--wa-ink:var(--pk-ocean-wa-ink-l);--wa-divider:var(--pk-ocean-wa-divider-l)}
:root:not([data-theme="dark"])[data-pack="forest"]{--accent:var(--pk-forest-accent-l);--accent-graphic:var(--pk-forest-graphic-l);--accent-ink:var(--pk-forest-ink-l);--accent-soft:var(--pk-forest-soft-l);--accent-line:var(--pk-forest-line-l);--ki-focus:var(--pk-forest-focus-l);--wa-amber:var(--pk-forest-wa-amber-l);--wa-amber-hi:var(--pk-forest-wa-amber-hi-l);--wa-terra:var(--pk-forest-wa-terra-l);--wa-terra-hi:var(--pk-forest-wa-terra-hi-l);--wa-sage:var(--pk-forest-wa-sage-l);--wa-sage-hi:var(--pk-forest-wa-sage-hi-l);--wa-sand:var(--pk-forest-wa-sand-l);--wa-sand-hi:var(--pk-forest-wa-sand-hi-l);--wa-cool:var(--pk-forest-wa-cool-l);--wa-cool-hi:var(--pk-forest-wa-cool-hi-l);--wa-paper:var(--pk-forest-wa-paper-l);--wa-ink:var(--pk-forest-wa-ink-l);--wa-divider:var(--pk-forest-wa-divider-l)}
:root:not([data-theme="dark"])[data-pack="plum"]{--accent:var(--pk-plum-accent-l);--accent-graphic:var(--pk-plum-graphic-l);--accent-ink:var(--pk-plum-ink-l);--accent-soft:var(--pk-plum-soft-l);--accent-line:var(--pk-plum-line-l);--ki-focus:var(--pk-plum-focus-l);--wa-amber:var(--pk-plum-wa-amber-l);--wa-amber-hi:var(--pk-plum-wa-amber-hi-l);--wa-terra:var(--pk-plum-wa-terra-l);--wa-terra-hi:var(--pk-plum-wa-terra-hi-l);--wa-sage:var(--pk-plum-wa-sage-l);--wa-sage-hi:var(--pk-plum-wa-sage-hi-l);--wa-sand:var(--pk-plum-wa-sand-l);--wa-sand-hi:var(--pk-plum-wa-sand-hi-l);--wa-cool:var(--pk-plum-wa-cool-l);--wa-cool-hi:var(--pk-plum-wa-cool-hi-l);--wa-paper:var(--pk-plum-wa-paper-l);--wa-ink:var(--pk-plum-wa-ink-l);--wa-divider:var(--pk-plum-wa-divider-l)}
:root:not([data-theme="dark"])[data-pack="rose"]{--accent:var(--pk-rose-accent-l);--accent-graphic:var(--pk-rose-graphic-l);--accent-ink:var(--pk-rose-ink-l);--accent-soft:var(--pk-rose-soft-l);--accent-line:var(--pk-rose-line-l);--ki-focus:var(--pk-rose-focus-l);--wa-amber:var(--pk-rose-wa-amber-l);--wa-amber-hi:var(--pk-rose-wa-amber-hi-l);--wa-terra:var(--pk-rose-wa-terra-l);--wa-terra-hi:var(--pk-rose-wa-terra-hi-l);--wa-sage:var(--pk-rose-wa-sage-l);--wa-sage-hi:var(--pk-rose-wa-sage-hi-l);--wa-sand:var(--pk-rose-wa-sand-l);--wa-sand-hi:var(--pk-rose-wa-sand-hi-l);--wa-cool:var(--pk-rose-wa-cool-l);--wa-cool-hi:var(--pk-rose-wa-cool-hi-l);--wa-paper:var(--pk-rose-wa-paper-l);--wa-ink:var(--pk-rose-wa-ink-l);--wa-divider:var(--pk-rose-wa-divider-l)}

/* ============ REHBER — "Nasıl çalışır?" ============
   Ayarlar → YARDIM'dan açılan tam ekran sayfa. Yeni bir görsel dil KURMAZ:
   yüzeyler --surface-1/2, vurgu --accent, ölçüler --r-card/--pad-card,
   mikro etiket tabanı .7rem (bkz. "UI yoğunluğu"). Tek yeni bileşen
   akordeon başlığıdır ve o da .setrow/.card.action ile aynı satır ritmini
   kullanır. */
.hp-hero{
  background:color-mix(in srgb,var(--accent) 12%,var(--surface-1));
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  border-radius:var(--r-card);padding:var(--pad-card);margin-bottom:14px;
}
.hp-hero .eyebrow{color:var(--accent-ink)}
.hp-hero h3{margin:2px 0 12px;font-size:1.06rem;font-weight:700;letter-spacing:-.01em}
.hp-hero p{margin:12px 0 0;font-size:.82rem;line-height:1.5;color:var(--text-2)}
.hp-hero p b{color:var(--text-1);font-weight:700}
/* Döngü: üç adım + aralarında ok. Dar ekranda sarmaz — okların anlamı
   sıradan gelir, alt satıra düşen ok yön bilgisini kaybeder. */
.hp-loop{display:flex;align-items:stretch;gap:6px}
.hp-step{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:var(--surface-1);border-radius:var(--r-well);padding:10px 6px;text-align:center;
}
.hp-step .ic{width:22px;height:22px;color:var(--accent);display:block}
.hp-step b{font-size:.78rem;font-weight:700;line-height:1.15}
.hp-step i{font-size:.68rem;font-style:normal;color:var(--text-3);line-height:1.2}
.hp-arrow{align-self:center;color:var(--accent);font-weight:700;flex:0 0 auto}

/* --- Akordeon --- */
.hp-card{
  background:var(--surface-1);border:1px solid var(--card-bd);
  border-radius:var(--r-card);margin-bottom:10px;overflow:hidden;
}
.hp-sum{
  display:flex;align-items:center;gap:12px;padding:13px var(--pad-card);
  min-height:56px;cursor:pointer;list-style:none;
}
.hp-sum::-webkit-details-marker{display:none}
.hp-ic{
  width:var(--well);height:var(--well);flex:0 0 var(--well);border-radius:var(--r-well);
  display:grid;place-items:center;background:var(--surface-2);
}
.hp-ic .ic{width:22px;height:22px;color:var(--accent);display:block}
.hp-sumtxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hp-sumtxt b{font-size:.94rem;font-weight:700;line-height:1.15}
.hp-sumtxt i{font-size:.76rem;font-style:normal;color:var(--text-2);line-height:1.25}
.hp-chev{flex:0 0 auto;color:var(--text-3);transition:transform .25s var(--ease);display:grid}
.hp-chev .ic{width:14px;height:14px;display:block;transform:rotate(90deg)}
.hp-card[open] .hp-chev{transform:rotate(180deg)}
.hp-body{padding:0 var(--pad-card) var(--pad-card);animation:rise .3s var(--ease) both}
.hp-body p{margin:0 0 10px;font-size:.84rem;line-height:1.55;color:var(--text-2)}
.hp-body p b{color:var(--text-1);font-weight:700}
.hp-note{font-size:.78rem !important;color:var(--text-3) !important;margin-bottom:0 !important}

/* --- Bilgi satırları --- */
.hp-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:7px}
.hp-li{display:flex;align-items:center;gap:10px;background:var(--surface-2);border-radius:var(--r-well);padding:9px 11px}
.hp-li-ic{width:18px;height:18px;flex:0 0 18px;color:var(--accent);display:block}
.hp-li span{display:flex;flex-direction:column;gap:1px;min-width:0}
.hp-li b{font-size:.8rem;font-weight:700;line-height:1.2}
/* --text-3 DEĞİL: gömülü yüzeyin (--surface-2) üstünde koyu temada 4.49
   ölçüldü, AA eşiği 4.5. Aynı desen AI bildirme düğmesinde de yaşandı. */
.hp-li i{font-size:.72rem;font-style:normal;color:var(--text-2);line-height:1.25}
/* Kullanıcının KENDİ verisi: rehberi soyut bir metin olmaktan çıkarır. */
.hp-live{
  display:flex;align-items:center;gap:11px;margin:0 0 12px;padding:11px 12px;
  border-radius:var(--r-well);background:color-mix(in srgb,var(--accent) 10%,var(--surface-1));
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
}
.hp-live-ic{width:20px;height:20px;flex:0 0 20px;color:var(--accent);display:block}
.hp-live span{display:flex;flex-direction:column;gap:1px;min-width:0}
.hp-live b{font-size:.84rem;font-weight:700;line-height:1.2}
.hp-live i{font-size:.73rem;font-style:normal;color:var(--text-2);line-height:1.25}
/* Sistemin tek sert kuralı (XP ≠ tüy) kendi kutusunda durur. */
.hp-rule{background:var(--surface-2);border-radius:var(--r-well);padding:12px;margin:0 0 12px}
.hp-rulehead{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.hp-rule-ic{width:19px;height:19px;flex:0 0 19px;color:var(--accent);display:block}
.hp-rulehead b{font-size:.84rem;font-weight:700}
.hp-rule p{margin:0 !important;font-size:.79rem !important}

/* --- Etkileşimli gösterimler --- */
.hp-demo{background:var(--surface-2);border-radius:var(--r-well);padding:12px;margin:0 0 12px}
.hp-demohead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:9px}
.hp-demohead .eyebrow{color:var(--accent-ink)}
.hp-demoval{font-size:.82rem;font-weight:700;font-variant-numeric:tabular-nums}
.hp-track{height:var(--track-h);border-radius:99px;background:var(--surface-1);overflow:hidden}
.hp-track i{display:block;height:100%;border-radius:99px;background:var(--accent);width:0;transition:width .7s var(--ease)}
.hp-demonote{font-size:.78rem;line-height:1.45;color:var(--text-2);margin:9px 0 10px}
.hp-demonote b{color:var(--text-1);font-weight:700}
.hp-demonote i{font-style:normal;color:var(--text-3)}
.hp-op{color:var(--accent);font-weight:700}
.hp-demorow{display:flex;gap:8px}
.hp-btn{gap:7px}
.hp-btn .ic{width:15px;height:15px;flex:0 0 15px}
.hp-demorow .hp-btn{flex:1}
/* Hafıza merdiveni: basamak yükseldikçe tekrar aralığı uzar. */
.hp-ladder{list-style:none;margin:0 0 11px;padding:0;display:flex;gap:4px;align-items:flex-end}
.hp-rung{
  flex:1;min-width:0;border-radius:7px 7px 4px 4px;background:var(--surface-1);
  display:grid;place-items:end center;padding:5px 2px;
  transition:background .3s var(--ease),color .3s var(--ease),height .3s var(--ease);
}
.hp-rung:nth-child(1){height:26px}.hp-rung:nth-child(2){height:32px}
.hp-rung:nth-child(3){height:38px}.hp-rung:nth-child(4){height:44px}
.hp-rung:nth-child(5){height:50px}.hp-rung:nth-child(6){height:56px}
.hp-rung:nth-child(7){height:62px}
.hp-rung b{font-size:.6rem;font-weight:700;color:var(--text-3);white-space:nowrap;
  writing-mode:vertical-rl;transform:rotate(180deg);line-height:1}
.hp-rung.on{background:var(--accent)}
.hp-rung.on b{color:var(--on-accent)}
/* Son 7 gün: dolu = o gün çalışılmış. */
.hp-week{display:flex;gap:5px;margin:0 0 12px}
.hp-day{
  flex:1;height:38px;border-radius:var(--r-well);background:var(--surface-2);
  display:grid;place-items:center;
}
.hp-day i{font-size:.64rem;font-style:normal;font-weight:700;color:var(--text-2)}   /* bkz. .hp-li i */
.hp-day.on{background:var(--accent)}
.hp-day.on i{color:var(--on-accent)}
/* Müfredat akışı: konu adları ve aralarında ok; dar ekranda kaydırılır. */
.hp-flow{display:flex;align-items:center;gap:6px;margin:0 0 12px;overflow-x:auto;padding-bottom:2px}
.hp-flow::-webkit-scrollbar{display:none}
.hp-flowi{
  flex:0 0 auto;background:var(--surface-2);border-radius:99px;
  padding:5px 11px;font-size:.72rem;font-weight:700;white-space:nowrap;
}
.hp-flow .hp-arrow{font-size:.8rem}
.hp-foot{text-align:center;font-size:.76rem;color:var(--text-3);margin:16px 0 4px}
@media(max-width:380px){
  .hp-step i{display:none}
  .hp-loop{gap:4px}
}

/* ================================================================
   KOVUK — Karakulak'ın kişisel alanı (den.js)
   ----------------------------------------------------------------
   AI panelinin İKİNCİ modudur: sohbet varsayılan kalır, çember bir
   gözetleme deliğidir. Mod #aiChat[data-mode="den"] ile açılır.
   Renk yazılmaz; hepsi semantik tokenlerden okunur, böylece beş tema
   paketi ve iki tema ayrı kural gerektirmez.
================================================================ */
.den{display:none;flex:1;min-height:0;flex-direction:column}
#aiChat[data-mode="den"] .den{display:flex}
#aiChat[data-mode="den"] .ai-topbar,
#aiChat[data-mode="den"] .ai-avatar-wrapper,
#aiChat[data-mode="den"] .ai-bodywrap,
#aiChat[data-mode="den"] .ai-dock{display:none}

/* Kapı: şeridin üstünde duran çip. Şerit artık uçtan uca olduğu için çip
   altına değil ÜSTÜNE bindirilir — dikey alan yemesin. Zemin odaya karşı
   okunmak zorunda (oda temadan bağımsız, sabit sıcak bir resim), o yüzden
   token değil sabit koyu levha + açık metin kullanılır; aynı gerekçe
   yuva işaretlerinde de yazılı. */
.ai-avatar-wrapper{flex-direction:column;gap:0}
.den-enter{
  position:absolute;right:10px;bottom:10px;z-index:6;
  display:inline-flex;align-items:center;gap:5px;min-height:34px;
  padding:7px 10px 7px 14px;border:0;border-radius:99px;
  background:rgba(24,13,5,.72);color:rgba(255,250,244,.96);
  font-size:.74rem;font-weight:700;letter-spacing:.01em;cursor:pointer;
  box-shadow:0 1px 6px rgba(0,0,0,.28);
}
/* ⚠ .ki-icon kendi color:var(--ki-ink) değerini taşır ve kalıtımı YENER —
   koyu çipin üstünde ok siyah kalıp görünmüyordu. Renk doğrudan verilir. */
.den-enter .ic{width:15px;height:15px;color:rgba(255,250,244,.96)}
.ai-avatar-frame{cursor:pointer}
/* Şeritteki nesneler DEKORATİFTİR: aynı oda, aynı eşyalar — ama yerleştirme
   yalnız kovukta yapılır (den.js interactive=false ile basar). */
.ai-stage .den-slots{position:absolute;inset:0;z-index:3;pointer-events:none}
/* Kovukta maskot GİZLİDİR: burası odayı düzenleme ekranı ve kedi tam
   ortada durup yerleşimi kapatıyordu. Sohbet şeridinde görünmeye devam
   eder — orası "Karakulak'ın odası", burası "odayı kur". */
#denView .den-mascot{display:none}
.ai-stage .den-slot{position:absolute;transform:none}
.ai-stage .den-slot.is-empty,.ai-stage .den-slot.is-locked{display:none}

.den-top{display:flex;align-items:center;gap:11px;padding:calc(12px + env(safe-area-inset-top)) 18px 6px}
.den-top .iconbtn{width:42px;height:42px;flex:0 0 42px}
.den-top .mo-ttl{min-width:0;flex:1}
.den-top .mo-ttl h2{margin:0;font-size:1.14rem}
.den-top .mo-ttl .eyebrow{line-height:1.1}
#denBack .ic{transform:rotate(180deg)}                 /* sağ chevron → geri oku */
#denEdit[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-ink)}
.den-scroll{flex:1;overflow-y:auto;padding:6px 16px calc(20px + env(safe-area-inset-bottom))}
/* ⚠ Sohbet şeridiyle AYNI ORAN olmak ZORUNDA (.ai-avatar-frame 16/9).
   Oda kırpılmadan doğrudan çizildiği için oranlar ayrışırsa kompozisyon
   gerilir ve aynı yuva koordinatı iki yüzeyde farklı noktayı gösterir.
   16/9 seçildi: 4/3 şerit sohbet alanını daraltıyordu. */
.den-stage{
  position:relative;width:100%;aspect-ratio:16/9;max-width:520px;margin:0 auto;
  border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--elev-1);
  background:var(--surface-2);
  isolation:isolate;
}
/* Oda tabanı eşyaların ALTINDA (z1), ışık katmanı ÜSTÜNDE (z4): lamba ve
   pencere parıltısı DOM'daki eşyalara da düşsün. */
.den-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.den-light{z-index:4}
/* ⚠ Katman sırası İKİ YÜZEYDE DE aynı: oda(1) → maskot(2) → eşyalar(3)
   → ışık(5). Şeritte taban .ai-canvas kuralı z-index:3 veriyor ve
   maskotu (z2) örtüp KAYBEDİYORDU. */
#aiAvatarCanvas{z-index:1}
.ai-light{z-index:5}
/* Maskot kutusu KARE ve tabandan hizalı: object-fit:contain kısa kenara
   sığdırdığı için yüzde-yükseklik kullanmak kediyi küçültüyordu.
   ⚠ GENİŞLİK KESRİ yükseklikte ORANLA büyür: 16/9 sahnede %30 genişlik
   yüksekliğin %53'üne denk gelir. Sahne oranı değişirse YENİDEN ÖLÇ.
   Şerit ve kovuk aynı odadır; kutu ikisinde de aynı (den.js MASCOT_BOX). */
.ai-stage .ai-mascot,
.den-mascot{
  left:50%;right:auto;bottom:2%;margin:0;transform:translateX(-50%);
  width:30%;height:auto;aspect-ratio:1/1;z-index:2;
}
/* ⚠ Kap GEÇİRGEN olmalı: inset:0 ile tüm sahneyi kaplıyor ve altındaki
   dekor bölgelerini (duvar/halı) yutuyordu — dokunmak hiçbir şey yapmıyordu.
   Tıklamayı yalnız yuvaların kendisi alır. */
.den-slots{position:absolute;inset:0;z-index:3;pointer-events:none}
.den-slot{pointer-events:auto}

.den-slot{
  position:absolute;transform:translate(-50%,-50%);aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer;
}
/* Görsel boy ≠ dokunma hedefi: yuvalar odanın ölçüsünde küçük kalır,
   hit alanı görünmez bir katmanla 44px'e tamamlanır. */
.den-slot::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100%,44px);height:max(100%,44px);
}
/* Eşyalar RAFA OTURUR: obje simgeleri kendi viewBox'ının içinde bir miktar
   boşlukla çizildiği için kutunun ortasına yerleştirilince "havada duruyor"
   okunuyordu. İki düzeltme birlikte çalışıyor: sanat kutunun DİBİNE hizalanır
   ve altına bir temas gölgesi düşer — odanın kendi mobilyası da (avSoftShadow)
   aynı dili kullanıyor. */
.den-slot{box-sizing:border-box}
.den-slot .den-art,.den-slot .lesson-art{width:100%;height:100%;display:block}
.den-slot.is-full:not(.is-frame){align-items:flex-end}
.den-slot.is-full:not(.is-frame)::after{
  content:"";position:absolute;left:50%;bottom:-2%;transform:translateX(-50%);
  width:76%;height:11%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(35,18,8,.42) 0%,rgba(35,18,8,.20) 55%,rgba(35,18,8,0) 100%);
}

/* TABLO: rozet ya da görev anısı çerçevenin İÇİNDE durur — çıplak bir simge
   duvarda "uçuyor" gibi okunuyordu. Ahşap kasa + krem paspartu + iç gölge,
   odanın kendi çerçeveli tablosuyla (avDrawFramedArt) aynı malzeme. */
/* ⚠ padding YÜZDE OLARAK VERİLMEZ: yüzde dolgu elemanın kendi genişliğine
   değil KAPSAYICI BLOĞUN genişliğine göre çözülür. 15% burada 77px'e denk
   geliyordu ve 160px'lik tabloyu tamamen yutup simgeyi 0x0'a düşürüyordu —
   tablolar bomboş görünüyordu. Paspartu artık iç gölgeyle çiziliyor,
   simge ise kendi yüzdesiyle küçülüyor. */
.den-slot.is-frame.is-full{
  background:#EFE6D4;
  border:3px solid #4A2B15;
  border-radius:2px;
  box-shadow:0 2px 6px rgba(0,0,0,.38),
             inset 0 0 0 1px rgba(255,255,255,.55),
             inset 0 2px 5px rgba(0,0,0,.13);
}
/* Simge tablonun İÇİNDE ve ORTASINDA durur. */
.den-slot.is-frame.is-full .den-art,
.den-slot.is-frame.is-full .lesson-art{width:66%;height:66%;margin:auto}
/* Çivi + askı teli: tablonun duvara ASILDIĞINI gösterir. */
.den-slot.is-frame.is-full::before{
  content:"";position:absolute;left:50%;top:-9%;transform:translateX(-50%);
  width:14%;height:9%;
  border-top:1.5px solid rgba(40,24,10,.55);
  border-left:1.5px solid rgba(40,24,10,.55);
  border-right:1.5px solid rgba(40,24,10,.55);
  border-radius:60% 60% 0 0/90% 90% 0 0;
}

/* ⚠ YUVA İŞARETLERİ TEMA TOKENİ KULLANMAZ — bilinçli istisna.
   Sahne bir canvas resmidir ve ai.js'in oda çizicileri sabit sıcak renkler
   kullanıyor: ölçüldü, açık ve koyu temada oda pikselleri BİREBİR AYNI
   (fark 0). Token okumak burada ters etki yapıyordu — zemin sabitken
   var(--text-1) temayla siyah/beyaz arasında dönüyor ve bir temada işaret
   kayboluyordu. Ayrıca yuvaların altındaki oda luminansı 0.096 (lambri)
   ile 0.574 (aydınlık duvar) arasında geziniyor, yani tek bir çizgi rengi
   her yerde okunamaz. Çözüm iki katmanlı: koyu bir SCRIM yuvayı yerel
   olarak sabit bir zemine oturtur, açık halka onun üstüne düşer.
   Emphasis ton farkıyla verilir, opaklık düşürerek DEĞİL (proje kuralı). */
/* ⚠ İŞARET İKİ TONLUDUR ve bu zorunludur. Odanın luminansı yuvaların
   altında 0.096 (lambri) ile 0.574 (aydınlık duvar) arasında geziniyor;
   TEK renkli bir işaret bu aralığın bir yerinde mutlaka zemine yaklaşır
   (ölçüldü: yarı saydam levha + tek halka en kötü noktada 1.2'ye düşüyordu).
   Koyu levha + açık halka birlikte kullanılınca her noktada İKİSİNDEN BİRİ
   3.0 eşiğini geçer. Ölçerken ölçüt de budur: max(levha/oda, halka/oda).
   Okuma modunda levha saydamdır (oda görünsün), düzenleme modunda opaklaşır. */
.den-slot.is-empty{
  border:0;
  border-radius:var(--r-well);
  background:rgba(24,13,5,.42);
  box-shadow:inset 0 0 0 1.5px rgba(255,250,244,.80);
}
.den-slot.is-frame.is-empty{border-radius:4px}
.den-slot.is-locked{
  pointer-events:none;display:grid;place-items:center;
  border:1.5px dashed rgba(255,248,240,.55);
  border-radius:var(--r-well);
  background:rgba(30,16,6,.26);
}
.den-lock{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.den-slot.is-locked .ic{width:46%;height:46%;color:rgba(255,248,240,.72)}
.den-new{
  position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 2px var(--surface-1);
}
/* Boş yuva daima "hedef" görünümündedir: kovuk her zaman düzenlenebilir. */
.den-slot.is-empty{background:rgba(24,13,5,.62);box-shadow:inset 0 0 0 2px rgba(255,250,244,.92)}
.den.ear-on .den-slot.is-full:not(.is-frame){
  border-radius:var(--r-well);
  /* Çift halka: içte koyu, dışta açık — oda hangi tonda olursa olsun biri okunur. */
  box-shadow:0 0 0 2px rgba(30,16,6,.55),0 0 0 4px rgba(255,250,244,.92);
}
/* Kulak Ver sürerken cevap verilebilecek nesneler ayrıca nabız atar. */
@media(prefers-reduced-motion:no-preference){
  .den.ear-on .den-slot.is-full:not(.is-frame){animation:denPulse 1.9s var(--ease) infinite}
}
@keyframes denPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(30,16,6,.55),0 0 0 4px rgba(255,250,244,.92)}
  50%{box-shadow:0 0 0 2px rgba(30,16,6,.55),0 0 0 7px rgba(255,250,244,.55)}
}

.den-bar{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px auto 0;max-width:520px}
.den-count{
  display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;
  font-size:.78rem;font-weight:700;color:var(--text-2);
}
.den-chip-ic{width:18px;height:18px;vertical-align:-4px}
.den-dot{width:3px;height:3px;border-radius:50%;background:var(--text-3);display:inline-block;margin:0 2px}
.den-ear{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px}
.den-ear .ic{width:17px;height:17px}
.den-hint{max-width:520px;margin:9px auto 0;font-size:.76rem;line-height:1.45;color:var(--text-2);text-align:center}

/* Seçici (openSheet içinde) */
.den-picktitle{margin:2px 0 12px;font-size:1.02rem}
.den-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-bottom:14px}
.den-pickitem{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:11px 7px;border:1px solid var(--line);border-radius:var(--r-tile);
  background:var(--surface-1);cursor:pointer;min-height:44px;text-align:center;
}
.den-pickitem.sel{border-color:var(--accent);background:var(--accent-soft)}
.den-pickitem b{font-size:.8rem;font-weight:700;color:var(--text-1);line-height:1.2}
.den-pickitem small{font-size:.68rem;color:var(--text-3);line-height:1.2}
.den-pickart{display:block;width:40px;height:40px}
.den-pickart .den-art,.den-pickart .lesson-art{width:100%;height:100%;display:block}
.den-empty{margin:6px 0 14px;font-size:.82rem;line-height:1.5}

.den-card{text-align:center}
.den-cardart{width:76px;height:76px;margin:2px auto 10px}
.den-cardart .den-art,.den-cardart .lesson-art{width:100%;height:100%;display:block}

@media(max-width:380px){
  .den-scroll{padding-left:12px;padding-right:12px}
  .den-hint{font-size:.73rem}
}

/* Dekor bölgeleri: duvar ve halı. Görünmezdirler — yüzeyin KENDİSİ
   dokunma hedefidir. Yuvaların altında kalırlar (z-index 2 < 3), yani
   bir eşyaya dokunmayı engellemezler. */
/* Değiştirilebilir YÜZEYLER. Kovuk daima düzenlenebilir olduğu için hepsi
   ince bir çerçeveyle işaretlidir — ayrı bir "nokta" göstergesi vardı,
   sahnede iki kopuk benek olarak okunuyordu ve kaldırıldı.
   SIRA: pencere ve lamba duvarın üstünde durur (DOM'da sonra gelirler),
   yoksa geniş duvar bölgesi onların dokunuşunu yutar. */
.den-zone{
  position:absolute;border:0;background:none;padding:0;cursor:pointer;z-index:2;
  box-shadow:inset 0 0 0 1.5px rgba(255,250,244,.42);border-radius:var(--r-well);
}
.den-zone:hover,.den-zone:focus-visible{box-shadow:inset 0 0 0 2px rgba(255,250,244,.92)}
.den-zone-wall{left:0;top:0;right:0;height:50%}
.den-zone-karo{left:0;right:0;top:52%;height:18%}
.den-zone-rug{left:6%;right:6%;bottom:1%;height:22%}
.den-zone-window{left:38%;width:24%;top:11%;height:36%}
.den-zone-lamp{left:11%;width:19%;top:32%;height:19%}
.den-zone-wall{left:0;top:0;right:0;height:44%}
.den-zone-rug{left:8%;right:8%;bottom:2%;height:20%}

/* Dekor/eşya seçici pop-up */
.den-bal{margin:0 0 12px;font-size:.82rem;font-weight:700;color:var(--text-2)}
.den-swatch{
  display:block;width:44px;height:44px;border-radius:var(--r-well);
  border:1px solid var(--line);
}
.den-pickitem small{font-size:.66rem;color:var(--text-3);line-height:1.25}
.den-pickitem.lock{opacity:1;filter:grayscale(.85);cursor:not-allowed}
.den-pickitem.lock b{color:var(--text-3)}
.den-pickitem .den-price{display:inline-flex;align-items:center;gap:3px;color:var(--accent-ink);font-weight:700}
.den-pickitem .den-on{color:var(--ok-fg);font-weight:700}

/* Rehber şeridi: sahnenin altındaki alanı doldurur ve kovuğun kurallarını
   anlatır. Satırlar sola hizalı — ortalanmış çok satırlı metin okunmuyor. */
.den-tips{max-width:520px;margin:16px auto 0;display:flex;flex-direction:column;gap:8px}
.den-chip{
  display:flex;align-items:flex-start;gap:9px;
  padding:10px 13px;border:1px solid var(--line);border-radius:var(--r-tile);
  background:var(--surface-1);color:var(--text-2);
  font-size:.78rem;font-weight:600;line-height:1.35;text-align:left;
}
.den-chip .den-chip-ic{flex:0 0 auto;margin-top:1px}

/* Yüzey seçicinin iki ekseni: Renk / Biçim. */
.den-seg{margin:0 0 12px}
/* Biçim önizlemeleri: kutunun kendisi formu anlatır — renk örneği değil. */
.den-swatch.den-shape-rug-oval{border-radius:50%;background:var(--surface-2)}
.den-swatch.den-shape-rug-rect{border-radius:3px;background:var(--surface-2)}
/* Pencere önizlemesi CAMIN FORMUNU gösterir (kayıt deseni değil). */
.den-swatch.den-shape-win-rect{border-radius:3px;background:var(--surface-2)}
.den-swatch.den-shape-win-arch{background:var(--surface-2);border-radius:50% 50% 3px 3px/60% 60% 3px 3px}
.den-swatch.den-shape-win-round{border-radius:50%;background:var(--surface-2)}
.den-swatch.den-shape-lamp-cone{background:var(--surface-2);clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}
.den-swatch.den-shape-lamp-drum{background:var(--surface-2);clip-path:polygon(8% 0,92% 0,100% 100%,0 100%)}