/* ==========================================================================
   ELEKTRONİK / TELEFONCU — VİTRİN STİLLERİ
   ==========================================================================
   Kapsam: ürün sayfası durum + garanti + taksit kutusu, garanti sorgusu,
   takas başvurusu ve durum sorgusu, ürün durumu listesi, "Cihazlarım".

   BU DOSYA shop.css'İN ÜSTÜNE BİNER: .container, .panel, .field, .field-row,
   .check, .alert, .badge, .table-scroll, .btn ve .pgrid oradan gelir; burada
   YENİDEN TANIMLANMAZ. Yalnızca bu modüle özgü bileşenler vardır (elk- öneki).

   --------------------------------------------------------------------------
   DUYARLILIK SÖZLEŞMESİ (tests/Feature/DuyarlilikTest.php ölçer)
   --------------------------------------------------------------------------
   1) Izgara izlerinde ÇIPLAK `Nfr` YOK → daima `minmax(0, Nfr)`. Çıplak `1fr`
      örtük tabanı `auto` (min-content) olduğu için içindeki uzun bir IMEI ya da
      geniş bir taksit tablosu izi genişletip BÜTÜN SAYFAYI yatay kaydırır.
   2) `repeat(auto-fit, …)` tabanı `min(NNNpx, 100%)` ile sarılır → 320px'lik
      ekranda (kullanılabilir alan ~280px) taşma olmaz.
   3) Onaylı kırılma noktaları: 420 · 560 · 640 · 641 · 720 · 900 · 901 · 1040 ·
      1100. Bu dosya YALNIZCA 560, 640 ve 900 kullanır.
   4) Dokunma hedefleri ≥ 44×44 (min-height/min-width).
   5) Form alanı yazı boyu ≥ 16px (iOS 16px altında ZORLA yakınlaştırır ve
      kullanıcı bir daha uzaklaştıramaz).
   6) TABLOYA `display: block` VERİLMEZ — satır/sütun ilişkisi erişilebilirlik
      ağacından düşer. Dar ekranda kaydırma SARMALAYICIDA yapılır
      (.table-scroll, tabindex="0" + role="region" + aria-label).
   7) Geçiş kısayolunda "hepsi" (a-l-l) değeri KULLANILMAZ; canlandırılan
      özellikler tek tek yazılır, yoksa yerleşim tetikleyen bir özellik sessizce
      animasyona girer. DİKKAT: denetim CSS dosyasını YORUMLARIYLA BİRLİKTE
      tarar; yasaklı yazım bu açıklamanın içinde bile GEÇMEZ (ölçüldü — ilk
      sürümde DuyarlilikTest tam bu yüzden düştü).
   8) Renk belirteçlerinin rolü sabittir: arka plan belirteci (--surface,
      --card-bg) METİN rengi olarak KULLANILMAZ.
   ========================================================================== */

/* ==========================================================================
   1) ÜRÜN SAYFASI KUTUSU — durum + garanti + taksit
   ========================================================================== */

.elk-kutu {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  padding: 16px 18px;
  margin-bottom: 18px;
}

.elk-kutu__baslik {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.elk-kutu__baslik h2,
.elk-kutu__baslik h3 {
  font-size: 16px;
  margin: 0;
  color: var(--title);
}

/* Durum rozeti + kısa vaat satırı */
.elk-durum-satir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.elk-durum-satir__not {
  font-size: 14px;
  color: var(--muted);
}

/* Durum TANIMI: "yenilenmiş ne demek" metni ve test listesi */
.elk-tanim {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 10px;
}

.elk-testler {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 16px;
  margin: 0 0 10px;
  padding: 0;
  font-size: 14px;
  color: var(--text);
}

.elk-testler li {
  position: relative;
  padding-left: 18px;
}

/*
  Süs işareti CSS'te kaçış dizisiyle yazılır (ASCII dışı `content` değeri
  Türkçe kodlama kapısına takılır). U+2713 = onay işareti; aria-hidden
  gerekmez, ::before içeriği erişilebilirlik ağacına yalnızca dekoratif
  olarak düşer ve bilgi metnin KENDİSİNDEDİR.
*/
.elk-testler li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--success);
  font-weight: 700;
}

/* Yenileme merkezi / belge bilgisi */
.elk-merkez {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
}

.elk-merkez strong { color: var(--text); }

/* ==========================================================================
   2) GARANTİ ÖZETİ
   ========================================================================== */

.elk-garanti {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.elk-garanti__satir {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  font-size: 14.5px;
  color: var(--text);
}

.elk-garanti__etiket {
  color: var(--muted);
  font-size: 13.5px;
}

.elk-garanti__deger { font-weight: 600; color: var(--title); }

/* ==========================================================================
   3) TAKSİT TABLOSU
   ==========================================================================
   Tablo semantiği KORUNUR (display değiştirilmez); dar ekranda .table-scroll
   kabı kayar. Kap Blade'de tabindex="0" role="region" aria-label taşır.
*/

.elk-taksit {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  /*
    min-width (width DEĞİL): dört kolonlu tablo 320px'de sıkışmasın diye taban
    genişlik verilir ve kabında kayar. `width` verilmesi sayfayı kaydırırdı.
  */
  min-width: 340px;
}

.elk-taksit th,
.elk-taksit td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.elk-taksit th {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.elk-taksit td.elk-sag,
.elk-taksit th.elk-sag { text-align: right; white-space: nowrap; }

.elk-taksit tbody tr:last-child td { border-bottom: 0; }

.elk-not {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 8px 0 0;
}

/* ==========================================================================
   4) UYARI KUTUSU — "ön değerlendirme, kesin fiyat değil"
   ==========================================================================
   .alert--info shop.css'te var; burada yalnızca vurgu ve boşluk eklenir.
*/

.elk-uyari {
  border: 1px solid var(--accent-light);
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.elk-uyari strong { color: var(--accent-strong); }

/* ==========================================================================
   5) FORM DÜZENLERİ
   ==========================================================================
   Tek kolon MOBİL ÖNCELİKLİ; geniş ekranda iki kolona çıkar.
*/

.elk-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 18px;
}

.elk-form--genis { max-width: 720px; }

/*
  Form alanlarının yazı boyu 16px'in ALTINA İNDİRİLMEZ (iOS zorla yakınlaştırma).
  shop.css zaten 16px veriyor; burada yalnızca dokunma yüksekliği güvenceye
  alınır — 44px WCAG 2.5.5 eşiğidir.
*/
.elk-form .field input,
.elk-form .field select,
.elk-form .field textarea {
  min-height: 44px;
  font-size: 16px;
}

.elk-form .field textarea { min-height: 96px; }

/* Radyo/onay kutulu durum soruları */
.elk-secenekler {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.elk-secenek {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  /* Saran etiket dokunma hedefidir: yerel radyo düğmesi 20px kalır. */
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  cursor: pointer;
  font-size: 15px;
  color: var(--text);
  transition: border-color 140ms var(--ease), background-color 140ms var(--ease);
}

.elk-secenek:hover { border-color: var(--control-border-strong); }

.elk-secenek input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 2px;
  accent-color: var(--primary-hover);
}

.elk-secenek:focus-within {
  outline: 3px solid var(--primary-focus);
  outline-offset: 2px;
}

/* Dosya seçici — dokunma hedefi ve okunur yazı boyu */
.elk-dosya {
  display: block;
  width: 100%;
  min-height: 44px;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px dashed var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}

/* ==========================================================================
   6) SONUÇ KARTLARI (garanti sorgusu · takas durumu)
   ========================================================================== */

.elk-sonuclar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 6px;
}

.elk-kart {
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  padding: 14px 16px;
}

.elk-kart--bitti { border-left-color: var(--danger); }
.elk-kart--yaklasan { border-left-color: var(--warning); }
.elk-kart--gecerli { border-left-color: var(--success); }

.elk-kart__ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 8px;
}

.elk-kart__ad {
  font-family: var(--font-heading), sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--title);
  margin: 0;
}

.elk-kart__satirlar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  font-size: 14px;
  color: var(--text);
}

.elk-kart__satir { display: flex; flex-wrap: wrap; gap: 6px; }
.elk-kart__satir dt { color: var(--muted); margin: 0; }
.elk-kart__satir dd { margin: 0; font-weight: 600; color: var(--title); }

/* IMEI gibi uzun numaralar: tek boşlukta kırılabilsin, izi genişletmesin */
.elk-seri {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 14px;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ==========================================================================
   7) DURUM ŞERİDİ (sıfır / yenilenmiş / ikinci el süzme)
   ========================================================================== */

.elk-serit {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding: 0;
  list-style: none;
}

.elk-serit__bag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--pill);
  background: var(--card-bg);
  color: var(--text);
  font-size: 14.5px;
  text-decoration: none;
  transition: border-color 140ms var(--ease), color 140ms var(--ease);
}

.elk-serit__bag:hover { border-color: var(--primary); color: var(--primary-hover); }

.elk-serit__bag.is-active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-hover);
  font-weight: 600;
}

/* ==========================================================================
   8) CİHAZLARIM (üye hesabı)
   ========================================================================== */

.elk-cihazlar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.elk-cihaz__ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 6px;
}

.elk-gizlilik {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  border-top: 1px solid var(--border);
  margin-top: 16px;
  padding-top: 12px;
}

/* ==========================================================================
   9) FOTOĞRAFLAR (takas başvurusu)
   ========================================================================== */

.elk-fotolar {
  display: grid;
  /* Taban `min(120px, 100%)` ile sarılı: 320px ekranda taşma olamaz. */
  grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.elk-foto {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
  /* Küçük bir görsel bağlantısı da dokunulabilir olmalı */
  min-height: 44px;
}

.elk-foto img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   10) GENİŞ EKRAN — İKİ KOLON
   ==========================================================================
   Mobil öncelikli yazıldığı için burada YALNIZCA genişleme kuralları var.
   Kırılma noktaları onaylı listeden: 560 · 640 · 900.
*/

@media (min-width: 560px) {
  .elk-testler { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .elk-kart__satirlar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (min-width: 640px) {
  .elk-secenekler { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
}

@media (min-width: 900px) {
  .elk-form--ikili { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .elk-cihazlar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ==========================================================================
   11) HAREKETİ AZALT
   ==========================================================================
   shop.css genel bir prefers-reduced-motion bloğu taşıyor; bu dosya kendi
   geçişlerini de AÇIKÇA sıfırlar, böylece yükleme sırası ne olursa olsun
   hareket kapatılabilir kalır (WCAG 2.3.3).
*/

@media (prefers-reduced-motion: reduce) {
  .elk-secenek,
  .elk-serit__bag {
    transition-duration: 0.01ms;
  }
}

/* ==========================================================================
   DOKUNMA HEDEFİ DÜZELTMESİ — BAĞIMSIZ DENETİMDE GERÇEK TARAYICIYLA ÖLÇÜLDÜ
   ==========================================================================
   Vuruş testi (elementFromPoint ile gerçek isabet alanı, 390px genişlik):

     .elk-not içindeki metin bağlantıları → 22px yükseklik
     (ör. /takas sayfasındaki "takas durumu sorgulama" bağlantısı)

   WCAG 2.5.5 eşiği 44px. `.elk-not` bilgi notu sınıfıdır ve altı ayrı vitrin
   görünümünde kullanılıyor (takas, takas-durum, garanti-sorgula, cihazlarim,
   durum-listesi, urun-kutusu); bağlantı taşıyanlarının hepsi aynı ihlaldeydi.

   NİÇİN MODÜLÜN KENDİ DENETİMİ GÖRMEDİ: bu modülün duyarlılık ölçümü YALNIZCA
   kaynak taramasıydı (DuyarlilikTest). O kapı "44px'in ALTINDA min-height
   YAZAN" kuralları arar; HİÇ min-height yazmayan bir kural denetimin kör
   noktasıdır — bu bağlantılar için hiç kural yoktu.

   `inline-flex` + `min-height`: gerekçesi shop-oto.css ve shop-kuyumcu.css
   içindeki aynı düzeltmede yazılı (block satırın tamamını tıklanabilir yapardı).
   `.elk-not` satır yüksekliği metin akışı için 1.6 kalır; yalnızca bağlantının
   isabet alanı büyür.
   ========================================================================== */

.elk-not a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}