/* ===========================================================================
   AFETNET — Liquid Glass Tasarım Sistemi
   ---------------------------------------------------------------------------
   Tek kaynak: token'lar + bileşen sınıfları + eski (Tailwind) ekranlar için
   köprü katmanı. Ekran şablonları BU dosyadaki `gl-*` sınıflarını kullanır.

   Katman düzeni
     0  zemin        : gövde üzerindeki sabit renk alanı (mesh gradient)
     1  cam yüzeyler : .gl-panel / .gl-kart / .gl-bar
     2  üst kabuk    : .gl-navbar (yapışkan)
     3  katman/modal : .gl-katman

   Kural: cam ancak ARKASINDA bir şey varsa cam görünür. Zemini kaldırma.
   =========================================================================== */

/* ---------------------------------------------------------------- 1. TOKEN */

:root {
  color-scheme: dark;

  /* --- tipografi --- */
  --gl-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
             "Segoe UI", Inter, "Helvetica Neue", Roboto, "Noto Sans", sans-serif;
  --gl-font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono",
                  "Cascadia Code", Menlo, Consolas, monospace;

  /* tip ölçeği — 1.200 minör üçlü, gövde 15px */
  --gl-ts-xs:   0.6875rem; /* 11px  etiket / üst yazı */
  --gl-ts-sm:   0.8125rem; /* 13px  yardımcı metin */
  --gl-ts-md:   0.9375rem; /* 15px  gövde */
  --gl-ts-lg:   1.0625rem; /* 17px  vurgulu gövde */
  --gl-ts-xl:   1.375rem;  /* 22px  başlık 3 */
  --gl-ts-2xl:  1.75rem;   /* 28px  başlık 2 */
  --gl-ts-3xl:  2.25rem;   /* 36px  başlık 1 */
  --gl-ts-4xl:  3rem;      /* 48px  görsel sayaç */

  --gl-lh-sikisik: 1.15;
  --gl-lh-normal: 1.5;
  --gl-lh-genis: 1.65;

  --gl-tracking-sik: -0.022em;  /* büyük başlıklar */
  --gl-tracking-orta: -0.01em;  /* gövde */
  --gl-tracking-genis: 0.14em;  /* küçük büyük-harf etiket */

  --gl-w-normal: 400;
  --gl-w-orta: 500;
  --gl-w-yari: 600;
  --gl-w-kalin: 700;

  /* --- boşluk ölçeği (4px tabanlı) --- */
  --gl-b1: 4px;   --gl-b2: 8px;   --gl-b3: 12px;  --gl-b4: 16px;
  --gl-b5: 20px;  --gl-b6: 24px;  --gl-b8: 32px;  --gl-b10: 40px;
  --gl-b12: 48px; --gl-b16: 64px;

  /* --- köşe yarıçapı — iç içe optik uyum: dış = iç + boşluk --- */
  --gl-r-xs: 8px;    /* rozet, küçük çip */
  --gl-r-sm: 11px;   /* girdi, küçük buton */
  --gl-r-md: 14px;   /* buton, liste satırı */
  --gl-r-lg: 20px;   /* kart */
  --gl-r-xl: 24px;   /* panel */
  --gl-r-2xl: 30px;  /* kapsayıcı / modal */
  --gl-r-tam: 999px; /* hap */

  /* --- bulanıklık seviyeleri --- */
  --gl-blur-1: blur(14px) saturate(160%);   /* ince yüzey */
  --gl-blur-2: blur(26px) saturate(180%);   /* standart cam */
  --gl-blur-3: blur(40px) saturate(190%);   /* kalın cam / modal */

  /* --- zemin (mesh) --- */
  --gl-zemin: #06090F;
  --gl-mesh-1: rgba(56, 128, 255, 0.30);   /* soğuk mavi */
  --gl-mesh-2: rgba(20, 160, 170, 0.20);   /* teal */
  --gl-mesh-3: rgba(190, 60, 50, 0.16);    /* kor — aciliyet ima eder, bağırmaz */
  --gl-mesh-4: rgba(90, 60, 190, 0.16);    /* mor derinlik */

  /* --- cam yüzey katmanları (yükseklik arttıkça opaklık artar) --- */
  --gl-yuzey-0: rgba(0, 0, 0, 0.28);          /* en dip: gömülü kutu */
  --gl-yuzey-1: rgba(255, 255, 255, 0.045);
  --gl-yuzey-2: rgba(255, 255, 255, 0.075);
  --gl-yuzey-3: rgba(255, 255, 255, 0.115);
  --gl-yuzey-yogun: rgba(12, 17, 26, 0.72); /* yoğunluk katmanı: metin okunurluğu */
  --gl-yuzey-ust: rgba(255, 255, 255, 0.16); /* hover */

  /* --- kenar / ışık --- */
  --gl-kenar: rgba(255, 255, 255, 0.12);
  --gl-kenar-guclu: rgba(255, 255, 255, 0.20);
  --gl-kenar-sessiz: rgba(255, 255, 255, 0.07);
  --gl-parlak: rgba(255, 255, 255, 0.55);  /* üst specular çizgi */
  --gl-parlak-alt: rgba(255, 255, 255, 0.06);

  /* --- gölge (cam kalınlığı hissi) --- */
  --gl-golge-1: 0 1px 2px rgba(0,0,0,.30), 0 4px 16px rgba(0,0,0,.24);
  --gl-golge-2: 0 2px 4px rgba(0,0,0,.32), 0 12px 32px rgba(0,0,0,.36);
  --gl-golge-3: 0 4px 8px rgba(0,0,0,.34), 0 28px 68px rgba(0,0,0,.48);
  --gl-golge-ic: inset 0 1px 0 var(--gl-parlak-alt);

  /* --- metin --- */
  --gl-metin: #F4F7FB;          /* AA+ her cam katmanında */
  --gl-metin-2: #B4C0D0;
  --gl-metin-3: #8794A6;
  --gl-metin-4: #64707F;        /* yalnız dekoratif, metin değil */
  --gl-metin-ters: #0A0E14;

  /* --- marka --- */
  --gl-marka: #4EA8FF;
  --gl-marka-guclu: #7CC0FF;
  --gl-marka-zemin: rgba(78, 168, 255, 0.16);
  --gl-marka-kenar: rgba(78, 168, 255, 0.42);

  /* --- ACİLİYET ÖLÇEĞİ ---------------------------------------------------
     Kural: cam efekti aciliyeti YUMUŞATMAZ. Kritik seviyede saydamlık düşer,
     kenar kalınlaşır, renk doygunlaşır. Alarm alarm gibi görünür.        */
  --gl-kritik:        #FF453A;
  --gl-kritik-metin:  #FFB9B3;
  --gl-kritik-zemin:  rgba(255, 69, 58, 0.20);
  --gl-kritik-kenar:  rgba(255, 69, 58, 0.55);
  --gl-kritik-isik:   rgba(255, 69, 58, 0.30);

  --gl-yuksek:        #FF9F0A;
  --gl-yuksek-metin:  #FFD79B;
  --gl-yuksek-zemin:  rgba(255, 159, 10, 0.17);
  --gl-yuksek-kenar:  rgba(255, 159, 10, 0.45);

  --gl-orta:          #FFD60A;
  --gl-orta-metin:    #FFE98A;
  --gl-orta-zemin:    rgba(255, 214, 10, 0.14);
  --gl-orta-kenar:    rgba(255, 214, 10, 0.38);

  --gl-dusuk:         #30D158;
  --gl-dusuk-metin:   #9BEFB4;
  --gl-dusuk-zemin:   rgba(48, 209, 88, 0.15);
  --gl-dusuk-kenar:   rgba(48, 209, 88, 0.40);

  --gl-notr:          #8E99A8;
  --gl-notr-metin:    #C3CCD8;
  --gl-notr-zemin:    rgba(160, 175, 195, 0.13);
  --gl-notr-kenar:    rgba(160, 175, 195, 0.28);

  /* --- durum eşanlamlıları (semantik) --- */
  --gl-basari: var(--gl-dusuk);
  --gl-basari-metin: var(--gl-dusuk-metin);
  --gl-uyari: var(--gl-yuksek);
  --gl-tehlike: var(--gl-kritik);
  --gl-bilgi: var(--gl-marka);

  /* --- hareket --- */
  --gl-egri: cubic-bezier(.32, .72, 0, 1);      /* Apple yaylanma */
  --gl-egri-cikis: cubic-bezier(.4, 0, .2, 1);
  --gl-sure-hizli: 140ms;
  --gl-sure: 260ms;
  --gl-sure-yavas: 420ms;
  --gl-gecis: all var(--gl-sure) var(--gl-egri);

  /* --- düzen --- */
  --gl-en: 1600px;
  --gl-navbar-y: 60px;
  --gl-odak: 0 0 0 2px var(--gl-zemin), 0 0 0 4px var(--gl-marka);
}

/* --------- AÇIK TEMA -----------------------------------------------------
   Sistem tercihi açık ise, ya da <html data-tema="acik"> ile zorlanırsa.   */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="koyu"]) {
    color-scheme: light;
    --gl-zemin: #EEF2F8;
    --gl-mesh-1: rgba(56, 128, 255, 0.22);
    --gl-mesh-2: rgba(20, 170, 180, 0.16);
    --gl-mesh-3: rgba(220, 90, 70, 0.12);
    --gl-mesh-4: rgba(120, 90, 220, 0.14);

    --gl-yuzey-0: rgba(10, 20, 40, 0.05);
    --gl-yuzey-1: rgba(255, 255, 255, 0.55);
    --gl-yuzey-2: rgba(255, 255, 255, 0.68);
    --gl-yuzey-3: rgba(255, 255, 255, 0.80);
    --gl-yuzey-yogun: rgba(255, 255, 255, 0.90);
    --gl-yuzey-ust: rgba(255, 255, 255, 0.94);

    --gl-kenar: rgba(10, 20, 40, 0.10);
    --gl-kenar-guclu: rgba(10, 20, 40, 0.18);
    --gl-kenar-sessiz: rgba(10, 20, 40, 0.06);
    --gl-parlak: rgba(255, 255, 255, 0.95);
    --gl-parlak-alt: rgba(255, 255, 255, 0.70);

    --gl-golge-1: 0 1px 2px rgba(16,28,48,.06), 0 4px 14px rgba(16,28,48,.07);
    --gl-golge-2: 0 2px 4px rgba(16,28,48,.07), 0 12px 30px rgba(16,28,48,.10);
    --gl-golge-3: 0 4px 10px rgba(16,28,48,.09), 0 28px 60px rgba(16,28,48,.16);
    --gl-golge-ic: inset 0 1px 0 rgba(255,255,255,.85);

    --gl-metin: #0B1220;
    --gl-metin-2: #3D4A5C;
    --gl-metin-3: #5C6979;
    --gl-metin-4: #8A94A2;
    --gl-metin-ters: #FFFFFF;

    --gl-marka: #0A6DD6;
    --gl-marka-guclu: #0857AC;
    --gl-marka-zemin: rgba(10, 109, 214, 0.12);
    --gl-marka-kenar: rgba(10, 109, 214, 0.34);

    --gl-kritik: #C7211A;  --gl-kritik-metin: #8E120D;
    --gl-kritik-zemin: rgba(199, 33, 26, 0.13); --gl-kritik-kenar: rgba(199, 33, 26, 0.42);
    --gl-yuksek: #A85A00;  --gl-yuksek-metin: #7A4100;
    --gl-yuksek-zemin: rgba(168, 90, 0, 0.13); --gl-yuksek-kenar: rgba(168, 90, 0, 0.38);
    --gl-orta: #8A6A00;    --gl-orta-metin: #6B5200;
    --gl-orta-zemin: rgba(138, 106, 0, 0.13); --gl-orta-kenar: rgba(138, 106, 0, 0.34);
    --gl-dusuk: #0E7A34;   --gl-dusuk-metin: #0A5C27;
    --gl-dusuk-zemin: rgba(14, 122, 52, 0.13); --gl-dusuk-kenar: rgba(14, 122, 52, 0.36);
    --gl-notr: #5C6979;    --gl-notr-metin: #46515F;
    --gl-notr-zemin: rgba(92, 105, 121, 0.11); --gl-notr-kenar: rgba(92, 105, 121, 0.26);

    --gl-odak: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--gl-marka);
  }
}

/* Açık temayı elle zorlama: <html data-tema="acik"> */
:root[data-tema="acik"] {
  color-scheme: light;
  --gl-zemin: #EEF2F8;
  --gl-mesh-1: rgba(56, 128, 255, 0.22);
  --gl-mesh-2: rgba(20, 170, 180, 0.16);
  --gl-mesh-3: rgba(220, 90, 70, 0.12);
  --gl-mesh-4: rgba(120, 90, 220, 0.14);
  --gl-yuzey-0: rgba(10, 20, 40, 0.05);
    --gl-yuzey-1: rgba(255, 255, 255, 0.55);
  --gl-yuzey-2: rgba(255, 255, 255, 0.68);
  --gl-yuzey-3: rgba(255, 255, 255, 0.80);
  --gl-yuzey-yogun: rgba(255, 255, 255, 0.90);
  --gl-yuzey-ust: rgba(255, 255, 255, 0.94);
  --gl-kenar: rgba(10, 20, 40, 0.10);
  --gl-kenar-guclu: rgba(10, 20, 40, 0.18);
  --gl-kenar-sessiz: rgba(10, 20, 40, 0.06);
  --gl-parlak: rgba(255, 255, 255, 0.95);
  --gl-parlak-alt: rgba(255, 255, 255, 0.70);
  --gl-golge-1: 0 1px 2px rgba(16,28,48,.06), 0 4px 14px rgba(16,28,48,.07);
  --gl-golge-2: 0 2px 4px rgba(16,28,48,.07), 0 12px 30px rgba(16,28,48,.10);
  --gl-golge-3: 0 4px 10px rgba(16,28,48,.09), 0 28px 60px rgba(16,28,48,.16);
  --gl-golge-ic: inset 0 1px 0 rgba(255,255,255,.85);
  --gl-metin: #0B1220;  --gl-metin-2: #3D4A5C;  --gl-metin-3: #5C6979;  --gl-metin-4: #8A94A2;
  --gl-metin-ters: #FFFFFF;
  --gl-marka: #0A6DD6;  --gl-marka-guclu: #0857AC;
  --gl-marka-zemin: rgba(10, 109, 214, 0.12); --gl-marka-kenar: rgba(10, 109, 214, 0.34);
  --gl-kritik: #C7211A;  --gl-kritik-metin: #8E120D;
  --gl-kritik-zemin: rgba(199, 33, 26, 0.13); --gl-kritik-kenar: rgba(199, 33, 26, 0.42);
  --gl-yuksek: #A85A00;  --gl-yuksek-metin: #7A4100;
  --gl-yuksek-zemin: rgba(168, 90, 0, 0.13); --gl-yuksek-kenar: rgba(168, 90, 0, 0.38);
  --gl-orta: #8A6A00;    --gl-orta-metin: #6B5200;
  --gl-orta-zemin: rgba(138, 106, 0, 0.13); --gl-orta-kenar: rgba(138, 106, 0, 0.34);
  --gl-dusuk: #0E7A34;   --gl-dusuk-metin: #0A5C27;
  --gl-dusuk-zemin: rgba(14, 122, 52, 0.13); --gl-dusuk-kenar: rgba(14, 122, 52, 0.36);
  --gl-notr: #5C6979;    --gl-notr-metin: #46515F;
  --gl-notr-zemin: rgba(92, 105, 121, 0.11); --gl-notr-kenar: rgba(92, 105, 121, 0.26);
  --gl-odak: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--gl-marka);
}

/* ------------------------------------------------------ 2. TEMEL / ZEMİN */

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

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--gl-font);
  font-size: var(--gl-ts-md);
  line-height: var(--gl-lh-normal);
  letter-spacing: var(--gl-tracking-orta);
  color: var(--gl-metin);
  background-color: var(--gl-zemin);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ZEMİN: hareketsiz mesh gradient. Cam yüzeylerin arkasında kırılacak
   renk alanı budur — kaldırılırsa sistem "gri üstüne blur"a düşer.
   Tek boyalı katman + fixed → kaydırmada yeniden boyama maliyeti yok. */
body::before {
  content: "";
  position: fixed;
  inset: -10vmax;                 /* kenarlarda gradient kesilmesin */
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(46vmax 40vmax at 12% 4%,  var(--gl-mesh-1) 0%, transparent 62%),
    radial-gradient(50vmax 44vmax at 88% 0%,  var(--gl-mesh-4) 0%, transparent 60%),
    radial-gradient(56vmax 46vmax at 78% 82%, var(--gl-mesh-2) 0%, transparent 64%),
    radial-gradient(40vmax 36vmax at 22% 92%, var(--gl-mesh-3) 0%, transparent 62%);
}

/* Çok ince doku: düz gradient bantlanmasını kırar, cam "malzeme" hissi verir */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.05) .5px, transparent .5px);
  background-size: 3px 3px;
}

/* --------------------------------------------------------- 3. TİPOGRAFİ */

h1, h2, h3, h4 { margin: 0 0 var(--gl-b3); font-weight: var(--gl-w-yari); line-height: var(--gl-lh-sikisik); }
h1 { font-size: var(--gl-ts-3xl); letter-spacing: var(--gl-tracking-sik); font-weight: var(--gl-w-kalin); }
h2 { font-size: var(--gl-ts-2xl); letter-spacing: var(--gl-tracking-sik); }
h3 { font-size: var(--gl-ts-xl);  letter-spacing: var(--gl-tracking-sik); }
h4 { font-size: var(--gl-ts-lg); }
p  { margin: 0 0 var(--gl-b3); }

.gl-h1 { font-size: var(--gl-ts-3xl); font-weight: var(--gl-w-kalin); letter-spacing: var(--gl-tracking-sik); line-height: var(--gl-lh-sikisik); }
.gl-h2 { font-size: var(--gl-ts-2xl); font-weight: var(--gl-w-yari);  letter-spacing: var(--gl-tracking-sik); line-height: var(--gl-lh-sikisik); }
.gl-h3 { font-size: var(--gl-ts-xl);  font-weight: var(--gl-w-yari);  letter-spacing: var(--gl-tracking-sik); }
.gl-govde   { font-size: var(--gl-ts-md); color: var(--gl-metin-2); line-height: var(--gl-lh-genis); }
.gl-yardimci{ font-size: var(--gl-ts-sm); color: var(--gl-metin-3); }
.gl-etiket {
  font-size: var(--gl-ts-xs); font-weight: var(--gl-w-yari);
  letter-spacing: var(--gl-tracking-genis); text-transform: uppercase;
  color: var(--gl-metin-3);
}
.gl-mono { font-family: var(--gl-font-mono); font-size: var(--gl-ts-sm); letter-spacing: 0; }
.gl-sayisal { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

a { color: var(--gl-marka); text-decoration: none; transition: color var(--gl-sure-hizli) var(--gl-egri-cikis); }
a:hover { color: var(--gl-marka-guclu); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; box-shadow: var(--gl-odak); border-radius: var(--gl-r-sm);
}

/* --------------------------------------------- 4. CAM YÜZEY (temel malzeme) */

/* .gl-cam — malzemenin kendisi. Yükseklik için .gl-y1/.gl-y2/.gl-y3 ekle. */
.gl-cam,
.gl-panel, .gl-kart, .gl-bar {
  position: relative;
  background: var(--gl-yuzey-1);
  -webkit-backdrop-filter: var(--gl-blur-2);
  backdrop-filter: var(--gl-blur-2);
  border: 1px solid var(--gl-kenar);
  border-radius: var(--gl-r-lg);
  box-shadow: var(--gl-golge-1), var(--gl-golge-ic);
}

/* Işığın camdan geçmesi: üstte specular çizgi. Camı "kalın" gösteren şey bu. */
.gl-cam::before,
.gl-panel::before, .gl-kart::before {
  content: "";
  position: absolute;
  left: 12%; right: 12%; top: 0; height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--gl-parlak), transparent);
  opacity: .5;
  pointer-events: none;
}

/* --- yükseklik seviyeleri --- */
.gl-y1 { background: var(--gl-yuzey-1); backdrop-filter: var(--gl-blur-1); -webkit-backdrop-filter: var(--gl-blur-1); box-shadow: var(--gl-golge-1), var(--gl-golge-ic); }
.gl-y2 { background: var(--gl-yuzey-2); backdrop-filter: var(--gl-blur-2); -webkit-backdrop-filter: var(--gl-blur-2); box-shadow: var(--gl-golge-2), var(--gl-golge-ic); }
.gl-y3 { background: var(--gl-yuzey-3); backdrop-filter: var(--gl-blur-3); -webkit-backdrop-filter: var(--gl-blur-3); box-shadow: var(--gl-golge-3), var(--gl-golge-ic); border-color: var(--gl-kenar-guclu); }

/* Yoğunluk katmanı: uzun metin / tablo / harita üstü — okunurluk pazarlık dışı */
.gl-yogun { background: var(--gl-yuzey-yogun); }

.gl-panel  { border-radius: var(--gl-r-xl); padding: var(--gl-b6); }
.gl-kart   { border-radius: var(--gl-r-lg); padding: var(--gl-b5); }
.gl-kart-sik { padding: var(--gl-b3) var(--gl-b4); }

/* tıklanabilir kart */
.gl-kart--etkilesimli { cursor: pointer; transition: var(--gl-gecis); }
.gl-kart--etkilesimli:hover {
  transform: translateY(-2px);
  background: var(--gl-yuzey-2);
  border-color: var(--gl-kenar-guclu);
  box-shadow: var(--gl-golge-2), var(--gl-golge-ic);
}
.gl-kart--etkilesimli:active { transform: translateY(0); transition-duration: var(--gl-sure-hizli); }

/* --------------------------------------------------- 5. ÜST GEZİNME (kabuk) */

.gl-navbar {
  position: sticky; top: 0; z-index: 900;
  background: var(--gl-yuzey-yogun);
  -webkit-backdrop-filter: var(--gl-blur-3);
  backdrop-filter: var(--gl-blur-3);
  border-bottom: 1px solid var(--gl-kenar);
  box-shadow: 0 1px 0 var(--gl-parlak-alt), 0 8px 32px rgba(0,0,0,.28);
}
.gl-navbar__ic {
  max-width: var(--gl-en); margin: 0 auto;
  min-height: var(--gl-navbar-y);
  padding: 0 var(--gl-b5);
  display: flex; align-items: center; gap: var(--gl-b4);
}
.gl-marka-kimlik {
  display: inline-flex; align-items: baseline; gap: var(--gl-b2);
  font-size: var(--gl-ts-lg); font-weight: var(--gl-w-kalin);
  letter-spacing: var(--gl-tracking-sik);
  color: var(--gl-metin); text-decoration: none; white-space: nowrap;
}
.gl-marka-kimlik:hover { color: var(--gl-metin); }
.gl-marka-kimlik__nokta {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gl-kritik);
  box-shadow: 0 0 0 3px var(--gl-kritik-zemin), 0 0 12px var(--gl-kritik-isik);
  align-self: center;
}
.gl-marka-kimlik__alt {
  font-size: var(--gl-ts-xs); font-weight: var(--gl-w-orta);
  letter-spacing: var(--gl-tracking-genis); text-transform: uppercase;
  color: var(--gl-metin-3);
}

.gl-nav { display: flex; align-items: center; gap: var(--gl-b1); flex-wrap: wrap; }
.gl-nav__baglanti {
  display: inline-flex; align-items: center;
  padding: 7px var(--gl-b3);
  border-radius: var(--gl-r-sm);
  font-size: var(--gl-ts-sm); font-weight: var(--gl-w-orta);
  color: var(--gl-metin-2); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: var(--gl-gecis);
}
.gl-nav__baglanti:hover {
  color: var(--gl-metin); background: var(--gl-yuzey-2); border-color: var(--gl-kenar-sessiz);
}
.gl-nav__baglanti[aria-current="page"],
.gl-nav__baglanti.acik {
  color: var(--gl-metin);
  background: var(--gl-yuzey-3);
  border-color: var(--gl-kenar);
  box-shadow: var(--gl-golge-ic);
}
.gl-nav__baglanti--vurgu { color: var(--gl-yuksek-metin); }
.gl-nav__baglanti--vurgu:hover { color: var(--gl-yuksek-metin); background: var(--gl-yuksek-zemin); border-color: var(--gl-yuksek-kenar); }

/* mobil aç/kapa — CSS-only (gizli checkbox), JS yok */
.gl-nav-anahtar { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.gl-nav-dugme {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 36px; margin-left: auto;
  border-radius: var(--gl-r-sm);
  background: var(--gl-yuzey-2); border: 1px solid var(--gl-kenar);
  color: var(--gl-metin); cursor: pointer;
}
.gl-nav-dugme span, .gl-nav-dugme span::before, .gl-nav-dugme span::after {
  content: ""; display: block; width: 16px; height: 1.5px; border-radius: 2px;
  background: currentColor; transition: var(--gl-gecis);
}
.gl-nav-dugme span::before { transform: translateY(-5px); }
.gl-nav-dugme span::after  { transform: translateY(3.5px); }

@media (max-width: 1080px) {
  .gl-navbar__ic { flex-wrap: wrap; padding: var(--gl-b2) var(--gl-b4); }
  .gl-nav-dugme { display: flex; }
  .gl-nav {
    display: none; width: 100%;
    flex-direction: column; align-items: stretch;
    gap: 2px; padding: var(--gl-b2) 0 var(--gl-b3);
    border-top: 1px solid var(--gl-kenar-sessiz); margin-top: var(--gl-b2);
  }
  .gl-nav-anahtar:checked ~ .gl-nav { display: flex; animation: gl-in var(--gl-sure) var(--gl-egri); }
  .gl-nav__baglanti { padding: 11px var(--gl-b3); font-size: var(--gl-ts-md); }
  .gl-marka-kimlik__alt { display: none; }
}

@keyframes gl-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------- 6. DÜZEN / KAP */

.gl-kap { max-width: var(--gl-en); margin: 0 auto; padding: var(--gl-b6) var(--gl-b5); }
.gl-kap--dar { max-width: 900px; }
.gl-yigin > * + * { margin-top: var(--gl-b4); }
.gl-yigin-sik > * + * { margin-top: var(--gl-b2); }
.gl-izgara { display: grid; gap: var(--gl-b4); }
.gl-izgara--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.gl-izgara--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gl-izgara--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.gl-satir { display: flex; align-items: center; gap: var(--gl-b3); flex-wrap: wrap; }
.gl-ara { margin-left: auto; }

/* --------------------------------------------------------------- 7. BUTON */

.gl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gl-b2);
  padding: 10px var(--gl-b5);
  border-radius: var(--gl-r-md);
  font-family: inherit; font-size: var(--gl-ts-sm); font-weight: var(--gl-w-yari);
  letter-spacing: var(--gl-tracking-orta);
  line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--gl-kenar);
  background: var(--gl-yuzey-2);
  color: var(--gl-metin);
  -webkit-backdrop-filter: var(--gl-blur-1);
  backdrop-filter: var(--gl-blur-1);
  box-shadow: var(--gl-golge-1), var(--gl-golge-ic);
  transition: var(--gl-gecis);
}
.gl-btn:hover { transform: translateY(-1px); background: var(--gl-yuzey-ust); border-color: var(--gl-kenar-guclu); color: var(--gl-metin); box-shadow: var(--gl-golge-2), var(--gl-golge-ic); }
.gl-btn:active { transform: translateY(0) scale(.985); transition-duration: var(--gl-sure-hizli); }
.gl-btn:disabled, .gl-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* birincil — marka dolgusu, cam değil: ana eylem tereddütsüz okunmalı */
.gl-btn--birincil {
  background: linear-gradient(180deg, var(--gl-marka-guclu), var(--gl-marka));
  border-color: transparent; color: #04121F;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 20px rgba(78,168,255,.28);
}
.gl-btn--birincil:hover { background: linear-gradient(180deg, #9CD0FF, var(--gl-marka-guclu)); color: #04121F; }

/* ikincil — cam (varsayılan .gl-btn ile aynı, açık isim) */
.gl-btn--ikincil { background: var(--gl-yuzey-2); }

/* tehlike — geri alınamaz / kritik eylem. Alarm rengi tam güçte. */
/* Renkler ölçülerek seçildi: beyaz metin bu kırmızıda 4.7:1–6.1:1 verir (AA ✓).
   Apple'ın parlak #FF453A'sı beyaz metinle 3.4:1'de kalıyordu — reddedildi.
   Parlaklık, gölge halesiyle geri kazanıldı; alarm gücü kaybolmadı. */
.gl-btn--tehlike {
  background: linear-gradient(180deg, #DE2A21, #C11810);
  border-color: transparent; color: #FFFFFF;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 6px 24px rgba(255,69,58,.42);
}
.gl-btn--tehlike:hover { background: linear-gradient(180deg, #DE2A21, #D01B13); color: #FFFFFF; }

/* sessiz — üçüncül, kenarsız */
.gl-btn--sessiz {
  background: transparent; border-color: transparent; box-shadow: none;
  color: var(--gl-metin-2); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.gl-btn--sessiz:hover { background: var(--gl-yuzey-2); border-color: var(--gl-kenar-sessiz); color: var(--gl-metin); box-shadow: none; transform: none; }

.gl-btn--kucuk { padding: 6px var(--gl-b3); font-size: var(--gl-ts-xs); border-radius: var(--gl-r-sm); }
.gl-btn--buyuk { padding: 13px var(--gl-b6); font-size: var(--gl-ts-lg); border-radius: var(--gl-r-lg); }
.gl-btn--tam { width: 100%; }

/* ------------------------------------------------------------- 8. ROZET */

.gl-rozet {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--gl-r-xs);
  font-size: var(--gl-ts-xs); font-weight: var(--gl-w-yari);
  letter-spacing: .01em; line-height: 1.4; white-space: nowrap;
  background: var(--gl-notr-zemin);
  border: 1px solid var(--gl-notr-kenar);
  color: var(--gl-notr-metin);
}
.gl-rozet--hap { border-radius: var(--gl-r-tam); padding: 3px 11px; }
.gl-rozet__nokta { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.gl-rozet--kritik  { background: var(--gl-kritik-zemin); border-color: var(--gl-kritik-kenar); color: var(--gl-kritik-metin); }
.gl-rozet--yuksek  { background: var(--gl-yuksek-zemin); border-color: var(--gl-yuksek-kenar); color: var(--gl-yuksek-metin); }
.gl-rozet--orta    { background: var(--gl-orta-zemin);   border-color: var(--gl-orta-kenar);   color: var(--gl-orta-metin); }
.gl-rozet--dusuk   { background: var(--gl-dusuk-zemin);  border-color: var(--gl-dusuk-kenar);  color: var(--gl-dusuk-metin); }
.gl-rozet--marka   { background: var(--gl-marka-zemin);  border-color: var(--gl-marka-kenar);  color: var(--gl-marka-guclu); }
.gl-rozet--notr    { background: var(--gl-notr-zemin);   border-color: var(--gl-notr-kenar);   color: var(--gl-notr-metin); }

/* Kritik rozet dolu varyantı — listede kaybolmaması gereken tek şey */
/* Tehlike bandı mantığı: parlak kırmızı + neredeyse siyah metin = 5.3:1 (AA ✓).
   Beyaz metin bu kırmızıda 3.4:1'de kalırdı; renk parlaklığından ödün vermek
   yerine metin koyulaştırıldı — alarm en yüksek doygunlukta kaldı. */
.gl-rozet--kritik-dolu {
  background: var(--gl-kritik); border-color: transparent; color: #2A0400;
  font-weight: var(--gl-w-kalin);
  box-shadow: 0 0 16px var(--gl-kritik-isik);
}

:root[data-tema="acik"] .gl-rozet--kritik-dolu { color: #FFFFFF; }
@media (prefers-color-scheme: light) {
  :root:not([data-tema="koyu"]) .gl-rozet--kritik-dolu { color: #FFFFFF; }
}

/* ---------------------------------------------------- 9. ACİLİYET ÖLÇEĞİ */

/* Kapsayıcıya uygula: sol kenarda renk şeridi + hafif renk sızıntısı.
   Aciliyet arttıkça saydamlık AZALIR — cam alarmı yutmasın. */
.gl-aciliyet { border-left: 3px solid var(--gl-notr); }
.gl-aciliyet--kritik {
  border-left-color: var(--gl-kritik);
  background:
    linear-gradient(90deg, var(--gl-kritik-zemin), transparent 30%),
    var(--gl-yuzey-yogun);
  border-color: var(--gl-kritik-kenar);
  border-left-width: 3px;
  box-shadow: var(--gl-golge-2), 0 0 0 1px var(--gl-kritik-zemin), var(--gl-golge-ic);
}
.gl-aciliyet--yuksek {
  border-left-color: var(--gl-yuksek);
  background: linear-gradient(90deg, var(--gl-yuksek-zemin), transparent 26%), var(--gl-yuzey-2);
}
.gl-aciliyet--orta {
  border-left-color: var(--gl-orta);
  background: linear-gradient(90deg, var(--gl-orta-zemin), transparent 22%), var(--gl-yuzey-1);
}
.gl-aciliyet--dusuk { border-left-color: var(--gl-dusuk); }

/* nabız — YALNIZ kritik ve yalnız tek bir öğede. Abartılırsa anlamını yitirir. */
.gl-nabiz { position: relative; }
.gl-nabiz::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  border: 1px solid var(--gl-kritik); opacity: 0; pointer-events: none;
  animation: gl-nabiz 2.4s var(--gl-egri-cikis) infinite;
}
@keyframes gl-nabiz { 0%,100% { opacity: 0; } 50% { opacity: .75; } }

/* -------------------------------------------------- 10. GÜVEN SKORU (%) */

/* Kullanım:
   <div class="gl-guven" style="--gl-guven-deger:82"> … </div>
   Renk eşiği: >=75 yüksek(yeşil) · 50-74 orta(sarı) · <50 düşük(kırmızı)
   Sınıfla açıkça belirt: .gl-guven--yuksek / --orta / --dusuk           */
.gl-guven { display: flex; align-items: center; gap: var(--gl-b2); --gl-guven-renk: var(--gl-notr); }
.gl-guven--yuksek { --gl-guven-renk: var(--gl-dusuk); }
.gl-guven--orta   { --gl-guven-renk: var(--gl-orta); }
.gl-guven--dusuk  { --gl-guven-renk: var(--gl-kritik); }

.gl-guven__cubuk {
  position: relative; flex: 1; min-width: 56px; height: 6px;
  border-radius: var(--gl-r-tam);
  background: var(--gl-yuzey-3);
  border: 1px solid var(--gl-kenar-sessiz);
  overflow: hidden;
}
.gl-guven__cubuk::after {
  content: ""; position: absolute; inset: 0;
  width: calc(var(--gl-guven-deger, 0) * 1%);
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gl-guven-renk) 65%, transparent), var(--gl-guven-renk));
  box-shadow: 0 0 10px color-mix(in srgb, var(--gl-guven-renk) 45%, transparent);
  transition: width var(--gl-sure-yavas) var(--gl-egri);
}
.gl-guven__deger {
  font-size: var(--gl-ts-xs); font-weight: var(--gl-w-yari);
  font-variant-numeric: tabular-nums; color: var(--gl-guven-renk);
  min-width: 34px; text-align: right;
}

/* halka varyantı — kart köşesinde tek bakışta güven */
.gl-guven-halka {
  --gl-guven-deger: 0;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  font-size: var(--gl-ts-xs); font-weight: var(--gl-w-kalin);
  font-variant-numeric: tabular-nums; color: var(--gl-metin);
  background:
    conic-gradient(var(--gl-guven-renk, var(--gl-notr)) calc(var(--gl-guven-deger) * 1%), var(--gl-yuzey-3) 0);
  position: relative;
}
.gl-guven-halka::before {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--gl-yuzey-yogun);
  -webkit-backdrop-filter: var(--gl-blur-2); backdrop-filter: var(--gl-blur-2);
}
.gl-guven-halka > * { position: relative; }

/* --------------------------------------------------- 11. SAYAÇ / METRİK */

.gl-sayac { display: flex; flex-direction: column; gap: 2px; }
.gl-sayac__deger {
  font-size: var(--gl-ts-2xl); font-weight: var(--gl-w-kalin);
  letter-spacing: var(--gl-tracking-sik); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--gl-metin);
}
.gl-sayac__deger--buyuk { font-size: var(--gl-ts-4xl); }
.gl-sayac__etiket {
  font-size: var(--gl-ts-xs); font-weight: var(--gl-w-orta);
  letter-spacing: var(--gl-tracking-genis); text-transform: uppercase;
  color: var(--gl-metin-3);
}
.gl-sayac--kritik .gl-sayac__deger { color: var(--gl-kritik-metin); }
.gl-sayac--yuksek .gl-sayac__deger { color: var(--gl-yuksek-metin); }
.gl-sayac--dusuk  .gl-sayac__deger { color: var(--gl-dusuk-metin); }
.gl-sayac--marka  .gl-sayac__deger { color: var(--gl-marka-guclu); }

.gl-sayac-serit {
  display: flex; flex-wrap: wrap; gap: var(--gl-b6);
  padding: var(--gl-b4) var(--gl-b5);
}
.gl-sayac-serit .gl-sayac { min-width: 92px; }

/* --------------------------------------------------------- 12. LİSTE */

.gl-liste { display: flex; flex-direction: column; }
.gl-liste__satir {
  display: flex; align-items: flex-start; gap: var(--gl-b3);
  padding: var(--gl-b3) var(--gl-b4);
  border-radius: var(--gl-r-md);
  border: 1px solid transparent;
  transition: background var(--gl-sure-hizli) var(--gl-egri-cikis), border-color var(--gl-sure-hizli) var(--gl-egri-cikis);
}
.gl-liste__satir + .gl-liste__satir { box-shadow: 0 -1px 0 var(--gl-kenar-sessiz); }
.gl-liste__satir:hover { background: var(--gl-yuzey-2); border-color: var(--gl-kenar-sessiz); box-shadow: none; }
.gl-liste__satir--secili { background: var(--gl-marka-zemin); border-color: var(--gl-marka-kenar); box-shadow: none; }
.gl-liste__ana { flex: 1; min-width: 0; }
.gl-liste__baslik { font-size: var(--gl-ts-md); font-weight: var(--gl-w-orta); color: var(--gl-metin); }
.gl-liste__alt { font-size: var(--gl-ts-sm); color: var(--gl-metin-3); }
.gl-liste__yan { flex: none; text-align: right; }

/* uzun liste kutusu — cam üstünde kaydırma */
.gl-kaydir { overflow-y: auto; overscroll-behavior: contain; }
.gl-kaydir::-webkit-scrollbar { width: 10px; height: 10px; }
.gl-kaydir::-webkit-scrollbar-track { background: transparent; }
.gl-kaydir::-webkit-scrollbar-thumb { background: var(--gl-yuzey-3); border-radius: var(--gl-r-tam); border: 3px solid transparent; background-clip: content-box; }
.gl-kaydir::-webkit-scrollbar-thumb:hover { background: var(--gl-yuzey-ust); background-clip: content-box; }

/* --------------------------------------------------------- 13. TABLO */

/* Yoğun veri camda kaybolmasın: başlık satırı yapışkan + yoğunluk katmanı. */
.gl-tablo-sarmal { overflow-x: auto; border-radius: var(--gl-r-lg); }
.gl-tablo { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--gl-ts-sm); }
.gl-tablo th {
  position: sticky; top: 0; z-index: 2;
  text-align: left; padding: var(--gl-b3) var(--gl-b4);
  font-size: var(--gl-ts-xs); font-weight: var(--gl-w-yari);
  letter-spacing: var(--gl-tracking-genis); text-transform: uppercase;
  color: var(--gl-metin-3);
  background: var(--gl-yuzey-yogun);
  -webkit-backdrop-filter: var(--gl-blur-2); backdrop-filter: var(--gl-blur-2);
  border-bottom: 1px solid var(--gl-kenar);
  white-space: nowrap;
}
.gl-tablo td {
  padding: var(--gl-b3) var(--gl-b4);
  color: var(--gl-metin-2);
  border-bottom: 1px solid var(--gl-kenar-sessiz);
  vertical-align: top;
}
.gl-tablo tbody tr { transition: background var(--gl-sure-hizli) var(--gl-egri-cikis); }
.gl-tablo tbody tr:hover td { background: var(--gl-yuzey-2); color: var(--gl-metin); }
.gl-tablo tbody tr:last-child td { border-bottom: none; }
.gl-tablo--seritli tbody tr:nth-child(even) td { background: var(--gl-yuzey-1); }
.gl-tablo .gl-sag { text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- 14. FORM */

.gl-alan { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--gl-b4); }
.gl-alan__etiket { font-size: var(--gl-ts-sm); font-weight: var(--gl-w-orta); color: var(--gl-metin-2); }
.gl-alan__ipucu { font-size: var(--gl-ts-xs); color: var(--gl-metin-3); }
.gl-alan__hata  { font-size: var(--gl-ts-xs); color: var(--gl-kritik-metin); }

.gl-girdi, .gl-secim, .gl-alan-metin {
  width: 100%;
  padding: 10px var(--gl-b3);
  font-family: inherit; font-size: var(--gl-ts-md); color: var(--gl-metin);
  background: var(--gl-yuzey-2);
  -webkit-backdrop-filter: var(--gl-blur-1); backdrop-filter: var(--gl-blur-1);
  border: 1px solid var(--gl-kenar);
  border-radius: var(--gl-r-sm);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
  transition: var(--gl-gecis);
}
.gl-girdi::placeholder, .gl-alan-metin::placeholder { color: var(--gl-metin-4); }
.gl-girdi:hover, .gl-secim:hover, .gl-alan-metin:hover { border-color: var(--gl-kenar-guclu); }
.gl-girdi:focus, .gl-secim:focus, .gl-alan-metin:focus {
  outline: none; border-color: var(--gl-marka);
  background: var(--gl-yuzey-3);
  box-shadow: 0 0 0 3px var(--gl-marka-zemin), inset 0 1px 2px rgba(0,0,0,.14);
}
.gl-girdi[aria-invalid="true"], .gl-alan--hatali .gl-girdi {
  border-color: var(--gl-kritik-kenar); box-shadow: 0 0 0 3px var(--gl-kritik-zemin);
}
.gl-alan-metin { min-height: 96px; resize: vertical; line-height: var(--gl-lh-normal); }

.gl-secim {
  appearance: none; -webkit-appearance: none;
  padding-right: var(--gl-b8);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.gl-secim option { background: #0E1520; color: #F4F7FB; }
:root[data-tema="acik"] .gl-secim option { background: #FFFFFF; color: #0B1220; }

/* onay kutusu + radyo */
.gl-onay { display: inline-flex; align-items: center; gap: var(--gl-b2); cursor: pointer; font-size: var(--gl-ts-sm); color: var(--gl-metin-2); }
.gl-onay input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex: none; margin: 0; cursor: pointer;
  border: 1px solid var(--gl-kenar-guclu); border-radius: 6px;
  background: var(--gl-yuzey-2);
  box-shadow: var(--gl-golge-ic);
  transition: var(--gl-gecis);
  position: relative;
}
.gl-onay input[type="radio"] { border-radius: 50%; }
.gl-onay input:checked { background: var(--gl-marka); border-color: transparent; }
.gl-onay input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 5px; top: 1.5px;
  width: 5px; height: 9px; border: solid #04121F; border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.gl-onay input[type="radio"]:checked::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #04121F;
}
.gl-onay input:focus-visible { box-shadow: var(--gl-odak); }

/* anahtar (toggle) */
.gl-anahtar { display: inline-flex; align-items: center; gap: var(--gl-b2); cursor: pointer; font-size: var(--gl-ts-sm); color: var(--gl-metin-2); }
.gl-anahtar input { appearance: none; -webkit-appearance: none; margin: 0; width: 42px; height: 25px; flex: none;
  border-radius: var(--gl-r-tam); background: var(--gl-yuzey-3); border: 1px solid var(--gl-kenar);
  position: relative; cursor: pointer; transition: var(--gl-gecis); }
.gl-anahtar input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px;
  border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: var(--gl-gecis); }
.gl-anahtar input:checked { background: var(--gl-dusuk); border-color: transparent; }
.gl-anahtar input:checked::after { transform: translateX(17px); }

/* --------------------------------------------------------- 15. SEKME */

.gl-sekmeler {
  display: inline-flex; gap: 3px; padding: 3px;
  border-radius: var(--gl-r-md);
  background: var(--gl-yuzey-1);
  -webkit-backdrop-filter: var(--gl-blur-1); backdrop-filter: var(--gl-blur-1);
  border: 1px solid var(--gl-kenar-sessiz);
  box-shadow: var(--gl-golge-ic);
  flex-wrap: wrap;
}
.gl-sekme {
  padding: 7px var(--gl-b4);
  border-radius: var(--gl-r-sm);
  font-size: var(--gl-ts-sm); font-weight: var(--gl-w-orta);
  color: var(--gl-metin-3); text-decoration: none; cursor: pointer;
  background: transparent; border: 1px solid transparent;
  transition: var(--gl-gecis); white-space: nowrap;
}
.gl-sekme:hover { color: var(--gl-metin-2); background: var(--gl-yuzey-2); }
.gl-sekme[aria-selected="true"], .gl-sekme.acik {
  color: var(--gl-metin); background: var(--gl-yuzey-3);
  border-color: var(--gl-kenar); box-shadow: var(--gl-golge-1);
}

/* --------------------------------------------------- 16. MODAL / KATMAN */

.gl-ortu {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: var(--gl-b5);
  background: rgba(4, 7, 12, .55);
  -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%);
  animation: gl-solu var(--gl-sure) var(--gl-egri-cikis);
}
.gl-katman {
  width: min(560px, 100%); max-height: 86vh; overflow-y: auto;
  padding: var(--gl-b6);
  border-radius: var(--gl-r-2xl);
  background: var(--gl-yuzey-yogun);
  -webkit-backdrop-filter: var(--gl-blur-3); backdrop-filter: var(--gl-blur-3);
  border: 1px solid var(--gl-kenar-guclu);
  box-shadow: var(--gl-golge-3), var(--gl-golge-ic);
  animation: gl-yukari var(--gl-sure-yavas) var(--gl-egri);
}
.gl-katman--genis { width: min(920px, 100%); }
.gl-katman__baslik { display: flex; align-items: flex-start; gap: var(--gl-b3); margin-bottom: var(--gl-b4); }
.gl-katman__alt { display: flex; gap: var(--gl-b2); justify-content: flex-end; margin-top: var(--gl-b6); }
@keyframes gl-solu { from { opacity: 0; } to { opacity: 1; } }
@keyframes gl-yukari { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------- 17. İLERLEME ÇUBUĞU */

.gl-ilerleme {
  --gl-ilerleme-deger: 0;
  --gl-ilerleme-renk: var(--gl-marka);
  position: relative; height: 8px; width: 100%;
  border-radius: var(--gl-r-tam);
  background: var(--gl-yuzey-3);
  border: 1px solid var(--gl-kenar-sessiz);
  overflow: hidden;
}
.gl-ilerleme::after {
  content: ""; position: absolute; inset: 0;
  width: calc(var(--gl-ilerleme-deger) * 1%);
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gl-ilerleme-renk) 60%, transparent), var(--gl-ilerleme-renk));
  transition: width var(--gl-sure-yavas) var(--gl-egri);
}
.gl-ilerleme--kritik { --gl-ilerleme-renk: var(--gl-kritik); }
.gl-ilerleme--yuksek { --gl-ilerleme-renk: var(--gl-yuksek); }
.gl-ilerleme--basari { --gl-ilerleme-renk: var(--gl-dusuk); }
.gl-ilerleme--ince { height: 4px; }

/* çok parçalı doluluk (ör. karşılanan / bekleyen / eksik) */
.gl-ilerleme-yigin { display: flex; height: 8px; width: 100%; border-radius: var(--gl-r-tam); overflow: hidden; background: var(--gl-yuzey-3); border: 1px solid var(--gl-kenar-sessiz); }
.gl-ilerleme-yigin > span { display: block; height: 100%; }

/* --------------------------------------------------------- 18. UYARI KUTUSU */

.gl-uyari {
  display: flex; gap: var(--gl-b3); align-items: flex-start;
  padding: var(--gl-b4);
  border-radius: var(--gl-r-md);
  border: 1px solid var(--gl-kenar);
  border-left: 3px solid var(--gl-notr);
  background: var(--gl-yuzey-2);
  -webkit-backdrop-filter: var(--gl-blur-1); backdrop-filter: var(--gl-blur-1);
  font-size: var(--gl-ts-sm); color: var(--gl-metin-2);
  box-shadow: var(--gl-golge-1);
}
.gl-uyari__baslik { font-weight: var(--gl-w-yari); color: var(--gl-metin); margin-bottom: 2px; font-size: var(--gl-ts-md); }
.gl-uyari--bilgi    { border-left-color: var(--gl-marka);  background: linear-gradient(90deg, var(--gl-marka-zemin), transparent 40%), var(--gl-yuzey-2); }
.gl-uyari--basari   { border-left-color: var(--gl-dusuk);  background: linear-gradient(90deg, var(--gl-dusuk-zemin), transparent 40%), var(--gl-yuzey-2); }
.gl-uyari--uyari    { border-left-color: var(--gl-yuksek); background: linear-gradient(90deg, var(--gl-yuksek-zemin), transparent 40%), var(--gl-yuzey-2); }
.gl-uyari--tehlike  { border-left-color: var(--gl-kritik); background: linear-gradient(90deg, var(--gl-kritik-zemin), transparent 40%), var(--gl-yuzey-yogun); border-color: var(--gl-kritik-kenar); }

/* --------------------------------------------------------- 19. BOŞ DURUM */

.gl-bos {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--gl-b2); padding: var(--gl-b12) var(--gl-b6);
  color: var(--gl-metin-3);
}
.gl-bos__ikon {
  width: 56px; height: 56px; border-radius: var(--gl-r-lg);
  display: grid; place-items: center; margin-bottom: var(--gl-b2);
  background: var(--gl-yuzey-2); border: 1px solid var(--gl-kenar);
  box-shadow: var(--gl-golge-1), var(--gl-golge-ic);
  font-size: 24px; opacity: .9;
}
.gl-bos__baslik { font-size: var(--gl-ts-lg); font-weight: var(--gl-w-yari); color: var(--gl-metin); }
.gl-bos__aciklama { font-size: var(--gl-ts-sm); max-width: 46ch; }

/* --------------------------------------------------------- 20. YARDIMCI */

.gl-ayrac { height: 1px; border: 0; margin: var(--gl-b5) 0; background: var(--gl-kenar-sessiz); }
.gl-cip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--gl-r-tam);
  font-size: var(--gl-ts-xs); color: var(--gl-metin-2);
  background: var(--gl-yuzey-2); border: 1px solid var(--gl-kenar-sessiz);
}
.gl-kod {
  font-family: var(--gl-font-mono); font-size: var(--gl-ts-xs);
  padding: 2px 7px; border-radius: 6px;
  background: rgba(0,0,0,.30); border: 1px solid var(--gl-kenar-sessiz);
  color: var(--gl-marka-guclu);
}
:root[data-tema="acik"] .gl-kod { background: rgba(10,20,40,.06); }
.gl-gizle { display: none !important; }
.gl-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------- 21. ALT BİLGİ */

.gl-altbilgi {
  max-width: var(--gl-en); margin: var(--gl-b10) auto 0;
  padding: var(--gl-b6) var(--gl-b5) var(--gl-b10);
  border-top: 1px solid var(--gl-kenar-sessiz);
  font-size: var(--gl-ts-xs); line-height: var(--gl-lh-genis);
  color: var(--gl-metin-3);
}
.gl-altbilgi strong { color: var(--gl-metin-2); font-weight: var(--gl-w-yari); }
.gl-altbilgi ul { list-style: none; margin: var(--gl-b2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gl-b2) var(--gl-b5); }

/* --------------------------------------------------- 22. HARİTA UYUMU */

/* Leaflet / OpenLayers cam kabuğun içinde otursun; harita üstündeki
   kontroller cam olsun ama harita karolarını bulandırmasın (performans). */
.leaflet-container, .ol-viewport { border-radius: var(--gl-r-lg); font-family: var(--gl-font) !important; }
.leaflet-control-zoom a, .ol-zoom button {
  background: var(--gl-yuzey-yogun) !important; color: var(--gl-metin) !important;
  border-color: var(--gl-kenar) !important;
  -webkit-backdrop-filter: var(--gl-blur-2); backdrop-filter: var(--gl-blur-2);
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--gl-yuzey-yogun) !important; color: var(--gl-metin) !important;
  -webkit-backdrop-filter: var(--gl-blur-3); backdrop-filter: var(--gl-blur-3);
  border: 1px solid var(--gl-kenar); border-radius: var(--gl-r-md) !important;
  box-shadow: var(--gl-golge-2) !important;
}
.leaflet-control-attribution { background: rgba(0,0,0,.45) !important; color: var(--gl-metin-3) !important; }
.leaflet-control-attribution a { color: var(--gl-metin-2) !important; }

/* ============================================================================
   23. KÖPRÜ KATMANI — eski (Tailwind) ekranlar
   ----------------------------------------------------------------------------
   panel/harita/stk/hane/gonullu/koordinasyon/mcp şablonları başka ekiplerin ve
   Tailwind yardımcı sınıflarıyla yazılmış. Onlara DOKUNULMADI. Bu blok o
   sınıfları glass token'larına bağlar; ekranlar tek satır değişmeden yeni
   malzemeyi devralır. Yeni ekranlar bu bloğu KULLANMAZ — `gl-*` kullanır.

   Not: `:root` ön eki bilinçli — Tailwind Play CDN kendi <style>'ını çalışma
   anında head'e ekler; eşit özgüllükte sıralamayı kaybederiz. 0-2-0 ile kazanır.
   ========================================================================== */

/* proje geneli iki eski sınıf — base.html'in eski satır içi stilinden geliyor */
:root .kart {
  background: var(--gl-yuzey-1);
  -webkit-backdrop-filter: var(--gl-blur-2); backdrop-filter: var(--gl-blur-2);
  border: 1px solid var(--gl-kenar);
  border-radius: var(--gl-r-lg);
  box-shadow: var(--gl-golge-1), var(--gl-golge-ic);
}
:root .rozet {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--gl-ts-xs); font-weight: var(--gl-w-yari);
  padding: 3px 9px; border-radius: var(--gl-r-xs);
  border: 1px solid var(--gl-kenar-sessiz);
}

/* --- yüzeyler ---
   Not: eski şablonlarda 35 yerde sabit `bg-[#0b0f14]` var. Açık temada bu, sayfanın
   ortasında koyu bir ada bırakıyor ve üstündeki gri metin AA'nın altına düşüyordu
   (ölçüldü: 1.1:1). Token'a bağlandı — artık temayla birlikte dönüyor. */
:root .bg-slate-950,
:root .bg-\[\#0b0f14\] { background-color: var(--gl-yuzey-0); }
:root .bg-slate-900,
:root .bg-slate-900\/70, :root .bg-slate-900\/60, :root .bg-slate-900\/50 { background-color: var(--gl-yuzey-1); }
:root .bg-slate-800,
:root .bg-slate-800\/60, :root .bg-slate-800\/40 { background-color: var(--gl-yuzey-2); }
:root .bg-slate-700 { background-color: var(--gl-yuzey-3); }
:root .bg-slate-600 { background-color: var(--gl-yuzey-ust); }
:root .bg-slate-900, :root .bg-slate-800, :root .bg-slate-700,
:root .bg-slate-900\/70, :root .bg-slate-900\/60, :root .bg-slate-900\/50,
:root .bg-slate-800\/60, :root .bg-slate-800\/40, :root .bg-\[\#0b0f14\] {
  -webkit-backdrop-filter: var(--gl-blur-1); backdrop-filter: var(--gl-blur-1);
}

/* renk + opaklık değişkeli dolgular (bg-red-950/40 gibi) */
:root .bg-red-950\/40, :root .bg-red-900\/50 { background-color: var(--gl-kritik-zemin); }
:root .bg-amber-950\/30 { background-color: var(--gl-yuksek-zemin); }
:root .bg-emerald-950\/40, :root .bg-emerald-950\/30 { background-color: var(--gl-dusuk-zemin); }
:root .bg-sky-900\/60, :root .bg-sky-900\/50, :root .bg-sky-500\/15, :root .bg-sky-500\/10 { background-color: var(--gl-marka-zemin); }
:root .bg-emerald-900\/60, :root .bg-emerald-900\/50 { background-color: var(--gl-dusuk-zemin); }
:root .bg-amber-900\/50, :root .bg-amber-900\/60 { background-color: var(--gl-yuksek-zemin); }
:root .border-sky-500\/50, :root .border-sky-500\/40, :root .border-sky-500\/30,
:root .border-sky-700\/60, :root .border-sky-700\/30, :root .border-sky-600\/40 { border-color: var(--gl-marka-kenar); }
:root .border-red-900\/50, :root .border-red-800\/60, :root .border-red-700\/60,
:root .border-rose-700\/40, :root .border-rose-500\/30 { border-color: var(--gl-kritik-kenar); }
:root .text-red-300\/80 { color: var(--gl-kritik-metin); }
:root .text-amber-400\/90, :root .text-amber-300\/80, :root .text-amber-100\/80 { color: var(--gl-yuksek-metin); }
:root .text-emerald-400\/90 { color: var(--gl-dusuk-metin); }
:root .text-sky-300\/80 { color: var(--gl-marka-guclu); }

/* --- kenarlar --- */
:root .border-slate-900, :root .border-slate-800 { border-color: var(--gl-kenar-sessiz); }
:root .border-slate-700, :root .border-slate-600 { border-color: var(--gl-kenar); }

/* --- metin (kontrast korunarak yeniden eşlendi) --- */
:root .text-white, :root .text-slate-100 { color: var(--gl-metin); }
:root .text-slate-200, :root .text-slate-300 { color: var(--gl-metin-2); }
:root .text-slate-400 { color: var(--gl-metin-2); }
:root .text-slate-500 { color: var(--gl-metin-3); }
:root .text-slate-600 { color: var(--gl-metin-3); }   /* eskiden AA altıydı → yükseltildi */

/* --- aciliyet / durum renkleri: token'lara bağlandı --- */
:root .text-red-500, :root .text-red-400, :root .text-red-300, :root .text-red-200 { color: var(--gl-kritik-metin); }
:root .text-amber-500, :root .text-amber-400, :root .text-amber-300, :root .text-amber-200 { color: var(--gl-yuksek-metin); }
:root .text-emerald-500, :root .text-emerald-400, :root .text-emerald-300, :root .text-emerald-200,
:root .text-green-400, :root .text-green-300 { color: var(--gl-dusuk-metin); }
:root .text-sky-500, :root .text-sky-400, :root .text-sky-300, :root .text-sky-200,
:root .text-blue-400, :root .text-cyan-400 { color: var(--gl-marka-guclu); }

:root .bg-red-950, :root .bg-red-900 { background-color: var(--gl-kritik-zemin); }
:root .bg-amber-950, :root .bg-amber-900 { background-color: var(--gl-yuksek-zemin); }
:root .bg-emerald-950, :root .bg-emerald-900 { background-color: var(--gl-dusuk-zemin); }
:root .bg-sky-950, :root .bg-sky-900 { background-color: var(--gl-marka-zemin); }
:root .border-red-800, :root .border-red-700 { border-color: var(--gl-kritik-kenar); }
:root .border-amber-800, :root .border-amber-700 { border-color: var(--gl-yuksek-kenar); }
:root .border-emerald-800, :root .border-emerald-700 { border-color: var(--gl-dusuk-kenar); }
:root .border-sky-600, :root .border-sky-500 { border-color: var(--gl-marka-kenar); }

/* --- dolu (aksiyon) renkleri: alarm gücünü koru, yalnız malzemeyi güncelle --- */
/* Bu butonlar eski şablonlarda `text-white` ile geliyor. Parlak tonlarda
   beyaz metin 3.5-4.5:1'de kalıyordu; degradeler ölçülerek koyulaştırıldı
   (hepsi >=5:1, AA ✓). Parlaklık gölge halesiyle telafi edildi. */
:root .bg-red-600, :root .bg-red-500 {
  background-image: linear-gradient(180deg, #DE2A21, #C11810);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 6px 24px rgba(255,69,58,.40);
}
:root .bg-emerald-600, :root .bg-emerald-500 {
  background-image: linear-gradient(180deg, #178034, #0F6628);
  box-shadow: 0 1px 0 rgba(255,255,255,.20) inset, 0 6px 22px rgba(48,209,88,.30);
}
:root .bg-sky-600, :root .bg-sky-500 {
  background-image: linear-gradient(180deg, #1A6FBE, #0E568F);
  box-shadow: 0 1px 0 rgba(255,255,255,.20) inset, 0 6px 22px rgba(78,168,255,.30);
}
:root .bg-amber-500 { background-image: linear-gradient(180deg, #FFBB4D, var(--gl-yuksek)); }

/* eski butonların köşeleri sistemle uyumlansın */
:root button, :root .rounded-lg { border-radius: var(--gl-r-md); }
:root .rounded-xl, :root .rounded-2xl { border-radius: var(--gl-r-lg); }
:root button { font-family: inherit; letter-spacing: var(--gl-tracking-orta); transition: var(--gl-gecis); }

/* eski form alanları */
:root select, :root input[type="text"], :root input[type="search"],
:root input[type="number"], :root input[type="date"], :root textarea {
  font-family: inherit;
  border-radius: var(--gl-r-sm);
}

/* --------------------------------------------------- 24. ERİŞİLEBİLİRLİK */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* Yüksek kontrast tercihi: cam saydamlığını bırak, okunurluğu al. */
@media (prefers-contrast: more) {
  :root {
    --gl-yuzey-0: rgba(0, 0, 0, .55);
    --gl-yuzey-1: rgba(10, 15, 24, .92);
    --gl-yuzey-2: rgba(14, 20, 31, .94);
    --gl-yuzey-3: rgba(20, 28, 42, .96);
    --gl-yuzey-yogun: rgba(6, 10, 16, .98);
    --gl-kenar: rgba(255,255,255,.34);
    --gl-metin-3: #A9B6C6;
  }
}

/* backdrop-filter desteklemeyen tarayıcı → opak yüzeylere düş */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --gl-yuzey-0: rgba(3, 5, 9, .92);
    --gl-yuzey-1: rgba(13, 19, 29, .90);
    --gl-yuzey-2: rgba(18, 25, 37, .93);
    --gl-yuzey-3: rgba(25, 34, 49, .95);
    --gl-yuzey-yogun: rgba(8, 12, 19, .97);
  }
}

@media print {
  body::before, body::after, .gl-navbar { display: none; }
  body { background: #fff; color: #000; }
  .gl-cam, .gl-kart, .gl-panel { box-shadow: none; border: 1px solid #ccc; backdrop-filter: none; }
}