/* ==========================================================================
   Kuyumcu ekran panosu.

   TASARIM KARARLARI — hepsi "dükkânda duvardaki TV'den, 3-5 metreden
   okunacak" varsayımına göre alındı, masaüstünde okunacak bir sayfaya göre
   değil:

   - EKRANDA KAYDIRMA YOK. Pano bir ızgara; kartlar ekranı tam doldurur.
     Yazı boyutu piksel değil, SATIR BİRİMİ (--u) üzerinden hesaplanır:
     --u ekran yüksekliğinin sütundaki satır sayısına bölümüdür. Böylece
     32" ekran da 75" ekran da, yatay da dikey de aynı oranda dolar.
   - Sayı fontu tablosal rakam kullanır. Fiyat her saniye değişiyor;
     rakamlar eşit genişlikte olmazsa sütun oynar, uzaktan bu titreme
     olarak görünür.
   - Değişen hücrenin ZEMİNİ yeşil/kırmızı yanıp söner. Uzaktan bakan göz
     sayıyı okumadan önce hareketi yakalar.
   - Satırın solundaki dikey bar günün yönünü sürekli gösterir (yanıp sönen
     değil, duran bilgi): yeşil yükselmiş, kırmızı düşmüş.
   - Koyu tema varsayılan: vitrin ekranı gece de açık kalır ve beyaz zemin
     camda yansıma yapar. Açık tema tek tuşla.
   ========================================================================== */

:root {
  --zemin:      #06090f;
  --panel:      #0d131e;
  --panel-2:    #131b29;
  --cizgi:      #1d2736;
  --yazi:       #f2f6ff;
  --yazi-sonuk: #8593a8;
  --vurgu:      #e8b339;
  --yukari:     #17d888;
  --asagi:      #ff4557;
  --yukari-fon: rgba(23,216,136,.22);
  --asagi-fon:  rgba(255,69,87,.22);
  --olcek:      1;
}

:root[data-tema="acik"] {
  --zemin:      #eceff5;
  --panel:      #ffffff;
  --panel-2:    #f4f7fb;
  --cizgi:      #d9e0ea;
  --yazi:       #0d1220;
  --yazi-sonuk: #5a6678;
  --vurgu:      #8a6000;
  --yukari:     #067a4f;
  --asagi:      #c3121f;
  --yukari-fon: rgba(6,122,79,.16);
  --asagi-fon:  rgba(195,18,31,.16);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--zemin);
  color: var(--yazi);
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* PANO ile METİN ayrımı.
   Pano tam olarak bir ekran yüksekliğinde durur: TV'de ilk görünen şey
   yalnızca fiyat tablosudur, altında ne olduğu dükkânı ilgilendirmez.
   Arama motoru için gereken metin onun altında akar ve tam ekran modunda
   tamamen gizlenir; yani ekranı hiç etkilemez. */
.ekran {
  height: 100vh;
  display: flex; flex-direction: column;
}
@supports (height: 100svh) { .ekran { height: 100svh; } }

body.sade { overflow: hidden; }
body.sade .yazi, body.sade .alt { display: none; }

/* ---------- Üst çubuk ---------- */
.ust {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: calc(.55vh + 5px) calc(.8vw + 10px);
  background: var(--panel);
  border-bottom: 1px solid var(--cizgi);
}
.ust-sol, .ust-sag { display: flex; align-items: center; gap: calc(.5vw + 8px); }

.marka {
  display: flex; align-items: center; gap: .5em;
  font-size: calc(1vh + .45vw + 8px);
  font-weight: 700; letter-spacing: -.01em;
  color: var(--yazi); text-decoration: none; white-space: nowrap;
}
.marka-nokta {
  width: .7em; height: .7em; border-radius: 50%;
  background: var(--vurgu);
  box-shadow: 0 0 0 .18em color-mix(in srgb, var(--vurgu) 22%, transparent);
}

.menu { display: flex; gap: 2px; }
.menu a {
  padding: .35em .85em; border-radius: 7px;
  font-size: calc(.85vh + .32vw + 6px);
  color: var(--yazi-sonuk); text-decoration: none; white-space: nowrap;
}
.menu a:hover { color: var(--yazi); background: var(--panel-2); }
.menu a.etkin { color: var(--zemin); background: var(--vurgu); font-weight: 600; }

.durum {
  display: flex; align-items: center; gap: .5em;
  font-size: calc(.7vh + .28vw + 5px);
  color: var(--yazi-sonuk); text-transform: uppercase; letter-spacing: .08em;
  white-space: nowrap;
}
.durum i {
  width: .6em; height: .6em; border-radius: 50%;
  background: var(--yazi-sonuk); flex: none;
}
.durum.canli i { background: var(--yukari); animation: nabiz 2s infinite; }
.durum.kopuk  i { background: var(--asagi); }
@keyframes nabiz { 0%,100% { opacity: 1 } 50% { opacity: .2 } }

.saat {
  font-variant-numeric: tabular-nums;
  font-size: calc(.85vh + .38vw + 6px);
  color: var(--yazi-sonuk);
}

.dugme {
  width: calc(1.5vh + .75vw + 15px); height: calc(1.5vh + .75vw + 15px);
  display: grid; place-items: center;
  font-size: calc(.85vh + .35vw + 5px);
  background: var(--panel-2); color: var(--yazi-sonuk);
  border: 1px solid var(--cizgi); border-radius: 9px; cursor: pointer;
}
.dugme:hover { color: var(--vurgu); border-color: var(--vurgu); }

/* ---------- Pano ızgarası ----------
   Sütun sayısını ve satır birimini JS ekran ölçüsüne göre belirler; ilk
   boyamada sunucunun yerleştirdiği 3 sütunlu düzen geçerlidir. Kart
   yerleşimleri satır içi stille (grid-column / grid-row) gelir. */
.pano {
  flex: 1; min-height: 0;
  display: grid;
  container-type: size;              /* --u bu kutunun yüksekliğinden türer */
  gap: calc(.5vh + 4px);
  padding: calc(.5vh + 4px);

  /* TABAN SATIR YÜKSEKLİĞİ — kuralın en önemli parçası.
     "Her şey ekrana sığsın" tek başına uygulanınca telefonda 55 satır
     ekrana sıkışıyor ve rakamlar okunmaz hâle geliyor; okunmayan veri,
     sığan veriden kötüdür. Satır bu tabanın altına inecekse pano artık
     sığdırmayı bırakıp KAYDIRMAYA geçer: kullanıcı hangi bölümü görmek
     istiyorsa oraya kaydırır. TV'de taban zaten hiç devreye girmez —
     orada sığdırılmış satır tabandan yüksek çıkıyor. */
  --taban: calc((30px + .6vh) * var(--olcek));
  grid-auto-rows: minmax(var(--taban), 1fr);

  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cizgi) transparent;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.pano::-webkit-scrollbar { width: 8px; }
.pano::-webkit-scrollbar-thumb { background: var(--cizgi); border-radius: 4px; }

.grup {
  background: var(--panel);
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  container-type: inline-size;       /* dar kartta ek sütunlar kapanır */

  /* Satır birimi: kullanılabilir yüksekliğin sütundaki satır sayısına bölümü.
     Tüm yazı boyutları bunun katıdır, böylece panonun her yerinde aynı
     büyüklüktedir — sütundan sütuna zıplamaz. */
  /* Gerçekleşen satır yüksekliği: sığdırma ile taban, hangisi büyükse.
     Izgaranın minmax(var(--taban), 1fr) kuralıyla birebir aynı hesap. */
  --u: max(var(--taban), calc(96cqh / var(--sira, 20)));
}

.grup-bas {
  margin: 0; padding: .45em .9em;
  font-size: calc(.85vh + .33vw + 6px);
  font-size: calc(var(--u) * .46 * var(--olcek));
  font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--vurgu);
  background: var(--panel-2);
  border-bottom: 1px solid var(--cizgi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tablo {
  table-layout: fixed;              /* isim sütunu sayıları ezmesin */
  width: 100%; height: 100%;        /* artan yükseklik satırlara dağılır */
  border-collapse: collapse;
}
.tablo th {
  padding: .3em .55em;
  font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--yazi-sonuk); text-align: right;
  border-bottom: 1px solid var(--cizgi);
  white-space: nowrap; overflow: hidden;
}
.tablo th.s-ad { text-align: left; padding-left: .95em; }

.tablo td {
  padding: 0 .55em;
  border-bottom: 1px solid color-mix(in srgb, var(--cizgi) 55%, transparent);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden;
}
.tablo tr:last-child td { border-bottom: 0; }
.tablo tr.bos { display: none; }         /* akışta karşılığı olmayan kod */

/* SÜTUN GENİŞLİĞİ + PUNTO TAVANI
   Punto satır yüksekliğinden (--u) türüyor, sütun genişliği ise kartın
   yüzdesi. 16:9 bir ekranda bu ikisi aynı hızda büyümüyor: 2560'ta satır
   57 px'e çıkarken fiyat sütunu yalnızca 176 px oluyor ve "6.870,47" hücreye
   sığmıyordu. Bu yüzden her puntonun ikinci bir tavanı var: cqi (kartın
   genişliğinin yüzdesi). min() ikisinden küçüğünü seçer — ne yükseklik ne
   genişlik aşılır, hiçbir değer kırpılmaz.

   Tavan katsayıları şu hesaptan: tablosal rakamda bir karakter ~0,6em,
   en uzun değer 8 hane ("159,9265"), yatay dolgu ~1,1em → ~5,9em gerekir.
   Fiyat sütunu %20 ise tavan 0,20 / 5,9 ≈ 0,034 = 3,3cqi.
   İsim sütunu için en uzun ad 22 karakter, karakter ~0,5em → ~12,1em. */
.s-ad    { width: 28%; }
.s-fiyat { width: 20%; }
.s-fark  { width: 12%; }
.s-ek    { width: 10%; }

.tablo td  { font-size: min(calc(var(--u) * .58 * var(--olcek)), 3.1cqi); }
td.s-ad    { font-size: min(calc(var(--u) * .50 * var(--olcek)), 2.0cqi); }
td.s-fark  { font-size: min(calc(var(--u) * .44 * var(--olcek)), 2.5cqi); }
td.s-ek    { font-size: min(calc(var(--u) * .34 * var(--olcek)), 1.7cqi); }
.tablo th  { font-size: min(calc(var(--u) * .36 * var(--olcek)), 1.9cqi); }

/* İSİM SÜTUNU — panonun en çok okunan ama en kolay ihmal edilen yeri.
   Önce soluk renk + normal kalınlıkla yazılmıştı; rakamların yanında
   silik kalıyor ve uzaktan seçilmiyordu. Kuyumcunun müşterisi önce
   "hangi kalem" diye bakar, sonra fiyata — bu yüzden ad da kalın ve
   neredeyse tam kontrastta. */
td.s-ad {
  text-align: left; font-variant-numeric: normal;
  font-weight: 600;
  letter-spacing: -.005em;
  color: color-mix(in srgb, var(--yazi) 90%, var(--zemin));
  text-overflow: ellipsis;
  /* Günün yönünü sürekli gösteren dikey bar. */
  border-left: .3em solid transparent;
  padding-left: .65em;
}
td.s-ad a { color: inherit; text-decoration: none; }
td.s-ad a:hover { color: var(--vurgu); }
tr.arti td.s-ad { border-left-color: var(--yukari); }
tr.eksi td.s-ad { border-left-color: var(--asagi); }

td.s-fiyat {
  font-weight: 700; letter-spacing: -.01em;
  padding-left: .25em;        /* yön oku sağda yer istiyor, solu kısıyoruz */
}
td[data-deger="satis"] { color: var(--yazi); }
td[data-deger="alis"]  { color: color-mix(in srgb, var(--yazi) 72%, var(--zemin)); }

td.s-ek   { color: var(--yazi-sonuk); }
td.s-fark { font-weight: 700; }

.fark.arti  { color: var(--yukari); }
.fark.eksi  { color: var(--asagi); }
.fark.sifir { color: var(--yazi-sonuk); }

/* Gün içi düşük/yüksek yalnızca GENİŞ kartta görünür. 1920 ekranda üç sütun
   demek 630 px kart demek; dört ondalıklı parite oraya altı sayı sığdıramaz,
   rakamlar kırpılır. 2560 ve üstü ekranlarda (kuyumcuların taktığı büyük
   panolar) kart 850 px'i geçiyor ve iki sütun rahatça açılıyor. */
@container (max-width: 780px) {
  .tablo th.s-ek, .tablo td.s-ek { display: none; }
}

/* ---------- Değişim yanıp sönmesi ---------- */
@keyframes parlaYukari {
  0%   { background: var(--yukari-fon); }
  100% { background: transparent; }
}
@keyframes parlaAsagi {
  0%   { background: var(--asagi-fon); }
  100% { background: transparent; }
}
td.yukari, .tek-blok.yukari { animation: parlaYukari 1.2s ease-out; }
td.asagi,  .tek-blok.asagi  { animation: parlaAsagi  1.2s ease-out; }

/* Yön oku — sayının yanında küçük üçgen, son hareketin yönü */
/* Yön oku hücrede YER KAPLAR (yaklaşık 0,55em); punto tavanları bunu da
   hesaba katıyor, yoksa dolu bir sayı oku ittirip kırpılıyordu. */
td.s-fiyat::after {
  content: ''; display: inline-block; width: 0; height: 0;
  margin-left: .28em; vertical-align: middle;
  border-left: .26em solid transparent; border-right: .26em solid transparent;
  opacity: 0; transition: opacity .3s;
}
td.s-fiyat.yon-yukari::after { border-bottom: .34em solid var(--yukari); opacity: 1; }
td.s-fiyat.yon-asagi::after  { border-top:    .34em solid var(--asagi);  opacity: 1; }

/* ---------- Tek enstrüman ---------- */
.tek {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: calc(1.4vh + 8px);
  padding: calc(2vh + 10px) calc(2vw + 10px);
  text-align: center;
}
.tek-ad {
  font-size: calc(2.2vh + 1vw + 10px); font-weight: 700;
  display: flex; align-items: baseline; justify-content: center; gap: .6em;
  flex-wrap: wrap;
}
.tek-kod {
  font-size: .42em; letter-spacing: .12em; color: var(--yazi-sonuk);
  border: 1px solid var(--cizgi); border-radius: 6px; padding: .2em .6em;
}
.tek-fiyatlar {
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(1vw + 8px);
}
.tek-blok {
  background: var(--panel); border: 1px solid var(--cizgi);
  border-radius: 14px;
  padding: calc(1.8vh + 8px) calc(1vw + 8px);
}
.tek-etiket {
  display: block; font-size: calc(.85vh + .35vw + 6px);
  text-transform: uppercase; letter-spacing: .1em; color: var(--yazi-sonuk);
  margin-bottom: .4em;
}
.tek-deger {
  display: block;
  font-size: calc(5.5vh + 2.8vw + 10px); font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1;
}
.tek-blok[data-alan="satis"] .tek-deger { color: var(--vurgu); }

.tek-fark {
  font-size: calc(1.8vh + .8vw + 8px); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tek-fark::before { content: ''; }
.tek-fark.arti::before { content: '▲ '; }
.tek-fark.eksi::before { content: '▼ '; }

.tek-alt {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: calc(.6vw + 6px);
}
.tek-alt > div {
  background: var(--panel); border: 1px solid var(--cizgi);
  border-radius: 11px; padding: calc(1vh + 6px) .6em;
}
.tek-alt span {
  display: block; font-size: calc(.7vh + .28vw + 5px);
  text-transform: uppercase; letter-spacing: .08em; color: var(--yazi-sonuk);
}
.tek-alt b {
  display: block; margin-top: .25em;
  font-size: calc(1.4vh + .65vw + 7px); font-variant-numeric: tabular-nums;
}

.geri {
  color: var(--yazi-sonuk); text-decoration: none;
  font-size: calc(.85vh + .32vw + 6px);
}
.geri:hover { color: var(--vurgu); }

.bos-sayfa { flex: 1; display: grid; place-content: center; text-align: center; gap: 10px; }
.bos-sayfa h1 { font-size: 18vh; margin: 0; color: var(--cizgi); line-height: 1; }

/* ---------- Tam ekran: üst çubuk gizlenir, vitrin görünümü ---------- */
body.sade .ust { display: none; }

/* ==========================================================================
   BELGE SAYFALARI — ürün, grup ve içerik sayfaları.

   Bunlar TV'den değil elden okunuyor; ölçü birimi ekran yüksekliği değil
   okuma satırı. Satır uzunluğu ch ile sınırlanıyor: 75 karakteri geçen
   satırda göz satır başını kaybeder.
   ========================================================================== */
.belge-icerik {
  max-width: 78ch;
  margin: 0 auto;
  padding: clamp(18px, 4vw, 42px) clamp(16px, 4vw, 28px) 10px;
  font-size: clamp(16px, 1.05rem, 19px);
  line-height: 1.65;
}
.yazi { border-top: 1px solid var(--cizgi); background: var(--zemin); }

.kirinti {
  display: flex; gap: .5em; align-items: center;
  font-size: .85em; color: var(--yazi-sonuk); margin-bottom: 1em;
}
.kirinti a { color: var(--yazi-sonuk); text-decoration: none; }
.kirinti a:hover { color: var(--vurgu); }

.belge-icerik h1 {
  margin: 0 0 .45em;
  font-size: clamp(1.7rem, 4.2vw, 2.4rem);
  line-height: 1.15; letter-spacing: -.02em;
}
.belge-icerik .ozet {
  margin: 0 0 1.6em;
  font-size: 1.08em;
  color: color-mix(in srgb, var(--yazi) 88%, var(--zemin));
}
.metin { margin: 2.1em 0; }
.metin h2, .sss h2, .ilgili h2, .belge-icerik h2 {
  margin: 0 0 .5em;
  font-size: clamp(1.15rem, 2.6vw, 1.42rem);
  line-height: 1.25; letter-spacing: -.01em;
}
.metin p { margin: 0; color: color-mix(in srgb, var(--yazi) 86%, var(--zemin)); }
.kucuk-not {
  font-size: .88em; color: var(--yazi-sonuk);
  border-left: 3px solid var(--cizgi); padding-left: 1em; margin: 1.4em 0;
}
.bos-uyari {
  background: var(--panel); border: 1px solid var(--cizgi); border-radius: 10px;
  padding: 1.2em; color: var(--yazi-sonuk); margin: 1.5em 0;
}

/* Belge sayfalarındaki canlı tablo — panoyla aynı hücre işaretlemesi
   (istemci ikisini ayırt etmeden günceller), ama ölçüler metne göre. */
.canli-tablo {
  margin: 1.5em 0 2em; overflow-x: auto;
  background: var(--panel); border: 1px solid var(--cizgi); border-radius: 12px;
}
.btablo { table-layout: auto; height: auto; min-width: 100%; }
.btablo th {
  font-size: .72em; padding: .85em .7em; white-space: nowrap;
  background: var(--panel-2);
}
.btablo td { font-size: 1.02em; padding: .8em .7em; white-space: nowrap; }
.btablo td.s-fiyat { font-size: 1.15em; }
.btablo td.s-ad {
  font-size: .95em; font-weight: 600;
  color: color-mix(in srgb, var(--yazi) 90%, var(--zemin));
}
.btablo .s-ad, .btablo .s-fiyat, .btablo .s-fark, .btablo .s-ek { width: auto; }
.btablo td.s-fiyat::after { display: none; }

/* Sıkça sorulanlar */
.sss { margin: 2.4em 0; }
.sss dl { margin: 0; }
.sss dt {
  font-weight: 600; margin-top: 1.3em;
  color: color-mix(in srgb, var(--yazi) 94%, var(--zemin));
}
.sss dd { margin: .35em 0 0; color: var(--yazi-sonuk); }

/* İlgili sayfalar */
.ilgili { margin: 2.6em 0 1em; }
.ilgili div { display: flex; flex-wrap: wrap; gap: .5em; }
.ilgili a {
  padding: .5em .95em; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--cizgi);
  color: var(--yazi); text-decoration: none; font-size: .92em;
}
.ilgili a:hover { border-color: var(--vurgu); color: var(--vurgu); }

/* ---------- Grafik: sunucuda çizilen SVG ----------
   Grafik kütüphanesi yüklemiyoruz. Çizilecek şey tek bir çizgi ve veri
   zaten sunucuda; kütüphane sayfaya kendi ağırlığından başka bir şey
   katmazdı. */
.grafik { margin: 1.5em 0; }
.grafik svg {
  width: 100%; height: clamp(150px, 26vw, 230px); display: block;
  background: var(--panel); border: 1px solid var(--cizgi); border-radius: 12px;
}
.g-cizgi {
  fill: none; stroke: var(--vurgu); stroke-width: 2.2;
  vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round;
}
.g-alan { fill: color-mix(in srgb, var(--vurgu) 14%, transparent); stroke: none; }
.grafik.yukari .g-cizgi { stroke: var(--yukari); }
.grafik.yukari .g-alan  { fill: color-mix(in srgb, var(--yukari) 14%, transparent); }
.grafik.asagi  .g-cizgi { stroke: var(--asagi); }
.grafik.asagi  .g-alan  { fill: color-mix(in srgb, var(--asagi) 14%, transparent); }
.grafik figcaption {
  display: flex; justify-content: space-between; gap: 1em;
  font-size: .82em; color: var(--yazi-sonuk); margin-top: .5em;
  font-variant-numeric: tabular-nums;
}
.grafik-bos { color: var(--yazi-sonuk); font-size: .92em; margin: 1.2em 0; }

.grafik-liste { display: grid; gap: 1.6em; margin: 1.5em 0 2.5em; }
.grafik-kart header { display: flex; align-items: baseline; gap: .7em; flex-wrap: wrap; }
.grafik-kart header a {
  font-weight: 600; color: var(--yazi); text-decoration: none; font-size: 1.05em;
}
.grafik-kart header a:hover { color: var(--vurgu); }
.grafik-kart .g-fiyat { font-variant-numeric: tabular-nums; font-weight: 700; }
.grafik-kart .fark { font-size: .9em; font-weight: 700; }

/* ---------- Hesaplama aracı ---------- */
.arac { margin: 1.6em 0 2.4em; }
.arac-giris { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1em; }
.arac-giris label {
  display: flex; flex-direction: column; gap: .4em;
  font-size: .85em; color: var(--yazi-sonuk);
  text-transform: uppercase; letter-spacing: .06em;
}
.arac-giris select, .arac-giris input {
  font: inherit; font-size: 1.05rem;
  padding: .7em .8em; border-radius: 10px;
  background: var(--panel); color: var(--yazi);
  border: 1px solid var(--cizgi);
  text-transform: none; letter-spacing: 0;
}
.arac-giris .alan { position: relative; display: flex; }
.arac-giris .alan input { flex: 1; padding-right: 4.2em; }
.arac-giris .alan b {
  position: absolute; right: .9em; top: 50%; transform: translateY(-50%);
  color: var(--yazi-sonuk); font-size: .9rem; font-weight: 500;
  text-transform: none; letter-spacing: 0; pointer-events: none;
}
.arac-sonuc { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; margin-top: 1.1em; }
.arac-sonuc > div {
  background: var(--panel); border: 1px solid var(--cizgi);
  border-radius: 12px; padding: 1em 1.1em;
}
.arac-sonuc .vurgulu { border-color: color-mix(in srgb, var(--vurgu) 45%, var(--cizgi)); }
.arac-sonuc span {
  display: block; font-size: .78em; text-transform: uppercase;
  letter-spacing: .07em; color: var(--yazi-sonuk);
}
.arac-sonuc b {
  display: block; margin-top: .3em;
  font-size: clamp(1.4rem, 4.5vw, 1.9rem); font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.arac-sonuc .vurgulu b { color: var(--vurgu); }

/* ---------- Alt bilgi ---------- */
.alt {
  border-top: 1px solid var(--cizgi); background: var(--panel);
  padding: 2em clamp(16px, 4vw, 28px) 2.4em;
}
.alt nav {
  max-width: 78ch; margin: 0 auto 1.2em;
  display: flex; flex-wrap: wrap; gap: .4em 1.2em;
}
.alt nav a { color: var(--yazi-sonuk); text-decoration: none; font-size: .92rem; }
.alt nav a:hover { color: var(--vurgu); }
.alt p {
  max-width: 78ch; margin: 0;
  margin-left: auto; margin-right: auto;
  font-size: .82rem; line-height: 1.6; color: var(--yazi-sonuk);
}

@media (max-width: 620px) {
  .arac-giris, .arac-sonuc { grid-template-columns: 1fr; }
}

/* İSİM KISALTMA — kırpılan ad bilgi kaybıdır.
   "Gremse Altın (Eski)" ile "(Yeni)" dar sütunda üç noktaya düşünce ikisi
   birbirinden ayırt edilemez hâle geliyordu; kuyumcu ekranında bu kabul
   edilemez. Geniş kartta tam ad, dar kartta katalogdaki kısa ad
   ("Gremse Eski", "AUD / TL") gösteriliyor — ikisi de eksiksiz bilgi. */
.ad-kisa { display: none; }
@container (max-width: 620px) {
  .ad-uzun { display: none; }
  .ad-kisa { display: inline; }
}

/* Kart daraldıkça ek sütunlar kapanıyor ve kalan sütunlar genişliyor;
   punto tavanları da o yeni genişliklere göre yeniden hesaplanıyor.
   Üç kademe var, her biri bir öncekinin üstüne biniyor. */

/* Düşük/Yüksek kapandıktan sonra (kart < 780px) kalan dört sütun genişler. */
@container (max-width: 780px) {
  .s-ad    { width: 35%; }
  .s-fiyat { width: 25%; }
  .s-fark  { width: 15%; }

  .tablo td { font-size: min(calc(var(--u) * .58 * var(--olcek)), 3.9cqi); }
  td.s-ad   { font-size: min(calc(var(--u) * .50 * var(--olcek)), 2.5cqi); }
  td.s-fark { font-size: min(calc(var(--u) * .44 * var(--olcek)), 3.1cqi); }
  .tablo th { font-size: min(calc(var(--u) * .36 * var(--olcek)), 2.5cqi); }
}

/* Kısa adlara geçildiği an (kart < 620px) isim sütunu çok daha az yer
   istiyor, o yüzden isim puntosunun tavanı yükseliyor. */
@container (max-width: 620px) {
  td.s-ad { font-size: min(calc(var(--u) * .52 * var(--olcek)), 3.6cqi); }
}

/* Telefonda sınır DİKEY değil YATAY olur: 375 px'e dört sütun giriyor ve
   sekiz haneli bir fiyat TV puntosuyla hücreye sığmıyor. Rakam sütunları
   genişliyor, punto hücreye sığacak orana iniyor — kırpılmış rakam,
   küçük rakamdan çok daha kötü. Büyütmek isteyen A+ düğmesini kullanır. */
@container (max-width: 480px) {
  .s-ad    { width: 30%; }
  .s-fiyat { width: 26%; }
  .s-fark  { width: 18%; }

  /* Telefonda yön oku kalkıyor: kapladığı ~0,55em, o dar hücrede rakamın
     puntosundan daha değerli. Yön bilgisi zaten hem yanıp sönen zeminde
     hem Değişim sütununda hem de satırın solundaki barda var. */
  td.s-fiyat::after { display: none; }

  .tablo td { font-size: min(calc(var(--u) * .50 * var(--olcek)), 4.6cqi);
              padding: 0 .3em; }
  td.s-ad   { font-size: min(calc(var(--u) * .46 * var(--olcek)), 3.4cqi);
              padding-left: .45em; }
  td.s-fark { font-size: min(calc(var(--u) * .40 * var(--olcek)), 3.7cqi); }
  .tablo th { padding: .3em .3em; letter-spacing: .03em;
               font-size: min(calc(var(--u) * .36 * var(--olcek)), 3cqi); }
}

/* ---------- Dar ekran (telefon / dikey tablet) ----------
   Menü telefonda GİZLENMEZ: sitenin tek gezinme aracı o. Yer açmak için
   üst çubuk iki satıra bölünüyor — marka + menü üstte, göstergeler ve
   düğmeler altta. */
@media (max-width: 720px) {
  .ust { flex-wrap: wrap; row-gap: 6px; gap: 8px; }
  .ust-sol, .ust-sag { width: 100%; }
  .ust-sag { justify-content: space-between; }
  .menu { flex: 1; }
  .menu a { flex: 1; text-align: center; padding: .4em .5em; }
  .marka { font-size: calc(1vh + 1.2vw + 9px); }
  .menu a, .durum, .saat { font-size: calc(.6vh + 1.5vw + 6px); }
  .dugme { width: calc(2vh + 2.2vw + 16px); height: calc(2vh + 2.2vw + 16px);
           font-size: calc(.6vh + 1.4vw + 6px); }
  .tek-fiyatlar { grid-template-columns: 1fr; }
}

/* ---------- Tek enstrüman: gün sonu arşivi ----------
   Yalnızca kayıt biriktikçe görünür; kurulumun ilk gününde bu blok yoktur. */
.tek-gecmis {
  width: min(900px, 100%); margin: 0 auto;
  background: var(--panel); border: 1px solid var(--cizgi);
  border-radius: 12px; overflow: hidden;
}
.tek-gecmis h2 {
  margin: 0; padding: .5em .9em;
  font-size: calc(.8vh + .3vw + 6px);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--vurgu); background: var(--panel-2);
  border-bottom: 1px solid var(--cizgi);
}
.tek-gecmis .tablo { height: auto; table-layout: auto; }
.tek-gecmis td, .tek-gecmis th {
  font-size: calc(.8vh + .3vw + 6px);
  padding: .45em .8em;
}
.tek-gecmis td { font-weight: 600; }
.tek-gecmis td.s-ad { border-left: 0; font-weight: 400; }

/* Belge sayfasında dar ekran: yedi sütun yan yana sığmıyor ve tek satırlık
   bir tabloya yatay kaydırma çubuğu koymak özensiz görünüyor. İkincil
   sütunlar kapanıyor; asıl bilgi (alış, satış, değişim) kalıyor. */
@media (max-width: 760px) {
  .btablo th.s-ek, .btablo td.s-ek { display: none; }
}

/* Belge sayfasında TV düğmelerinin karşılığı yok: düzen, yazı boyutu ve
   tam ekran yalnızca panoyu etkiliyor. Ölü düğme göstermiyoruz. */
body.sayfa-enstruman #yon,  body.sayfa-enstruman #buyut,  body.sayfa-enstruman #tamekran,
body.sayfa-grup      #yon,  body.sayfa-grup      #buyut,  body.sayfa-grup      #tamekran,
body.sayfa-icerik    #yon,  body.sayfa-icerik    #buyut,  body.sayfa-icerik    #tamekran,
body.sayfa-404       #yon,  body.sayfa-404       #buyut,  body.sayfa-404       #tamekran {
  display: none;
}