/* ⛔⛔ ÜRETİLMİŞ DOSYA — ELLE DÜZENLEME.
   Kaynak: ui/maket.html · Üretici: scripts/tasarim-css-uret.mjs
   `npm run tasarim-css` ile yenilenir; elle yazılan her şey kaybolur. */

/* ══════════════════════════════════════════════════════════════════════
   TTLiveAgent — tasarım dili önerisi
   Tez: BU ÜRÜN İKİ KAYNAĞIN ANLAŞMAZLIĞIDIR.
        TikTok Backstage'in resmî sayısı (günde bir, gecikmeli, kesin) ile
        bizim canlı yakalamamız (anlık, kısmi) sürekli yan yana durur.
        O yüzden KAYNAK, okunacak bir etiket değil, GÖRÜNEN BİR BİÇİMDİR:
          · resmî  → çelik mavisi, mühür işareti, defter dizgisi
          · canlı  → kırmızı, nabız noktası
        Sayıya bakan kişi nereden geldiğini okumadan bilir.
   ⛔ Dış kaynaklı yazı tipi YOK (kullanıcı kararı): yüzler sistemden.
   ══════════════════════════════════════════════════════════════════════ */

/* ---- Simgeler (KOYU = ürünün varsayılanı) ---------------------------- */
/**
 * ⭐⭐ **KOYU TEMA ÜRÜNÜN KENDİ TEMASIDIR** (kullanıcı 2026-09-08:
 *    "dark mode custom olacak").
 *
 * ⛔ Bu palet "siyaha yakın gri" değil: mürekkep **mavi-mora** çekik
 *    (hue ≈ 232°) ve kademeler arasında **ölçülü** fark var —
 *    zemin → yüzey → yükseltilmiş yüzey her adımda ~%3 açılıyor.
 *    Düz siyah bir zeminde bütün paneller aynı düzlemde duruyordu.
 * ⚠️ Zemin **düz renk değil**: çok hafif bir dikey geçiş var (üstte
 *    biraz açık). Gözün "yukarısı ışık alır" beklentisini karşılıyor;
 *    fark ölçüldüğünde 4 birim, yani süs değil derinlik.
 * ⚠️ Kırmızı koyuda **açılır** (#F04255), açıkta **koyulaşır**
 *    (#C4202C): aynı marka rengi iki zeminde eşit okunmaz.
 */
:root {
  color-scheme: dark;

  --zemin:      #0E1017;   /* mavi-mor yanlı mürekkep — "seçilmiş" nötr */
  --zemin-ust:  #12151E;   /* zeminin üst ucu: hafif geçiş */
  --zemin-2:    #090A0F;   /* kenar çubuğu: içerikten BİR KADEME derin */
  --yuzey:      #161923;
  --yuzey-2:    #1C202B;
  --yuzey-3:    #242936;
  --cizgi:      #272C3A;
  --cizgi-2:    #363C4D;

  --yazi:       #ECEEF3;
  --yazi-2:     #A3A9BB;
  --yazi-3:     #71778B;

  /* CANLI / bizim ölçümümüz — marka kırmızısının koyu zemin sürümü */
  --canli:      #F04255;
  --canli-yum:  rgba(240, 66, 85, .14);
  --canli-cizgi:rgba(240, 66, 85, .38);

  /* RESMÎ / Backstage — çelik mavisi. Kırmızıdan hem tonda hem
     sıcaklıkta uzak: renk körlüğünde de ayrışır. */
  --resmi:      #82A9DB;
  --resmi-yum:  rgba(130, 169, 219, .13);
  --resmi-cizgi:rgba(130, 169, 219, .34);

  --iyi:        #3DB98C;
  --iyi-yum:    rgba(61, 185, 140, .13);
  --uyari:      #D9A22E;
  --uyari-yum:  rgba(217, 162, 46, .14);
  --kritik:     #F04255;
  --kritik-yum: rgba(240, 66, 85, .14);
  --mor:        #9B87D6;

  --r:      10px;
  --r-kucuk: 6px;
  --bosluk: 14px;

  --govde: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ⚠️ Üstte 1px'lik iç ışık: panelin zeminden AYRILDIĞINI kenarlık
     olmadan söyleyen tek şey bu. */
  --golge: 0 1px 0 rgba(255,255,255,.045) inset, 0 8px 26px rgba(0,0,0,.42);
}

/* ---- AÇIK tema: aynı simgeler, başka değerler ------------------------ */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --zemin:   #F2F3F7;
    --zemin-ust: #F7F8FB;
    --zemin-2: #E9EBF2;
    --yuzey:   #FFFFFF;
    --yuzey-2: #F7F8FB;
    --yuzey-3: #EDEFF5;
    --cizgi:   #DDE0EA;
    --cizgi-2: #C6CBD9;
    --yazi:    #14161D;
    --yazi-2:  #545B6E;
    --yazi-3:  #7C8497;
    --canli:      #C4202C;
    --canli-yum:  rgba(196, 32, 44, .09);
    --canli-cizgi:rgba(196, 32, 44, .30);
    --resmi:      #2F5F9E;
    --resmi-yum:  rgba(47, 95, 158, .09);
    --resmi-cizgi:rgba(47, 95, 158, .28);
    --iyi:     #17845F;
    --iyi-yum: rgba(23, 132, 95, .10);
    --uyari:   #97690C;
    --uyari-yum: rgba(151, 105, 12, .11);
    --kritik:  #C4202C;
    --kritik-yum: rgba(196, 32, 44, .10);
    --mor:     #6A55A8;
    --golge: 0 1px 2px rgba(20,22,29,.06), 0 8px 24px rgba(20,22,29,.07);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --zemin:   #F2F3F7;
  --zemin-ust: #F7F8FB;
  --zemin-2: #E9EBF2;
  --yuzey:   #FFFFFF;
  --yuzey-2: #F7F8FB;
  --yuzey-3: #EDEFF5;
  --cizgi:   #DDE0EA;
  --cizgi-2: #C6CBD9;
  --yazi:    #14161D;
  --yazi-2:  #545B6E;
  --yazi-3:  #7C8497;
  --canli:      #C4202C;
  --canli-yum:  rgba(196, 32, 44, .09);
  --canli-cizgi:rgba(196, 32, 44, .30);
  --resmi:      #2F5F9E;
  --resmi-yum:  rgba(47, 95, 158, .09);
  --resmi-cizgi:rgba(47, 95, 158, .28);
  --iyi:     #17845F;
  --iyi-yum: rgba(23, 132, 95, .10);
  --uyari:   #97690C;
  --uyari-yum: rgba(151, 105, 12, .11);
  --kritik:  #C4202C;
  --kritik-yum: rgba(196, 32, 44, .10);
  --mor:     #6A55A8;
  --golge: 0 1px 2px rgba(20,22,29,.06), 0 8px 24px rgba(20,22,29,.07);
}

* { box-sizing: border-box; }
body {
  margin: 0; color: var(--yazi);
  background: var(--zemin);
  background-image: linear-gradient(180deg, var(--zemin-ust) 0%, var(--zemin) 420px);
  background-attachment: fixed;
  font-family: var(--govde); font-size: 13px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--resmi); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ══ Kabuk ═══════════════════════════════════════════════════════════ */
/**
 * ⚠️ **264px bir tercih değil bir ÖLÇÜ**: marka alt satırı
 *    "Tiktok Agency Management System" tek satıra sığmalı. 236px'te
 *    kırpılıyordu — daha önce aynı hataya düşülmüştü (marka satırı
 *    "…SYSTEM" diye kesilmişti).
 */
.uygulama { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }

.ray {
  background: var(--zemin-2); border-right: 1px solid var(--cizgi);
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; min-height: 0;
}
/* ⚠️ Kaydırma çubuğu TEMANIN parçasıdır: koyu bir kenar çubuğunun
   ortasından geçen açık gri bir çubuk, dilin dışına düşen tek öğeydi. */
.ray-liste { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 10px; }
.ray-liste, .tablo-kap, .icerik {
  scrollbar-width: thin;
  scrollbar-color: var(--cizgi-2) transparent;
}
.ray-liste::-webkit-scrollbar, .tablo-kap::-webkit-scrollbar { width: 9px; height: 9px; }
.ray-liste::-webkit-scrollbar-track, .tablo-kap::-webkit-scrollbar-track { background: transparent; }
.ray-liste::-webkit-scrollbar-thumb, .tablo-kap::-webkit-scrollbar-thumb {
  background: var(--cizgi-2); border-radius: 6px;
  border: 2px solid var(--zemin-2); background-clip: padding-box;
}
.ray-liste::-webkit-scrollbar-thumb:hover, .tablo-kap::-webkit-scrollbar-thumb:hover { background: var(--yazi-3); background-clip: padding-box; }

/* ── Kenar çubuğu altı: KİM olduğun ve ÇIKIŞ ───────────────────────────
   ⛔ Bu iki şey menünün dibinde durur, üstünde değil: gün boyu tıklanan
      şeyler yukarıda, günde bir kez tıklanan şeyler aşağıda. */
.ray-alt { border-top: 1px solid var(--cizgi); padding: 10px 12px 12px; flex: none; }
.uye {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px; border-radius: var(--r-kucuk); background: var(--yuzey);
  border: 1px solid var(--cizgi); cursor: pointer; text-align: left; margin-bottom: 7px;
}
.uye:hover { border-color: var(--cizgi-2); }
.uye > span:nth-child(2) { min-width: 0; flex: 1; }
/* ⛔ **Taşma yok**: 236px'lik bir sütunda sarılan iki satırlık ad, alttaki
      çıkış düğmesini aşağı itiyordu. Kırpılır, tamamı `title`da durur. */
.uye-ad, .uye-alt { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uye-ad { font-size: 12px; font-weight: 600; }
.uye-alt { font-size: 10px; color: var(--yazi-3); }
.uye-ok { color: var(--yazi-3); flex: none; font-size: 13px; }
/**
 * ⭐ **Üyelik bilgisi** — kullanıcı 2026-09-08: "üyelik bilgisi yok".
 * ⚠️ Paket adı bir ROZET değil bir SATIRDIR: yanında kullanım da yazıyor
 *    ("14/∞ yayıncı"). Paketi tek başına yazmak "hangi pakettesin"
 *    sorusunu cevaplar ama "sınıra ne kadar var" sorusunu cevaplamaz.
 */
.uye-paket {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 7px 9px 8px; margin-bottom: 7px;
  border-radius: var(--r-kucuk); background: var(--yuzey-2);
  font-size: 10.5px; color: var(--yazi-3);
}
.cikis {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; border: 0; background: none; border-radius: var(--r-kucuk);
  color: var(--yazi-3); cursor: pointer; font-size: 12px; text-align: left;
}
.cikis:hover { background: var(--kritik-yum); color: var(--kritik); }
.cikis svg { width: 15px; height: 15px; flex: none; }
.marka {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 14px; border-bottom: 1px solid var(--cizgi);
  position: sticky; top: 0; background: var(--zemin-2); z-index: 2;
}
/* ⚠️ Marka işareti **tek yerde**: `markaIsareti()`. Ürünün kendi
   `ui/marka/ikon.svg` çizimi olduğu gibi kullanılır — yeniden çizilmez. */
.marka-kare { width: 30px; height: 30px; border-radius: 8px; flex: none; display: block; }
.marka-kare svg { width: 100%; height: 100%; display: block; border-radius: 8px; }
.marka-kare.buyuk { width: 38px; height: 38px; }
.marka-kare.buyuk svg { border-radius: 10px; }
.marka-ad { font-weight: 650; letter-spacing: -.01em; font-size: 14px; }
.marka-alt {
  font-size: 8.5px; color: var(--yazi-3); letter-spacing: .035em;
  text-transform: uppercase; white-space: nowrap; line-height: 1.4;
}

.ray-grup { padding: 14px 12px 2px; }
.ray-grup-bas {
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--yazi-3); padding: 0 8px 7px;
}
.ray-oge {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 8px; border: 0; background: none; border-radius: var(--r-kucuk);
  color: var(--yazi-2); cursor: pointer; text-align: left; font-size: 12.5px;
  transition: background .12s, color .12s;
}
.ray-oge:hover { background: var(--yuzey); color: var(--yazi); }
.ray-oge.secili {
  background: var(--yuzey-2); color: var(--yazi); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--canli);
}
.ray-oge .nokta { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }
.ray-oge.secili .nokta { background: var(--canli); opacity: 1; }
.ray-sayac {
  margin-left: auto; font-family: var(--mono); font-size: 10px;
  color: var(--yazi-3); font-variant-numeric: tabular-nums;
}
.ray-oge.secili .ray-sayac { color: var(--yazi-2); }

/* ══ Üst şerit — her sayfada aynı: DURUM ═════════════════════════════ */
.tepe {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 9px 22px; border-bottom: 1px solid var(--cizgi);
  background: var(--zemin-2); position: sticky; top: 0; z-index: 3;
}
.durum { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--yazi-2); }
.nabiz { width: 7px; height: 7px; border-radius: 50%; background: var(--canli); flex: none;
  box-shadow: 0 0 0 0 var(--canli-cizgi); animation: nabiz 2.4s ease-out infinite; }
@keyframes nabiz { 0% { box-shadow: 0 0 0 0 var(--canli-cizgi); } 70% { box-shadow: 0 0 0 7px rgba(0,0,0,0); } 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } }
.tepe-sayi { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--yazi); font-weight: 600; }
/* ⚠️ Sol ölçüler kendi kabında: gerçek zarftan yeniden çizilirken
   şeridin geri kalanı yerinde kalsın. Boşluk maketin ölçüsü. */
/* ⚠️ Tıklanabilir satır: imleç bunu söyler, yoksa tıklanacağı bilinmez. */
/* ⚠️ Kimlik ekranı bağlantısı: görünüşü bağlantı, işi düğme.
   ⛔ `<a href="#">` bırakmak ölü bağlantı olurdu (K-36). */
.kimlik-bag {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--resmi); text-decoration: none;
}
.kimlik-bag:hover { text-decoration: underline; }
.tiklanir { cursor: pointer; }
.tiklanir:hover td { background: var(--yuzey-2); }
.durum-serit { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; min-width: 0; }

/**
 * ⭐⭐ **Giriş ekranında KABUK YOK.**
 *
 * ⛔⛔ Oturum açılmadan kenar çubuğu ve üst şerit çizilirse iki yalan
 *    söylenir: (1) henüz kimliği olmayan birine ajans gezinmesi
 *    gösterilir, (2) üst şeritteki dört ölçü "ölçülmedi" der ve ekran
 *    bozuk görünür. Oysa ölçüm YOK, çünkü oturum yok.
 * ⚠️ Ekranın kendisi maketteki ile birebir aynı; kaldırılan tek şey,
 *    o ekranın etrafındaki kabuk.
 */
.uygulama.kabuksuz { grid-template-columns: 1fr; }
.uygulama.kabuksuz .ray, .uygulama.kabuksuz .tepe { display: none; }
/**
 * ⭐⭐ **Giriş TAM EKRAN** (kullanıcı 2026-09-08: "birde full ekran yap şunu").
 * ⛔ Kart 1100px'lik bir kutuda ortalanıyordu ve etrafında kocaman boş
 *    bir alan kalıyordu; giriş bir sayfa değil, **bir kapıdır** — ekranı
 *    doldurmalı.
 * ⚠️ Yuvarlak köşe ve gölge de kalkıyor: tam ekranda kenar diye bir şey
 *    yok, kart olmaktan çıkıp sayfanın kendisi oluyor.
 */
.uygulama.kabuksuz .icerik { max-width: none; margin: 0; padding: 0; }
.uygulama.kabuksuz .giris { min-height: 100vh; border-radius: 0; box-shadow: none; }
.uygulama.kabuksuz .giris-sol, .uygulama.kabuksuz .giris-sag { padding: 6vh 5vw; }
/* ⚠️ Sağ sütundaki form yine de okunur genişlikte kalır: 100vw'lik bir
   giriş formu göze dağınık gelir. */
.uygulama.kabuksuz .giris-sag > * { max-width: 420px; width: 100%; margin-left: auto; margin-right: auto; }
.tepe-sag { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* ⚠️ Üst şeritte YAZI YOK, simge var: bunlar her sayfada duran ve
   günde bir kez dokunulan araçlar; sözcükle yer kaplamaları gereksizdi.
   ⛔ Simge tek başına bırakılmaz — her birinin `title` ve `aria-label`i
      var, yani okuyucu için ad hâlâ yerinde. */
.tepe-dugme {
  border: 1px solid var(--cizgi); background: var(--yuzey); border-radius: var(--r-kucuk);
  width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
  color: var(--yazi-2); cursor: pointer; position: relative; flex: none;
}
.tepe-dugme svg { width: 16px; height: 16px; display: block; }
.tepe-dugme:hover { color: var(--yazi); border-color: var(--cizgi-2); background: var(--yuzey-2); }
/* Dil düğmesi simge DEĞİL kod taşır: bayrak yanıltıcıdır (dil ≠ ülke). */
.tepe-dugme.dil { width: auto; padding: 0 9px; gap: 6px; grid-auto-flow: column; font-size: 11px; font-weight: 650; letter-spacing: .04em; }
.tepe-rozet {
  position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px;
  border-radius: 8px; background: var(--canli); color: #fff;
  font-size: 9px; font-weight: 700; display: grid; place-items: center;
  padding: 0 3px; border: 2px solid var(--zemin-2); font-variant-numeric: tabular-nums;
}
.dil-menu {
  position: absolute; top: 36px; right: 0; z-index: 9;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-kucuk);
  box-shadow: var(--golge); padding: 4px; min-width: 148px;
}
.dil-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none;
  padding: 7px 9px; border-radius: 4px; cursor: pointer; font-size: 12px; color: var(--yazi-2); text-align: left;
}
.dil-menu button:hover { background: var(--yuzey-2); color: var(--yazi); }
.dil-menu button.secili { color: var(--yazi); font-weight: 600; }
.dil-menu .kod { font-family: var(--mono); font-size: 10px; color: var(--yazi-3); margin-left: auto; }

.icerik { padding: 22px 24px 60px; }

/* ══ Sayfa başlığı — dilin OMURGASI ═══════════════════════════════════
   Her sayfa aynı üç katmanla açılır: ad · ne işe yarar · KAYNAKLAR.
   Kaynak satırı sayfanın sözleşmesidir: hangi rakam nereden, ne zaman. */
.sayfa-bas { margin-bottom: 20px; }
.sayfa-bas h1 {
  font-size: 21px; font-weight: 660; letter-spacing: -.022em; line-height: 1.2;
}
.sayfa-aciklama { color: var(--yazi-2); font-size: 12.5px; margin-top: 5px; }
.kaynak-serit {
  display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 11px;
  padding-top: 11px; border-top: 1px solid var(--cizgi);
}
.kaynak {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; padding: 3px 9px 3px 7px; border-radius: 20px;
  border: 1px solid var(--cizgi); background: var(--yuzey);
  color: var(--yazi-2);
}
.kaynak b { font-weight: 600; color: var(--yazi); }
.kaynak-resmi { border-color: var(--resmi-cizgi); background: var(--resmi-yum); }
.kaynak-resmi b { color: var(--resmi); }
.kaynak-canli { border-color: var(--canli-cizgi); background: var(--canli-yum); }
.kaynak-canli b { color: var(--canli); }
.muhur {
  width: 13px; height: 13px; border-radius: 3px; flex: none; display: grid; place-items: center;
  font-size: 8.5px; font-weight: 800; color: var(--resmi);
  border: 1px solid var(--resmi-cizgi); background: var(--resmi-yum);
}

/* ══ Ölçüm şeridi — "kutu içinde kutu"nun panzehiri ═══════════════════
   Beş ayrı kart yerine TEK yüzey, içinde dikey ayraçlar. Göz bir kutu
   sınırı yerine bir SATIR tarar; sayılar zaten hizalıdır. */
.olcum {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--yuzey); border-radius: var(--r); box-shadow: var(--golge);
  overflow: hidden; margin-bottom: var(--bosluk);
}
.olcum.sar { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); grid-auto-columns: auto; }
.olcum-oge { padding: 14px 16px 15px; border-left: 1px solid var(--cizgi); min-width: 0; }
.olcum-oge:first-child { border-left: 0; }
.olcum.sar .olcum-oge { border-top: 1px solid var(--cizgi); }
.olcum.sar .olcum-oge:nth-child(-n+4) { border-top: 0; }
.etiket {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: .085em; text-transform: uppercase;
  color: var(--yazi-3); min-height: 26px; line-height: 1.3;
}
.deger {
  font-size: 25px; font-weight: 620; letter-spacing: -.03em; line-height: 1.12;
  font-variant-numeric: tabular-nums; margin-top: 3px;
}
.deger.kucuk { font-size: 19px; }
.deger.sonuk { color: var(--yazi-3); font-weight: 500; }
.deger-alt { font-size: 11px; color: var(--yazi-3); margin-top: 3px; }
.deger-alt.uyari { color: var(--uyari); }

/* Kahraman — SAYFADA BİR TANE. Gözün ilk düşeceği yer. */
.olcum-oge.kahraman { background: var(--yuzey-2); box-shadow: inset 3px 0 0 var(--canli); }
.olcum-oge.kahraman .deger { font-size: 34px; }
.olcum-oge.resmi { box-shadow: inset 3px 0 0 var(--resmi-cizgi); }
.olcum-oge.resmi .deger { font-family: var(--govde); }

.kaynak-imi { font-size: 9px; letter-spacing: .06em; padding: 1px 5px; border-radius: 3px; }
.kaynak-imi.r { color: var(--resmi); background: var(--resmi-yum); }
.kaynak-imi.c { color: var(--canli); background: var(--canli-yum); }

/* Kıvılcım çizgisi */
.kivilcim { display: block; width: 100%; height: 26px; margin-top: 7px; overflow: visible; }

/* ══ Blok (panel) — KENARLIK YOK ══════════════════════════════════════
   Ayrım kenarlıktan değil YÜZEY FARKINDAN gelir. On kenarlıklı kutu
   ekranı tel kafese çevirmişti. */
.blok { background: var(--yuzey); border-radius: var(--r); box-shadow: var(--golge); margin-bottom: var(--bosluk); overflow: hidden; }
.blok-bas {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--cizgi); background: var(--yuzey-2);
}
.blok-bas h2 { font-size: 12.5px; font-weight: 640; letter-spacing: .005em; }
.blok-bas .sag { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.blok-not { font-size: 11px; color: var(--yazi-3); }
.blok-govde { padding: 15px 16px; }
.blok-govde.sifir { padding: 0; }

.izgara2 { display: grid; gap: var(--bosluk); grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.izgara3 { display: grid; gap: var(--bosluk); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.dikey { display: flex; flex-direction: column; }
.satir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ══ Rozet / çip ══════════════════════════════════════════════════════ */
.rozet {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; padding: 2.5px 8px; border-radius: 20px;
  background: var(--yuzey-3); color: var(--yazi-2); white-space: nowrap;
}
.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); }
.rozet.resmi   { background: var(--resmi-yum);  color: var(--resmi); }
.rozet.canli   { background: var(--canli-yum);  color: var(--canli); }
.rozet.mor     { background: rgba(155,135,214,.14); color: var(--mor); }

/* İlgilenilmeli şeridi: sayısı OLAN başlık çip, sıfır olan tek satır */
.dikkat { display: flex; flex-wrap: wrap; gap: 8px; }
.dikkat-cip {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 13px; border-radius: var(--r-kucuk);
  background: var(--yuzey-2); box-shadow: inset 2px 0 0 var(--uyari);
}
.dikkat-cip .n { font-size: 17px; font-weight: 660; font-variant-numeric: tabular-nums; }
.dikkat-cip .a { font-size: 11.5px; color: var(--yazi-2); }
.dikkat-cip.iyi-cip { box-shadow: inset 2px 0 0 var(--iyi); }
.temiz {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px;
  margin-top: 10px; padding: 9px 13px; border-radius: var(--r-kucuk);
  background: var(--yuzey-2); box-shadow: inset 2px 0 0 var(--iyi-yum);
}
.temiz-bas { font-size: 10px; letter-spacing: .085em; text-transform: uppercase; color: var(--iyi); font-weight: 700; }
.temiz-oge { font-size: 11.5px; color: var(--yazi-3); }
.temiz-oge + .temiz-oge::before { content: "·"; margin-right: 9px; color: var(--cizgi-2); }

/* ══ Tablo ════════════════════════════════════════════════════════════ */
.tablo-kap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
thead th {
  text-align: left; font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--yazi-3); font-weight: 600; padding: 9px 12px; white-space: nowrap;
  border-bottom: 1px solid var(--cizgi); background: var(--yuzey-2);
  position: sticky; top: 0;
}
thead th.sag, td.sag { text-align: right; }
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--yuzey-2); }
td.rakam, th.rakam { font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12px; }
td.sonuk { color: var(--yazi-3); }
.kisi { display: flex; align-items: center; gap: 9px; min-width: 0; }
.avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--yuzey-3); color: var(--yazi-2); font-size: 10.5px; font-weight: 700;
}
.kisi-ad { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kisi-alt { font-size: 10.5px; color: var(--yazi-3); font-family: var(--mono); }

/**
 * ⭐ **Avatar görselken de aynı yeri kaplar.** Harf ile resim arasında
 *    boyut farkı olsaydı liste satır satır zıplardı.
 * ⚠️ `object-fit: cover`: TikTok avatarları kare değil.
 */
img.avatar { object-fit: cover; }
.avatar-buyuk { width: 64px; height: 64px; font-size: 24px; }
.avatar-buyuk img.avatar, .avatar-buyuk .avatar { width: 64px; height: 64px; font-size: 24px; }

/**
 * ⭐ **Hediye hücresi** — ikon + ad.
 * ⚠️ İkon yüklenemezse yer tutucu aynı boyu kaplar: satır kaymaz.
 */
.hediye { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.hediye-ikon { width: 22px; height: 22px; flex: none; border-radius: 4px; object-fit: contain; }
.hediye-yer { background: var(--yuzey-3); display: inline-block; }
/* ══ Gönderen seviye ve hayran rozetleri ═════════════════════════════
   ⚠️ Kesin seviye yoksa ARALIK yazılır (`seviye-aralik`): kesin sayıymış
      gibi göstermek daha önce 27. seviyeyi "LV 25" yapmıştı. */
.seviye {
  display: inline-flex; align-items: center; gap: 3px;
  height: 18px; padding: 0 6px 0 3px; flex: none;
  border-radius: 9px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: #fff;
  background: linear-gradient(135deg, var(--sev-1), var(--sev-2));
}
.seviye:not(:has(.seviye-ikon)) { padding-left: 6px; }
.seviye-ikon { height: 15px; width: auto; flex: none; display: block; }
.seviye-yazi { display: inline-flex; align-items: baseline; gap: 2px; }
.seviye-on { font-size: 8px; font-weight: 600; opacity: .85; letter-spacing: .02em; }
.seviye-sayi { font-size: 11px; }
.s-s1 { --sev-1: #90B0F0; --sev-2: #6E86C8; }
.s-s2 { --sev-1: #5080F0; --sev-2: #3A50D0; }
.s-s3 { --sev-1: #8060E0; --sev-2: #5C34B4; }
.s-s4 { --sev-1: #D06BB0; --sev-2: #A02F7E; }
.s-s5 { --sev-1: #E0A63A; --sev-2: #B06B12; }
/* ⚠️ Hayran rozeti seviyeden AYRI bir şey: TikTok da turuncu gösterir */
.s-hayran { --sev-1: #F08030; --sev-2: #D05A18; }
/* ⚠️ Seviyesi OKUNAMAYAN rozet: kademe rengi verilmez, nötr durur */
.s-bilinmiyor { --sev-1: var(--yuzey-3); --sev-2: var(--yuzey-3); color: var(--yazi-3); }
.seviye-aralik { border: 1px dashed rgba(255,255,255,.55); }
.seviye-aralik .seviye-sayi { letter-spacing: 0; }

.hediye-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Kaynak sütunu: başlıkta mühür, hücrede çelik renk */
th.r-sutun { color: var(--resmi); }
td.r-sutun { color: var(--resmi); }
th.c-sutun { color: var(--canli); }

/* ══ Boş durum — "veri yok" ile "okunmadı" AYRI ═══════════════════════ */
.bos { padding: 34px 22px; text-align: center; }
.bos h3 { font-size: 13px; font-weight: 620; margin-bottom: 5px; }
.bos p { font-size: 12px; color: var(--yazi-3); max-width: 62ch; margin: 0 auto; }
.bos .isaret {
  width: 34px; height: 34px; border-radius: 9px; margin: 0 auto 12px;
  background: var(--yuzey-2); border: 1px dashed var(--cizgi-2);
}

/* ══ Uyarı şeridi ═════════════════════════════════════════════════════ */
.not {
  display: flex; gap: 10px; padding: 11px 14px; border-radius: var(--r);
  font-size: 12px; margin-bottom: var(--bosluk); line-height: 1.55;
}
.not-uyari { background: var(--uyari-yum); color: var(--yazi); box-shadow: inset 2px 0 0 var(--uyari); }
.not-bilgi { background: var(--yuzey); color: var(--yazi-2); box-shadow: inset 2px 0 0 var(--resmi); }
.not b { color: var(--yazi); }

/* ══ Ölçü çubuğu / ilerleme ═══════════════════════════════════════════ */
.metre { height: 5px; border-radius: 3px; background: var(--yuzey-3); overflow: hidden; }
.metre i { display: block; height: 100%; border-radius: 3px; background: var(--canli); }
.metre i.r { background: var(--resmi); }
.metre i.iyi { background: var(--iyi); }

/* ══ Canlı oda kartı ══════════════════════════════════════════════════ */
.oda { background: var(--yuzey); border-radius: var(--r); box-shadow: var(--golge); overflow: hidden; }
.oda-bas { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--yuzey-2); border-bottom: 1px solid var(--cizgi); }
.oda-olcu { display: grid; grid-template-columns: 1fr 1fr; }
.oda-olcu > div { padding: 11px 14px; border-top: 1px solid var(--cizgi); border-left: 1px solid var(--cizgi); }
.oda-olcu > div:nth-child(2n+1) { border-left: 0; }
.oda-acilir { cursor: pointer; transition: box-shadow .12s, transform .12s; }
.oda-acilir:hover { box-shadow: var(--golge), 0 0 0 1px var(--canli-cizgi); transform: translateY(-1px); }
.oda-acilir:focus-visible { outline: 2px solid var(--resmi); outline-offset: 2px; }
.oda-alt { padding: 9px 14px; font-size: 10.5px; color: var(--yazi-3); border-top: 1px solid var(--cizgi); }

/* ══ Form ═════════════════════════════════════════════════════════════ */
.alan { margin-bottom: 13px; }
.alan > label { display: block; font-size: 10px; letter-spacing: .085em; text-transform: uppercase; color: var(--yazi-3); margin-bottom: 5px; }
.girdi, select {
  width: 100%; padding: 8px 11px; border-radius: var(--r-kucuk);
  border: 1px solid var(--cizgi); background: var(--yuzey-2); color: var(--yazi); font: inherit; font-size: 12.5px;
}
.girdi::placeholder { color: var(--yazi-3); }
.ipucu { font-size: 11px; color: var(--yazi-3); margin-top: 5px; }
/**
 * ⭐⭐ **Düğmelerin TEK ölçü sistemi** (kullanıcı 2026-09-08: "bazı
 *    butonlar küçük bazıları büyük").
 *
 * ⛔⛔ **Ölçüldü ekranda:** Ayarlar'da "Yeniden bağlan" ile "Oturumu sil"
 *    **aynı satırda** farklı boydaydı; aynısı "Çözücüyü kapat / Denemeleri
 *    gör" satırında da vardı. Aynı satırdaki iki eylem farklı boyda
 *    olduğunda göz bunu bir **hiyerarşi** sanıyor — oysa arada öyle bir
 *    fark yoktu.
 * ⚠️ **Kural:** boy YERE göre seçilir, öneme göre değil.
 *      · gövde içindeki eylem satırı → normal (30px)
 *      · blok başlığı ve tablo satırı → küçük (26px)
 *      · tek başına duran ana eylem (giriş) → geniş (38px, tam en)
 *    Önem **renkle** anlatılır (`.ana`), boyla değil.
 * ⚠️ Yükseklik `height` ile sabitlendi: dolgu ile ayarlanınca yazı
 *    uzunluğu satır yüksekliğini değiştiriyordu.
 */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 13px; font-size: 12px; font-weight: 550;
  border: 1px solid var(--cizgi); background: var(--yuzey-2); border-radius: var(--r-kucuk);
  cursor: pointer; color: var(--yazi); white-space: nowrap;
}
.dugme:hover { border-color: var(--cizgi-2); }
.dugme.ana { background: var(--canli); border-color: var(--canli); color: #fff; }
.dugme.ana:hover { filter: brightness(1.08); }
.dugme.kucuk { height: 26px; padding: 0 10px; font-size: 11px; }
.dugme.genis { height: 38px; width: 100%; font-size: 13px; }

/* ══ Sekmeler ═════════════════════════════════════════════════════════ */
.sekmeler { display: flex; gap: 3px; flex-wrap: wrap; }
.sekme {
  padding: 5px 11px; border-radius: 20px; font-size: 11.5px; cursor: pointer;
  border: 1px solid transparent; background: none; color: var(--yazi-3);
}
.sekme:hover { color: var(--yazi-2); background: var(--yuzey-3); }
.sekme.secili { background: var(--yuzey-3); color: var(--yazi); border-color: var(--cizgi-2); font-weight: 600; }

/* ══ Adım listesi (kurulum) ═══════════════════════════════════════════ */
.adim { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--cizgi); }
.adim:last-child { border-bottom: 0; }
.adim-im { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.adim-im.tamam { background: var(--iyi-yum); color: var(--iyi); }
.adim-im.eksik { background: var(--yuzey-3); color: var(--yazi-3); }
.adim-ad { font-weight: 550; }
.adim-alt { font-size: 11px; color: var(--yazi-3); }

/* ══ Isı haritası ═════════════════════════════════════════════════════ */
.isi { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; }
.isi i { display: block; height: 46px; border-radius: 3px; background: var(--canli); }
.isi-saat { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; margin-top: 5px; font-size: 8.5px; color: var(--yazi-3); text-align: center; font-family: var(--mono); }

/* ══ Akış ═════════════════════════════════════════════════════════════ */
/**
 * ⚠️ **Kişi sütunu daha geniş**: ad + iki rozet yan yana sığmalı, yoksa
 *    rozet alta düşer ve satır yüksekliği zıplar.
 */
.akis-satir { display: grid; grid-template-columns: 52px minmax(200px, 260px) 92px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--cizgi); align-items: center; font-size: 12px; }
.akis-kisi { min-width: 0; overflow: hidden; }
.akis-kisi .avatar { width: 20px; height: 20px; font-size: 9px; }
/* ⚠️ Gün ayırıcısı: kırk satırın kırkı aynı günse tarih gürültüdür. */
.akis-gun {
  font-size: 10px; letter-spacing: .085em; text-transform: uppercase;
  color: var(--yazi-3); padding: 10px 0 4px;
}
.akis-satir:last-child { border-bottom: 0; }
.akis-zaman { font-family: var(--mono); font-size: 11px; color: var(--yazi-3); }

/* ══ Fiyat kartı ══════════════════════════════════════════════════════ */
.paket-kart { background: var(--yuzey); border-radius: var(--r); box-shadow: var(--golge); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.paket-kart.mevcut { box-shadow: var(--golge), inset 0 0 0 1px var(--canli-cizgi); }
.paket-fiyat { font-size: 24px; font-weight: 660; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.paket-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--yazi-2); }

/* ══ Giriş ekranı ═════════════════════════════════════════════════════ */
.giris { min-height: 560px; display: grid; grid-template-columns: 1.05fr .95fr; background: var(--zemin-2); border-radius: var(--r); overflow: hidden; box-shadow: var(--golge); }
.giris-sol { padding: 34px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.giris-izgara { position: absolute; inset: 0; background-image: linear-gradient(var(--cizgi) 1px, transparent 1px), linear-gradient(90deg, var(--cizgi) 1px, transparent 1px); background-size: 42px 42px; opacity: .5; }
.giris-parilti { position: absolute; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, var(--canli-yum), transparent 65%); top: -120px; left: -100px; filter: blur(10px); }
.giris-ic { position: relative; }
.giris-baslik { font-size: 27px; font-weight: 650; letter-spacing: -.03em; line-height: 1.25; margin: 22px 0 10px; max-width: 18ch; }
.giris-alt { color: var(--yazi-2); font-size: 12.5px; max-width: 46ch; }
.giris-sag { background: var(--yuzey); padding: 34px; display: flex; flex-direction: column; justify-content: center; }

/* ══ Vurgular ═════════════════════════════════════════════════════════ */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sonuk { color: var(--yazi-3); }
.mikro { font-size: 11px; }
.kucuk { font-size: 11.5px; }

/* ══ Karşılaştırma (eski/yeni) ════════════════════════════════════════ */
.kiyas-bant { background: var(--yuzey-2); border-radius: var(--r); padding: 16px; margin-bottom: 18px; }
.kiyas-bant h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--yazi-3); margin-bottom: 9px; }
.kiyas-liste { display: grid; gap: 7px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.kiyas-oge { font-size: 12px; color: var(--yazi-2); padding-left: 15px; position: relative; }
.kiyas-oge::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--canli); }

@media (max-width: 1000px) {
  .uygulama { grid-template-columns: 1fr; }
  .ray { position: static; height: auto; }
  .olcum { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .olcum-oge { border-left: 0; border-top: 1px solid var(--cizgi); }
  .giris { grid-template-columns: 1fr; }
}


/* ═══ TAKMA ADLAR — ürünün sınıfları maketin bileşenlerine bağlanır ═══
   ⛔ ÜRETİLMİŞ DOSYA: elle düzenleme. `npm run tasarim-css` ile yenilenir. */

/* Kabuk */
.kabuk { grid-template-columns: var(--ray) 1fr; }
.govde { padding: 22px 24px 60px; }

/* Panel = blok */
.panel { background: var(--yuzey); border: 0; border-radius: var(--r); box-shadow: var(--golge); }
.panel-bas { padding: 12px 16px; border-bottom: 1px solid var(--cizgi); background: var(--yuzey-2); }
.panel-bas h2 { font-size: 12.5px; font-weight: 640; letter-spacing: .005em; }
.panel-ic { padding: 15px 16px; }

/* KPI kartı = ölçüm öğesi */
.kart-kpi { background: var(--yuzey); }
.kpi { padding: 14px 16px 15px; }
.kpi-etiket { font-size: 10px; letter-spacing: .085em; text-transform: uppercase; color: var(--yazi-3); }
.kpi-deger { font-size: 25px; font-weight: 620; letter-spacing: -.03em; }
.kart-ana.kart-kahraman .kpi-deger { font-size: 34px; }
.kpi-alt { font-size: 11px; color: var(--yazi-3); }

/* Metin ve etiketler */
.sayfa-alt { font-size: 12.5px; color: var(--yazi-2); }
.sonuk { color: var(--yazi-3); }
.mikro { font-size: 11px; color: var(--yazi-3); }

/* Tablo — maketin dizgisi */
.tablo-sar { overflow-x: auto; }