/* PCRM bilesen kiti — A grubu (manda §5) + SPA kabugu. C39b iskeleti.
   Kural: renk YALNIZ token'dan (tokens.css). Sayfa ici ad-hoc stil YASAK.
   Sert kurallar (manda §3): dis kart div'inde overflow:hidden yok · dikey butce
   sabit piksel · backdrop-filter yalniz yuzen yuzeyler (modal/dropdown/topbar). */

/* ── Reset / taban ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--p-bg);
  color: var(--p-txt);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
[x-cloak] { display: none !important; }
a { color: var(--p-blue-text); text-decoration: none; }
h1, h2, h3 { color: var(--p-txt-strong); font-weight: 700; margin: 0; }

/* Erisilebilir odak: mavi ring (manda §5) */
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Motion: softEmerge yalniz sayfa navigasyonunda (manda §2.5) */
@keyframes softEmerge {
  from { opacity: 0; transform: translateY(14px) scale(0.985); filter: blur(10px); }
  to   { opacity: 1; transform: translateY(0)     scale(1);     filter: blur(0); }
}
.page-enter { animation: softEmerge 0.4s var(--ease-out-std) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Hare / atmosfer (C40g — PLANO body::before deseni) ──
   Sabit tam-ekran, blur YOK. Sidebar opak koyu zemin oldugu icin hare
   ona taşmaz; kartlar yarı-saydam olduğundan hare içlerinden sızar. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 15% 0%,   var(--p-glow-1), transparent 70%),
    radial-gradient(50% 45% at 100% 100%, var(--p-glow-2), transparent 70%);
}
.light body::before { display: none; }                 /* açık temada hare yok */
@media (prefers-color-scheme: light) { .auto body::before { display: none; } }
.app-shell, .auth-scene { position: relative; z-index: 1; }   /* içerik hare üstünde */

/* ── Buton ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; min-height: var(--touch); padding: 0 16px;
  border-radius: var(--radius); border: 1px solid transparent;
  font: inherit; font-weight: 500; cursor: pointer;
  transition: background 0.12s var(--ease-out-std), border-color 0.12s, opacity 0.12s;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary   { background: var(--p-green); color: var(--p-btn-primary-text); font-weight: 700; }
.btn-primary:hover:not(:disabled)   { background: color-mix(in srgb, var(--p-green) 88%, white); }
.btn-secondary { background: transparent; color: var(--p-txt); border-color: var(--p-border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--p-hover); }
.btn-ghost     { background: transparent; color: var(--p-txt-dim); }
.btn-ghost:hover:not(:disabled)     { background: var(--p-hover); color: var(--p-txt); }
.btn-danger    { background: transparent; color: var(--durum-gecikme); border-color: color-mix(in srgb, var(--durum-gecikme) 40%, transparent); }
.btn-danger:hover:not(:disabled)    { background: color-mix(in srgb, var(--durum-gecikme) 14%, transparent); }
.btn-block { width: 100%; }

/* ── Input / Select / Textarea ── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { color: var(--p-txt-dim); font-size: 13px; font-weight: 500; }
.input, .select, .textarea {
  width: 100%; height: 40px; min-height: var(--touch); padding: 0 12px;
  background: var(--p-input-bg); border: 1px solid var(--p-input-border);
  border-radius: var(--radius); color: var(--p-txt); font: inherit;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--p-txt-dim) 75%, transparent); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--p-blue); box-shadow: var(--focus-ring); }
.select { appearance: none; cursor: pointer; }

/* ── Kart ── (dis div'e overflow:hidden VERILMEZ — manda §3) */
.card {
  background: var(--p-card); border: 1px solid var(--p-card-border);
  border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--p-shadow-card);
}
/* KPI kartı — renkli SOL kenar vurgusu (PLANO: border-left, üst değil) */
.kpi-kart { background: var(--p-card); border: 1px solid var(--p-card-border);
  border-left: 4px solid var(--kpi-renk, var(--p-cyan)); border-radius: var(--radius-lg);
  padding: 18px 22px; box-shadow: var(--p-shadow-card); transition: transform 0.15s var(--ease-out-std); }
.kpi-kart:hover { transform: translateY(-1px); }
.kpi-kart .sayi { font-size: 26px; font-weight: 700; color: var(--p-txt-strong); font-variant-numeric: tabular-nums; }
.kpi-kart .etiket { color: var(--p-txt-dim); font-size: 13px; margin-top: 2px; }
.kpi-kart.mavi { --kpi-renk: var(--p-blue-text); }
.kpi-kart.yesil { --kpi-renk: var(--p-green-text); }
.kpi-kart.camgobegi { --kpi-renk: var(--p-cyan); }
.kpi-kart.kirmizi { --kpi-renk: var(--p-acil); }

/* ── Badge / durum pill ── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; color: var(--p-bg);
  background: var(--durum-notr);
}
.badge.tamam   { background: var(--durum-tamam); }
.badge.uyari   { background: var(--durum-uyari); }
.badge.gecikme { background: var(--durum-gecikme); }
.badge.aktif   { background: var(--durum-aktif); }
.badge.notr    { background: var(--durum-notr); }

/* ── Modal (yuzen — backdrop-filter izinli) ── */
.modal-scrim {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--p-scrim);   /* blur YOK — backdrop-filter ≤3 yüzey (topbar/dropdown/modal); scrim dördüncü olurdu */
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* Form ızgarası — 2 sütun (modal + inline), mobilde tek sütun */
.form-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .form-izgara { grid-template-columns: 1fr; } }
.modal {
  background: var(--p-modal-bg); backdrop-filter: blur(18px);
  border: 1px solid var(--p-card-border); border-radius: var(--radius-card);
  padding: 22px; width: 100%; max-width: 440px;
  box-shadow: var(--p-shadow-modal);
}
.modal h3 { margin-bottom: 14px; }

/* ── Dropdown (yuzen — backdrop-filter izinli) ── */
.dropdown {
  background: var(--p-float-bg); border: 1px solid var(--p-card-border);
  border-radius: var(--radius); padding: 6px; min-width: 180px;
  box-shadow: var(--p-shadow-dropdown); backdrop-filter: blur(12px);
}
.dropdown-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: 0; background: transparent; color: var(--p-txt);
  border-radius: 6px; font: inherit; text-align: left; cursor: pointer;
}
.dropdown-item:hover { background: var(--p-hover); }
.dropdown-item.secili { color: var(--p-cyan); }

/* ══════════════════════════════════════════════════════════════════
   SPA KABUGU — sidebar + topbar + icerik. Dikey butce SABIT PIKSEL.
   ══════════════════════════════════════════════════════════════════ */
.app-shell { display: flex; height: 100dvh; }

/* Sidebar: opak koyu capa (hare tasmaz). Scroll: flex + min-height:0. */
.sidebar {
  width: var(--p-sidebar-w); flex-shrink: 0;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--p-sidebar-bg); border-right: 1px solid rgba(255, 255, 255, 0.06);
}
/* Logo lockup: ribbon (sonsuzluk) + wordmark (PLANO) + CRM etiketi */
.sidebar-logo { flex-shrink: 0; display: flex; align-items: center; gap: 9px; padding: 16px 16px 10px; }

/* ══════════════════════════════════════════════════════════════════════
   C103 §3c — MARKA KİLİDİ: ribbon + PLANO wordmark + [PCRM] rozeti + slogan
   Markup: partials/marka.html (tek kaynak). Ölçüler --ll-* ile dışarıdan.
   PLANO'nun `.plano-lockup` DESENİ alındı; CSS'i import EDİLMEDİ (KD-45).

   ⛔ PLANO wordmark'ı ve ribbon ORİJİNAL GÖRSELDİR — değiştirilmez.
   ⭐ Ürün rozeti: kutulu, TEK RENK (cyan). §3b'nin "yan yana harf harf renkli
      metin" deseni geri alındı; §3b'nin --pcrm-p/c/r/m ve --pcrm-oran
      değişkenleri ile .ll-pcrm/.w-* kuralları SİLİNDİ (ölü CSS bırakılmadı).

   Rozet YENİDEN TASARLANMADI: PCRM'de zaten vardı (metni "CRM"), §3/K2'de
   yanlışlıkla kaldırılmıştı, git'ten (commit 40ba162) birebir geri getirildi.
   Desen ürün ailesinde ORTAK; yalnız METİN değişir (PCRM · PTASK…).
   ══════════════════════════════════════════════════════════════════════ */
.pcrm-lockup { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; line-height: 1; }
.pcrm-lockup .ll-ribbon { height: var(--ll-ribbon, 64px); width: auto; display: block; }

/* PLANO wordmark + rozet aynı satırda, dikeyde ortalı (rozet kutulu olduğu için
   taban hizası DEĞİL merkez hizası doğru — eski desende de `align-self:center` idi) */
.pcrm-lockup .ll-satir {
  display: flex; align-items: center; gap: var(--ll-ara, 9px); margin-top: 0.2rem;
}
/* --ll-word GÖRSEL YÜKSEKLİĞİDİR (PLANO'da da öyle: height:19px), cap değil. */
.pcrm-lockup .ll-word { height: var(--ll-word, 19px); width: auto; display: block; opacity: 0.95; }

/* ⭐ ÜRÜN ROZETİ — değerler git'ten (40ba162) alındı, göz kararı DEĞİL.
   Rozet ölçüsü wordmark'la birlikte büyüsün diye font-size --ll-rozet ile
   dışarıdan verilebilir; verilmezse eski sabit 10px korunur. */
.pcrm-lockup .ll-tag {
  font-size: var(--ll-rozet, 10px); font-weight: 700; letter-spacing: 0.08em;
  color: var(--p-cyan);                                        /* #00CBD7 */
  background: color-mix(in srgb, var(--p-cyan) 15%, transparent);
  padding: 1px 6px; border-radius: var(--radius-pill);         /* 6px */
  white-space: nowrap;
}

/* Slogan — renk·konum·tipografi PLANO ile AYNI; yalnız METİN DİLİ İngilizce */
.pcrm-lockup .ll-slogan { margin: 0.4rem 0 0; font-size: var(--ll-slogan, 0.66rem); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.pcrm-lockup .ll-slogan .t1 { color: #5D85FF; }               /* PLAN.    — mavi */
.pcrm-lockup .ll-slogan .t2 { color: #2ED573; }               /* EXECUTE. — yeşil */
.pcrm-lockup .ll-slogan .t3 { color: rgba(255,255,255,0.80); }/* SUCCEED. — açık */
/* ── Splash sahnesi (C103 · K2.5) — giriş sahnesiyle AYNI zemin ──────────
   Zamanlama PLANO'dan ölçüldü: ribbon 500ms fade @80ms · wordmark 600ms @1900ms
   · toplam pencere 3000ms (js: store('ui').splashSure). */
.splash-sahne {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1100px 600px at 50% -10%, color-mix(in srgb, var(--p-blue) 20%, transparent), transparent 60%),
    var(--p-bg);
}
/* ⚠️ DURAĞAN HÂL GÖRÜNÜR OLMALI — `opacity:0` + `forwards` KULLANILMAZ.
   Bu dosyanın başında (satır ~30) genel bir kural var:
     @media (prefers-reduced-motion: reduce) { * { animation: none !important } }
   "Hareketi azalt" açık bir kullanıcıda animasyon TAMAMEN öldürülür. Başlangıç
   durumu `opacity:0` olsaydı splash 3 saniye BOŞ EKRAN olurdu (tarayıcıda ölçüldü).
   Çözüm: elemanın doğal hâli görünür (opacity 1), animasyon 0'DAN BAŞLAR ve
   `backwards` ile gecikme boyunca görünmez tutar. Animasyon öldürülürse marka
   durağan olarak görünür — PLANO'nun reduced-motion kararının aynısı. */
.splash-sahne .ll-ribbon { animation: splashDogus 500ms ease 80ms backwards; }
/* wordmark + rozet + slogan birlikte belirir (PLANO'da wordmark 1900ms'de gelir) */
.splash-sahne .ll-word,
.splash-sahne .ll-tag,
.splash-sahne .ll-slogan { animation: splashDogus 600ms ease 1900ms backwards; }
@keyframes splashDogus { from { opacity: 0; } to { opacity: 1; } }

/* Sidebar: yatay, slogan gizli (PLANO'nun `.compact` karşılığı).
   Sınıf markup'tan DEĞİL kapsayıcıdan gelir: marka.html tek dosya ve üç yerde
   aynen kullanılıyor; varyantı kullanan yer belirler, partial'a parametre geçmez. */
.sidebar-logo .pcrm-lockup { flex-direction: row; align-items: center; gap: 9px; }
.sidebar-logo .pcrm-lockup .ll-satir { margin-top: 0; }
/* Sidebar'da SLOGAN gizlenir — ROZET GÖRÜNÜR KALIR (asıl ürün işareti odur). */
.sidebar-logo .pcrm-lockup .ll-slogan { display: none; }
.nav-ayirici { height: 1px; margin: 8px 12px; background: rgba(255, 255, 255, 0.07); }

.sidebar-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav > * { flex-shrink: 0; }
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%; position: relative;
  min-height: var(--touch); padding: 9px 14px;
  border: 0; background: transparent; color: rgba(255, 255, 255, 0.62);
  border-radius: var(--radius); font: inherit; font-weight: 500; text-align: left; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nav-item svg { width: var(--p-icon-size); height: var(--p-icon-size); flex-shrink: 0; opacity: 0.75; }
.nav-item:hover { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.9); }
.nav-item:hover svg { opacity: 1; }
.nav-item.aktif { background: var(--p-nav-active); color: var(--p-cyan); }
.nav-item.aktif svg { opacity: 1; }
/* Sol şerit — köşeleri sıkıştırmadan (overflow:hidden YOK; dikey inset ile) */
.nav-item.aktif::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; background: var(--p-nav-stripe); border-radius: 0 2px 2px 0; }
.nav-sayac { margin-left: auto; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--p-acil); color: var(--p-on-color); font-size: 11px; font-weight: 700; text-align: center; }

/* Ana kolon */
.main-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  flex-shrink: 0; height: var(--p-topbar-h); display: flex; align-items: center; gap: 14px;
  padding: 0 20px; border-bottom: 1px solid var(--p-card-border);
  background: color-mix(in srgb, var(--p-bg) 82%, transparent); backdrop-filter: blur(10px);
  box-shadow: var(--p-shadow-topbar);
}
.topbar .baslik { font-weight: 700; color: var(--p-txt-strong); }
.topbar .sag { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.content { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 24px; position: relative; z-index: 1; }

/* Breadcrumb (kök → ayraç → başlık). Kök PCRM (bilinçli fark) */
.breadcrumb { display: flex; align-items: center; gap: 7px; }
.breadcrumb .kok { background: none; border: 0; padding: 0; font: inherit; font-size: 13px;
  color: var(--p-txt-dim); cursor: pointer; }
.breadcrumb .kok:hover { color: var(--p-blue-text); }
.breadcrumb .ayrac { width: 14px; height: 14px; color: var(--p-txt-dim); opacity: 0.55; flex-shrink: 0; }
.breadcrumb .simdi { font-size: 14px; font-weight: 600; color: var(--p-txt-strong); }

/* Topbar ikon butonu (yalnız ikon; dokunma hedefi ≥44px — manda §5) */
.topbar-ikon { position: relative; width: var(--touch); height: var(--touch);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--p-txt-dim); border-radius: var(--radius); cursor: pointer; }
.topbar-ikon svg { width: 20px; height: 20px; }
.topbar-ikon:hover { background: var(--p-hover); color: var(--p-txt); }
.topbar-rozet { position: absolute; top: 5px; right: 5px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; background: var(--p-acil); color: var(--p-on-color); font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; }

/* Satır eylem ikonu (düzenle/sil — yalnız ikon, ≥44px hedef) */
.satir-ikon { width: var(--touch); height: var(--touch); display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--p-txt-dim); border-radius: var(--radius); cursor: pointer; }
.satir-ikon svg { width: var(--p-icon-size-sm); height: var(--p-icon-size-sm); }
.satir-ikon:hover { background: var(--p-hover); color: var(--p-txt); }
.satir-ikon.tehlike:hover { background: color-mix(in srgb, var(--durum-gecikme) 14%, transparent); color: var(--durum-gecikme); }
/* Excel/PDF renkli, diğer araç ikonları soluk (PLANO deseni) */
.arac-excel { color: var(--durum-tamam) !important; }
.arac-pdf   { color: var(--durum-gecikme) !important; }

/* Mobil menu tetigi — desktop'ta gizli */
.menu-btn { display: none; }
.scrim { display: none; }

/* ── Mobil (≤860px): sidebar overlay. Desktop ile ES ZAMANLI ayni nav (manda §3) ── */
@media (max-width: 860px) {
  .menu-btn { display: inline-flex; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; height: 100dvh; z-index: 900;
    transform: translateX(-100%); transition: transform 0.24s var(--ease-out-std);
  }
  .sidebar.acik { transform: translateX(0); }
  .scrim.acik {
    display: block; position: fixed; inset: 0; z-index: 800;
    background: var(--p-scrim);
  }
}

/* ── Giris sahnesi ── */
/* ⭐ C103 · K2 — MARKA SAHNESİ TEMADAN BAĞIMSIZDIR (PLANO kararının aynısı).
   PLANO'nun kendi notu: "Markalı auth sahnesi (login + DB seçim + splash) —
   temadan bağımsız marka sahnesi". Ölçülen değerler: zemin #0B1426 · kart #020B1E.

   ⚠️ NEDEN ZORUNLU: sahne `var(--p-bg)` ile temayı izlediğinde Light tema beyaz
   zemin veriyordu; wordmark'ın P (#FFF8EC krem) ve M (#FFFFFF) harfleri ile
   slogandaki "Başar." (beyaz) GÖRÜNMEZ oluyordu — ekran görüntüsüyle yakalandı.
   Marka renkleri koyu zemine göre tanımlı; sahne de koyu OLMAK ZORUNDA. */
.auth-scene, .splash-sahne {
  --p-bg: #0B1426;                     /* tema değişkenini sahne içinde sabitle */
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(10,59,255,0.20), transparent 70%),
    radial-gradient(50% 45% at 100% 100%, rgba(0,176,80,0.15), transparent 70%),
    #0B1426;
  color: #fff;
}
.auth-scene {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.auth-card { width: 100%; max-width: 380px; }
/* Kart zemini de sabit — temaya göre beyazlamasın (PLANO: #020B1E) */
.auth-scene .auth-card.card {
  background: #020B1E; border: 1px solid rgba(255,255,255,0.08); color: #fff;
}
.auth-scene .field label { color: #8B93A7; }
.auth-scene .input {
  background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: #fff;
}
.auth-scene .input::placeholder { color: rgba(255,255,255,0.35); }
/* Chrome autofill sahneyi beyaza boyamasın (PLANO'da da aynı önlem var) */
.auth-scene .input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #101C33 inset;
  -webkit-text-fill-color: #fff; caret-color: #fff;
}
/* C103 · K2: eski "PLANO CRM" metin bloğunun `b`/`b span`/`p` kuralları KALDIRILDI.
   Marka artık partials/marka.html'den geliyor ve kendi tipografisini taşıyor;
   bu kurallar wordmark'ın harf renklerini ve slogan boyutunu EZİYORDU. */
.auth-card .marka { text-align: center; margin-bottom: 22px; display: flex; justify-content: center; }
/* C103 · K1 — nötr bilgi satırı (oturum bitti). Hata DEĞİL: kullanıcı yanlış bir
   şey yapmadı, o yüzden kırmızı kullanılmaz. */
.form-bilgi {
  background: color-mix(in srgb, var(--p-blue-text) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--p-blue-text) 35%, transparent);
  color: var(--p-blue-text); border-radius: var(--radius);
  padding: 9px 12px; font-size: 13px; margin-bottom: 14px;
}
.form-hata {
  background: color-mix(in srgb, var(--durum-gecikme) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--durum-gecikme) 40%, transparent);
  color: var(--durum-gecikme); border-radius: var(--radius);
  padding: 9px 12px; font-size: 13px; margin-bottom: 14px;
}
.link-btn { background: none; border: 0; color: var(--p-blue-text); cursor: pointer; font: inherit; padding: 0; }

/* ══════════════════════════════════════════════════════════════════
   C40b — Tanim ekranlari (T1 katalog · T2 jenerik) + C grubu kit
   Renk YALNIZ token'dan. Dis konteynerde overflow:hidden YOK (manda §3).
   ══════════════════════════════════════════════════════════════════ */

/* ── Arama ── */
.arama { max-width: 340px; }

/* ── T1 katalog ── */
.grup-baslik { color: var(--p-txt-dim); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; margin: 22px 0 10px; }
.katalog-grid { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.katalog-kart { background: var(--p-card); border: 1px solid var(--p-card-border);
  border-radius: var(--radius-card); padding: 16px; cursor: pointer; text-align: left;
  min-height: var(--touch); transition: border-color 0.12s, background 0.12s; }
.katalog-kart:hover { border-color: color-mix(in srgb, var(--p-cyan) 40%, var(--p-card-border));
  background: var(--p-hover); }
.katalog-kart .ad { color: var(--p-txt-strong); font-weight: 700; }
.katalog-kart .alt { display: flex; justify-content: space-between; margin-top: 10px;
  color: var(--p-txt-dim); font-size: 12px; }
.katalog-kart .sayi { color: var(--p-cyan); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── T2 tek panel (sol liste sidebar'a taşındı — C40h; dikey bütçe sabit) ── */
.sozluk-tekil { display: flex; flex-direction: column; min-height: 0;
  height: calc(100dvh - var(--p-topbar-h) - 48px); }
.sozluk-sag { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.liste-alan { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* ── Veri tablosu ── */
.veri-tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
.veri-tablo th { text-align: left; color: var(--p-txt-dim); font-weight: 600; font-size: 12px;
  padding: 8px 10px; border-bottom: 1px solid var(--p-card-border); position: sticky; top: 0;
  background: var(--p-bg); }
.veri-tablo td { padding: 8px 10px; border-bottom: 1px solid var(--p-card-border); }
.veri-tablo tr:hover td { background: var(--p-hover); }
.veri-tablo tr.secili td { background: color-mix(in srgb, var(--p-cyan) 10%, transparent); }
.satir-tut { cursor: grab; color: var(--p-txt-dim); }        /* surukle tutamaci */
.satir-suruklenen { opacity: 0.5; }

/* ── Toggle (aktif/pasif, bool) ── */
.toggle { appearance: none; width: 38px; height: 22px; border-radius: 999px;
  background: var(--p-input-border); position: relative; cursor: pointer; flex-shrink: 0;
  transition: background 0.15s; }
.toggle:checked { background: var(--p-green); }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--p-on-color); transition: transform 0.15s var(--ease-out-std); }
.toggle:checked::after { transform: translateX(16px); }

/* ── C grubu: Renk secici (5 aile · serbest hex YOK) ── */
.renk-secici { display: flex; gap: 8px; flex-wrap: wrap; }
.renk-swatch { width: 30px; height: 30px; min-width: 30px; border-radius: var(--radius);
  border: 2px solid transparent; cursor: pointer; padding: 0; }
.renk-swatch.secili { border-color: var(--p-txt-strong); box-shadow: var(--focus-ring); }
.renk-swatch.tamam   { background: var(--durum-tamam); }
.renk-swatch.uyari   { background: var(--durum-uyari); }
.renk-swatch.gecikme { background: var(--durum-gecikme); }
.renk-swatch.aktif   { background: var(--durum-aktif); }
.renk-swatch.notr    { background: var(--durum-notr); }

/* ── C grubu: Coklu secim cipi ── */
.cip-grup { display: flex; gap: 6px; flex-wrap: wrap; }
.cip { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--p-input-border);
  background: var(--p-input-bg); color: var(--p-txt-dim); cursor: pointer; font: inherit;
  font-size: 12px; min-height: 30px; }
.cip.secili { border-color: var(--p-cyan); color: var(--p-cyan);
  background: color-mix(in srgb, var(--p-cyan) 12%, transparent); }

/* ── Durumlar: bos · skeleton · hata ── */
.durum-kutu { text-align: center; color: var(--p-txt-dim); padding: 40px 20px; }
.skeleton-satir { height: 34px; border-radius: var(--radius); margin-bottom: 8px;
  background: linear-gradient(90deg, var(--p-card) 25%, var(--p-hover) 50%, var(--p-card) 75%);
  background-size: 200% 100%; animation: kayan 1.2s infinite; }
@keyframes kayan { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.durum-hata { color: var(--durum-gecikme); }

/* ── Mobil: T2 tek panel dikey akış (sözlük seçimi sidebar'dan — C40h) ── */
@media (max-width: 860px) {
  .sozluk-tekil { height: auto; }
  .liste-alan { overflow-y: visible; }
}

/* x-show ile birlikte kullanilan flex satiri (inline display:flex TUZAK — Alpine block'a cevirir) */
.f-satir { display: flex; align-items: center; gap: 8px; }

/* ══════════════════════════════════════════════════════════════════
   C40c — T3 kur paneli · T4 aşama editörü (p-progress-steps) · T5 accordion
   ══════════════════════════════════════════════════════════════════ */

/* ── Sekmeler (T4 işlem türü + eksen) ── */
.sekme-grup { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.sekme { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--p-input-border);
  background: transparent; color: var(--p-txt-dim); cursor: pointer; font: inherit; min-height: 34px; }
.sekme.aktif { background: color-mix(in srgb, var(--p-cyan) 14%, transparent);
  color: var(--p-cyan); border-color: transparent; }

/* ── B grubu: p-progress-steps (manda §5.1) — yatay adım şeridi ── */
.p-progress-steps { display: flex; align-items: flex-start; overflow-x: auto; padding: 10px 0; }
.p-step { display: flex; flex-direction: column; align-items: center; min-width: 128px;
  position: relative; cursor: grab; }
.p-step .cizgi { position: absolute; top: 7px; left: 50%; width: 100%; height: 2px;
  background: var(--p-card-border); z-index: 0; }
.p-step:last-child .cizgi { display: none; }
.p-step .nokta { width: 14px; height: 14px; border-radius: 50%; background: var(--durum-notr);
  border: 2px solid var(--p-bg); z-index: 1; }
.p-step.tamam .nokta { background: var(--durum-tamam); }
.p-step.baslangic .nokta { background: var(--p-cyan); box-shadow: 0 0 0 4px color-mix(in srgb, var(--p-cyan) 22%, transparent); }
.p-step .etiket { margin-top: 8px; font-size: 12px; color: var(--p-txt); text-align: center; padding: 0 4px; }
.p-step.secili .etiket { color: var(--p-cyan); font-weight: 700; }
.p-step .rozet { font-size: 10px; color: var(--p-green-text); margin-top: 2px; }
.p-step .evrak { font-size: 10px; color: var(--p-txt-dim); margin-top: 2px; }

/* ── Terminal kutusu (KH-13: zincire bağlanmaz) ── */
.terminal-kutu { border: 1px dashed var(--p-card-border); border-radius: var(--radius-card);
  padding: 14px; margin-top: 16px; }
.terminal-kutu .t-baslik { color: var(--p-txt-dim); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.terminal-oge { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 0; background: transparent; color: var(--p-txt); font: inherit;
  padding: 8px 10px; border-radius: var(--radius); cursor: pointer; min-height: 38px; }
.terminal-oge:hover { background: var(--p-hover); }
.terminal-oge.secili { background: color-mix(in srgb, var(--p-cyan) 10%, transparent); }
.terminal-oge .not { margin-left: auto; color: var(--p-txt-dim); font-size: 11px; }

/* ── T3 kur paneli ── */
.kur-panel { margin-top: 18px; }
.kur-satir { display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--p-card-border); }
.kur-deger { font-variant-numeric: tabular-nums; text-align: right; color: var(--p-txt); }
.kur-bos { color: var(--p-txt-dim); }

/* ── T5 accordion (master-detail) ── */
.accordion-oge { border: 1px solid var(--p-card-border); border-radius: var(--radius-card); margin-bottom: 8px; }
.accordion-baslik { display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; background: transparent; border: 0; color: var(--p-txt); font: inherit;
  text-align: left; cursor: pointer; min-height: var(--touch); }
.accordion-baslik .ok { color: var(--p-txt-dim); width: 14px; }
.accordion-baslik .say { margin-left: auto; color: var(--p-txt-dim); font-size: 12px; }
.accordion-govde { padding: 0 14px 12px 36px; }
.rozet-insaat { font-size: 11px; font-weight: 700; color: var(--durum-uyari);
  background: color-mix(in srgb, var(--durum-uyari) 15%, transparent); padding: 2px 8px; border-radius: var(--radius-pill); }
.rozet-notr { font-size: 11px; color: var(--p-txt-dim); }
.yardim-metin { color: var(--p-txt-dim); font-size: 12px; margin-top: 4px; }
.detay-satir { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; border-top: 1px solid var(--p-card-border); }
.detay-satir .sil-btn { margin-left: auto; }

/* ══════════════════════════════════════════════════════════════════
   C40f — Form modalı (PLANO deseni): baslik + scroll govde + sabit footer
   ══════════════════════════════════════════════════════════════════ */
.modal-form { max-width: 560px; padding: 0; display: flex; flex-direction: column; max-height: 88dvh; }
.modal-baslik { flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; border-bottom: 1px solid var(--p-card-border); }
.modal-baslik h3 { margin: 0; }
.modal-x { margin-left: auto; width: 32px; height: 32px; border: 0; background: transparent;
  color: var(--p-txt-dim); border-radius: var(--radius); cursor: pointer; font-size: 16px; }
.modal-x:hover { background: var(--p-hover); color: var(--p-txt); }
.modal-govde { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 20px; }
.modal-footer { flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--p-card-border); }
/* Bölüm başlığı — uppercase soluk (PLANO deseni) */
.bolum-baslik { color: var(--p-txt-dim); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; margin: 4px 0 10px; }
.bolum-baslik:not(:first-child) { margin-top: 20px; }

/* Mobil: modal tam-ekran benzeri (uygun genişlik) */
@media (max-width: 640px) {
  .modal-scrim { padding: 0; align-items: stretch; }
  .modal-form { max-width: 100%; max-height: 100dvh; border-radius: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   C40g — Sidebar alt bloğu: DB seçici · tema toggle · kullanıcı kartı.
   Alt blok flex-shrink:0 (KH15.5) — nav uzasa da en altta yerinde kalır.
   ══════════════════════════════════════════════════════════════════ */
.sidebar-foot { flex-shrink: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 8px 12px 12px; }

/* DB / çalışma alanı seçici (görsel; davranış C41+'ta bağlanır) */
/* Yedek sağlığı rozeti (C25d) — yalnız sorun varsa çizilir */
.yedek-rozet { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px;
               padding: 8px 10px; border-radius: var(--radius-sm, 8px);
               background: rgba(255, 107, 107, 0.10);
               border: 1px solid rgba(255, 107, 107, 0.35); }
.yedek-rozet svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--durum-gecikme); }
.yedek-rozet .metin { min-width: 0; }
.yedek-rozet .baslik { font-size: 12px; font-weight: 700; color: var(--durum-gecikme);
                       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yedek-rozet .alt { font-size: 10.5px; color: var(--p-txt-dim); margin-top: 1px; }
.yedek-rozet.uyari { background: rgba(255, 192, 77, 0.10); border-color: rgba(255, 192, 77, 0.35); }
.yedek-rozet.uyari svg, .yedek-rozet.uyari .baslik { color: var(--durum-uyari); }
.yedek-rozet.tamam { background: rgba(46, 213, 115, 0.10); border-color: rgba(46, 213, 115, 0.30); }
.yedek-rozet.tamam svg, .yedek-rozet.tamam .baslik { color: var(--durum-tamam); }

.yan-db { padding: 6px 2px 10px; }
.yan-db .etiket { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 5px; }
.yan-db .deger { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  color: rgba(255, 255, 255, 0.78); padding: 7px 10px; min-height: 34px; border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); }
.yan-db .deger svg { width: 15px; height: 15px; opacity: 0.7; flex-shrink: 0; }

/* Tema toggle — 3 buton (Plano/Light/System), ikon + altında metin */
.tema-toggle { display: flex; gap: 2px; padding: 3px; margin: 4px 0 10px;
  background: rgba(0, 0, 0, 0.25); border-radius: var(--radius); }
.tema-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 0; background: none; color: rgba(255, 255, 255, 0.6); border-radius: 6px;
  padding: 6px 4px; font: inherit; font-size: 10px; font-weight: 500; cursor: pointer;
  transition: background 0.15s, color 0.15s; }
.tema-btn svg { width: 15px; height: 15px; }
.tema-btn:hover { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.85); }
.tema-btn.aktif { background: color-mix(in srgb, var(--p-cyan) 14%, transparent); color: var(--p-cyan); }

/* Kullanıcı kartı — avatar + ad/rol + sürüm satırı */
.yan-kullanici { display: flex; align-items: center; gap: 10px; padding: 4px 2px; }
.yan-kullanici .bilgi { min-width: 0; flex: 1; }
.yan-kullanici .ad { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.88);
  white-space: nowrap; overflow: clip; text-overflow: ellipsis; }   /* clip: text-ellipsis; dış-kart değil */
.yan-kullanici .rol { font-size: 11px; color: rgba(255, 255, 255, 0.55); }
.yan-surum { font-size: 10px; color: rgba(255, 255, 255, 0.38); padding: 6px 2px 0; line-height: 1.55; }

/* Avatar — yuvarlak, baş harf, token paleti (kit.js avatarRenk) */
.avatar { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--p-on-color); font-size: 13px; font-weight: 700; }
.avatar-40 { width: 40px; height: 40px; font-size: 16px; }

/* Sidebar katlanır grup (C40h — Tanımlar menüsü). Chevron rotasyonu inline :style ile (KH15.5). */
.nav-grup-ok { margin-left: auto; width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.2s; }
.nav-alt { padding-left: 12px; }
.nav-alt .nav-item { min-height: 36px; padding: 7px 12px; font-size: 13px; align-items: flex-start; }
.nav-alt .nav-item svg:first-child { margin-top: 1px; }   /* çok satırlı adda ikon üstte hizalı */
.nav-alt .nav-item.aktif::before { top: 4px; bottom: 4px; }

/* ══════════════════════════════════════════════════════════════════
   C44 — PORTFÖY (F3). P1 liste · P2 kat planı · P3 ısı haritası + daire
   detay + kat planı kurulum. Renk YALNIZ token'dan; dış kartta overflow
   yok; backdrop-filter yalnız yüzen yüzeyler. (spec: C43_PORTFOY_TASARIM_SPEC.md)
   ══════════════════════════════════════════════════════════════════ */

/* ── Ekran başlık şeridi (proje adı · alt bilgi · sağda görünüm anahtarı) ── */
.pf-baslik { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pf-baslik .geri { display: inline-flex; align-items: center; gap: 6px; }
.pf-baslik h2 { font-size: 18px; }
.pf-baslik .alt { color: var(--p-txt-dim); font-size: 13px; }
.pf-baslik .sag { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ── Görünüm anahtarı (3 ikon segmented — .tema-toggle deseni, yatay) ── */
.gorunum-anahtari { display: inline-flex; gap: 2px; padding: 3px; background: rgba(0,0,0,0.18);
  border: 1px solid var(--p-card-border); border-radius: var(--radius); }
.light .gorunum-anahtari { background: var(--p-input-bg); }
.gorunum-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none;
  color: var(--p-txt-dim); border-radius: 6px; padding: 6px 10px; min-height: 34px; font: inherit;
  font-size: 12px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.gorunum-btn svg { width: 16px; height: 16px; }
.gorunum-btn:hover { background: var(--p-hover); color: var(--p-txt); }
.gorunum-btn.aktif { background: color-mix(in srgb, var(--p-cyan) 14%, transparent); color: var(--p-cyan); }

/* ── Metrik kartı şeridi (P1/P3 — tıklanabilir, KD-11) ── */
.metrik-serit { display: grid; gap: 12px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.metrik-kart { background: var(--p-card); border: 1px solid var(--p-card-border);
  border-left: 4px solid var(--kpi-renk, var(--p-cyan)); border-radius: var(--radius-card);
  padding: 14px 16px; text-align: left; cursor: pointer; min-height: var(--touch);
  transition: transform 0.15s var(--ease-out-std), border-color 0.12s; }
.metrik-kart:hover { transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--kpi-renk, var(--p-cyan)) 45%, var(--p-card-border)); }
.metrik-kart:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.metrik-kart .sayi { font-size: 24px; font-weight: 700; color: var(--p-txt-strong);
  font-variant-numeric: tabular-nums; }
.metrik-kart .etiket { color: var(--p-txt-dim); font-size: 12px; margin-top: 2px; display: flex;
  align-items: center; gap: 5px; }
.metrik-kart.mavi { --kpi-renk: var(--p-blue-text); }
.metrik-kart.yesil { --kpi-renk: var(--p-green-text); }
.metrik-kart.camgobegi { --kpi-renk: var(--p-cyan); }
.metrik-kart.notr { --kpi-renk: var(--durum-notr); }
.metrik-kart.gecikme { --kpi-renk: var(--durum-gecikme); }

/* ── Filtre / durum çipleri şeridi ── */
.cip-serit { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
/* durum filtre çipi (tıklanınca filtre kurar) */
.durum-cip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: 999px; border: 1px solid var(--p-input-border); background: var(--p-input-bg);
  color: var(--p-txt-dim); cursor: pointer; font: inherit; font-size: 12px; min-height: 30px; }
.durum-cip:hover { border-color: var(--p-border-strong); color: var(--p-txt); }
.durum-cip.secili { border-color: var(--p-cyan); color: var(--p-cyan);
  background: color-mix(in srgb, var(--p-cyan) 12%, transparent); }
.durum-cip .say { font-variant-numeric: tabular-nums; font-weight: 700; }
/* aktif filtre çipi (kaldırılabilir — ✕) — KD-11 §7.1 zorunlu */
.filtre-cip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px;
  border-radius: 999px; border: 1px solid var(--p-cyan);
  background: color-mix(in srgb, var(--p-cyan) 12%, transparent); color: var(--p-cyan);
  font-size: 12px; min-height: 30px; }
.filtre-cip .say { color: var(--p-txt-dim); font-variant-numeric: tabular-nums; }
.filtre-cip .kapat { display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border: 0; background: transparent; color: currentColor;
  border-radius: 999px; cursor: pointer; font-size: 13px; }
.filtre-cip .kapat:hover { background: color-mix(in srgb, var(--p-cyan) 20%, transparent); }

/* ── Proje kartı ızgarası (4.1 · .katalog-grid deseni) ── */
.proje-kart { background: var(--p-card); border: 1px solid var(--p-card-border);
  border-radius: var(--radius-card); padding: 16px; cursor: pointer; text-align: left;
  min-height: var(--touch); transition: border-color 0.12s, transform 0.15s var(--ease-out-std); }
.proje-kart:hover { border-color: color-mix(in srgb, var(--p-cyan) 40%, var(--p-card-border));
  transform: translateY(-1px); }
.proje-kart:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.proje-kart .p-ust { display: flex; align-items: flex-start; gap: 8px; }
.proje-kart .ad { color: var(--p-txt-strong); font-weight: 700; font-size: 15px; }
.proje-kart .yer { color: var(--p-txt-dim); font-size: 12px; margin-top: 2px; }
.proje-kart .p-alt { display: flex; align-items: center; gap: 12px; margin-top: 12px;
  color: var(--p-txt-dim); font-size: 12px; }
.proje-kart .p-alt .sayi { color: var(--p-txt); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── İlerleme / doluluk çubuğu (§7.2) ── */
.ilerleme { height: 8px; border-radius: 999px; background: var(--p-input-bg);
  border: 1px solid var(--p-card-border); }
/* iç bar da yuvarlak + daima ≤%100 -> overflow:hidden GEREKMEZ (manda §3 grep temiz) */
.ilerleme > span { display: block; height: 100%; max-width: 100%; border-radius: 999px;
  background: var(--durum-tamam); transition: width 0.3s var(--ease-out-std); }
.ilerleme.uyari > span { background: var(--durum-uyari); }
.ilerleme.gecikme > span { background: var(--durum-gecikme); }

/* ── p-kv-grid (künye ızgarası — manda §5.1, ilk kullanım) ── */
.p-kv-grid { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; align-items: baseline; }
.p-kv-grid dt { color: var(--p-txt-dim); font-size: 13px; }
.p-kv-grid dd { margin: 0; color: var(--p-txt); font-size: 14px; }
.p-kv-grid dd.para { font-variant-numeric: tabular-nums; }

/* ── Sözleşme bloğu (çerçeveli — çoklu daire tuzağı §7.2) ── */
.sozlesme-blok { border: 2px solid color-mix(in srgb, var(--p-cyan) 40%, var(--p-card-border));
  border-radius: var(--radius-card); padding: 14px 16px; margin-top: 14px; }
.sozlesme-blok .sb-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sozlesme-blok .sb-not { color: var(--p-txt-dim); font-size: 12px; margin: 8px 0 10px; }
.sozlesme-blok .sb-fin { display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0; }
.sozlesme-blok .sb-fin .k { color: var(--p-txt-dim); font-size: 11px; }
.sozlesme-blok .sb-fin .v { color: var(--p-txt); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── P2 kat planı düzeni — sabit dikey bütçe (flex:1+overflow DEĞİL, manda §3) ── */
.kat-plani { display: flex; gap: 16px;
  height: calc(100dvh - var(--p-topbar-h) - 140px); min-height: 320px; }
.kat-plani .sol { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  min-height: 0; background: var(--p-card); border: 1px solid var(--p-card-border);
  border-radius: var(--radius-card); }
.kat-plani .sol .plan-arac { flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--p-card-border); flex-wrap: wrap; }
.kat-plani .plan-govde { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid;
  place-items: center; padding: 12px; position: relative; }
.plan-gorsel { max-width: 100%; max-height: 100%; border-radius: var(--radius); cursor: zoom-in; }
.plan-yon { position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--p-txt-dim);
  background: var(--p-float-bg); border: 1px solid var(--p-card-border); border-radius: 999px; }
.kat-plani .sag { width: 270px; flex-shrink: 0; overflow-y: auto; min-height: 0;
  border: 1px solid var(--p-card-border); border-radius: var(--radius-card); padding: 8px; }

/* ── P2 sağ panel: kat ayıraçlı daire listesi ── */
.kat-ayrac { color: var(--p-txt-dim); font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 12px 8px 6px; }
.kat-ayrac.ticari { color: var(--durum-uyari); }
.daire-oge { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 0; border-left: 3px solid var(--oge-renk, var(--durum-notr));
  background: color-mix(in srgb, var(--oge-renk, var(--durum-notr)) 8%, transparent);
  color: var(--p-txt); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 4px;
  font: inherit; cursor: pointer; min-height: 40px; transition: background 0.12s; }
.daire-oge:hover, .daire-oge.hat { background: color-mix(in srgb, var(--oge-renk, var(--durum-notr)) 18%, transparent); }
.daire-oge.hat { box-shadow: inset 2px 0 0 var(--p-cyan); }
.daire-oge .no { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 34px; }
.daire-oge .ayr { color: var(--p-txt-dim); font-size: 12px; }
.daire-oge .uyari { margin-left: auto; color: var(--durum-gecikme); }
.daire-oge.r-notr { --oge-renk: var(--durum-notr); }
.daire-oge.r-uyari { --oge-renk: var(--durum-uyari); }
.daire-oge.r-aktif { --oge-renk: var(--durum-aktif); }
.daire-oge.r-tamam { --oge-renk: var(--durum-tamam); }
.daire-oge.r-gecikme { --oge-renk: var(--durum-gecikme); }

/* ── P3 ısı haritası ── */
.isi-arac { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.isi-legend { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--p-txt-dim); }
.isi-legend i { width: 16px; height: 12px; border-radius: 3px; display: inline-block; }
.isi-grup { margin-bottom: 18px; }
.isi-grup-baslik { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.isi-grup-baslik .ad { color: var(--p-txt-strong); font-weight: 700; cursor: pointer; }
.isi-grup-baslik .ad:hover { color: var(--p-cyan); }
.isi-grup-baslik .say { color: var(--p-txt-dim); font-size: 12px; }
.isi-grup-baslik .vg { margin-left: auto; color: var(--p-txt-dim); font-size: 12px;
  font-variant-numeric: tabular-nums; }
.isi-izgara { display: flex; flex-wrap: wrap; gap: 3px; }
.isi-kare { width: 15px; height: 15px; border-radius: 3px; cursor: pointer; position: relative;
  border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; color: var(--p-btn-primary-text); }
.isi-kare:hover { outline: 2px solid var(--p-cyan); outline-offset: 1px; }
.isi-kare.i1 { background: var(--isi-1); }
.isi-kare.i2 { background: var(--isi-2); }
.isi-kare.i3 { background: var(--isi-3); }
.isi-kare.i4 { background: var(--isi-4); }
.isi-kare.i5 { background: var(--isi-5); }
.isi-kare.bos { background: var(--p-card); border-color: var(--p-border-strong); }
/* "değeri göster" modunda daha büyük kare (yüzde okunsun) */
.isi-izgara.deger .isi-kare { width: 26px; height: 18px; font-size: 9px; }

/* ── Portföy tablo: gecikmeli satır (F4'te aktifleşir; yapı hazır) ── */
.veri-tablo tr.gecikmeli td { background: color-mix(in srgb, var(--durum-gecikme) 8%, transparent); }
.veri-tablo td.para { text-align: right; font-variant-numeric: tabular-nums; }
.veri-tablo td.para.negatif, .veri-tablo td.gecikme { color: var(--durum-gecikme); }
.hucre-bos { color: var(--p-txt-dim); }

/* ── Mobil parite (≤860px) ── */
@media (max-width: 860px) {
  .kat-plani { flex-direction: column; height: auto; }   /* plan üstte, liste altta (§12) */
  .kat-plani .sag { width: auto; max-height: 50vh; }
  .kat-plani .sol { min-height: 300px; }
  .isi-izgara .isi-kare { width: 13px; height: 13px; }
}
@media (max-width: 640px) {
  .metrik-serit { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════
   C44c — Global liste: filtre/sıralama panelleri · toolbar · gruplama ·
   sütun sürükle-bırak. PLANO görev listesi deseni. Renk yalnız token.
   ══════════════════════════════════════════════════════════════════ */

/* ── Katlanır panel (filtre / sıralama) ── */
.panel-kart { background: var(--p-card); border: 1px solid var(--p-card-border);
  border-radius: var(--radius-card); margin-bottom: 10px; }
.panel-baslik { display: flex; align-items: center; gap: 8px; width: 100%; border: 0;
  background: transparent; color: var(--p-txt); font: inherit; font-weight: 600; cursor: pointer;
  padding: 10px 14px; min-height: 42px; text-align: left; }
.panel-baslik svg { color: var(--p-txt-dim); }
.panel-baslik .say { min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--p-cyan); color: var(--p-bg); font-size: 11px;
  font-weight: 700; text-align: center; }
.panel-govde { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 0 14px 14px; }

/* ── Çoklu-seçim filtre butonu + dropdown ── */
.filtre-sar { position: relative; }
.filtre-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
  border-radius: var(--radius); border: 1px solid var(--p-input-border); background: var(--p-input-bg);
  color: var(--p-txt); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.filtre-btn:hover:not(:disabled) { border-color: var(--p-border-strong); }
.filtre-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.filtre-btn.dolu { border-color: var(--p-cyan); color: var(--p-cyan);
  background: color-mix(in srgb, var(--p-cyan) 10%, transparent); }
.filtre-btn svg { opacity: 0.6; }
.filtre-drop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
  min-width: 200px; max-height: 320px; overflow-y: auto; }
.filtre-drop .dropdown-item { font-size: 13px; }
.filtre-drop .dropdown-item.secili { color: var(--p-cyan); }

/* ── Aralık (m² / fiyat min-max) ── */
.aralik { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--p-txt-dim); }
.aralik .input { width: 90px; height: 36px; }

/* ── Toolbar ── */
.pf-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 10px; }

/* ── Tablo sarmalayıcı (yatay taşma kendi içinde) ── */
.tablo-sar { overflow-x: auto; }
.pf-tablo th { user-select: none; white-space: nowrap; }
.pf-tablo th.kol-uzeri { background: color-mix(in srgb, var(--p-cyan) 18%, var(--p-bg));
  box-shadow: inset 0 -2px 0 var(--p-cyan); }

/* ── Gruplama başlık satırları ── */
.grup-baslik-satir td, .grup-alt-satir td { cursor: pointer; font-weight: 700; }
.grup-baslik-satir td { background: color-mix(in srgb, var(--p-cyan) 8%, var(--p-card));
  color: var(--p-txt-strong); padding: 9px 10px; }
.grup-alt-satir td { background: var(--p-hover); color: var(--p-txt); padding: 7px 10px 7px 26px;
  font-size: 13px; }
.grup-baslik-satir:hover td, .grup-alt-satir:hover td { background: color-mix(in srgb, var(--p-cyan) 14%, var(--p-card)); }
.grup-ok { vertical-align: middle; margin-right: 6px; color: var(--p-txt-dim); transition: transform 0.15s; }
.grup-say { margin-left: 8px; display: inline-block; min-width: 20px; padding: 0 6px; height: 18px;
  line-height: 18px; border-radius: 999px; background: var(--p-input-bg); border: 1px solid var(--p-card-border);
  color: var(--p-txt-dim); font-size: 11px; font-weight: 700; text-align: center; }

@media (max-width: 640px) {
  .panel-govde .filtre-btn, .panel-govde .select { width: 100%; }
  .filtre-sar { width: 100%; }
}

/* ── C45 — toplu işlem barı · durum geçmişi ── */
.toplu-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
  padding: 8px 12px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--p-cyan) 10%, var(--p-card)); border: 1px solid var(--p-cyan); }
.gecmis-satir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--p-card-border); }
.gecmis-satir:last-child { border-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════
   C52 — p-money (manda §5.1) + MUSTERI ekrani
   ⚠️ p-money TEK blok. Sayfa icinde ad-hoc para stili yazilmaz.
   ⚠️ .fx-alt (cift doviz) BILEREK YOK — K4: doviz zinciri C52b'ye ertelendi.
   ══════════════════════════════════════════════════════════════════ */

/* ── p-money: tabular hizali, saga yasli tutar ── */
.p-money { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--p-txt);
  white-space: nowrap; display: block; text-align: right; }
.p-money .kur { font-size: 10.5px; color: var(--p-txt-dim); font-weight: 500; margin-left: 3px; }
.p-money.neg  { color: var(--durum-gecikme); }
.p-money.zero { color: var(--p-txt-dim); font-weight: 500; }
.p-money.bos  { color: var(--p-txt-dim); font-weight: 500; }

/* ── Musteri hucresi (avatar + ad + tip etiketi + alt satir) ── */
.mus-hucre { display: flex; align-items: center; gap: 10px; }
.mus-hucre .av { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid;
  place-items: center; font-weight: 600; font-size: 12px; color: var(--p-on-color); }
.mus-hucre .ad { font-weight: 600; color: var(--p-txt); display: flex; align-items: center;
  gap: 6px; white-space: nowrap; }
.mus-hucre .alt { font-size: 11.5px; color: var(--p-txt-dim); margin-top: 1px; white-space: nowrap; }
.tip-etiket { font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 4px;
  text-transform: uppercase; background: var(--p-hover); color: var(--p-txt-dim);
  border: 1px solid var(--p-card-border); }
.nova-kilit { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px;
  font-weight: 600; padding: 1px 5px; border-radius: 4px;
  color: var(--p-cyan); background: color-mix(in srgb, var(--p-cyan) 14%, transparent); }
.nova-kilit svg { width: 10px; height: 10px; }

/* ── Daire / taraf cipleri (tasarsa +N) ── */
.cip-liste { display: flex; flex-wrap: wrap; gap: 3px; max-width: 220px; }
.mini-cip { font-size: 11px; font-weight: 500; padding: 2px 7px; border-radius: 5px;
  background: var(--p-hover); color: var(--p-txt); white-space: nowrap; }
.mini-cip .prj { color: var(--p-txt-dim); font-weight: 400; }
.cip-fazla { font-size: 11px; color: var(--p-blue-text); font-weight: 600; padding: 2px 3px; }

/* ── Gecikme gun rozeti (kademe 1/2/3 — musteri_service.gecikme_kademe) ── */
.gun-rozet { display: inline-flex; align-items: center; justify-content: center; min-width: 44px;
  height: 24px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 12px;
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--p-btn-primary-text); }
.gun-rozet.k1 { background: var(--durum-uyari); }
.gun-rozet.k2 { background: var(--p-avatar-7); }
.gun-rozet.k3 { background: var(--durum-gecikme); }
.gecikme-not { font-size: 12px; color: var(--p-txt); max-width: 230px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; display: block; }
.gecikme-not .neden { font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 4px;
  background: var(--p-hover); color: var(--p-txt-dim); margin-right: 5px; }

/* ── Yapisik musteri sutunu (tablo yatay kayar, kimlik sabit kalir) ── */
.mus-tablo th { user-select: none; white-space: nowrap; }
.mus-tablo th.kol-uzeri { background: color-mix(in srgb, var(--p-cyan) 18%, var(--p-bg));
  box-shadow: inset 0 -2px 0 var(--p-cyan); }
.mus-tablo th.yapisik, .mus-tablo td.yapisik { position: sticky; left: 0; z-index: 3;
  background: var(--p-bg); box-shadow: 1px 0 0 var(--p-card-border); }
.mus-tablo thead th.yapisik { z-index: 4; }
/* Gecikmeli satir: sol kenarda 3px risk seridi (§6.2) */
.mus-tablo tr.gecikmeli td:first-child { box-shadow: inset 3px 0 0 var(--durum-gecikme); }

/* ── Gecikme toplu aksiyon bari (risk tonlu — .toplu-bar varyanti) ── */
.toplu-bar.risk { background: color-mix(in srgb, var(--durum-gecikme) 12%, var(--p-card));
  border-color: var(--durum-gecikme); }

/* ══ Musteri karti — KD-25: header sabit + sekme + body scroll (900px / 90vh) ══ */
.modal-kart { max-width: 900px; width: 100%; padding: 0; display: flex; flex-direction: column;
  max-height: 90dvh; }
.kart-bas { flex-shrink: 0; padding: 16px 20px 0; border-bottom: 1px solid var(--p-card-border); }
.kart-ust { display: flex; align-items: flex-start; gap: 12px; }
.kart-ust .av { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid;
  place-items: center; font-weight: 700; font-size: 17px; color: var(--p-on-color); }
.kart-ust .ana { flex: 1; min-width: 0; }
.kart-ust .isim { font-size: 18px; font-weight: 700; color: var(--p-txt-strong);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kart-ust .altbilgi { color: var(--p-txt-dim); font-size: 12.5px; margin-top: 3px;
  display: flex; gap: 8px; flex-wrap: wrap; }
.kart-ust .altbilgi b { color: var(--p-txt); font-weight: 600; }

/* Sayac grid — 4'lu, tiklanabilir (KD-11) */
.sayac-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 12px; }
.sayac { background: var(--p-card); border: 1px solid var(--p-card-border);
  border-left: 3px solid var(--sayac-renk, var(--durum-notr)); border-radius: var(--radius);
  padding: 10px 12px; text-align: left; cursor: pointer; transition: background var(--mo-hover); }
.sayac:hover { background: var(--p-hover); }
.sayac:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sayac .v { font-size: 18px; font-weight: 700; color: var(--p-txt-strong);
  font-variant-numeric: tabular-nums; }
.sayac .l { font-size: 11.5px; color: var(--p-txt-dim); margin-top: 2px; }
.sayac.bilgi { --sayac-renk: var(--p-cyan); }
.sayac.risk  { --sayac-renk: var(--durum-gecikme); }
.sayac.uyari { --sayac-renk: var(--durum-uyari); }
.sayac.tamam { --sayac-renk: var(--durum-tamam); }

/* Sekme seridi (kart) */
.kart-sekmeler { display: flex; gap: 2px; overflow-x: auto; }
.kart-sekme { border: 0; background: transparent; color: var(--p-txt-dim); cursor: pointer;
  padding: 9px 14px; font-size: 13.5px; font-weight: 600; border-bottom: 2px solid transparent;
  white-space: nowrap; }
.kart-sekme:hover { color: var(--p-txt); }
.kart-sekme.aktif { color: var(--p-cyan); border-bottom-color: var(--p-cyan); }
.kart-sekme .sayac-rozet { margin-left: 6px; font-size: 11px; padding: 0 6px; border-radius: 999px;
  background: var(--p-hover); color: var(--p-txt-dim); font-variant-numeric: tabular-nums; }

/* Nova kilit seridi (7.3) */
.kilit-serit { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px;
  border-radius: var(--radius); margin-bottom: 14px; font-size: 12.5px; color: var(--p-txt);
  background: color-mix(in srgb, var(--p-cyan) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--p-cyan) 35%, transparent); }
.kilit-serit svg { width: 16px; height: 16px; flex: none; color: var(--p-cyan); margin-top: 1px; }
.p-kv-grid dd.kilitli { color: var(--p-txt-dim); }

/* Sozlesme mini karti (sekme 2) */
.soz-mini { border: 1px solid var(--p-card-border); border-radius: var(--radius);
  padding: 12px; margin-bottom: 8px; cursor: pointer; background: var(--p-card); }
.soz-mini:hover { background: var(--p-hover); border-color: var(--p-border-strong); }
.soz-mini .ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.soz-mini .no { font-weight: 700; color: var(--p-txt-strong); }
.soz-mini .mali { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px; margin-bottom: 8px; }
.soz-mini .mali .k { font-size: 11px; color: var(--p-txt-dim); }

/* Karne metrik izgarasi (sekme 3) */
.karne-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.karne-kutu { background: var(--p-card); border: 1px solid var(--p-card-border);
  border-radius: var(--radius); padding: 12px; }
.karne-kutu .v { font-size: 20px; font-weight: 700; color: var(--p-txt-strong);
  font-variant-numeric: tabular-nums; }
.karne-kutu .l { font-size: 11.5px; color: var(--p-txt-dim); margin-top: 3px; }

/* Istiflenmis modal (KD-26) — musteri karti arkada kalir, USTTEKI one gelir.
   ⚠️ Taban .modal-scrim z-index:1000 — ust katman ondan BUYUK olmali (ilk yazimda 60
   verilmisti, ust modal kartin ARKASINDA kaliyordu; tarayici dogrulamasinda yakalandi). */
.modal-scrim.ust { z-index: 1010; }
/* C54 — UCUNCU katman: odeme iptali onayi. Sozlesme modali musteri kartindan acilinca
   zaten .ust (1010); onay diyalogu ondan da yukarida olmali. Tarayicida olculdu. */
.modal-scrim.ust2 { z-index: 1020; }

/* C54 §5.5 — onizlemede BU odemeden pay alan satir (renk token'dan, hex YOK) */
.satir-vurgu { background: color-mix(in srgb, var(--p-green) 10%, transparent); }
/* Taksit satirinin altinda acilan odeme gecmisi hucresi */
.gecmis-hucre { background: var(--p-hover); padding: 8px 10px; }
.kirinti { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--p-txt-dim);
  padding: 10px 20px 0; }
.kirinti b { color: var(--p-txt); font-weight: 600; }

@media (max-width: 860px) {
  .sayac-grid { grid-template-columns: repeat(2, 1fr); }
  .cip-liste { max-width: 150px; }
}