/* ============================================================
   EREN İNŞAAT — TASARIM SİSTEMİ
   Tüm renk, tipografi ve ölçek tanımları burada. (K2.5)
   Hiçbir dış kaynak / CDN kullanılmaz. (K2.1)
   Palet, EREN LOGO.pdf üzerinden örneklenmiştir.
   ============================================================ */

:root {
  /* --- Zemin katmanları --- */
  --bg:          #0C0C18;   /* sayfa zemini — logo zemininin baskın rengi */
  --bg-mavi:     #0C1824;   /* degradenin mavimsi ucu */
  --yuzey:       #181824;   /* kart / panel zemini */
  --yuzey-2:     #1F1F2E;   /* iç yüzey, tablo başlığı */
  --yuzey-3:     #262636;   /* hover, input zemini */
  --yuzey-4:     #2E2E40;   /* aktif */

  /* --- Çizgiler --- */
  --cizgi:       #2A2A3C;
  --cizgi-2:     #37374C;
  --cizgi-3:     #454560;

  /* --- Marka --- */
  --kirmizi:     #CC0C18;   /* logodaki kırmızı — birincil aksiyon (KK2) */
  --kirmizi-ac:  #E8323E;
  --kirmizi-koyu:#A00812;
  --kirmizi-sis: rgba(204, 12, 24, .12);

  /* --- Metin (logonun metalik tonları) --- */
  --metin:       #D8D8CC;
  --metin-2:     #C0C0B4;
  --metin-3:     #9A9A9C;
  --silik:       #7C7C90;
  --cok-silik:   #5A5A6E;

  /* --- DURUM PALETİ ---
     Doğrulandı: validate_palette.js, koyu yüzey #181824, --pairs all
       CVD ayrımı  PASS (en kötü çift ΔE 9.1, deutan)
       Normal görüş PASS (en kötü çift ΔE 23.1)
       Kontrast     PASS (tümü ≥ 3:1)
     İki uyarı bilinçlidir: "Bekliyor" gri OLMALI (nötr), ve tonlar
     kategorik banttan parlaktır — koyu arayüzde okunurluk için.
     Durum renkleri ASLA tek başına kullanılmaz: her zaman ikon + etiketle gelir.
     Marka kırmızısı bir DURUM rengi DEĞİLDİR — büyüklük ve birincil aksiyon içindir. */
  --d-bekliyor:  #68687C;
  --d-devam:     #4FA8FF;
  --d-tamam:     #35C97A;
  --d-durakladi: #F58A15;

  --d-bekliyor-sis:  rgba(104, 104, 124, .14);
  --d-devam-sis:     rgba( 79, 168, 255, .13);
  --d-tamam-sis:     rgba( 53, 201, 122, .13);
  --d-durakladi-sis: rgba(245, 138,  21, .13);

  /* geriye dönük kısa adlar */
  --yesil:     var(--d-tamam);
  --sari:      var(--d-durakladi);
  --mavi:      var(--d-devam);
  --yesil-sis: var(--d-tamam-sis);
  --sari-sis:  var(--d-durakladi-sis);
  --mavi-sis:  var(--d-devam-sis);

  /* --- Ölçekler --- */
  --bosluk-1: 4px;   --bosluk-2: 8px;   --bosluk-3: 12px;
  --bosluk-4: 16px;  --bosluk-5: 24px;  --bosluk-6: 32px;
  --bosluk-7: 48px;  --bosluk-8: 64px;

  --yaricap-s: 6px;  --yaricap: 10px;  --yaricap-l: 14px;  --yaricap-xl: 20px;

  --golge-1: 0 1px 3px rgba(0,0,0,.35);
  --golge-2: 0 4px 14px -4px rgba(0,0,0,.5);
  --golge-3: 0 12px 34px -12px rgba(0,0,0,.7);
  --golge-kirmizi: 0 8px 30px -12px rgba(204,12,24,.55);

  /* --- Tipografi ---
     Not: Yerel sistem font yığını kullanılır. Web fontu paketlenmemiştir;
     CDN yasağı (K2.1) nedeniyle dış font servisi kullanılmaz ve demo
     kurulum gerektirmeden çalışmalıdır. Windows'ta Segoe UI devreye girer. */
  --font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
          "Inter", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: "Cascadia Mono", "Consolas", "SF Mono", "Roboto Mono", monospace;

  --olcu-basit: 13px;
  --panel-sol: 248px;
  --panel-ust: 60px;
}

/* ============================================================
   SIFIRLAMA
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--metin);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 28px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
h4 { font-size: 15px; }
h5 { font-size: 13px; }

p { margin: 0 0 var(--bosluk-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--kirmizi-ac); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg, video { max-width: 100%; display: block; }

ul, ol { margin: 0; padding-left: 20px; }

hr { border: 0; border-top: 1px solid var(--cizgi); margin: var(--bosluk-5) 0; }

code, kbd, pre { font-family: var(--font-mono); font-size: 12px; }

::selection { background: var(--kirmizi); color: #fff; }

/* --- Kaydırma çubuğu --- */
* { scrollbar-width: thin; scrollbar-color: var(--cizgi-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--cizgi-2); border-radius: 99px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--cizgi-3); }

/* --- Odak görünürlüğü (erişilebilirlik) --- */
:focus-visible { outline: 2px solid var(--kirmizi-ac); outline-offset: 2px; border-radius: 4px; }

/* ============================================================
   YARDIMCI SINIFLAR
   ============================================================ */
.sarmal { max-width: 1280px; margin: 0 auto; padding: 0 var(--bosluk-5); }
.sarmal-dar { max-width: 880px; margin: 0 auto; padding: 0 var(--bosluk-5); }

.satir { display: flex; align-items: center; gap: var(--bosluk-3); }
.satir-arasi { display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-3); }
.sutun { display: flex; flex-direction: column; gap: var(--bosluk-3); }
.esnek { flex: 1 1 auto; min-width: 0; }
.sar { flex-wrap: wrap; }

.izgara { display: grid; gap: var(--bosluk-4); }
.izgara-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.izgara-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.izgara-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.metin-silik { color: var(--silik); }
.metin-2 { color: var(--metin-2); }
.metin-kucuk { font-size: 12px; }
.metin-mini { font-size: 11px; }
.metin-sag { text-align: right; }
.metin-orta { text-align: center; }
.mono { font-family: var(--font-mono); }
.rakam { font-variant-numeric: tabular-nums; }
.kalin { font-weight: 650; }
.buyuk-harf { text-transform: uppercase; letter-spacing: .1em; }

.gizle { display: none !important; }
.sadece-okuyucu {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ust-1 { margin-top: var(--bosluk-3); }
.ust-2 { margin-top: var(--bosluk-5); }
.ust-3 { margin-top: var(--bosluk-6); }
.alt-1 { margin-bottom: var(--bosluk-3); }
.alt-2 { margin-bottom: var(--bosluk-5); }
.alt-3 { margin-bottom: var(--bosluk-6); }

/* Sayfa gövdesi degradesi — sunum sayfalarında kullanılır */
.degrade-zemin {
  background-image:
    radial-gradient(1100px 620px at 12% -12%, #16162A 0%, transparent 62%),
    radial-gradient(820px 480px at 100% 0%, #0C1824 0%, transparent 58%);
}