/* index.html'deki <style> bloğundan taşındı (madde 12). Yazı tipleri index.html'de
   ayrı <link> ile yükleniyor (eskiden buradaki @import). */
*{box-sizing:border-box;margin:0;padding:0}
/* Tarayıcı form öğelerine yazı tipini miras vermiyor: şıklar ve bazı
   düğmeler sistem yazı tipiyle (Arial) çıkıyordu. Sınıf kuralları bunu ezer. */
button,input,select,textarea{font:inherit;color:inherit}
/* Başlıklarda satırlar dengeli kırılsın, paragrafta son satırda tek kelime kalmasın. */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
/* Dikey scrollbar için her zaman yer ayır — aksi halde sayfa yüksekliği
   viewport eşiğini her geçtiğinde (yükleniyor → içerik, ekran değişimi vb.)
   scrollbar belirip/kaybolarak tüm sayfayı yatayda kaydırıyor ("zıplama"). */
html{overflow-y:scroll;}
@supports (scrollbar-gutter:stable){
  html{overflow-y:auto; scrollbar-gutter:stable;}
}
:root{
  --bg:#EEF1F6; --bg-grad-1:#F2F5FA; --bg-grad-2:#E6EBF3;
  --surface:#FFFFFF; --surface-2:#F7F9FC;
  --ink:#141E2E; --ink-soft:#4E5C72; --ink-faint:#5F6B7F;
  --line:#E3E8F0; --line-soft:#EDF1F6;
  --primary:#0C9A89; --primary-deep:#0A8576; --primary-darker:#076457; --primary-wash:#E4F7F3;
  --primary-rgb:12,154,137;
  --good:#16A34A; --good-wash:#E8F6EC; --bad:#E0473F; --bad-wash:#FCEDEC; --amber:#C7821A; --amber-wash:#FBF1DE;
  /* Yazı tonları: --good/--bad/--amber zemin, çizgi ve nokta için. Küçük yazıda
     bunlar beyaz ve açık zeminde 4.5:1'i tutturamıyor, yazıda -ink kullan. */
  --good-ink:#137A3A; --bad-ink:#C0362F; --amber-ink:#8A5A0E;
  /* Sitedeki tek koyu blok rengi: ana sayfadaki Hızlı Çöz kartı ve sonuç ekranının koyu öğeleri. */
  --primary-ink:#0A564D;
  /* Tek ölçek: 3 gölge, 4 köşe. Yeni bir değer eklemeden önce bunlardan
     birini kullan — farklı farklı gölgeler "parça parça yapılmış" gösterir. */
  --golge-1:0 1px 2px rgba(20,30,46,.06);
  --golge-2:0 1px 2px rgba(20,30,46,.04), 0 6px 20px -12px rgba(20,30,46,.18);
  --golge-3:0 18px 44px -16px rgba(20,30,46,.32);
  /* Boşluk ölçeği (8px tabanlı) ve tek köşe ailesi. Yeni yazılan yerde bunları kullan. */
  --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px; --s-5:32px; --s-6:48px; --s-7:64px; --s-8:96px;
  --r-sm:6px; --r:12px; --r-lg:16px; --r-pill:999px;
  --shadow-sm:var(--golge-1);
  --shadow:var(--golge-2);
  --shadow-lg:var(--golge-3);
}
body{
  font-family:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased; min-height:100dvh;
  /* Sabit genişlikli rakamlar: sayaçlar sayarken ve süre akarken
     metin sağa sola titremiyor. */
  font-variant-numeric:tabular-nums;
  background:var(--bg);
}

.disp{font-family:'Figtree',sans-serif}

/* ---------- üst bar ---------- */
.topbar{
  position:sticky; top:0; z-index:30;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.topbar-in{max-width:760px; margin:0 auto; padding:14px 22px; display:flex; align-items:center; justify-content:space-between; gap:14px;}
/* İlk çizim asenkron: o ana kadar boş üst çubuğun yeri ayrılıyor (iç boşluk + 36px logo). Eskiden boş
   çubuk 29px'ten 65px'e uzayıp tüm sayfayı aşağı itiyordu (düzen kayması). */
.topbar-in:empty{min-height:64px;}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none;}
.logo{
  width:36px; height:36px; border-radius:var(--r); flex-shrink:0;
  background:var(--primary-deep);
  display:grid; place-items:center;
}
.logo svg{width:24px; height:24px}
.brand .name{font-family:'Sora',sans-serif; font-weight:800; font-size:18px; letter-spacing:-.02em; color:var(--ink);}
.brand .name b{color:var(--primary-deep); font-weight:800;}
/* Marka metni: dar ekranda "DUS SORU BANKASI" alt satıra kayıyordu ve
   margin-left'i taşıdığı için içeri girmiş gibi duruyordu. Boşluğu gap
   veriyor — satır atlayınca sola hizalı kalıyor. */
.brand-metin{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 8px; min-width:0;}
.brand .tag{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); font-weight:600;}

.timer{
  font-family:'Figtree',sans-serif; font-weight:600; font-size:15px; color:var(--primary-darker);
  display:flex; align-items:center; gap:8px; padding:6px 12px; background:var(--primary-wash); border-radius:12px; white-space:nowrap;
}
.timer .dot{width:8px; height:8px; border-radius:50%; background:currentColor; animation:beat 1.3s ease-in-out infinite;}
.timer.kritik{color:var(--bad-ink); background:var(--bad-wash); animation:nudge .5s ease-in-out infinite;}
@keyframes beat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.78)}}
@keyframes nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.5px)}75%{transform:translateX(1.5px)}}

.wrap{max-width:760px; margin:0 auto; padding:34px 22px 56px;}
.wrap.wrap-center{min-height:calc(100dvh - 68px); display:flex; align-items:center; padding-top:0; padding-bottom:0;}
.wrap.wrap-center #app{width:100%;}
.screen.screen-enter{animation:screenEnter .28s cubic-bezier(.22,.7,.2,1) both;}
@keyframes screenEnter{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
@keyframes slideDown{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}
@keyframes pop{0%{transform:scale(.4); opacity:0} 65%{transform:scale(1.25)} 100%{transform:scale(1); opacity:1}}
@keyframes reveal{0%{box-shadow:0 0 0 0 var(--ring,rgba(22,163,74,.4))} 100%{box-shadow:0 0 0 6px transparent}}

@keyframes cardEnter{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
@keyframes staggerIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0deg);opacity:1}100%{transform:translateY(420px) rotate(720deg);opacity:0}}
@keyframes ringPulse{0%{box-shadow:0 0 0 0 rgba(var(--primary-rgb),.4)}70%{box-shadow:0 0 0 10px rgba(var(--primary-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--primary-rgb),0)}}

@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes softShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

h1.hero{font-family:'Figtree',sans-serif; font-weight:800; font-size:clamp(31px,6.4vw,46px); line-height:1.04; letter-spacing:-.025em; margin-bottom:14px;}
.screen-enter h1.hero{animation:staggerIn .55s cubic-bezier(.2,.8,.2,1) .08s both;}
h1.hero em{font-style:normal; color:var(--primary-deep); position:relative;}
h1.hero em::after{content:""; position:absolute; left:0; right:0; bottom:.06em; height:.32em; background:var(--primary-wash); z-index:-1; border-radius:6px; transform-origin:left;}
.screen-enter h1.hero em::after{animation:emphGrow .5s cubic-bezier(.3,.8,.3,1) .55s both;}
@keyframes emphGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:26px;}
.section{margin-top:30px;}

/* ---------- Karşılama ekranı: iki büyük seçim ---------- */

/* ---------- Deneme Sınavı şeridi (Hızlı Çöz'ün üstünde) ---------- */
.dnm-serit{
  width:100%; max-width:520px; margin:0 auto 14px;
  background:#162230;
  border:1px solid rgba(255,255,255,.09); border-radius:16px;
  color:#fff; overflow:hidden; cursor:pointer; position:relative;
  box-shadow:var(--golge-2);
  transition:box-shadow .28s cubic-bezier(.2,.8,.2,1), transform .28s cubic-bezier(.2,.8,.2,1);
}
.screen-enter .dnm-serit{animation:staggerIn .48s cubic-bezier(.2,.8,.2,1) both; animation-delay:.14s;}
.dnm-serit:hover{
  transform:translateY(-2px);
  box-shadow:var(--golge-3);
}
/* İnce altın çizgi — "premium" işareti, ölçülü kullanıldığında işe yarıyor */
.dnm-serit::before{
  content:""; position:absolute; top:0; left:14%; right:14%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(226,183,109,.85),transparent);
}

.dnm-serit-bas{
  display:flex; align-items:center; gap:10px; padding:13px 18px;
}
.dnm-rozet{
  font-size:9px; font-weight:800; letter-spacing:.13em;
  color:#E2B76D; border:1px solid rgba(226,183,109,.4);
  border-radius:999px; padding:3px 8px; white-space:nowrap; flex:none;
  order:2;   /* başlık solda kalsın, rozet onu itmesin */
}
.dnm-baslik{
  font-family:'Figtree',sans-serif; font-weight:700; font-size:15px;
  letter-spacing:-.01em; flex:1; min-width:0; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; order:1;
}
.dnm-ok{order:3;}
.dnm-ok{
  color:rgba(255,255,255,.5); display:grid; place-items:center; flex:none;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), color .2s;
}
.dnm-serit:hover .dnm-ok{transform:rotate(180deg); color:#E2B76D;}

/* Açılan gövde: yükseklik geçişi için grid-template-rows hilesi —
   max-height ile yapınca ya zıplıyor ya da gecikmeli açılıyor. */
.dnm-serit-ic{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .34s cubic-bezier(.2,.8,.2,1);
}
/* Kırpma TEK sarmalayıcıda olmalı. Doğrudan çocuklara verilince künye
   satırı ve not metni ayrı ayrı kırpılıp üst üste biniyordu. */
.dnm-serit-sar{overflow:hidden; min-height:0;}
.dnm-serit:hover .dnm-serit-ic,
.dnm-serit:focus-within .dnm-serit-ic,
.dnm-serit.acik .dnm-serit-ic{grid-template-rows:1fr;}

.dnm-kunye{
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:2px 18px 12px;
}
.dnm-kunye-oge{display:flex; flex-direction:column; align-items:center; line-height:1.15;}
.dnm-kunye-oge b{
  font-family:'Figtree',sans-serif; font-weight:800; font-size:20px; letter-spacing:-.02em;
}
.dnm-ince{font-weight:400; opacity:.5; margin:0 1px;}
.dnm-kunye-oge span{
  font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.45); margin-top:3px;
}
.dnm-kunye-ayrac{width:1px; height:26px; background:rgba(255,255,255,.12);}

.dnm-not{
  font-size:11.5px; line-height:1.55; text-align:center;
  color:rgba(255,255,255,.55); padding:0 22px 13px; margin:0;
}
.dnm-basla{
  display:block; width:calc(100% - 36px); margin:0 18px 16px;
  background:#D8AA5C;
  color:#1B2733; border:none; border-radius:12px;
  padding:12px; font-family:'Figtree',sans-serif; font-weight:800; font-size:14px;
  cursor:pointer; letter-spacing:-.005em;
  box-shadow:var(--golge-2);
  transition:transform .16s var(--yay-zipla), box-shadow .16s;
}
.dnm-basla:hover{transform:translateY(-1px); box-shadow:var(--golge-2);}


/* Dokunmatikte hover yok: şerit açık başlıyor, ok işareti gizleniyor. */
@media(hover:none){
  .dnm-serit-ic{grid-template-rows:1fr;}
  .dnm-ok{display:none;}
}
@media(max-width:560px){
  .dnm-serit{max-width:none;}
  .dnm-kunye{gap:12px;}
  .dnm-kunye-oge b{font-size:18px;}
}
/* Dar ekranda rozet başlığı "De…" diye kırptırıyordu. Rozet süs; künye
   satırı zaten "120 soru / 150 dakika / 40+80" diyerek aynı bilgiyi
   veriyor. Bu yüzden başlığa öncelik verip rozeti gizliyoruz. */
@media(max-width:440px){
  .dnm-rozet{display:none;}
  .dnm-baslik{white-space:normal;}
}

/* ---------- Deneme sınavı açılış perdesi ---------- */
/* Sitenin turkuazı BİLEREK yok. Koyu zemin + altın = "ayrı bir yapı".
   Splash 9999'da olduğu için bunun üstünde durması gerekiyor. */
.dnm-perde{
  position:fixed; inset:0; z-index:10000;
  background:linear-gradient(150deg,#1B2733 0%,#0B1119 55%,#0F1821 100%);
  display:grid; place-items:center; overflow:hidden;
  animation:dnmPerdeGir .42s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes dnmPerdeGir{from{opacity:0} to{opacity:1}}

/* Zeminde yavaşça geçen altın parıltı — ekranın tamamını kat ediyor */
.dnm-perde::before{
  content:""; position:absolute; top:0; bottom:0; width:60%;
  background:linear-gradient(90deg,transparent,rgba(226,183,109,.10),transparent);
  animation:dnmParilti 1.9s cubic-bezier(.4,0,.2,1) both;
}
@keyframes dnmParilti{from{left:-70%} to{left:110%}}

.dnm-perde-ic{position:relative; text-align:center; padding:0 24px;}

.dnm-perde-marka{
  display:flex; align-items:baseline; justify-content:center; gap:14px;
  flex-wrap:wrap;
}
.dnm-perde-ad{
  font-family:'Figtree',sans-serif; font-weight:800;
  font-size:clamp(34px,9vw,60px); letter-spacing:-.03em; color:#fff; line-height:1;
  animation:dnmSoldanGir .72s cubic-bezier(.16,1,.3,1) both; animation-delay:.16s;
}
.dnm-perde-ad b{color:#E2B76D; font-weight:800;}
.dnm-perde-etiket{
  font-family:'Figtree',sans-serif; font-weight:800;
  font-size:clamp(12px,2.6vw,16px); letter-spacing:.34em; color:#E2B76D;
  border:1.5px solid rgba(226,183,109,.45); border-radius:999px;
  padding:6px 14px 6px 18px;
  animation:dnmSagdanGir .72s cubic-bezier(.16,1,.3,1) both; animation-delay:.34s;
}
@keyframes dnmSoldanGir{
  from{opacity:0; transform:translateX(-46px);}
  to{opacity:1; transform:none;}
}
@keyframes dnmSagdanGir{
  from{opacity:0; transform:translateX(46px);}
  to{opacity:1; transform:none;}
}

/* Ortadan iki yana açılan altın çizgi */
.dnm-perde-cizgi{
  height:1.5px; margin:22px auto 16px; max-width:340px;
  background:linear-gradient(90deg,transparent,#E2B76D,transparent);
  animation:dnmCizgiAc .8s cubic-bezier(.16,1,.3,1) both; animation-delay:.5s;
}
@keyframes dnmCizgiAc{from{transform:scaleX(0); opacity:0} to{transform:scaleX(1); opacity:1}}

.dnm-perde-alt{
  font-size:clamp(11.5px,2.4vw,13.5px); letter-spacing:.05em;
  color:rgba(255,255,255,.5);
  animation:dnmAltGir .7s ease both; animation-delay:.72s;
}
@keyframes dnmAltGir{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* Çıkış: perde yukarı kayarak siliniyor, sınav altından çıkıyor */
.dnm-perde.cikis{
  animation:dnmPerdeCik .6s cubic-bezier(.7,0,.84,0) both;
}
@keyframes dnmPerdeCik{
  from{opacity:1; transform:translateY(0);}
  to{opacity:0; transform:translateY(-100%);}
}

/* ---------- Odak (zen) modu ---------- */
/* Sınav ekranında dikkat dağıtan her şey siliniyor. Yumuşak geçiş bilinçli:
   birden yok olmak "sayfa bozuldu" hissi veriyordu. */
body.odak .topbar,
body.odak .foot,
body.odak #dusky-root{
  opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
body.odak .topbar{transform:translateY(-100%);}
/* Dusky paneli açıksa odak modunda da görünür: "Dusky'ye sor" soru
   ekranından açılıyor ve odak modu tüm #dusky-root'u gizlediği için
   panel görünmez kalıyordu. */
body.odak #dusky-root:has(.dusky-panel.on){opacity:1; pointer-events:auto;}
body.odak .foot{transform:translateY(40%);}
.topbar, .foot, #dusky-root{transition:opacity .3s ease, transform .3s ease;}
/* Üst bar gidince içerik yukarı yapışmasın */
body.odak .wrap{padding-top:22px;}

/* Kumanda kümesi — kartın ÜSTÜNDE, sağa yaslı.
   Mutlak konumlandırınca kartın kendi "bildir" düğmesiyle üst üste
   biniyordu; akışın içinde durunca çakışma imkânsız. */
.odak-kume{
  display:flex; justify-content:space-between; align-items:center;
  position:relative; z-index:20; margin-bottom:9px;
}
.screen{position:relative;}
/* Kutu 44px (dokunma alanı), görünen daire ::before ile 32px; yerleşim
   negatif kenar boşluğuyla eskisi gibi. */
.ok-dugme{
  position:relative; isolation:isolate; width:44px; height:44px; margin:-6px; border-radius:50%; cursor:pointer;
  border:0; background:none; color:var(--ink-faint);
  display:grid; place-items:center;
  transition:color .16s, transform .16s;
}
.ok-dugme::before{content:""; position:absolute; inset:6px; z-index:-1; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-sm); transition:border-color .16s;}
@media (hover:hover){
  .ok-dugme:hover{color:var(--ink); transform:rotate(45deg);}
  .ok-dugme:hover::before{border-color:var(--primary-soft);}
}

.ok-panel{
  position:absolute; top:38px; right:0; width:186px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:5px; box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(-6px) scale(.96); pointer-events:none;
  transform-origin:top right; transition:all .2s cubic-bezier(.2,.8,.2,1);
}
.ok-panel.acik{opacity:1; transform:none; pointer-events:auto;}

.ok-satir{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; border:none; background:none; cursor:pointer; font-family:inherit;
  font-size:12.5px; font-weight:600; color:var(--ink-soft);
  padding:9px 10px; border-radius:12px; transition:background .14s, color .14s;
}
.ok-satir:hover{background:var(--surface-2); color:var(--ink);}
.ok-satir.on{color:var(--ink);}
/* Küçük anahtar — açık/kapalı durumu tek bakışta belli olsun */
.ok-anahtar{
  width:32px; height:18px; border-radius:999px; background:var(--line);
  flex:none; position:relative; transition:background .2s;
}
.ok-satir.on .ok-anahtar{background:var(--primary);}
.ok-anahtar i{
  position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%;
  background:#fff; box-shadow:var(--golge-1);
  transition:transform .2s var(--yay-zipla);
}
.ok-satir.on .ok-anahtar i{transform:translateX(14px);}
.ok-not{font-size:11px; color:var(--ink-faint); padding:8px 10px; line-height:1.45;}

@media(max-width:560px){
  .ok-panel{width:170px;}
}

/* ---------- Denemelerim: özet + net grafiği + döküm ---------- */

/* Grafik dar ekranda ezilmesin diye kendi içinde kayabiliyor.
   min-width:0 ŞART: onsuz kaydırma kabı içeriğinden küçülemiyor ve
   grafiğin doğal genişliği tüm sayfayı yana taşırıyordu. */
/* Izgara ogesinin kucule bilmesi icin min-width:0 sart. Bu satir olmadan
   panel icerigin min-content genisligine kilitleniyor ve TUM SAYFA yana
   kayiyordu — sadece bu sekmede degil, digerlerinde de. */
.dashboard-panel{min-width:0;}

/* Yer daralinca grafik ezilmek yerine KENDI ICINDE kayiyor. */
.dgr-sar{min-width:0; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
/* min-width YOK: grafik ne kadar yer varsa ona uyuyor. Sabit bir alt sınır
   verince iki sütunlu profil ızgarasının min-content genişliği büyüyor ve
   TÜM SAYFA yana kayıyordu.
   preserveAspectRatio da kaldırıldı: "none" ile ölçek bozuluyor ve eksen
   yazıları yatayda eziliyordu. Şimdi orantılı küçülüyor. */
.dgr{width:100%; height:auto; display:block;}
.dgr-kilavuz{stroke:var(--line-soft); stroke-width:1;}
.dgr-eksen{
  fill:var(--ink-faint); font-size:9.5px; text-anchor:end;
  font-family:'Figtree',sans-serif;
}
.dgr-cizgi{
  fill:none; stroke:#D9A441; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.dgr-nokta{fill:#fff; stroke:#D9A441; stroke-width:2.4;}
.dgr-nokta-halka{fill:none; stroke:#D9A441; stroke-width:1.5; opacity:.35;}
.dgr-deger{
  fill:var(--ink); font-size:11px; font-weight:800; text-anchor:middle;
  font-family:'Figtree',sans-serif;
}
.dgr-alt{
  fill:var(--ink-faint); font-size:9.5px; text-anchor:middle;
  font-family:'Figtree',sans-serif;
}

/* Bu boyutlar viewBox BİRİMİ, ekran pikseli değil. Dar ekranda grafik
   orantılı küçüldüğü için yazılar da küçülüyordu; burada büyüterek
   küçülmeyi telafi ediyoruz. 360px telefonda ölçek ~0.85, yani
   12 birim ≈ 10 gerçek piksel. */
@media(max-width:560px){
  .dgr-eksen{font-size:12px;}
  .dgr-deger{font-size:14px;}
  .dgr-alt{font-size:12px;}
  .dgr-nokta{stroke-width:3;}
  .dgr-cizgi{stroke-width:3;}
}

/* ═══════════ DENEME PAKETLERİ (adlı/renkli denemeler) ═══════════════
   Her paket kendi rengini --pk / --pk-bg değişkenleriyle taşıyor.
   Değerler sunucuda #RRGGBB olarak DOĞRULANIYOR (bkz. renkTemiz), o
   yüzden doğrudan style özniteliğine basılabiliyorlar. */
.dnm-paketler{display:flex; flex-direction:column; gap:8px; padding:0 14px 14px;}
.dnm-paket{
  --pk:#E2B76D; --pk-bg:#17130A;
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:
    var(--pk-bg);
  border:1px solid color-mix(in srgb, var(--pk) 34%, transparent);
  border-radius:12px; padding:12px 14px; cursor:pointer; color:#fff;
  font-family:inherit;
  transition:transform .16s var(--yay-zipla), border-color .16s, box-shadow .16s;
}
.dnm-paket:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--pk) 70%, transparent);
  box-shadow:var(--golge-2);
}

.dnm-paket-sol{display:flex; flex-direction:column; gap:3px; flex:1; min-width:0;}
.dnm-paket-rozet{
  font-size:8.5px; font-weight:800; letter-spacing:.14em; color:var(--pk);
  text-transform:uppercase;
}
.dnm-paket-ad{
  font-family:'Figtree',sans-serif; font-weight:800; font-size:15px;
  letter-spacing:-.015em; color:#fff;
}
.dnm-paket-alt{
  font-size:11.5px; line-height:1.45; color:rgba(255,255,255,.6);
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
/* Kalan süre: bilgi, baskı değil. O yüzden kırmızı değil paketin kendi
   rengiyle ve küçük yazılıyor. */
.dnm-paket-sure{
  font-size:10px; font-weight:700; letter-spacing:.04em; color:var(--pk);
  margin-top:2px; opacity:.85;
}
.dnm-paket-git{
  flex:none; font-family:'Figtree',sans-serif; font-weight:800; font-size:12px;
  color:var(--pk); white-space:nowrap;
}
.dnm-serit-sayi{
  order:2; flex:none; font-size:10px; font-weight:800;
  background:rgba(226,183,109,.16); color:#E2B76D;
  border-radius:999px; min-width:18px; height:18px; padding:0 6px;
  display:grid; place-items:center;
}
.dnm-bekle{display:grid; place-items:center; padding:24px 0 28px;}
.dnm-kapali{
  margin:0 18px 16px; padding:14px; border-radius:12px; text-align:center;
  background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.14);
}
.dnm-kapali b{display:block; font-size:13px; margin-bottom:4px; color:#fff;}
.dnm-kapali span{font-size:11.5px; line-height:1.5; color:rgba(255,255,255,.5);}

/* Perde: paket seçildiyse onun rengini alıyor. */
.dnm-perde.paketli{
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--pk) 12%, var(--pk-bg)) 0%,
    var(--pk-bg) 60%,
    color-mix(in srgb, var(--pk) 6%, var(--pk-bg)) 100%);
}
.dnm-perde.paketli::before{
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb, var(--pk) 22%, transparent),transparent);
}
.dnm-perde.paketli .dnm-perde-ad b,
.dnm-perde.paketli .dnm-perde-etiket{color:var(--pk);}
.dnm-perde.paketli .dnm-perde-etiket{border-color:color-mix(in srgb, var(--pk) 45%, transparent);}
.dnm-perde.paketli .dnm-perde-cizgi{
  background:linear-gradient(90deg,transparent,var(--pk),transparent);
}
.dnm-perde-baslik{
  font-family:'Figtree',sans-serif; font-weight:700;
  font-size:clamp(14px,3.4vw,19px); letter-spacing:-.01em; color:#fff;
  margin-bottom:10px;
  animation:dnmAltGir .7s ease both; animation-delay:.62s;
}

/* ═══════════ SINAV SONRASI SORU İNCELEME ══════════════════════════ */
.inc-ust{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:10px;
}
.inc-cik{
  background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:700; color:var(--ink-soft); padding:6px 2px;
}
.inc-cik:hover{color:var(--ink);}
.inc-sayac{
  font-family:'Figtree',sans-serif; font-weight:800; font-size:12.5px;
  color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
.inc-filtre{
  display:flex; gap:6px; margin-bottom:12px; overflow-x:auto;
  -webkit-overflow-scrolling:touch; padding-bottom:2px;
}
.inc-fbtn{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:7px 13px; cursor:pointer; font-family:inherit;
  font-size:12.5px; font-weight:600; color:var(--ink-soft);
  transition:background .15s, color .15s, border-color .15s;
}
.inc-fbtn em{
  font-style:normal; font-size:11px; font-weight:800; color:var(--ink-faint);
}
.inc-fbtn:hover{border-color:var(--primary-soft); color:var(--ink);}
.inc-fbtn.on{
  background:var(--ink); border-color:var(--ink); color:#fff; font-weight:700;
}
.inc-fbtn.on em{color:rgba(255,255,255,.65);}
.inc-rozet{
  font-size:9px; font-weight:800; letter-spacing:.1em; border-radius:999px;
  padding:3px 8px; flex:none;
}
.inc-rozet.dogru{background:var(--good-wash); color:#1F6B4F;}
.inc-rozet.yanlis{background:var(--bad-wash); color:#94322A;}
.inc-rozet.bos{background:var(--surface-2); color:var(--ink-faint);}
/* İncelemede şıklar buton değil div: tıklanamaz olduğu görünürde belli. */
.opts .opt.lock{cursor:default;}
.dnm-kare.inc-dogru{background:var(--good-wash); border-color:var(--good); color:#1F6B4F;}
.dnm-kare.inc-yanlis{background:var(--bad-wash); border-color:var(--bad); color:#94322A;}
.dnm-kare.inc-bos{background:var(--surface-2); border-color:var(--line); color:var(--ink-faint);}
.dnm-kare.inc.simdi{background:var(--ink); border-color:var(--ink); color:#fff;}

/* Sonuç raporundaki "Soruları İncele" — ana eylem, iki satırlı. */
.dsn-incele-sar{padding:14px 18px 4px;}
.dsn-incele{
  display:flex; flex-direction:column; gap:2px; width:100%; padding:13px 14px;
  line-height:1.3;
}
.dsn-incele span{
  font-size:11px; font-weight:500; opacity:.8; letter-spacing:0;
}
.dsn-rozet.paketli{
  background:color-mix(in srgb, var(--pk) 20%, transparent);
  color:var(--pk); border-color:color-mix(in srgb, var(--pk) 45%, transparent);
}

/* ═══════════ DENEMELERİM SEKMESİ ══════════════════════════════════
   Sekme, açtığı panelin diliyle aynı: koyu zemin + altın. Açık renkli
   sekme çubuğunda tek koyu sekme olarak duruyor — "burası ayrı bir yer"
   demenin en sessiz yolu. */

@supports not (color: color-mix(in srgb, red 50%, blue)){
  .dnm-paket{background:#17130A; border-color:rgba(226,183,109,.34);}
  .dsn-rozet.paketli{background:rgba(226,183,109,.2); color:#E2B76D;}
}

@media(max-width:560px){
  .dnm-paket{padding:11px 12px; gap:9px;}
  .dnm-paket-ad{font-size:14px;}
  .dnm-paket-git{font-size:11px;}
}

/* ═══════════ DENEME SİMGELERİ ═══════════════════════════════════════ */
.dnm-ikon{display:block; flex:none;}
.dnm-paket-ikon{
  flex:none; width:38px; height:38px; border-radius:12px; display:grid;
  place-items:center; color:var(--pk);
  background:color-mix(in srgb, var(--pk) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--pk) 26%, transparent);
}
.dnm-paket.bitti{opacity:.62;}
.dnm-paket.bitti .dnm-paket-git{font-weight:700;}
.dnm-paket-sure.bitti{color:rgba(255,255,255,.5);}
.dsn-rozet .dnm-ikon{display:inline-block; vertical-align:-2px; margin-right:5px;}

.dnm-perde-ikon{
  color:var(--pk,#E2B76D); display:grid; place-items:center; margin-bottom:14px;
  animation:dnmIkonGir .8s cubic-bezier(.16,1,.3,1) both; animation-delay:.06s;
}
@keyframes dnmIkonGir{
  from{opacity:0; transform:translateY(14px) scale(.9);}
  to{opacity:1; transform:none;}
}

/* Profilden gelindiğinde şerit kısa süre işaretleniyor: kullanıcı nereye
   düştüğünü anlasın diye. */
.dnm-serit.vurgu{
  box-shadow:0 0 0 2px rgba(226,183,109,.75), var(--golge-3);
}

/* ═══════════ DENEMELERİM PANELİ ═════════════════════════════════════
   Koyu zemin + altın: deneme şeridinin ve perdenin diliyle aynı. Sitenin
   turkuazı burada bilerek yok — bu bölüm "sınav" bölgesi.

   TİPOGRAFİ: ekranda üç boy var, fazlası değil.
     net        → Sora 800, 26px, tabular
     etiket     → 11.5px 600
     bağlam     → 10.5px, soluk
   Eskiden beş boy vardı ve satırlar karmakarışık görünüyordu. */
.dnmp{
  --alt:#E2B76D;            /* altın vurgu */
  --alt-koyu:#C99A48;
  --zem:#141C25;            /* panel zemini */
  --zem-2:#1B2733;          /* kart zemini */
  --cizgi:rgba(255,255,255,.09);
  --yazi:#F2F5F8;
  --yazi-soluk:rgba(242,245,248,.58);
  --yazi-cok-soluk:rgba(242,245,248,.4);
  background:#162230;
  border:1px solid var(--cizgi); border-radius:16px; padding:16px 14px 18px;
  color:var(--yazi); min-width:0; position:relative; overflow:hidden;
  box-shadow:var(--golge-3);
}
.dnmp::before{
  content:""; position:absolute; top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(226,183,109,.8),transparent);
}
.dnmp-baslik{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 4px 14px;
}
.dnmp-baslik > span{
  font-family:'Figtree',sans-serif; font-weight:800; font-size:16px;
  letter-spacing:-.015em; color:var(--yazi);
}
.dnmp-alt-baslik{
  font-family:'Figtree',sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--yazi-cok-soluk);
  margin:0 4px 8px;
}
.dnmp-alt-baslik.ayrik{margin-top:18px;}

.dnmp-btn{
  background:#D8AA5C; color:#16202B;
  border:none; border-radius:12px; padding:11px 18px; cursor:pointer;
  font-family:'Figtree',sans-serif; font-weight:800; font-size:13.5px;
  box-shadow:var(--golge-2);
  transition:transform .16s var(--yay-zipla), box-shadow .16s;
}
.dnmp-btn:hover{transform:translateY(-1px);}

.dnmp-btn.ince{
  padding:7px 13px; font-size:12px; background:none; color:var(--alt);
  border:1px solid rgba(226,183,109,.4); box-shadow:none;
}
.dnmp-btn.ince:hover{background:rgba(226,183,109,.1);}

/* ---- Boş durum ---- */
.dnmp-bos{text-align:center; padding:26px 18px 24px;}
.dnmp-bos-ikon{color:var(--alt); display:grid; place-items:center; margin-bottom:12px;}
.dnmp-bos-baslik{
  font-family:'Figtree',sans-serif; font-weight:800; font-size:17px;
  letter-spacing:-.015em; margin-bottom:6px;
}
.dnmp-bos-alt{
  font-size:12.5px; line-height:1.6; color:var(--yazi-soluk);
  max-width:340px; margin:0 auto 18px;
}

/* ---- Üst blok ---- */
.dnmp-hero{
  background:var(--zem-2); border:1px solid var(--cizgi); border-radius:16px;
  padding:14px 15px; margin-bottom:12px;
}
.dnmp-hero-ust{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.dnmp-ort{display:flex; flex-direction:column; min-width:0;}
.dnmp-ort-et{
  font-size:9.5px; font-weight:800; letter-spacing:.14em; color:var(--alt);
}
.dnmp-ort-dg{
  font-family:'Figtree',sans-serif; font-weight:800; font-size:38px; line-height:1.05;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin-top:2px;
}
.dnmp-mini{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; min-width:0;}
.dnmp-mini > div{
  background:rgba(255,255,255,.05); border:1px solid var(--cizgi);
  border-radius:12px; padding:8px 11px; text-align:center; min-width:66px;
}
.dnmp-mini b{
  display:block; font-family:'Figtree',sans-serif; font-weight:800; font-size:16px;
  font-variant-numeric:tabular-nums;
}
.dnmp-mini span{
  display:block; font-size:9px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--yazi-cok-soluk); margin-top:2px;
}
.dnmp-mini .artis b{color:#5FD3A0;}
.dnmp-mini .azalis b{color:#F08A7C;}

.dnmp-sir{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--cizgi);
  display:flex; flex-direction:column; gap:1px;
}
.dnmp-sir-et{font-size:9.5px; font-weight:800; letter-spacing:.14em; color:var(--alt);}
.dnmp-sir-dg{
  font-family:'Figtree',sans-serif; font-weight:800; font-size:24px;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.dnmp-sir-not{font-size:10.5px; color:var(--yazi-cok-soluk); line-height:1.5;}
.dnmp-sir.bilgi{
  font-size:12px; line-height:1.55; color:var(--yazi-soluk); display:block;
}
.dnmp-sir.bilgi b{color:var(--alt); font-weight:700;}

/* ---- Grafik: koyu zemine uyarlanıyor ---- */
.dnmp-grafik{
  background:var(--zem-2); border:1px solid var(--cizgi); border-radius:16px;
  padding:14px 12px 8px; min-width:0;
}
.dnmp-grafik.bekle{
  text-align:center; padding:20px 16px; font-size:12.5px; color:var(--yazi-soluk);
}
.dnmp-grafik.bekle b{color:var(--alt);}
.dnmp-grafik .dgr-kilavuz{stroke:rgba(255,255,255,.1);}
.dnmp-grafik .dgr-eksen{fill:var(--yazi-cok-soluk);}
.dnmp-grafik .dgr-deger{fill:var(--yazi);}
.dnmp-grafik .dgr-alt{fill:var(--yazi-cok-soluk);}
.dnmp-grafik .dgr-nokta{fill:#1B2733; stroke:var(--alt);}

/* ---- Deneme satırı ---- */
.dnmp-liste{display:flex; flex-direction:column; gap:10px;}
.dnmp-satir{
  --pk:#E2B76D;
  background:var(--zem-2); border:1px solid var(--cizgi);
  border-radius:16px; padding:13px 14px; min-width:0;
  border-left:3px solid color-mix(in srgb, var(--pk) 70%, transparent);
}
.dnmp-satir-bas{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:9px;
}
.dnmp-satir-ad{
  display:flex; align-items:center; gap:6px; min-width:0;
  color:var(--pk); font-family:'Figtree',sans-serif; font-weight:800;
  font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
}
.dnmp-satir-ad span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dnmp-satir-ad.serbest{color:var(--yazi-cok-soluk);}
.dnmp-satir-no{
  flex:none; font-family:'Figtree',sans-serif; font-weight:800; font-size:11px;
  color:var(--yazi-cok-soluk); background:rgba(255,255,255,.05);
  border-radius:999px; padding:3px 9px;
}

.dnmp-satir-orta{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.dnmp-net{
  font-family:'Figtree',sans-serif; font-weight:800; font-size:26px;
  letter-spacing:-.025em; font-variant-numeric:tabular-nums; line-height:1;
}
.dnmp-net em{
  font-style:normal; font-size:10.5px; font-weight:600;
  color:var(--yazi-cok-soluk); margin-left:5px;
}
.dnmp-fark{
  font-size:11px; font-weight:800; border-radius:999px; padding:3px 9px;
}
.dnmp-fark.artis{background:rgba(95,211,160,.16); color:#5FD3A0;}
.dnmp-fark.azalis{background:rgba(240,138,124,.16); color:#F08A7C;}
.dnmp-fark.ilk{background:rgba(255,255,255,.06); color:var(--yazi-cok-soluk); font-weight:600;}
.dnmp-dyb{
  display:flex; gap:10px; margin-left:auto; font-size:11.5px;
  color:var(--yazi-soluk); font-variant-numeric:tabular-nums;
}
.dnmp-dyb b{font-family:'Figtree',sans-serif; font-weight:800; margin-right:2px;}
.dnmp-dyb .d b{color:#5FD3A0;}
.dnmp-dyb .y b{color:#F08A7C;}
.dnmp-dyb .b b{color:var(--yazi-cok-soluk);}

/* Temel/Klinik: DUS'ta asıl fark burada açıldığı için ayrı çubuk. */
.dnmp-bolum{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:11px;}
.dnmp-bolum > div{
  position:relative; background:rgba(255,255,255,.05); border-radius:12px;
  padding:7px 10px 9px; display:flex; align-items:baseline; gap:6px;
  overflow:hidden;
}
.dnmp-bolum span{font-size:10px; letter-spacing:.05em; color:var(--yazi-cok-soluk);}
.dnmp-bolum b{
  font-family:'Figtree',sans-serif; font-weight:800; font-size:14px;
  margin-left:auto; font-variant-numeric:tabular-nums;
}
.dnmp-bolum i{
  position:absolute; left:0; bottom:0; height:2px;
  background:var(--pk);
}

.dnmp-uc{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:9px;
  font-size:11px; color:var(--yazi-soluk);
}
.dnmp-uc b{color:var(--yazi); font-weight:700;}
.dnmp-uc .iyi::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:999px;
  background:#5FD3A0; margin-right:5px; vertical-align:1px;
}
.dnmp-uc .kotu::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:999px;
  background:#F08A7C; margin-right:5px; vertical-align:1px;
}
.dnmp-satir-alt{
  margin-top:9px; padding-top:9px; border-top:1px solid var(--cizgi);
  font-size:10.5px; color:var(--yazi-cok-soluk); line-height:1.5;
}

@supports not (color: color-mix(in srgb, red 50%, blue)){
  .dnmp-satir{border-left-color:#E2B76D;}
  .dnmp-bolum i{background:#E2B76D;}
  .dnm-paket-ikon{background:rgba(226,183,109,.14); border-color:rgba(226,183,109,.26);}
}

@media(max-width:560px){
  .dnmp{padding:14px 11px 16px;}
  .dnmp-ort-dg{font-size:32px;}
  .dnmp-net{font-size:23px;}
  .dnmp-mini{width:100%; justify-content:flex-start;}
  .dnmp-dyb{margin-left:0; width:100%; margin-top:6px;}
}

/* ---------- Duyuru şeridi (admin panelden) ---------- */
.duyuru{
  width:100%; max-width:520px; margin:0 auto 12px; display:flex; align-items:center;
  gap:10px; padding:10px 14px; border-radius:12px; font-size:13px; line-height:1.45;
  background:var(--primary-wash); color:var(--primary-darker);
  border:1px solid rgba(12,154,137,.25);
}
.duyuru-nokta{width:7px; height:7px; border-radius:999px; background:var(--primary); flex:none;}
.duyuru.uyari{background:var(--amber-wash); color:#7A4E07; border-color:rgba(199,130,26,.3);}
.duyuru.uyari .duyuru-nokta{background:var(--amber);}
.duyuru.onemli{background:var(--bad-wash); color:#7F2B24; border-color:rgba(224,71,63,.3);}
.duyuru.onemli .duyuru-nokta{background:var(--bad); animation:duyuruNabiz 1.4s ease-in-out infinite;}
@keyframes duyuruNabiz{0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:.6}}

/* ---------- Bakım ekranı ---------- */
.bakim-kart{text-align:center; padding:44px 24px;}
.bakim-ikon{color:var(--primary); display:grid; place-items:center; margin-bottom:14px;}
.bakim-baslik{font-weight:800; font-size:20px; margin-bottom:6px;}
.bakim-alt{color:var(--ink-soft); font-size:13.5px; margin:0 0 18px;}

/* ---------- PLUS rozeti ---------- */
.plus-rozet{
  display:inline-block; font-family:'Figtree',sans-serif; font-weight:800; font-size:9.5px;
  letter-spacing:.12em; border-radius:999px; padding:3px 8px; vertical-align:middle;
  background:#D8AA5C; color:#16202B;
  box-shadow:none;
}

/* ---------- Ayarlar sekmesi ---------- */
.ayar-plan{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:14px 16px; margin-bottom:12px; box-shadow:var(--shadow-sm);
}
.ayar-plan.plus{
  background:#162230; color:#fff; border-color:rgba(226,183,109,.3);
}
.ayar-plan-et{font-size:9.5px; font-weight:800; letter-spacing:.14em; color:var(--ink-faint);}
.ayar-plan.plus .ayar-plan-et{color:#E2B76D;}
.ayar-plan-ad{font-family:'Figtree',sans-serif; font-weight:800; font-size:18px; letter-spacing:-.015em;}
.ayar-plan-ad b{color:#E2B76D;}
.ayar-plan-not{font-size:12px; color:var(--ink-soft);}
.ayar-plan.plus .ayar-plan-not{color:rgba(255,255,255,.6);}
.ayar-kart{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:16px; margin-bottom:12px; box-shadow:var(--shadow-sm);
}
.ayar-baslik{font-family:'Figtree',sans-serif; font-weight:800; font-size:14.5px; margin-bottom:3px;}
.ayar-alt{font-size:12.5px; color:var(--ink-soft); margin:0 0 12px; line-height:1.5;}
.ayar-satir{display:flex; gap:8px; align-items:center;}
.ayar-dikey{display:flex; flex-direction:column; gap:8px; max-width:380px;}
.ayar-input{
  flex:1; min-width:0; padding:11px 13px; border-radius:12px; border:1.5px solid var(--line);
  background:var(--surface-2); font-family:inherit; font-size:14px; color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.ayar-input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-wash);}
.btn.ince{padding:10px 16px; font-size:13px;}
.ayar-tehlike{
  background:none; border:1.5px solid var(--bad-wash); color:var(--bad-ink); border-radius:12px;
  padding:10px 14px; font-family:inherit; font-weight:700; font-size:13px; cursor:pointer;
}
.ayar-tehlike:hover{background:var(--bad-wash);}
.ayar-mesaj{
  position:sticky; bottom:12px; background:var(--ink); color:#fff; border-radius:12px;
  padding:11px 14px; font-size:13px; font-weight:600; text-align:center;
  box-shadow:var(--golge-2); animation:staggerIn .3s ease both;
}
@media(max-width:560px){ .ayar-satir{flex-direction:column; align-items:stretch;} }

/* ---------- Klinik teşhis paneli ---------- */
.tsh-tempo{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--surface-2); border-radius:12px; padding:10px 14px;
  margin-bottom:12px; font-size:12px; color:var(--ink-soft);
}
.tsh-tempo b{color:var(--ink); font-family:'Figtree',sans-serif; font-weight:800;}
.tsh-ayrac{width:1px; height:14px; background:var(--line);}

.tsh-kart{
  display:flex; gap:13px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:14px 16px; margin-bottom:10px;
  box-shadow:var(--shadow-sm);
}
.tsh-ikon{
  width:32px; height:32px; border-radius:12px; flex:none;
  display:grid; place-items:center; font-size:15px; font-weight:700;
}
.tsh-govde{flex:1; min-width:0;}
.tsh-baslik{
  font-family:'Figtree',sans-serif; font-weight:800; font-size:14px;
  color:var(--ink); letter-spacing:-.01em; margin-bottom:4px;
}
.tsh-metin{
  font-size:12.5px; line-height:1.65; color:var(--ink-soft); margin:0;
}
.tsh-metin b{color:var(--ink); font-weight:700;}

/* Bulgu türüne göre renk — hepsi kırmızı olursa hiçbiri okunmuyor.
   Çukur: mor (bilgi boşluğu) · Tuzak: kırmızı (öğrenilmiş yanlış)
   Tereddüt: amber (zaman) · Eksik: kırmızı-turuncu (gerçek eksik) */
.tsh-kart.cukur   .tsh-ikon{background:#EFE9FB; color:#6D45C7;}
.tsh-kart.cukur   {box-shadow:inset 3px 0 0 #8B5CF6, var(--shadow-sm);}
.tsh-kart.tuzak   .tsh-ikon{background:var(--bad-wash); color:var(--bad-ink);}
.tsh-kart.tuzak   {box-shadow:inset 3px 0 0 var(--bad), var(--shadow-sm);}
.tsh-kart.tereddut .tsh-ikon{background:var(--amber-wash); color:#B8790E;}
.tsh-kart.tereddut{box-shadow:inset 3px 0 0 #D9A441, var(--shadow-sm);}
.tsh-kart.eksik   .tsh-ikon{background:#FDEBE4; color:#C2410C;}
.tsh-kart.eksik   {box-shadow:inset 3px 0 0 #EA580C, var(--shadow-sm);}

.tsh-bos{
  background:var(--surface-2); border-radius:12px; padding:16px 18px;
  font-size:12.5px; line-height:1.65; color:var(--ink-soft); margin-bottom:16px;
}
.tsh-bos b{display:block; color:var(--ink); font-size:13.5px; margin-bottom:4px;
  font-family:'Figtree',sans-serif; font-weight:700;}
.tsh-bos b:not(:first-child){display:inline; font-size:inherit; font-family:inherit;}
.tsh-bos.temiz{background:var(--good-wash); color:#1F6B4F;}
.tsh-bos.temiz b{color:#14543C;}

@media(max-width:560px){
  .tsh-kart{padding:12px 13px; gap:10px;}
  .tsh-metin{font-size:12px;}
}

/* ---------- Profildeki deneme / tahmini sıralama kartı ---------- */
.dnm-kart{
  background:#162230; color:#fff;
  border-radius:16px; padding:18px; margin-bottom:18px; position:relative; overflow:hidden;
  box-shadow:var(--golge-2);
}
.dnm-kart::before{
  content:""; position:absolute; top:0; left:18%; right:18%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(226,183,109,.85),transparent);
}
.dnm-kart.bos{text-align:center;}
.dnm-kart-rozet{
  font-size:9px; font-weight:800; letter-spacing:.14em; color:#E2B76D; margin-bottom:8px;
}
.dnm-kart-baslik{font-family:'Figtree',sans-serif; font-weight:800; font-size:18px; letter-spacing:-.015em;}
.dnm-kart-alt{
  font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.55);
  margin:7px auto 14px; max-width:330px;
}
/* flex-wrap şart: çok dar ekranlarda "deneme / son" kutuları satırdan
   taşıp sayfaya yatay kaydırma çubuğu ekliyordu. */
.dnm-kart-ust{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.dnm-kart-net{
  font-family:'Figtree',sans-serif; font-weight:800; font-size:36px; line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.dnm-kart-net span{font-size:12px; font-weight:600; color:rgba(255,255,255,.4); margin-left:6px;}
.dnm-kart-mini{display:flex; gap:8px; flex:1 1 auto; flex-wrap:wrap; justify-content:flex-end; min-width:0;}
.dnm-kart-mini > div{
  background:rgba(255,255,255,.07); border-radius:12px; padding:8px 12px;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  min-width:52px; flex:0 1 auto;
}
.dnm-kart-mini b{font-family:'Figtree',sans-serif; font-weight:800; font-size:15px;}
.dnm-kart-mini span{font-size:9px; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.42);}

.dnm-kart-sir{
  background:rgba(226,183,109,.11); border:1px solid rgba(226,183,109,.28);
  border-radius:12px; padding:13px 15px; margin-top:15px;
}
.dnm-kart-sir-etiket{font-size:9.5px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:#E2B76D;}
.dnm-kart-sir-deger{font-family:'Figtree',sans-serif; font-weight:800; font-size:23px;
  letter-spacing:-.02em; margin-top:3px;}
.dnm-kart-sir-not{font-size:10.5px; line-height:1.55; color:rgba(255,255,255,.5); margin:6px 0 0;}
.dnm-kart-ipucu{
  background:rgba(255,255,255,.06); border-radius:12px; padding:11px 14px; margin-top:15px;
  font-size:12px; line-height:1.55; color:rgba(255,255,255,.62);
}
.dnm-kart-ipucu b{color:#E2B76D;}

.dnm-kart-btn{
  display:block; width:100%; margin-top:15px;
  background:#D8AA5C; color:#1B2733;
  border:none; border-radius:12px; padding:12px;
  font-family:'Figtree',sans-serif; font-weight:800; font-size:13.5px; cursor:pointer;
  box-shadow:var(--golge-2);
  transition:transform .16s var(--yay-zipla), box-shadow .16s;
}
.dnm-kart-btn:hover{transform:translateY(-1px);}

.dnm-kart-btn.ince{
  background:rgba(255,255,255,.09); color:#fff; box-shadow:none;
  border:1px solid rgba(255,255,255,.14); font-size:12.5px; padding:10px;
}
.dnm-kart-btn.ince:hover{background:rgba(255,255,255,.14);}

/* ---------- Deneme sınavı: süre çubuğu + soru haritası ---------- */
.dnm-ust{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#162230; color:#fff;
  border-radius:16px; padding:11px 16px; margin-bottom:12px;
  box-shadow:var(--golge-2);
}
.dnm-ust-sol{display:flex; flex-direction:column; gap:2px; min-width:0;}
.dnm-ust-etiket{
  font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#E2B76D;
}
.dnm-ust-ilerleme{font-size:11.5px; color:rgba(255,255,255,.55);}
.dnm-sure{
  font-family:'Figtree',sans-serif; font-weight:800; font-size:21px;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; flex:none;
}
.dnm-ust.kritik{background:#4A1818;}
.dnm-ust.kritik .dnm-ust-etiket{color:#FFB4A8;}
.dnm-ust.kritik .dnm-sure{animation:dnmNabiz 1s ease-in-out infinite;}
@keyframes dnmNabiz{0%,100%{opacity:1}50%{opacity:.5}}

.dnm-harita{
  display:flex; flex-wrap:wrap; gap:5px; justify-content:center;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:13px; margin-top:12px; box-shadow:var(--shadow-sm);
}
.dnm-kare{
  width:29px; height:29px; border-radius:12px; flex:none; cursor:pointer;
  border:1.5px solid var(--line); background:var(--surface);
  font-family:inherit; font-size:11px; font-weight:700; color:var(--ink-faint);
  transition:transform .12s, border-color .14s, background .14s, color .14s;
}
.dnm-kare:hover{transform:translateY(-2px); border-color:var(--primary-soft);}
.dnm-kare.dolu{background:var(--primary-wash); border-color:var(--primary-soft); color:var(--primary-deep);}
.dnm-kare.simdi{background:var(--ink); border-color:var(--ink); color:#fff; transform:scale(1.06);}

/* ---------- Deneme sonuç raporu ---------- */
.dsn-kart{padding:0; overflow:hidden;}
.dsn-ust{
  background:#162230; color:#fff;
  padding:22px 20px 20px; text-align:center; position:relative;
}
.dsn-ust::before{
  content:""; position:absolute; top:0; left:20%; right:20%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(226,183,109,.85),transparent);
}
.dsn-rozet{
  font-size:9px; font-weight:800; letter-spacing:.14em; color:#E2B76D; margin-bottom:10px;
}
.dsn-net-blok{display:flex; flex-direction:column; align-items:center; gap:1px;}
.dsn-net{
  font-family:'Figtree',sans-serif; font-weight:800; font-size:52px; line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.dsn-net-etiket{font-size:10px; letter-spacing:.18em; color:rgba(255,255,255,.45);}
.dsn-dyb{display:flex; justify-content:center; gap:18px; margin-top:16px;}
.dsn-dyb span{display:flex; flex-direction:column; align-items:center; font-size:10px;
  letter-spacing:.06em; color:rgba(255,255,255,.5);}
.dsn-dyb b{font-family:'Figtree',sans-serif; font-size:19px; font-weight:800; line-height:1.2;}
.dsn-d b{color:#5BE38C;} .dsn-y b{color:#FF8E80;} .dsn-b b{color:rgba(255,255,255,.7);}
.dsn-bolum-net{
  display:flex; gap:10px; margin-top:18px;
}
.dsn-bolum-net > div{
  flex:1; background:rgba(255,255,255,.06); border-radius:12px; padding:9px 8px;
  display:flex; flex-direction:column; gap:2px;
}
.dsn-bolum-net span{font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.45);}
.dsn-bolum-net b{font-family:'Figtree',sans-serif; font-size:17px; font-weight:800;}

.dsn-siralama{
  background:var(--amber-wash); border-bottom:1px solid #F0C77A;
  padding:16px 20px; text-align:center;
}
.dsn-sir-etiket{font-size:10px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:#8A5A0B; margin-bottom:4px;}
.dsn-sir-deger{font-family:'Figtree',sans-serif; font-weight:800; font-size:26px;
  color:#6B4408; letter-spacing:-.02em;}
.dsn-sir-not{font-size:11px; line-height:1.5; color:#8A5A0B; margin:7px 0 0; opacity:.9;}
/* Tahmin verilemeyen durum: amber vurgu yok, sakin bir bilgi seridi */
.dsn-siralama.dusuk{background:var(--surface-2); border-bottom-color:var(--line);}
.dsn-siralama.dusuk .dsn-sir-etiket{color:var(--ink-faint);}
.dsn-siralama.dusuk .dsn-sir-not{color:var(--ink-soft);}

.dsn-tablo{padding:16px 18px 6px;}
.dsn-bolum-baslik{
  font-size:9.5px; font-weight:800; letter-spacing:.13em; color:var(--ink-faint);
  margin:12px 0 8px; text-transform:uppercase;
}
.dsn-bolum-baslik:first-child{margin-top:0;}
.dsn-satir{display:flex; align-items:center; gap:10px; padding:5px 0;}
.dsn-brans{
  flex:0 0 41%; font-size:12.5px; color:var(--ink); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dsn-cubuk{flex:1; height:7px; background:var(--surface-2); border-radius:999px; overflow:hidden;}
.dsn-cubuk i{display:block; height:100%; border-radius:999px; transition:width .5s cubic-bezier(.2,.8,.2,1);}
.dsn-sayi{
  flex:0 0 46px; text-align:right; font-family:'Figtree',sans-serif;
  font-weight:800; font-size:13px; color:var(--ink); font-variant-numeric:tabular-nums;
}
.dsn-sayi em{font-style:normal; font-weight:600; color:var(--ink-faint); font-size:11px;}

@media(max-width:560px){
  .dnm-kare{width:26px; height:26px; font-size:10px;}
  .dsn-net{font-size:44px;}
  .dsn-brans{flex-basis:38%; font-size:11.5px;}
}

/* Hızlı Çöz pill'inin uçlarındaki soru/süre "topuzları" */

@keyframes knobFlickOutR{0%{transform:translateX(0) rotate(0deg); opacity:1;}100%{transform:translateX(10px) rotate(18deg); opacity:0;}}
@keyframes knobFlickInR{0%{transform:translateX(-10px) rotate(-18deg); opacity:0;}100%{transform:translateX(0) rotate(0deg); opacity:1;}}
@keyframes knobFlickOutL{0%{transform:translateX(0) rotate(0deg); opacity:1;}100%{transform:translateX(-10px) rotate(-18deg); opacity:0;}}
@keyframes knobFlickInL{0%{transform:translateX(10px) rotate(18deg); opacity:0;}100%{transform:translateX(0) rotate(0deg); opacity:1;}}

/* ---------- Hatalı soru maskot hatırlatıcısı ---------- */
.hata-mascot-card{
  background:var(--surface); border-radius:16px; padding:8px 28px 26px; max-width:340px; width:100%;
  box-shadow:var(--golge-3); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  animation:fcPanelIn .4s cubic-bezier(.2,.8,.2,1) both;
}
.hata-mascot-fig{width:120px; height:120px; margin-top:-14px;}
.hata-mascot-fig .mascot-svg{width:100%; height:100%;}
.hata-mascot-bubble{
  position:relative; background:var(--surface-2); border:1.5px solid var(--line); border-radius:16px;
  padding:14px 18px; font-family:'Figtree',sans-serif; font-size:13.5px; line-height:1.5; color:var(--ink);
}
.hata-mascot-bubble:before{
  content:''; position:absolute; top:-7px; left:50%; margin-left:-7px; width:14px; height:14px;
  background:var(--surface-2); border-left:1.5px solid var(--line); border-top:1.5px solid var(--line);
  transform:rotate(45deg);
}
.hata-mascot-bubble b{color:var(--bad-ink);}
.hata-mascot-btns{display:flex; flex-direction:column; gap:8px; width:100%;}
.hata-mascot-btn{
  font-family:'Figtree',sans-serif; font-weight:700; font-size:13.5px; border-radius:12px; padding:12px 18px; cursor:pointer;
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink-soft);
  transition:transform .16s var(--yay-zipla), box-shadow .16s, border-color .16s;
}
.hata-mascot-btn:hover{transform:translateY(-2px); border-color:var(--primary);}
.hata-mascot-btn.primary{
  color:#fff; border:none; background:var(--primary-deep);
  box-shadow:var(--golge-2);
}
.hata-mascot-btn.primary:hover{box-shadow:var(--golge-2);}

/* ---------- Konu seçim ekranı ---------- */
.geri-link{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ink-faint); background:none; border:none; cursor:pointer; padding:4px 0; margin-bottom:18px; transition:color .15s;}
.geri-link:hover{color:var(--primary-darker);}
.tavan-not{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--primary-wash,rgba(11,133,118,.10));border:1px solid var(--line);
  border-radius:12px;padding:10px 13px;margin-bottom:12px;
  font-size:13px;line-height:1.5;color:var(--ink-soft);}
.tavan-not-btn{flex:0 0 auto;border:0;border-radius:999px;cursor:pointer;
  background:var(--primary-deep);color:#fff;font:600 12.5px/1 'Figtree',sans-serif;
  padding:7px 14px;font-family:inherit;}
.tavan-not-btn:hover{filter:brightness(1.07);}
/* İlk soruda bir kez çıkan yapay zekâ notu (tavan-not ile aynı dil, amber zemin). */
.ilk-uyari{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--amber-wash);border:1px solid var(--line);
  border-radius:12px;padding:11px 14px;margin-bottom:12px;font-size:13px;line-height:1.5;color:var(--ink-soft);}
.ilk-uyari-metin{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px;}
.ilk-uyari-metin b{color:var(--ink);font-weight:700;}
.ilk-uyari a{color:var(--primary-darker);font-weight:600;}
.sp-yasal{margin:-10px 0 18px;font-size:12.5px;line-height:1.5;color:var(--ink-faint);}
.sp-yasal a{color:var(--primary-darker);font-weight:600;}
.g-not a{color:var(--primary-darker);font-weight:600;}
.konu-columns{display:grid; grid-template-columns:1fr 1fr; gap:8px 36px;}
/* Grid ogeleri varsayilan olarak min-width:auto tasir: icerigin
   min-content genisliginden dar olamazlar. Uzun konu adlari sutunu
   kartin disina tasirip son harfi kirpiyordu. */
.konu-columns > *{min-width:0;}
@media(max-width:640px){.konu-columns{grid-template-columns:1fr; gap:24px;}}
.konu-col-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; padding-bottom:11px; border-bottom:2px solid var(--line-soft);}
.konu-col-title{font-family:'Figtree',sans-serif; font-weight:700; font-size:14.5px; letter-spacing:-.005em;}
.konu-col-all{font-family:'Figtree',sans-serif; font-size:10.5px; letter-spacing:.04em; color:var(--primary-deep); background:none; border:none; cursor:pointer; font-weight:600; text-transform:uppercase; transition:color .15s;}
.konu-col-all:hover{color:var(--primary-darker);}
.konu-row{display:flex; align-items:center; gap:12px; padding:11px 2px; cursor:pointer; border-bottom:1px solid var(--line-soft); transition:background .12s;}
/* ── Branş satırı ve altında açılan konu listesi ──────────────────────
   Satırda ayrı bir tik kutusu yok: seçimi branşın kendi ikonu gösteriyor
   (soluk zemin = seçili değil, dolu zemin = seçili). Soru sayıları
   bilerek yazılmıyor. */
.konu-tik{display:flex;align-items:center;gap:11px;flex:1 1 auto;min-width:0;cursor:pointer;padding:0;border:0;background:none;text-align:left;}
.konu-tik .konu-name{min-width:0;line-height:1.3;
  transition:color .18s ease,font-weight .18s ease;}
.konu-ikon{flex:0 0 auto;width:32px;height:32px;border-radius:12px;display:grid;place-items:center;
  background:var(--primary-wash,rgba(11,133,118,.09));color:var(--primary-deep);
  transition:background .2s ease,color .2s ease,transform .18s cubic-bezier(.22,.61,.36,1);}
.konu-row:hover .konu-ikon{transform:translateY(-1px);}
.konu-row.on .konu-ikon{background:var(--primary-deep);color:#fff;}
/* Seçilince yalnızca renk değişiyor. Kalınlaşma metnin genişliğini
   değiştirip uzun branş adlarını yeniden sardırıyor, satır yüksekliği
   oynayınca da altındaki her şey zıplıyordu. */
.konu-row.on .konu-name{color:var(--primary-deep);}
/* Kısmi seçimde ikon dolu ama etrafında halka: "bu branşın tamamı değil". */
.konu-row.kismi .konu-ikon{box-shadow:0 0 0 3px var(--primary-wash,rgba(11,133,118,.18));}
.konu-rozet{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--primary-deep);
  background:var(--primary-wash,rgba(11,133,118,.12));border-radius:999px;padding:3px 9px;margin-left:8px;}
/* Kutu 44×44; görünen 30px alan ve ok eski yerinde. Sağa taşamıyor
   (.konu-columns kırpıyor), bu yüzden sola ve dikeyde büyüyor. */
.konu-ac{flex:0 0 auto;position:relative;isolation:isolate;width:44px;height:44px;margin:-7px 0 -7px -8px;padding:0 0 0 14px;border:0;
  background:none;color:var(--ink-soft);cursor:pointer;display:grid;place-items:center;transition:color .2s ease;}
.konu-ac::before{content:"";position:absolute;inset:7px 0 7px 14px;z-index:-1;border-radius:12px;transition:background .2s ease;}
.konu-ac svg{width:18px;height:18px;transition:transform .28s cubic-bezier(.22,.61,.36,1);}
@media (hover:hover){ .konu-ac:hover{color:var(--ink);} .konu-ac:hover::before{background:var(--surface-2);} }
.konu-ac.acik{color:var(--primary-deep);}
.konu-ac.acik svg{transform:rotate(180deg);}

/* Konular: etiket bulutu değil, girintili dikey liste. Sol kılavuz çizgi
   hangi branşa ait olduklarını gösteriyor. */
.konu-alt{margin:0 0 8px 15px;padding:4px 0 4px 16px;border-left:2px solid var(--line-soft);}
.konu-alt-gir{animation:konuAc .3s cubic-bezier(.22,.61,.36,1) both;}
@keyframes konuAc{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.konu-liste{display:grid;gap:1px;}
.konu-sec{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;border-radius:12px;padding:8px 10px;cursor:pointer;
  font-size:13px;line-height:1.35;color:var(--ink-soft);font-family:inherit;
  transition:background .16s ease,color .16s ease;}
.konu-sec:hover{background:var(--surface-2);color:var(--ink);}
.konu-sec.on{background:var(--primary-wash,rgba(11,133,118,.10));color:var(--primary-deep);font-weight:600;}
.konu-kutu{flex:0 0 auto;width:17px;height:17px;border-radius:6px;
  border:1.6px solid var(--line);display:grid;place-items:center;
  transition:background .16s ease,border-color .16s ease;}
.konu-kutu svg{width:10px;height:10px;opacity:0;transform:scale(.4);
  transition:opacity .16s ease,transform .18s var(--yay-zipla);}
.konu-sec.on .konu-kutu{background:var(--primary-deep);border-color:var(--primary-deep);}
.konu-sec.on .konu-kutu svg{opacity:1;transform:none;}
.konu-sec-ad{min-width:0;}
.konu-bos{font-size:12.5px;color:var(--ink-soft);padding:6px 10px;}
.konu-temizle{margin:6px 0 0 10px;background:none;border:0;padding:2px;cursor:pointer;
  font-size:12px;font-family:inherit;color:var(--ink-soft);text-decoration:underline;
  transition:opacity .2s ease;}
.konu-temizle:hover{color:var(--ink);}
/* Görünmez ama yerini koruyor — zıplamayı önleyen kısım burası. */
.konu-temizle.gizli{opacity:0;pointer-events:none;}

@media (max-width:640px){
  .konu-tik{gap:10px;}
  .konu-ikon{width:29px;height:29px;border-radius:12px;}
  .konu-alt{margin-left:13px;padding-left:13px;}
  .konu-sec{font-size:12.5px;padding:11px 10px;min-height:42px;}
}

.konu-row:last-child{border-bottom:none;}
.konu-row:hover{background:var(--surface-2); margin:0 -8px; padding-left:10px; padding-right:10px; border-radius:12px;}
.konu-name{font-size:13.5px; color:var(--ink-soft); transition:color .12s, font-weight .12s;}
.konu-row.on .konu-name{color:var(--ink); font-weight:600;}
.konu-row:hover .konu-name{color:var(--ink);}

.seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:4px; gap:3px; flex-wrap:wrap;}
.seg button{font-size:13.5px; font-weight:600; border:none; background:none; cursor:pointer; padding:9px 15px; border-radius:12px; color:var(--ink-soft); transition:all .15s;}
.seg button:hover{color:var(--ink);}
.seg button.on{background:var(--surface); color:var(--primary-darker); box-shadow:var(--shadow-sm); }
/* Kayan seçim zemini (bkz. segKaydir): düğmelerin arkasında. */
.seg{position:relative;}
.seg button{position:relative; z-index:1;}
.seg-kayan{position:absolute; left:0; top:0; z-index:0; border-radius:12px; background:var(--surface); box-shadow:var(--shadow-sm); pointer-events:none;}
.seg button.on.seg-gecici{background:transparent; box-shadow:none;}
.seg.num button{font-family:'Figtree',sans-serif; padding:9px 13px;}
.modehint{font-size:13px; color:var(--ink-faint); margin-top:10px; min-height:18px;}

.cta{
  margin-top:32px; width:100%; font-family:'Figtree',sans-serif; font-size:16.5px; font-weight:700; color:#fff;
  background:var(--primary-deep); border:none; border-radius:12px;
  padding:17px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:var(--golge-2); transition:transform .14s ease, box-shadow .14s, filter .14s;
}
.cta:active:not(:disabled){transform:translateY(0); transition-duration:140ms;}
.cta:disabled{background:var(--line); color:var(--ink-soft); box-shadow:none; cursor:not-allowed;}
/* Setup sticky CTA: stays reachable; fades in with screen enter */
.screen .card > .cta{
  position:sticky; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:6;
}
.screen-enter .card > .cta{animation:fadeUp .28s cubic-bezier(.22,.7,.2,1) .16s both;}

/* ── Setup CTA funnel (Branş → Adet → Mod) ───────────────────────── */
/* Üst çubuğun hemen altına yapışır (--ust-cubuk-h JS'te ölçülüyor).
   top:0 iken üst çubuğun arkasında kalıyordu. */
.su-head{position:sticky;top:var(--ust-cubuk-h,0px);z-index:8;background:var(--bg,#F4F7F6);padding:4px 0 12px;margin:0 0 4px;}
.su-progress{font-family:'Figtree',sans-serif;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--ink-faint);margin-bottom:8px;}
.su-progress b{color:var(--primary-darker);font-weight:800;}
.su-title{font-family:'Figtree',sans-serif;font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.2;}
.su-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 4px;min-height:29px;}
/* Çip satırının yeri baştan ayrılıyor: ilk seçimde liste zıplamasın. */
.su-chips-ipucu{font-size:12.5px;font-weight:500;color:var(--ink-faint);}
.su-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--primary-deep);background:var(--primary-wash);border:none;border-radius:999px;padding:6px 10px 6px 12px;cursor:pointer;}
.su-chip:hover{filter:brightness(.97);}
.su-chip-x{font-size:14px;line-height:1;opacity:.7;}
.su-body{padding-bottom:8px;}
/* Düz zemin + üst çizgi + gölge: açıkça bir çubuk. Eskiden saydamdan
   renge geçen gradyandı; altına giren satırlar solup kayboluyormuş
   gibi görünüyordu. Yanlara taşarak .wrap'in iç boşluğunu kaplıyor. */
.su-sticky{
  position:sticky;bottom:0;z-index:6;
  margin:18px -22px 0;padding:12px 22px calc(12px + env(safe-area-inset-bottom,0px));
  background:var(--bg,#EEF1F6);
  border-top:1px solid var(--line);
  box-shadow:var(--golge-2);
}
.su-sticky .cta{margin-top:0;}
/* Mobile: keep CTA reachable without scrolling past the full branş list */
@media(max-width:560px){
  .su-sticky{
    position:fixed;left:0;right:0;bottom:0;z-index:20;
    margin:0;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));
    background:var(--bg,#EEF1F6);
    border-top:1px solid var(--line);
    box-shadow:var(--golge-2);
  }
  .su-funnel{padding-bottom:calc(118px + env(safe-area-inset-bottom,0px));}
}
.su-hizli{display:block;width:100%;margin:10px 0 0;padding:8px;border:0;background:none;color:var(--ink-soft);font:600 13.5px 'Figtree',sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:center;}
.su-hizli:hover{color:var(--primary-deep);}
.su-skel{display:grid;gap:10px;padding:8px 0;}
.su-skel .iskelet{height:44px;}
.su-error{text-align:center;padding:28px 16px;color:var(--ink-soft);font-size:14px;line-height:1.5;}
/* Boş durum (bosDurum): Dusky'nin yüzü, tek başlık, tek satır, tek düğme. */
.bos-durum{display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s-2); padding:var(--s-5) var(--s-3);}
.bos-durum-yuz{width:64px; height:64px; margin-bottom:var(--s-1);}
.bos-durum-baslik{font:700 18px/1.3 'Figtree',sans-serif; letter-spacing:-.01em; color:var(--ink);}
.bos-durum-metin{max-width:32ch; font-size:14px; line-height:1.5; color:var(--ink-soft);}
.bos-durum-btn{margin-top:var(--s-2); min-height:44px; padding:0 var(--s-4); border:0; border-radius:var(--r-pill);
  background:var(--primary-deep); color:#fff; font:700 14px 'Figtree',sans-serif; cursor:pointer;}
@media (hover:hover){ .bos-durum-btn:hover{background:var(--primary-darker);} }
.su-error .btn{margin-top:14px;}
.su-step-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 16px;box-shadow:var(--shadow-sm);}
.su-step-label{font-size:13.5px;font-weight:700;margin-bottom:12px;color:var(--ink);}
.cta .arr{transition:transform .2s;}
.hint{margin-top:13px; font-size:12.5px; color:var(--ink-faint); text-align:center;}

.qtop{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.qnum{font-family:'Figtree',sans-serif; font-size:13px; font-weight:600; color:var(--primary-darker); background:var(--primary-wash); padding:4px 10px; border-radius:6px;}
/* Soru ilerlemesi kartın tepesinde: odak modunda üst bar gizlendiği için
   kaçıncı soruda olduğun görünmüyordu. Üst bardaki çubuk kaldırıldı (tek gösterge). */
.qil{margin-bottom:16px;}
.qil-etiket{display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:6px; white-space:nowrap; font-variant-numeric:tabular-nums;}
.qil-cizgi{display:block; height:3px; background:var(--line); border-radius:999px; overflow:hidden;}
.qil-cizgi i{display:block; height:100%; width:0; background:var(--primary); border-radius:999px; transition:width .45s cubic-bezier(.4,0,.2,1);}
.qtag{font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:700;}
.qlvl{margin-left:auto; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:6px;}
.qlvl.orta{color:var(--primary-darker); background:var(--primary-wash);}
.qlvl.zor{color:var(--amber-ink); background:var(--amber-wash);}
.qtext{font-family:'Figtree',sans-serif; font-size:19.5px; font-weight:600; line-height:1.45; letter-spacing:-.01em; margin-bottom:24px;}

.opts{display:flex; flex-direction:column; gap:10px;}
.opts .opt{}
.opt{
  display:flex; align-items:center; gap:14px; text-align:left; width:100%; background:var(--surface);
  border:1.5px solid var(--line); border-radius:12px; padding:14px 16px; cursor:pointer; font-size:15px; color:var(--ink); line-height:1.4;
  transition:transform .14s cubic-bezier(.22,.7,.2,1), border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.opt:active:not(.lock){transform:translateY(0);}
.opt.lock{cursor:default;}
.bub{flex-shrink:0; width:32px; height:32px; border-radius:50%; border:1.6px solid var(--line); display:grid; place-items:center; font-family:'Figtree',sans-serif; font-weight:600; font-size:13px; color:var(--ink-soft); transition:transform .14s cubic-bezier(.22,.7,.2,1), border-color .14s ease, background-color .14s ease, color .14s ease;}
.opt.sel{border-color:var(--primary); background:var(--primary-wash); animation:ringPulse .6s ease-out;}
.opt.sel .bub{background:var(--primary-deep); border-color:var(--primary-deep); color:#fff; transform:scale(1.08);}
.opt.ok{border-color:var(--good); background:var(--good-wash); animation:reveal .5s ease;}
.opt.ok .bub{background:var(--good-ink); border-color:var(--good-ink); color:#fff; transform:scale(1.08);}
.opt.no{border-color:var(--bad); background:var(--bad-wash); --ring:rgba(224,71,63,.4); animation:reveal .5s ease, softShake .45s ease;}
.opt.no .bub{background:var(--bad-ink); border-color:var(--bad-ink); color:#fff;}
.opt .mk{margin-left:auto; flex-shrink:0; font-weight:800; font-size:16px; animation:pop .4s var(--yay-zipla) both;}

.explain{margin-top:18px; border-radius:12px; padding:16px 18px; animation:slideDown .4s cubic-bezier(.2,.8,.2,1) both; border:1px solid var(--line); border-left-width:4px;}
.explain.good{border-left-color:var(--good); background:var(--good-wash);}
.explain.bad{border-left-color:var(--bad); background:var(--bad-wash);}
.explain .eh{font-family:'Figtree',sans-serif; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; margin-bottom:9px; display:flex; align-items:center; gap:7px;}
.explain.good .eh{color:var(--good-ink);}
.explain.bad .eh{color:var(--bad-ink);}
.explain-not{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 var(--s-2); margin-top:var(--s-2); font-size:12.5px; line-height:1.5; color:var(--ink-faint);}
/* Görünen boyut küçük, dokunma alanı 44px (üst/alt dolgu, negatif kenar boşluğuyla satırı büyütmüyor). */
.explain-bildir{padding:13px 4px; margin:-13px -4px; border:0; background:none; font-size:12.5px; font-weight:600; color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; cursor:pointer;}
@media (hover:hover){ .explain-bildir:hover{color:var(--ink);} }
.explain p{font-size:14.5px; line-height:1.65; color:var(--ink-soft);}

.nav{display:flex; gap:12px; margin-top:26px;}
/* Telefonda "Sonraki soru" başparmak hizasında: açıklama açılınca düğme aşağı
   itilmesin, kaydırmadan basılsın. Çubuk kartın genişliğine yayılıyor (kartın iç
   boşluğu kadar negatif kenar), sayfa sonunda kartın altına oturuyor; normal akışta
   olduğu için açıklama ve "Hata bildir" altında kalmıyor. */
@media (max-width:560px){
  .screen .card > .nav{position:sticky; bottom:0; z-index:5; margin:var(--s-4) -18px -18px;
    padding:var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom,0px));
    background:var(--surface); border-top:1px solid var(--line); border-radius:0 0 var(--r-lg) var(--r-lg);}
  .screen .card > .nav .btn{min-height:52px;}
}
@media (max-width:380px){ .screen .card > .nav{margin:var(--s-4) -15px -15px;} }
.btn{font-family:'Figtree',sans-serif; font-size:15px; font-weight:700; border-radius:12px; padding:13px 22px; cursor:pointer; transition:transform .14s var(--yay-zipla), background .15s, border-color .15s, color .15s, opacity .15s; border:1.5px solid transparent;}

.btn.go{background:var(--ink); color:#fff; flex:1; border-color:var(--ink);}
.btn.go:disabled{background:var(--line); border-color:var(--line); color:var(--ink-soft); cursor:not-allowed;}
.btn.gh{background:var(--surface); border-color:var(--line); color:var(--ink-soft);}
/* Hover yalnızca gerçek imleçte: dokunmatikte dokunulan şık/düğme "seçili gibi"
   kalıyordu. Zıplama ve parlama yok, sade bir renk değişimi. */
@media (hover:hover){
  .cta:hover:not(:disabled){background:var(--primary-darker);}
  .cta:hover:not(:disabled) .arr{transform:translateX(4px);}
  .opt:hover:not(.lock){border-color:var(--primary);}
  .opt:hover:not(.lock) .bub{border-color:var(--primary); color:var(--primary-darker);}
  .btn.go:hover:not(:disabled){background:#0C1521;}
  .btn.gh:hover{border-color:var(--primary); color:var(--primary-darker);}
}

.ring{position:relative; width:128px; height:128px; flex-shrink:0;}
/* Giriş animasyonu yalnızca ekrana ilk gelindiğinde — her yeniden çizimde
   tekrar oynarsa arka plan veri yüklemeleri sayfayı zıplatıyor. */
.screen-enter .ring{animation:cardEnter .55s cubic-bezier(.2,.8,.2,1) both;}
/* Çizim halkanın kutusuna ölçeklenir; mobilde kutu 100 px olunca
   sabit 128 px çizim taşıyor, yazı ile daire ayrı merkezde kalıyordu. */
.ring svg{display:block; width:100%; height:100%; transform:rotate(-90deg);}

.sc{flex:1; min-width:78px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; transition:transform .2s ease;}
.sc:hover{transform:translateY(-2px);}

.bran{margin-bottom:14px;}
.bran-top{display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px;}
.bran-top .bn{font-weight:600;}
.bran-top .bv{font-family:'Figtree',sans-serif; color:var(--ink-soft); font-size:12.5px;}
.track{height:8px; background:var(--line-soft); border-radius:999px; overflow:hidden;}
.track i{display:block; height:100%; width:0; border-radius:999px; transition:width .9s cubic-bezier(.3,.8,.3,1);}

.rev{border:1px solid var(--line); border-radius:12px; margin-bottom:11px; overflow:hidden; background:var(--surface); transition:box-shadow .2s, transform .2s;}
.rev:hover{box-shadow:var(--shadow-sm);}
.rev-h{display:flex; align-items:flex-start; gap:12px; padding:14px 16px; cursor:pointer; -webkit-user-select:none; user-select:none;}
.rev-h:hover{background:var(--surface-2);}
.rmark{flex-shrink:0; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:13px; color:#fff; font-weight:800; margin-top:1px;}
.rmark.d{background:var(--good);} .rmark.y{background:var(--bad);} .rmark.b{background:var(--ink-faint);}
.rq{flex:1; font-size:14.5px; line-height:1.5;}
.rq .rt{font-family:'Figtree',sans-serif; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:4px;}
.rchev{color:var(--ink-faint); font-size:19px; margin-top:1px; transition:transform .25s;}
.rev.open .rchev{transform:rotate(90deg);}
.rev-b{padding:2px 16px 16px 52px; animation:slideDown .3s ease both;}
.ra{font-size:13.5px; margin-bottom:5px;}
.ra .lab{color:var(--ink-faint);}
.ra .d{color:var(--good-ink); font-weight:700;} .ra .y{color:var(--bad-ink); font-weight:700;}
.rsol{font-size:13.5px; line-height:1.65; color:var(--ink-soft); margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft);}
/* Dusky'nin günün planı — ana ekranda sakin bir kart. */

/* Şık istatistikleri — cevap açıldıktan sonra. */
.sik-ist{margin:10px 0 12px; padding:10px 12px; border-radius:12px; text-align:left;
  background:rgba(255,255,255,.7); border:1px solid var(--line-soft);}
.sik-ist-bas{display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:12.5px; line-height:1.45; color:var(--ink-soft);}
.sik-ist-bas b{font-weight:700; color:var(--ink);}
.sik-ist-bas small{flex:none; font-size:11px; color:var(--ink-faint);}
.sik-ist-satirlar{display:flex; flex-direction:column; gap:4px; margin-top:8px;}
.sik-ist-satir{display:flex; align-items:center; gap:8px; font:600 11.5px 'Figtree',sans-serif; color:var(--ink-faint);}
.sik-ist-satir > span:first-child{width:12px;}
.sik-ist-cubuk{flex:1; height:6px; border-radius:999px; background:var(--line-soft); overflow:hidden;}
.sik-ist-cubuk i{display:block; height:100%; border-radius:999px; background:#C5CEDA; transition:width .6s var(--ease-apple);}
.sik-ist-satir > span:last-child{min-width:34px; text-align:right;}
.sik-ist-satir.dogru{color:var(--good-ink);}
.sik-ist-satir.dogru .sik-ist-cubuk i{background:var(--good);}
.sik-ist-satir.secilen{color:var(--bad-ink);}
.sik-ist-satir.secilen .sik-ist-cubuk i{background:var(--bad);}
/* Testten çık — soru kartının üstünde, solda. Odak modu üst çubuğu
   gizlediği için sınavdan çıkmanın görünür tek yolu bu. */
/* Kutu 44px yüksek, görünen hap ::before ile 32px. */
.ok-cikis{position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:6px; height:44px; margin:-6px 0; padding:0 13px 0 10px; border-radius:999px; cursor:pointer;
  border:0; background:none; color:var(--ink-soft);
  font:600 12.5px 'Figtree',sans-serif;
  transition:color var(--motion-fast) ease, transform var(--motion-instant) ease;}
.ok-cikis::before{content:""; position:absolute; inset:6px 0; z-index:-1; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-sm); transition:border-color var(--motion-fast) ease;}
@media (hover:hover){
  .ok-cikis:hover{color:var(--bad-ink);}
  .ok-cikis:hover::before{border-color:rgba(224,71,63,.4);}
}

.cikis-modal{max-width:390px; text-align:center;}
.cikis-modal .modal-ico{display:flex; justify-content:center; color:var(--primary-deep);}
.cikis-dugmeler{display:flex; flex-direction:column; gap:8px;}
.cikis-dugmeler .btn{width:100%; flex:none;}
.btn.tehlike{background:var(--bad-wash); color:#B4302A; border-color:rgba(224,71,63,.3);}
.btn.tehlike:hover{border-color:var(--bad);}
/* Dusky'nin test sonu yorumu — sonuç ekranında, skor kartının altında. */
.dy-yorum{margin-top:18px; padding:16px; border-radius:16px; text-align:left;
  background:var(--amber-wash); border:1px solid rgba(199,130,26,.28);}
.screen-enter .dy-yorum{animation:staggerIn .5s var(--ease-apple) .2s both;}
.dy-bas{display:flex; align-items:center; gap:12px;}
.dy-yuz{width:44px; height:44px; padding:6px; flex:none; border-radius:50%; background:var(--surface); border:1px solid var(--line);}
.dy-etiket{font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--amber-ink);}
.dy-baslik{margin-top:1px; font-weight:700; font-size:16px; line-height:1.3; letter-spacing:-.01em; color:var(--ink);}
.dy-maddeler{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px;}
.dy-maddeler li{display:flex; align-items:flex-start; gap:9px; font-size:13.5px; line-height:1.5; color:var(--ink-soft);}
.dy-maddeler li .ikon{margin-top:2px; flex:none; color:var(--amber-ink);}
.dy-maddeler b{color:var(--ink);}
.dy-incele{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:46px; margin-top:14px;
  border:0; border-radius:12px; cursor:pointer; background:var(--primary-deep); color:#fff; font:700 14px 'Figtree',sans-serif;
  transition:transform var(--motion-instant) ease, background-color var(--motion-fast) ease;}

@media (hover:hover){ .dy-incele:hover{background:var(--primary-darker);} }
/* Zorlandığı branştan test: ikincil düğme; uzun branş adı alt satıra geçebilir. */
.dy-incele.dy-brans{height:auto; min-height:46px; padding:10px 14px; text-align:center;
  background:var(--surface); color:var(--primary-deep); box-shadow:inset 0 0 0 1.5px var(--line);}
.dy-incele + .dy-incele{margin-top:8px;}
@media (hover:hover){ .dy-incele.dy-brans:hover{background:var(--surface-2);} }

/* ══ Mobil ana sayfa (pano) ═══════════════════════════════════════
   Yalnızca dar ekranda çiziliyor (viewAnaPano). Kartlar tek aile:
   beyaz yüzey, 18px köşe, çok hafif gölge; tek koyu kart Hızlı Çöz. */
.ap{display:flex; flex-direction:column; gap:14px; text-align:left;}
.ap > *{min-width:0;}
.screen-enter .ap > *{animation:staggerIn .5s var(--ease-apple) both;}
.screen-enter .ap > :nth-child(2){animation-delay:50ms}
.screen-enter .ap > :nth-child(3){animation-delay:100ms}
.screen-enter .ap > :nth-child(4){animation-delay:150ms}
.screen-enter .ap > :nth-child(5){animation-delay:200ms}
.screen-enter .ap > :nth-child(n+6){animation-delay:250ms}

.ap-merhaba{font-weight:800; font-size:22px; line-height:1.2; letter-spacing:-.02em; color:var(--ink);}
.ap-alt{font-size:13.5px; line-height:1.45; color:var(--ink-soft); margin-top:4px;}
.ap-dus{flex:none; margin-top:var(--s-1); font-size:13px; font-weight:600; color:var(--ink-soft); white-space:nowrap;}
.ap-dus b{font-weight:800; color:var(--primary-darker);}

.ap-kutu{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);}

.ap-hedef{overflow:hidden;}
/* Günlük hedef şeridi: solda sayı, ortada 4px çubuk, sağda seri. */
.ap-hedef-ust{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--s-3); width:100%;
  padding:var(--s-3); border:0; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer;}

.ap-cubuk{display:block; height:4px; border-radius:var(--r-pill); background:var(--line); overflow:hidden;}
.ap-cubuk i{display:block; height:100%; border-radius:var(--r-pill); transform-origin:left center;
  background:var(--amber); transition:width .6s var(--ease-apple);}

.ap-hedef.tamam .ap-cubuk i{background:var(--good);}
.screen-enter .ap-cubuk i{animation:apDol .9s var(--ease-apple) .25s both;}
@keyframes apDol{from{transform:scaleX(0)}}
/* Dar ekranda sayı ve seri üstte, çubuk altta tam genişlik. */
@media (max-width:340px){
  .ap-hedef-ust{grid-template-columns:1fr auto;}
  .ap-hedef-ust .ap-cubuk{grid-column:1 / -1; grid-row:2;}
}
.ap-hedef-sec{display:flex; align-items:center; gap:6px; padding:10px 16px 14px; border-top:1px solid var(--line-soft);
  animation:apAcil .22s var(--ease-apple) both;}
.ap-hedef-sec span{font-size:12px; font-weight:600; color:var(--ink-faint); margin-right:4px;}
.ap-hedef-sec button{flex:1 1 0; min-width:0; max-width:56px; height:34px; border-radius:12px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-soft); font:700 13px 'Figtree',sans-serif; cursor:pointer;
  transition:background var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease;}
.ap-hedef-sec button.on{background:var(--primary-deep); border-color:var(--primary-deep); color:#fff;}
@keyframes apAcil{from{opacity:0; transform:translateY(-4px)}}
/* Günlük hedef bugün seçildi: kilitli satır; günün ilk açılışındaki seçim penceresi. */
.ap-hedef-kilit{gap:8px; color:var(--ink-soft);}
.ap-hedef-kilit .ikon{flex:none; color:var(--ink-faint);}
.ap-hedef-kilit span{font-size:13px; font-weight:500; color:var(--ink-soft); margin:0;}
.ap-hedef-kilit b{color:var(--ink); font-weight:700;}
/* Günün ilk açılışında alttan açılan hedef paneli (onaylı tasarım). */
.ap-sheet.hg{margin:auto auto 0; background:var(--surface); border-radius:20px 20px 0 0; padding:26px 20px calc(24px + env(safe-area-inset-bottom,0px));}
.hg-dusky{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
.hg-dusky svg{flex:none;}
.hg-balon{background:var(--bg); border-radius:var(--r); padding:10px 14px; font-weight:600; font-size:15px; color:var(--ink);}
.hg-baslik{font-weight:700; font-size:24px; color:var(--ink); margin-bottom:6px;}
.hg-alt{font-size:14px; color:var(--ink-soft); margin:0 0 18px;}
.hg-kartlar{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:20px;}
.hg-kart{border:1.5px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--ink); padding:13px 0; font-weight:700; font-size:20px; cursor:pointer;
  animation:staggerIn .35s var(--ease-apple) calc(.3s + var(--i) * .05s) both; transition:background var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-fast) ease;}
.hg-kart small{display:block; font:600 11px 'Figtree',sans-serif; color:var(--ink-soft); margin-top:2px;}
.hg-kart.on{background:var(--primary-deep); border-color:var(--primary-deep); color:#fff;}
.hg-kart.on small{color:var(--primary-wash);}

.hg-btn{position:relative; width:100%; height:52px; border:0; border-radius:var(--r); background:var(--primary); color:var(--ink); font-weight:700; font-size:16px; cursor:pointer; overflow:hidden;}
.hg-btn:disabled{cursor:default;}
.hg-t1,.hg-t2{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px; transition:opacity .2s ease, transform .2s ease;}
.hg-t2{opacity:0; transform:translateY(8px);}
.kilitli .hg-t1{opacity:0; transform:translateY(-10px);}
.kilitli .hg-t2{opacity:1; transform:none; transition-delay:.1s;}
.hg-kilit{position:relative; width:18px; height:18px; flex:none;}
.hg-kilit i{position:absolute; bottom:0; left:2px; width:14px; height:10px; background:currentColor; border-radius:3px;}
.hg-kilit b{position:absolute; top:0; left:4px; width:10px; height:11px; border:2.5px solid currentColor; border-bottom:0; border-radius:6px 6px 0 0; transform:translateY(-5px); transition:transform .3s var(--ease-apple) .35s;}
.kilitli .hg-kilit b{transform:none;}
.hg-not{text-align:center; font-size:13px; color:var(--ink-soft); margin-top:14px; opacity:0; transition:opacity .3s ease .5s;}
.kilitli .hg-not{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .ap-sheet.hg,.hg-kart{animation:none;}
  .hg-kart,.hg-t1,.hg-t2,.hg-kilit b,.hg-not{transition:none;}
}
/* Hedef şeridi yüklenirken: aynı ızgara ve yazı yükseklikleri, düz .iskelet çubukları. */
.ap-iskelet .ap-hedef-ust{cursor:default;}

.ap-iskelet .isk-cubuk{height:8px; border-radius:var(--r-pill);}

/* Ana ekrana ekle kartı (telefonda, üyeye). */
.ap-kurulum{display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-2) var(--s-3) var(--s-3);}
.ap-kurulum-ikon{flex:none; display:flex; color:var(--primary-deep);}
.ap-kurulum-metin{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.ap-kurulum-metin b{font:700 14.5px 'Figtree',sans-serif; letter-spacing:-.01em; color:var(--ink);}
.ap-kurulum-metin span{font-size:12.5px; line-height:1.4; color:var(--ink-soft);}
.ap-kurulum-btn{flex:none; height:36px; padding:0 var(--s-3); border-radius:var(--r); border:0; cursor:pointer;
  background:var(--primary-deep); color:#fff; font:700 13px 'Figtree',sans-serif;}
.ap-kurulum-kapat{flex:none; width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:50%;
  background:none; color:var(--ink-faint); cursor:pointer;}

.ap-misafir-btn{flex:none; height:36px; padding:0 var(--s-3); border-radius:var(--r); border:0; cursor:pointer;
  background:var(--primary-deep); color:#fff; font:700 13px 'Figtree',sans-serif;}

.ap-bolum{display:flex; align-items:center; gap:8px; margin:8px 2px -2px; font-weight:700; font-size:18px; letter-spacing:-.015em; color:var(--ink);}
.ap-bolum .ikon{color:var(--primary-deep);}

.ap-hero{position:relative; overflow:hidden; border-radius:var(--r-lg); padding:var(--s-3); color:#fff;
  background:var(--primary-ink);}

.ap-ayarlar{display:flex; gap:var(--s-2); margin-top:var(--s-3);}
.ap-adim{flex:1; min-width:0; display:flex; align-items:center; height:42px; border-radius:var(--r);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);}
.ap-adim button{flex:none; width:40px; height:100%; border:0; border-radius:12px; background:none; cursor:pointer;
  color:#A7F3E6; font:600 20px/1 'Figtree',sans-serif; -webkit-tap-highlight-color:transparent;
  transition:background var(--motion-fast) ease, opacity var(--motion-fast) ease;}
.ap-adim button:active{background:rgba(255,255,255,.1);}
.ap-adim button:disabled{opacity:.28; cursor:default;}
.ap-adim-deger{flex:1; min-width:0; text-align:center; white-space:nowrap; font-size:12px; color:rgba(255,255,255,.85);}
.ap-adim-deger b{display:inline-block; min-width:1.3em; font:800 16px 'Figtree',sans-serif; color:#fff;}
.ap-adim-deger b.flick-out-r{animation:knobFlickOutR .16s ease-in forwards;}
.ap-adim-deger b.flick-in-r{animation:knobFlickInR .18s var(--yay-zipla) forwards;}
.ap-adim-deger b.flick-out-l{animation:knobFlickOutL .16s ease-in forwards;}
.ap-adim-deger b.flick-in-l{animation:knobFlickInL .18s var(--yay-zipla) forwards;}
/* Koyu kartta düz vurgu: #021E19 / --primary 4,99:1. İmleçte yalnızca zemin değişir. */
.ap-basla{display:flex; align-items:center; justify-content:center; gap:var(--s-2); width:100%; height:50px; margin-top:var(--s-2);
  border:0; border-radius:var(--r); cursor:pointer; color:#021E19; font:800 15.5px 'Figtree',sans-serif; letter-spacing:-.005em;
  background:var(--primary);
  transition:transform var(--motion-instant) ease, background-color var(--motion-fast) ease;}

@media (hover:hover){ .ap-basla:hover{background:var(--primary-wash);} }

.ap-izgara{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3);}
.ap-kart{position:relative; display:flex; flex-direction:column; align-items:flex-start; min-height:156px; padding:var(--s-3);
  text-align:left; font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform var(--motion-instant) ease, border-color var(--motion-fast) ease;}
@media (hover:hover){ .ap-kart:hover{border-color:var(--primary);} }


.ap-kart-baslik{margin-top:12px; font-weight:700; font-size:15px; line-height:1.25; letter-spacing:-.01em; color:var(--ink);}
.ap-kart-metin{flex:1; margin-top:4px; font-size:12.5px; line-height:1.4; color:var(--ink-soft);}
/* Tek vurgu: kart türü ne olursa olsun link ve ikon --primary-deep. Kırmızı yalnızca yanlış/hata durumunda. */
.ap-kart-git{display:inline-flex; align-items:center; gap:var(--s-1); margin-top:var(--s-2); font-size:12.5px; font-weight:700; color:var(--primary-deep);}
/* Rozetler nötr; yalnızca dikkat isteyen (açık deneme) vurgu renginde. */

.ap-oneri{display:flex; align-items:center; gap:12px; width:100%; padding:13px 14px; text-align:left; font:inherit; color:inherit;
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform var(--motion-instant) ease;}

@media (hover:hover){ .ap-oneri:hover{border-color:var(--primary);} }

/* Ana sayfadaki Düello kartı (bkz. apDuelloHTML). Hızlı (karışık) ya da
   branş seçilir, arkadaşın yanındaki "Meydan Oku"ya basılır; düğme bir kez
   "Başlat?"a döner, ikinci dokunuş düelloyu açar (kazara başlamasın). */
.ap-duello{padding:16px;}
.ap-duello-bas{display:flex; align-items:center; gap:10px;}
.ap-duello-ikon{width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex:none;
  background:#0F2421; color:#6EE7B7;}
.ap-duello-baslik{flex:1; min-width:0; font:800 18px 'Figtree',sans-serif; letter-spacing:-.02em; color:var(--ink);}
.ap-duello-rozet{flex:none; display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px;
  font-size:11.5px; font-weight:800; white-space:nowrap; background:var(--bad-wash); color:#B4302A;}
.ap-duello-rozet::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor;}
.ap-duello-alt{margin:8px 0 0; font-size:13px; line-height:1.45; color:var(--ink-soft);}
.ap-dl-sekme{display:flex; gap:4px; margin-top:12px; padding:4px; border-radius:12px; background:var(--bg);}
.ap-dl-sekme button{flex:1 1 0; height:36px; display:flex; align-items:center; justify-content:center; gap:6px; border:0;
  border-radius:9px; background:none; cursor:pointer; color:var(--ink-soft); font:700 13px 'Figtree',sans-serif;
  -webkit-tap-highlight-color:transparent; transition:background var(--motion-fast) ease, color var(--motion-fast) ease;}
.ap-dl-sekme button.on{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(20,30,46,.12);}
.ap-dl-brans{display:block; width:100%; height:38px; margin-top:8px; padding:0 10px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); font:600 13px 'Figtree',sans-serif; animation:apAcil .22s var(--ease-apple) both;}
.ap-dl-davet{display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 10px 10px 12px; border-radius:12px;
  background:var(--amber-wash); font-size:13px; line-height:1.35; color:var(--ink);}
.ap-dl-davet > span{flex:1; min-width:0;}
.ap-dl-davet small{display:block; font-size:11.5px; color:var(--ink-soft);}
.ap-dl-davet button{flex:none; height:34px; padding:0 14px; border:0; border-radius:10px; cursor:pointer;
  background:#0F2421; color:#fff; font:700 13px 'Figtree',sans-serif;}
.ap-dl-liste-bas{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:16px 2px 8px;}
.ap-dl-liste-bas b{font:700 14.5px 'Figtree',sans-serif; letter-spacing:-.01em; color:var(--ink);}
.ap-dl-liste-bas button{border:0; background:none; padding:4px 0; cursor:pointer; font:700 12.5px 'Figtree',sans-serif; color:var(--primary-deep);}
.ap-dl-liste{display:flex; flex-direction:column; gap:8px;}
.ap-dl-satir{display:flex; align-items:center; gap:11px; padding:10px 10px 10px 10px; border-radius:14px; background:var(--surface-2);
  border:1px solid var(--line-soft);}
.ap-dl-av{position:relative; width:42px; height:42px; flex:none;}
.ap-dl-av > span{display:block; width:100%; height:100%; border-radius:50%; overflow:hidden; background:var(--primary-wash);}
.ap-dl-av svg, .ap-dl-av img{width:100%; height:100%; object-fit:cover; display:block;}
.ap-dl-av i{position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border-radius:50%; border:2px solid var(--surface-2);
  background:#A3ADBB;}
.ap-dl-av i.aktif{background:var(--good);}
.ap-dl-orta{flex:1; min-width:0;}
.ap-dl-ad{display:flex; align-items:center; gap:6px; min-width:0;}
.ap-dl-ad b{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:800; color:var(--ink);}
.ap-dl-cip{flex:none; display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:999px; white-space:nowrap;
  font-size:10.5px; font-weight:800; background:var(--amber-wash); color:#9A5B07;}
.ap-dl-cip .ikon{width:11px; height:11px;}
.ap-dl-durum{display:block; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--ink-soft);}
.ap-dl-meydan{flex:none; display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 13px; border:0; border-radius:11px;
  cursor:pointer; background:#0F2421; color:#fff; font:700 13px 'Figtree',sans-serif; white-space:nowrap;
  -webkit-tap-highlight-color:transparent; transition:transform var(--motion-instant) ease, background var(--motion-fast) ease;}

.ap-dl-meydan.onay{background:var(--primary-deep); animation:apDlOnay .9s ease-in-out infinite;}
.ap-dl-meydan:disabled{opacity:.6; cursor:default; animation:none;}
@keyframes apDlOnay{50%{box-shadow:0 0 0 5px rgba(var(--primary-rgb),.22)}}
.ap-dl-satir.ekle{justify-content:center; padding:12px; border-style:dashed; background:none; cursor:pointer; width:100%;
  font:700 13px 'Figtree',sans-serif; color:var(--primary-deep);}
.ap-dl-hata{margin-top:8px; font-size:12.5px; color:var(--bad-ink);}
.ap-dl-hata:empty{display:none;}
.ap-dl-bos{display:flex; align-items:center; gap:10px; margin-top:12px;}
.ap-dl-bos span{flex:1; min-width:0; font-size:12.5px; line-height:1.4; color:var(--ink-soft);}
.ap-dl-iskelet{display:grid; gap:var(--s-2); margin-top:12px;}
.ap-dl-iskelet .iskelet{height:40px;}
@media (max-width:360px){ .ap-dl-meydan{padding:0 10px;} .ap-dl-meydan .yazi-uzun{display:none;} }
@media (prefers-reduced-motion:reduce){ .ap-dl-meydan.onay{animation:none;} }

/* Deneme listesi: alttan açılan panel. İçerik masaüstündeki şeridin
   aynısı (viewDenemeSerit); yalnızca başlığı paneldeki başlık. */
.modal-bg.ap-sheet-bg{align-items:flex-end; padding:0;}
.ap-sheet{width:100%; max-width:560px; max-height:88dvh; overflow:auto; overscroll-behavior:contain;
  padding:8px 14px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius:16px 16px 0 0;
  background:var(--bg); box-shadow:var(--golge-3);
  animation:apSheetGir .42s var(--ease-apple) both;}
.modal-bg.modal-cikis > .ap-sheet{animation:apSheetCik .17s var(--ease-in) both;}
@keyframes apSheetGir{from{transform:translateY(100%)}}
@keyframes apSheetCik{to{transform:translateY(40%); opacity:0}}
.ap-sheet-tut{width:38px; height:5px; margin:2px auto 10px; border-radius:999px; background:#CBD3DE;}
.ap-sheet-bas{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 2px 12px;}
.ap-sheet-bas b{display:block; font-weight:800; font-size:18px; letter-spacing:-.015em; color:var(--ink);}
.ap-sheet-bas small{display:block; font:600 12px 'Figtree',sans-serif; color:var(--ink-faint);}
.ap-sheet-kapat{width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);}
.ap-sheet .dnm-serit{margin:0; cursor:default;}
.ap-sheet .dnm-serit:hover{transform:none;}
.ap-sheet .dnm-serit-bas{display:none;}
.ap-sheet .dnm-serit-ic{grid-template-rows:1fr;}
.ap-sheet .dnm-kunye{padding-top:16px;}
@media (max-width:360px){
  .ap-hero{padding:var(--s-3);}
  .ap-adim button{width:32px;}
  .ap-adim-deger{font-size:11px;}
}
/* Karıştırılan kavramlar: yatay kaydırılan düz kartlar; dokununca kart çevriliyor. */
.kv{display:flex; flex-direction:column; gap:var(--s-2);}
.kv-serit{display:flex; gap:var(--s-3); overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  padding:4px; margin:-4px; scrollbar-width:thin;}
.kv-kart{flex:0 0 min(84%, 300px); scroll-snap-align:start; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);}
.kv-cevir{display:block; width:100%; padding:0; border:0; background:none; font:inherit; color:inherit; text-align:left;
  cursor:pointer; perspective:900px; border-radius:var(--r-lg);}
.kv-ic{display:grid; transform-style:preserve-3d; transition:transform .5s var(--ease-apple);}
.kv-kart.cevrik .kv-ic{transform:rotateY(180deg);}
.kv-yuz{grid-area:1 / 1; display:flex; flex-direction:column; gap:var(--s-1); padding:var(--s-4);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;}
.kv-arka{transform:rotateY(180deg); justify-content:center; gap:var(--s-2);}
.kv-kavram{font:800 22px/1.15 'Figtree',sans-serif; letter-spacing:-.02em; color:var(--ink); overflow-wrap:anywhere;}
.kv-ayrac{font-size:12.5px; font-weight:700; color:var(--ink-soft);}
.kv-soru{margin-top:var(--s-2); font-size:15px; font-weight:700; color:var(--primary-deep);}
.kv-cevap{font-size:14px; line-height:1.5; color:var(--ink);}
.kv-ipucu{display:inline-flex; align-items:center; gap:6px; margin-top:var(--s-2); font-size:12.5px; font-weight:600; color:var(--ink-soft);}
.kv-coz{display:flex; align-items:center; gap:6px; margin-top:auto; min-height:44px; padding:0 var(--s-4);
  border:0; border-top:1px solid var(--line); border-radius:0 0 var(--r-lg) var(--r-lg); background:none;
  color:var(--primary-deep); font:700 13.5px 'Figtree',sans-serif; text-align:left; cursor:pointer;}
.kv-cevir:focus-visible, .kv-coz:focus-visible{outline-offset:-3px;}
@media (hover:hover){ .kv-coz:hover{background:var(--primary-wash);} }
@media (prefers-reduced-motion:reduce){ .kv-ic{transition:none;} }
.ap-rehber{display:flex; flex-direction:column; gap:var(--s-2);}
/* Dusky önerisi DOM'da hedef kartının hemen ardında (masaüstünde onun
   yanına otursun diye); tek sütunda en sona iniyor. */
.ap > .ap-oneri{order:1;}
.ap > .kv, .ap > .ap-rehber{order:2;}
@media (min-width:720px){
  .ap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px 18px;}
  .ap > *{grid-column:1 / -1;}
  .ap > .ap-oneri{order:0;}

  .ap > .ap-hero{grid-column:1; display:flex; flex-direction:column;}
  .ap > .ap-izgara{grid-column:2;}
  .ap > .ap-duello{order:2;}
  .ap > .kv, .ap > .ap-rehber{order:3;}
  .ap-rehber .dus-rehber-kartlar{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  /* Geniş ekranda arkadaşlar iki sütun. */
  .ap-duello{padding:18px 20px;}
  .ap-dl-sekme{max-width:360px;}
  .ap-dl-brans{max-width:360px;}
  .ap-dl-liste{display:grid; grid-template-columns:1fr 1fr;}
  .ap-merhaba{font-size:26px;}
  .ap-alt{font-size:14.5px;}
  .ap-hero{padding:var(--s-4);}
  
  .ap-ayarlar{margin-top:auto;}
  .ap-kart{min-height:0;}
  /* Geniş ekranda deneme paneli alttan değil ortadan açılır. */
  .modal-bg.ap-sheet-bg{align-items:center; padding:20px;}
  .ap-sheet{max-width:520px; border-radius:16px; padding-bottom:18px; animation:apSheetOrta .34s var(--ease-apple) both;}
  .ap-sheet-tut{display:none;}
  .modal-bg.modal-cikis > .ap-sheet{animation:modalCik 170ms var(--ease-in) both;}
}
@keyframes apSheetOrta{from{opacity:0; transform:translateY(14px) scale(.98)}}

/* ══ Profil (pf) ══════════════════════════════════════════════════════
   Ana sayfa + alt sayfalar. Kartlar panodaki aileyle aynı (.ap-kutu). */

.pf-modul-ikon .tab-ikon{width:21px; height:21px; display:block;}

.pf-av{position:relative; width:64px; height:64px; flex:none; padding:0; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; background:var(--surface-2); color:var(--ink-faint);
  box-shadow:0 0 0 2px var(--surface), 0 0 0 4px rgba(var(--primary-rgb),.6);}
.pf-av .av-varsayilan{width:100%; height:100%; display:block;}
.pf-av-kamera{position:absolute; right:-4px; bottom:-4px; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; background:var(--primary-deep); color:#fff; border:2px solid var(--surface);}

.pf-cubuk{display:block; height:7px; margin:9px 0 7px; border-radius:999px; background:rgba(10,133,118,.14); overflow:hidden;}
.pf-cubuk i{display:block; height:100%; border-radius:999px; background:var(--primary-deep);
  transition:width .9s var(--ease-apple);}

.pf-rozet-amblem{width:56px; height:56px; display:grid; place-items:center;}

.pf-moduller{overflow:hidden; background:var(--surface); border:1px solid rgba(20,30,46,.06); border-radius:16px;
  box-shadow:var(--golge-2);}
.pf-modul{display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; border:0; background:none; cursor:pointer;
  font:inherit; color:inherit; text-align:left; -webkit-tap-highlight-color:transparent; transition:background var(--motion-fast) ease;}
.pf-modul + .pf-modul{border-top:1px solid var(--line-soft);}
.pf-modul:active{background:var(--surface-2);}
@media (hover:hover){ .pf-modul:hover{background:var(--surface-2);} }
.pf-modul-ikon{width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:12px; background:var(--primary-wash); color:var(--primary-deep);}
.pf-modul.m-denemeler .pf-modul-ikon{background:#1B2733; color:#E2B76D;}
.pf-modul.m-hatalar .pf-modul-ikon{background:var(--bad-wash); color:var(--bad-ink);}
.pf-modul.m-flashcardlar .pf-modul-ikon{background:var(--amber-wash); color:#B86E0B;}
.pf-modul.m-ayarlar .pf-modul-ikon{background:var(--surface-2); color:var(--ink-soft);}
.pf-modul-metin{flex:1; min-width:0; display:flex; flex-direction:column;}
.pf-modul-metin b{font-size:14.5px; font-weight:700; color:var(--ink);}
.pf-modul-metin small{margin-top:1px; font-size:12px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pf-modul-ok{flex:none; color:var(--ink-faint);}
.pf-alt{display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:4px;}
.pf-cikis{display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px; border:0; border-radius:12px; cursor:pointer;
  background:none; color:var(--bad-ink); font:700 14px 'Figtree',sans-serif;}
.pf-cikis:hover{background:var(--bad-wash);}
.pf-icerik{min-width:0;}
/* Alt sayfanın kendi başlığı var; içeriğin ilk bölüm başlığı tekrar olur.
   Branş Analizi'nde ilk başlık "Klinik Teşhis": o ayrı bir konu, kalıyor. */
.pf-icerik:not(.t-brans) > .dash-section-title:first-child{display:none;}
.pf-icerik .dnmp-baslik{justify-content:flex-end;}
.pf-icerik .dnmp-baslik > span{display:none;}
.pf-icerik .dnmp-baslik:not(:has(button)){display:none;}

@media (min-width:720px){

  .pf-moduller{display:grid; grid-template-columns:1fr 1fr; gap:10px; overflow:visible; background:none; border:0; box-shadow:none; border-radius:0;}
  .pf-modul, .pf-modul + .pf-modul{border:1px solid rgba(20,30,46,.06); border-radius:16px; background:var(--surface);
    box-shadow:var(--golge-2);}
  .pf-modul:hover{background:var(--surface); transform:translateY(-2px);}
  .pf-modul{transition:transform var(--motion-fast) ease;}
  .pf-alt{flex-direction:row; justify-content:center; gap:16px;}
}
/* "Dusky'ye sor" — açıklamanın altında, sakin bir ikincil düğme. */
.dusky-sor{display:inline-flex; align-items:center; gap:8px; margin-top:12px; min-height:38px; padding:6px 14px 6px 7px;
  border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--primary-deep);
  font:600 13px 'Figtree',sans-serif; cursor:pointer;
  transition:border-color var(--motion-fast,180ms) ease, background var(--motion-fast,180ms) ease, transform var(--motion-instant,140ms) ease;}
.dusky-sor:hover{border-color:var(--primary); background:var(--primary-wash);}

.dusky-sor-yuz{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--primary-wash);}

.center{text-align:center; padding:80px 20px; color:var(--ink-faint);}
.spin{width:38px; height:38px; border:3px solid var(--line); border-top-color:var(--primary); border-radius:50%; animation:rot .8s linear infinite; margin:0 auto 16px;}
@keyframes rot{to{transform:rotate(360deg)}}
.foot{max-width:760px; margin:0 auto; padding:0 22px 40px; text-align:center; font-size:12px; color:var(--ink-faint); line-height:1.6;}
/* Gövde dikey esnek kutu: içerik alanı boşluğu dolduruyor, alt bilgi
   ekranın dibine iniyor. Eskiden kısa sayfalarda (Kaç soru?, Mod,
   Arkadaşlar) "DUSÇöz bağımsız bir…" metni ekranın ortasında yüzüyordu.
   width:100% şart — esnek kutuda auto kenar boşluğu öğeyi içeriği kadar
   daraltır. */
body{display:flex; flex-direction:column;}
.wrap{flex:1 0 auto; width:100%;}
.foot{width:100%;}
/* İlk çizimden önce ("Yükleniyor…" yer tutucusu) alt bilgi gizli: yer tutucu kısa olduğu için alt bilgi
   ekranın içinde duruyor, ana sayfa çizilince aşağı fırlıyordu (masaüstünde CLS 0,235'in asıl kaynağı).
   Sonradan beliren öğe kayma sayılmıyor; :has desteklemeyen tarayıcıda eski hâli kalır. */
body:has(.ilk-yukleme) .foot{display:none;}
/* Telefonda kurulum adımlarının sabit "Çöz →" çubuğu alt bilginin son
   satırlarını örtüyordu; çubuğun yüksekliği kadar pay (--alt-cubuk). */
.foot{padding-bottom:calc(40px + var(--alt-cubuk, 0px));}
.foot b{color:var(--ink-soft);}
/* Alt bilgi linkleri 15px yüksekti: dokunma alanı 44px. */
.foot a{display:inline-flex; align-items:center; min-height:44px; padding:0 6px;}
.foot-ig{gap:6px; color:var(--ink-soft); font-weight:600; text-decoration:none;}
.foot-ig:hover{color:var(--primary-deep);}

.modal-bg{position:fixed;inset:0;background:rgba(20,30,46,.55);z-index:100;overscroll-behavior:contain;display:flex;align-items:flex-start;justify-content:center;padding:20px;animation:fadeUp .3s ease both;
  overflow-y:auto;-webkit-overflow-scrolling:touch;}
/* Ortalama margin:auto ile: pencere ekrandan uzunsa üstü kesilmez, perde kayar. */
.modal-bg > *{margin:auto;}
/* Pencere açıkken arkadaki sayfa kaymasın (sınıfı açılış betiği koyuyor). */
html.modal-acik, html.modal-acik body{overflow:hidden !important; overscroll-behavior:none;}
/* Kayıt penceresi (Google / geçiş anahtarı) telefonda tam ekran bir sayfa gibi. */
@media (max-width:560px){
  .modal-bg.gk-bg{padding:0; background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none;}
  .modal-bg.gk-bg > .modal{max-width:none; min-height:100%; border-radius:0; box-shadow:none;
    display:flex; flex-direction:column; justify-content:center;
    padding:max(28px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom));}
}
.modal{background:var(--surface);border-radius:16px;padding:34px 30px;max-width:460px;width:100%;box-shadow:var(--golge-3);}
.modal-ico{font-size:36px;margin-bottom:14px;text-align:center;}
.modal-ico .ikon{color:var(--amber);}
/* Çizgi ikon: satır içinde yazıyla aynı hizada durur. */
.ikon{display:inline-block; vertical-align:-.18em; flex-shrink:0;}
.modal-title{font-family:'Figtree',sans-serif;font-weight:700;font-size:20px;margin-bottom:12px;text-align:center;letter-spacing:-.01em;}
.modal-body{font-size:14.5px;line-height:1.7;color:var(--ink-soft);margin-bottom:22px;text-align:center;}
.modal-body b{color:var(--ink);font-weight:600;}
.modal-onay{width:100%;padding:14px;font-family:'Figtree',sans-serif;font-size:15.5px;font-weight:700;color:#fff;background:var(--primary-deep);border:none;border-radius:var(--r);cursor:pointer;}
@media (hover:hover){ .modal-onay:hover:not(:disabled){background:var(--primary-darker);} }
.modal-onay:disabled{background:var(--line);color:var(--ink-soft);box-shadow:none;cursor:not-allowed;}

#splash{position:fixed;inset:0;z-index:9999;display:flex;overflow:hidden;background:#fff;}
.sp-side{position:relative;}
.sp-side-brand{
  flex:1 1 56%; min-width:0; color:#fff; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(28px,5vw,64px);
  background:var(--primary-deep);
}
.sp-side-auth{flex:1 1 44%; min-width:300px; max-width:640px; display:flex; align-items:center; justify-content:center; padding:clamp(24px,5vw,60px); background:#fff;}
.sp-in{position:relative;z-index:1;width:100%;max-width:380px;}

.sp-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .4s ease;}
#splash:not(.is-ready) .sp-brand{transform:translateY(28px);}
.sp-word{display:flex;font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(44px,6.4vw,80px);letter-spacing:-.045em;color:#fff;}
.sp-word span{display:inline-block;opacity:0;transform:translateY(14px);animation:spLetter .5s cubic-bezier(.2,.8,.2,1) forwards;}
.sp-word span.accent{color:#6EEBD2;}
.sp-underline{width:0;height:5px;border-radius:999px;background:#6EEBD2;animation:spLine .6s cubic-bezier(.4,0,.2,1) .78s forwards;}
.sp-tag{font-family:'Figtree',sans-serif;font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#fff;opacity:0;animation:spText .5s ease 1.05s forwards;}
.sp-stats{display:flex;gap:clamp(20px,4vw,40px);flex-shrink:0;opacity:0;animation:spText .5s ease 1.2s forwards;}
/* Masaüstü: logo, büyük cümle ve sayılar ortada, aralarında 48px; telefonda cümle yok. */
.sp-cumle{display:none;}
@media (min-width:861px){
  .sp-side-brand{justify-content:center; gap:var(--s-6);}
  .sp-cumle{display:block; margin:0; font:800 clamp(40px,4.4vw,64px)/1.02 'Figtree',sans-serif; letter-spacing:-.04em; color:#fff;
    text-align:left; text-wrap:balance; opacity:0; animation:spText .5s ease 1.1s forwards;}
  .sp-cumle span{display:block;}
  .sp-cumle .vurgu{color:#6EEBD2;}
}
.sp-stat{display:flex;flex-direction:column;}
.sp-stat b{font-family:'Figtree',sans-serif;font-weight:800;font-size:clamp(19px,2.3vw,27px);color:#fff;}
.sp-stat span{font-size:12px;color:#fff;margin-top:2px;}
/* Masaüstü ilk ekranda özellik özeti (ayrıntısı aşağıdaki vitrinde); telefonda gizli, orada vitrin düğmelerin altında. */
.sp-ozellik{display:none;}
@media (min-width:861px){
  .sp-ozellik{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px;list-style:none;margin:calc(var(--s-3) * -1) 0 0;padding:0;max-width:520px;opacity:0;animation:spText .5s ease 1.3s forwards;}
  .sp-ozellik li{display:flex;flex-direction:column;gap:2px;padding-left:12px;border-left:2px solid #6EEBD2;color:#fff;}
  .sp-ozellik b{font-size:14px;font-weight:700;line-height:1.3;}
  .sp-ozellik span{font-size:12.5px;font-weight:500;line-height:1.35;}
}

.sp-auth{width:100%;opacity:0;transform:translateX(72px);pointer-events:none;transition:opacity .5s ease .12s,transform .62s cubic-bezier(.32,.72,0,1) .12s;}
.sp-kicker{font-family:'Figtree',sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--primary-deep);margin-bottom:8px;}
.sp-title{font-family:'Figtree',sans-serif;font-size:clamp(25px,3vw,32px);line-height:1.15;letter-spacing:-.035em;margin-bottom:10px;text-wrap:balance;}
.sp-copy{font-size:14px;line-height:1.55;color:var(--ink-soft);margin-bottom:22px;}
.sp-actions{display:flex;gap:10px;}
.sp-action{flex:1;border-radius:var(--r-pill);padding:15px 16px;font:700 14px 'Figtree',sans-serif;cursor:pointer;transition:background-color .15s ease,border-color .15s ease;}
.sp-action.primary{border:1px solid var(--primary-deep);background:var(--primary-deep);color:#fff;}
.sp-action.secondary{border:1px solid var(--line);background:#fff;color:var(--ink);}
@media (hover:hover){
  .sp-action.primary:hover:not(:disabled){background:var(--primary-darker);border-color:var(--primary-darker);}
  .sp-action.secondary:hover{border-color:var(--primary);}
}
.sp-action:disabled{opacity:.55;cursor:not-allowed;transform:none;}
.sp-mini-divider{height:1px;background:var(--line);margin:22px 0 14px;}
.sp-mini-stats{font-size:12.5px;color:var(--ink-faint);text-align:center;}
/* Örnek soru: ürün ilk ekranda görünsün. Metin sabit, sunucuya gitmez
   (soru bankasındaki 241 numaralı sorudan, 3 şıka indirildi). */
.sp-ornek{margin:0 0 var(--s-3);padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);}
.sp-ornek-ust{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2);margin-bottom:var(--s-2);font-size:12.5px;font-weight:700;color:var(--ink-soft);}
.sp-ornek-ust span{font-weight:500;}
.sp-ornek.cevaplandi .sp-ornek-ust span{visibility:hidden;}
.sp-ornek-soru{font-family:'Figtree',sans-serif;font-weight:700;font-size:15.5px;line-height:1.35;letter-spacing:-.01em;color:var(--ink);margin-bottom:var(--s-3);}
.sp-ornek-siklar{display:flex;flex-direction:column;gap:var(--s-2);}
.sp-ornek-sik{display:flex;align-items:center;gap:var(--s-2);width:100%;min-height:44px;padding:var(--s-2) var(--s-3) var(--s-2) var(--s-2);border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-align:left;font-size:14px;font-weight:600;line-height:1.3;color:var(--ink);cursor:pointer;transition:border-color .15s ease,background-color .15s ease;}
.sp-ornek-sik i{flex:none;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r-pill);font-style:normal;font-size:12.5px;font-weight:700;color:var(--ink-soft);}
@media (hover:hover){ .sp-ornek:not(.cevaplandi) .sp-ornek-sik:hover{border-color:var(--primary);} }
.sp-ornek.cevaplandi .sp-ornek-sik{cursor:default;}
.sp-ornek-sik.dogru{border-color:var(--good-ink);background:var(--good-wash);}
.sp-ornek-sik.yanlis{border-color:var(--bad-ink);background:var(--bad-wash);}
.sp-ornek-sik.dogru i{background:var(--good-ink);border-color:var(--good-ink);color:#fff;}
.sp-ornek-sik.yanlis i{background:var(--bad-ink);border-color:var(--bad-ink);color:#fff;}
.sp-ornek-not{margin-top:var(--s-3);font-size:13.5px;line-height:1.5;color:var(--ink-soft);}
.sp-ornek-not b{color:var(--ink);}
.sp-ornek-not.dogru b{color:var(--good-ink);}
/* Açılışın altındaki yasal linkler */
.sp-alt-linkler{display:flex;justify-content:center;flex-wrap:wrap;margin-top:var(--s-2);opacity:0;transition:opacity .5s ease .2s;}
#splash.is-ready .sp-alt-linkler{opacity:1;}
#splash.is-returning .sp-alt-linkler{display:none;}
.sp-alt-linkler span{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-2);font-size:12.5px;font-weight:700;color:var(--ink-faint);}
.sp-alt-linkler + .sp-alt-linkler{margin-top:0;}
.sp-alt-linkler a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-2);font-size:12.5px;font-weight:600;color:var(--ink-soft);text-decoration:none;}
@media (hover:hover){ .sp-alt-linkler a:hover{color:var(--ink);text-decoration:underline;} }
.intro-submit{width:100%;margin-top:3px;}
.sp-back{margin:0 0 18px;padding:8px 4px;border:0;background:none;color:var(--ink-faint);font:600 12px 'Figtree',sans-serif;cursor:pointer;}
.intro-field{margin:0 0 12px;}
.intro-field label{display:block;margin-bottom:5px;color:var(--ink-soft);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.intro-field input{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.88);color:var(--ink);font:16px 'Figtree',sans-serif;outline:none;transition:border-color .15s ease;}
.intro-field input:focus{border-color:var(--primary);}
.intro-check{display:flex;align-items:flex-start;gap:8px;margin:4px 0 14px;color:var(--ink-soft);font-size:11px;line-height:1.45;cursor:pointer;}
.intro-check input{margin-top:2px;accent-color:var(--primary-deep);}
.intro-check a{color:var(--primary-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px;}

/* Landing funnel: primary = solve, secondary = Giriş, tertiary = Kayıt */
.sp-actions-funnel{flex-direction:column;align-items:stretch;}
.sp-actions-funnel .sp-action{flex:0 0 auto;width:100%;}
.sp-tertiary{display:block;margin:12px auto 0;padding:8px 12px;border:0;background:none;color:var(--ink-soft);font:600 13.5px 'Figtree',sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.sp-tertiary:hover{color:var(--primary-deep);}
/* İlk ziyarette ana buton ayar sormadan test açıyor; branş seçmek isteyen buradan gider. */
.sp-ayar-link{display:none;align-self:center;min-height:44px;margin-top:calc(-1 * var(--s-1));padding:0 var(--s-3);border:0;background:none;color:var(--ink-soft);font:600 13.5px 'Figtree',sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
#splash.ilk-ziyaret .sp-ayar-link{display:block;}
/* Telefonda ilk ziyarette üç eylem yeter (ana düğme, Giriş yap, Kayıt ol); ayarlar ana sayfadan açılıyor. */
@media (max-width:560px){ #splash.ilk-ziyaret .sp-ayar-link{display:none;} }
#splash.is-ready .sp-auth{opacity:1;transform:none;pointer-events:auto;}
.sp-return{display:none;text-align:center;animation:returnEnter .55s cubic-bezier(.2,.8,.2,1) both;}
.sp-return-mark{width:48px;height:48px;margin:0 auto 16px;display:grid;place-items:center;border-radius:16px;background:var(--primary-wash);color:var(--primary-deep);font:800 24px 'Figtree',sans-serif;box-shadow:var(--golge-2);}
.sp-return h2{font:800 clamp(25px,4vw,34px)/1.2 'Figtree',sans-serif;letter-spacing:-.04em;}
.sp-return p{margin-top:7px;color:var(--ink-soft);font-size:14px;}
#splash.is-returning .sp-auth{display:none;}
#splash.is-returning .sp-return{display:block;}
#splash.is-leaving{animation:splashOut .45s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes spLetter{to{opacity:1;transform:none;}}
@keyframes spLine{to{width:64px;}}
@keyframes spText{to{opacity:1;}}
@keyframes splashOut{to{opacity:0;visibility:hidden;}}
@keyframes returnEnter{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}

@media(max-width:560px){
  /* clip, hidden DEĞİL: overflow-x:hidden body'yi kendi kaydırma kutusuna
     çeviriyor ve içindeki sticky öğeler (üst çubuk, kurulum başlığı)
     telefonda yapışmayı bırakıyordu. clip taşmayı aynı şekilde kesiyor
     ama kaydırma kutusu oluşturmuyor. */
  html,body{overflow-x:clip;max-width:100vw;}
  #splash{overflow-x:hidden;max-width:100vw;}
  .sp-side-brand{padding:18px 16px 12px;}
  .sp-side-auth{padding:14px 16px calc(28px + env(safe-area-inset-bottom,0px));}
  .sp-copy{margin-bottom:14px;}
  .sp-actions-funnel{gap:10px;}
  .sp-actions-funnel .sp-action{width:100%;}
  .sp-tertiary{margin-top:10px;}
  /* Setup funnel sticky bar */
  .su-sticky{padding-left:16px;padding-right:16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));}
  .su-sticky .cta{width:100%;}
  .su-body,.su-chips,.konu-columns{max-width:100%;overflow-x:hidden;}
}

/* Açılış ("su harfin içinde yükselir"), her ekranda: ayrı #acilis katmanı, index.html'deki betik oynatır.
   Zemin (.ac-zemin) beyaz ve sabit, kenarlardan 2px taşıyor (alt-piksel dikişi olmaz); çıkışta yalnızca zemin
   söner, yazı sayfadaki logonun yerine iner. Soluk harfler, arka dalga, ön dalga ve yüzey çizgisi aynı ızgara
   hücresinde üst üste; su yalnızca harflerin içini dolduruyor (clip-path, yalnızca boyama). Yerleşim değişmez
   (CLS 0). Harf aralığı (kerning) kapalı: soluk kat harf harf bölünüyor, dolu katlar bütün; ikisi de aynı yere
   otursun. Boy telefonda genişlikten, yatay telefonda yükseklikten, masaüstünde 200px tavandan geliyor. JS yoksa
   <noscript> gizler; betik takılırsa CSS 5,5 sn sonra gizler. Katman açılış boyunca dokunuşu tutar (dokunmak
   açılışı atlatır), çıkışta bırakır. */
#acilis{position:fixed;inset:-2px;z-index:10000;height:calc(100vh + 4px);height:calc(100dvh + 4px);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  animation:acilisGuvenlik 0s linear 5.5s forwards;}
@keyframes acilisGuvenlik{to{visibility:hidden;opacity:0;}}
.ac-zemin{position:absolute;inset:0;background:#fff;}
.ac-sahne{--boy:min(22vw,34vh,200px);position:relative;}
.ac-kelime{position:relative;display:grid;font:800 var(--boy)/1 'Sora',sans-serif;letter-spacing:-.045em;font-kerning:none;
  padding:.14em .04em .2em;white-space:nowrap;user-select:none;-webkit-user-select:none;transform-origin:0 0;}
.ac-kelime > span{grid-area:1/1;position:relative;}
/* Sıra sabit: kırpma kalkınca (su doldu) dolu kat, animasyonlu soluk harflerin altına düşmesin. */
.ac-sonuk{z-index:0;}
.ac-arka{z-index:1;}
.ac-dolu{z-index:2;}
.ac-yuzey{z-index:3;}
.ac-sonuk > span,.ac-kelime .dus,.ac-kelime .coz{display:inline-block;}
.ac-sonuk{color:#DFE4EB;}
.ac-sonuk > span{opacity:0;}
.ac-arka,.ac-dolu,.ac-yuzey{clip-path:inset(100% 0 0 0);}
/* Renkler logoyla aynı (DUS --ink, Çöz --primary-deep): yazı logonun üstüne birebir otursun. Arka dalga ve yüzey
   çizgisi aynı rengin açık tonları. */
.ac-arka .dus{color:#7A8395;}
.ac-arka .coz{color:#7FCDC1;}
.ac-dolu .dus{color:#141E2E;}
.ac-dolu .coz{color:#0A8576;}
.ac-yuzey .dus{color:#46526A;}
.ac-yuzey .coz{color:#3DB5A3;}
.ac-alt{position:absolute;left:50%;top:calc(100% + .03 * var(--boy));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;
  gap:calc(.1 * var(--boy) + 4px);white-space:nowrap;}
.ac-cizgi{width:calc(.36 * var(--boy) + 24px);height:max(4px,calc(.03 * var(--boy)));border-radius:999px;background:#0C9A89;transform:scaleX(0);}
.ac-yazi{font:700 max(11px,calc(.075 * var(--boy) + 2px))/1.2 'Figtree',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#5B6577;opacity:0;}
.ac-yazi.selam{font:700 max(16px,calc(.12 * var(--boy) + 2px))/1.2 'Figtree',sans-serif;letter-spacing:-.02em;text-transform:none;color:#141E2E;}
/* İniş sürerken asıl logo gizli (üstüne inen yazıyla çift görünmesin). Betik takılırsa 6 sn sonra yine görünür. */
html.ac-iniyor #sp-word,html.ac-iniyor #topbar .brand .name{visibility:hidden;animation:acLogoGoster 0s linear 6s forwards;}
@keyframes acLogoGoster{to{visibility:visible;}}
@media(max-width:860px){
  #splash{flex-direction:column;overflow-y:auto;}
  /* overflow görünür: açılışta kelime ekranın ortasından transform ile yerine kayıyor. */
  .sp-side-brand{flex:0 0 auto;min-height:0;padding:26px 22px 24px;overflow:visible;position:relative;z-index:4;}
  .sp-side-auth{flex:1 1 auto;min-width:0;max-width:none;padding:30px 22px 40px;align-items:flex-start;transition:opacity .5s ease;}
  .sp-stats{display:none;}
  .sp-brand{align-items:center;text-align:center;width:100%;transition:transform .7s cubic-bezier(.4,0,.2,1) .05s;}
  #splash:not(.is-ready) .sp-brand{transform:translateY(14px);}
  .sp-word{font-size:44px;}
  .sp-in{max-width:420px;}
}
@media(max-width:380px){.sp-word{font-size:36px;}}
/* Telefonda "Ücretsiz dene" ilk ekranda: düğmeler başlığın hemen altında, Günün sorusu kartı onların altında.
   Safari'nin gösterdiği alan iPhone'da ~550-740 px; düğme eskiden 730-800 px'teydi, kaydırmadan görünmüyordu.
   Yalnızca seçim görünümünde (düğme grubu varken): giriş/kayıt formu aynı kutuya yazılıyor, ona dokunulmuyor.
   :has desteklemeyen eski tarayıcıda eski sıra kalır. testler/gorsel-kontrol.mjs "ana düğme ilk ekranda" denetler. */
@media(max-width:860px){
  .sp-auth:has(> .sp-actions-funnel){display:flex;flex-direction:column;}
  .sp-auth:has(> .sp-actions-funnel) > .sp-yasal,.sp-auth:has(> .sp-actions-funnel) > .sp-ornek{order:1;}
  .sp-auth:has(> .sp-actions-funnel) > .sp-yasal{margin:14px 0 12px;}
  .sp-auth:has(> .sp-actions-funnel) > .sp-vitrin-git,.sp-auth:has(> .sp-actions-funnel) > .dus-rehber-dar,.sp-auth:has(> .sp-actions-funnel) > .sp-vitrin-dar,
  .sp-auth:has(> .sp-actions-funnel) > .sp-mini-divider,.sp-auth:has(> .sp-actions-funnel) > .sp-mini-stats{order:2;}
}
@media (prefers-reduced-motion:reduce){#acilis{display:none !important;}}
@media (prefers-reduced-motion:reduce){.sp-word span,.sp-underline,.sp-tag,.sp-stats,.sp-cumle,.sp-ozellik{animation:none;opacity:1;transform:none;}.sp-underline{width:64px;}#splash .sp-auth{opacity:1;transform:none;pointer-events:auto;transition:none;}}

.qbildir{margin-left:10px;flex-shrink:0;width:38px;height:38px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--amber);font-size:15px;cursor:pointer;display:grid;place-items:center;transition:all .14s;line-height:1;}
.qbildir:hover{border-color:var(--amber);background:var(--amber-wash);}
.bsebep-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;}
.bsebep{font-family:'Figtree',sans-serif;font-size:13.5px;font-weight:600;padding:12px 10px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer;transition:all .14s;}
.bsebep:hover{border-color:var(--primary);color:var(--primary-darker);}
.bsebep.on{border-color:var(--primary);background:var(--primary-wash);color:var(--primary-darker);}
.bnot{width:100%;min-height:72px;resize:vertical;font-family:'Figtree',sans-serif;font-size:16px;color:var(--ink);background:var(--surface-2);border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;outline:none;margin-bottom:16px;transition:border-color .14px;}
.bnot:focus{border-color:var(--primary);}
.bvazgec{width:100%;margin-top:9px;background:none;border:none;color:var(--ink-faint);font-size:13px;font-weight:600;cursor:pointer;padding:6px;}
.bvazgec:hover{color:var(--ink-soft);}

/* ---------- auth ekranı ---------- */
.auth-wrap{max-width:420px;margin:60px auto;padding:0 20px;}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:36px;}
.screen-enter .auth-card{animation:cardEnter .5s cubic-bezier(.2,.8,.2,1) both;}

.auth-title{font-family:'Figtree',sans-serif;font-weight:800;font-size:22px;text-align:center;margin-bottom:6px;}
.auth-sub{font-size:14px;color:var(--ink-soft);text-align:center;margin-bottom:28px;}
.auth-field{margin-bottom:16px;}
.auth-field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-bottom:6px;letter-spacing:.04em;text-transform:uppercase;}
.auth-field input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:16px;font-family:inherit;color:var(--ink);background:var(--surface-2);outline:none;transition:border-color .14s;}
.auth-field input:focus{border-color:var(--primary);background:var(--surface);}
.auth-cta{width:100%;padding:14px;font-family:'Figtree',sans-serif;font-size:15.5px;font-weight:700;color:#fff;background:var(--primary-deep);border:none;border-radius:var(--r);cursor:pointer;transition:filter .14s;}
@media (hover:hover){ .auth-cta:hover:not(:disabled){background:var(--primary-darker);} }
.auth-cta:disabled{background:var(--line);color:var(--ink-soft);box-shadow:none;cursor:not-allowed;}
.auth-switch{margin-top:16px;text-align:center;font-size:13.5px;color:var(--ink-soft);}
.auth-switch button{background:none;border:none;color:var(--primary-deeper);font-weight:700;cursor:pointer;font-size:13.5px;color:var(--primary-deep);}
.auth-err{margin-top:12px;padding:10px 14px;background:var(--bad-wash);border-radius:12px;font-size:13px;color:var(--bad-ink);text-align:center;}
.auth-skip{margin-top:12px;text-align:center;font-size:13px;color:var(--ink-faint);}
.auth-skip button{background:none;border:none;color:var(--ink-faint);font-size:13px;cursor:pointer;text-decoration:underline;}

/* ---------- topbar kullanıcı ---------- */
.tb-user{display:flex;align-items:center;gap:8px;}
.tb-avatar{width:32px;height:32px;border-radius:50%;background:var(--primary-deep);display:grid;place-items:center;font-family:'Figtree',sans-serif;font-weight:800;font-size:13px;color:#fff;flex-shrink:0;transition:transform .3s ease;}
.tb-avatar:hover{transform:scale(1.06);}
.tb-ad{font-size:13.5px;font-weight:600;color:var(--ink);}
/* Üst bardaki seri ve XP rozetleri */
/* ---- Üst bar hapları: seri + XP ----
   Sitenin diliyle aynı: beyaz yüzey, yumuşak gölge, çizgi ikon, Sora sayı.
   Çerçeve yok — pastel kutu "form elemanı" gibi duruyordu. Alev sürekli
   hafif titriyor (canlı ama dikkat dağıtmayan), XP'nin altında seviye
   çubuğu var, artışta hap zıplayıp "+N" uçuruyor. */
.tb-pil{
  /* Yazı --amber-ink (5.92:1); ikon zemini düz (beyaz ikon 3.63:1). */
  --pil:var(--amber-ink); --pil-bg:#B8790E;
  position:relative; display:inline-flex; align-items:center; gap:7px;
  white-space:nowrap; border-radius:999px; padding:5px 12px 5px 6px;
  background:var(--surface); color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .18s var(--yay-zipla);
  cursor:default;
}
.tb-pil.xp{ --pil:var(--primary-deep); --pil-bg:var(--primary-deep); }
.tb-pil-ikon{
  width:22px; height:22px; border-radius:999px; flex:none; display:grid;
  place-items:center; color:#fff; background:var(--pil-bg);
  box-shadow:var(--golge-1);
}
.tb-pil-ikon svg{display:block;}
.tb-pil-sayi{
  font-family:'Figtree',sans-serif; font-weight:800; font-size:14px;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink);
  line-height:1;
}
.tb-pil-etiket{
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--pil); line-height:1;
}
/* XP: seviye ilerlemesi hapın altında 3px'lik çizgi */
.tb-pil-cubuk{
  position:absolute; left:34px; right:12px; bottom:3px; height:3px;
  border-radius:999px; background:var(--line-soft); overflow:hidden;
}
.tb-pil-cubuk b{
  display:block; height:100%; border-radius:999px; background:var(--pil-bg);
  transition:width .6s cubic-bezier(.2,.8,.2,1);
}
.tb-pil.xp{padding-bottom:8px;}

/* Alev titremesi: aşağıdan tutunmuş, ölçek + hafif eğilme. Göz ucuyla
   fark edilecek kadar; bakınca "yanıyor" hissi veriyor. */
.tb-pil.seri .tb-pil-ikon svg{
  transform-origin:50% 90%;
  animation:tbAlev 1.6s ease-in-out infinite;
}
/* Seri bugün henüz alınmadı: alev sönük, titremez. */
.tb-pil.seri.bekliyor{ --pil:var(--ink-faint); --pil-bg:var(--ink-faint); }
.tb-pil.seri.bekliyor .tb-pil-ikon svg{animation:none;}
@keyframes tbAlev{
  0%,100%{transform:scale(1) rotate(0deg);}
  30%{transform:scale(1.08,1.12) rotate(-3deg);}
  55%{transform:scale(.96,1.04) rotate(2.5deg);}
  80%{transform:scale(1.05,1.08) rotate(-1.5deg);}
}
/* Artış: hap zıplar, ikon patlar, "+N" yukarı uçar */
.tb-pil.kazan{animation:tbZipla .55s var(--yay-zipla);}
.tb-pil.kazan .tb-pil-ikon{animation:tbIkonPatla .6s var(--yay-zipla);}
.tb-pil.kazan::after{
  content:attr(data-artis); position:absolute; left:50%; top:-4px;
  transform:translateX(-50%);
  font-family:'Figtree',sans-serif; font-weight:800; font-size:12px; color:var(--pil);
  pointer-events:none; animation:tbArtisUc 1.3s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes tbZipla{0%{transform:scale(1)} 40%{transform:scale(1.09)} 100%{transform:scale(1)}}
@keyframes tbIkonPatla{
  0%{transform:scale(1); box-shadow:0 0 0 0 color-mix(in srgb, var(--pil) 45%, transparent);}
  100%{transform:scale(1); box-shadow:0 0 0 12px transparent;}
}
@keyframes tbArtisUc{
  0%{opacity:0; transform:translate(-50%,6px);}
  20%{opacity:1;}
  100%{opacity:0; transform:translate(-50%,-22px);}
}
.tb-ayirac{ width:1px; height:26px; background:var(--line); margin:0 2px; }
/* Kutu 44px yüksek, görünen çerçeve ::before ile eskisi gibi; üst çubuk büyümüyor. */
.tb-link{position:relative;isolation:isolate;display:inline-flex;align-items:center;min-height:44px;margin:-6px 0;font-size:12.5px;font-weight:600;padding:0 12px;border-radius:6px;cursor:pointer;border:0;background:transparent;color:var(--ink-soft);transition:color .14s;}
.tb-link::before{content:"";position:absolute;inset:6px 0;z-index:-1;border:1.5px solid var(--line);border-radius:6px;transition:border-color .14s;}
.tb-link.vurgu{color:var(--primary-darker);}
.tb-link.vurgu::before{border-color:var(--primary);}
@media (hover:hover){
  .tb-link:hover{color:var(--primary-deep);}
  .tb-link:hover::before{border-color:var(--primary);}
  .tb-link.danger:hover{color:var(--bad-ink);}
  .tb-link.danger:hover::before{border-color:var(--bad);}
}

/* ---------- profil ---------- */

.ps{background:rgba(255,255,255,.15);border-radius:12px;padding:14px;text-align:center;transition:transform .18s ease;}
.ps:hover{transform:translateY(-2px);}

/* Seri koruması — profil kartında serinin hemen altında */
.sk-satir{display:flex;align-items:center;gap:5px;margin-top:9px;font-size:12px;opacity:.9;}
.sk-kalp{font-size:13px;line-height:1;color:#3B9FD8;display:inline-flex;}
.sk-kalp.bos{opacity:.28;filter:grayscale(1);}
.sk-metin{margin-left:3px;font-weight:600;}
.branş-bar{margin-bottom:12px;}

/* ---- Dashboard profil layout ---- */

/* Aksiyon blokları masaüstünde sol sütunun altına, sidebar'ın devamına oturur;
   panel sağ sütunda tek satır kaplamaya devam eder. */

.dashboard-panel { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 720px) {
  
  /* ŞART: masaüstünde panel "grid-column:2" ile sağ sütuna oturuyor. Tek
     sütuna inerken bu kural sıfırlanmayınca ızgara ÖRTÜK bir 2. sütun
     açıyor ve o sütun 0px kalıyordu — yani 601-720px arası bütün profil
     içeriği (Genel Bakış, Branş, Hata Defteri, Denemelerim) genişliği
     sıfır bir kutuya sıkışıp ekrandan kayboluyordu. */
  .dashboard-panel { grid-column: 1; grid-row: auto; }
  
}

/* ── Profil kartı (beyaz, toplu) ──────────────────────────────────────
   Eskiden renkli gradyan bir kart + ayrı bir XP kutusu vardı; ikisi
   birleştirildi. Beyaz zemin sayfanın geri kalanıyla uyumlu ve
   içindeki renkli sayılar (başarı/doğru) böylece öne çıkıyor. */

/* Seviye rozeti — sağ üst köşe */

/* ── Seviyeler modalı ── */
.seviye-modal { max-width: 400px; padding: 0; text-align: left; overflow: hidden; }
.sm-bas {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 20px 22px 16px; border-bottom: 1px solid var(--line);
}
.sm-baslik { font-family: 'Figtree', sans-serif; font-weight: 800; font-size: 19px; color: var(--ink); }
.sm-altbaslik { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.sm-kapat {
  background: var(--surface-2); border: none; border-radius: 12px; cursor: pointer;
  width: 30px; height: 30px; flex-shrink: 0; color: var(--ink-soft); font-size: 13px;
}
.sm-kapat:hover { background: var(--line); color: var(--ink); }
.sm-kapat, .bd-kapat { display: grid; place-items: center; }

.sm-liste { max-height: min(62vh, 520px); overflow-y: auto; padding: 10px; }
.sm-satir {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 12px; border-radius: 12px; margin-bottom: 4px;
}
.sm-satir.aktif { background: var(--primary-wash); }
.sm-satir.kilitli { opacity: .5; }
.sm-amblem {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
  background: var(--surface-2); display: grid; place-items: center; font-size: 19px;
}
.sm-satir.aktif .sm-amblem { background: var(--surface); box-shadow: 0 0 0 2px var(--primary); }
.sm-satir.gecildi .sm-amblem { background: var(--good-wash); }
.sm-satir.kilitli .sm-amblem { filter: grayscale(1); }
.sm-orta { flex: 1; min-width: 0; }
.sm-ad {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 14px; font-weight: 700; color: var(--ink);
}
.sm-satir.aktif .sm-ad { color: var(--primary-deep); }
.sm-simdi {
  background: var(--primary-deep); color: #fff; border-radius: 6px;
  padding: 1px 6px; font-size: 9px; font-weight: 800; letter-spacing: .05em;
}
.sm-xp { font-family: 'Figtree',sans-serif; font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.sm-track { height: 5px; background: var(--line-soft); border-radius: 999px; overflow: hidden; margin-top: 7px; }
.sm-fill { height: 100%; border-radius: 999px; background:var(--primary-deep); }
.sm-tik { flex-shrink: 0; font-size: 13px; color: var(--good); }
.sm-satir.kilitli .sm-tik { font-size: 11px; }

@media (max-width: 600px) {
  .seviye-modal { max-width: 100%; }
  .sm-bas { padding: 16px 18px 14px; }
  .sm-liste { max-height: 60vh; }
}

/* ---- Profil fotoğrafı / varsayılan silüet ----
   Görsel kendi border-radius'u ile yuvarlanır; kaba overflow:hidden VERİLMEZ,
   çünkü düzenle rozeti / bildirim noktası kasten dışarı taşar.
   width+height %100 ŞART: yoksa <img> kendi doğal boyutunda (256px) açılıp
   kabı taşırır ve sayfanın üstüne yayılır. */
.av-foto { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.av-varsayilan { width: 100%; height: 100%; display: block; border-radius: 50%; }

.av-onizleme {
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
  margin: 0 auto 16px; background: var(--surface-2); color: var(--ink-faint);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
}
.av-durum { font-size: 12.5px; text-align: center; min-height: 18px; margin-bottom: 14px; color: var(--ink-soft); }
.av-durum.hata { color: var(--bad); font-weight: 600; }
.av-durum.iyi  { color: var(--good); font-weight: 600; }

/* Uygunsuz fotoğraf bildirme bağlantısı */
.av-bildir-btn {
  display: block; width: 100%; margin-top: 14px; padding: 6px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 11.5px; color: var(--ink-faint);
  text-decoration: underline; text-underline-offset: 2px;
}
.av-bildir-btn:hover:not(:disabled) { color: var(--bad); }
.av-bildir-btn:disabled { cursor: default; text-decoration: none; }

/* XP ilerlemesi — kartın içinde */

/* XP level bar */

/* Completed State */

/* Active State */

/* Locked State */

/* Rozetler Mimarisi ve Galeri */
.rozetler-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px; padding: 18px;
}
.rozet-card {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 16px; padding: 16px 10px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: all .2s cubic-bezier(.3,.8,.3,1);
}
.rozet-card.unlocked {
  border-color: var(--primary-soft);
  background:var(--primary-wash);
  box-shadow: var(--golge-2);
}
.rozet-card.unlocked:hover { transform: translateY(-2px); }
.rozet-card.locked { opacity: 0.55; }
.rozet-emoji-wrap {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  position: relative; margin-bottom: 8px;
}
.rozet-card.unlocked .rozet-emoji-wrap {
  background: var(--surface); border-color: #F5A623;
  box-shadow: var(--golge-2);
}
.rozet-emoji { font-size: 24px; }
.rozet-lock-icon {
  position: absolute; bottom: -2px; right: -2px; font-size: 9px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 50%; width: 15px; height: 15px;
  display: flex; align-items: center; justify-content: center;
}
.rozet-title { font-family: 'Figtree', sans-serif; font-weight: 700; font-size: 12px; color: var(--ink); margin-bottom: 2px; }
.rozet-category { font-size: 8px; font-weight: 700; text-transform: uppercase; color: var(--ink-faint); letter-spacing: .04em; margin-bottom: 6px; }
.rozet-desc { font-size: 10.5px; color: var(--ink-soft); line-height: 1.35; }

/* Rozet Bildirimi (Toast) */
.rozet-toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--surface); border: 2px solid var(--primary);
  border-radius: 16px; padding: 14px 18px;
  box-shadow: var(--golge-3);
  display: flex; align-items: center; gap: 14px; z-index: 10000;
  animation: slideInRight .35s var(--yay-zipla) both;
}
.rozet-toast-emoji { font-size: 28px; }
.rozet-toast-title { font-family: 'Figtree', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--primary-deep); }
.rozet-toast-desc { font-size: 11px; color: var(--ink-soft); margin-top: 1px; }
.bilgi-toast{border-color:var(--primary) !important; display:flex; align-items:flex-start; gap:10px; line-height:1.45;}
.bilgi-toast .ikon{flex:none; color:var(--primary-deep); margin-top:1px;}
.modal-ico.basari .ikon{color:var(--primary-deep);}
.bhata{margin:10px 0 0; font-size:13px; line-height:1.45; color:var(--bad-ink); text-align:left;}
.durt-toast {
  position: fixed; bottom: 24px; right: 24px; max-width: 300px;
  background: var(--surface); border: 2px solid #F5A623; border-radius: 16px; padding: 13px 16px;
  box-shadow: var(--golge-3); font-size: 13px; color: var(--ink); font-weight: 500;
  z-index: 10000; animation: slideInRight .35s var(--yay-zipla) both;
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(120px) scale(.9); }
  to { opacity: 1; transform: none; }
}
@keyframes slideOutRight {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(120px) scale(.9); }
}

/* Profil nav tabs */
/* Eylem butonları — sekme listesinin üstünde, yan yana */

/* Sekme listesi */

.tab-rozet{
  background:var(--bad); color:#fff; border-radius:999px; flex-shrink:0;
  padding:2px 8px; font-size:10.5px; font-weight:800; line-height:1.3;
}
.tab-rozet.amber{ background:#F5A623; }

/* Hesap silme — gözden uzak, altta */

.hesap-sil-btn {
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--ink-faint); font-size: 12px; text-decoration: underline;
  text-underline-offset: 2px; padding: 6px;
}
.hesap-sil-btn:hover { color: var(--bad); }

/* Masaüstünde mobil bar ve çekmece gizlidir */

/* Mobilde drawer açıkken arkaplan kaymasını engelle */

/* ---- MOBİL VE TABLET: Üst Hızlı Bar + Yandan Açılan Sekme Menüsü (Drawer) ---- */
@media (max-width: 720px) {
  /* Masaüstü dikey sekme kutusunu mobilde gizle */

  /* Mobilde ekranın en üstündeki hızlı erişim barı */

  /* Denemelerim sekmesi altın tonu */

  /* 3 Çizgili Hamburger Butonu */

  /* ---- YANDAN AÇILAN SEKME MENÜSÜ (DRAWER) ---- */

  /* Kap sabit 44px; içindeki ne olursa olsun (img, svg, sınıfsız silüet)
     kabı doldurur. Eskiden sınıfsız SVG 260px'e büyüyüp çekmeceyi
     kaplıyordu. */

  /* Denemelerim altın stili */

}

/* ---- Profil paneli: telefon düzeni ---- */
@media (max-width: 600px) {

  /* Kullanıcı kartı: ortalanmış, daha kompakt */

  /* XP satırı: uzun seviye adı taşmasın */

  /* MOBİL SIRALAMA — en önemli düzeltme.
     Tek sütuna inince sıra şöyleydi: kart → XP → sekmeler → BUTONLAR →
     panel. Panel 800px aşağıda kalıyordu, yani sekmeye basan kullanıcı
     ekranda hiçbir değişiklik göremiyordu. Artık içerik sekmelerin hemen
     altında, aksiyon butonları en sonda. */
  /* align-items:start masaüstü ızgarası için doğru, ama flex sütununda
     çapraz eksende çalışıp blokları içerik genişliğine daraltıyor —
     alt aksiyon butonları 375px ekranda 151px kalıyordu. */
  /* Sıra: SEKMELER → profil kartı → içerik → alt aksiyonlar.
     Sekmeler kenar çubuğunun içinde; order:-1 ile en üste alınıyor ve
     üst bara yapışık kalıyor — içerik kaydırılırken bile sekme
     değiştirilebiliyor. Eski düzende sekmeler en alttaydı: tıklayınca
     yukarıdaki içerik değişiyor, kullanıcı hiçbir şey görmüyordu. */

  .dashboard-panel  { order: 2; }

  /* Eylem butonları dar ekranda alt alta */

  /* Profil kartı mobilde 320px yer kaplıyordu — sıkıştır ki sekmeler
     ve içerik ilk ekrana daha çok girsin. */

  /* Rozet avatarla birlikte küçülmeli — sabit 30px'te fotoğrafın yarısını
     kapatıyordu. */

  .sk-satir { margin-top: 7px; }

  /* Genel bakış istatistik kartları */
  
  .ov-card { padding: 13px; }
  
  .ov-card-val { font-size: 21px; }
  .ov-card-lbl { font-size: 10.5px; }

  .dash-section-title { margin-bottom: 10px; }

  /* Rozet galerisi: dar ekrana sığsın */
  .rozetler-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px; }
}
@media (max-width: 380px) {

  .ov-card-val { font-size: 19px; }
}

/* Dashboard main panel */
.dashboard-panel { }
.screen-enter .dashboard-panel { animation: fadeUp .38s cubic-bezier(.2,.7,.2,1) both; }
.dash-section-title {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.dash-section-title::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

/* Overview stat cards */

.ov-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ov-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
/* İkon: yazının rengini alan çizgi ikon, markanın açık zemininde. */

.ov-card-val { font-family: 'Figtree', sans-serif; font-weight: 800; font-size: 26px; color: var(--ink); }
.ov-card-lbl { font-size: 11.5px; color: var(--ink-faint); font-weight: 600; margin-top: 3px; }

/* Branch analysis */
.brans-grid { display: flex; flex-direction: column; gap: 10px; }
.brans-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  transition: transform .16s ease;
}
.brans-item:hover { transform: translateX(3px); }
/* Uzun branş adları ("Ağız, Diş ve Çene Cerrahisi") dar ekranda skora
   yapışıyordu — aralarında hiç boşluk kalmıyordu. Ada esneme payı,
   skora da sabit genişlik veriliyor. */
.brans-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.brans-name { font-size: 13.5px; font-weight: 600; color: var(--ink); min-width: 0; line-height: 1.3; }
.brans-pct { font-family: 'Figtree',sans-serif; font-size: 12px; font-weight: 700; flex-shrink: 0; white-space: nowrap; }
.brans-track { height: 6px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.brans-fill { height: 100%; border-radius: 999px; transition: width 1s cubic-bezier(.3,.8,.3,1); }

/* Arkadaşlar / liderlik tablosu */
.frnd-ekle-row { display: flex; gap: 8px; margin-bottom: 8px; }
.frnd-ekle-row input {
  flex: 1; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px;
  font-size: 13.5px; font-family: inherit; color: var(--ink); background: var(--surface-2);
  outline: none; transition: border-color .14s;
}
.frnd-ekle-row input:focus { border-color: var(--primary); background: var(--surface); }
.frnd-hata { color: var(--bad); font-size: 12.5px; margin-bottom: 14px; }
.frnd-basari { color: var(--good); font-size: 12.5px; margin-bottom: 14px; font-weight: 600; }
/* Gelen arkadaşlık istekleri: Sıralama & Arkadaşlar sayfasının EN ÜSTÜNDE,
   iki görünümde de (Lig / Arkadaşlarım). Eskiden yalnızca arkadaş listesinin
   dibindeydi ve isteği alan kişi bulamıyordu. */
.frnd-istek-blok{background:var(--surface); border:1.5px solid var(--primary); border-radius:16px;
  padding:4px 14px 6px; margin-bottom:16px; box-shadow:var(--golge-2);}
.frnd-istek-baslik{display:flex; align-items:center; gap:8px; padding:10px 0 6px;
  font-family:'Figtree',sans-serif; font-size:14.5px; font-weight:800; color:var(--ink);}
.frnd-istek-sayi{min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--bad); color:#fff;
  font-family:'Figtree',sans-serif; font-size:11px; font-weight:800; line-height:20px; text-align:center;}
.frnd-istek-row{display:flex; align-items:center; gap:10px; padding:9px 0;}
.frnd-istek-row:not(:last-child){border-bottom:1px solid var(--line-soft);}
.frnd-istek-orta{flex:1; min-width:0; display:flex; flex-direction:column;}
.frnd-istek-ad{font-weight:700; font-size:14px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.frnd-istek-zaman{font-size:11.5px; color:var(--ink-faint);}
.frnd-istek-red{background:none; border:none; color:var(--ink-faint); font-size:12px; font-weight:600; cursor:pointer; padding:6px 2px;}
.frnd-istek-red:hover{color:var(--bad-ink);}

.frnd-ara-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 240px; overflow-y: auto; }
.frnd-ara-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 12px; font-size: 13px; font-weight: 600; color: var(--ink);
}
.frnd-ara-durum { font-size: 12.5px; color: var(--ink-faint); padding: 8px 2px; }

/* ══ Haftalık lig ══════════════════════════════════════════════════ */

/* Üst kart: sezon durumu + basamaklar */
.lig-ust{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:18px 20px; margin-bottom:16px; box-shadow:var(--shadow-sm);
}
.lig-ust-bas{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px;}
.lig-eyebrow{
  font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:5px;
}
.lig-ad{font-family:'Figtree',sans-serif; font-weight:800; font-size:19px; color:var(--ink);}
.lig-kalan{
  background:var(--amber-wash); border:1px solid #F0C77A; color:#8A5A0B;
  border-radius:999px; padding:6px 13px; font-size:12px; font-weight:700; white-space:nowrap;
}

/* Basamaklar — her lig ayrı bir kutu, aktif olan çerçeveli */
.lig-basamaklar{
  display:grid; grid-template-columns:repeat(5,1fr); gap:8px;
  background:var(--surface-2); border-radius:16px; padding:10px;
}
.lig-bsm{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:10px 4px; border-radius:12px; border:2px solid transparent;
  background:transparent; min-width:0;
}
.lig-bsm.aktif{background:var(--surface); border-color:var(--amber); box-shadow:var(--shadow-sm);}
.lig-bsm.gecildi{opacity:.85;}
.lig-bsm.kilitli{opacity:.4; filter:grayscale(1);}
.lig-bsm-emoji{font-size:21px; line-height:1;}
.lig-bsm-ad{
  font-size:11.5px; font-weight:700; color:var(--ink); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.lig-bsm-durum{font-size:9.5px; font-weight:700; color:var(--ink-faint); letter-spacing:.04em;}
.lig-bsm.aktif .lig-bsm-durum{color:#B8790E;}

/* Alt kart: geçiş + sıralama */
.lig-alt{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:16px; box-shadow:var(--shadow-sm);
}
.lig-gecis{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px;}
.lig-gecis-btnler{display:flex; gap:6px; background:var(--surface-2); border-radius:12px; padding:4px;}
.lgb{
  border:none; background:none; cursor:pointer; font-family:inherit;
  font-size:12.5px; font-weight:700; color:var(--ink-soft);
  padding:8px 14px; border-radius:12px; transition:all .16s; white-space:nowrap;
}
.lgb:hover{color:var(--ink);}
.lgb.on{background:var(--ink); color:#fff;}
.lig-sifirlama{font-size:11.5px; color:var(--ink-faint); white-space:nowrap;}

/* Bilgi şeridi */
.lig-not{
  font-size:12.5px; line-height:1.55; color:var(--ink-soft);
  background:var(--surface-2); border-radius:12px; padding:11px 14px; margin-bottom:12px;
}
.lig-not b{color:var(--ink);}
.lig-not.iyi{background:var(--good-wash); color:#1F6B4F;}
.lig-not.iyi b{color:#14543C;}
.lig-not.uyari{background:var(--bad-wash); color:#94322A;}
.lig-not.uyari b{color:#7A241D;}
.lig-not.bekle{background:var(--amber-wash); color:#8A5A0B;}
.lig-not.bekle b{color:#6B4408;}

/* ── Sıralama satırları (hem lig hem arkadaşlar) ── */
.sira-liste{display:flex; flex-direction:column; gap:8px;}
.sira-satir{
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1.5px solid var(--line);
  border-radius:16px; padding:11px 14px; transition:border-color .15s, transform .15s;
}
.sira-satir[onclick]{cursor:pointer;}
.sira-satir[onclick]:hover{border-color:var(--primary-soft); transform:translateX(2px);}
.sira-satir.ben{background:var(--primary-wash); border-color:var(--primary);}
.sira-satir.yukselme{box-shadow:inset 4px 0 0 var(--good);}
.sira-satir.dusme{box-shadow:inset 4px 0 0 var(--bad);}
/* Yükselme / düşme hattı (en az 5 kişide): satırlar arasında etiketli ince çizgi. */
.sira-hat{display:flex; align-items:center; gap:10px; font-size:11px; font-weight:700; margin:2px 4px;}
.sira-hat:before,.sira-hat:after{content:""; flex:1; height:0; border-top:1.5px dashed currentColor; opacity:.55;}
.sira-hat.yukselme{color:var(--good-ink);}
.sira-hat.dusme{color:var(--bad-ink);}
.sira-satir.bos{
  border-style:dashed; background:transparent; opacity:.6;
  border-color:var(--line); box-shadow:none;
}

.sira-no{
  width:26px; flex-shrink:0; text-align:center;
  font-family:'Figtree',sans-serif; font-weight:800; font-size:15px; color:var(--ink-faint);
}
.sira-satir.ben .sira-no{color:var(--primary-deep);}
.sira-av{
  width:40px; height:40px; border-radius:50%; flex-shrink:0; position:relative;
  background:var(--surface-2); color:var(--ink-faint);
  display:grid; place-items:center;
}
.sira-av.bos-av{
  border:1.5px dashed var(--line); background:transparent;
  font-size:15px; font-weight:700;
}
.sira-aktif{
  position:absolute; bottom:0; right:0; width:11px; height:11px;
  background:var(--good); border:2px solid var(--surface); border-radius:50%;
}
.sira-orta{flex:1; min-width:0;}
.sira-ad{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:14px; font-weight:700; color:var(--ink); line-height:1.3;
}
.sira-satir.bos .sira-ad{color:var(--ink-faint); font-weight:600; font-style:italic;}
.sira-sen{
  background:var(--primary-deep); color:#fff; border-radius:6px;
  padding:2px 7px; font-size:9.5px; font-weight:800; letter-spacing:.06em;
}
.sira-seri{font-size:11.5px; font-weight:700; color:#D97706; display:inline-flex; align-items:center; gap:2px;}
.sira-alt{font-size:11.5px; color:var(--ink-faint); margin-top:2px;}
.sira-skor{text-align:right; flex-shrink:0; min-width:52px;}
.sira-puan{font-family:'Figtree',sans-serif; font-weight:800; font-size:17px; color:var(--good-ink);}
.sira-satir.bos .sira-puan{color:var(--ink-faint);}
.sira-durum{font-size:9.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; font-weight:700;}

.sira-durt, .sira-sil, .sira-duello{
  display:inline-grid; place-items:center; padding:0;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-soft);
  border-radius:50%; width:30px; height:30px; cursor:pointer; flex-shrink:0;
  font-size:13px; transition:all .15s;
}
.sira-durt:hover{background:var(--amber-wash); border-color:#F0C77A;}
.sira-durt:disabled{opacity:.5; cursor:default;}
.sira-sil:hover{background:var(--bad-wash); border-color:var(--bad); color:var(--bad-ink);}
.sira-duello:hover{background:var(--primary-wash); border-color:var(--primary-soft);}

/* ── Düello ── */
.dl-blok{margin-bottom:16px;}
.dl-baslik{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;
  font-family:'Figtree',sans-serif; font-weight:800; font-size:15px; color:var(--ink);}
.dl-liste{display:flex; flex-direction:column; gap:8px;}
.dl-satir{display:flex; align-items:center; gap:10px; background:var(--surface); border:1.5px solid var(--line);
  border-radius:14px; padding:10px 12px;}
.dl-satir.gelen{border-color:var(--primary); background:var(--primary-wash);}
.dl-satir.yeni{border-color:var(--amber); background:var(--amber-wash);}
.dl-ikon{width:34px; height:34px; flex-shrink:0; display:grid; place-items:center; border-radius:10px; background:var(--surface-2); color:var(--ink-soft);}
.dl-satir.gelen .dl-ikon{background:var(--surface); color:var(--primary-deep);}
.dl-kart-bas .ikon, .btn .ikon, .lig-not .ikon{vertical-align:-2px;}
.dl-orta{flex:1; min-width:0; font-size:13px; color:var(--ink); line-height:1.4;}
.dl-alt{font-size:11.5px; color:var(--ink-faint); margin-top:2px;}
.dl-skor{font-family:'Figtree',sans-serif; font-weight:800; font-size:14px; white-space:nowrap; color:var(--ink-soft);}
.dl-skor.kazan{color:var(--good-ink);} .dl-skor.kaybet{color:var(--bad-ink);}
.btn.dl-btn{flex:none; width:auto; padding:7px 14px; font-size:12px;}
.dl-link{background:none; border:none; color:var(--primary-deep); font-weight:700; font-size:12px; cursor:pointer; padding:4px 4px; white-space:nowrap;}
.dl-link.sil{color:var(--ink-faint);}
.dl-link:disabled{opacity:.5; cursor:default;}
.dl-kart{border:1.5px solid var(--primary); background:var(--primary-wash); border-radius:18px; padding:16px; margin-bottom:14px;}
.dl-kart-bas{font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--primary-deep); margin-bottom:12px; text-align:center;}
.dl-vs{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; text-align:center;}
.dl-oyuncu-ad{font-size:12.5px; font-weight:700; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dl-oyuncu-net{font-family:'Figtree',sans-serif; font-weight:800; font-size:26px; color:var(--ink); line-height:1.2;}
.dl-oyuncu-net small{font-size:11px; font-weight:700; color:var(--ink-faint); margin-left:3px;}
.dl-oyuncu-alt{font-size:11px; color:var(--ink-faint);}
.dl-vs-orta{font-family:'Figtree',sans-serif; font-weight:800; color:var(--ink-faint); font-size:13px;}
.dl-sonuc{margin-top:12px; text-align:center; font-family:'Figtree',sans-serif; font-weight:800; font-size:16px; color:var(--ink);}
.dl-sonuc.kazan{color:var(--good-ink);} .dl-sonuc.kaybet{color:var(--bad-ink);}
.dl-not{margin-top:10px; text-align:center; font-size:12.5px; line-height:1.5; color:var(--ink-soft);}
.dl-kart-btnler{display:flex; gap:8px; justify-content:center; margin-top:12px; flex-wrap:wrap;}
.dl-secim{width:100%; padding:10px 12px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface);
  color:var(--ink); font-size:14px; margin:0 0 12px;}
.dl-hata{color:var(--bad-ink); font-size:12.5px; min-height:18px; margin-bottom:8px; text-align:center;}
.dl-detay-ust{display:flex; justify-content:flex-end; gap:10px; font-size:10.5px; color:var(--ink-faint); font-weight:800;
  text-transform:uppercase; letter-spacing:.04em; padding-right:2px;}
.dl-detay-ust span{width:36px; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.dl-detay-satir{display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--line-soft); text-align:left;}
.dl-detay-no{font-weight:800; color:var(--ink-faint); width:18px; flex-shrink:0; font-size:12px; padding-top:1px;}
.dl-detay-orta{flex:1; min-width:0; font-size:12.5px; line-height:1.45; color:var(--ink);}
.dl-detay-brans{font-size:10px; color:var(--ink-faint); font-weight:800; text-transform:uppercase; letter-spacing:.04em;}
.dl-detay-dogru{font-size:11.5px; color:var(--good-ink); margin-top:3px;}
.dl-detay-rozetler{display:flex; gap:10px; flex-shrink:0;}
.dl-detay-rozetler > span{width:36px; display:flex; justify-content:center;}
.dl-rozet{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; font-size:12px; font-weight:800;}
.dl-rozet.d{background:var(--good-wash); color:var(--good-ink);}
.dl-rozet.y{background:var(--bad-wash); color:var(--bad-ink);}
.dl-rozet.b{background:var(--surface-2); color:var(--ink-faint);}

/* ---------- Bildirim zili ve paneli ----------
   Arkadaşlık istekleri, düello davetleri/sonuçları, dürtmeler ve yeni
   arkadaşlıklar sağ üstteki zile düşüyor. Sayı: yanıt bekleyenler +
   görülmemiş sonuçlar + görülmemiş bilgi bildirimleri. */
.tb-zil{position:relative; width:36px; height:36px; flex:none; border-radius:50%; border:none; background:transparent;
  color:var(--ink-soft); display:grid; place-items:center; cursor:pointer; transition:background .15s, color .15s;}
.tb-zil:hover, .tb-zil.acik{background:var(--surface-2); color:var(--ink);}
.tb-zil svg{display:block; transform-origin:50% 12%;}
.tb-zil.cal svg{animation:zilCal .9s cubic-bezier(.36,.07,.19,.97);}
@keyframes zilCal{0%,100%{transform:rotate(0)} 12%{transform:rotate(16deg)} 28%{transform:rotate(-14deg)}
  44%{transform:rotate(10deg)} 60%{transform:rotate(-7deg)} 76%{transform:rotate(3deg)}}
.tb-zil-sayi{position:absolute; top:0; right:-3px; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--bad); color:#fff; font-size:10.5px; font-weight:800; line-height:18px; text-align:center;
  box-shadow:0 0 0 2px var(--surface); pointer-events:none;}
.tb-zil-sayi.gir{animation:zilSayi .32s var(--yay-zipla) both;}
@keyframes zilSayi{from{transform:scale(.3); opacity:0} to{transform:none; opacity:1}}

.bd-panel{position:fixed; z-index:60; top:64px; right:16px; width:384px; max-width:calc(100vw - 24px);
  max-height:min(76vh,620px); display:flex; flex-direction:column; background:var(--surface); border-radius:18px;
  box-shadow:var(--golge-3), 0 0 0 1px var(--line); overflow:hidden; transform-origin:top right;
  animation:bdGir .2s cubic-bezier(.2,.8,.2,1) both;}
.bd-panel.cikis{animation:bdCik .14s ease-in both; pointer-events:none;}
@keyframes bdGir{from{opacity:0; transform:translateY(-8px) scale(.97)} to{opacity:1; transform:none}}
@keyframes bdCik{to{opacity:0; transform:translateY(-6px) scale(.98)}}
.bd-bas{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 10px 10px 18px;
  border-bottom:1px solid var(--line-soft);}
.bd-baslik{font-family:'Figtree',sans-serif; font-weight:800; font-size:16px; color:var(--ink);}
.bd-kapat{width:32px; height:32px; border-radius:50%; border:none; background:transparent; color:var(--ink-faint);
  font-size:15px; cursor:pointer;}
.bd-kapat:hover{background:var(--surface-2); color:var(--ink);}
.bd-govde{overflow-y:auto; overscroll-behavior:contain; padding:2px 8px 8px;}
.bd-grup{font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint);
  padding:12px 10px 6px;}
.bd-oge{display:flex; gap:12px; align-items:flex-start; padding:10px; border-radius:14px;}
.bd-oge + .bd-oge{margin-top:2px;}
.bd-oge.yeni{background:var(--primary-wash);}
.bd-av{width:42px; height:42px; flex:none; border-radius:50%; position:relative; background:var(--surface-2); color:var(--ink-faint);}
.bd-av-rozet{position:absolute; right:-5px; bottom:-4px; width:22px; height:22px; border-radius:50%; background:var(--surface); color:var(--primary-deep);
  display:grid; place-items:center; font-size:12px; line-height:1; box-shadow:var(--golge-1);}
.bd-orta{flex:1; min-width:0;}
.bd-metin{font-size:13.5px; line-height:1.42; color:var(--ink);}
.bd-metin .kazan{color:var(--good-ink);} .bd-metin .kaybet{color:var(--bad-ink);}
.bd-zaman{font-size:11.5px; color:var(--ink-faint); margin-top:2px;}
.bd-btnler{display:flex; gap:8px; margin-top:9px; flex-wrap:wrap;}
.bd-btnler .btn.dl-btn{padding:7px 15px; font-size:12.5px;}
.bd-hata{color:var(--bad-ink); font-size:12px; margin-top:6px;}
.bd-hata:empty{display:none;}
.bd-bos{padding:34px 22px 30px; text-align:center; color:var(--ink-soft); font-size:13px; line-height:1.5;}
.bd-bos-ikon{width:54px; height:54px; margin:0 auto 12px; border-radius:50%; background:var(--surface-2);
  color:var(--ink-faint); display:grid; place-items:center;}
.bd-bos b{display:block; color:var(--ink); font-size:14.5px; margin-bottom:4px;}
.bd-alt{border-top:1px solid var(--line-soft); padding:6px; text-align:center;}
.bd-alt .dl-link{font-size:12.5px; padding:8px 12px;}
.bd-toast{border-color:var(--primary); cursor:pointer;}
.g-toast{border-color:var(--primary); cursor:pointer;}

/* ---------- Google ile giriş ----------
   Google'ın marka kuralları: beyaz zemin, renkli "G", "Google ile devam et". */
.g-dugme{width:100%; height:48px; display:flex; align-items:center; justify-content:center; gap:10px; border-radius:12px;
  border:1.5px solid var(--line); background:#fff; color:#1f1f1f; font-family:'Figtree',sans-serif;
  font-size:15px; font-weight:700; cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .14s;}
.g-dugme:hover{border-color:#c4c7c5; box-shadow:var(--golge-2);}

.g-dugme svg{flex:none;}
.g-dugme + .g-dugme{margin-top:10px;}
.g-dugme:disabled{opacity:.6; cursor:wait;}
.gecis-liste{margin:2px 0 12px;}
.gecis-bos{font-size:13px; color:var(--ink-faint); padding:6px 0;}
.gecis-satir{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
.gecis-satir:last-child{border-bottom:none;}
.gecis-ikon{flex:none; width:34px; height:34px; border-radius:10px; background:var(--surface-2); display:grid; place-items:center;}
.gecis-bilgi{flex:1; min-width:0; color:var(--ink);}
.gecis-bilgi small{display:block; color:var(--ink-faint); font-size:12px; margin-top:2px;}
.gecis-kaldir{flex:none; background:none; border:none; color:var(--bad-ink); font:700 13px inherit; font-family:inherit; cursor:pointer; padding:6px;}
.g-not{font-size:12.5px; line-height:1.5; color:var(--ink-soft); margin:12px 2px 4px; text-align:center; text-wrap:balance;}
.g-ayrac{display:flex; align-items:center; gap:10px; margin:18px 0 12px; font-size:12px; color:var(--ink-faint);}
.g-ayrac::before, .g-ayrac::after{content:""; flex:1; height:1px; background:var(--line);}
.gk-onay{display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; font-size:13px; color:var(--ink-soft);
  line-height:1.5; text-align:left;}
.gk-onay input{margin-top:2px; accent-color:var(--primary); width:15px; height:15px; flex-shrink:0;}
.gk-onay a{color:var(--primary-deep); font-weight:600;}
/* flex:none: .ayar-input'taki flex:1 telefonda dikey pencerede kutuyu boşluk kadar uzatıyordu. */
.gk-ad{width:100%; flex:none; margin:4px 0 6px;}
.gk-durum{font-size:12px; min-height:17px; margin:0 2px 10px; color:var(--ink-faint); text-align:left; line-height:1.4;}
.gk-durum.iyi{color:var(--good-ink); font-weight:700;}
.gk-durum.kotu{color:var(--bad-ink); font-weight:600;}
.insan-kutu{display:flex; justify-content:center; min-height:66px; margin:4px 0 10px;}
.gk-uyari{font-size:12px; line-height:1.5; color:var(--ink-faint); margin:2px 2px 12px; text-align:left;}
.ayar-google{margin-top:12px; padding:12px 14px; border-radius:12px; background:var(--surface-2); font-size:13px;
  line-height:1.5; color:var(--ink-soft);}
.ayar-google .g-dugme{margin-top:10px; height:44px; font-size:14px;}
.bt-ek{color:var(--ink-faint); font-weight:600;}
.bt-ac{display:inline-block; margin-left:6px; background:none; border:none; color:var(--primary-deep); font-weight:800;
  font-size:13px; cursor:pointer; padding:0;}
@media(max-width:600px){
  .bd-panel{left:10px; right:10px !important; width:auto; max-width:none; max-height:calc(100dvh - 88px);}
}
@media (prefers-reduced-motion:reduce){ .tb-zil.cal svg, .bd-panel, .tb-zil-sayi.gir{animation:none;} }

/* ---------- Düello açılış perdesi ----------
   Yerleşim: üstte vazgeç (✕, yalnızca davet eden) ve durum hapı; ortada
   "Endodonti Düellosu", soru/süre, iki oyuncu ve aralarında çarpışan
   kılıçlar + VS; altta 3-2-1 halkası. Perde, sorular sunucudan gelirken
   geçen süreyi örtüyor; dokununca (sorular geldiyse) hemen geçiliyor.
   Yazılan her şey gerçek: "rakip hazır" gibi olmayan bir durum yok. */
.dg-perde{position:fixed; inset:0; z-index:10000; overflow:hidden; cursor:pointer; color:#fff;
  background:#0F241F;
  animation:dnmPerdeGir .35s cubic-bezier(.2,.8,.2,1) both;
  -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none;}
.dg-perde::after{content:""; position:absolute; inset:0; background:#E9FFF8; opacity:0; pointer-events:none;
  animation:dgEkranFlas .5s ease-out .8s both;}
@keyframes dgEkranFlas{0%{opacity:0} 12%{opacity:.12} 100%{opacity:0}}
.dg-ic{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px));}
.dg-ust{position:relative; width:100%; max-width:560px; height:46px; display:flex; align-items:center; justify-content:center;}
.dg-kapat{position:absolute; left:0; top:0; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.06); color:rgba(255,255,255,.8); cursor:pointer;
  animation:dnmAltGir .4s ease .2s both;}

.dg-hap{display:inline-flex; align-items:center; gap:8px; max-width:calc(100% - 120px); height:34px; padding:0 14px;
  border-radius:999px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.06);
  font-size:13px; font-weight:600; color:rgba(255,255,255,.88); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  animation:dnmAltGir .4s ease .15s both;}
.dg-hap i{flex:none; width:8px; height:8px; border-radius:50%; background:#34D399; box-shadow:0 0 0 4px rgba(52,211,153,.15);}
.dg-orta{flex:1; width:100%; max-width:560px; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.dg-baslik{font-family:'Figtree',sans-serif; font-weight:800; font-size:clamp(24px,7.4vw,34px); letter-spacing:-.02em; line-height:1.15;
  max-width:100%; animation:dgBaslik .55s cubic-bezier(.2,1,.3,1) .1s both;}
@keyframes dgBaslik{from{opacity:0; transform:translateY(10px)}}
.dg-bilgi{margin-top:8px; display:flex; align-items:center; gap:10px; font-size:clamp(13px,3.8vw,15px); font-weight:600;
  color:rgba(203,230,222,.72); animation:dnmAltGir .5s ease .25s both;}
.dg-bilgi i{width:5px; height:5px; border-radius:50%; background:rgba(203,230,222,.5);}
.dg-sahne{margin-top:clamp(28px,6vh,48px); display:flex; align-items:flex-start; justify-content:center; gap:clamp(2px,1.5vw,14px);
  animation:dgSars .42s linear .8s both;}
@keyframes dgSars{0%,100%{transform:none} 14%{transform:translate(-6px,2px)} 28%{transform:translate(5px,-3px)}
  44%{transform:translate(-4px,1px)} 60%{transform:translate(3px,-1px)} 80%{transform:translate(-1px,0)}}
.dg-oyuncu{width:clamp(96px,28vw,132px); display:flex; flex-direction:column; align-items:center; gap:10px; min-width:0;
  position:relative; z-index:1;}
.dg-oyuncu.sol{--renk:#2DD4BF; animation:dgSoldan .65s cubic-bezier(.16,1,.3,1) .05s both;}
.dg-oyuncu.sag{--renk:#F87171; animation:dgSagdan .65s cubic-bezier(.16,1,.3,1) .05s both;}
@keyframes dgSoldan{from{opacity:0; transform:translateX(-70px)} to{opacity:1; transform:none}}
@keyframes dgSagdan{from{opacity:0; transform:translateX(70px)} to{opacity:1; transform:none}}
.dg-av{width:clamp(76px,22vw,104px); height:clamp(76px,22vw,104px); border-radius:50%; background:#1E3A33;
  color:rgba(255,255,255,.75); overflow:hidden;
  box-shadow:0 0 0 3px var(--renk), 0 0 0 9px rgba(255,255,255,.05), 0 18px 36px -14px rgba(0,0,0,.8);}
.dg-av .av-foto, .dg-av .av-varsayilan{width:100%; height:100%;}
.dg-ad{font-family:'Figtree',sans-serif; font-weight:800; font-size:clamp(16px,4.6vw,20px); color:#fff; margin-top:4px;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dg-etiket{font-size:13px; font-weight:700; color:var(--renk); margin-top:-6px;}
.dg-kilic-alan{position:relative; width:clamp(92px,27vw,150px); flex:none; margin-top:clamp(-8px,-1vw,0px);}
.dg-kilic-alan svg{display:block; width:100%; height:auto; overflow:visible;}
.dg-vs{position:absolute; left:50%; bottom:-38px; width:40px; height:40px; margin-left:-20px; border-radius:50%;
  display:grid; place-items:center; font:800 13px 'Figtree',sans-serif; letter-spacing:.04em; color:#6EE7B7;
  background:#123129; border:1px solid rgba(110,231,183,.28); box-shadow:0 0 24px rgba(52,211,153,.25);
  animation:dgVs .5s var(--yay-zipla) .95s both;}
@keyframes dgVs{from{opacity:0; transform:scale(.3)}}
.dg-k{transform-box:view-box;}
.dg-k.sol{transform-origin:54px 180px; transform:rotate(33deg); animation:dgSolSal 1.05s .2s both;}
.dg-k.sag{transform-origin:146px 180px; transform:rotate(-33deg); animation:dgSagSal 1.05s .2s both;}
@keyframes dgSolSal{
  0%{transform:rotate(-55deg); opacity:0; animation-timing-function:cubic-bezier(.55,0,.9,.45);}
  10%{opacity:1;}
  57%{transform:rotate(33deg); animation-timing-function:cubic-bezier(.2,.7,.3,1);}
  71%{transform:rotate(21deg); animation-timing-function:ease-in-out;}
  86%{transform:rotate(34.5deg);}
  100%{transform:rotate(33deg); opacity:1;}
}
@keyframes dgSagSal{
  0%{transform:rotate(55deg); opacity:0; animation-timing-function:cubic-bezier(.55,0,.9,.45);}
  10%{opacity:1;}
  57%{transform:rotate(-33deg); animation-timing-function:cubic-bezier(.2,.7,.3,1);}
  71%{transform:rotate(-21deg); animation-timing-function:ease-in-out;}
  86%{transform:rotate(-34.5deg);}
  100%{transform:rotate(-33deg); opacity:1;}
}
.dg-kivilcim{transform-box:view-box; transform-origin:100px 109px; opacity:0;
  animation:dgKivilcim .6s cubic-bezier(.2,.8,.3,1) .8s both;}
@keyframes dgKivilcim{0%{opacity:0; transform:scale(.2)} 12%{opacity:1} 100%{opacity:0; transform:scale(1.6) rotate(10deg)}}
.dg-flas{transform-box:view-box; transform-origin:100px 109px; opacity:0; animation:dgFlas .55s ease-out .78s both;}
@keyframes dgFlas{0%{opacity:0; transform:scale(.2)} 18%{opacity:1; transform:scale(1)} 100%{opacity:0; transform:scale(1.8)}}
.dg-yildiz{transform-box:view-box; transform-origin:100px 109px; opacity:0; animation:dgYildiz .5s cubic-bezier(.2,.8,.3,1) .8s both;}
@keyframes dgYildiz{0%{opacity:0; transform:scale(.1) rotate(0deg)} 20%{opacity:1; transform:scale(1.15) rotate(20deg)}
  100%{opacity:0; transform:scale(.4) rotate(60deg)}}
.dg-sayac{position:relative; width:84px; height:84px; margin-top:clamp(32px,7vh,56px); animation:dnmAltGir .45s ease .85s both;}
.dg-sayac svg{width:100%; height:100%; transform:rotate(-90deg);}
.dg-sayac circle{fill:none; stroke-width:5;}
.dg-halka-iz{stroke:rgba(255,255,255,.08);}
.dg-halka{stroke:#34D399; stroke-linecap:round; stroke-dasharray:176; stroke-dashoffset:176;
  animation:dgHalka 1.5s linear .95s forwards;}
@keyframes dgHalka{to{stroke-dashoffset:0}}
.dg-perde.bekliyor .dg-halka{animation:dgDon .9s linear infinite; stroke-dasharray:44 132; stroke-dashoffset:0; transform-origin:32px 32px;}
@keyframes dgDon{to{transform:rotate(360deg)}}
.dg-sayi{position:absolute; inset:0; display:grid; place-items:center; font:800 32px 'Figtree',sans-serif; color:#fff;}
.dg-sayi.vur{animation:dgSayi .45s var(--yay-zipla) both;}
@keyframes dgSayi{from{opacity:0; transform:scale(1.7)}}
.dg-perde.hazir .dg-sayi{color:#6EE7B7;}
.dg-durum{margin-top:14px; font-size:14px; font-weight:600; color:#6EE7B7; animation:dnmAltGir .45s ease .95s both;}
.dg-not{max-width:320px; font-size:13px; line-height:1.45; color:rgba(203,230,222,.55); animation:dnmAltGir .5s ease 1.2s both;}
@media (max-height:640px){ .dg-sahne{margin-top:18px;} .dg-sayac{margin-top:20px; width:68px; height:68px;} .dg-sayi{font-size:26px;} }
.dg-perde.cikis{animation:dgCik .5s cubic-bezier(.7,0,.84,0) both; pointer-events:none;}
@keyframes dgCik{to{opacity:0; transform:scale(1.08)}}
.dg-perde.kapan{animation:dgKapan .2s ease both; pointer-events:none;}
@keyframes dgKapan{to{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .dg-perde, .dg-perde::after, .dg-sahne, .dg-oyuncu, .dg-k, .dg-baslik, .dg-bilgi, .dg-vs, .dg-hap, .dg-kapat,
  .dg-sayac, .dg-halka, .dg-sayi, .dg-durum, .dg-not{animation:none !important;}
  .dg-halka{stroke-dashoffset:0;}
  .dg-kivilcim, .dg-flas, .dg-yildiz{display:none;}
  .dg-perde.cikis, .dg-perde.kapan{animation:dgKapan .2s ease both !important;}
}

/* Arama bölümü — sıralamanın altında */
.arkadas-ara{margin-top:16px; padding-top:16px; border-top:1px solid var(--line-soft);}

@media(max-width:600px){
  .lig-ust{padding:14px; border-radius:16px;}
  .lig-basamaklar{gap:4px; padding:8px;}
  .lig-bsm{padding:8px 2px;}
  .lig-bsm-emoji{font-size:17px;}
  .lig-bsm-ad{font-size:9.5px;}
  .lig-bsm-durum{display:none;}
  .lig-alt{padding:12px; border-radius:16px;}
  .lig-gecis-btnler{width:100%;}
  .lgb{flex:1; padding:8px 6px; font-size:11.5px;}
  .lig-sifirlama{width:100%; text-align:center;}
  .sira-satir{padding:10px; gap:9px;}
  .sira-av{width:34px; height:34px;}
  .sira-ad{font-size:13px;}
  .sira-puan{font-size:15px;}
}

/* Duolingo esintili liderlik podyumu */

.frnd-aktif-nokta {
  position: absolute; bottom: -1px; right: -1px; width: 11px; height: 11px;
  background: var(--good); border: 2px solid var(--surface); border-radius: 50%;
}

/* ============================
   NOT DEFTERİ (NOTEBOOK)
   ============================ */
.notebook-wrap {
  position: relative;
  display: flex; flex-direction: column; gap: 20px;
}

.notebook-page {
  position: relative;
  perspective: 1000px;
  cursor: pointer;
}
/* Yırtılabilir yaprak */
.nb-leaf {
  position: relative;
  background: #FFFEF0;
  border-radius: 6px 12px 12px 6px;
  box-shadow: var(--golge-2);
  overflow: visible;
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.25,.8,.25,1), box-shadow .35s;
  min-height: 110px;
}
.nb-leaf:hover {
  box-shadow: var(--golge-2);
}

/* Dog-ear köşe */
.nb-leaf::after {
  content: "";
  position: absolute; bottom: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 0 22px 22px;
  border-color: transparent transparent rgba(200,180,80,.25) transparent;
  border-radius: 0 0 6px 0;
  transition: border-width .22s ease;
}
.nb-leaf:hover::after {
  border-width: 0 0 30px 30px;
}

/* Sol spiral şerit */
.nb-spiral-strip {
  position: absolute; left: 0; top: 0; bottom: 0; width: 36px;
  background: #f3f0e4;
  border-right: 2px solid rgba(180,160,80,.3);
  border-radius: 6px 0 0 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-around; padding: 10px 0;
  pointer-events: none;
}
.nb-spiral-hole {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(160,140,60,.4);
  background: rgba(200,180,80,.12);
}

/* Sol kırmızı dikey çizgi */
.nb-margin-line {
  position: absolute; left: 52px; top: 0; bottom: 0; width: 1.5px;
  background: rgba(220,60,60,.25);
  pointer-events: none;
}

/* İçerik */
.nb-content {
  padding: 14px 18px 14px 58px;
  position: relative;
}

/* Arka plan çizgileri */
.nb-lines {
  position: absolute; inset: 0; left: 36px; pointer-events: none;
  background-image: repeating-linear-gradient(
    transparent, transparent 27px,
    rgba(100,130,200,.12) 27px, rgba(100,130,200,.12) 28px
  );
  border-radius: 0 12px 12px 0;
}

.nb-brans-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary-darker); background: var(--primary-wash);
  border-radius: 999px; padding: 3px 10px; margin-bottom: 8px;
}
.nb-soru-text {
  font-size: 14.5px; font-weight: 500; color: #3a2d0e;
  line-height: 1.6; margin-bottom: 8px;
}
.nb-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--ink-faint);
}
.nb-yanlis-badge {
  font-family: 'Figtree',sans-serif; font-size: 11px; font-weight: 700;
  color: var(--bad); background: var(--bad-wash); border-radius: 6px; padding: 2px 7px;
}
.nb-flip-hint {
  font-size: 11.5px; color: var(--ink-faint); display: flex; align-items: center; gap: 4px;
  margin-left: auto;
}

/* Açıklama katmanı (arka yüz) */
.nb-aciklama {
  max-height: 0; overflow: hidden;
  transition: max-height .45s cubic-bezier(.25,.8,.25,1), padding .3s;
  background: var(--primary-wash);
  border-top: 1.5px dashed rgba(12,154,137,.3);
  padding: 0 18px 0 58px;
  position: relative;
}
.nb-aciklama.open {
  max-height: 400px;
  padding: 14px 18px 14px 58px;
}
.nb-aciklama-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary-deeper, var(--primary-dark, var(--primary-deep)));
  margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
}
.nb-aciklama-text {
  font-size: 14px;
  color: #1a3a30; line-height: 1.65;
}

/* Yırtma butonu */
.nb-tear-btn {
  position: absolute; top: 6px; right: 6px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(224,71,63,.1); border: 1.5px solid rgba(224,71,63,.25);
  color: var(--bad); font-size: 13px; cursor: pointer; display: grid; place-items: center;
  transition: background .15s, transform .15s, opacity .15s;
  opacity: 0;
  z-index: 5;
}
.nb-leaf:hover .nb-tear-btn, .nb-tear-btn:focus-visible { opacity: 1; }
/* Dokunmatik ekranda hover yok: düğme hiç görünmüyor ama dokunuşu yine alıyordu,
   köşeye denk gelen bir dokunuş soruyu sessizce siliyordu. Orada hep görünür. */
@media (hover: none) { .nb-tear-btn { opacity: .9; } }
.nb-tear-btn:hover { background: var(--bad-wash); transform: scale(1.1) rotate(10deg); }

/* Sayfa yırtılma animasyonu */
@keyframes nbTear {
  0%   { transform: rotate(0deg) translateX(0); opacity: 1; }
  20%  { transform: rotate(-3deg) translateX(-8px); }
  60%  { transform: rotate(6deg) translateX(60px); opacity: .8; }
  100% { transform: rotate(12deg) translateX(140vw); opacity: 0; }
}
.nb-tearing { animation: nbTear .55s cubic-bezier(.4,0,.8,1) forwards; }

/* Açık/kapalı chevron */
.nb-chevron {
  display: inline-block; transition: transform .3s cubic-bezier(.25,.8,.25,1);
  font-size: 10px; color: var(--ink-faint);
}
.nb-chevron.open { transform: rotate(180deg); }

@media (max-width: 480px) {
  .nb-soru-text { font-size: 16px; }
  .nb-spiral-strip { width: 28px; }
  .nb-margin-line { left: 42px; }
  .nb-content, .nb-aciklama { padding-left: 42px; }
  .nb-aciklama.open { padding-left: 42px; }
}

@media (max-width:560px){
  /* Halka ile sayı sütununu yan yana koymak dar ekranda çalışmıyor:
     sütun halkadan 2,5 kat uzun olduğu için halka onun ortasına
     hizalanıyor ve sayılar halkanın etrafına dağılıyor. Alt alta. */

  .topbar-in{padding:12px 14px; gap:8px;}
  .topbar-in:empty{min-height:60px;}
  .wrap{padding:22px 14px 70px;}

  /* Üst bar: giriş yapmış kullanıcıda avatar+isim+Profilim+Çıkış taşıyordu.
     Avatar zaten tıklanıp profile gidiyor — ismi ve ayrı Profilim butonunu gizle. */
  .tb-ad{display:none;}
  .tb-profil-btn{display:none;}
  .tb-user{gap:6px;}
  /* Dar ekranda seri metnini kısalt, XP'yi tamamen gizle — yer yok. */
  .tb-pil{padding:4px 9px 4px 4px; gap:5px;}
  .tb-pil-ikon{width:20px; height:20px;}
  .tb-pil-sayi{font-size:13px;}
  .tb-pil.seri .uzun{display:none;}
  .tb-pil.xp{display:none;}
  .tb-ayirac{display:none;}
  .tb-link{padding:0 10px; font-size:11.5px;}
  .brand .name{font-size:15px !important;}
  .brand .tag{display:none;}

  /* Kart iç boşlukları daralt — mobilde "kalın" hissi azalt */
  .card{padding:18px; border-radius:16px;}
  .section{margin-top:22px;}
  .auth-card{padding:24px 20px; border-radius:16px;}

  /* Taşma riski olan min-width'leri güvenli hale getir */
  /* Tam genişlik: üç sayı kutusu tek sıraya sığsın (3×~100 + 2×10 gap). */
  
  .sc{min-width:0;}
  /* Etiket iki satıra düşerse "9.75" ilk satırın temel çizgisine
     yapışıp kopuk duruyordu; dikey ortalama ikisini birlikte tutuyor. */

  /* Soru kartı: daha kompakt tipografi */
  .qtext{font-size:17px; margin-bottom:18px;}
  .opt{padding:12px 14px; gap:11px;}
  .bub{width:28px; height:28px; font-size:12px;}
  .qlvl{font-size:11px;}

  /* Sonuç halkası küçülsün */
  .ring{width:100px; height:100px;}

  /* Checklist ve chip alanları */
  .konu-row{padding:10px 2px;}
  .konu-name{font-size:13px;}
  /* Genel başlıklar */
  h1.hero{font-size:clamp(24px,7vw,34px);}
  
}
@media (max-width:380px){
  .wrap{padding:18px 11px 64px;}
  .card{padding:15px;}
  .qtext{font-size:16px;}
  .opt{padding:11px 12px;}

}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
}

/* ---------- Dusky asistan widget ---------- */
/* Balonun boyu; içerik alanlarının altına bu kadar pay bırakılıyor. */
:root{--dusky-boy:60px;}
@media (max-width:560px){ :root{--dusky-boy:56px;} }
/* Telefonda kaydırırken balon aşağı kayıp saklanır (app.js: duskyBalonKonumu).
   transform yerine translate: balonun kendi nefes/giriş animasyonları transform
   kullandığı için onlarla çakışmıyor. */
@media (max-width:560px){
  #dusky-root .dusky-bubble{ transition:translate .2s ease, opacity .2s ease; }
  body.dusky-sakli #dusky-root .dusky-bubble{ translate:0 calc(100% + 32px); opacity:0; pointer-events:none; }
  body.dusky-sakli .dusky-intro-tip{ opacity:0 !important; }
}
@media (max-width:560px) and (prefers-reduced-motion:reduce){
  #dusky-root .dusky-bubble{ transition:none; }
}
.dusky-bubble{
  position:fixed; bottom:calc(22px + env(safe-area-inset-bottom,0px)); right:22px; z-index:500; width:60px; height:60px; border-radius:50%;
  background:var(--primary-deep); border:none; cursor:pointer;
  display:grid; place-items:center;
  box-shadow:var(--golge-2);
  transition:transform var(--motion-fast,180ms) var(--ease-out,cubic-bezier(.16,1,.3,1)),
             box-shadow var(--motion-base,260ms) var(--ease-out,cubic-bezier(.16,1,.3,1)),
             opacity var(--motion-base,260ms) var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.dusky-bubble svg{width:28px; height:28px;}

/* Idle breath — prefers-reduced-motion ile kapanır (aşağıda + global kural). */
@keyframes duskyBreath{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.028);}
}
.dusky-bubble:not(.dusky-open):not(.dusky-intro){
  animation:duskyBreath 3.2s ease-in-out infinite;
}
@media (hover:hover){
  .dusky-bubble:not(.dusky-open):hover{
    animation:none;
    transform:translateY(-2px) scale(1.04);
    box-shadow:var(--golge-3);
  }
}

.dusky-bubble.dusky-open{
  animation:none;
  transform:scale(.88);
  opacity:.55;
}
/* İlk ziyaret yayılması */
.dusky-bubble.dusky-intro{
  animation:none;
  opacity:0;
  transform:scale(.72);
}
.dusky-bubble.dusky-intro.dusky-intro-in{
  opacity:1;
  transform:scale(1);
  transition:opacity 700ms var(--ease-out,cubic-bezier(.16,1,.3,1)),
             transform 700ms var(--ease-out,cubic-bezier(.16,1,.3,1));
}
/* Selam çipi — FAB'ın solunda, engellemez */
.dusky-intro-tip{
  position:fixed; z-index:500; pointer-events:none;
  right:calc(22px + 60px + 12px); bottom:calc(34px + env(safe-area-inset-bottom,0px));
  padding:8px 12px; border-radius:12px;
  background:var(--surface,#fff); color:var(--ink,#14202A);
  font-size:12.5px; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
  box-shadow:var(--golge-2);
  border:1px solid var(--line,rgba(20,30,40,.08));
  opacity:0; transform:translateX(8px) scale(.96);
  transition:opacity 280ms var(--ease-out,cubic-bezier(.16,1,.3,1)),
             transform 280ms var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.dusky-intro-tip.on{opacity:1; transform:none;}
.dusky-intro-tip.out{opacity:0; transform:translateX(4px);}
@media (max-width:560px){
  .dusky-bubble{width:56px; height:56px;}
  .dusky-bubble svg{width:26px; height:26px;}
  .dusky-intro-tip{right:calc(16px + 56px + 10px); bottom:calc(28px + env(safe-area-inset-bottom,0px));}
}

/* Dusky'nin söyleyecek bir şeyi olduğunda: sessiz bir nokta ve en fazla
   iki kez nefes alan bir halka. Sonra statik kalır. */
.dusky-bubble.dusky-nokta::after{
  content:""; position:absolute; top:0; right:0; width:14px; height:14px;
  border-radius:50%; background:var(--amber,#F5A623);
  border:2.5px solid var(--bg-grad-1,#fff);
  animation:duskyNokta 2.4s ease-in-out 2;
}
@keyframes duskyNokta{
  0%,100%{transform:scale(1);}
  8%{transform:scale(1.35);}
  16%{transform:scale(1);}
}
@media (prefers-reduced-motion:reduce){
  .dusky-bubble:not(.dusky-open):not(.dusky-intro),
  .dusky-bubble.dusky-nokta::after{animation:none;}
}

/* "Kaldığın yerden" ayracı: mesaj değil, geçmişin bittiği yer. */
.dusky-ayrac{
  display:flex; align-items:center; gap:9px; margin:2px 0;
  font-size:10.5px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-faint);
}
.dusky-ayrac::before,.dusky-ayrac::after{
  content:""; flex:1; height:1px; background:var(--line);
}

.dusky-panel{
  position:fixed; bottom:calc(90px + env(safe-area-inset-bottom,0px)); right:22px; z-index:500; width:min(360px, calc(100vw - 32px)); height:min(520px, calc(100dvh - 130px));
  background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; overflow:hidden; opacity:0; transform:translateY(14px) scale(.97); pointer-events:none;
  transition:opacity .22s cubic-bezier(.2,.8,.2,1), transform .22s cubic-bezier(.2,.8,.2,1);
}
.dusky-panel.on{opacity:1; transform:none; pointer-events:auto;}
.dusky-head{display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--primary-deep); color:#fff; flex-shrink:0;}
.dusky-head-avatar{width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.2); display:grid; place-items:center; flex-shrink:0;}
.dusky-head-avatar svg{width:18px; height:18px;}
.dusky-head-text{flex:1; min-width:0;}
.dusky-head-name{font-family:'Figtree',sans-serif; font-weight:700; font-size:14px;}
.dusky-head-sub{font-size:11px; opacity:.85;}
.dusky-head-close{width:34px; height:34px; border-radius:50%; border:none; background:rgba(255,255,255,.16); color:#fff; cursor:pointer; display:grid; place-items:center; flex-shrink:0; transition:background .14s;}
.dusky-head-close:hover{background:rgba(255,255,255,.28);}

.dusky-msgs{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}
.dusky-msg{max-width:82%; padding:10px 13px; border-radius:16px; font-size:13.5px; line-height:1.5; animation:staggerIn .28s cubic-bezier(.2,.8,.2,1) both;}
.dusky-msg.bot{background:var(--surface-2); color:var(--ink); align-self:flex-start; border-bottom-left-radius:4px;}
.dusky-msg.user{background:var(--primary-deep); color:#fff; align-self:flex-end; border-bottom-right-radius:4px;}
.dusky-typing{display:flex; gap:4px; align-self:flex-start; padding:12px 14px; background:var(--surface-2); border-radius:16px; border-bottom-left-radius:4px;}
.dusky-typing span{width:6px; height:6px; border-radius:50%; background:var(--ink-faint); animation:duskyTypingDot 1.1s ease-in-out infinite;}
.dusky-typing span:nth-child(2){animation-delay:.15s}
.dusky-typing span:nth-child(3){animation-delay:.3s}
@keyframes duskyTypingDot{0%,60%,100%{transform:translateY(0); opacity:.5}30%{transform:translateY(-4px); opacity:1}}

.dusky-chips{display:flex; gap:6px; flex-wrap:wrap; padding:10px 16px; border-top:1px solid var(--line); flex-shrink:0;}
.dusky-chip{font-size:11.5px; font-weight:600; color:var(--primary-darker); background:var(--primary-wash); border:none; border-radius:999px; padding:6px 12px; cursor:pointer; transition:background .14s;}
.dusky-chip:hover{background:var(--primary-wash-strong,var(--primary-wash));}

.dusky-input-row{display:flex; gap:8px; padding:10px 14px 12px 14px; flex-shrink:0;}
.dusky-uyari{
  flex-shrink:0; padding:0 14px calc(10px + env(safe-area-inset-bottom,0px));
  font-size:10.5px; line-height:1.35; color:var(--ink-faint); text-align:center;
}
.dusky-input{flex:1; border:1.5px solid var(--line); border-radius:12px; padding:10px 13px; font-size:16px; font-family:inherit; outline:none; transition:border-color .14s;}
.dusky-input:focus{border-color:var(--primary);}
.dusky-send{width:38px; height:38px; border-radius:12px; border:none; background:var(--primary-deep); color:#fff; cursor:pointer; display:grid; place-items:center; flex-shrink:0; transition:background .14s, transform .14s;}
.dusky-send:hover{background:var(--primary-darker);}

.dusky-send:disabled{opacity:.4; cursor:not-allowed;}
.dusky-cursor{display:inline-block;width:2px;height:13px;background:var(--primary);margin-left:2px;vertical-align:middle;animation:duskyCursorBlink .7s step-end infinite;}
@keyframes duskyCursorBlink{0%,100%{opacity:1}50%{opacity:0}}

/* ---------- Canlı destek (temsilciye bağlanma) ---------- */

/* "Yardım" düğmesi diğer önerilerden ayrışsın diye dolu renkli. */
.dusky-chip.destek-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--ink); color:#fff;
}
.dusky-chip.destek-btn:hover{background:#000;}
.dusky-chip.geri{background:var(--surface-2); color:var(--ink-soft);}

/* Destek modunda başlık ve balon rengi maviye kayıyor — kullanıcı artık
   yapay zekâyla değil bir insanla konuştuğunu renkten de anlasın. */
.dusky-head.destek{background:#2358C9;}
.dusky-head-avatar.destek-avatar{color:#fff;}
.destek-nokta{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#5BE38C; margin-right:6px; vertical-align:middle;
  box-shadow:var(--golge-1); animation:destekNabiz 2s infinite;
}
@keyframes destekNabiz{
  0%{box-shadow:0 0 0 0 rgba(91,227,140,.65);}
  70%{box-shadow:0 0 0 7px rgba(91,227,140,0);}
  100%{box-shadow:var(--golge-1);}
}
.dusky-panel.destek-modu .dusky-msg.user{background:#2C6BED;}
.dusky-panel.destek-modu .dusky-input:focus{border-color:#2C6BED;}
.dusky-panel.destek-modu .dusky-send{background:#2C6BED;}
.dusky-panel.destek-modu .dusky-send:hover{background:#1B45A8;}

/* Kuyrukta beklerken başlık amber, kabul edilince maviye döner. */
.dusky-head.destek.bekliyor{background:#A8720F;}
.destek-nokta.sari{
  background:#FFD37A;
  box-shadow:var(--golge-1);
  animation:destekNabizSari 2s infinite;
}
@keyframes destekNabizSari{
  0%{box-shadow:0 0 0 0 rgba(255,211,122,.65);}
  70%{box-shadow:0 0 0 7px rgba(255,211,122,0);}
  100%{box-shadow:var(--golge-1);}
}

/* "Bir temsilci sohbete katıldı" şeridi */
.destek-baglandi{
  align-self:center; display:flex; align-items:center; gap:7px;
  background:var(--good-wash); color:#1F6B4F; border-radius:999px;
  padding:7px 14px; font-size:12px; font-weight:700;
  animation:destekBaglandiGir .42s var(--yay-zipla) both;
}
.destek-baglandi-tik{
  width:16px; height:16px; border-radius:50%; background:var(--good); color:#fff;
  display:grid; place-items:center; font-size:10px; font-weight:800; flex:none;
}
@keyframes destekBaglandiGir{
  from{transform:scale(.7) translateY(6px); opacity:0;}
  to{transform:none; opacity:1;}
}

/* Kuyruk göstergesi */
.destek-kuyruk{
  align-self:flex-start; display:flex; align-items:center; gap:5px;
  background:var(--surface-2); border-radius:16px; border-bottom-left-radius:4px;
  padding:10px 14px;
}
.destek-kuyruk-nokta{
  width:6px; height:6px; border-radius:50%; background:#D9A441;
  animation:duskyTypingDot 1.3s ease-in-out infinite;
}
.destek-kuyruk-nokta:nth-child(2){animation-delay:.18s;}
.destek-kuyruk-nokta:nth-child(3){animation-delay:.36s;}
.destek-kuyruk-metin{margin-left:5px; font-size:12px; color:var(--ink-faint); font-weight:600;}

/* Otomatik bilgi kartı — temsilci mesajı sanılmasın diye ayrı görünüm */
.dusky-msg.destek-oto{
  max-width:94%; background:var(--amber-wash);
  border:1px solid #F0C77A; color:#6B4408;
}
.destek-oto-etiket{
  display:flex; align-items:center; gap:5px; margin-bottom:7px;
  font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#8A5A0B; opacity:.9;
}
.dusky-msg.destek-oto b{color:#4A2E05;}

.destek-saat{
  display:block; margin-top:4px; font-size:10px; opacity:.62;
  text-align:right; letter-spacing:.02em;
}
.destek-sistem{
  align-self:center; max-width:92%; text-align:center;
  font-size:11.5px; line-height:1.45; color:var(--ink-faint);
  background:var(--surface-2); border-radius:12px; padding:8px 12px;
}
.destek-sistem.hata{background:var(--bad-wash); color:#94322A;}
.destek-sistem.bekliyor{background:transparent; font-style:italic;}

/* Bağlanma ekranı */
.destek-baglaniyor{
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; text-align:center; padding:20px; position:relative;
}
.destek-baglaniyor-ikon{
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:#2358C9; color:#fff;
  margin-bottom:12px; position:relative; z-index:1;
  animation:destekIkonGir .45s var(--yay-zipla) both;
}
@keyframes destekIkonGir{from{transform:scale(.4); opacity:0;} to{transform:scale(1); opacity:1;}}
.destek-baglaniyor-baslik{
  font-family:'Figtree',sans-serif; font-weight:700; font-size:14.5px; color:var(--ink);
}
.destek-baglaniyor-alt{font-size:12px; color:var(--ink-faint); max-width:210px;}

/* İkondan dışa açılan üç halka */
.destek-dalga{position:absolute; top:50%; left:50%; width:0; height:0;}
.destek-dalga span{
  position:absolute; top:50%; left:50%; width:58px; height:58px;
  margin:-29px 0 0 -29px; border-radius:50%;
  border:2px solid rgba(44,107,237,.5);
  transform:translateY(-28px);
  animation:destekDalga 1.8s ease-out infinite;
}
.destek-dalga span:nth-child(2){animation-delay:.6s;}
.destek-dalga span:nth-child(3){animation-delay:1.2s;}
@keyframes destekDalga{
  0%{transform:translateY(-28px) scale(1); opacity:.75;}
  100%{transform:translateY(-28px) scale(2.6); opacity:0;}
}

/* ---------- MASCOT DUSKY (TOOTH) STYLE ---------- */
#mascot-container {
  width: 100px;
  height: 100px;
  margin: 0 auto 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
@media(max-width: 480px) {
  #mascot-container {
    width: 84px;
    height: 84px;
    margin-bottom: 12px;
  }
}
.mascot-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mascot-hand-l {
  transform-origin: 20px 66px;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.mascot-hand-r {
  transform-origin: 80px 66px;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.mascot-eyes-normal, .mascot-eyes-happy, .mascot-eyes-sad,
.mascot-mouth-normal, .mascot-mouth-happy, .mascot-mouth-sad {
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.mascot-blush {
  transition: opacity 0.3s ease;
}
.mascot-eyes-group {
  transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Default state: Idle */
.state-idle .mascot-hand-l { transform: rotate(-75deg) translate(-2px, 8px); }
.state-idle .mascot-hand-r { transform: rotate(75deg) translate(2px, 8px); }
.state-idle .mascot-eyes-normal { opacity: 1; }
.state-idle .mascot-eyes-happy { opacity: 0; }
.state-idle .mascot-eyes-sad { opacity: 0; }
.state-idle .mascot-mouth-normal { opacity: 1; }
.state-idle .mascot-mouth-happy { opacity: 0; }
.state-idle .mascot-mouth-sad { opacity: 0; }
.state-idle .mascot-blush { opacity: 0; }

/* State: Typing Email */
.state-email .mascot-hand-l { transform: rotate(-75deg) translate(-2px, 8px); }
.state-email .mascot-hand-r { transform: rotate(75deg) translate(2px, 8px); }
.state-email .mascot-eyes-normal { opacity: 1; }
.state-email .mascot-eyes-happy { opacity: 0; }
.state-email .mascot-eyes-sad { opacity: 0; }
.state-email .mascot-mouth-normal { opacity: 1; }
.state-email .mascot-mouth-happy { opacity: 0; }
.state-email .mascot-mouth-sad { opacity: 0; }
.state-email .mascot-eyes-group { transform: translate(0px, 4px) scale(0.98); }
.state-email .mascot-blush { opacity: 0.5; }

/* State: Typing Password */
.state-password .mascot-hand-l { transform: none; }
.state-password .mascot-hand-r { transform: none; }
.state-password .mascot-eyes-normal { opacity: 0; }
.state-password .mascot-eyes-happy { opacity: 1; }
.state-password .mascot-eyes-sad { opacity: 0; }
.state-password .mascot-mouth-normal { opacity: 1; }
.state-password .mascot-mouth-happy { opacity: 0; }
.state-password .mascot-mouth-sad { opacity: 0; }
.state-password .mascot-blush { opacity: 0.8; }

/* State: Wrong Password */
.state-wrong .mascot-hand-l { transform: rotate(-75deg) translate(-2px, 8px); }
.state-wrong .mascot-hand-r { transform: rotate(75deg) translate(2px, 8px); }
.state-wrong .mascot-eyes-normal { opacity: 0; }
.state-wrong .mascot-eyes-happy { opacity: 0; }
.state-wrong .mascot-eyes-sad { opacity: 1; }
.state-wrong .mascot-mouth-normal { opacity: 0; }
.state-wrong .mascot-mouth-happy { opacity: 0; }
.state-wrong .mascot-mouth-sad { opacity: 1; }
.state-wrong .mascot-blush { opacity: 0; }
.state-wrong-animation {
  animation: shake 0.4s ease-in-out;
}

/* State: Success */
.state-success .mascot-hand-l { transform: rotate(-125deg) translate(-8px, -5px); }
.state-success .mascot-hand-r { transform: rotate(125deg) translate(8px, -5px); }
.state-success .mascot-eyes-normal { opacity: 0; }
.state-success .mascot-eyes-happy { opacity: 1; }
.state-success .mascot-eyes-sad { opacity: 0; }
.state-success .mascot-mouth-normal { opacity: 0; }
.state-success .mascot-mouth-happy { opacity: 1; }
.state-success .mascot-mouth-sad { opacity: 0; }
.state-success .mascot-blush { opacity: 0.9; }
.state-success-animation {
  animation: bounceJump 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%, 45%, 75% { transform: translateX(-6px); }
  30%, 60%, 90% { transform: translateX(6px); }
}

@keyframes bounceJump {
  0%, 100% { transform: translateY(0) scaleY(1); }
  30% { transform: translateY(-16px) scaleY(0.95); }
  50% { transform: translateY(0) scaleY(1.05); }
  70% { transform: translateY(-4px) scaleY(0.98); }
}

/* ---------- SPLASH MASCOT ---------- */
.sp-mascot-wrap {
  display:flex; justify-content:center; margin-bottom:18px;
  animation: spMascotEnter .6s cubic-bezier(.2,.8,.2,1) both;
}
.sp-mascot-wrap #splash-mascot {
  width:90px; height:90px; display:flex; justify-content:center; align-items:center; position:relative;
  animation: mascotFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 8px 16px rgba(12,154,137,.18));
}
@media(max-width:480px){
  .sp-mascot-wrap #splash-mascot { width:74px; height:74px; }
}
@keyframes spMascotEnter {
  from { opacity:0; transform:translateY(18px) scale(.85); }
  to { opacity:1; transform:none; }
}
@keyframes mascotFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

.mascot-eyes-normal {
  animation: eyeBlink 5s infinite;
  transform-origin: 50% 42px;
}
@keyframes eyeBlink {
  0%, 96%, 100% { transform: scaleY(1); }
  98% { transform: scaleY(0.1); }
}

@media(max-width:480px){
  .dusky-panel{right:12px; bottom:80px; width:calc(100vw - 24px);}
  .dusky-bubble{right:16px; bottom:16px;}
}

/* Profil: yıldızlı kartlar grid */
.fc-profile-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media(max-width:500px){.fc-profile-grid{grid-template-columns:1fr;}}
.fc-profile-item{
  background:var(--primary-deep);
  border-radius:16px; padding:16px; color:#fff;
  cursor:pointer; transition:transform .18s ease,box-shadow .18s ease;
  position:relative; min-height:120px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.fc-profile-item:hover{transform:translateY(-3px); box-shadow:var(--golge-2);}
.fc-profile-item.flipped-p{
  background:var(--surface); color:var(--ink);
  border:2px solid var(--primary);
}

.fc-profile-item-text{
  font-family:'Figtree',sans-serif; font-weight:600;
  font-size:13px; line-height:1.4; flex:1; margin:8px 0;
}
.fc-profile-item.flipped-p .fc-profile-item-text{color:var(--ink-soft); font-weight:400; font-size:12.5px;}
.fc-profile-item-foot{display:flex; align-items:center; justify-content:space-between;}
.fc-profile-item-hint{font-size:10px; opacity:.65;}
.fc-profile-item.flipped-p .fc-profile-item-hint{color:var(--ink-faint);}
.fc-profile-remove{
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.2); border:none; cursor:pointer;
  font-size:10px; color:#fff; display:grid; place-items:center;
  transition:background .14s,transform .14s; flex-shrink:0;
}
.fc-profile-remove:hover{background:var(--bad); transform:scale(1.1);}
.fc-profile-item.flipped-p .fc-profile-remove{background:var(--bad-wash); color:var(--bad-ink);}
.fc-profile-brans-group{margin-bottom:4px;}
.fc-profile-brans-group:last-child{margin-bottom:0;}
.fc-profile-brans-btn{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; background:transparent; border:none; cursor:pointer;
  padding:12px 4px; border-bottom:1.5px solid var(--surface-2,rgba(0,0,0,.07));
  font-family:inherit; text-align:left;
}
.fc-profile-brans-btn:hover .fc-profile-brans-name{color:var(--primary-deep);}
.fc-profile-brans-left{display:flex; align-items:center; gap:10px;}
.fc-profile-brans-name{
  font-family:'Figtree',sans-serif; font-weight:700; font-size:13px;
  color:var(--ink); letter-spacing:-.01em; transition:color .15s;
}
.fc-profile-brans-sayi{
  font-size:11px; font-weight:700; color:#D97706;
  background:#FBF1DE; border-radius:999px; padding:2px 9px;
}
.fc-profile-brans-chevron{
  font-size:16px; color:var(--ink-faint); font-weight:700;
  transition:transform .22s cubic-bezier(.4,0,.2,1);
  flex-shrink:0; line-height:1;
}
.fc-profile-brans-btn.open .fc-profile-brans-chevron{transform:rotate(90deg);}
.fc-profile-brans-cards{
  max-height:0; overflow:hidden;
  transition:max-height .32s cubic-bezier(.4,0,.2,1), opacity .22s ease;
  opacity:0;
}
.fc-profile-brans-cards.open{
  max-height:1200px; opacity:1;
}
.fc-profile-brans-cards .fc-profile-grid{padding:12px 0 4px;}

/* Flashcard — Setup ekranı kartı */
.fc-stack-cta{
  display:flex; align-items:center; gap:16px; text-align:left;
  max-width:400px; margin:22px auto 0; padding:12px 18px 12px 12px;
  background:var(--surface); border:1.5px solid var(--line); border-radius:16px;
  cursor:pointer; font-family:'Figtree',sans-serif;
  box-shadow:var(--golge-2);
  transition:transform .22s var(--yay-zipla), box-shadow .22s, border-color .22s;
}
.screen-enter .fc-stack-cta{animation:staggerIn .5s cubic-bezier(.2,.8,.2,1) .38s both;}
.fc-stack-cta:hover{
  transform:translateY(-3px); border-color:#F0C77A;
  box-shadow:var(--golge-2);
}
.fc-teaser-stack{position:relative; width:46px; height:46px; flex-shrink:0;}
.fc-teaser-card{
  position:absolute; inset:0; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:15px; box-shadow:var(--golge-2);
  transition:transform .35s var(--yay-zipla), box-shadow .35s;
}
.fc-teaser-card.c3{background:#FBD9A0; transform:rotate(-9deg) translate(-3px,2px); z-index:1;}
.fc-teaser-card.c2{background:#F8C477; transform:rotate(7deg) translate(2px,-1px); z-index:2;}
.fc-teaser-card.c1{background:#FFF9F0; border:1.5px solid #F0C77A; transform:rotate(-2deg); z-index:3; color:#D97706;}
.fc-stack-cta:hover .fc-teaser-card.c3{transform:rotate(-22deg) translate(-11px,4px);}
.fc-stack-cta:hover .fc-teaser-card.c2{transform:rotate(16deg) translate(9px,-3px);}
.fc-stack-cta:hover .fc-teaser-card.c1{transform:rotate(-4deg) translate(0,-3px); box-shadow:var(--golge-2);}
.fc-stack-text{flex:1; min-width:0;}
.fc-stack-title{
  font-family:'Figtree',sans-serif; font-weight:700; font-size:14.5px;
  color:var(--ink); letter-spacing:-.01em;
}
.fc-stack-sub{
  font-size:12px; color:var(--ink-faint); margin-top:2px;
  display:flex; align-items:center; flex-wrap:wrap; gap:5px;
}
.fc-setup-yildiz{
  display:inline-flex; align-items:center; gap:3px;
  background:#FBF1DE; color:#D97706;
  border-radius:999px; padding:1px 8px;
  font-size:10.5px; font-weight:700;
}
.fc-stack-arr{
  font-size:16px; color:var(--ink-faint); font-weight:700;
  transition:transform .2s, color .2s; flex-shrink:0;
}
.fc-stack-cta:hover .fc-stack-arr{transform:translateX(4px); color:#D97706;}

/* ═══════════ MOBİL PROFİL — SADELEŞTİRME ═══════════════════════════
   Eskiden içerik ekranın 530 piksel altından başlıyordu: bölüm çubuğu
   (iki ayrı buton, ikisi de aynı çekmeceyi açıyordu), 300 piksellik
   kimlik kartı ve iki eylem butonu. Kartta yazan üç sayı (Çözülen /
   Başarı / Doğru) zaten Genel Bakış içeriğinin ilk satırıydı.

   Yeni düzen: tek bölüm butonu → kompakt kimlik → içerik. Öncesi
   ~200 piksel; içerik ilk ekranda görünüyor.

   Kaldırılan hiçbir bilgi kaybolmadı:
     · üç mini sayı  → Genel Bakış'ta zaten var
     · e-posta       → Ayarlar sekmesinde
     · Sınava Dön    → çekmecenin altında ve üstteki logoda
     · Hataları Çöz  → Hata Defteri panelinin başına taşındı        */
@media (max-width: 720px) {

  /* Tek dokunma hedefi: hamburger gizleniyor, pill tam genişlik.
     İki buton da profilDrawerAc() çağırıyordu — biri fazlaydı. */

  /* max-width:70% hamburger yanındayken doğruydu; tek buton kalınca
     tam genişlik olmalı. */
  
  /* Sağ uçta aşağı ok: butonun bir menü açtığı görünsün. */

  /* Kimlik kartı: dikey yığın yerine iki sütun.
       [avatar]  Ad Soyad
       [ 46px ]  3. Seviye
       ────────────────────
       ▓▓▓▓░░░░░   733 / 1000 XP                                    */

  /* Seviye rozeti köşeden çıkıp adın altına iniyor. */

  /* XP: "Seviye İlerlemesi" etiketi gereksiz — çubuğun kendisi anlatıyor. */

  .sk-satir { grid-area: sk; margin-top: 7px !important; }

  /* Eylem çifti gizleniyor (üstteki açıklamaya bak). */

  /* Hata defterindeki çöz butonu: başlığın hemen altında, tam genişlik. */
  .nb-coz-btn { width: 100%; margin-bottom: 12px; }

  /* "tıklayarak açıklamayı gör · ✕ ile sayfayı yırt" — dar ekranda iki
     satıra sarıp başlığı dağıtıyordu. Kartların kendi üstünde zaten
     "Açıklamayı gör ▼" yazıyor; ipucu gereksiz. */
  .nb-ipucu { display: none !important; }
}

/* Masaüstünde buton sola yaslı ve dar dursun. */
.nb-coz-btn { margin-bottom: 14px; }

/* ═══════════ DENEME BEKLEME GERİ SAYIMI ════════════════════════════
   "Başlat" butonu, hak dolduğunda saate dönüşüyor; süre bitince
   kendiliğinden butona dönüyor. Kullanıcı ne zaman girebileceğini
   butona basıp hata almadan görüyor. */
.dnm-sayac-kutu{
  display:flex; align-items:center; gap:12px;
  margin:0 14px 12px; padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
}
.dnm-sayac-ikon{
  flex:none; width:38px; height:38px; border-radius:12px; display:grid;
  place-items:center; color:#E2B76D; background:rgba(226,183,109,.14);
  border:1px solid rgba(226,183,109,.26);
}
.dnm-sayac-orta{flex:1; min-width:0;}
.dnm-sayac-deger.buyuk{
  font-family:'Figtree',sans-serif; font-weight:800; font-size:22px;
  letter-spacing:-.02em; color:#fff; font-variant-numeric:tabular-nums; line-height:1.1;
}
.dnm-sayac-not{font-size:11px; color:rgba(255,255,255,.5); margin-top:1px;}
.dnm-sayac-alt-btn{
  flex:none; background:none; border:1px solid rgba(226,183,109,.4);
  color:#E2B76D; border-radius:12px; padding:8px 12px; cursor:pointer;
  font-family:'Figtree',sans-serif; font-weight:800; font-size:12px; white-space:nowrap;
}
.dnm-sayac-alt-btn:hover{background:rgba(226,183,109,.1);}

/* Beklerken paket satırları sönük ve tıklanamaz. */
.dnm-paket.bekliyor{opacity:.5; cursor:default;}
.dnm-paket.bekliyor:hover{transform:none; box-shadow:none;}
.dnm-paket-git.dnm-sayac{
  display:flex; flex-direction:column; align-items:flex-end; gap:0; line-height:1.15;
}
.dnm-paket-git.dnm-sayac .dnm-sayac-deger{
  font-variant-numeric:tabular-nums; font-size:13px;
}
.dnm-sayac-alt{font-size:9px; font-weight:600; opacity:.7; letter-spacing:.04em;}

/* Profil kartındaki küçük sayaç ("Yeni deneme çöz" yerine). */
.dnm-kart-sayac{
  display:flex; align-items:baseline; justify-content:center; gap:7px;
  margin:14px 0 0; padding:11px; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}
.dnm-kart-sayac .dnm-sayac-deger{
  font-family:'Figtree',sans-serif; font-weight:800; font-size:17px; color:#E2B76D;
  font-variant-numeric:tabular-nums;
}
.dnm-kart-sayac span:last-child{font-size:11.5px; color:rgba(255,255,255,.55);}

@media(max-width:560px){
  .dnm-sayac-kutu{flex-wrap:wrap;}
  .dnm-sayac-alt-btn{width:100%;}
}

/* ══════════════════════════════════════════════════════════════════
   PREMIUM HAREKET KATMANI
   Buradaki amaç yeni animasyon eklemek değil, mevcut etkileşimlere
   TEK BİR FİZİK vermek. Dosyanın geneli 27 farklı süre ve 31 farklı
   easing kullanıyor; yeni yazılan her şey buradaki token'lardan
   beslenmeli, eskiler de zamanla buraya bağlanmalı.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* Dört süre yeter. Daha fazlası fark edilmiyor, sadece dağınıklık. */
  --motion-instant: 140ms;   /* basma geri bildirimi (120–160ms) */
  --motion-fast:    180ms;   /* hover, renk geçişi */
  --motion-base:    260ms;   /* panel, gölge, ekran */
  --motion-slow:    420ms;   /* açıklama gibi içerik açılışları */

  /* Üç eğri + giriş: Apple-style entrance ease */
  --ease-standard: cubic-bezier(.2,.8,.2,1);
  --ease-out:      cubic-bezier(.16,1,.3,1);
  --ease-in:       cubic-bezier(.4,0,1,1);
  --ease-enter:    cubic-bezier(.22,.7,.2,1);
  /* Apple sheet eğrisi: hızlı kalkış, uzun ve sakin oturuş. Ekran,
     soru ve şık kaymaları bununla. Yay (taşma) yok. */
  --ease-apple:    cubic-bezier(.32,.72,0,1);
  /* İkonlar: küçükten netleşerek büyüme. */
  --ease-icon:     cubic-bezier(.2,0,0,1);

  /* Yay fiziği (25 Ekim). Parmağa bağlı hareketler (basma, çekilen panel, anahtar, seçim) yayla oturur:
     --yay kritik sönümlü (taşmaz, uzun sakin oturuş), --yay-zipla hafif yaylı (%4 taşıp yerine gelir).
     Eskiden 33 yerde %15–%56 taşan "çizgi film" eğrileri vardı; hepsi --yay-zipla'ya bağlandı.
     linear() desteklemeyen tarayıcıda yakın bir cubic-bezier. */
  --yay:       cubic-bezier(.3,.8,.25,1);
  --yay-zipla: cubic-bezier(.3,1.2,.5,1);

  /* Gölge iki katmanlı: yakın kenar + uzak yayılma. Tek katmanlı
     gölgeler ucuz durur, çünkü gerçek ışık öyle davranmıyor. */
  --premium-shadow:       var(--golge-2);
  --premium-shadow-hover: var(--golge-3);
  --premium-focus:        0 0 0 4px rgba(var(--primary-rgb),.12);
}
/* Android'in dokunma vurgusu (düğmenin üstünde yanıp sönen gri/mavi kutu) yok: dokunuşun karşılığı artık basma
   tepkisi (app.js, BASMA TEPKİSİ). Özellik kalıtılıyor; klavye odağı halkaları (:focus-visible) yerinde. */
html{-webkit-tap-highlight-color:transparent;}
@supports (animation-timing-function: linear(0, 1)){
  :root{
    --yay: linear(0, 0.011 1.7%, 0.038 3.3%, 0.078 5%, 0.179 8.3%, 0.401 15%, 0.503 18.3%, 0.592 21.7%, 0.669 25%, 0.734 28.3%,
      0.788 31.7%, 0.85 36.7%, 0.895 41.7%, 0.936 48.3%, 0.966 56.7%, 0.986 68.3%, 0.998 90%, 1);
    --yay-zipla: linear(0, 0.014 1.7%, 0.052 3.3%, 0.106 5%, 0.173 6.7%, 0.325 10%, 0.482 13.3%, 0.625 16.7%, 0.689 18.3%, 0.748 20%,
      0.8 21.7%, 0.846 23.3%, 0.886 25%, 0.92 26.7%, 0.972 30%, 1.006 33.3%, 1.026 36.7%, 1.038 41.7%, 1.031 50%, 1.006 66.7%, 0.999 86.7%, 1);
  }
}

/* ── Düğme fiziği ───────────────────────────────────────────────── */
.btn,.dusky-send{
  -webkit-tap-highlight-color:transparent;
  transform:translate3d(0,0,0);
  transition:transform var(--motion-fast) var(--ease-out),
             box-shadow var(--motion-base) var(--ease-out),
             background-color var(--motion-fast) ease,
             border-color var(--motion-fast) ease,
             color var(--motion-fast) ease,
             opacity var(--motion-fast) ease;
}
/* Basma: 0.98 → 1, 120–160ms — spec */
.btn:active:not(:disabled),.cta:active:not(:disabled){
  transform:translate3d(0,0,0);
  transition-duration:var(--motion-instant);
}

/* ── Düğme YÜZEYLERİ bu katmanda YOK ────────────────────────────
   Buraya bir zamanlar .btn.go için koyu gradyan, .setup-cta-btn için
   düz beyaz ve yeni gölgeler yazılmıştı. Hiçbiri istenmemişti ve
   Hızlı Çöz'ün turkuazını söndürüyorlardı.

   Kural: bu katman HAREKETİ tanımlar — süre, eğri, basma, odak.
   Rengi, zemini ve durağan gölgeyi düğmelerin kendi kuralları
   belirler (yukarıda, dosyanın gövdesinde). Yeni bir yüzey eklemek
   istersen onu buraya değil, ilgili bileşenin kendi kuralına yaz. */

/* ── Klavye odağı ───────────────────────────────────────────────── */
/* :focus-visible sayesinde fare ile tıklayanda halka çıkmıyor,
   yalnızca klavyeyle gezene görünüyor. Tek halka, her öğede aynı. */
:focus-visible{outline:2px solid var(--primary-deep); outline-offset:2px;}
/* Görünen çerçevesi ::before olan düğmelerde halka çerçevenin etrafında. */
.tb-link:focus-visible,.ok-cikis:focus-visible,.ok-dugme:focus-visible,.konu-ac:focus-visible{outline:none;}
.tb-link:focus-visible::before,.ok-cikis:focus-visible::before,.ok-dugme:focus-visible::before{outline:2px solid var(--primary-deep); outline-offset:2px;}
/* Branş listesi kenarda kırpılıyor (.konu-columns): halka içeride. */
.konu-ac:focus-visible::before{outline:2px solid var(--primary-deep); outline-offset:-2px;}
.konu-row > .konu-tik:focus-visible{outline-offset:-2px; border-radius:8px;}

/* ── Kartlar ────────────────────────────────────────────────────── */
/* Kart zıplamıyor; 1 piksel kalkıp gölgesi açılıyor.
   Durağan gölge kartın kendi kuralından geliyor (var(--shadow));
   burada yalnızca hareketi tanımlıyoruz. */
.card{
  transform:translate3d(0,0,0);
  transition:transform var(--motion-base) var(--ease-out),
             box-shadow var(--motion-slow) var(--ease-out),
             border-color var(--motion-base) ease;
}

/* ── Soru seçenekleri ───────────────────────────────────────────── */
/* Buraya en çok dokunulan yer olduğu için en sakin davranış gerekiyor:
   deneme modunda öğrenci bu etkileşimi 120 kez yaşıyor. */
.opt{
  transform:translate3d(0,0,0);
  transition:transform 140ms var(--ease-enter),
             border-color 140ms ease,
             background-color 140ms ease,
             box-shadow var(--motion-base) var(--ease-out);
}

.bub{
  transition:transform 140ms var(--ease-enter),
             background-color 140ms ease,
             border-color 140ms ease,
             color 140ms ease;
}
.opt.sel{ animation:premiumAnswerSelect 360ms var(--ease-out); }
@keyframes premiumAnswerSelect{
  0%  { box-shadow:0 0 0 0 rgba(var(--primary-rgb),.16); }
  100%{ box-shadow:0 0 0 7px rgba(var(--primary-rgb),0); }
}

/* DİKKAT: reveal burada KORUNUYOR. Taslakta yalnızca premiumWrong
   yazılmıştı ve animation kısayolu mevcut "reveal + softShake"
   çiftini eziyordu. reveal, yanlış şıkkın kırmızı halka darbesi —
   doğru şıkta (.opt.ok) çalışmaya devam ettiği için burada
   silinseydi doğru halkalanıp yanlış halkalanmazdı. */
/* Şık geri bildirimi tek seferlik sınıflarla (an-dogru / an-yanlis):
   yalnızca seçilen şıkta, yalnızca seçimden sonraki ilk çizimde çalar.
   Eskiden .ok/.no her render'da (ör. Dusky düğmesi) yeniden oynuyordu.
   Yalnızca transform + opacity; parıltı/gölge yok. */
.opt.ok, .opt.no{ animation:none; }
.opt.an-yanlis{ animation:premiumWrong 300ms var(--ease-standard); }
.opt.an-dogru{ position:relative; animation:sikDogru 320ms var(--ease-out); }
.opt.an-dogru::after{
  content:""; position:absolute; inset:-1.5px; border-radius:inherit;
  border:2px solid var(--good); pointer-events:none; opacity:0;
  animation:sikDogruHalka 420ms var(--ease-out);
}
@keyframes sikDogru{ 40%{ transform:scale(1.015); } }
@keyframes sikDogruHalka{ 0%{ opacity:.7; transform:scale(1); } 100%{ opacity:0; transform:scale(1.03); } }
@keyframes premiumWrong{
  0%,100%{ transform:translateX(0); }
  30%    { transform:translateX(-2px); }
  65%    { transform:translateX(2px); }
}

/* ── Açıklama paneli ────────────────────────────────────────────── */
.explain{ animation:premiumExplainIn var(--motion-slow) var(--ease-out) both; }
@keyframes premiumExplainIn{
  from{ opacity:0; transform:translate3d(0,8px,0) scale(.995); }
  to  { opacity:1; transform:none; }
}

/* ── Ekran geçişi ───────────────────────────────────────────────── */
/* Taslaktaki premiumScreenEnter ALINMADI: .screen-enter üzerine kurulu
   18 kurallık kademeli giriş sistemi zaten var ve üstüne View
   Transition biniyor. Dördüncü katman eklemek yerine geçişin fiziğini
   token'lara bağlıyoruz. 320ms yerine 260ms, çünkü soru çözerken
   ileri geri gidilen bir ekranda 320ms hissediliyor. */
::view-transition-old(root){
  animation:150ms var(--ease-in) both premiumPageOut;
}
::view-transition-new(root){
  animation:var(--motion-base) var(--ease-out) 40ms both premiumPageIn;
}
@keyframes premiumPageOut{
  to{ opacity:0; transform:translate3d(0,-4px,0) scale(.998); }
}
@keyframes premiumPageIn{
  from{ opacity:0; transform:translate3d(0,7px,0) scale(.997); }
}

/* ── Dusky ──────────────────────────────────────────────────────── */
/* Panel baloncuğun durduğu noktadan açılıyor: transform-origin panelin
   sağ alt dışında, yani büyüme hareketi düğmeden çıkıyormuş gibi. */
.dusky-panel{
  opacity:0;
  transform:translate3d(0,12px,0) scale(.985);
  transform-origin:calc(100% - 28px) calc(100% + 60px);
  transition:opacity var(--motion-base) ease,
             transform 360ms var(--ease-out),
             box-shadow var(--motion-slow) var(--ease-out);
}
.dusky-panel.on{ opacity:1; transform:translate3d(0,0,0) scale(1); }

.dusky-bubble{
  transition:transform var(--motion-fast) var(--ease-out),
             box-shadow var(--motion-base) var(--ease-out),
             opacity var(--motion-base) var(--ease-out);
}
/* Hover / tap / open base blokta; burada yalnızca send tap. */


/* ── Girdi alanları ─────────────────────────────────────────────── */
input,textarea,select{
  transition:border-color var(--motion-fast) ease,
             box-shadow var(--motion-base) var(--ease-out),
             background-color var(--motion-base) ease;
}
input:focus,textarea:focus,select:focus{
  box-shadow:0 0 0 4px rgba(var(--primary-rgb),.10);
}

/* ── Modal: perde sönümlenir, kart gelir ────────────────────────────
   Eskiden ikisi de `fadeUp` kullanıyordu ve o keyframe translateY(12px)
   taşıyor — tam ekran bulanık perdenin yukarı süzülmesi demek. Perde
   artık yalnızca opaklık değiştiriyor; hareket kartın işi. */
.modal-bg{ animation:modalPerde var(--motion-fast) var(--ease-out) both; }
@keyframes modalPerde{ from{ opacity:0; } to{ opacity:1; } }

.modal-bg > .modal{ animation:modalGir 300ms var(--ease-out) both; }
/* Kapanış: perde söner, kart hafifçe iner. Eskiden bir karede yok
   oluyordu. Kapanan modal tıklamayı tutmaz. */
.modal-bg.modal-cikis{ animation:modalPerdeCik 170ms var(--ease-in) both; pointer-events:none; }
.modal-bg.modal-cikis > .modal{ animation:modalCik 170ms var(--ease-in) both; }
@keyframes modalPerdeCik{ to{ opacity:0; } }
@keyframes modalCik{ to{ opacity:0; transform:translateY(8px) scale(.98); } }
@keyframes modalGir{
  from{ opacity:0; transform:translateY(14px) scale(.975); }
  to  { opacity:1; transform:none; }
}

/* ── Paylaşılan öğeler: sabit olan sabit kalsın ─────────────────────
   View Transition belgeyi tek parça sönümlüyor. Üst çubuk ve Dusky
   düğmesi ekrandan ekrana KONUM DEĞİŞTİRMİYOR, ama sönümlemeye
   girdikleri için her geçişte titriyorlardı. Kendi adlarını alınca
   tarayıcı onları ayrı katman olarak taşıyor — yerlerinde duruyorlar.

   Bu adlar sayfada BENZERSİZ olmak zorunda; çakışırsa tarayıcı geçişi
   tamamen atlar. O yüzden `.card` gibi çok geçen bir sınıfa isim
   verilmiyor (ölçüm: 6 ayrı yerde kullanılıyor). */
.topbar{ view-transition-name:ust-cubuk; }
.dusky-bubble{ view-transition-name:dusky-dugme; }

/* Adlandırılmış öğeler kendi geçişlerini alıyor; kök animasyonu
   onlara uygulanmasın diye sadece yerinde tutuyoruz. */
::view-transition-old(ust-cubuk),
::view-transition-new(ust-cubuk),
::view-transition-old(dusky-dugme),
::view-transition-new(dusky-dugme){
  animation:none;
  mix-blend-mode:normal;
}
/* Üst çubuk artık ekrandan ekrana değişebiliyor (küçük başlık): eski ve yeni görüntü üst üste kalıp
   yazılar çakışmasın, geçişte yalnızca yenisi görünür (zaten yerinde duruyor). */
::view-transition-old(ust-cubuk){ visibility:hidden; }

@media (prefers-reduced-motion:reduce){
  .modal-bg,.modal-bg > .modal{ animation:none !important; }
}

/* ── İskelet yükleme ────────────────────────────────────────────── */
/* Tek iskelet: düz zemin, köşe --r, opaklıkta yumuşak nabız (gradyan
   yok). Hareket azaltma açıkken sabit; şekil zaten bilgi veriyor. */
.iskelet{display:block; background:var(--line-soft); border-radius:var(--r);
  animation:iskeletNabiz 1.2s ease-in-out infinite alternate;}
@keyframes iskeletNabiz{from{opacity:1} to{opacity:.55}}
@media (prefers-reduced-motion:reduce){ .iskelet{animation:none;} }

/* Soru kartı iskeleti: gerçek kartla aynı boşluklar (.qil, .qtop, .qtext, .opts). */
.isk-kume{height:32px;}
.isk-qtop{height:38px;}
.isk-soru{display:flex; flex-direction:column; gap:10px; margin-bottom:24px;}
.isk-satir{height:18px; border-radius:var(--r-sm);}
.isk-sik{height:62px;}
@media (max-width:560px){ .isk-soru{margin-bottom:18px;} .isk-sik{height:54px;} }
@media (max-width:380px){ .isk-sik{height:52px;} }

/* Lig ve arkadaş sıralaması yüklenirken. */
.lig-iskelet{display:grid; gap:var(--s-2);}
.lig-iskelet .iskelet{height:48px;}
.lig-iskelet .iskelet.buyuk{height:150px;}

/* Ekran okuyucu için: iskelet görseldir, durum metinle de söylensin. */
.gorunmez{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── Profil bölüm geçişi ────────────────────────────────────────── */
.panel-gir{ animation:panelGir 180ms var(--ease-out) both; }
@keyframes panelGir{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:none; }
}

/* ── Setup: progress + chips stagger 40ms; sticky CTA fade ───────── */

.screen-enter .konu-row,
.screen-enter .seg button{
  animation:staggerIn .28s var(--ease-enter) both;
}
.screen-enter .konu-row:nth-child(1),.screen-enter .seg button:nth-child(1){animation-delay:40ms}
.screen-enter .konu-row:nth-child(2),.screen-enter .seg button:nth-child(2){animation-delay:80ms}
.screen-enter .konu-row:nth-child(3),.screen-enter .seg button:nth-child(3){animation-delay:120ms}
.screen-enter .konu-row:nth-child(4),.screen-enter .seg button:nth-child(4){animation-delay:160ms}
.screen-enter .konu-row:nth-child(5),.screen-enter .seg button:nth-child(5){animation-delay:200ms}
.screen-enter .konu-row:nth-child(6),.screen-enter .seg button:nth-child(6){animation-delay:240ms}
.screen-enter .konu-row:nth-child(7),.screen-enter .seg button:nth-child(7){animation-delay:280ms}
.screen-enter .konu-row:nth-child(8),.screen-enter .seg button:nth-child(8){animation-delay:320ms}
.screen-enter .konu-row:nth-child(9),.screen-enter .seg button:nth-child(9){animation-delay:360ms}
.screen-enter .konu-row:nth-child(10),.screen-enter .seg button:nth-child(10){animation-delay:400ms}
.screen-enter .konu-row:nth-child(11),.screen-enter .seg button:nth-child(11){animation-delay:440ms}
.screen-enter .konu-row:nth-child(12),.screen-enter .seg button:nth-child(12){animation-delay:480ms}
.screen-enter .konu-row:nth-child(n+13),.screen-enter .seg button:nth-child(n+13){animation-delay:520ms}

/* ── Profil geçişi: yönlü ─────────────────────────────────────────
   Profil "içeri" bir sayfa: sağdan giriyor, geri dönünce soldan.
   Üst çubuk ve Dusky kendi adlarıyla yerinde kalıyor; kayan yalnızca
   içerik. Eskiden burada tam ekran turkuaz bir perde vardı (en az
   ~1 sn); veri hazır olsa bile bekletiyordu. */
/* Tam itme (iOS): solma yok. Yeni sayfa kenardan gelip eskisinin
   üstüne kayıyor; eskisi %30 geri çekilip hafifçe kararıyor. Aynı süre
   ve eğri: yeni sayfanın sol kenarı her an eskisinin sağ kenarının
   solunda kalıyor, aralarında boşluk açılmıyor. Geri dönüşte üstteki
   sayfa sağa çekilip alttakini açıyor (z-index ile eskisi üstte). */
html[data-gecis="ileri"]::view-transition-old(root){
  animation:520ms var(--ease-apple) both itmeGeriCekil;
}
html[data-gecis="ileri"]::view-transition-new(root){
  animation:520ms var(--ease-apple) both itmeKenardanGel;
  box-shadow:var(--golge-2);
}
html[data-gecis="geri"]::view-transition-old(root){
  z-index:2;
  animation:480ms var(--ease-apple) both itmeKenaraGit;
  box-shadow:var(--golge-2);
}
html[data-gecis="geri"]::view-transition-new(root){
  z-index:1;
  animation:480ms var(--ease-apple) both itmeGeriGel;
}
@keyframes itmeGeriCekil  { to  { transform:translate3d(-30%,0,0); filter:brightness(.93); } }
@keyframes itmeKenardanGel{ from{ transform:translate3d(100%,0,0); } }
@keyframes itmeKenaraGit  { to  { transform:translate3d(100%,0,0); } }
@keyframes itmeGeriGel    { from{ transform:translate3d(-30%,0,0); filter:brightness(.93); } }
/* Tarayıcı varsayılanı eski/yeni görüntüyü plus-lighter ile topluyor:
   çapraz sönümde doğru, kayan iki görüntüde ışık toplanıp sayfa bir an
   beyazlaşıyordu. Yönlü geçişlerde yeni görüntü eskisinin üstüne
   normal biçimde çiziliyor. */
html[data-gecis]::view-transition-old(root),
html[data-gecis]::view-transition-new(root){ mix-blend-mode:normal; }
/* Avatar üst çubuk ile profil ana sayfası arasında uçuyor (adı render() geçişin iki ucunda veriyor).
   Sayfa itmesiyle aynı süre ve eğri; yol ve boy birlikte, yuvarlak kalıyor. */
html[data-gecis]::view-transition-group(pf-avatar){ animation-duration:520ms; animation-timing-function:var(--ease-apple); }
html[data-gecis="geri"]::view-transition-group(pf-avatar){ animation-duration:480ms; }
html[data-gecis]::view-transition-old(pf-avatar),
html[data-gecis]::view-transition-new(pf-avatar){ height:100%; overflow:clip; border-radius:50%; }

/* ── Açılış → site (handoff) ──────────────────────────────────────
   iOS sayfa itmesi: site sağ kenardan gelip açılış ekranının üstüne
   kayıyor; açılış ekranı üçte bir kadar sola çekilip kararıyor. Bu
   geçişte üst çubuk ve Dusky kendi katmanlarına alınmıyor — alınırsa
   eski karede splash'in ÜSTÜNDE çizilirler (splash z-index'i geçiş
   katmanında işlemiyor). Sayfayla birlikte kayıyorlar. */
html[data-gecis="acilis"] .topbar,
html[data-gecis="acilis"] .dusky-bubble{ view-transition-name:none; }
html[data-gecis="acilis"]::view-transition-old(root){
  animation:560ms var(--ease-apple) both acilisCik;
}
html[data-gecis="acilis"]::view-transition-new(root){
  animation:620ms var(--ease-apple) both acilisGir;
  box-shadow:-18px 0 44px -20px rgba(8,40,36,.35);
}
@keyframes acilisCik{ to  { transform:translate3d(-30%,0,0); opacity:.55; filter:brightness(.92); } }
@keyframes acilisGir{ from{ transform:translate3d(100%,0,0); } }

/* Logo harfleri: geçiş sırasında sırayla, bulanıktan netleşerek. */
.brand .name .harf{ display:inline-block; animation:harfGir 620ms var(--ease-out) both; }
@keyframes harfGir{ from{ opacity:0; transform:translate3d(0,7px,0); filter:blur(4px); } }

/* ── Soru → soru ───────────────────────────────────────────────────
   Eskiden sonraki soruya geçince içerik bir karede değişiyordu. Kart
   yerinde kalıyor; soru metni ve şıklar yandan geliyor, şıklar 40ms
   arayla. Kısa tutuldu: yüzlerce soru art arda çözülüyor, uzun bir
   giriş ikinci testte yorar. Şıklar animasyon sırasında da tıklanabilir. */
/* "Sonraki soru": eski kart sola kayıp sönüyor; yeni soru aşağıdaki
   soru-ileri ile sağdan oturuyor. Süre JS'teki 180ms ile aynı. */
.soru-cikis{ animation:soruCikis 180ms var(--ease-standard) forwards; pointer-events:none; }
@keyframes soruCikis{ to{ opacity:0; transform:translate3d(-24px,0,0); } }
@media (prefers-reduced-motion:reduce){
  .opt.an-dogru, .opt.an-dogru::after, .opt.an-yanlis, .soru-cikis{ animation:none; }
}
.soru-ileri .qtext{ animation:soruSagdan 440ms var(--ease-apple) both; }
.soru-geri  .qtext{ animation:soruSoldan 400ms var(--ease-apple) both; }
.soru-ileri .opt{ animation:sikSagdan 420ms var(--ease-apple) both; }
.soru-geri  .opt{ animation:sikSoldan 380ms var(--ease-apple) both; }
.soru-ileri .opt:nth-child(1), .soru-geri .opt:nth-child(1){ animation-delay:40ms; }
.soru-ileri .opt:nth-child(2), .soru-geri .opt:nth-child(2){ animation-delay:80ms; }
.soru-ileri .opt:nth-child(3), .soru-geri .opt:nth-child(3){ animation-delay:120ms; }
.soru-ileri .opt:nth-child(4), .soru-geri .opt:nth-child(4){ animation-delay:160ms; }
.soru-ileri .opt:nth-child(5), .soru-geri .opt:nth-child(5){ animation-delay:200ms; }
@keyframes soruSagdan{ from{ opacity:0; transform:translate3d(28px,0,0); } }
@keyframes soruSoldan{ from{ opacity:0; transform:translate3d(-24px,0,0); } }
@keyframes sikSagdan { from{ opacity:0; transform:translate3d(24px,0,0); } }
@keyframes sikSoldan { from{ opacity:0; transform:translate3d(-20px,0,0); } }

/* ── Giriş / Kayıt formu ───────────────────────────────────────────
   Açılış ekranında form sağdan gelir, "← Geri" ile seçim soldan döner. */
.sp-auth.gate-ileri > *{ animation:gateIleri 460ms var(--ease-apple) both; }
.sp-auth.gate-geri  > *{ animation:gateGeri 420ms var(--ease-apple) both; }
@keyframes gateIleri{ from{ opacity:0; transform:translate3d(56px,0,0); } }
@keyframes gateGeri { from{ opacity:0; transform:translate3d(-40px,0,0); } }

/* ── Doğru / yanlış işareti ────────────────────────────────────────
   Eskiden yaylı "pop" (1.25'e taşıp geri dönüyordu). Artık 0.25'ten
   ve 4px bulanıklıktan netleşerek geliyor — yay yok. */
.opt .mk{ animation:isaretGir 300ms var(--ease-icon) both; }
@keyframes isaretGir{ from{ opacity:0; transform:scale(.25); filter:blur(4px); } }
/* 25 Ekim: işaret artık kendini çiziyor (kalem gibi; tik iki vuruş, çarpının iki çizgisi birlikte).
   Yanlış seçimde önce senin çarpın, 180 ms sonra doğru şıkkın tiki: göz sırayla gider. Cevaplanan
   şıkkın harf yuvarlağı yayla dolar. İlerleme çubuğu da yayla uzar. */
.opt .mk{ animation:none; }
.opt .mk svg path{ stroke-dasharray:20; stroke-dashoffset:20; animation:isaretCiz 340ms var(--ease-out) 40ms forwards; }
.opt.ok:not(.an-dogru) .mk svg path{ animation-delay:220ms; }
@keyframes isaretCiz{ to{ stroke-dashoffset:0; } }
.opt.an-dogru .bub, .opt.an-yanlis .bub{ animation:bubDol 460ms var(--yay-zipla) both; }
@keyframes bubDol{ from{ transform:scale(.7); } }
.soru-ekran .qil-cizgi i{ transition:width .6s var(--yay); }
@media (prefers-reduced-motion:reduce){
  .opt .mk svg path{ animation:none; stroke-dashoffset:0; }
  .opt.an-dogru .bub, .opt.an-yanlis .bub{ animation:none; }
}

/* Profil yüklenirken avatarın etrafında ince halka. 150ms gecikmeyle
   beliriyor: veri hızlı gelirse hiç görünmüyor — yanıp sönen bir
   gösterge hiç göstergeden kötü. */
.tb-avatar.yukleniyor::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid transparent;
  border-top-color:var(--primary); border-right-color:var(--primary);
  opacity:0; pointer-events:none;
  animation:avHalkaDon .7s linear infinite, avHalkaBelir .2s ease 150ms forwards;
}
@keyframes avHalkaDon{ to{ transform:rotate(360deg); } }
@keyframes avHalkaBelir{ to{ opacity:1; } }

/* ── Dusky: alt çubuğa ve modallara yer aç ─────────────────────────
   Telefonda kurulum adımlarının sabit alt çubuğu var (--alt-cubuk,
   JS ölçüyor). Düğme bottom:16px'te kalınca "Çöz →" düğmesinin sağ
   ucunu örtüyordu; çubuğun üstüne kalkıyor. Konum değişimini View
   Transition'daki dusky-dugme grubu yumuşak taşıyor. */
@media (max-width:560px){
  /* Kurulum adımlarında düğme alt çubuğun içinde, "Çöz" düğmesinin yanında:
     çubuk sağda düğme kadar yer bırakıyor, liste satırlarının üstüne binmiyor. */
  .dusky-bubble{ bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
  body:has(#dusky-root .dusky-bubble) .su-sticky{ padding-right:calc(16px + var(--dusky-boy) + 12px); }
  body:has(.su-sticky) .dusky-intro-tip{ display:none; }
  .dusky-intro-tip{ bottom:calc(28px + env(safe-area-inset-bottom,0px)); }
  .dusky-panel{
    bottom:calc(80px + var(--alt-cubuk, 0px));
    height:min(520px, calc(100dvh - 130px - var(--alt-cubuk, 0px)));
  }
}
/* Modal perdesi z-index 100, düğme 500: modal açıkken Dusky
   karartılmadan üstte ve dokunulabilir kalıyordu. */
body:has(.modal-bg:not(.modal-cikis)) #dusky-root .dusky-bubble{ opacity:0 !important; pointer-events:none !important; }
/* Soru ekranında düğme yok (odak modu kapalıyken de): şıkların ve "Sonraki"nin
   üstüne biniyordu. Soru hakkında Dusky'ye açıklamadaki "Dusky'ye sor" ile gidiliyor. */
body.quiz-ekrani #dusky-root .dusky-bubble, body.quiz-ekrani .dusky-intro-tip{ display:none; }
/* Telefonda sonuç ekranında da yok: ilk ekranda branş dağılımının üstüne biniyordu.
   Ekranın kendi Dusky kutusu ("Dusky'nin yorumu") var. */
@media (max-width:860px){ body.sonuc-ekrani #dusky-root .dusky-bubble, body.sonuc-ekrani .dusky-intro-tip{ display:none; } }
/* Diğer ekranlarda son satır balonun altında kalmasın. */
.wrap{ padding-bottom:calc(var(--dusky-boy) + 24px); }
.foot{ padding-bottom:calc(var(--dusky-boy) + 24px + var(--alt-cubuk, 0px)); }
#splash .sp-side-auth{ padding-bottom:calc(var(--dusky-boy) + 24px + env(safe-area-inset-bottom,0px)); }

/* ── Dokunma hedefleri ─────────────────────────────────────────────
   "← Geri" 23px yüksekliğindeydi. Negatif kenar boşluğu görünümü ve
   yerleşimi aynı tutuyor; yalnızca dokunulabilir alan büyüyor. */
.geri-link{ min-height:44px; padding:10px 10px 10px 0; margin-top:-10px; margin-bottom:8px; }
/* Branş satırı 51px ama dokunulan kısım (.konu-tik) 29px'ti: satırın
   üst ve alt ~10px'i ölüydü, dokununca hiçbir şey olmuyordu. Dokunma
   alanı satırın dolgusuna uzanıyor; yerleşim aynı kalıyor. */
.konu-row > .konu-tik{ align-self:stretch; margin:-11px 0; padding:11px 0; }
@media (max-width:560px){ .konu-row > .konu-tik{ margin:-10px 0; padding:10px 0; } }
/* Aç/kapa oku 30px ve "tümü" 33×15px: görünüm aynı, dokunma alanı büyük. */
.konu-col-all{ padding:12px 8px; margin:-12px -8px; }
/* KVKK / Kullanım Şartları kutuları 13px'ti. */
.intro-check input{ width:20px; height:20px; flex:0 0 20px; margin:0; }
.intro-check{ align-items:center; padding:3px 0; }

/* ── Odak modu: gizlenen üst çubuk yer kaplamasın ─────────────────
   Sticky kaldığı için görünmez hâlde 61px yer tutuyordu; altındaki
   22px ile birlikte sorunun üstünde ~83px boşluk kalıyordu. */
body.odak .topbar{ position:fixed; left:0; right:0; top:0; }

/* ── Hareket azaltma ────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  /* DURUM GÖSTERGELERİ SÜS DEĞİLDİR. Yukarıdaki süpürme yükleme
     çarkını donduruyordu; kullanıcı dönmeyen bir çember görüp
     uygulamanın kilitlendiğini sanardı. Hareket azaltma tercihi
     dekorasyonu kapatır, durum bildirimini değil. */
  .spin{
    animation-duration:.8s !important;
    animation-iteration-count:infinite !important;
  }
  .dusky-typing span{
    animation-duration:1.1s !important;
    animation-iteration-count:infinite !important;
  }
  /* İskelet (.iskelet) kendi kuralında sabitleniyor; şekli durum bilgisi. */
}

/* ══ Sadeleştirme (adım 2) ══════════════════════════════════════════════
   Büyük harfli + aralıklı etiketler bölüm başlıklarında normal yazıya
   döndü; sınav kimliğindeki küçük etiketler (deneme künyesi vb.) kaldı. */
.dash-section-title,.dnmp-alt-baslik,.lig-eyebrow,.frnd-istek-baslik{
  text-transform:none; letter-spacing:-.005em; font-size:14px; font-weight:700; color:var(--ink-soft);}
.dy-etiket{text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:700;}
.explain .eh,.rq .rt,.qtag,.konu-col-all{text-transform:none; letter-spacing:0;}
.intro-field label, .auth-field label{text-transform:none; letter-spacing:0; font-size:13px; font-weight:600;}
/* Altın ince çizgiler (deneme kartlarının tepesinde) — süs, kalktı. */
.dnm-serit::before, .dnm-kart::before, .dnmp::before, .dsn-ust::before{display:none;}
/* Rozet/seviye çizimleri: kapların emoji için verilmiş zeminleri kalktı. */
.rozet-svg{display:block; flex:none;}
/* ══ Ödül kutlaması (test bitiminde) ═══════════════════════════════════
   Stili 30 Ağustos'taki elle yüklemede (da7de90) silinmişti; pencere
   stilsiz, sayfanın dibinde düz metin olarak açılıyordu. Yeni ölçekle
   geri geldi. Genel "hareketi azalt" kuralı animasyonları kapatıyor;
   hiçbir öğenin taban durumu opacity:0 değil. */
.odul-bg{position:fixed; inset:0; z-index:11000; display:grid; place-items:center; padding:24px;
  background:rgba(8,20,26,.72);
  animation:odulBgAc .2s ease both;}
@keyframes odulBgAc{from{opacity:0}to{opacity:1}}
.odul-bg.kapaniyor{animation:odulBgKapa .26s ease both;}
@keyframes odulBgKapa{to{opacity:0}}
.odul-canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
.odul-kart{position:relative; width:min(360px,100%); padding:32px 24px 22px; text-align:center;
  background:var(--surface); border-radius:16px; box-shadow:var(--golge-3);
  animation:odulKartGir .5s var(--ease-apple) both;}
@keyframes odulKartGir{from{opacity:0; transform:translateY(22px) scale(.94);} to{opacity:1; transform:none;}}
.odul-kart.degisiyor{animation:odulKartDegis .34s cubic-bezier(.3,.8,.3,1) both;}
@keyframes odulKartDegis{0%{opacity:1; transform:none;} 40%{opacity:0; transform:translateX(-24px) scale(.97);}
  60%{opacity:0; transform:translateX(24px) scale(.97);} 100%{opacity:1; transform:none;}}
.odul-ikon-wrap{position:relative; width:112px; height:112px; margin:0 auto 18px; display:grid; place-items:center;}
.odul-halka{position:absolute; inset:4px; border-radius:50%; border:2px solid var(--primary);
  animation:odulHalka 1.6s cubic-bezier(.2,.7,.3,1) infinite;}
.odul-halka:nth-child(3){animation-delay:.55s;}
@keyframes odulHalka{0%{transform:scale(.7); opacity:.5;} 100%{transform:scale(1.25); opacity:0;}}
.odul-parilti{display:none;}
.odul-ikon{position:relative; display:grid; place-items:center; animation:odulIkonGir .6s var(--yay-zipla) .1s both;}
@keyframes odulIkonGir{from{transform:scale(.2) rotate(-25deg);} to{transform:none;}}
.odul-tip{margin-bottom:6px; font-size:13px; font-weight:700; color:var(--primary-deep);
  animation:odulYukari .45s var(--ease-apple) .28s both;}
.odul-baslik{margin-bottom:8px; font:800 22px/1.2 'Figtree',sans-serif; letter-spacing:-.015em; color:var(--ink);
  animation:odulYukari .45s var(--ease-apple) .36s both;}
.odul-aciklama{font-size:13.5px; line-height:1.55; color:var(--ink-soft); animation:odulYukari .45s var(--ease-apple) .44s both;}
@keyframes odulYukari{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.odul-noktalar{display:flex; justify-content:center; gap:6px; margin:20px 0 14px;}
.odul-nokta{width:6px; height:6px; border-radius:50%; background:var(--line); transition:all .25s;}
.odul-nokta.aktif{width:18px; border-radius:999px; background:var(--primary-deep);}
.odul-btn{width:100%; height:48px; margin-top:18px; border:0; border-radius:12px; cursor:pointer;
  background:var(--primary-deep); color:#fff; font:700 15px 'Figtree',sans-serif; box-shadow:var(--golge-2);
  transition:transform var(--motion-instant) ease; animation:odulYukari .45s var(--ease-apple) .58s both;}
.odul-noktalar + .odul-btn{margin-top:0;}

@media (max-width:420px){ .odul-kart{padding:26px 18px 18px;} .odul-baslik{font-size:20px;} }

.rozet-emoji-wrap, .rozet-card.unlocked .rozet-emoji-wrap, .sm-amblem, .sm-satir.aktif .sm-amblem, .sm-satir.gecildi .sm-amblem{
  background:none; box-shadow:none;}
.rozet-card.locked .rozet-emoji{filter:grayscale(1); opacity:.45;}
/* Kartlardaki renkli kare ikon zeminleri kalktı: ikon tek başına. */

.ap-kart-baslik{margin-top:10px;}

.pf-modul-ikon, .pf-modul.m-denemeler .pf-modul-ikon, .pf-modul.m-hatalar .pf-modul-ikon,
.pf-modul.m-flashcardlar .pf-modul-ikon, .pf-modul.m-ayarlar .pf-modul-ikon{width:28px; height:28px; background:none; border-radius:0;}
.pf-modul.m-denemeler .pf-modul-ikon{color:var(--ink);}

/* ══ Test sonucu ekranı ═════════════════════════════════════════════════
   Başlık + XP, bilgi hapı, halka, sayı kutuları, koyu yeşil net kartı
   (ana sayfadaki Hızlı Çöz kartıyla aynı renk), branş/konu analizi ve
   filtreli soru incelemesi. */
.sn-ust{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 2px 12px;}
.sn-baslik{margin:0; font-weight:800; font-size:22px; line-height:1.2; letter-spacing:-.02em; color:var(--ink);}
.sn-xp{display:inline-flex; align-items:center; gap:5px; flex:none; height:28px; padding:0 11px; border-radius:999px; white-space:nowrap;
  background:var(--primary-wash); color:var(--primary-darker); border:1px solid rgba(var(--primary-rgb),.22);
  font:700 12.5px 'Figtree',sans-serif; font-variant-numeric:tabular-nums;}
.sn-meta{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 8px;
  width:fit-content; max-width:100%; margin:0 auto 18px; padding:6px 13px; border-radius:16px;
  background:var(--surface-2); border:1px solid var(--line);
  font-size:12px; font-weight:600; line-height:1.4; color:var(--ink-soft); text-align:center;}
.sn-meta i{width:3px; height:3px; border-radius:50%; background:var(--ink-faint); flex:none;}

/* Sonuç: tek büyük sayı (net) ve tek özet satırı. Kart gölgesiz, kenarlıklı. */
/* B2 sonuç bloğu: düz --primary-deep zemin, gradyan/gölge yok. */
.sn-kart{background:var(--primary-deep); color:var(--surface); border-radius:var(--r-lg); padding:18px 22px 20px; margin-bottom:var(--s-3);}
.sn-kart .sn-meta{justify-content:flex-start; width:auto; margin:0; padding:0; border:0; border-radius:0; background:none; font-size:12.5px; text-align:left; color:var(--primary-wash);}
.sn-kart .sn-meta i{background:var(--primary-wash);}
.sn-kart .sn-meta b{color:var(--surface);}
.sn-skor{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-3); margin-top:18px;}
.sn-yuzde{font-weight:800; font-size:clamp(72px,22vw,96px); line-height:.9; letter-spacing:-.05em; font-variant-numeric:tabular-nums;}
.sn-yuzde small{font-size:.42em; letter-spacing:0; vertical-align:top; margin-right:2px; color:var(--primary-wash); position:relative; top:6px;}
.sn-yuzde b{font-weight:800;}
.sn-sayi{text-align:right; padding-bottom:4px;}
.sn-sayi b{display:block; font-weight:800; font-size:34px; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.sn-sayi span{font-size:12.5px; font-weight:600; color:var(--primary-wash);}
.sn-ozet{margin-top:8px; font-size:13px; line-height:1.5; color:var(--primary-wash);}
.sn-serit{display:flex; gap:2px; height:6px; margin-top:18px;}
.sn-serit i{display:block; height:100%; border-radius:var(--r-pill);}
.sn-lejant{display:flex; gap:16px; margin-top:8px; font-size:13px; color:var(--primary-wash);}
.sn-lejant b{font-family:'Figtree',sans-serif; font-weight:700; color:var(--surface);}
/* Misafire: bu testi kaydet (hesap aç). Düz kart, tek düğme. */
.sn-kaydet{display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3); background:var(--surface);
  border:1px solid var(--primary); border-radius:var(--r-lg);}
.sn-kaydet-metin{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.sn-kaydet-metin b{font:800 16px/1.25 'Figtree',sans-serif; letter-spacing:-.01em; color:var(--ink);}
.sn-kaydet-metin span{font-size:13.5px; line-height:1.45; color:var(--ink-soft);}
.sn-kaydet-btn{flex:none; min-height:44px; padding:0 var(--s-4); border:0; border-radius:var(--r-pill);
  background:var(--primary-deep); color:#fff; font:700 14px 'Figtree',sans-serif; cursor:pointer;}
@media (hover:hover){ .sn-kaydet-btn:hover{background:var(--primary-darker);} }
@media (max-width:380px){ .sn-kaydet{flex-direction:column; align-items:stretch;} }
.sn-kaydet.sn-kaydet-liste{flex-direction:column; align-items:stretch; gap:var(--s-2);}
.sn-kaydet-liste > b{font:800 16px/1.25 'Figtree',sans-serif; letter-spacing:-.01em; color:var(--ink);}
.sn-kaydet-maddeler{list-style:none; display:flex; flex-direction:column; gap:6px; margin:2px 0 var(--s-1); padding:0;}
.sn-kaydet-maddeler li{display:flex; align-items:flex-start; gap:8px; font-size:13.5px; line-height:1.45; color:var(--ink-soft);}
.sn-kaydet-maddeler .ikon{flex:none; margin-top:2px; color:var(--primary-deep);}
.sn-kaydet-liste .sn-kaydet-btn{width:100%;}
/* Akşam hatırlatması sorusu (üyeye, test sonunda) ve Ayarlar satırı. */
.sn-hatirlat-dugmeler{flex:none; display:flex; align-items:center; gap:var(--s-1);}
.sn-hatirlat-sonra{min-height:44px; padding:0 var(--s-2); border:0; background:none; color:var(--ink-soft);
  font:600 13.5px 'Figtree',sans-serif; cursor:pointer;}
@media (max-width:420px){ .sn-hatirlat{flex-direction:column; align-items:stretch;} .sn-hatirlat-dugmeler .sn-kaydet-btn{flex:1;} }
.ayar-hatirlatma{align-items:center; gap:var(--s-3);}
.ayar-hatirlatma .ayar-alt{flex:1; min-width:0; margin:0;}
/* %100 dört karakter: halkanın içine sığsın. */

.sn .sc{text-align:center; padding:10px 8px;}

.sn-bolum{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 2px 12px;}
.sn-bolum-baslik{margin:0; font-weight:800; font-size:18px; line-height:1.25; letter-spacing:-.015em; color:var(--ink);}
.sn-bolum-not{font-size:12px; font-weight:600; color:var(--ink-faint); white-space:nowrap;}
/* Branş çubukları kutusuz; satırlar ince çizgiyle ayrılıyor. */
.sn-analiz{padding:0 var(--s-1);}
.sn-brans{padding:var(--s-3) 0;}
.sn-brans + .sn-brans{border-top:1px solid var(--line);}
.sn-brans .track{position:relative; height:6px; background:var(--line); border-radius:var(--r-pill);}
.sn-brans .track i{background:var(--primary-deep); transition-duration:.38s;}
.sn-brans .track s{position:absolute; right:0; top:0; height:100%; background:var(--bad);}
.sn-brans .bran-top .bv em{font-style:normal; font-weight:600; color:var(--ink-faint);}
.sn-brans-dk{margin-top:4px; font-size:12.5px; color:var(--ink-faint);}
.sn-brans-dk .y{color:var(--bad-ink); font-weight:600;}
.sn-brans .bran-top .bv{color:var(--ink);}
.sn-brans .bran-top{gap:12px; margin-bottom:8px;}
.sn-brans .bran-top .bn{font-weight:700; min-width:0;}
.sn-brans .bran-top .bv{flex:none; font-weight:700; font-variant-numeric:tabular-nums;}
.sn-konular{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:6px;}
.sn-konular li{display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:12px; background:var(--surface-2);
  font-size:13px; line-height:1.35; color:var(--ink-soft);}
.sn-nokta{width:7px; height:7px; border-radius:50%; flex:none;}
.sn-konu-ad{flex:1; min-width:0;}
.sn-konular b{flex:none; font-size:12.5px; font-variant-numeric:tabular-nums;}
.sn-konular .sn-konu-daha{background:none; padding:2px 12px; font-size:12px; color:var(--ink-faint);}

.sn-hepsi{flex:none; background:none; border:0; padding:8px 0; cursor:pointer; white-space:nowrap;
  font:700 12.5px 'Figtree',sans-serif; color:var(--primary-darker);}
.sn-hepsi:hover{color:var(--ink);}
.sn-filtre{flex-wrap:wrap; overflow:visible; margin-bottom:12px;}
.sn-filtre .inc-fbtn.on{background:var(--primary-ink); border-color:var(--primary-ink);}
.sn-liste{display:flex; flex-direction:column; gap:10px;}
.sn-k{margin-bottom:0; border-radius:16px;}
.sn-k.y{border-color:rgba(224,71,63,.3);}
.sn-k .rev-h{padding:14px; gap:12px;}
.sn-k .rmark{width:28px; height:28px; margin-top:0;}
.sn-k .rmark.d{background:var(--good-wash); color:var(--good-ink);}
.sn-k .rmark.y{background:var(--bad-wash); color:var(--bad-ink);}
.sn-k .rmark.b{background:var(--line-soft); color:var(--ink-faint);}
.sn-k .rq{min-width:0;}
.sn-k-ust{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px;}
.sn-k-ust .rt{margin-bottom:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sn-rozet{flex:none; display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:999px; font-size:11px; font-weight:700;}
.sn-rozet.d{background:var(--good-wash); color:var(--good-ink);}
.sn-rozet.y{background:var(--bad-wash); color:var(--bad-ink);}
.sn-rozet.b{background:var(--line-soft); color:var(--ink-soft);}
.sn-k-soru{font-weight:600; font-size:14.5px; line-height:1.45; color:var(--ink);}
.sn-k:not(.open) .sn-k-soru{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.sn-k-ozet{display:flex; align-items:baseline; gap:5px; margin-top:6px; min-width:0; white-space:nowrap; font-size:12.5px;}
.sn-k-ozet .lab{color:var(--ink-faint);}
.sn-k-ozet b{font-weight:800;}
.sn-k-ozet b.d{color:var(--good-ink);} .sn-k-ozet b.y{color:var(--bad-ink);}
.sn-k-sik{min-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--ink-soft); margin-left:3px;}
.sn-k-ayrac{width:1px; height:11px; margin:0 5px; background:var(--line); align-self:center; flex:none;}
.sn-k.open .sn-k-ozet{display:none;}
.sn-k .rchev{align-self:center;}
.sn-k .rev-b{padding:0 16px 16px 54px;}

.sn-nav{flex-wrap:wrap;}
.sn-nav .btn{flex:1 1 auto; white-space:nowrap;}
.sn-nav .btn.go{background:var(--primary-ink); border-color:var(--primary-ink);}
.sn-nav .btn.go:hover:not(:disabled){background:#084A42;}
.sn-nav .btn.sn-cta{background:var(--primary); border-color:var(--primary); color:var(--ink); transition:transform var(--motion-instant) ease,background-color 180ms ease;}
.sn-nav .btn.sn-cta:active{ background:var(--primary-deep); border-color:var(--primary-deep); color:var(--surface);}
@media (prefers-reduced-motion:reduce){ .sn-brans .track i,.sn-nav .btn.sn-cta{transition:none;} }
.sn-nav .btn em{display:inline-grid; place-items:center; min-width:22px; height:20px; padding:0 6px; margin-left:8px; border-radius:999px;
  font-style:normal; font-size:11.5px; font-weight:800; background:var(--bad-wash); color:var(--bad-ink); vertical-align:1px;}
.sn-alt{display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:14px;}
.sn-not{display:flex; align-items:flex-start; gap:8px; max-width:460px; margin:0; font-size:12.5px; line-height:1.5; color:var(--ink-soft);}
.sn-not .ikon{flex:none; margin-top:2px; color:var(--primary-deep);}
.sn-ayar{background:none; border:0; cursor:pointer; padding:10px 12px; font:600 13px 'Figtree',sans-serif; color:var(--ink-soft);
  text-decoration:underline; text-underline-offset:3px;}
@media (min-width:561px){ .sn-meta{margin-left:0;} }
@media (max-width:560px){
  .sn .ring{width:120px; height:120px;}

  .sn-baslik{font-size:20px;}
  
  .card.sn-analiz{padding:2px 16px;}
  .sn-k .rev-b{padding:0 14px 16px;}
}
@media (max-width:360px){ .sn-bolum-not{display:none;}  }
/* Rozetlerim: çizim 56px, kutusu 48px kalmıştı; kilit simgesi madalyonun
   içine, etiketin yanına biniyordu. */
.rozet-emoji-wrap{width:56px; height:56px; border:0;}
/* "tümü" dokunma alanı sağa taşıp .konu-columns'ta kırpılıyordu: yalnızca sola uzasın. */
.konu-col-all{margin:-12px 0 -12px -8px; padding:12px 0 12px 8px;}
/* Telefonda rozet ve dürt bildirimleri Dusky düğmesinin üstüne biniyordu. */
@media (max-width:560px){
  .rozet-toast, .durt-toast{left:16px; right:16px; max-width:none; bottom:calc(86px + var(--alt-cubuk, 0px) + env(safe-area-inset-bottom, 0px));}
}

/* ══ SERİ KUTLAMASI (app-seri.js) ══ */
.sc{--sc-gunes:#E0A035; position:fixed; inset:0; z-index:999; background:var(--primary); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:max(24px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom)); overflow:hidden; opacity:0; pointer-events:none; transition:opacity .2s ease;}
.sc.on{opacity:1; pointer-events:auto;}
.sc-skip{position:absolute; top:max(18px,env(safe-area-inset-top)); right:18px; background:rgba(255,255,255,.16); border:0; color:#fff; font:600 14px 'Figtree',system-ui,sans-serif; padding:8px 14px; border-radius:var(--r-pill); cursor:pointer;}
.sc-mid{display:flex; flex-direction:column; align-items:center; margin-top:-40px;}
.sc-flame{width:132px; height:132px; transform:scale(0);}
.sc.go .sc-flame{animation:sc-pop .62s var(--yay-zipla) .18s forwards;}
/* Sayaç: Sora rakamının mürekkebi 96px hücrede ortada değil (üst 10px, alt 19px
   boşluk) ve pencere sert overflow kenarıyla kesiyordu. Kayarken giden rakamın alt
   kavisi tek başına 1-2px'lik şerit olarak üst kenarda kalıyordu. Rakam hücrede
   ortalanıyor (padding 4px) ve kenar, rakama değmeyen yumuşak bir maske. */
.sc-num{--sc-kenar:linear-gradient(transparent 0,transparent 2px,#000 13px,#000 calc(100% - 13px),transparent calc(100% - 2px));
  font:800 92px/1 Sora,system-ui,sans-serif; height:96px; overflow:hidden; margin-top:6px; letter-spacing:-2px;
  -webkit-mask-image:var(--sc-kenar); mask-image:var(--sc-kenar);}
.sc-num .roll{display:flex; flex-direction:column; transform:translateY(0);}
.sc-num .roll span{box-sizing:border-box; height:96px; padding-top:4px; display:block; text-align:center;}
.sc.go .sc-num .roll{animation:sc-roll .55s var(--yay-zipla) .85s forwards;}
.sc-t1{font:700 24px Figtree,system-ui,sans-serif; margin-top:6px;}
.sc-t2{font-size:16px; font-weight:500; opacity:.88; margin-top:6px;}
.sc-t1,.sc-t2,.sc-week{opacity:0; transform:translateY(12px);}
.sc.go .sc-t1{animation:sc-up .45s ease 1.1s forwards;}
.sc.go .sc-t2{animation:sc-up .45s ease 1.22s forwards;}
.sc-week{display:flex; gap:8px; margin-top:30px; background:rgba(255,255,255,.12); padding:14px 14px 12px; border-radius:20px;}
.sc.go .sc-week{animation:sc-up .45s ease 1.35s forwards;}
.sc .d{display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; font-weight:600;}
.sc .d b{width:34px; height:34px; border-radius:50%; border:2px solid rgba(255,255,255,.45); display:grid; place-items:center; position:relative;}
.sc .d.done b{background:#fff; border-color:#fff;}
.sc .d svg{width:18px; height:18px;}
.sc .d.done svg path{stroke:var(--primary-deep);}
.sc .d.today b{border-color:#fff;}
.sc .d.today b:before{content:""; position:absolute; inset:-2px; border-radius:50%; background:var(--sc-gunes); transform:scale(0);}
.sc .d.today svg{position:relative;}
.sc .d.today svg path{stroke:var(--ink); stroke-dasharray:24; stroke-dashoffset:24;}
.sc.go .d.today b:before{animation:sc-fill .4s var(--yay-zipla) 1.75s forwards;}
.sc.go .d.today svg path{animation:sc-draw .3s ease 2s forwards;}
.sc.go .d.today{animation:sc-nudge .4s ease 1.75s;}
.sc-dusky{position:absolute; left:24px; right:24px; bottom:118px; display:flex; align-items:center; gap:12px; opacity:0; transform:translateY(16px);}
.sc.go .sc-dusky{animation:sc-up .45s ease 2.25s forwards;}
.sc-dusky-av{width:52px; height:52px; border-radius:50%; background:#fff; flex:none; display:grid; place-items:center; overflow:hidden;}
.sc-dusky-av svg{width:42px; height:42px;}
.sc-dusky p{background:#fff; color:var(--ink); font-size:14px; font-weight:600; line-height:1.4; padding:10px 14px; border-radius:16px 16px 16px 4px;}
.sc-btn{position:absolute; left:24px; right:24px; bottom:max(28px,env(safe-area-inset-bottom)); border:0; border-radius:var(--r-lg); background:#fff; color:var(--primary-deep); font:700 17px Figtree,system-ui,sans-serif; padding:18px; cursor:pointer; transform:translateY(140%);}
.sc.go .sc-btn{animation:sc-slide .5s cubic-bezier(.22,1,.36,1) 2.45s forwards;}

.sc .cf{position:absolute; left:50%; top:38%; width:0; height:0; pointer-events:none;}
.sc .cf i{position:absolute; display:block; opacity:0;}
@media (min-width:560px){ .sc-dusky,.sc-btn{left:50%; right:auto; width:432px; margin-left:-216px;} }
/* Günlük hedef kutlaması (gc-, app-seri.js). Halka 1.2 sn'de dolar, hedeften bağımsız. */
.gc{position:fixed; inset:0; z-index:1000; background:var(--bg); color:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:max(24px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom)); overflow:hidden; opacity:0; pointer-events:none; transition:opacity .2s ease;}
.gc.on{opacity:1; pointer-events:auto;}
.gc-skip{position:absolute; top:max(18px,env(safe-area-inset-top)); right:18px; background:var(--surface); border:0; color:var(--ink-faint); font:600 14px 'Figtree',system-ui,sans-serif; padding:8px 14px; border-radius:var(--r-pill); cursor:pointer;}
.gc-mid{display:flex; flex-direction:column; align-items:center; margin-top:-70px;}
.gc-ring{position:relative; width:184px; height:184px;}
.gc-ring svg.r{width:184px; height:184px; transform:rotate(-90deg);}
.gc-ring .trk{stroke:var(--line);}
.gc-ring .val{stroke:var(--primary); stroke-dasharray:452.4; stroke-dashoffset:452.4;}
.gc.go .gc-ring .val{animation:gc-fill 1.2s cubic-bezier(.45,.05,.3,1) .3s forwards;}
.gc.go .gc-ring{animation:gc-lock .42s var(--yay-zipla) 1.52s;}
.gc-in{position:absolute; inset:0; display:grid; place-items:center;}
.gc-cnt{font:800 34px/1 Sora,system-ui,sans-serif; letter-spacing:-1px; font-variant-numeric:tabular-nums;}
.gc-cnt small{font-size:20px; color:var(--ink-faint); font-weight:700;}
.gc.go .gc-cnt{animation:gc-out .2s ease 1.6s forwards;}
.gc-chk{position:absolute; width:86px; height:86px; border-radius:50%; background:var(--primary); display:grid; place-items:center; transform:scale(0);}
.gc-chk path{stroke:#fff; stroke-dasharray:30; stroke-dashoffset:30;}
.gc.go .gc-chk{animation:sc-fill .4s var(--yay-zipla) 1.65s forwards;}
.gc.go .gc-chk path{animation:sc-draw .32s ease 1.88s forwards;}
.gc-t1{font:700 26px Figtree,system-ui,sans-serif; margin-top:26px;}
.gc-t2{font-size:16px; font-weight:500; color:var(--ink-soft); margin-top:6px;}
.gc-chips{display:flex; gap:8px; margin-top:18px;}
.gc-chips span{background:var(--surface); border-radius:var(--r-pill); padding:8px 14px; font-size:14px; font-weight:600; color:var(--ink-soft);}
.gc-chips b{color:var(--primary-deep); font-weight:800;}
.gc-t1,.gc-t2,.gc-chips{opacity:0; transform:translateY(12px);}
.gc.go .gc-t1{animation:sc-up .45s ease 1.95s forwards;}
.gc.go .gc-t2{animation:sc-up .45s ease 2.07s forwards;}
.gc.go .gc-chips{animation:sc-up .45s ease 2.2s forwards;}
.gc-dusky{position:absolute; left:24px; right:24px; bottom:118px; display:flex; align-items:center; gap:10px; opacity:0; transform:translateY(16px);}
.gc.go .gc-dusky{animation:sc-up .45s ease 2.4s forwards;}
.gc-dusky p{background:var(--surface); color:var(--ink); font-size:14px; font-weight:600; line-height:1.4; padding:10px 14px; border-radius:16px 16px 16px 4px;}
.gc-btn{position:absolute; left:24px; right:24px; bottom:max(28px,env(safe-area-inset-bottom)); border:0; border-radius:var(--r-lg); background:var(--primary-deep); color:#fff; font:700 17px Figtree,system-ui,sans-serif; padding:18px; cursor:pointer; transform:translateY(140%);}
.gc.go .gc-btn{animation:sc-slide .5s cubic-bezier(.22,1,.36,1) 2.6s forwards;}

.gc-burst{position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none;}
.gc-burst i{position:absolute; display:block; opacity:0;}
@media (min-width:560px){ .gc-dusky,.gc-btn{left:50%; right:auto; width:432px; margin-left:-216px;} }
@keyframes gc-fill{to{stroke-dashoffset:0}}
@keyframes gc-lock{40%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes gc-out{to{opacity:0; transform:scale(.6)}}
@keyframes sc-pop{0%{transform:scale(0) rotate(-12deg)}100%{transform:scale(1) rotate(0)}}
@keyframes sc-roll{to{transform:translateY(-96px)}}
@keyframes sc-up{to{opacity:1; transform:none}}
@keyframes sc-fill{to{transform:scale(1)}}
@keyframes sc-draw{to{stroke-dashoffset:0}}
@keyframes sc-nudge{50%{transform:translateY(-5px)}}
@keyframes sc-slide{to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .sc,.sc *{animation:none!important; transition:none!important;}
  .sc .sc-flame{transform:none;} .sc .sc-num .roll{transform:translateY(-96px);}
  .sc .sc-t1,.sc .sc-t2,.sc .sc-week,.sc .sc-dusky,.sc .sc-btn{opacity:1; transform:none;}
  .sc .d.today b:before{transform:none;} .sc .d.today svg path{stroke-dashoffset:0;}
  .sc .cf{display:none;}
  .gc,.gc *{animation:none!important; transition:none!important;}
  .gc .gc-ring .val{stroke-dashoffset:0;} .gc .gc-cnt{opacity:0;} .gc .gc-chk{transform:none;} .gc .gc-chk path{stroke-dashoffset:0;}
  .gc .gc-t1,.gc .gc-t2,.gc .gc-chips,.gc .gc-dusky,.gc .gc-btn{opacity:1; transform:none;}
  .gc .gc-burst{display:none;}
}
/* Seviye atlama kutlaması (lc-, app-seri.js). duscoz reklam prototipi; renkler sitenin
   kendi değişkenleri (zemin --ink, kalkan --primary, düğme serideki --sc-gunes). */
.lc{--sc-gunes:#E0A035; position:fixed; inset:0; z-index:1001; background:var(--ink); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:max(24px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom)); overflow:hidden; opacity:0; pointer-events:none; transition:opacity .2s ease;}
.lc.on{opacity:1; pointer-events:auto;}
.lc-skip{position:absolute; top:max(18px,env(safe-area-inset-top)); right:18px; background:rgba(255,255,255,.12); border:0; color:#fff; font:600 14px 'Figtree',system-ui,sans-serif; padding:8px 14px; border-radius:var(--r-pill); cursor:pointer;}
.lc-mid{display:flex; flex-direction:column; align-items:center; margin-top:-80px;}
.lc-badge{position:relative; width:150px; height:170px; transform:translateY(-300px);}
.lc.go .lc-badge{animation:lc-drop .62s var(--yay-zipla) .1s forwards;}
.lc-shield{position:absolute; inset:0; transform-origin:50% 50%;}
.lc.go .lc-shield{animation:lc-pulse .36s ease 1.28s;}
.lc-badge svg{position:absolute; inset:0; width:100%; height:100%;}
.lc-num{position:absolute; left:0; right:0; top:40px; height:80px; overflow:hidden; font:800 72px/80px Sora,system-ui,sans-serif; letter-spacing:-2px; text-align:center;}
.lc-num .roll{display:flex; flex-direction:column;}
.lc-num .roll span{height:80px; display:block;}
.lc.go .lc-num .roll{animation:lc-roll .5s var(--yay-zipla) .8s forwards;}
.lc-ring{position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none;}
.lc-ring i{position:absolute; display:block; opacity:0;}
.lc-t1{font:700 28px Figtree,system-ui,sans-serif; margin-top:26px;}
.lc-t2{font:600 17px 'Figtree',system-ui,sans-serif; color:var(--primary-wash); margin-top:4px;}
.lc-xp{width:220px; margin-top:16px;}
.lc-xp .tr{height:8px; border-radius:4px; background:rgba(255,255,255,.14); overflow:hidden;}
.lc-xp .tr i{display:block; height:100%; width:100%; background:var(--primary); border-radius:4px; transform-origin:0 50%; transform:scaleX(0);}
.lc.go .lc-xp .tr i{animation:lc-xp .6s cubic-bezier(.3,.7,.3,1) 1.6s forwards;}
.lc-xp small{display:block; text-align:center; margin-top:8px; font-size:13px; font-weight:600; color:rgba(255,255,255,.7); font-variant-numeric:tabular-nums;}
.lc-t1,.lc-t2,.lc-xp{opacity:0; transform:translateY(12px);}
.lc.go .lc-t1{animation:sc-up .45s ease 1.3s forwards;}
.lc.go .lc-t2{animation:sc-up .45s ease 1.4s forwards;}
.lc.go .lc-xp{animation:sc-up .45s ease 1.5s forwards;}
.lc-dusky{position:absolute; left:24px; right:24px; bottom:118px; display:flex; align-items:center; gap:10px; opacity:0; transform:translateY(16px);}
.lc.go .lc-dusky{animation:sc-up .45s ease 1.9s forwards;}
.lc-dusky p{background:#fff; color:var(--ink); font-size:14px; font-weight:600; line-height:1.4; padding:10px 14px; border-radius:16px 16px 16px 4px;}
.lc-btn{position:absolute; left:24px; right:24px; bottom:max(28px,env(safe-area-inset-bottom)); border:0; border-radius:var(--r-lg); background:var(--sc-gunes); color:var(--ink); font:700 17px Figtree,system-ui,sans-serif; padding:18px; cursor:pointer; transform:translateY(200%);}
.lc.go .lc-btn{animation:sc-slide .5s cubic-bezier(.22,1,.36,1) 2.05s forwards;}

@media (min-width:560px){ .lc-dusky,.lc-btn{left:50%; right:auto; width:432px; margin-left:-216px;} }
@keyframes lc-drop{0%{transform:translateY(-300px)}100%{transform:none}}
@keyframes lc-roll{to{transform:translateY(-80px)}}
@keyframes lc-pulse{45%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes lc-xp{to{transform:scaleX(var(--p,.3))}}
@media (prefers-reduced-motion:reduce){
  .lc,.lc *{animation:none!important; transition:none!important;}
  .lc .lc-badge{transform:none;} .lc .lc-num .roll{transform:translateY(-80px);} .lc .lc-xp .tr i{transform:scaleX(var(--p,.3));}
  .lc .lc-t1,.lc .lc-t2,.lc .lc-xp,.lc .lc-dusky,.lc .lc-btn{opacity:1; transform:none;}
  .lc .lc-ring{display:none;}
}

/* DUS Rehberi bandı: açılış ekranında ana düğmelerin altında üç durağan bağlantı kartı. */
.dus-rehber{margin:24px 0;}
.dus-rehber-ust{font:600 13px 'Figtree',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--primary-deep);margin:0 0 var(--s-2);}
.dus-rehber-kartlar{display:flex;flex-direction:column;gap:12px;}
.dus-rehber-kart{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:var(--s-2);padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);color:var(--ink);text-decoration:none;transition:border-color var(--motion-fast) var(--ease-standard);}
.dus-rehber-metin{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.dus-rehber-metin b{font:600 16px/1.3 'Figtree',sans-serif;color:var(--ink);}
.dus-rehber-metin span{font:400 13px/1.4 'Figtree',sans-serif;color:var(--ink-soft);}
.dus-rehber-kart i{font-style:normal;font-size:18px;line-height:1;color:var(--primary);transition:transform var(--motion-fast) var(--ease-standard);}
.dus-rehber-kart:hover{border-color:var(--primary);}
.dus-rehber-kart:hover i{transform:translateX(2px);}
.dus-rehber-kart:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.dus-rehber-kart{min-height:56px;}
/* Ana sayfa: DUS Rehberi 6'lı kart ızgarası (ikon rozetli, sade ve dengeli). */

.dus-rehber-ikon{width:38px; height:38px; flex:none; border-radius:11px; background:var(--primary-wash); color:var(--primary-deep); display:grid; place-items:center; transition:background-color var(--motion-fast) ease, color var(--motion-fast) ease;}
@media (hover:hover){ .dus-rehber-kart:hover .dus-rehber-ikon{background:var(--primary-deep); color:#fff;} }
/* İki kopya: dar ekranda düğmelerin altındaki, geniş ekranda ikiye bölünmüş açılışın altındaki. display:none erişilebilirlik ağacından da çıkarır. */
.dus-rehber-genis{display:none;}
@media (min-width:861px){
  .dus-rehber-dar{display:none;}
  #splash{flex-wrap:wrap;align-content:flex-start;overflow-y:auto;}
  /* min-height: kısa ekranda (1366x680) sağ panel içerikten kısa kalıp başlığı yukarıdan kırpıyordu. */
  .sp-side-brand,.sp-side-auth{height:auto; min-height:100vh;}
  #splash .sp-side-auth{padding-block:24px;}
  .dus-rehber-genis{display:block;flex:0 0 100%;margin:0;padding:var(--s-4) clamp(28px,5vw,64px) var(--s-6);background:#fff;}
  .dus-rehber-genis .dus-rehber-kartlar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:1100px;margin:0 auto;}
  .dus-rehber-genis .dus-rehber-ust{max-width:1100px;margin:0 auto var(--s-2);}
  #splash.is-returning .dus-rehber-genis{display:none;}
}

/* Açılış vitrini: giriş yapmamış ziyaretçiye sitedeki özellikler (düz HTML, betik gerekmez). İki kopya, DUS Rehberi bandıyla aynı mantık:
   dar ekranda düğmelerin altında, geniş ekranda ikiye bölünmüş açılışın altında. display:none erişilebilirlik ağacından da çıkarır. */
.sp-vitrin{margin:24px 0;}
.sp-vitrin-baslik{font:700 clamp(21px,2.6vw,26px)/1.2 'Figtree',sans-serif;letter-spacing:-.03em;color:var(--ink);margin:0 0 6px;text-wrap:balance;}
.sp-vitrin-alt{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13.5px;line-height:1.5;color:var(--ink-soft);margin:0 0 var(--s-3);}
.sp-vitrin-alt span{padding-left:10px;border-left:2px solid var(--primary);}
.sp-vitrin-alt b{color:var(--ink);font-weight:700;}
.sp-vitrin .dus-rehber-ust{color:var(--primary-darker);}
.sp-vitrin-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.sp-vitrin-oge{display:flex;align-items:flex-start;gap:var(--s-2);padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);}
.sp-vitrin-oge .dus-rehber-ikon{margin-top:1px;}
.sp-vitrin-genis{display:none;}
#splash.is-returning .sp-vitrin{display:none;}
@media (min-width:861px){
  .sp-vitrin-dar{display:none;}
  .sp-vitrin-genis{display:block;flex:0 0 100%;margin:0;padding:var(--s-6) clamp(28px,5vw,64px);background:#F3FAF8;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .sp-vitrin-genis > *{max-width:1100px;margin-left:auto;margin-right:auto;}
  .sp-vitrin-genis .sp-vitrin-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* Açılış ekranı: DUS açılımı, vitrin kartı erişim etiketi, masaüstü kaydırma çağrısı ve sayfa sonu bağlantıları. */
.sp-tag-acilim{display:block;margin-top:6px;font-size:13px;font-weight:500;letter-spacing:.01em;text-transform:none;}
.sp-vitrin-etiket{align-self:flex-start;margin-top:6px;padding:2px 9px;border-radius:var(--r-pill);font:600 11.5px/1.5 'Figtree',sans-serif;font-style:normal;}
.sp-vitrin-etiket.acik{background:var(--primary-wash);color:var(--primary-ink);}
.sp-vitrin-etiket.hesap{background:#EDF1F6;color:var(--ink-soft);}
.sp-vitrin-git,.sp-alt-genis{display:none;}
@media (min-width:861px){
  .sp-side-auth .sp-mini-divider,.sp-side-auth .sp-mini-stats,.sp-side-auth .sp-alt-linkler{display:none;}
  .sp-vitrin-git{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;margin-top:var(--s-2);border:0;background:none;color:var(--primary-darker);font:600 13px 'Figtree',sans-serif;cursor:pointer;}
  .sp-vitrin-git svg{transition:transform var(--motion-fast) var(--ease-standard);}
  .sp-vitrin-git:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--r-pill);}
  .sp-alt-genis{display:block;flex:0 0 100%;padding:var(--s-3) clamp(28px,5vw,64px) calc(var(--dusky-boy) + 24px + env(safe-area-inset-bottom,0px));background:#fff;}
  .sp-alt-genis .sp-alt-linkler{margin-top:0;}
  #splash.is-returning .sp-alt-genis{display:none;}
}
@media (min-width:861px) and (hover:hover){ .sp-vitrin-git:hover svg{transform:translateY(2px);} }

/* Misafir: kilitli açıklama / branş analizi (bulanık yer tutucu + davet). */
.kilit-kutu{position:relative; border-radius:var(--r); overflow:hidden;}
.kilit-bulanik{filter:blur(5px); opacity:.55; pointer-events:none; user-select:none; -webkit-user-select:none;}
.kilit-bulanik p{margin:0; font-size:13.5px; line-height:1.65; color:var(--ink-soft);}
.kilit-davet{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:var(--s-3); text-align:center; background:rgba(255,255,255,.72); color:var(--ink);}
.kilit-davet .ikon{color:var(--primary-deep);}
.kilit-davet b{font:700 14.5px 'Figtree',sans-serif; color:var(--ink);}
.kilit-davet span{font-size:12.5px; line-height:1.4; color:var(--ink-soft); max-width:34ch;}
.kilit-btn{margin-top:6px; min-height:40px; padding:0 var(--s-4); border:0; border-radius:var(--r-pill); cursor:pointer;
  background:var(--primary-deep); color:#fff; font:700 13.5px 'Figtree',sans-serif;}
.kilit-btn:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}
.explain .kilit-kutu{margin-top:8px; min-height:132px;}
.rsol .kilit-kutu{min-height:132px;}
.sn-analiz + .kilit-kutu, .section > .kilit-kutu{min-height:180px;}
/* Misafir Dusky hakkı ve kilitli durumdaki davet balonu. */
.dusky-hak{padding:6px 14px 0; font-size:12px; color:var(--ink-soft);}
.dusky-hak b{color:var(--primary-deep);}
.dusky-hak-not{display:block; margin-top:2px; color:var(--bad-ink);}
.dusky-davet{margin:8px 14px 10px; padding:12px 14px; border:1px solid var(--primary); border-radius:14px 14px 14px 4px;
  background:var(--primary-wash); display:flex; flex-direction:column; gap:4px;}
.dusky-davet b{font:700 13.5px 'Figtree',sans-serif; color:var(--ink);}
.dusky-davet span{font-size:12.5px; line-height:1.45; color:var(--ink-soft);}
.dusky-davet-btn{align-self:flex-start; margin-top:4px; min-height:38px; padding:0 var(--s-3); border:0; border-radius:var(--r-pill);
  background:var(--primary-deep); color:#fff; font:700 13px 'Figtree',sans-serif; cursor:pointer;}
/* Profil → Geçmiş testlerim */
.gc-liste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.gc-satir{display:flex; align-items:center; gap:var(--s-3); padding:12px 14px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r);}
.gc-metin{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.gc-metin b{font:700 14px 'Figtree',sans-serif; color:var(--ink);}
.gc-metin span{font-size:12.5px; line-height:1.4; color:var(--ink-soft); overflow-wrap:anywhere;}
.gc-sil{flex:none; min-height:36px; padding:0 var(--s-3); border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--surface); color:var(--bad-ink); font:600 13px 'Figtree',sans-serif; cursor:pointer;}
.gc-tumu{display:block; margin:var(--s-3) auto 0; min-height:44px; padding:0 var(--s-2); border:0; background:none;
  color:var(--bad-ink); font:600 13.5px 'Figtree',sans-serif; text-decoration:underline; text-underline-offset:3px; cursor:pointer;}
/* Silme onayı: tehlikeli eylem kırmızı (mevcut --bad-ink, beyaz yazıyla 5.3:1). */
.btn.sil-onay{background:var(--bad-ink); border-color:var(--bad-ink); color:#fff;}
@media (hover:hover){ .btn.sil-onay:hover{background:var(--bad); border-color:var(--bad);} }
.btn.sil-onay:focus-visible, .modal .btn.gh:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}
.gc-sil:focus-visible, .gc-tumu:focus-visible, .dusky-davet-btn:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}
.gc-not{display:flex; gap:8px; align-items:flex-start; margin:var(--s-3) 0 0; font-size:12.5px; line-height:1.45; color:var(--ink-soft);}
.gc-bos{font-size:14px; color:var(--ink-soft);}

/* Sonuç ekranı (üye): "Dusky yanlışlarını analiz etsin", dolu birincil düğme. Misafirde bu düğme yok; kayıt kartında anlatılıyor. */
.dy-analiz{display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:48px; margin-top:var(--s-3);
  padding:0 var(--s-4); border-radius:var(--r-pill); border:1.5px solid var(--primary-deep); background:var(--primary-deep);
  color:#fff; font:700 14px 'Figtree',sans-serif; cursor:pointer;}
.dy-analiz:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}
@media (hover:hover){ .dy-analiz:hover{background:var(--primary-darker);} }
.da-liste{list-style:none; margin:0 0 var(--s-4); padding:0; display:flex; flex-direction:column; gap:8px;}
.da-liste li{display:flex; gap:8px; align-items:flex-start; font-size:14px; line-height:1.45; color:var(--ink);}
.da-liste li .ikon{flex:none; margin-top:2px; color:var(--primary-deep);}
.da-giris{display:block; margin:var(--s-2) auto 0; min-height:40px; padding:0 var(--s-2); border:0; background:none; cursor:pointer;
  color:var(--primary-darker); font:600 14px 'Figtree',sans-serif; text-decoration:underline; text-underline-offset:3px;}
.dusky-analiz-yuk{display:flex; flex-direction:column; gap:8px; min-width:200px;}
.dusky-analiz-yuk .iskelet{height:12px;}
.dusky-analiz-yuk .iskelet.kisa{width:60%;}
.dusky-analiz-durum{font-size:13px; color:var(--ink-soft);}
.dusky-analiz-hata{display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.dusky-analiz-cipler{display:flex; flex-wrap:wrap; gap:6px; margin:-2px 0 6px;}

/* Dusky: cevap beklenirken balon (yüz + üç nokta) ve 10 sn notu; cevap aynı balonda solarak gelir. */
.dusky-msg.dusky-bekle{display:flex; align-items:center; gap:8px; min-height:41px;}
.dusky-bekle-yuz{display:inline-flex; flex:none; width:18px; height:18px;}
.dusky-bekle-nokta{display:inline-flex; gap:4px;}
.dusky-bekle-nokta i{width:6px; height:6px; border-radius:50%; background:var(--ink-faint); animation:duskyTypingDot 1.1s ease-in-out infinite;}
.dusky-bekle-nokta i:nth-child(2){animation-delay:.15s}
.dusky-bekle-nokta i:nth-child(3){animation-delay:.3s}
.dusky-bekle-metin{font-size:12.5px; color:var(--ink-soft);}
.dusky-bekle-not{align-self:flex-start; margin:-4px 0 2px 4px; font-size:11.5px; color:var(--ink-faint);}
.dusky-msg.dusky-yeni{animation:duskySolma .24s ease-out both;}
@keyframes duskySolma{from{opacity:0}to{opacity:1}}
.dusky-chip.bekle,.dusky-chip:disabled{opacity:.45; cursor:default; pointer-events:none;}
@media (prefers-reduced-motion: reduce){ .dusky-msg.dusky-yeni{animation:none;} .dusky-bekle-nokta i{animation:none;} }
/* Kısa ekranlar (yükseklik en fazla 700px, ör. 375x667): başlık ve yasal not boşlukları toplam 12px kısıldı. */
@media (max-height:700px){ .sp-title{margin-bottom:4px;} .sp-yasal{margin-bottom:12px;} }

/* ══ ANA SAYFA: "yumuşak" tasarım (25 Ekim) ════════════════════════════
   Onaylı maket: claude.ai/artifact/JMiXEu128v6iK4ArArc3sr (Ahead tarzı, bizim renkler).
   Beyaz sayfa; üstte altı kavisli nane karşılama ve Dusky; karşılamanın üstüne binen
   bugün kartları; 28px köşe, 18px düğme; iri yazı (gövde 16-17px). Telefonda tek sütun,
   genişledikçe kartlar yan yana (en çok 1200px). Hareket yalnızca transform ve opacity:
   bileşimcide, ekranın tazeleme hızında (120 Hz telefonda 120). Kaydırmaya bağlı belirme
   animation-timeline ile; desteklemeyen tarayıcıda anaEkranUygula() IntersectionObserver
   ile bir kez gösterir. Hareket azaltmada hiçbiri yok. */
:root{--r-xl:28px; --r-dug:18px; --an-gor:28px; --an-golge:0 16px 38px -22px rgba(20,30,46,.38), 0 0 0 1px rgba(20,30,46,.05);}
/* Üst çubuk her ekranda 1200px'e kadar; içerik sütunları kendi genişliğinde. */
.topbar-in{max-width:1200px; padding-inline:clamp(16px,4vw,40px);}
html.ana-ekran body{background:#fff;}
html.ana-ekran .wrap{max-width:none; padding:0 0 calc(var(--dusky-boy) + 24px);}
/* Ana sayfada üst çubuk karşılamanın üstünde şeffaf; kaydırınca buzlu cam. */
html.ana-ekran .topbar{background:transparent; border-bottom-color:transparent;
  transition:background-color .3s ease, border-color .3s ease;}
html.ana-ekran.kaydi .topbar{background:rgba(255,255,255,.82); border-bottom-color:rgba(20,30,46,.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.8); backdrop-filter:blur(18px) saturate(1.8);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ html.ana-ekran.kaydi .topbar{background:#fff;} }

.an{display:flex; flex-direction:column; text-align:left;}
.an-ic{width:100%; max-width:1200px; margin:0 auto; padding-inline:clamp(16px,4vw,40px);}

/* Karşılama: üst çubuğun altına da uzanır (yüksekliği ne olursa olsun boşluk kalmasın diye 120px yukarı taşar). */
.an-ust{margin-top:-120px; padding:calc(120px + clamp(24px,4vw,56px)) 0 clamp(100px,10vw,132px);
  background:var(--primary-wash); border-radius:0 0 50% 50% / 0 0 clamp(28px,5vw,56px) clamp(28px,5vw,56px); overflow:hidden; overflow:clip;}
.an-ust-ic{display:flex; align-items:center; gap:clamp(8px,3vw,32px);}
.an-selam{flex:1 1 auto; min-width:0;}
.an-tarih{font-size:15px; font-weight:700; color:var(--primary-deep);}
.an .ap-merhaba{margin-top:6px; font-size:clamp(30px,4.6vw,58px); font-weight:700; line-height:1.06; letter-spacing:-.02em; color:var(--ink);}
.an .ap-alt{margin-top:12px; max-width:34ch; font-size:clamp(17px,1.7vw,21px); line-height:1.45; font-weight:500; color:var(--ink-soft);}
.an .ap-dus{display:inline-flex; align-items:center; gap:4px; margin-top:14px; padding:7px 14px; border-radius:999px;
  background:#fff; font-size:15px; font-weight:600; color:var(--ink-soft);}
.an .ap-dus b{color:var(--primary-darker); font-weight:800;}
.an-dusky-ic svg{display:block; width:100%; height:auto; overflow:visible;}

.an-govde{display:flex; flex-direction:column; gap:clamp(40px,5vw,64px); padding-bottom:clamp(24px,4vw,48px);}
/* Bugün: karşılamanın üstüne binen kartlar. */
.an-bugun{position:relative; z-index:1; margin-top:calc(-1 * clamp(76px,8vw,100px)); display:flex; flex-wrap:wrap; gap:clamp(14px,1.6vw,20px); align-items:stretch;}
.an-bugun > *{flex:1 1 300px; min-width:0;}
.an-kart{background:#fff; border-radius:var(--r-xl); padding:24px; box-shadow:var(--an-golge);}
.an-yan{display:flex; align-items:center; gap:16px;}
.an-metin{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;}
.an-metin > b{font-size:20px; font-weight:700; line-height:1.2; color:var(--ink);}
.an-metin > span{font-size:16px; line-height:1.45; color:var(--ink-soft);}
.an-ikon{width:50px; height:50px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--primary-wash); color:var(--primary-deep);}
.an-ikon.kirmizi{background:var(--bad-wash); color:var(--bad-ink);}
.an-dugme{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:56px; padding:0 24px; border:0; border-radius:var(--r-dug);
  background:var(--primary-deep); color:#fff; font:700 18px 'Figtree',sans-serif; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .26s var(--ease-out), filter .2s ease;}

@media (hover:hover){ .an-dugme:hover{filter:brightness(1.08);} }

/* Günlük hedef */
.an .ap-hedef{padding:0; display:flex; flex-direction:column; overflow:hidden; border:0;}
.an .ap-hedef-ust{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:18px 12px; padding:22px 24px 6px;}
.an .ap-hedef-ust .ap-cubuk{grid-column:1 / -1; height:14px; background:#F3EBDD;}
.an .ap-cubuk i{background:var(--amber);}
.an .ap-hedef.tamam .ap-cubuk{background:var(--good-wash);}
.an .ap-hedef.tamam .ap-cubuk i{background:var(--good);}
.an-etiket{display:block; font-size:15px; font-weight:600; color:var(--ink-faint);}
.an-hedef-sayi{display:block; margin-top:4px; font-size:18px; font-weight:500; color:var(--ink-faint); white-space:nowrap;}
.an-hedef-sayi b{font-size:30px; font-weight:700; letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums;}
.an-cip{display:inline-flex; align-items:center; gap:6px; padding:8px 14px 8px 10px; border-radius:999px; font-size:15px; font-weight:700; white-space:nowrap;}
.an-cip.amber{background:var(--amber-wash); color:var(--amber-ink);}
.an-cip.amber .ikon{color:var(--amber);}
.an-cip.iyi{background:var(--good-wash); color:var(--good-ink);}
.an .ap-hedef-sec{padding:14px 24px 0; border-top:0;}
.an .ap-hedef-sec button{height:40px; max-width:64px; border-radius:14px; font-size:15px;}
.an-cipler{display:flex; flex-wrap:wrap; gap:8px; padding:16px 24px 22px; margin-top:auto;}
.an-cipler span{padding:7px 12px; border-radius:999px; background:#F1F5F9; font-size:14.5px; font-weight:600; color:var(--ink-soft);}
.an .ap-iskelet .ap-hedef-ust{padding-bottom:24px;}
.an .ap-iskelet .an-etiket{width:96px; border-radius:6px;}
.an .ap-iskelet .an-hedef-sayi b{display:inline-block; width:110px; border-radius:6px;}

/* Misafir ve tekrar kartları: üstte ikon/halka ve metin, altta tam genişlik düğme. */
.an-misafir, .an-tekrar{display:flex; flex-direction:column; gap:20px;}
.an-misafir .an-dugme, .an-tekrar .an-dugme{width:100%; margin-top:auto;}
.an-halka{position:relative; width:92px; height:92px; flex:none;}
.an-halka svg{display:block; width:100%; height:100%; transform:rotate(-90deg);}
.an-halka circle{stroke-width:5;}
.an-halka-iz{fill:#F1FBF9; stroke:#CDEDE6;}
.an-halka-dol{fill:none; stroke:var(--primary); stroke-linecap:round; stroke-dasharray:271 271;}
.an-halka > span{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;}
.an-halka b{font-size:28px; font-weight:700; color:var(--primary-deep);}
.an-halka small{margin-top:3px; font-size:13px; font-weight:600; color:var(--ink-faint);}

/* Hızlı Çöz: tek koyu kart. */
.an .ap-hero{display:flex; flex-direction:column; gap:18px; padding:24px; border-radius:var(--r-xl); background:var(--primary-ink); box-shadow:none; overflow:visible;}
.an-hizli-baslik{margin:0; font-size:24px; font-weight:700; color:#fff;}
.an-hizli-metin{margin:6px 0 0; font-size:16px; line-height:1.45; color:rgba(255,255,255,.82);}
.an .ap-ayarlar{margin-top:0; gap:10px;}
.an .ap-adim{height:52px; border:0; border-radius:var(--r-dug); background:rgba(255,255,255,.1);}
.an .ap-adim button{width:46px; border-radius:var(--r-dug); color:#fff; font:500 24px/1 'Figtree',sans-serif;}
.an .ap-adim-deger{font-size:15px;}
.an .ap-adim-deger b{font:700 20px 'Figtree',sans-serif;}
.an .ap-basla{height:58px; margin-top:auto; border-radius:var(--r-dug); background:#7CE8D3; color:#062E29; font:700 18px 'Figtree',sans-serif;}
@media (hover:hover){ .an .ap-basla:hover{background:#9AF0DF;} }

/* Teşhis atlası: öne çıkan geniş kart; solda metin ve düğme, sağda kesit/röntgen görseli. */
.an .ap-atlas{display:grid; grid-template-columns:minmax(0,1fr) clamp(108px,24vw,210px); align-items:center; gap:clamp(16px,3vw,40px); width:100%;
  padding:clamp(20px,3vw,36px); border:0; background:linear-gradient(135deg,#FFFFFF 0%,#FFFFFF 45%,#EAF8F4 100%); color:var(--ink);
  font:inherit; text-align:left; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.ap-atlas-metin{display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0;}
.ap-atlas-ust{display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:700; color:var(--primary-deep);}
.ap-atlas-baslik{font-size:clamp(22px,2.6vw,32px); font-weight:700; line-height:1.12; letter-spacing:-.02em; color:var(--ink); text-wrap:balance;}
.ap-atlas-alt{max-width:46ch; font-size:clamp(15px,1.4vw,17px); line-height:1.45; color:var(--ink-soft);}
.ap-atlas-dugme{display:inline-flex; align-items:center; gap:8px; margin-top:8px; height:52px; padding:0 22px; border-radius:var(--r-dug);
  background:var(--primary-deep); color:#fff; font-size:17px; font-weight:700; transition:filter .2s ease;}
.ap-atlas-gorsel{display:block; border-radius:22px; overflow:hidden; background:#F3F7FA; box-shadow:0 16px 32px -20px rgba(20,30,46,.6);
  transform:rotate(2.5deg); transition:transform .6s var(--ease-out);}
.ap-atlas-gorsel svg{display:block; width:100%; height:auto;}
@media (hover:hover){
  .an .ap-atlas:hover .ap-atlas-dugme{filter:brightness(1.08);}
  .an .ap-atlas:hover .ap-atlas-gorsel{transform:rotate(0) scale(1.03);}
}
@media (max-width:420px){
  .an .ap-atlas{grid-template-columns:minmax(0,1fr) 100px; gap:14px;}
  .ap-atlas-dugme{height:48px; padding:0 18px; font-size:16px;}
}

/* Bölümler */
.an-bolum, .an .ap-bolum{margin:0; font-size:clamp(26px,2.6vw,34px); font-weight:700; line-height:1.15; letter-spacing:-.01em; color:var(--ink);}
.an-calis, .an .kv, .an-rehber{display:flex; flex-direction:column; gap:20px;}
.an-bolum-bas p{margin:6px 0 0; font-size:17px; color:var(--ink-faint);}

/* Çalış kutuları: telefonda 2, geniş ekranda 4 sütun. */
.an .ap-izgara{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
@media (min-width:900px){ .an .ap-izgara{grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;} }
.an .ap-kart{min-height:0; padding:22px; border:2px solid var(--line); border-radius:var(--r-xl); background:#fff;}
.an-kart-ust{display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;}
.an .ap-kart-baslik{margin-top:16px; font-size:19px; font-weight:700; line-height:1.25; letter-spacing:-.005em;}
.an .ap-kart-metin{margin-top:4px; font-size:15.5px; line-height:1.4; color:var(--ink-faint);}
.an .ap-kart-git{margin-top:14px; font-size:15px;}
.an-rozet{padding:4px 10px; border-radius:999px; white-space:nowrap; font-size:13px; font-weight:700; background:#F1F5F9; color:var(--ink-soft);}
.an-rozet.dikkat{background:var(--primary-wash); color:var(--primary-darker);}
.an-rozet.kirmizi{background:var(--bad-wash); color:var(--bad-ink);}
@media (max-width:420px){
  .an .ap-kart{padding:18px;}
  .an .ap-kart-baslik{font-size:17.5px;}
  .an .ap-kart-metin{font-size:14.5px;}
  .an-ikon{width:46px; height:46px;}
}

/* Dusky'nin önerisi ve Düello: geniş ekranda yan yana. */
.an-ikili{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:stretch;}
.an-ikili.tek{grid-template-columns:minmax(0,1fr);}
@media (max-width:820px){ .an-ikili{grid-template-columns:minmax(0,1fr);} }
.an .ap-oneri{display:flex; align-items:flex-start; gap:18px; width:100%; padding:24px; border:0; border-radius:var(--r-xl);
  background:var(--amber-wash); box-shadow:none; text-align:left; font:inherit; color:inherit; cursor:pointer;}
.an-oneri-yuz{width:64px; height:64px; padding:9px; border-radius:50%; flex:none; background:#fff;}
.an-oneri-metin{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;}
.an-oneri-metin small{font-size:14px; font-weight:700; color:var(--amber-ink);}
.an-oneri-metin b{font-size:21px; font-weight:700; line-height:1.25; color:var(--ink);}
.an-oneri-alt{font-size:16px; line-height:1.4; color:var(--ink-soft);}
.an-sahte-dugme{align-self:flex-start; display:inline-flex; align-items:center; gap:6px; margin-top:8px; height:48px; padding:0 20px;
  border-radius:var(--r-dug); background:var(--amber-ink); color:#fff; font-size:16px; font-weight:700;}
.an .ap-duello{padding:24px; border:2px solid var(--line); border-radius:var(--r-xl); box-shadow:none;}
.an .ap-duello-ikon{width:50px; height:50px; border-radius:50%; background:var(--primary-wash); color:var(--primary-deep);}
.an .ap-duello-baslik{font-size:21px; font-weight:700;}
.an .ap-duello-alt{font-size:15.5px;}
.an .ap-dl-sekme{max-width:none; border-radius:16px;}
.an .ap-dl-sekme button{height:40px; border-radius:12px; font-size:14px;}
.an .ap-dl-brans{max-width:none; height:44px; border-radius:14px;}
.an .ap-dl-liste{display:flex; flex-direction:column;}
.an .ap-dl-satir{border-radius:18px;}
.an .ap-dl-meydan{height:42px; border-radius:14px;}
.an .ap-misafir-btn{height:44px; border-radius:14px; font-size:15px;}

/* Kavramlar ve duyurular da aynı köşede. */
.an .kv-kart{border:2px solid var(--line); border-radius:var(--r-xl);}
.an .kv-cevir{border-radius:var(--r-xl);}
.an .kv-coz{border-top-width:2px; border-radius:0 0 var(--r-xl) var(--r-xl);}
.an .duyuru, .an .ap-kurulum{border-radius:var(--r-xl);}

/* DUS Rehberi: iki araç ve sayfa bağlantıları. */
.an-araclar{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;}
@media (max-width:720px){ .an-araclar{grid-template-columns:minmax(0,1fr);} }
.an-arac{display:flex; align-items:center; gap:16px; padding:22px 24px; background:#F1F5F9; box-shadow:none; color:var(--ink); text-decoration:none;}
.an-arac-ikon{width:56px; height:56px; border-radius:18px; flex:none; display:grid; place-items:center; background:var(--primary-ink); color:#7CE8D3;}
.an-ok{flex:none; display:flex; color:var(--ink-faint);}
.an-baglantilar{display:flex; flex-wrap:wrap; gap:10px;}
.an-baglantilar a{padding:10px 16px; border-radius:999px; border:2px solid var(--line); background:#fff; font-size:15.5px; font-weight:600;
  color:var(--primary-darker); text-decoration:none; transition:border-color .2s ease, background-color .2s ease;}
@media (hover:hover){ .an-baglantilar a:hover{border-color:var(--primary); background:var(--primary-wash);} }

/* Dokunma ve üzerine gelme: kart hafifçe yükselir, basınca içe çöker. */
.an-kald{transition:transform .42s var(--ease-out), box-shadow .42s var(--ease-out), border-color .2s ease;}
@media (hover:hover){ .an-kald:hover{transform:translateY(-3px); box-shadow:0 20px 44px -24px rgba(20,30,46,.38);} }


@media (max-width:560px){
  .an-ust{padding-bottom:104px;}
  .an-kart, .an .ap-hero, .an .ap-oneri, .an .ap-duello{padding:22px;}
  .an .ap-hedef{padding:0;}
  .an .ap-hedef-ust{padding:20px 22px 6px;}
  .an-cipler{padding:14px 22px 20px;}
  .an-govde{gap:36px;}
}

/* Hareket: yalnızca transform ve opacity. */
@media (prefers-reduced-motion:no-preference){
  /* Dusky yavaşça süzülür. */
  .sp-dusky .an-dusky-ic{animation:anYuz 5.5s ease-in-out infinite; transform-origin:50% 80%;}
  @keyframes anYuz{50%{transform:translateY(-7px) rotate(-1.5deg)}}
  /* Ekrana gelince hedef çubuğu ve tekrar halkası dolar. */
  .screen-enter .an .ap-cubuk i{animation:apDol .9s var(--ease-apple) .25s both;}
  @supports (animation-timeline:view()){
    /* Kaydırmaya bağlı (Apple sitelerindeki gibi): kart kaydırmayla birlikte yükselip belirir, geri kaydırınca geri döner. */
    .an-gor{animation:anGor linear both; animation-timeline:view(); animation-range:entry 0% entry 80%;}
    @keyframes anGor{from{opacity:0; transform:translateY(var(--an-gor)) scale(.98)}}
    .an-halka-dol{animation:anHalka linear both; animation-timeline:view(); animation-range:entry 30% entry 100%;}
    @keyframes anHalka{from{stroke-dashoffset:271}}
    /* Kaydırdıkça Dusky geri çekilir. */
    .an-dusky{animation:anPlx linear both; animation-timeline:scroll(root); animation-range:0 480px;}
    @keyframes anPlx{to{transform:translateY(56px) scale(.94); opacity:.55}}
  }
  @supports not (animation-timeline:view()){
    .an-gor{transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);}
    .an-gor.an-gizli{opacity:0; transform:translateY(var(--an-gor)) scale(.98);}
    .screen-enter .an-halka-dol{animation:anHalkaZaman .9s var(--ease-apple) .3s both;}
    @keyframes anHalkaZaman{from{stroke-dashoffset:271}}
  }
}

/* ══ PROFİL ANA SAYFASI: "yumuşak" tasarım (25 Ekim) ═════════════════════
   Maketteki "Profil" ekranı; ana sayfanın parçalarıyla (.an-ust, .an-kart, .an-halka, .an-dugme).
   Nane karşılama: köşelerde yuvarlak ayarlar ve kapat, ortada fotoğraf, ad, en güçlü branş ve
   davet; sağ altta Dusky kartın arkasından bakar. Telefonda tek sütun, 820px üstünde ikişer. */
.pf2-ust{position:relative; text-align:center; padding-bottom:clamp(110px,10vw,140px);}
.pf2-ust-ic{position:relative; display:flex; flex-direction:column; align-items:center;}
.pf2-yuvarlak{position:absolute; top:0; width:52px; height:52px; display:grid; place-items:center; border:0; border-radius:50%;
  background:#fff; color:var(--ink-soft); cursor:pointer; box-shadow:0 8px 20px -12px rgba(10,86,77,.45);
  -webkit-tap-highlight-color:transparent; transition:transform .2s var(--ease-out), color .2s ease;}
.pf2-yuvarlak.sol{left:clamp(16px,4vw,40px);}
.pf2-yuvarlak.sag{right:clamp(16px,4vw,40px);}
.pf2-yuvarlak .tab-ikon{width:22px; height:22px; display:block;}

@media (hover:hover){ .pf2-yuvarlak:hover{color:var(--primary-deep);} }
.pf2 .pf2-av{width:92px; height:92px; box-shadow:0 0 0 4px #fff, 0 12px 28px -14px rgba(10,86,77,.55);}
.pf2 .pf2-av .pf-av-kamera{width:30px; height:30px; right:-2px; bottom:-2px; border-width:3px;}
.pf2-ad{margin:14px 0 0; font-size:clamp(28px,3.4vw,40px); font-weight:700; line-height:1.1; letter-spacing:-.01em; color:var(--ink); overflow-wrap:anywhere;}
.pf2-ad .plus-rozet{vertical-align:6px; margin-left:8px;}
.pf2-alt{margin:6px 0 0; font-size:18px; font-weight:500; color:var(--ink-soft);}
.pf2-davet{display:inline-flex; align-items:center; gap:8px; margin-top:16px; height:44px; padding:0 18px; border:0; border-radius:999px;
  background:#fff; color:var(--primary-darker); font:700 15.5px 'Figtree',sans-serif; cursor:pointer;
  box-shadow:0 8px 20px -14px rgba(10,86,77,.5); transition:transform .2s var(--ease-out);}


.pf2-govde{gap:clamp(28px,4vw,48px);}
.pf2-ikili{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(14px,1.6vw,20px); align-items:stretch;}
@media (min-width:820px){ .pf2-ikili{grid-template-columns:repeat(2,minmax(0,1fr));} }
.pf2-govde > .pf2-ikili:first-child{position:relative; z-index:1; margin-top:calc(-1 * clamp(76px,8vw,100px));}

/* Dusky'nin notu ve seviye */
.pf2-not > p{margin:0; font-size:17px; line-height:1.5; color:var(--ink-soft);}
.pf2-seviye{display:flex; align-items:center; gap:12px; width:100%; margin-top:18px; padding:18px 0 0; border:0; border-top:1px solid var(--line);
  background:none; font:inherit; color:inherit; text-align:left; cursor:pointer;}
.pf2-seviye-amblem{display:flex; flex:none;}
.pf2-seviye-ad{font-size:17px; font-weight:700; color:var(--primary-darker); white-space:nowrap;}
.pf2 .pf-cubuk{flex:1; min-width:40px; height:14px; margin:0; background:#E8EDF3;}
.pf2 .pf-cubuk i{background:var(--primary);}
.pf2-seviye > b{font-size:17px; font-weight:700; color:var(--primary-darker);}
.pf2-seviye-alt{margin-top:10px; font-size:14px; line-height:1.45; color:var(--ink-faint);}

/* Branş analizi */
.pf2-analiz{display:flex; flex-direction:column; gap:20px;}
.pf2-analiz .an-dugme{width:100%; margin-top:auto;}

/* Sayı kutuları */
.pf2-sayilar{display:flex; flex-direction:column; gap:12px; min-width:0;}
.pf2-kutular{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
.pf2-kutu{display:flex; align-items:flex-start; gap:14px; min-width:0; padding:18px 20px; border:2px solid var(--line); border-radius:var(--r-xl); background:#fff;}
.pf2-kutu.genis{grid-column:1 / -1;}
.pf2-kutu-ikon{flex:none; display:flex; margin-top:3px; color:var(--primary);}
.pf2-kutu.seri .pf2-kutu-ikon{color:var(--amber);}
.pf2-kutu-metin{min-width:0; display:flex; flex-direction:column;}
.pf2-kutu-metin > b{font-size:26px; font-weight:700; line-height:1.15; color:var(--ink); font-variant-numeric:tabular-nums;}
.pf2-kutu-metin > span{margin-top:2px; font-size:16px; color:var(--ink-faint);}
.pf2-kutu .sk-satir{margin-top:8px;}
.pf2-toplam{display:flex; align-items:flex-start; gap:8px; margin:0; padding:0 4px; font-size:14px; line-height:1.5; color:var(--ink-faint);}
.pf2-toplam .ikon{flex:none; margin-top:2px;}
.pf2-toplam b{font-weight:700; color:var(--ink);}

/* Deneme kartı ve hataları çöz */
.pf2-deneme{display:flex; flex-direction:column; gap:12px; min-width:0;}
.pf2 .dnm-kart{flex:1; margin:0; border-radius:var(--r-xl);}
.pf2-hata{display:flex; align-items:center; justify-content:center; gap:8px; height:54px; border:0; border-radius:var(--r-dug);
  background:var(--bad-wash); color:var(--bad-ink); font:700 16.5px 'Figtree',sans-serif; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:transform .2s var(--ease-out);}


/* Rozetler */
.pf2-bolum{display:flex; flex-direction:column; gap:16px;}
.pf2-bolum-bas{display:flex; align-items:baseline; justify-content:space-between; gap:12px;}
.pf2-bolum-bas button{display:inline-flex; align-items:center; gap:4px; padding:6px 0; border:0; background:none; cursor:pointer;
  font:700 16px 'Figtree',sans-serif; color:var(--primary-darker);}
.pf2-rozetler{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;}
.pf2-rozet{display:flex; flex-direction:column; align-items:center; gap:10px; min-width:0; padding:20px 8px 16px; border:0; border-radius:var(--r-xl);
  background:#F1F5F9; text-align:center; font:inherit; color:inherit; cursor:pointer;}
.pf2-rozet.acik{background:var(--amber-wash);}
.pf2-rozet .pf-rozet-amblem{width:56px; height:56px; display:grid; place-items:center;}
.pf2-rozet.kilitli .pf-rozet-amblem{filter:grayscale(1); opacity:.45;}
.pf2-rozet b{font-size:15px; font-weight:700; line-height:1.2; color:var(--ink);}
.pf2-rozet small{font-size:13px; font-weight:600; color:var(--ink-faint);}
.pf2-rozet.acik small{color:var(--amber-ink);}

/* Bölüm listesi */
.pf2 .pf2-moduller{overflow:hidden; border:2px solid var(--line); border-radius:var(--r-xl); background:#fff; box-shadow:none;}
.pf2 .pf-modul{gap:14px; padding:16px 20px;}
.pf2 .pf-modul + .pf-modul{border-top:1px solid var(--line-soft);}
.pf2 .pf-modul .pf-modul-ikon{width:46px; height:46px; border-radius:50%; background:var(--primary-wash); color:var(--primary-deep);}
.pf2 .pf-modul.m-denemeler .pf-modul-ikon{background:#1B2733; color:#E2B76D;}
.pf2 .pf-modul.m-hatalar .pf-modul-ikon{background:var(--bad-wash); color:var(--bad-ink);}
.pf2 .pf-modul.m-flashcardlar .pf-modul-ikon, .pf2 .pf-modul.m-arkadaslar .pf-modul-ikon{background:var(--amber-wash); color:var(--amber-ink);}
.pf2 .pf-modul.m-ayarlar .pf-modul-ikon{background:#F1F5F9; color:var(--ink-soft);}
.pf2 .pf-modul-ikon .tab-ikon{width:22px; height:22px;}
.pf2 .pf-modul-metin b{font-size:17.5px; font-weight:600;}
.pf2 .pf-modul-metin small{margin-top:2px; font-size:14.5px; color:var(--ink-faint);}
.pf2 .pf-alt{margin-top:-8px;}
.pf2 .pf-cikis{height:48px; border-radius:var(--r-dug); font-size:16px;}

@media (max-width:560px){
  .pf2-yuvarlak{width:46px; height:46px;}
  .pf2 .pf2-av{width:80px; height:80px;}
  .pf2-alt{font-size:16.5px;}
  .pf2-kutu{padding:16px;}
  .pf2-rozet{padding:16px 6px 14px;}
  .pf2-rozet b{font-size:13.5px;}
  .pf2 .pf-modul{padding:14px 16px;}
}

/* ══ PROFİL ALT SAYFALARI: "yumuşak" tasarım (25 Ekim) ══════════════════
   Nane başlık şeridi (yuvarlak geri, büyük başlık), içerik 760px'lik sütunda. İçerikteki kartlar
   yeniden kurulmadı; köşe, kenarlık ve düğme ölçüleri profil ana sayfasıyla aynı dile getirildi.
   Hata defterinin "not defteri" görünümü bilerek olduğu gibi. */
.pf2-dar{max-width:760px;}
.pf2-alt-ust{padding-bottom:clamp(36px,5vw,52px); border-radius:0 0 50% 50% / 0 0 clamp(20px,3vw,32px) clamp(20px,3vw,32px);}
.pf2-alt-bas{display:flex; align-items:center; gap:16px;}
.pf2-yuvarlak.geri{position:static; flex:none;}
.pf2-alt-ustyazi{font-size:15px; font-weight:700; color:var(--primary-deep);}
.pf2-alt-baslik{margin:2px 0 0; font-size:clamp(28px,3.4vw,38px); font-weight:700; line-height:1.1; letter-spacing:-.01em; color:var(--ink);}
.pf2-sayfa .pf-icerik{padding:clamp(20px,3vw,32px) 0 clamp(24px,4vw,48px);}
.pf2-sayfa .dash-section-title{font-size:21px; font-weight:700; letter-spacing:-.005em; color:var(--ink);}

/* Kartlar: 24px köşe, 2px açık kenarlık, gölge yok. */
.pf2-sayfa .tsh-bos, .pf2-sayfa .brans-item, .pf2-sayfa .ayar-kart, .pf2-sayfa .ayar-plan, .pf2-sayfa .lig-ust, .pf2-sayfa .lig-alt,
.pf2-sayfa .gc-satir, .pf2-sayfa .rozet-card{border-radius:24px; box-shadow:none;}
.pf2-sayfa .tsh-bos, .pf2-sayfa .brans-item, .pf2-sayfa .ayar-kart, .pf2-sayfa .lig-alt, .pf2-sayfa .gc-satir{border:2px solid var(--line);}
.pf2-sayfa .brans-item{padding:16px 18px;}
.pf2-sayfa .ayar-kart{padding:22px;}
.pf2-sayfa .dnmp{border-radius:var(--r-xl);}
.pf2-sayfa .lig-basamaklar, .pf2-sayfa .lig-gecis-btnler, .pf2-sayfa .lig-not{border-radius:18px;}
.pf2-sayfa .sira-satir{border-radius:18px;}
/* Düğmeler ve alanlar */
.pf2-sayfa .btn.go, .pf2-sayfa .dnmp-btn, .pf2-sayfa .ayar-tehlike{min-height:52px; border-radius:var(--r-dug); font-size:16.5px;}
.pf2-sayfa .ayar-input{height:52px; border-radius:16px; border-width:2px; font-size:16px;}

@media (max-width:560px){
  .pf2-alt-bas{gap:14px;}
  .pf2-sayfa .pf-icerik{padding-top:20px;}
}

/* ══ SORU EKRANI: "yumuşak" tasarım (25 Ekim) ═══════════════════════════
   Maketteki "Soru ekranı": 28px kart, kalın ilerleme çubuğu (sayaç sağda), yuvarlak harfli büyük
   şıklar, renkli doğru/yanlış, yumuşak açıklama, amber "Dusky'ye sor" ve turkuaz büyük düğme.
   Yapı, modlar (çalışma, deneme, DUS sınavı, düello) ve davranış aynı; yalnızca .soru-ekran altında
   görünüm. Telefonda kartın iç boşluğu değişmiyor: yapışkan "Sonraki" çubuğu ona göre yerleşiyor. */
.soru-ekran .card{border:0; border-radius:var(--r-xl); box-shadow:0 14px 34px -22px rgba(20,30,46,.35), 0 0 0 1px rgba(20,30,46,.04);}
@media (min-width:561px){ .soru-ekran .card{padding:28px;} }
.soru-ekran .qil{display:flex; flex-direction:row-reverse; align-items:center; gap:14px; margin-bottom:18px;}
.soru-ekran .qil-etiket{margin:0; font-size:16px; font-weight:700; color:var(--ink-soft);}
.soru-ekran .qil-cizgi{flex:1; height:12px; background:#E3E9F0;}
.soru-ekran .qtop{gap:10px; margin-bottom:14px;}
.soru-ekran .qtag{display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px; background:var(--primary-wash);
  color:var(--primary-darker); font-size:13.5px; font-weight:700; letter-spacing:0; text-transform:none;}
.soru-ekran .qlvl{padding:6px 12px; border-radius:999px; font-size:12.5px; letter-spacing:.02em;}
.soru-ekran .qbildir{width:42px; height:42px; border-radius:50%; border-width:2px;}
.soru-ekran .qtext{font-size:clamp(19px,2.2vw,22px); font-weight:600; line-height:1.42; margin-bottom:22px;}
.soru-ekran .opt{min-height:62px; gap:14px; padding:10px 16px 10px 12px; border-width:2px; border-radius:var(--r-dug); font-size:16.5px;}
.soru-ekran .bub{width:38px; height:38px; border:0; background:#EEF2F6; color:var(--ink-soft); font-size:15px; font-weight:700;}
.soru-ekran .opt.sel .bub{background:var(--primary-deep); color:#fff;}
.soru-ekran .opt.ok .bub{background:var(--good-ink); color:#fff;}
.soru-ekran .opt.no .bub{background:var(--bad-ink); color:#fff;}
@media (hover:hover){ .soru-ekran .opt:not(.lock):not(.sel):hover{border-color:#C9D4E0; background:#FAFCFE;} }
.soru-ekran .explain{margin-top:16px; padding:18px 20px; border:0; border-radius:24px;}
.soru-ekran .explain .eh{margin-bottom:8px; font-size:15px; font-weight:700; letter-spacing:0; text-transform:none;}
.soru-ekran .explain p{font-size:16.5px; line-height:1.6;}
.soru-ekran .dusky-sor{min-height:52px; margin-top:14px; padding:8px 18px 8px 10px; border:0; border-radius:var(--r-dug);
  background:var(--amber-wash); color:var(--amber-ink); font:700 16px 'Figtree',sans-serif;}
.soru-ekran .explain.bad .dusky-sor{background:#fff;}
.soru-ekran .dusky-sor-yuz{width:36px; height:36px; background:#fff;}
@media (hover:hover){ .soru-ekran .dusky-sor:hover{background:#F7E6C4; border-color:transparent;} }
.soru-ekran .nav{margin-top:22px; gap:10px;}
.soru-ekran .nav .btn{min-height:58px; border-radius:var(--r-dug); font-size:17.5px;}
.soru-ekran .nav .btn.go{background:var(--primary-deep); border-color:var(--primary-deep); color:#fff;}
.soru-ekran .nav .btn.go:disabled{background:#E3E9F0; border-color:#E3E9F0; color:var(--ink-faint);}
.soru-ekran .nav .btn.gh{border-width:2px;}
@media (hover:hover){ .soru-ekran .nav .btn.go:hover:not(:disabled){background:var(--primary-darker); border-color:var(--primary-darker);} }
@media (max-width:560px){
  .soru-ekran .card > .nav{border-radius:0 0 var(--r-xl) var(--r-xl);}
  .soru-ekran .card > .nav .btn{min-height:56px;}
}
/* Üst küme ve notlar */
.soru-ekran .ok-cikis{font-size:15px; padding:0 16px 0 12px;}
.soru-ekran .ok-cikis::before{inset:2px 0; border:0; box-shadow:0 6px 18px -12px rgba(20,30,46,.45);}
.soru-ekran .ilk-uyari, .soru-ekran .tavan-not{border-radius:22px;}
.soru-ekran .dnm-ust{border-radius:22px;}
.soru-ekran .dnm-kare{border-radius:10px;}

/* ══ SONUÇ EKRANI: "yumuşak" tasarım (25 Ekim) ═════════════════════════
   Yapı aynı (skor kartı, hatırlatma, Dusky'nin yorumu, branş ve konu analizi, soru incelemesi);
   köşe 28px, inceleme kartları 22px ve 2px kenarlık, düğmeler 18px ve 54px yüksek. */
.screen.sn .sn-baslik{font-size:clamp(26px,3vw,32px); font-weight:700; letter-spacing:-.01em;}
.screen.sn .sn-xp{height:34px; padding:0 14px; font-size:14px;}
.screen.sn .sn-kart{border-radius:var(--r-xl); padding:24px 26px 26px;}
.screen.sn .sn-kaydet, .screen.sn .dy-yorum{border-radius:var(--r-xl); padding:22px;}
.screen.sn .sn-k{border-width:2px; border-radius:22px;}
.screen.sn .sn-konular li{border-radius:16px; padding:11px 14px;}
.screen.sn .sn-bolum-baslik{font-size:21px; font-weight:700;}
.screen.sn .sn-filtre .inc-fbtn{min-height:42px; padding:0 16px; border-radius:999px; font-size:14.5px;}
.screen.sn .dy-incele, .screen.sn .btn{min-height:54px; border-radius:var(--r-dug); font-size:16.5px;}
.screen.sn .sn-kaydet .sn-kaydet-btn{min-height:50px; border-radius:var(--r-dug);}

/* ══ KONU SEÇİMİ AKIŞI: "yumuşak" tasarım (25 Ekim) ════════════════════
   Branş → Soru sayısı → Mod. Yapı ve davranış aynı; .su-funnel altında görünüm: büyük adım
   başlığı, iri etiketler, 28px kartlar, 18px köşeli seçiciler ve "Çöz" düğmesi. */
.su-funnel .su-progress{font-size:15px; font-weight:700; letter-spacing:0; color:var(--primary-deep);}
.su-funnel .su-title{font-size:clamp(28px,3.4vw,36px); font-weight:700; letter-spacing:-.01em; line-height:1.12;}
.su-funnel .su-chips{gap:8px;}
.su-funnel .su-chip{min-height:36px; padding:0 12px 0 14px; border-radius:999px; font-size:14.5px;}
.su-funnel .su-chips-ipucu{font-size:15px;}
.su-funnel .su-body{border:0; border-radius:var(--r-xl); padding:clamp(18px,2.4vw,26px); box-shadow:0 14px 34px -22px rgba(20,30,46,.35), 0 0 0 1px rgba(20,30,46,.04);}
.su-funnel .konu-row{gap:14px; padding:13px 2px;}
.su-funnel .konu-ikon{width:40px; height:40px; border-radius:50%;}
.su-funnel .konu-name{font-size:16.5px;}
.su-funnel .su-step-card{border:0; border-radius:var(--r-xl); padding:24px; box-shadow:0 14px 34px -22px rgba(20,30,46,.35), 0 0 0 1px rgba(20,30,46,.04);}
.su-funnel .su-step-label{font-size:17px; margin-bottom:14px;}
.su-funnel .seg{padding:5px; gap:4px; border:0; border-radius:var(--r-dug); background:#EEF2F6;}
.su-funnel .seg button{min-height:48px; padding:0 22px; border-radius:14px; font-size:16.5px;}
.su-funnel .seg.num button{min-width:58px; padding:0 14px;}
.su-funnel .modehint{font-size:15.5px; line-height:1.5; margin-top:14px;}
.su-funnel .geri-link{font-size:15px;}
.su-funnel .cta, .su-sticky .cta{min-height:58px; padding:0 20px; border-radius:var(--r-dug); font-size:18px;}
.su-sticky{border-top-color:transparent; box-shadow:0 -10px 30px -22px rgba(20,30,46,.4);}
.su-hizli{font-size:15px;}

/* ══ AÇILIŞ PERDESİ, GİRİŞ VE KAYIT: "yumuşak" tasarım (25 Ekim) ═════════
   Marka paneli koyu yeşilden açık naneye: yazılar koyu, vurgular turkuaz (büyük "Çöz" nane üstünde
   --primary-deep, 3,9:1). Masaüstünde panel kenardan 16px içeride, 36px köşeli büyük bir kart; geniş
   ekranda içinde Dusky süzülür. Telefonda üst şerit altı kavisli. Sağ taraf ve formlar ana sayfanın
   ölçülerinde: 18px köşeli 56px düğmeler, 54px alanlar, 24px köşeli kartlar. Yerleşim ve davranış
   aynı (CLS 0, intro geçişi, h1 "DUS Soru Bankası"). */
.sp-side-brand{background:var(--primary-wash); color:var(--ink);}
.sp-word{color:var(--ink);}
.sp-word span.accent{color:var(--primary-deep);}
.sp-underline{background:var(--primary);}
.sp-tag{color:var(--ink);}
.sp-tag-acilim{color:var(--ink-soft);}
.sp-stat b{color:var(--ink);}
.sp-stat span{color:var(--ink-soft);}
.sp-dusky{display:none;}
@media (min-width:861px){
  #splash{background:#fff;}
  /* Kenar boşluğu taban genişlikten düşülüyor: yoksa toplam %100'ü aşıp giriş paneli alt satıra kayıyor (#splash flex-wrap). */
  .sp-side-brand{flex-basis:calc(56% - 16px); margin:16px 0 16px 16px; border-radius:36px; min-height:calc(100vh - 32px);}
  .sp-cumle{color:var(--ink); font-weight:700; letter-spacing:-.025em;}
  .sp-cumle .vurgu{color:var(--primary-deep);}
  .sp-ozellik li{border-left-color:var(--primary); color:var(--ink);}
  .sp-ozellik span{color:var(--ink-soft);}
}
@media (min-width:1200px){
  .sp-dusky{display:block; position:absolute; right:clamp(28px,4vw,72px); bottom:clamp(28px,4vw,64px); width:clamp(150px,13vw,220px); pointer-events:none;}
  .sp-dusky svg{display:block; width:100%; height:auto; overflow:visible;}
}
@media (max-width:860px){
  .sp-side-brand{border-radius:0 0 50% 50% / 0 0 32px 32px; padding-bottom:32px;}
}

/* Sağ taraf: başlık, günün sorusu, eylemler */
.sp-title{font-weight:700; font-size:clamp(28px,3vw,36px); letter-spacing:-.02em; line-height:1.12;}
.sp-copy{font-size:16px; line-height:1.5;}
.sp-yasal{font-size:13.5px; line-height:1.5;}
.sp-ornek{border-width:2px; border-radius:24px; padding:18px;}
.sp-ornek-ust{font-size:14px;}
.sp-ornek-soru{font-size:17px; line-height:1.4;}
.sp-ornek-sik{min-height:52px; padding:8px 14px 8px 8px; border-width:2px; border-radius:16px; font-size:15.5px;}
.sp-ornek-sik i{width:34px; height:34px; border:0; background:#EEF2F6; font-size:14px;}
.sp-ornek-sik.dogru i, .sp-ornek-sik.yanlis i{border:0;}
.sp-ornek-not{font-size:15px;}
.sp-action{min-height:56px; padding:0 18px; border-radius:var(--r-dug); font-size:16.5px;}
.sp-action.secondary{border:2px solid var(--line);}
.sp-tertiary, .sp-ayar-link{font-size:15px;}
.sp-vitrin-git{font-size:15px;}
#splash .dus-rehber-kart{border-width:2px; border-radius:20px; padding:16px 18px;}
#splash .dus-rehber-ikon{width:42px; height:42px; border-radius:50%;}
#splash .sp-vitrin-oge{border-width:2px; border-radius:22px; padding:16px 18px;}
.sp-alt-linkler a, .sp-alt-linkler span{font-size:13.5px;}

/* Giriş ve kayıt formları (perdenin içinde) */
.sp-back{font-size:15px; padding:10px 4px;}
.sp-kicker{font-size:14px; font-weight:700; letter-spacing:0; text-transform:none;}
.intro-field{margin-bottom:14px;}
.intro-field label{font-size:14px; font-weight:600; letter-spacing:0; text-transform:none; margin-bottom:6px;}
.intro-field input{height:54px; padding:0 16px; border:2px solid var(--line); border-radius:16px; background:#fff;}
.intro-check{font-size:13.5px; gap:10px;}
.intro-check input{width:20px; height:20px; margin-top:0;}

.g-dugme{height:54px; border-width:2px; border-radius:var(--r-dug); font-size:16px;}
.g-ayrac{font-size:13.5px;}
.g-not{font-size:13px; line-height:1.5;}
.auth-switch{font-size:15px;}

/* Ayrı giriş ekranı (perde kapandıktan sonra) */
.auth-card{border:0; border-radius:var(--r-xl); padding:clamp(24px,4vw,40px); box-shadow:0 16px 38px -22px rgba(20,30,46,.38), 0 0 0 1px rgba(20,30,46,.05);}
.auth-title{font-weight:700; font-size:28px; letter-spacing:-.01em;}
.auth-sub{font-size:16px;}
.auth-field label{font-size:14px; font-weight:600; letter-spacing:0; text-transform:none;}
.auth-field input{height:54px; padding:0 16px; border-width:2px; border-radius:16px; background:#fff;}
.auth-cta{min-height:56px; border-radius:var(--r-dug); font-size:17px;}
.auth-err{border-radius:16px; font-size:14px;}
.auth-skip{font-size:14.5px;}

/* ══ AÇILIR PENCERELER, PANELLER VE DENEME EKRANLARI: "yumuşak" tasarım (25 Ekim) ══
   Pencereler 28px köşe, düğmeler 54px ve 18px köşe, ana düğme turkuaz. Alttan açılan panellerin
   üst köşeleri 28px (geniş ekranda ortada açılınca dört köşe). Deneme perdesi, deneme listesi ve
   deneme sonucunun koyu zemin + altın kimliği bilerek aynı ("ayrı bir yapıya giriyorum" hissi);
   yalnızca köşe ve ölçüler yumuşadı. Deneme soru incelemesi soru ekranının stilini kullanıyor. */
.modal{border-radius:var(--r-xl); padding:clamp(24px,4vw,32px); box-shadow:0 30px 70px -30px rgba(20,30,46,.55), 0 0 0 1px rgba(20,30,46,.05);}
.modal-title{font-size:22px; font-weight:700;}
.modal-body{font-size:15.5px; line-height:1.6;}
.modal .btn, .modal-onay{min-height:54px; border-radius:var(--r-dug); font-size:16.5px;}
.modal .btn.go{background:var(--primary-deep); border-color:var(--primary-deep); color:#fff;}
@media (hover:hover){ .modal .btn.go:hover:not(:disabled){background:var(--primary-darker); border-color:var(--primary-darker);} }
.modal .btn.gh{border-width:2px;}
.bsebep{min-height:46px; border-width:2px; border-radius:16px; font-size:15px;}
.bnot{border-width:2px; border-radius:16px; padding:12px 14px; font-size:16px;}
.bvazgec{min-height:44px; font-size:15px;}
.sm-baslik{font-size:22px; font-weight:700;}
.sm-kapat{width:44px; height:44px; border-radius:50%;}
.sm-satir{border-radius:18px;}
.odul-kart{border-radius:var(--r-xl);}
.odul-btn{height:54px; border-radius:var(--r-dug); font-size:16.5px;}
.bd-panel{border-radius:24px;}
.bd-oge{border-radius:18px;}

/* Alttan açılan paneller (deneme listesi, günlük hedef) */
.ap-sheet{border-radius:28px 28px 0 0; padding:10px 18px calc(22px + env(safe-area-inset-bottom,0px));}
.ap-sheet-tut{width:44px; height:5px;}
.ap-sheet-bas b{font-size:22px; font-weight:700;}
.ap-sheet-bas small{font-size:14px;}
.ap-sheet-kapat{width:44px; height:44px; border:0; background:#EEF2F6;}
@media (min-width:720px){ .ap-sheet{border-radius:var(--r-xl); padding:16px 22px 22px;} }
.ap-sheet.hg{border-radius:28px 28px 0 0;}
.hg-baslik{font-size:26px;}
.hg-balon{border-radius:18px;}
.hg-kart{border-width:2px; border-radius:18px;}
.hg-btn{height:56px; border-radius:var(--r-dug); font-size:17px;}

/* Deneme listesi ve sonucu: koyu + altın kimlik aynı, köşeler yumuşak */
.dnm-serit{border-radius:24px;}
.dnm-paket{border-radius:18px;}
.dsn-kart{border:0; border-radius:var(--r-xl); box-shadow:0 16px 38px -22px rgba(20,30,46,.38), 0 0 0 1px rgba(20,30,46,.05);}
.dsn-ust{padding:26px 22px 22px;}
.dsn-bolum-net > div{border-radius:16px; padding:11px 10px;}
.dsn-siralama{padding:18px 22px;}
.dsn-tablo{padding:18px 22px 8px;}
.dsn-satir{padding:7px 0;}
.dsn-cubuk{height:10px;}
.dsn-incele{min-height:62px; border-radius:var(--r-dug); font-size:17px;}
.dsn-incele span{font-size:13px;}
.dsn-kart .nav .btn{min-height:52px; border-radius:var(--r-dug);}

/* Deneme soru incelemesi */
.inc-cik{font-size:15px;}
.inc-sayac{font-size:15px;}
.inc-fbtn{min-height:42px; padding:0 16px; border-width:2px; font-size:14.5px;}

/* ══ Görünüm dokunuşları (26 Ekim) ══════════════════════════════════════
   Küçük, sessiz ayrıntılar; yerleşim değişmez. */

/* Seçilen metin ve yazı imleci marka renginde (tarayıcının mavisi yerine). Koyu kartlarda daha açık nane. */
::selection{background:rgba(var(--primary-rgb),.22); color:inherit;}
input, textarea, [contenteditable]{caret-color:var(--primary);}
.an-hizli::selection, .an-hizli ::selection, .dnm-serit ::selection, .dnm-paket ::selection,
.dnm-kart ::selection, .dnmp ::selection{background:rgba(110,235,210,.32);}

/* Satır kırma: her metin son satırında tek kelime bırakmasın (pretty, kalıtılıyor); başlık gibi duranlar
   (h1–h3'ün yanı sıra .disp ve *-baslik/*-title sınıflı div'ler) satırlara dengeli bölünsün. */
body{text-wrap:pretty;}
h1, h2, h3, .disp:not(p), [class*="baslik"]:not(p), [class*="-title"]:not(p), .ap-kart-metin{text-wrap:balance;}

/* Koyu kartlarda üst kenar ışığı: köşe eğrisini izleyen 1px'lik ince çizgi (Apple'ın malzeme hissi).
   Kartın mevcut gölgesine ekleniyor; üzerine gelince değişen gölgelerde de duruyor. */
:root{--isik-ust:inset 0 1px 0 rgba(255,255,255,.11);}
.an .ap-hero.an-hizli{box-shadow:var(--isik-ust);}
.dnm-serit{box-shadow:var(--isik-ust), var(--golge-2);}
.dnm-serit:hover{box-shadow:var(--isik-ust), var(--golge-3);}
.dnm-paket{box-shadow:var(--isik-ust);}
.dnm-paket:hover{box-shadow:var(--isik-ust), var(--golge-2);}
.dnm-paket.bekliyor:hover{box-shadow:var(--isik-ust);}
.dnm-kart{box-shadow:var(--isik-ust), var(--golge-2);}
.dnmp{box-shadow:var(--isik-ust), var(--golge-3);}

/* Seviye halkası: profilde avatarın çevresinde bir sonraki seviyeye ilerleme (Apple Watch halkaları gibi;
   değer profildeki seviye çubuğuyla aynı). Yer kaplamaz: kutu avatarla aynı, halka dışa taşar. Profil
   açılınca 0'dan değerine yayla dolar; kamera rozeti halkanın üstünde kalır. */
.pf2-av-kap{position:relative; display:inline-grid; place-items:center;}
.pf2-halka{position:absolute; inset:-14px; width:calc(100% + 28px); height:calc(100% + 28px); transform:rotate(-90deg);
  overflow:visible; pointer-events:none;}
.pf2-halka circle{fill:none; stroke-width:4; stroke-linecap:round;}
.pf2-halka-iz{stroke:rgba(var(--primary-rgb),.16);}
.pf2-halka-dol{stroke:var(--primary); stroke-dasharray:100 100; animation:pfHalka 1.1s var(--yay) .35s both;}
@keyframes pfHalka{from{stroke-dashoffset:100;}}
@media (prefers-reduced-motion:reduce){ .pf2-halka-dol{animation:none;} }

/* ══ Diş kemeri (Branş Analizi, 26 Ekim) ══════════════════════════════
   Üst çenenin 16 dişi = 16 branş. Renk doğruluğu, kesik çizgi "az soru" gösterir; seçili diş dolu ve
   hafif büyük. Dişler önden arkaya yayla belirir (ön kesicilerden azılara). */
.dk-kart{margin:0 0 22px; padding:18px 16px 16px; border:2px solid var(--line); border-radius:28px; background:#fff;}
.dk-svg{display:block; width:100%; max-width:440px; height:auto; margin:0 auto; overflow:visible;}
.dk-orta{stroke:var(--line); stroke-width:1; stroke-dasharray:2 4;}
.dk-yarim{font:700 11px 'Figtree',sans-serif; letter-spacing:.06em; text-transform:uppercase; fill:var(--ink-faint);}
.dk-dis{cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent;}
.dk-ic{transform-box:fill-box; transform-origin:center; transition:transform .45s var(--yay-zipla);
  animation:dkGir .55s var(--yay-zipla) calc(var(--i) * 45ms + 80ms) backwards;}
@keyframes dkGir{from{opacity:0; transform:scale(.55);}}
@media (hover:hover){ .dk-dis:hover .dk-ic{transform:scale(1.06);} }
.dk-dis:active .dk-ic{transform:scale(.94); transition-duration:.12s;}
.dk-dis.secili .dk-ic{transform:scale(1.12);}
.dk-govde{fill:#fff; stroke:#C5CEDA; stroke-width:1.5; stroke-dasharray:3 3; transition:fill .3s ease, stroke .3s ease;}
.dk-oluk{fill:none; stroke:#C5CEDA; stroke-width:1.1; stroke-linecap:round;}
.dk-fdi{font:700 8.5px 'Figtree',sans-serif; fill:#8C98A9; text-anchor:middle; font-variant-numeric:tabular-nums; pointer-events:none;}
.dk-dis.iyi .dk-govde{fill:#DDF3E4; stroke:var(--good); stroke-dasharray:none;}
.dk-dis.orta .dk-govde{fill:#F8E7C4; stroke:var(--amber); stroke-dasharray:none;}
.dk-dis.zayif .dk-govde{fill:#F9D9D6; stroke:var(--bad); stroke-dasharray:none;}
.dk-dis.iyi .dk-oluk{stroke:rgba(19,122,58,.42);} .dk-dis.iyi .dk-fdi{fill:var(--good-ink);}
.dk-dis.orta .dk-oluk{stroke:rgba(138,90,14,.4);} .dk-dis.orta .dk-fdi{fill:var(--amber-ink);}
.dk-dis.zayif .dk-oluk{stroke:rgba(192,54,47,.4);} .dk-dis.zayif .dk-fdi{fill:var(--bad-ink);}
.dk-dis.secili .dk-govde{stroke-width:2.4;}
.dk-dis.iyi.secili .dk-govde{fill:var(--good);} .dk-dis.orta.secili .dk-govde{fill:var(--amber);} .dk-dis.zayif.secili .dk-govde{fill:var(--bad);}
.dk-dis.secili:not(.bos) .dk-fdi{fill:#fff;} .dk-dis.secili:not(.bos) .dk-oluk{stroke:rgba(255,255,255,.55);}
.dk-dis.bos.secili .dk-govde{stroke:var(--ink-soft); stroke-dasharray:none; fill:var(--surface-2,#F1F4F8);}
.dk-dis:focus-visible .dk-govde{stroke:var(--primary-deep); stroke-width:3; stroke-dasharray:none;}
.dk-etiket{font:800 10.5px 'Figtree',sans-serif; letter-spacing:.03em; fill:var(--ink-soft); pointer-events:none;}
.dk-etiket.bos{fill:#A3AEBD;}
.dk-lejant{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; margin:6px 0 14px; font:600 12.5px 'Figtree',sans-serif; color:var(--ink-faint);}
.dk-lejant span{display:inline-flex; align-items:center; gap:6px;}
.dk-lejant span::before{content:""; width:10px; height:10px; border-radius:3px; border:1.5px solid; box-sizing:border-box;}
.dk-lejant .iyi::before{background:#DDF3E4; border-color:var(--good);}
.dk-lejant .orta::before{background:#F8E7C4; border-color:var(--amber);}
.dk-lejant .zayif::before{background:#F9D9D6; border-color:var(--bad);}
.dk-lejant .bos::before{border-color:#C5CEDA; border-style:dashed;}
.dk-detay{padding:16px; border-radius:20px; background:var(--surface-2,#F4F7FA);}
.dk-detay.dk-yeni{animation:dkDetay .4s var(--ease-out) both;}
@keyframes dkDetay{from{opacity:.4; transform:translateY(6px);}}
.dk-detay-ust{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.dk-detay-ust b{font-size:18px; font-weight:700; letter-spacing:-.01em; color:var(--ink);}
.dk-detay-fdi{display:inline-grid; place-items:center; min-width:30px; height:26px; padding:0 6px; border-radius:8px;
  font:800 12px 'Figtree',sans-serif; font-variant-numeric:tabular-nums; color:#fff; background:#A3AEBD;}
.dk-detay-fdi.iyi{background:var(--good);} .dk-detay-fdi.orta{background:var(--amber);} .dk-detay-fdi.zayif{background:var(--bad);}
.dk-durum{margin-left:auto; padding:3px 10px; border-radius:999px; font:700 12.5px 'Figtree',sans-serif; color:var(--ink-faint); background:#fff;}
.dk-durum.iyi{color:var(--good-ink);} .dk-durum.orta{color:var(--amber-ink);} .dk-durum.zayif{color:var(--bad-ink);}
.dk-detay p{margin:8px 0 14px; font-size:15.5px; line-height:1.45; color:var(--ink-soft);}
.dk-coz{width:100%;}
@media (prefers-reduced-motion:reduce){ .dk-ic{animation:none; transition:none;} .dk-detay.dk-yeni{animation:none;} }

/* ══ Küçülen büyük başlık (26 Ekim) ═══════════════════════════════════
   Sayfanın büyük başlığı üst çubuğun altına girerken küçülüp söner (kaydırmaya bağlı, yalnızca
   transform/opacity); o anda üst çubukta küçüğü belirir (html.baslik-ustte, app.js baslikKur).
   Genişte üst çubuğun ortasında; dar ekranda "DUSÇöz" yazısı yukarı kayıp söner, başlık yerine gelir. */
.tb-baslik{position:absolute; top:50%; left:50%; max-width:40vw; transform:translate(-50%, calc(-50% + 8px)); opacity:0; pointer-events:none;
  font:700 17px/1.25 'Figtree',sans-serif; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:opacity .22s ease, transform .45s var(--yay);}
html.baslik-ustte .tb-baslik{opacity:1; transform:translate(-50%, -50%);}
.brand-metin{transition:opacity .2s ease, transform .45s var(--yay);}
@media (max-width:899px){
  .tb-baslik{transform:translateY(calc(-50% + 8px));}
  html.baslik-ustte .tb-baslik{transform:translateY(-50%);}
  html.baslik-ustte .brand-metin{opacity:0; transform:translateY(-8px);}
}
@supports (animation-timeline: view()){
  .an-ust h1, .an-ust h2.ap-merhaba, .pf2-alt-ust h1{animation:baslikKucul linear both; animation-timeline:view(block 64px 0px);
    animation-range:exit 0% exit 100%; transform-origin:left center;}
  .pf2-ust h1{transform-origin:center;}
}
@keyframes baslikKucul{to{opacity:0; transform:scale(.9) translateY(-6px);}}
@media (prefers-reduced-motion:reduce){
  .an-ust h1, .an-ust h2.ap-merhaba, .pf2-alt-ust h1{animation:none;}
  .tb-baslik, .brand-metin{transition:none;}
}

/* ══ Büyüyen kart (26 Ekim) ═══════════════════════════════════════════
   App Store'daki "Bugün" kartları gibi: işaretli karta (data-genisle) dokununca kart büyüyerek yeni ekran
   olur, arkadaki sayfa hafifçe geri çekilip kararır; geri dönerken ekran aynı kartın içine küçülür
   (render(), data-gecis="kart" / "kart-geri"). Grup kartın köşesiyle kırpılıyor. */
html[data-gecis="kart"]::view-transition-old(root){ animation:480ms var(--ease-apple) both kartGeriCekil; }
html[data-gecis="kart"]::view-transition-new(root){ animation:480ms linear both kartKokGec; }
/* Kap dönüşümü: kartın içeriği hemen söner, beyaz kart büyür (grup zemini), yeni sayfa ikinci yarıda belirir.
   Dönüşte tersi. İki içerik aynı anda yarı saydam görünmüyor. */
html[data-gecis="kart"]::view-transition-group(kart-genis),
html[data-gecis="kart-geri"]::view-transition-group(kart-genis){ animation-duration:500ms; animation-timing-function:var(--ease-apple);
  overflow:clip; border-radius:24px; background:var(--surface,#fff); box-shadow:0 24px 60px -30px rgba(20,30,46,.45); }
html[data-gecis="kart"]::view-transition-old(kart-genis){ animation:110ms linear both kartSon; }
html[data-gecis="kart"]::view-transition-new(kart-genis){ animation:230ms ease-out 230ms both kartBel; }
html[data-gecis="kart-geri"]::view-transition-old(root){ animation:140ms linear both kartSon; }
html[data-gecis="kart-geri"]::view-transition-new(root){ animation:500ms var(--ease-apple) both kartOneGel; }
html[data-gecis="kart-geri"]::view-transition-old(kart-genis){ animation:120ms linear both kartSon; }
html[data-gecis="kart-geri"]::view-transition-new(kart-genis){ animation:200ms ease-out 260ms both kartBel; }
@keyframes kartGeriCekil{ to{ transform:scale(.94); filter:brightness(.88); } }
@keyframes kartOneGel{ from{ transform:scale(.94); filter:brightness(.88); } }
@keyframes kartKokGec{ 0%, 75%{ opacity:0; } }
@keyframes kartSon{ to{ opacity:0; } }
@keyframes kartBel{ from{ opacity:0; } }

/* Test bitti: ilerleme çubuğu sonuç şeridine dönüşüyor (render(), "sonuc-serit"). Sayfa itmesinden biraz uzun,
   böylece şerit yerine sayfayla birlikte oturur; çubuk söner, şerit belirir. */
::view-transition-group(sonuc-serit){ animation-duration:640ms; animation-timing-function:var(--ease-apple); }
::view-transition-old(sonuc-serit), ::view-transition-new(sonuc-serit){ height:100%; mix-blend-mode:normal; }
::view-transition-old(sonuc-serit){ animation:260ms ease-in 120ms both kartSon; }
::view-transition-new(sonuc-serit){ animation:320ms ease-out 200ms both kartBel; }
html.serit-yok::view-transition-group(sonuc-serit){ display:none; }

/* ══ Dinamik ada (26 Ekim): süreli testte süre ══════════════════════════
   Odak modunda ekranın tepesinde siyah hap (app.js adaGuncelle). Dokununca yayla genişler, ayrıntı
   (cevaplanan/boş, ilerleme) belirir; küçülürken tersi. Genişlik/yükseklik geçişi küçük, sabit bir
   öğede: düzen maliyeti yok denecek kadar az. */
.ada{position:fixed; top:calc(env(safe-area-inset-top, 0px) + 10px); left:50%; z-index:45; transform:translateX(-50%);
  width:var(--ada-g, 112px); height:38px; padding:0; border:0; border-radius:19px; overflow:hidden; cursor:pointer;
  background:#0B1018; color:#fff; box-shadow:0 12px 30px -14px rgba(8,14,24,.55);
  -webkit-tap-highlight-color:transparent; animation:adaGir .5s var(--yay-zipla) both;
  transition:width .55s var(--yay-zipla), height .55s var(--yay-zipla), border-radius .55s var(--yay-zipla);}
.ada:focus-visible{outline:2px solid var(--primary); outline-offset:3px;}
.ada.acik{width:min(330px, calc(100vw - 32px)); height:96px; border-radius:30px;}
@keyframes adaGir{from{opacity:0; transform:translateX(-50%) scale(.6);}}
.ada-ic{position:absolute; left:12px; top:9px; display:flex; align-items:center; gap:8px; white-space:nowrap;
  transform-origin:left center; transition:transform .55s var(--yay-zipla);}
.ada.acik .ada-ic{transform:translate(6px, 5px) scale(1.3);}
.ada-halka{width:18px; height:18px; flex:none; transform:rotate(-90deg);}
.ada-halka circle{fill:none; stroke-width:3; stroke-linecap:round;}
.ada-halka .iz{stroke:rgba(255,255,255,.18);}
.ada-halka .dol{stroke:#6EEBD2; stroke-dasharray:100 100; stroke-dashoffset:calc(var(--ada-kalan, 0) * 1); transition:stroke-dashoffset 1s linear, stroke .3s ease;}
.ada-sure{font:700 15px/20px 'Figtree',sans-serif; font-variant-numeric:tabular-nums; letter-spacing:.01em;}
.ada-etiket{font:600 11px/20px 'Figtree',sans-serif; color:rgba(255,255,255,.62); opacity:0; transition:opacity .2s ease;}
.ada.acik .ada-etiket{opacity:1; transition-delay:.15s;}
.ada-ayrinti{position:absolute; left:18px; right:18px; bottom:15px; opacity:0; transform:translateY(8px); text-align:left;
  transition:opacity .18s ease, transform .45s var(--yay);}
.ada.acik .ada-ayrinti{opacity:1; transform:none; transition-delay:.12s, .12s;}
.ada-satir{display:block; font:600 13px/18px 'Figtree',sans-serif; color:rgba(255,255,255,.72); white-space:nowrap;}
.ada-satir b{color:#fff; font-weight:800; font-variant-numeric:tabular-nums;}
.ada-cubuk{display:block; height:4px; margin-top:8px; border-radius:999px; background:rgba(255,255,255,.16); overflow:hidden;}
.ada-cubuk i{display:block; width:var(--ada-cevap, 0%); height:100%; border-radius:inherit; background:#6EEBD2; transition:width .5s var(--yay);}
.ada.kritik .ada-halka .dol{stroke:#FF6B5E;}
.ada.kritik{animation:adaGir .5s var(--yay-zipla) both, adaNabiz 1.6s ease-in-out .5s infinite;}
@keyframes adaNabiz{50%{box-shadow:0 12px 30px -14px rgba(8,14,24,.55), 0 0 0 5px rgba(255,107,94,.22);}}
@media (prefers-reduced-motion:reduce){ .ada, .ada.kritik{animation:none;} .ada, .ada-ic, .ada-ayrinti{transition:none;} }

/* ══ Uzun basınca önizleme (Hata Defteri, 26 Ekim) ══════════════════════
   Buzlu, hafif karartılmış zemin; ortada soru kartı, altında menü (iOS bağlam menüsü). */
.modal-bg.onizle-bg{flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px;
  background:rgba(20,30,46,.26); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);}
.onizle-bg > *{margin:0;}
.onizle{width:min(440px, 100%); max-height:62vh; overflow:auto; overscroll-behavior:contain; padding:18px; border-radius:24px;
  background:#fff; box-shadow:0 30px 70px -30px rgba(20,30,46,.55);}
.onizle-ust{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;}
.onizle-say{font:700 12.5px 'Figtree',sans-serif; color:var(--bad-ink);}
.onizle-soru{margin:0 0 12px; font:600 16.5px/1.45 'Figtree',sans-serif; color:var(--ink);}
.onizle-siklar{display:grid; gap:6px; margin-bottom:12px;}
.onizle-sik{display:flex; align-items:flex-start; gap:10px; padding:9px 12px; border-radius:14px; background:var(--surface-2,#F4F7FA);
  font-size:14.5px; line-height:1.4; color:var(--ink-soft);}
.onizle-sik b{flex:none; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:#fff; font-size:12px; color:var(--ink-soft);}
.onizle-sik span{flex:1; min-width:0;}
.onizle-sik.ok{background:var(--good-wash); color:var(--good-ink); font-weight:600;}
.onizle-sik.ok b{background:var(--good-ink); color:#fff;}
.onizle-sik svg{flex:none; margin-top:2px;}
.onizle-aciklama{padding:12px 14px; border-radius:14px; background:var(--amber-wash);}
.onizle-aciklama b{display:block; margin-bottom:4px; font:700 12.5px 'Figtree',sans-serif; color:var(--amber-ink);}
.onizle-aciklama p{margin:0; font-size:14.5px; line-height:1.5; color:var(--ink);}
.onizle-menu{width:min(280px, 100%); display:grid; overflow:hidden; border-radius:16px; background:rgba(255,255,255,.94);
  box-shadow:0 20px 50px -24px rgba(20,30,46,.5);}
.onizle-menu button{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px; padding:0 16px; border:0;
  background:none; font:600 15.5px 'Figtree',sans-serif; color:var(--ink); text-align:left; cursor:pointer;}
.onizle-menu button + button{border-top:1px solid var(--line);}
.onizle-menu button:focus-visible{outline:2px solid var(--primary); outline-offset:-2px;}
.onizle-menu [data-onizle="cikar"]{color:var(--bad-ink);}
.modal-bg.modal-cikis > .onizle, .modal-bg.modal-cikis > .onizle-menu{animation:modalCik 170ms var(--ease-in) both;}
@media (hover:none){ .nb-leaf{-webkit-touch-callout:none; -webkit-user-select:none; user-select:none;} }

/* İki kademeli alt panel (26 Ekim): uzun panel önce orta kademede (tam boy ama aşağı kaydırılmış). */
.ap-sheet.orta{transform:translate3d(0, var(--orta-ofs, 0px), 0);}
/* Telefonda alt panel ekranın altına yaslı (alt köşeleri düz): genel .modal-bg > *{margin:auto} onu dikeyde
   ortalıyordu, kısa panelin altında boşluk kalıyordu. 720px ve üstünde ortada açılan pencere olarak kalıyor. */
@media (max-width:719px){ .modal-bg.ap-sheet-bg > .ap-sheet{margin:auto auto 0;} }

/* ══ Premium 10 Dokunuş (26 Ekim) ══════════════════════════════════════ */
/* 1) Şık eleme (üstünü çizme): sağ tık, sola kaydırma ya da sağdaki eksi düğmesi. */
.opt{position:relative; overflow:hidden;}
.opt-metin{flex:1; min-width:0; transition:opacity .25s ease, color .25s ease;}
.opt-metin > span{
  display:inline;
  background-image:linear-gradient(var(--ink-faint), var(--ink-faint));
  background-repeat:no-repeat;
  background-position:0 54%;
  background-size:0% 1.6px;
  transition:background-size .34s var(--yay);
}
.opt.elenmis{border-color:var(--line); background:rgba(244,247,250,.55);}
.opt.elenmis .bub{opacity:.38; transform:scale(.94);}
.opt.elenmis .opt-metin{opacity:.44; color:var(--ink-faint);}
.opt.elenmis .opt-metin > span{background-size:100% 1.6px;}
.opt-ele{
  flex:none; margin-left:auto; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; color:var(--ink-faint); opacity:0;
  transition:opacity .16s ease, background-color .16s ease, color .16s ease, transform .2s var(--yay);
}
@media (hover:hover){
  .opt:not(.lock):hover .opt-ele{opacity:.72;}
  .opt-ele:hover{opacity:1 !important; background:var(--line); color:var(--ink);}
}
@media (hover:none){
  .opt:not(.lock) .opt-ele{opacity:.42;}
}
.opt.elenmis .opt-ele{opacity:.85; color:var(--bad-ink); background:var(--bad-wash); transform:rotate(90deg);}

/* 2) Mekanik tambur (odometer) sayı geçişi — sabit tabular genişlik, sıfır zıplama */
.ap-adim{user-select:none; -webkit-user-select:none;}
.ap-adim-deger > b{font-variant-numeric:tabular-nums; min-width:2ch; text-align:center;}
.tambur-s{display:inline-block; width:1ch; text-align:center;}
.tambur-h{display:inline-grid; width:1ch; overflow:clip; vertical-align:baseline; line-height:1.05; text-align:center;}
.tambur-k{display:grid; will-change:transform;}
.tambur-k > .tambur-e, .tambur-k > .tambur-y{grid-area:1/1; font-style:normal; font-weight:inherit; text-align:center;}
.tambur-k.yukari > .tambur-e{animation:tamburCikYukari .22s cubic-bezier(.22,1,.36,1) forwards;}
.tambur-k.yukari > .tambur-y{animation:tamburGirYukari .22s cubic-bezier(.22,1,.36,1) forwards;}
.tambur-k.asagi > .tambur-e{animation:tamburCikAsagi .22s cubic-bezier(.22,1,.36,1) forwards;}
.tambur-k.asagi > .tambur-y{animation:tamburGirAsagi .22s cubic-bezier(.22,1,.36,1) forwards;}
@keyframes tamburCikYukari{to{transform:translateY(-105%); opacity:0;}}
@keyframes tamburGirYukari{from{transform:translateY(105%); opacity:0;} to{transform:translateY(0); opacity:1;}}
@keyframes tamburCikAsagi{to{transform:translateY(105%); opacity:0;}}
@keyframes tamburGirAsagi{from{transform:translateY(-105%); opacity:0;} to{transform:translateY(0); opacity:1;}}

/* 3) Dinamik ada canlı bildirim (Live Activity) */
.ada-canli{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:0 16px; opacity:0; transform:scale(.92); pointer-events:none;
  font:700 13.5px/1 'Figtree',sans-serif; color:#fff; white-space:nowrap;
  transition:opacity .22s ease, transform .4s var(--yay);
}
.ada-canli-nokta{width:8px; height:8px; border-radius:50%; background:#6EEBD2; box-shadow:0 0 0 3px rgba(110,235,210,.22); flex:none;}
.ada.ton-bilgi .ada-canli-nokta{background:#F5C242; box-shadow:0 0 0 3px rgba(245,194,66,.22);}
.ada.canli{width:var(--ada-canli-g, 210px); height:40px; border-radius:20px;}
.ada.canli .ada-ic, .ada.canli .ada-ayrinti{opacity:0 !important; pointer-events:none;}
.ada.canli .ada-canli{opacity:1; transform:scale(1);}

/* 4) Koparılan takvim yaprağı ("DUS'a X gün") */
.an .ap-dus.ap-takvim{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  margin-top:14px; padding:11px 16px 8px; border-radius:14px;
  background:#fff; border:1px solid rgba(15,181,161,.18);
  box-shadow:0 8px 20px -10px rgba(14,30,46,.14), 0 2px 0 rgba(15,181,161,.16);
  cursor:pointer; user-select:none; overflow:visible;
}
.ap-takvim-delikler{
  position:absolute; top:0; left:12px; right:12px; height:5px;
  display:flex; justify-content:space-between; align-items:center; pointer-events:none;
}
.ap-takvim-delikler::before{
  content:""; position:absolute; inset:0 -12px auto -12px; height:4px;
  background:var(--primary-deep); border-radius:13px 13px 0 0; opacity:.85;
}
.ap-takvim-delikler i{
  position:relative; z-index:1; width:5px; height:5px; border-radius:50%;
  background:var(--primary-wash); box-shadow:inset 0 1px 1px rgba(0,0,0,.22);
}
.ap-takvim-yaprak{
  position:absolute; inset:-1px; padding:11px 16px 8px; border-radius:14px;
  background:#fff; border:1px solid rgba(15,181,161,.22);
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  transform-origin:16px 4px; pointer-events:none; z-index:2;
  animation:takvimKopar .88s cubic-bezier(.32,.04,.24,1) .28s forwards;
}
@keyframes takvimKopar{
  0%{transform:rotate(0deg) translate3d(0,0,0); opacity:1;}
  35%{transform:rotate(7deg) translate3d(4px, 6px, 0); opacity:1;}
  100%{transform:rotate(18deg) translate3d(18px, 46px, 0) scale(.94); opacity:0;}
}

/* 5) Haftalık hedef halkaları (Apple Fitness tarzı 7 gün) */
.an-halkalar{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
}
.an-hg{display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; min-width:0;}
.an-hg-halka{position:relative; width:28px; height:28px; display:grid; place-items:center;}
.an-hg-halka svg{width:28px; height:28px; transform:rotate(-90deg);}
.an-hg-halka circle{fill:none; stroke-width:3.2; stroke-linecap:round;}
.an-hg-halka .iz{stroke:var(--line);}
.an-hg-halka .dol{stroke:var(--amber); stroke-dasharray:100 100; transition:stroke-dashoffset .7s var(--yay), stroke .3s ease;}
.an-hg.tam .an-hg-halka .dol{stroke:var(--good);}
.an-hg.tam .an-hg-tik{position:absolute; width:7px; height:7px; border-radius:50%; background:var(--good);}
.an-hg small{font:600 11px/1 'Figtree',sans-serif; color:var(--ink-faint);}
.an-hg.bugun small{font-weight:800; color:var(--ink);}

/* 6) Diş kemeri detayında ağırlık & hedef çubuğu */
.dk-bar-sar{margin:10px 0 12px;}
.dk-bar-ust{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; font-weight:600; color:var(--ink-faint); margin-bottom:5px;}
.dk-bar-ust b{color:var(--ink-soft); font-weight:700;}
.dk-bar{position:relative; height:7px; border-radius:999px; background:rgba(20,30,46,.08); overflow: visible;}
.dk-bar > i{display:block; height:100%; border-radius:999px; width:var(--dk-oran, 0%); background:var(--primary-deep); transition:width .55s var(--yay);}
.dk-bar.iyi > i{background:var(--good);}
.dk-bar.orta > i{background:var(--amber);}
.dk-bar.zayif > i{background:var(--bad);}
.dk-bar-hedef{position:absolute; left:70%; top:-3px; bottom:-3px; width:2px; border-radius:2px; background:var(--ink-faint); opacity:.45;}

/* 7) Hata Defteri sayfa yırtılma fiziği */
.nb-leaf.nb-tearing{
  transform-origin:18px 14px !important;
  animation:nbYirtil .36s cubic-bezier(.32,.04,.24,1) forwards !important;
  pointer-events:none;
}
@keyframes nbYirtil{
  0%{transform:rotate(0deg) translate3d(0,0,0); opacity:1;}
  30%{transform:rotate(3.5deg) translate3d(6px, 8px, 0); opacity:.95;}
  100%{transform:rotate(8deg) translate3d(28px, 44px, 0) scale(.96); opacity:0;}
}

/* 8) Resmi Sınav Sonuç Karnesi (Belge görünümü) */
.karne-bg{padding:18px;}
.karne{
  width:min(480px, 100%); max-height:86vh; overflow:auto; overscroll-behavior:contain;
  background:#FCFBF7; color:#141E2E; border:1px solid #DFD9C8; border-radius:20px;
  padding:22px 20px 18px; box-shadow:0 30px 70px -28px rgba(14,22,34,.55);
  font-family:'Figtree',sans-serif;
}
.karne-bas{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:14px; border-bottom:2px solid #141E2E;
}
.karne-kurum{display:flex; align-items:center; gap:10px;}
.karne-amblem{width:36px; height:36px; border-radius:10px; background:#0A8576; color:#fff; display:grid; place-items:center; flex:none;}
.karne-amblem svg{width:22px; height:22px;}
.karne-kurum-metin b{display:block; font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#141E2E;}
.karne-kurum-metin span{font-size:11.5px; font-weight:600; color:#5A6577;}
.karne-kod{text-align:right; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; color:#5A6577;}
.karne-kod b{display:block; color:#141E2E; font-size:12px;}
.karne-aday{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 0; border-bottom:1px dashed #CEC7B4; font-size:13px; color:#5A6577;
}
.karne-aday b{color:#141E2E; font-weight:700;}
.karne-sayilar{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:6px;
  margin:14px 0; padding:12px 8px; border-radius:12px; background:#F3F0E6; border:1px solid #E2DDD0;
  text-align:center; font-variant-numeric:tabular-nums;
}
.karne-sayilar div span{display:block; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#5A6577;}
.karne-sayilar div b{display:block; margin-top:3px; font-size:18px; font-weight:800; color:#141E2E;}
.karne-sayilar div.vurgu b{color:#0A8576;}
.karne-tablo{display:grid; gap:6px; margin-bottom:14px;}
.karne-satir{display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(60px, 1fr) auto; align-items:center; gap:10px; font-size:12.5px;}
.karne-satir-ad{font-weight:600; color:#141E2E; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.karne-satir-cubuk{height:5px; border-radius:99px; background:#E5E0D3; overflow:hidden;}
.karne-satir-cubuk i{display:block; height:100%; border-radius:inherit; background:#0A8576;}
.karne-satir-deger{font-weight:700; font-variant-numeric:tabular-nums; color:#5A6577; min-width:52px; text-align:right;}
.karne-damga{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:10px; border-top:1px solid #E2DDD0; font-size:11px; color:#6E7785;
}
.karne-muhur{
  padding:3px 8px; border:1.5px solid #0A8576; border-radius:6px;
  font:800 10px/1.2 'Figtree',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#0A8576;
  transform:rotate(-2deg);
}
.karne-eylemler{display:flex; gap:8px; margin-top:14px;}
.karne-eylemler .btn{flex:1;}

/* ══════════════════════════════════════════════════════════════════
   9 EK APPLE KALİTESİNDE MİKRO-ETKİLEŞİM VE ALANA ÖZGÜ DETAY
   ══════════════════════════════════════════════════════════════════ */

/* 1) DUS Denemesi: Soru Bayraklama (.qisaret) & Dock Büyüteçli Soru Haritası */
.qisaret{
  width:32px; height:32px; border-radius:9px; border:1px solid transparent;
  background:transparent; color:var(--ink-faint); display:inline-grid; place-items:center;
  cursor:pointer; margin-right:2px;
  transition:transform .22s var(--yay-zipla), color .18s ease, background-color .18s ease, border-color .18s ease;
}
.qisaret:hover{background:rgba(245,166,35,.1); color:#D97706;}
.qisaret.on{
  background:#FBF1DE; border-color:rgba(245,166,35,.45); color:#D97706;
  animation:yerimiZipla .34s var(--yay-zipla);
}
.qisaret.on .ikon{fill:currentColor;}
@keyframes yerimiZipla{
  0%{transform:scale(1);}
  45%{transform:scale(1.24) translateY(-2px);}
  100%{transform:scale(1);}
}
.soru-ekran .card{overflow:clip;}
.dnm-kare{
  position:relative;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
@media (hover:hover) and (pointer:fine){
  .dnm-kare{
    transform:scale(var(--dock-s, 1));
    transform-origin:center bottom;
    transition:transform .14s cubic-bezier(.22,1,.36,1), background-color .15s ease, color .15s ease, border-color .15s ease;
  }
  .dnm-kare:hover{z-index:2;}
}
.dnm-kare.isaretli{
  border-color:#F5A623 !important;
  box-shadow:0 0 0 1.5px rgba(245,166,35,.32);
}
.dnm-kare.isaretli::after{
  content:""; position:absolute; top:-3px; right:-3px;
  width:8px; height:8px; border-radius:50%;
  background:#F5A623; border:1.5px solid var(--surface, #fff);
}

/* 2) Çalışma Modu Açıklama Kutusu (.explain-gir) & Sonuç İnceleme (.rev-b-gir) Yaylı Akordiyon */
.explain.explain-gir,
.rev-b.rev-b-gir{
  transform-origin:top center;
  animation:explainAc .38s var(--yay) both;
}
@keyframes explainAc{
  0%{opacity:0; transform:translateY(-8px) scaleY(.92);}
  100%{opacity:1; transform:translateY(0) scaleY(1);}
}
.explain.explain-gir .sik-ist-cubuk > i,
.rev-b.rev-b-gir .sik-ist-cubuk > i{
  animation:sikCubukDol .58s var(--yay) .08s both;
}
@keyframes sikCubukDol{
  from{width:0% !important;}
  to{width:var(--ist-w, 0%) !important;}
}

/* 3) Kurulum Akışı 3 Adımlı İlerleme Çubuğu (.su-adim-bar) */
.su-progress{
  display:inline-flex; align-items:center; gap:10px;
}
.su-adim-bar{
  display:inline-flex; align-items:center; gap:4px;
}
.su-adim-bar > i{
  display:block; width:16px; height:5px; border-radius:99px;
  background:rgba(20,30,46,.12);
  transition:width .32s var(--yay), background-color .25s ease;
}
.su-adim-bar > i.tam{background:var(--primary);}
.su-adim-bar > i.aktif{width:28px; background:var(--primary-deep);}

/* 4) Kayan Seçici Zemini (.inc-filtre, .ap-dl-sekme, .lig-gecis-btnler) */
.inc-filtre, .ap-dl-sekme, .lig-gecis-btnler{position:relative;}
.inc-filtre button.seg-gecici,
.ap-dl-sekme button.seg-gecici,
.lig-gecis-btnler button.seg-gecici{
  background:transparent !important; box-shadow:none !important;
}

/* 6) Ana Sayfa Karıştırılan Kavramlar Şeridi: Manyetik Scroll-Snap & Dokunsal 3B Çevirme */
.kv-serit{
  scroll-snap-type:x mandatory;
  scroll-padding-left:4px;
  -webkit-overflow-scrolling:touch;
}
.kv-kart{
  scroll-snap-align:start;
}
.kv-cevir{perspective:950px;}
.kv-ic{
  transition:transform .52s cubic-bezier(.22,1,.36,1), box-shadow .32s ease;
}
.kv-kart:active .kv-ic{
  transform:scale(.97);
}
.kv-kart.cevrik:active .kv-ic{
  transform:rotateY(180deg) scale(.97);
}

/* 7) Denemelerim Grafiği: Çizgi Çizilme Animasyonu & Apple Borsa/Sağlık İmleci */
.dgr-sar{position:relative; touch-action:pan-y;}
.dgr-cizgi{
  stroke-dasharray:100;
  stroke-dashoffset:0;
  animation:dgrCizgiCiz .95s cubic-bezier(.22,1,.36,1) both;
}
.dgr-alan{
  animation:dgrAlanBelir .85s ease .15s both;
}
@keyframes dgrCizgiCiz{
  from{stroke-dashoffset:100;}
  to{stroke-dashoffset:0;}
}
@keyframes dgrAlanBelir{
  from{opacity:0;}
  to{opacity:1;}
}
.dgr-imlec-baslik{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:4px 8px 8px; font-size:12px; color:rgba(255,255,255,.72);
  font-variant-numeric:tabular-nums;
  transition:opacity .2s ease;
}
.dgr-ib-net{
  color:#E2B76D; font-weight:800; font-size:13.5px;
}
.dgr-imlec-cizgi{
  stroke:#E2B76D; stroke-width:1.2; stroke-dasharray:3 3;
  opacity:0; pointer-events:none;
  transition:opacity .16s ease;
}
.dgr-imlec-nokta{
  fill:#E2B76D; stroke:#131E2E; stroke-width:2.2;
  opacity:0; pointer-events:none;
  transition:opacity .16s ease;
}
.dgr-sar.izleniyor .dgr-imlec-cizgi,
.dgr-sar.izleniyor .dgr-imlec-nokta{
  opacity:1;
}

/* 8) Rozetler Galerisi: Kilitli Rozet İlerleme Çubuğu & 3B Metalik İnceleme Modalı */
.rozet-card{cursor:pointer;}
.rozet-prog-sar{
  margin-top:8px; display:flex; flex-direction:column; gap:4px; width:100%;
}
.rozet-prog{
  width:100%; height:5px; border-radius:99px;
  background:rgba(20,30,46,.09); overflow:hidden;
}
.rozet-prog > i{
  display:block; height:100%; border-radius:inherit;
  background:linear-gradient(90deg, var(--primary), var(--primary-deep));
  transition:width .5s var(--yay);
}
.rozet-prog-metin{
  font:700 10.5px/1.2 'Figtree',sans-serif; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.rozet-modal{
  width:min(360px, 92vw); background:var(--surface, #fff); color:var(--ink);
  border-radius:24px; padding:26px 22px 20px; text-align:center;
  box-shadow:0 30px 70px -20px rgba(14,22,34,.45);
  border:1px solid var(--line);
}
.rozet-3d-sahne{
  perspective:800px; display:grid; place-items:center; margin:4px auto 16px;
}
.rozet-3d-kart{
  --rx:0deg; --ry:0deg; --px:30%; --py:25%;
  position:relative; width:148px; height:148px; border-radius:36px;
  display:grid; place-items:center;
  background:radial-gradient(circle at 30% 25%, #ffffff, #F2F6F5 65%, #E3ECEA);
  border:1.5px solid rgba(15,181,161,.28);
  box-shadow:0 22px 44px -16px rgba(10,133,118,.28), inset 0 1px 0 rgba(255,255,255,.9);
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  transition:transform .38s cubic-bezier(.22,1,.36,1);
  overflow:hidden; user-select:none; touch-action:none;
}
.rozet-3d-kart.egiliyor{transition:transform .06s linear;}
.rozet-3d-kart.kilitli{
  filter:saturate(.35);
  border-color:var(--line);
  box-shadow:0 18px 36px -18px rgba(14,22,34,.2);
}
.rozet-3d-parlama{
  position:absolute; inset:-20%; pointer-events:none;
  background:radial-gradient(circle at var(--px) var(--py), rgba(255,255,255,.82) 0%, rgba(255,255,255,0) 58%);
  mix-blend-mode:soft-light;
}
.rozet-3d-ikon{
  position:relative; z-index:1; transform:translateZ(22px);
  display:grid; place-items:center;
}
.rozet-modal-kat{
  display:inline-block; padding:4px 10px; border-radius:99px;
  background:var(--primary-wash); color:var(--primary-deep);
  font:800 10.5px/1.2 'Figtree',sans-serif; letter-spacing:.06em; text-transform:uppercase;
}
.rozet-modal-baslik{margin:10px 0 6px; font-size:20px; font-weight:800; color:var(--ink);}
.rozet-modal-aciklama{margin:0 0 14px; font-size:13.5px; line-height:1.5; color:var(--ink-soft);}
.rozet-modal-prog{
  margin:0 0 14px; padding:10px 12px; border-radius:12px;
  background:var(--bg, #F6F8F7); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
}
.rozet-modal-prog span{font:700 11.5px/1.2 'Figtree',sans-serif; color:var(--ink-soft);}
.rozet-modal-ipucu{margin:0 0 14px; font-size:11.5px; color:var(--ink-faint);}
.rozet-modal-kapat{width:100%;}

/* 9) Haftalık Lig & Arkadaş Sıralaması: Kürsü Madalyaları (.kursu-1..3) & Yapışkan Kendi Sıran (.sira-satir.ben) */
.sira-no.kursu-1,
.sira-no.kursu-2,
.sira-no.kursu-3{
  width:26px; height:26px; border-radius:50%;
  display:inline-grid; place-items:center;
  font-weight:800; font-size:12.5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 2px 6px rgba(14,22,34,.12);
}
.sira-no.kursu-1{
  background:linear-gradient(145deg, #FFE082, #F5A623);
  color:#5C3800; border:1px solid #E09112;
}
.sira-no.kursu-2{
  background:linear-gradient(145deg, #F1F5F9, #CBD5E1);
  color:#334155; border:1px solid #94A3B8;
}
.sira-no.kursu-3{
  background:linear-gradient(145deg, #FCD9B6, #D98A4E);
  color:#5A2D0C; border:1px solid #C27135;
}
.sira-satir.ben{
  position:sticky;
  bottom:10px;
  top:calc(var(--ust-cubuk-h, 64px) + 8px);
  z-index:3;
  box-shadow:0 10px 26px -12px rgba(10,133,118,.28), 0 0 0 1.5px rgba(15,181,161,.35);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* ══ BİLGİ KARTLARI (28 Ekim): iPhone tarzı deste ═══════════════════════════════════════════
   Kartların konumu, eğimi ve çevrilmesi app-kartlar.js'teki yay fiziğiyle (yalnız transform ve opacity).
   Burada görünüm, sayfanın açılıp kapanması ve dokunuş tepkileri var. Ön yüz açık, arka yüz hafif nane. */
.fc-overlay{
  position:fixed; inset:0; z-index:250;
  background:rgba(12,22,34,.42);
  overscroll-behavior:contain;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:fcPerdeGir .25s ease both;
}
.fc-overlay.closing{animation:fcPerdeCik .28s ease both; pointer-events:none;}
@keyframes fcPerdeGir{from{opacity:0;}}
@keyframes fcPerdeCik{to{opacity:0;}}
/* Dusky balonu kartın düğmelerinin üstüne binmesin. */
body:has(.fc-overlay) .dusky-bubble{visibility:hidden;}

.fc-panel{
  position:relative;
  width:100%; max-width:460px;
  height:min(720px, 92vh); height:min(720px, 92dvh);
  display:flex; flex-direction:column; gap:12px;
  padding:18px 20px;
  border-radius:30px;
  background:#F3F5F8;
  box-shadow:0 40px 90px -30px rgba(10,22,36,.5);
  overflow:hidden;
  animation:fcStudioGir .5s cubic-bezier(.2,.9,.25,1) both;
}
.fc-overlay.closing .fc-panel{animation:fcStudioCik .26s cubic-bezier(.4,0,1,1) both;}
@keyframes fcStudioGir{from{opacity:0; transform:translate3d(0,24px,0) scale(.97);}}
@keyframes fcStudioCik{to{opacity:0; transform:translate3d(0,16px,0) scale(.97);}}
@keyframes fcSheetGir{from{transform:translate3d(0,100%,0);}}
@keyframes fcSheetCik{to{transform:translate3d(0,100%,0);}}

.fc-sheet-handle{display:none; flex:none; width:40px; height:5px; margin:-6px auto -2px; border-radius:99px; background:rgba(20,30,46,.18);}
.fc-panel-head{flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px;}
.fc-panel-titles{display:flex; flex-direction:column; gap:2px; min-width:0;}
.fc-panel-title{font:700 21px/1.15 'Figtree',sans-serif; letter-spacing:-.02em; color:var(--ink);}
.fc-panel-sub{font:600 13px/1.25 'Figtree',sans-serif; color:var(--ink-faint);}
.fc-panel-close{
  position:relative; flex:none;
  width:36px; height:36px; border:0; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(20,30,46,.07); color:var(--ink-soft);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color .2s ease, transform .3s var(--yay-zipla, cubic-bezier(.3,1.2,.5,1));
}
.fc-panel-close::after{content:""; position:absolute; top:-4px; right:-4px; bottom:-4px; left:-4px;}
.fc-panel-close:active{transform:scale(.9);}

/* Branş hapları: yatay kayar, kenarlarda yumuşak solma */
.fc-chips{
  flex:none; display:flex; gap:6px;
  overflow-x:auto; overscroll-behavior-x:contain;
  margin:0 -20px; padding:2px 20px;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  mask-image:linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.fc-chips::-webkit-scrollbar{display:none;}
.fc-chip{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  height:38px; padding:0 14px; border:0; border-radius:999px;
  background:#fff; color:var(--ink-soft);
  box-shadow:0 0 0 1px rgba(20,30,46,.07);
  font:700 13.5px/1 'Figtree',sans-serif; white-space:nowrap;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color .25s ease, color .25s ease, transform .3s var(--yay-zipla, cubic-bezier(.3,1.2,.5,1));
}
.fc-chip:active{transform:scale(.95);}
.fc-chip .fc-chip-ikon{display:inline-flex; color:var(--primary-deep);}
.fc-chip em{font-style:normal; font-size:12px; font-weight:700; color:var(--ink-faint); font-variant-numeric:tabular-nums;}
.fc-chip.fc-chip-star{color:#B45309;}
.fc-chip.fc-chip-star .ikon{fill:currentColor;}
.fc-chip.on{background:var(--primary-deep); color:#fff; box-shadow:none;}
.fc-chip.on .fc-chip-ikon, .fc-chip.on em{color:rgba(255,255,255,.78);}
.fc-chip.fc-chip-star.on{background:#D97706;}

/* İnce ilerleme çizgisi ve sayaç */
.fc-prog-row{flex:none; display:flex; align-items:center; gap:12px;}
.fc-prog-track{flex:1; height:4px; border-radius:99px; background:rgba(20,30,46,.08); overflow:hidden;}
.fc-prog-track > i{display:block; height:100%; border-radius:99px; background:var(--primary-deep); transform:scaleX(0); transform-origin:0 50%; transition:transform .5s cubic-bezier(.2,.9,.25,1);}
.fc-counter-num{min-width:56px; text-align:right; font:700 13px/1 'Figtree',sans-serif; color:var(--ink-faint); font-variant-numeric:tabular-nums;}

/* Sahne ve deste: kart sahnenin tamamını kaplar, arkadaki iki kart alttan görünür */
.fc-stage{position:relative; flex:1; min-height:0;}
.fc-deste{position:absolute; top:0; left:0; right:0; bottom:26px; touch-action:none; -webkit-user-select:none; user-select:none;}
.fc-kart{
  position:absolute; top:0; left:0; right:0; bottom:0;
  border-radius:28px;
  transform-origin:50% 100%;
  perspective:1400px;
  will-change:transform;
  cursor:grab; outline:none;
  -webkit-tap-highlight-color:transparent;
}
.fc-kart:not(.on){pointer-events:none;}
.fc-kart.tutuldu{cursor:grabbing;}
.fc-kart-ic{position:absolute; top:0; left:0; right:0; bottom:0; transform-style:preserve-3d; -webkit-transform-style:preserve-3d;}
.fc-yuz{
  position:absolute; top:0; left:0; right:0; bottom:0;
  display:flex; flex-direction:column;
  padding:20px 22px 22px;
  border-radius:28px;
  overflow:hidden;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.fc-on{background:linear-gradient(180deg, #FFFFFF 55%, #F8FAFB); box-shadow:0 0 0 1px rgba(20,30,46,.06), 0 24px 48px -28px rgba(14,22,34,.38);}
.fc-arka{background:#F0FAF6; transform:rotateY(180deg); box-shadow:0 0 0 1px rgba(10,133,118,.16), 0 24px 48px -28px rgba(14,22,34,.38);}
.fc-kart.on:focus-visible .fc-yuz{box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--primary-deep), 0 24px 48px -28px rgba(14,22,34,.38);}
.fc-yuz-ust{flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:30px;}
.fc-brans{display:inline-flex; align-items:center; gap:8px; min-width:0; font:700 14px/1.2 'Figtree',sans-serif; color:var(--ink-faint);}
.fc-brans-ikon{flex:none; display:inline-grid; place-items:center; width:30px; height:30px; border-radius:10px; background:var(--primary-wash, #E4F7F3); color:var(--primary-deep);}
.fc-isaret{display:grid; place-items:center; width:30px; height:30px; color:#F59E0B; opacity:0; transform:scale(.6); transition:opacity .25s ease, transform .4s cubic-bezier(.3,1.5,.5,1);}
.fc-isaret .ikon{fill:currentColor;}
.fc-isaret.on{opacity:1; transform:none;}
.fc-isaret.pop{animation:fcYildizPop .55s cubic-bezier(.3,1.5,.5,1);}
@keyframes fcYildizPop{0%{transform:scale(.5);} 55%{transform:scale(1.3);} 100%{transform:none;}}
.fc-baslik{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:12px 4px; text-align:center;
  font:700 clamp(24px, 6.6vw, 30px)/1.22 'Figtree',sans-serif;
  letter-spacing:-.025em; color:var(--ink); text-wrap:balance;
}
.fc-yuz-alt{flex:none; display:flex; justify-content:center; color:rgba(20,30,46,.2);}
.fc-yuz-alt svg{width:22px; height:22px;}
.fc-govde{flex:1; min-height:0; display:flex; flex-direction:column; margin:12px -8px 0; padding:0 8px; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; scrollbar-width:none;}
.fc-govde::-webkit-scrollbar{display:none;}
.fc-govde-ic{margin:auto 0; padding:4px 0 6px;}
.fc-konu{margin-bottom:8px; font:700 18px/1.3 'Figtree',sans-serif; letter-spacing:-.01em; color:var(--primary-deep);}
.fc-metin{font:500 16px/1.6 'Figtree',sans-serif; color:var(--ink);}
.fc-ok-ikon{display:inline-block; padding:0 3px; font-weight:700; color:var(--primary-deep);}

/* Sürüklerken ton: sağa yıldız (amber), sola geç (gri) */
.fc-ton{position:absolute; top:0; left:0; right:0; bottom:0; display:flex; align-items:flex-start; padding:18px; border-radius:28px; opacity:0; pointer-events:none;}
.fc-ton span{display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 15px; border-radius:99px; background:#fff; font:700 14.5px/1 'Figtree',sans-serif; box-shadow:0 8px 18px -10px rgba(14,22,34,.45);}
.fc-ton svg{width:16px; height:16px;}
.fc-ton-sag{justify-content:flex-start; background:linear-gradient(160deg, rgba(251,191,36,.34), rgba(245,158,11,.18)); box-shadow:inset 0 0 0 2px rgba(245,158,11,.6);}
.fc-ton-sag span{color:#B45309;}
.fc-ton-sag .ikon{fill:currentColor;}
.fc-ton-sol{justify-content:flex-end; background:rgba(20,30,46,.06); box-shadow:inset 0 0 0 2px rgba(20,30,46,.16);}
.fc-ton-sol span{color:var(--ink-soft);}

/* İlk açılışta bir kez görünen ipucu */
.fc-ipucu{
  position:absolute; left:0; right:0; bottom:52px; z-index:30;
  width:max-content; max-width:calc(100% - 32px); margin:0 auto; padding:10px 16px; border-radius:99px;
  background:rgba(20,30,46,.88); color:#fff;
  font:600 13.5px/1.25 'Figtree',sans-serif; text-align:center;
  pointer-events:none; opacity:0; transform:translateY(8px);
  transition:opacity .4s ease, transform .55s cubic-bezier(.2,.9,.25,1);
}
.fc-ipucu.on{opacity:1; transform:none;}

/* Alt düğmeler: geri, yıldız, ileri */
.fc-actions{flex:none; display:flex; align-items:center; justify-content:center; gap:24px;}
.fc-yuvarlak{
  position:relative; width:56px; height:56px; border:0; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; color:var(--ink);
  box-shadow:0 0 0 1px rgba(20,30,46,.07), 0 10px 22px -14px rgba(14,22,34,.4);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .35s var(--yay-zipla, cubic-bezier(.3,1.2,.5,1)), background-color .25s ease, color .25s ease, opacity .25s ease;
}
.fc-yuvarlak svg{width:24px; height:24px;}
.fc-yuvarlak:active:not(:disabled){transform:scale(.88);}
.fc-yuvarlak:disabled{opacity:.35; cursor:default;}
.fc-yildiz-btn{width:64px; height:64px; color:#D97706;}
.fc-yildiz-btn .ikon{width:26px; height:26px;}
.fc-yildiz-btn.on{background:#F59E0B; color:#fff;}
.fc-yildiz-btn.on .ikon{fill:currentColor;}
.fc-yildiz-btn.pop{animation:fcYildizPop .55s cubic-bezier(.3,1.5,.5,1);}

/* Bitiş ve boş durum */
.fc-done{
  position:absolute; top:0; left:0; right:0; bottom:26px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:28px 24px; border-radius:28px; text-align:center;
  background:#fff; box-shadow:0 0 0 1px rgba(20,30,46,.06), 0 24px 48px -28px rgba(14,22,34,.38);
  animation:fcBitisGir .6s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes fcBitisGir{from{opacity:0; transform:translate3d(0,24px,0) scale(.96);}}
.fc-done-icon{width:64px; height:64px; border-radius:20px; display:grid; place-items:center; background:var(--primary-wash); color:var(--primary-deep);}
.fc-done-icon.fc-done-star{background:#FEF3C7; color:#D97706;}
.fc-done-icon.fc-done-star .ikon{fill:currentColor;}
.fc-done-title{font:700 21px/1.25 'Figtree',sans-serif; letter-spacing:-.015em; color:var(--ink);}
.fc-done-sub{max-width:30ch; font-size:15px; line-height:1.5; color:var(--ink-faint);}
.fc-done-btns{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:8px;}
.fc-done-restart{
  display:inline-flex; align-items:center; gap:6px;
  height:48px; padding:0 20px; border:0; border-radius:16px;
  background:var(--primary-deep); color:#fff;
  font:700 15px/1 'Figtree',sans-serif; cursor:pointer;
  transition:transform .35s var(--yay-zipla, cubic-bezier(.3,1.2,.5,1));
}
.fc-done-restart:active{transform:scale(.96);}
.fc-done-restart.ikincil{background:#FFFBEB; color:#B45309; box-shadow:inset 0 0 0 1.5px rgba(245,166,35,.4);}
.fc-done-restart .ikon{fill:currentColor;}

.fc-kbd-hint{flex:none; margin-top:-4px; text-align:center; font:600 12px/1.2 'Figtree',sans-serif; color:var(--ink-faint);}
@media (hover:none){ .fc-kbd-hint{display:none;} }

/* Telefon: neredeyse tam boy alt sayfa; tutamaktan aşağı çekince kapanır */
@media (max-width:560px){
  html.fc-acik{overflow:hidden;}
  .fc-overlay{align-items:flex-end; padding:0;}
  .fc-panel{
    max-width:none;
    height:calc(100vh - 44px); height:calc(100dvh - max(44px, env(safe-area-inset-top) + 12px));
    padding:14px 16px calc(14px + env(safe-area-inset-bottom));
    border-radius:30px 30px 0 0;
    animation:fcSheetGir .55s cubic-bezier(.2,.9,.25,1) both;
  }
  .fc-overlay.closing .fc-panel{animation:fcSheetCik .3s cubic-bezier(.4,0,1,1) both;}
  .fc-sheet-handle{display:block;}
  .fc-panel{touch-action:none;}
  .fc-chips{margin:0 -16px; padding:2px 16px; touch-action:pan-x;}
  .fc-yuz{padding:18px 20px 20px;}
}
@media (prefers-reduced-motion:reduce){
  .fc-overlay, .fc-panel, .fc-overlay.closing .fc-panel, .fc-done, .fc-isaret.pop, .fc-yildiz-btn.pop{animation:none !important;}
  .fc-ipucu, .fc-prog-track > i, .fc-isaret{transition:none;}
}

/* ══ Karşılamadaki Dusky (26 Ekim; kostümlü sahneler) ══════════════════════════════════════
   Sağ kenardan taşan büyük Dusky; her açılışta rastgele bir an (app.js, KARŞILAMADAKİ DUSKY). Çizim asıl
   maskotla aynı. Parçalar: .ds-tum (bütün; sahne hareketi), .ds-govde (nefes), .ds-bakis (imleç takibi),
   .ds-gozler (sahnenin bakışı), .ds-goz (göz kırpma, app.js), kollar ve eşyalar. Sahne hareketleri girişten
   sonra (.85 sn) başlar; yeniden çizimde app.js hepsini aynı saate bağlar (kaldıkları yerden sürerler). */
.an-dusky{flex:none; width:clamp(230px, 30vw, 430px); margin-right:calc(-1 * clamp(12px, 3.4vw, 56px)); cursor:pointer;
  -webkit-tap-highlight-color:transparent;}
.an-dusky-ic.ds-girecek{opacity:0; animation:dsGoster 0s linear 2s forwards;}
@keyframes dsGoster{to{opacity:1;}}
.ds{display:block; width:100%; height:auto; overflow:visible;}
.ds *{transform-box:fill-box;}
.ds-tum, .ds-govde{transform-origin:50% 100%;}
.ds-govde{animation:dsNefes 4.4s ease-in-out infinite;}
@keyframes dsNefes{50%{transform:scale(1.012, 1.024);}}
.ds-golge{transform-origin:50% 50%; animation:dsGolge 4.4s ease-in-out infinite;}
@keyframes dsGolge{50%{transform:scaleX(.96); opacity:.85;}}
.ds-goz, .ds-gozler, .ds-goz-mutlu{transform-origin:50% 50%;}
.ds-bakis{transform:translate(calc(var(--gx, 0) * 1px), calc(var(--gy, 0) * 1px)); transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.ds-goz-mutlu, .ds-agiz-acik, .ds-agiz-o{opacity:0;}
.ds-goz, .ds-goz-mutlu, .ds-agiz-gulus, .ds-agiz-acik{transition:opacity .18s ease;}

/* Sahnenin yüz hâli: mutlu gözler, açık ağız. */
.ds-mutlu .ds-goz{opacity:0;}
.ds-mutlu .ds-goz-mutlu{opacity:1;}
.ds-agiz-acikta .ds-agiz-gulus{opacity:0;}
.ds-agiz-acikta .ds-agiz-acik{opacity:1;}
/* Kol ve tuttuğu eşya birlikte omuzdan döner (görünüm kutusu: köken kullanıcı biriminde, omuz noktası). */
.ds-alet-kol, .ds-tada, .ds-kaldir, .ds-kol-zafer, .ds-kol-gozluk, .ds-kol-isaret{transform-box:view-box;}
.ds-parilti{transform-origin:50% 50%; opacity:0; animation:dsParla 3.4s ease-in-out infinite; animation-delay:calc(1s + var(--i, 0) * .7s);}
@keyframes dsParla{0%, 55%, 100%{opacity:0; transform:scale(.3) rotate(0);} 70%{opacity:1; transform:scale(1.1) rotate(45deg);} 85%{opacity:.85; transform:scale(.85) rotate(80deg);}}

/* Kral: taç arada düzeltilir (hafif kalkıp yerine oturur), taşta parıltı; yarı kapalı gözler, tek kaş havada. */
.ds-tac{transform-origin:50% 100%; animation:dsTac 6.5s cubic-bezier(.45,0,.3,1) 1.4s infinite;}
@keyframes dsTac{0%, 22%, 100%{transform:none;} 8%{transform:translateY(-2px) rotate(-5deg);} 15%{transform:rotate(2.5deg);}}
.ds-s-kral .ds-kaslar{transform-origin:50% 100%; animation:dsKasKral 6.5s ease-in-out 1.4s infinite;}
@keyframes dsKasKral{0%, 30%, 52%, 100%{transform:none;} 36%, 46%{transform:translateY(-1.2px);}}

/* Havalı: gözlük ara ara burnun ucuna iner, üstünden bakıp göz kırpar, geri iter; camlarda ışık geçer. */
.ds-gozluk{animation:dsGozluk 7s cubic-bezier(.45,0,.3,1) 1.4s infinite;}
.ds-kol-gozluk{transform-origin:77px 50px; animation:dsGozlukKol 7s cubic-bezier(.45,0,.3,1) 1.4s infinite;}
@keyframes dsGozluk{0%, 28%, 100%{transform:none;} 8%, 20%{transform:translateY(6px);}}
@keyframes dsGozlukKol{0%, 28%, 100%{transform:none;} 8%, 20%{transform:rotate(9deg);}}
.ds-s-havali .ds-goz-sag{animation:dsHavaliKirp 7s ease 1.4s infinite;}
@keyframes dsHavaliKirp{0%, 11%, 18%, 100%{transform:scaleY(1);} 13%, 16%{transform:scaleY(.08);}}
.ds-isilti{animation:dsIsilti 4.2s ease-in-out 1s infinite;}
@keyframes dsIsilti{0%, 66%, 100%{opacity:0; transform:translateX(-4px);} 76%{opacity:.95;} 88%{opacity:0; transform:translateX(6px);}}

/* Süper kahraman: pelerin rüzgârda dalgalanır, ara ara göğüs kabartır; gözler yukarı, kararlı. */
.ds-pelerin{transform-origin:50% 0%; animation:dsPelerin 2.6s ease-in-out infinite;}
@keyframes dsPelerin{0%, 100%{transform:none;} 50%{transform:skewX(-5deg) scaleX(1.03);}}
.ds-s-kahraman .ds-gozler{transform:translate(1.4px, -.8px);}
.ds-s-kahraman .ds-tum{animation:dsKabart 6s ease-in-out 1.8s infinite;}
@keyframes dsKabart{0%, 30%, 100%{transform:none;} 10%, 22%{transform:translateY(-2.5px) scale(1.025);}}

/* Mezun: püskül sallanır, diploma ara ara havaya kalkar. */
.ds-puskul{transform-origin:50% 0%; animation:dsPuskul 1.9s ease-in-out infinite alternate;}
@keyframes dsPuskul{from{transform:rotate(-14deg);} to{transform:rotate(12deg);}}
.ds-tada{transform-origin:77px 48px; animation:dsTada 5s cubic-bezier(.3,1.3,.5,1) 1.3s infinite;}
@keyframes dsTada{0%, 28%, 100%{transform:none;} 9%, 20%{transform:rotate(-26deg) translateY(-3px);}}

/* Diş hekimi: anlatır gibi parmağını kaldırır, başını sallar; alın aynası parlar. */
.ds-kol-isaret{transform-origin:77px 47px; animation:dsIsaret 5.2s ease-in-out 1.1s infinite;}
@keyframes dsIsaret{0%, 42%, 100%{transform:none;} 10%{transform:rotate(-10deg);} 20%{transform:rotate(4deg);} 30%{transform:rotate(-6deg);}}
.ds-s-doktor .ds-tum{animation:dsBasSalla 5.2s ease-in-out 1.1s infinite;}
@keyframes dsBasSalla{0%, 42%, 100%{transform:none;} 14%{transform:rotate(-2deg);} 26%{transform:rotate(1.5deg);}}
.ds-ayna-isik{animation:dsAynaIsik 3.4s ease-in-out 1s infinite;}
@keyframes dsAynaIsik{0%, 66%, 100%{opacity:.35;} 78%{opacity:1;}}

/* Cerrah: maske nefesle kabarır, diş aynasını çevirir; gözler gülüyor. */
.ds-maske{transform-origin:50% 50%; animation:dsMaske 4.4s ease-in-out infinite;}
@keyframes dsMaske{50%{transform:scale(1.03, 1.06);}}
.ds-alet-kol{transform-origin:77px 50px; animation:dsAlet 4.2s ease-in-out 1.1s infinite;}
@keyframes dsAlet{0%, 40%, 100%{transform:none;} 14%{transform:rotate(-12deg);} 27%{transform:rotate(6deg);}}

/* Dedektif: büyüteç gözünün önünde (göz büyük görünür), hafifçe gezinir; ara ara kaşlar kalkar. */
.ds-s-dedektif .ds-goz-sag{transform:scale(1.42);}
.ds-buyutec, .ds-s-dedektif .ds-kol-sag{animation:dsBuyutec 3.6s ease-in-out infinite;}
@keyframes dsBuyutec{50%{transform:translate(-1.6px, 1.6px) rotate(-2deg);}}
.ds-s-dedektif .ds-kaslar{animation:dsKasKaldir 5s ease-in-out 1.2s infinite;}
@keyframes dsKasKaldir{0%, 30%, 100%{transform:none;} 10%, 22%{transform:translateY(-1.6px);}}

/* Şampiyon: yumruk havada (sevinçle iner kalkar), madalya sallanır, zıplar; parıltılar. */
.ds-kol-zafer{transform-origin:77px 42px; animation:dsZafer 1.7s ease-in-out .9s infinite;}
@keyframes dsZafer{0%, 100%{transform:none;} 30%{transform:rotate(-10deg);} 58%{transform:rotate(7deg);}}
.ds-madalya{transform-origin:50% 0%; animation:dsMadalya 2.3s ease-in-out infinite;}
@keyframes dsMadalya{0%, 100%{transform:rotate(4deg);} 50%{transform:rotate(-4deg);}}
.ds-s-sampiyon .ds-tum{animation:dsSevin 3s ease-in-out .9s infinite;}
@keyframes dsSevin{0%, 44%, 100%{transform:none;} 14%{transform:translateY(-6px) scale(.98, 1.03);} 28%{transform:scale(1.03, .97);}}

/* Sporcu: dambılı kaldırıp indirir (kaldırırken gövde hafifçe toplanır), alnından ter süzülür, bant ucu uçuşur. */
.ds-kaldir{transform-origin:77px 50px; animation:dsKaldir 2.6s cubic-bezier(.45,0,.3,1) .9s infinite;}
@keyframes dsKaldir{0%, 100%{transform:rotate(30deg);} 40%, 56%{transform:rotate(-4deg);}}
.ds-s-sporcu .ds-tum{animation:dsEfor 2.6s ease-in-out .9s infinite;}
@keyframes dsEfor{0%, 100%{transform:none;} 40%, 56%{transform:scale(1.012, .985);}}
.ds-ter{opacity:0; animation:dsTer 2.6s ease-in .9s infinite;}
@keyframes dsTer{0%, 38%{opacity:0; transform:none;} 48%{opacity:1;} 90%, 100%{opacity:0; transform:translateY(9px);}}
.ds-bant-uc{transform-box:view-box; transform-origin:14px 30px; animation:dsBantUc .65s ease-in-out infinite alternate;}
@keyframes dsBantUc{from{transform:rotate(-7deg);} to{transform:rotate(9deg);}}

/* Müzik molası: kulaklıkta ritim tutar (sağa sola sallanır), notalar yükselir; gözler keyifle kapalı. */
.ds-s-muzik .ds-tum{animation:dsRitim .55s ease-in-out infinite alternate;}
@keyframes dsRitim{from{transform:rotate(-3deg);} to{transform:rotate(3deg) translateY(-1.5px);}}
.ds-nota{opacity:0; animation:dsNota 2.6s ease-out infinite; animation-delay:calc(.8s + var(--i) * 1.3s);}
@keyframes dsNota{0%{opacity:0; transform:translate(0, 4px) scale(.7);} 25%{opacity:1;} 100%{opacity:0; transform:translate(6px, -14px) rotate(12deg);}}

/* Dokununca güler. */
.ds.ds-gulus .ds-goz, .ds.ds-gulus .ds-agiz-gulus, .ds.ds-gulus .ds-agiz-o{opacity:0; animation:none;}
.ds.ds-gulus .ds-goz-mutlu, .ds.ds-gulus .ds-agiz-acik{opacity:1; animation:none;}
.ds.ds-gulus .ds-tum{animation:dsGul .9s cubic-bezier(.3,1.25,.5,1) both;}
@keyframes dsGul{0%{transform:none;} 22%{transform:scale(1.07, .92);} 52%{transform:translateY(-8px) scale(.96, 1.05);} 100%{transform:none;}}

@media (max-width:560px){
  .an-dusky{width:184px; margin-right:-26px; margin-left:-18px;}
}
@media (prefers-reduced-motion:reduce){
  .ds, .ds *{animation:none !important; transition:none !important;}
  .an-dusky-ic.ds-girecek{opacity:1;}
}

/* iPhone Safari 16 pikselden küçük yazı kutusuna dokunulunca sayfayı yakınlaştırıyor ve geri
   uzaklaştırmıyor (kayıttan sonra açılan tanıtım turu yakınlaşmış sayfada orantısız görünüyordu).
   Dokunmatik ekranda bütün yazı kutuları en az 16 piksel; testler/gorsel-kontrol.mjs bunu denetler. */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]):not([type=color]),
  textarea,select{font-size:max(16px,1em) !important;}
}
/* ══ Soru görseli ve röntgen görüntüleyici (2026-11-04) ═════════════════════════════════════════════
   Görsel soru metninin altında koyu bir karoda; en/boy özniteliği yer ayırır (kayma yok). Dokununca tam
   ekran görüntüleyici (.modal-bg.rg-bg): siyah zemin, iki parmakla yakınlaştırma, parlaklık/kontrast/negatif. */
.sg{display:flex; flex-direction:column; gap:8px; margin:-4px 0 22px;}
.sg-ac{position:relative; display:block; width:100%; padding:0; border:0; border-radius:18px; overflow:hidden; background:#0B0F0E; line-height:0; cursor:zoom-in;}
.sg-ac img{display:block; width:100%; height:auto; max-height:min(52vh,460px); object-fit:contain; background:#0B0F0E; -webkit-user-select:none; user-select:none;}
.sg-statik{cursor:default;}
.sg-kucuk .sg-ac img{max-height:240px;}
.sg-buyut{position:absolute; right:10px; bottom:10px; display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
.sg-ac:focus-visible{outline:3px solid var(--primary); outline-offset:2px;}
.sg-kaynak{font-size:12.5px; line-height:1.45; color:var(--ink-faint);}
.sg-kaynak a{color:inherit; text-decoration:underline; text-underline-offset:2px;}
.rev-b .sg{margin:0 0 14px;}
.onizle .sg{margin:4px 0 12px;}
.nb-gorsel-not{display:inline-flex; align-items:center; gap:5px; margin-top:6px; font-size:12px; font-weight:600; color:var(--ink-faint);}
.soru-ileri .sg{animation:soruSagdan 440ms var(--ease-apple) both;}
.soru-geri .sg{animation:soruSoldan 400ms var(--ease-apple) both;}

.modal-bg.rg-bg{display:block; padding:0; z-index:300; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;}
/* Siyah zemin ayrı katmanda: aşağı çekerken yalnız o açılıyor (renk içinde calc() Safari'de geçersiz sayılıp gri perdeye düşüyordu). */
.modal-bg.rg-bg::before{content:""; position:absolute; inset:0; background:#000; opacity:calc(1 - var(--rg-cek, 0) * .75);}
.modal-bg.rg-bg > *{margin:0;}
.rg{position:absolute; inset:0; color:#fff; overscroll-behavior:contain;}
.rg:focus{outline:none;}
.rg-sahne{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; cursor:grab;}
.rg-img{max-width:100%; max-height:100%; object-fit:contain; transform-origin:50% 50%; will-change:transform; opacity:0;
  -webkit-user-select:none; user-select:none; -webkit-user-drag:none; -webkit-touch-callout:none;}
.rg-img.hazir{opacity:1;}
.rg-durum{position:absolute; inset:auto 0 50%; margin:0; text-align:center; font-size:14px; color:rgba(255,255,255,.75); pointer-events:none;}
.rg-ust{position:absolute; left:0; right:0; top:0; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:max(12px, env(safe-area-inset-top)) 14px 14px 18px; background:linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,0)); pointer-events:none;
  transition:opacity .2s ease;}
.rg-ust > *{pointer-events:auto;}
.rg-ipucu{font-size:13px; color:rgba(255,255,255,.8);}
.rg-kapat{display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; cursor:pointer;}
.rg-alt{position:absolute; left:0; right:0; bottom:0; display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  padding:22px 18px max(14px, env(safe-area-inset-bottom)); background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.72) 32%); transition:opacity .2s ease;}
.rg-ayar{display:flex; align-items:center; gap:10px; flex:1 1 200px; font-size:13px; color:rgba(255,255,255,.88);}
.rg-ayar span{min-width:68px;}
.rg-ayar input{flex:1; min-width:0; min-height:32px; accent-color:#5EE6CF;}
.rg-dugmeler{display:flex; gap:8px;}
.rg-d{min-height:40px; padding:0 16px; border:0; border-radius:980px; background:rgba(255,255,255,.16); color:#fff; font:600 14px/1 'Figtree',sans-serif; cursor:pointer;}
.rg-d[aria-pressed="true"]{background:#5EE6CF; color:#04201B;}
.rg-kapat:focus-visible, .rg-d:focus-visible{outline:2px solid #5EE6CF; outline-offset:2px;}
.rg-kaynak{flex-basis:100%; margin:0; font-size:12px; line-height:1.45; color:rgba(255,255,255,.72);}
.rg-kaynak a{color:inherit;}
.rg-bg.rg-sade .rg-ust, .rg-bg.rg-sade .rg-alt{opacity:0; pointer-events:none;}
.rg-bg.rg-sade .rg-ust > *{pointer-events:none;}
@media (prefers-reduced-motion:reduce){ .rg-ust, .rg-alt{transition:none;} .soru-ileri .sg, .soru-geri .sg{animation:none;} }