/* ═══════════════════════════════════════════════════════════════════════
   LUROVAX BELLA — tema
   Bütün sayfaların rengi, yazı tipi ve ölçüleri BURADAN gelir.
   Tonu değiştirmek gerekirse yalnız bu dosyaya dokunun.

   Palet Lurovax logosundan: camgöbeği → mavi → mor (lurovax.css ile aynı aile).
   İKİ TEMA var ve ikisi de AYNI belirteçleri kullanır:
     varsayılan            → AÇIK ("Buz")   — kullanıcı seçmediyse bu gelir
     :root[data-tema=koyu] → KOYU ("Gece")  — lacivert zemin

   --altin* ADLARI ESKİDEN KALDI, değerleri artık MAVİDİR. Sayfalarda 700'den
   fazla yerde kullanılıyor; Lurovax ana sitesi de aynı yolu seçti (ad korunur,
   değer değişir). "altın" yazısını görünce sarı sanmayın: bu ANA VURGU rengidir.

   Sayfalarda sabit renk YAZMAYIN. `rgba(255,255,255,.06)` gibi bir değer
   açık temada görünmez olur; onun yerine aşağıdaki belirteçleri kullanın:

     --yuzey-1 / --yuzey-2     kutu içi hafif zeminler
     --ayrac / --ayrac-2       satır arası çizgiler
     --altin-sis / -cizgi / -cizgi-2      vurgu tonlu zemin ve kenarlık
     --yesim-sis / -cizgi / -cizgi-2      "iyi/canlı" durumları
     --kirmizi-sis / -cizgi / -cizgi-2    uyarı ve borç
     --kirmizi-metin           açık zeminde de okunan uyarı yazısı

   Tema seçimi `localStorage.bellaTema` içinde durur ve `<head>` içindeki
   küçük betik ilk boyamadan ÖNCE `data-tema`yı kurar — yoksa açık temada
   bir an koyu ekran çakar.
   ═══════════════════════════════════════════════════════════════════════ */

/* ══════════════════ AÇIK TEMA — varsayılan ══════════════════
   Lurovax'ın açık zemini (#F4F6FE) bir tık koyultuldu: yoğun panelde beyaz
   kart zeminden ayrılsın diye. */
:root{
  color-scheme:light;

  /* ——— ana vurgu (Lurovax mavisi) ——— */
  --altin-isik:#2F7BFF;
  /* Vurgu metni KENDİ TONLU ZEMİNİ üstünde de okunmalı (seçili çip, vurgulu
     kart, rozet). Beyazda 7.41:1, zeminde 6.45:1, zeminin tonlusunda 5.71:1.
     Lurovax'ın #2F6BFF'i metin olarak 4.5'te kalıyor, bu yüzden koyu. */
  --altin:#2148C9;
  --altin-orta:#2F6BFF;            /* accent-color, form kutucukları */
  --altin-koyu:#1E40B8;
  /* Düğme dolgusu. Üzerine BEYAZ yazılır; uçlar buna göre seçildi:
     #2563EB 5.17:1, #7C3AED 5.70:1. Logonun #2F7BFF'i beyazla 3.89'da kalıyor. */
  --metal:linear-gradient(100deg,#2563EB 0%,#5B4CF0 55%,#7C3AED 100%);
  --altin-uzeri:#FFFFFF;

  --altin-sis:rgba(47,107,255,.10);
  --altin-cizgi:rgba(47,107,255,.34);
  --altin-cizgi-2:rgba(47,107,255,.58);

  /* ——— logonun üç rengi: süs ve şerit için, METİN için değil ——— */
  --lx-cyan:#38D5F8;
  --lx-mavi:#2F7BFF;
  --lx-mor:#8B5CF6;
  --lx-grad:linear-gradient(100deg,var(--lx-cyan) 0%,var(--lx-mavi) 45%,var(--lx-mor) 100%);

  /* ——— durum ——— */
  --yesim:#04695A;
  --yesim-sis:rgba(13,148,136,.12);
  --yesim-cizgi:rgba(13,148,136,.34);
  --yesim-cizgi-2:rgba(13,148,136,.5);

  --kirmizi:#C92A45;
  --kirmizi-metin:#A81E38;         /* açık zeminde okunan uyarı yazısı */
  --kirmizi-sis:rgba(226,62,87,.11);
  --kirmizi-cizgi:rgba(226,62,87,.32);
  --kirmizi-cizgi-2:rgba(226,62,87,.5);

  /* ——— zemin ——— */
  --zemin:#EBEFFB;                 /* ana zemin — beyaz kart üstünde net dursun */
  --zemin-2:#FFFFFF;               /* bir kat üstü: kutular */
  --zemin-3:#FAFBFF;

  /* Kart yüzeyi. Açık temada BEYAZ + gerçek kenarlık + hafif gölge;
     koyu temanın "saydam beyaz" numarası burada işe yaramaz. */
  --kart:#FFFFFF;
  /* Modal ve çekmece gibi zeminden KOPAN yüzeyler */
  --kart-2:#FFFFFF;
  --kart-cizgi:rgba(11,16,48,.14);

  /* Form alanı. Beyaz kart üstünde beyaz input "alan" gibi durmuyordu;
     hafif mavi bir zemin + belirgin kenarlık onu alan yapıyor. */
  --alan-zemin:#F6F8FF;
  --alan-cizgi:rgba(11,16,48,.20);
  /* Büyük rakamların gradyanı: yazı olduğu için İKİ UCU da okunur olmalı.
     En kötü durum beyazda 5.58:1. Logonun camgöbeği burada kullanılamaz. */
  --metal-yazi:linear-gradient(100deg,#1D5FE0,#6D3BE8);
  --siyah:var(--zemin);            /* eski ad, uyumluluk için */
  --zemin-perde:rgba(244,246,254,.97);
  --zemin-2-perde:rgba(255,255,255,.98);
  --perde:rgba(6,10,28,.46);       /* mobil menü karartması */

  /* ——— yüzeyler ———
     Açık temada bunlar LACİVERT alfadır; koyu temada beyaz alfaya döner. */
  --yuzey-1:rgba(11,16,48,.03);
  --yuzey-2:rgba(11,16,48,.058);
  --ayrac:rgba(11,16,48,.12);
  --ayrac-2:rgba(11,16,48,.18);
  --cam:var(--yuzey-2);
  --cam-koyu:var(--yuzey-1);
  --cizgi:rgba(47,107,255,.20);
  --cizgi-2:var(--ayrac);
  --cam-cizgi:var(--cizgi);        /* eski ad */

  /* ——— metin ——— */
  --ink:#0B1030;
  --dim:#535C88;                   /* ikincil */
  /* ÜÇÜNCÜL METİN --zemin İLE BİRLİKTE HAREKET EDER: zemin her
     koyulaştığında bu da koyulaşmalı, yoksa 4.5:1 altına düşer.
     #EBEFFB zeminde 5.37:1. */
  --dim-2:#565F8A;

  /* ——— gölge ——— */
  /* Tarayıcının kendi takvim ikonu: açık temada zaten koyu, dokunma */
  --takvim-ikon:none;
  --golge-1:0 1px 3px rgba(11,16,48,.10),0 1px 1px rgba(11,16,48,.05);
  --golge-2:0 20px 50px -28px rgba(30,50,140,.32);
  --golge-3:0 40px 90px -38px rgba(30,50,140,.38);
}

/* ══════════════════ KOYU TEMA — "Gece" ══════════════════
   Lurovax'ın koyu lacivert zemini, üstünde logonun açık mavisi. */
:root[data-tema="koyu"]{
  color-scheme:dark;

  --altin-isik:#38D5F8;
  --altin:#7FA6FF;
  --altin-orta:#4C82FF;
  --altin-koyu:#2F6BFF;
  --altin-uzeri:#FFFFFF;

  --altin-sis:rgba(127,166,255,.10);
  --altin-cizgi:rgba(127,166,255,.30);
  --altin-cizgi-2:rgba(127,166,255,.45);

  --yesim:#5EEAD4;
  --yesim-sis:rgba(94,234,212,.11);
  --yesim-cizgi:rgba(94,234,212,.30);
  --yesim-cizgi-2:rgba(94,234,212,.45);

  --kirmizi:#FB6F92;
  --kirmizi-metin:#FDA4BB;
  --kirmizi-sis:rgba(251,111,146,.11);
  --kirmizi-cizgi:rgba(251,111,146,.30);
  --kirmizi-cizgi-2:rgba(251,111,146,.44);

  --zemin:#060A18;
  --zemin-2:#0C1226;
  --zemin-3:#111933;

  --kart:linear-gradient(150deg,var(--yuzey-2),var(--yuzey-1));
  --kart-2:linear-gradient(160deg,#111933,#060A18);
  --kart-cizgi:var(--cizgi-2);
  --alan-zemin:var(--yuzey-2);
  --alan-cizgi:var(--cizgi);
  /* Yazı gradyanı: koyu zeminde logonun camgöbeği okunur (9.95:1 ve üstü). */
  --metal-yazi:linear-gradient(100deg,#38D5F8,#7FA6FF 50%,#B79CFF);
  --zemin-perde:rgba(6,10,24,.97);
  --zemin-2-perde:rgba(12,18,38,.97);
  --perde:rgba(2,4,12,.70);

  --yuzey-1:rgba(255,255,255,.028);
  --yuzey-2:rgba(255,255,255,.055);
  --ayrac:rgba(255,255,255,.085);
  --ayrac-2:rgba(255,255,255,.14);
  --cizgi:rgba(130,150,255,.16);

  --ink:#E8ECFF;
  --dim:#A3ACD0;
  /* Tonlu (sis) zeminde en kötü durum 5.21:1. */
  --dim-2:#979FC4;

  /* Koyu temada takvim ikonu siyah kalıyor ve görünmüyordu — ters çevir */
  --takvim-ikon:invert(1) brightness(1.6);
  --golge-1:0 1px 2px rgba(0,0,0,.5);
  --golge-2:0 24px 50px -22px rgba(0,0,0,.9);
  --golge-3:0 40px 90px -36px rgba(20,40,140,.65);
}

/* ══════════════════ kenar çubuğu: İKİ TEMADA DA koyu ══════════════════
   Lurovax yönetim panelinin imzası (yonetim.css). Belirteçler yalnız çubuk
   içinde yeniden tanımlanır; içindeki kurallar değişmez. */
:root{
  --yan-zemin:
    radial-gradient(420px 260px at 0% 100%,rgba(139,92,246,.16),transparent 70%),
    radial-gradient(360px 240px at 100% 0%,rgba(56,213,248,.09),transparent 70%),
    linear-gradient(180deg,#0B1232,#060A1C);
}
.yan{
  color-scheme:dark;color:#E8ECFF;
  --ink:#FFFFFF;--dim:#BAC2E6;--dim-2:#A7B0DA;
  --altin:#A9D0FF;--altin-sis:rgba(76,130,255,.22);
  --altin-cizgi:rgba(127,166,255,.34);--altin-cizgi-2:rgba(127,166,255,.5);
  --yuzey-1:rgba(255,255,255,.03);--yuzey-2:rgba(130,150,255,.10);
  --ayrac:rgba(255,255,255,.085);--cizgi:rgba(130,150,255,.14);
  --kart-cizgi:rgba(130,150,255,.14);
}

/* ══════════════════ temadan bağımsız ══════════════════ */
:root{
  /* ——— tipografi ——— */
  --display:"Sora",system-ui,sans-serif;
  --body:"Manrope",system-ui,sans-serif;
  --wordmark:"Michroma","Sora",system-ui,sans-serif;  /* yalnız marka adı: Türkçe harf taşımaz */
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  /* ——— ölçü ——— */
  --r:20px;
  --r-orta:16px;
  --r-kucuk:12px;
  --gut:clamp(18px,4.4vw,72px);
  --hiz:.7s cubic-bezier(.22,.8,.26,1);

  /* ——— panel ——— */
  --yan:262px;                     /* kenar çubuğu genişliği */

  /* ——— ferahlık: kutu içi boşluk ve satır aralığı ——— */
  --ic-bosluk:clamp(22px,2.8vw,32px);
  --satir:1.72;
}

/* Tema değişince renkler yumuşak geçsin; hareket azaltmada anında değişir. */
@media (prefers-reduced-motion:no-preference){
  body,.kutu,.yan,.ust{transition:background-color .25s ease,border-color .25s ease,color .25s ease}
}

/* ══════════════════ tema düğmesi ══════════════════
   Hem vitrin başlığında hem panel üst şeridinde aynı düğme kullanılır. */
.tema-dugme{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:0 0 auto;padding:0;
  border-radius:50%;cursor:pointer;
  background:var(--yuzey-2);border:1px solid var(--ayrac);color:var(--dim);
  transition:color .2s,border-color .2s,background .2s;
}
.tema-dugme:hover{color:var(--altin);border-color:var(--altin-cizgi);background:var(--altin-sis)}
.tema-dugme svg{width:17px;height:17px;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Açık temada ay, koyu temada güneş görünür — düğme "neye geçeceğini" gösterir */
.tema-dugme .ay{display:block}
.tema-dugme .gunes{display:none}
:root[data-tema="koyu"] .tema-dugme .ay{display:none}
:root[data-tema="koyu"] .tema-dugme .gunes{display:block}