/* Bodrum Gym — ortak tema.
 *
 * Tek kaynak: renkler, tipografi, yaricap, golge ve sik kullanilan bilesenler.
 * Sayfalar YALNIZ kendi duzenini tanimlar; token tekrar etmez.
 *
 * NOT: Bu uygulama SADECE iPhone'da acilir. ES5/eski-tablet kisiti burada
 * GECERLI DEGILDIR -- grid, backdrop-filter, modern her sey serbest.
 */

:root{
  /* zemin katmanlari */
  --bg:#0b0d12;
  --yuzey:#141821;
  --yuzey2:#1b2029;
  --line:#262d3a;
  --line2:#333b4a;

  /* metin */
  --fg:#eaf0fa;
  --dim:#8d97ab;
  --dim2:#5f6980;

  /* vurgu */
  --acc:#ff6a3d;
  --acc2:#ff9356;
  --yesil:#31c07a;
  --sari:#f7b731;
  --kirmizi:#f2545b;
  --mavi:#4b9bff;

  /* Eski sayfa CSS'i --card/--kirmizi gibi adlar kullaniyordu; takma adlar
     birakildi ki gecis tek seferde kirilmasin. Yeni kod --yuzey kullanmali. */
  --card:var(--yuzey);
  --red:var(--kirmizi);

  /* Faz 42 kutu renkleri. --acc'nin YERINI ALMAZ, ayri bir katmandir:
     turuncu hala yalniz secili/etkin durumu anlatir (altinci kural).
     Kutu zemini doygun, uzerindeki yazi --kt-yazi ile koyu. */
  --kt-yesil:#2bd67b; --kt-mavi:#4b9bff; --kt-sari:#ffb020;
  --kt-yazi:#08121e;

  /* olculer */
  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:26px;
  --golge:0 4px 16px rgba(0,0,0,.30);
  --golge-b:0 12px 40px rgba(0,0,0,.45);
  --ust:max(14px, env(safe-area-inset-top));
  --gecis:.18s cubic-bezier(.4,0,.2,1);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f5f7fb; --yuzey:#ffffff; --yuzey2:#eef1f7;
    --line:#e2e7f0; --line2:#d3dae6;
    --fg:#141a26; --dim:#5f6b82; --dim2:#8b95a8;
    --golge:0 2px 10px rgba(16,24,40,.07);
    --golge-b:0 12px 32px rgba(16,24,40,.13);
    /* Aydinlikta parlak kutu goz yorar: renkler koyulasir, yazi beyaza doner. */
    --kt-yesil:#17a45f; --kt-mavi:#2f7fe0; --kt-sari:#c8840a;
    --kt-yazi:#ffffff;
  }
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent }
/* Faz 98: METİN SIĞDIRMA (Semih: "yazılar kutuların içine sığmıyor").
   Kural: ad ve başlık KESİLMEZ, alt satıra sarılır. Tek satır + "…"
   yalnız ikincil bilgi satırlarında. Almanca uzun kelimeler heceyle
   bölünür (metin.js <html lang>'ı dile göre kuruyor). Kutu içinde
   sabit yükseklik yerine min-height. Duman testi (Faz 98) bu kuralı
   ad seçicilerinde ölçüyor. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%;
  /* Faz 99: çift dokunuşla yakınlaştırma YOK. iOS onu bekledikçe art arda
     basışlar yutuluyordu ("bastığım şeyler bazen olmuyor"). */
  touch-action:manipulation }
body{ overflow-wrap:break-word }
button, a, summary, label, input, [role=button]{ touch-action:manipulation }
button, label, .kart, summary{ overflow-wrap:break-word }
html,body{ margin:0 }
body{
  background:var(--bg); color:var(--fg);
  font:400 16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",
       system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
h1,h2,h3{ letter-spacing:-.02em; margin:0 }
b,strong{ font-weight:650 }

.wrap{ width:100%; min-width:0; max-width:640px; margin:0 auto; padding:0 16px }

/* ---------- yapisal ---------- */
.kart{
  background:var(--yuzey); border:1px solid var(--line);
  border-radius:var(--r-l); padding:18px; margin-bottom:12px;
}
.kart > h2{
  font-size:12px; font-weight:650; color:var(--dim);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px;
}

/* Yapiskan baslik: iOS'ta kaydirirken arkasi bulaniklassin */
.sticky{
  position:sticky; top:0; z-index:20;
  /* Faz 99: bulanıklık kaldırıldı (iPhone'da kaydırırken her kare). */
  background:color-mix(in srgb, var(--bg) 96%, transparent);
  border-bottom:1px solid var(--line);
}

/* ---------- girdiler ----------
 * ⚠️ `type=date` BURADA OLMAK ZORUNDA (olculdu 18.08). Listede yoktu ve
 * iOS tarih girdisini KENDI BEYAZ kutusuyla ciziyordu: koyu temanin ortasinda
 * parlak bir dikdortgen. Yeni bir girdi turu kullanacaksan buraya ekle. */
input[type=search], input[type=text], input[type=number], input[type=date], input[type=email],
input[type=time], input[type=password]{
  width:100%; background:var(--yuzey); border:1px solid var(--line);
  border-radius:var(--r-m); color:var(--fg); font-size:16px; padding:12px 14px;
  transition:border-color var(--gecis);
  -webkit-appearance:none; appearance:none;
}
/* iOS tarih girdisini varsayilanda ortalamiyor ve kendi takvim ikonunu
   aciklikta biraktiriyor. */
input[type=date]{ min-height:46px; font-variant-numeric:tabular-nums }
input[type=date]::-webkit-date-and-time-value{ text-align:left }
input[type=date]::-webkit-calendar-picker-indicator{ filter:invert(.75) }
input::placeholder{ color:var(--dim2) }
input:focus{ outline:none; border-color:var(--acc) }

/* ⚠️ `.et` BIR ROZETTIR (arka planli, yuvarlak, nowrap). Ayar satirinda
   "etiket" anlaminda kullanmayin -- ad kutu icinde gorunur ve aciklama dar
   sutuna sikisip dikey kirilir (Ayarlar ekraninda yasandi, 18.08). */

/* ---------- dugmeler ---------- */
.btn{
  border:none; border-radius:var(--r-m); font-size:15px; font-weight:600;
  padding:13px 16px; cursor:pointer; transition:transform .1s var(--gecis);
  font-family:inherit;
}
.btn:active{ transform:scale(.975) }
.btn-ana{
  background:linear-gradient(135deg,var(--acc),var(--acc2));
  color:#12151c; width:100%; font-size:16.5px; font-weight:700;
  box-shadow:0 6px 18px rgba(255,106,61,.28);
}
.btn-sessiz{
  background:var(--yuzey2); color:var(--fg); border:1px solid var(--line);
}
.btn-cizgi{
  background:transparent; color:var(--dim); border:1px dashed var(--line2);
  width:100%;
}
.btn-cizgi:active{ border-color:var(--acc); color:var(--acc) }
.ikon{
  background:var(--yuzey); border:1px solid var(--line); color:var(--fg);
  border-radius:var(--r-m); padding:0; width:44px; height:44px;
  font-size:17px; cursor:pointer; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  transition:border-color var(--gecis), transform .1s;
}
.ikon:active{ transform:scale(.94) }
.ikon[aria-pressed="true"]{ border-color:var(--acc); color:var(--acc) }

/* ---------- cipler (yatay kaydirma) ---------- */
.cipler{
  display:flex; gap:8px; overflow-x:auto; padding:10px 0 3px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.cipler::-webkit-scrollbar{ display:none }
.cip{
  flex:0 0 auto; background:var(--yuzey); border:1px solid var(--line);
  color:var(--dim); border-radius:999px; padding:8px 14px; font-size:14px;
  cursor:pointer; white-space:nowrap; font-family:inherit;
  transition:all var(--gecis);
}
.cip[aria-selected="true"]{
  background:var(--acc); border-color:var(--acc); color:#12151c; font-weight:650;
}
.cip .n{ opacity:.55; font-size:12px; margin-left:5px }

/* ---------- rozetler ---------- */
.et{
  font-size:11.5px; color:var(--dim); background:var(--bg);
  border-radius:6px; padding:3px 8px; white-space:nowrap;
}
.et.hedef{ color:var(--acc) }
.puanlar{ display:flex; gap:5px; margin-top:5px; flex-wrap:wrap }
.pz{
  font-size:10.5px; border-radius:6px; padding:2.5px 7px;
  background:var(--bg); color:var(--dim); border:1px solid var(--line);
  white-space:nowrap;
}
.pz b{ font-weight:700; margin-left:2px }
.pz.verim{ color:var(--acc); border-color:color-mix(in srgb,var(--acc) 45%,transparent) }
.pz.z1,.pz.z2{ color:var(--yesil) }
.pz.z3{ color:var(--sari) }
.pz.z4,.pz.z5{ color:var(--kirmizi) }

/* ---------- alt sayfa (bottom sheet) ---------- */
.perde{
  position:fixed; left:0; right:0; top:var(--gorunen-viewport-y,0px);
  height:var(--gorunen-viewport-h,100dvh);
  background:rgba(0,0,0,.62); z-index:70;
  display:flex; align-items:flex-end; justify-content:center;
  box-sizing:border-box;
  animation:solgun .2s ease-out;
}
.perde[hidden]{ display:none }
@keyframes solgun{ from{opacity:0} to{opacity:1} }
.sayfa{
  background:var(--yuzey); width:100%; max-width:640px;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  max-height:min(88dvh, 100%); overflow-y:auto;
  /* Alt bosluga nav yuksekligi DAHIL: alt sayfanin dibi sekme cubugunun
     arkasinda kalmasin (hareket tarifinin son adimlari boyle kayboluyordu). */
  padding:8px 18px calc(var(--nav-h,56px) + env(safe-area-inset-bottom) + 22px);
  box-shadow:var(--golge-b);
  animation:yukari .26s cubic-bezier(.32,.72,0,1);
  -webkit-overflow-scrolling:touch;
}
.sayfa.tam-ekran{
  align-self:stretch; width:100%; max-width:none; height:100%;
  max-height:none; border-radius:0; padding-top:calc(env(safe-area-inset-top) + 8px);
}
@keyframes yukari{ from{ transform:translateY(40px) } to{ transform:none } }
.tutamak{
  width:38px; height:4px; border-radius:2px; background:var(--line2);
  margin:8px auto 16px;
}
.sayfa h2{ font-size:19px; margin:0 0 6px }
.detaybas{ display:flex; align-items:center; gap:10px; margin:0 0 7px }
.detaybas h2{ flex:1; min-width:0; margin:0 }
.detaykapat{ width:42px; height:42px; flex:0 0 auto; border-radius:50%;
  border:1px solid var(--line); background:var(--yuzey2); color:var(--fg);
  font:500 24px/1 inherit; cursor:pointer; display:grid; place-items:center }
.detaykapat:active{ border-color:var(--acc); color:var(--acc) }
/* Faz 99: kapat düğmesi olmayan alt sayfaya eklenen ×. Yüksekliği sıfır,
   yapışkan: uzun sayfada (hareket tarifi) kaydırınca da görünür kalır. */
.kapatserit{ position:sticky; top:0; height:0; z-index:5; display:flex;
  justify-content:flex-end; pointer-events:none }
.kapatserit .detaykapat{ pointer-events:auto; margin-top:2px;
  box-shadow:0 2px 10px rgba(0,0,0,.35) }
.kapatserit ~ h2, .kapatserit ~ .tutamak + h2{ padding-right:50px }
.dbas .detaykapat{ margin-left:4px }

/* ---------- onay alt sayfasi (ortak.js: onaySayfasi) ----------
   Sistem confirm()'i yerine: her secenek KENDI satiri, altinda ne olacagini
   yazan bir aciklama. Uc yollu soru iki dugmeli kutuya sigmiyordu. */
.onayalt{ color:var(--dim); font-size:14px; line-height:1.45; margin:0 0 16px }
.onaysec{ display:flex; flex-direction:column; gap:10px }
.onayd{
  background:var(--yuzey2); border:1px solid var(--line); border-radius:var(--r-m);
  color:var(--fg); font-family:inherit; text-align:left; width:100%;
  padding:14px 16px; cursor:pointer; display:block;
  transition:border-color var(--gecis), transform .1s;
}
.onayd:active{ transform:scale(.985) }
.onayd b{ display:block; font-size:15.5px; font-weight:650 }
.onayd span{ display:block; color:var(--dim); font-size:12.5px; margin-top:3px }
/* Ilk secenek onerilen yoldur: turuncu YALNIZ burada. */
.onaysec .onayd:first-child{ border-color:var(--acc) }
.onaysec .onayd:first-child b{ color:var(--acc) }
.onayd.tehlike b{ color:var(--kirmizi) }

/* ---------- kucuk yardimcilar ---------- */
.bos{ color:var(--dim); text-align:center; padding:40px 20px; font-size:14.5px }
.sayi{ color:var(--dim); font-size:13px; padding:12px 0 8px }
.tek{ font-variant-numeric:tabular-nums }

/* ---------- durum seridi (ortak.js -> durum()) ----------
 * ortak.js bu elemani her sayfada olusturuyordu ama stili YALNIZ uc sayfada
 * vardi: antrenman, ayarlar ve plan'da bildirim stilsiz, sayfanin en altinda,
 * akisin icinde beliriyordu (olculdu 09.09). Tek tanim buraya alindi.
 * `giris.html` kendi surumunu tutuyor -- orada alt cubuk yok, dip bosluk farkli. */
.durum{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--nav-h,56px) + env(safe-area-inset-bottom) + 16px);
  z-index:80; background:var(--yesil); color:#0b0d12;
  font-size:13.5px; font-weight:650; padding:10px 16px; border-radius:999px;
  box-shadow:var(--golge-b); max-width:88%; text-align:center;
}
.durum[hidden]{ display:none }
.durum.hata{ background:var(--kirmizi); color:#fff }

/* ================= Faz 42: karma dil =================
 * Iki bilesen ailesi, iki ayri is. Ayrimi Semih koydu (09.09):
 *
 *   .kt*  KUTU  -> "nasil gidiyorum": kalori, protein, kilo, seri.
 *                  Renkli zemin, iri rakam, yuvarlak kose.
 *   .kd*  OLCEK -> "ne yapacagim": siradaki antrenman, satirlar, baslik.
 *                  Ince cizgi, centik, dar arali buyuk harf etiket.
 *
 * ⚠️ Yazi tipi SISTEM yazisi kalir. Google Fonts eklemek cazipti ama bu
 * uygulama cevrimdisi calisan bir PWA: sw.js ag yokken cache'ten servis
 * ediyor, disaridan yazi tipi cekmek ilk acilisi yavaslatir ve cevrimdisinda
 * yedege duser. Karakter yazi tipinden degil DUZENDEN geliyor: cizgi, centik,
 * buyuk harf etiket, tabular rakam.
 */

/* --- kutu ailesi --- */
.kizgara{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:9px }
.kt{
  border-radius:18px; padding:14px 15px; min-width:0;
  background:var(--yuzey); border:1px solid var(--line); color:var(--fg);
}
.kt.genis{ grid-column:1 / -1 }
.kt.yesil{ background:var(--kt-yesil); border-color:transparent; color:var(--kt-yazi) }
.kt.mavi { background:var(--kt-mavi);  border-color:transparent; color:var(--kt-yazi) }
.kt.sari { background:var(--kt-sari);  border-color:transparent; color:var(--kt-yazi) }
.kt .ke{
  font-size:10px; font-weight:650; letter-spacing:.1em; text-transform:uppercase;
  opacity:.72;
}
.kt .kv{
  font-size:29px; font-weight:800; line-height:1.02; margin-top:6px;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.kt .kv small{ font-size:13px; font-weight:650; opacity:.62 }
.kt .kn{ font-size:11.5px; margin-top:4px; opacity:.76; font-weight:500;
         line-height:1.35 }
/* Dokunulabilir kutu: <button> olarak kurulur, gorunum aynidir. */
button.kt{ font-family:inherit; text-align:left; width:100%; cursor:pointer;
           transition:transform .1s var(--gecis) }
button.kt:active{ transform:scale(.975) }
.kt .kbir{ display:flex; align-items:center; gap:12px }
.kt .kbir > div{ min-width:0 }
.kt .kbir .kv{ margin-top:0 }

/* --- olcek ailesi --- */
.kdbas{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  padding:0 0 12px; border-bottom:1px solid var(--line); margin-bottom:2px;
}
.kdbas .ust{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
             color:var(--dim2) }
.kdbas .ad{ font-size:22px; font-weight:700; line-height:1.1; letter-spacing:-.02em;
            margin-top:3px }
.kdbas .sag{ text-align:right; font-size:10.5px; letter-spacing:.14em;
             text-transform:uppercase; color:var(--dim2); flex:0 0 auto }
.kdbas .sag b{ display:block; font-size:19px; color:var(--acc); letter-spacing:0;
               font-variant-numeric:tabular-nums; margin-top:2px }

.bolbas{
  display:flex; align-items:center; gap:9px; margin:18px 0 9px;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim2);
}
.bolbas::after{ content:""; flex:1; height:1px; background:var(--line) }

.sirada{ border:1px solid var(--line2); border-radius:16px; margin-top:12px;
         overflow:hidden; background:var(--yuzey) }
.sirada > .bas{
  display:flex; align-items:center; gap:8px; padding:10px 14px 8px;
  border-bottom:1px solid var(--line); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim2);
}
.sirada > .gv{ padding:14px }
/* Centik = programdaki gun sayisi; dolu olanlar kacinci gunde oldugunu soyler. */
.centik{ display:flex; gap:3px; margin-left:auto; flex:0 0 auto }
.centik i{ display:block; width:2px; height:9px; border-radius:1px;
           background:var(--line2) }
.centik i.d{ background:var(--acc) }

.kdsat{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:12px 2px; border:0; border-bottom:1px solid var(--line);
  background:none; color:inherit; font-family:inherit; font-size:14.5px;
  text-align:left;
}
button.kdsat{ cursor:pointer }
button.kdsat:active{ background:var(--yuzey2) }
/* Faz 101: başlık kelime ortasından bölünmez (en uzun kelimesi kadar yer
   alır); sağdaki ikincil yazı daralıp gerekirse iki satıra iner. */
.kdsat > .ad{ flex:1 0 auto; max-width:62%; color:var(--dim); white-space:normal;
  overflow-wrap:normal; hyphens:auto }
.kdsat > .dg{ font-variant-numeric:tabular-nums; font-weight:650; font-size:16px;
              color:var(--fg); flex:0 0 auto }
.kdsat > .bir{ font-size:10px; color:var(--dim2); letter-spacing:.12em;
               text-transform:uppercase; flex:0 1 auto; min-width:0; text-align:right;
               overflow-wrap:break-word; line-height:1.3 }
.kdsat > .git{ color:var(--dim2); font-size:17px; flex:0 0 auto }

/* ---------- hizli tarti alt sayfasi (ortak.js -> tartiSayfasi) ---------- */
.tartikutu{
  display:flex; align-items:center; gap:10px; margin-top:16px;
  background:var(--bg); border:1px solid var(--line2);
  border-radius:var(--r-l); padding:12px 14px;
}
.tartiadim{
  width:54px; height:54px; flex:0 0 auto; border-radius:16px;
  background:var(--yuzey2); border:1px solid var(--line); color:var(--fg);
  font-size:27px; line-height:1; cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center;
  transition:border-color var(--gecis), transform .1s;
}
.tartiadim:active{ border-color:var(--acc); color:var(--acc); transform:scale(.94) }
/* ⚠️ `input.tartigir` yazmak ZORUNLU. Duz `.tartigir` (0,1,0) yukaridaki
   input[type=text] secicisine (0,1,1) yenilir ve girdi normal kutu gibi
   cizilir -- ayni tuzak `.gir` ile yasandi (18.08). Ayrica bu kural o
   seciciden SONRA gelmeli: ozgullukleri esit. */
input.tartigir{
  flex:1; min-width:0; background:transparent; border:none; padding:0;
  text-align:center; font-size:40px; font-weight:800; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:var(--fg);
}
input.tartigir:focus{ outline:none; border:none }
.tartibirim{ font-size:15px; color:var(--dim); font-weight:600; flex:0 0 auto }
.tartinot{ font-size:12px; color:var(--dim2); line-height:1.5; margin:14px 0 0 }

/* ---------- gecmis antrenman detayi (ortak.js -> antrenmanDetaySayfasi) ---------- */
.ghareket{ margin-top:18px }
.ghareket > .bas{ display:flex; align-items:center; gap:10px; margin-bottom:4px }
.ghareket > .bas img{ width:36px; height:36px; border-radius:9px; background:#fff;
                      flex:0 0 auto }
.ghareket > .bas .ad{ flex:1; min-width:0; font-size:15px; font-weight:650;
                      text-transform:capitalize; white-space:normal; overflow-wrap:break-word; hyphens:auto }
.ghareket > .bas .hac{ font-size:11.5px; color:var(--dim2); flex:0 0 auto;
                       font-variant-numeric:tabular-nums }
.gset{
  display:flex; align-items:center; gap:12px; font-size:14.5px;
  padding:8px 0 8px 46px; border-bottom:1px solid var(--line);
}
.ghareket > .gset:last-child{ border-bottom:none }
.gset.isinma{ opacity:.6 }
.gset > .no{ width:20px; flex:0 0 auto; color:var(--dim2); font-size:12px;
             font-variant-numeric:tabular-nums }
.gset > .dg{ font-variant-numeric:tabular-nums; color:var(--fg) }
/* Faz 101: hareket detayındaki "son oturumların" satırı */
.gset.sonsat{ padding-left:0 }
.gset > .sotarih{ flex:0 0 auto; min-width:56px; color:var(--dim2); font-size:12px;
  white-space:nowrap; font-variant-numeric:tabular-nums }
.gset > .gtepe{ margin-left:auto; font-size:10px; letter-spacing:.1em;
                text-transform:uppercase; color:var(--acc) }

/* ================= Faz 47: ortak duzen katmani =================
 *
 * Semih'in bildirdigi sorun (10.09): "sadece ozellikleri ekleyip, guzellik ve
 * ozen ile diger ornek uygulamalardan ozenilmemis tarzda olmus... Yemek
 * eklemek icin en alta inmek bir acemilik."
 *
 * Kok neden: her yeni ozellik ALTA BIR KART daha ekledi. Ekranlar uzun kart
 * yiginina dondu ve ASIL EYLEM dibe gomuldu. Cozum ozellik silmek degil,
 * duzeni kurmak:
 *   1. Ekranin isi ilk ekranda gorunur  (hero)
 *   2. Asil eylem hemen onun altinda    (.eklebar)
 *   3. Icerik                            (.grp)
 *   4. Analiz/ayar ikinci sekmede        (.segment)
 *
 * ⚠️ Uc segment siniri: dorduncu sekme etiketleri iPhone'da kirpiyor.
 */

/* ---------- segment (Bugun | Gidisat) ----------
 * Uc sayfada AYNI kod kopyalanmisti (ilerleme, ayarlar, olcum). Tek yere alindi. */
.segment{
  display:flex; gap:3px; background:var(--yuzey2); border:1px solid var(--line);
  border-radius:13px; padding:3px; margin-bottom:14px;
}
.segment button{
  flex:1; min-width:0; background:transparent; border:none; color:var(--dim);
  font-size:13.5px; font-weight:600; padding:10px 6px; border-radius:10px;
  cursor:pointer; font-family:inherit; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; transition:background var(--gecis), color var(--gecis);
}
.segment button[aria-selected="true"]{
  background:var(--yuzey); color:var(--fg); box-shadow:var(--golge);
}

/* ---------- ust serit: yapiskan, kompakt gun/baslik ---------- */
.ustserit{
  position:sticky; top:0; z-index:25; margin:0 -16px 12px; padding:0 16px;
  background:color-mix(in srgb, var(--bg) 96%, transparent);
}
.ustserit > .ic{
  display:flex; align-items:center; gap:8px; padding:8px 0 10px;
  border-bottom:1px solid var(--line);
}
.ustserit .ok{
  width:36px; height:36px; flex:0 0 auto; border-radius:11px;
  background:var(--yuzey); border:1px solid var(--line); color:var(--dim);
  font-size:17px; cursor:pointer; font-family:inherit; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.ustserit .ok:active{ border-color:var(--acc); color:var(--acc) }
.ustserit .orta{
  flex:1; min-width:0; text-align:center; background:none; border:none;
  color:inherit; font-family:inherit; cursor:pointer; padding:0;
}
.ustserit .orta .g{ font-size:15.5px; font-weight:700; letter-spacing:-.01em }
.ustserit .orta .t{ font-size:11px; color:var(--dim2); margin-top:1px }

/* ---------- hero: ekranin TEK cumlesi ----------
 * Iri sayi + halka. Ilk ekranda gorunur, kaydirmadan okunur. */
.hero{
  display:flex; align-items:center; gap:16px;
  background:var(--yuzey); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:18px; margin-bottom:10px;
}
.hero > svg{ flex:0 0 auto }
.hero .yz{ flex:1; min-width:0 }
.hero .ke{
  font-size:10.5px; font-weight:650; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim2);
}
.hero .buyuk{
  font-size:38px; font-weight:800; line-height:1.02; letter-spacing:-.035em;
  font-variant-numeric:tabular-nums; margin-top:3px;
}
.hero .buyuk small{ font-size:15px; font-weight:650; color:var(--dim); letter-spacing:0 }
.hero .kn{ font-size:12.5px; color:var(--dim); margin-top:5px; line-height:1.4 }
.hero .kn b{ color:var(--acc); font-weight:650 }

/* ---------- makro cubuklari ---------- */
.makro{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px }
.makro > div{ flex:1; min-width:0 }
.makro-ana>div{ grid-column:1 / -1 }
.makro .ad{
  font-size:10px; font-weight:650; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim2); display:flex; justify-content:space-between; gap:4px;
  overflow-wrap:anywhere;
}
.makro .ad>span{ flex:0 0 auto }
.makro-aciklama{ margin-top:8px; color:var(--dim2); font-size:12px; line-height:1.45; overflow-wrap:anywhere }
.makro .ad span{ color:var(--dim); letter-spacing:0; text-transform:none;
                 font-variant-numeric:tabular-nums }
.makro .cb{ height:5px; border-radius:3px; background:var(--yuzey2); margin-top:5px;
            overflow:hidden }
.makro .cb i{ display:block; height:100%; border-radius:3px }

/* ---------- ekleme seridi: ASIL EYLEM ----------
 * ⚠️ Bu serit hero'nun HEMEN ALTINDA durur. "Yemek eklemek icin en alta
 * inmek" bildirilen acemilikti; eylem icerigin ustunde.
 *
 * 🎨 Faz 51'de BUYUDU. Semih'in bildirdigi hali: "Fotograf, barkod ve yaz
 * yeri cok kucuk... emojiler cok sade bembeyaz ve kotu duruyor, belli
 * olmuyor." Kok neden olculdu -- ikon 21 px, etiket 11,5 px ve emoji
 * dogrudan zemine basiyordu, yani rengi olmayan gri bir satir.
 *
 * Yeni hali: UC AYRI KART (tek kutunun icinde bolmeler degil), her birinin
 * kendi RENKLI dairesi var. Renk emojiyi tasiyor, emoji tek basina degil.
 * Daire 46 px, ikon 23 px, etiket 12,5 px. */
.eklebar{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px;
  margin-bottom:14px;
}
.eklebar button{
  min-width:0; background:var(--yuzey); border:1px solid var(--line2);
  border-radius:var(--r-l); box-shadow:var(--golge);
  color:var(--fg); font-family:inherit; cursor:pointer;
  padding:14px 6px 12px; display:flex; flex-direction:column; align-items:center;
  gap:8px; transition:transform var(--gecis), border-color var(--gecis);
}
.eklebar button:active{ transform:scale(.96); border-color:var(--acc) }
/* Renkli daire: emojiye zemin verir. `--ek` her dugmede ayri atanir. */
.eklebar button i{
  width:46px; height:46px; flex:0 0 auto; border-radius:16px;
  font-size:23px; font-style:normal; line-height:1;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--ek) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--ek) 34%, transparent);
}
.eklebar button span{
  font-size:12.5px; font-weight:650; color:var(--fg); letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
/* ⚠️ `--ek` yalniz DAIREYI boyar, dugmeyi degil. Alti kural: turuncu
   (--acc) yalniz secili/etkin durumu anlatir, her yeri boyamaz. */
.eklebar .ek-foto{ --ek:var(--kt-mavi) }
.eklebar .ek-barkod{ --ek:var(--kt-yesil) }
.eklebar .ek-ara{ --ek:var(--acc) }
.eklebar .ek-yaz{ --ek:var(--kt-sari) }

/* ---------- yatay hizli secim seridi (son yenenler vb.) ---------- */
.cipsat{
  display:flex; gap:7px; overflow-x:auto; margin-bottom:14px; padding-bottom:2px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.cipsat::-webkit-scrollbar{ display:none }
.cipsat:empty{ display:none }
.cipsat > button{
  flex:0 0 auto; max-width:210px; text-align:left; cursor:pointer;
  background:var(--yuzey); border:1px solid var(--line); border-radius:var(--r-m);
  padding:8px 12px; color:inherit; font-family:inherit;
}
.cipsat > button:active{ border-color:var(--acc) }
.cipsat .n{
  font-size:12.5px; font-weight:600; max-width:176px; line-height:1.25;
  white-space:normal; overflow-wrap:break-word; overflow:hidden;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.cipsat .m{ font-size:10.5px; color:var(--dim2); margin-top:2px;
            font-variant-numeric:tabular-nums }

/* ---------- gruplu icerik blogu (ogun tipi, bolge...) ---------- */
.grp{ margin-bottom:12px }
.grpbas{
  display:flex; align-items:center; gap:9px; padding:0 2px 7px;
  font-size:11px; font-weight:650; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim2);
}
.grpbas .n{ margin-left:auto; letter-spacing:0; text-transform:none;
            font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums }
/* 🎨 Faz 51: emoji rozeti. Bildirilen hali: "emojiler cok sade bembeyaz ve
   kotu duruyor, belli olmuyor." Emoji dogrudan zemine basinca renksiz bir
   karakter; arkasina kendi rengi gelince goz onu tarayabiliyor.
   `--oz` her ogun tipinde ayri atanir. */
.grpbas .roz{
  width:28px; height:28px; flex:0 0 auto; border-radius:10px;
  font-size:14px; font-style:normal; line-height:1;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--oz) 20%, transparent);
  border:1px solid color-mix(in srgb, var(--oz) 36%, transparent);
}
.grpbas .oz-kahvalti{ --oz:var(--kt-sari) }
.grpbas .oz-ogle{ --oz:var(--kt-yesil) }
.grpbas .oz-aksam{ --oz:var(--kt-mavi) }
.grpbas .oz-ara{ --oz:var(--acc) }
.grpbas .arti{
  width:26px; height:26px; flex:0 0 auto; border-radius:8px; cursor:pointer;
  background:var(--yuzey2); border:1px solid var(--line); color:var(--dim);
  font-size:15px; font-family:inherit; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.grpbas .arti:active{ border-color:var(--acc); color:var(--acc) }
.grpliste{
  background:var(--yuzey); border:1px solid var(--line);
  border-radius:var(--r-l); overflow:hidden;
}
.grpliste:empty{ display:none }
.grpbos{
  padding:14px 16px; font-size:13px; color:var(--dim2);
  background:var(--yuzey); border:1px dashed var(--line2);
  border-radius:var(--r-l);
}

/* ---------- katlanir bolum (Ayarlar) ----------
 * Ayarlar yedi karti alt alta tek akista gosteriyordu ve "halter takimini
 * nereden degistiriyordum" sorusu her seferinde kaydirma istiyordu.
 * Artik her bolum kapali baslar, basliginda mevcut degeri ozetler.
 * `<details>` kullaniliyor: klavye ve ekran okuyucu bedavaya calisir. */
details.kat{
  background:var(--yuzey); border:1px solid var(--line);
  border-radius:var(--r-l); margin-bottom:10px; overflow:hidden;
}
details.kat > summary{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:11px; row-gap:2px;
  align-items:center; padding:15px 16px;
  cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent;
}
details.kat > summary::-webkit-details-marker{ display:none }
details.kat > summary .em{ font-size:19px; line-height:1; grid-column:1; grid-row:1 / span 2 }
details.kat > summary .ad{ grid-column:2; min-width:0; font-size:15px; font-weight:650;
  overflow-wrap:break-word; hyphens:auto }
details.kat > summary .oz{
  grid-column:2; grid-row:2; font-size:12.5px; color:var(--dim); line-height:1.3;
  overflow-wrap:break-word; hyphens:auto; font-variant-numeric:tabular-nums;
}
details.kat > summary .ok{ grid-column:3; grid-row:1 / span 2; color:var(--dim2); font-size:15px;
                           transition:transform var(--gecis) }
details.kat[open] > summary .ok{ transform:rotate(90deg) }
details.kat[open] > summary{ border-bottom:1px solid var(--line) }
details.kat[open] > summary .oz{ display:none }
details.kat > .ic{ padding:4px 16px 16px }

/* ---------- Faz 72: çok adımlı akış kabuğu ----------
   Uzun bir form 88vh'lik bir alt sayfaya sıkıştığında iki şey oluyordu:
   içerik iki kez kayıyordu (sayfa + alt sayfa) ve klavye açılınca asıl eylem
   düğmesi ekranın altında kalıyordu. Akış TAM EKRAN ve üç parçalı:
   başlık sabit · gövde kayar · eylem çubuğu klavyenin ÜSTÜNDE sabit. */
.sayfa.akis{
  display:flex; flex-direction:column; align-self:stretch;
  width:100%; max-width:none; border-radius:0; padding:0;
  height:100%; max-height:none;
  overflow:hidden;
}
.akisbas{
  flex:0 0 auto; background:var(--yuzey); border-bottom:1px solid var(--line);
  padding:calc(env(safe-area-inset-top) + 9px) 14px 9px;
  display:grid; grid-template-columns:40px minmax(0,1fr) 40px; align-items:center; gap:8px;
}
.akisbas h2{ margin:0; font-size:16px; text-align:center; letter-spacing:.01em }
.akisbas>button{
  width:40px; height:40px; border-radius:12px; border:1px solid var(--line);
  background:var(--yuzey2); color:var(--fg); font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.akisbas>button[hidden]{ display:none }
.akisadim{ grid-column:1/-1; display:flex; gap:4px; margin-top:10px }
.akisadim i{ flex:1; height:3px; border-radius:2px; background:var(--line2);
  transition:background .2s ease }
.akisadim i.gecti{ background:var(--acc) }
.akisgovde{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px 16px 20px; overscroll-behavior:contain;
}
.akisnot{ color:var(--dim); font-size:13px; line-height:1.45; margin:0 0 12px }
.akisalt{
  flex:0 0 auto; background:var(--yuzey); border-top:1px solid var(--line);
  padding:10px 14px calc(env(safe-area-inset-bottom) + 12px);
  display:flex; gap:9px; align-items:stretch;
}
.akisalt .btn{ flex:1; margin:0 }
/* Klavye açıkken home-indicator boşluğu klavyenin altında kalıyor: iki kez
   pay bırakmak eylem çubuğunu gereksiz kalınlaştırıyordu. */
body.klavye-acik .akisalt{ padding-bottom:10px }
/* Klavyeyi kapatma kontrolü YALNIZ klavye açıkken görünür ve asıl eylem
   düğmesinin üstüne binmez — sabit bir yerde, çubuğun içinde durur. */
.klavyekapat{
  display:none; flex:0 0 48px; border-radius:14px; border:1px solid var(--line);
  background:var(--yuzey2); color:var(--fg); font-size:20px; line-height:1;
  cursor:pointer;
}
body.klavye-acik .klavyekapat{ display:block }

/* Akışın İÇİNDEKİ karar katmanı: alttaki formu yok etmeden soru sorar. */
.kararkat{
  position:fixed; left:0; right:0; top:var(--gorunen-viewport-y,0px);
  height:var(--gorunen-viewport-h,100dvh);
  z-index:90; background:rgba(0,0,0,.66);
  display:flex; align-items:flex-end; justify-content:center;
  box-sizing:border-box;
  animation:solgun .18s ease-out;
}
.kararkat>div{
  background:var(--yuzey); width:100%; max-width:640px;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:8px 18px calc(env(safe-area-inset-bottom) + 18px);
  max-height:88dvh; overflow-y:auto;
  animation:yukari .24s cubic-bezier(.32,.72,0,1);
}
.kararkat h2{ font-size:17px; margin:6px 0 4px }

/* ---------- Faz 77: futbol merkezi ortak parcalari ---------- */
.uyarikutu{ padding:11px 13px; border-radius:13px; margin-bottom:12px;
  background:rgba(230,184,0,.12); border:1px solid rgba(230,184,0,.35);
  color:var(--kt-sari,#e6b800); font-size:12.5px; line-height:1.5 }
.kural{ font-size:12.5px; line-height:1.5; padding:5px 0;
  border-bottom:1px solid var(--line) }
.kural:last-child{ border-bottom:none }
.kural.ok{ color:var(--dim) }
.kural.uyari{ color:var(--kt-sari,#e6b800) }
/* Satir ici sil/ayrinti dugmesi -- listelerde tekrar eden kucuk eylem. */
.det{ flex:0 0 auto; width:34px; height:34px; border-radius:10px;
  border:1px solid var(--line); background:var(--yuzey); color:var(--dim);
  font-size:15px; line-height:1; cursor:pointer }
.det:active{ border-color:var(--acc); color:var(--acc) }

/* ---------- 20 Eylul: cumle basliklarinda BUYUK HARF hatasi ----------
   ⚠️ OLCULDU: plan.html ve hareketler.html'de sayfa yerel bir
   `.sayfa h2{ text-transform:capitalize }` kurali var. Hareket adlari icin
   konmus ("barbell bench press" -> "Barbell Bench Press") ve dogru is
   yapiyor. Ama Faz 76-84'te gelen akis/karar basliklari da ayni secicinin
   altinda kaldi ve CUMLELER bozuldu: "Ana hedefin ne?" -> "Ana Hedefin Ne?"

   Cozum kurali silmek DEGIL (hareket adlari bozulurdu), cumle tasiyan
   yuzeyleri ozellikle disari almak. Ozgulluk sayfa kuralindan yuksek
   olmali: `.sayfa h2` (0,1,1) < `.sayfa .akisbas h2` (0,2,1). */
.sayfa .akisbas h2,
.sayfa .detaybas h2,
.sayfa .sbas .detaybas h2,
.kararkat h2{ text-transform:none }

/* Faz 90: gecmis antrenmanda set duzeltme */
.gduz{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px }
.gduz input{ text-align:center; font-size:17px; font-weight:650 }

/* ---------- Faz 95: kişiye özel kurulum (profil.js) ---------- */
.pksec{ display:grid; gap:8px }
.pkkutu{ display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--yuzey2); border:1px solid var(--line); border-radius:var(--r-m);
  padding:12px 13px; color:var(--fg); font:inherit; cursor:pointer }
.pkkutu .em{ font-size:24px; flex:0 0 auto }
.pkkutu .o{ min-width:0 }
.pkkutu .n{ font-size:15px; font-weight:650 }
.pkkutu .d{ font-size:12px; color:var(--dim); margin-top:2px }
.pkkutu[aria-pressed="true"]{ border-color:var(--acc);
  background:color-mix(in srgb,var(--acc) 10%,var(--yuzey2)) }
.pkcip{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 10px }
.pkcip button{ min-width:44px; height:38px; border-radius:11px; background:var(--yuzey2);
  border:1px solid var(--line); color:var(--dim); font:inherit; font-size:13px; font-weight:650;
  padding:0 11px; cursor:pointer }
.pkcip button[aria-pressed="true"]{ background:var(--acc); border-color:var(--acc); color:#12151c }
.pksaat{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:4px 0 12px; font-size:13px; color:var(--dim) }
.pksaat input{ width:120px; margin:0; text-align:center }
.pksatir{ display:flex; flex-direction:column; gap:2px; width:100%; text-align:left;
  background:var(--yuzey2); border:1px solid var(--line); border-radius:var(--r-m);
  padding:11px 13px; margin-bottom:7px; color:var(--fg); font:inherit; font-size:14.5px;
  font-weight:650; cursor:pointer }
.pksatir .d{ font-size:12px; font-weight:400; color:var(--dim) }
.pksatir[aria-pressed="true"]{ border-color:var(--kt-yesil);
  background:color-mix(in srgb,var(--kt-yesil) 9%,var(--yuzey2)) }
.pksatir[aria-pressed="true"] > span:first-child::before{ content:"✓ "; color:var(--kt-yesil) }
.pkkart{ display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 16%,var(--yuzey)),var(--yuzey));
  border:1px solid color-mix(in srgb,var(--acc) 45%,var(--line)); border-radius:var(--r-l);
  padding:14px; margin-bottom:12px; color:var(--fg); font:inherit; cursor:pointer }
.pkkart .e{ font-size:26px }
.pkkart b{ display:block; font-size:15px }
.pkkart span.a{ display:block; font-size:12.5px; color:var(--dim); margin-top:2px }
.pkmac{ display:flex; align-items:center; gap:8px; background:var(--yuzey); border:1px solid var(--line);
  border-radius:var(--r-m); padding:10px 12px; margin-bottom:12px; font-size:13.5px }
.pkmac span{ flex:1 }
.pkmac input{ width:96px; margin:0; text-align:center; padding:8px }
.pkmac button{ border-radius:10px; padding:8px 12px; font:inherit; font-size:13px; font-weight:700;
  cursor:pointer; background:var(--yuzey2); border:1px solid var(--line); color:var(--fg) }
.pkmac button.var{ background:var(--acc); border-color:var(--acc); color:#12151c }
/* Faz 107: takım antrenmanı kartı — metin üstte, "✓ Gittim / Gitmedim" altta
   (Almanca "Nicht dabei" 340 px'te metni harf harf sıkıştırıyordu). */
.pkmac.pktakim{ flex-wrap:wrap }
.pkmac.pktakim span{ flex:1 1 100%; min-width:0; overflow-wrap:break-word }
.pkmac.pktakim button{ flex:1 1 0; min-width:0; white-space:normal }

/* ---------- Faz 96: maç yakıtı (yakit.js) ---------- */
.ykkart{ display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:linear-gradient(135deg,color-mix(in srgb,var(--kt-mavi) 16%,var(--yuzey)),var(--yuzey));
  border:1px solid color-mix(in srgb,var(--kt-mavi) 45%,var(--line)); border-radius:var(--r-l);
  padding:13px 14px; margin-bottom:12px; color:var(--fg); font:inherit; cursor:pointer }
.ykkart .e{ font-size:26px }
.ykkart .t{ flex:1; min-width:0 }
.ykkart b{ display:block; font-size:15px }
.ykkart .t span{ display:block; font-size:12.5px; color:var(--dim); margin-top:2px }
.ykserit{ display:block; width:100%; text-align:left; margin:0 0 12px; padding:10px 12px;
  background:color-mix(in srgb,var(--kt-mavi) 10%,var(--yuzey)); border:1px solid
  color-mix(in srgb,var(--kt-mavi) 40%,var(--line)); border-radius:var(--r-m); color:var(--fg);
  font:inherit; font-size:13px; font-weight:650; cursor:pointer }
.ykroz{ font-size:11px; margin-top:3px; color:var(--kt-yesil) }
.ykroz.dikkat{ color:var(--kt-sari) }
.ykadim{ border-bottom:1px solid var(--line) }
.ykadim > summary{ display:flex; align-items:center; gap:10px; padding:11px 4px; list-style:none; cursor:pointer }
.ykadim > summary::-webkit-details-marker{ display:none }
.ykadim > summary .ok{ margin-left:auto; color:var(--dim2); transition:transform .15s }
.ykadim[open] > summary .ok{ transform:rotate(90deg) }
.ykadim .ic{ padding:0 4px 11px 60px }
.ykay{ margin-top:12px }
/* Faz 97: hafif tempo oynatıcısı + tansiyon */
.ykkart:disabled{ opacity:.55 }
.kdsure button{ flex:1 }
.kdoyna{ text-align:center; padding:6px 0 4px }
.kdoyna .em{ font-size:52px; line-height:1.1 }
.kdoyna .ad{ font-size:22px; font-weight:800; margin-top:6px }
.kdoyna .ip{ font-size:13.5px; color:var(--dim); margin-top:4px; min-height:2.6em; line-height:1.4 }
.kdoyna .sa{ font-size:56px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:6px }
.kdoyna .cubuk{ height:6px; border-radius:3px; background:var(--yuzey2); overflow:hidden; margin:10px 0 }
.kdoyna .cubuk i{ display:block; height:100%; background:var(--acc); transition:width .25s linear }
.kdoyna .sira{ font-size:13px; color:var(--dim) }
.kdkonus{ font-size:12.5px; color:var(--dim); text-align:center; margin:10px 0 }
.kdalt{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px }
.kdbitti{ font-size:30px; font-weight:800; text-align:center; margin:14px 0 4px }
.kdtan{ display:flex; align-items:flex-end; gap:10px }
.kdtan label{ flex:1; display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--dim) }
.kdtan > b{ font-size:28px; padding-bottom:10px; color:var(--dim2) }
.kdson{ display:flex; align-items:baseline; gap:10px; margin-top:16px }
.kdson b{ font-size:28px; font-weight:800; font-variant-numeric:tabular-nums }
.kdson span{ font-size:14px; font-weight:700; color:var(--kt-yesil) }
.kdson.yuksek span{ color:var(--kt-sari) }
.kdson.cok_yuksek span, .kdson.acil span{ color:var(--acc) }
.tnsat{ display:grid; grid-template-columns:minmax(0,1fr) auto 52px 32px; gap:8px; align-items:center;
  padding:6px 0; font-size:13px; border-bottom:1px solid var(--line) }
.tnsat .n{ color:var(--dim); font-size:12px }
.kdsil{ width:30px; height:30px; border-radius:9px; background:var(--yuzey2); border:1px solid var(--line);
  color:var(--dim); font-size:16px; cursor:pointer }
.ykadim.simdi{ background:color-mix(in srgb,var(--acc) 8%,transparent); border-radius:10px }
.ykadim .sa{ width:46px; flex:0 0 auto; font-weight:750; font-variant-numeric:tabular-nums;
  color:var(--acc); padding-left:4px }
.ykadim .em{ font-size:20px; flex:0 0 auto }
.ykadim .o{ min-width:0; flex:1 }
.ykadim b{ display:block; font-size:14.5px; text-transform:capitalize }
.ykadim .h{ display:block; font-size:12.5px; color:var(--fg); margin-top:2px; font-variant-numeric:tabular-nums }
.ykadim .d{ display:block; font-size:12px; color:var(--dim); margin-top:3px; line-height:1.4 }
.ykcevap{ margin-top:10px; font-size:13.5px; line-height:1.5; color:var(--fg) }
.ykgeri{ background:var(--yuzey); border:1px solid color-mix(in srgb,var(--kt-mavi) 45%,var(--line));
  border-radius:var(--r-l); padding:13px 14px; margin-bottom:12px }
.ykgeri b{ display:block; margin-bottom:8px }
.ykgeri .ke{ font-size:11px; color:var(--dim); margin:2px 0 2px }

/* ---------- Faz 108: Bugün "İlerlemen" kartı ---------- */
.ilrkart{ display:block; width:100%; text-align:left; cursor:pointer; color:#fff; font:inherit;
  border:none; border-radius:var(--r-l); padding:16px; margin:0 0 6px;
  background:linear-gradient(135deg, #5b5bd6 0%, #8b5cf6 55%, #d946ef 100%);
  box-shadow:0 10px 26px rgba(139,92,246,.28); touch-action:manipulation }
.ilrkart:active{ transform:scale(.99) }
.ilrust b{ display:block; font-size:17px; font-weight:800; line-height:1.3; overflow-wrap:break-word; hyphens:auto }
.ilrust span{ display:block; font-size:13px; opacity:.88; margin-top:3px; overflow-wrap:break-word }
.ilrust .ilrad{ font-style:normal; text-transform:capitalize }
.ilrizgara{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px }
.ilrkutu{ background:rgba(255,255,255,.14); border-radius:12px; padding:9px 8px; min-width:0 }
.ilrkutu b{ display:block; font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.15 }
.ilrkutu span{ display:block; font-size:11px; opacity:.85; margin-top:2px; line-height:1.25;
  overflow-wrap:break-word; hyphens:auto }
.ilrkutu.iyi b{ color:#bbf7d0 }
.ilrgit{ display:block; text-align:right; font-size:12.5px; font-weight:700; margin-top:10px; opacity:.92 }

/* ---------- Faz 102: günü düzenle + hareket seç (ortak.js gunDuzenle / hareketSec) ----------
   Akış kabuğu gibi üç parça: üst sabit · liste kayar · alt çubuk sabit.
   Alt çubuk seçili hareketin işlerini (↑ ↓ 🔗 ⚙︎ ⇄ 🗑) hep AYNI yerde tutar:
   art arda "↑ ↑ ↑" basarken parmak yer değiştirmez. Sürükleme yok (Faz 100c). */
.sayfa.tam-ekran.gdz{ display:flex; flex-direction:column; overflow:hidden;
  padding:calc(env(safe-area-inset-top) + 2px) 0 0 }
.sayfa.gdz > .tutamak{ flex:0 0 auto; margin:6px auto 10px }
.sayfa.gdz > .detaybas{ flex:0 0 auto; padding:0 16px }
.sayfa.gdz > input{ flex:0 0 auto; margin:4px 16px 0; width:auto }
.sayfa.gdz > .cipler{ flex:0 0 auto; padding:10px 16px 4px }
.gdzgovde{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain; padding:6px 16px 18px }
.gdzbilgi{ color:var(--dim); font-size:13px; line-height:1.45; margin:4px 0 10px }
.gdzgun{ margin:4px 0 12px }
/* Plan sayfasinin kendi `.oz` rozeti (gun ozeti) buraya sizmasin: arka plan + nowrap. */
.gdzgun > summary .oz{ background:none; border-radius:0; padding:0; white-space:normal }
.gdzet{ font-size:11px; font-weight:650; color:var(--dim); text-transform:uppercase;
  letter-spacing:.06em; margin:12px 0 6px }
.gdzemoji{ display:flex; flex-wrap:wrap; gap:8px }
.gdzemoji button{ font-size:24px; width:48px; height:48px; border-radius:12px; line-height:1;
  border:1px solid var(--line); background:var(--yuzey2); cursor:pointer; font-family:inherit }
.gdzemoji button[aria-pressed="true"]{ border-color:var(--acc);
  background:color-mix(in srgb, var(--acc) 14%, var(--yuzey2)) }
.gdzgunsil{ width:100%; margin-top:16px; color:var(--kirmizi);
  border-color:color-mix(in srgb, var(--kirmizi) 45%, var(--line)) }
.gdzliste{ display:grid; gap:8px }
.gdzsat{ display:flex; align-items:center; gap:10px; background:var(--yuzey2);
  border:1px solid var(--line); border-radius:14px; padding:8px 10px 8px 6px; cursor:pointer;
  touch-action:manipulation; scroll-margin:12px }
.gdzsat.ss{ border-left:4px solid var(--acc) }
.gdzsat.ss:not(.son){ border-bottom-left-radius:5px; border-bottom-right-radius:5px; margin-bottom:-5px }
.gdzsat.ss:not(.ilk){ border-top-left-radius:5px; border-top-right-radius:5px }
.gdzsat.secili{ border-color:var(--acc); box-shadow:0 0 0 1px var(--acc);
  background:color-mix(in srgb, var(--acc) 12%, var(--yuzey2)) }
.gdzno{ flex:0 0 26px; text-align:center; font-size:12px; font-weight:800; color:var(--dim2);
  font-variant-numeric:tabular-nums }
.gdzsat.ss .gdzno{ color:var(--acc) }
.gdzkucuk{ position:relative; flex:0 0 auto; width:46px; height:46px; padding:0;
  border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; cursor:pointer }
.gdzkucuk img{ width:100%; height:100%; display:block; object-fit:cover }
.gdzkucuk .oyn{ position:absolute; right:2px; bottom:2px; background:rgba(0,0,0,.62); color:#fff;
  border-radius:5px; font-size:8.5px; line-height:1; padding:2.5px 3.5px }
.gdzsat .o{ flex:1; min-width:0 }
.gdzsat .o b{ display:block; font-size:14.5px; font-weight:650; text-transform:capitalize;
  overflow-wrap:break-word; hyphens:auto; line-height:1.3 }
.gdzsat .o span{ display:block; font-size:12px; color:var(--dim); margin-top:2px;
  font-variant-numeric:tabular-nums }
.gdzsat .o .gdzbugun{ color:var(--kt-mavi, #5aa9ff) }
.gdzekle{ margin-top:12px }
.gdzcubuk{ flex:0 0 auto; background:var(--yuzey); border-top:1px solid var(--line);
  padding:10px 14px calc(env(safe-area-inset-bottom) + 10px); box-shadow:0 -6px 18px rgba(0,0,0,.18) }
body.klavye-acik .gdzcubuk{ padding-bottom:10px }
.gdzcubuk > .btn-ana{ width:100% }
.gdzcubuk .btn:disabled{ opacity:.45; box-shadow:none; cursor:default }
.gdzsecad{ font-size:13px; font-weight:700; text-transform:capitalize; margin:0 0 8px;
  overflow-wrap:break-word; hyphens:auto; line-height:1.3 }
.gdzdugmeler{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px }
.gdzdug{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:58px; padding:6px 4px; border-radius:13px; border:1px solid var(--line);
  background:var(--yuzey2); color:var(--fg); font:inherit; cursor:pointer; touch-action:manipulation }
.gdzdug i{ font-style:normal; font-size:19px; line-height:1 }
.gdzdug span{ font-size:11.5px; font-weight:650; line-height:1.2; text-align:center;
  overflow-wrap:normal; hyphens:auto; max-width:100% }
.gdzdug:active{ border-color:var(--acc) }
.gdzdug:disabled{ opacity:.35 }
.gdzdug.tehlike{ color:var(--kirmizi) }
.gdztam{ width:100%; margin-top:8px; padding:11px }
.gdzayar{ display:grid; gap:6px }
.gdzsayac{ display:grid; grid-template-columns:minmax(0,1fr) 44px 76px 44px; align-items:center; gap:6px }
.gdzsayac .gdzet{ margin:0; text-transform:none; letter-spacing:0; font-size:13px; color:var(--fg);
  font-weight:600; overflow-wrap:normal; hyphens:auto; line-height:1.25 }
.gdzsayac button{ height:40px; border-radius:11px; border:1px solid var(--line); background:var(--yuzey2);
  color:var(--fg); font-size:20px; cursor:pointer; touch-action:manipulation; font-family:inherit }
.gdzsayac b{ text-align:center; font-size:16px; font-variant-numeric:tabular-nums }
.gdzalt{ display:flex; gap:8px }
.gdzalt .btn{ flex:1; margin:0 }
.gdzalt .btn-sessiz{ flex:0 0 auto }
.hscust{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:4px 16px 2px; font-size:12.5px; color:var(--dim) }
.hscekip{ background:none; border:1px solid var(--line); border-radius:999px; color:var(--dim);
  font:inherit; font-size:12px; padding:5px 10px; cursor:pointer; white-space:nowrap }
.hscekip[aria-pressed="true"]{ border-color:var(--acc); color:var(--acc) }
.hscekip[hidden]{ display:none }
.hscsat{ border-top:1px solid var(--line); padding:9px 0 }
.hscsat:first-child{ border-top:none }
.hscsatir{ display:flex; align-items:center; gap:10px; cursor:pointer; touch-action:manipulation }
.hscgovde{ flex:1; min-width:0 }
.hscgovde b{ display:block; font-size:14.5px; font-weight:650; text-transform:capitalize;
  overflow-wrap:break-word; hyphens:auto; line-height:1.3 }
.hscgovde span{ display:block; font-size:12px; color:var(--dim); margin-top:2px }
.hscgovde .hscverim{ color:var(--acc); font-size:11px }
.hscisaret{ flex:0 0 40px; height:40px; display:grid; place-items:center; border-radius:12px;
  border:1px solid var(--line); color:var(--acc); font-size:20px; font-weight:700 }
.hscsat.secili .hscisaret{ background:var(--acc); border-color:var(--acc); color:#12151c }
.hscsat.ekli{ opacity:.55 }
.hscsat.ekli .hscisaret{ color:var(--yesil) }
.hsconiz{ margin:10px 0 2px }
.hsconiz[hidden]{ display:none }
.hsconiz img{ width:100%; border-radius:14px; background:#fff; display:block }
.hsconiz .btn{ width:100%; margin-top:8px }
.hscdaha{ width:100%; margin-top:10px }
.hscnot{ color:var(--sari, #e6b800); margin:2px 0 8px }
.hscdaha[hidden]{ display:none }

/* ---------- Faz 111: canlı eşitleme şeridi (ortak.js → _esitleSerit) ---------- */
.esitserit{ position:fixed; left:12px; right:12px; top:calc(env(safe-area-inset-top) + 8px); z-index:90;
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px;
  border-radius:14px; border:1px solid color-mix(in srgb, var(--acc) 55%, var(--line));
  background:var(--yuzey2); color:var(--fg); font:inherit; font-size:13.5px; text-align:left;
  box-shadow:0 8px 24px rgba(0,0,0,.35); cursor:pointer; touch-action:manipulation }
.esitserit span{ min-width:0; overflow-wrap:break-word }
.esitserit b{ flex:0 0 auto; color:var(--acc) }

/* ---------- Faz 114: açık rıza katmanı (ortak.js → rizaSor) ----------
   Alt sayfanın (#perde) ÜSTÜNDE ayrı katman: açık akış bozulmaz. */
.rzperde{ position:fixed; inset:0; z-index:200; background:rgba(5,7,10,.72);
  display:flex; align-items:flex-end; justify-content:center;
  padding:0 0 env(safe-area-inset-bottom) }
.rzkutu{ width:100%; max-width:520px; max-height:92dvh; overflow-y:auto; background:var(--yuzey);
  border:1px solid var(--line); border-radius:24px 24px 0 0; padding:22px 20px 18px }
.rzkutu h2{ font-size:19px; margin:6px 0 10px; line-height:1.3 }
.rzkutu p{ color:var(--dim); font-size:14.5px; line-height:1.5; margin:0 0 10px; overflow-wrap:break-word }
.rzkutu .rzkucuk{ font-size:12.5px; color:var(--dim2) }
.rzkutu .btn{ width:100%; margin-top:10px }
/* Faz 118: öğretici turu (rzkutu içinde) ve ekran yardımı */
.turnokta{ display:flex; gap:6px; justify-content:center; margin:14px 0 4px }
.turnokta i{ width:7px; height:7px; border-radius:50%; background:var(--line2) }
.turnokta i.on{ background:var(--acc) }
.ekranyardim{ display:block; margin:20px auto 6px; background:none; border:0; color:var(--dim);
  font:inherit; font-size:13px; cursor:pointer; padding:8px 12px }
/* Faz 118: hareket detayında kütüphane eylemleri (plana ekle / şimdi yap) */
.deylem{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; margin:0 0 12px }
.deylem .btn{ margin:0; width:100% }
.rzsimge{ font-size:34px; line-height:1 }
.rzbag{ display:block; text-align:center; margin-top:12px; font-size:13px; color:var(--dim) }

/* ---------- Faz 116: abonelik şeridi (ortak.js → aboneSerit) ---------- */
.abserit{ display:block; text-align:center; font-size:12.5px; font-weight:650; padding:7px 12px;
  padding-top:max(7px, env(safe-area-inset-top)); background:var(--yuzey); color:var(--acc);
  border-bottom:1px solid var(--line); text-decoration:none; overflow-wrap:break-word }
.abserit.gec{ color:var(--kirmizi) }
.plansinir{ display:block; font-size:12.5px; color:var(--dim); margin:0 2px 10px; text-decoration:none;
  overflow-wrap:break-word }