/* ============================================================================
   GRAMMAR — TEK ZEMIN / TEK PARCA (v20260607 yeniden tasarim)
   - Tek arka plan: panel/katman YOK. Duvarlar ve kartlar ayni zemin uzerinde.
   - Sol + sag DUVAR: sarı 3D sticky'ler, duvara YAPISIK (position:sticky),
     kendi scroll'lari yok; tikla -> ilgili konuya yumusak kaydirir.
   - ORTA: butun konu kartlari alt alta, TEK sayfa scroll'u (rahat gezinme).
   - Ustte KUCUK konu basligi (kocaman hero yok).
   - Bu tasarim tum sayfalarda STANDART olacak sekilde kuruldu.
   - Icerik (32 konu karti) BIREBIR korunmustur.
   ============================================================================ */
:root{
  --tb-h: 64px;
  --head-h: clamp(46px, 7vh, 60px);     /* kucuk baslik seridi */
  --wall-w: clamp(118px, 14.5vw, 210px);
  --gap: clamp(10px, 1.4vw, 22px);
  /* atlas.html ile ayni zemin */
  --page-bg:#D4F1FF;
  --page-bg-dark:#0a1a2e;
  --brand:#0ea5e9; --brand-deep:#0b3a67; --gold:#f59e0b; --ink:#0f2238;
  --en:#2563eb; --tr:#ef4444;
  --bg-top:#e3f0fb; --bg-bot:#c4dcf2;
  --paper:#ffffff; --paper-2:#f4f9ff;
  --txt:#15293f; --txt-soft:#51657d; --line:rgba(15,42,80,.12);
  --card-sh:0 18px 44px rgba(11,58,103,.14), 0 4px 12px rgba(11,58,103,.08);
  /* sarı sticky paleti */
  --sy1:#ffe27a; --sy2:#ffcf3f; --sy-ink:#5a3d00;
  --sy-act1:#ffb52e; --sy-act2:#ff9606; --sy-act-ink:#3a2400;
  --sy-sh:0 9px 16px rgba(150,100,0,.26), 0 2px 4px rgba(150,100,0,.2), inset 0 1px 0 rgba(255,255,255,.6);
}
html[data-theme="dark"]{
  --bg-top:#0b1626; --bg-bot:#0a1a2e;
  --paper:#10233b; --paper-2:#0e1f34;
  --txt:#e6eef9; --txt-soft:#9db2cc; --line:rgba(148,180,220,.18);
  --en:#7db0ff; --tr:#ff8e8e;
  --card-sh:0 18px 44px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.4);
  --sy-sh:0 9px 16px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0; height:100%}
body{
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  color:var(--txt);
  /* atlas.html ile BIREBIR ayni tek zemin */
  background:var(--page-bg);
  height:100%; overflow:hidden;            /* sayfa kaymaz; SADECE orta icerik kayar */
  -webkit-text-size-adjust:100%;
}
html[data-theme="dark"] body{ background:var(--page-bg-dark); }
h1,h2,h3,.gm-head-title,.gm-sticky-lbl{font-family:'Plus Jakarta Sans','Inter',sans-serif}

/* ---- sayfa kabugu: tek ekran, kaymaz ---- */
.gm-app{
  position:fixed; inset:0; padding-top:var(--tb-h);
  display:flex; flex-direction:column; overflow:hidden;
}

/* ============ KUCUK BASLIK SERIDI (tek satir, sade) ============ */
.gm-head{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; gap:clamp(8px,1.2vw,14px);
  padding:clamp(6px,1.1vh,12px) clamp(14px,3vw,30px);
  text-align:center; flex-wrap:wrap;
}
.gm-head-eyebrow{
  font-size:clamp(10px,1.2vw,12px); font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand-deep);
  background:rgba(255,255,255,.65); border:1px solid var(--line);
  padding:5px 12px; border-radius:999px; backdrop-filter:blur(6px);
}
html[data-theme="dark"] .gm-head-eyebrow{background:rgba(255,255,255,.06); color:#bfe0ff}
.gm-head-title{
  margin:0; font-weight:800; line-height:1.1; letter-spacing:-.01em;
  font-size:clamp(18px,2.6vw,26px); color:var(--brand-deep);
}
html[data-theme="dark"] .gm-head-title{color:#cfe6ff}
.gm-head-sub{ width:100%; margin:2px 0 0; font-size:clamp(11px,1.4vw,13px); color:var(--txt-soft); }

/* ====================== ANA YERLESIM (3 kolon, tek zemin) ======================
   Duvarlar EKRAN KENARINA tam yapissin: max-width ve yan padding KALDIRILDI.
   Kolonlar arasi gap minimal (sticky'ler orta sahnenin hemen yaninda). */
.gm-stage{
  flex:1 1 auto; min-height:0;          /* kalan tum yuksekligi kapla */
  display:grid;
  grid-template-columns:var(--wall-w) minmax(0,1fr) var(--wall-w);
  gap:clamp(2px,.4vw,10px);
  padding:clamp(6px,1.1vw,12px) 0 clamp(10px,1.6vw,20px); /* yan padding = 0 */
  align-items:stretch;                  /* kolonlar tam boy */
  width:100%; max-width:none; margin:0;  /* tam ekran genislik */
}

/* ---- DUVAR: ekran kenarina YAPISIK; yan padding YOK ---- */
.gm-wall{
  height:100%; overflow:hidden;          /* ASLA scroll yok */
  display:flex; flex-direction:column;
  gap:clamp(3px, .6vh, 8px);
  padding:clamp(2px,.5vh,8px) 0;         /* yan padding = 0 */
}
/* her sticky bos yuksekligi esit paylasir -> hepsi ekrana sigar, kirpilmaz */
.gm-wall-li{ flex:1 1 0; min-height:0; display:flex; }
.gm-wall::-webkit-scrollbar{width:0;height:0}
.gm-wall-title{
  font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-soft); padding:0 4px 2px; text-align:center;
}

/* ---- SARI 3D STICKY (tum sayfalarda STANDART) ----
   container-type:size -> sticky kendi olculerini kendi BOYUTUYLA olculen
   yazi/numara icin "container" haline gelir. Yazi/numara cqh ile sticky
   yuksekligine ORANTILI olceklenir -> sticky kuculurse yazi da AYNI oranla
   kuculur, ASLA tasamaz/usttte binmez.
   SOL DUVAR default: dis (sol) kenar duz/ekrana yapisik + 3D serit solda.
   SAG DUVAR override: birebir mirror.                                   */
.gm-sticky{
  position:relative; width:100%; height:100%; min-height:0;
  text-align:left; cursor:pointer;
  border:0;
  border-radius:0 14px 14px 0;
  border-left:3px solid rgba(180,120,0,.45);  /* 3D defter sirti: ekran kenarinda */
  padding:clamp(2px,5cqh,7px) clamp(6px,5cqw,12px);
  display:flex; align-items:center; gap:clamp(3px,4cqw,9px);
  font-family:inherit; color:#1a0e00;                  /* yazi rengi: cok koyu */
  background:linear-gradient(160deg,var(--sy1),var(--sy2));
  box-shadow:var(--sy-sh);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  overflow:hidden;
  container-type:size;
  container-name:stk;
}
.gm-sticky::after{ /* parlama seridi - 3D his */
  content:""; position:absolute; left:0; top:0; right:0; height:42%;
  background:linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0));
  pointer-events:none; border-radius:0 12px 0 0;
}
/* SAG DUVAR aynalanmis sticky -> ekrana SAG kenardan yapisik */
#gmWallRight .gm-sticky{
  border-left:0; border-right:3px solid rgba(180,120,0,.45);
  border-radius:14px 0 0 14px;
  flex-direction:row-reverse; text-align:right;
}
#gmWallRight .gm-sticky::after{ border-radius:12px 0 0 0; }

.gm-sticky:hover{
  transform:translateX(2px) scale(1.015);
  box-shadow:0 12px 22px rgba(150,100,0,.34), 0 3px 7px rgba(150,100,0,.26), inset 0 1px 0 rgba(255,255,255,.6);
  filter:saturate(1.06) brightness(1.02);
}
#gmWallRight .gm-sticky:hover{ transform:translateX(-2px) scale(1.015); }
.gm-sticky[data-active="1"]{
  background:linear-gradient(160deg,var(--sy-act1),var(--sy-act2));
  color:#0a0500;                                       /* aktif yazi: en koyu */
  box-shadow:0 12px 22px rgba(180,110,0,.42), 0 0 0 2px rgba(255,255,255,.85), inset 0 1px 0 rgba(255,255,255,.6);
  transform:scale(1.02);
}
.gm-sticky-num{
  flex:0 0 auto;
  width:clamp(18px,44cqh,32px); height:clamp(18px,44cqh,32px);
  border-radius:7px; display:grid; place-items:center;
  font-weight:900; font-size:clamp(10px,34cqh,17px);
  background:rgba(58,36,0,.36); color:#1a0e00;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.gm-sticky[data-active="1"] .gm-sticky-num{background:rgba(0,0,0,.34); color:#000;}
.gm-sticky-lbl{
  flex:1 1 auto; min-width:0;
  /* DAHA BUYUK + DAHA KOYU yazi. cqh ile sticky yuksekligine bagli -> sticky
     kuculurse yazi da AYNI oranla kuculur, hicbir zaman ayrilmaz. */
  font-weight:900; font-size:clamp(10px,38cqh,21px);
  line-height:1.08; letter-spacing:-.005em;
  color:#1a0e00;                                       /* cok koyu kahve */
  text-shadow:0 1px 0 rgba(255,255,255,.7), 0 0 1px rgba(255,255,255,.35);
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
  overflow:hidden;
}
/* Yeterince yuksek sticky'de etiket 2 satir olabilir -> okunaklilik artar. */
@container stk (min-height: 50px){
  .gm-sticky-lbl{ -webkit-line-clamp:2; }
}
.gm-sticky.gm-notes{ background:linear-gradient(165deg,#bdf0c8,#84dd9a); --sy-ink:#0d4a25; color:#0d4a25; }
.gm-sticky.gm-notes .gm-sticky-num{background:rgba(13,74,37,.16); color:#0d4a25}

/* ---- ORTA: tek kaydirma alani; sadece SECILI konu gorunur ---- */
.gm-center{
  height:100%; min-width:0;
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:rgba(11,58,103,.3) transparent;
}
.gm-center::-webkit-scrollbar{width:8px}
.gm-center::-webkit-scrollbar-thumb{background:rgba(11,58,103,.28); border-radius:8px}
.gm-center-inner{ padding:2px clamp(2px,.6vw,8px) clamp(16px,2vw,28px); }

/* sadece aktif kart gorunur (parca parca DEGIL) */
.topic-card{ display:none; }
.topic-card.is-active{
  display:block;
  animation:gmIn .28s ease both;
  background:var(--paper); border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--card-sh); padding:clamp(16px,2.2vw,30px);
}
@keyframes gmIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ---------- KONU KARTI ICERIK STILLERI (eski icerikle uyumlu) ---------- */
.topic-head{display:flex; align-items:center; gap:clamp(10px,1.4vw,16px); margin-bottom:clamp(12px,1.8vw,20px)}
.topic-number{
  flex:0 0 auto; width:clamp(46px,6vw,64px); height:clamp(46px,6vw,64px);
  border-radius:16px; display:grid; place-items:center;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:clamp(18px,2.6vw,26px);
  color:#fff; background:linear-gradient(160deg,var(--brand),var(--brand-deep));
  box-shadow:0 10px 22px rgba(11,58,103,.28), inset 0 1px 0 rgba(255,255,255,.3);
}
.topic-head h2{
  margin:0; font-size:clamp(18px,3vw,30px); font-weight:800; line-height:1.12;
  color:var(--txt); letter-spacing:-.01em; text-wrap:balance;
}
.topic-chip{
  display:inline-block; margin-top:6px; font-size:clamp(10px,1.3vw,12px); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--brand-deep);
  background:var(--paper-2); border:1px solid var(--line); padding:3px 10px; border-radius:999px;
}
html[data-theme="dark"] .topic-chip{color:#bfe0ff}
.explain-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.5vw,16px);
  margin-bottom:clamp(12px,1.8vw,18px);
}
.explain-box{
  background:var(--paper-2); border:1px solid var(--line); border-radius:14px;
  padding:clamp(11px,1.5vw,16px);
}
.explain-box.en-box{border-left:4px solid var(--en)}
.explain-box.tr-box{border-left:4px solid var(--tr)}
.explain-title{display:flex; align-items:center; gap:8px; font-weight:800; margin-bottom:7px; font-size:clamp(13px,1.6vw,16px)}
.explain-box p{margin:0; font-size:clamp(13px,1.55vw,15.5px); line-height:1.55; color:var(--txt)}
.flag{width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:center;vertical-align:middle;background:transparent;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.mini-note{
  font-weight:700; color:var(--brand-deep); margin:clamp(10px,1.5vw,16px) 0 clamp(8px,1.1vw,12px);
  font-size:clamp(13px,1.6vw,15.5px);
}
html[data-theme="dark"] .mini-note{color:#bfe0ff}
.table-wrap{
  overflow-x:auto; border:1px solid var(--line); border-radius:14px;
  -webkit-overflow-scrolling:touch; box-shadow:0 4px 14px rgba(11,58,103,.07);
}
.grammar-table{width:100%; border-collapse:collapse; min-width:560px; font-size:clamp(12px,1.45vw,14.5px)}
.grammar-table thead th{
  background:linear-gradient(160deg,var(--brand),var(--brand-deep)); color:#fff;
  font-weight:700; text-align:left; padding:clamp(9px,1.2vw,13px); position:sticky; top:0; z-index:1;
  font-size:clamp(11.5px,1.4vw,14px);
}
.grammar-table td{padding:clamp(9px,1.2vw,13px); border-top:1px solid var(--line); vertical-align:top; color:var(--txt); line-height:1.5}
.grammar-table tbody tr:nth-child(even){background:var(--paper-2)}
.grammar-table strong{color:var(--brand-deep)}
html[data-theme="dark"] .grammar-table strong{color:#bfe0ff}
.tr-col,.tr-cell{color:var(--txt)}
.lang-line{display:flex; align-items:flex-start; gap:7px}
.lang-line .flag{flex:0 0 auto; margin-top:2px}
.footer{
  text-align:center; padding:clamp(16px,2.4vw,28px) 10px clamp(8px,1.2vw,14px);
  color:var(--txt-soft); font-size:clamp(11px,1.4vw,13px); font-weight:600;
}

/* ---- yakinda placeholder (iceriksiz konular icin) ---- */
.gm-soon{display:none; text-align:center; padding:clamp(30px,8vw,90px) 20px; color:var(--txt-soft)}
.gm-soon.is-active{display:block}
.gm-soon h2{font-size:clamp(20px,3.2vw,30px); color:var(--txt); margin:0 0 10px}
.gm-soon p{font-size:clamp(13px,1.7vw,16px); margin:0}

/* ===================== RESPONSIVE: tablet / telefon ===================== */
/* Tablet: duvarlar biraz daralir, aciklama tek kolon */
@media (max-width:1040px){
  :root{ --wall-w:clamp(96px,16vw,150px); }
  .explain-grid{grid-template-columns:1fr}
}
/* Telefon: duvarlar uste kompakt numara seritlerine doner, orta kalani kaplar */
@media (max-width:760px){
  :root{--tb-h:58px}
  .gm-stage{
    display:flex; flex-direction:column;
    gap:8px; padding:8px 10px 8px;
  }
  .gm-wall{
    height:auto; flex:0 0 auto;
    flex-direction:row; flex-wrap:wrap; justify-content:center;
    gap:6px; padding:0;
  }
  .gm-wall-li{ flex:0 0 auto; }
  .gm-sticky{
    height:auto; width:auto; min-height:0;
    padding:7px 9px; border-radius:10px;
  }
  .gm-sticky::after{display:none}
  .gm-sticky-lbl{ -webkit-line-clamp:1; font-size:11.5px; max-width:34vw; }
  #gmWallLeft{order:1}
  #gmWallRight{order:2}
  .gm-center{order:3; flex:1 1 auto; min-height:140px}
  .gm-center-inner{padding:2px 2px 14px}
}
/* Cok dar telefon: sticky'lerde sadece numara (cok kompakt) */
@media (max-width:420px){
  .gm-sticky-lbl{ display:none; }
  .gm-sticky{ padding:8px; }
  .gm-sticky-num{ width:26px; height:26px; font-size:13px; }
}

/* erisilebilirlik: hareket azalt */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; scroll-behavior:auto!important}
}

/* ---- HOPARLOR (sesli Ingilizce okuma) ---- */
.spk-btn{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; margin-right:7px; vertical-align:middle;
  padding:0; border:0; border-radius:7px; cursor:pointer;
  background:linear-gradient(160deg,var(--brand),var(--brand-deep)); color:#fff;
  box-shadow:0 2px 5px rgba(11,58,103,.28), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .12s ease, filter .12s ease;
}
.spk-btn:hover{ transform:scale(1.1); filter:brightness(1.08); }
.spk-btn:active{ transform:scale(.94); }
.spk-btn svg{ width:14px; height:14px; display:block; }
.spk-btn.is-playing{ background:linear-gradient(160deg,var(--gold),#d97706); animation:spkPulse 1s ease-in-out infinite; }
@keyframes spkPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.55)} 50%{box-shadow:0 0 0 5px rgba(245,158,11,0)} }
/* Ingilizce ornek hucresi: hoparlor + metin tek satir hizali */
.en-ex-cell{ display:flex; align-items:flex-start; gap:0; }
.en-ex-cell .en-ex-txt{ flex:1 1 auto; }
.en-box .explain-title .spk-btn{ margin-left:auto; }