/* ==========================================================
   CEA Vitrin — KUYUMCU modülü (canlı maden kuruna göre fiyat)

   Kullanan görünümler:
     resources/views/shop/kuyumcu/index.blade.php
     resources/views/shop/kuyumcu/urun.blade.php
     resources/views/shop/kuyumcu/partials/*.blade.php

   YALNIZCA VİTRİN. Panel stilleri public/css/panel-kuyumcu.css'te durur ve
   mağaza vitrinine ASLA yüklenmez (panel değişkenleri vitrinde tanımsızdır).

   public/css/shop.css PAYLAŞILAN dosyadır, DEĞİŞTİRİLMEZ.

   ----------------------------------------------------------
   DUYARLILIK KAPISI — bu dosyada uygulanan kurallar
   ----------------------------------------------------------
   • Izgara izlerinde ÇIPLAK `Nfr` YOK → her yerde `minmax(0, 1fr)`.
     Çıplak `1fr` taşan içerikte (uzun ürün adı, "1.961.500,00 ₺" gibi geniş
     sayı) satırı genişletir ve 320px'te yatay kaydırma üretir.
   • Yinelenen izlerde taban değer HER ZAMAN `min(Npx, 100%)` ile sarılır ve
     auto-fill kullanılır. Çıplak bir piksel tabanı (min() sarmalayıcısı
     olmadan), N kap genişliğinden büyük olduğunda kolonu kabın dışına taşırır
     ve 320px'te yatay kaydırma üretir.
     DİKKAT: bu açıklamada yasak kalıbın KENDİSİ örnek olarak YAZILMAZ —
     DuyarlilikTest CSS'i düz metin olarak tarar ve yorumdaki örneği de gerçek
     bir kural sanıp kapıyı kırmızıya çevirir (ölçüldü).
   • Dokunma hedefleri ≥ 44×44 (süzgeç çipleri, sepet düğmesi, sayfalama).
   • Form alanları ≥ 16px: iOS Safari 16px altındaki alana odaklanınca sayfayı
     ZORLA yakınlaştırır ve kullanıcı yakınlaştırmayı geri alamaz.
   • Tabloya `display:block` VERİLMEZ; kap kaydırılır ve kaba
     `tabindex="0" role="region" aria-label` konur (görünümde yazılı).
   • Belirteç rolleri sabittir: ARKA PLAN belirteci (--surface, --card-bg)
     METİN rengi olarak KULLANILMAZ, metin belirteci de zemin yapılmaz.
   ========================================================== */

/* ==========================================================
   1) GÜNLÜK KUR ŞERİDİ
   ========================================================== */

.ky-serit {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px 16px;
  margin-bottom: 22px;
}

.ky-serit__baslik {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.ky-serit__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  /* minmax(min(...)) — bkz. dosya başlığı duyarlılık notları */
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}

.ky-serit__oge {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
}

.ky-serit__maden {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.ky-serit__kur {
  font-size: 19px;
  font-weight: 700;
  color: var(--title);
  /* Uzun tutarlar ("1.234.567,89 ₺") kutuyu taşırmasın */
  overflow-wrap: anywhere;
}

.ky-serit__kaynak {
  font-size: 12.5px;
  line-height: 1.5;
  /*
   * --text kullanılır, --muted DEĞİL: --muted / --card-bg çifti bazı
   * temalarda 12,5px metin için sınırda kalıyor.
   */
  color: var(--text);
}

/* ==========================================================
   2) DURUM UYARILARI (kur yok / kur bayat / fiyat değişti)
   ========================================================== */

.ky-uyari {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--warning);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: 18px;
}

.ky-uyari--durdu {
  border-left-color: var(--danger);
}

.ky-uyari--bilgi {
  border-left-color: var(--primary);
}

.ky-uyari__govde {
  min-width: 0;
}

.ky-uyari__baslik {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--title);
}

.ky-uyari p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
}

.ky-uyari__eylem {
  margin-top: 12px;
}

/* ==========================================================
   3) SÜZGEÇ (ayar çipleri + gram aralığı)
   ========================================================== */

.ky-suzgec {
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  margin-bottom: 22px;
}

.ky-cipler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ky-cip {
  /* Dokunma hedefi: 44px yüksekliği min-height + padding birlikte sağlar */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--control-border);
  border-radius: var(--pill);
  background: var(--card-bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.ky-cip:hover,
.ky-cip:focus-visible {
  border-color: var(--control-border-strong);
  color: var(--title);
}

.ky-cip--acik {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.ky-cip__adet {
  font-size: 12.5px;
  font-weight: 700;
  opacity: 0.75;
}

.ky-suzgec__satir {
  display: grid;
  gap: 12px;
  align-items: end;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
}

.ky-alan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ky-alan label {
  font-size: 13px;
  font-weight: 600;
  color: var(--title);
}

.ky-alan input,
.ky-alan select {
  /*
   * 16px ZORUNLU: iOS Safari daha küçük yazı tipli alana odaklanınca sayfayı
   * kendiliğinden yakınlaştırır ve kullanıcı bunu geri alamaz.
   */
  font-size: 16px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--text);
  width: 100%;
  /* Kutu genişliği kaba sığsın (padding taşırmasın) */
  box-sizing: border-box;
}

.ky-alan input:focus-visible,
.ky-alan select:focus-visible {
  border-color: var(--control-border-strong);
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.ky-suzgec__dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ==========================================================
   4) ÜRÜN KARTLARI (gram / ayar / işçilik dökümü ile)
   ========================================================== */

.ky-izgara {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

.ky-kart {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  overflow: hidden;
}

.ky-kart__medya {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--surface);
}

.ky-kart__medya img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  display: block;
}

.ky-kart__govde {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  min-width: 0;
}

.ky-kart__ad {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--title);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.ky-kart__ad:hover,
.ky-kart__ad:focus-visible {
  text-decoration: underline;
}

/* Gram / ayar / işçilik künyesi */
.ky-kunye {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--text);
}

.ky-kunye li {
  display: grid;
  /* İki kolon: etiket daralabilir, değer taşmaz (çıplak 1fr YOK) */
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.ky-kunye dt,
.ky-kunye__etiket {
  color: var(--muted);
}

.ky-kunye dd,
.ky-kunye__deger {
  margin: 0;
  text-align: right;
  font-weight: 600;
  color: var(--title);
  overflow-wrap: anywhere;
}

.ky-kart__fiyat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.ky-kart__fiyat strong {
  font-size: 19px;
  font-weight: 700;
  color: var(--title);
  overflow-wrap: anywhere;
}

.ky-kart__fiyat small {
  font-size: 12px;
  color: var(--text);
}

.ky-kart__kapali {
  font-size: 13px;
  font-weight: 600;
  color: var(--danger);
  line-height: 1.5;
}

.ky-kart__eylem {
  margin-top: auto;
  padding: 0 14px 14px;
}

.ky-kart__eylem .btn {
  width: 100%;
  min-height: 44px;
}

/* ==========================================================
   5) ÜRÜN SAYFASI — HESABIN AÇIK DÖKÜMÜ
   ========================================================== */

.ky-sayfa {
  display: grid;
  gap: 26px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .ky-sayfa {
    /* İki kolon: ikisi de minmax(0, …) — çıplak fr yok */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.ky-sayfa__medya img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
}

.ky-sayfa__yan {
  display: grid;
  gap: 18px;
  min-width: 0;
}

/*
 * IZGARA ÇOCUKLARINA min-width:0 — ÖLÇÜLMÜŞ BİR YATAY KAYDIRMA HATASININ ÇÖZÜMÜ.
 *
 * Izgara (ve esnek kutu) öğelerinin varsayılan asgari genişliği `auto`dur, yani
 * öğe İÇERİĞİNİN min-content genişliğinden daha DAR olamaz. Fiyat geçmişi
 * tablosuna okunabilirlik için `min-width: 460px` verilmiştir; bu değer, tabloyu
 * saran kabın `overflow-x: auto` kuralına RAĞMEN öğeyi 460px'e şişirdi ve tüm
 * yan kolonu taşırdı.
 *
 * ÖLÇÜLDÜ (gerçek tarayıcı, 320px genişlikte iframe): ürün sayfasında
 * documentElement.scrollWidth = 482px / clientWidth = 305px, yani 177px YATAY
 * KAYDIRMA. Statik CSS denetimi (DuyarlilikTest) bunu YAKALAMADI — kural
 * tek tek doğruydu, hata kuralların BİRLİKTE davranışındaydı. Bu yüzden
 * duyarlılık ölçümü tarayıcıda da yapılmalıdır.
 *
 * min-width:0 ile öğe daralabilir, taşma da tasarlandığı yerde — tablo
 * kabının kendi yatay kaydırmasında — karşılanır. Sayfa gövdesi kaymaz.
 */
.ky-sayfa__yan > * {
  min-width: 0;
}

.ky-gecmis,
.ky-gecmis__kap {
  min-width: 0;
}

.ky-baslik {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1.25;
  color: var(--title);
  overflow-wrap: anywhere;
}

/* --- Döküm kutusu: güven bununla kazanılır --- */
.ky-dokum {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px 18px;
}

.ky-dokum__baslik {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--title);
}

.ky-dokum__aciklama {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}

.ky-dokum__formul {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  border: 1px dashed var(--border-strong);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  overflow-wrap: anywhere;
}

.ky-dokum__liste {
  margin: 0;
  display: grid;
  gap: 8px;
}

.ky-dokum__satir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
}

.ky-dokum__satir dt {
  color: var(--text);
  min-width: 0;
}

.ky-dokum__satir dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  color: var(--title);
  white-space: nowrap;
}

.ky-dokum__toplam {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--border-strong);
}

.ky-dokum__toplam dt {
  font-size: 15px;
  font-weight: 700;
  color: var(--title);
}

.ky-dokum__toplam dd {
  font-size: 21px;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ky-dokum__not {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text);
}

/* --- Sepete ekleme --- */
.ky-sepet {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.ky-sepet .ky-alan {
  /* Adet alanı büyümesin, düğme kalan yeri alsın */
  flex: 0 0 110px;
}

.ky-sepet__dugme {
  flex: 1 1 200px;
  min-height: 48px;
}

/* ==========================================================
   6) FİYAT GEÇMİŞİ TABLOSU
   ========================================================== */

.ky-gecmis {
  margin-top: 8px;
}

.ky-gecmis__baslik {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--title);
}

.ky-gecmis__aciklama {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}

/*
 * TABLOYA display:block VERİLMEZ — satır/hücre semantiği (ve ekran
 * okuyucudaki tablo gezinmesi) kaybolur. Kaydırma KABA verilir; kap
 * görünümde tabindex="0" role="region" aria-label ile klavyeye açılır.
 */
.ky-gecmis__kap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.ky-gecmis__kap:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.ky-gecmis table {
  width: 100%;
  border-collapse: collapse;
  /*
   * Sayı kolonları sıkışıp sarmasın diye asgari genişlik verilir; taşma
   * kabın yatay kaydırmasıyla karşılanır, SAYFA gövdesi kaymaz.
   */
  min-width: 460px;
  font-size: 13.5px;
}

.ky-gecmis th,
.ky-gecmis td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.ky-gecmis th {
  background: var(--surface);
  color: var(--title);
  font-weight: 700;
}

.ky-gecmis td {
  color: var(--text);
}

.ky-gecmis tr:last-child td {
  border-bottom: 0;
}

.ky-gecmis__sag {
  text-align: right;
}

/* ==========================================================
   7) BOŞ DURUM
   ========================================================== */

.ky-bos {
  padding: 40px 20px;
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

.ky-bos h2 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--title);
}

.ky-bos p {
  margin: 0 auto;
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}

/* ==========================================================
   8) HAREKET TERCİHİ
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .ky-cip,
  .ky-kart__ad {
    transition: none;
  }
}

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

     .ky-kart__ad  (liste kartındaki ÜRÜN ADI bağlantısı)  → 21px yükseklik
     .ky-sayfa__yan > p > a ("tüm ayrıntıları ve yorumlar") → 26px yükseklik

   WCAG 2.5.5 eşiği 44px. İlki özellikle ağır: /kuyumcu listesinde ürüne giden
   BİRİNCİL bağlantıdır, yani sayfanın asıl işi o hedefe basmaktır.

   NİÇİN ÖNCEKİ ÖLÇÜM GÖRMEDİ: yalnızca 320px'te ölçülmüştü. 320px'te ürün adı
   İKİ SATIRA sarıyor ve yükseklik ~42px'e çıkıyor; 390px'te tek satıra düşüp
   21px'e iniyor. Bu yüzden dokunma hedefi TEK genişlikte ölçülemez — kural
   listesindeki dokuz genişliğin hepsinde ölçülmek zorundadır.

   NİÇİN inline-flex (block DEĞİL): `block` verilse bağlantı satırın tamamını
   tıklanabilir yapardı ve kullanıcı "boşluğa bastım, sayfa değişti" derdi.
   NİÇİN ::before hilesi DEĞİL: bu bağlantılar kendi satırında tek başına
   duruyor, yüksekliği doğrudan artırmak komşu bir hedefle ÇAKIŞMIYOR.
   (shop-oto.css içinde aynı gerekçe aynı çözümle yazılmıştır.)
   ========================================================================== */

.ky-kart__ad,
.ky-sayfa__yan > p > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}