/* =====================================================================
   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 ---------------- */
  /* Baslik satiri ORTAK: `.ekran-bas` (style.css, "EKRANIN KENDI
     BASLIK SATIRI"). Ilerleme ekrani da ayni olcuyu kullaniyor. */
  .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-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 ================= */
  /* Alt ekran basligi, cipi ve govdesi ORTAK: `.ekran-abas` /
     `.ekran-acip` / `.ekran-agovde` (style.css). Geri dugmesi de
     ortak: `.ekran-geri`. */
  .ekran-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: flex-start; gap: 10px;
    padding: 10px 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;
  }
  /* OKUNUS VE ANLAM AYRI SATIRDA, AYRI RENKTE. Ikisi tek satirda
     `okunus · anlam` diye birlestiriliyordu ve kullanici bildirdi
     ("cok karisiyor"). Okunus bakir (`--okunus`), anlam notr. */
  .tk-d-sol > i {
    font-style: normal; font-size: 11.5px; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tk-d-oku { color: var(--okunus); letter-spacing: .2px; }
  .tk-d-tr  { color: var(--faint); }
  .tk-d-sag {
    flex: none; max-width: 110px; margin-top: 2px; 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);
  }

}

/* ---------------------------------------------------------------------
   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-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; }
}