/* =====================================================================
   TEKRAR — TELEFON            kaynak: mobil/Mobil - Tekrar.dc.html
   ---------------------------------------------------------------------
   Dort durum tek rotada:
     ana ekran (kaydirmasiz · tek bakis) · kutular · tekrara dusenler
     · nasil calisir (alt sayfa)

   ISARETLEME TEK, GORUNUM IKI: bu dosya YALNIZCA `@media (max-width:
   940px)` icinde yasar; masaustu `renderReview`in kendi cizimini
   kullanmaya devam eder (`APP.Mobil.tekrarDevralir()` orada false).

   TOKEN, HAM HEX DEGIL. Tasarimin degerleri karsiligi olan token'a
   cevrildi (`#16293C` -> `--yan-bg2`, `#DBA277` -> `--yan-vurgu-2`...);
   ham hex yazmak koyu temayi kirar — belgeli tuzak.
   ===================================================================== */

@media (max-width: 940px) {

  /* Ekranin kendi dolgusu var (tasarim: baslik 18/12, govde 14).
     `.view`in yan dolgusu sifirlanir, ALT dolgusu KALIR — alt gezinme
     cubugu sabit ve icerigi ortmemeli. */
  .layout.mtekrar .view { padding-top: 0; padding-left: 0; padding-right: 0; }

  /* SAYFA DIBI BU EKRANDA CIZILMEZ — Bugun ve odak modundaki kararin
     aynisi. Tasarimin adi da "kaydirmasiz · tek bakis"; 178px'lik
     `.app-foot` o iddiayi tek basina bozuyor. Bayrak `render()`te her
     cizimde sifirlanir. */
  .layout.mtekrar .app-foot { display: none; }

  /* `.main` TELEFONDA KENDI KAYDIRMA KABI: `overflow-x: hidden` (yatay
     tasma korumasi) onu scrollport yapiyor ve "Tekrara dusenler"
     ekranindaki yapiskan cubuk gorunumun degil `.main`in dibine
     tutunuyordu — yani hicbir zaman gorunmuyordu (olculdu: cubugun alti
     1692, gorunum 844). Odak modunda bir kez yasanan kusurun aynisi.
     Yatay tasma bu ekranda alti gorunumde ayrica olculuyor. */
  .layout.mtekrar .main { overflow: visible; max-width: none; }

  .tk-kok { display: flex; flex-direction: column; min-height: 0; }

  /* ---------------- BASLIK SATIRI ---------------- */
  .tk-bas {
    flex: none; display: flex; align-items: center; gap: var(--sp-2);
    height: 54px; padding: 0 12px 0 18px;
  }
  .tk-bas > b {
    flex: 1; min-width: 0;
    font-size: 24px; font-weight: 500; letter-spacing: -.02em;
    color: var(--text); line-height: normal;
  }
  .tk-i {
    flex: none; display: grid; place-items: center;
    width: 44px; height: 44px;
    background: transparent; border: 0; border-radius: 13px;
    color: var(--faint); cursor: pointer;
    transition: background var(--mo-hizli) var(--mo-cikis),
                color var(--mo-hizli) var(--mo-cikis);
  }
  .tk-i:hover { background: var(--card); color: var(--accent); }
  .tk-i svg { width: 20px; height: 20px; }

  .tk-govde {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; gap: 9px;
    padding: 0 14px 8px;
  }

  /* ---------------- LACIVERT VITRIN ----------------
     Ekranin TEK eylemi burada. Kagit kartlar referans, lacivert yuzey
     KARAR — uygulamanin her ekraninda ayni dil. */
  .tk-vitrin {
    position: relative; overflow: hidden; flex: none;
    display: flex; flex-direction: column; gap: 9px;
    padding: 14px;
    background: var(--yan-bg2); border-radius: 22px;
    box-shadow: var(--shadow-card);
  }
  /* Ust kenarda bakir sac cizgisi — tasarimin kendi degeri. Gradyan
     DEGIL, duz 1px cizgi. */
  .tk-vitrin::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0;
    height: 1px; background: var(--yan-cizgi);
  }

  .tk-kas {
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-kas);
    text-transform: uppercase; line-height: normal;
  }
  .tk-vitrin .tk-kas { color: var(--yan-vurgu-2); }
  .tk-kart .tk-kas { color: var(--accent); }

  .tk-sayi { display: flex; align-items: center; gap: 11px; }
  .tk-sayi > b {
    flex: none;
    font-size: 44px; font-weight: 500; line-height: .95; letter-spacing: -.03em;
    color: var(--yan-metin); font-variant-numeric: tabular-nums;
  }
  .tk-sayi > span {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  }
  .tk-sayi i {
    font-style: normal; font-size: 14.5px; font-weight: 500;
    color: var(--yan-metin); line-height: normal;
  }
  .tk-sayi em {
    font-style: normal; font-size: var(--fs-sm); line-height: 1.4;
    color: var(--yan-metin-orta);
  }
  /* Kuyruk bosken buyuk bir "0" kotu haber gibi okunurdu; sayinin
     yerini onay dairesi alir, hiyerarsi ayni kalir. */
  .tk-onay {
    flex: none; display: grid; place-items: center;
    width: 46px; height: 46px; border-radius: var(--r-full);
    background: rgba(127, 179, 148, .16); color: var(--yan-ok);
  }
  .tk-onay svg { width: 24px; height: 24px; }

  /* ---- tur dilimleri: bugun kacinci turdayiz ---- */
  .tk-tur { display: flex; align-items: center; gap: 9px; }
  .tk-dilimler { flex: 1; min-width: 0; display: flex; gap: 3px; }
  .tk-dilimler > i {
    flex: 1; height: 5px; border-radius: 3px; background: var(--yan-kanal);
  }
  .tk-dilimler > i.dolu { background: var(--yan-vurgu); }
  /* Siradaki tur: DOLU DEGIL, cerceveli. Yapilmamis bir turu dolu
     boyamak sayiyi yalan soyletirdi. */
  .tk-dilimler > i.simdi { box-shadow: inset 0 0 0 1px var(--yan-vurgu); }
  .tk-tur > em {
    flex: none; font-style: normal; font-size: var(--fs-xs);
    color: var(--yan-metin-zayif); font-variant-numeric: tabular-nums;
  }

  /* ---- dugmeler ---- */
  .tk-birincil, .tk-ikincil {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    font-family: inherit; white-space: nowrap; cursor: pointer;
    transition: background var(--mo-orta) var(--mo-cikis),
                border-color var(--mo-hizli) var(--mo-cikis);
  }
  /* BIRINCIL DUGMENIN BAKIR ISILTISI — "birincil dugme golgesiz"
     kuralinin belgeli TEK istisnasi hero'ydu; bu ekranin hero'su da
     burasi ve tasarim isiltiyi kendisi veriyor. */
  .tk-birincil {
    height: 52px; border-radius: 15px;
    background: var(--accent); border: 1px solid var(--yan-cizgi);
    font-size: 15.5px; font-weight: 600; color: var(--ink-ters);
    box-shadow: 0 12px 26px -14px rgba(163, 87, 46, .95);
  }
  .tk-birincil:hover { background: var(--accent-parlak, var(--accent)); }
  .tk-birincil svg { width: 16px; height: 16px; }
  .tk-cip {
    display: inline-flex; align-items: center;
    height: 22px; padding: 0 8px; border-radius: 7px;
    background: rgba(255, 247, 239, .16);
    font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  }
  /* Koyu yuzeyde IKINCIL: cerceveli, dolu degil — ekranda ayni anda tek
     bakir dugme olur. */
  .tk-ikincil {
    height: 46px; border-radius: 14px;
    background: rgba(233, 237, 242, .06);
    border: 1px solid rgba(233, 237, 242, .18);
    font-size: var(--fs-kontrol); font-weight: 500; color: var(--yan-metin);
  }
  .tk-ikincil:hover { border-color: var(--yan-vurgu); }
  .tk-ikincil svg { width: 15px; height: 15px; color: var(--yan-vurgu-2); }
  .tk-say { color: var(--yan-metin-zayif); font-variant-numeric: tabular-nums; }
  .tk-say::before { content: '('; }
  .tk-say::after  { content: ')'; }

  .tk-kutucuklar { display: flex; gap: var(--sp-2); }
  /* SIGMIYORSA PUNTO KUCULTULMEZ — SARILIR. "Duzensiz Fiil Sinavi"
     13px'te 390px'lik ekranda tek satira sigmiyor ve tasarimin kendi
     olcusunde KIRPILIYORDU (ekran goruntusuyle yakalandi). Baslik iki
     satira sarabilir, kutu esnek; iki kutu `stretch` ile ayni boyda
     kalir. */
  .tk-kutucuk {
    flex: 1; min-width: 0;
    display: flex; align-items: center;
    min-height: 50px; padding: 7px 12px; border-radius: 14px;
    background: rgba(233, 237, 242, .06);
    border: 1px solid rgba(233, 237, 242, .18);
    font-family: inherit; text-align: left; cursor: pointer;
    transition: border-color var(--mo-hizli) var(--mo-cikis);
  }
  .tk-kutucuk:hover { border-color: var(--yan-vurgu); }
  .tk-kc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .tk-kc-tx b {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--fs-base); font-weight: 500; color: var(--yan-metin);
    line-height: 1.2;
  }
  .tk-kc-tx b svg { flex: none; width: 14px; height: 14px; color: var(--yan-vurgu-2); }
  .tk-kc-tx i {
    font-style: normal; font-size: var(--fs-xs); color: var(--yan-metin-zayif);
    line-height: normal;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  .tk-not {
    margin: 0; font-size: 11.5px; line-height: 1.5;
    color: var(--yan-metin-zayif);
  }
  .tk-not b { font-weight: 600; color: var(--yan-metin); }

  /* ---------------- KAGIT KARTLAR ---------------- */
  .tk-kart {
    flex: none; display: flex; flex-direction: column; gap: 9px;
    padding: var(--sp-3);
    background: var(--card); border: 1px solid var(--line-kart);
    border-radius: 18px; box-shadow: var(--shadow-card);
  }

  .tk-kbas {
    position: relative;
    display: flex; align-items: center; gap: 7px;
    min-height: 24px;
    background: transparent; border: 0; padding: 0;
    font-family: inherit; text-align: left; cursor: pointer;
  }
  /* DOKUNMA ALANI GORUNMEZ `::after` ILE 44px'e CIKAR — projenin belgeli
     kalibi (`.linkish::after`, `.tb-avatar::after`). Basligi 44px yapmak
     karta 20px eklerdi ve tasarim onu 24px veriyor; buyumesi gereken
     sey KUTU degil HEDEF. */
  .tk-kbas::after { content: ''; position: absolute; inset: -10px -12px; }
  .tk-kbas.dural::after { content: none; }
  .tk-kbas.dural { cursor: default; }
  .tk-kbas-say  { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
  .tk-kbas-sag  { margin-left: auto; font-size: 11.5px; color: var(--faint);
                  font-variant-numeric: tabular-nums; }
  .tk-kbas-tumu { margin-left: auto; font-size: var(--fs-sm); font-weight: 500; color: var(--accent); }
  .tk-kbas-ok   { flex: none; display: inline-flex; color: var(--faint); }
  /* Saga bakan chevron sette YOK: asagi bakan `chevron` 90 derece
     dondurulur — "ikonu yeniden cizme" kuralinin belgeli cozumu. */
  .tk-kbas-ok svg, .tk-s-ok svg {
    width: 16px; height: 16px; transform: rotate(-90deg);
  }

  /* ---- yigin cubugu: her kutu kendi dilimi, banda gore renk ---- */
  .tk-yigin {
    display: flex; gap: 2px; height: 12px;
    border-radius: 6px; overflow: hidden;
  }
  .tk-y { display: block; min-width: 3px; background: currentColor; }
  /* Ayni bandin komsu kutulari bir ton acilir — tasarimin iki mavi +
     iki amber + bir yesil dilimi tam olarak bu. */
  .tk-k1, .tk-k3, .tk-k5, .tk-k7 { opacity: .66; }

  .tk-lejant { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
  .tk-lj {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-sm); color: var(--faint);
  }
  .tk-lj b {
    font-size: var(--fs-base); font-weight: 600; color: var(--text);
    font-variant-numeric: tabular-nums;
  }
  .tk-lj .bant { width: 22px; height: 22px; }
  .tk-lj .bant svg { width: 12px; height: 12px; }

  /* ---- kart dibindeki gecis satiri ---- */
  .tk-satir {
    display: flex; align-items: center; gap: 9px;
    min-height: 44px; margin-top: 1px; padding: 4px 0 0;
    background: transparent; border: 0; border-top: 1px solid var(--line-zayif);
    font-family: inherit; text-align: left; cursor: pointer;
  }
  .tk-s-ic {
    flex: none; display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 9px;
    background: var(--bant-bg); color: currentColor;
  }
  .tk-s-ic svg { width: 13px; height: 13px; }
  .tk-s-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .tk-s-tx b {
    font-size: 13.5px; font-weight: 500; color: var(--text); line-height: normal;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tk-s-tx i {
    font-style: normal; font-size: var(--fs-sm); color: var(--faint);
    line-height: normal;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ---- tekrara dusenler onizlemesi ---- */
  .tk-p { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--faint); }
  .tk-p b { font-weight: 600; color: var(--text); }

  .tk-onizleme { display: flex; gap: 6px; }
  .tk-oc {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
    padding: 8px 11px; border-radius: 12px;
    background: var(--page); border: 1px solid var(--line-kart);
  }
  .tk-oc b {
    font-size: var(--fs-kontrol); font-weight: 500; color: var(--text);
    line-height: normal;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tk-oc i {
    font-style: normal; font-size: 11.5px; color: var(--faint); line-height: normal;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tk-oc-daha {
    flex: none; width: 52px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--accent-soft); border: 1px solid var(--cip-kenar);
    font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
    color: var(--accent); cursor: pointer;
  }

  /* ================= ALT EKRANLAR ================= */
  .tk-abas {
    flex: none; display: flex; align-items: center; gap: var(--sp-2);
    height: 56px; padding: 0 12px 0 8px;
  }
  .tk-geri {
    flex: none; display: grid; place-items: center;
    width: 44px; height: 44px;
    background: transparent; border: 0; border-radius: 13px;
    color: var(--muted); cursor: pointer;
    transition: background var(--mo-hizli) var(--mo-cikis),
                color var(--mo-hizli) var(--mo-cikis);
  }
  .tk-geri:hover { background: var(--card); color: var(--accent); }
  .tk-geri svg { width: 20px; height: 20px; }
  .tk-abas > b {
    flex: 1; min-width: 0;
    font-size: 16px; font-weight: 500; letter-spacing: -.01em; color: var(--text);
    line-height: normal;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tk-acip {
    flex: none; display: inline-flex; align-items: center;
    height: 28px; padding: 0 10px; border-radius: 9px;
    background: var(--card); border: 1px solid var(--line);
    font-size: 12.5px; color: var(--muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .tk-agovde {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; gap: var(--sp-2);
    padding: 2px 14px 12px;
  }
  .tk-agovde > .tk-p { padding: 0 2px; }

  /* ---- satir listesi ---- */
  .tk-kart.tk-liste { gap: 0; padding: 2px var(--sp-3); }

  .tk-k-satir {
    display: flex; align-items: center; gap: 9px; width: 100%;
    min-height: 40px;
    background: transparent; border: 0; border-bottom: 1px solid var(--line-zayif);
    font-family: inherit; text-align: left; cursor: pointer;
  }
  .tk-k-satir.bos, .tk-k-satir.bekle { cursor: default; }
  .tk-k-satir.bos { opacity: .45; }
  .tk-kart.tk-liste > .tk-k-satir:last-child,
  .tk-k-acik:last-child .tk-k-satir { border-bottom: 0; }
  .tk-k-ic {
    flex: none; display: grid; place-items: center;
    width: 24px; height: 24px; border-radius: var(--r-full);
    background: transparent;
    border: 1px solid currentColor;
    border-color: color-mix(in srgb, currentColor 45%, transparent);
  }
  .tk-k-ic svg { width: 12px; height: 12px; }
  .tk-k-ad  { flex: none; width: 52px; font-size: var(--fs-base); font-weight: 600; color: var(--text); }
  .tk-k-gun { flex: none; width: 92px; font-size: var(--fs-base); font-weight: 500; color: var(--text); }
  .tk-k-sure {
    flex: none; width: 70px; font-style: normal;
    font-size: var(--fs-xs); color: var(--faint);
  }
  .tk-k-bar {
    flex: 1; min-width: 0; height: 6px; border-radius: 3px;
    background: var(--cip-yuzey); overflow: hidden;
  }
  .tk-k-bar > i { display: block; height: 100%; border-radius: 3px; background: currentColor; }
  .tk-k-say {
    flex: none; width: 26px; text-align: right;
    font-size: var(--fs-base); font-weight: 600; color: var(--text);
    font-variant-numeric: tabular-nums;
  }
  /* ACIK KUTU — tint NOTR birakildi. Banda gore tint verilseydi `color`
     cocuklara da miras kalir ve satirin metnini yeniden boyardi. */
  .tk-k-acik {
    display: flex; flex-direction: column;
    margin: 4px -6px; padding: 0 6px 10px;
    background: var(--accent-soft); border: 1px solid var(--cip-kenar);
    border-radius: 13px;
  }
  .tk-k-acik .tk-k-satir { border-bottom: 0; }
  .tk-k-acik .kutu-ic { margin-top: 0; }

  /* ---- tekrara dusen kelime satirlari ---- */
  .tk-d-satir {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 0; border-bottom: 1px solid var(--line-zayif);
  }
  .tk-kart.tk-liste > .tk-d-satir:last-child { border-bottom: 0; }
  .tk-d-sol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .tk-d-ust { display: flex; align-items: center; gap: 7px; min-width: 0; }
  .tk-d-ust b {
    font-size: var(--fs-md); font-weight: 500; color: var(--text); line-height: normal;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tk-d-sol > i {
    font-style: normal; font-size: 11.5px; color: var(--faint); line-height: normal;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tk-d-sag {
    flex: none; max-width: 110px; text-align: right;
    font-size: var(--fs-xs); line-height: 1.35; color: var(--faint);
  }
  .tk-d-son {
    display: flex; justify-content: center;
    padding: 9px 0 11px; border-top: 1px solid var(--line-zayif);
    font-size: 11.5px; color: var(--faint);
  }

  /* ---- YAPISKAN EYLEM CUBUGU (tekrara dusenler) ----
     `sticky`, `fixed` DEGIL: akista kalir, ustundeki hicbir bolge
     kimildamaz. Alt gezinme cubugu SABIT ve 58px+guvenli alan yer
     kapliyor; `--mnav-h` `navCiz` icinde OLCULEREK yazilir, tahmin
     edilmez — ve olculen sey YUKSEKLIK degil cubugun dipten kapladigi
     SERIT (guvenli alan ve yuzen hapin alt boslugu dahil). */
  .tk-alt {
    position: sticky; z-index: 5;
    bottom: var(--mnav-h, 74px);
    display: flex; flex-direction: column;
    margin-top: auto; padding: 10px 14px 10px;
    background: var(--card); border-top: 1px solid var(--line-kart);
    box-shadow: 0 -12px 30px -28px rgba(15, 28, 43, .6);
  }

  /* ================= NASIL CALISIR (alt sayfa) ================= */
  .tk-nasil { display: flex; flex-direction: column; gap: var(--sp-4); }
  .tk-n-blok { display: flex; gap: 11px; }
  .tk-n-ic {
    flex: none; display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 11px;
  }
  .tk-n-ic svg { width: 16px; height: 16px; }
  .tk-n-ic.amber { background: var(--warn-soft);   color: var(--warn); }
  .tk-n-ic.bakir { background: var(--accent-soft); color: var(--accent); }
  .tk-n-ic.mavi  { background: var(--tint-blue);   color: var(--ilerleme-yeni); }
  .tk-n-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .tk-n-tx > b { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: normal; }
  .tk-n-tx > span { font-size: var(--fs-base); line-height: 1.55; color: var(--muted); }
  .tk-n-tx b { font-weight: 600; color: var(--text); }
  /* "Anladim" SESSIZ dugme — tasarim onu kum yuzeyde cerceveli veriyor.
     `APP.Sheet` ilk eyleme varsayilan olarak `btn-primary` yaziyor; bu
     ekranda birincil eylem tur baslatmak, bir bilgi sayfasini kapatmak
     degil. Cerceve `--btn-line` kalir (olculmus 3:1 duzeltmesi). */
  .btn.tk-anladim { font-weight: 500; }
}

/* ---------------------------------------------------------------------
   S BANDI — dar (<=374px) YA DA kisa (<=700px) ekran. `PLAN.md §4`:
   asla kuculmez -> dokunma hedefi, ikon, kenar, renk. Akiskan ->
   yukseklik, dikey bosluk, baslik puntosu.
   --------------------------------------------------------------------- */
@media (max-width: 940px) and (max-width: 374px),
       (max-width: 940px) and (max-height: 700px) {
  .tk-bas { height: 50px; }
  .tk-bas > b { font-size: 21px; }
  .tk-vitrin { padding: 12px; gap: 8px; border-radius: 20px; }
  .tk-sayi > b { font-size: 38px; }
  .tk-onay { width: 42px; height: 42px; }
  .tk-birincil { height: 50px; }
  .tk-ikincil, .tk-kutucuk { height: 44px; }
  .tk-govde { gap: 8px; }
}

/* Yatayda (kisa ve genis) vitrin iki kolona doner: sol yarim sayi ve
   tur cubugu, sag yarim dugmeler. Tek kolonda birincil dugme
   gorunumun altinda kaliyordu. */
@media (max-width: 940px) and (max-height: 480px) {
  .tk-vitrin {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: 14px; align-items: start;
  }
  .tk-vitrin .tk-kas, .tk-sayi, .tk-tur { grid-column: 1; }
  .tk-birincil, .tk-ikincil, .tk-kutucuklar, .tk-not { grid-column: 2; }
  .tk-not { display: none; }
}