/* ============================================================================
   EgeDataCenter — Tasarım Token'ları
   ---------------------------------------------------------------------------
   İki tema: AÇIK (varsayılan) + KOYU.

   AÇIK TEMA hedef dengesi   →  ~%55 beyaz · ~%33 turuncu · ~%12 siyah
     Siyah YALNIZCA yazıdır. Geniş siyah zemin yoktur. Nötrler sıcak tarafa
     kaydırılmıştır (kırık beyazlar hafif turuncuya çalar) — böylece turuncu
     sayfaya yamanmış gibi durmaz, sayfanın kendi tonu olur.

   KOYU TEMA  →  siyah ↔ beyaz yer değiştirir.
     Zemin sıcak siyah, YAZI BEYAZ, geri kalan her vurgu turuncu.
     Hiçbir yerde açık/beyaz kutu yoktur.

   ★ HAM RENK YALNIZCA BU DOSYADA BULUNUR. Diğer CSS dosyaları ve tüm HTML
     renkleri yalnızca buradaki değişkenler üzerinden alır. (PROJE.md 8.12,
     verify.js K11 denetler)
   ========================================================================== */

:root {
  /* ── Marka — logodan alındı ───────────────────────────────────────────── */
  --ember:       #FF7D4C;  /* logo turuncusu — dolgu */
  --ember-hi:    #FF9D63;  /* açık uç, degrade tepesi */
  --ember-lo:    #E85F2C;  /* koyu uç, hover */
  --ember-deep:  #C24A1E;  /* METİN turuncusu (beyaz üstünde AA 5.1:1) */

  /* Turuncu yıkamalar — sayfadaki turuncu yoğunluğunun ana kaynağı */
  --ember-tint:  #FFF3EC;  /* .section--tint zemini */
  --ember-tint-2:#FFE7DA;  /* daha derin yıkama — footer alt barı, seçili satır */
  --ember-edge:  #FFD2BC;  /* açık turuncu kenarlık */
  --ember-edge-2:#F9BFA2;  /* belirgin turuncu kenarlık */
  --ember-ink:   #FFFFFF;  /* turuncu dolgu üstündeki metin */

  /* ── Zemin — sıcak nötrler ────────────────────────────────────────────── */
  --paper:  #FFFFFF;
  --mist:   #FBF8F5;
  --haze:   #F5EEE8;
  --rule:   #EDE4DB;
  --rule-2: #DFD2C6;

  /* ── Mürekkep — sıcak siyah ───────────────────────────────────────────── */
  --ink:   #191411;
  --slate: #5C5148;
  --smoke: #8A7D72;
  --ghost: #B6A99E;

  /* ── Karbon — koyu temanın zemini; açık temada yalnızca küçük çipler ──── */
  --carbon:      #12100E;
  --carbon-2:    #1A1613;
  --carbon-3:    #241E1A;
  --carbon-rule: #322A24;
  --carbon-text: #FFFFFF;
  --carbon-mute: #C4B8AE;
  --carbon-dim:  #92857B;

  /* ── Durum — yalnızca gösterge, asla birincil buton ───────────────────── */
  --signal:     #0E8F62;
  --signal-bg:  #E6F5EF;
  --signal-edge:#B5E0CE;
  --alarm:      #C92A1E;
  --alarm-bg:   #FCEBE8;
  --alarm-edge: #F3C6BF;
  --caution:    #A75B08;
  --caution-bg: #FDF2E2;
  --caution-edge:#F0DAB0;
  --info:       #1A66C4;
  --info-bg:    #EAF1FA;
  --info-edge:  #C2D8F2;

  /* ── Bileşik yüzeyler ─────────────────────────────────────────────────── */
  --card:        #FFFFFF;
  --card-rule:   #EDE4DB;
  --card-hover:  #FFFFFF;
  --field:       #FFFFFF;
  --field-rule:  #DFD2C6;
  --field-disabled: #F5EEE8;
  --overlay:     rgba(25, 20, 17, 0.5);
  --sheet:       #FFFFFF;

  /* Footer — artık koyu DEĞİL: açık turuncu yıkama */
  --foot:      #FFF3EC;
  --foot-2:    #FFE7DA;
  --foot-rule: #FFD2BC;
  --foot-text: #191411;
  --foot-mute: #5C5148;

  /* Üst şerit (utility bar) — açık, turuncu vurgulu */
  --util:      #FFE7DA;
  --util-rule: #FFD2BC;
  --util-text: #191411;
  --util-mute: #5C5148;

  /* ── Degrade ve ışıma ─────────────────────────────────────────────────── */
  /* Metin veya ikon TAŞIYAN her turuncu dolgu bunu kullanır. Açık uç
     (#FF9D63) üzerinde beyaz metin 2,05:1 kalıyordu — okunmuyordu.
     Bu degradede en açık nokta #E85F2C: beyaz metin 3,44:1 (büyük metin AA),
     koyu uçta 4,89:1. Renk hâlâ marka turuncusu. */
  --grad-ember:  linear-gradient(135deg, #E85F2C 0%, #D8521F 45%, #B8431C 100%);
  /* YALNIZCA dekoratif — üstünde metin/ikon olmayan yüzeyler (hero blob'u). */
  --grad-ember-lite: linear-gradient(135deg, #FF9D63 0%, #FF7D4C 45%, #E85F2C 100%);
  --grad-ember-btn: linear-gradient(135deg, #E85F2C 0%, #B8431C 100%);
  --grad-ember-soft: linear-gradient(135deg, #FFF3EC 0%, #FFE7DA 100%);
  --grad-carbon: linear-gradient(165deg, #241E1A 0%, #12100E 100%);
  --grad-veil:   linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(251,248,245,1) 100%);
  --glow-ember:  radial-gradient(58% 58% at 50% 42%, rgba(255,125,76,0.26) 0%, rgba(255,125,76,0) 72%);
  --glow-warm:   radial-gradient(70% 60% at 78% 12%, rgba(255,157,99,0.32) 0%, rgba(255,157,99,0) 68%);
  --grid-line:   rgba(255, 255, 255, 0.05);
  --grid-line-lt:rgba(194, 74, 30, 0.07);
  --scrim-top:   linear-gradient(180deg, rgba(18,16,14,0) 0%, rgba(18,16,14,0.6) 100%);

  /* ── Gölge — sıcak tonlu ──────────────────────────────────────────────── */
  --sh-1: 0 1px 2px rgba(60, 35, 20, 0.07);
  --sh-2: 0 4px 16px rgba(60, 35, 20, 0.08), 0 1px 3px rgba(60, 35, 20, 0.05);
  --sh-3: 0 18px 44px rgba(60, 35, 20, 0.12), 0 4px 12px rgba(60, 35, 20, 0.06);
  --sh-4: 0 32px 80px rgba(60, 35, 20, 0.18), 0 8px 20px rgba(60, 35, 20, 0.08);
  --sh-ember: 0 10px 28px rgba(232, 95, 44, 0.32);
  --sh-ember-sm: 0 4px 14px rgba(232, 95, 44, 0.26);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --ring: 0 0 0 3px rgba(255, 125, 76, 0.34);

  /* ── Tipografi ─────────────────────────────────────────────────────────
     Display : Archivo        — iri boyutlarda karakterli
     Gövde   : IBM Plex Sans  — Türkçe desteği tam
     Veri    : IBM Plex Mono  — fiyat, spec, telemetri
     -------------------------------------------------------------------- */
  --font-display: 'Archivo', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body:    'IBM Plex Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --fs-2xs: 0.6875rem;  /* 11 */
  --fs-xs:  0.75rem;    /* 12 */
  --fs-sm:  0.875rem;   /* 14 */
  --fs-md:  1rem;       /* 16 */
  --fs-lg:  1.125rem;   /* 18 */
  --fs-xl:  1.375rem;   /* 22 */
  --fs-2xl: 1.75rem;    /* 28 */
  --fs-3xl: 2.375rem;   /* 38 */
  --fs-4xl: 3.25rem;    /* 52 */
  --fs-5xl: 4.25rem;    /* 68 */

  --lh-tight: 1.05;
  --lh-snug:  1.28;
  --lh-base:  1.65;

  --track-tight: -0.032em;
  --track-label:  0.13em;

  /* ── Boşluk — 4px skalası ─────────────────────────────────────────────── */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  /* ── Şekil ────────────────────────────────────────────────────────────── */
  --r-xs: 3px; --r-sm: 6px; --r-md: 9px; --r-lg: 14px;
  --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px;

  /* ── Hareket ──────────────────────────────────────────────────────────── */
  --ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms; --t-base: 220ms; --t-slow: 420ms; --t-cine: 900ms;

  /* ── Düzen ────────────────────────────────────────────────────────────── */
  --container:      1240px;
  --container-wide: 1440px;   /* sipariş akışı · panel · sunucu listeleri */
  --header-h: 76px;
  --ptop-h: 64px;    /* panel üst şeridi */
  --pside-w: 264px;  /* panel kenar menüsü */
  --utility-h: 38px;

  /* Yol haritası hattının dolum yüksekliği — motion.js scroll ile günceller.
     JS yoksa %100 kalır, yani hat baştan doludur (içerik hiç eksik görünmez). */
  --road-fill: 100%;
  /* Sunucu satır listesinin sütun şeması — sayfa kendi şemasını
     `style="--rows-cols: …"` ile ezebilir (VDS ve kiralık sunucu farklı). */
  --rows-cols: 1.5fr repeat(4, 1fr) 1.1fr 150px;

  color-scheme: light;
}

/* ══ KOYU TEMA ═════════════════════════════════════════════════════════════
   Siyah ↔ beyaz yer değiştirir. Yazı beyaz, vurgular turuncu, açık kutu yok.
   Kullanıcı tercihi (data-theme) her zaman kazanır; yoksa sistem tercihi.
   İki blok da aynı değerleri yazar — @media içindeki blok data-theme="light"
   ile devre dışı bırakılır.
   ======================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:  #12100E;
    --mist:   #1A1613;
    --haze:   #241E1A;
    --rule:   #322A24;
    --rule-2: #43382F;

    --ink:   #FFFFFF;
    --slate: #C4B8AE;
    --smoke: #9C8F84;
    --ghost: #71655C;

    --ember-deep:  #FF9D63;
    --ember-tint:  #241811;
    --ember-tint-2:#312016;
    --ember-edge:  #4E3122;
    --ember-edge-2:#6B4128;

    --carbon:      #0B0908;
    --carbon-2:    #141110;
    --carbon-3:    #1F1A17;
    --carbon-rule: #322A24;
    --carbon-text: #FFFFFF;
    --carbon-mute: #C4B8AE;
    --carbon-dim:  #8C8077;

    --signal:  #3DD9A0;
    --alarm:   #FF8A7A;
    --caution: #F0B357;
    --info:    #74B4F5;
    --signal-bg:  #0C2A1E; --signal-edge: #175139;
    --alarm-bg:   #2C1310; --alarm-edge:  #59251E;
    --caution-bg: #2A1D08; --caution-edge:#523716;
    --info-bg:    #0D1E31; --info-edge:   #1B3D63;

    --card:       #1A1613;
    --card-rule:  #322A24;
    --card-hover: #221C18;
    --field:      #0F0D0B;
    --field-rule: #43382F;
    --field-disabled: #17140F;
    --overlay:    rgba(4, 3, 2, 0.72);
    --sheet:      #1A1613;

    --foot:      #141110;
    --foot-2:    #0B0908;
    --foot-rule: #43382F;
    --foot-text: #FFFFFF;
    --foot-mute: #C4B8AE;

    --util:      #0B0908;
    --util-rule: #322A24;
    --util-text: #FFFFFF;
    --util-mute: #C4B8AE;

    --grad-ember-soft: linear-gradient(135deg, #241811 0%, #312016 100%);
    --grad-veil:  linear-gradient(180deg, rgba(18,16,14,0) 0%, rgba(26,22,19,1) 100%);
    --grid-line-lt: rgba(255, 157, 99, 0.08);

    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.55);
    --sh-2: 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.45);
    --sh-3: 0 18px 44px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.45);
    --sh-4: 0 32px 80px rgba(0, 0, 0, 0.7), 0 8px 20px rgba(0, 0, 0, 0.5);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:  #12100E;
  --mist:   #1A1613;
  --haze:   #241E1A;
  --rule:   #322A24;
  --rule-2: #43382F;

  --ink:   #FFFFFF;
  --slate: #C4B8AE;
  --smoke: #9C8F84;
  --ghost: #71655C;

  --ember-deep:  #FF9D63;
  --ember-tint:  #241811;
  --ember-tint-2:#312016;
  --ember-edge:  #4E3122;
  --ember-edge-2:#6B4128;

  --carbon:      #0B0908;
  --carbon-2:    #141110;
  --carbon-3:    #1F1A17;
  --carbon-rule: #322A24;
  --carbon-text: #FFFFFF;
  --carbon-mute: #C4B8AE;
  --carbon-dim:  #8C8077;

  --signal:  #3DD9A0;
  --alarm:   #FF8A7A;
  --caution: #F0B357;
  --info:    #74B4F5;

  --signal-bg:  #0C2A1E; --signal-edge: #175139;
  --alarm-bg:   #2C1310; --alarm-edge:  #59251E;
  --caution-bg: #2A1D08; --caution-edge:#523716;
  --info-bg:    #0D1E31; --info-edge:   #1B3D63;

  --card:       #1A1613;
  --card-rule:  #322A24;
  --card-hover: #221C18;
  --field:      #0F0D0B;
  --field-rule: #43382F;
  --field-disabled: #17140F;
  --overlay:    rgba(4, 3, 2, 0.72);
  --sheet:      #1A1613;

  --foot:      #141110;
  --foot-2:    #0B0908;
  --foot-rule: #43382F;
  --foot-text: #FFFFFF;
  --foot-mute: #C4B8AE;

  --util:      #0B0908;
  --util-rule: #322A24;
  --util-text: #FFFFFF;
  --util-mute: #C4B8AE;

  --grad-ember-soft: linear-gradient(135deg, #241811 0%, #312016 100%);
  --grad-veil:  linear-gradient(180deg, rgba(18,16,14,0) 0%, rgba(26,22,19,1) 100%);
  --grid-line-lt: rgba(255, 157, 99, 0.08);

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.55);
  --sh-2: 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.45);
  --sh-3: 0 18px 44px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.45);
  --sh-4: 0 32px 80px rgba(0, 0, 0, 0.7), 0 8px 20px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}

/* ── Hareket azaltma tercihi ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}