/* =====================================================================
   Kuba Gold — TV Ekranı  |  Stil katmanı
   Renk/ölçü token'ları :root'ta; bileşenler yalnızca token kullanır.

   ÖLÇEKLEME FELSEFESİ (akışkan / fluid):
   Yerleşim görünen alanı DAİMA tam kaplar (letterbox/bant YOK). Yatay ölçüler
   ekran genişliğine (vw), dikey ölçüler ve YAZI boyutları ekran yüksekliğine
   (vh) bağlıdır. Böylece 16:9 ekranların hepsinde (720p/1080p/4K) görünüm
   tasarımla birebir aynı; farklı en-boy oranında kutular esner ama yazı
   karakterleri çarpılmaz (font-size tek değer → glif orantılı). Saf CSS →
   eski TV webview'lerinde de çalışır. Referans tasarım: 1920×1080.
   ===================================================================== */

:root {
  /* Renk paleti (DESIGN.md ile uyumlu) */
  --bg:            #f8f9fa;
  --surface:       #ffffff;
  --row-alt:       #f3f4f5;
  --row-divider:   #c9b06b;   /* satır ayırıcı — altınımsı; siyah istenirse: #1a1a1a */
  --primary:       #745b00;   /* koyu altın — yazı */
  --primary-cont:  #c5a021;   /* altın — başlık zeminleri */
  --gold-bright:   #eac243;
  --on-primary:    #ffffff;
  --ink:           #191c1d;   /* ana metin */
  --ink-soft:      #4d4635;
  --outline:       #d0c5af;
  --error:         #ba1a1a;
  --up:            #1b8a3f;    /* fiyat yükseldi */
  --down:          #ba1a1a;    /* fiyat düştü */

  /* Ölçüler — dikey oranlar vh (1080 tabanlı), yatay oranlar vw (1920 tabanlı) */
  --header-h:      16.3vh;     /* 176px @1080 */
  --footer-h:      8.15vh;     /*  88px @1080 */
  --radius:        0.83vw;     /*  16px @1920 */
  --radius-sm:     0.52vw;     /*  10px @1920 */

  /* Tipografi */
  --font: 'Hanken Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Görünen alanı DAİMA tam kaplar; bant/çerçeve yok. */
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Kök yerleşim: dikey bantlar (header / main / footer) ekranı boydan boya doldurur. */
#stage {
  position: relative;
  width: 100%; height: 100%;
  background: var(--bg);
  display: flex; flex-direction: column;
}

/* ============ HEADER ============ */
header {
  height: var(--header-h); flex-shrink: 0;
  display: flex; align-items: center; gap: 1.46vw;
  padding: 0 2.5vw;
  background: var(--surface);
  border-bottom: 3px solid var(--primary-cont);
}
.logo-box {
  flex-shrink: 0; width: 29.17vw; height: 13.9vh;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); overflow: hidden; background: #1a1a1a;
}
.logo-box img { width: 100%; height: 100%; object-fit: contain; }
.logo-fallback {
  color: var(--gold-bright); font-weight: 800; font-size: 5.56vh; letter-spacing: .04em;
}

/* Üstte SABİT döviz paneli — kaymaz; her değer ortalı, etiket üstte/tutar altta */
.ticker {
  flex-grow: 1; height: 8.9vh; align-self: center;
  display: flex; overflow: hidden;
  background: var(--bg);
  border: 2px solid var(--outline); border-radius: 0.63vw;
}
.ticker-track { display: flex; width: 100%; }
.tk-cell {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.2vh; padding: 0 0.28vw;
  border-right: 1px solid var(--outline);
  overflow: hidden; /* değer hiçbir koşulda komşu hücreye taşmaz */
}
.tk-cell:last-child { border-right: none; }
.tk-label {
  font-size: 1.85vh; font-weight: 600; letter-spacing: .04em; line-height: 1;
  color: var(--ink-soft); text-transform: uppercase; white-space: nowrap;
}
.tk-value {
  /* 9 haneli değerler (BIST 14.109,63 / 5 haneli HAS ALTIN) hücreye sığsın diye
     ölçüldü: 34→30→27,5px @1080. overflow:hidden zaten güvenlik ağı. */
  font-size: 2.55vh; font-weight: 800; line-height: 1.05; color: var(--primary);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  max-width: 100%;
}
@keyframes scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.datetime {
  flex-shrink: 0; text-align: right; min-width: 14.06vw;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
}
#clock { font-size: 5.19vh; font-weight: 800; color: var(--primary); line-height: 1.05; font-variant-numeric: tabular-nums; }
#date  { font-size: 2.59vh; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; }

/* ============ MAIN ============ */
main { flex-grow: 1; display: flex; gap: 1.25vw; padding: 2.22vh 1.67vw; min-height: 0; }

/* --- Sol: fiyat listesi (63%) --- */
.prices {
  flex: 0 0 63%;
  background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden;
}
.prices .thead {
  display: flex; align-items: center;
  background: var(--primary-cont); color: var(--on-primary);
  border-bottom: 4px solid var(--primary);
  font-size: 3.15vh; font-weight: 800; letter-spacing: .02em;
  padding: 1.3vh 1.77vw;
}
.thead .c-name { flex: 1; }
.thead .c-num  { width: 9.9vw; text-align: right; }

/* ALIŞ ile SATIŞ sütunları arasına ufak, garanti bir ayrım — çok haneli değerlerde
   bitişik görünmesinler. Sütun genişliği değişmez (kırpılma yok); ad sütunu esner. */
.thead .c-num:last-child,
.prow  .c-num:last-child { margin-left: 1.2vw; }

.tbody { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.prow {
  /* min-height:0 -> satırlar eşit bölünür; son satır asla kırpılmaz (13 ürün sığar) */
  flex: 1; min-height: 0; display: flex; align-items: center;
  padding: 0 1.77vw; border-bottom: 2px solid var(--row-divider);
}
.prow:last-child { border-bottom: none; }
.prow:nth-child(odd)  { background: var(--surface); }
.prow:nth-child(even) { background: var(--row-alt); }
.prow .c-name { flex: 1; font-size: 3.7vh; line-height: 1.1; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.prow .c-num  { width: 9.9vw; text-align: right; font-size: 3.89vh; line-height: 1.1; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }

/* fiyat değişim flaşı */
.flash-up   { animation: flashUp   .9s ease-out; }
.flash-down { animation: flashDown .9s ease-out; }
@keyframes flashUp   { 0% { background: rgba(27,138,63,.35); } 100% { background: transparent; } }
@keyframes flashDown { 0% { background: rgba(186,26,26,.30); } 100% { background: transparent; } }

/* --- Sağ: reklam slider (37%) --- */
.ads {
  flex: 1 1 0; min-width: 0;
  background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden;
}
.ads .ahead {
  background: var(--primary-cont); color: var(--on-primary);
  border-bottom: 4px solid var(--primary);
  font-size: 2.96vh; font-weight: 800; text-align: center; letter-spacing: .06em;
  padding: 1.3vh 0;
}
.slider { position: relative; flex: 1; }
.slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 3.7vh 2.08vw; opacity: 0; transition: opacity 1s ease-in-out;
}
.slide.active { opacity: 1; }
.slide img { max-width: 100%; max-height: 100%; object-fit: contain; }
.slide .ad-fallback { font-size: 4.81vh; font-weight: 800; color: var(--primary); text-align: center; line-height: 1.3; }

.dots { display: flex; gap: 0.63vw; justify-content: center; padding: 1.48vh 0; }
.dot { width: 1.3vh; height: 1.3vh; border-radius: 50%; background: var(--outline); }
.dot.active { background: var(--primary-cont); }

/* ============ FOOTER ============ */
footer {
  height: var(--footer-h); flex-shrink: 0;
  background: var(--primary-cont); border-top: 4px solid var(--primary);
  display: flex; align-items: center; overflow: hidden;
}
.foot-track {
  display: inline-flex; white-space: nowrap;
  animation: scroll-left 30s linear infinite;
  font-size: 3.52vh; font-weight: 700; color: var(--on-primary);
  will-change: transform;
}
.foot-track span { padding: 0 4.69vw; }

/* ============ BAĞLANTI / BAYAT VERİ UYARISI ============ */
#staleBar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  display: none; align-items: center; justify-content: center; gap: 1.15vw;
  height: 6.48vh; background: var(--error); color: #fff;
  font-size: 3.52vh; font-weight: 800; letter-spacing: .03em;
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
}
#staleBar.show { display: flex; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }

/* uyarı aktifken fiyatları soluklaştır */
body.stale .prices { opacity: .45; filter: grayscale(.3); }

/* Saat ve tarihin hemen altında (başlık sağ üst) */
#lastUpdate {
  margin-top: 0.37vh;
  font-size: 1.85vh; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* Erişilebilirlik: yalnızca ekran okuyucu */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}