/* ==========================================================================
   KZ Marketing — Tasarım Sistemi
   --------------------------------------------------------------------------
   Bu dosya yeni çekirdeğin (Faz 1) tek stil kaynağıdır. Eski `app.css` ile
   YAN YANA durur: değişkenler `--kz-`, sınıflar `kz-` önekli olduğu için
   çakışmaz. Sayfalar tek tek buraya taşındıkça app.css küçülür ve sonunda
   silinir.

   Katmanlar:
     1. Ölçekler      — temadan bağımsız (boşluk, tipografi, yarıçap, süre)
     2. Marka         — temadan bağımsız (yeşil / turuncu / pirinç)
     3. Semantik renk — üç durumda tanımlı: açık, sistem-koyu, seçili-koyu
     4. Temel         — reset ve gövde
     5. Bileşenler    — düzen, kenar çubuğu, tablo, form, rozet, panel...

   Kurallar:
     - Renk DAİMA token üzerinden. Bileşen içinde çıplak hex yok.
     - Mobile-first: taban kurallar telefon, `min-width` ile büyütülür.
     - Emoji yok. İkon = `kz-icons.svg` sprite'ı (bkz. inc/icon.php).
   ========================================================================== */

/* ---------------------------------------------------------------- 1+2+3 --
   TOKENLAR — açık tema tam palet burada tanımlanır.
   -------------------------------------------------------------------- */
:root {
  /* --- tipografi aileleri --- */
  --kz-font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --kz-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --kz-font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- tipografi ölçeği --- adı işlevine göre, boyutuna göre değil */
  --kz-t-micro:  10.5px;   /* sayaç, üst-etiket */
  --kz-t-cap:    11.5px;   /* tablo başlığı, rozet */
  --kz-t-small:  12.5px;   /* yardımcı metin */
  --kz-t-body:   13.5px;   /* varsayılan arayüz metni */
  --kz-t-lead:   15px;     /* panel başlığı */
  --kz-t-title:  21px;     /* sayfa başlığı */
  --kz-t-h2:     23px;
  --kz-t-metric: 30px;     /* özet kutusundaki sayı */
  --kz-lh-tight: 1.2;
  --kz-lh-body:  1.55;

  /* --- boşluk ölçeği — 4px tabanlı, ara değer yok --- */
  --kz-s1: 4px;  --kz-s2: 8px;  --kz-s3: 12px; --kz-s4: 16px;
  --kz-s5: 20px; --kz-s6: 24px; --kz-s7: 32px; --kz-s8: 40px; --kz-s9: 56px;

  /* --- yarıçap --- rol başına bir değer, her yere aynı yuvarlaklık değil */
  --kz-r-sm: 6px;    /* rozet, küçük buton */
  --kz-r-md: 9px;    /* girdi, buton */
  --kz-r-lg: 13px;   /* panel, kart */
  --kz-r-xl: 18px;   /* modal, giriş kartı */
  --kz-r-pill: 999px;

  /* --- hareket --- */
  --kz-dur-1: 120ms;  /* renk/kenar geçişi */
  --kz-dur-2: 190ms;  /* açılır menü, akordeon */
  --kz-dur-3: 260ms;  /* çekmece */
  --kz-ease: cubic-bezier(.2, .8, .2, 1);

  /* --- yoğunluk — tablo satır yüksekliği; [data-kz-density] ile değişir --- */
  --kz-row-y: 13px;
  --kz-cell-x: 16px;

  /* --- düzen --- */
  --kz-side-w: 244px;
  --kz-side-rail: 68px;

  /* ================= MARKA — her iki temada aynı ================= */
  --kz-ink:         #15302C;   /* kurumsal koyu yeşil */
  --kz-ink-2:       #1D423B;
  --kz-signal:      #EA5B2A;   /* sinyal turuncusu — tek vurgu */
  --kz-signal-deep: #C8430F;
  --kz-brass:       #BE8E2C;   /* pirinç — ikincil vurgu, avatar/nişan */

  /* ================= SEMANTİK — AÇIK TEMA =================
     Nötrler saf gri değil: marka yeşiline doğru hafif kaydırılmış.
     Saf gri "varsayılan" görünür; kaydırılmış gri "seçilmiş" görünür. */
  --kz-bg:         #F1F4F0;   /* sayfa zemini — panelden bir ton koyu, kartlar yüzsün */
  --kz-surface:    #FFFFFF;   /* panel/kart */
  --kz-surface-2:  #F8FAF7;   /* satır vurgusu, gömük alan */
  --kz-surface-3:  #EDF1EB;   /* girdi zemini, ilerleme oluğu */

  --kz-line:        #E6EAE4;  /* ince ayraç — kenar görünsün ama çizmesin */
  --kz-line-strong: #D4DAD1;  /* girdi kenarı */

  --kz-text:    #16241F;      /* birincil metin */
  --kz-text-2:  #5F6E68;      /* ikincil */
  --kz-text-3:  #8E9A94;      /* üçüncül / yer tutucu */
  --kz-on-ink:  #EAF1ED;      /* koyu yeşil üzerindeki metin */

  --kz-accent:      var(--kz-signal);
  --kz-accent-soft: #FDEDE6;  /* turuncu yumuşak zemin */
  --kz-accent-text: #B93C0B;  /* açık zeminde okunur turuncu */

  /* Durum renkleri vurgudan AYRI — turuncu hem marka hem uyarı olamaz. */
  --kz-ok:          #2F7D5C;  --kz-ok-soft:      #E6F3EC;
  --kz-info:        #35709E;  --kz-info-soft:    #E7F0F7;
  --kz-warn:        #A9741A;  --kz-warn-soft:    #FAF0DE;
  --kz-danger:      #B4432F;  --kz-danger-soft:  #FBE9E5;
  --kz-neutral:     #77837D;  --kz-neutral-soft: #EDF0EC;

  /* Gölge: yeşile çalan, nötr siyah değil */
  --kz-sh-1: 0 1px 2px rgba(21, 48, 44, .06);
  --kz-sh-2: 0 4px 14px -4px rgba(21, 48, 44, .14);
  --kz-sh-3: 0 24px 60px -20px rgba(21, 48, 44, .40);

  --kz-focus: var(--kz-signal);
  color-scheme: light;
}

/* ---- SİSTEM KOYU — kullanıcı açıkça "light" demediyse ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-kz-theme="light"]) {
    --kz-bg:         #0E1A17;
    --kz-surface:    #15241F;
    --kz-surface-2:  #1A2C26;
    --kz-surface-3:  #21382F;

    --kz-line:        #24382F;
    --kz-line-strong: #334B41;

    --kz-text:    #E4EDE8;
    --kz-text-2:  #9DAFA7;
    --kz-text-3:  #708179;
    --kz-on-ink:  #EAF1ED;

    /* Turuncu koyu zeminde yakar — doygunluğu düşür, parlaklığı yükselt */
    --kz-accent:      #F5754A;
    --kz-accent-soft: #35201A;
    --kz-accent-text: #FF9166;

    --kz-ok:          #4FB183;  --kz-ok-soft:      #163024;
    --kz-info:        #5FA3D2;  --kz-info-soft:    #142835;
    --kz-warn:        #D9A94A;  --kz-warn-soft:    #322614;
    --kz-danger:      #E4715A;  --kz-danger-soft:  #351C17;
    --kz-neutral:     #8C9A93;  --kz-neutral-soft: #1E2E28;

    --kz-sh-1: 0 1px 2px rgba(0, 0, 0, .40);
    --kz-sh-2: 0 4px 14px -4px rgba(0, 0, 0, .55);
    --kz-sh-3: 0 24px 60px -20px rgba(0, 0, 0, .75);

    color-scheme: dark;
  }
}

/* ---- SEÇİLİ KOYU — kullanıcı açıkça koyu dediyse (açık OS'ta da geçerli) ---- */
:root[data-kz-theme="dark"] {
  --kz-bg:         #0E1A17;
  --kz-surface:    #15241F;
  --kz-surface-2:  #1A2C26;
  --kz-surface-3:  #21382F;

  --kz-line:        #24382F;
  --kz-line-strong: #334B41;

  --kz-text:    #E4EDE8;
  --kz-text-2:  #9DAFA7;
  --kz-text-3:  #708179;
  --kz-on-ink:  #EAF1ED;

  --kz-accent:      #F5754A;
  --kz-accent-soft: #35201A;
  --kz-accent-text: #FF9166;

  --kz-ok:          #4FB183;  --kz-ok-soft:      #163024;
  --kz-info:        #5FA3D2;  --kz-info-soft:    #142835;
  --kz-warn:        #D9A94A;  --kz-warn-soft:    #322614;
  --kz-danger:      #E4715A;  --kz-danger-soft:  #351C17;
  --kz-neutral:     #8C9A93;  --kz-neutral-soft: #1E2E28;

  --kz-sh-1: 0 1px 2px rgba(0, 0, 0, .40);
  --kz-sh-2: 0 4px 14px -4px rgba(0, 0, 0, .55);
  --kz-sh-3: 0 24px 60px -20px rgba(0, 0, 0, .75);

  color-scheme: dark;
}

/* ---- YOĞUNLUK: sıkı — 12 saatlik tablo mesaisi için ---- */
:root[data-kz-density="compact"] {
  --kz-row-y: 8px;
  --kz-cell-x: 12px;
  --kz-t-body: 13px;
}

/* ------------------------------------------------------------------ 4 --
   TEMEL
   -------------------------------------------------------------------- */
.kz *, .kz *::before, .kz *::after { box-sizing: border-box; }

/* `hidden` özniteliği her zaman kazanır. Tarayıcının varsayılan
   `[hidden]{display:none}` kuralı en düşük öncelikte; satır içi
   `style="display:flex"` onu eziyor ve gizli olması gereken form
   ekranda kalıyordu. */
.kz [hidden] { display: none !important; }

body.kz {
  margin: 0;
  font-family: var(--kz-font-sans);
  font-size: var(--kz-t-body);
  line-height: var(--kz-lh-body);
  color: var(--kz-text);
  background: var(--kz-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.kz h1, .kz h2, .kz h3, .kz h4 {
  font-family: var(--kz-font-display);
  font-weight: 600;
  line-height: var(--kz-lh-tight);
  letter-spacing: -.015em;
  text-wrap: balance;
  margin: 0;
}
.kz a { color: inherit; text-decoration: none; }
.kz button, .kz input, .kz select, .kz textarea { font: inherit; color: inherit; }
.kz :focus-visible {
  outline: 2px solid var(--kz-focus);
  outline-offset: 2px;
  border-radius: var(--kz-r-sm);
}

/* Rakam hizası — CRM'de sütunlarda sayı var; orantısız rakam okunmaz. */
.kz-num, .kz-tbl td, .kz-metric, .kz-mono {
  font-variant-numeric: tabular-nums;
}
.kz-mono { font-family: var(--kz-font-mono); font-size: .92em; letter-spacing: -.01em; }
.kz-muted { color: var(--kz-text-2); }
.kz-dim   { color: var(--kz-text-3); }

/* Geniş içerik kendi kabında kayar — sayfa gövdesi asla yana kaymaz. */
.kz-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

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

/* ------------------------------------------------------------------ 5 --
   İKON — sprite'tan currentColor ile boyanır
   -------------------------------------------------------------------- */
.kz-ico {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.18em;
}
.kz-ico-sm { width: 15px; height: 15px; }
.kz-ico-lg { width: 22px; height: 22px; }

/* ------------------------------------------------------------------------
   DÜZEN
   -------------------------------------------------------------------- */
.kz-app { display: flex; min-height: 100vh; }

.kz-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.kz-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--kz-s3);
  padding: var(--kz-s3) var(--kz-s4);
  /* Yarı saydam + bulanık: içerik altından kayarken üst çubuk yüzer,
     sayfayı ikiye bölen kalın bir bant gibi durmaz. */
  background: color-mix(in srgb, var(--kz-surface) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--kz-line);
}
@media (min-width: 900px)  { .kz-topbar { padding: var(--kz-s3) var(--kz-s6); } }
@media (min-width: 1400px) { .kz-topbar { padding: var(--kz-s4) var(--kz-s8); } }
.kz-topbar h1 { font-size: var(--kz-t-title); letter-spacing: -.025em; }
.kz-topbar .kz-sub { color: var(--kz-text-2); font-size: var(--kz-t-small); }
.kz-topbar-actions { margin-left: auto; display: flex; gap: var(--kz-s2); align-items: center; }

/* Genel arama — panelin her yerinden firmaya ulaşma yolu. */
.kz-search { position: relative; display: none; }
@media (min-width: 1080px) { .kz-search { display: block; } }
.kz-search .kz-ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--kz-text-3); pointer-events: none;
}
.kz-search input {
  width: 210px; padding: 8px 12px 8px 34px;
  border: 1px solid var(--kz-line-strong); border-radius: var(--kz-r-pill);
  background: var(--kz-surface-3); color: var(--kz-text);
  font-size: var(--kz-t-small); outline: none;
  transition: width var(--kz-dur-2) var(--kz-ease), border-color var(--kz-dur-1), background var(--kz-dur-1);
}
.kz-search input::placeholder { color: var(--kz-text-3); }
.kz-search input:focus {
  width: 300px; background: var(--kz-surface); border-color: var(--kz-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kz-accent) 16%, transparent);
}

/* İkon butonu — üst çubuktaki tema/yoğunluk anahtarları */
.kz-iconbtn {
  display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto;
  border: 1px solid var(--kz-line); border-radius: var(--kz-r-md);
  background: var(--kz-surface); color: var(--kz-text-2); cursor: pointer;
  transition: color var(--kz-dur-1), border-color var(--kz-dur-1), background var(--kz-dur-1);
}
.kz-iconbtn:hover { color: var(--kz-text); border-color: var(--kz-line-strong); background: var(--kz-surface-2); }
.kz-iconbtn[aria-pressed="true"] { color: var(--kz-accent-text); border-color: var(--kz-accent); background: var(--kz-accent-soft); }

.kz-content { padding: var(--kz-s4); display: flex; flex-direction: column; gap: var(--kz-s5); }
/* GEÇİŞ KURALI: taşınmamış sayfaların gövdesi app.css'ten geliyor ve
   `.panel{margin-bottom:22px}` gibi kendi alt boşluklarını taşıyor.
   `.kz-content` zaten flex-gap veriyor; ikisi üst üste binmesin.
   Son sayfa taşındığında bu kural silinir. */
.kz-content > * { margin-bottom: 0; }

@media (min-width: 900px)  { .kz-content { padding: var(--kz-s6); gap: var(--kz-s6); } }
@media (min-width: 1400px) { .kz-content { padding: var(--kz-s7) var(--kz-s8); } }

/* ------------------------------------------------------------------------
   KENAR ÇUBUĞU
   Mobilde çekmece, masaüstünde sabit. `.kz-side.rail` daraltılmış hâl.
   -------------------------------------------------------------------- */
.kz-side {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: var(--kz-side-w);
  display: flex; flex-direction: column;
  background: var(--kz-ink);
  background-image: linear-gradient(180deg, rgba(255,255,255,.035), transparent 220px);
  border-right: 1px solid rgba(255, 255, 255, .06);
  color: var(--kz-on-ink);
  transform: translateX(-100%);
  transition: transform var(--kz-dur-3) var(--kz-ease);
}
body.kz-nav-open .kz-side { transform: none; box-shadow: var(--kz-sh-3); }

.kz-backdrop {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(8, 20, 17, .55);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--kz-dur-2) var(--kz-ease);
}
body.kz-nav-open .kz-backdrop { opacity: 1; pointer-events: auto; }

.kz-brand {
  display: flex; align-items: center; gap: var(--kz-s3);
  padding: var(--kz-s5) var(--kz-s5) var(--kz-s4);
  font-family: var(--kz-font-display);
  font-weight: 700; font-size: 16px; letter-spacing: -.02em;
  color: #fff;
}
/* Marka nişanı: dört kare — biri dolu. "Katalog / ızgara" fikri. */
.kz-mark {
  width: 30px; height: 30px; flex: 0 0 auto;
  border: 1.5px solid var(--kz-signal); border-radius: 8px;
  display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 2px; padding: 4px;
}
.kz-mark i { background: var(--kz-signal); border-radius: 1px; opacity: .4; }
.kz-mark i:first-child { opacity: 1; }
.kz-brand small {
  display: block; font-family: var(--kz-font-sans);
  font-size: var(--kz-t-micro); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(234, 241, 237, .5);
}

.kz-nav { flex: 1; overflow-y: auto; padding: 0 var(--kz-s3) var(--kz-s4); display: flex; flex-direction: column; gap: 1px; }

.kz-nav a {
  display: flex; align-items: center; gap: var(--kz-s3);
  padding: 9px var(--kz-s3);
  border-radius: var(--kz-r-md);
  color: rgba(234, 241, 237, .72);
  font-weight: 500;
  transition: background var(--kz-dur-1), color var(--kz-dur-1);
}
.kz-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
/* Aktif öğe: dolu turuncu blok yerine hafif yüzey + turuncu ikon + sol
   gösterge çubuğu. Dolu blok menüyü bağırtıyor, ekranın asıl işi içerik. */
.kz-nav a { position: relative; }
.kz-nav a.on { background: rgba(255, 255, 255, .09); color: #fff; font-weight: 600; }
.kz-nav a.on::before {
  content: ''; position: absolute; left: -6px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 3px; background: var(--kz-signal);
}
.kz-nav a.on .kz-ico { opacity: 1; color: var(--kz-signal); }
.kz-nav a .kz-ico { opacity: .72; }
.kz-nav a:hover .kz-ico { opacity: 1; }

.kz-nav-badge {
  margin-left: auto;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: var(--kz-r-pill);
  background: var(--kz-signal); color: #fff;
  font-size: var(--kz-t-micro); font-weight: 700;
  display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}
.kz-nav a.on .kz-nav-badge { background: rgba(255, 255, 255, .3); }
/* Geciken iş varsa sayı rengini değiştirir: 12 rakamı tek başına
   "acele et" demiyor, rengi diyor. */
.kz-nav-badge.uyari { background: var(--kz-danger); }

/* Grup (akordeon) */
.kz-navgroup { display: flex; flex-direction: column; margin-top: var(--kz-s2); }
.kz-navhead {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--kz-s2) var(--kz-s3);
  border-radius: var(--kz-r-md);
  font-size: var(--kz-t-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: rgba(234, 241, 237, .45);
  transition: color var(--kz-dur-1), background var(--kz-dur-1);
}
.kz-navhead:hover { background: rgba(255, 255, 255, .05); color: rgba(234, 241, 237, .8); }
.kz-navgroup.open > .kz-navhead { color: rgba(234, 241, 237, .8); }
.kz-navhead .kz-ico { transition: transform var(--kz-dur-2) var(--kz-ease); opacity: .6; }
.kz-navgroup.open > .kz-navhead .kz-ico { transform: rotate(90deg); }
/* grid-template-rows animasyonu: yüksekliği bilmeden yumuşak açılış */
.kz-navbody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--kz-dur-2) var(--kz-ease); }
.kz-navgroup.open > .kz-navbody { grid-template-rows: 1fr; }
.kz-navbody > div { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1px; padding-left: var(--kz-s2); }

.kz-sideuser {
  display: flex; align-items: center; gap: var(--kz-s3);
  padding: var(--kz-s3) var(--kz-s4);
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.kz-sideuser b { display: block; color: #fff; font-size: var(--kz-t-body); font-weight: 600; }
.kz-sideuser span { color: rgba(234, 241, 237, .5); font-size: var(--kz-t-cap); }
.kz-sideuser .kz-logout { margin-left: auto; color: rgba(234, 241, 237, .55); display: flex; }
.kz-sideuser .kz-logout:hover { color: var(--kz-signal); }

@media (min-width: 900px) {
  .kz-side { transform: none; }
  .kz-main { margin-left: var(--kz-side-w); }
  .kz-backdrop, .kz-navtoggle { display: none; }
  /* Daraltılmış ray: ikon-only, etiket hover'da açılmaz — kasten sade */
  body.kz-rail .kz-side { width: var(--kz-side-rail); }
  body.kz-rail .kz-main { margin-left: var(--kz-side-rail); }
  body.kz-rail .kz-nav a { justify-content: center; padding: 10px 0; }
  body.kz-rail .kz-nav a > span, body.kz-rail .kz-navhead > span,
  body.kz-rail .kz-brand > div, body.kz-rail .kz-sideuser > div { display: none; }
  body.kz-rail .kz-brand { justify-content: center; padding-inline: 0; }
  body.kz-rail .kz-sideuser { justify-content: center; }
  body.kz-rail .kz-nav-badge {
    position: absolute; margin: 0; transform: translate(14px, -12px);
    min-width: 16px; height: 16px; font-size: 9.5px;
  }
  body.kz-rail .kz-nav a { position: relative; }
}

.kz-navtoggle {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: 0 0 auto;
  border: 1px solid var(--kz-line-strong); border-radius: var(--kz-r-md);
  background: var(--kz-surface); color: var(--kz-text); cursor: pointer;
}
.kz-navtoggle:hover { border-color: var(--kz-ink); }

/* ------------------------------------------------------------------------
   PANEL — varsayılan kap. Kenar var, gölge YOK.
   Gölge "yüzüyor" demektir; her bloğa vermek hiyerarşiyi düzleştirir.
   -------------------------------------------------------------------- */
.kz-panel {
  background: var(--kz-surface);
  border: 1px solid var(--kz-line);
  border-radius: var(--kz-r-lg);
  overflow: hidden;
}
.kz-panel-h {
  display: flex; align-items: center; justify-content: space-between; gap: var(--kz-s3);
  padding: var(--kz-s4) var(--kz-s5);
  border-bottom: 1px solid var(--kz-line);
  font-family: var(--kz-font-display);
  font-size: var(--kz-t-lead); font-weight: 600; letter-spacing: -.01em;
}
.kz-panel-h .kz-ico { color: var(--kz-text-2); }
.kz-panel-b { padding: var(--kz-s5); }
.kz-panel-b > * + * { margin-top: var(--kz-s3); }
/* Tablo panelde kenardan kenara oturur; iç boşluk hücrelerin işi. */
.kz-panel > .kz-scroll-x > .kz-tbl { border-radius: 0; }

/* ------------------------------------------------------------------------
   ÖZET KUTUSU — sayfanın konusu SAYIYSA kullanılır, süs olarak değil.
   -------------------------------------------------------------------- */
.kz-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--kz-s3); }
@media (min-width: 700px)  { .kz-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--kz-s4); } }
/* Geniş ekranda sütun sayısı SABİT 4: `auto-fit` 5 sütun üretip 7 kutuyu
   5+2 diye kırıyor ve son satırda üç boşluk kalıyordu. Ana metrik iki sütuna
   yayılınca 8 gözlü ızgara tam dolar ve hiyerarşi de doğru kurulur. */
@media (min-width: 1080px) { .kz-stats { grid-template-columns: repeat(4, 1fr); } }
.kz-stat.oncelikli { grid-column: span 2; }
@media (max-width: 699px)  { .kz-stat.oncelikli { grid-column: span 2; } }

.kz-stat {
  background: var(--kz-surface);
  border: 1px solid var(--kz-line);
  border-radius: var(--kz-r-lg);
  padding: var(--kz-s5);
  display: flex; flex-direction: column; gap: var(--kz-s1);
}
.kz-stat .kz-stat-lbl {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--kz-t-cap); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--kz-text-2);
}
.kz-metric {
  font-family: var(--kz-font-display);
  font-size: var(--kz-t-metric); font-weight: 700;
  letter-spacing: -.03em; line-height: 1;
}
.kz-stat .kz-stat-foot { font-size: var(--kz-t-small); color: var(--kz-text-2); }
/* Renk yalnızca ANLAM taşıdığında; her kutu renkli olursa hiçbiri öne çıkmaz. */
.kz-stat.is-accent .kz-metric { color: var(--kz-accent-text); }
.kz-stat.is-ok     .kz-metric { color: var(--kz-ok); }
.kz-stat.is-warn   .kz-metric { color: var(--kz-warn); }
.kz-stat.is-danger .kz-metric { color: var(--kz-danger); }

/* Değişim işareti */
.kz-delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-size: var(--kz-t-small); }
.kz-delta.up { color: var(--kz-ok); }
.kz-delta.down { color: var(--kz-danger); }

/* ------------------------------------------------------------------------
   TABLO
   -------------------------------------------------------------------- */
.kz-tbl { width: 100%; border-collapse: collapse; background: var(--kz-surface); }
.kz-tbl th {
  position: sticky; top: 0; z-index: 1;
  text-align: left;
  padding: var(--kz-s3) var(--kz-cell-x);
  background: var(--kz-surface-2);
  border-bottom: 1px solid var(--kz-line);
  font-size: var(--kz-t-cap); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--kz-text-2);
  white-space: nowrap;
}
.kz-tbl td {
  padding: var(--kz-row-y) var(--kz-cell-x);
  border-bottom: 1px solid var(--kz-line);
  vertical-align: middle;
}
.kz-tbl tbody tr:last-child td { border-bottom: none; }
.kz-tbl tbody tr:hover td { background: var(--kz-surface-2); }
.kz-tbl .kz-primary-cell { font-weight: 600; }
.kz-tbl .kz-primary-cell a:hover { color: var(--kz-accent-text); }
.kz-tbl .kz-acts { text-align: right; white-space: nowrap; }
/* Durum şeridi: satırın solunda ince renk — göz taramada renge takılır */
.kz-tbl td.kz-stripe { position: relative; }
.kz-tbl td.kz-stripe::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--kz-stripe, transparent);
}

/* ------------------------------------------------------------------------
   ROZET — durum, tonuyla okunur. Ton = anlam.
   -------------------------------------------------------------------- */
.kz-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--kz-r-pill);
  font-size: var(--kz-t-cap); font-weight: 600; line-height: 1.5;
  white-space: nowrap;
  background: var(--kz-neutral-soft); color: var(--kz-neutral);
}
.kz-badge.ok      { background: var(--kz-ok-soft);      color: var(--kz-ok); }
.kz-badge.info    { background: var(--kz-info-soft);    color: var(--kz-info); }
.kz-badge.warn    { background: var(--kz-warn-soft);    color: var(--kz-warn); }
.kz-badge.danger  { background: var(--kz-danger-soft);  color: var(--kz-danger); }
.kz-badge.accent  { background: var(--kz-accent-soft);  color: var(--kz-accent-text); }
.kz-badge.solid   { background: var(--kz-ink); color: #fff; }
/* Nokta işaretli varyant — metin rengine güvenmeden durum belli olsun */
.kz-badge .kz-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

/* ------------------------------------------------------------------------
   BUTON
   -------------------------------------------------------------------- */
.kz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px;
  border: 1px solid transparent; border-radius: var(--kz-r-md);
  font-size: var(--kz-t-body); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background var(--kz-dur-1), border-color var(--kz-dur-1), color var(--kz-dur-1);
}
.kz-btn:disabled { opacity: .5; cursor: not-allowed; }
.kz-btn.primary { background: var(--kz-signal); color: #fff; }
.kz-btn.primary:hover:not(:disabled) { background: var(--kz-signal-deep); }
.kz-btn.dark { background: var(--kz-ink); color: #fff; }
.kz-btn.dark:hover:not(:disabled) { background: var(--kz-ink-2); }
.kz-btn.line { background: var(--kz-surface); border-color: var(--kz-line-strong); color: var(--kz-text); }
.kz-btn.line:hover:not(:disabled) { border-color: var(--kz-ink); }
.kz-btn.ghost { background: transparent; color: var(--kz-text-2); }
.kz-btn.ghost:hover:not(:disabled) { background: var(--kz-surface-3); color: var(--kz-text); }
.kz-btn.danger { background: var(--kz-danger); color: #fff; }
.kz-btn.sm { padding: 6px 11px; font-size: var(--kz-t-small); border-radius: var(--kz-r-sm); }
.kz-btn.lg { padding: 12px 20px; font-size: var(--kz-t-lead); }
.kz-btn.block { width: 100%; }
.kz-btn.icon { padding: 8px; }
.kz-btnrow { display: flex; flex-wrap: wrap; gap: var(--kz-s2); }

/* ------------------------------------------------------------------------
   FORM
   -------------------------------------------------------------------- */
.kz-field { display: flex; flex-direction: column; gap: 6px; }
.kz-field > label { font-size: var(--kz-t-small); font-weight: 600; color: var(--kz-text); }
.kz-field .kz-hint { font-size: var(--kz-t-small); color: var(--kz-text-2); }
.kz-field .kz-err { font-size: var(--kz-t-small); color: var(--kz-danger); }

.kz-input, .kz-select, .kz-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--kz-line-strong);
  border-radius: var(--kz-r-md);
  background: var(--kz-surface);
  color: var(--kz-text);
  outline: none;
  transition: border-color var(--kz-dur-1), box-shadow var(--kz-dur-1);
}
.kz-textarea { resize: vertical; min-height: 90px; line-height: var(--kz-lh-body); }
.kz-input::placeholder, .kz-textarea::placeholder { color: var(--kz-text-3); }
.kz-input:focus, .kz-select:focus, .kz-textarea:focus {
  border-color: var(--kz-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kz-accent) 18%, transparent);
}
.kz-input:disabled, .kz-select:disabled { background: var(--kz-surface-3); color: var(--kz-text-3); cursor: not-allowed; }

/* Yerel ok yerine token renginde chevron. `background-color` ayrı yazılır ki
   sonraki kurallar shorthand ile oku silmesin. */
.kz-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235F6E68' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 14px;
}
:root[data-kz-theme="dark"] .kz-select,
:root:not([data-kz-theme="light"]) .kz-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239DAFA7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: light) {
  :root:not([data-kz-theme="dark"]) .kz-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235F6E68' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}

/* ------------------------------------------------------------------------
   FİLTRE ÇUBUĞU + ÇİP
   -------------------------------------------------------------------- */
.kz-filterbar { display: flex; flex-wrap: wrap; gap: var(--kz-s2); align-items: center; }
.kz-filterbar .kz-input, .kz-filterbar .kz-select { width: auto; padding: 8px 12px; font-size: var(--kz-t-small); }
.kz-filterbar .kz-select { padding-right: 32px; }
.kz-filterbar .kz-grow { flex: 1 1 200px; min-width: 0; }

.kz-chipbar { display: flex; flex-wrap: wrap; gap: 6px; }
.kz-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--kz-line); border-radius: var(--kz-r-pill);
  background: var(--kz-surface); color: var(--kz-text-2);
  font-size: var(--kz-t-small); font-weight: 600;
  cursor: pointer;
  transition: border-color var(--kz-dur-1), background var(--kz-dur-1), color var(--kz-dur-1);
}
.kz-chip:hover { border-color: var(--kz-ink); color: var(--kz-text); }
.kz-chip.on { background: var(--kz-ink); border-color: var(--kz-ink); color: #fff; }
.kz-chip .kz-n { font-family: var(--kz-font-mono); font-size: var(--kz-t-micro); opacity: .65; }

/* ------------------------------------------------------------------------
   UYARI ŞERİDİ
   -------------------------------------------------------------------- */
.kz-alert {
  display: flex; gap: var(--kz-s3); align-items: flex-start;
  padding: var(--kz-s3) var(--kz-s4);
  border: 1px solid transparent; border-radius: var(--kz-r-md);
  font-size: var(--kz-t-body);
}
.kz-alert .kz-ico { margin-top: 2px; }
.kz-alert.info   { background: var(--kz-info-soft);   color: var(--kz-info);   border-color: color-mix(in srgb, var(--kz-info) 25%, transparent); }
.kz-alert.ok     { background: var(--kz-ok-soft);     color: var(--kz-ok);     border-color: color-mix(in srgb, var(--kz-ok) 25%, transparent); }
.kz-alert.warn   { background: var(--kz-warn-soft);   color: var(--kz-warn);   border-color: color-mix(in srgb, var(--kz-warn) 25%, transparent); }
.kz-alert.danger { background: var(--kz-danger-soft); color: var(--kz-danger); border-color: color-mix(in srgb, var(--kz-danger) 25%, transparent); }

/* ------------------------------------------------------------------------
   ANAHTAR / DEĞER LİSTESİ
   -------------------------------------------------------------------- */
.kz-kv { display: flex; flex-direction: column; }
.kz-kv > div {
  display: flex; justify-content: space-between; gap: var(--kz-s3);
  padding: var(--kz-s2) 0;
  border-top: 1px solid var(--kz-line);
}
.kz-kv > div:first-child { border-top: none; }
.kz-kv .k { color: var(--kz-text-2); }
.kz-kv .v { font-weight: 600; text-align: right; min-width: 0; word-break: break-word; }

/* ------------------------------------------------------------------------
   AVATAR / İLERLEME / BOŞ DURUM / SAYFALAMA / BİLDİRİM
   -------------------------------------------------------------------- */
.kz-avatar {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: var(--kz-r-md);
  background: var(--kz-brass); color: #241A05;
  display: grid; place-items: center;
  font-family: var(--kz-font-display); font-weight: 700;
  overflow: hidden;
}
.kz-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kz-avatar.sm { width: 26px; height: 26px; font-size: var(--kz-t-small); border-radius: var(--kz-r-sm); }

.kz-progress { height: 6px; border-radius: var(--kz-r-pill); background: var(--kz-surface-3); overflow: hidden; }
.kz-progress > i { display: block; height: 100%; background: var(--kz-signal); border-radius: inherit; transition: width var(--kz-dur-3) var(--kz-ease); }

.kz-empty { display: flex; flex-direction: column; align-items: center; gap: var(--kz-s2); padding: var(--kz-s8) var(--kz-s4); text-align: center; color: var(--kz-text-2); }
.kz-empty .kz-ico { width: 30px; height: 30px; color: var(--kz-text-3); }
.kz-empty b { font-family: var(--kz-font-display); font-size: var(--kz-t-lead); color: var(--kz-text); }

.kz-pager { display: flex; gap: 6px; align-items: center; justify-content: center; color: var(--kz-text-2); }
.kz-pager a, .kz-pager span {
  padding: 7px 12px; border: 1px solid var(--kz-line-strong); border-radius: var(--kz-r-sm);
  background: var(--kz-surface); font-weight: 600; font-size: var(--kz-t-small);
}
.kz-pager a:hover { border-color: var(--kz-ink); }
.kz-pager .on { background: var(--kz-ink); border-color: var(--kz-ink); color: #fff; }

.kz-toast {
  position: fixed; left: 50%; bottom: var(--kz-s5); z-index: 100;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--kz-s2);
  padding: var(--kz-s3) var(--kz-s5);
  border-radius: var(--kz-r-md);
  background: var(--kz-ink); color: #fff;
  box-shadow: var(--kz-sh-3);
  animation: kz-toast-in var(--kz-dur-3) var(--kz-ease);
}
@keyframes kz-toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ------------------------------------------------------------------------
   MODAL
   -------------------------------------------------------------------- */
.kz-modal {
  margin: auto; padding: 0; max-height: 90vh; width: min(560px, calc(100vw - 2 * var(--kz-s4)));
  border: none; border-radius: var(--kz-r-xl);
  background: var(--kz-surface); color: var(--kz-text);
  box-shadow: var(--kz-sh-3);
  overflow: auto;
}
.kz-modal[open] { animation: kz-modal-in var(--kz-dur-2) var(--kz-ease); }
@keyframes kz-modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.kz-modal::backdrop { background: rgba(8, 20, 17, .5); backdrop-filter: blur(4px); }
.kz-modal-h { display: flex; align-items: center; justify-content: space-between; gap: var(--kz-s3); padding: var(--kz-s4); border-bottom: 1px solid var(--kz-line); font-family: var(--kz-font-display); font-size: var(--kz-t-lead); font-weight: 600; }
.kz-modal-b { padding: var(--kz-s4); display: flex; flex-direction: column; gap: var(--kz-s3); }
.kz-modal-f { padding: var(--kz-s3) var(--kz-s4); border-top: 1px solid var(--kz-line); display: flex; justify-content: flex-end; gap: var(--kz-s2); background: var(--kz-surface-2); }

/* ------------------------------------------------------------------------
   SEKME
   -------------------------------------------------------------------- */
.kz-tabs { display: flex; gap: var(--kz-s1); border-bottom: 1px solid var(--kz-line); overflow-x: auto; }
.kz-tabs a {
  padding: var(--kz-s2) var(--kz-s3);
  border-bottom: 2px solid transparent;
  color: var(--kz-text-2); font-weight: 600; font-size: var(--kz-t-body);
  white-space: nowrap;
  transition: color var(--kz-dur-1), border-color var(--kz-dur-1);
}
.kz-tabs a:hover { color: var(--kz-text); }
.kz-tabs a.on { color: var(--kz-accent-text); border-bottom-color: var(--kz-accent); }

/* ------------------------------------------------------------------------
   MENTÖRLER — kart listesi ve sohbet
   -------------------------------------------------------------------- */
.kz-mentorgrid { display: grid; grid-template-columns: 1fr; gap: var(--kz-s3); }
@media (min-width: 760px) { .kz-mentorgrid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } }

.kz-mentor {
  display: flex; align-items: flex-start; gap: var(--kz-s3);
  padding: var(--kz-s4) var(--kz-s5);
  background: var(--kz-surface); border: 1px solid var(--kz-line);
  border-radius: var(--kz-r-lg); color: inherit;
  transition: border-color var(--kz-dur-1), box-shadow var(--kz-dur-1), transform var(--kz-dur-1);
}
.kz-mentor:hover { border-color: var(--kz-line-strong); box-shadow: var(--kz-sh-2); transform: translateY(-1px); }
.kz-mentor-ikon {
  display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: var(--kz-r-md);
  background: var(--kz-accent-soft); color: var(--kz-accent-text);
}
.kz-mentor-govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kz-mentor-govde b { font-family: var(--kz-font-display); font-size: var(--kz-t-lead); font-weight: 600; }
.kz-mentor-unvan { font-size: var(--kz-t-small); color: var(--kz-text-2); }
.kz-mentor-ozet  { margin-top: 5px; font-size: var(--kz-t-small); color: var(--kz-text-2); line-height: 1.55; }
.kz-mentor-ok { margin-left: auto; align-self: center; color: var(--kz-text-3); }
.kz-mentor:hover .kz-mentor-ok { color: var(--kz-accent); }

/* --- sohbet --- */
.kz-sohbet {
  display: flex; flex-direction: column;
  background: var(--kz-surface); border: 1px solid var(--kz-line);
  border-radius: var(--kz-r-lg); overflow: hidden;
  /* Yükseklik ekrana sabitlenir: akış kendi içinde kayar, sayfa kaymaz —
     yazma kutusu her zaman elin altında kalsın. */
  height: calc(100vh - 190px); min-height: 420px;
}
.kz-sohbet-h {
  display: flex; align-items: center; gap: var(--kz-s3);
  padding: var(--kz-s3) var(--kz-s4);
  border-bottom: 1px solid var(--kz-line); background: var(--kz-surface-2);
}
.kz-sohbet-h b { font-family: var(--kz-font-display); font-size: var(--kz-t-lead); font-weight: 600; }

.kz-sohbet-akis {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--kz-s5);
  display: flex; flex-direction: column; gap: var(--kz-s3);
}
.kz-sohbet-bos {
  margin: auto; text-align: center; max-width: 44ch;
  display: flex; flex-direction: column; align-items: center; gap: var(--kz-s2);
  color: var(--kz-text-2);
}
.kz-sohbet-bos .kz-ico { color: var(--kz-text-3); }
.kz-sohbet-bos b { font-family: var(--kz-font-display); font-size: var(--kz-t-lead); color: var(--kz-text); }

.kz-msj { max-width: 76ch; display: flex; flex-direction: column; gap: 3px; }
.kz-msj-govde {
  padding: var(--kz-s3) var(--kz-s4);
  border-radius: var(--kz-r-lg);
  line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere;
}
.kz-msj-zaman { font-size: var(--kz-t-micro); color: var(--kz-text-3); font-family: var(--kz-font-mono); }

.kz-msj.ben { align-self: flex-end; align-items: flex-end; }
.kz-msj.ben .kz-msj-govde { background: var(--kz-ink); color: var(--kz-on-ink); border-bottom-right-radius: var(--kz-r-sm); }
.kz-msj.mentor .kz-msj-govde { background: var(--kz-surface-3); border-bottom-left-radius: var(--kz-r-sm); }
.kz-msj.hatali .kz-msj-govde { background: var(--kz-danger-soft); color: var(--kz-danger); }

/* "yazıyor" göstergesi */
.kz-yaziyor .kz-msj-govde { display: flex; gap: 4px; align-items: center; padding: var(--kz-s3) var(--kz-s4); }
.kz-nokta { width: 6px; height: 6px; border-radius: 50%; background: var(--kz-text-3); animation: kz-nokta 1.2s ease-in-out infinite; }
.kz-nokta:nth-child(2) { animation-delay: .2s; }
.kz-nokta:nth-child(3) { animation-delay: .4s; }
@keyframes kz-nokta { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kz-nokta { animation: none; opacity: .6; } }

.kz-sohbet-yaz {
  display: flex; gap: var(--kz-s2); align-items: flex-end;
  padding: var(--kz-s3) var(--kz-s4);
  border-top: 1px solid var(--kz-line); background: var(--kz-surface-2);
}
.kz-sohbet-yaz .kz-textarea { min-height: 44px; max-height: 190px; resize: none; }
.kz-sohbet-ipucu { padding: 6px var(--kz-s4) var(--kz-s3); font-size: var(--kz-t-micro); color: var(--kz-text-3); background: var(--kz-surface-2); }

/* ------------------------------------------------------------------------
   GÜNÜN SÖZÜ — koçun sesli okunan motivasyon metni
   Sayfanın ilk bloğu. Sıcak, açık bir yüzey: gün koyu bir uyarı bloğuyla
   değil, insanın kendisine söylenen bir sözle başlasın.
   -------------------------------------------------------------------- */
/* GÜNÜN SÖZÜ — panonun ilk okunan yeri.
   Önce %9 pirinç yıkamasıyla neredeyse beyazdı: "arka planı renkli" demek
   zor, göz oraya hiç takılmıyordu. Artık KOYU ve kararlı bir yüzey —
   giriş ekranındaki marka paneli gibi HER İKİ TEMADA DA koyu kalır, çünkü
   bu blok bir kimlik anı; temaya göre kılık değiştirmesi gerekmiyor.
   Metin sesli de okunacağı için tipografi rahat: büyük punto, geniş satır. */
.kz-motiv {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 88% -20%,
                    color-mix(in srgb, var(--kz-brass) 30%, transparent) 0%,
                    transparent 58%),
    linear-gradient(135deg, var(--kz-ink) 0%, #0F2420 100%);
  border: 1px solid color-mix(in srgb, var(--kz-brass) 34%, transparent);
  border-radius: var(--kz-r-lg);
  padding: var(--kz-s5);
  color: var(--kz-on-ink);
}
/* Logodaki dört kareli ızgaranın yankısı — giriş ekranıyla aynı motif.
   Dekoratif; ekran okuyucuya görünmez, azaltılmış harekette de sabit. */
.kz-motiv::after {
  content: '';
  position: absolute; right: -34px; top: -34px;
  width: 150px; height: 150px;
  background:
    linear-gradient(var(--kz-brass) 0 0) 0 0 / 46% 46% no-repeat,
    linear-gradient(var(--kz-brass) 0 0) 100% 0 / 46% 46% no-repeat,
    linear-gradient(var(--kz-brass) 0 0) 0 100% / 46% 46% no-repeat,
    linear-gradient(var(--kz-brass) 0 0) 100% 100% / 46% 46% no-repeat;
  opacity: .10;
  border-radius: 22px;
  pointer-events: none;
}
@media (min-width: 900px) { .kz-motiv { padding: var(--kz-s6) var(--kz-s7); } }

.kz-motiv-h { display: flex; align-items: center; gap: var(--kz-s3);
              margin-bottom: var(--kz-s4); position: relative; }
.kz-motiv-h .kz-etiket {
  font-size: var(--kz-t-cap); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  /* Koyu zeminde ham pirinç yeterince parlamıyor: bir tık açılır. */
  color: color-mix(in srgb, var(--kz-brass) 78%, #FFFFFF);
}

/* Dinle düğmesi bloğun görsel çıpası: metin okunmasa da ne yapılacağı belli. */
.kz-dinle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px 8px 12px;
  border: 1px solid color-mix(in srgb, var(--kz-brass) 55%, transparent);
  border-radius: var(--kz-r-pill);
  /* Blok koyulaştı: düğme de koyu zemine göre kuruldu, yoksa beyaz bir
     lekeye dönüyordu. Yarı saydam pirinç, üstündeki yüzeyi kirletmez. */
  background: color-mix(in srgb, var(--kz-brass) 16%, transparent);
  font-size: var(--kz-t-small); font-weight: 600; cursor: pointer;
  position: relative;
  transition: border-color var(--kz-dur-1), background var(--kz-dur-1);
}
/* ⚠️ ÖZGÜLLÜK (bu depoda ÜÇÜNCÜ kez): `.kz button { color: inherit }` kuralı
   (0,1,1) sınıf+eleman olduğu için düz `.kz-dinle`yi (0,1,0) EZİYOR ve düğme
   bloğun rengini miras alıyordu. Bir tık özgülleştirildi (0,2,0). */
.kz-motiv .kz-dinle { color: #FFFFFF; }
.kz-dinle:hover { border-color: var(--kz-brass); background: color-mix(in srgb, var(--kz-brass) 30%, transparent); }
.kz-dinle .kz-ico { color: color-mix(in srgb, var(--kz-brass) 70%, #FFFFFF); }
.kz-dinle[disabled] { opacity: .55; cursor: progress; }

/* Ekolayzer — çalarken hareket eder, durunca donar. */
.kz-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.kz-eq i { width: 2.5px; height: 4px; border-radius: 2px;
           background: color-mix(in srgb, var(--kz-brass) 70%, #FFFFFF); }
.kz-dinle.caliyor .kz-eq i { animation: kz-eq 900ms ease-in-out infinite; }
.kz-dinle.caliyor .kz-eq i:nth-child(2) { animation-delay: 150ms; }
.kz-dinle.caliyor .kz-eq i:nth-child(3) { animation-delay: 300ms; }
.kz-dinle.caliyor .kz-eq i:nth-child(4) { animation-delay: 450ms; }
@keyframes kz-eq { 0%,100% { height: 4px; } 50% { height: 13px; } }
@media (prefers-reduced-motion: reduce) { .kz-dinle.caliyor .kz-eq i { animation: none; height: 8px; } }

/* Panelin TAM genişliğini kullanır. Önce 68ch ile sınırlıydı (okuma
   uzunluğu kaygısı) ama geniş ekranda yarım sütun gibi duruyordu. */
.kz-motiv-metin { max-width: none; }
.kz-motiv-metin p {
  margin: 0 0 var(--kz-s4);
  font-size: var(--kz-t-lead); line-height: 1.8;
  color: var(--kz-on-ink);
  position: relative;   /* ızgara motifinin üstünde kalsın */
}
/* İlk paragraf günün cümlesi: bir tık büyük ve açık renkte. */
.kz-motiv-metin p:first-child { font-size: 17px; color: #FFFFFF; }
.kz-motiv-metin p:last-child { margin-bottom: 0; }
.kz-motiv-hata {
  font-size: var(--kz-t-small); margin-top: var(--kz-s2); position: relative;
  /* Koyu zeminde --kz-danger okunmuyor: açık kırmızıya çekildi. */
  color: color-mix(in srgb, var(--kz-danger) 45%, #FFFFFF);
}

/* ------------------------------------------------------------------------
   YZ KOÇ paneli — panonun ilk sözü
   Brifing (kz-brief) HAM GERÇEKLERİ söyler; koç YORUMLAR ve sıraya koyar.
   Bu yüzden koç açık yüzeyde, pirinç bir rayla: dikkat çeker ama brifingin
   koyu bloğuyla yarışmaz.
   -------------------------------------------------------------------- */
.kz-koc {
  background: var(--kz-surface);
  border: 1px solid var(--kz-line);
  border-left: 3px solid var(--kz-brass);
  border-radius: var(--kz-r-lg);
  overflow: hidden;
}
.kz-koc-h {
  display: flex; align-items: center; gap: var(--kz-s2);
  padding: var(--kz-s4) var(--kz-s5) var(--kz-s3);
}
.kz-koc-h .kz-ico { color: var(--kz-brass); }
.kz-koc-h b { font-family: var(--kz-font-display); font-size: var(--kz-t-lead); font-weight: 600; }
.kz-koc-h .kz-zaman { font-size: var(--kz-t-small); color: var(--kz-text-3); font-family: var(--kz-font-mono); }
.kz-koc-h .kz-sag { margin-left: auto; display: flex; gap: var(--kz-s2); align-items: center; }

.kz-koc-ozet {
  padding: 0 var(--kz-s5) var(--kz-s4);
  font-size: var(--kz-t-lead); line-height: 1.5; color: var(--kz-text);
  max-width: 78ch;
}

.kz-koc-liste { display: flex; flex-direction: column; border-top: 1px solid var(--kz-line); }
.kz-koc-oge {
  display: flex; gap: var(--kz-s3); align-items: flex-start;
  padding: var(--kz-s4) var(--kz-s5);
  border-top: 1px solid var(--kz-line);
}
.kz-koc-liste > .kz-koc-oge:first-child { border-top: none; }
.kz-koc-oge.bitti { opacity: .5; }
.kz-koc-oge.bitti .kz-koc-baslik { text-decoration: line-through; }

/* Öncelik noktası: renk TEK BAŞINA anlam taşımasın diye title da veriliyor. */
.kz-koc-nokta { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; margin-top: 7px; background: var(--kz-neutral); }
.kz-koc-nokta.yuksek { background: var(--kz-danger); }
.kz-koc-nokta.orta   { background: var(--kz-warn); }
.kz-koc-nokta.dusuk  { background: var(--kz-neutral); }

.kz-koc-govde { flex: 1; min-width: 0; }
.kz-koc-baslik { font-weight: 600; }
.kz-koc-gerekce { margin-top: 3px; color: var(--kz-text-2); font-size: var(--kz-t-small); max-width: 72ch; }
.kz-koc-eylem { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }

.kz-koc-bos { display: flex; flex-direction: column; align-items: center; gap: var(--kz-s2); padding: var(--kz-s6) var(--kz-s5); text-align: center; color: var(--kz-text-2); }
.kz-koc-yukleniyor { display: flex; align-items: center; gap: var(--kz-s3); padding: var(--kz-s6) var(--kz-s5); color: var(--kz-text-2); }
.kz-spin { width: 18px; height: 18px; border: 2px solid var(--kz-line); border-top-color: var(--kz-brass); border-radius: 50%; animation: kz-don .8s linear infinite; }
@keyframes kz-don { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kz-spin { animation: none; } }

/* ------------------------------------------------------------------------
   PANO (dashboard) bileşenleri
   -------------------------------------------------------------------- */

/* Brifing: günün özeti. Koyu zemin — sayfanın tek "konuşan" bloğu, dikkat
   ondan başlasın. Uyarı ve iyi haber AYRI satırda: karışırsa ikisi de kaybolur. */
.kz-brief {
  display: flex; gap: var(--kz-s3); align-items: flex-start;
  padding: var(--kz-s4) var(--kz-s5);
  border-radius: var(--kz-r-lg);
  background: linear-gradient(135deg, var(--kz-ink), var(--kz-ink-2));
  color: var(--kz-on-ink);
}
.kz-brief > .kz-ico { color: var(--kz-brass); margin-top: 1px; }
.kz-brief-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.kz-brief-satir { display: flex; gap: 8px; align-items: baseline; line-height: 1.6; }
.kz-brief-satir .kz-ico { flex: 0 0 auto; margin-top: 3px; }
.kz-brief b { font-weight: 600; }
.kz-brief-uyari b { color: #FFB27A; }
.kz-brief-iyi   { color: rgba(234, 241, 237, .82); }
.kz-brief-iyi b { color: #FFD9A8; }

/* Aksiyon şeridi: "şimdi ne yapmalıyım" — sol kenardaki renk şeridi
   aciliyeti taşır, sayının rengi değil (renk körü kullanıcı için de okunur). */
.kz-pillstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--kz-s3); }
.kz-pill {
  display: flex; align-items: center; gap: var(--kz-s3);
  padding: var(--kz-s3) var(--kz-s4);
  background: var(--kz-surface);
  border: 1px solid var(--kz-line); border-left: 3px solid var(--kz-neutral);
  border-radius: var(--kz-r-lg);
  color: inherit;
  transition: border-color var(--kz-dur-1), box-shadow var(--kz-dur-1), transform var(--kz-dur-1);
}
a.kz-pill:hover { box-shadow: var(--kz-sh-2); transform: translateY(-1px); }
.kz-pill .kz-pill-n {
  font-family: var(--kz-font-display); font-size: 24px; font-weight: 700;
  letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.kz-pill .kz-pill-l { font-size: var(--kz-t-cap); color: var(--kz-text-2); line-height: 1.35; }
.kz-pill.uyari  { border-left-color: var(--kz-danger); } .kz-pill.uyari  .kz-pill-n { color: var(--kz-danger); }
.kz-pill.sicak  { border-left-color: var(--kz-accent); } .kz-pill.sicak  .kz-pill-n { color: var(--kz-accent-text); }
.kz-pill.serin  { border-left-color: var(--kz-info); }   .kz-pill.serin  .kz-pill-n { color: var(--kz-info); }
.kz-pill.iyi    { border-left-color: var(--kz-ok); }     .kz-pill.iyi    .kz-pill-n { color: var(--kz-ok); }
/* Para birimli hap iki göze yayılır: tek başına satır sonunda kalmasın,
   ayrıca tıklanabilir olmayan tek hap olduğu için ayrışması doğru. */
.kz-pill.genis { grid-column: span 2; }

/* Grafik kartı */
.kz-panogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--kz-s4); }
.kz-chart {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--kz-surface); border: 1px solid var(--kz-line);
  border-radius: var(--kz-r-lg); padding: var(--kz-s4);
}
.kz-chart.genis { grid-column: span 2; }
@media (max-width: 760px) { .kz-chart.genis { grid-column: span 1; } }
.kz-chart-h {
  display: flex; align-items: center; gap: 7px; margin-bottom: var(--kz-s3);
  font-family: var(--kz-font-display); font-size: var(--kz-t-body); font-weight: 600;
}
.kz-chart-h .kz-ico { color: var(--kz-text-2); }
.kz-chart-h .kz-yan { margin-left: auto; font-family: var(--kz-font-sans); font-weight: 500; font-size: var(--kz-t-small); color: var(--kz-text-2); }
.kz-chart-tuval { position: relative; height: 248px; }
.kz-chart-bos {
  display: grid; place-items: center; height: 228px; padding: var(--kz-s4);
  text-align: center; color: var(--kz-text-3); line-height: 1.6;
}
.kz-chart-bos a { color: var(--kz-accent-text); font-weight: 600; }

/* Üçlü mini sayaç (e-posta, WhatsApp, ay karşılaştırma) */
.kz-minigrid { display: flex; gap: var(--kz-s2); }
.kz-minigrid > div {
  flex: 1; min-width: 0; text-align: center;
  padding: var(--kz-s3) var(--kz-s2);
  background: var(--kz-surface-3); border-radius: var(--kz-r-md);
}
.kz-minigrid b {
  display: block; font-family: var(--kz-font-display); font-size: 21px; font-weight: 700;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.kz-minigrid span {
  display: block; margin-top: 3px;
  font-size: var(--kz-t-micro); color: var(--kz-text-2);
  text-transform: uppercase; letter-spacing: .04em;
}
.kz-chart-alt { margin-top: var(--kz-s3); text-align: center; font-size: var(--kz-t-small); color: var(--kz-text-2); }
.kz-chart-alt a { color: var(--kz-accent-text); font-weight: 600; }

/* Sıra rozeti + satır içi oran çubuğu (kampanya açanlar, ekip performansı) */
.kz-rank {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--kz-surface-3);
  font-size: var(--kz-t-micro); font-weight: 700; font-variant-numeric: tabular-nums;
}
.kz-rank.ilk3 { background: var(--kz-accent-soft); color: var(--kz-accent-text); }
.kz-oran { display: flex; align-items: center; gap: var(--kz-s2); }
.kz-oran b { min-width: 20px; font-variant-numeric: tabular-nums; }
.kz-oran .kz-progress { flex: 1; min-width: 48px; max-width: 120px; }

/* ------------------------------------------------------------------------
   GİRİŞ EKRANI
   İki yarım: solda marka (her zaman koyu — kurumsal kimlik temaya göre
   değişmez), sağda iş (temayı izler). Mobilde marka kısa bir başlığa iner,
   form ekranın tamamını alır — telefonda giriş yapan kişi süs değil klavye
   ister.
   -------------------------------------------------------------------- */
.kz-giris { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
@media (min-width: 920px) {
  .kz-giris { grid-template-rows: none; grid-template-columns: 1.04fr 1fr; }
}

/* --- sol: marka --- */
.kz-giris-marka {
  position: relative; overflow: hidden;
  background: var(--kz-ink); color: var(--kz-on-ink);
  padding: var(--kz-s5) var(--kz-s5) var(--kz-s6);
  display: flex; flex-direction: column; gap: var(--kz-s5);
  /* Başlık ölçüsü buradan alınır (cqw). Panel ekranın tamamı değil yarısı
     kadar olduğu için vw ile ölçmek başlığı taşırır. */
  container-type: inline-size;
}
@media (min-width: 920px) {
  .kz-giris-marka { padding: var(--kz-s8) var(--kz-s8) var(--kz-s7); justify-content: space-between; }
}

/* Izgara zemini: marka nişanı zaten dört kareli bir ızgara. Aynı fikir
   zeminde sürüyor — dekorasyon değil, işaretin ölçek değiştirmiş hâli. */
.kz-giris-marka::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(234, 241, 237, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(234, 241, 237, .07) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(125% 90% at 12% 8%, #000 0%, transparent 72%);
          mask-image: radial-gradient(125% 90% at 12% 8%, #000 0%, transparent 72%);
}
/* Sinyal turuncusunun sıcaklığı — nişanın arkasından gelen ışık. */
.kz-giris-marka::after {
  content: ''; position: absolute; pointer-events: none;
  top: -14%; right: -8%; width: 46%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(234, 91, 42, .30) 0%, transparent 68%);
}

/* Nişan, sayfa ölçeğinde: logonun sol üstteki karşılığı sağ üstte,
   köşeden taşarak. Dört kareden biri dolu — küçük logoyla aynı kural.
   ⚠️ Seçici `.kz-giris-marka > .kz-giris-nis` (0,2,0) olmak ZORUNDA:
   aşağıdaki `.kz-giris-marka > *{position:relative}` kuralı eşit
   özgüllükte ve SONRA geldiği için tek sınıfla yazılırsa absolute'u ezer,
   nişan akışa girip içeriği aşağı iter. */
.kz-giris-marka > .kz-giris-nis {
  position: absolute; pointer-events: none;
  top: -46px; right: -58px; width: 208px; height: 208px;
}
.kz-giris-nis rect { fill: rgba(234, 241, 237, .045); }
.kz-giris-nis rect:first-child { fill: var(--kz-signal); opacity: .34; }
@media (max-width: 919px) {
  .kz-giris-marka > .kz-giris-nis { top: -54px; right: -56px; width: 148px; height: 148px; }
  .kz-giris-marka::after { display: none; }
}

.kz-giris-marka > * { position: relative; }   /* motifin üstünde kalsın */

.kz-giris-logo {
  display: flex; align-items: center; gap: var(--kz-s3);
  font-family: var(--kz-font-display); font-weight: 700;
  font-size: 17px; letter-spacing: -.02em; color: #fff;
}
/* Söz bloğu panelin genişliğini kullanır; dar bir sütuna sıkıştırılmaz. */
.kz-giris-soz { max-width: none; }
.kz-giris-soz h1 {
  font-family: var(--kz-font-display); font-weight: 700;
  line-height: 1.1; letter-spacing: -.035em; color: #fff;
  /* Başlık TEK SATIR. Ölçü viewport'tan değil KAPSAYICIDAN (cqw) alınır:
     sol panel ekranın yarısı kadar, vw ile ölçmek yanlış sonuç verir.
     Kapsayıcı `container-type` ile aşağıda tanımlı. */
  /* 6.5cqw: ölçülen metin/punto oranı 13.86 — bu değerde başlık kapsayıcının
     ~%90'ını doldurur, taşma payı kalır. cqw kapsayıcının İÇ kutusundan
     hesaplanır (dolgu hariç). */
  font-size: clamp(20px, 6.5cqw, 46px);
  white-space: nowrap;
}
.kz-giris-soz h1 em { font-style: normal; color: var(--kz-signal); }
.kz-giris-soz p {
  margin: var(--kz-s4) 0 0; max-width: 60ch;
  font-size: var(--kz-t-lead); line-height: 1.65;
  color: rgba(234, 241, 237, .66);
}
.kz-giris-soz p + p {
  margin-top: var(--kz-s2);
  color: rgba(234, 241, 237, .92); font-weight: 600;
}

@media (max-width: 919px) {
  /* Telefonda marka paneli kısa bir başlığa iner: başlık sarabilir,
     açıklama gizlenir — ekran forma kalsın. */
  .kz-giris-soz h1 { font-size: 22px; white-space: normal; }
  .kz-giris-soz p  { display: none; }
  .kz-giris-marka::after { display: none; }
}

/* Künye: kurulum kimliği + geliştirici imzası.
   Marka adı kuruluma göre değişir (APP_NAME), imza değişmez. */
.kz-giris-kunye {
  display: flex; flex-direction: column; gap: 5px;
  font-size: var(--kz-t-small); line-height: 1.55;
  color: rgba(234, 241, 237, .42);
}
.kz-giris-kunye strong { color: rgba(234, 241, 237, .72); font-weight: 600; }
.kz-giris-kunye a { color: rgba(234, 241, 237, .72); border-bottom: 1px solid rgba(234, 241, 237, .22); }
.kz-giris-kunye a:hover { color: var(--kz-signal); border-bottom-color: var(--kz-signal); }

/* Kalp dolu çizilir — kontur bir kalp cansız durur. */
.kz-giris-kunye .kz-kalp { fill: var(--kz-signal); stroke: none; width: 13px; height: 13px; vertical-align: -.14em; }

/* İki iddia yan yana; simge + metin bir arada kırılmasın. */
.kz-giris-slogan { display: flex; flex-wrap: wrap; gap: 4px var(--kz-s4); }
.kz-giris-slogan span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.kz-giris-slogan .kz-ico { color: var(--kz-brass); }

@media (max-width: 919px) { .kz-giris-kunye { display: none; } }

/* --- sağ: form --- */
.kz-giris-panel {
  display: grid; place-items: center;
  padding: var(--kz-s6) var(--kz-s5) var(--kz-s8);
  background: var(--kz-surface);
}
.kz-giris-kutu { width: 100%; max-width: 372px; display: flex; flex-direction: column; gap: var(--kz-s5); }
.kz-giris-kutu h2 {
  font-family: var(--kz-font-display); font-size: 25px; font-weight: 700; letter-spacing: -.025em;
}
.kz-giris-kutu h2 + p { margin: 6px 0 0; color: var(--kz-text-2); }
.kz-giris-form { display: flex; flex-direction: column; gap: var(--kz-s4); }

/* Şifre alanı + göster/gizle */
.kz-sifre { position: relative; display: flex; }
.kz-sifre .kz-input { padding-right: 44px; }
.kz-sifre button {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 34px; height: 34px;
  border: none; background: none; color: var(--kz-text-3);
  border-radius: var(--kz-r-sm); cursor: pointer;
}
.kz-sifre button:hover { color: var(--kz-text); background: var(--kz-surface-3); }

.kz-giris-alt { font-size: var(--kz-t-small); color: var(--kz-text-3); text-align: center; }


/* ==========================================================================
   ŞABLON YAZARI
   Öneri, listenin İÇİNDE açılır: kullanıcı hangi şablonu yeniden yazdığını
   satırıyla birlikte görsün, ayrı bir ekrana atlamasın.
   ========================================================================== */
.kz-pre {
  margin: 0; padding: var(--kz-s3);
  background: var(--kz-surface-2); border: 1px solid var(--kz-line);
  border-radius: var(--kz-r-md);
  font: 400 var(--kz-t-small)/1.6 ui-monospace, "SFMono-Regular", Consolas, monospace;
  color: var(--kz-text-2);
  white-space: pre-wrap; word-break: break-word;
  max-height: 260px; overflow-y: auto;
}

.kz-onizleme > td { background: var(--kz-surface-2); padding: var(--kz-s4); }

.kz-oneri { display: flex; flex-direction: column; gap: var(--kz-s3); }

.kz-oneri-not {
  color: var(--kz-text-2); font-size: var(--kz-t-small);
  border-left: 2px solid var(--kz-line-strong); padding-left: var(--kz-s3);
}
.kz-oneri-not:empty { display: none; }

/* Gövde uzun olabiliyor; kaydırmak yerine alan büyüsün. */
.kz-oneri .kz-textarea { min-height: 220px; resize: vertical; }


/* ==========================================================================
   KURULUM SİHİRBAZI
   Tek sütun, dar ölçü. İlk açılış ekranı: kullanıcı burada panelin
   kendisini değil, yalnızca sorulanı görmeli.
   ========================================================================== */
.kz-kurulum {
  max-width: 720px; margin: 0 auto;
  padding: var(--kz-s6) var(--kz-s4) var(--kz-s7);
  display: flex; flex-direction: column; gap: var(--kz-s4);
}
.kz-kurulum-bas { text-align: center; display: flex; flex-direction: column; gap: var(--kz-s3); align-items: center; }
.kz-kurulum-bas p { margin: 0; color: var(--kz-text-2); max-width: 46ch; }

.kz-adimlar {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--kz-s2); flex-wrap: wrap; justify-content: center;
}
.kz-adimlar li {
  display: flex; align-items: center; gap: var(--kz-s2);
  padding: var(--kz-s2) var(--kz-s3);
  border: 1px solid var(--kz-line); border-radius: var(--kz-r-pill);
  color: var(--kz-text-3); font-size: var(--kz-t-small); font-weight: 500;
}
.kz-adimlar li.aktif { color: var(--kz-text); border-color: var(--kz-line-strong); background: var(--kz-surface); }
.kz-adimlar li.bitti { color: var(--kz-text-2); }

.kz-adim-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--kz-surface-3); font-size: 11px; font-weight: 600;
}
.kz-adimlar li.aktif .kz-adim-no { background: var(--kz-accent, #EA5B2A); color: #fff; }

.kz-urun-satir { display: flex; gap: var(--kz-s2); margin-bottom: var(--kz-s2); }
.kz-urun-satir input:first-child { flex: 0 1 220px; }
.kz-urun-satir input:last-child  { flex: 1 1 260px; min-width: 0; }
@media (max-width: 640px) { .kz-urun-satir { flex-direction: column; } }


/* ==========================================================================
   ŞABLON DÜZENLEYİCİ
   Sol düzenleme, sağ canlı önizleme. Dar ekranda alt alta iner: iki sütunu
   telefonda zorlamak ikisini de okunmaz yapar.
   ========================================================================== */
.kz-sablon-duzen { display: grid; grid-template-columns: 1fr; gap: var(--kz-s4); align-items: start; }
@media (min-width: 1100px) { .kz-sablon-duzen { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }

.kz-onizleme-panel { position: sticky; top: var(--kz-s4); }
@media (max-width: 1099px) { .kz-onizleme-panel { position: static; } }

.kz-pv-frame {
  width: 100%; min-height: 640px; border: 0; display: block;
  border-radius: var(--kz-r-md); background: var(--kz-surface-2);
}

.kz-cta-kutu {
  border: 1px dashed var(--kz-line-strong); border-radius: var(--kz-r-md);
  padding: var(--kz-s3) var(--kz-s4); margin: 0;
}
.kz-cta-kutu legend { padding: 0 var(--kz-s2); font-size: var(--kz-t-small); font-weight: 600; }


/* ==========================================================================
   REHBER
   İki sütun: soldaki akış ve ipuçları okunur, sağdaki referans kutuları
   göz ucuyla taranır. Dar ekranda tek sütuna iner.
   ========================================================================== */
.kz-rehber { display: grid; grid-template-columns: 1fr; gap: var(--kz-s4); align-items: start; }
@media (min-width: 1000px) { .kz-rehber { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.kz-rehber > div { display: flex; flex-direction: column; gap: var(--kz-s4); }

/* Numaralı adımlar — sayı işin sırasını taşır, süs değil. */
.kz-adim-liste { list-style: none; counter-reset: kzadim; margin: 0; padding: 0; display: grid; gap: var(--kz-s4); }
.kz-adim-liste > li { counter-increment: kzadim; display: grid; grid-template-columns: 34px 1fr; gap: var(--kz-s3); }
.kz-adim-liste > li::before {
  content: counter(kzadim);
  width: 34px; height: 34px; border-radius: var(--kz-r-md);
  background: var(--kz-accent, #EA5B2A); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.kz-adim-liste.sade > li::before { background: var(--kz-surface-3); color: var(--kz-text-2); }
.kz-adim-liste h3 { margin: 0 0 2px; font-size: 15px; }
.kz-adim-liste p { margin: 0; color: var(--kz-text-2); line-height: 1.6; font-size: var(--kz-t-small); }

.kz-ipucu-liste { list-style: none; margin: 0; padding: 0; }
.kz-ipucu {
  padding: var(--kz-s3) 0 var(--kz-s3) var(--kz-s4);
  border-bottom: 1px solid var(--kz-line);
  color: var(--kz-text-2); line-height: 1.6; font-size: var(--kz-t-small);
  position: relative;
}
.kz-ipucu::before {
  content: ''; position: absolute; left: 0; top: 1.15em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--kz-line-strong);
}
.kz-ipucu:last-child { border-bottom: 0; }


/* Segment kurucusundaki elle seçim listesi — uzun olabilir, kendi içinde kayar. */
.kz-secim-liste {
  max-height: 320px; overflow-y: auto;
  border: 1px solid var(--kz-line); border-radius: var(--kz-r-md);
  background: var(--kz-surface-2);
}
.kz-secim {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--kz-s3);
  align-items: center; padding: var(--kz-s2) var(--kz-s3);
  border-bottom: 1px solid var(--kz-line); cursor: pointer;
  font-size: var(--kz-t-small);
}
.kz-secim:last-child { border-bottom: 0; }
.kz-secim:hover { background: var(--kz-surface-3); }


/* ==========================================================================
   MESAJ YAZMA
   WhatsApp'ta sağda önizleme; e-postada tek sütun (önizleme yok, gönderim
   HTML şablonu zaten ayrı yerde görülüyor).
   ========================================================================== */
.kz-mesaj { display: grid; grid-template-columns: 1fr; gap: var(--kz-s4); align-items: start; }
@media (min-width: 1000px) { .kz-mesaj:has(.kz-wa-ekran) { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); } }

/* WhatsApp balonu — metnin telefonda nasıl görüneceğini gösterir. */
.kz-wa-ekran {
  background: #ECE5DD; border-radius: var(--kz-r-md);
  padding: var(--kz-s4); min-height: 220px;
}
.kz-wa-balon {
  background: #DCF8C6; color: #111; border-radius: 10px 10px 2px 10px;
  padding: var(--kz-s3) var(--kz-s4) var(--kz-s4);
  max-width: 90%; margin-left: auto; position: relative;
  line-height: 1.55; font-size: var(--kz-t-small); word-break: break-word;
}
.kz-wa-saat { display: block; text-align: right; font-size: 11px; color: #667781; margin-top: 4px; }


/* ==========================================================================
   PROFİL
   Solda düzenlenen bilgiler, sağda değiştirilemeyen hesap durumu ve şifre.
   Ayrım kasıtlı: rol/aktiflik burada DEĞİŞMEZ, yalnız okunur.
   ========================================================================== */
.kz-profil { display: grid; grid-template-columns: 1fr; gap: var(--kz-s4); align-items: start; }
@media (min-width: 1000px) { .kz-profil { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); } }

.kz-profil-ust { display: flex; gap: var(--kz-s4); align-items: center; flex-wrap: wrap; }

/* Yüklenen görselin gerçekten nasıl göründüğünü gösterecek kadar büyük. */
.kz-avatar.xl {
  width: 88px; height: 88px;
  border-radius: var(--kz-r-lg);
  font-size: 34px;
}

/* İki alanı yan yana koyan satır; dar ekranda alt alta düşer. */
.kz-ikili { display: grid; grid-template-columns: 1fr; gap: var(--kz-s3); }
@media (min-width: 620px) { .kz-ikili { grid-template-columns: 1fr 1fr; } }


/* ==========================================================================
   FİRMA FORMU + ÇOKLU SEÇİM ÇİPLERİ
   Çipler eskiden app.css'teki .pick* kurallarıydı; tasarım sistemine
   taşınırken jetonlara bağlandı (karanlık tema da doğru çalışsın diye).
   ========================================================================== */
.kz-firmaform { display: flex; flex-direction: column; gap: var(--kz-s4); }
.kz-firmaform .kz-panel { margin: 0; }

/* Üç alanı yan yana koyan satır (ülke / il / ilçe). */
.kz-uclu { display: grid; grid-template-columns: 1fr; gap: var(--kz-s3); }
@media (min-width: 620px) { .kz-uclu { grid-template-columns: 1fr 1fr 1fr; } }

/* Yalnız ekran okuyucu için etiket: panel başlığı zaten alanı adlandırıyor. */
.kz-gizli-etiket {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.kz-pickbar { display: flex; gap: var(--kz-s2); align-items: center; flex-wrap: wrap; margin-bottom: var(--kz-s2); }
/* Mobilde arama tek başına üst satır; >=520px'te hepsi tek satıra girer. */
.kz-pickara {
  flex: 1 1 100%; padding: 8px 12px;
  font: inherit; font-size: var(--kz-t-small);
  border: 1px solid var(--kz-line-strong); border-radius: var(--kz-r-md);
  background: var(--kz-surface); color: var(--kz-text); outline: none;
}
.kz-pickara:focus { border-color: var(--kz-signal); }
@media (min-width: 520px) { .kz-pickara { flex: 1 1 150px; width: auto; min-width: 150px; } }

.kz-picksay { font-size: var(--kz-t-small); font-weight: 600; color: var(--kz-text-2); white-space: nowrap; }
.kz-picksay b { color: var(--kz-signal); }

.kz-pickbox {
  display: flex; flex-wrap: wrap; gap: 7px;
  max-height: 220px; overflow: auto;
  border: 1px solid var(--kz-line-strong); border-radius: var(--kz-r-md);
  padding: var(--kz-s3); background: var(--kz-surface-2);
}
.kz-pick { display: inline-flex; margin: 0; font-size: var(--kz-t-small); font-weight: 400; }
/* Kutucuk gizli ama odaklanabilir kalır: klavyeyle seçim çalışsın. */
.kz-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kz-pick span {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--kz-line-strong); border-radius: var(--kz-r-pill);
  background: var(--kz-surface); color: var(--kz-text);
  padding: 7px 12px; cursor: pointer; user-select: none;
  transition: background var(--kz-dur-1) var(--kz-ease),
              border-color var(--kz-dur-1) var(--kz-ease),
              color var(--kz-dur-1) var(--kz-ease);
}
.kz-pick span::before { content: '+'; font-weight: 700; font-size: 12px; line-height: 1; color: var(--kz-text-3); }
.kz-pick span:hover { border-color: var(--kz-signal); color: var(--kz-signal); }
.kz-pick input:checked + span {
  background: var(--kz-accent-soft); border-color: var(--kz-signal);
  color: var(--kz-accent-text); font-weight: 600;
}
.kz-pick input:checked + span::before { content: '\2713'; color: var(--kz-signal); }
.kz-pick input:focus-visible + span { outline: 2px solid var(--kz-signal); outline-offset: 2px; }
.kz-pick.gizli { display: none; }

.kz-pickbos { padding: 6px; font-size: var(--kz-t-small); color: var(--kz-text-2); }


/* ==========================================================================
   DETAY EKRANI (organizatör / firma)
   Sol sütun İŞ yapılan yer (ara, görüş, görev), sağ sütun GEÇMİŞ (not,
   mesaj). Dar ekranda iş sütunu üstte kalır — telefondayken önce arama
   düğmeleri görünsün.
   ========================================================================== */
.kz-rozetsira {
  display: flex; gap: var(--kz-s2); flex-wrap: wrap; align-items: center;
  margin-bottom: var(--kz-s4);
}

.kz-detay { display: grid; grid-template-columns: 1fr; gap: var(--kz-s4); align-items: start; }
@media (min-width: 1000px) { .kz-detay { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.kz-detay-yan { display: flex; flex-direction: column; gap: var(--kz-s4); }

/* İletişim satırı: etiket + değer + eylem düğmeleri. */
.kz-crow {
  display: flex; align-items: center; gap: var(--kz-s3); flex-wrap: wrap;
  padding: var(--kz-s3) 0; border-top: 1px solid var(--kz-line);
}
.kz-crow:first-child { border-top: none; padding-top: 0; }
.kz-crow.ust { align-items: flex-start; }
.kz-crow > .k { width: 62px; flex: none; color: var(--kz-text-2); font-size: var(--kz-t-small); }
.kz-crow > .v {
  flex: 1 1 140px; min-width: 0;
  font-family: var(--kz-font-mono); font-weight: 700;
}
.kz-crow > .v.kirilgan { font-family: var(--kz-font-sans); font-weight: 400; word-break: break-word; }

/* Not listesi — numaralı, çünkü ekip "üçüncü nota bak" diyor. */
.kz-notlar { list-style: decimal; margin: var(--kz-s4) 0 0; padding-left: 22px; }
.kz-notlar li { padding: var(--kz-s2) 0 var(--kz-s2) 4px; border-top: 1px solid var(--kz-line); }
.kz-notlar li:first-child { border-top: none; }
.kz-notlar li::marker { color: var(--kz-signal); font-weight: 700; }
.kz-notmeta {
  font-family: var(--kz-font-mono); font-size: var(--kz-t-micro);
  color: var(--kz-text-2); margin-bottom: 3px;
}
.kz-notmetin { white-space: pre-wrap; }
.kz-notsil { float: right; margin: 0; }
.kz-notsil button {
  background: none; border: 0; padding: 0 2px; line-height: 1;
  color: var(--kz-text-3); cursor: pointer;
}
.kz-notsil button:hover { color: var(--kz-danger); }

.kz-mesajlar { display: flex; flex-direction: column; }
.kz-mesajsatir { padding: var(--kz-s3) 0; border-top: 1px solid var(--kz-line); }
.kz-mesajsatir:first-child { border-top: none; padding-top: 0; }
.kz-mesajkonu { font-weight: 600; }

/* Kısa liste satırları (görevler, bağlı kayıtlar). */
.kz-minisatirlar { display: flex; flex-direction: column; }
.kz-minisatir {
  display: flex; gap: var(--kz-s2); align-items: flex-start;
  padding: var(--kz-s2) 0; border-top: 1px solid var(--kz-line);
}
.kz-minisatir:first-child { border-top: none; }
.kz-bitti { text-decoration: line-through; opacity: .6; }


/* ==========================================================================
   FİRMA DETAYI — arama ekranı
   ========================================================================== */
.kz-firmabas { display: flex; align-items: center; gap: var(--kz-s3); flex-wrap: wrap; }
.kz-firmabas h2 {
  margin: 0; font-family: var(--kz-font-display);
  font-size: var(--kz-t-h2); line-height: var(--kz-lh-tight); text-wrap: balance;
}

/* İçe aktarmadan gelen serbest firma notu; uzunsa kapalı başlar. */
.kz-kunye { margin-top: var(--kz-s3); max-width: 70ch; }
.kz-kunye > summary {
  cursor: pointer; color: var(--kz-text-2); font-weight: 600;
  list-style: none; display: inline-flex; gap: 6px; align-items: center;
}
.kz-kunye > summary::-webkit-details-marker { display: none; }
.kz-kunye > summary::before { content: '\25B8'; font-size: 11px; transition: transform var(--kz-dur-1) var(--kz-ease); }
.kz-kunye[open] > summary::before { transform: rotate(90deg); }
.kz-kunye ul { margin: 6px 0 0; padding: 0; list-style: none; border-left: 2px solid var(--kz-line); }
.kz-kunye li { padding: 2px 0 2px 10px; color: var(--kz-text-2); word-break: break-word; }

/* Takip seviyesi düğmeleri — renk satır içinde, seviyenin kendi rengi. */
.kz-takipsec { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kz-tkseviye {
  border: 1px solid; border-radius: var(--kz-r-md);
  background: var(--kz-surface); padding: 9px 6px;
  font: 600 var(--kz-t-small)/1.2 var(--kz-font-sans);
  cursor: pointer; transition: transform var(--kz-dur-1) var(--kz-ease),
                               box-shadow var(--kz-dur-1) var(--kz-ease);
}
.kz-tkseviye:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgb(0 0 0 / .08); }
.kz-tkseviye.on { box-shadow: 0 2px 8px rgb(0 0 0 / .14); }

.kz-gecmis { border-top: 1px solid var(--kz-line); padding: var(--kz-s3) 2px; }
.kz-gecmis:first-child { border-top: none; padding-top: 0; }

/* YZ brifingi blokları. */
.kz-aiblok { padding: var(--kz-s3) 0; border-top: 1px solid var(--kz-line); }
.kz-aiblok:first-child { border-top: none; padding-top: 0; }
.kz-aietiket {
  font-size: var(--kz-t-cap); font-weight: 700; color: var(--kz-text-2);
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 5px;
}
/* Temsilcinin telefonda okuyacağı cümle — göz hemen bulsun diye vurgulu. */
.kz-alinti {
  background: var(--kz-accent-soft); border-left: 3px solid var(--kz-signal);
  padding: 9px 13px; border-radius: 0 var(--kz-r-md) var(--kz-r-md) 0;
  font-style: italic; color: var(--kz-text);
}
.kz-ailiste { margin: 0; padding-left: 18px; }
.kz-ailiste li { margin: 4px 0; }
.kz-itiraz { margin: var(--kz-s2) 0; }
.kz-itiraz b { display: block; }
.kz-itiraz span { color: var(--kz-text-2); }
.kz-dikkat {
  background: var(--kz-warn-soft); border-left: 3px solid var(--kz-warn);
  padding: 9px 13px; border-radius: 0 var(--kz-r-md) var(--kz-r-md) 0;
  color: var(--kz-warn);
}


/* ==========================================================================
   YAPAY ZEKÂ PERDESİ
   Model yanıtı 30-60 saniye sürebiliyor; perde olmadan sayfa donmuş
   görünüyor ve kullanıcı düğmeye tekrar basıyor (çift istek).
   ========================================================================== */
.kz-yzperde {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--kz-ink) 55%, transparent);
  backdrop-filter: blur(2px);
}
.kz-yzkart {
  background: var(--kz-surface); color: var(--kz-text);
  border-radius: var(--kz-r-xl); padding: var(--kz-s7) var(--kz-s8);
  text-align: center; max-width: 320px;
  box-shadow: 0 18px 40px rgb(0 0 0 / .22);
}
.kz-yzkart .kz-spin { margin: 0 auto; }
.kz-spin-lg { width: 34px; height: 34px; border-width: 3px; }
.kz-yzmesaj { margin-top: var(--kz-s4); font-weight: 600; }


/* ==========================================================================
   GÜNÜN STRATEJİSİ
   Motivasyonun HEMEN ALTINDA durur: önce moral, sonra bakış açısı, sonra
   öneri listesi. Motivasyon koyu ve duygusal; strateji açık yüzeyde ve
   okunaklı — biri seni ayağa kaldırır, öteki güne yön verir, ikisi aynı
   görsel ağırlıkta olursa hiçbiri öne çıkmaz.
   ========================================================================== */
.kz-strateji {
  background: var(--kz-surface);
  border: 1px solid var(--kz-line);
  border-left: 3px solid var(--kz-signal);
  border-radius: var(--kz-r-lg);
  padding: var(--kz-s5);
}
@media (min-width: 900px) { .kz-strateji { padding: var(--kz-s6) var(--kz-s7); } }

.kz-strateji-h {
  display: flex; align-items: center; gap: var(--kz-s2);
  margin-bottom: var(--kz-s4);
}
.kz-strateji-h .kz-ico { color: var(--kz-signal); }
.kz-strateji-h .kz-etiket {
  font-size: var(--kz-t-cap); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--kz-signal);
}

.kz-strateji-metin p {
  margin: 0 0 var(--kz-s3);
  font-size: var(--kz-t-body); line-height: 1.75; color: var(--kz-text);
}
.kz-strateji-metin p:last-child { margin-bottom: 0; }


/* ==========================================================================
   VERİ AKIŞI — izin kartları
   Her izin bir onay kutusu DEĞİL, bir karar: ne gidiyor, riski ne,
   kapatınca ne kaybediliyor. Üçü de kutunun yanında yazılı olmalı ki
   karar bilerek verilsin.
   ========================================================================== */
.kz-izin { padding: var(--kz-s4) 0; border-top: 1px solid var(--kz-line); }
.kz-izin:first-of-type { border-top: none; padding-top: 0; }
.kz-izin-bas {
  display: flex; align-items: center; gap: var(--kz-s3);
  cursor: pointer; margin-bottom: var(--kz-s3);
}
.kz-izin-bas > span { display: inline-flex; align-items: center; gap: var(--kz-s2); flex-wrap: wrap; }
.kz-izin .kz-kv .v { text-align: left; font-weight: 400; color: var(--kz-text-2); }
@media (min-width: 700px) { .kz-izin .kz-kv > div { grid-template-columns: 150px 1fr; display: grid; gap: var(--kz-s3); } }


/* ==========================================================================
   LABORATUAR — akış şeridi
   Beş adımın hangisinde olduğunu gösterir. Bölüm yeni ve parçaları ayrı
   ekranlarda; kullanıcı nerede olduğunu görmezse bağlantıyı kuramaz.
   ========================================================================== */
.kz-akis { display: grid; grid-template-columns: 1fr; gap: var(--kz-s2); }
@media (min-width: 900px) { .kz-akis { grid-template-columns: repeat(5, 1fr); gap: var(--kz-s3); } }

.kz-akis-adim {
  display: flex; align-items: flex-start; gap: var(--kz-s3);
  padding: var(--kz-s3);
  border: 1px solid var(--kz-line);
  border-radius: var(--kz-r-md);
  background: var(--kz-surface-2);
}
.kz-akis-adim.simdi {
  border-color: var(--kz-signal);
  background: var(--kz-accent-soft);
}
.kz-akis-adim > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kz-akis-no {
  flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: var(--kz-r-pill);
  display: grid; place-items: center;
  background: var(--kz-line); color: var(--kz-text-2);
  font-size: var(--kz-t-micro); font-weight: 700;
}
.kz-akis-adim.simdi .kz-akis-no { background: var(--kz-signal); color: #fff; }


/* ==========================================================================
   GÖREV DETAYI — adımlar ve geçmiş şeridi
   ========================================================================== */
.kz-adimlar-liste { display: flex; flex-direction: column; }
.kz-adim {
  display: flex; align-items: center; gap: var(--kz-s3);
  padding: var(--kz-s2) 0; border-top: 1px solid var(--kz-line);
}
.kz-adim:first-child { border-top: none; }
/* Tamamlanan adım silinmez, soluklaşır: yapılan iş görünür kalmalı. */
.kz-adim.tamam .kz-adim-metin { text-decoration: line-through; color: var(--kz-text-3); }

.kz-adim-kutu {
  flex: 0 0 auto; width: 20px; height: 20px;
  border: 1.5px solid var(--kz-line-strong); border-radius: var(--kz-r-sm);
  background: var(--kz-surface); color: #fff; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  transition: background var(--kz-dur-1) var(--kz-ease), border-color var(--kz-dur-1) var(--kz-ease);
}
.kz-adim-kutu:hover { border-color: var(--kz-signal); }
.kz-adim.tamam .kz-adim-kutu { background: var(--kz-ok); border-color: var(--kz-ok); }
.kz-adim-metin { flex: 1; min-width: 0; word-break: break-word; }

.kz-gecmis-seridi { display: flex; flex-direction: column; }
.kz-gecmis-satir { padding: var(--kz-s3) 0; border-top: 1px solid var(--kz-line); }
.kz-gecmis-satir:first-child { border-top: none; padding-top: 0; }
.kz-gecmis-degisim { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kz-gecmis-degisim .eski { color: var(--kz-text-3); text-decoration: line-through; }
.kz-gecmis-degisim .kz-ico { color: var(--kz-text-3); }

/* ------------------------------------------------------------------------
   PANO (KANBAN)
   Sütunlar yan yana kayar; sayfa gövdesi ASLA yatay kaymaz — kaydırma
   panonun kendi kabında olur. Sütun yüksekliği içeriğe göre değil,
   ekrana göre: dolu bir sütun yüzünden diğerleri uzayıp boş kalmasın.
   -------------------------------------------------------------------- */
.kz-pano {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(272px, 1fr);
  gap: var(--kz-s4);
  overflow-x: auto; padding-bottom: var(--kz-s3);
}
.kz-kolon {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--kz-surface-2);
  border: 1px solid var(--kz-line); border-radius: var(--kz-r-lg);
}
.kz-kolon-h {
  display: flex; align-items: center; gap: var(--kz-s2);
  padding: var(--kz-s3) var(--kz-s4);
  border-bottom: 1px solid var(--kz-line);
  font-size: var(--kz-t-small);
}
.kz-kolon-h .kz-muted { margin-left: auto; font-family: var(--kz-font-mono); }
.kz-kolon-nokta { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.kz-kolon-govde {
  display: flex; flex-direction: column; gap: var(--kz-s3);
  padding: var(--kz-s3);
  min-height: 120px; max-height: 62vh; overflow-y: auto;
}
.kz-kolon-govde.hedef { background: var(--kz-accent-soft); border-radius: var(--kz-r-md); }
.kz-kolon-bos { margin: 0; padding: var(--kz-s4) 0; text-align: center;
                color: var(--kz-text-3); font-size: var(--kz-t-small); }

.kz-kart {
  display: flex; flex-direction: column; gap: var(--kz-s2);
  padding: var(--kz-s3);
  background: var(--kz-surface);
  border: 1px solid var(--kz-line); border-radius: var(--kz-r-md);
  cursor: grab;
  transition: border-color var(--kz-dur-1), box-shadow var(--kz-dur-1);
}
.kz-kart:hover { border-color: var(--kz-line-strong); }
.kz-kart.kilitli { cursor: default; opacity: .78; }
.kz-kart.suruklenen { opacity: .45; cursor: grabbing; }
/* Kayıt sunucuda gerçekleştiğinde kısa bir onay: kart yerinde durunca
   kullanıcı "gitti mi" diye tereddüt ediyor. */
.kz-kart-tamam { border-color: var(--kz-ok); box-shadow: 0 0 0 2px var(--kz-ok-soft); }
.kz-kart-baslik { font-weight: 600; line-height: 1.35; word-break: break-word; }
.kz-kart-rozet { display: flex; flex-wrap: wrap; gap: 6px; }
.kz-kart-ilgili {
  display: flex; align-items: center; gap: 6px;
  color: var(--kz-text-2); font-size: var(--kz-t-small);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kz-kart-alt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--kz-s2);
  padding-top: var(--kz-s2); border-top: 1px solid var(--kz-line);
  font-size: var(--kz-t-small);
}
.kz-kart-alt .kz-select { width: auto; max-width: 55%; padding: 4px 22px 4px 8px;
                          font-size: var(--kz-t-micro); }

@media (max-width: 720px) {
  /* Telefonda yan yana sütun okunmaz: alt alta yığ, kaydırma dikey olsun. */
  .kz-pano { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; }
  .kz-kolon-govde { max-height: none; }
}

/* ------------------------------------------------------------------------
   SEGMENT DÜĞMESİ — birbirini dışlayan iki-üç seçenek (Liste / Pano)
   -------------------------------------------------------------------- */
.kz-segment {
  display: inline-flex; padding: 3px; gap: 3px;
  background: var(--kz-surface-3); border-radius: var(--kz-r-pill);
}
.kz-segbtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--kz-r-pill);
  color: var(--kz-text-2); font-size: var(--kz-t-small); font-weight: 600;
  transition: background var(--kz-dur-1), color var(--kz-dur-1);
}
.kz-segbtn:hover { color: var(--kz-text); }
.kz-segbtn.on { background: var(--kz-surface); color: var(--kz-text);
                box-shadow: 0 1px 2px rgb(0 0 0 / .08); }

/* Yardımcı sınıflar — tabloda durum belirtmek için. */
.kz-danger { color: var(--kz-danger); }
.kz-tbl tr.kz-pasif > td { opacity: .55; }

/* ------------------------------------------------------------------------
   ACİL GÖREV ŞERİDİ — panelde "bugün bakılacaklar"
   -------------------------------------------------------------------- */
.kz-acil { display: flex; flex-direction: column; }
.kz-acil-satir {
  display: flex; align-items: center; gap: var(--kz-s3);
  padding: var(--kz-s3) 0; border-top: 1px solid var(--kz-line);
  color: inherit;
}
.kz-acil-satir:first-child { border-top: none; padding-top: 0; }
.kz-acil-satir:hover .kz-acil-ad { text-decoration: underline; }
.kz-acil-nokta { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
                 background: var(--kz-warn); }
.kz-acil-satir.gecikti .kz-acil-nokta { background: var(--kz-danger); }
.kz-acil-ad { flex: 1 1 auto; min-width: 0; font-weight: 600;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kz-acil-vade { flex: 0 0 auto; font-size: var(--kz-t-small); color: var(--kz-text-2);
                font-variant-numeric: tabular-nums; }
.kz-acil-satir.gecikti .kz-acil-vade { color: var(--kz-danger); }

@media (max-width: 560px) {
  .kz-acil-satir { flex-wrap: wrap; }
  .kz-acil-ad { flex: 1 1 100%; order: -1; white-space: normal; }
}

/* Akış hâlindeki yanıt: metin yazılırken imleç gibi bir işaret durur, böylece
   "bitti mi, devam mı" sorusu ekranda cevaplanır. */
.kz-akiyor .kz-msj-govde::after {
  content: ''; display: inline-block; vertical-align: text-bottom;
  width: 2px; height: 1em; margin-left: 2px;
  background: var(--kz-accent); animation: kz-imlec 1s step-end infinite;
}
@keyframes kz-imlec { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kz-akiyor .kz-msj-govde::after { animation: none; } }

/* Model düşünüyor: henüz metin yok. Noktalar hızlanır — bekleyiş sürüyor
   ama sistem çalışıyor. */
.kz-dusunuyor .kz-nokta { animation-duration: .7s; }