/* ============================================================
   ORBITAL — Indigonix görünüm katmanı
   ============================================================
   app.html'de EN SON yüklenir, önceki 22 stylesheet'in üzerine
   yazar. theme-modern.css'in yerini alır; o dosya diskte duruyor,
   app.html'deki <link> geri alınınca eski tasarım eksiksiz döner.

   Yön: bilim kurgu film arayüzü değil, gerçek görev kontrol
   enstrümanı. Bir enstrümanı tanımlayan şey efektleri değil
   ızgarası ve kalibrasyonudur — bu dosyadaki her yarıçap ve her
   boşluk token'a bağlı, her metin/zemin çifti ölçülmüş.

   ÖLÇÜM NOTU: renk tonları hesaplanarak seçildi, göz kararıyla
   değil. Cam yüzeyler saydam olduğu için bir etiketin gerçek zemini
   arkasındaki nebulaya bağlı; nebula da döndüğü için kontrast SABİT
   DEĞİL, salınıyor. Bu yüzden iki şey birden yapılıyor: ambient
   yoğunluğu kısık tutuluyor (salınım aralığı daralıyor) ve metin
   tonları en kötü durum zemine göre seçiliyor.

   İÇİNDEKİLER
     1  Token — ölçek, yarıçap, boşluk
     2  Token — renk, karanlık
     3  Token — renk, açık
     4  Ambient zemin (nebula · yıldız · ızgara · vinyet)
     5  Tipografi kalibrasyonu
     6  Yüzeyler — enstrüman camı
     7  Kenar çubuğu ve gezinme
     8  Üst bar
     9  Düğmeler
    10  Rozetler
    11  Tablolar
    12  Formlar
    13  Sekmeler, modal, toast
    14  Kaydırma · seçim · odak
    15  Hareket azaltma
   ============================================================ */


/* ============================================================
   1  TOKEN — ÖLÇEK, YARIÇAP, BOŞLUK
   ============================================================
   4pt ızgara. Önceki sürüm üç yarıçap token'ı tanımlayıp 22
   bildirimin 20'sinde onları görmezden geliyordu ve tek bir giriş
   kartında on yedi ilgisiz boşluk değeri vardı. Enstrüman
   estetiğinin tamamı buna dayanıyor: ızgarası olmayan bir panel
   enstrüman değil, dekordur.
   ============================================================ */

:root {
  /* Yarıçap — dört değer, hepsi kullanımda, başka literal yok. */
  --r-sm:   8px;   /* küçük denetimler: btn-sm, sekmeler */
  --r-md:  12px;   /* düğmeler, girdiler, gezinme öğeleri */
  --r-lg:  16px;   /* kartlar, paneller, modal */
  --r-xl:  20px;   /* yalnız hero yüzeyi: giriş kartı */
  --r-pill: 999px;

  /* base.css ve 21 stylesheet bu üç ismi kullanıyor — ızgaraya bağlanıyorlar. */
  --radius-sm: var(--r-sm);
  --radius:    var(--r-md);
  --radius-lg: var(--r-lg);

  /* Boşluk — 4pt katları. */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI",
          Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}


/* ============================================================
   2  TOKEN — RENK, KARANLIK
   ============================================================ */

:root {
  /* --- Spektrum. İsimler ORB- ön ekli olmak ZORUNDA: styles/agents.css
     kendi --indigo / --indigo-2 token'larını tanımlıyor (Agent Indigo'nun
     kimlik moru, #43219e). Bu dosya sonra yüklendiği için düz --indigo
     kullanmak o rengi eziyordu ve Agent Indigo kartının alt yarısı Agent
     Cornflower ile aynı maviye dönüyordu — dört ajanın hem tonda hem
     parlaklıkta ayrışması agents.css'in tek varlık sebebi. Ön ek
     çakışmayı kalıcı olarak imkânsız kılıyor. */
  --orb-indigo: #4f7ffb;
  --orb-violet: #8b5cf6;
  --orb-plasma: #22d3ee;

  /* İmza gradyan CONIC, linear değil. Linear gradyan 2015 SaaS'ı
     çağrıştırıyor; conic yörünge ve enerji çağrıştırıyor. */
  --spectrum: conic-gradient(from 210deg at 50% 50%,
      var(--orb-indigo), var(--orb-violet) 30%, var(--orb-plasma) 62%, var(--orb-indigo));
  --spectrum-line: linear-gradient(90deg,
      var(--orb-indigo), var(--orb-violet) 52%, var(--orb-plasma));

  /* ÜZERİNDE BEYAZ METİN OLAN yüzeyler için ayrı, koyultulmuş rampa.
     Parlak sürüm ölçüldüğünde beyaz metin 4.26:1 (orta durak) ve
     1.93:1 (camgöbeği uç) veriyordu — normal boyut metin için gereken
     4.5:1'in çok altı. Bu üç durak beyazla en kötü noktada 5.3:1
     veriyor. Parlak spektrum yalnız metin taşımayan yüzeylerde
     (şeritler, aktif çubuk, marka bloğu) duruyor. */
  --spectrum-btn: linear-gradient(90deg, #3b63d9, #6d3fd6 52%, #15748a);

  /* --- Zemin rampası. Nötr siyah değil mavi-siyah: nötr siyah ekranı
     "kapalı" gösteriyor, mavi-siyah "derin" gösteriyor. */
  --bg-0: #05070f;
  --bg-1: #0a0e1b;
  --bg-2: #101728;
  --bg-3: #182033;
  --bg-4: #1e293f;

  --line:   rgba(255, 255, 255, 0.075);
  --line-2: rgba(255, 255, 255, 0.14);

  /* --- Metin. Cam dolgu üzerinde ölçüldü.
     Dördüncü bir ton YOK: saydam zeminde dört ayrı metin tonuna yer
     yok, dördüncüsü kaçınılmaz olarak AA'nın altına düşüyor. Önceki
     sürümde --text-3 (#545e75) yer tutucuları ve marka alt satırını
     2.1–2.5:1 aralığında boyuyordu. Artık --text-2 ile aynı bantta. */
  --text-0: #eef3ff;
  --text-1: #b9c4da;
  --text-2: #8b96ae;
  --text-3: #8792ab;

  --brand: var(--orb-indigo);
  --brand-2: #86aaff;
  --brand-soft: rgba(79, 127, 251, 0.14);
  --brand-border: rgba(79, 127, 251, 0.42);
  --accent-grad: var(--spectrum-line);

  --ok: #34d399;
  --ok-soft: rgba(52, 211, 153, 0.13);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.14);
  --danger: #fb7185;
  --danger-soft: rgba(251, 113, 133, 0.14);
  --info: #38bdf8;
  --info-soft: rgba(56, 189, 248, 0.13);
  --purple: #a78bfa;
  --purple-soft: rgba(167, 139, 250, 0.14);
  --pink: #f472b6;
  --pink-soft: rgba(244, 114, 182, 0.14);

  /* --- Cam yüzey reçetesi.
     backdrop-filter: blur() BİLİNÇLİ OLARAK YOK. Kartların arkasında
     duran şey içerik değil, düşük frekanslı bir gradyan — onu
     bulanıklaştırmak görünürde hiçbir şey değiştirmiyor, ama zemin
     döndüğü için compositor önbelleği her karede geçersizleşiyor ve
     10 ayrı bölge saniyede 60 kez yeniden bulanıklaştırılıyordu.
     saturate() çekirdeksiz bir piksel matrisi: rengi aynı şekilde
     canlandırıyor, önbellek baskısı yok.
     Gerçek blur yalnız arkasında GERÇEK İÇERİK olan iki yerde:
     .modal-backdrop ve .login-card (yıldız alanı üzerinde). */
  /* Dolgu KOYU tabanlı, saydam beyaz değil. Ölçüm: saf beyaz tül
     (%5.8) kullanıldığında kartın içi arkasından geçen buluta göre
     değişiyordu — üstteki KPI kartları 4.9:1 verirken nebulanın
     parlak bölgesine denk gelen büyük kartlar 3.2:1'e düşüyordu.
     %20 civarı geçirgenlik bulutun RENGİNİ hâlâ içeri alıyor (cam
     hissi orada), ama PARLAKLIK salınımını kapatıyor. Ambient
     kartların arasında ve çevresinde görünür — metin kartın
     üstünde durur; gösteri ile okuma alanı ayrılıyor. */
  --glass-fill: linear-gradient(180deg, rgba(16,22,40,.72), rgba(10,14,27,.84));
  --glass-edge: linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,.055) 42%, rgba(255,255,255,.02));
  --glass-sat: saturate(150%);
  --reticle: rgba(255, 255, 255, 0.20);

  --shadow:    0 1px 2px rgba(0,0,0,.35), 0 8px 24px -8px rgba(0,0,0,.55);
  --shadow-lg: 0 2px 8px rgba(0,0,0,.4), 0 28px 70px -20px rgba(0,0,0,.75);
  --glow: 0 0 0 1px rgba(79,127,251,.3), 0 12px 38px -12px rgba(79,127,251,.55);

  /* Ambient zeminin tek ölçek düğmesi — ve okunabilirliğin doğrudan
     girdisi. Yüzeyler saydam olduğu için her mikro etiketin gerçek
     zemini arkasındaki buluta bağlı, bulut da 150sn'de bir tur
     atıyor. Yüksek yoğunlukta ölçülen kontrast 4.17:1 ile 5.30:1
     arasında SALINIYORDU: etiketler dakikada iki kez AA'nın altına
     iniyordu. Kısık tutulunca salınım aralığı kapanıyor. */
  --ambient-intensity: .34;

  /* Fener katmanının taban gücü. Işıklar BOĞUK olmalı: gradyan
     alfaları zaten .24–.30, bu çarpanla ekranda .19–.24'e iniyor.
     Daha yükseği metnin arkasında dalgalanan bir kontrast üretiyor —
     ölçülen değerin saniyede değişmesi okumayı yoruyor. */
  --lamp: .8;
}


/* ============================================================
   3  TOKEN — RENK, AÇIK
   ============================================================
   Aynı sistem, ters yönde. "Gündüz yörüngesi": zemin hâlâ renk
   taşıyor, sadece ışık yukarıdan geliyor — ve çok daha kısık,
   çünkü açık zeminde aynı bulut yoğunluğu üst barı çamurlu bir
   leylak bandına çeviriyordu.
   ============================================================ */

:root[data-theme="light"] {
  --bg-0: #eceff7;
  --bg-1: #ffffff;
  --bg-2: #f4f7fc;
  --bg-3: #e7ecf6;
  --bg-4: #ffffff;

  --line:   rgba(14, 22, 41, 0.10);
  --line-2: rgba(14, 22, 41, 0.17);

  --text-0: #0b1222;
  --text-1: #37425a;
  /* Ölçüm: #59647d beyaz üzerinde 6.5:1 veriyordu ama üst bardaki
     leylak bant üzerinde 3.76:1'e düşüyordu. Bant artık opak
     (bölüm 8) ve vinyet kısıldı, dolayısıyla bu ton her yüzeyde
     geçerli. */
  --text-2: #55607a;
  --text-3: #5f6a82;

  --brand: #2f5fd8;
  --brand-2: #2350c4;
  --brand-soft: rgba(47, 95, 216, 0.10);
  --brand-border: rgba(47, 95, 216, 0.34);

  --ok: #0f7a55;
  --ok-soft: rgba(15, 122, 85, 0.10);
  --warn: #92610a;
  --warn-soft: rgba(146, 97, 10, 0.12);
  --danger: #c02c48;
  --danger-soft: rgba(192, 44, 72, 0.10);
  --info: #0a6fa8;
  --info-soft: rgba(10, 111, 168, 0.10);
  --purple: #6d43d4;
  --purple-soft: rgba(109, 67, 212, 0.11);
  --pink: #b83280;
  --pink-soft: rgba(184, 50, 128, 0.11);

  /* Dekoratif spektrum açık temada bir tık koyultuluyor: aynı
     doygunluk beyaz zeminde flüoresan gibi duruyor. Önceki sürümde
     bu üç token açık temada hiç yeniden tanımlanmamıştı. */
  --orb-indigo: #3f6ae4;
  --orb-violet: #7343e0;
  --orb-plasma: #1c9fc4;

  --glass-fill: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82));
  --glass-edge: linear-gradient(145deg, rgba(14,22,41,.16), rgba(14,22,41,.05) 45%, rgba(14,22,41,.03));
  --glass-sat: saturate(110%);
  --reticle: rgba(14, 22, 41, 0.18);

  --shadow:    0 1px 2px rgba(11,18,34,.06), 0 10px 28px -10px rgba(11,18,34,.16);
  --shadow-lg: 0 2px 8px rgba(11,18,34,.08), 0 30px 66px -22px rgba(11,18,34,.26);
  --glow: 0 0 0 1px rgba(47,95,216,.3), 0 12px 34px -14px rgba(47,95,216,.45);

  --ambient-intensity: .26;
  /* Açık zeminde aynı ışık "leke" gibi duruyor; üçte bir güçte. */
  --lamp: .26;
}


/* ============================================================
   4  AMBIENT ZEMİN
   ============================================================
   Dört katman, hiçbiri tıklama yakalamıyor.

   Neden pseudo-element? rebuildShell() ve renderLoginScreen()
   document.body / #app içeriğini komple siliyor. Pseudo-element'ler
   bu silmeden etkilenmiyor. Yıldız canvas'ı gerçek bir düğüm olduğu
   için starfield.js her geçişte yeniden takıyor.

   Katman sırası tek bir kök yığın bağlamında çözülüyor (body statik):
     body::before/::after  z0  nebula
     #orbital-stars        z1  yıldızlar
     html::before          z2  ızgara
     html::after           z2  vinyet (ağaç sırasıyla ızgaranın üstünde)
     #app                  z3  gerçek arayüz
   ============================================================ */

/* Katman 1 — nebula.
   Boyut hesapla seçildi: dönen bir karenin ekranı her açıda örtmesi
   için kenarın görüntü alanının köşegenine eşit olması yeterli
   (1440×900'de 1698px = 118vmax), üstüne animasyondaki 1.14 ölçek
   payı. 120vmax bunu karşılıyor. Önceki 210vmax gereksizdi: aynı
   görüntü için üç katı piksel demekti ve will-change ile birlikte
   katman başına yüz megabaytlarca kalıcı GPU dokusu ayırtıyordu. */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 50%; left: 50%;
  width: 120vmax; height: 120vmax;
  margin: -60vmax 0 0 -60vmax;
  pointer-events: none;
  z-index: 0;
  opacity: var(--ambient-intensity);
  will-change: transform;
}

/* Bulutların yarıçapı dar. Geniş yarıçaplı gradyanlar birbirine
   karışıp ekranı tek renge boyuyor — "uzay" değil "renkli cam"
   oluyor. Dar bulutlar aralarında KARANLIK BOŞLUK bırakıyor;
   derinlik ışıktan değil, ışığın olmadığı yerden geliyor. */
body::before {
  background:
    radial-gradient(circle at 30% 27%, rgba(79,127,251,.46), transparent 30%),
    radial-gradient(circle at 66% 39%, rgba(139,92,246,.40), transparent 27%);
  animation: orbital-drift-a 150s linear infinite;
}

body::after {
  background:
    radial-gradient(circle at 60% 70%, rgba(34,211,238,.24), transparent 26%),
    radial-gradient(circle at 36% 63%, rgba(99,102,241,.30), transparent 32%);
  animation: orbital-drift-b 210s linear infinite reverse;
}

@keyframes orbital-drift-a {
  from { transform: rotate(0deg)   scale(1);    }
  50%  { transform: rotate(180deg) scale(1.14); }
  to   { transform: rotate(360deg) scale(1);    }
}
@keyframes orbital-drift-b {
  from { transform: rotate(0deg)   scale(1.1); }
  50%  { transform: rotate(180deg) scale(.94); }
  to   { transform: rotate(360deg) scale(1.1); }
}

/* Katman 2 — yıldızlar. js/services/starfield.js tarafından takılıyor. */
#orbital-stars {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: calc(var(--ambient-intensity) * 2.4);
}
/* Açık temada beyaz yıldız beyaz zeminde görünmüyor; "gündüz"
   varyantında yıldız zaten anlamsız. */
:root[data-theme="light"] #orbital-stars { display: none; }

/* Katman 3 — ızgara. Ölçek referansı: sadece bulut ve yıldız olsaydı
   zemin "yüzer" gibi dururdu, mesafe hissi olmazdı. Maske ızgarayı
   merkeze doğru soldurup kenarlarda bitiriyor. */
html::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px) 0 0 / 100% 64px,
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px) 0 0 / 64px 100%;
  mask-image: radial-gradient(120% 95% at 50% 42%, #000 18%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 95% at 50% 42%, #000 18%, transparent 72%);
}
:root[data-theme="light"] html::before {
  background:
    linear-gradient(rgba(14,22,41,.04) 1px, transparent 1px) 0 0 / 100% 64px,
    linear-gradient(90deg, rgba(14,22,41,.04) 1px, transparent 1px) 0 0 / 64px 100%;
}

/* Katman 4 — vinyet. Ayrı katman olması şart: ızgaranın maskesi
   kenarları siliyor, vinyetin işi ise tam olarak kenarları
   koyultmak. İkisi tek elemanda birleşince maske vinyeti tam
   gerektiği yerden yok ediyordu. */
html::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(120% 90% at 50% 44%,
      transparent 34%,
      rgba(3,5,12,.40) 70%,
      rgba(2,3,9,.80) 100%);
}
/* Açık temada vinyet neredeyse yok: daha güçlü bir sürüm sayfanın
   üst üçte birini çamurlu bir leylak bandına çeviriyordu. */
:root[data-theme="light"] html::after {
  background: radial-gradient(120% 90% at 50% 44%,
      transparent 52%, rgba(126,140,170,.07) 100%);
}

#app { position: relative; z-index: 3; }

/* ------------------------------------------------------------
   Katman 5 — FENERLER (her sayfada, arkada yanıp sönen boğuk ışık)
   ------------------------------------------------------------
   Nebula 150–210 saniyede bir tur atıyor: "hareket ediyor" ama göz
   bunu fark etmiyor. Fenerler saniyeler ölçeğinde nefes alıyor,
   fark edilen canlılık buradan geliyor.

   #app'in pseudo-element'leri seçildi çünkü #app hem giriş ekranında
   hem uygulama kabuğunda var, ve rebuildShell() onu yeniden ürettiği
   için katman her iki durumda da kendiliğinden geri geliyor. z-index
   negatif: #app'in kendi yığın bağlamı içinde içeriğin ARKASINA
   düşüyor, ama vinyetin önüne — ışık sisin içinden geliyor gibi.

   Animasyon yalnız opacity: derleyici bunu kompozitörde çeviriyor,
   tam ekran bir katman için yeniden boyama olmuyor. İki katmanın
   turları 7s ve 11s; ortak katları 77 saniye, yani desen pratikte
   kendini tekrar etmiyor.
   ------------------------------------------------------------ */
#app::before,
#app::after {
  content: "";
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: -1;
  will-change: opacity;
}

#app::before {
  background:
    radial-gradient(34vmax 34vmax at 14% 24%, rgba(79,127,251,.30), transparent 66%),
    radial-gradient(28vmax 28vmax at 84% 15%, rgba(34,211,238,.24), transparent 64%),
    radial-gradient(30vmax 30vmax at 63% 88%, rgba(139,92,246,.26), transparent 66%);
  opacity: var(--lamp);
  animation: orb-lamp-a 7s ease-in-out infinite;
}

#app::after {
  background:
    radial-gradient(32vmax 32vmax at 30% 79%, rgba(139,92,246,.26), transparent 66%),
    radial-gradient(26vmax 26vmax at 93% 57%, rgba(79,127,251,.28), transparent 64%);
  opacity: calc(var(--lamp) * .85);
  animation: orb-lamp-b 11s ease-in-out infinite;
}

/* Sönme dibe kadar inmiyor (.45 / .5). Tam sönüp yanan bir ışık
   "arıza" gibi okunuyor; sığ salınım "uzak" gibi okunuyor. */
@keyframes orb-lamp-a {
  0%,100% { opacity: calc(var(--lamp) * .5); }
  50%     { opacity: var(--lamp); }
}
@keyframes orb-lamp-b {
  0%,100% { opacity: calc(var(--lamp) * .85); }
  45%     { opacity: calc(var(--lamp) * .32); }
}

/* Sayfaya GİRİŞ parlaması. navigate() sınıfı her yönlendirmede
   söküp takıyor, animasyon baştan başlıyor. Listede SONRA geldiği
   için süresi boyunca opacity'yi o yönetiyor; bitince fill-mode
   olmadığından denetim sessizce nabza geri dönüyor. */
#app.route-enter::before {
  animation: orb-lamp-a 7s ease-in-out infinite,
             orb-lamp-enter 1400ms var(--ease-out) 1;
}
#app.route-enter::after {
  animation: orb-lamp-b 11s ease-in-out infinite,
             orb-lamp-enter 1400ms var(--ease-out) 120ms 1;
}
@keyframes orb-lamp-enter {
  0%   { opacity: 0; }
  18%  { opacity: calc(var(--lamp) * 1.85); }
  100% { opacity: calc(var(--lamp) * .6); }
}

/* Giriş ekranında sahnede veri yok; fenerler tam güçte çalışabiliyor. */
:root.is-login { --lamp: 1; }

/* Yüzeyler saydamlaşıyor ki arkadaki zemin görünsün. */
.main { background: transparent; }
body { background: var(--bg-0); }


/* ============================================================
   5  TİPOGRAFİ KALİBRASYONU
   ============================================================
   Harici font yüklenemiyor (CSP default-src 'self'), dolayısıyla
   karakter fonttan değil kalibrasyondan geliyor. Tek kural, konudan
   türetilmiş: CAM KOKPİT MANTIĞI. Sans yalnız düzyazı ve başlıklar
   için; ÖLÇÜLEN her şey — etiketler, sayılar, kimlikler, süreler,
   zaman damgaları — mono. Gerçek uçuş enstrümanları da böyle:
   okunacak metin değişken genişlikte, ölçülecek değer sabit
   genişlikte.

   .badge bilinçli olarak DIŞARIDA: uygulamanın genel etiket
   bileşeni ve çoğunlukla "Waiting for Customer", "Support Manager"
   gibi düz yazı taşıyor — veri değil. Ayrıca nowrap olduğu için
   mono'ya alınınca prose etiketleri ~%12 genişletip Tickets
   tablosunu 1440px'te yatay kaydırmaya düşürüyordu.
   ============================================================ */

body {
  font-family: var(--font);
  font-size: 13.5px;
  letter-spacing: -0.004em;
  text-rendering: optimizeLegibility;
}

/* Mikro etiketler. 10px büyük harf + geniş harf aralığı, arayüzdeki
   en güçlü "teknik cihaz" sinyali — ve bedava: sadece tipografi. */
.stat-label,
.sidebar-section-title,
.login-demo-extra-title,
.detail-section h3,
.detail-row .label,
.form-row label,
.ai-section .label,
.kb-src-label,
.tool-tag,
table.data thead th {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
}
/* Modal ve detay panellerindeki etiketler tabloya göre biraz daha
   büyük: tek başlarına duruyorlar, sıkıştırılmış bir sütun başlığı
   bağlamında değiller. */
.detail-section h3,
.detail-row .label,
.form-row label,
.ai-section .label,
.kb-src-label { font-size: 10px; letter-spacing: .13em; margin-bottom: var(--sp-2); }
/* .tool-tag rengini agents.css'ten alıyor — yalnız font ve ölçek devralınıyor. */
.tool-tag { color: inherit; letter-spacing: .13em; }

/* Ölçülen her şey mono ve tabular: sütun halinde alt alta gelen
   sayılar birbirini tutuyor, tablo kaydırılırken rakamlar zıplamıyor. */
.stat-value {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  margin-top: var(--sp-2);
  color: var(--text-0);
}
.stat-delta,
.nav-badge,
.login-demo-count,
.sla-pill,
table.data .id-cell,
.event-row .ts {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
/* Mono, dört haneli süreleri ("Breached 1057h") sans'a göre birkaç
   piksel genişletiyor ve 130px'lik SLA sütununda ikinci satıra
   kırıyordu. Süre tek parça bir değer; bölünmemeli. */
.sla-pill { white-space: nowrap; }

.page-title {
  font-size: 21px;
  font-weight: 680;
  letter-spacing: -0.028em;
  color: var(--text-0);
}
.page-subtitle { font-size: 12px; color: var(--text-2); letter-spacing: 0; }
.card-title { font-size: 13.5px; font-weight: 640; letter-spacing: -0.015em; }
.card-sub { font-size: 11px; color: var(--text-2); }


/* ============================================================
   6  YÜZEYLER — ENSTRÜMAN CAMI
   ============================================================
   Üç detay birlikte çalışıyor: yarı saydam dolgu, GRADYAN saç teli
   kenarlık (sol üstte parlak, sağ altta sönük — ışığın yukarıdan
   geldiğini söylüyor) ve iç üst kenar ışığı. Üçüncüsü camın
   aydınlanan kenarı; tek başına en çok "pahalı" hissettiren detay.

   Kenarlık tekniği: padding-box dolgu + border-box gradyan. Düz
   border-color ile gradyan kenarlık yapılamıyor, bu yöntem ise
   border-radius ile sorunsuz çalışıyor.

   .modal bu kuralın DIŞINDA — bkz. bölüm 13.
   ============================================================ */

.card,
.stat-card {
  border: 1px solid transparent;
  background: var(--glass-fill) padding-box, var(--glass-edge) border-box;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: var(--glass-sat);
  -webkit-backdrop-filter: var(--glass-sat);
}
:root[data-theme="light"] .card,
:root[data-theme="light"] .stat-card { box-shadow: var(--shadow); }

.card { position: relative; padding: var(--sp-5); }

.stat-card {
  position: relative;
  padding: var(--sp-5);
  overflow: hidden;
  transition: transform .22s var(--ease-out),
              box-shadow .22s var(--ease);
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.12);
}

/* Üstteki şerit — metin taşımıyor, dolayısıyla parlak spektrum. */
.stat-card::before {
  height: 2px;
  background: var(--spectrum-line);
  opacity: .9;
}
.stat-card.danger::before { background: linear-gradient(90deg, var(--danger), transparent 82%); }
.stat-card.warn::before   { background: linear-gradient(90deg, var(--warn),   transparent 82%); }
.stat-card.ok::before     { background: linear-gradient(90deg, var(--ok),     transparent 82%); }
.stat-card.purple::before { background: linear-gradient(90deg, var(--purple), transparent 82%); }

/* --- RETİKÜL KÖŞELERİ ---
   Nişangah benzeri L biçimli saç teli çizgiler. Ölçü giriş kartıyla
   AYNI (--sp-3): tek bir imza detayının iki yerde iki farklı değer
   taşıması, imzayı imza olmaktan çıkarıyordu. */
.stat-card::after {
  content: "";
  position: absolute;
  inset: var(--sp-3);
  pointer-events: none;
  background:
    linear-gradient(var(--reticle), var(--reticle)) top left    / var(--sp-3) 1px no-repeat,
    linear-gradient(var(--reticle), var(--reticle)) top left    / 1px var(--sp-3) no-repeat,
    linear-gradient(var(--reticle), var(--reticle)) bottom right/ var(--sp-3) 1px no-repeat,
    linear-gradient(var(--reticle), var(--reticle)) bottom right/ 1px var(--sp-3) no-repeat;
  opacity: .55;
  transition: opacity .22s var(--ease);
}
.stat-card:hover::after { opacity: 1; }

.stat-icon { opacity: .28; font-size: 19px; }


/* ============================================================
   7  KENAR ÇUBUĞU VE GEZİNME
   ============================================================ */

.sidebar {
  background: linear-gradient(180deg, rgba(10,14,27,.9), rgba(5,7,15,.96));
  border-right: 1px solid var(--line);
}
:root[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.92));
}

.brand { border-bottom: 1px solid var(--line); padding: var(--sp-5) var(--sp-4) var(--sp-4); }
.brand-logo {
  border-radius: var(--r-md);
  background: var(--spectrum);
  box-shadow: 0 8px 22px -6px rgba(79,127,251,.6), inset 0 1px 0 rgba(255,255,255,.3);
}
.brand-name { font-size: 15.5px; font-weight: 660; letter-spacing: -0.025em; }
.brand-sub { font-size: 10.5px; color: var(--text-2); }

/* Aktif öğe: gradyan dolgu + sol kenarda ışıyan çubuk. Fare
   üstündeyken 2px kayma — tıklanabilirliği renk değişiminden daha
   net anlatıyor, çünkü hareket dikkat çekiyor, renk çekmiyor. */
.nav-item {
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: 2px;
  font-size: 12.5px;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.nav-item:hover { background: rgba(255,255,255,.055); transform: translateX(2px); }
:root[data-theme="light"] .nav-item:hover { background: rgba(14,22,41,.05); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(79,127,251,.22), rgba(139,92,246,.09) 68%, transparent);
  color: var(--brand-2);
  font-weight: 600;
}
:root[data-theme="light"] .nav-item.active {
  background: linear-gradient(90deg, rgba(47,95,216,.13), rgba(109,67,212,.06) 68%, transparent);
  color: var(--brand-2);
}
.nav-item.active::before {
  left: -10px; top: 5px; bottom: 5px; width: 3px;
  background: var(--spectrum-line);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 14px rgba(79,127,251,.8);
}
.nav-icon { opacity: .7; }
.nav-item.active .nav-icon { opacity: 1; }

.nav-badge {
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
}
:root[data-theme="light"] .nav-badge { background: rgba(14,22,41,.06); }
.nav-item.active .nav-badge {
  background: var(--brand-soft); color: var(--brand-2); border-color: var(--brand-border);
}
.nav-badge.red { background: var(--danger-soft); color: var(--danger); border-color: rgba(251,113,133,.3); }

.sidebar-section-title { padding: 0 var(--sp-3) var(--sp-2); }

.user-chip {
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.user-chip:hover { background: rgba(255,255,255,.08); border-color: var(--line-2); }
:root[data-theme="light"] .user-chip { background: rgba(14,22,41,.04); }
:root[data-theme="light"] .user-chip:hover { background: rgba(14,22,41,.07); }
/* Baş harfler beyaz METİN — koyultulmuş rampa şart. */
.user-avatar { background: var(--spectrum-btn); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }

.lang-toggle, .theme-toggle {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
}
:root[data-theme="light"] .lang-toggle,
:root[data-theme="light"] .theme-toggle { background: rgba(14,22,41,.045); }
.lang-toggle button.active,
.theme-toggle button.active {
  background: var(--spectrum-btn);
  color: #fff;
  box-shadow: 0 2px 10px -3px rgba(59,99,217,.7);
}


/* ============================================================
   8  ÜST BAR
   ============================================================
   Açık temada OPAK. Saydam bir üst bar, arkasındaki bulut + vinyet
   ile birleşince orta tonlu bir leylak bandına dönüşüyordu ve
   üzerindeki alt başlık 3.76:1'e düşüyordu — sayfadaki en üstteki
   metin, her ekranda görünür. Karanlık temada zemin zaten koyu
   olduğu için saydam kalabiliyor.
   ============================================================ */

.topbar {
  background: transparent;
  border-bottom: 1px solid var(--line);
}
:root[data-theme="light"] .topbar {
  background: rgba(255,255,255,.86);
}


/* ============================================================
   9  DÜĞMELER
   ============================================================ */

.btn {
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4);
  font-size: 12.5px;
  font-weight: 560;
  letter-spacing: -0.008em;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease),
              background .16s var(--ease), border-color .16s var(--ease),
              filter .16s var(--ease);
}
.btn:active { transform: translateY(0) scale(.985); }
.btn-sm { padding: var(--sp-1) var(--sp-3); font-size: 11.5px; border-radius: var(--r-sm); }

.btn-primary {
  background: var(--spectrum-btn);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 12px -3px rgba(59,99,217,.6), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover {
  background: var(--spectrum-btn);
  filter: brightness(1.14) saturate(1.05);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -8px rgba(59,99,217,.7), inset 0 1px 0 rgba(255,255,255,.28);
}

.btn-secondary { background: rgba(255,255,255,.07); border-color: var(--line-2); color: var(--text-0); }
.btn-secondary:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); }
:root[data-theme="light"] .btn-secondary { background: rgba(14,22,41,.05); }
:root[data-theme="light"] .btn-secondary:hover { background: rgba(14,22,41,.09); }

.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--text-1); }
.btn-ghost:hover { background: rgba(255,255,255,.06); border-color: var(--brand-border); color: var(--text-0); }
:root[data-theme="light"] .btn-ghost:hover { background: rgba(14,22,41,.05); }


/* ============================================================
   10  ROZETLER
   ============================================================
   Saydam dolgu + ince kenarlık: dolu renkli etiketler tabloda çok
   bağırıyordu. Font sans — gerekçe bölüm 5'te.
   ============================================================ */

.badge {
  border-radius: var(--r-pill);
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid transparent;
}
.badge.brand  { border-color: rgba(79,127,251,.3);  }
.badge.ok     { border-color: rgba(52,211,153,.3);  }
.badge.warn   { border-color: rgba(251,191,36,.3);  }
.badge.danger { border-color: rgba(251,113,133,.3); }
.badge.info   { border-color: rgba(56,189,248,.3);  }
.badge.purple { border-color: rgba(167,139,250,.3); }
.badge.pink   { border-color: rgba(244,114,182,.3); }


/* ============================================================
   11  TABLOLAR
   ============================================================
   Satır ayırıcılar zayıfladı, satır yüksekliği arttı. Yoğun tablo
   "veri dökümü" gibi görünür; nefes alan tablo "ürün" gibi.

   NOT: tables.css thead th'ye position:sticky veriyor ve buradaki
   saydam zemin onunla çelişir. Bugün etkisiz, çünkü .table-wrap'in
   yüksekliği auto ve dikeyde hiç kaymıyor. .table-wrap'e bir gün
   max-height eklenirse satırlar başlığın içinden geçer; o gün ya
   opak bir başlık zemini ya da sticky'nin kaldırılması gerekir.
   ============================================================ */

table.data thead th {
  background: transparent;
  border-bottom: 1px solid var(--line-2);
  padding: 11px var(--sp-3);
}
table.data tbody td { padding: var(--sp-3); border-bottom: 1px solid var(--line); }
table.data tbody tr { transition: background .14s var(--ease); }
table.data tbody tr:hover { background: rgba(79,127,251,.075); }
table.data .id-cell { color: var(--text-2); font-size: 11px; }


/* ============================================================
   12  FORMLAR
   ============================================================
   Seçici, işaret kutusu / radyo / kaydırıcı / dosya / renk
   girdilerini DIŞARIDA bırakmak zorunda: bu tiplerde background ve
   border vermek yerel çizimi eziyor, border-radius ise ~13px'lik
   bir kutuyu daireye çevirip işaret kutusunu radyo düğmesi gibi
   gösteriyor. Uygulamada 11 işaret kutusu, 2 kaydırıcı ve 1 dosya
   girdisi var. tables.css bu korumayı zaten uyguluyordu (satır 41);
   aynı koruma burada da olmak zorunda.
   ============================================================ */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
select,
textarea {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--text-0);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
:root[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
:root[data-theme="light"] select,
:root[data-theme="light"] textarea { background: #fff; }

input::placeholder, textarea::placeholder { color: var(--text-3); }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):focus,
select:focus,
textarea:focus {
  border-color: var(--brand) !important;
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 3px var(--brand-soft);
  outline: none;
}
:root[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):focus,
:root[data-theme="light"] select:focus,
:root[data-theme="light"] textarea:focus { background: #fff; }


/* ============================================================
   13  SEKMELER · MODAL · TOAST
   ============================================================ */

.tab { border-radius: var(--r-sm) var(--r-sm) 0 0; transition: color .16s var(--ease), background .16s var(--ease); }
.tab:hover { background: rgba(255,255,255,.045); }
:root[data-theme="light"] .tab:hover { background: rgba(14,22,41,.04); }
.tab.active { border-bottom-color: var(--brand); color: var(--brand-2); }

/* Arka planı koyultmak yerine bulanıklaştırmak, altındaki arayüzün
   kaybolmadan geride kalmasını sağlıyor. Uygulamadaki iki gerçek
   blur'dan biri bu — burada bulanıklaşan şey gerçekten içerik. */
.modal-backdrop {
  background: rgba(3,5,12,.55);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
:root[data-theme="light"] .modal-backdrop { background: rgba(120,134,166,.35); }

/* Modal OPAK. Cam reçetesi buraya da uygulanmıştı ve her form
   iletişim kutusunu %5.8 beyaz bir tüle çeviriyordu: altındaki
   kartların kenarları ve şeritleri metin alanlarının arkasından
   geçiyordu. Diyalog, tek başına opak olmak ZORUNDA olan yüzeydir —
   üzerinde veri girilir. */
.modal {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


/* ============================================================
   14  KAYDIRMA · SEÇİM · ODAK
   ============================================================ */

::selection { background: rgba(79,127,251,.35); color: var(--text-0); }

* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
:root[data-theme="light"] * { scrollbar-color: rgba(14,22,41,.2) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); background-clip: content-box; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(14,22,41,.2); background-clip: content-box; }

/* Klavye odağı her zaman görünür.
   border-radius BİLİNÇLİ OLARAK YOK: buraya konulunca hap biçimli
   düğmeler (dil seçici, tema anahtarı) odaklandığında köşeli hale
   geliyordu — klavyeyle gezen kullanıcı her durakta şeklin
   değiştiğini görüyordu. Anahat zaten elemanın kendi yarıçapını
   izliyor. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
}

/* Açılış göstergesi de yeni dili konuşsun. */
.boot-splash { background: transparent; }
.boot-logo { background: var(--spectrum); border-radius: var(--r-lg); box-shadow: 0 12px 34px -8px rgba(79,127,251,.65); }
.boot-name { font-family: var(--mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--text-2); }
.boot-bar { background: rgba(255,255,255,.08); }
.boot-bar span { background: var(--spectrum-line); }


/* ============================================================
   15  HAREKET AZALTMA
   ============================================================
   Buradaki hareketlerin hepsi süs; hiçbiri bilgi taşımıyor.
   starfield.js aynı tercihi kendi tarafında okuyor ve ayrıca
   tercih DEĞİŞTİĞİNDE de dinliyor.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
  #app::before, #app::after { animation: none; }
  .nav-item, .stat-card, .btn, table.data tbody tr, .tab { transition: none; }
  .nav-item:hover, .stat-card:hover, .btn-primary:hover, .btn-secondary:hover { transform: none; }
}


/* ============================================================
   16  SLA ORBIT — dashboard'ın tek görsel enstrümanı
   ============================================================
   Okuma kuralı tek cümle: MERKEZE YAKIN OLAN ACİLDİR. Halkalar
   ufuk (24s · 72s · 7g), merkez "şimdi", iç kızıl bölge ise SLA'sı
   çoktan geçmiş biletler.

   Renk burada bilgi taşıyor, dekorasyon değil — bu yüzden semantik
   token'lar kullanılıyor ve marka spektrumu yalnız radar
   süpürmesinde görünüyor.
   ============================================================ */

.orbit-wrap {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-10);
  padding: var(--sp-2) 0 var(--sp-1);
}
.orbit { width: 340px; height: 340px; flex-shrink: 0; overflow: visible; }

/* --- halkalar --- */
.orbit-ring { fill: none; stroke: var(--line-2); stroke-width: 1; }
.orbit-ring-breach { stroke: var(--danger); stroke-opacity: .45; stroke-dasharray: 3 4; }
.orbit-ring-label {
  font-family: var(--mono); font-size: 8px; font-weight: 600;
  letter-spacing: .12em; fill: var(--text-3); opacity: .8;
}

/* --- radar süpürmesi ---
   Enstrümanın canlı olduğunu söyleyen TEK hareket. 9 saniyelik tur:
   fark edilecek kadar hızlı, dikkat dağıtmayacak kadar yavaş. */
.orbit-sweep-g { transform-origin: 160px 160px; animation: orbit-sweep 9s linear infinite; }
.orbit-sweep-edge { stroke: var(--orb-plasma); stroke-width: 1; stroke-opacity: .5; }
@keyframes orbit-sweep { to { transform: rotate(360deg); } }

/* --- biletler --- */
.orbit-body { cursor: default; }
.orbit-halo { fill: currentColor; opacity: .12; }
.orbit-dot  { fill: currentColor; }
.orbit-body.danger { color: var(--danger); }
.orbit-body.warn   { color: var(--warn); }
.orbit-body.ok     { color: var(--ok); }
.orbit-body:hover .orbit-halo { opacity: .3; }
.orbit-body:hover .orbit-dot  { filter: drop-shadow(0 0 6px currentColor); }
/* İhlal edilenler nefes alıyor: listede sıraya girmeyi bekleyen değil,
   şu anda kanayan işler. Tek nabız, yalnız kırmızı noktalarda. */
.orbit-body.danger .orbit-dot { animation: orbit-pulse 2.4s var(--ease) infinite; }
@keyframes orbit-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* --- merkez --- */
.orbit-core-hex { fill: none; stroke: var(--brand-2); stroke-width: 3; stroke-opacity: .55; stroke-linejoin: round; }
.orbit-core-hex-2 { stroke-opacity: .3; }
.orbit-now {
  font-family: var(--mono); font-size: 8px; font-weight: 700;
  letter-spacing: .18em; fill: var(--text-2); text-anchor: middle;
}

/* --- sayısal okuma --- */
.orbit-readout { flex: 0 1 320px; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.orbit-legend { display: flex; flex-direction: column; gap: var(--sp-2); }
.orbit-legend-row {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--text-2);
}
.orbit-legend-row .orbit-key {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: currentColor;
}
.orbit-legend-row.danger .orbit-key { color: var(--danger); }
.orbit-legend-row.warn   .orbit-key { color: var(--warn); }
.orbit-legend-row.ok     .orbit-key { color: var(--ok); }
.orbit-legend-row .orbit-key-label { flex: 1; }
.orbit-legend-row b {
  font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-0); font-variant-numeric: tabular-nums;
}

/* Grafik nereye bakılacağını söylüyor; bu blok neye bakılacağını. */
.orbit-next {
  border-left: 2px solid var(--line-2);
  padding-left: var(--sp-4);
}
.orbit-next-label {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--text-3);
  margin-bottom: var(--sp-2);
}
.orbit-next-id {
  font-family: var(--mono); font-size: 11px; color: var(--text-2);
  letter-spacing: -0.01em;
}
.orbit-next-title {
  font-size: 14px; font-weight: 620; letter-spacing: -0.015em;
  color: var(--text-0); margin-top: 2px; line-height: 1.35;
}
.orbit-next-eta {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  margin-top: var(--sp-2);
}
.orbit-next-eta.ok     { color: var(--ok); }
.orbit-next-eta.warn   { color: var(--warn); }
.orbit-next-eta.danger { color: var(--danger); }

@media (max-width: 900px) {
  .orbit-wrap { flex-direction: column; gap: var(--sp-5); }
  .orbit { width: 280px; height: 280px; }
  .orbit-readout { width: 100%; }
}

/* Süpürme ve nabız süs; ikisi de bilgi taşımıyor — halkalar,
   konumlar ve renkler yerinde kalıyor. */
@media (prefers-reduced-motion: reduce) {
  .orbit-sweep-g { animation: none; }
  .orbit-body.danger .orbit-dot { animation: none; }
}


/* ============================================================
   17  AJAN TRİSKELİONU — Manage sayfası
   ============================================================
   Üç ajan artık üç dikdörtgen kart değil, birbirine geçen üç
   daire. Gerekçe içerik: Cornflower / Indigo / Arctic ayrı
   ürünler değil, tek bir ailenin üç yüzü — kutular onları
   birbirinden ayırıyordu, iç içe geçen daireler bir arada
   tutuyor.

   Örtüşmeler mix-blend-mode ile ışık olarak toplanıyor: iki
   dairenin kesiştiği yer üçüncü bir renk üretiyor. Bu, kenarlık
   çizerek taklit edilemeyecek tek şey ve bileşimi "üç daire"
   olmaktan çıkarıp tek bir nesne yapan da bu.

   SADECE bu sayfadaki duruş değişiyor — tıklandığında açılan
   modal ve onun daire formları bu dosyaya hiç dokunmuyor.
   ============================================================ */

.manage-tools {
  display: block;
  position: relative;
  height: 545px;
  margin: var(--sp-5) 0 var(--sp-6);
  isolation: isolate;   /* karışım sayfanın geri kalanına taşmasın */
}

/* Tam daire yerine ORGANİK form: dört köşesi ayrı yarıçap taşıyan
   eliptik bir blob. Daire mükemmel ve durgun; asimetrik yarıçap
   üçünü canlı ve el yapımı gösteriyor — ve üst üste bindiklerinde
   kesişim eğrileri artık simetrik mercek değil, akışkan bir form
   veriyor. Her birinin yarıçap seti farklı, yoksa üçü tek şeklin
   kopyası gibi duruyor. */
.manage-tools .tool-btn {
  position: absolute;
  width: 340px; height: 340px;
  padding: 0 58px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: var(--sp-2);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 50px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.22);
  mix-blend-mode: screen;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease),
              filter .3s var(--ease), opacity .25s var(--ease);
}
:root[data-theme="light"] .manage-tools .tool-btn {
  mix-blend-mode: multiply;
  border-color: rgba(14,22,41,.12);
}

/* Triskelion yerleşimi: iki üstte, biri altta ortada. Üçü de
   merkeze doğru yaklaşıp yaklaşık üçte bir oranında örtüşüyor. */
.manage-tools .tool-cornflower {
  left: calc(50% - 322px); top: 0;
  border-radius: 64% 36% 45% 55% / 55% 45% 58% 42%;
  animation: blob-a 9s var(--ease) infinite;
}
.manage-tools .tool-indigo {
  left: calc(50% - 18px); top: 0;
  border-radius: 42% 58% 65% 35% / 44% 56% 43% 57%;
  animation: blob-b 11s var(--ease) infinite;
}
.manage-tools .tool-arctic {
  left: calc(50% - 170px); top: 196px;
  border-radius: 55% 45% 36% 64% / 62% 38% 60% 40%;
  animation: blob-c 10s var(--ease) infinite;
}

/* Formlar DÖNÜYOR gibi görünüyor ama hiçbir şey döndürülmüyor: şişkinlik
   dört köşe arasında sırayla dolaşıyor (0→25→50→75), göz bunu bir dönme
   olarak okuyor. Gerçek rotate() metni de çevirirdi ve okunmaz olurdu.

   Turlar 9 / 11 / 10 saniye — asal benzeri oranlar, üçü asla aynı faza
   kilitlenmiyor, dolayısıyla desen kendini tekrar etmiyor. Yarıçap
   animasyonu her karede yeniden boyama demek; sahnede yalnız üç eleman
   olduğu için bu hızda da bedeli düşük kalıyor. */
@keyframes blob-a {
  0%,100% { border-radius: 64% 36% 45% 55% / 55% 45% 58% 42%; }
  25%     { border-radius: 36% 64% 63% 37% / 66% 34% 52% 48%; }
  50%     { border-radius: 38% 62% 42% 58% / 40% 60% 65% 35%; }
  75%     { border-radius: 66% 34% 36% 64% / 43% 57% 35% 65%; }
}
@keyframes blob-b {
  0%,100% { border-radius: 42% 58% 65% 35% / 44% 56% 43% 57%; }
  25%     { border-radius: 65% 35% 38% 62% / 66% 34% 60% 40%; }
  50%     { border-radius: 60% 40% 42% 58% / 35% 65% 38% 62%; }
  75%     { border-radius: 34% 66% 62% 38% / 57% 43% 66% 34%; }
}
@keyframes blob-c {
  0%,100% { border-radius: 55% 45% 36% 64% / 62% 38% 60% 40%; }
  25%     { border-radius: 35% 65% 60% 40% / 37% 63% 42% 58%; }
  50%     { border-radius: 65% 35% 41% 59% / 42% 58% 36% 64%; }
  75%     { border-radius: 43% 57% 66% 34% / 64% 36% 58% 42%; }
}

/* Fare üstündeyken öne gelip karışımdan çıkıyor: o an tek bir
   dairenin rengini net görmek gerekiyor. */
.manage-tools .tool-btn:hover,
.manage-tools .tool-btn:focus-visible {
  transform: scale(1.045);
  mix-blend-mode: normal;
  z-index: 3;
  box-shadow: 0 26px 64px -18px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.3);
  filter: saturate(1.08);
}

/* Biri öne çıkarken diğer ikisi geri çekiliyor. Sönme 1sn sürüyor:
   büyüme (.3s) önce okunuyor, kararma arkadan yavaşça yetişiyor —
   ani olsaydı üç dairenin tek nesne olduğu izlenimi kopardı.
   Geri dönüş kısa (.25s, temel kural), fare çekilince sahne
   hemen toparlanmalı. */
.manage-tools:has(.tool-btn:is(:hover, :focus-visible))
  .tool-btn:not(:hover):not(:focus-visible) {
  opacity: .3;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease),
              filter .3s var(--ease), opacity 1s var(--ease);
}

.manage-tools .tool-tag {
  font-size: 8.5px; letter-spacing: .16em;
  padding: 3px 9px; border-radius: var(--r-pill);
}
.manage-tools .tool-name {
  font-size: 22px; font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.1;
}
/* Açıklama dairede daralıyor: üç satır yeter, gerisi zaten
   tıklanınca açılan panelde. */
.manage-tools .tool-desc {
  font-size: 12.5px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: .92;
}

@media (max-width: 820px) {
  .manage-tools { height: auto; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
  .manage-tools .tool-btn { position: static; mix-blend-mode: normal; width: 290px; height: 290px; }
}

/* Payment sayfasındaki TEK ajan blob'u — Manage'daki triskelionun aynısı
   ama başında tek başına. Konteyner absolute yerleşimi bırakıyor, blob
   normal akışa oturuyor. Karışım modu kalkıyor çünkü altında başka ajan
   yok — triskelionda blend altındakini emiyordu, burada emecek şey yok. */
.payment-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--sp-5);
  align-items: start;
}
.payment-side {
  display: flex; flex-direction: column; gap: var(--sp-4);
  position: sticky; top: var(--sp-4);
}
.payment-hero {
  display: flex;
  justify-content: center;
  margin: 0;
}
.payment-hero-sm .tool-btn { width: 300px; height: 300px; padding: 0 34px; }
.payment-hero-sm .tool-name { font-size: 20px; }
.payment-hero-sm .tool-desc { font-size: 11.5px; }
.payment-notes { padding: 14px; }
.payment-notes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.payment-notes-list li { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.45; align-items: flex-start; }
.payment-notes-list .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--navy-2); flex: 0 0 auto; margin-top: 7px;
}
@media (max-width: 1080px) {
  .payment-grid { grid-template-columns: 1fr; }
  .payment-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .payment-hero-sm { flex: 1 1 300px; }
  .payment-notes { flex: 1 1 260px; }
}
.payment-hero .tool-btn {
  position: static;
  width: 340px; height: 340px;
  padding: 0 46px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: var(--sp-2);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 22px 62px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.22);
  color: #fff; cursor: pointer;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease), filter .3s var(--ease);
}
:root[data-theme="light"] .payment-hero .tool-btn {
  border-color: rgba(14,22,41,.14);
}
.payment-hero .tool-navy {
  /* Kendi salınım anahtar karesi: blob-a/b/c ile aynı desen ama kendi
     yarıçap setiyle başlıyor, süresi 10.5s (asal komşusu). */
  border-radius: 58% 42% 40% 60% / 48% 52% 58% 42%;
  animation: blob-navy 10.5s var(--ease) infinite;
}
@keyframes blob-navy {
  0%,100% { border-radius: 58% 42% 40% 60% / 48% 52% 58% 42%; }
  25%     { border-radius: 42% 58% 62% 38% / 62% 38% 43% 57%; }
  50%     { border-radius: 63% 37% 44% 56% / 36% 64% 62% 38%; }
  75%     { border-radius: 37% 63% 58% 42% / 55% 45% 34% 66%; }
}
.payment-hero .tool-btn:hover,
.payment-hero .tool-btn:focus-visible {
  transform: scale(1.035);
  box-shadow: 0 30px 74px -18px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.3);
  filter: saturate(1.1);
}
.payment-hero .tool-tag {
  font-size: 8.5px; letter-spacing: .16em;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.16); color: inherit;
}
.payment-hero .tool-name {
  font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
}
.payment-hero .tool-desc {
  font-size: 12.5px; line-height: 1.5; opacity: .92;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .payment-hero .tool-btn { transition: none; animation: none; }
  .payment-hero .tool-btn:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .manage-tools .tool-btn { transition: none; animation: none; }
  .manage-tools .tool-btn:hover { transform: none; }
  /* Sönme kuralı :has() yüzünden daha yüksek specificity taşıyor, bu yüzden
     burada ayrıca susturuluyor — yoksa üstteki `transition: none` eziliyor.
     Karartma kalıyor, sadece animasyonsuz uygulanıyor. */
  .manage-tools:has(.tool-btn:is(:hover, :focus-visible))
    .tool-btn:not(:hover):not(:focus-visible) { transition: none; }
}

/* ============================================================
   18  MÜŞTERİ FORMLARI — yan yana dans eden yuvarlaklar
   ============================================================
   Manage sayfasındaki ajan formlarıyla aynı dil: tam daire değil,
   dört köşesi ayrı yarıçap taşıyan organik yuvarlaklar. Daire
   mükemmel ve durgun; asimetrik yarıçap canlı gösteriyor.

   İKİ AYRI HAREKET, İKİ AYRI ÖZELLİK:
     · border-radius  — form kendi içinde dönüyor (blob-a/b/c,
       17. bölümdeki ajan formlarıyla ortak)
     · translate      — form yukarı aşağı süzülüyor

   translate ve scale ayrı CSS özellikleri (transform kısayolu
   DEĞİL). Bu bilerek: süzülme translate'i sürekli animasyonda
   tutuyor, fare üstüne gelince scale ayrı kanaldan büyütüyor.
   İkisi de transform olsaydı hover animasyonu ezemez, büyütme
   hiç çalışmazdı.

   Her forma farklı tur ve farklı gecikme veriliyor; dokuz form
   aynı anda aynı yerde olmuyor, sıra sıra salınıyorlar.
   ============================================================ */

.dance {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp-4);
  margin: var(--sp-6) 0 var(--sp-8);
  padding-bottom: 34px;   /* alt sıradaki formların süzülme payı */
}

/* Bütün ölçüler --blob'un KATI, yüzde değil. Yüzde dolgu elemanın
   kendi genişliğine göre değil KAPSAYICISININ genişliğine göre
   çözülüyor: 958px'lik satırda %15, her yandan 143px ediyordu ve
   200px'lik formun içerik kutusunu sıfıra indiriyordu. cqw da aynı
   sebeple kullanılmıyor — o da içerik kutusuna bağlı, sıfıra düşünce
   bütün yazı boyları 0px oluyordu. */
.dance .customer-card {
  --blob: 200px;
  position: relative;
  flex: 0 0 var(--blob);
  width: var(--blob);
  height: var(--blob);
  margin: 0;
  padding: 0 calc(var(--blob) * .16);
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: calc(var(--blob) * .026);
  transition: scale .3s var(--ease-out), filter .3s var(--ease);
}

/* Kenar rengi formun KENDİ arka planı; dolgu 2px içeriden ::before
   ile. border-radius animasyonlu olduğu için ::before onu inherit
   ediyor — yüzdeler kendi kutusuna göre çözülüyor ve iki katman
   her karede aynı formu tutuyor. */
.dance .customer-card::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: linear-gradient(170deg, rgba(20,27,49,.95), rgba(8,12,24,.98));
  z-index: 0;
}
:root[data-theme="light"] .dance .customer-card::before {
  background: linear-gradient(170deg, rgba(255,255,255,.97), rgba(238,242,250,.99));
}

/* Formu alttan yalayan durum rengi: içi boş bir çember değil, dolu
   bir cisim gibi dursun. */
.dance .customer-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: radial-gradient(120% 84% at 50% 104%, var(--cx-tint, transparent), transparent 64%);
  z-index: 0;
  pointer-events: none;
}
.dance .customer-card > * { position: relative; z-index: 1; }

/* Kenar rengi GÜVENLİK PLANINI taşıyor: kırmızı halka "High
   Security" demek, mavi halka "Standard".

   Önceden bu renk SLA durumunu taşıyordu (açık/ihlal edilmiş bilet
   = kırmızı). Kırmızı artık müşterinin bilet yükünü değil, sözleşme
   düzeyini anlatıyor; bilet sayıları kartın üzerindeki rozetlerde
   duruyor, yani o bilgi kaybolmuyor — sadece halkadan çıktı.
   Böylece halka tek bir şey söylüyor ve iki anlam birbirini
   bulandırmıyor. */
.dance .cx-calm {
  background: linear-gradient(155deg, var(--orb-indigo), var(--orb-violet));
  --cx-tint: rgba(79,127,251,.30);
}
.dance .cx-secure {
  background: linear-gradient(155deg, var(--danger), var(--orb-violet));
  --cx-tint: rgba(239,68,68,.32);
}
.dance .cx-secure::before {
  background: linear-gradient(170deg, rgba(46,20,30,.95), rgba(14,8,16,.98));
}
:root[data-theme="light"] .dance .cx-secure::before {
  background: linear-gradient(170deg, rgba(255,247,248,.97), rgba(250,235,238,.99));
}

/* --- dans --- */
.dance .customer-card:nth-child(3n+1) {
  border-radius: 64% 36% 45% 55% / 55% 45% 58% 42%;
  animation: blob-a 9s var(--ease) infinite, cx-float 6.5s var(--ease) infinite;
}
.dance .customer-card:nth-child(3n+2) {
  border-radius: 42% 58% 65% 35% / 44% 56% 43% 57%;
  animation: blob-b 11s var(--ease) infinite, cx-float 7.8s var(--ease) infinite;
}
.dance .customer-card:nth-child(3n+3) {
  border-radius: 55% 45% 36% 64% / 62% 38% 60% 40%;
  animation: blob-c 10s var(--ease) infinite, cx-float 7.1s var(--ease) infinite;
}
/* Gecikme her formda ayrı: aynı turu paylaşanlar bile aynı anda
   tepede olmuyor. */
.dance .customer-card:nth-child(1) { animation-delay: 0s, -0.0s; }
.dance .customer-card:nth-child(2) { animation-delay: -1.4s, -0.9s; }
.dance .customer-card:nth-child(3) { animation-delay: -2.9s, -1.9s; }
.dance .customer-card:nth-child(4) { animation-delay: -4.2s, -2.8s; }
.dance .customer-card:nth-child(5) { animation-delay: -5.7s, -3.6s; }
.dance .customer-card:nth-child(6) { animation-delay: -7.1s, -4.4s; }
.dance .customer-card:nth-child(7) { animation-delay: -8.3s, -5.3s; }
.dance .customer-card:nth-child(8) { animation-delay: -9.6s, -6.1s; }
.dance .customer-card:nth-child(n+9) { animation-delay: -10.8s, -2.2s; }

@keyframes cx-float {
  0%,100% { translate: 0 6px;   }
  50%     { translate: 0 -14px; }
}

.dance .customer-card:hover,
.dance .customer-card:focus-visible {
  scale: 1.07;
  filter: brightness(1.12) drop-shadow(0 16px 34px rgba(0,0,0,.55));
  z-index: 4;
  outline: none;
}

/* --- içerik --- */
.dance .flex-between {
  margin: 0;
  justify-content: center;
  gap: calc(var(--blob) * .03);
  width: auto;
}
.dance .module-id { font-size: calc(var(--blob) * .046); letter-spacing: .08em; }
.dance .module-desc { display: none; }
.dance .module-name {
  font-size: calc(var(--blob) * .079); line-height: 1.2; font-weight: 650;
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.dance .module-meta {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: calc(var(--blob) * .02); margin: 0;
  border: 0; padding: 0;
}
.dance .badge {
  font-size: calc(var(--blob) * .045);
  padding: calc(var(--blob) * .009) calc(var(--blob) * .028);
  letter-spacing: .02em;
  line-height: 1.3;
}

@media (max-width: 1180px) { .dance .customer-card { --blob: 182px; } }
@media (max-width: 760px)  { .dance .customer-card { --blob: 158px; } }

@media (prefers-reduced-motion: reduce) {
  .dance .customer-card { animation: none; translate: none; transition: none; }
  .dance .customer-card:hover { scale: 1; }
}

/* ============================================================
   GIRLS THEME — pembe, simli, parlak
   ============================================================
   Aynı token mekanizması: renk rampasını, vurgu geçişini ve gölgeleri
   pembe rampasıyla yeniden tanımlıyoruz. Ek olarak body::after ile
   sabit bir "sim" katmanı ve birincil düğmeler üzerinde shimmer bandı.
   Bu dosya orbital.css'te en son bloktur; sıradaki responsive.css
   sadece medya sorguları içerdiği için üzerine yazmıyor.
   ============================================================ */
:root[data-theme="girls"] {
  --bg-0: #ffd1e8;
  --bg-1: #fff5fa;
  --bg-2: #ffe0ee;
  --bg-3: #ffb8dc;
  --bg-4: #ffffff;
  --line:   rgba(236, 72, 153, 0.28);
  --line-2: rgba(236, 72, 153, 0.48);
  --text-0: #3d0722;
  --text-1: #831843;
  --text-2: #be185d;
  --text-3: #db2777;

  --brand: #ff1493;
  --brand-2: #ff4fa3;
  --brand-3: #d946ef;
  --brand-soft: rgba(255, 20, 147, 0.22);
  --brand-border: rgba(255, 20, 147, 0.65);
  --accent-grad: linear-gradient(135deg, #ff1493 0%, #ff4fa3 30%, #ec4899 60%, #d946ef 100%);

  --shadow:    0 2px 8px rgba(236,72,153,.35), 0 12px 32px -6px rgba(236,72,153,.45);
  --shadow-lg: 0 4px 14px rgba(236,72,153,.4), 0 32px 70px -18px rgba(236,72,153,.55);
  --glow: 0 0 0 1px rgba(255,20,147,.55), 0 0 24px rgba(255,20,147,.6), 0 12px 40px -10px rgba(217,70,239,.75);
}

/* Login zeminini de karart yerine pembe bulut yap; orbital yıldızları
   açık zeminle iyi görünmez. */
:root[data-theme="girls"] #orbital-stars { display: none; }

/* Sayfa arkası — cesur pembe/magenta/fuşya bulutlar. */
:root[data-theme="girls"] body {
  background:
    radial-gradient(1100px 680px at 6% -8%, rgba(255,20,147,.45), transparent 62%),
    radial-gradient(900px 560px at 96% 4%,  rgba(217,70,239,.42), transparent 64%),
    radial-gradient(760px 500px at 62% 110%, rgba(236,72,153,.40), transparent 60%),
    radial-gradient(600px 400px at 30% 50%, rgba(255,79,163,.28), transparent 65%),
    var(--bg-0);
}

/* SİM KATMANI — tek katman, sabit tile, sadece opacity animasyonu.
   Önceki sürümde iki tam-ekran katman + mix-blend-mode + drop-shadow +
   background-position drift birleşince her karede tüm pikselleri yeniden
   compose ediyordu; drop-shadow filter'ı özellikle pahalıdır (kompozitör
   yerine CPU'ya düşer). Şimdi: tek katman, drop-shadow yok, mix-blend
   yok, sadece opacity — bu GPU'da çalışır, kasmaz. */
:root[data-theme="girls"] body::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(3px 3px at 8% 12%,   rgba(255,255,255,.95), transparent 55%),
    radial-gradient(2.5px 2.5px at 22% 58%, rgba(255,228,241,.9), transparent 55%),
    radial-gradient(4px 4px at 44% 28%,  rgba(255,255,255,.95), transparent 55%),
    radial-gradient(2px 2px at 60% 74%,  rgba(255,138,199,.85), transparent 55%),
    radial-gradient(3.5px 3.5px at 80% 18%, rgba(255,255,255,.95), transparent 55%),
    radial-gradient(2.5px 2.5px at 92% 50%, rgba(255,179,217,.85), transparent 55%),
    radial-gradient(3px 3px at 15% 82%,  rgba(255,255,255,.9), transparent 55%),
    radial-gradient(4px 4px at 52% 6%,   rgba(255,79,163,.85), transparent 55%),
    radial-gradient(2.5px 2.5px at 70% 40%, rgba(255,255,255,.95), transparent 55%),
    radial-gradient(3px 3px at 34% 4%,   rgba(255,179,217,.85), transparent 55%),
    radial-gradient(2px 2px at 6% 44%,   rgba(255,255,255,.9), transparent 55%),
    radial-gradient(3.5px 3.5px at 88% 86%, rgba(255,255,255,.95), transparent 55%);
  background-size: 380px 380px;
  animation: girls-sparkle 3s ease-in-out infinite;
  will-change: opacity;
}
@keyframes girls-sparkle {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1;   }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="girls"] body::after { animation: none; opacity: .7; }
}

/* Sidebar — pembe cam, alt kenarda ışıma. */
:root[data-theme="girls"] .sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,209,232,.92));
  border-right: 1px solid var(--brand-border);
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,.7),
    4px 0 24px -8px rgba(255,20,147,.35);
}
:root[data-theme="girls"] .topbar {
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,224,238,.60));
  border-bottom: 1px solid var(--brand-border);
  box-shadow: 0 6px 24px -12px rgba(255,20,147,.45);
}

/* Kartlar — cam+cila+pembe halo. */
:root[data-theme="girls"] .card,
:root[data-theme="girls"] .stat-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,224,238,.88));
  border: 1px solid var(--brand-border);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 0 22px rgba(255,255,255,.55);
}
:root[data-theme="girls"] .stat-card:hover {
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--brand), 0 0 26px rgba(255,20,147,.55);
  transform: translateY(-2px);
}

/* Aktif menü öğesi — pembe geçiş, güçlü ışıma. */
:root[data-theme="girls"] .nav-item.active {
  color: #c026d3;
  background: linear-gradient(90deg, rgba(255,79,163,.22), rgba(192,38,211,.10) 70%, transparent);
}
:root[data-theme="girls"] .nav-item:hover { background: rgba(255,79,163,.10); }
:root[data-theme="girls"] .nav-item.active::before { box-shadow: 0 0 12px rgba(255,79,163,.85); }
:root[data-theme="girls"] .nav-badge { background: rgba(255,79,163,.10); }
:root[data-theme="girls"] .user-chip { background: rgba(255,79,163,.08); }
:root[data-theme="girls"] .user-chip:hover { background: rgba(255,79,163,.14); }
:root[data-theme="girls"] .lang-toggle,
:root[data-theme="girls"] .theme-toggle { background: rgba(255,79,163,.10); }

/* Marka logosu — pembe halo, statik (nabız pahalıydı: her karede box-shadow
   yeniden hesaplanıyordu). */
:root[data-theme="girls"] .brand-logo {
  background: var(--accent-grad);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.4) inset,
    0 8px 24px -4px rgba(255,20,147,.75),
    0 0 32px rgba(217,70,239,.55);
}
/* Marka adı — pembe geçişli metin. */
:root[data-theme="girls"] .brand-name {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
}

/* İkincil düğme yüzeyleri, form alanları. */
:root[data-theme="girls"] .btn-secondary { background: rgba(255,79,163,.10); }
:root[data-theme="girls"] .btn-secondary:hover { background: rgba(255,79,163,.16); }
:root[data-theme="girls"] .btn-ghost:hover { background: rgba(255,79,163,.10); }
:root[data-theme="girls"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
:root[data-theme="girls"] select,
:root[data-theme="girls"] textarea { background: #fff; }

/* Birincil düğme — güçlü pembe halo + shimmer. */
:root[data-theme="girls"] .btn-primary {
  position: relative;
  overflow: hidden;
  background: var(--accent-grad);
  border: none;
  color: #fff;
  text-shadow: 0 1px 2px rgba(131,24,67,.35);
  box-shadow:
    0 4px 16px -2px rgba(255,20,147,.75),
    0 0 24px rgba(217,70,239,.55),
    inset 0 1px 0 rgba(255,255,255,.5);
}
:root[data-theme="girls"] .btn-primary:hover {
  filter: brightness(1.08) saturate(1.15);
  box-shadow:
    0 6px 22px -2px rgba(255,20,147,.95),
    0 0 36px rgba(217,70,239,.75),
    inset 0 1px 0 rgba(255,255,255,.6);
}
/* Shimmer bandı sadece hover'da çalışsın — sürekli çalışan shimmer
   sayfada N tane primary düğme varsa N tane paralel repaint demek. */
:root[data-theme="girls"] .btn-primary::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.7) 50%, transparent 75%);
  transform: translateX(-100%);
  pointer-events: none;
}
:root[data-theme="girls"] .btn-primary:hover::after {
  animation: girls-shimmer 1.6s ease-in-out;
}
@keyframes girls-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="girls"] .btn-primary:hover::after { animation: none; opacity: 0; }
}

/* Kaydırma çubuğu, seçim, modal. */
:root[data-theme="girls"] ::selection { background: rgba(255,79,163,.35); color: var(--text-0); }
:root[data-theme="girls"] * { scrollbar-color: rgba(255,79,163,.35) transparent; }
:root[data-theme="girls"] ::-webkit-scrollbar-thumb { background: rgba(255,79,163,.35); background-clip: content-box; }
:root[data-theme="girls"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,79,163,.55); background-clip: content-box; }
:root[data-theme="girls"] .modal-backdrop { background: rgba(219,39,119,.30); }

/* Tema seçicisi — girls butonu aktifken pembe geçiş ve güçlü ışıma. */
:root[data-theme="girls"] .theme-toggle button.active {
  background: var(--accent-grad);
  color: #fff;
  box-shadow: 0 0 16px rgba(255,20,147,.85), 0 0 30px rgba(217,70,239,.55), inset 0 1px 0 rgba(255,255,255,.5);
}

/* Sayfa başlığı — pembe geçişli metin, girls temasında öne çıksın. */
:root[data-theme="girls"] .page-title {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
  filter: drop-shadow(0 2px 6px rgba(255,20,147,.35));
}

/* Aktif menü etiketi — pembe geçişli metin. */
:root[data-theme="girls"] .nav-item.active {
  background: linear-gradient(90deg, rgba(255,20,147,.28), rgba(217,70,239,.15) 70%, transparent);
  text-shadow: 0 0 12px rgba(255,20,147,.5);
}

/* İçerik yerleşimi — z-index'i sim katmanının üstüne çıkar. */
:root[data-theme="girls"] .sidebar,
:root[data-theme="girls"] .main,
:root[data-theme="girls"] .topbar { position: relative; z-index: 1; }

/* Ajan renkleri — dört ajanın da (cornflower/indigo/arctic/navy + midnight)
   pembe rampasına çekilmesi. agents.css'te .agent-* sınıfları --agent /
   --agent-2 token'larını bu kök değişkenlerden okuyor; kök değerleri
   değişince tüm ajan yüzeyleri (radial modallar, tool-btn'ler, blob
   kartları) pembeleşiyor. Dört farklı ton bırakıldı ki ajanlar hâlâ
   birbirinden ayırt edilsin. */
:root[data-theme="girls"] {
  --cornflower: #ff1493; --cornflower-2: #ff4fa3;   /* hot pink */
  --indigo:     #c026d3; --indigo-2:     #d946ef;   /* fuchsia */
  --arctic:     #f472b6; --arctic-2:     #f9a8d4;   /* soft pink */
  --midnight:   #831843; --midnight-2:   #be185d;   /* deep rose */
  --navy:       #db2777; --navy-2:       #ec4899;   /* rose */
}

/* Arctic yardım FAB'ı — pembe gölge. */
:root[data-theme="girls"] #app-help-fab {
  box-shadow: 0 6px 18px rgba(255,20,147,.45), 0 0 24px rgba(217,70,239,.4),
              0 1px 0 rgba(255,255,255,.25) inset;
}
:root[data-theme="girls"] #app-help-fab:hover {
  box-shadow: 0 12px 30px rgba(255,20,147,.6), 0 0 36px rgba(217,70,239,.55);
}