/* ============================================================================
   TTLiveAgent — tasarim sistemi
   ============================================================================
   ⛔ **BOYUTLAR YALNIZ BURADA TANIMLANIR.** Hicbir ekran kendi olcusunu
      yazmaz; her bilesen her sayfada ayni yuksekligi, ayni ic bosluğu, ayni
      yaziyi kullanir. Yeni bir olcu gerekiyorsa once buraya bir belirtec
      eklenir — satir arasina sayi yazilmaz.

   ⚠️ **Iki tema durumu vardir**: varsayilan **koyu** (damgasiz `:root`) ve
      kullanicinin sectigi acik (`data-theme="light"`). Sistem tercihi
      sorulmaz — urun karari (2026-09-01). Renkler **yalniz** belirtec
      olarak tanimlanir; hicbir bilesen rengini bir tema blogu icinde almaz.
   ========================================================================= */

/* ── Belirtecler: KOYU palet (VARSAYILAN) ────────────────────────────
   ⚠️ **Bu urun koyu temellidir.** Panel gun boyu acik duruyor ve ekranin
      buyuk kismi koyu zeminli canli yayin karesi; acik zemin yaniyor.
      Bu yuzden damgasiz `:root` **koyu**tur ve `prefers-color-scheme`
      sorulmaz — acik tema YALNIZ kullanici secerse gelir.
   ⚠️ Olculer ve tipografi tema disidir: asagida bir kez tanimlanir. */
:root {
  color-scheme: dark;

  /* Notrler — saf gri degil, markadan gelen HAFIF kirmizi egilimli */
  --zemin:        #0E1013;
  --panel:        #171A1E;
  --panel-2:      #1D2126;
  --panel-3:      #262A30;
  --murekkep:     #EBE9E9;
  --murekkep-2:   #C0BCBD;
  --sonuk:        #8E8889;
  --kilcal:       #2A2E33;
  --kilcal-2:     #21252A;

  /* ⚠️ Marka kirmizisi ikondan alindi; **aksan artik budur** */
  --marka:        #C4202C;
  --aksan:        #E4545F;
  --aksan-yumusak:#33171A;
  --aksan-kenar:  #6E2E34;

  /* ── Durum — aksandan ayri okunmali ───────────────────────────────
     ⚠️ "Yayinda" ile marka ayni aileden: bu KASITLI, canli an markanin
        kendisidir. Buna karsilik **kritik turuncuya kaydirildi**; yoksa
        kirmizi bir cip hem "marka" hem "hata" demeye baslardi.
     ⛔ Renk tek basina anlam tasimaz: her durum metniyle birlikte gelir. */
  --yayinda:      #F0616B;
  --yayinda-yum:  #38191C;
  --iyi:          #5FB98F;
  --iyi-yum:      #14291F;
  --uyari:        #D8A83F;
  --uyari-yum:    #2E2413;
  --kritik:       #E38A4E;
  --kritik-yum:   #33200F;

  /* Grafik — dataviz dogrulayicisi 6/6 (koyu, zemin #141C23) */
  --k1: #D9525E;
  --k2: #1E96A8;
  --k3: #B8831F;
  --k4: #6E84D8;
  --izgara: #222E37;
  /* ── OLCULER — tek kaynak ───────────────────────────────────────── */
  --sat: 40px;          /* tablo satiri ve liste ogesi yuksekligi */
  --kontrol: 32px;      /* dugme, girdi, secim — HEPSI ayni */
  --kontrol-kucuk: 26px;/* yalniz satir ici ikincil eylem */
  --avatar: 28px;       /* liste avatari — her yerde ayni */
  --avatar-buyuk: 64px; /* YALNIZ profil basligi */
  --simge: 16px;
  --isi: 26px;          /* isi haritasi hucre yuksekligi */
  --marka-boy: 26px;    /* marka isareti — YALNIZ burada */
  --ray: 254px;         /* sol nav genisligi — ⚠️ marka alt satiri SIGMALI */
  --serit: 48px;        /* ust durum seridi yuksekligi */
  --panel-ic: 16px;     /* panel ic boslugu */
  --bosluk: 12px;       /* kardes ogeler arasi */
  --bosluk-sik: 6px;    /* bir bilesenin ic parcalari arasi */
  --bosluk-alan: 2px;   /* etiket ile degeri arasi */
  --bosluk-buyuk: 20px; /* panel gruplari arasi */
  /* ── YARICAP — iki basamak, ucuncusu yazilmaz ─────────────────────
     ⚠️ Ayrim keyfi degil, **anlamli**: yuzeyler (panel, tablo, acilir kutu)
        kagit gibidir ve kesin kenarlidir; **basilabilir** seyler (dugme,
        girdi, secim, cip) parmakla dokunulacak nesnelerdir ve yumusaktir.
        Ayni turden her oge her sayfada AYNI yaricapi kullanir. */
  --yaricap: 4px;          /* yuzey: panel, tablo, acilir kutu */
  --yaricap-yumusak: 8px;  /* basilabilir: dugme, girdi, secim, cip, rozet */
  --olcu: 68ch;

  /* ── TIPOGRAFI OLCEGI — bu besinin disina cikilmaz ──────────────── */
  --y-mikro: 11px;      /* rozet, birim */
  --y-kucuk: 12.5px;    /* yardimci metin, tablo basligi */
  --y-govde: 14px;      /* varsayilan */
  --y-orta:  15px;      /* panel basligi */
  --y-buyuk: 20px;      /* sayfa basligi */
  --y-rakam: 27px;      /* KPI rakami */

  /* ── YAZI SISTEMI ────────────────────────────────────────────────────
     ⛔ **Uc aile birden kullanmak gurultudur.** Onceki surumde her satirda
        sikisik baslik + Plex govde + mono rakam yan yanaydi; sayfa
        "terminal ciktisi" gibi okunuyordu.

     ⚠️ Yeni kural: **tek aile** tasir. Rakamlar ayri bir yuz degil, ayni
        ailenin **tabular** rakamlaridir (`--f-rakam` = `--f-govde`).
        Daktilo yuzu YALNIZ kimliklerde kalir: kullanici adi, e-posta,
        ozet (hash), islem kodu — yani karakter karakter okunan seyler.
        Karsilastirilan alternatifler (Source Sans 3, Instrument Sans, IBM
        Plex + Barlow) 2026-09-01'de elendi; secim **Archivo**. */
  --f-govde:  Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-etiket: var(--f-govde);
  --f-rakam:  var(--f-govde);
  --f-kimlik: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --etiket-aralik: 0.06em;   /* buyuk harfli mikro etiketlerin harf araligi */
  --etiket-agirlik: 650;
}

/* ── ACIK palet — yalniz kullanici SECERSE ───────────────────────────
   ⚠️ Burada **sadece renk** yeniden tanimlanir; tek bir olcu yazilmaz. */
:root[data-theme="light"] {
  color-scheme: light;

  /* Nötrler — saf gri degil, hafif mavi egilimli: yayin ekipmani grisi */
  --zemin:        #F2EFEF;
  --panel:        #FFFFFF;
  --panel-2:      #F8F6F6;
  --panel-3:      #EDE9E9;
  --murekkep:     #171213;
  --murekkep-2:   #4A4244;
  --sonuk:        #6B6264;
  --kilcal:       #DED8D9;
  --kilcal-2:     #EAE5E6;

  /* Aksan — enstruman turkuazi. ⚠️ Durum renkleriyle KARISTIRILMAZ. */
  --marka:        #C4202C;
  --aksan:        #B21E29;
  --aksan-yumusak:#FBE6E7;
  --aksan-kenar:  #E9A9AE;

  /* Durum — aksandan AYRI. Renk tek basina anlam tasimaz; her zaman
     yaninda metin veya simge bulunur. */
  --yayinda:      #C4202C;   /* markanin kendisi: canli an */
  --yayinda-yum:  #FBE6E7;
  --iyi:          #2F7A57;
  --iyi-yum:      #E1F0E8;
  --uyari:        #96650C;
  --uyari-yum:    #FBEEDA;
  /* ⚠️ Kritik turuncuya kaydirildi: kirmizi artik MARKA rengi */
  --kritik:       #A4520A;
  --kritik-yum:   #FBEBD9;

  /* Grafik kategorileri — dataviz dogrulayicisindan GECTI (6/6 acik tema).
     ⚠️ Sira sabittir; dondurulmez, 5. seri uretilmez. */
  /* Grafik — dataviz dogrulayicisi 6/6 (acik) */
  --k1: #C4202C;
  --k2: #0089A0;
  --k3: #B07100;
  --k4: #3F6FC4;
  --izgara: #E4EAEF;
}

/* ── Temel ──────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

/**
 * ⛔ **`[hidden]` HER ZAMAN gizler.**
 *
 * Tarayicinin kendi `[hidden] { display: none }` kurali bir **sinif**
 * secicisinden zayiftir; `display: flex` tasiyan her sinif onu sessizce
 * yener. Bu tuzaga iki ayri yerde dustuk (T-147: bildirim paneli, sonra
 * giris ekranindaki dogrulama kodu alani). Ogeyi tek tek yamalamak yerine
 * kural bir kez ve **kesin** yazilir.
 */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  /* ⚠️ Zemin ACIKCA boyanir: seffaf govde konak temasini odunc alir */
  background: var(--zemin);
  color: var(--murekkep);
  font-family: var(--f-govde);
  font-size: var(--y-govde);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--aksan);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Kabuk: sol ray + ust serit + govde ─────────────────────────────── */
.kabuk {
  display: grid;
  grid-template-columns: var(--ray) 1fr;
  grid-template-rows: var(--serit) 1fr;
  grid-template-areas: "marka serit" "ray govde";
  height: 100vh;
}

/* ── Marka ──────────────────────────────────────────────────────────── */
.marka {
  grid-area: marka;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 var(--panel-ic);
  background: var(--panel);
  border-right: 1px solid var(--kilcal);
  border-bottom: 1px solid var(--kilcal);
}

.marka-isaret {
  width: var(--marka-boy); height: var(--marka-boy);
  flex-shrink: 0;
  display: inline-flex;
}
.marka-isaret img { width: 100%; height: 100%; border-radius: var(--yaricap); display: block; }
.marka-isaret-buyuk { --marka-boy: 40px; }

.marka-ad {
  font-family: var(--f-etiket);
  font-size: 16.5px;
  font-weight: var(--etiket-agirlik);
  letter-spacing: -0.005em;
  line-height: 1.05;
  white-space: nowrap;
}

.marka-alt {
  font-family: var(--f-etiket);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--sonuk);
  line-height: 1.1;
  white-space: nowrap;
}

/* ── Ust serit: her ekranda duran CANLI durum ───────────────────────── */
.serit {
  grid-area: serit;
  display: flex;
  align-items: center;
  gap: var(--bosluk-buyuk);
  padding: 0 var(--panel-ic);
  background: var(--panel);
  border-bottom: 1px solid var(--kilcal);
  overflow-x: auto;
}

.serit-oge {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.serit-etiket {
  font-family: var(--f-etiket);
  font-size: var(--y-mikro);
  letter-spacing: var(--etiket-aralik);
  text-transform: uppercase;
  color: var(--sonuk);
}

.serit-deger {
  font-family: var(--f-rakam);
  font-size: var(--y-kucuk);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ⛔ Bu kutu **flex olmak zorunda**: duz blok olarak birakildiginda olcumler
   alt alta dizilip 48px'lik seridi tasiyordu (olculdu). */
.serit-olcum {
  display: flex; align-items: center;
  gap: var(--bosluk-buyuk);
  min-width: 0;
  overflow: hidden;
}
.serit-sag { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }

/* ── Baslik zili ve acilir bildirim paneli ─────────────────────────── */
.zil-sarmal { position: relative; display: flex; }

.zil {
  /* ⚠️ Olcu belirtecten: zil de bir kontrol, digerleriyle ayni yukseklikte */
  width: var(--kontrol-kucuk);
  height: var(--kontrol-kucuk);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--kilcal);
  border-radius: var(--yaricap-yumusak);
  background: var(--panel-2);
  color: var(--murekkep-2);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.zil:hover { background: var(--panel-3); border-color: var(--sonuk); color: var(--murekkep); }
.zil[aria-expanded="true"] { background: var(--aksan-yumusak); border-color: var(--aksan-kenar); color: var(--aksan); }
.zil svg { width: var(--simge); height: var(--simge); }

/* ⚠️ Sayac zilin USTUNDE durur: kac tane oldugu simgeye bakarken okunmali */
.zil-rozet {
  position: absolute;
  top: -5px; inset-inline-end: -5px;
  min-width: 15px; height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--yayinda);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.acilir {
  /* ⛔ `absolute` DEGIL: `.serit` uzerindeki `overflow-x: auto` kirpma
     baglami yaratiyor ve panel seridin yuksekligine kesiliyordu. Sabit
     konum bu baglamlardan bagimsizdir; yer JS'te zile gore hesaplanir. */
  position: fixed;
  width: 428px;
  z-index: 40;
  background: var(--panel);
  border: 1px solid var(--kilcal);
  border-radius: var(--yaricap);
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.22);
  display: flex; flex-direction: column;
}
/* ⛔ **`display: flex` tarayicinin `[hidden] { display: none }` kuralini
   YENER** (sinif secicisi daha guclu). Bu satir olmadan panel `hidden`
   iken bile ekranda duruyordu — olculdu: hidden=true, display=flex. */
.acilir[hidden] { display: none; }

.acilir-bas {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk);
  height: var(--sat);
  padding: 0 var(--panel-ic);
  border-bottom: 1px solid var(--kilcal-2);
  font-family: var(--f-etiket);
  font-size: var(--y-orta);
  font-weight: var(--etiket-agirlik);
}
.acilir-liste { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.acilir-satir {
  flex: none;
  display: flex; align-items: center; gap: var(--bosluk-sik);
  height: var(--sat);
  padding: 0 var(--panel-ic);
  border-bottom: 1px solid var(--kilcal-2);
}
.acilir-satir:last-child { border-bottom: 0; }
.acilir-metin { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acilir-zaman { font-size: var(--y-mikro); color: var(--sonuk); flex: none; }
/* Tur, renkli bir noktayla tasinir — adi `title`de ve tam listede yazili.
   ⛔ Renk TEK BASINA anlam tasimaz; bu yuzden nokta bir kisayoldur,
   bildirimin kendisi cumleyle yazilidir. */
.acilir-nokta { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--sonuk); }
.acilir-nokta.n-rozet-iyi { background: var(--iyi); }
.acilir-nokta.n-rozet-aksan { background: var(--aksan); }
.acilir-nokta.n-rozet-uyari { background: var(--uyari); }
.acilir-nokta.n-rozet-kritik { background: var(--kritik); }
.acilir-bos { padding: 26px var(--panel-ic); text-align: center; color: var(--sonuk); }
.acilir-alt {
  height: var(--sat);
  border: 0; border-top: 1px solid var(--kilcal-2);
  background: var(--panel-2);
  color: var(--aksan);
  font-family: var(--f-etiket);
  font-size: var(--y-govde);
  font-weight: 500;
  cursor: pointer;
  border-radius: 0 0 var(--yaricap) var(--yaricap);
}
.acilir-alt:hover { background: var(--aksan-yumusak); }

/* ── Tally: yayin durumu. Renk TEK BASINA anlam tasimaz. ────────────── */
.tally {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--f-etiket);
  font-size: var(--y-mikro);
  font-weight: 600;
  letter-spacing: var(--etiket-aralik);
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--yaricap-yumusak);
}
.tally::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tally-yayinda { color: var(--yayinda); background: var(--yayinda-yum); }
.tally-iyi     { color: var(--iyi);     background: var(--iyi-yum); }
.tally-uyari   { color: var(--uyari);   background: var(--uyari-yum); }
.tally-kritik  { color: var(--kritik);  background: var(--kritik-yum); }
.tally-sonuk   { color: var(--sonuk);   background: var(--panel-3); }

/* Yayindaki tally hafifce nefes alir — dikkat cekmeli ama yormamali */
.tally-yayinda::before { animation: nabiz 2.4s ease-in-out infinite; }
@keyframes nabiz { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── Sol ray ────────────────────────────────────────────────────────── */
.ray {
  grid-area: ray;
  background: var(--panel);
  border-right: 1px solid var(--kilcal);
  overflow-y: auto;
  padding: 10px 0 20px;
}

.ray-grup {
  font-family: var(--f-etiket);
  font-size: var(--y-mikro);
  letter-spacing: var(--etiket-aralik);
  text-transform: uppercase;
  color: var(--sonuk);
  padding: 14px var(--panel-ic) 5px;
}

.ray-oge {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: var(--sat);
  padding: 0 var(--panel-ic);
  border: 0;
  border-left: 2px solid transparent;
  background: none;
  color: var(--murekkep-2);
  font-family: var(--f-etiket);
  font-size: var(--y-govde);
  font-weight: 500;
  letter-spacing: 0;
  text-align: start;
  cursor: pointer;
}

.ray-oge:hover { background: var(--panel-2); color: var(--murekkep); }

.ray-oge[aria-current="page"] {
  background: var(--aksan-yumusak);
  border-left-color: var(--aksan);
  color: var(--aksan);
  font-weight: 600;
}

.ray-oge svg { width: var(--simge); height: var(--simge); flex-shrink: 0; }

.ray-rozet {
  margin-left: auto;
  font-family: var(--f-rakam);
  font-weight: 600;
  font-size: var(--y-mikro);
  color: var(--panel);
  background: var(--yayinda);
  border-radius: 9px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}

/* ── Govde ──────────────────────────────────────────────────────────── */
.govde {
  grid-area: govde;
  overflow-y: auto;
  padding: var(--bosluk-buyuk);
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-buyuk);
}

.sayfa-bas {
  display: flex;
  align-items: baseline;
  gap: var(--bosluk);
  flex-wrap: wrap;
}

h1 {
  font-family: var(--f-etiket);
  font-size: var(--y-buyuk);
  font-weight: var(--etiket-agirlik);
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

.sayfa-alt {
  margin: 0;
  color: var(--sonuk);
  font-size: var(--y-kucuk);
  max-width: var(--olcu);
}

/* ── Panel — TEK kart bicimi ────────────────────────────────────────── */
.panel {
  background: var(--panel);
  border: 1px solid var(--kilcal);
  border-radius: var(--yaricap);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.panel-bas {
  display: flex;
  align-items: center;
  gap: var(--bosluk);
  height: var(--sat);
  padding: 0 var(--panel-ic);
  border-bottom: 1px solid var(--kilcal-2);
}

.panel-bas h2 {
  font-family: var(--f-etiket);
  font-size: var(--y-orta);
  font-weight: var(--etiket-agirlik);
  margin: 0;
  letter-spacing: -0.005em;
}

.panel-bas .sag { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.panel-ic { padding: var(--panel-ic); }
.panel-ic-yok { padding: 0; }

.izgara {
  display: grid;
  gap: var(--bosluk);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.izgara-2 { display: grid; gap: var(--bosluk); grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* ── KPI kutusu ─────────────────────────────────────────────────────── */
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 13px var(--panel-ic); }
.kpi-etiket {
  font-family: var(--f-etiket);
  font-size: var(--y-mikro);
  letter-spacing: var(--etiket-aralik);
  text-transform: uppercase;
  color: var(--sonuk);
}
.kpi-deger {
  font-family: var(--f-rakam);
  font-size: var(--y-rakam);
  font-weight: var(--etiket-agirlik);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.kpi-alt { font-size: var(--y-kucuk); color: var(--sonuk); }
.kpi-sparkline { margin-top: 6px; height: 26px; }

/* ── Tablo ──────────────────────────────────────────────────────────── */
/* ⚠️ Tablo panelin SEKLINE uyar: kare kose, yuvarlak panelin icinden
   disari tasardi. `overflow-x: auto` zaten kirpma yapiyor. */
.tablo-sar { overflow-x: auto; border-radius: 0 0 var(--yaricap) var(--yaricap); }

table { border-collapse: collapse; width: 100%; font-size: var(--y-govde); }

thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel-2);
  font-family: var(--f-etiket);
  font-size: var(--y-kucuk);
  font-weight: 600;
  letter-spacing: var(--etiket-aralik);
  text-transform: uppercase;
  color: var(--sonuk);
  text-align: start;
  padding: 0 var(--panel-ic);
  height: var(--sat);
  white-space: nowrap;
  border-bottom: 1px solid var(--kilcal);
}

tbody td {
  height: var(--sat);
  padding: 0 var(--panel-ic);
  border-bottom: 1px solid var(--kilcal-2);
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--panel-2); }

.sag { text-align: end; }
.rakam {
  font-family: var(--f-rakam);
  /* ⚠️ Sutunlarin hizali kalmasini saglayan sey daktilo yuzu DEGIL,
     `tabular-nums`tir. Yuzu degistirmeden hizayi koruyoruz. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
/* ⚠️ Daktilo yuzu YALNIZ kimliklerde: karakter karakter okunan, yanlis
   okunmasi maliyetli seyler (kullanici adi, e-posta, ozet, islem kodu). */
.kimlik {
  font-family: var(--f-kimlik);
  /* ⛔ Buraya optik kucultme (`font-size: 0.94em`) YAZILAMAZ: bu sinif bir
     tablo hucresine dustugunde satirin punto olcusunu bozuyor — olculdu,
     14px yerine 13.16px cikti. Daktilo yuzunun optik buyuklugu harf
     araligiyla dengelenir, puntoyla degil. */
  letter-spacing: -0.015em;
}
.sonuk { color: var(--sonuk); }
.mikro { font-size: var(--y-mikro); color: var(--sonuk); }

/* ── Kisi hucresi — her yerde AYNI ──────────────────────────────────── */
.kisi { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* Yaninda durum lambasi olan hucre: ad blogu BUYUMEZ, lamba yanda kalir */
.kisi-dar { display: inline-flex; }
.kisi-ad { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.kisi-alt { font-family: var(--f-kimlik); font-size: var(--y-mikro); color: var(--sonuk); }

.avatar {
  width: var(--avatar); height: var(--avatar);
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--panel-3);
}

.avatar-yer {
  width: var(--avatar); height: var(--avatar);
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--panel-3);
  color: var(--sonuk);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-etiket);
  font-size: 12px;
}

.avatar-buyuk { width: var(--avatar-buyuk); height: var(--avatar-buyuk); font-size: 24px; }

/* ── BOSLUK OLCEGI — UC basamak, dordunculer yazilmaz ─────────────────
   `--bosluk`      kardes bilesenler arasi (12)
   `--bosluk-sik`  bir bilesenin ic parcalari arasi (6)
   `--bosluk-alan` etiket ile degeri arasi (2)                          */
.dikey-sik { display: flex; flex-direction: column; gap: var(--bosluk-sik); }
.satir-sik { display: flex; align-items: center; gap: var(--bosluk-sik); flex-wrap: wrap; }
.alan { display: flex; flex-direction: column; gap: var(--bosluk-alan); min-width: 0; }
.satir-arasi {
  display: flex; align-items: center; gap: var(--bosluk);
  justify-content: space-between; flex-wrap: wrap;
}
.satir-tepe { display: flex; align-items: flex-start; gap: var(--bosluk); }
.geri { align-self: flex-start; }
.profil-not { margin-top: var(--bosluk-sik); }
.tally-satirici { margin-inline-start: var(--bosluk-sik); }
.kopma { color: var(--kritik); }

/* ── Kontroller — HEPSI ayni yukseklik ──────────────────────────────── */
.dugme, .girdi, select.girdi {
  height: var(--kontrol);
  border-radius: var(--yaricap-yumusak);
  border: 1px solid var(--kilcal);
  /* ⚠️ Dugme zeminden bir tik AYRILIR: duz panel rengiyle cevresindeki
     panelin icinde kayboluyor, "tiklanabilir mi" sorusunu doguruyordu */
  background: var(--panel-2);
  color: var(--murekkep);
  font-family: var(--f-govde);
  font-size: var(--y-govde);
  padding: 0 13px;
  /* ⛔ Sutun yonlu bir flex kabinde `flex: 1` **yuksekligi** ezer: giris
     ekranindaki dugme 32px yerine 17px olcuyordu. Kontrollerin boyu
     belirtecten gelir, kaptan degil. */
  flex: none;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.dugme {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  font-family: var(--f-etiket);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.dugme:hover { background: var(--panel-3); border-color: var(--sonuk); }
/* ⚠️ Basildigini parmak altinda hissettiren sey minik bir cokmedir */
.dugme:active { transform: translateY(0.5px); }
/* Devre disi dugme: tiklanamadigi GORUNUR olmali, gizlenmemeli */
.dugme[disabled] { opacity: 0.55; cursor: not-allowed; }
.dugme[disabled]:hover { background: var(--panel); }
.dugme-ana {
  background: var(--aksan);
  border-color: var(--aksan);
  color: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.16);
}
.dugme-ana:hover { filter: brightness(1.08); background: var(--aksan); border-color: var(--aksan); }
.dugme-kucuk { height: var(--kontrol-kucuk); font-size: var(--y-kucuk); padding: 0 10px; }
.girdi-kucuk { height: var(--kontrol-kucuk); font-size: var(--y-kucuk); padding: 0 8px; }
.dugme svg { width: var(--simge); height: var(--simge); }

/* ⚠️ Girdi bir YAZI alanidir: dugme gibi kabartilmaz, zemini duz kalir */
.girdi, select.girdi { background: var(--panel); }
.girdi:hover, select.girdi:hover { border-color: var(--sonuk); }
.girdi::placeholder { color: var(--sonuk); }

/* ── Rozet ──────────────────────────────────────────────────────────── */
.rozet {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-etiket);
  font-size: var(--y-mikro);
  font-weight: 600;
  letter-spacing: var(--etiket-aralik);
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--yaricap-yumusak);
  background: var(--panel-3);
  color: var(--sonuk);
}
.rozet-aksan { background: var(--aksan-yumusak); color: var(--aksan); }
.rozet-iyi { background: var(--iyi-yum); color: var(--iyi); }
.rozet-uyari { background: var(--uyari-yum); color: var(--uyari); }
.rozet-kritik { background: var(--kritik-yum); color: var(--kritik); }

/* ── Bos durum — K-18: "veri yok" ile "olculmedi" AYRI ──────────────── */
.bos {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 34px var(--panel-ic);
  color: var(--sonuk);
  text-align: center;
}
.bos-bas { font-family: var(--f-etiket); font-size: var(--y-orta); color: var(--murekkep-2); }
.bos-alt { font-size: var(--y-kucuk); max-width: 46ch; }

/* ⚠️ Olculmemis deger: sifirdan AYRI gorunur */
.olculmedi { color: var(--sonuk); font-style: italic; font-size: var(--y-kucuk); }

/* ── Grafik ─────────────────────────────────────────────────────────── */
.grafik { width: 100%; display: block; }
.grafik text { font-family: var(--f-rakam); font-size: 10.5px; fill: var(--sonuk); font-variant-numeric: tabular-nums; }
.grafik .izgara-cizgi { stroke: var(--izgara); stroke-width: 1; }

.ipucu {
  position: fixed;
  pointer-events: none;
  z-index: 50;
  background: var(--panel);
  border: 1px solid var(--kilcal);
  border-radius: var(--yaricap);
  padding: 7px 10px;
  font-size: var(--y-kucuk);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.13);
  opacity: 0;
  transition: opacity 0.1s;
}
.ipucu[data-acik="1"] { opacity: 1; }
.ipucu-bas { font-family: var(--f-etiket); font-weight: 600; margin-bottom: 3px; }
.ipucu-satir { display: flex; align-items: center; gap: 7px; justify-content: space-between; }
.ipucu-nokta { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

.gosterge { display: flex; gap: var(--bosluk); flex-wrap: wrap; }
.gosterge-oge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--y-kucuk);
  color: var(--murekkep-2);
}
.gosterge-nokta { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }

/* ── Isi haritasi ───────────────────────────────────────────────────── */
.isi { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; }
/* ⚠️ Kare hucre genis ekranda 45px'e cikip seridi ana gorsel yapiyordu;
   isi haritasi bir SERIT'tir, bir tablo degil. */
.isi-hucre { height: var(--isi); border-radius: 2px; background: var(--panel-3); }
.isi-saat { font-family: var(--f-rakam); font-size: 9.5px; color: var(--sonuk); text-align: center; }

/* ── Akis (canli olay listesi) ──────────────────────────────────────── */
.akis { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; }
.akis-satir {
  /* ⛔ **Olculdu**: flex kabinde `height` sikisiyor ve satir 40 yerine
     ~32px cikiyordu. `flex: none` olmadan olcu disiplini SESSIZCE bozulur. */
  flex: none;
  display: grid;
  grid-template-columns: 118px var(--avatar) 1fr auto;
  align-items: center;
  gap: 9px;
  height: var(--sat);
  padding: 0 var(--panel-ic);
  border-bottom: 1px solid var(--kilcal-2);
}
.akis-satir:last-child { border-bottom: 0; }

/* Gun ayiricisi — akista tarih tekrarini kaldirir */
.akis-gun {
  flex: none;
  position: sticky; top: 0; z-index: 1;
  height: var(--kontrol-kucuk);
  display: flex; align-items: center;
  padding: 0 var(--panel-ic);
  background: var(--panel-2);
  border-bottom: 1px solid var(--kilcal);
  font-family: var(--f-etiket);
  font-size: var(--y-mikro);
  letter-spacing: var(--etiket-aralik);
  text-transform: uppercase;
  color: var(--sonuk);
}
.akis-zaman { font-family: var(--f-rakam); font-size: var(--y-kucuk); color: var(--sonuk); font-variant-numeric: tabular-nums; }
.akis-icerik { display: flex; align-items: center; gap: 7px; min-width: 0; }
.akis-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akis-rozet-img { height: 14px; width: auto; vertical-align: middle; }
.hediye-ikon { width: 18px; height: 18px; object-fit: contain; }

/* ── Kart izgarasi (canli duvar) ────────────────────────────────────── */
.duvar { display: grid; gap: var(--bosluk); grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }

.oda { display: flex; flex-direction: column; }
.oda-bas { display: flex; align-items: center; gap: 9px; padding: var(--panel-ic); border-bottom: 1px solid var(--kilcal-2); }
.oda-olcu { display: grid; grid-template-columns: repeat(2, 1fr); }
.oda-hucre { padding: 10px var(--panel-ic); border-bottom: 1px solid var(--kilcal-2); }
.oda-hucre:nth-child(odd) { border-right: 1px solid var(--kilcal-2); }
.oda-hucre:nth-last-child(-n+2) { border-bottom: 0; }
.oda-etiket { font-family: var(--f-etiket); font-size: var(--y-mikro); letter-spacing: var(--etiket-aralik); text-transform: uppercase; color: var(--sonuk); }
.oda-deger { font-family: var(--f-rakam); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Olcek cubugu (metre) ───────────────────────────────────────────── */
.metre { height: 4px; border-radius: 2px; background: var(--panel-3); overflow: hidden; }
.metre-dolu { height: 100%; border-radius: 2px; background: var(--aksan); }
/* Tablo icinde pay cubugu — sutun genisligi sabit, satir yuksekligi degismez */
.pay-hucre { width: 116px; }

/* ── Profil basligi — YALNIZ yayinci detayinda ──────────────────────── */
.profil { display: flex; gap: var(--panel-ic); align-items: flex-start; padding: var(--panel-ic); }
.profil-ad { font-family: var(--f-kimlik); font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.profil-olcu { display: flex; gap: var(--bosluk-buyuk); flex-wrap: wrap; margin-top: 7px; }

/* ── Cok satirli girdi — yukseklik satir sayisindan gelir ──────────── */
.girdi-alan {
  height: auto;
  padding: 9px 13px;
  font-family: var(--f-kimlik);
  font-size: var(--y-govde);
  line-height: 1.55;
  resize: vertical;
  width: 100%;
}

/* ── Acilabilir satir/kart — tiklanabilir oldugu GORUNMELI ─────────── */
tbody tr[data-creator] { cursor: pointer; }
tbody tr[data-creator]:hover td { background: var(--aksan-yumusak); }
.oda-acilir { cursor: pointer; }
.oda-acilir:hover { border-color: var(--aksan-kenar); }

/* ── Kiyas cubuklari — ayni izgarada hizali kalir ──────────────────── */
.kiyas-satir {
  display: grid;
  grid-template-columns: 96px 1fr 78px;
  align-items: center;
  gap: 9px;
  font-size: var(--y-kucuk);
}
.kiyas-etiket { color: var(--sonuk); white-space: nowrap; }
.kiyas-deger { text-align: end; }

/* ── Giris ekrani ───────────────────────────────────────────────────── */
.giris {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--bosluk-buyuk);
  background: var(--zemin);
}
.giris-kutu {
  width: 100%;
  max-width: 348px;
  display: flex; flex-direction: column; gap: var(--bosluk);
  padding: var(--bosluk-buyuk);
  background: var(--panel);
  border: 1px solid var(--kilcal);
  border-radius: var(--yaricap);
}
.giris-marka { display: flex; align-items: center; gap: 9px; margin-bottom: var(--bosluk-sik); }
/* ⚠️ Hata metni forma **bagli** durur, ust koseye ucan bildirime degil:
   kullanici zaten formda ve cozum orada */
.giris-hata {
  padding: 9px 13px;
  border: 1px solid var(--kritik);
  background: var(--kritik-yum);
  color: var(--kritik);
  border-radius: var(--yaricap);
  font-size: var(--y-kucuk);
}
.giris .girdi, .giris .dugme { width: 100%; }
/* Ana eylem, formun sonunda biraz nefes alsin */
.giris .dugme-ana { justify-content: center; margin-top: var(--bosluk-sik); }

/* ── Yardimcilar ────────────────────────────────────────────────────── */
.satir { display: flex; align-items: center; gap: var(--bosluk); flex-wrap: wrap; }
.dikey { display: flex; flex-direction: column; gap: var(--bosluk); }
.ayirici { height: 1px; background: var(--kilcal-2); }
.buyu { flex: 1; min-width: 0; }

.uyari-kutu {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 11px var(--panel-ic);
  border: 1px solid var(--uyari);
  background: var(--uyari-yum);
  color: var(--uyari);
  border-radius: var(--yaricap);
  font-size: var(--y-kucuk);
}

@media (max-width: 940px) {
  .kabuk { grid-template-columns: 1fr; grid-template-areas: "marka" "serit" "govde"; grid-template-rows: var(--serit) var(--serit) 1fr; }
  .ray { display: none; }
}

/* ── Form ────────────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: var(--bosluk); }
.form-etiket { font-size: var(--y-govde); color: var(--murekkep-2); }
.form-eylem { display: flex; gap: var(--bosluk-sik); flex-wrap: wrap; margin-top: var(--bosluk-sik); }

/* ⚠️ Hata forma BAGLI durur; ust koseye ucan bildirim, kullanicinin
   duzeltmesi gereken alandan uzaga dusuyor. */
.form-hata {
  padding: 9px 13px;
  border: 1px solid var(--kritik);
  background: var(--kritik-yum);
  color: var(--kritik);
  border-radius: var(--yaricap);
  font-size: var(--y-kucuk);
}
.form-bitti {
  padding: 9px 13px;
  border: 1px solid var(--iyi);
  background: var(--iyi-yum);
  color: var(--iyi);
  border-radius: var(--yaricap);
  font-size: var(--y-kucuk);
}

/* ⛔ Yikici eylem AYRI renktedir: "Kaydet" ile "Sil" ayni gorunmemeli */
.dugme-yikici { background: var(--kritik); border-color: var(--kritik); color: #fff; }
.dugme-yikici:hover { filter: brightness(1.08); background: var(--kritik); border-color: var(--kritik); }

/* ── Diyalog ─────────────────────────────────────────────────────────── */
.ortu {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: var(--bosluk-buyuk);
  background: rgb(0 0 0 / 0.55);
}
.diyalog {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: var(--bosluk);
  padding: var(--bosluk-buyuk);
  background: var(--panel);
  border: 1px solid var(--kilcal);
  border-radius: var(--yaricap);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.3);
}
.diyalog-bas {
  font-family: var(--f-etiket);
  font-size: var(--y-orta);
  font-weight: var(--etiket-agirlik);
}
.diyalog-govde { font-size: var(--y-govde); color: var(--murekkep-2); }
.diyalog-eylem { display: flex; justify-content: flex-end; gap: var(--bosluk-sik); }

/* ⚠️ Baslik satirinda kapat dugmesi: baslik solda, dugme sagda */
.diyalog-bas { display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk); }
.diyalog-kapat { flex: none; }
/* ⚠️ Form iceren pencere daha genis: iki sutunlu kod izgarasi sigsin */
.diyalog:has(.kod-izgara) { max-width: 460px; }

/* Kurtarma kodlari — bir kez gosterilir, kopyalanmasi kolay olmali */
.kod-izgara {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bosluk-sik);
  margin: var(--bosluk) 0;
}
.kod-izgara code {
  padding: 6px 8px;
  font-family: var(--f-kimlik); font-size: var(--y-kucuk);
  background: var(--panel-2); border: 1px solid var(--kilcal);
  border-radius: var(--yaricap); text-align: center;
  user-select: all;
}
/* ⚠️ Tek tiklamayla secilsin: elle isaretlemek hataya acik */
.secilebilir { user-select: all; }
/* ⚠️ Uzun otpauth adresi kutuyu tasirmaz, KIRILIR */
.kirilir { overflow-wrap: anywhere; word-break: break-all; display: inline-block; max-width: 100%; }

/* ═════════════════════════════════════════════════════════════════════
   RAY — daraltilabilir, altta sabit kullanici bolumu
   ═════════════════════════════════════════════════════════════════════ */

/* ⚠️ Ray artik ic icre iki parca: kayan gezinme + SABIT alt bolum */
.ray { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ray-gezinme { flex: 1; overflow-y: auto; padding: 10px 0 12px; }

/* ── Kaydirma cubugu: temaya BAGLI ───────────────────────────────────
   ⚠️ Tarayici varsayilani koyu temada beyaz bir serit birakiyordu; ray
      karanlikken sag kenarda parlayan bir cizgi olarak duruyordu. */
.ray-gezinme { scrollbar-width: thin; scrollbar-color: var(--kilcal) transparent; }
.ray-gezinme::-webkit-scrollbar { width: 8px; }
.ray-gezinme::-webkit-scrollbar-track { background: transparent; }
.ray-gezinme::-webkit-scrollbar-thumb {
  background: var(--kilcal);
  border-radius: 4px;
  /* ⚠️ Kenarlik zemin renginde: cubuk inceltilmis gibi durur, kaymaz */
  border: 2px solid var(--panel);
}
.ray-gezinme:hover::-webkit-scrollbar-thumb { background: var(--sonuk); }
/* Ayni kural govde ve uzun listelerde de gecerli */
.govde, .akis, .acilir-liste, .tablo-sar {
  scrollbar-width: thin;
  scrollbar-color: var(--kilcal) transparent;
}
.govde::-webkit-scrollbar, .akis::-webkit-scrollbar,
.acilir-liste::-webkit-scrollbar, .tablo-sar::-webkit-scrollbar { width: 10px; height: 10px; }
.govde::-webkit-scrollbar-track, .akis::-webkit-scrollbar-track,
.acilir-liste::-webkit-scrollbar-track, .tablo-sar::-webkit-scrollbar-track { background: transparent; }
.govde::-webkit-scrollbar-thumb, .akis::-webkit-scrollbar-thumb,
.acilir-liste::-webkit-scrollbar-thumb, .tablo-sar::-webkit-scrollbar-thumb {
  background: var(--kilcal); border-radius: 5px; border: 2px solid var(--zemin);
}

/* ── Altta sabit kullanici bolumu ────────────────────────────────────
   ⛔ Kaydirmayla KAYBOLMAZ: "hangi ajanstayim, kim olarak girdim, nasil
      cikarim" sorusu her zaman gorunur olmali. */
.ray-alt {
  flex: none;
  border-top: 1px solid var(--kilcal);
  padding: var(--bosluk-sik);
  display: flex; flex-direction: column; gap: 2px;
  background: var(--panel);
}
.ray-kullanici, .ray-cikis {
  display: flex; align-items: center; gap: 9px;
  width: 100%; height: var(--sat);
  padding: 0 var(--bosluk-sik);
  border: 0; border-radius: var(--yaricap-yumusak);
  background: none; color: var(--murekkep-2);
  font-family: var(--f-etiket); font-size: var(--y-govde); font-weight: 500;
  text-align: start; cursor: pointer;
}
.ray-kullanici:hover, .ray-cikis:hover { background: var(--panel-2); color: var(--murekkep); }
.ray-kullanici-ad { font-size: var(--y-govde); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ray-kullanici-alt { font-size: var(--y-mikro); color: var(--sonuk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ray-cikis svg { width: var(--simge); height: var(--simge); flex-shrink: 0; }
.ray-cikis:hover { color: var(--kritik); }

/* ── Daraltma dugmesi ────────────────────────────────────────────── */
.ray-daralt {
  margin-inline-start: auto;
  width: var(--kontrol-kucuk); height: var(--kontrol-kucuk);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--yaricap-yumusak);
  background: none; color: var(--sonuk); cursor: pointer; padding: 0; flex: none;
}
.ray-daralt:hover { background: var(--panel-2); color: var(--murekkep); border-color: var(--kilcal); }
.ray-daralt svg { width: var(--simge); height: var(--simge); }

/* ── DARALTILMIS durum ───────────────────────────────────────────────
   ⚠️ Etiketler gizlenir, simgeler kalir; ad `title` ile okunur, yani
      erisilebilirlik kaybi yok. Genislik TEK yerde degisir. */
:root[data-ray-dar] { --ray: 62px; }
:root[data-ray-dar] .ray-etiket,
:root[data-ray-dar] .ray-grup,
:root[data-ray-dar] .ray-rozet { display: none; }
:root[data-ray-dar] .ray-oge,
:root[data-ray-dar] .ray-kullanici,
:root[data-ray-dar] .ray-cikis { justify-content: center; padding: 0; gap: 0; }
:root[data-ray-dar] .marka { justify-content: center; padding: 0 6px; gap: 0; }
:root[data-ray-dar] .ray-daralt { margin-inline-start: 0; position: absolute; opacity: 0; }
:root[data-ray-dar] .marka:hover .ray-daralt { opacity: 1; position: static; }
:root[data-ray-dar] .marka:hover .marka-isaret { display: none; }

/* ═════════════════════════════════════════════════════════════════════
   HEDIYE KADEMELERI
   ⚠️ Esikler gercek katalogdan olculdu (704 hediye). Renk **tek basina**
      anlam tasimaz: kademe adi `title`de, elmas degeri yaninda yazili.
   ⛔ Aksan kirmizisiyla karismasin diye kademeler kendi ailesinde: soguk
      griden sicak altina dogru bir merdiven. Durum renkleri (iyi/uyari/
      kritik) burada KULLANILMAZ.
   ═════════════════════════════════════════════════════════════════════ */
.hediye {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px 2px 3px;
  border: 1px solid var(--kilcal);
  border-radius: var(--yaricap-yumusak);
  background: var(--panel-2);
  max-width: 100%;
}
.hediye-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hediye-adet { color: var(--sonuk); font-size: var(--y-mikro); }
.hediye-ikon { width: 20px; height: 20px; object-fit: contain; flex: none; border-radius: 3px; }
/* ⚠️ Ikon indirilmemisse KIRIK GORSEL degil, kademe renginde bir kutu */
.hediye-yer { background: currentColor; opacity: 0.22; }

/* Kademeler — kucukten efsaneye */
.k-kucuk  { --kademe: var(--sonuk); }
.k-orta   { --kademe: #4C8FB5; }
.k-buyuk  { --kademe: #4E7FD1; }
.k-destan { --kademe: #9B5FC7; }
.k-efsane { --kademe: #C8922A; }
:root[data-theme="light"] .k-orta   { --kademe: #35708F; }
:root[data-theme="light"] .k-buyuk  { --kademe: #3A64AE; }
:root[data-theme="light"] .k-destan { --kademe: #7B3FA8; }
:root[data-theme="light"] .k-efsane { --kademe: #9A6C10; }

.hediye.k-orta, .hediye.k-buyuk, .hediye.k-destan, .hediye.k-efsane {
  color: var(--kademe);
  border-color: color-mix(in oklab, var(--kademe) 42%, var(--kilcal));
  background: color-mix(in oklab, var(--kademe) 12%, var(--panel));
}
/* ⚠️ En ust kademe ayrica **isaretlidir**: renk gormeyen de ayirt etsin */
.hediye.k-efsane { font-weight: 600; box-shadow: inset 2px 0 0 var(--kademe); }