/* Altin.Gold tasarım sistemi — Claude Design projesinden alınan token'lar.
   Tailwind CDN ile birlikte çalışır; renkler CSS değişkenleri üzerinden yönetilir,
   koyu mod html.dark sınıfıyla açılır (tailwind.config darkMode:'class'). */

/* ==========================================================================
   FONTLAR — yerel (wwwroot/fonts), Google Fonts CDN'e bağımlılık YOK.
   • DM Sans Variable      → tüm yazılar
   • Roboto Mono Variable  → sayılar (.num)
   Her ikisi de değişken font: 100..1000 / 100..700 ağırlık aralığı tek dosyada,
   ayrı ağırlık dosyası indirilmez.

   İki alt küme (subset) tutuluyor, ikisi de gerekli:
     latin      → U+0000-00FF (ö ü ç), U+0131 (ı)
     latin-ext  → U+0100-02BA (İ ğ ş) ve U+20AD-20C0 (₺ = U+20BA)
   unicode-range sayesinde tarayıcı yalnız ihtiyaç duyduğunu indirir.

   font-display:swap → font yüklenene kadar yazı görünmez kalmaz.
   ========================================================================== */

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url('../fonts/dmsans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
                   U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                   U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url('../fonts/dmsans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
                   U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                   U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url('../fonts/robotomono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
                   U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                   U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url('../fonts/robotomono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
                   U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                   U+FEFF, U+FFFD;
}

:root {
    --accent: #FFF200;
    /* MARKA — logo/ikon renkleri moda göre YER DEĞİŞTİRİR (bkz. Views/Shared/_Logo.cshtml):
       açık modda ink zemin + sarı "A", koyu modda sarı zemin + ink "A".
       ⚠️ var(--ink) KULLANILAMAZ: koyu modda --ink beyaza döner ve sarı zeminde okunmaz. */
    --logo-bg: #0A0A0A;
    --logo-ink: #FFF200;
    --accent-soft: rgba(255, 242, 0, .16);
    --accent-ink: #1A1600;
    /* Hover zemini — açık modda accent-soft ile aynı. Koyu modda ayrı/daha yüksek
       alfa (aşağıda): .13 sarı, near-black üstünde çamurumsu kalıyordu. */
    --hover-bg: rgba(255, 242, 0, .16);
    /* Sayfa zemini ÇOK HAFİF GRİ (kullanıcı isteği 2026-09-15): beyaz kartlar (--surface) zeminden
       ayrışsın diye. #FCFCFC (üçüncü tur, kullanıcı kararı) — --surface-2 (#F5F5F5) hâlâ daha koyu, çipler/tablo başlıkları
       kartların üstünde okunmaya devam eder. Koyu mod dokunulmadı. */
    --bg: #FCFCFC;
    --surface: #FFFFFF;
    --surface-2: #F5F5F5;
    --border: #EAEAEA;
    --ink: #0A0A0A;
    --ink-2: #4B4B4B;
    --ink-3: #8A8A8A;
    /* ÜST MENÜ — pasif sekme yazısı. ⚠️ --ink-2 KULLANILMIYOR (kullanıcı geri bildirimi
       2026-09-13: "gri rengi çok kötü"): o token site geneli ikincil metin rengi, menüde
       yeterince okunaklı değil. Ayrı token olmasının sebebi menüyü koyulaştırırken gövde
       metnini olduğu gibi bırakmak. Aktif sekme --ink kullanır. */
    --nav-ink: #2A2A2A;
    /* Aktif sekme zemini — ALTTAN yukarı sönen degrade (bkz. .nav-ust.aktif).
       İki ayrı token çünkü koyu modda sarı daha düşük alfada doğru okunuyor. */
    --nav-aktif-alt: rgba(255, 242, 0, .48);
    --nav-aktif-ust: rgba(255, 242, 0, .10);
    /* Üst çubuk zemini — sekmeyle AYNI biçim, ters yön, daha açık (kullanıcı 2026-09-15:
       "arka plan biraz daha açık, active biraz daha baskın"). Ayrı çift olmasının sebebi
       ikisinin bağımsız ayarlanabilmesi; sekme sarısı çubuğun sarısından belirgin kalmalı. */
    --ust-zemin-ust: rgba(255, 242, 0, .24);
    --ust-zemin-alt: rgba(255, 242, 0, .04);

    /* ── FİYAT TABLOSU — GRİSİZ SICAK PALET ──────────────────────────────────
       ⚠️⚠️ Bu tablolarda --ink-2 / --ink-3 / --border / --surface-2 KULLANILMAZ
       (kullanıcı kararı 2026-09-13: "gri renklerden kurtulmayı aşırı istiyorum").
       Yerine markanın sarısından türetilmiş sıcak bir aile var.
       ⚠️ --accent (#FFF200) METİN OLARAK KULLANILAMAZ: beyaz üstünde kontrastı
          1,1:1, yani okunmaz. Metin için koyu altın --altin-ink kullanılır (5,4:1). */
    --altin-ink: #7A6A00;                          /* ikincil metin: etiket, birim, simge */
    /* ⚠️⚠️ ÇİZGİ SARI KALIR, NÖTRE ÇEKİLMEZ — denendi ve reddedildi (2026-09-13):
       koyu altına çevrilince kullanıcı "griye çevirince bozuldu" dedi. Sarılık marka
       tercihi. Parlama şikâyetini çözen şey ZEMİNİN BEYAZLATILMASI olmuştu
       (--bg #FCFCFC → #FFFFFF), çizginin rengi değil.
       ⚠️ Çizgi HER SATIRDA basılır; v3'te kısa süre 5'te bire seyreltilmişti,
          kullanıcı her satıra geri istedi. Artık dört tarafı kapalı ink çerçevenin
          İÇİNDE durduğu için eski "serbest sarı çizgi" parlaması doğmuyor. */
    --tablo-cizgi: rgba(255, 242, 0, .45);
    /* ⚠️⚠️ HERO PANOSUNUN ÇİZGİSİ — --tablo-cizgi ile AYNI GÖRÜNÜM, ama OPAK.
       Kullanıcı kararı 2026-09-13: "tablolardaki satır altındaki yatay çizgiler neyse
       bunlarda da öyle olsun". Doğrudan --tablo-cizgi kullanılamaz çünkü .hero-pano
       ayraçları EBEVEYN ZEMİNİ ile çiziliyor (gap:1px) ve yarı saydam bir zeminde
       boşluklardan ARKADAKİ sayfa rengi sızıyor — açık temada hücre araları SAF BEYAZ
       çıkıyordu. Buradaki color-mix, rgba(...,.45)'in --panel üstünde oluşturduğu rengi
       ÖNCEDEN birleştirir: görünüm birebir aynı, sızma imkânsız.
       ⚠️ Oran --tablo-cizgi'nin alfasıyla EŞLEŞMELİ (açık .45 / koyu .20); birini
          değiştirirsen diğerini de değiştir, yoksa hero ile tablo çizgileri ayrışır. */
    /* KOTASYON PANOSU (/metal, /doviz) — AÇIK TEMADA ARTIK KOYU DEĞİL (kullanıcı 2026-09-15:
       "siyah arka planı kaldır, açık temada"). Pano tabloyla aynı dilde: surface zemin, ink yazı,
       nötr saç teli; ürün adı sarı yerine koyu altın (--altin-ink; sarı beyazda 1,1:1 okunmaz).
       Koyu temada html.dark bu tokenları eski koyu panoya geri çevirir. */
    --hero-zemin: var(--surface);
    --hero-zemin-hover: var(--hover-bg);
    --hero-ink: var(--ink);
    --hero-dim: var(--ink-2);
    --hero-etiket: var(--altin-ink);
    --hero-cizgi: var(--border);
    --up: #00C7A5;
    --down: #FF3D7A;
    /* ⚠️ YALNIZ ACCENT ZEMİN İÇİN. --up (#00C7A5) sarı üstünde 1,9:1 — okunmaz.
       Bu ikisi #FFF200 üstünde 5,6:1 ve 6,7:1 (ölçüldü). Beyaz zeminde KULLANMA,
       orada normal --up/--down doğru olan. İki tema için de aynı: zemin daima accent. */
    --up-koyu: #0A6B58;
    --down-koyu: #A3123F;
    --panel: #101010;
    --panel-ink: #F5F5F0;
    --panel-dim: rgba(255, 255, 255, .55);
}

html.dark {
    --bg: #0A0A0A;
    --logo-bg: #FFF200;    /* marka: zemin ve harf yer değiştirir */
    --logo-ink: #0A0A0A;
    --surface: #141414;
    --surface-2: #1C1C1C;
    --border: #262626;
    --ink: #F5F5F0;
    --ink-2: #B5B5AE;
    --ink-3: #6E6E68;
    --nav-ink: #DEDED8;                   /* koyu modda menü AÇILIR, açık modda koyulaşır */
    --nav-aktif-alt: rgba(255, 242, 0, .32);
    --nav-aktif-ust: rgba(255, 242, 0, .06);
    --ust-zemin-ust: rgba(255, 242, 0, .15);
    --ust-zemin-alt: rgba(255, 242, 0, .03);
    /* Fiyat tablosu: koyu zeminde altın AÇILIR, alfalar düşer (sarı near-black üstünde
       hızla baskınlaşıyor — açık moddaki .42 burada çizgiyi neon şeride çeviriyordu). */
    --altin-ink: #D8C84A;
    --tablo-cizgi: rgba(255, 242, 0, .20);
    --hero-zemin: var(--panel);
    --hero-zemin-hover: #181818;
    --hero-ink: var(--panel-ink);
    --hero-dim: var(--panel-dim);
    --hero-etiket: var(--accent);      /* koyu panoda sarı okunur (~17:1) */
    --hero-cizgi: color-mix(in srgb, var(--accent) 20%, var(--panel));   /* bkz. :root notu */
    --accent-soft: rgba(255, 242, 0, .13);
    --hover-bg: rgba(255, 242, 0, .24);   /* koyu modda hover zemini belirgin sarı */
    --up: #2DEEC0;
    --down: #FF6694;
    /* ⚠️ KOYU MODDA TAM SİYAH (kullanıcı kararı 2026-09-13). Sayfa zemini #0A0A0A;
       #1A1A1A iken pano sayfadan AÇIK kalıyor ve havada duran gri bir kutu gibi
       görünüyordu. #000 ile pano sayfadan KOYU olur — 2px sarı çerçeveyle birlikte
       oyulmuş bir kotasyon panosu etkisi verir. Açık temada #101010 KALIR: orada
       zemin beyaz, pano zaten en koyu öğe. */
    --panel: #000000;
    --panel-ink: #F5F5F0;
    --panel-dim: rgba(255, 255, 255, .5);
}

html, body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'DM Sans', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Masaüstünde rem tabanı (yazı + boşluk ölçeği) — kullanıcı onayıyla 17px.
   ⚠️ Kök SABİT tutulur: fontlar body + açık boyutlarla büyütülür, boşluk kaymaz. */
@media (min-width: 1024px) {
    html { font-size: 17px; }
}

/* Varsayılan/kalıtılan metin (boyut sınıfı olmayanlar: tablo fiyatları, paragraf vb.).
   Kademeli büyütme — mobil 16→18, masaüstü 17→19. html kökü sabit kaldığı için
   yalnız yazı büyür, rem tabanlı boşluk/yerleşim değişmez. */
body { font-size: 18px; }
@media (min-width: 1024px) { body { font-size: 19px; } }

/* ── ALT BİLGİ HER ZAMAN EKRANIN EN ALTINDA ──────────────────────────────────
   İçeriği kısa sayfalarda (404, boş sonuç, kısa detay) alt bilgi ekranın ortasında
   asılı kalıyor, altında boş zemin görünüyordu.

   ⚠️ position:fixed DEĞİL: alt bilgi yüksek (4 bağlantı sütunu + dev marka yazısı);
      sabitlenseydi uzun sayfalarda içeriğin üstünü kalıcı olarak kapatırdı. Doğru
      desen flex — <main> artan boşluğu yiyor, alt bilgi AKIŞTA kalıyor.
   ⚠️ İki min-height BİLEREK: 100dvh'yi desteklemeyen tarayıcı ilkinde kalır. dvh
      şart çünkü mobilde adres çubuğu gizlenip açıldıkça 100vh fazla ölçüyor ve
      kısa sayfa gereksiz yere kaydırılabilir hale geliyor.
   ⚠️ `flex: 1 0 auto` — `flex: 1` yazılsaydı flex-basis 0 olurdu ve main'in
      yüksekliği içeriğinden bağımsız hesaplanırdı (uzun sayfalarda taşma).
   ⚠️ #mobil-menu position:fixed olduğu için akıştan çıkar, flex satırını etkilemez;
      #top-nav ise sticky flex item olarak çalışmaya devam eder (doğrulandı). */
body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

body > main { flex: 1 0 auto; }
body > footer { flex: none; }

/* ⚠️ İÇERİK GENİŞLİĞİ 970 px, YAN BOŞLUK BUNUN DIŞINDA (kullanıcı 2026-09-16).
   Kapsayıcılar Tailwind `px-5 sm:px-6` taşıyor; max-width 970 iken bu dolgu içeriden yiyor ve
   gerçek içerik 930 px'e (mobilde 922) düşüyordu. Artık sınır dolgu kadar genişletiliyor →
   kart ve tablo kenarları tam 970 px, sayfanın toplam genişliği 1018 px oluyor.
   ⚠️ --sayfa-pay, view'lardaki px-5 / sm:px-6 ile AYNI olmalı; biri değişirse diğeri de değişir. */
/* ⚠️ REM tabanlı: Tailwind px-5 = 1.25rem, sm:px-6 = 1.5rem. Piksel yazılırsa masaüstünde
   TUTMAZ — orada kök 17px olduğu için px-6 gerçekte 25,5px eder ve içerik 970 çıkmaz (ölçüldü). */
:root { --sayfa-pay: 1.25rem; }

@media (min-width: 640px) { :root { --sayfa-pay: 1.5rem; } }

.max-w-page { max-width: calc(970px + var(--sayfa-pay) * 2); }

/* Fiyat şeridi kapsayıcısı mobilde px-3 kullanıyor; orada içerik biraz daha geniş kalır, sorun değil. */

.surface { background: var(--surface); border: 1px solid var(--border); }
.surface-2 { background: var(--surface-2); border: 1px solid var(--border); }
.border-app { border-color: var(--border); }

.text-ink { color: var(--ink); }
.text-ink-2 { color: var(--ink-2); }
.text-ink-3 { color: var(--ink-3); }
.bg-app { background: var(--bg); }
.bg-surface { background: var(--surface); }
.bg-surface-2 { background: var(--surface-2); }

.up { color: var(--up); }
.down { color: var(--down); }

a { color: var(--ink); text-decoration: none; }
/* Altçizgi gösteren linklerde çizgi marka sarısı olur (metin okunur kalır). */
a:hover { color: var(--ink-2); text-decoration-color: var(--accent); }

/* Sayılar: Roboto Mono Variable. Sabit genişlikli rakam (tabular-nums) sayesinde
   fiyat sütunları hizada kalır ve canlı güncellemede sayı zıplamaz. */
.num {
    font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    letter-spacing: -0.01em;
}

.scroll-thin::-webkit-scrollbar { height: 8px; width: 8px; }
.scroll-thin::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }

.dotted {
    background-image: radial-gradient(var(--border) 1px, transparent 1px);
    background-size: 14px 14px;
}

.route-enter { animation: fadeUp 280ms cubic-bezier(.22, .61, .36, 1); }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

*:focus { outline: none; }
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* Tablo/liste satırı hover — gri yerine marka sarısı tonu. */
.row-hover:hover { background: var(--hover-bg); }

/* Header düğmeleri (tema, menü) hover'da sarı kenarlık — inline border rengini
   ezmek için !important gerekir (kenarlık inline stil ile veriliyor). */
#tema-dugmesi:hover, #menu-dugmesi:hover { border-color: var(--accent) !important; }

/* Aktif OLMAYAN menü sekmeleri hover'da sarı zemin + yazı tam kontrasta çıkar.
   Sınıf yalnız pasif sekmelere eklenir (aktif olan sarıya dönmez).
   ⚠️ !important artık GEREKMİYOR: renkler satır içi stilden CSS'e taşındı. */
.nav-sekme:hover { background: var(--hover-bg); color: var(--ink); }

/* Metin/aksiyon linkleri hover'da sarı zemin — altçizgili linkler (footer + tablo
   isimleri) ve .link-vurgu işaretli linkler (breadcrumb + "→" aksiyon linkleri).
   Menü sekmeleri (.nav-sekme), logo ve hero kartları bu kümede DEĞİL. */
a[class~="hover:underline"]:hover,
.link-vurgu:hover { background: var(--hover-bg); border-radius: 4px; }

@media (max-width: 640px) {
    button, a { -webkit-tap-highlight-color: transparent; }
}

/* Hareket azaltma tercihine saygı. */
@media (prefers-reduced-motion: reduce) {
    .route-enter { animation: none; }
}

/* ---------------------------------------------------------------------------
   CANLI FİYAT — değişim vurgusu ve bağlantı rozeti
   Değer değiştiğinde arka plan + metin rengiyle parlama. ⚠️ Eskiden %28 tint
   ANINDA sönüyordu → "şimşek gibi çakıp kayboluyor" (kullanıcı geri bildirimi).
   Şimdi: güçlü tint (%50) başta ~0,7 sn TUTULUR, sonra 1,5 sn boyunca sönerek
   kaybolur; metin de kısa süre yön rengine döner. Fark net görülür.
--------------------------------------------------------------------------- */
@keyframes fiyat-up {
    0%, 45% { background: color-mix(in srgb, var(--up) 50%, transparent); }
    100%    { background: transparent; }
}
@keyframes fiyat-down {
    0%, 45% { background: color-mix(in srgb, var(--down) 50%, transparent); }
    100%    { background: transparent; }
}

.flash-up   { animation: fiyat-up   1.5s ease-out; border-radius: 4px; }
.flash-down { animation: fiyat-down 1.5s ease-out; border-radius: 4px; }

/* Hareket azaltma tercihi olan kullanıcıda parlama yapılmaz — değer yine güncellenir. */
@media (prefers-reduced-motion: reduce) {
    .flash-up, .flash-down { animation: none; }
}

/* Bağlantı rozeti: nokta + metin. Akış açıkken nokta nabız gibi atar. */
.canli-rozet { display: inline-flex; align-items: center; gap: .375rem; font-size: 12px; }
.canli-rozet .nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }

[data-canli-durum="acik"]  .nokta { background: var(--up); animation: nabiz 2s ease-in-out infinite; }
[data-canli-durum="kopuk"] .nokta { background: var(--ink-3); }

@keyframes nabiz { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { [data-canli-durum="acik"] .nokta { animation: none; } }
/* ── ALT BİLGİ ZEMİNİ ────────────────────────────────────────────────────────
   Sarı ince dikey çizgiler + ÜSTTEN AŞAĞI gradient. Zemin TAM GENİŞLİKTE
   (footer elemanında), içerik max-w-page ile 970px'te kalır.
   ⚠️ Üstteki katman --bg ile ÖRTER, sonra saydamlaşır: desen footer.ın üst %58.inde
      HİÇ görünmez, aşağı indikçe yumuşakça belirir ve ancak en altta tam güce ulaşır.
      ⚠️ Geçiş %68.te başlar: ÖLÇÜLDÜ — bağlantı sütunları %64,3.te bitiyor, dev marka
      yazısı %73.te başlıyor; yani renk tam ikisinin ARASINDAKİ boşlukta doğuyor
      (kullanıcı kararı: "çok yüksekten değil"). Sütun/marka yerleşimi değişirse bu
      yüzde de yeniden ölçülmeli —
      yani deseni yalnız ALT BÖLÜM taşır
      (kullanıcı kararı: "geçiş daha aşağıdan başlasın, tamamını kapsamasın").
      Bu sayede footer.ın üstünde AYRAÇ ÇİZGİSİNE de gerek kalmaz, geçiş yumuşaktır.
   ⚠️ Alfa temaya göre AYRI: sarı beyaz üstünde zayıf, near-black üstünde güçlü
      görünür. Tek değer kullanılsaydı biri kaybolur, diğeri bağırırdı.
      Açık tema %44, koyu tema %20 (baskınlık kullanıcı isteğiyle düşürüldü).
   ⚠️⚠️ ÇİZGİLER YUMUŞAK KENARLI, SERT 1px DEĞİL. İlk sürüm `renk 0 1px` ile sert
      çizgi çiziyordu ve UCUZ görünüyordu: 1px çizgi kesirli cihaz piksel oranına
      (1.25x, 1.5x, 1.75x) oturmaz, tarayıcı kimini 1 kimini 2 piksele yuvarlar —
      çizgiler eşit kalınlıkta çıkmaz ve kaydırınca titrer (moiré). Şimdi her çizgi
      0,6px rampayla açılıp kapanıyor; alt piksel yumuşatma devreye giriyor, her DPR.de
      eşit görünüyor. Çizgi yapısı: 0,6px rampa + 1,6px düz gövde + 0,6px rampa =
      görünen kalınlık ~2,8px, 8px periyotta (gövde varken kalınlık ayarlanabilir;
      rampasız tek nokta bırakılsaydı yine ince ve titrek olurdu).
   ⚠️⚠️ TEK FREKANS, TEK ALFA — her çizgi birebir aynı kalınlıkta (kullanıcı kararı).
      Bir ara 8px ince + 29px vurgu diye İKİ katman denendi; dokuyu zenginleştiriyordu
      ama iki desen yer yer çakışıp o çizgileri KALIN gösteriyordu. Kalınlık eşitliği
      istendiği için tek katmana dönüldü. Katman EKLENİRSE bu sorun geri gelir. */
.footer-desen {
    background-image:
        /* 1) üstten aşağı geçiş — YUMUŞATILMIŞ (eased), doğrusal DEĞİL.
              Doğrusal iki duraklı rampa (bg 58% → transparent 78%) denendi: alfa
              düzgün artsa da GÖZ iki uçtaki kırılma noktasını "kenar" olarak görüyor
              ve kalın çizgilerle birlikte bant gibi duruyordu. Araya ease eğrisini
              izleyen duraklar konunca kırılma noktası kalmıyor, geçiş görünmez oluyor. */
        linear-gradient(to bottom,
            var(--bg) 0,
            var(--bg) 68%,
            color-mix(in srgb, var(--bg) 94%, transparent) 74%,
            color-mix(in srgb, var(--bg) 83%, transparent) 78.5%,
            color-mix(in srgb, var(--bg) 67%, transparent) 83%,
            color-mix(in srgb, var(--bg) 48%, transparent) 87.5%,
            color-mix(in srgb, var(--bg) 28%, transparent) 92%,
            color-mix(in srgb, var(--bg) 12%, transparent) 96%,
            color-mix(in srgb, var(--bg) 3%, transparent) 98.5%,
            transparent 100%),
        /* 2) TEK frekans, TEK alfa — her çizgi birebir aynı */
        repeating-linear-gradient(90deg,
            transparent 0, transparent 2.4px,
            color-mix(in srgb, var(--accent) 44%, transparent) 3px,
            color-mix(in srgb, var(--accent) 44%, transparent) 4.6px,
            transparent 5.2px, transparent 8px);
}

html.dark .footer-desen {
    background-image:
        linear-gradient(to bottom,
            var(--bg) 0,
            var(--bg) 68%,
            color-mix(in srgb, var(--bg) 94%, transparent) 74%,
            color-mix(in srgb, var(--bg) 83%, transparent) 78.5%,
            color-mix(in srgb, var(--bg) 67%, transparent) 83%,
            color-mix(in srgb, var(--bg) 48%, transparent) 87.5%,
            color-mix(in srgb, var(--bg) 28%, transparent) 92%,
            color-mix(in srgb, var(--bg) 12%, transparent) 96%,
            color-mix(in srgb, var(--bg) 3%, transparent) 98.5%,
            transparent 100%),
        repeating-linear-gradient(90deg,
            transparent 0, transparent 2.4px,
            color-mix(in srgb, var(--accent) 20%, transparent) 3px,
            color-mix(in srgb, var(--accent) 20%, transparent) 4.6px,
            transparent 5.2px, transparent 8px);
}

/* ── DEV MARKA YAZISI ────────────────────────────────────────────────────────
   "ALTIN.GOLD" içerik kutusunu TAM DOLDURUR ve ekran küçüldükçe onunla birlikte
   küçülür.
   ⚠️ Ölçü birimi `cqw` (kapsayıcı genişliği), `vw` DEĞİL: içerik 970px'te
      sabitlenince vw büyümeye devam eder ve yazı taşardı. cqw kapsayıcıyı
      izlediği için her genişlikte oranı korur.
   ⚠️ container-type dış katmanda: bir eleman KENDİ cqw'sini kullanamaz (döngü),
      bu yüzden ölçüler iç katmanda.
   ⚠️ 19.75cqw ölçümle bulundu: tracking-tight (-0,025em) ile "ALTIN.GOLD" metni
      5,064em genişlikte → 1 / 5,064 ≈ %19,75.
   ⚠️⚠️ HARF ARALIĞI DEĞİŞİRSE BU SAYI DA DEĞİŞMELİ. Ölçülen em genişlikleri:
      tracking-tighter (-0,05em) → 4,814em → 20.7cqw
      tracking-tight  (-0,025em) → 5,064em → 19.75cqw   ← şimdiki
      tracking-normal (0)        → 5,314em → 18.8cqw
      Yanlış eşleşme metni ya taşırır (%110 ölçüldü) ya da boşluk bırakır.
   ⚠️⚠️ ÖLÇERKEN TUZAK: span `display:block` olduğu için getBoundingClientRect()
      METNİN değil KUTUNUN genişliğini verir ve HER ZAMAN %100 çıkar. Gerçek metin
      genişliği `document.createRange() + selectNodeContents` ile ölçülmeli — ilk
      hesap bu yüzden yanlış çıktı ve yazı %90 doldurdu.
   ⚠️ Yükseklik 14.5cqw — font boyutunun ~0,734.ü. Yalnız ince bir pay kırpılır.
      %80 kırpma denendi ve kullanıcı "bu kadar alta gömülü olmasın" dedi; harflerin
      altı telif satırına gömülü görünüyordu. DÜŞÜRMEK kırpmayı artırır.
      ⚠️ Font boyutu değişirse bu da aynı oranda (×0,734) değişmeli. */
.footer-marka {
    container-type: inline-size;
}

.footer-marka > div {
    height: 14.5cqw;
    overflow: hidden;
}

/* Alt bilgideki dev yazının TEK farkı boyut; biçim .marka-yazi'dan gelir. */
.footer-marka > div > span {
    font-size: 19.75cqw;
}

/* ── MARKA YAZISI — "ALTIN.GOLD" ─────────────────────────────────────────────
   ⚠️⚠️ TEK TANIM: üst menüdeki logo ile alt bilgideki dev yazı AYNI biçimi kullanır
   (kullanıcı kararı: "artık bu bizim markamız olacak"). Aralarındaki TEK fark
   font-size: logo px, alt bilgi cqw. Marka duruşu değişecekse BURASI değişir,
   iki yerde ayrı ayrı değil.
   ⚠️ transform DÜZENİ etkilemez: kaplayan kutunun yüksekliği aynı kalır, yalnız
      harfler dikeyde ezilip kayar. Alt bilgide kırpma oranı buna göre ayarlı.
   ⚠️ Birimler `em`: font-size ne olursa olsun (19px ya da 190px) oran korunur.
      px verilseydi iki yerde farklı görünürdü.
   ⚠️ display:block ŞART — inline elemanda transform uygulanmaz. Üst menüde span
      zaten flex çocuğu olduğu için bloklaşıyor, yine de açıkça veriliyor. */
.marka-yazi {
    display: block;
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: .78;
    transform: translateY(.06em) scaleY(.8);
}

/* Menü satırı — mega menüde ad + fiyat taşıyan satırlar ve vurgu kartları.
   Hover zemini --hover-bg (sarı, koyu modda daha yüksek alfa). */
.nav-satir {
    transition: background-color .12s ease;
}

.nav-satir:hover {
    background: var(--hover-bg);
}

/* ── ÜST MENÜ SEKMESİ ────────────────────────────────────────────────────────
   Aktif sayfanın ve AÇIK açılırın altında accent çizgi + sarı zemin.
   ⚠️ Çizgi ::after ile çiziliyor, border-bottom ile DEĞİL: border eleman
      yüksekliğini büyütür ve sekmeler açılırken 1px zıplardı.
   ⚠️ Açık açılır için ayrı sınıfa gerek yok — tema.js zaten butona
      aria-expanded="true" yazıyor, seçici onu okuyor.
   ⚠️⚠️ RENKLER BURADA, VIEW'DA DEĞİL: eskiden Default.cshtml satır içi `style` ile
      yazıyordu ve satır içi stil `background-image`i ezdiği için degrade kurulamıyordu
      (ayrıca .nav-sekme:hover'ı !important'a mecbur bırakıyordu). View artık yalnız
      `aktif`/`nav-sekme` sınıfını değiştiriyor. */
.nav-ust {
    position: relative;
    color: var(--nav-ink);
    background: transparent;
}

.nav-ust::after {
    content: "";
    position: absolute;
    left: .55rem;
    right: .55rem;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    opacity: 0;
    transition: opacity .15s ease;
}

/* Aktif sekme — düz zemin DEĞİL, alttan yukarı sönen degrade: zemin accent çizginin
   oturduğu kenardan doğuyor, ikisi tek parça okunuyor (çizgi "yapıştırılmış" durmuyor). */
.nav-ust.aktif,
.nav-ust[aria-expanded="true"] {
    color: var(--ink);
    background-image: linear-gradient(to top, var(--nav-aktif-alt), var(--nav-aktif-ust));
}

.nav-ust.aktif::after,
.nav-ust[aria-expanded="true"]::after {
    opacity: 1;
}

/* ÜST ÇUBUK ZEMİNİ — aktif sekme degradesinin TERSİ (kullanıcı isteği 2026-09-15).
   Sekmede sarı ALTTAN doğup yukarı söner; başlıkta ÜSTTEKİ 2px accent çizgiden doğup
   aşağı söner. Kendi token çifti (--ust-zemin-ust / --ust-zemin-alt),
   sekmeninkinden daha açık; ikisi de koyu modda ayrıca tanımlı. Alttaki yarı saydam zemin backdrop-blur için kalır; degrade onun ÜSTÜNE biner.
   ⚠️ Zemin BURADA, _Layout satır içi stilde DEĞİL: satır içi background bu kuralı ezerdi. */
#top-nav {
    background:
        linear-gradient(to bottom, var(--ust-zemin-ust), var(--ust-zemin-alt)),
        color-mix(in srgb, var(--bg) 80%, transparent);
}

/* ══ FİYAT TABLOSU — v3 "CETVEL" ═══════════════════════════════════════════════
   Ana sayfa (altın), /metal ve /doviz tabloları AYNI bileşeni kullanır.

   TASARIM KARARI (2026-09-13, v1/v2 reddedildikten sonra): tablo bir KART DEĞİL.
   Kart kabuğu, yuvarlatma ve gölge tamamen kaldırıldı — bunlar tabloyu "kutu içine
   konmuş veri" gibi gösteriyordu. Yerine matbu finans cetveli dili:
     · keskin köşe (border-radius: 0), gölge YOK, kart zemini YOK
     · tabloyu üstten ve alttan 2px INK kural çerçeveler — gazete tablosu çapası
     · başlık satırı DOLU ACCENT ŞERİT: marka rengi artık vurgu değil YAPI
     · satır başına çizgi YOK; her 5. satırda bir gruplama kuralı → göz 30 satırlık
       listede yerini kaybetmiyor ama 30 çizgilik parlama da olmuyor

   ⚠️ v1'in onaylanan tek unsuru SARI ÇİZGİ idi; burada sarı çizgi KORUNDU ama
      seyreltildi (her satırda değil, 5'te bir). v2'nin bandı ve rozetsiz sayısı
      reddedildi — bant geri gelmedi, değişim sayısı yine çıplak ama artık dolu
      accent başlık onu dengeliyor.
   ⚠️ Yedekler: docs/tablo-tasarim/

   ══ v4 — ORİJİNAL TASARIMA DÖNÜŞ (2026-09-15, kullanıcı: "orijinal tasarımdaki ile daha
   benzer bir hale getir") ═══════════════════════════════════════════════════════════
   Orijinal = Claude Design "Copy of Fonfolyo"; Razor'daki birebir dengi ürün sayfasındaki
   "Kaynaklara göre fiyatlar" tablosu (Views/Altin/Hub.cshtml). Onun dili:
     · yuvarlatılmış SURFACE kart (12px), 1px nötr çerçeve, taşma gizli
     · başlık satırı --surface-2 zeminli, 12px VERSAL, harf aralıklı, --ink-3
     · satır ayracı 1px nötr saç teli (--border); sarı yalnız HOVER zemininde
     · sayı hiyerarşisi ağırlıkla (birincil 700 / ikincil 400) — korundu
   v3'ün accent çerçevesi, dolu sarı başlığı ve sarı satır çizgileri kaldırıldı.
   ⚠️ Mobil 2×2 kart düzeni ve <table> semantiği AYNEN duruyor; yalnız renk/çerçeve değişti.
   ⚠️ .hero-pano çerçevesi tabloyla birlikte değişti (aynı dikey hizada iki blok — bkz. oradaki not). */

/* Dört tarafı kapalı ACCENT çerçeve. Üstteki dolu sarı başlık şeridiyle birleşip
   tabloyu marka rengine sarıyor — çerçeve ve başlık tek parça okunuyor.
   ⚠️ Bu 2px DOLU şerit; ince sarı hairline'ın beyazda parlama sorunu buna ait
      değil (o alfa ile seyreltilmiş çizgide çıkıyordu, burada tam doygun blok). */
.fiyat-kart {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.fiyat-tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}

/* ── başlık: dolu accent şerit ───────────────────────────────────────────────
   ⚠️ Küçük punto harf aralıklı VERSAL DEĞİL — okunur boyutta, normal yazım.
      Eski 10,5px/.15em caps "etiket" gibi duruyordu; bu sütun BAŞLIĞI. */
.fiyat-tablo thead th {
    background: var(--surface-2);
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 10px 10px;
    border: 0;
    border-bottom: 1px solid var(--border);
}

.fiyat-tablo thead th:first-child { padding-left: 14px; }
.fiyat-tablo thead th:last-child  { padding-right: 14px; }

/* ── gövde ──────────────────────────────────────────────────────────────────── */
.fiyat-tablo tbody td {
    padding: 12px 10px;
    white-space: nowrap;
}

.fiyat-tablo tbody td:first-child { padding-left: 14px; }
.fiyat-tablo tbody td:last-child  { padding-right: 14px; }

/* HER SATIRDA sarı yatay kural (kullanıcı kararı 2026-09-13). Son satırda
   basılmaz — alttaki 2px ink çerçeve zaten oradadır, ikisi üst üste binerdi. */
.fiyat-tablo tbody tr:not(:last-child) {
    border-bottom: 1px solid var(--border);
}

.fiyat-tablo tbody tr { transition: background-color .1s linear; }
.fiyat-tablo tbody tr:hover { background: var(--hover-bg); }

/* ── hücre rolleri ──────────────────────────────────────────────────────────── */
.hucre-ad > a, .hucre-ad > span { font-weight: 500; color: var(--ink); }
.hucre-ad > a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Hiyerarşi RENKLE değil AĞIRLIK ve BOYUTLA. */
.sayi-birincil { font-weight: 700; font-size: 15.5px; color: var(--ink); letter-spacing: -.015em; }
.sayi-ikincil  { font-weight: 400; font-size: 14px;   color: var(--ink); }

.simge { color: var(--ink-3); font-weight: 400; }

/* ⚠️ .kod-rozet SİLİNDİ — döviz kodu tablodan kaldırıldı (2026-09-13) ve başka
   kullanıcısı yoktu. Geri gelirse v3 sürümünden alınabilir.
   ⚠️ .kaynak-rozet DURUYOR: /metal tablosunda hâlâ Kaynak sütunu var. */

/* ── MOBİL: satır → 2×2 kart ────────────────────────────────────────────────── */
@media (max-width: 639px) {
    .fiyat-tablo thead { display: none; }

    /* ⚠️ Mobilde ÜST KENARA ayrı kalınlık VERİLMEZ: çerçevenin tamamı zaten accent,
       tek kenarı 4px yapmak simetriyi bozup kaza gibi duruyordu. */

    .fiyat-tablo, .fiyat-tablo tbody { display: block; width: 100%; }

    .fiyat-tablo tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 9px 12px;
        padding: 13px 14px;
        align-items: end;
    }

    /* ⚠️ :first-child/:last-child DE SIFIRLANMALI — masaüstündeki kenar boşluğu
       kuralları pseudo-class yüzünden düz `td` kuralından YÜKSEK özgüllükte. */
    .fiyat-tablo tbody td,
    .fiyat-tablo tbody td:first-child,
    .fiyat-tablo tbody td:last-child {
        display: block;
        padding: 0;
        min-width: 0;
    }

    .fiyat-tablo tbody td.mobil-gizle { display: none; }

    /* ⚠️ Mobilde AYRI çizgi kuralı YOK: taban kural (tr:not(:last-child)) zaten her
       kartın altına sarı çizgi koyuyor. Buraya bir de `tr + tr { border-top }`
       eklenirse kartlar arasında ÇİFT çizgi çıkar. */

    .fiyat-tablo tbody td.hucre-ad      { grid-area: 1 / 1 / 2 / 2; }
    /* Zaman hücresi mobilde kartın SAĞ ÜST köşesine oturur — "Günlük" sütunu
       kaldırıldığında boşalan yuva burasıydı. */
    .fiyat-tablo tbody td.hucre-zaman { grid-area: 1 / 2 / 2 / 3; justify-self: end; }
    .fiyat-tablo tbody td.hucre-sol     { grid-area: 2 / 1 / 3 / 2; }
    .fiyat-tablo tbody td.hucre-sag     { grid-area: 2 / 2 / 3 / 3; justify-self: end; text-align: right; }

    .fiyat-tablo tbody td.hucre-sol::before,
    .fiyat-tablo tbody td.hucre-sag::before {
        content: attr(data-etiket);
        display: block;
        margin-bottom: 2px;
        color: var(--ink-3);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .fiyat-tablo tbody td.hucre-ad { font-size: 15px; }

    .fiyat-tablo tbody td.hucre-sol .sayi-ikincil,
    .fiyat-tablo tbody td.hucre-sag .sayi-birincil { font-size: 15.5px; }

    .fiyat-tablo tbody tr:hover { background: transparent; }
}
/* ══ HERO — "KOTASYON PANOSU" ═════════════════════════════════════════════════
   /metal ve /doviz hero'ları. Kartlar YOK: tek bir KOYU PANO, hücrelere saç teli
   çizgilerle bölünmüş.

   NEDEN KOYU (tasarım gerekçesi, 2026-09-13):
   · Sayfa baştan sona beyaz + sarı. Koyu bir kütle sayfaya gerçek bir hiyerarşi
     veriyor: önce pano okunuyor, sonra tablo.
   · ⚠️⚠️ ASIL KAZANÇ — SARI NİHAYET YAZI OLARAK KULLANILABİLİYOR. Beyaz üstünde
     #FFF200'in kontrastı 1,1:1 (okunmaz) ve bu, şimdiye kadarki her kararı kısıtladı.
     Near-black üstünde ~16:1 → birim etiketleri marka sarısıyla yazılıyor.
   · up/down (teal/pembe) beyazda soluk kalıyordu, koyu zeminde canlanıyor.
   · --panel ailesi ZATEN "her iki temada da koyu" yüzeyler için tanımlıydı (tooltip).
     Bu yüzden pano açık ve koyu temada AYNI görünür — sürdürülecek iki varyant yok.

   ⚠️ Hücre ayraçları `gap: 1px` + pano zemini ile çiziliyor, border ile DEĞİL:
      border kullanılsaydı komşu hücrelerde çift çizgi olur, köşelerde kalınlaşırdı.
   ⚠️ auto-fit: /metal 3, /doviz 6 hücre — aynı kural ikisini de akıtıyor (masaüstü 3,
      tablet 2, telefon 1 sütun), sayfa başına ayrı grid tanımı gerekmiyor.
   Yedek: docs/tablo-tasarim/hero-v1-cerceveli-kart/                              */

/* ⚠️ SABİT 3 SÜTUN, auto-fit DEĞİL. auto-fit denendi ve bozuktu: 900px'te 4 sütun
   seçip /doviz'in 6 hücresini 4+2'ye bölüyor, ikinci satırın sağında boş delik
   bırakıyordu — koyu kütle tırtıklı görünüyordu. Hücre sayıları 3 ve 6, yani ikisi de
   3'e tam bölünüyor. Ara kırılımda 2 sütun da YOK: /metal'in 3 hücresi 2+1 olurdu. */
/* ⚠️⚠️ AYRAÇLAR `gap` + EBEVEYN ZEMİNİ ile çiziliyor — zemin OPAK OLMALI.
   Yarı saydam bir renk konursa boşluklardan ARKADAKİ renk görünür: burada bir süre
   `rgba(255,255,255,.09)` vardı ve açık temada arka beyaz sayfa olduğu için hücre
   araları SAF BEYAZ çiziliyordu (koyu temada sorun görünmüyordu, arka #0A0A0A).
   Şimdiki değer --accent, opak — hata tekrarlayamaz.
   ⚠️ Dikey/yatay ayrım YOK: bu zemin masaüstünde DİKEY, mobilde (tek sütun) YATAY
      çizgiler üretir. Hücre içindeki tek yatay çizgi .hero-alt'ın üst kenarı. */
.hero-pano {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--hero-cizgi);   /* boşluklardan sızan renk = AYRAÇLAR (yumuşak sarı) */
    overflow: hidden;
    /* ⚠️ DIŞ ÇERÇEVE — kullanıcı kararı 2026-09-13. Değer `.fiyat-kart` ile BİREBİR
       aynı (2px solid accent, yarıçap yok): hero ile hemen altındaki tablo aynı
       kapsayıcıdan (max-w-page) geldiği için ikisi dikeyde hizalı iki çerçeveli blok
       olarak okunuyor. Birini değiştirirsen diğerini de değiştir, yoksa hizalı ama
       farklı kalınlıkta iki kenar yan yana gelir ve göze batar.
       ⚠️ Kenarlık `background`ın ÜSTÜNE basar; --panel-ayrac zemini yalnız hücre
          aralarındaki 1px boşluklardan sızmaya devam eder (ayraç işlevi bozulmaz). */
    border: 1px solid var(--border);
    border-radius: 12px;
}

@media (max-width: 599px) {
    .hero-pano { grid-template-columns: 1fr; }
}

.hero-hucre {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px 18px;
    background: var(--hero-zemin);
    color: var(--hero-ink);
    transition: background-color .12s ease;
}

.hero-hucre[href]:hover { background: var(--hero-zemin-hover); }
.hero-hucre:not([href]) { cursor: default; }

/* ⚠️⚠️ HÜCRENİN ANA ETİKETİ — HİYERARŞİDE SAYIDAN ÖNCE OKUNMALI.
   Kullanıcı bildirimi (2026-09-13): "/metal ve /doviz hero alanında isimler kalkmış,
   fiyat neyin fiyatı belli değil." İsim aslında DOM'da duruyordu; sorun görsel
   hiyerarşiydi: 12px · %55 beyaz · .16em harf aralığı = filigran gibi okunuyor,
   üstelik hemen altındaki SARI birim etiketi ("USD/Ons", "TL") gözü kapıyordu —
   yani en dikkat çeken renkli yazı, ürünü söylemeyen etiketti.
   Düzeltme: isim tam kontrast + biraz büyük + dar aralık; birim sarıdan soluk beyaza
   indi (bkz. .hero-birim). Sıra artık İSİM → SAYI + BİRİM (birim 2026-09-16'da sayının
   yanına alındı, ayrı satır değil).
   ⚠️ Harf aralığı .16em'den .06em'e indi: büyük harf + geniş aralık kısa kelimeyi
      ("EURO") harflere dağıtıp kelime siluetini yok ediyordu. */
.hero-ad {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    /* ⚠️ MARKA SARISI — HER İKİ TEMADA (kullanıcı kararı 2026-09-13). Pano her iki
       temada da koyu olduğu için sarı burada okunur (#FFF200 on #000 ≈ 17:1).
       ⚠️ BEYAZ ZEMİNE TAŞIMA: sarı beyazda 1,1:1, okunmaz — dışarıda --altin-ink var.
       ⚠️ .hero-hucre-vurgu (sarı zeminli hücre) bu rengi EZER; orada ad accent-ink.
       ⚠️ 2026-09-15: açık temada pano beyaz → --hero-etiket (açık: --altin-ink, koyu: --accent). */
    color: var(--hero-etiket);
}

/* Birincil sayı — panonun taşıyıcısı. clamp: dar hücrede küçülür, geniş hücrede büyür. */
.hero-deger {
    font-size: clamp(26px, 3.4vw, 34px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: .95;
    color: var(--hero-ink);
}
/* ⚠️⚠️ ARTIK SARI DEĞİL (2026-09-13). Sarı + koyu zemin panodaki EN dikkat çekici
   yazıydı ve söylediği şey üründen bağımsızdı ("USD/Ons", "TL") — kullanıcı hero'ya
   bakıp fiyatın neyin fiyatı olduğunu çıkaramıyordu. Birim İKİNCİL bilgidir: hangi
   metal/döviz olduğu .hero-ad'da, ölçeği zaten alttaki tabloda yazıyor.
   ⚠️ Geri almak tek satır (`color: var(--accent)`), ama o zaman .hero-ad'ı da ondan
      baskın tutacak bir şey gerekir — yoksa aynı karışıklık geri döner. */
/* Birim SAYININ YANINDA (kullanıcı 2026-09-16) — satır içi. .hero-deger'in büyük puntosunu
   ve negatif harf aralığını devralmaması için ikisi de burada sıfırlanır; hizayı taban
   çizgisi tutar (inline-block değil, düz inline). */
.hero-birim {
    margin-left: 7px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--hero-dim);
    white-space: nowrap;
}

.hero-alt {
    font-size: 13px;
    color: var(--hero-dim);
    padding-top: 10px;
    /* ⚠️ SARI — kullanıcı kararı 2026-09-13: hero içindeki yatay ve dikey çizgilerin
       hepsi accent. Dikey olanlar .hero-pano boşluklarından geliyor, bu ise hücre
       içindeki tek yatay çizgi; üçü birlikte siyah zemin üstünde sarı bir ızgara kurar.
       ⚠️ .hero-hucre-vurgu (sarı zeminli hücre) bunu EZER — sarı üstünde sarı çizgi
          görünmezdi; orada koyu bir ton kullanılıyor. */
    border-top: 1px solid var(--hero-cizgi);
}

.hero-degisim {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* Vurgulu hücre (döviz sepeti): zemin accent'e döner, yazı ink olur. */
.hero-hucre-vurgu {
    background: var(--accent);
    color: var(--accent-ink);
}
.hero-hucre-vurgu[href]:hover { background: var(--accent); }
.hero-hucre-vurgu .hero-ad     { color: var(--accent-ink); opacity: .82; }  /* .62 fazla soluktu — bkz. .hero-ad notu */
.hero-hucre-vurgu .hero-deger  { color: var(--accent-ink); }
.hero-hucre-vurgu .hero-birim  { color: var(--accent-ink); opacity: .7; }
.hero-hucre-vurgu .hero-alt    { color: var(--accent-ink); opacity: .62; border-top-color: rgba(26, 22, 0, .18); }
.hero-hucre-vurgu .hero-degisim { color: var(--accent-ink); opacity: .8; }
/* ══ ANA SAYFA YAN PANEL KARTLARI ══════════════════════════════════════════════
   Kullanıcı 2026-09-16: kart içi TABLO gibi okunsun — satır araları yatay çizgili, kart
   altındaki bağlantı ayrı bir şeritte ve BAŞLIK BİÇİMİNDE (versal, harf aralıklı).
   ⚠️ Dolgu artık kartın kendisinde DEĞİL satırlarda: çizgilerin kenardan kenara gitmesi için
      kart yatay dolgusu sıfır, her satır kendi 14 px'ini taşıyor.                        */
.yan-kart { padding: 0; overflow: hidden; }

/* TABLO KARTI BAŞLIĞI — yan panel kartlarıyla AYNI dil (kullanıcı 2026-09-16): versal, harf
   aralıklı, ALÇAK şerit. Eskiden 16 px normal yazı + 4/3 dolgu vardı, alan gereksiz yüksekti.
   ⚠️ .yan-kart-baslik ile ikizdir; biri değişirse diğeri de değişir. Tek fark yatay dolgu:
      burada tablo hücreleriyle hizalanmak için 16/20 px, yan panelde 14 px. */
.kart-baslik {
    padding: 10px 16px 6px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-3);
    border-bottom: 1px solid var(--border);
}

@media (min-width: 640px) { .kart-baslik { padding-left: 20px; padding-right: 20px; } }

.yan-kart-baslik {
    padding: 10px 14px 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-3);
    border-bottom: 1px solid var(--border);
}

.yan-kart-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    font-size: 13.5px;
}

/* Satırın ADI (Dolar · Gümüş · 5 gram altın) BAŞLIK BİÇİMİNDE ama RENKSİZ (kullanıcı 2026-09-16):
   açık temada ink, koyu temada beyaz — altın/sarı KULLANILMAZ. Sağdaki sayı tabular ve kalın kalır. */
.yan-kart-satir > span:first-child {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
}

/* İlk satırda çizgi YOK: üstünde başlık şeridinin kendi alt çizgisi var, ikisi üst üste binerdi. */
.yan-kart-satir + .yan-kart-satir { border-top: 1px solid var(--border); }

/* Alt şerit — başlıkla aynı dil, bir tık küçük; kartın kapanışı gibi okunur. */
.yan-kart-alt {
    display: block;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
    border-top: 1px solid var(--border);
    transition: background-color .12s ease;
}

.yan-kart-alt:hover { background: var(--hover-bg); color: var(--ink); }

/* ══ ANA SAYFA HERO — "ÇAPA VE TÜREVLERİ" ═════════════════════════════════════
   Asimetrik iki bölge: solda ONS (uluslararası çapa fiyat, baskın), sağda ondan
   türeyen TRY ürünleri (gram/çeyrek/yarım/tam) sıkı bir liste olarak.

   BAKIŞ AÇISI (2026-09-13): önceki denemeler hero'yu "N tane fiyatı göster" diye
   ele alıyordu — mozaik ızgara, koyu pano, sarı manşet. Bu sürüm hero'yu bir
   İLİŞKİ olarak kuruyor: ons çapadır, ötekiler ondan hesaplanır (AltinCalculator
   gerçekten böyle çalışır). Bu yüzden eşit kutular yok; bir baskın alan + bir
   türev listesi var.

   ⚠️⚠️ SARI KÜTLE YOK (kullanıcı kararı: "sarı rengi bu kadar çok kullanmak
      zorunda değilsin"). Sarı burada yalnız İKİ yerde: üstteki 3px marka kuralı ve
      saç teli ayraçlar. Dolgu/zemin olarak hiç kullanılmıyor — renk yükünü ink,
      beyaz ve up/down taşıyor.
   Yedekler: docs/tablo-tasarim/anasayfa-hero-v1-mozaik/ (mozaik)               */

/* ⚠️ DÖRT KENAR DA KAPALI: üstte 3px accent (marka işareti), diğer üçü saç teli.
   Kenarlık eklendiği için iç kenar boşlukları da açıldı — eskiden blok sayfa
   kenarına dayanıyordu ve sol/sağ dolgu sıfırdı; öyle bırakılsaydı yazı çerçeveye
   yapışırdı. Genişlik tabloyla AYNI kapsayıcıdan (max-w-page + px-5/6) geliyor,
   yani hero çerçevesi ile tablo çerçevesi dikeyde hizalı. */
/* v2 (2026-09-15, kullanıcı: "mevcut yerleşimini koruyarak stilini değiştir"): yerleşim aynı,
   dil tablo v4 + orijinal tasarımın hero mozaiği. Kabuk = yuvarlatılmış surface kart (tabloyla
   birebir: 1px --border, 12px). SOL ÇAPA BLOĞU orijinaldeki "büyük kart = vurgu rengi" gibi
   ACCENT ZEMİNLİ — marka sarısı artık ince bir üst çizgi değil, kütle; 3px accent üst kural
   bu yüzden kalktı. Sarı üstünde metin --accent-ink; up/down renkleri sarıda okunmadığı için
   (teal 1,9:1) değişim de --accent-ink, yönü ▲/▼ verir. Koyu modda sarı blok aynen kalır
   (logo gibi: sarı zemin + ink harf). Sağ liste nötr saç telli, hover sarı. */
/* v3 (2026-09-15): kart iki sıra — üstte çapa fiyatı | ons grafiği, altta dört türev. TARİHSEL.
   v5 (2026-09-16, kullanıcı: "herodan grafiği kaldır, yerine gram/çeyrek/yarım/tam gelsin,
   eski versiyona yakın olsun"): GRAFİK GİTTİ, yerleşim ilk mozaiğe döndü — SOLDA büyük çapa,
   SAĞDA dört türev 2×2. "Hero'da grafik YOK" kuralı yeniden yürürlükte.
   ⚠️ Ölçüm aynı yöne çıkmıştı: grafik ONS'un 24 saatteki 493.880 satırını topluyor, ana sayfayı
      1,2 sn'den 4,5 sn'ye çıkarıyordu (canlı). Grafik kalkınca o sorgu da kalktı. */
.hero-kart {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

/* v4 (kullanıcı 2026-09-15): iki sütun EŞİT genişlikte, hücre daha yüksek. */
.hero-capa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 210px;   /* 244 → 210 (kullanıcı 2026-09-16: hero alçalsın) */
}

/* ── sol: çapa ──────────────────────────────────────────────────────────────── */
/* v2.1 (kullanıcı: "herodan sarı arka planı kaldır"): çapa bloğu da surface; sağ listeden
   yalnız dikey saç teli ayırır. Sarı hero'da yalnız hover zemininde. */
.hero-capa-ana {
    padding: 16px 26px 14px;   /* grafik hücresiyle aynı oranda kısıldı */
    display: flex;
    flex-direction: column;
    /* Üstte etiket + fiyat, altta bilgi satırı: ikisi hücrenin iki ucuna yaslanır — sağdaki
       hücrede başlık üstte, grafik altta olduğu için iki sütun optik olarak hizalanıyor. */
    justify-content: flex-start;
    border-right: 1px solid var(--border);
    transition: background-color .12s ease;
}

/* Yatay fiyat çizgilerinin etiketi — SVG'nin sağ üstüne binen küçük sayı. SVG içine
   yazılamaz: preserveAspectRatio="none" yazıyı yatayda gerer. Dikeyde viewBox birimi
   piksele eşit olduğu için y doğrudan top olarak kullanılır (bkz. _AlanGrafik notu). */
.grafik-fiyat-etiket {
    position: absolute;
    right: 0;
    font-size: 10.5px;
    line-height: 13px;
    /* ⚠️ Yumuşak ton (kullanıcı 2026-09-15): ikincil bilgi, çizimin önüne geçmemeli. */
    color: color-mix(in srgb, var(--ink-3) 70%, transparent);
    background: var(--surface);
    padding: 0 3px;
    border-radius: 2px;
    pointer-events: none;
}

/* Grafiğin altındaki saat etiketleri de aynı yumuşaklıkta ve çizime yapışık. */
.grafik-saatler { color: color-mix(in srgb, var(--ink-3) 70%, transparent); font-size: 10.5px; margin-top: 2px; }


.hero-capa-ana:hover { background: var(--hover-bg); }

/* ⚠️ .hero-ad ile BİREBİR aynı (kullanıcı 2026-09-15: "ana sayfadaki heroda altın isimleri
   döviz/metal sayfasındaki dolar-gümüş yazısındaki stil ile aynı olsun"). Birini değiştirirsen
   üçünü de değiştir: .hero-ad · .hero-capa-etiket · .hero-turev-ad. */
.hero-capa-etiket {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hero-etiket);
}

.hero-capa-deger {
    font-size: clamp(38px, 7.4vw, 72px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: .92;
    color: var(--ink);
}

.hero-capa-simge {
    font-size: clamp(17px, 2.6vw, 26px);
    font-weight: 600;
    color: var(--ink-3);
}

/* Alış · günlük değişim · makas TEK SATIR, benzer boyut (kullanıcı 2026-09-15). Üç değer de
   17px/600; ayrım yalnız küçük versal etikette ve değişimin up/down renginde. */
/* İKİ SATIRLI ALT BİLGİ (kullanıcı 2026-09-16): üstte etiketler, altta sayılar; ALIŞ sola,
   GÜNLÜK sağa yaslı. Sayılar fiyat manşetinin bir kademe altında, belirgin büyük.
   ⚠️ Boşluk BURADA, view'da Tailwind mt-* ile DEĞİL: tailwind.css tema.css'ten sonra
      yüklendiği için .mt-4 bu margin-top:auto'yu ezip satırı dibe oturtmuyordu. */
.hero-capa-alt {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    white-space: nowrap;
}

.hero-capa-alt dd {
    margin-top: 3px;
    font-size: clamp(19px, 2.2vw, 26px);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1;
    color: var(--ink);
}

.hero-capa-alt-simge { font-size: clamp(12px, 1.3vw, 15px); font-weight: 600; color: var(--ink-3); }

.hero-capa-alt-etiket {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
}
/* ── sağ sütun: türevler 2×2 (v5) ───────────────────────────────────────────────
   Hücreler kartın sağ YARISINI paylaşıyor, yani her biri iki kat yüksek: içerik dikeyde
   ortalanır ve sayı bir kademe büyür. Dış kenarlık YOK — sol sütunun border-right'ı ve
   kartın kendi çerçevesi sınırı zaten çiziyor; iç ayraçlar nth-child ile (çift olanın
   solunda, 3-4'ün üstünde). Aynı kurallar mobilde de doğru, orada blok tam genişliğe düşer. */
.hero-turevler {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hero-turev {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 14px 20px;
    transition: background-color .12s ease;
}

.hero-turev:nth-child(even) { border-left: 1px solid var(--border); }
.hero-turev:nth-child(n+3)  { border-top: 1px solid var(--border); }
.hero-turev:hover { background: var(--hover-bg); }

/* Ad stili /metal ve /doviz panosundaki .hero-ad ile aynı aile (bkz. oradaki not). */
.hero-turev-ad {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hero-etiket);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-turev-deger {
    font-size: clamp(17px, 2vw, 23px);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
    white-space: nowrap;
}

.hero-turev-degisim { font-size: 12px; font-weight: 700; }

@media (max-width: 767px) {
    /* Telefonda tek sütun: üstte çapa, altında türevler 2×2 (iç ayraçlar aynı nth-child kuralı). */
    .hero-capa { grid-template-columns: 1fr; min-height: 0; }
    .hero-capa-ana { padding: 20px 18px 18px; border-right: 0; border-bottom: 1px solid var(--border); }
    .hero-turev { padding: 12px 18px; }
}

/* ══ SAYFA BAŞLIĞI ════════════════════════════════════════════════════════════
   Ana sayfa, /metal ve /doviz'in ortak h1 bloğu. Mevcut aile (DM Sans) kullanılıyor,
   yeni font YÜKLENMİYOR — ağırlık ve harf aralığıyla ayrışıyor.

   ⚠️ SEO: sayfada TEK h1. Ana sayfada hiç h1 YOKTU (ölçüldü: /metal ve /doviz'de 1,
      ana sayfada 0) — bu blok o boşluğu kapatıyor.
   ⚠️ Açıklama satırı --ink-2/--ink-3 gri token'larını KULLANMAZ; ink'in kendi
      opaklığıyla iniyor (grisiz palet kararı).
   ⚠️ Accent yalnız 4px'lik kısa işaret çubuğunda — hero'nun üst kuralıyla aynı dil,
      sarı kütle yok.                                                             */

.sayfa-basligi::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background: var(--accent);
    margin-bottom: 15px;
}

.sayfa-basligi h1 {
    font-size: clamp(28px, 4.2vw, 40px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.04;
    color: var(--ink);
}

/* ⚠️ Açıklama paragrafı kuralı KALDIRILDI (kullanıcı kararı 2026-09-13): üç sayfada
   da <p> silindi, kural kullanıcısız kalmıştı. Geri gelirse: mt 10px, max-width 62ch,
   14.5px, --ink @ .72 opaklık (gri token DEĞİL). */

/* ── BÖLÜM BAŞLIĞI (h2) ──────────────────────────────────────────────────────
   .sayfa-basligi'nın küçük kardeşi — aynı dil (accent işaret çubuğu + sıkı harf
   aralığı), bir kademe küçük. Tablo bölümlerinin üstünde kullanılır.

   ⚠️ Üç sayfada h2'ler birbirini tutmuyordu: ana sayfada 28px, /metal ve /doviz'de
      16px idi. Tek sınıfa alındı.
   ⚠️ Alt boşluk SINIFIN İÇİNDE (12px, kullanıcı kararı) — Tailwind mb-* ile
      verilseydi rem tabanlı olur, masaüstünde (kök 17px) 12px tutmazdı.          */

/* ⚠️ ::before accent ŞERİDİ YOK (kullanıcı kararı 2026-09-13) — .sayfa-basligi'nda
   var, burada kasten yok: h1 sayfayı açar, h2 yalnız bir bölümü ayırır. Şerit iki
   kademede de olsaydı hiyerarşi düzleşirdi. Ayrım tipografiyle. */
.bolum-basligi { margin-bottom: 8px; }

.bolum-basligi h2 {
    font-size: clamp(19px, 2.4vw, 22px);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.1;
    color: var(--ink);
}

/* Son güncelleme damgası — tabloların en sağındaki sütun.
   ⚠️ Biçimi Yardimcilar/Zaman.cs seçer: bugünse HH:mm:ss, eskiyse yyyy.MM.dd. */
.hucre-zaman {
    color: var(--ink-3);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}