/* ============================================================
   Insurance CRM V3 — Uygulama Stilleri
   ============================================================ */
:root {
  --primary: #4f46e5;
  --primary-dark: #4338ca;
  --primary-light: #eef2ff;
  --accent-grad: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --brand-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  --sidebar-grad: linear-gradient(180deg, #1e1b4b 0%, #312e81 100%);
  --sidebar-active: rgba(255,255,255,.12);
  --bg: #f1f4f9;
  --card: #ffffff;
  --text: #1e293b;
  --muted: #64748b;
  --border: #e6eaf1;
  --danger: #dc2626;
  --success: #16a34a;
  --warn: #d97706;
  --info: #0891b2;
  /* SATIR İŞARETİ — yenileme akıbetini satırın SOLUNDAN okutan renkler.
     ROZET DEĞİL: "Yenilendi" rozeti yeşil, "Yenilenmedi" kırmızı kalır
     (bkz. `.lt-renew`, `.plf`). Bu çift yalnız sol çerçeveyi ve satırın
     zemin tonunu boyar.

     Neden ayrı bir renk ailesi: satırın öteki ucunda ACİLİYET okunuyor
     (kaç gün kaldı → kırmızı/amber/camgöbeği). Sol çerçeve de aynı
     aileden olunca aynı güne düşen yenilenmiş ve yenilenmemiş poliçe
     ayırt edilemiyordu. Mor ve turuncu o tonların hiçbirine benzemez. */
  --mark-renewed:   #7c3aed;
  --mark-unrenewed: #ea7317;
  /* katmanlı yumuşak gölgeler */
  --sh-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --sh-md: 0 2px 4px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.08);
  --sh-lg: 0 4px 8px rgba(15,23,42,.04), 0 12px 32px rgba(15,23,42,.12);
  --radius: 14px;
  --radius-sm: 9px;
}

* { box-sizing: border-box; }

/* ------------------------------------------------------------
   `hidden` özniteliği her yerde çalışsın.
   ------------------------------------------------------------
   Tarayıcı `[hidden] { display: none }` kuralını en düşük öncelikli
   katmanda tanımlar; bileşen sınıflarındaki `display: flex/grid/...`
   kuralları aynı özgüllükte ama daha sonra geldiği için onu eziyordu.
   Sonuç: JavaScript `el.hidden = true` dese bile öğe ekranda kalıyordu —
   giriş ekranındaki "Caps Lock açık" uyarısının Caps Lock kapalıyken de
   görünmesinin sebebi buydu. Aynı tuzak `.cfrm-alert`, `.fgrid` ve
   `.brk-pay` için de geçerliydi. */
[hidden] { display: none !important; }

body {
  margin: 0;
  /* `--app-font` yalnız Görünüm ayarında bir yazı tipi SEÇİLMİŞSE basılır
     (bkz. views/layouts/main.php). Seçilmemişse bu yığın geçerli kalır. */
  font-family: var(--app-font, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif);
  background: var(--bg);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

/* SVG ikon hizalama */
svg { flex-shrink: 0; vertical-align: middle; }
.ic-inline { display: inline-flex; align-items: center; gap: .45rem; }

/* --- Uygulama iskeleti --- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 230px; flex-shrink: 0;
  background: var(--sidebar-grad); color: #cfd8e3;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent;
}
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 999px; }
.sidebar.collapsed { display: none; }

/* Kullanıcı kartı — camsı kart + gradyan halkalı avatar + çevrim içi noktası */
.side-user {
  display: flex; align-items: center; gap: .65rem;
  margin: .8rem .7rem .35rem; padding: .7rem .75rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
}
.avatar-ring {
  position: relative; flex-shrink: 0; padding: 2px; border-radius: 50%;
  background: conic-gradient(from 210deg, #818cf8, #c084fc, #38bdf8, #818cf8);
}
.avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--accent-grad);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .88rem; flex-shrink: 0;
}
.av-dot {
  position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%;
  background: #22c55e; border: 2px solid rgba(13,18,43,.9);
  animation: avPulse 2.4s ease-out infinite;
}
@keyframes avPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.45); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .av-dot { animation: none; } }
.side-user-info { min-width: 0; }
.side-user-info strong {
  display: block; color: #fff; font-size: .88rem; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-user-info span {
  display: inline-flex; align-items: center; gap: .28rem; margin-top: .18rem;
  padding: .06rem .45rem; border-radius: 999px;
  font-size: .67rem; font-weight: 700; letter-spacing: .02em;
  color: #fcd34d; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.22);
}

/* Bölüm başlıkları */
.sn-cap {
  display: block; margin: .85rem .55rem .25rem; padding: 0 .5rem;
  font-size: .63rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(207,216,227,.42);
}
.side-nav > .sn-cap:first-child { margin-top: .5rem; }

/* Menü */
.side-nav { flex: 1; padding: .15rem .55rem .55rem; }
.side-nav a, .nav-drop {
  position: relative;
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .55rem .65rem; margin: 1px 0;
  color: #cfd8e3; font-size: var(--menu-fs, .875rem); font-weight: 500; letter-spacing: .01em;
  background: none; border: 0; border-radius: 10px; cursor: pointer; text-align: left;
  transition: background .15s, color .15s;
}
.side-nav a i, .nav-drop i {
  font-style: normal; width: 20px; height: 20px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .8; transition: opacity .15s, transform .15s;
}
.side-nav a:hover, .nav-drop:hover { background: rgba(255,255,255,.07); text-decoration: none; color: #fff; }
.side-nav a:hover i, .nav-drop:hover i { opacity: 1; transform: scale(1.06); }
.side-nav a.active {
  background: var(--accent-grad); color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 36%, transparent);
}
.side-nav a.active i { opacity: 1; }

/* Menü rozeti (Onay Talepleri — bekleyen sayısı).
   Kırmızı bilerek: bekleyen bir onay, yanlış kategoride duran bir
   komisyondur; menüde sessizce beklememeli. Etkin satırda da okunur
   kalsın diye zemin gradyanın üzerinde beyaz çerçeveyle durur. */
.side-nav a .sn-badge {
  margin-left: auto; flex-shrink: 0;
  min-width: 20px; padding: .05rem .32rem;
  font-style: normal; font-size: .68rem; font-weight: 800; line-height: 1.5;
  text-align: center; border-radius: 999px;
  background: var(--danger); color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.14);
}

/* Açılır grup: alt sayfadayken başlık da vurgulu kalır (is-here) */
.nav-drop em { margin-left: auto; display: inline-flex; font-style: normal; opacity: .65; transition: transform .18s; }
.nav-drop.open em { transform: rotate(180deg); }
.nav-drop.is-here { color: #fff; background: rgba(255,255,255,.06); }

/* Alt menü: soldan kılavuz çizgisi + nokta işaretleri */
.nav-sub { display: none; position: relative; margin: .1rem 0 .3rem; padding: .1rem 0; }
.nav-sub.open { display: block; }
.nav-sub::before {
  content: ''; position: absolute; left: 1.02rem; top: .3rem; bottom: .3rem;
  width: 2px; border-radius: 2px; background: rgba(255,255,255,.10);
}
.nav-sub a, .nav-sub .nav-soon {
  position: relative;
  display: flex; align-items: center; gap: .5rem;
  margin: 1px 0 1px 1.7rem; padding: .38rem .6rem; border-radius: 8px;
  color: #a9b8c9; font-size: .81rem;
}
.nav-sub a::before {
  content: ''; position: absolute; left: -.82rem; top: 50%; margin-top: -2.5px;
  width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.22);
  transition: background .15s, box-shadow .15s;
}
.nav-sub a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.nav-sub a.active { color: #fff; background: var(--sidebar-active); font-weight: 600; }
.nav-sub a.active::before {
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 45%, transparent);
}
/* Henüz hasat edilmemiş alt menü: tıklanamaz, "yakında" etiketli */
.nav-sub .nav-soon { justify-content: space-between; color: rgba(169,184,201,.4); cursor: default; font-size: .78rem; }
.nav-sub .nav-soon em {
  font-style: normal; font-size: .6rem; font-weight: 700; letter-spacing: .03em;
  padding: .05rem .35rem; border-radius: 999px;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.45);
}

/* Hızlı eylem butonları — yumuşak tonlu; üzerine gelince dolu renge döner */
.side-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; padding: .22rem .9rem; }
.side-quick:first-of-type { padding-top: .55rem; }
.qbtn {
  --qc: #64748b;
  aspect-ratio: 1; display: grid; place-items: center; border-radius: 11px;
  text-decoration: none !important;
  color: color-mix(in srgb, var(--qc) 28%, #fff);
  background: color-mix(in srgb, var(--qc) 25%, transparent);
  border: 1px solid color-mix(in srgb, var(--qc) 34%, transparent);
  transition: transform .12s, background .15s, color .15s, box-shadow .15s;
}
.qb-green { --qc: #16a34a; } .qb-blue { --qc: #2563eb; } .qb-orange { --qc: #ea580c; }
.qb-teal { --qc: #0d9488; } .qb-red { --qc: #dc2626; } .qb-cyan { --qc: #0891b2; }
.qb-gray { --qc: #64748b; } .qb-purple { --qc: #7c3aed; }
.qbtn:hover {
  transform: translateY(-2px); background: var(--qc); color: #fff;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--qc) 42%, transparent);
}

/* Alt bilgi */
.side-foot {
  display: flex; flex-direction: column; gap: .5rem; align-items: flex-start;
  padding: .75rem .9rem .95rem; border-top: 1px solid rgba(255,255,255,.08); margin-top: .55rem;
}
/* Kenar çubuğu altı: sürüm rozeti.
   Eski "Çıkış Yap" düğmesinin biçimini KORUR — kullanıcı aynı yerde aynı
   şekli görür, ama artık tıklanacak bir şey değil (çıkış üst barda).
   Bu yüzden `cursor` yok, hover'da yalnız hafifçe aydınlanır. */
.side-ver {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  align-self: stretch; padding: .45rem .6rem; border-radius: 10px;
  color: #93a3b8; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  cursor: default; user-select: text;
  transition: background .15s, color .15s;
}
.side-ver:hover { background: rgba(255,255,255,.07); color: #cfd8e3; }
.side-ver svg { opacity: .6; }
.side-ver b { font-weight: 700; letter-spacing: .01em; }

/* --- Ana bölge + üst bar --- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; align-items: center; gap: 1rem; padding: .6rem 1.2rem;
  background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20;
}
/* Dar ekranda üst bar sıkışınca düğme ezilmesin: ikon kutusu daralmaz */
.hamburger {
  background: none; border: 0; font-size: 1.3rem; cursor: pointer; color: var(--muted);
  flex-shrink: 0; line-height: 0;
}
.hamburger svg { flex-shrink: 0; }

/* Kenar çubuğu kapatma düğmesi — yalnız mobil çekmecede görünür */
.side-close { display: none; }
.topbar-title { display: flex; flex-direction: column; line-height: 1.15; }
.tb-brand { font-weight: 700; font-size: 1rem; }
.tb-sub { font-size: .78rem; color: var(--muted); }
.topbar-search { display: flex; gap: 0; max-width: 420px; flex: 1; }
.topbar-search input { border-radius: 7px 0 0 7px; border-right: 0; }
.topbar-search button { border-radius: 0 7px 7px 0; background: var(--primary); color: #fff; border: 1px solid var(--primary); padding: 0 1.1rem; cursor: pointer; font-weight: 600; font-size: .85rem; }
.topbar-actions { display: flex; align-items: center; gap: .5rem; }
.tb-icon { font-size: 1.1rem; text-decoration: none; }
.tb-add { background: var(--primary); color: #fff; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; text-decoration: none !important; font-size: 1.2rem; }

.content { flex: 1; padding: 1.3rem 1.5rem; max-width: 1700px; width: 100%; }

@media (max-width: 900px) {
  /* Mobilde çekmece: varsayılan gizli, hamburger `is-open` ile açar */
  .sidebar {
    position: fixed; z-index: 40;
    transform: translateX(-102%);
    transition: transform .22s ease;
  }
  .sidebar.is-open { transform: none; box-shadow: var(--sh-lg); }
  .sidebar.collapsed { display: flex; } /* masaüstü gizlemesi mobilde geçersiz */
  .topbar-search { display: none; }

  /* Çekmece üst barın üstüne bindiği için hamburger menü açıkken tıklanamaz
     hâle geliyordu; kapatma düğmesi bu yüzden çekmecenin İÇİNDE.
     `sticky`: menü aşağı kaydırılsa da düğme görünür kalır. */
  .side-close {
    display: grid; place-items: center;
    position: sticky; top: .45rem; z-index: 3;
    align-self: flex-end; margin: .45rem .55rem 0 0;
    /* Kenar çubuğu bir flex sütun: `flex-shrink` serbest kalırsa düğme
       menü uzadıkça dikeyde eziliyor (34px yerine 18px çıkıyordu). */
    flex: 0 0 auto;
    width: 34px; height: 34px; padding: 0;
    border: 0; border-radius: 10px; cursor: pointer;
    background: #dc2626; color: #fff;
    box-shadow: 0 6px 14px rgba(220,38,38,.4);
    transition: background .15s, transform .12s;
  }
  .side-close:hover { background: #b91c1c; }
  .side-close:active { transform: scale(.94); }
  .side-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
}

/* --- Sayfa başlığı --- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.page-head h1 { font-size: 1.45rem; margin: 0; }
.count-badge {
  background: var(--border); border-radius: 999px; font-size: .8rem;
  padding: .15rem .6rem; vertical-align: middle; color: var(--muted);
}

/* --- Kartlar --- */
.card {
  background: var(--card); border-radius: 10px; padding: 1.2rem 1.4rem;
  box-shadow: 0 1px 4px rgba(15, 30, 50, .06); margin-bottom: 1.2rem;
}
.card h2 { font-size: 1.05rem; margin: 0 0 .9rem; border-bottom: 1px solid var(--border); padding-bottom: .5rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 1000px) { .grid-2 { grid-template-columns: 1fr; } }

/* --- İstatistik kartları --- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.stat-card {
  background: var(--card); border-radius: 10px; padding: 1.1rem 1.2rem;
  box-shadow: 0 1px 4px rgba(15, 30, 50, .06);
}
.stat-num { display: block; font-size: 1.9rem; font-weight: 700; color: var(--primary); }
.stat-warn .stat-num { color: var(--warn); }
.stat-label { color: var(--muted); font-size: .85rem; }

/* --- Tablolar --- */
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { padding: .55rem .6rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .02em; }
tr:hover td { background: #f7fafd; }
.actions { white-space: nowrap; text-align: right; }

/* --- Rozetler --- */
.badge { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .77rem; font-weight: 600; }
.badge-green  { background: #eafaf1; color: var(--success); }
.badge-gray   { background: #eef1f5; color: var(--muted); }
.badge-red    { background: #fdecea; color: var(--danger); }
.badge-orange { background: #fdf3e5; color: var(--warn); }
.badge-blue   { background: #e8f2fa; color: var(--primary-dark); }
.badge-purple { background: #f1e8fa; color: #6c3483; }

/* --- Butonlar --- */
.btn {
  display: inline-block; background: #fff; border: 1px solid var(--border);
  color: var(--text); border-radius: 7px; padding: .5rem 1rem; font-size: .9rem;
  cursor: pointer; text-decoration: none !important;
}
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }
.btn-danger { background: #fff; border-color: #f0c0ba; color: var(--danger); }
.btn-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-success { border-color: #bde5c8; color: var(--success); }
.btn-success:hover { background: var(--success); border-color: var(--success); color: #fff; }
.btn-ghost { border-color: transparent; color: var(--muted); }
.btn-sm { padding: .25rem .6rem; font-size: .8rem; }
.btn-xs { padding: .16rem .45rem; font-size: .7rem; border-radius: 7px; }
.btn-block { width: 100%; }
.inline { display: inline; }

/* --- Formlar --- */
label { display: block; margin: .7rem 0 .25rem; font-weight: 600; font-size: .87rem; }
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], select, textarea {
  width: 100%; padding: .5rem .65rem; border: 1px solid #ccd4dd; border-radius: 7px;
  font-size: .92rem; font-family: inherit; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(41, 128, 185, .25); border-color: var(--primary); }
input:disabled { background: #f2f4f7; color: var(--muted); }
fieldset { border: 1px solid var(--border); border-radius: 9px; margin: 0 0 1.1rem; padding: .4rem 1rem 1rem; }
legend { font-weight: 700; font-size: .9rem; padding: 0 .4rem; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
@media (max-width: 800px) { .row-2 { grid-template-columns: 1fr; } }
.form-actions { margin-top: .6rem; display: flex; gap: .6rem; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .25rem .8rem; margin-top: .6rem; }
.check { display: flex; align-items: center; gap: .45rem; font-weight: 500; font-size: .88rem; margin: .15rem 0; }
.check input { width: auto; }

/* --- Filtre çubuğu --- */
.filter-bar { display: flex; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filter-bar input[type=text] { max-width: 340px; }
.filter-bar select { width: auto; }

/* --- Flash mesajlar --- */
.flash { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .92rem; }
.flash-success { background: #eafaf1; border: 1px solid #bde5c8; color: var(--success); }
.flash-error { background: #fdecea; border: 1px solid #f5c6c3; color: var(--danger); }

/* --- Sayfalama --- */
.pagination { margin-top: 1rem; display: flex; gap: .3rem; flex-wrap: wrap; }
.pagination a, .pagination .current {
  padding: .3rem .7rem; border-radius: 6px; border: 1px solid var(--border); font-size: .85rem;
}
.pagination .current { background: var(--primary); border-color: var(--primary); color: #fff; }

/* --- Tanım listeleri --- */
.dl { display: grid; grid-template-columns: 140px 1fr; gap: .35rem .8rem; margin: 0; font-size: .92rem; }
.dl dt { color: var(--muted); font-weight: 600; }
.dl dd { margin: 0; }

.muted { color: var(--muted); }
.small { font-size: .8rem; }

/* Üst bardaki firma logosu (Yönetim Ayarları → Görünüm) */
.topbar-title .tb-logo { max-height: 30px; max-width: 150px; display: block; margin-bottom: .1rem; }

/* ============================================================
   GİRİŞ EKRANI (.lgn) — iki panelli premium düzen
   ============================================================ */
.auth-body { min-height: 100vh; background: var(--bg); }
.lgn { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
@media (max-width: 940px) { .lgn { grid-template-columns: 1fr; } }

/* --- Sol: marka paneli --- */
.lgn-brand {
  position: relative; overflow: hidden; display: grid; place-items: center;
  padding: 2.5rem; color: #e8edf7; background: var(--sidebar-grad);
}
/* Yumuşak ışık lekeleri — düz gradyanı derinleştirir */
.lgn-brand::before, .lgn-brand::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 42%, transparent), transparent 68%);
}
.lgn-brand::before { width: 620px; height: 620px; top: -220px; right: -200px; }
.lgn-brand::after  { width: 480px; height: 480px; bottom: -190px; left: -170px; opacity: .65; }
.lgn-brand-in { position: relative; z-index: 1; max-width: 430px; }

.lgn-logo { margin-bottom: 1.4rem; }
.lgn-logo img { max-width: 230px; max-height: 84px; display: block; }
.lgn-mark {
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px;
  color: #fff; background: var(--accent-grad);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--primary) 45%, transparent);
}
.lgn-brand h1 {
  margin: 0 0 .3rem; font-size: 1.9rem; font-weight: 800;
  letter-spacing: -.025em; color: #fff; line-height: 1.15;
}
.lgn-tag { margin: 0 0 1.9rem; font-size: .93rem; color: rgba(232,237,247,.66); }

.lgn-feats { list-style: none; margin: 0 0 2.2rem; padding: 0; display: grid; gap: .75rem; }
.lgn-feats li {
  display: flex; align-items: center; gap: .7rem;
  font-size: .875rem; color: rgba(232,237,247,.86);
}
.lgn-feats li span {
  display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px;
  border-radius: 11px; color: #fff;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.13);
}
.lgn-foot {
  display: flex; align-items: flex-start; gap: .4rem; margin: 0;
  font-size: .76rem; line-height: 1.5; color: rgba(232,237,247,.46);
}
.lgn-foot svg { flex-shrink: 0; margin-top: .18rem; }

/* --- Sağ: form paneli --- */
.lgn-panel {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.1rem; padding: 2.5rem 1.5rem;
}
/* Giriş ekranındaki tema anahtarı: biçim `.tb-theme`den gelir (üst bardaki
   düğmenin ta kendisi), buradaki tek iş KONUMLANDIRMA.
   İKİ SINIF birden yazılıyor (`.tb-theme.lgn-theme`) çünkü `.tb-theme`
   dosyada BU KURALDAN SONRA geliyor ve `position: relative` diyor; tek
   sınıfla yazılsaydı eşit ağırlıkta olur, sonraki kazanır ve düğme
   köşeye değil kartın üstüne, akışın içine düşerdi. */
.tb-theme.lgn-theme { position: absolute; top: 1.2rem; right: 1.2rem; margin: 0; }

.lgn-card {
  width: 100%; max-width: 400px; padding: 2rem 2.1rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 20px; box-shadow: var(--sh-lg);
}
.lgn-head { margin-bottom: 1.5rem; }
.lgn-head h2 { margin: 0 0 .3rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.lgn-head p { margin: 0; font-size: .855rem; color: var(--muted); }

.lgn-alert {
  display: flex; align-items: flex-start; gap: .55rem;
  margin-bottom: 1.1rem; padding: .7rem .8rem; border-radius: 12px;
  font-size: .83rem; line-height: 1.45;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
}
.lgn-alert svg { flex-shrink: 0; margin-top: .05rem; }

/* Bilgi şeridi — hareketsizlik kapanışı gibi "hata değil, açıklama"
   durumları. Kırmızı olsaydı kullanıcı yanlış bir şey yaptığını sanırdı. */
.lgn-alert.is-info {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
}

.lgn-field { margin-bottom: 1.05rem; }
.lgn-field > label {
  display: block; margin: 0 0 .38rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .01em; color: var(--muted);
}
.lgn-input { position: relative; display: block; }
.lgn-input > i {
  position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; color: var(--muted); pointer-events: none; transition: color .15s;
}
.lgn-input input {
  width: 100%; padding: .78rem .8rem .78rem 2.6rem;
  font-size: .92rem; font-family: inherit; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.lgn-input input::placeholder { color: color-mix(in srgb, var(--muted) 65%, transparent); }
.lgn-input input:focus {
  outline: 0; background: var(--card); border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent);
}
.lgn-input:focus-within > i { color: var(--primary); }
#password { padding-right: 2.9rem; }

.lgn-eye {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: 9px; cursor: pointer;
  background: none; color: var(--muted); transition: background .15s, color .15s;
}
.lgn-eye:hover { background: var(--surface-3); color: var(--text); }
.lgn-eye .eye-off { display: none; }
.lgn-eye.is-on { color: var(--primary); }
.lgn-eye.is-on .eye-on { display: none; }
.lgn-eye.is-on .eye-off { display: grid; }

.lgn-caps {
  display: inline-flex; align-items: center; gap: .3rem; margin-top: .4rem;
  font-size: .74rem; font-weight: 600; color: var(--warn);
}

/* Güvenlik sorusu (aritmetik doğrulama).
   Soru kendi kutusunda, yanıt alanı yanında: soru metninin uzunluğu
   ("yedi + 3 = ?" / "8 − dört = ?") değiştiği için sabit iç boşlukla
   giriş alanının içine yerleştirilemez. */
.lgn-cap-row { display: flex; align-items: stretch; gap: .55rem; }
.lgn-cap-q {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
  padding: 0 .85rem; border-radius: 12px; white-space: nowrap;
  background: var(--surface-3); border: 1px solid var(--border);
  font-size: .95rem; font-weight: 800; letter-spacing: .05em; color: var(--text);
}
.lgn-cap-q svg { color: var(--primary); flex-shrink: 0; }
.lgn-cap-row input { padding-left: .85rem; text-align: center; letter-spacing: .08em; }
.lgn-hint {
  display: block; margin-top: .4rem;
  font-size: .73rem; line-height: 1.45; color: var(--muted);
}

.lgn-submit {
  position: relative; width: 100%; margin-top: .3rem; padding: .82rem 1rem;
  font: inherit; font-size: .92rem; font-weight: 700; color: #fff;
  border: 0; border-radius: 12px; cursor: pointer;
  background: var(--brand-grad);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 34%, transparent);
  transition: transform .12s, box-shadow .16s, filter .15s;
}
.lgn-submit:hover { transform: translateY(-1px); filter: brightness(1.06); }
.lgn-submit:active { transform: translateY(0); }
.lgn-submit:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.lgn-submit-t { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.lgn-spin {
  position: absolute; inset: 0; margin: auto; width: 19px; height: 19px; display: none;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%;
  animation: lgnSpin .7s linear infinite;
}
@keyframes lgnSpin { to { transform: rotate(360deg); } }
.lgn-submit.is-busy { cursor: progress; }
.lgn-submit.is-busy .lgn-submit-t { visibility: hidden; }
.lgn-submit.is-busy .lgn-spin { display: block; }

.lgn-help {
  display: flex; align-items: flex-start; gap: .4rem;
  margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--border);
  font-size: .78rem; line-height: 1.5; color: var(--muted);
}
.lgn-help svg { flex-shrink: 0; margin-top: .15rem; }

.lgn-copy {
  margin: 0; text-align: center; font-size: .74rem; color: var(--muted);
  display: flex; flex-direction: column; gap: .12rem;
}
.lgn-copy span { opacity: .6; }

/* Boş alan gönderiminde kısa bir sarsıntı — hatayı fark ettirir */
.is-shake { animation: lgnShake .4s ease; }
@keyframes lgnShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .is-shake { animation: none; }
  .lgn-submit:hover { transform: none; }
}

/* --- Dar ekran: marka paneli üstte ince şerit --- */
@media (max-width: 940px) {
  .lgn-brand { padding: 1.9rem 1.5rem; }
  .lgn-brand-in { max-width: none; text-align: center; }
  .lgn-logo { margin: 0 auto .9rem; display: flex; justify-content: center; }
  .lgn-brand h1 { font-size: 1.5rem; }
  .lgn-tag { margin-bottom: 0; }
  .lgn-feats, .lgn-foot { display: none; }
  .lgn-panel { padding: 2rem 1.2rem 2.5rem; }
  .lgn-theme { top: .8rem; right: .8rem; }
}
@media (max-width: 460px) {
  .lgn-card { padding: 1.5rem 1.25rem; border-radius: 16px; }
}

/* ============================================================
   DASHBOARD (patron paneli)
   ============================================================ */
.dash-row { display: grid; gap: 1rem; margin-bottom: 1rem; }
.dash-top { grid-template-columns: 1.15fr 1.15fr 1fr 1fr; }
.dash-bottom { grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 1300px) { .dash-top { grid-template-columns: 1fr 1fr; } .dash-bottom { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .dash-top { grid-template-columns: 1fr; } }

.dash-card { background: #fff; border-radius: 12px; padding: 1rem 1.1rem; box-shadow: 0 1px 5px rgba(15,30,50,.07); }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.card-head h3 { font-size: .95rem; margin: 0; color: #2c3e50; }
.head-note { font-size: .75rem; color: var(--muted); background: #f1f5f9; padding: .1rem .5rem; border-radius: 999px; }

/* Stat blokları */
.stat-row { display: flex; align-items: center; gap: .7rem; }
.stat-ico { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; }
.ico-blue { background: #e0edfb; } .ico-green { background: #e3f6ec; } .ico-dark { background: #e2e8f0; }
.ico-purple { background: #efe6fb; }
.stat-big { font-size: 1.55rem; font-weight: 700; color: #1f2d3d; line-height: 1.1; }
.stat-cap { font-size: .82rem; color: var(--muted); }
.stat-notes { margin-top: .6rem; display: flex; flex-direction: column; gap: .15rem; font-size: .8rem; }
.note-pos { color: #16a34a; } .note-neg { color: #dc2626; } .note-info { color: #0288d1; }
.note-rate { color: #16a34a; font-weight: 600; }

.combo-card { display: flex; flex-direction: column; }
.combo-divider { height: 1px; background: var(--border); margin: .8rem 0; }

/* Üretim/hedef kart */
.prod-card .target-block { margin: .9rem 0; }
.target-line { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: .25rem; color: #42526b; }
.target-line b { color: var(--primary); }
.progress { height: 7px; background: #eef2f7; border-radius: 999px; overflow: hidden; margin-bottom: .25rem; }
.progress span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.progress span.bar-green { background: #16a34a; }
.target-sub { font-size: .74rem; color: var(--muted); margin-bottom: .7rem; }
.prod-total { display: flex; gap: .7rem; align-items: flex-start; border-top: 1px solid var(--border); padding-top: .8rem; }

/* Donut + legend */
.donut-wrap { position: relative; height: 210px; }
.donut-wrap canvas { width: 100%; height: 100%; }
.hbar-wrap canvas { width: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: .3rem .6rem; margin-top: .7rem; }
.legend-chip { font-size: .75rem; color: #42526b; display: inline-flex; align-items: center; gap: .3rem; }
.legend-chip i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend-chip b { color: #1f2d3d; }

/* Sağ widget ızgarası */
.widget-grid-card { padding: .7rem; }
.wgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.wtile { border-radius: 9px; padding: .6rem .7rem; color: #fff; text-decoration: none !important; display: flex; flex-direction: column; justify-content: center; min-height: 46px; }
.wtile:hover { opacity: .9; }
.wtile.wt-wide { grid-column: span 2; }
.wt-num { font-size: 1.2rem; font-weight: 700; line-height: 1; }
.wt-lbl { font-size: .72rem; opacity: .95; margin-top: .1rem; }
.wt-green { background: #16a34a; } .wt-teal { background: #0d9488; } .wt-cyan { background: #0891b2; }
.wt-slate { background: #64748b; } .wt-orange { background: #ea580c; } .wt-blue { background: #2563eb; }
.wt-indigo { background: #4f46e5; } .wt-emerald { background: #059669; } .wt-amber { background: #d97706; }

/* Ekip tablosu */
.team-period { font-size: .82rem; color: var(--muted); margin-bottom: .5rem; padding: .3rem .6rem; background: #f8fafc; border-radius: 6px; display: inline-block; }
.table-scroll { overflow-x: auto; }
.team-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.team-table th, .team-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--border); text-align: left; }
.team-table th { font-size: .72rem; color: var(--muted); font-weight: 600; }
.team-table th small { font-weight: 400; }
.team-table .num { text-align: right; white-space: nowrap; }
.team-table tfoot td { background: #f0f6fc; font-weight: 600; border-top: 2px solid #d6e4f0; }
.team-table .pct { font-size: .72rem; color: var(--muted); }
.team-table .pct.pos { color: #16a34a; }
.team-table .neg { color: #dc2626; }
.mini-tag { background: #f1e8fa; color: #6c3483; font-size: .68rem; padding: .05rem .35rem; border-radius: 4px; }

.center { text-align: center; } .muted { color: var(--muted); }

/* ============================================================
   MUSTERI YONETIMI paneli (WP hasadi)
   ============================================================ */

/* Baslik + arac cubugu */
.cust-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cust-toolbar h1 { font-size: 1.3rem; margin: 0; }
.toolbar-btns { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.view-toggle { display: inline-flex; background: #eef1f5; border-radius: 8px; padding: 2px; }
.view-toggle .vt { padding: .35rem .7rem; border-radius: 6px; font-size: .82rem; color: var(--muted); text-decoration: none !important; }
.view-toggle .vt.on { background: #ede9fe; color: #6d28d9; font-weight: 600; }
.tb-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .5rem .85rem; border-radius: 8px; font-size: .84rem; font-weight: 500; border: 0; cursor: pointer; text-decoration: none !important; white-space: nowrap; }
.tb-blue { background: #2563eb; color: #fff; } .tb-orange { background: #ea7317; color: #fff; }
.tb-white { background: #fff; color: #16a34a; border: 1px solid #bbf7d0; } .tb-primary { background: #2980b9; color: #fff; }
.tb-btn:hover { opacity: .9; }
.fbadge { background: rgba(255,255,255,.3); border-radius: 999px; padding: 0 .4rem; font-size: .72rem; }

/* Istatistik kartlari */
.cust-stats { display: grid; grid-template-columns: repeat(4, 1fr) 1.4fr; gap: .8rem; margin-bottom: 1rem; }
@media (max-width: 1200px) { .cust-stats { grid-template-columns: 1fr 1fr; } }
.cstat { background: #fff; border-radius: 10px; padding: .8rem 1rem; box-shadow: 0 1px 4px rgba(15,30,50,.06); display: flex; align-items: center; gap: .7rem; border-left: 4px solid #ccc; }
.cs-ico { font-size: 1.5rem; }
.cs-num { font-size: 1.4rem; font-weight: 700; color: #1f2d3d; line-height: 1; }
.cs-num small { font-size: .8rem; color: var(--muted); font-weight: 600; }
.cs-lbl { font-size: .78rem; color: var(--muted); }
.cs-primary { border-left-color: #2980b9; } .cs-success { border-left-color: #16a34a; }
.cs-info { border-left-color: #0891b2; } .cs-warning { border-left-color: #d97706; }
.cs-trend { display: block; } .cs-trend canvas { width: 100%; height: 52px; }

/* Hizli filtre cubugu */
.quick-bar { display: flex; align-items: flex-end; gap: .8rem; background: #f8fafc; border: 1px solid var(--border); border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.quick-bar .qf { display: flex; flex-direction: column; gap: .2rem; }
.quick-bar .qf.qf-grow { flex: 1; min-width: 220px; }
.quick-bar label { font-size: .76rem; color: var(--muted); margin: 0; font-weight: 500; }
.quick-bar input { padding: .45rem .6rem; }

/* Gelismis filtre paneli */
.adv-filter.hidden { display: none; }
.adv-filter { margin-bottom: 1rem; }
.adv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem 1rem; }
@media (max-width: 1100px) { .adv-grid { grid-template-columns: repeat(2, 1fr); } }
.adv-grid label { font-size: .76rem; color: #42526b; margin: 0 0 .2rem; font-weight: 600; display: block; }
.adv-grid input, .adv-grid select { padding: .45rem .6rem; font-size: .86rem; }
.adv-hl { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: .5rem; }
.adv-special { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: .8rem; }
.adv-special strong { font-size: .85rem; }
.special-checks { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: .6rem; }
.adv-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }

/* Liste karti */
.cust-list { padding: 0; overflow: hidden; }
.list-head { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; background: #fafbfd; border-bottom: 1px solid var(--border); }
.scope-pill { background: #ede9fe; color: #6d28d9; padding: .25rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.list-head-right { display: flex; align-items: center; gap: 1rem; font-size: .82rem; }
.pp-form { display: flex; align-items: center; gap: .4rem; }
.pp-form label { margin: 0; font-size: .8rem; color: var(--muted); }
.pp-form select { width: auto; padding: .3rem .5rem; }

/* Zengin tablo */
.cust-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.cust-table th { padding: .7rem .8rem; background: #f7f9fc; border-bottom: 2px solid var(--border); text-align: left; font-size: .72rem; color: #64748b; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.cust-table th a { color: #64748b; text-decoration: none; }
.cust-table td { padding: .8rem; border-bottom: 1px solid #eef1f5; vertical-align: top; }
.cust-table tbody tr:hover td { background: #f9fbfe; }
.cust-table tr.st-pasif { opacity: .55; }
.cust-table tr.note-positive .name-cell { box-shadow: inset 4px 0 0 #16a34a; }
.cust-table tr.note-negative .name-cell { box-shadow: inset 4px 0 0 #dc2626; }
.cust-table tr.note-neutral .name-cell { box-shadow: inset 4px 0 0 #d97706; }
.nowrap { white-space: nowrap; }

/* Kolon-alti anlik filtre satiri */
.filter-row td { padding: .35rem .5rem; background: #fff; border-bottom: 2px solid var(--border); }
.filter-row input { width: 100%; padding: .35rem .5rem; font-size: .8rem; border: 1px solid #dde3ea; border-radius: 6px; }

/* Isim hucresi */
.name-cell { min-width: 250px; }
.name-cell > a { font-size: .95rem; }
.name-badges { display: flex; flex-wrap: wrap; gap: .25rem; margin: .3rem 0; }
.name-sub { font-size: .8rem; color: #475569; }
.ns-tc { font-weight: 600; }
.name-phone { font-size: .82rem; color: #475569; margin-top: .2rem; display: flex; align-items: center; gap: .4rem; }
.name-email { font-size: .8rem; color: var(--muted); margin-top: .15rem; }
.wa-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; background: #25d366; color: #fff !important; border-radius: 50%; font-size: .8rem; text-decoration: none !important; }
.tag { font-size: .66rem; padding: .1rem .45rem; border-radius: 4px; font-weight: 700; }
.tag-primary { background: #e8f2fa; color: #21618c; } .tag-amber { background: #fef3c7; color: #b45309; }
.tag-pink { background: #fce7f3; color: #be185d; } .tag-cyan { background: #cffafe; color: #0e7490; }
.tag-teal { background: #ccfbf1; color: #0f766e; }

/* Temsilci pill */
.rep-pill { display: inline-block; padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }

/* Varlik ikonlari */
.assets { white-space: nowrap; font-size: 1rem; }
.asset { margin: 0 .1rem; } .asset b { font-size: .72rem; vertical-align: super; }

/* Durum */
.status-dot { font-size: .84rem; font-weight: 600; }
.status-dot.status-aktif { color: #16a34a; } .status-dot.status-pasif { color: #94a3b8; }
.status-dot.status-belirsiz { color: #d97706; }
.camp-badge { display: inline-block; margin-top: .35rem; font-size: .68rem; background: #dcfce7; color: #15803d; padding: .12rem .45rem; border-radius: 4px; font-weight: 600; }

/* Islem butonlari */
.actions .act, .actions .inline { display: inline-block; }
.act { width: 30px; height: 30px; border-radius: 6px; display: inline-grid; place-items: center; margin: 0 1px; font-size: .85rem; border: 0; cursor: pointer; text-decoration: none !important; }
.act-view { background: #e0edfb; color: #2563eb; } .act-edit { background: #fef3c7; color: #d97706; }
.act-policy { background: #dcfce7; color: #16a34a; } .act-pass { background: #fee2e2; color: #dc2626; }
.act:hover { filter: brightness(.95); }
.small { font-size: .78rem; }

/* ============================================================
   MUSTERI DETAY sayfasi (WP hasadi 92-1/92-2)
   ============================================================ */
.cd-header { background: #fff; border-radius: 12px; padding: 1.2rem 1.4rem; box-shadow: 0 1px 5px rgba(15,30,50,.07); margin-bottom: 1rem; }
.cd-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cd-header h1 { font-size: 1.4rem; margin: 0 0 .4rem; }
.cd-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .84rem; color: var(--muted); }
.cd-meta strong { color: #334155; }
.cd-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.cda { display: inline-flex; align-items: center; gap: .3rem; padding: .5rem .8rem; border-radius: 8px; font-size: .82rem; font-weight: 500; color: #fff !important; text-decoration: none !important; }
.cda-blue { background: #2563eb; } .cda-slate { background: #475569; } .cda-green { background: #16a34a; }
.cda-wa { background: #25d366; } .cda-back { background: #e2e8f0; color: #475569 !important; }
.cda:hover { opacity: .9; }

/* Renkli sekmeler */
.cd-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1rem; }
.cd-tab { display: inline-flex; align-items: center; gap: .35rem; padding: .7rem 1.1rem; border: 0; border-radius: 10px 10px 0 0; background: #eef1f5; color: #64748b; font-size: .86rem; font-weight: 600; cursor: pointer; }
.cd-tab.on { background: var(--tc); color: #fff; }
.cd-tab:hover:not(.on) { background: #e2e8f0; }

/* Panel + kart izgarasi */
.cd-panel { display: none; }
.cd-panel.on { display: block; }
/* `align-items: start` — kartlar satırın en uzun kartı kadar GERİLMESİN.
   Eskiden `.cdc-body { flex: 1 }` kısa kartı satır yüksekliğine kadar
   uzatıyordu: poliçe kartında dört satırlık "Poliçe Detayları" kutusunun
   altında avuç içi kadar beyaz boşluk kalıyordu. */
.cd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1300px) { .cd-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .cd-grid { grid-template-columns: 1fr; } }
.cd-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 5px rgba(15,30,50,.07); overflow: hidden; display: flex; flex-direction: column; }
.cd-card-wide { grid-column: span 2; }
@media (max-width: 700px) { .cd-card-wide { grid-column: span 1; } }
.cdc-head { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
.cdc-head h3 { font-size: .9rem; margin: 0; color: #334155; }
.cdc-badge { font-size: .72rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; color: #fff; }
.b-green { background: #16a34a; } .b-red { background: #ef4444; } .b-blue { background: #2563eb; } .b-orange { background: #ea7317; }
.cdc-body { padding: 1rem; flex: 1; }

/* Musteri bilgileri karti */
.cust-avatar { width: 54px; height: 54px; border-radius: 50%; background: #e0edfb; color: #2563eb; display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; margin: 0 auto .6rem; }
.cust-id { text-align: center; margin-bottom: .8rem; }
.cd-dl { display: grid; grid-template-columns: 24px 1fr; gap: .4rem .5rem; margin: 0; font-size: .85rem; }
.cd-dl dt { text-align: center; } .cd-dl dd { margin: 0; color: #334155; }

/* Mini satirlar */
.mini-row { padding: .45rem 0; border-bottom: 1px solid #f1f5f9; font-size: .85rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.mini-row:last-child { border-bottom: 0; }
.mini-row.link { text-decoration: none; color: inherit; }
.mini-row.link:hover { background: #f8fafc; }
.mini-row .badge { margin-left: auto; }

/* Bos durum */
.empty-card { text-align: center; padding: 1.2rem .5rem; }
.empty-ico { font-size: 2rem; opacity: .35; margin-bottom: .4rem; }
.empty-card p { margin: .3rem 0 .7rem; font-size: .82rem; }

/* Yapiskan notlar */
.sticky-notes { display: flex; flex-wrap: wrap; gap: .8rem; }
.sticky { background: #fef9c3; border-radius: 6px; padding: .7rem; width: 210px; box-shadow: 1px 2px 5px rgba(0,0,0,.1); font-size: .8rem; }
.sticky-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: .78rem; }
.sticky-badge { color: #fff; font-size: .62rem; padding: .1rem .4rem; border-radius: 4px; }
.sticky-date { color: #a16207; font-size: .7rem; margin: .2rem 0 .4rem; }
.sticky-body { color: #422006; white-space: pre-wrap; }

.done-pill { display: inline-block; background: #dcfce7; color: #15803d; font-size: .74rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; margin-bottom: .5rem; }
.note-text { font-size: .85rem; color: #334155; margin: 0; white-space: pre-wrap; }

/* ============================================================
   MUSTERI FORMU (WP customers-form.php hasadi)
   ============================================================ */
/* Ortalanmis, genis, responsive premium form kabi */
.cf-page { max-width: 1340px; margin-inline: auto; width: 100%; }
.cf-form { max-width: none; width: 100%; }
.info-card { background: #fff; border-radius: 14px; box-shadow: 0 1px 5px rgba(15,30,50,.07); border: 1px solid #eef2f7; margin-bottom: 1.1rem; overflow: hidden; transition: box-shadow .18s ease, transform .18s ease; }
.info-card:hover { box-shadow: 0 8px 26px rgba(15,30,50,.09); }

/* Kompakt 2-kolon masonry: kartlar yuksekliklerine gore siksir, form kisalir */
.cf-cards, .policy-grid { column-count: 2; column-gap: 1.1rem; }
.cf-cards > .info-card, .policy-grid > .info-card { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 1.1rem; }
.cf-cards > .cf-span-full, .cf-cards > .cf-span2, .policy-grid > .cf-span2, .policy-grid > .cf-span-full { column-span: all; -webkit-column-span: all; }
@media (max-width: 1024px) { .cf-cards, .policy-grid { column-count: 1; } }
.ic-head { display: flex; align-items: center; gap: .55rem; padding: .65rem 1.05rem; background: #f8fafc; border-bottom: 1px solid var(--border); }
.ic-head h3 { margin: 0; font-size: .95rem; color: #2c3e50; flex: 1; }
.ic-ico { font-size: 1.2rem; }
.ic-body { padding: .95rem 1.05rem; }
.cf-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 800px) { .cf-2col { grid-template-columns: 1fr; } }
.asset-col { }

/* Sabit kolonlu, hizalı grid (WP form-row tarzı) — masonry kart 2 kolon,
   tam genişlik kart 3 kolon; her satır aynı tracklere hizalanır, yetim boşluk olmaz. */
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.15rem; }
.cf-span-full > .ic-body > .cf-grid,
.cf-span2 > .ic-body > .cf-grid { grid-template-columns: repeat(3, 1fr); }
/* Tek alanlı grid tüm satırı kaplasın (yetim alan + sağ boşluk olmasın) */
.cf-grid > .cf-field:only-child { grid-column: 1 / -1; }
.cf-field.cf-wide { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .cf-grid,
  .cf-span-full > .ic-body > .cf-grid,
  .cf-span2 > .ic-body > .cf-grid { grid-template-columns: 1fr; }
}
.cf-field { display: flex; flex-direction: column; }
.cf-field.cf-wide { grid-column: 1 / -1; }
.cf-field label { font-size: .78rem; color: #42526b; margin-bottom: .25rem; font-weight: 600; }
.cf-field input, .cf-field select, .cf-field textarea { padding: .5rem .65rem; font-size: .9rem; }
.field-err { color: #dc2626; font-size: .74rem; margin-top: .2rem; min-height: .9rem; }

.sub-block { margin-top: 1rem; padding: .9rem 1rem; background: #f8fafc; border-radius: 9px; border: 1px solid #eef1f5; }
.sub-block h4 { margin: 0 0 .7rem; font-size: .9rem; color: #334155; }
.sub-block.spouse { background: #fdf2f8; border-color: #fce7f3; }

.switch-lbl { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; cursor: pointer; margin: 0; }
.switch-lbl.sm { font-size: .82rem; font-weight: 500; margin-top: .5rem; }
.switch-lbl input { width: auto; }

.counter-row { display: flex; align-items: center; gap: 1rem; margin: .8rem 0; }
.counter-row label { font-size: .85rem; font-weight: 600; margin: 0; }
.counter { display: inline-flex; align-items: center; border: 1px solid #ccd4dd; border-radius: 8px; overflow: hidden; }
.counter button { width: 34px; height: 34px; border: 0; background: #eef1f5; font-size: 1.1rem; cursor: pointer; color: #475569; }
.counter button:hover { background: #dde3ea; }
.cnt-input { width: 52px; text-align: center; border: 0; border-left: 1px solid #ccd4dd; border-right: 1px solid #ccd4dd; padding: .4rem 0; font-weight: 600; }

.card-repeater { display: flex; flex-direction: column; gap: .8rem; margin-top: .5rem; }
.rep-card { background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: .8rem 1rem; }
.rep-card-head { font-size: .82rem; font-weight: 700; color: #64748b; margin-bottom: .6rem; display: flex; justify-content: space-between; align-items: center; }
.rep-remove { background: #fee2e2; color: #dc2626; border: 0; border-radius: 6px; width: 26px; height: 26px; cursor: pointer; }

/* Yapiskan premium kaydet cubugu */
.cf-actions { position: sticky; bottom: 0; z-index: 20; display: flex; justify-content: flex-end; align-items: center; gap: .8rem; margin: 1.4rem 0 1.2rem; padding: .9rem 1.3rem; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid #e6ebf2; border-radius: 14px; box-shadow: 0 -6px 22px rgba(15,30,50,.08); }
.cf-actions .cf-hint { margin-right: auto; font-size: .82rem; color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; }
.cf-hint .req-star { color: #dc2626; font-weight: 700; }
.page-head h1 { display: inline-flex; align-items: center; gap: .55rem; }
.page-head h1 svg { color: var(--primary); flex-shrink: 0; }
.cf-actions .btn svg { vertical-align: -3px; }

/* Poliçe paneli ek stiller */
.cs-danger { border-left-color: #dc2626; } .cs-dark { border-left-color: #334155; }
.pay-badge { display: inline-block; padding: .15rem .5rem; border-radius: 6px; font-size: .74rem; font-weight: 600; }
.pay-paid { background: #dcfce7; color: #15803d; } .pay-part { background: #dbeafe; color: #1e40af; } .pay-unpaid { background: #fee2e2; color: #b91c1c; }
.cust-table tr.row-expiring td { background: #fffbeb; }
.cust-table tr.row-expiring:hover td { background: #fef3c7; }

/* Poliçe formu — .policy-grid masonry kurallari yukarida tanimli */
.cust-summary { display: flex; align-items: center; gap: .8rem; }
.cust-avatar-sm { width: 44px; height: 44px; border-radius: 50%; background: #e0edfb; color: #2563eb; display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; flex-shrink: 0; }
.insured-list { display: flex; flex-direction: column; gap: .3rem; }
.insured-list .check { font-weight: 500; }
.vehicle-radios { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: .4rem 0 .8rem; }
.cancel-card .ic-head { border-bottom-color: #fecaca; }

/* Poliçe detay ek stiller */
.cd-dl2 { display: grid; grid-template-columns: 130px 1fr 130px 1fr; gap: .5rem .8rem; margin: 0; font-size: .88rem; }
@media (max-width: 700px) { .cd-dl2 { grid-template-columns: 120px 1fr; } }
.cd-dl2 dt { color: var(--muted); font-weight: 600; } .cd-dl2 dd { margin: 0; color: #334155; }
.price-row { display: flex; justify-content: space-between; padding: .35rem 0; border-bottom: 1px solid #f1f5f9; font-size: .9rem; }
.price-row:last-child { border-bottom: 0; }
.mini-list { display: flex; flex-direction: column; }

/* ============================================================
   PREMIUM POLISH KATMANI (WP tasarım dili hasadı)
   ============================================================ */

/* --- Kenar çubuğu ---
   Premium stiller artık taban blokta (dosyanın başı); burada yalnız gölge. */
.sidebar { box-shadow: var(--sh-lg); }

/* --- Üst bar --- */
.topbar { box-shadow: var(--sh-sm); border-bottom: 0; padding: .7rem 1.4rem; }
.tb-brand { letter-spacing: -.01em; }
.topbar-search input { border-radius: 10px 0 0 10px; background: #f8fafc; border-color: #e6eaf1; }
.topbar-search button { border-radius: 0 10px 10px 0; background: var(--brand-grad); border: 0; }
.tb-add { background: var(--brand-grad); box-shadow: 0 4px 12px rgba(79,70,229,.4); transition: transform .12s; }
.tb-add:hover { transform: translateY(-1px); }
.tb-icon { width: 38px; height: 38px; border-radius: 10px; display: inline-grid; place-items: center; color: var(--muted); background: #f8fafc; }
.tb-icon:hover { background: var(--primary-light); color: var(--primary); }

/* --- Kartlar --- */
.card, .dash-card, .cstat, .cd-card, .info-card, .cd-header {
  border-radius: var(--radius); box-shadow: var(--sh-md); border: 1px solid var(--border);
}
.dash-card, .cd-card, .info-card { transition: box-shadow .18s, transform .18s; }
.card h2, .cdc-head h3, .card-head h3, .ic-head h3 { letter-spacing: -.01em; }
.cdc-head, .ic-head, .list-head { background: #fbfcfe; }

/* Kart başlık ikonları — yuvarlak gradyan rozet */
.ic-ico, .cs-ico, .stat-ico {
  display: inline-grid; place-items: center; border-radius: 11px;
  width: 42px; height: 42px; color: #fff;
}
.ic-ico { background: var(--accent-grad); box-shadow: 0 3px 10px rgba(102,126,234,.35); }

/* --- İstatistik kartları --- */
.cstat { border-left: 0; position: relative; overflow: hidden; }
.cstat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.cstat.cs-primary::before { background: var(--primary); }
.cstat.cs-success::before { background: var(--success); }
.cstat.cs-info::before { background: var(--info); }
.cstat.cs-warning::before { background: var(--warn); }
.cstat.cs-danger::before { background: var(--danger); }
.cstat.cs-dark::before { background: #475569; }
.cs-ico { background: var(--primary-light); color: var(--primary); }
.cs-success .cs-ico { background: #dcfce7; color: var(--success); }
.cs-info .cs-ico { background: #cffafe; color: var(--info); }
.cs-warning .cs-ico { background: #fef3c7; color: var(--warn); }
.cs-danger .cs-ico { background: #fee2e2; color: var(--danger); }
.cs-dark .cs-ico { background: #e2e8f0; color: #475569; }
.stat-ico { background: var(--primary-light); }

/* Dashboard üst istatistik ikonlar */
.stat-big, .cs-num, .stat-num { letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* --- Butonlar --- */
.btn { border-radius: 10px; font-weight: 500; box-shadow: var(--sh-sm); transition: transform .1s, box-shadow .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--brand-grad); border: 0; box-shadow: 0 4px 12px rgba(79,70,229,.35); }
.btn-primary:hover { background: var(--brand-grad); box-shadow: 0 6px 18px rgba(79,70,229,.45); }
.tb-btn { border-radius: 10px; box-shadow: var(--sh-sm); transition: transform .1s; }
.tb-btn:hover { transform: translateY(-1px); }
.tb-primary { background: var(--brand-grad); }
.tb-blue { background: linear-gradient(135deg, #2563eb, #4f46e5); }
.cda { border-radius: 10px; box-shadow: var(--sh-sm); }
.cda-blue { background: var(--brand-grad); }

/* --- Rozetler & pill --- */
.badge, .tag, .pay-badge, .status-dot, .rep-pill, .cdc-badge { font-weight: 600; letter-spacing: .01em; }
.rep-pill { box-shadow: var(--sh-sm); }
.count-badge { background: var(--primary-light); color: var(--primary); font-weight: 600; }

/* --- Tablolar --- */
.cust-table th, .team-table th, table th { background: #f8fafc; color: #64748b; font-weight: 600; }
.cust-table td, table td { border-color: #eef2f7; }
.cust-table tbody tr, table tbody tr { transition: background .12s; }

/* --- Form alanları (global taban) --- */
input, select, textarea { border-radius: 10px; border-color: #e2e8f2; transition: border-color .15s, box-shadow .15s, background-color .15s; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.13); outline: 0; }

/* ============================================================
   PREMIUM FORM KONTROLLERİ (.cf-field + kart içi alanlar)
   Yumuşak dolgu → focus'ta beyaz + indigo halka; özel select oku.
   ============================================================ */
.cf-field label { font-size: .75rem; font-weight: 600; color: #55617a; letter-spacing: .01em; margin-bottom: .34rem; }
.cf-field { position: relative; }
.cf-field:focus-within > label { color: var(--primary); }

.cf-field input:not([type=checkbox]):not([type=radio]),
.cf-field select, .cf-field textarea,
.ic-body > textarea {
  width: 100%;
  padding: .62rem .8rem;
  font-size: .9rem; line-height: 1.35;
  color: #1e293b;
  background-color: #f7f9fc;
  border: 1.5px solid #e7ecf3;
  border-radius: 11px;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
  -webkit-appearance: none; appearance: none;
}
.cf-field textarea, .ic-body > textarea { line-height: 1.5; padding: .68rem .8rem; }

.cf-field input:not([type=checkbox]):not([type=radio]):hover,
.cf-field select:hover, .cf-field textarea:hover, .ic-body > textarea:hover {
  border-color: #cfd8e6; background-color: #fff;
}
.cf-field input:not([type=checkbox]):not([type=radio]):focus,
.cf-field select:focus, .cf-field textarea:focus, .ic-body > textarea:focus {
  background-color: #fff; border-color: var(--primary);
  box-shadow: 0 0 0 3.5px rgba(79,70,229,.14); outline: 0;
}
.cf-field input::placeholder, .cf-field textarea::placeholder, .ic-body > textarea::placeholder { color: #aeb8c6; }
.cf-field input:disabled, .cf-field select:disabled { background-color: #eef1f6; color: #8b97a7; cursor: not-allowed; }

/* Özel select oku — native ok yerine premium chevron */
.cf-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center;
  padding-right: 2.35rem; cursor: pointer;
}
.cf-field input[type=date]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }

/* (Giriş ekranının premium katmanı `.lgn` bloğuna taşındı) */

/* --- Widget ızgarası (dashboard sağ) --- */
.wtile { border-radius: 12px; box-shadow: var(--sh-sm); transition: transform .12s; }
.wtile:hover { transform: translateY(-2px); opacity: 1; }

/* --- Sekmeler (detay) --- */
.cd-tab { border-radius: 12px 12px 0 0; }
.cd-tab.on { box-shadow: 0 -2px 10px rgba(0,0,0,.08); }

/* İkon-metin hizalama (menü/başlık) */
.ic-ico svg, .cs-ico svg, .stat-ico svg { width: 22px; height: 22px; }
h1 svg, h3 svg { vertical-align: -3px; }

/* ============================================================
   ETKİLEŞİM & ANİMASYON KATMANI (kurumsal + premium)
   ============================================================ */

/* --- Grafik tooltip --- */
.chart-tooltip {
  position: fixed; z-index: 9999; display: none; pointer-events: none;
  background: #0f172a; color: #fff; padding: .5rem .7rem; border-radius: 9px;
  font-size: .78rem; line-height: 1.4; box-shadow: 0 8px 24px rgba(0,0,0,.28);
  transform: translateY(4px); opacity: 0; transition: opacity .12s, transform .12s;
  max-width: 240px;
}
.chart-tooltip.on { opacity: 1; transform: translateY(0); }
.chart-tooltip .ct-label { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
.chart-tooltip .ct-label i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.chart-tooltip .ct-val { display: block; color: #cbd5e1; margin-top: .15rem; padding-left: .0; font-variant-numeric: tabular-nums; }
/* Karşılaştırmalı grafiklerde ikinci seri (geçen yıl) — ana değerden soluk */
.chart-tooltip .ct-prev {
  display: block; margin-top: .18rem; padding-top: .18rem;
  border-top: 1px dashed rgba(148,163,184,.35);
  color: #94a3b8; font-size: .95em; font-variant-numeric: tabular-nums;
}
canvas[data-chart] { cursor: default; }

/* Legend chip hover */
.legend-chip { transition: color .12s; cursor: default; }
.legend-chip:hover { color: var(--primary); }

/* --- Sayfa giriş animasyonu --- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .content > * { animation: fadeIn .3s ease both; }
  /* Kartlar sırayla belirsin (stagger) */
  .dash-row .dash-card, .cust-stats .cstat, .cd-grid .cd-card, .policy-grid .info-card, .cf-form .info-card {
    animation: fadeUp .38s cubic-bezier(.22,.61,.36,1) both;
  }
  .dash-row .dash-card:nth-child(1), .cust-stats .cstat:nth-child(1), .cd-grid .cd-card:nth-child(1) { animation-delay: .02s; }
  .dash-row .dash-card:nth-child(2), .cust-stats .cstat:nth-child(2), .cd-grid .cd-card:nth-child(2) { animation-delay: .06s; }
  .dash-row .dash-card:nth-child(3), .cust-stats .cstat:nth-child(3), .cd-grid .cd-card:nth-child(3) { animation-delay: .10s; }
  .dash-row .dash-card:nth-child(4), .cust-stats .cstat:nth-child(4), .cd-grid .cd-card:nth-child(4) { animation-delay: .14s; }
  .cust-stats .cstat:nth-child(5) { animation-delay: .18s; }
  /* Tablo satırları belirsin */
  .cust-table tbody tr, .team-table tbody tr { animation: fadeUp .3s ease both; }
  .cust-table tbody tr:nth-child(1) { animation-delay: .04s; }
  .cust-table tbody tr:nth-child(2) { animation-delay: .07s; }
  .cust-table tbody tr:nth-child(3) { animation-delay: .10s; }
  .cust-table tbody tr:nth-child(4) { animation-delay: .13s; }
  .cust-table tbody tr:nth-child(5) { animation-delay: .16s; }
  .cust-table tbody tr:nth-child(6) { animation-delay: .19s; }
  .cust-table tbody tr:nth-child(n+7) { animation-delay: .22s; }
}

/* --- Kart hover kaldırma --- */
.dash-card:hover, .cd-card:hover, .info-card:hover {
  box-shadow: var(--sh-lg); transform: translateY(-3px);
}
.cstat { transition: box-shadow .18s, transform .18s; }
.cstat:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }

/* --- Tablo satır hover (premium) --- */
.cust-table tbody tr { position: relative; transition: background .14s, box-shadow .14s; }
.cust-table tbody tr:hover td { background: var(--primary-light); }
.cust-table tbody tr:hover { box-shadow: inset 3px 0 0 var(--primary); }
.cust-table tbody tr:hover .name-cell a { color: var(--primary-dark); }
.team-table tbody tr { transition: background .14s; }
.team-table tbody tr:hover td { background: #f5f3ff; }

/* --- Satır işlem butonları: hover'da belirginleş --- */
.actions .act { transition: transform .12s, filter .12s, box-shadow .12s; }
.actions .act:hover { transform: translateY(-1px) scale(1.06); box-shadow: var(--sh-sm); }

/* --- Bağlantı/rozet hover --- */
.rep-pill { transition: transform .12s, box-shadow .12s; }
.cust-table tbody tr:hover .rep-pill { transform: translateY(-1px); box-shadow: var(--sh-md); }

/* --- Widget tile hover parıltı --- */
.wtile { position: relative; overflow: hidden; }
.wtile::after {
  content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.12);
  opacity: 0; transition: opacity .18s;
}
.wtile:hover::after { opacity: 1; }

/* --- Sayfa geçiş: içerik yumuşak yüklensin --- */
.main { animation: fadeIn .25s ease; }

/* --- İlerleme çubuğu dolum animasyonu --- */
.progress span { transition: width .8s cubic-bezier(.22,.61,.36,1); }

/* --- Buton tık geri bildirimi --- */
.btn:active, .tb-btn:active, .cda:active { transform: translateY(0) scale(.98); }

/* Menü öğesi hover davranışı taban blokta (ikon büyümesi); padding
   kaydırması kaldırıldı — alt menü hizasını bozuyordu. */

/* ============================================================
   GÖREV YÖNETİMİ paneli
   ============================================================ */
.tasks-search { display: flex; gap: 0; }
.tasks-search input { border-radius: 10px 0 0 10px; border-right: 0; padding: .5rem .7rem; }
.tasks-search button { border-radius: 0 10px 10px 0; }

/* Bölüm başlıkları */
.task-section { margin-bottom: 1.2rem; }
.ts-head { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .95rem; padding: .5rem .9rem; border-radius: 10px; margin-bottom: .7rem; }
.ts-red { background: #fef2f2; color: #dc2626; } .ts-green { background: #f0fdf4; color: #16a34a; }
.ts-count { background: rgba(0,0,0,.08); border-radius: 999px; padding: 0 .5rem; font-size: .78rem; }

/* 4 kova ızgarası */
.bucket-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1200px) { .bucket-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .bucket-row { grid-template-columns: 1fr; } }
.bucket-col { background: #f8fafc; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.bucket-head { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .88rem; padding: .7rem .9rem; color: #fff; }
.bucket-head .ts-count { background: rgba(255,255,255,.25); margin-left: auto; }
.b-orange { background: linear-gradient(135deg,#f97316,#ea580c); }
.b-blue { background: linear-gradient(135deg,#3b82f6,#2563eb); }
.b-indigo { background: linear-gradient(135deg,#6366f1,#4f46e5); }
.b-green { background: linear-gradient(135deg,#22c55e,#16a34a); }
.bucket-body { padding: .7rem; display: flex; flex-direction: column; gap: .6rem; min-height: 80px; max-height: 640px; overflow-y: auto; }
.bucket-empty { text-align: center; color: #a4b0bf; padding: 1.5rem 0; display: flex; flex-direction: column; align-items: center; gap: .4rem; font-size: .82rem; }

/* Görev kartı */
.task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .7rem; }
.task-card { background: #fff; border: 1px solid var(--border); border-left: 4px solid #cbd5e1; border-radius: 11px; padding: .7rem .8rem; box-shadow: var(--sh-sm); transition: transform .14s, box-shadow .14s; }
.task-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.task-card.tc-urgent, .task-card.tc-overdue { border-left-color: #dc2626; }
.task-card.tc-high { border-left-color: #f97316; }
.task-card.tc-medium { border-left-color: #3b82f6; }
.task-card.tc-low { border-left-color: #94a3b8; }
.tc-overdue { background: #fff7f7; }
.tc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
.tc-priority { font-size: .66rem; font-weight: 700; padding: .1rem .45rem; border-radius: 5px; }
.pr-red { background: #fee2e2; color: #b91c1c; } .pr-orange { background: #fef3c7; color: #b45309; }
.pr-blue { background: #dbeafe; color: #1e40af; } .pr-gray { background: #eef1f5; color: #64748b; }
.tc-title { display: block; font-weight: 600; font-size: .9rem; color: #1e293b; margin-bottom: .25rem; }
.tc-title:hover { color: var(--primary); }
.tc-desc { font-size: .78rem; color: var(--muted); margin-bottom: .5rem; line-height: 1.4; }
.tc-meta { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .76rem; color: #475569; margin-bottom: .5rem; }
.tc-meta span { display: inline-flex; align-items: center; gap: .25rem; }
.tc-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f1f5f9; padding-top: .5rem; }
.tc-due { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: #475569; font-weight: 500; }
.tc-due.due-over { color: #dc2626; font-weight: 600; }
.tc-actions { display: flex; align-items: center; gap: .35rem; }
.tc-notes { display: inline-flex; align-items: center; gap: .2rem; font-size: .74rem; color: var(--muted); }
.tc-complete, .tc-edit { width: 28px; height: 28px; border-radius: 7px; display: inline-grid; place-items: center; border: 0; cursor: pointer; text-decoration: none !important; transition: transform .12s; }
.tc-complete { background: #dcfce7; color: #16a34a; } .tc-edit { background: #eef2ff; color: #4f46e5; }
.tc-complete:hover, .tc-edit:hover { transform: translateY(-1px) scale(1.06); }

/* ============================================================
   BUGÜNÜM (My Day) paneli
   ============================================================ */
.md-welcome { background: var(--sidebar-grad); border-radius: 16px; padding: 1.4rem 1.6rem; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-bottom: 1.1rem; box-shadow: var(--sh-lg); flex-wrap: wrap; position: relative; overflow: hidden; }
.md-welcome::after { content:''; position:absolute; right:-40px; top:-40px; width:200px; height:200px; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); }
.md-welcome-text h1 { margin: 0 0 .3rem; font-size: 1.5rem; letter-spacing: -.02em; }
.md-welcome-text p { margin: 0; opacity: .85; font-size: .9rem; display: inline-flex; align-items: center; gap: .4rem; }
.md-welcome-stats { display: flex; gap: 1.8rem; position: relative; }
.mw-stat { text-align: center; }
.mw-num { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1; }
.mw-lbl { font-size: .76rem; opacity: .8; }

/* Hedefler */
.md-targets { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.1rem; }
@media (max-width: 700px) { .md-targets { grid-template-columns: 1fr; } }

/* Hızlı eylemler */
.md-quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; margin-bottom: 1.1rem; }
@media (max-width: 800px) { .md-quick { grid-template-columns: repeat(2, 1fr); } }

/* Panel ızgarası */
.md-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .md-grid { grid-template-columns: 1fr; } }
.mp-body { padding: .5rem; max-height: 380px; overflow-y: auto; }
.mp-empty { text-align: center; color: #a4b0bf; padding: 1.6rem 0; display: flex; flex-direction: column; align-items: center; gap: .4rem; font-size: .84rem; }
.mp-item { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border-radius: 9px; transition: background .12s; }
.mp-item:hover { background: #f8fafc; }
.mp-item-over:hover { background: #fff7f7; }
.mp-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp-item-main a, .mp-item-main strong { font-size: .87rem; font-weight: 600; color: #1e293b; }
.mp-item-main a:hover { color: var(--primary); }
.mp-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dot-red { background: #dc2626; } .dot-orange { background: #f97316; } .dot-blue { background: #3b82f6; } .dot-gray { background: #94a3b8; }
.mp-time { font-size: .8rem; color: var(--muted); font-weight: 600; }
.mp-time.due-over { color: #dc2626; }
.mp-hour { background: var(--primary-light); color: var(--primary); font-weight: 700; font-size: .82rem; padding: .25rem .5rem; border-radius: 7px; flex-shrink: 0; }
.mp-check { width: 28px; height: 28px; border-radius: 7px; background: #dcfce7; color: #16a34a; border: 0; cursor: pointer; display: inline-grid; place-items: center; transition: transform .12s; }
.mp-check:hover { transform: scale(1.08); }
.mp-badge-days { font-size: .74rem; font-weight: 600; background: #eef2ff; color: #4f46e5; padding: .15rem .5rem; border-radius: 6px; }
.mp-badge-days.urgent { background: #fee2e2; color: #dc2626; }

/* BUGÜNÜM ek: öneri/fırsat kartları + görüşme işaretleri */
.md-section-title { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; margin: 1.4rem 0 .8rem; color: #334155; }
.reco-item { display: flex; align-items: flex-start; gap: .6rem; padding: .6rem; border-radius: 10px; border-left: 3px solid #cbd5e1; margin-bottom: .5rem; background: #fbfcfe; }
.reco-item:last-child { margin-bottom: 0; }
.reco-red { border-left-color: #dc2626; } .reco-green { border-left-color: #16a34a; } .reco-purple { border-left-color: #7c3aed; }
.reco-orange { border-left-color: #ea580c; } .reco-indigo { border-left-color: #4f46e5; } .reco-pink { border-left-color: #db2777; }
.reco-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #fff; box-shadow: var(--sh-sm); flex-shrink: 0; }
.reco-red .reco-ico { color: #dc2626; } .reco-green .reco-ico { color: #16a34a; } .reco-purple .reco-ico { color: #7c3aed; }
.reco-orange .reco-ico { color: #ea580c; } .reco-indigo .reco-ico { color: #4f46e5; } .reco-pink .reco-ico { color: #db2777; }
.reco-main { flex: 1; min-width: 0; }
.reco-top { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.reco-top strong { font-size: .85rem; color: #1e293b; }
.reco-pr { font-size: .64rem; font-weight: 700; padding: .1rem .4rem; border-radius: 5px; }
.reco-score { font-size: .7rem; font-weight: 700; color: #16a34a; background: #dcfce7; padding: .1rem .4rem; border-radius: 5px; }
.reco-name { display: block; font-size: .84rem; font-weight: 600; color: var(--primary); margin: .1rem 0; }
.reco-detail { font-size: .76rem; color: var(--muted); }
.reco-act { width: 30px; height: 30px; border-radius: 8px; background: var(--primary-light); color: var(--primary); display: grid; place-items: center; flex-shrink: 0; text-decoration: none !important; transition: transform .12s; }
.reco-act:hover { transform: scale(1.08); }
/* Fırsat satırının alt şeridi: hedef ürün · tahmini prim · puan */
.reco-foot { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.reco-tag {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .68rem; font-weight: 600; color: var(--muted);
  background: var(--surface-2, #f1f5f9); border-radius: 5px; padding: .1rem .4rem;
}
.reco-tag svg { opacity: .7; }
.reco-amt { font-size: .7rem; font-weight: 700; color: var(--text); }
.reco-foot .reco-score { margin-left: auto; }
/* Widget gövdesi altındaki "tamamını gör" bağlantısı */
.mdw-more {
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  margin-top: .5rem; padding: .4rem;
  font-size: .74rem; font-weight: 600; color: var(--primary);
  background: var(--primary-light); border-radius: 8px;
  transition: transform .12s, box-shadow .12s;
}
.mdw-more:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); }
.mdw-more-top { margin-top: 0; margin-bottom: .55rem; }
/* Görüşme sonucu işareti — RENKLİ KARE (olumlu yeşil · olumsuz kırmızı ·
   belirsiz mavi). Soluk zeminli daireyken uzun bir listede göz taraması
   zordu; dolu kare uzaktan okunuyor. Belirsiz artık gri değil MAVİ: gri
   "veri yok / pasif" demek, oysa belirsiz görüşme YAPILMIŞ bir görüşmedir.
   Glif (✓ ✕ −) bilerek duruyor — renk tek başına erişilebilir bir işaret
   değildir. Ortak işaret olduğu için Görüşmeler, Günüm ve rapor ekranları
   aynı biçimi paylaşır. */
.note-mark { width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; color: #fff; }
.nm-green { background: #16a34a; } .nm-red { background: #dc2626; }
.nm-blue  { background: #2563eb; } .nm-gray { background: #94a3b8; }
html[data-theme="dark"] .nm-green { background: #22c55e; }
html[data-theme="dark"] .nm-red   { background: #ef4444; }
html[data-theme="dark"] .nm-blue  { background: #3b82f6; }
html[data-theme="dark"] .nm-gray  { background: #64748b; }
.md-bday-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: .3rem; }

/* ============================================================
   KOYU TEMA — Professional Dark  (html[data-theme="dark"])
   Referans: modern koyu + emerald vurgulu CRM paneli
   Değişkenler yeniden tanımlanır; hardcoded açık yüzeyler
   (#fff / #f8fafc / açık gri metinler) koyu karşılığına çevrilir.
   ============================================================ */
html[data-theme="dark"] {
  --primary: #10b981;
  --primary-dark: #059669;
  --primary-light: rgba(16,185,129,.15);
  --accent-grad: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --brand-grad: linear-gradient(135deg, #10b981 0%, #0ea472 100%);
  --sidebar-grad: linear-gradient(185deg, #0f1c2e 0%, #0b1626 100%);
  --sidebar-active: rgba(16,185,129,.16);
  --bg: #0a1120;
  --card: #131f33;
  --text: #e6edf6;
  --muted: #93a1b5;
  --border: #223049;
  --danger: #f87171;
  --success: #34d399;
  --warn: #fbbf24;
  --info: #38bdf8;
  /* Koyu zeminde açık ikizler (bkz. :root — satır işareti) */
  --mark-renewed:   #c4b5fd;
  --mark-unrenewed: #fdba74;
  --sh-sm: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.40);
  --sh-md: 0 2px 6px rgba(0,0,0,.40), 0 8px 22px rgba(0,0,0,.45);
  --sh-lg: 0 8px 24px rgba(0,0,0,.50), 0 18px 48px rgba(0,0,0,.55);
  color-scheme: dark;
}
/* Koyu yardımcı yüzey tonları */
html[data-theme="dark"] { --surface-2: #0f1a2b; --surface-3: #17233a; }

html[data-theme="dark"] body { background:
  radial-gradient(1200px 600px at 80% -10%, rgba(16,185,129,.06), transparent 60%),
  var(--bg); color: var(--text); }
html[data-theme="dark"] a { color: #34d399; }
html[data-theme="dark"] a:hover { color: #6ee7b7; }

/* --- Üst bar --- */
html[data-theme="dark"] .topbar { background: #101a2b; border-bottom: 1px solid var(--border); }
html[data-theme="dark"] .tb-brand { color: var(--text); }
html[data-theme="dark"] .tb-sub { color: var(--muted); }
html[data-theme="dark"] .hamburger { color: var(--muted); }
html[data-theme="dark"] .topbar-search input { background: var(--surface-2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .tb-icon { background: var(--surface-2); color: var(--muted); }
html[data-theme="dark"] .tb-icon:hover { background: var(--primary-light); color: #34d399; }

/* --- Kenar çubuğu (zaten koyu; yeşil vurgu) --- */
html[data-theme="dark"] .sidebar { box-shadow: 1px 0 0 var(--border); }
/* Rol rozeti ve online göstergesi her iki temada aynı (taban blokta) */
html[data-theme="dark"] .avatar-ring { background: conic-gradient(from 210deg, #34d399, #38bdf8, #6ee7b7, #34d399); }
html[data-theme="dark"] .av-dot { border-color: rgba(10,17,32,.95); }

/* --- Kartlar / paneller --- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .dash-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .cstat,
html[data-theme="dark"] .cd-card,
html[data-theme="dark"] .cd-header,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .task-card,
html[data-theme="dark"] .rep-card {
  background: var(--card); border-color: var(--border);
}
html[data-theme="dark"] .card h2 { border-bottom-color: var(--border); }
html[data-theme="dark"] .combo-divider,
html[data-theme="dark"] .prod-total,
html[data-theme="dark"] .tc-foot { border-color: var(--border); }

/* Kart iç başlık / hafif yüzeyler */
html[data-theme="dark"] .cdc-head,
html[data-theme="dark"] .ic-head,
html[data-theme="dark"] .list-head,
html[data-theme="dark"] .team-period,
html[data-theme="dark"] .quick-bar,
html[data-theme="dark"] .sub-block,
html[data-theme="dark"] .reco-item,
html[data-theme="dark"] .bucket-col,
html[data-theme="dark"] .adv-filter,
html[data-theme="dark"] .filter-row td { background: var(--surface-2); border-color: var(--border); }
html[data-theme="dark"] .head-note,
html[data-theme="dark"] .mp-hour,
html[data-theme="dark"] .mp-badge-days,
html[data-theme="dark"] .count-badge { background: var(--surface-3); color: var(--muted); }
html[data-theme="dark"] .cdc-head, html[data-theme="dark"] .ic-head, html[data-theme="dark"] .list-head { border-bottom: 1px solid var(--border); }

/* Metin / başlık / rakam renkleri (koyu literaller → açık) */
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html[data-theme="dark"] .stat-big, html[data-theme="dark"] .cs-num, html[data-theme="dark"] .stat-num,
html[data-theme="dark"] .card-head h3, html[data-theme="dark"] .cdc-head h3, html[data-theme="dark"] .ic-head h3,
html[data-theme="dark"] .tc-title,
html[data-theme="dark"] .mp-item-main a, html[data-theme="dark"] .mp-item-main strong,
html[data-theme="dark"] .reco-top strong, html[data-theme="dark"] .reco-name,
html[data-theme="dark"] .legend-chip b, html[data-theme="dark"] .cd-header h1,
html[data-theme="dark"] .cd-meta strong, html[data-theme="dark"] .cd-dl dd, html[data-theme="dark"] .cd-dl2 dd,
html[data-theme="dark"] .name-cell > a, html[data-theme="dark"] .name-sub, html[data-theme="dark"] .name-phone,
html[data-theme="dark"] .price-row, html[data-theme="dark"] .note-text, html[data-theme="dark"] .ns-tc {
  color: var(--text);
}
html[data-theme="dark"] .legend-chip, html[data-theme="dark"] .target-line,
html[data-theme="dark"] .tc-desc, html[data-theme="dark"] .tc-meta, html[data-theme="dark"] .reco-detail,
html[data-theme="dark"] .cd-meta, html[data-theme="dark"] .name-email { color: var(--muted); }
/* .wt-lbl buraya dahil DEĞİL: renkli kutucuk zemininde beyaz kalmalı,
   --muted'a düşürülünce koyu temada okunmuyordu. */
html[data-theme="dark"] .stat-cap, html[data-theme="dark"] .cs-lbl { color: var(--muted); }

/* Stat / kart ikon rozetleri — koyu pastel yerine yeşil-cam yüzey */
html[data-theme="dark"] .stat-ico { background: rgba(16,185,129,.14); color: #34d399; }
html[data-theme="dark"] .ico-blue { background: rgba(56,189,248,.15); color: #38bdf8; }
html[data-theme="dark"] .ico-green { background: rgba(16,185,129,.15); color: #34d399; }
html[data-theme="dark"] .ico-dark { background: rgba(148,163,184,.15); color: #cbd5e1; }
html[data-theme="dark"] .ico-purple { background: rgba(139,92,246,.16); color: #a78bfa; }
html[data-theme="dark"] .cs-ico { background: rgba(16,185,129,.14); color: #34d399; }

/* İlerleme çubukları */
html[data-theme="dark"] .progress { background: var(--surface-3); }

/* --- Tablolar --- */
html[data-theme="dark"] table th,
html[data-theme="dark"] .cust-table th,
html[data-theme="dark"] .team-table th { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
html[data-theme="dark"] .cust-table th a { color: var(--muted); }
html[data-theme="dark"] table td,
html[data-theme="dark"] .cust-table td,
html[data-theme="dark"] .team-table td { border-color: var(--border); color: var(--text); }
html[data-theme="dark"] tr:hover td,
html[data-theme="dark"] .cust-table tbody tr:hover td { background: var(--surface-3); }
html[data-theme="dark"] .cust-table tbody tr:hover .name-cell a { color: #6ee7b7; }
html[data-theme="dark"] .team-table tbody tr:hover td { background: var(--surface-3); }
html[data-theme="dark"] .team-table tfoot td { background: var(--surface-2); border-top: 2px solid var(--border); }

/* --- Formlar / girişler --- */
html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=email], html[data-theme="dark"] input[type=number],
html[data-theme="dark"] input[type=date], html[data-theme="dark"] select, html[data-theme="dark"] textarea,
html[data-theme="dark"] .cf-field input:not([type=checkbox]):not([type=radio]),
html[data-theme="dark"] .cf-field select, html[data-theme="dark"] .cf-field textarea,
html[data-theme="dark"] .ic-body > textarea {
  background-color: var(--surface-2); color: var(--text); border-color: var(--border);
}
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .cf-field input::placeholder { color: #64748b; }
html[data-theme="dark"] .cf-field input:not([type=checkbox]):not([type=radio]):hover,
html[data-theme="dark"] .cf-field select:hover, html[data-theme="dark"] .cf-field textarea:hover { background-color: var(--surface-3); border-color: #33456a; }
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .cf-field input:focus, html[data-theme="dark"] .cf-field select:focus, html[data-theme="dark"] .cf-field textarea:focus {
  background-color: var(--surface-2); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(16,185,129,.20); outline: 0;
}
html[data-theme="dark"] input:disabled, html[data-theme="dark"] .cf-field input:disabled, html[data-theme="dark"] .cf-field select:disabled { background-color: #0c1522; color: #5b6b82; }
html[data-theme="dark"] fieldset { border-color: var(--border); }
html[data-theme="dark"] .cf-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2393a1b5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }

/* Yapışkan kaydet çubuğu (cam) */
html[data-theme="dark"] .cf-actions { background: rgba(19,31,51,.85); border-color: var(--border); }

/* --- Butonlar --- */
html[data-theme="dark"] .btn { background: var(--surface-2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .btn:hover { border-color: var(--primary); color: #6ee7b7; }
html[data-theme="dark"] .btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
html[data-theme="dark"] .btn-danger { background: var(--surface-2); border-color: #7f1d1d; color: #f87171; }
html[data-theme="dark"] .btn-danger:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
html[data-theme="dark"] .btn-success { background: var(--surface-2); border-color: #14532d; color: #34d399; }

/* --- Sekmeler (müşteri detay) --- */
html[data-theme="dark"] .cd-tab { background: var(--surface-2); color: var(--muted); }
html[data-theme="dark"] .cd-tab:hover:not(.on) { background: var(--surface-3); }
html[data-theme="dark"] .view-toggle { background: var(--surface-2); }
html[data-theme="dark"] .view-toggle .vt.on { background: rgba(16,185,129,.16); color: #6ee7b7; }
html[data-theme="dark"] .scope-pill { background: rgba(16,185,129,.16); color: #6ee7b7; }

/* --- Mini satır / liste ayraçları --- */
html[data-theme="dark"] .mini-row { border-bottom-color: var(--border); }
html[data-theme="dark"] .mini-row.link:hover, html[data-theme="dark"] .mp-item:hover { background: var(--surface-3); }
html[data-theme="dark"] .price-row { border-bottom-color: var(--border); }
html[data-theme="dark"] .reco-ico { background: var(--surface-3); }

/* --- Rozetler: koyu zeminde yumuşak cam çipler --- */
html[data-theme="dark"] .badge-green  { background: rgba(52,211,153,.16); color: #6ee7b7; }
html[data-theme="dark"] .badge-gray   { background: rgba(148,163,184,.16); color: #cbd5e1; }
html[data-theme="dark"] .badge-red    { background: rgba(248,113,113,.16); color: #fca5a5; }
html[data-theme="dark"] .badge-orange { background: rgba(251,191,36,.16); color: #fcd34d; }
html[data-theme="dark"] .badge-blue   { background: rgba(56,189,248,.16); color: #7dd3fc; }
html[data-theme="dark"] .badge-purple { background: rgba(167,139,250,.16); color: #c4b5fd; }

/* --- Flash mesajlar --- */
html[data-theme="dark"] .flash-success { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.35); color: #6ee7b7; }
html[data-theme="dark"] .flash-error { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.35); color: #fca5a5; }

/* --- Sayfalama --- */
html[data-theme="dark"] .pagination a, html[data-theme="dark"] .pagination .current { border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .pagination .current { background: var(--primary); border-color: var(--primary); color: #06231a; }

/* --- Giriş ekranı --- */
html[data-theme="dark"] .auth-body { background:
  radial-gradient(900px 500px at 50% -10%, rgba(16,185,129,.12), transparent 60%),
  var(--bg); }
html[data-theme="dark"] .auth-card { background: var(--card); border: 1px solid var(--border); }
html[data-theme="dark"] .auth-card h1 { color: var(--text); }

/* --- Grafik tooltip (zaten koyu; kenarlık) --- */
html[data-theme="dark"] .chart-tooltip { background: #0b1220; border: 1px solid var(--border); }

/* ============================================================
   EKİP AYLIK ÜRETİM PERFORMANSI (dashboard — 4 görünüm)
   ============================================================ */
.team-prod-card { min-width: 0; }
.team-prod-card .table-scroll { overflow-x: auto; }
.tp-toggle { display: inline-flex; flex-wrap: wrap; gap: .3rem; background: var(--surface-2, #f1f5f9); padding: 3px; border-radius: 10px; }
.tp-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .4rem .7rem; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .8rem; font-weight: 600; border-radius: 8px; cursor: pointer; transition: background .14s, color .14s; }
.tp-btn:hover { color: var(--primary); }
.tp-btn.active { background: var(--brand-grad); color: #fff; box-shadow: var(--sh-sm); }
html[data-theme="dark"] .tp-btn.active { color: #06231a; }
.tp-exp-icon, .tp-rep-ic { display: inline-block; font-size: .7rem; color: var(--muted); transition: transform .15s; width: 1em; }
.tp-monthly .tp-month-row:hover td, .tp-sub .tp-rep-row:hover td { background: var(--surface-2, #f8fafc); }
.tp-group { margin-bottom: 1rem; }
.tp-group:last-child { margin-bottom: 0; }
.tp-group-head { font-weight: 700; font-size: .85rem; margin-bottom: .4rem; display: inline-flex; align-items: center; gap: .4rem; }
.tp-sub { font-size: .82rem; }
.tp-sub th { font-size: .72rem; }
.tp-detail-wrap { padding: 12px 16px; }
.tp-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 800px) { .tp-detail-grid { grid-template-columns: 1fr; } }
.tp-detail-summary { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .8rem; padding: .6rem .9rem; border-radius: 10px; border: 1px solid var(--border); background: var(--card); font-size: .82rem; }
.tp-detail-summary b { color: var(--text); }

/* ============================================================
   RAPORLAR modülü
   ============================================================ */
.rep-datefilter { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; }
.rep-datefilter label { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; color: var(--muted); font-weight: 600; margin: 0; }
.rep-datefilter input, .rep-datefilter select { padding: .4rem .6rem; }
.rep-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--border); padding-bottom: .5rem; }
.rep-tab { padding: .5rem .9rem; border-radius: 9px; font-size: .85rem; font-weight: 600; color: var(--muted); background: transparent; text-decoration: none !important; transition: background .14s, color .14s; }
.rep-tab:hover { background: var(--primary-light); color: var(--primary); }
.rep-tab.active { background: var(--brand-grad); color: #fff; box-shadow: var(--sh-sm); }
.rep-subtabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.rep-subtab { padding: .4rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--muted); background: var(--card); border: 1px solid var(--border); text-decoration: none !important; }
.rep-subtab:hover { border-color: var(--primary); color: var(--primary); }
.rep-subtab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
html[data-theme="dark"] .rep-tab.active, html[data-theme="dark"] .rep-subtab.active { color: #06231a; }

/* --- Poliçesiz Müşteriler: süzgeç şeridi ve satır içi kırılım bağlantısı --- */
.np-filter {
  padding: .7rem .9rem; margin-bottom: .6rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
}
/* Çok satırlı uyarı: ikon üstte hizalanır, metin akar */
.np-hint { align-items: flex-start; line-height: 1.55; }
.np-hint svg { margin-top: .15rem; }
.np-hint a { color: inherit; text-decoration: underline; }

/* Kırılım satırından listeye inen bağlantı — sayı sütununu bozmadan */
.np-drill {
  margin-left: .4rem; font-size: .7rem; font-weight: 650;
  color: var(--primary); text-decoration: none !important;
  opacity: 0; transition: opacity .12s;
}
tr:hover .np-drill, .np-drill:focus-visible { opacity: 1; }

/* ============================================================
   TEMA ANAHTARI — üst bar (mesajlar ile "Yeni" arasında)
   ============================================================
   Kenar çubuğundaki kaydırmalı anahtarın yerini aldı. Orada menü ile
   kısayollar arasında sıkışmıştı ve ne menüydü ne kısayol.

   YUVARLAK olması bilinçli: solundaki ikonlar 10px köşeli kare,
   sağındaki "Yeni" gradyan hap. Daire üçüncü bir biçim olarak
   "bu bir TERCİH, bir işlem değil" der ve göz onu ayırır.

   Etiket yok, ikon konuşur: GEÇİLECEK temanın ikonu görünür —
   aydınlıktayken ay, karanlıktayken güneş. Hangisinin görüneceğini
   CSS seçer; JS yalnız `data-theme`i değiştirir.
   ============================================================ */
.tb-theme {
  position: relative; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-grid; place-items: center;
  margin: 0 .1rem; padding: 0; cursor: pointer;
  background: color-mix(in srgb, var(--muted) 9%, transparent);
  border: 1px solid transparent; color: var(--muted);
  transition: background .16s, color .16s, border-color .16s, transform .16s, box-shadow .16s;
}
.tb-theme svg { display: block; }
.tb-theme:active { transform: scale(.94); }

/* Aydınlıkta "karanlığa geç" → indigo/mor aile; karanlıkta "aydınlığa
   geç" → kehribar. Hover rengi, basıldığında ne olacağını önceden söyler. */
.tb-theme:hover {
  background: color-mix(in srgb, #6366f1 16%, transparent);
  border-color: color-mix(in srgb, #6366f1 34%, transparent);
  color: #4f46e5; transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79,70,229,.22);
}
html[data-theme="dark"] .tb-theme {
  background: color-mix(in srgb, var(--muted) 14%, transparent);
}
html[data-theme="dark"] .tb-theme:hover {
  background: color-mix(in srgb, #fbbf24 18%, transparent);
  border-color: color-mix(in srgb, #fbbf24 36%, transparent);
  color: #fbbf24; box-shadow: 0 4px 12px rgba(251,191,36,.2);
}

/* İki ikon, biri görünür. Varsayılan dal aydınlık temaya göre kurulur:
   `data-theme` hiç yazılmamışsa bile düğme boş kalmaz. */
.tb-theme .tt-sun  { display: none; }
.tb-theme .tt-moon { display: inline-flex; }
html[data-theme="dark"] .tb-theme .tt-sun  { display: inline-flex; }
html[data-theme="dark"] .tb-theme .tt-moon { display: none; }

/* Klasik düzende komşu ikonlar 38px; daire onlarla aynı boyda dursun */
.topbar:not(.tb-cmd) .tb-theme { width: 38px; height: 38px; }

/* ============================================================
   MÜŞTERİ FORMU — bölümlü düzen (views/customers/form.php)
   Sol yapışkan bölüm navigasyonu + tek kolon bölüm akışı.
   Eski `.cf-cards` masonry düzeninin yerini alır; `.cf-field`
   giriş stilleri paylaşılmaya devam eder.
   ============================================================ */
.cfrm { max-width: 1280px; margin-inline: auto; width: 100%; }
.cfrm [hidden] { display: none !important; }
.cfrm .cf-field label { margin-top: 0; }

/* --- Sayfa başlığı --- */
.cfrm-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.cfrm-top h1 { margin: 0 0 .2rem; font-size: 1.4rem; display: inline-flex; align-items: center; gap: .55rem; }
.cfrm-top h1 svg { color: var(--primary); }
.cfrm-top p { margin: 0; font-size: .85rem; color: var(--muted); max-width: 62ch; }

/* --- İskelet --- */
.cfrm-layout { display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.cfrm-main { display: flex; flex-direction: column; gap: 1rem; }
.cfrm-side { position: sticky; top: 68px; }
@media (max-width: 1100px) { .cfrm-layout { grid-template-columns: 1fr; } .cfrm-side { display: none; } }

/* --- Sol bölüm navigasyonu --- */
.cfrm-nav { display: flex; flex-direction: column; gap: 2px; padding: .55rem; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--sh-sm); }
.cfn-cap { font-size: .67rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 700; padding: .4rem .6rem .5rem; }
.cfn-item { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border-radius: 9px; font-size: .855rem; font-weight: 500; color: var(--text); transition: background .14s, color .14s; }
.cfn-item i { display: inline-flex; color: var(--muted); }
.cfn-item:hover { background: var(--primary-light); color: var(--primary); }
.cfn-item:hover i { color: var(--primary); }
.cfn-item.is-active { background: var(--primary); color: #fff; box-shadow: var(--sh-sm); }
.cfn-item.is-active i { color: #fff; }
.cfn-badge { margin-left: auto; font-style: normal; font-size: .78rem; font-weight: 700; color: var(--success); }
.cfn-item.is-active .cfn-badge { color: #fff; }

/* --- Bölüm kartı --- */
.fsec { background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--sh-sm); overflow: hidden; scroll-margin-top: 86px; }
.fsec-head { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .8rem 1.05rem; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--border); font: inherit; color: inherit; }
button.fsec-head { cursor: pointer; }
button.fsec-head:hover { background: #f8fafc; }
.fsec-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--primary-light); color: var(--primary); flex-shrink: 0; }
.fsec-t { display: flex; flex-direction: column; line-height: 1.25; font-weight: 700; font-size: .95rem; min-width: 0; flex: 1 1 auto; }
.fsec-t small { margin-top: .1rem; font-weight: 400; font-size: .755rem; color: var(--muted); }
.fsec-chip { flex-shrink: 0; font-size: .73rem; font-weight: 600; color: var(--primary); background: var(--primary-light); border-radius: 999px; padding: .16rem .62rem; }
.fsec-chip:empty { display: none; }
.fsec-chev { flex-shrink: 0; color: var(--muted); transition: transform .18s ease; display: inline-flex; }
.fsec-head.as-row .tgl { flex-shrink: 0; }
.fsec-body { padding: 1rem 1.05rem 1.15rem; }
.fsec.is-closed .fsec-body { display: none; }
.fsec.is-closed .fsec-head { border-bottom-color: transparent; }
.fsec.is-closed .fsec-chev { transform: rotate(-90deg); }

/* --- Alan ızgarası --- */
.fgrid { display: grid; gap: .85rem 1rem; }
.fgrid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fgrid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fgrid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fgrid > .sp-2 { grid-column: span 2; }
.fgrid > .sp-full { grid-column: 1 / -1; }
.gap-top { margin-top: .95rem; }
@media (max-width: 1180px) { .fgrid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 880px)  { .fgrid.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .fgrid.c2, .fgrid.c3, .fgrid.c4 { grid-template-columns: 1fr; } .fgrid > .sp-2 { grid-column: 1 / -1; } }

.cfrm .cf-field.narrow { max-width: 190px; }
.req { color: var(--danger); font-weight: 700; }
.fmsg { display: block; margin-top: .22rem; font-size: .74rem; color: var(--danger); }
.fmsg:empty { display: none; }
.fhint { display: block; margin-top: .22rem; font-size: .72rem; color: var(--muted); }
.cf-field.has-err input:not([type=checkbox]):not([type=radio]),
.cf-field.has-err select, .cf-field.has-err textarea {
  border-color: var(--danger); background-color: #fef2f2; box-shadow: 0 0 0 3px rgba(220,38,38,.13);
}
.cf-field.has-err > label { color: var(--danger); }

/* --- Segment secici (bireysel / kurumsal) --- */
.seg { display: inline-flex; gap: 3px; padding: 3px; margin: 0 0 1rem; background: #f1f5f9; border: 1px solid var(--border); border-radius: 12px; }
.seg-opt { position: relative; display: inline-block; margin: 0; }
.seg-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg-opt span { display: inline-flex; align-items: center; gap: .4rem; padding: .44rem 1rem; border-radius: 9px; font-size: .86rem; font-weight: 600; color: var(--muted); transition: background .15s, color .15s, box-shadow .15s; }
.seg-opt input:checked + span { background: var(--card); color: var(--primary); box-shadow: var(--sh-sm); }
.seg-opt input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 1px; }

/* --- Anahtar (toggle) --- */
.tgl { position: relative; display: inline-flex; align-items: center; gap: .55rem; margin: 0; font-size: .87rem; font-weight: 600; cursor: pointer; user-select: none; }
.tgl input { position: absolute; width: 0; height: 0; opacity: 0; }
.tgl-ui { position: relative; width: 38px; height: 21px; flex-shrink: 0; border-radius: 999px; background: #cbd5e1; transition: background .18s ease; }
.tgl-ui::after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28); transition: transform .18s ease; }
.tgl input:checked + .tgl-ui { background: var(--primary); }
.tgl input:checked + .tgl-ui::after { transform: translateX(17px); }
/* `:has()` ve `.is-on` ikizleri: bazı tarayıcılar işaret kutusu değiştiğinde
   `+` kardeş seçicisini yeniden hesaplamıyor ve anahtar kilitli görünüyor.
   `.is-on` sınıfını app.js `change` olayında ekliyor. */
.tgl:has(input:checked) .tgl-ui,
.tgl.is-on .tgl-ui { background: var(--primary); }
.tgl:has(input:checked) .tgl-ui::after,
.tgl.is-on .tgl-ui::after { transform: translateX(17px); }
.tgl input:focus-visible + .tgl-ui { outline: 2px solid var(--primary); outline-offset: 2px; }

.inline-opt { display: flex; align-items: flex-end; gap: 1.3rem; flex-wrap: wrap; }
.inline-opt > .tgl { margin-bottom: .5rem; }
.inline-opt .grow { flex: 1 1 300px; min-width: 260px; }

/* --- Alt panel (es bilgileri vb.) --- */
.subpanel { margin-bottom: 1.1rem; padding: .9rem 1rem 1rem; background: #f8fafc; border: 1px solid var(--border); border-radius: 12px; }
.subpanel h4 { display: inline-flex; align-items: center; gap: .42rem; margin: 0 0 .75rem; font-size: .85rem; }
.subpanel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.subpanel-head h4 { margin-bottom: .75rem; }

/* Otomasyon bilgi notu (gebelik hatırlatması vb.) */
.auto-note { display: flex; align-items: flex-start; gap: .5rem; margin: .9rem 0 0; padding: .6rem .8rem; font-size: .8rem; line-height: 1.45; color: var(--text); background: var(--primary-light); border: 1px solid transparent; border-radius: 10px; }
.auto-note svg { margin-top: 1px; color: var(--primary); }
.auto-note strong { font-weight: 700; }
.subpanel.spouse { background: rgba(236,72,153,.06); border-color: rgba(236,72,153,.26); }
.subpanel.spouse h4 svg { color: #ec4899; }

/* --- Tekrarlayan kart listeleri --- */
.rep { margin-top: 1.2rem; }
.rep:first-child { margin-top: 0; }
.rep-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.rep-head h4 { display: inline-flex; align-items: center; gap: .42rem; margin: 0; font-size: .86rem; }
.rep-head h4 svg { color: var(--muted); }
.rep-n { color: var(--muted); font-weight: 500; }
.rep-head [data-add] { margin-left: auto; }
.rep-head [data-add][disabled] { opacity: .45; pointer-events: none; }
.rlist { display: flex; flex-direction: column; gap: .7rem; }
.rlist:empty { display: none; }
.rep-empty { margin: 0; padding: .6rem .85rem; font-size: .8rem; color: var(--muted); background: #f8fafc; border: 1px dashed var(--border); border-radius: 10px; }
.rcard { padding: .75rem .9rem .85rem; background: #f8fafc; border: 1px solid var(--border); border-radius: 12px; }
.rcard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; }
.rcard-title { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.rcard-del { display: grid; place-items: center; width: 27px; height: 27px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.rcard-del:hover { background: rgba(220,38,38,.12); color: var(--danger); }
.chk-row { display: flex; align-items: center; gap: 1.1rem; padding-top: .5rem; }
.chk { display: inline-flex; align-items: center; gap: .38rem; margin: 0; font-size: .85rem; font-weight: 500; cursor: pointer; }
.chk input { width: auto; margin: 0; }

/* Dar ekranda yapışkan çubuk: ipucu metni yer kaplamasın */
@media (max-width: 620px) {
  .cf-actions { gap: .55rem; padding: .75rem .9rem; }
  .cf-actions .cf-hint { display: none; }
}

/* ============================================================
   BİLDİRİMLER (/bildirimler + üst bar zili)
   ============================================================ */
.tb-bell { position: relative; }
.tb-bell.has-new { color: var(--primary); }
.tb-dot { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .62rem; font-weight: 700; line-height: 16px; text-align: center; }

.nt-list { display: flex; flex-direction: column; gap: .65rem; }
.nt-item { display: flex; align-items: flex-start; gap: .8rem; padding: .85rem 1rem; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--sh-sm); }
.nt-item.is-unread { border-left: 3px solid var(--primary); }
.nt-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; }
.nt-info { background: var(--primary-light); color: var(--primary); }
.nt-success { background: rgba(22,163,74,.12); color: var(--success); }
.nt-warn { background: rgba(217,119,6,.13); color: var(--warn); }
.nt-danger { background: rgba(220,38,38,.12); color: var(--danger); }
.nt-body { flex: 1 1 auto; min-width: 0; }
.nt-body strong { display: block; font-size: .92rem; }
.nt-body p { margin: .2rem 0 .3rem; font-size: .85rem; color: var(--muted); }
.nt-time { font-size: .74rem; color: var(--muted); }
.nt-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.nt-actions form { margin: 0; }
@media (max-width: 620px) { .nt-item { flex-wrap: wrap; } .nt-actions { width: 100%; justify-content: flex-end; } }

/* --- Hata ozeti --- */
.cfrm-alert { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: 1rem; padding: .8rem 1rem; font-size: .87rem; color: var(--danger); background: rgba(220,38,38,.07); border: 1px solid rgba(220,38,38,.28); border-radius: 12px; }
.cfrm-alert strong { display: block; }
.cfrm-alert ul { margin: .35rem 0 0; padding-left: 1.15rem; }
.cfrm-alert li { margin: .12rem 0; }

/* Site geneli doğrulama arayüzünün (form-validate.js) bastığı özet kutusu.
   Satırlar tıklanabilir: tıklayınca ilgili alana gidilir. Kutu belirirken
   hafifçe süzülür — sessizce ortaya çıkıp gözden kaçmasın. */
.cfrm-alert-js { box-shadow: 0 8px 22px rgba(220, 38, 38, .10); }
.cfrm-alert-js > svg { flex: none; margin-top: .1rem; }
.cfrm-alert .cfrm-goto {
  color: inherit; font-weight: 600; text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--danger) 45%, transparent);
  cursor: pointer;
}
.cfrm-alert .cfrm-goto:hover { border-bottom-style: solid; }
@media (prefers-reduced-motion: no-preference) {
  .cfrm-alert-js { animation: cfrmAlertIn .22s ease; }
  /* Odaklanılan hatalı alan bir kez "sallanır" — göz oraya çekilsin */
  .cf-field.has-err input:focus, .cf-field.has-err select:focus,
  .cf-field.has-err textarea:focus { animation: cfrmFieldPulse .5s ease 1; }
}
@keyframes cfrmAlertIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes cfrmFieldPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
  40% { box-shadow: 0 0 0 4px rgba(220, 38, 38, .22); }
}

/* --- Karanlik tema uyarlamalari --- */
html[data-theme="dark"] .cf-field label { color: var(--muted); }
html[data-theme="dark"] button.fsec-head:hover { background: rgba(255,255,255,.035); }
html[data-theme="dark"] .subpanel,
html[data-theme="dark"] .rcard,
html[data-theme="dark"] .rep-empty { background: rgba(255,255,255,.035); }
html[data-theme="dark"] .subpanel.spouse { background: rgba(236,72,153,.09); border-color: rgba(236,72,153,.3); }
html[data-theme="dark"] .seg { background: var(--surface-2); }
html[data-theme="dark"] .seg-opt input:checked + span { background: var(--surface-3); }
html[data-theme="dark"] .tgl-ui { background: #33405a; }
html[data-theme="dark"] .cfrm-alert { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.3); }
html[data-theme="dark"] .cf-field.has-err input:not([type=checkbox]):not([type=radio]),
html[data-theme="dark"] .cf-field.has-err select,
html[data-theme="dark"] .cf-field.has-err textarea {
  border-color: var(--danger); background-color: rgba(248,113,113,.07); box-shadow: 0 0 0 3px rgba(248,113,113,.16);
}

/* ============================================================
   DASHBOARD — KURUMSAL / PREMIUM KATMAN
   Mevcut .dash-* iskeletini bozmadan üstüne biner: hero şerit,
   kart aksanları ve WP hasadıyla gelen yeni panellerin (görev
   özeti, üye performansı, sıralama, komisyon, poliçe listeleri)
   stilleri.
   ============================================================ */

/* Rakamlar hizalı okunsun */
.dash .stat-big, .dash .wt-num, .dash .dh-val, .dash .tk-num,
.dash .num, .dash .lb-val b, .dash .mini-pct { font-variant-numeric: tabular-nums; }

/* --- Hero şerit --- */
.dash-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  margin-bottom: 1rem; padding: 1.15rem 1.4rem;
  background:
    radial-gradient(760px 200px at 100% 0%, rgba(79,70,229,.10), transparent 62%),
    linear-gradient(135deg, #ffffff 0%, #fbfcff 100%);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--sh-sm);
}
.dash-hero::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--brand-grad);
}
/* Paneller daraldıktan sonra selamlama bloğu esneyip satırı doldurur;
   böylece paneller alt satıra kaymıyor ve sağda boşluk kalmıyor. */
.dh-main { flex: 1 1 240px; min-width: 0; }
.dh-eyebrow {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .73rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.dash-hero h1 { margin: .25rem 0 .45rem; font-size: 1.45rem; font-weight: 600; letter-spacing: -.015em; }
.dash-hero h1 strong { font-weight: 800; }
.dh-sub { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.dh-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .17rem .66rem; border-radius: 999px;
  font-size: .755rem; font-weight: 700; letter-spacing: .01em;
  background: var(--primary-light); color: var(--primary);
}
.dh-pill-soft { background: #f1f5f9; color: var(--muted); }
.dh-pill-gold { background: #fef3c7; color: #b45309; }

.dh-stats { display: flex; gap: .5rem; flex-wrap: wrap; }
.dh-stat {
  display: flex; flex-direction: column; gap: .1rem; min-width: 148px;
  padding: .6rem .9rem; border-radius: 12px;
  background: #fbfcfe; border: 1px solid var(--border);
}
.dh-lbl { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.dh-val { font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.dh-meta { font-size: .72rem; color: var(--muted); }
.is-good { color: var(--success); } .is-mid { color: var(--warn); } .is-low { color: var(--danger); }

@media (max-width: 760px) { .dh-stats { width: 100%; } .dh-stat { flex: 1 1 140px; min-width: 0; } }

/* --- Hero içgörü panelleri (projeksiyon · yenileme radarı · büyüme) ---
   Alt kartları tekrar eden üç sayaç yerine geldi; her panel bir başlık,
   bir manşet rakam, bir mini grafik ve iki ölçüm satırından oluşur.
   Üçü aynı iskelette durduğu için göz soldan sağa aynı ritimde okur. */
/* Paneller içerikleri kadar yer kaplar, satırı doldurmak için şişmez —
   eskiden `1fr` ile esneyip içleri boş kalıyordu. */
.dh-insights {
  display: grid; grid-template-columns: repeat(3, minmax(0, 186px));
  gap: .5rem; flex: 0 1 auto; min-width: 0;
}
.dh-ins {
  position: relative; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column; gap: .26rem;
  padding: .55rem .65rem .55rem; border-radius: 13px;
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  border: 1px solid var(--border); box-shadow: var(--sh-sm);
  color: inherit; text-decoration: none;
  /* Panelin tamamı düğme: grafiği modalda büyütür */
  font: inherit; text-align: left; cursor: pointer; appearance: none;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
/* Panelin kimliği: üstte 2px'lik ince aksan şeridi */
.dh-ins::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; opacity: .9;
}
.ins-pace::before  { background: linear-gradient(90deg, #6366f1, #a855f7); }
.ins-radar::before { background: linear-gradient(90deg, #0891b2, #22d3ee); }
.ins-yoy::before   { background: linear-gradient(90deg, #10b981, #34d399); }

/* Tıklanırlık: hover'da panel yükselir, başlık koyulaşır ve sağ üstteki
   büyütme simgesi belirginleşir. Üç panelin tamamı tıklanabilir. */
.dh-ins:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: #c7d2fe; }
.dh-ins:active { transform: translateY(-1px) scale(.995); }
.dh-ins:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dh-ins:hover .di-lbl { color: var(--text); }
.dh-ins:hover .di-zoom { opacity: 1; color: var(--primary); transform: none; }

/* Sağ üstteki büyütme simgesi — "bu panel açılır" işareti */
.di-zoom {
  flex-shrink: 0; display: inline-flex; color: var(--muted); opacity: .42;
  transform: scale(.9);
  transition: opacity .16s ease, color .16s ease, transform .16s ease;
}

/* Başlık satırı: solda etiket, sağda büyütme simgesi */
.di-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-width: 0; }
.di-lbl {
  display: inline-flex; align-items: center; gap: .25rem; min-width: 0;
  /* Dar panelde başlık tek satırda kalsın diye bir tık küçük ve sıkı */
  font-size: .615rem; font-weight: 700; letter-spacing: .025em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.di-lbl svg { flex-shrink: 0; opacity: .75; }
/* Manşet rakam + durum rozeti yan yana, sola toplanır. `space-between`
   ikisini panelin iki ucuna itip aradaki alanı boş bırakıyordu. */
.di-top { display: flex; align-items: baseline; gap: .34rem; min-width: 0; }
.di-badge {
  flex-shrink: 1; min-width: 0; padding: .08rem .38rem; border-radius: 999px;
  font-size: .635rem; font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  background: #f1f5f9; color: var(--muted);
}
.di-badge.is-good { background: rgba(16,185,129,.13); color: #047857; }
.di-badge.is-mid  { background: rgba(245,158,11,.15); color: #b45309; }
.di-badge.is-low  { background: rgba(225,29,72,.11);  color: #be123c; }
.di-badge.is-neutral { background: var(--primary-light); color: var(--primary); }

/* Manşet rakam: ölçek ve ağırlığı dosya sonundaki rafine tipografi bloğundan
   alır (bkz. `.dash .di-val`) — böylece diğer kart rakamlarıyla aynı tonda. */
.di-val { line-height: 1.05; white-space: nowrap; }
/* Birim eki (mn/bin) rakamdan belirgin biçimde küçük ve soluk */
.di-val .un { font-size: .5em; font-weight: 500; font-style: normal; opacity: .55; margin-left: .18em; letter-spacing: .02em; }

.di-rows { display: flex; flex-direction: column; gap: .1rem; margin-top: auto; }
.di-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  font-size: .715rem; color: var(--muted); min-width: 0;
  /* Panel içinde `<span>` olarak basılır (button yalnız satır içi içerik alır) */
  padding-top: .18rem; border-top: 1px solid var(--border);
}
.di-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.di-row b { flex-shrink: 0; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.di-row.pos b  { color: var(--success); }
.di-row.neg b  { color: var(--danger); }
.di-row.warn b { color: var(--warn); }
.di-row.info b { color: var(--primary); }
.di-row b .cur { font-size: .8em; font-weight: 600; opacity: .6; }
.di-row b .un  { font-size: .78em; font-weight: 600; font-style: normal; opacity: .65; margin-left: .1em; }

/* Paneller 186px'e indiği için 1050px'lik içerik alanında bile selamlamanın
   yanına sığıyor; alt satıra inme eşiği bu yüzden 1180'den 880'e çekildi.
   Alt satıra indiğinde kolonlar `1fr` olur ki sağda boşluk kalmasın. */
@media (max-width: 880px) {
  .dh-insights { flex: 1 1 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) { .dh-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .dh-insights { grid-template-columns: 1fr; } }

/* ============================================================
   BUGÜN NELER OLUYOR? — canlı bildirim şeridi (.lfd)
   ============================================================
   İki ekranda aynı bileşen, iki ölçü:
     .lfd-hero  Panel hero'sunda, içgörü panellerinin SOLUNDA (2 satır)
     .lfd-kpi   BUGÜNÜM günün karnesinde, ilk sütunda iki satır boyu (3 satır)

   Satır yüksekliği CSS'ten (`--lfd-row`) gelir ve SABİTTİR: şeridi
   döndüren betik bir satır kadar kaydırıp ilk satırı sona atıyor
   (public/js/live-feed.js). Satırlar farklı boyda olsaydı her adımda
   zıplardı — metin bu yüzden taşmaz, kırpılır. */
.lfd {
  --lfd-row: 44px;
  --lfd-rows: 2;
  position: relative; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column;
  padding: .45rem .5rem .5rem; border-radius: 13px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  border: 1px solid var(--border); box-shadow: var(--sh-sm);
}
/* Üstteki aksan şeridi tek renk DEĞİL: panel yedi ayrı olay tipini
   taşıyor, şerit de bunu söylüyor. */
.lfd::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; opacity: .95;
  background: linear-gradient(90deg, #6366f1, #0891b2 32%, #10b981 58%, #a855f7 82%, #e11d48);
}
/* Yeni kayıt düşünce panel bir kez ışır (js: .is-hit) */
.lfd { --lfd-hit: 99,102,241; }
.lfd.is-hit { animation: lfdHit 1.5s ease; }
@keyframes lfdHit {
  0%   { box-shadow: 0 0 0 0 rgba(var(--lfd-hit), .34); }
  70%  { box-shadow: 0 0 0 7px rgba(var(--lfd-hit), 0); }
  100% { box-shadow: var(--sh-sm); }
}

.lfd-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-width: 0; }
.lfd-ttl {
  display: inline-flex; align-items: center; gap: .25rem; min-width: 0;
  font-size: .615rem; font-weight: 700; letter-spacing: .025em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lfd-ttl svg { flex-shrink: 0; opacity: .75; }
.lfd-cnt {
  display: inline-flex; align-items: center; gap: .28rem; flex-shrink: 0;
  font-size: .625rem; font-weight: 600; color: var(--muted);
}
.lfd-cnt b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
/* Nabız: şeridin canlı olduğunu rakam göstermeden söyler (liveDot ile aynı dil) */
.lfd-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--success, #10b981);
  animation: liveDot 2.6s ease-out infinite;
}

/* "Tümünü Gör" — sayacın yerini alır (203 px'lik panelde ikisi sığmaz).
   Fare panelde ya da odak içerideyken görünür; kapalıyken `visibility`
   ile gerçekten erişilemez olur, ekran okuyucu boş bağlantı okumasın. */
.lfd-cnt, .lfd-all { transition: opacity .16s ease; }
.lfd-all {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: .1rem; flex-shrink: 0;
  font-size: .625rem; font-weight: 700; color: var(--primary);
  text-decoration: none; white-space: nowrap;
  opacity: 0; visibility: hidden;
}
.lfd-all svg { opacity: .8; }
.lfd:hover .lfd-cnt, .lfd:focus-within .lfd-cnt { opacity: 0; }
.lfd:hover .lfd-all, .lfd:focus-within .lfd-all { opacity: 1; visibility: visible; }
.lfd-all:hover { text-decoration: underline; }
.lfd-all:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }

/* Dönen pencere: yüksekliği KESİN — satır sayısı × satır yüksekliği.
   `min-height` + `flex-grow` denendi ve yanlıştı: şeritte 24 satır var,
   yükseklik içeriğe bırakılınca panel 1000 px'e uzuyor ve BUGÜNÜM'de
   yanındaki KPI kutularını da beraberinde şişiriyordu. Yükseklik satır
   sayısından geliyor; kaç kayıt olduğu düzeni hiç etkilemiyor. */
.lfd-view {
  position: relative; flex: 0 0 auto; overflow: hidden; margin-top: .3rem;
  height: calc(var(--lfd-rows) * var(--lfd-row));
}
.lfd-track { display: block; will-change: transform; }

/* --- Satır --- */
.lfd-i {
  --tc: #64748b; --tb: rgba(100,116,139,.12);
  position: relative; display: grid; align-content: center;
  grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: .42rem; row-gap: .05rem;
  height: var(--lfd-row); padding: 0 .12rem; box-sizing: border-box;
  border-top: 1px solid var(--border);
  color: inherit; text-decoration: none;
  transition: background .16s ease, transform .16s ease;
}
.lfd-track > .lfd-i:first-child { border-top: 0; }
a.lfd-i:hover { background: var(--primary-light); transform: translateX(2px); }
a.lfd-i:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 8px; }
/* Bugün olmayan satır soluk: şerit "bugün" diyorsa dünü ondan ayırmalı */
.lfd-i.is-old { opacity: .58; }

.lfd-ic {
  grid-row: 1 / span 2; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 7px;
  background: var(--tb); color: var(--tc);
}
.lfd-ic svg { flex-shrink: 0; }

.lfd-l1 { display: flex; align-items: baseline; gap: .3rem; min-width: 0; }
.lfd-n {
  flex: 1 1 auto; min-width: 0; font-size: .735rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lfd-at {
  flex: none; font-size: .625rem; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.lfd-l2 { display: flex; align-items: baseline; gap: .3rem; min-width: 0; }
.lfd-tag {
  flex: none; font-style: normal; font-size: .625rem; font-weight: 700; color: var(--tc);
  white-space: nowrap;
}
.lfd-m {
  flex: 1 1 auto; min-width: 0; font-size: .655rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lfd-v {
  flex: none; font-size: .67rem; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.lfd-i.t-iptal .lfd-v { color: var(--danger); }
.lfd-v[hidden] { display: none; }

/* Olay tipleri — yedi ayrı renk. Renk hem ikon kutusunda hem etikette:
   kullanıcı satırı okumadan "yine poliçe" diyebilsin.
   Aynı tonlar "Neler Olmuş?" ekranındaki satır ve kutularda da geçerli
   (.nol-row/.nol-card): iki ekran aynı olayı aynı renkle söylesin. */
.lfd-i.t-indigo,  .nol-row.t-indigo,  .nol-card.t-indigo  { --tc: #4f46e5; --tb: rgba(99,102,241,.13); }
.lfd-i.t-cyan,    .nol-row.t-cyan,    .nol-card.t-cyan    { --tc: #0e7490; --tb: rgba(8,145,178,.13); }
.lfd-i.t-rose,    .nol-row.t-rose,    .nol-card.t-rose    { --tc: #be123c; --tb: rgba(225,29,72,.11); }
.lfd-i.t-blue,    .nol-row.t-blue,    .nol-card.t-blue    { --tc: #1d4ed8; --tb: rgba(37,99,235,.12); }
.lfd-i.t-violet,  .nol-row.t-violet,  .nol-card.t-violet  { --tc: #7e22ce; --tb: rgba(168,85,247,.13); }
.lfd-i.t-emerald, .nol-row.t-emerald, .nol-card.t-emerald { --tc: #047857; --tb: rgba(16,185,129,.14); }
.lfd-i.t-slate,   .nol-row.t-slate,   .nol-card.t-slate   { --tc: #475569; --tb: rgba(100,116,139,.13); }

/* --- "YENİ" işareti ---
   Rozet 90 saniye durur (js), sonra söner: her satır sürekli "yeni"
   görünseydi rozetin ayırt ediciliği kalmazdı. */
.lfd-new {
  flex: none; padding: .06rem .3rem; border-radius: 999px;
  font-size: .55rem; font-weight: 800; letter-spacing: .06em; color: #fff;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  box-shadow: 0 1px 4px rgba(239,68,68,.35);
  animation: lfdNew 1.8s ease-in-out infinite;
}
.lfd-new[hidden] { display: none; }
@keyframes lfdNew { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.lfd-i.is-new { background: linear-gradient(90deg, rgba(245,158,11,.13), transparent 70%); }
/* Rozet çıkınca ad kısalsın, rozet ya da saat kırpılmasın */
.lfd-i.is-new .lfd-n { flex-shrink: 1; }
.lfd-i.is-fresh { animation: lfdIn .55s cubic-bezier(.22,1,.36,1); }
@keyframes lfdIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* --- Dönüş çubuğu: sıradaki satıra kalan süre --- */
.lfd-bar { display: block; height: 2px; margin-top: .3rem; border-radius: 2px; background: var(--border); overflow: hidden; }
.lfd-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #6366f1, #22d3ee);
  animation: lfdBar var(--lfd-int, 4200ms) linear infinite;
}
@keyframes lfdBar { from { width: 0; } to { width: 100%; } }
.lfd.is-paused .lfd-bar i { animation-play-state: paused; }
/* Dönmeyen şeritte (tek satır, hareket azaltma) çubuk yanıltmasın */
.lfd.is-static .lfd-bar { visibility: hidden; }

.lfd-empty {
  position: absolute; inset: 0; display: flex; align-items: center; gap: .45rem;
  padding: 0 .1rem; color: var(--muted); font-size: .68rem; line-height: 1.35;
}
.lfd-empty[hidden] { display: none; }
.lfd-empty svg { flex: none; opacity: .5; }
.lfd-empty i { font-style: normal; opacity: .75; }

/* Hareket azaltma: şerit dönmez, liste kaydırılabilir olur —
   kayıtlara erişim animasyona bağlı kalmasın. */
.lfd.is-static .lfd-view { overflow-y: auto; }

/* --- Yerleşim 1: Panel hero'su --- */
/* Akış paneli içgörü panellerinden geniş (300px): iki satır metin taşıyor,
   186px'te ad da tutar da kırpılırdı. Diğer paneller boyuna esnemesin diye
   ızgara ortalar; akış kendi yüksekliğini kendi söyler. */
.dh-insights.has-feed { grid-template-columns: minmax(0, 300px) repeat(3, minmax(0, 186px)); align-items: center; }
/* Dörtlü sıra ~1425 px'in altında selamlamanın yanına sığmıyor ve alt satıra
   iniyor. O hâlde sabit genişlikte kalırsa sağda 60-70 px boşluk kalıyordu;
   satırı tümüyle dolduruyoruz — akış paneli yine en geniş sütun. */
@media (max-width: 1440px) {
  .dh-insights.has-feed { flex: 1 1 100%; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .dh-insights.has-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dh-insights.has-feed .lfd { grid-column: 1 / -1; }
}

/* --- Yerleşim 2: BUGÜNÜM günün karnesi --- */
/* Dördüncü sütun eklenir ve akış ilk sütunda İKİ SATIR boyu durur:
   solunda "Bugünkü Prim", altında "Bugünkü Görüşme" kalır. */
.md-hero .md-daykpi.has-feed { grid-template-columns: repeat(4, minmax(140px, 1fr)); }
/* İki satır boyu: yüksekliği ızgara verir (span 2), içerik değil. Artan
   birkaç piksel başlık/çubuk arasına dağılır (`justify-content`).

   `width: 0` + `min-width: 100%` şart: sütunlar `1fr`, yani hepsi EŞİT ve
   genişliği en geniş sütunun içeriği belirliyor. Akış satırları uzun metin
   taşıdığı için (ad + tür + şirket + tutar) panel bütün sütunları kendi
   ölçüsüne çekiyor ve KPI kutuları 203 px'den 296 px'e şişiyordu. Genişliği
   panel DEĞİL kutular söylesin: panelin içerik katkısı sıfırlanır, sonra
   sütun ne kadarsa o kadar genişler. Kullanıcı isteği zaten "kutularla aynı
   genişlik"ti; bu kural onu kutuların lehine çözer. */
/* Satır sayısı (`--lfd-rows`) görünümden geliyor: partial her panele
   `style="--lfd-rows: N"` basıyor, tek kaynak orası. */
.md-daykpi.has-feed .lfd-kpi { grid-row: span 2; justify-content: space-between; }
/* Genişliği KUTULAR söyler, panel değil.
   Sütunlar `1fr`, yani hepsi eşit ve en geniş içerik neyse o kazanıyor;
   akış satırları uzun metin taşıdığı için panel bütün sütunları kendine
   çekiyor ve altı KPI kutusu 203 px'den 296 px'e şişiyordu.
   Sıfırlama panelin KENDİSİNDE değil İÇİNDE: `width:0` bir ızgara
   öğesine verilince yüzdelik `min-width`in neye göre çözüleceği tarayıcıya
   kalıyor. Şerit ve başlık normal blok kaplarının içinde durduğu için
   burada yüzde her yerde aynı şeyi ifade eder; panel de sıradan bir
   ızgara öğesi olarak sütununu doldurur (= kutularla birebir aynı en). */
.lfd-kpi .lfd-track,
.lfd-kpi .lfd-head { width: 0; min-width: 100%; }
/* Dar ekranda dördüncü sütun sığmıyor. Akış üç sütunun içine sıkıştırılmaz;
   TAM GENİŞLİKTE üst şeride çıkar ve altındaki altı kutu eski düzenine döner
   (3×2). Sıkıştırılsaydı kutular kaymaya başlar, "Bugünkü Prim'in altında
   Bugünkü Görüşme" ilişkisi bozulurdu. */
@media (max-width: 1150px) {
  .md-hero .md-daykpi.has-feed { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
  .md-daykpi.has-feed .lfd-kpi { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 700px) {
  .md-hero .md-daykpi.has-feed { grid-template-columns: 1fr 1fr; }
  .md-daykpi.has-feed .lfd-kpi { grid-column: 1 / -1; grid-row: auto; height: auto; }
}

/* ============================================================
   NELER OLMUŞ? — şeridin tam sayfa hâli (.nol)
   ============================================================
   Şeritle aynı görsel dili konuşur: aynı yedi ton, aynı ikonlar, aynı
   satır ritmi. Fark ölçüde: burada satır nefes alır (tek satırda ad +
   tür + ayrıntı + temsilci + tutar) ve gün başlıkları listeyi böler. */

/* --- Özet kutuları: hem sayaç hem tür süzgeci --- */
.nol-sum {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: .55rem; margin-bottom: .9rem;
}
.nol-card {
  --tc: #64748b; --tb: rgba(100,116,139,.12);
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto;
  column-gap: .5rem; row-gap: 0; align-content: center;
  padding: .6rem .7rem; border-radius: 13px;
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  border: 1px solid var(--border); box-shadow: var(--sh-sm);
  color: inherit; text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.nol-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--tc); opacity: .85;
}
.nol-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--tc); }
.nol-card:focus-visible { outline: 2px solid var(--tc); outline-offset: 2px; }
/* Seçili tür: kutu kendi rengiyle dolar — hangi süzgecin açık olduğu
   listeye bakmadan görülsün */
.nol-card.is-on { background: var(--tb); border-color: var(--tc); }
.nol-card.is-on::before { height: 3px; opacity: 1; }
.nol-cic {
  grid-row: 1 / span 2; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; background: var(--tb); color: var(--tc);
}
.nol-cn { font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.nol-cl { font-size: .68rem; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Aralık çubuğu (BUGÜNÜM süzgeç şeridiyle aynı biçim) --- */
.nol-bar { margin-bottom: .9rem; }

/* --- Gün blokları --- */
.nol-day {
  margin-bottom: .9rem; border: 1px solid var(--border); border-radius: 14px;
  background: var(--card, #fff); box-shadow: var(--sh-sm); overflow: hidden;
}
.nol-dhead {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding: .55rem .85rem; background: #f8fafc; border-bottom: 1px solid var(--border);
}
.nol-dhead b { font-size: .84rem; font-weight: 800; letter-spacing: -.01em; }
.nol-dhead span { font-size: .72rem; color: var(--muted); }
.nol-dhead em { margin-left: auto; font-style: normal; font-size: .7rem; font-weight: 700; color: var(--muted); }

.nol-list { list-style: none; margin: 0; padding: 0; }
.nol-list > li + li .nol-row { border-top: 1px solid var(--border); }

.nol-row {
  --tc: #64748b; --tb: rgba(100,116,139,.12);
  display: grid; grid-template-columns: 44px 28px minmax(0, 1fr) auto;
  align-items: center; gap: .55rem;
  padding: .5rem .85rem; color: inherit; text-decoration: none;
  transition: background .14s ease;
}
a.nol-row:hover { background: var(--primary-light); }
a.nol-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.nol-time {
  font-size: .7rem; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums; text-align: right;
}
.nol-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9px; background: var(--tb); color: var(--tc);
}
.nol-body { min-width: 0; display: flex; flex-direction: column; gap: .08rem; }
.nol-l1 { display: flex; align-items: baseline; gap: .4rem; min-width: 0; }
.nol-n { font-size: .8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nol-tag {
  flex: none; font-style: normal; font-size: .64rem; font-weight: 700; color: var(--tc);
  padding: .05rem .35rem; border-radius: 999px; background: var(--tb);
}
.nol-l2 { display: flex; align-items: baseline; gap: .45rem; min-width: 0; font-size: .705rem; color: var(--muted); }
.nol-m { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nol-w { display: inline-flex; align-items: center; gap: .18rem; flex: none; font-style: normal; opacity: .85; }
.nol-w svg { opacity: .7; }
.nol-v { font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nol-row.t-rose .nol-v { color: var(--danger); }

.nol-more { display: flex; align-items: center; gap: .6rem; justify-content: center; padding: .2rem 0 1rem; }
.nol-more span { font-size: .72rem; color: var(--muted); }
.nol-blank { margin-bottom: 1rem; }

@media (max-width: 640px) {
  .nol-row { grid-template-columns: 38px 26px minmax(0, 1fr); row-gap: .2rem; }
  .nol-v { grid-column: 3; justify-self: start; }
  .nol-sum { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); }
}

/* --- Hero grafiğinin modaldaki büyük hâli (Core\Chart) --- */
.hero-charts[hidden] { display: none; }      /* sayfada duran kaynak blok */
.hc-chart {
  padding: .35rem .3rem .1rem; border-radius: 12px;
  background: linear-gradient(180deg, #fcfdff, #ffffff);
  border: 1px solid var(--border);
}
/* Oranı korunan büyük grafik: viewBox'a göre esner, bozulmaz */
.chart-lg { display: block; width: 100%; height: auto; cursor: crosshair; }
.chart-lg .ch-grid { stroke: var(--border); stroke-width: 1; }
.chart-lg .ch-base { stroke: #cbd5e1; stroke-width: 1.2; }
.chart-lg .ch-axis {
  fill: var(--muted); font-size: 10.5px; font-weight: 500;
  font-family: inherit; font-variant-numeric: tabular-nums;
}
.chart-lg .ch-val {
  fill: var(--muted); font-size: 10.5px; font-weight: 600;
  font-family: inherit; font-variant-numeric: tabular-nums;
}
/* En yoğun sütunun değeri koyu — göz önce oraya gider */
.chart-lg .ch-val.is-peak { fill: var(--text); font-weight: 700; font-size: 11.5px; }
.chart-lg .ch-chip { fill: #f1f5f9; stroke: var(--border); stroke-width: 1; }
.chart-lg .ch-chip-t {
  fill: var(--muted); font-size: 9.5px; font-weight: 700;
  font-family: inherit; text-transform: uppercase; letter-spacing: .04em;
}
.chart-lg .ch-dot { stroke: var(--card); }
.chart-lg .sp-bar { transition: opacity .12s ease; }
.ch-empty { margin: 0; padding: 2rem 0; text-align: center; color: var(--muted); font-size: .85rem; }

html[data-theme="dark"] .chart-lg .ch-base { stroke: #33456a; }
html[data-theme="dark"] .chart-lg .ch-chip { fill: var(--surface-3); stroke: var(--border); }
/* Gösterge: düz metin yerine hafif çerçeveli rozetler */
.hc-keys {
  display: flex; flex-wrap: wrap; gap: .35rem; margin: .7rem 0 .1rem;
  font-size: .715rem; color: var(--muted);
}
.hc-keys span {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .58rem .2rem .5rem; border-radius: 999px;
  background: #f7f9fc; border: 1px solid var(--border); font-weight: 600;
}
.hc-keys i { width: 16px; height: 0; flex-shrink: 0; border-top: 2px solid currentColor; opacity: .9; }
.hc-keys .hk-line { border-top-color: #6366f1; }
.hc-keys .hk-cur  { border-top-color: #10b981; }
.hc-keys .hk-dash { border-top-style: dashed; border-top-color: #94a3b8; }
.hc-keys .hk-bar  { height: 11px; border: 0; border-radius: 2px; background: #0891b2; }

/* Açıklama: sol kenarı markaya boyalı yumuşak bilgi kutusu */
.hc-note {
  margin: .55rem 0 1rem; padding: .6rem .8rem;
  font-size: .775rem; line-height: 1.6; color: var(--muted);
  background: linear-gradient(180deg, #fafbff, #f6f8fd);
  border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: 4px 10px 10px 4px;
}
.hc-note em { font-style: normal; font-weight: 700; color: var(--text); }

/* Bölüm başlığı — grafik ile tablo arasını ayırır */
.hc-sec {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .4rem; font-size: .655rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.hc-sec::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* Ölçüm tablosu: çerçeveli, zebra, imleçle aydınlanan satırlar */
.hc-rows {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 11px; overflow: hidden;
  background: var(--card);
}
.hc-rows .di-row {
  font-size: .8rem; padding: .5rem .8rem;
  border-top: 1px solid var(--border); border-bottom: 0;
  transition: background .13s ease;
}
.hc-rows .di-row:first-child { border-top: 0; }
.hc-rows .di-row:nth-child(even) { background: #fafbfe; }
.hc-rows .di-row:hover { background: var(--primary-light); }
.hc-rows .di-row:hover > span { color: var(--text); }
.hc-rows .di-row b { font-size: .875rem; font-weight: 600; }
/* Vurgulu satır: panelin manşetine karşılık gelen ölçüm */
.hc-rows .di-row.is-key { background: var(--primary-light); }
.hc-rows .di-row.is-key > span { color: var(--text); font-weight: 600; }
.hc-rows .di-row.is-key b { font-size: .95rem; font-weight: 700; }

html[data-theme="dark"] .hc-keys span { background: var(--surface-3); border-color: var(--border); }
html[data-theme="dark"] .hc-note {
  background: linear-gradient(180deg, var(--surface-2), #101b2c);
  /* border-color tüm kenarları ezdiği için marka rengi sol kenar yeniden verilir */
  border-color: var(--border); border-left-color: var(--primary);
}
html[data-theme="dark"] .hc-rows { background: var(--surface-2); }
html[data-theme="dark"] .hc-rows .di-row:nth-child(even) { background: rgba(255,255,255,.025); }
html[data-theme="dark"] .hc-rows .di-row:hover,
html[data-theme="dark"] .hc-rows .di-row.is-key { background: rgba(52,211,153,.11); }
.hc-link {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .85rem;
  padding: .5rem .9rem; border-radius: 9px;
  background: var(--primary-light); color: var(--primary);
  font-size: .82rem; font-weight: 700; text-decoration: none;
}
.hc-link:hover { background: var(--primary); color: #fff; }

html[data-theme="dark"] .hc-chart {
  background: linear-gradient(180deg, var(--surface-2), #101b2c); border-color: var(--border);
}
html[data-theme="dark"] .hc-link { background: var(--primary-light); color: #6ee7b7; }
html[data-theme="dark"] .hc-link:hover { background: var(--primary); color: #06231a; }

/* --- Kart aksanları + yükselme --- */
.dash .dash-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--sh-sm);
  transition: box-shadow .18s ease;
}
.dash .dash-card:hover { box-shadow: var(--sh-md); }
.dash .dash-card[class*="accent-"]::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; opacity: .9;
}
.accent-primary::before { background: linear-gradient(90deg, #4f46e5, #7c3aed); }
.accent-blue::before    { background: linear-gradient(90deg, #2563eb, #38bdf8); }
.accent-green::before   { background: linear-gradient(90deg, #16a34a, #4ade80); }
.accent-purple::before  { background: linear-gradient(90deg, #7c3aed, #c084fc); }
.accent-cyan::before    { background: linear-gradient(90deg, #0891b2, #22d3ee); }
.accent-amber::before   { background: linear-gradient(90deg, #d97706, #fbbf24); }
.accent-red::before     { background: linear-gradient(90deg, #dc2626, #fb7185); }
.accent-gold::before    { background: linear-gradient(90deg, #b45309, #fbbf24, #fde68a); }
.accent-emerald::before { background: linear-gradient(90deg, #059669, #34d399); }

.dash .card-head h3 { font-size: .93rem; font-weight: 700; letter-spacing: -.005em; }
.dash .card-head h3 svg { color: var(--primary); }
.head-link { font-size: .76rem; font-weight: 600; color: var(--primary); white-space: nowrap; }
.head-actions { display: inline-flex; align-items: center; gap: .5rem; }
.head-add {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px;
  background: var(--primary-light); color: var(--primary); text-decoration: none !important;
}
.head-add:hover { background: var(--primary); color: #fff; }

/* Üretim kartı iyileştirmeleri */
.target-sub.done { color: var(--success); font-weight: 600; }
.comm-line { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .45rem 0; font-size: .84rem; color: #42526b; border-bottom: 1px dashed var(--border); }
.comm-line:last-child { border-bottom: 0; }
.comm-line b { font-size: 1rem; font-weight: 800; color: var(--text); }
.comm-line.sub b { font-size: .88rem; }
.neg { color: var(--danger); }

/* --- Hızlı erişim kutucukları --- */
.dash .wtile {
  position: relative; border-radius: 10px; padding: .55rem .7rem;
  box-shadow: 0 2px 6px rgba(15,23,42,.14);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.dash .wtile:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(15,23,42,.2); opacity: 1; filter: saturate(1.08); }
.wt-sub { font-size: .66rem; opacity: .85; margin-top: .05rem; }
.wt-gold { background: linear-gradient(135deg, #f59e0b, #d97706); }
.wt-violet { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.wt-royal { background: linear-gradient(135deg, #2563eb, #1e40af); }
.wt-pink { background: linear-gradient(135deg, #ec4899, #f43f5e); }

/* --- Ekip görev yönetimi --- */
.tk-panel { margin-bottom: 1rem; }
.tk-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; }
@media (max-width: 1100px) { .tk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .tk-grid { grid-template-columns: 1fr; } }
.tk-card {
  position: relative; display: flex; flex-direction: column; gap: .12rem;
  padding: .8rem .9rem .7rem; border-radius: 12px;
  background: #fbfcfe; border: 1px solid var(--border);
  text-decoration: none !important; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tk-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.tk-ico { position: absolute; top: .7rem; right: .75rem; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; }
.tk-num { font-size: 1.6rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.tk-lbl { font-size: .78rem; color: var(--muted); font-weight: 600; }
.tk-cta { margin-top: .35rem; font-size: .71rem; font-weight: 700; color: var(--primary); }
.tk-total  { border-color: #dbeafe; } .tk-total .tk-ico  { background: #dbeafe; color: #1d4ed8; } .tk-total .tk-num  { color: #1d4ed8; }
.tk-done   { border-color: #dcfce7; } .tk-done .tk-ico   { background: #dcfce7; color: #15803d; } .tk-done .tk-num   { color: #15803d; }
.tk-late   { border-color: #fee2e2; } .tk-late .tk-ico   { background: #fee2e2; color: #b91c1c; } .tk-late .tk-num   { color: #b91c1c; }
.tk-today  { border-color: #cffafe; } .tk-today .tk-ico  { background: #cffafe; color: #0e7490; } .tk-today .tk-num  { color: #0e7490; }
.tk-tmrw   { border-color: #ede9fe; } .tk-tmrw .tk-ico   { background: #ede9fe; color: #6d28d9; } .tk-tmrw .tk-num   { color: #6d28d9; }

.tk-breakdown { margin-top: .95rem; padding-top: .85rem; border-top: 1px solid var(--border); }
.tk-breakdown h4 { margin: 0 0 .6rem; font-size: .82rem; font-weight: 700; }
.tk-breakdown h4 svg { color: var(--muted); }
.tk-reps { display: flex; flex-wrap: wrap; gap: .45rem; }
.tk-rep {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .32rem .7rem; border-radius: 999px;
  background: #f8fafc; border: 1px solid var(--border); font-size: .79rem;
}
.tk-rep-name { font-weight: 600; }
.tk-rep-count { color: var(--primary); font-weight: 700; font-size: .74rem; }

/* --- Üye performansı --- */
.mperf-card { margin-bottom: 1rem; }
.mperf-table td { vertical-align: middle; }
.mperf-table tr.is-me td { background: var(--primary-light); }
.mp-name { font-weight: 700; font-size: .87rem; }
.mp-role { font-size: .71rem; color: var(--muted); }
.mini-bar { height: 6px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.mini-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.mini-bar > span.is-good { background: var(--success); }
.mini-bar > span.is-mid  { background: var(--warn); }
.mini-bar > span.is-low  { background: var(--danger); }
.mini-pct { display: inline-block; margin-top: .2rem; font-size: .74rem; font-weight: 700; }

/* --- Sıralama tablosu + hediyeler --- */
.lb-card { display: flex; flex-direction: column; }
.lb-list { display: flex; flex-direction: column; gap: .45rem; }
.lb-row {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .7rem; border-radius: 11px;
  background: #f8fafc; border-left: 3px solid #cbd5e1;
}
.lb-row.rank-1 { border-left-color: #f59e0b; background: linear-gradient(90deg, rgba(251,191,36,.13), #f8fafc 55%); }
.lb-row.rank-2 { border-left-color: #94a3b8; }
.lb-row.rank-3 { border-left-color: #b45309; }
.lb-row.is-me { box-shadow: inset 0 0 0 1px var(--primary); }
.lb-rank { font-size: 1.1rem; min-width: 24px; text-align: center; }
.lb-info { flex: 1; min-width: 0; }
.lb-name { display: block; font-size: .84rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-name em { font-style: normal; color: var(--primary); font-weight: 600; }
.lb-meta { display: flex; align-items: center; gap: .35rem; font-size: .71rem; color: var(--muted); }
.lb-badges { display: inline-flex; align-items: center; gap: .12rem; }
.lb-val { text-align: right; }
.lb-val b { display: block; font-size: .86rem; font-weight: 800; color: var(--primary); }
.lb-val span { font-size: .69rem; color: var(--muted); }

.lb-rewards { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.lb-rewards h4 { margin: 0 0 .55rem; font-size: .8rem; font-weight: 700; }
.lb-rewards h4 svg { color: #ec4899; }
.lb-reward { margin-bottom: .5rem; }
.lb-reward-top { display: flex; justify-content: space-between; gap: .6rem; margin-bottom: .22rem; font-size: .74rem; font-weight: 600; }

/* --- Broker komisyon özeti --- */
.comm-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; margin-bottom: .85rem; }
.comm-summary > div { padding: .5rem .7rem; border-radius: 10px; background: #f8fafc; border: 1px solid var(--border); }
.comm-summary span { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.comm-summary b { font-size: .98rem; font-weight: 800; }
@media (max-width: 700px) { .comm-summary { grid-template-columns: repeat(2, 1fr); } }

/* --- Poliçe listeleri --- */
.pl-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1400px) { .pl-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px)  { .pl-row { grid-template-columns: 1fr; } }
.pl-table { font-size: .8rem; }
.pl-table th { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.pl-table td { padding: .5rem .45rem; vertical-align: middle; }
.pl-table tbody tr:hover td { background: #f9fbfe; }
.pl-table tr.pl-urgent td { box-shadow: inset 3px 0 0 var(--danger); }
.pl-table tr.pl-soon td { box-shadow: inset 3px 0 0 var(--warn); }
.pl-cust a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.pl-ico { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 6px; flex-shrink: 0; }
.pl-m { background: #dbeafe; color: #2563eb; } .pl-f { background: #fce7f3; color: #be185d; }
.pl-n { background: #eef1f5; color: #64748b; } .pl-corp { background: #e2e8f0; color: #475569; }
.pl-rep { display: block; margin-top: .12rem; font-size: .68rem; color: var(--muted); }
.pl-days { display: block; font-size: .67rem; color: var(--muted); }
.pl-empty {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: 1.8rem 1rem; text-align: center; color: var(--muted);
}
.pl-empty svg { color: #cbd5e1; margin-bottom: .3rem; }
.pl-empty strong { font-size: .87rem; color: var(--text); }
.pl-empty span { font-size: .77rem; }

/* --- Karanlık tema uyarlamaları --- */
html[data-theme="dark"] .dash-hero {
  background:
    radial-gradient(760px 200px at 100% 0%, rgba(16,185,129,.10), transparent 62%),
    linear-gradient(135deg, var(--card) 0%, #101b2c 100%);
  border-color: var(--border);
}
html[data-theme="dark"] .dh-stat,
html[data-theme="dark"] .tk-card,
html[data-theme="dark"] .tk-rep,
html[data-theme="dark"] .lb-row,
html[data-theme="dark"] .comm-summary > div { background: var(--surface-2); border-color: var(--border); }
html[data-theme="dark"] .dh-pill-soft { background: var(--surface-3); color: var(--muted); }
html[data-theme="dark"] .dh-pill-gold { background: rgba(251,191,36,.16); color: #fcd34d; }
/* Hero içgörü panelleri */
html[data-theme="dark"] .dh-ins {
  background: linear-gradient(180deg, var(--surface-2) 0%, #101b2c 100%);
  border-color: var(--border);
}
html[data-theme="dark"] .dh-ins:hover { border-color: rgba(52,211,153,.42); }
/* Canlı bildirim şeridi — koyu temada zeminler koyulaşır, olay renkleri
   ise AÇILIR: aynı hue koyu zeminde okunmuyor. */
html[data-theme="dark"] .lfd {
  background: linear-gradient(180deg, var(--surface-2) 0%, #101b2c 100%);
  border-color: var(--border);
}
html[data-theme="dark"] .lfd-i { border-top-color: var(--border); }
html[data-theme="dark"] a.lfd-i:hover { background: rgba(148,163,184,.10); }
html[data-theme="dark"] .lfd-bar { background: var(--surface-3); }
html[data-theme="dark"] .lfd-i.t-indigo,
html[data-theme="dark"] .nol-row.t-indigo,
html[data-theme="dark"] .nol-card.t-indigo  { --tc: #a5b4fc; --tb: rgba(99,102,241,.20); }
html[data-theme="dark"] .lfd-i.t-cyan,
html[data-theme="dark"] .nol-row.t-cyan,
html[data-theme="dark"] .nol-card.t-cyan    { --tc: #67e8f9; --tb: rgba(8,145,178,.22); }
html[data-theme="dark"] .lfd-i.t-rose,
html[data-theme="dark"] .nol-row.t-rose,
html[data-theme="dark"] .nol-card.t-rose    { --tc: #fda4af; --tb: rgba(225,29,72,.20); }
html[data-theme="dark"] .lfd-i.t-blue,
html[data-theme="dark"] .nol-row.t-blue,
html[data-theme="dark"] .nol-card.t-blue    { --tc: #93c5fd; --tb: rgba(37,99,235,.22); }
html[data-theme="dark"] .lfd-i.t-violet,
html[data-theme="dark"] .nol-row.t-violet,
html[data-theme="dark"] .nol-card.t-violet  { --tc: #d8b4fe; --tb: rgba(168,85,247,.22); }
html[data-theme="dark"] .lfd-i.t-emerald,
html[data-theme="dark"] .nol-row.t-emerald,
html[data-theme="dark"] .nol-card.t-emerald { --tc: #6ee7b7; --tb: rgba(16,185,129,.20); }
html[data-theme="dark"] .lfd-i.t-slate,
html[data-theme="dark"] .nol-row.t-slate,
html[data-theme="dark"] .nol-card.t-slate   { --tc: #cbd5e1; --tb: rgba(148,163,184,.18); }
/* "Neler Olmuş?" — koyu temada yüzeyler */
html[data-theme="dark"] .nol-card,
html[data-theme="dark"] .nol-day { background: var(--surface-2); border-color: var(--border); }
html[data-theme="dark"] .nol-card.is-on { background: rgba(148,163,184,.12); }
html[data-theme="dark"] a.nol-row:hover { background: rgba(148,163,184,.10); }
html[data-theme="dark"] .nol-dhead { background: var(--surface-3); border-color: var(--border); }
html[data-theme="dark"] .lfd-i.is-new { background: linear-gradient(90deg, rgba(245,158,11,.18), transparent 70%); }
html[data-theme="dark"] .lfd { --lfd-hit: 52,211,153; }
html[data-theme="dark"] .di-badge { background: var(--surface-3); color: var(--muted); }
html[data-theme="dark"] .di-badge.is-good { background: rgba(52,211,153,.16); color: #6ee7b7; }
html[data-theme="dark"] .di-badge.is-mid  { background: rgba(251,191,36,.16); color: #fcd34d; }
html[data-theme="dark"] .di-badge.is-low  { background: rgba(248,113,113,.16); color: #fca5a5; }
html[data-theme="dark"] .di-badge.is-neutral { background: var(--primary-light); color: #6ee7b7; }
html[data-theme="dark"] .di-val { color: var(--text); }
html[data-theme="dark"] .di-bar { background: var(--surface-3); }
html[data-theme="dark"] .lb-row.rank-1 { background: linear-gradient(90deg, rgba(251,191,36,.14), var(--surface-2) 55%); }
html[data-theme="dark"] .mini-bar { background: var(--surface-3); }
html[data-theme="dark"] .mperf-table tr.is-me td { background: rgba(16,185,129,.10); }
html[data-theme="dark"] .pl-table tbody tr:hover td { background: var(--surface-3); }
html[data-theme="dark"] .pl-m { background: rgba(56,189,248,.16); color: #7dd3fc; }
html[data-theme="dark"] .pl-f { background: rgba(236,72,153,.18); color: #f9a8d4; }
html[data-theme="dark"] .pl-n, html[data-theme="dark"] .pl-corp { background: var(--surface-3); color: #cbd5e1; }
html[data-theme="dark"] .pl-empty svg { color: #33456a; }
html[data-theme="dark"] .head-add { background: var(--primary-light); color: #34d399; }
html[data-theme="dark"] .head-add:hover { background: var(--primary); color: #06231a; }
html[data-theme="dark"] .comm-line { color: var(--muted); border-bottom-color: var(--border); }
html[data-theme="dark"] .tk-total  { border-color: rgba(56,189,248,.28); }
html[data-theme="dark"] .tk-total .tk-ico  { background: rgba(56,189,248,.16); color: #7dd3fc; }
html[data-theme="dark"] .tk-total .tk-num  { color: #7dd3fc; }
html[data-theme="dark"] .tk-done   { border-color: rgba(52,211,153,.28); }
html[data-theme="dark"] .tk-done .tk-ico   { background: rgba(52,211,153,.16); color: #6ee7b7; }
html[data-theme="dark"] .tk-done .tk-num   { color: #6ee7b7; }
html[data-theme="dark"] .tk-late   { border-color: rgba(248,113,113,.28); }
html[data-theme="dark"] .tk-late .tk-ico   { background: rgba(248,113,113,.16); color: #fca5a5; }
html[data-theme="dark"] .tk-late .tk-num   { color: #fca5a5; }
html[data-theme="dark"] .tk-today  { border-color: rgba(34,211,238,.28); }
html[data-theme="dark"] .tk-today .tk-ico  { background: rgba(34,211,238,.16); color: #67e8f9; }
html[data-theme="dark"] .tk-today .tk-num  { color: #67e8f9; }
html[data-theme="dark"] .tk-tmrw   { border-color: rgba(167,139,250,.28); }
html[data-theme="dark"] .tk-tmrw .tk-ico   { background: rgba(167,139,250,.16); color: #c4b5fd; }
html[data-theme="dark"] .tk-tmrw .tk-num   { color: #c4b5fd; }

/* ============================================================
   DASHBOARD — RAFİNE TİPOGRAFİ, İKON ROZETLERİ VE KUTUCUKLAR
   Bu blok dosyanın sonunda durur; önceki bölümlerdeki
   `.stat-ico { color:#fff }` (açık temada ikonu görünmez yapıyordu)
   ve kalın rakam ağırlıkları burada geçersiz kılınır.
   ============================================================ */

/* --- Rakamlar: ince, geniş ve hizalı (kurumsal/editöryel ton) --- */
.dash .stat-big, .dash .dh-val, .dash .di-val, .dash .tk-num, .dash .wt-num,
.dash .cs-num, .dash .stat-num, .dash .lb-val b, .dash .comm-line b,
.dash .comm-summary b, .dash .mini-pct {
  font-weight: 300;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}
.dash .stat-big { font-size: 2.05rem; line-height: 1.06; color: var(--text); }
.dash .dh-val   { font-size: 1.58rem; line-height: 1.1; }
/* Hero panelinde üç manşet yan yana durur: alt kartlardan bir tık küçük */
.dash .di-val   { font-size: 1.46rem; line-height: 1.05; color: var(--text); }
.dash .tk-num   { font-size: 1.9rem; }
.dash .wt-num   { font-size: 1.4rem; line-height: 1.05; }
.dash .lb-val b { font-size: .96rem; font-weight: 400; }
.dash .comm-line b, .dash .comm-summary b { font-weight: 400; }
.dash .mini-pct { font-weight: 500; }

/* Para birimi simgesi ana rakamdan bir tık küçük ve soluk */
.dash .cur { font-size: .62em; font-weight: 400; opacity: .5; margin-right: .1em; vertical-align: .1em; }

/* --- Etiketler: küçük, aralıklı, versal (kurumsal) --- */
.dash .stat-cap {
  margin-top: .12rem; font-size: .705rem; font-weight: 600;
  letter-spacing: .085em; text-transform: uppercase; color: var(--muted);
}
.dash .stat-notes { margin-top: .75rem; gap: .22rem; font-size: .785rem; }
.dash .note-rate { font-weight: 500; }

/* --- İkon rozetleri: cam yüzey + iç ışık + ince çizgi --- */
.dash .stat-ico {
  width: 46px; height: 46px; border-radius: 14px;
  background: linear-gradient(150deg, #eef2ff 0%, #e3e8ff 100%);
  color: var(--primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 2px 8px rgba(15,23,42,.08);
}
.dash .stat-ico svg { width: 21px; height: 21px; stroke-width: 1.6; }
.dash .ico-blue   { background: linear-gradient(150deg, #e4f1fe 0%, #d6e6fb 100%); color: #1d4ed8; }
.dash .ico-green  { background: linear-gradient(150deg, #e3f8ec 0%, #d3f0e0 100%); color: #15803d; }
.dash .ico-dark   { background: linear-gradient(150deg, #edf1f6 0%, #dfe6ee 100%); color: #334155; }
.dash .ico-purple { background: linear-gradient(150deg, #f0e8fd 0%, #e6dafb 100%); color: #6d28d9; }

/* Kart başlığı ikonu da aynı ince çizgiye gelsin */
.dash .card-head h3 svg { stroke-width: 1.8; }

/* --- Hızlı erişim kutucukları: gradyan zemin + köşe ikonu --- */
.dash .wtile {
  position: relative; overflow: hidden;
  min-height: 62px; padding: .6rem 2.35rem .6rem .75rem; /* sağda köşe ikonuna yer */
  border-radius: 13px;
  box-shadow: 0 2px 8px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.18);
}
/* Renkli zeminde metin her zaman beyaz — koyu temadaki --muted ezmesi burada iptal */
.dash .wtile, .dash .wtile .wt-num, .dash .wtile .wt-lbl, .dash .wtile .wt-sub { color: #fff; }
.dash .wtile .wt-lbl { font-size: .735rem; font-weight: 600; letter-spacing: .005em; opacity: 1; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.dash .wtile .wt-sub { font-size: .665rem; opacity: .82; }
.dash .wtile .wt-num { opacity: .98; text-shadow: 0 1px 3px rgba(0,0,0,.2); }
/* Sağ üst köşede yumuşak cam ikon */
.wt-ico {
  position: absolute; top: .5rem; right: .55rem;
  display: grid; place-items: center; width: 27px; height: 27px;
  border-radius: 9px; background: rgba(255,255,255,.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
  color: #fff; opacity: .92; transition: transform .18s ease, background .18s ease;
}
.wt-ico svg { stroke-width: 1.8; }
.dash .wtile:hover .wt-ico { transform: scale(1.08); background: rgba(255,255,255,.3); }
/* Sağ üstteki geniş parıltı — düz renk yerine derinlik */
.dash .wtile::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120px 60px at 100% 0%, rgba(255,255,255,.22), transparent 70%);
}
/* Sadece etiket taşıyan (rakamsız) kutucuklar dikeyde ortalansın */
.dash .wtile { justify-content: center; }

/* Gradyan paleti — düz renklerin yerine */
.dash .wt-green   { background: linear-gradient(135deg, #22c55e 0%, #15803d 100%); }
.dash .wt-teal    { background: linear-gradient(135deg, #14b8a6 0%, #0d7377 100%); }
.dash .wt-cyan    { background: linear-gradient(135deg, #22d3ee 0%, #0e7490 100%); }
.dash .wt-slate   { background: linear-gradient(135deg, #7c8aa0 0%, #4b5a6e 100%); }
.dash .wt-orange  { background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%); }
.dash .wt-blue    { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.dash .wt-indigo  { background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%); }
.dash .wt-emerald { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }
.dash .wt-amber   { background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%); }
.dash .wt-gold    { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); }
.dash .wt-violet  { background: linear-gradient(135deg, #a78bfa 0%, #6d28d9 100%); }
.dash .wt-royal   { background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%); }
.dash .wt-pink    { background: linear-gradient(135deg, #f472b6 0%, #db2777 100%); }

/* --- Kart zeminine hafif üst tint (aksan çubuğunu örtmemesi için
       kaplama katmanı değil, kartın kendi background-image'i) --- */
.dash .dash-card {
  background-image: linear-gradient(180deg, rgba(79,70,229,.030) 0%, rgba(79,70,229,0) 120px);
}

/* --- Görev kartlarındaki rakam/etiket rafinesi --- */
.tk-card .tk-lbl { font-size: .745rem; font-weight: 600; letter-spacing: .045em; text-transform: uppercase; }
.tk-ico svg { stroke-width: 1.7; }

/* ============================================================
   KOYU TEMA KARŞILIKLARI
   ============================================================ */
html[data-theme="dark"] .dash .stat-big { color: var(--text); }
html[data-theme="dark"] .dash .stat-cap { color: var(--muted); }

/* İkon rozetleri: koyu camda ışıklı halka */
html[data-theme="dark"] .dash .stat-ico {
  background: linear-gradient(150deg, rgba(16,185,129,.20) 0%, rgba(16,185,129,.08) 100%);
  color: #4ade9f;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 2px 10px rgba(0,0,0,.35);
}
html[data-theme="dark"] .dash .ico-blue {
  background: linear-gradient(150deg, rgba(56,189,248,.24) 0%, rgba(56,189,248,.08) 100%); color: #7dd3fc;
}
html[data-theme="dark"] .dash .ico-green {
  background: linear-gradient(150deg, rgba(52,211,153,.24) 0%, rgba(52,211,153,.08) 100%); color: #6ee7b7;
}
html[data-theme="dark"] .dash .ico-dark {
  background: linear-gradient(150deg, rgba(148,163,184,.24) 0%, rgba(148,163,184,.08) 100%); color: #cbd5e1;
}
html[data-theme="dark"] .dash .ico-purple {
  background: linear-gradient(150deg, rgba(167,139,250,.26) 0%, rgba(167,139,250,.08) 100%); color: #c4b5fd;
}

/* Koyu temada kutucuklar bir tık koyu tonlansın, beyaz metin kontrastı artsın */
html[data-theme="dark"] .dash .wtile {
  box-shadow: 0 2px 10px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-theme="dark"] .dash .wt-green   { background: linear-gradient(135deg, #16a34a 0%, #14532d 100%); }
html[data-theme="dark"] .dash .wt-teal    { background: linear-gradient(135deg, #0d9488 0%, #134e4a 100%); }
html[data-theme="dark"] .dash .wt-cyan    { background: linear-gradient(135deg, #0891b2 0%, #164e63 100%); }
html[data-theme="dark"] .dash .wt-slate   { background: linear-gradient(135deg, #5a6b81 0%, #33415a 100%); }
html[data-theme="dark"] .dash .wt-orange  { background: linear-gradient(135deg, #ea580c 0%, #7c2d12 100%); }
html[data-theme="dark"] .dash .wt-blue    { background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%); }
html[data-theme="dark"] .dash .wt-indigo  { background: linear-gradient(135deg, #4f46e5 0%, #312e81 100%); }
html[data-theme="dark"] .dash .wt-emerald { background: linear-gradient(135deg, #059669 0%, #064e3b 100%); }
html[data-theme="dark"] .dash .wt-amber   { background: linear-gradient(135deg, #d97706 0%, #78350f 100%); }
html[data-theme="dark"] .dash .wt-gold    { background: linear-gradient(135deg, #d97706 0%, #713f12 100%); }
html[data-theme="dark"] .dash .wt-violet  { background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%); }
html[data-theme="dark"] .dash .wt-royal   { background: linear-gradient(135deg, #1d4ed8 0%, #172554 100%); }
html[data-theme="dark"] .dash .wt-pink    { background: linear-gradient(135deg, #db2777 0%, #831843 100%); }

/* Koyu temada üst tint mor değil, nötr aydınlanma olsun */
html[data-theme="dark"] .dash .dash-card {
  background-image: linear-gradient(180deg, rgba(255,255,255,.042) 0%, rgba(255,255,255,0) 120px);
}
html[data-theme="dark"] .dash-hero .dh-val { color: var(--text); }

/* ============================================================
   PERSONEL LEGEND ETİKETLERİ + PERFORMANS AYRINTILARI MODALI
   (WP `#personnelDetailsModal` hasadı)
   ============================================================ */

/* --- Kart başlığındaki eylem düğmesi --- */
.head-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .745rem; font-weight: 600;
  color: var(--primary); background: var(--primary-light);
  border: 1px solid transparent; white-space: nowrap;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.head-btn:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }
.head-btn svg { stroke-width: 2; }
svg.flip { transform: rotate(180deg); }

/* --- Legend: etiket modu --- */
.legend-tags { display: flex; flex-wrap: wrap; gap: .38rem; margin-top: .85rem; }
.legend-tag {
  --tag-c: var(--primary);
  display: inline-flex; align-items: center; gap: .38rem;
  max-width: 100%; padding: .2rem .6rem .2rem .2rem;
  border-radius: 999px; cursor: default;
  background: var(--card);
  border: 1px solid var(--border); /* color-mix desteklemeyen tarayıcılar için taban */
  border-color: color-mix(in srgb, var(--tag-c) 38%, transparent);
  box-shadow: 0 1px 3px rgba(15,23,42,.07), inset 0 0 0 1px rgba(255,255,255,.4);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.legend-tag:hover {
  transform: translateY(-1px);
  border-color: var(--tag-c);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--tag-c) 28%, transparent);
}
.lt-av {
  display: grid; place-items: center; flex-shrink: 0;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--tag-c); color: #fff;
  font-size: .58rem; font-weight: 700; letter-spacing: .02em;
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.18);
}
.lt-nm {
  min-width: 0; max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .705rem; font-weight: 600; color: var(--text);
}
.lt-pct {
  font-size: .68rem; font-weight: 700; color: var(--tag-c);
  font-variant-numeric: tabular-nums; padding-left: .1rem;
}

/* --- Modal iskeleti --- */
body.pm-lock { overflow: hidden; }
.pm-overlay[hidden] { display: none; }
.pm-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 3vh 1rem; overflow-y: auto;
  background: rgba(15, 23, 42, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: pmFade .18s ease;
}
@keyframes pmFade { from { opacity: 0; } to { opacity: 1; } }
.pm-dialog {
  width: 100%; max-width: 1080px; margin: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 24px 70px rgba(15,23,42,.35);
  overflow: hidden; animation: pmRise .22s cubic-bezier(.22,.61,.36,1);
}
@keyframes pmRise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.pm-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.3rem; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(79,70,229,.06), transparent);
}
.pm-head h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.pm-head h3 svg { color: var(--primary); }
.pm-close {
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--muted);
}
.pm-close:hover { background: rgba(220,38,38,.1); color: var(--danger); }

.pm-bar {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .8rem 1.3rem; border-bottom: 1px solid var(--border); background: #fafbfd;
}
.pm-filters { display: inline-flex; gap: 3px; padding: 3px; border-radius: 11px; background: #eef1f6; }
.pm-fbtn {
  padding: .36rem .85rem; border: 0; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 600; color: var(--muted); background: transparent;
  transition: background .14s, color .14s;
}
.pm-fbtn:hover { color: var(--text); }
.pm-fbtn.is-active { background: var(--card); color: var(--primary); box-shadow: var(--sh-sm); }
.pm-range { display: inline-flex; align-items: center; gap: .4rem; }
.pm-range input { width: auto; padding: .34rem .5rem; font-size: .8rem; }
.pm-range[hidden] { display: none; }
.pm-actions { margin-left: auto; display: inline-flex; gap: .4rem; }
.pm-gbtn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .36rem .8rem; border-radius: 9px; cursor: pointer;
  font: inherit; font-size: .745rem; font-weight: 600;
  color: var(--muted); background: var(--card); border: 1px solid var(--border);
}
.pm-gbtn:hover { color: var(--primary); border-color: var(--primary); }

.pm-body { padding: 1.1rem 1.3rem 1.4rem; }

/* --- Rol grupları --- */
.pm-group { margin-bottom: 1.4rem; }
.pm-group h4 {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .55rem;
  font-size: .87rem; font-weight: 700;
}
.pm-group h4 svg { color: var(--primary); }
.pm-count {
  padding: .08rem .5rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700;
  background: var(--primary-light); color: var(--primary);
}
.pm-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 13px; }
.pm-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.pm-table th {
  padding: .55rem .8rem; background: #f7f9fc; border-bottom: 1px solid var(--border);
  font-size: .665rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); text-align: left; white-space: nowrap;
}
.pm-table td { padding: .5rem .8rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.pm-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pm-table tbody tr:last-child td { border-bottom: 0; }
.pm-table tfoot td {
  padding: .6rem .8rem; background: #f3f6fb; border-top: 1px solid var(--border);
  font-weight: 700; font-size: .82rem;
}
.pm-row.is-exp { cursor: pointer; }
.pm-row.is-exp:hover td { background: #f8fafd; }
.pm-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.pm-c-name { min-width: 210px; }
.pm-name-wrap { display: flex; align-items: center; gap: .5rem; }
.pm-tog { display: inline-grid; place-items: center; width: 14px; color: var(--muted); transition: transform .18s ease; }
.pm-row.is-open .pm-tog { transform: rotate(90deg); color: var(--primary); }
.pm-av {
  display: grid; place-items: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  color: #fff; font-size: .63rem; font-weight: 700;
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.2);
}
.pm-nm { font-weight: 600; }
.pm-c-role { white-space: nowrap; }
.pm-role {
  display: inline-block; padding: .12rem .58rem; border-radius: 999px;
  font-size: .665rem; font-weight: 700; letter-spacing: .02em;
  background: #eef1f6; color: #475569;
}
.pm-role.r1 { background: #fef3c7; color: #b45309; }
.pm-role.r2 { background: #e0e7ff; color: #4338ca; }
.pm-role.r4 { background: #cffafe; color: #0e7490; }
.pm-role.r5 { background: #dcfce7; color: #15803d; }
.pm-role.r6 { background: #fce7f3; color: #be185d; }
.pm-muted { color: var(--muted); }
.pm-pos { color: var(--success); font-weight: 600; }
.pm-neg { color: var(--danger); font-weight: 600; }
.pm-net { color: var(--primary); font-weight: 700; }
.pm-table .cur { font-size: .74em; opacity: .55; margin-right: .12em; }

/* --- Satır kırılımı (Yeni İş / Yenileme) --- */
.pm-bd[hidden] { display: none; }
.pm-bd > td { padding: 0 !important; background: #f8fafc; }
.pm-bd-box { margin: .6rem .8rem .8rem 2.4rem; padding: .75rem .9rem; background: var(--card); border: 1px solid var(--border); border-radius: 11px; }
.pm-bd-head { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }
.pm-bd-head small { font-weight: 500; text-transform: none; letter-spacing: 0; }
.pm-bd-bar { display: flex; height: 7px; border-radius: 999px; overflow: hidden; background: #eef2f7; margin-bottom: .6rem; }
.pm-bd-bar .bd-new { background: #3b82f6; } .pm-bd-bar .bd-ren { background: #f59e0b; }
.pm-bd-line { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .28rem 0; font-size: .78rem; }
.pm-bd-line + .pm-bd-line { border-top: 1px dashed var(--border); }
.pm-bd-line > span:first-child { display: inline-flex; align-items: center; gap: .45rem; color: var(--text); }
.pm-bd-line > span:last-child { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pm-bd-line i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.pm-bd-line i.bd-new { background: #3b82f6; } .pm-bd-line i.bd-ren { background: #f59e0b; }
/* İptal/iade satırları: kırılımın altında, üretimden farklı bir renkte */
.pm-bd-line i.bd-canc { background: #ef4444; } .pm-bd-line i.bd-ref { background: #f87171; }
/* Broker komisyonu: üretim değil kazanç — kendi rengiyle ayrışır */
.pm-bd-line i.bd-com { background: #059669; }
.pm-chip { padding: .1rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 700; }
.chip-blue { background: #eff6ff; color: #1d4ed8; }
.chip-amber { background: #fef3c7; color: #92400e; }
.chip-red { background: #fee2e2; color: #b91c1c; }
.chip-green { background: #dcfce7; color: #15803d; }

/* Grup altı açıklama şeridi (broker grubunda toplam komisyon hak edişi) */
.pm-note {
  display: flex; align-items: center; gap: .45rem; margin: .55rem 0 0;
  padding: .5rem .75rem; border-radius: 10px; font-size: .765rem; line-height: 1.45;
  color: var(--text); background: color-mix(in srgb, var(--success) 9%, var(--card));
  border: 1px solid color-mix(in srgb, var(--success) 26%, transparent);
}
.pm-note svg { flex: none; color: #059669; }
.pm-note b { font-variant-numeric: tabular-nums; }

/* --- Genel toplam şeridi --- */
.pm-grand {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.2rem; border-radius: 14px;
  background: var(--brand-grad); color: #fff;
  box-shadow: 0 8px 22px rgba(79,70,229,.28);
}
.pm-grand-t { font-size: .88rem; font-weight: 700; }
.pm-grand-t small { display: block; font-weight: 500; opacity: .8; font-size: .72rem; }
.pm-grand-v { display: inline-flex; flex-direction: column; gap: .1rem; text-align: right; }
.pm-grand-v em { font-style: normal; font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .82; }
.pm-grand-v b { font-size: 1.02rem; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pm-grand-v b.is-neg { color: #fecaca; }
.pm-grand-v b.is-net { color: #a7f3d0; font-size: 1.15rem; }
.pm-grand .cur { font-size: .68em; opacity: .7; margin-right: .1em; }

/* --- Durumlar --- */
.pm-empty { padding: 2.6rem 1rem; text-align: center; color: var(--muted); font-size: .88rem; }
.pm-err { color: var(--danger); }
.pm-loading { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 2.6rem 1rem; color: var(--muted); font-size: .88rem; }
.pm-spin {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--primary);
  animation: pmSpin .7s linear infinite;
}
@keyframes pmSpin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .pm-bar { gap: .5rem; }
  .pm-actions { margin-left: 0; width: 100%; }
  .pm-bd-box { margin-left: .8rem; }
  .pm-grand { gap: .7rem; }
}

/* ============================================================
   KOYU TEMA
   ============================================================ */
html[data-theme="dark"] .legend-tag {
  background: var(--surface-2);
  box-shadow: 0 1px 3px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.04);
}
html[data-theme="dark"] .lt-nm { color: var(--text); }
html[data-theme="dark"] .head-btn { background: var(--primary-light); color: #6ee7b7; }
html[data-theme="dark"] .head-btn:hover { background: var(--primary); color: #06231a; }

html[data-theme="dark"] .pm-overlay { background: rgba(4, 9, 18, .68); }
html[data-theme="dark"] .pm-dialog { box-shadow: 0 24px 70px rgba(0,0,0,.65); }
html[data-theme="dark"] .pm-head { background: linear-gradient(180deg, rgba(16,185,129,.08), transparent); }
html[data-theme="dark"] .pm-bar { background: var(--surface-2); }
html[data-theme="dark"] .pm-filters { background: var(--surface-3); }
html[data-theme="dark"] .pm-fbtn.is-active { background: var(--card); color: #6ee7b7; }
html[data-theme="dark"] .pm-gbtn { background: var(--surface-3); border-color: var(--border); color: var(--muted); }
html[data-theme="dark"] .pm-gbtn:hover { color: #6ee7b7; border-color: var(--primary); }
html[data-theme="dark"] .pm-scroll { border-color: var(--border); }
html[data-theme="dark"] .pm-table th { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
html[data-theme="dark"] .pm-table td { border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .pm-table tfoot td { background: var(--surface-2); border-color: var(--border); }
html[data-theme="dark"] .pm-row.is-exp:hover td { background: var(--surface-3); }
html[data-theme="dark"] .pm-bd > td { background: var(--surface-2); }
html[data-theme="dark"] .pm-bd-box { background: var(--card); border-color: var(--border); }
html[data-theme="dark"] .pm-bd-bar { background: var(--surface-3); }
html[data-theme="dark"] .pm-role { background: var(--surface-3); color: #cbd5e1; }
html[data-theme="dark"] .pm-role.r1 { background: rgba(251,191,36,.18); color: #fcd34d; }
html[data-theme="dark"] .pm-role.r2 { background: rgba(99,102,241,.20); color: #a5b4fc; }
html[data-theme="dark"] .pm-role.r4 { background: rgba(34,211,238,.18); color: #67e8f9; }
html[data-theme="dark"] .pm-role.r5 { background: rgba(52,211,153,.18); color: #6ee7b7; }
html[data-theme="dark"] .pm-role.r6 { background: rgba(236,72,153,.20); color: #f9a8d4; }
html[data-theme="dark"] .chip-blue { background: rgba(59,130,246,.18); color: #93c5fd; }
html[data-theme="dark"] .chip-amber { background: rgba(245,158,11,.18); color: #fcd34d; }
html[data-theme="dark"] .chip-red { background: rgba(239,68,68,.18); color: #fca5a5; }
html[data-theme="dark"] .chip-green { background: rgba(16,185,129,.18); color: #6ee7b7; }
html[data-theme="dark"] .pm-net { color: #6ee7b7; }
html[data-theme="dark"] .pm-grand { box-shadow: 0 8px 24px rgba(0,0,0,.5); }
html[data-theme="dark"] .pm-close:hover { background: rgba(248,113,113,.16); color: #fca5a5; }

/* ============================================================
   ÜST KARTLAR — TEK TİPOGRAFİ ÖLÇEĞİ + MİNİ TRENDLER
   Müşteri/Poliçe ve Bu Ay/Toplam Üretim kartları. Tüm ikincil
   satırlar aynı boy-ağırlık-renk sistemini paylaşır; serbest
   metin satırları yerine "etiket → değer" ölçüm satırları kullanılır.
   ============================================================ */

.dash .combo-card, .dash .prod-card { display: flex; flex-direction: column; }
.dash .combo-sec { display: flex; flex-direction: column; }
/* İkinci bölüm boşluğu yesin: kart alt hizası her zaman dolu görünür */
.dash .combo-card > .combo-sec:last-child,
.dash .prod-card  > .combo-sec:last-child { flex: 1 1 auto; }
.dash .combo-divider { margin: .85rem 0; }

/* --- Bölüm başlığı: ikon | rakam+etiket | delta --- */
.sec-head { display: flex; align-items: flex-start; gap: .7rem; }
.sec-t { min-width: 0; flex: 1 1 auto; }
.dash .sec-t .stat-big {
  font-size: clamp(1.45rem, 1.05rem + .95vw, 1.95rem);
  line-height: 1.08; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.dash .sec-t .stat-cap { margin-top: .16rem; }

.delta {
  flex-shrink: 0; margin-top: .15rem;
  padding: .14rem .5rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.delta.up   { background: rgba(22,163,74,.12);  color: var(--success); }
.delta.mid  { background: rgba(217,119,6,.13);  color: var(--warn); }
.delta.down { background: rgba(220,38,38,.11);  color: var(--danger); }

/* --- Mini trend --- */
.spark-wrap { margin: .7rem 0 .1rem; }
.spark { display: block; width: 100%; }
.spark-wrap.has-legend { margin-bottom: .35rem; }
.spark-axis {
  display: flex; justify-content: space-between;
  margin-top: .1rem; font-size: .645rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted); opacity: .75;
}
.spark-bars { color: var(--muted); }

/* --- Ölçüm satırları: tek tipografi --- */
.mrows { margin-top: .7rem; display: flex; flex-direction: column; }
.mrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  padding: .3rem 0; border-top: 1px solid var(--border);
}
.mrow:first-child { border-top: 0; padding-top: .1rem; }
.mrow > span {
  font-size: .765rem; font-weight: 500; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mrow > b {
  font-size: .845rem; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap;
}
.mrow.pos  > b { color: var(--success); }
.mrow.neg  > b { color: var(--danger); }
.mrow.info > b { color: var(--info); }
.mrow .cur { font-size: .78em; opacity: .55; margin-right: .1em; font-weight: 400; }

/* --- Hedef blokları --- */
.goals { margin-top: .85rem; display: flex; flex-direction: column; gap: .75rem; }
.goal-t, .goal-s { display: flex; align-items: baseline; justify-content: space-between; gap: .7rem; }
.goal-t { margin-bottom: .3rem; }
.goal-t > span { font-size: .765rem; font-weight: 500; color: var(--muted); }
.goal-t > b {
  font-size: .845rem; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.dash .goal .progress { height: 8px; margin: 0; }
.goal-s { margin-top: .28rem; font-size: .715rem; color: var(--muted); }
.goal-s > b { font-size: .745rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.goal-s .pos { color: var(--success); font-weight: 600; }
.goal-s em { font-style: normal; opacity: .85; }
.goal .cur { font-size: .8em; opacity: .55; margin-right: .08em; font-weight: 400; }

/* Dar sütunda rakam sığmazsa alt satıra insin */
@media (max-width: 1400px) {
  .mrow, .goal-t { flex-wrap: wrap; }
}

/* ============================================================
   KOYU TEMA
   ============================================================ */
html[data-theme="dark"] .delta.up   { background: rgba(52,211,153,.14); color: #6ee7b7; }
html[data-theme="dark"] .delta.mid  { background: rgba(251,191,36,.15); color: #fcd34d; }
html[data-theme="dark"] .delta.down { background: rgba(248,113,113,.14); color: #fca5a5; }
html[data-theme="dark"] .mrow { border-top-color: var(--border); }
html[data-theme="dark"] .mrow > b, html[data-theme="dark"] .goal-t > b, html[data-theme="dark"] .goal-s > b { color: var(--text); }
html[data-theme="dark"] .mrow.info > b { color: #7dd3fc; }
.delta.share { background: var(--primary-light); color: var(--primary); }
.delta em { font-style: normal; font-weight: 600; opacity: .72; font-size: .92em; }
html[data-theme="dark"] .delta.share { background: var(--primary-light); color: #6ee7b7; }

/* --- Sparkline hover --- */
.spark { cursor: crosshair; }
.spark .sp-hover { transition: opacity .12s ease; }
.spark-bars .sp-bar { transition: opacity .12s ease; }
.spark-axis > span:nth-child(2) { text-transform: none; letter-spacing: .01em; opacity: .8; }
.spark-axis .sa-note { position: relative; padding-left: 1.15rem; }
.spark-axis .sa-note::before {
  content: ''; position: absolute; left: 0; top: 50%; width: .85rem; height: 0;
  border-top: 1px dashed currentColor; opacity: .8;
}

/* ============================================================
   ÜRETİM GRAFİĞİ PANELİ + ÜST BAR (Geri düğmesi, Yeni menüsü)
   ============================================================ */

/* --- Kendi çerçevesi olan grafik paneli --- */
.spark-panel {
  margin: .85rem 0 0; padding: .55rem .7rem .45rem;
  background: #f7f9fd; border: 1px solid var(--border); border-radius: 12px;
}
.sp-cap {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .45rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border);
  font-size: .685rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.sp-keys {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .645rem; font-weight: 600; letter-spacing: .02em; text-transform: none; opacity: .9;
}
.sp-keys i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-left: .45rem; }
.sp-keys i:first-child { margin-left: 0; }
.sp-keys .k-base { background: linear-gradient(180deg, #6366f1, rgba(99,102,241,.45)); }
.sp-keys .k-ok   { background: linear-gradient(180deg, #10b981, rgba(16,185,129,.45)); }
.sp-keys .k-line { width: 14px; height: 0; border-top: 1px dashed currentColor; border-radius: 0; opacity: .8; }
.sp-plot { position: relative; }
.spark-bars { color: var(--muted); }
.spark-panel .spark-axis { margin-top: .3rem; padding-top: .35rem; border-top: 1px solid var(--border); }

/* --- Üst bar: Geri düğmesi --- */
svg.rot90 { transform: rotate(90deg); }
svg.rot180 { transform: rotate(180deg); }   /* giriş düğmesindeki "içeri" oku */
.tb-back {
  display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0;
  /* Sağ blok: Geri düğmesi arama formuna bitişik durur, ikisi birlikte sağa yaslanır */
  margin-left: auto; margin-right: .5rem; padding: .42rem .85rem .42rem .6rem;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  font: inherit; font-size: .84rem; font-weight: 600; color: var(--muted);
  background: linear-gradient(180deg, #ffffff, #f6f8fc);
  box-shadow: var(--sh-sm);
  transition: color .15s, border-color .15s, transform .12s, box-shadow .15s;
}
.tb-back:hover { color: var(--primary); border-color: var(--primary); transform: translateX(-2px); box-shadow: var(--sh-md); }
.tb-back:active { transform: translateX(-1px) scale(.98); }
@media (max-width: 760px) { .tb-back span { display: none; } .tb-back { padding: .42rem .55rem; } }

/* --- Üst bar: "Yeni" hızlı ekle menüsü --- */
.qa { position: relative; }
.qa .tb-add {
  border: 0; cursor: pointer; padding: 0;
  background: var(--brand-grad); box-shadow: 0 3px 10px rgba(79,70,229,.36);
  transition: transform .16s ease, box-shadow .16s ease;
}
.qa .tb-add:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(79,70,229,.46); }
.qa .tb-add svg { transition: transform .2s ease; }
.qa.is-open .tb-add svg { transform: rotate(135deg); }

.qa-menu[hidden] { display: none; }
.qa-menu {
  position: absolute; top: calc(100% + .55rem); right: 0; z-index: 60;
  width: 290px; padding: .4rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15,23,42,.20), 0 2px 6px rgba(15,23,42,.08);
  animation: qaIn .16s cubic-bezier(.22,.61,.36,1);
}
@keyframes qaIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
/* Küçük ok */
.qa-menu::before {
  content: ''; position: absolute; top: -5px; right: 13px; width: 10px; height: 10px;
  background: var(--card); border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  transform: rotate(45deg); border-radius: 2px 0 0 0;
}
.qa-head {
  padding: .4rem .6rem .5rem; font-size: .655rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.qa-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .55rem; border-radius: 10px;
  text-decoration: none !important; color: var(--text);
  transition: background .13s ease, transform .13s ease;
}
.qa-item:hover, .qa-item:focus-visible { background: var(--primary-light); outline: 0; transform: translateX(2px); }
.qa-item:focus-visible { box-shadow: inset 0 0 0 1px var(--primary); }
.qa-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.qa-ico svg { stroke-width: 1.8; }
.qi-blue   { background: linear-gradient(150deg,#e4f1fe,#d6e6fb); color: #1d4ed8; }
.qi-green  { background: linear-gradient(150deg,#e3f8ec,#d3f0e0); color: #15803d; }
.qi-amber  { background: linear-gradient(150deg,#fef3c7,#fde8a8); color: #b45309; }
.qi-cyan   { background: linear-gradient(150deg,#cffafe,#baf1f7); color: #0e7490; }
.qi-violet { background: linear-gradient(150deg,#f0e8fd,#e6dafb); color: #6d28d9; }
.qi-red    { background: linear-gradient(150deg,#fee2e2,#fbd0d0); color: #b91c1c; }
.qi-indigo { background: linear-gradient(150deg,#e0e7ff,#cfd8fd); color: #4338ca; }
.qi-slate  { background: linear-gradient(150deg,#edf1f6,#dfe6ee); color: #334155; }
.qa-t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.qa-t b { font-size: .845rem; font-weight: 600; }
.qa-t small { font-size: .705rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa-sep { height: 1px; margin: .35rem .5rem; background: var(--border); }
.qa-item.is-soon { opacity: .5; pointer-events: none; }
.qa-soon {
  margin-left: auto; flex-shrink: 0; padding: .06rem .4rem; border-radius: 999px;
  font-size: .6rem; font-weight: 700; letter-spacing: .04em;
  background: var(--border); color: var(--muted);
}
@media (max-width: 560px) { .qa-menu { width: min(290px, calc(100vw - 1.6rem)); } }

/* ============================================================
   KOYU TEMA
   ============================================================ */
html[data-theme="dark"] .spark-panel { background: var(--surface-2); border-color: var(--border); }
html[data-theme="dark"] .sp-cap { border-bottom-color: var(--border); }
html[data-theme="dark"] .spark-panel .spark-axis { border-top-color: var(--border); }
html[data-theme="dark"] .tb-back {
  background: var(--surface-2); border-color: var(--border); color: var(--muted);
}
html[data-theme="dark"] .tb-back:hover { color: #6ee7b7; border-color: var(--primary); }
html[data-theme="dark"] .qa .tb-add { box-shadow: 0 3px 12px rgba(16,185,129,.34); }
html[data-theme="dark"] .qa .tb-add:hover { box-shadow: 0 6px 18px rgba(16,185,129,.44); }
html[data-theme="dark"] .qa-menu {
  background: var(--card); border-color: var(--border);
  box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
}
html[data-theme="dark"] .qa-menu::before { background: var(--card); border-color: var(--border); }
html[data-theme="dark"] .qa-item { color: var(--text); }
html[data-theme="dark"] .qa-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
html[data-theme="dark"] .qi-blue   { background: linear-gradient(150deg,rgba(56,189,248,.22),rgba(56,189,248,.08)); color: #7dd3fc; }
html[data-theme="dark"] .qi-green  { background: linear-gradient(150deg,rgba(52,211,153,.22),rgba(52,211,153,.08)); color: #6ee7b7; }
html[data-theme="dark"] .qi-amber  { background: linear-gradient(150deg,rgba(251,191,36,.22),rgba(251,191,36,.08)); color: #fcd34d; }
html[data-theme="dark"] .qi-cyan   { background: linear-gradient(150deg,rgba(34,211,238,.22),rgba(34,211,238,.08)); color: #67e8f9; }
html[data-theme="dark"] .qi-violet { background: linear-gradient(150deg,rgba(167,139,250,.24),rgba(167,139,250,.08)); color: #c4b5fd; }
html[data-theme="dark"] .qi-red    { background: linear-gradient(150deg,rgba(248,113,113,.22),rgba(248,113,113,.08)); color: #fca5a5; }
html[data-theme="dark"] .qi-indigo { background: linear-gradient(150deg,rgba(129,140,248,.22),rgba(129,140,248,.08)); color: #a5b4fc; }
html[data-theme="dark"] .qi-slate  { background: linear-gradient(150deg,rgba(148,163,184,.20),rgba(148,163,184,.07)); color: #cbd5e1; }
html[data-theme="dark"] .qa-soon { background: var(--surface-3); color: var(--muted); }

/* --- Ayrıntı modalları: tür/şirket görünümü ek stilleri --- */
.pm-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 -1px 2px rgba(0,0,0,.2); }
.pm-c-share { min-width: 110px; }
.pm-c-share .mini-bar { margin-bottom: .18rem; }
.pm-c-share .mini-pct { color: var(--muted); font-weight: 600; }
.pm-subtable { width: 100%; border-collapse: collapse; font-size: .78rem; }
.pm-subtable th {
  padding: .35rem .5rem; border-bottom: 1px solid var(--border); text-align: left;
  font-size: .645rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.pm-subtable th.num, .pm-subtable td.num { text-align: right; }
.pm-subtable td { padding: .35rem .5rem; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.pm-subtable tbody tr:last-child td { border-bottom: 0; }
.pm-grand { row-gap: .6rem; }
.pm-count { white-space: nowrap; }
html[data-theme="dark"] .pm-subtable th,
html[data-theme="dark"] .pm-subtable td { border-color: var(--border); }

/* ============================================================
   GRAFİK SATIRI — eşit yükseklik + esnek çizim alanı
   Ekip Aylık Üretim / Sigorta Şirketi / Sigorta Türleri kartları
   aynı satırda; grafikler kartın boş kalan yüksekliğini doldurur.
   ============================================================ */

/* Satırdaki üç kart da dikey akış: başlık sabit, grafik esner */
.dash-bottom > .dash-card { display: flex; flex-direction: column; }
.dash-bottom > .dash-card > .card-head { flex: 0 0 auto; }

/* Esneyen çizim alanı: canvas kabı doldurur, taşma olmaz */
.chart-fill {
  position: relative; flex: 1 1 auto; min-height: 240px; width: 100%;
}
.chart-fill > canvas {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
}
/* Şirket dağılımı: bar aralığı sıkışmasın diye canvas doğal yüksekliğinde
   kalır; yalnız kap esner. Satır yüksekliğini bu kart belirler, ekip üretim
   grafiği de `chart-fill` ile o yüksekliğe uyar. */
.dash-bottom .hbar-wrap { flex: 1 1 auto; min-height: 220px; }
.dash-bottom .hbar-wrap canvas { width: 100%; }
/* Tür dağılımı donutu satırın boyuna GÖRE ESNEMEZ. Ekip Aylık Üretim
   tablosunda aylar/temsilciler açıldıkça satır birkaç bin piksele uzuyor;
   `flex: 1 1 auto` ile donut kabı da onunla birlikte uzayıp grafiği absürt
   boyuta çıkarıyordu. Kutu artık kare ve tavanlı: kart ne kadar uzarsa
   uzasın çizim alanı sabit kalır (aynı kural `.dash-mid` tarafında da
   max-height ile uygulanıyor). */
.dash-bottom .donut-wrap.chart-fill {
  flex: 0 0 auto; height: auto; aspect-ratio: 1 / 1;
  min-height: 220px; max-height: 300px;
}

/* Ekip üretim kartı: aktif sekme kalan alanı doldurur */
.team-prod-card { display: flex; flex-direction: column; }
.tp-pane { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.tp-pane > .table-scroll { flex: 1 1 auto; overflow: auto; }
.team-prod-card .card-head { flex: 0 0 auto; }
/* Sekme düğmeleri: dar ekranda alta sarsın, taşmasın */
.team-prod-card .card-head { align-items: flex-start; }
.tp-toggle { flex-shrink: 0; }

@media (max-width: 1300px) { .chart-fill { min-height: 260px; } }

/* ============================================================
   LEGEND — nokta rozetli etiket varyantı (tür dağılımı)
   ============================================================ */
.legend-tag.is-dot { padding-left: .55rem; }
.lt-dot {
  display: inline-block; flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--tag-c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tag-c) 20%, transparent);
}
.legend-tag.is-dot .lt-nm { max-width: 20ch; }
.legend-tags { align-content: flex-start; }

/* Donut ortası ile legend arasında nefes payı */
.dash-bottom .donut-wrap.chart-fill + .legend-tags { margin-top: .9rem; flex: 0 0 auto; }

html[data-theme="dark"] .lt-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tag-c) 26%, transparent); }

/* ============================================================
   BUGÜNÜM — dashboard tasarım sistemine uyarlama
   Sayfa kökü `.dash .myday`; kartlar, hero, ölçüm satırları ve
   mini trendler dashboard ile ortak. Buradaki kurallar yalnız
   Bugünüm'e özgü düzen farklarını kapatır.
   ============================================================ */

/* Eksik aksan tonları (dashboard paletini tamamlar) */
.accent-indigo::before { background: linear-gradient(90deg, #6366f1, #a5b4fc); }
.accent-pink::before   { background: linear-gradient(90deg, #db2777, #f9a8d4); }
.accent-orange::before { background: linear-gradient(90deg, #ea580c, #fb923c); }

/* --- Hedef kartları --- */
.myday .md-targets { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 900px) { .myday .md-targets { grid-template-columns: 1fr; } }
.myday .md-targets .goal { margin-top: .3rem; }
.myday .md-targets .goal-t > b .muted { font-weight: 400; font-size: .8em; }
.myday .spark-panel { margin-top: .9rem; }

/* --- Hızlı eylemler: dashboard kutucuklarıyla aynı bileşen --- */
.myday .md-quick.wgrid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; margin-bottom: 1rem;
}
@media (max-width: 1100px) { .myday .md-quick.wgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .myday .md-quick.wgrid { grid-template-columns: repeat(2, 1fr); } }
.myday .md-quick .wtile { min-height: 66px; }

/* --- Panel başlığı sayacı --- */
.head-count {
  flex-shrink: 0; min-width: 22px; padding: .1rem .5rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; text-align: center;
  background: var(--primary-light); color: var(--primary); font-variant-numeric: tabular-nums;
}

/* --- Panel gövdeleri --- */
.myday .md-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 1000px) { .myday .md-grid { grid-template-columns: 1fr; } }
.myday .mp-body { padding: 0; margin-top: .2rem; max-height: 380px; overflow-y: auto; }
.myday .bucket-body { padding: 0; margin-top: .2rem; display: flex; flex-direction: column; gap: .3rem; min-height: 70px; max-height: 420px; overflow-y: auto; }
.myday .bucket-col { background: var(--card); }

/* Satırlar: kart içi tek tipografi */
.myday .mp-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .15rem; border-top: 1px solid var(--border);
}
.myday .mp-item:first-child { border-top: 0; }
.myday .mp-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.myday .mp-item-main a { font-size: .845rem; font-weight: 600; }
.myday .mp-item-main .small { font-size: .735rem; }
.myday .mp-time {
  flex-shrink: 0; font-size: .78rem; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.myday .mp-time .cur { font-size: .78em; opacity: .55; font-weight: 400; margin-right: .08em; }
.myday .mp-time.due-over { color: var(--danger); }
.myday .mp-check {
  flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px;
  border: 1px solid var(--border); border-radius: 8px; background: transparent;
  color: var(--muted); cursor: pointer; transition: background .14s, color .14s, border-color .14s;
}
.myday .mp-check:hover { background: var(--success); border-color: var(--success); color: #fff; }
.myday .mp-item-over { background: rgba(220,38,38,.05); border-radius: 8px; }

/* Boş durumlar */
.myday .mp-empty, .myday .bucket-empty {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: 1.6rem 1rem; text-align: center; color: var(--muted); font-size: .8rem;
}
.myday .mp-empty svg, .myday .bucket-empty svg { color: #cbd5e1; }

/* Öneri / fırsat kartçıkları */
.myday .reco-item { background: #f8fafc; border: 1px solid var(--border); border-left-width: 3px; margin-bottom: .45rem; }
.myday .reco-item:last-child { margin-bottom: 0; }
.myday .reco-top strong { font-size: .845rem; font-weight: 600; }
.myday .reco-detail { font-size: .755rem; }

/* Bölüm başlığı */
.myday .md-section-title {
  display: flex; align-items: center; gap: .45rem;
  margin: 1.3rem 0 .7rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.myday .md-section-title svg { color: var(--primary); }

.myday .bucket-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1250px) { .myday .bucket-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .myday .bucket-row { grid-template-columns: 1fr; } }
.myday .md-bday-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 1rem; }

/* ============================================================
   BUGÜNÜM — GÜNÜN KARNESİ (hero'daki 6'lı KPI ızgarası)
   ============================================================
   Kutuların HEPSİ seçili güne aittir; aylık gerçekleşme hedef
   widget'larında durur (metrik tekrarı yok). */
.md-hero .md-daykpi {
  display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: .55rem; align-content: center;
}
@media (max-width: 1150px) { .md-hero .md-daykpi { grid-template-columns: repeat(2, minmax(140px, 1fr)); } }
@media (max-width: 700px)  { .md-hero .md-daykpi { grid-template-columns: 1fr 1fr; } }
.md-daykpi .dh-stat { min-width: 0; }
.md-daykpi .dh-lbl { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.md-daykpi .dh-lbl svg { opacity: .75; }
.md-daykpi .dh-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-daykpi .dh-val .dh-unit { font-style: normal; font-size: .58em; font-weight: 600; opacity: .7; }

/* ============================================================
   BUGÜNÜM — GÜN + ADET FİLTRE ÇUBUĞU (WP date_filter paritesi)
   ============================================================ */
.md-fbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: .55rem;
  margin: 0 0 .8rem; padding: .5rem .75rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--sh-sm);
}
.md-fbar-lead {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.md-fbar-lead svg { color: var(--primary); }
.md-fbar-f {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .28rem .55rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-2, #f8fafc);
  color: var(--muted); cursor: pointer;
  transition: border-color .14s, box-shadow .14s;
}
.md-fbar-f:hover, .md-fbar-f:focus-within {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.md-fbar-f input[type=date], .md-fbar-f select {
  border: 0; background: transparent; padding: 0; margin: 0;
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--text);
  outline: none; cursor: pointer;
}
.md-fbar-info {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-left: auto; padding: .3rem .65rem; border-radius: 999px;
  font-size: .76rem; font-weight: 600;
  background: color-mix(in srgb, var(--success) 11%, transparent); color: var(--success);
}
.md-fbar-info.is-past { background: color-mix(in srgb, var(--warn) 14%, transparent); color: color-mix(in srgb, var(--warn) 80%, #000); }
.md-fbar-today { flex: none; }
@media (max-width: 700px) { .md-fbar-info { margin-left: 0; } }

/* --- Gün gezinme: ‹ tarih › tek bir öbek gibi okunsun --- */
.md-daynav { display: inline-flex; align-items: center; gap: .25rem; }
.md-daynav-b {
  display: grid; place-items: center; width: 28px; height: 28px; flex: none;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface-2, #f8fafc); color: var(--muted);
  transition: border-color .14s, color .14s, background .14s;
}
.md-daynav-b:hover {
  color: var(--primary); background: var(--card);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}
.md-daynav-b:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.md-daynav-b.is-off { opacity: .38; cursor: not-allowed; }
.md-daynav-b.is-off:hover { color: var(--muted); background: var(--surface-2, #f8fafc); border-color: var(--border); }

/* Widget başlığındaki tarih çipi — geçmiş güne bakılırken çıkar */
.mdw-day {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: .25rem;
  padding: .1rem .45rem; border-radius: 999px;
  font-size: .64rem; font-weight: 700;
  background: color-mix(in srgb, var(--warn) 15%, transparent);
  color: color-mix(in srgb, var(--warn) 80%, #000);
}

/* ============================================================
   BUGÜNÜM — ZENGİN SATIR (mpx) + GÜN TOPLAMI (mp-total)
   ============================================================
   `mpx-item` mp-item'in iki katlı hâli: üstte başlık + tür/kategori
   çipleri, altta künye (müşteri, şirket, vade, saat), sağda tutar. */
.myday .mpx-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .58rem .35rem; border-top: 1px solid var(--border);
  transition: background .12s;
}
.myday .mpx-item:first-child { border-top: 0; }
.myday .mpx-item:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); border-radius: 10px; }
.myday .mpx-ico {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 9px; color: #fff;
}
.myday .mpx-ico.ico-pol   { background: linear-gradient(135deg, #059669, #10b981); }
.myday .mpx-ico.ico-cust  { background: linear-gradient(135deg, #4f46e5, #818cf8); }
.myday .mpx-ico.ico-offer { background: linear-gradient(135deg, #6366f1, #a5b4fc); }
.myday .mpx-ico.ico-bday  { background: linear-gradient(135deg, #db2777, #f9a8d4); }
.myday .mpx-ico.ico-renew { background: linear-gradient(135deg, #2563eb, #60a5fa); }
.myday .mpx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .16rem; }
.myday .mpx-top { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; min-width: 0; }
.myday .mpx-title { font-size: .845rem; font-weight: 700; color: var(--text); }
.myday .mpx-title:hover { color: var(--primary); }
.myday .mpx-chip {
  display: inline-flex; padding: .06rem .42rem; border-radius: 999px;
  font-size: .63rem; font-weight: 700;
  background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary);
}
.myday .mpx-chip.is-cat { background: color-mix(in srgb, var(--info) 12%, transparent); color: var(--info); }
.myday .mpx-chip.is-pr-urgent { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.myday .mpx-chip.is-pr-high   { background: color-mix(in srgb, var(--warn) 16%, transparent); color: color-mix(in srgb, var(--warn) 80%, #000); }
.myday .mpx-chip.is-pr-medium { background: color-mix(in srgb, var(--info) 12%, transparent); color: var(--info); }
.myday .mpx-chip.is-pr-low    { background: var(--surface-3); color: var(--muted); }
.myday .mpx-sub {
  display: flex; align-items: center; flex-wrap: wrap; gap: .2rem .65rem;
  font-size: .715rem; color: var(--muted); min-width: 0;
}
.myday .mpx-sub a { display: inline-flex; align-items: center; gap: .22rem; color: var(--muted); font-weight: 600; }
.myday .mpx-sub a:hover { color: var(--primary); }
.myday .mpx-sub > span { display: inline-flex; align-items: center; gap: .22rem; }
.myday .mpx-sub svg { opacity: .6; flex: none; }
.myday .mpx-desc { font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.myday .mpx-right {
  flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .14rem;
}
.myday .mpx-money { font-size: .84rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.myday .mpx-money .cur { font-size: .76em; opacity: .55; font-weight: 400; margin-right: .06em; }
.myday .mpx-note { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.myday .mpx-pay { font-style: normal; padding: .04rem .38rem; border-radius: 999px; font-size: .62rem; font-weight: 700; }
.myday .mpx-pay.is-ok  { background: color-mix(in srgb, var(--success) 13%, transparent); color: var(--success); }
.myday .mpx-pay.is-mid { background: color-mix(in srgb, var(--warn) 15%, transparent); color: color-mix(in srgb, var(--warn) 78%, #000); }
.myday .mpx-pay.is-no  { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

/* Gün toplamı — her listenin altında, panelin ayağı gibi durur */
.myday .mp-total {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  margin-top: .55rem; padding: .5rem .65rem;
  border-radius: 10px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 7%, var(--card)),
    color-mix(in srgb, var(--primary) 3%, var(--card)));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  font-size: .74rem;
}
.myday .mp-total .mp-total-l {
  display: inline-flex; align-items: center; gap: .32rem;
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  font-size: .64rem; color: var(--muted);
}
.myday .mp-total .mp-total-l svg { color: var(--primary); }
.myday .mp-total em { font-style: normal; font-weight: 600; color: var(--muted); }
.myday .mp-total em.neg, .myday .mp-total b.neg { color: var(--danger); }
.myday .mp-total em.is-ok, .myday .mp-total b.is-ok { color: var(--success); }
.myday .mp-total b {
  margin-left: auto; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.myday .mp-total b .cur { font-size: .8em; opacity: .55; font-weight: 400; }

/* ============================================================
   KOYU TEMA
   ============================================================ */
html[data-theme="dark"] .head-count { background: var(--primary-light); color: #6ee7b7; }
html[data-theme="dark"] .myday .mp-item { border-top-color: var(--border); }
html[data-theme="dark"] .md-fbar-f { background: var(--surface-2); }
/* Oklar bağlantıdır; karanlık temadaki genel `a { color:#34d399 }` kuralı
   sınıf seçicimden daha baskın olduğu için renk burada geri alınır — yoksa
   oklar yeşil, yanındaki tarih kutusu gri kalıyor. */
html[data-theme="dark"] .md-daynav-b { background: var(--surface-2); color: var(--muted); }
html[data-theme="dark"] .md-daynav-b:hover { color: var(--primary); }
html[data-theme="dark"] .md-fbar-info.is-past { color: #fbbf24; }
html[data-theme="dark"] .mdw-day { color: #fbbf24; }
html[data-theme="dark"] .myday .mpx-item { border-top-color: var(--border); }
html[data-theme="dark"] .myday .mpx-chip.is-pr-high { color: #fbbf24; }
html[data-theme="dark"] .myday .mpx-pay.is-mid { color: #fbbf24; }
html[data-theme="dark"] .myday .mp-total {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 12%, var(--card)),
    color-mix(in srgb, var(--primary) 5%, var(--card)));
}
html[data-theme="dark"] .myday .reco-item { background: var(--surface-2); border-color: var(--border); }
html[data-theme="dark"] .myday .mp-item-over { background: rgba(248,113,113,.08); }
html[data-theme="dark"] .myday .mp-check { border-color: var(--border); color: var(--muted); }
html[data-theme="dark"] .myday .mp-empty svg, html[data-theme="dark"] .myday .bucket-empty svg { color: #33456a; }
html[data-theme="dark"] .myday .bucket-col { background: var(--card); }

/* ============================================================
   UYGULAMA İÇİ MODAL KABUĞU  (public/js/modal.js)
   Kayıt görüntüleme ve form ekranları sayfayı terk etmeden burada açılır.
   ============================================================ */

body.mdl-lock { overflow: hidden; }
.mdl-overlay[hidden] { display: none; }
.mdl-overlay {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 3vh 1rem; overflow-y: auto;
  background: rgba(15, 23, 42, .55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .16s ease;
}
.mdl-overlay.is-on { opacity: 1; }

.mdl-dialog {
  position: relative; width: 100%; max-width: 1060px; margin: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 28px 80px rgba(15,23,42,.38);
  overflow: hidden;
  transform: translateY(14px) scale(.985);
  transition: transform .2s cubic-bezier(.22,.61,.36,1);
}
.mdl-overlay.is-on .mdl-dialog { transform: none; }

/* --- Başlık --- */
.mdl-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(79,70,229,.07), transparent), var(--card);
}
.mdl-title {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mdl-back, .mdl-close, .mdl-expand {
  flex-shrink: 0; display: grid; place-items: center;
  width: 32px; height: 32px; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted); cursor: pointer;
  text-decoration: none !important; transition: background .14s, color .14s;
}
.mdl-back:hover, .mdl-expand:hover { background: var(--primary-light); color: var(--primary); }
.mdl-close:hover { background: rgba(220,38,38,.1); color: var(--danger); }
.mdl-back[hidden] { display: none; }

/* --- Gövde --- */
.mdl-body { padding: 1.1rem 1.25rem 1.4rem; max-height: calc(94vh - 60px); overflow-y: auto; }
/* Modal içinde sayfa başlıkları/geri düğmeleri tekrar etmesin */
.mdl-body .page-head > h1, .mdl-body .cust-toolbar > h1, .mdl-body .cfrm-top h1 { font-size: 1.12rem; }
.mdl-body .cfrm-layout { grid-template-columns: 1fr; }
.mdl-body .cfrm-side { display: none; }
.mdl-body .cf-actions { position: static; }
.mdl-body .flash { margin-bottom: .9rem; }

.mdl-loading {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 3.2rem 1rem; color: var(--muted); font-size: .9rem;
}
.mdl-spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--primary);
  animation: mdlSpin .7s linear infinite;
}
@keyframes mdlSpin { to { transform: rotate(360deg); } }
.mdl-error {
  margin: 1.4rem 0; padding: 1rem 1.1rem; border-radius: 12px; text-align: center;
  color: var(--danger); background: rgba(220,38,38,.07); border: 1px solid rgba(220,38,38,.28);
  font-size: .88rem;
}

@media (max-width: 720px) {
  .mdl-overlay { padding: 0; }
  .mdl-dialog { max-width: none; min-height: 100vh; border-radius: 0; border: 0; }
  .mdl-body { max-height: calc(100vh - 58px); }
}

/* ============================================================
   KOYU TEMA
   ============================================================ */
html[data-theme="dark"] .mdl-overlay { background: rgba(4, 9, 18, .70); }
html[data-theme="dark"] .mdl-dialog { box-shadow: 0 28px 80px rgba(0,0,0,.7); }
html[data-theme="dark"] .mdl-head { background: linear-gradient(180deg, rgba(16,185,129,.09), transparent), var(--card); }
html[data-theme="dark"] .mdl-back:hover, html[data-theme="dark"] .mdl-expand:hover { background: var(--primary-light); color: #6ee7b7; }
html[data-theme="dark"] .mdl-close:hover { background: rgba(248,113,113,.16); color: #fca5a5; }

/* ============================================================
   SALT-OKUNUR KAYIT KARTI  (.rv — görev detayı vb.)
   Bilgi amaçlı tıklamalar düzenleme formuna değil buraya gelir.
   ============================================================ */
.rv-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-bottom: .9rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border);
}
.rv-eyebrow {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.rv-head h1 { margin: .3rem 0 .5rem; font-size: 1.28rem; font-weight: 600; letter-spacing: -.015em; }
.rv-badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.rv-actions { display: flex; align-items: center; gap: .45rem; flex-shrink: 0; }
.rv-actions form { margin: 0; }

.rv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem 1.2rem; }
.rv-field { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.rv-field > span {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.rv-field > b { font-size: .9rem; font-weight: 600; word-break: break-word; }
.rv-field > b small { font-weight: 400; margin-left: .3rem; }
.rv-block { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.rv-block h3 {
  margin: 0 0 .45rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.rv-block p { margin: 0; font-size: .9rem; line-height: 1.6; }

/* ============================================================
   GÖRÜŞME KARTLARI  (Görüşülecekler / Yapılan Görüşmeler)
   ============================================================ */
.ct-card {
  padding: .55rem .15rem; border-top: 1px solid var(--border);
  transition: opacity .3s ease, background .2s ease;
}
.ct-card:first-child { border-top: 0; }
.ct-card.is-saved { opacity: .55; }
.ct-row { display: flex; align-items: flex-start; gap: .55rem; }
.ct-main { flex: 1; min-width: 0; }
.ct-name { display: block; font-size: .855rem; font-weight: 600; }
.ct-meta {
  display: flex; flex-wrap: wrap; gap: .1rem .7rem; margin-top: .12rem;
  font-size: .72rem; color: var(--muted);
}
.ct-meta span { display: inline-flex; align-items: center; gap: .22rem; }
.ct-meta svg { opacity: .7; }
.ct-desc { margin-top: .18rem; font-size: .745rem; color: var(--muted); line-height: 1.4; }
.ct-actions { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.pr-badge {
  padding: .1rem .45rem; border-radius: 5px;
  font-size: .625rem; font-weight: 700; letter-spacing: .03em; white-space: nowrap;
}
.pr-red { background: #fee2e2; color: #b91c1c; } .pr-orange { background: #fef3c7; color: #b45309; }
.pr-blue { background: #dbeafe; color: #1d4ed8; } .pr-gray { background: #eef1f5; color: #64748b; }
/* BUGÜNÜM kapsam anahtarı (Kişisel / Ekip) — hero'nun altında */
.md-scope { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-top: .7rem; }
.md-scope-note { font-size: .73rem; font-style: normal; color: var(--muted); }

/* Ekip kipinde satırın sahibi — yalnız başkasının kaydında basılır */
.mp-owner {
  display: inline-flex; align-items: center; gap: .2rem; margin-left: .35rem;
  padding: 0 .3rem; border-radius: 5px; white-space: nowrap;
  font-size: .66rem; font-weight: 700;
  background: var(--surface-3); color: var(--muted);
}
.mp-owner svg { opacity: .7; }

/* "Bugün 2 kez görüşüldü" sayacı — müşteri adının hemen yanında */
.ct-times {
  display: inline-block; margin-left: .3rem; padding: 0 .3rem;
  border-radius: 5px; vertical-align: 1px;
  font-size: .64rem; font-weight: 800; letter-spacing: .02em;
  background: var(--surface-3); color: var(--muted);
}
.rj-tag {
  display: inline-flex; align-items: center; gap: .25rem; margin-top: .25rem;
  padding: .08rem .45rem; border-radius: 5px;
  font-size: .655rem; font-weight: 700; background: #fee2e2; color: #b91c1c;
}
.act-note { background: #ede9fe; color: #6d28d9; }
.act-note.is-on { background: #6d28d9; color: #fff; }

/* --- Hızlı görüşme notu formu --- */
.qnote[hidden] { display: none; }
.qnote {
  margin: .5rem 0 .2rem 0; padding: .7rem .8rem;
  background: #f8fafc; border: 1px solid var(--border); border-radius: 11px;
  animation: qnIn .16s ease;
}
@keyframes qnIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.qnote textarea { font-size: .84rem; resize: vertical; min-height: 54px; }
.qnote-row { display: flex; gap: .45rem; margin-top: .5rem; flex-wrap: wrap; }
.qnote-row select { flex: 1 1 150px; width: auto; padding: .4rem .55rem; font-size: .82rem; }
.qnote-row select[hidden] { display: none; }
.qnote-hint {
  display: flex; align-items: flex-start; gap: .35rem; margin: .5rem 0 0;
  font-size: .73rem; line-height: 1.45; color: var(--warn);
}
.qnote-hint[hidden] { display: none; }
.qnote-msg { margin-top: .5rem; padding: .4rem .6rem; border-radius: 8px; font-size: .76rem; font-weight: 600; }
.qnote-msg[hidden] { display: none; }
.qnote-msg.is-err { background: rgba(220,38,38,.1); color: var(--danger); }
.qnote-msg.is-ok  { background: rgba(22,163,74,.12); color: var(--success); }
.qnote-btns { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .6rem; }

/* ============================================================
   KOYU TEMA
   ============================================================ */
html[data-theme="dark"] .rv-head, html[data-theme="dark"] .rv-block { border-color: var(--border); }
html[data-theme="dark"] .ct-card { border-top-color: var(--border); }
html[data-theme="dark"] .qnote { background: var(--surface-2); border-color: var(--border); }
html[data-theme="dark"] .pr-red    { background: rgba(248,113,113,.16); color: #fca5a5; }
html[data-theme="dark"] .pr-orange { background: rgba(251,191,36,.16); color: #fcd34d; }
html[data-theme="dark"] .pr-blue   { background: rgba(56,189,248,.16); color: #7dd3fc; }
html[data-theme="dark"] .pr-gray   { background: var(--surface-3); color: #cbd5e1; }
html[data-theme="dark"] .rj-tag    { background: rgba(248,113,113,.16); color: #fca5a5; }
html[data-theme="dark"] .act-note  { background: rgba(167,139,250,.18); color: #c4b5fd; }
html[data-theme="dark"] .act-note.is-on { background: #7c3aed; color: #fff; }

/* ============================================================
   LİSTE MODÜLLERİ — PREMIUM KATMAN
   Müşterilerim (views/customers/index.php) ve Poliçelerim
   (views/policies/index.php) ekranları. Dashboard/Bugünüm ile
   AYNI tasarım dili: hero şerit, .dash-card + accent-* KPI
   kartları, .mrow ölçüm satırları, Core\Spark mini trendleri.
   Sayfa kökü ".dash .lst" olduğundan dashboard'un rafine
   tipografisi (ince rakam, versal etiket, tabular-nums) aynen
   geçerlidir; buradaki kurallar yalnız listeye özgü parçaları
   (araç çubuğu, filtre kabı, zengin tablo, sayfalama) tanımlar.
   Her bloğun koyu tema karşılığı ya hemen altında ya da 7-8.
   bölümdedir.
   ============================================================ */

/* Aydınlık temada da yardımcı yüzey tonları tanımlı olsun
   (koyu tema bunları html[data-theme="dark"] altında ezer).
   --text-2: küçük punto ikincil metin — --muted'dan daha
   kontrastlı; 11-12px satırlarda okunurluğu korur. */
:root {
  --surface-2: #f5f8fc;
  --surface-3: #eaf0f7;
  --text-2: #46566e;
  --label: #55647d;
}
html[data-theme="dark"] { --text-2: #b7c5d8; --label: #a3b1c6; }

/* Küçük punto versal etiketler (kolon başlıkları, alan etiketleri,
   sayaç satırları) --muted yerine --label kullanır: 10-12px boyutta
   kontrast oranı her iki temada da rahat okunur seviyeye çıkar. */
.lst .stat-cap,
.lst .lst-table thead th,
.lst .ls-f > label,
.lst .lp-total, .lst .lp-tools label,
.lst .pgn-info,
.lst .la-sec > strong,
.lst .lt-date span,
.lst .split-keys,
.lst .la-actions .la-hint { color: var(--label); }

.lst { --lst-row: 1px solid var(--border); --topbar-h: 61px; }
.lst [hidden] { display: none !important; }

/* ------------------------------------------------------------
   1) HERO ŞERİT — başlık, kapsam rozetleri ve ana eylemler
   ------------------------------------------------------------ */
.lst-hero { align-items: flex-start; }
.lst-hero .dh-main { flex: 1 1 340px; }
.lst-hero h1 { margin: .22rem 0 .5rem; font-size: 1.42rem; }
.lst-hero .dh-sub { align-items: center; }

.lst-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; justify-content: flex-end; }

/* Araç çubuğu düğmeleri — nötr cam yüzey, birincil eylem gradyan */
.lbtn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .85rem; border-radius: 11px; cursor: pointer;
  font: inherit; font-size: .815rem; font-weight: 600; white-space: nowrap;
  color: var(--text); background: var(--card);
  border: 1px solid var(--border); box-shadow: var(--sh-sm);
  text-decoration: none !important;
  transition: color .15s, border-color .15s, background .15s, transform .12s, box-shadow .15s;
}
.lbtn:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--sh-md); }
.lbtn:active { transform: translateY(0) scale(.985); }
.lbtn svg { opacity: .85; }
.lbtn:hover svg { opacity: 1; }
.lbtn.is-on { background: var(--primary-light); border-color: transparent; color: var(--primary); }
.lbtn.is-on svg { opacity: 1; }
.lbtn-primary, .lbtn-primary:hover {
  background: var(--brand-grad); border-color: transparent; color: #fff;
  box-shadow: 0 4px 13px rgba(79,70,229,.34);
}
.lbtn-primary:hover { box-shadow: 0 7px 19px rgba(79,70,229,.44); }
.lbtn-primary svg { opacity: 1; }
.lbtn-quiet { background: transparent; box-shadow: none; color: var(--muted); }

/* Şeridi zorla böler: sonrasındaki düğme kendi satırına, sağa yaslı düşer.
   `flex-basis:100%` sarmalı tetikler, sıfır yükseklik yer kaplamaz. */
.lst-actions .la-break { flex-basis: 100%; height: 0; margin: 0; padding: 0; }

/* Yenileme Hattı — poliçe şeridinin ikinci satırındaki tek düğme.
   Rengi keyfî değil: "Yaklaşan Yenileme" KPI kartı (`accent-cyan`) ve
   kenar çubuğundaki kısayol kutusu (`qb-cyan`) ile aynı camgöbeği aile.
   Kullanıcı üç ayrı yerde aynı işi aynı renkte görür. Birincil eylem
   (Yeni Poliçe) tek kalsın diye gradyan değil, dolgulu-kenarlı ton. */
.lbtn-renew {
  color: #0e7490;
  background: linear-gradient(135deg, rgba(8,145,178,.13), rgba(34,211,238,.10));
  border-color: color-mix(in srgb, #0891b2 34%, var(--border));
}
.lbtn-renew svg { opacity: 1; }
.lbtn-renew .lb-n { background: rgba(8,145,178,.18); color: #0e7490; }
.lbtn-renew:hover {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #0891b2, #0e7490);
  box-shadow: 0 6px 16px rgba(8,145,178,.36);
}
.lbtn-renew:hover .lb-n { background: rgba(255,255,255,.26); color: #fff; }
html[data-theme="dark"] .lbtn-renew {
  color: #67e8f9;
  background: linear-gradient(135deg, rgba(34,211,238,.14), rgba(8,145,178,.10));
  border-color: color-mix(in srgb, #22d3ee 30%, var(--border));
}
html[data-theme="dark"] .lbtn-renew .lb-n { background: rgba(34,211,238,.20); color: #a5f3fc; }
html[data-theme="dark"] .lbtn-renew:hover { color: #04241a; background: linear-gradient(135deg, #22d3ee, #0891b2); }
.lb-n {
  min-width: 17px; padding: 0 .34rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; text-align: center;
  background: var(--primary-light); color: var(--primary); font-variant-numeric: tabular-nums;
}
.lbtn-primary .lb-n, .lbtn.is-on .lb-n { background: rgba(255,255,255,.26); color: #fff; }

/* Kapsam seçici (Kişisel / Ekip · Aktif / Silinen) */
.lseg { display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.lseg a {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .38rem .8rem; border-radius: 9px;
  font-size: .795rem; font-weight: 600; color: var(--muted);
  text-decoration: none !important; transition: background .15s, color .15s;
}
.lseg a:hover { color: var(--primary); }
/* Seçili kapsam bir "rozet" gibi renklenir: her seçenek kendi tonunu taşır
   (kişisel = indigo, ekip = mor, aktif = zümrüt, silinen = kırmızı).
   Tonlar dashboard'un `.wtile` gradyan paletiyle aynı aileden; iki temada da
   beyaz metin kontrastı korunur. */
.lseg a.on {
  --seg-c1: #4f46e5; --seg-c2: #3730a3; --seg-sh: rgba(79,70,229,.4);
  background: linear-gradient(135deg, var(--seg-c1), var(--seg-c2));
  color: #fff;
  box-shadow: 0 3px 10px var(--seg-sh), inset 0 1px 0 rgba(255,255,255,.22);
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.lseg a.on svg { opacity: 1; }
/* Seçenek yanındaki kayıt sayısı — iki kapsamın farkını somutlaştırır */
.seg-n {
  margin-left: .12rem; padding: .04rem .38rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--label);
}
.lseg a.on .seg-n { background: rgba(255,255,255,.24); color: #fff; }
.lseg a:hover .seg-n { color: var(--primary); }
.lseg a.on:hover .seg-n { color: #fff; }
.lseg a.on:hover { color: #fff; }
.lseg a.tone-team.on   { --seg-c1: #6d28d9; --seg-c2: #4c1d95; --seg-sh: rgba(124,58,237,.4); }
.lseg a.tone-live.on   { --seg-c1: #047857; --seg-c2: #065f46; --seg-sh: rgba(5,150,105,.38); }
/* Kişisel kapsam — hero'daki .dh-pill-self ile aynı indigo aile */
.lseg a.tone-self.on   { --seg-c1: #4f46e5; --seg-c2: #3730a3; --seg-sh: rgba(79,70,229,.38); }
.lseg a.tone-danger.on { --seg-c1: #dc2626; --seg-c2: #991b1b; --seg-sh: rgba(185,28,28,.38); }
html[data-theme="dark"] .lseg a.on { box-shadow: 0 3px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.16); }

/* Hero'daki kapsam rozeti de aynı tonu alır (üstteki seçimle görsel bağ) */
.dh-pill-self { background: rgba(99,102,241,.16); color: #4338ca; }
.dh-pill-team { background: rgba(139,92,246,.17); color: #6d28d9; }
.dh-pill-live { background: rgba(16,185,129,.16); color: #047857; }
.dh-pill-danger { background: rgba(220,38,38,.13); color: #b91c1c; }
html[data-theme="dark"] .dh-pill-self { background: rgba(129,140,248,.20); color: #a5b4fc; }
html[data-theme="dark"] .dh-pill-team { background: rgba(167,139,250,.20); color: #c4b5fd; }
html[data-theme="dark"] .dh-pill-live { background: rgba(52,211,153,.18); color: #6ee7b7; }
html[data-theme="dark"] .dh-pill-danger { background: rgba(248,113,113,.18); color: #fca5a5; }

html[data-theme="dark"] .lbtn-primary, html[data-theme="dark"] .lbtn-primary:hover { color: #04241a; box-shadow: 0 4px 14px rgba(16,185,129,.3); }
html[data-theme="dark"] .lbtn-primary .lb-n { background: rgba(0,0,0,.18); color: #04241a; }
html[data-theme="dark"] .lbtn:hover, html[data-theme="dark"] .lbtn.is-on { color: #6ee7b7; }
html[data-theme="dark"] .lbtn.is-on .lb-n { background: rgba(255,255,255,.14); color: #6ee7b7; }

/* ------------------------------------------------------------
   2) KPI IZGARASI — dashboard kartlarının liste ölçeği
   ------------------------------------------------------------ */
.lst-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin-bottom: 1rem; }
@media (max-width: 1250px) { .lst-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .lst-kpis { grid-template-columns: 1fr; } }
.lst-kpis.k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1400px) { .lst-kpis.k5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .lst-kpis.k5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .lst-kpis.k5 { grid-template-columns: 1fr; } }

.lst .dash-card { padding: .95rem 1.05rem; display: flex; flex-direction: column; }
.lst .sec-head { gap: .65rem; }
.lst .stat-big { font-size: clamp(1.42rem, 1.1rem + .7vw, 1.78rem); line-height: 1.08; }
.lst .stat-cap { margin-top: .14rem; }
.lst .stat-ico { width: 42px; height: 42px; border-radius: 13px; }
.lst .stat-ico svg { width: 19px; height: 19px; }
.lst .mrows { margin-top: auto; padding-top: .7rem; }
.lst .spark-wrap { margin: .65rem 0 0; }

/* Kartlar sırayla belirsin */
@media (prefers-reduced-motion: no-preference) {
  .lst-kpis > .dash-card { animation: fadeUp .38s cubic-bezier(.22,.61,.36,1) both; }
  .lst-kpis > .dash-card:nth-child(1) { animation-delay: .02s; }
  .lst-kpis > .dash-card:nth-child(2) { animation-delay: .06s; }
  .lst-kpis > .dash-card:nth-child(3) { animation-delay: .10s; }
  .lst-kpis > .dash-card:nth-child(4) { animation-delay: .14s; }
  .lst-kpis > .dash-card:nth-child(5) { animation-delay: .18s; }
}

/* Kart içi dağılım çubuğu (bireysel/kurumsal, ödeme kırılımı vb.) */
.split-bar { display: flex; height: 7px; margin-top: .2rem; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.split-bar > i { display: block; height: 100%; }
.sb-a { background: var(--primary); } .sb-b { background: #f59e0b; } .sb-c { background: #94a3b8; }
.split-keys { display: flex; flex-wrap: wrap; gap: .2rem .8rem; margin-top: .45rem; font-size: .73rem; color: var(--text-2); }
.split-keys span { display: inline-flex; align-items: center; gap: .32rem; }
.split-keys i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.split-keys b { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   3) ARAMA ŞERİDİ — her zaman görünen hızlı filtreler
   ------------------------------------------------------------ */
.lst-search {
  display: flex; align-items: flex-end; gap: .7rem; flex-wrap: wrap;
  margin-bottom: .8rem; padding: .8rem .95rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--sh-sm);
}
.ls-f { display: flex; flex-direction: column; gap: .26rem; min-width: 0; }
.ls-f.grow { flex: 1 1 260px; }
.ls-f > label {
  margin: 0; display: inline-flex; align-items: center; gap: .32rem;
  font-size: .69rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.ls-f > label svg { opacity: .8; }
.ls-f input, .ls-f select {
  padding: .5rem .7rem; font-size: .875rem; border-radius: 10px;
  background: var(--surface-2); border: 1.5px solid var(--border); color: var(--text);
}
.ls-f input:hover, .ls-f select:hover { background: var(--card); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.ls-f input:focus, .ls-f select:focus { background: var(--card); border-color: var(--primary); box-shadow: 0 0 0 3.5px var(--primary-light); }
.ls-f input::placeholder { color: color-mix(in srgb, var(--muted) 72%, transparent); }
/* Arama kutusu — sol ikonlu */
.ls-search-in { position: relative; display: flex; }
.ls-search-in svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.ls-search-in input { width: 100%; padding-left: 2.15rem; }
.ls-go { display: flex; gap: .45rem; margin-left: auto; }

/* Etkin filtre özeti — TEK SATIR şerit.
   Gelişmiş filtre paneli sonuç ekranında kapalı kaldığı için hangi
   filtrelerin uygulandığı burada özetlenir; her çip tek tıkla kalkar. */
.lst-fbar {
  display: flex; align-items: center; gap: .5rem;
  margin: -.2rem 0 .85rem; padding: .4rem .6rem .4rem .7rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--sh-sm);
  min-width: 0;
}
.fb-lead {
  display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0;
  font-size: .69rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--label);
}
.fb-lead svg { color: var(--primary); }
/* Çipler tek satırda kalır; sığmazsa şerit kendi içinde yatay kayar */
.fb-chips {
  display: flex; align-items: center; gap: .35rem; flex: 1 1 auto;
  min-width: 0; overflow-x: auto; scrollbar-width: thin; padding: 2px 0;
}
.fb-chips::-webkit-scrollbar { height: 5px; }
.fb-chips::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 32%, transparent); border-radius: 999px; }
.fb-res {
  flex-shrink: 0; font-size: .765rem; color: var(--label); white-space: nowrap;
  padding-left: .5rem; border-left: 1px solid var(--border);
}
.fb-res b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.fb-clear {
  display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0;
  padding: .26rem .6rem; border-radius: 8px;
  font-size: .755rem; font-weight: 600; color: var(--danger);
  background: rgba(220,38,38,.08); text-decoration: none !important;
  transition: background .14s, color .14s;
}
.fb-clear:hover { background: var(--danger); color: #fff; }
html[data-theme="dark"] .fb-clear { background: rgba(248,113,113,.12); color: #fca5a5; }
html[data-theme="dark"] .fb-clear:hover { background: #dc2626; color: #fff; }
@media (max-width: 760px) { .fb-lead, .fb-res { display: none; } }

.lchip {
  display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0;
  padding: .22rem .3rem .22rem .65rem; border-radius: 999px;
  font-size: .755rem; font-weight: 600; color: var(--primary); white-space: nowrap;
  background: var(--primary-light); border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
  text-decoration: none !important; transition: background .14s, transform .12s;
}
.lchip em { font-style: normal; font-weight: 500; opacity: .75; }
.lchip .lc-x { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 16%, transparent); }
.lchip:hover { transform: translateY(-1px); }
.lchip:hover .lc-x { background: var(--danger); color: #fff; }

/* ------------------------------------------------------------
   3b) HIZLI FİLTRE ŞERİDİ + KAYITLI FİLTRELER
   ------------------------------------------------------------
   Solda "günlük soru" düğmeleri (bugün ne kestim / kimi arayacağım /
   gelecek ay ne bitiyor), sağda kişinin kendi kaydettiği filtreler.
   Şerit arama kutusunun hemen altında durur: filtreleme niyeti tek
   bölgede toplansın, kullanıcı sayfayı taramak zorunda kalmasın. */
/* Şerit TEK SATIR kalır: düğmeler artınca sağdaki kayıtlı filtre kutusu alta
   kayıyor, şerit iki kata çıkıp listeyi aşağı itiyordu. Sığmayan düğmeler
   kutunun kendi içinde yatay kayar — kaydırma çubuğu ince ve sessiz. */
.lst-qbar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap;
  margin: -.2rem 0 .85rem; padding: .5rem .55rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--sh-sm);
}
.qf-quick {
  display: flex; align-items: center; gap: .32rem; flex-wrap: nowrap;
  flex: 1 1 auto; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  /* Dikey nefes payı: kap yatay kaydırıcı olduğu için dikey taşma da
     kırpılıyor — hover'daki translateY(-1px) düğmenin ÜST kenarını
     eziyordu. İçeriden 4px pay verilir, negatif kenar boşluğu şeridin
     dış ölçüsünü değiştirmeden hizayı korur. */
  padding: 4px 2px; margin: -4px -2px;
  /* Sağ kenarda yumuşak solma: düğmeler sığmadığında kaydırılabildiği
     görünsün, kırpılmış düğme "eksik" gibi durmasın. */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
}
/* Taşma yoksa maske de olmasın (son düğme boşuna soluklaşmasın) */
.qf-quick:not(.is-overflow) { -webkit-mask-image: none; mask-image: none; }
/* Düğmeler daralarak metnini kırpmasın; taşan kısım kaydırmayla gelsin */
.qf-quick > * { flex-shrink: 0; }
.qf-quick::-webkit-scrollbar { height: 5px; }
.qf-quick::-webkit-scrollbar-track { background: transparent; }
.qf-quick::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Hızlı filtre düğmesi — .lbtn'in daha yumuşak, "etiket" hissi veren hâli */
.qfbtn {
  display: inline-flex; align-items: center; gap: .32rem;
  padding: .42rem .62rem; border-radius: 999px; white-space: nowrap;
  font-size: .76rem; font-weight: 600; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
  text-decoration: none !important;
  transition: color .15s, border-color .15s, background .15s, transform .12s, box-shadow .15s;
}
.qfbtn svg { opacity: .8; }
.qfbtn:hover { color: var(--primary); border-color: var(--primary); background: var(--card); transform: translateY(-1px); }
.qfbtn:hover svg { opacity: 1; }
/* Etkin düğme dolu renk alır ve yanında "kapat" işareti taşır — kullanıcı
   filtreyi nereden kaldıracağını aramasın. */
.qfbtn.is-on {
  background: linear-gradient(135deg, #4f46e5, #3730a3); border-color: transparent; color: #fff;
  box-shadow: 0 3px 10px rgba(79,70,229,.34), inset 0 1px 0 rgba(255,255,255,.2);
}
.qfbtn.is-on svg { opacity: 1; }
.qf-x { display: grid; place-items: center; width: 16px; height: 16px; margin-left: .1rem;
        border-radius: 50%; background: rgba(255,255,255,.22); }
.qfbtn.is-on:hover { color: #fff; box-shadow: 0 5px 14px rgba(79,70,229,.42); }
.qfbtn.is-on:hover .qf-x { background: var(--danger); }
html[data-theme="dark"] .qfbtn.is-on { box-shadow: 0 3px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14); }
.qfbtn .lb-n { margin-left: .1rem; }
.qfbtn.is-on .lb-n { background: rgba(255,255,255,.26); color: #fff; }

/* Kapsam düğmeleri (Pasif / İptal) — dönem sorusu soran hızlı filtrelerden
   ince bir ayraçla ayrılır ve kapalıyken NÖTR durur: liste varsayılan
   kapsamının dışına çıkmak bilinçli bir seçim olsun. Açıkken kehribar/kırmızı
   tonu alır; kullanıcı "şu an fazladan ne görüyorum"u renkten okur. */
.qf-sep { width: 1px; align-self: stretch; min-height: 22px; margin: 0 .08rem; background: var(--border); }
.qfbtn-scope .lb-n { background: var(--surface-3); color: var(--muted); }
.qfbtn-scope:hover { color: var(--warn); border-color: var(--warn); }
.qfbtn-scope.is-on {
  background: linear-gradient(135deg, #b45309, #92400e); border-color: transparent; color: #fff;
  box-shadow: 0 3px 10px rgba(180,83,9,.30), inset 0 1px 0 rgba(255,255,255,.18);
}
.qfbtn-scope.is-on:hover { color: #fff; box-shadow: 0 5px 14px rgba(180,83,9,.40); }
.qfbtn-scope.is-on .lb-n { background: rgba(255,255,255,.26); color: #fff; }

/* Arama şeridindeki kapsam kutuları */
.ls-scope { display: inline-flex; align-items: center; gap: .35rem; padding-top: .06rem; }
.ls-scope .ltog span { padding: .42rem .6rem; font-size: .78rem; }

/* Liste başlığındaki kapsam rozeti */
.lp-note {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
  background: var(--surface-3); color: var(--text-2); cursor: help;
}
.lp-note svg { color: var(--success); }
@media (max-width: 760px) { .lp-note { display: none; } }

/* Sağ blok: kayıtlı filtre seçimi + kaydetme düğmesi.
   `flex-shrink: 0` — hızlı filtre kutusu ne kadar dolarsa dolsun bu blok
   ezilmez, kendi genişliğini korur ve şeritte sağda kalır. */
.qf-saved { display: flex; align-items: center; gap: .45rem; margin-left: auto; flex-wrap: nowrap; flex-shrink: 0; }
.qf-pick { display: flex; align-items: center; gap: .35rem; }
.qf-pick select {
  max-width: 140px; padding: .44rem .55rem; border-radius: 10px; font-size: .8rem;
  background: var(--surface-2); border: 1.5px solid var(--border); color: var(--text);
}
.qf-pick select:hover:not(:disabled) { background: var(--card); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.qf-pick select:focus { background: var(--card); border-color: var(--primary); box-shadow: 0 0 0 3.5px var(--primary-light); }
.qf-pick select:disabled, .qf-pick .lbtn[disabled] { opacity: .55; cursor: not-allowed; }
.qf-pick .lbtn[disabled]:hover { color: var(--text); border-color: var(--border); transform: none; box-shadow: var(--sh-sm); }
.lbtn-save { color: var(--success); border-color: color-mix(in srgb, var(--success) 32%, var(--border)); }
.lbtn-save:hover { color: #fff; background: var(--success); border-color: transparent; }
.lbtn-save:hover .lb-n { background: rgba(255,255,255,.26); color: #fff; }
/* `--success` (#16a34a) beyaz zeminde 3,3:1'de kalıyor — düğme etiketi için
   düşük. Aydınlık temada koyu yeşile inilir (uygulamanın `#b91c1c`/`#b45309`
   aynı gerekçeyle koyulaştırdığı yerlerle aynı desen). */
html[data-theme="light"] .lbtn-save { color: #15803d; }
/* Dar ekranda tek satır dayatmak ters teper: kayıtlı filtre kutusu alta
   iner ve tam genişlik alır, düğme şeridi kendi satırında kayar. */
@media (max-width: 700px) {
  .lst-qbar { flex-wrap: wrap; }
  .qf-saved { margin-left: 0; width: 100%; flex-shrink: 1; }
  .qf-quick { flex-basis: 100%; }
  .qf-pick { flex: 1 1 auto; }
  .qf-pick select { max-width: none; flex: 1 1 auto; }
}

/* ------------------------------------------------------------
   3c) SÜZÜLEN DÖNEMİN ÖZETİ
   ------------------------------------------------------------
   Üstteki KPI kartları portföyün TAMAMINI anlatır ve filtreyle
   değişmez. Hızlı filtre etkinken sorulan soru dönemseldir ("bugün
   kaç poliçe, ne kadar prim") — cevabı bu şerit verir. */
/* Şerit iki farklı okuma biçimini yan yana taşır ve biçim ikisini de
   ayrı ayrı destekler:
     - SAYILAR (prim, adet) tek bakışta okunacak "hero" rakamlardır:
       büyük punto, İNCE ağırlık (300). Kalın+küçük yazı bir tabloda
       kaybolurdu; ince+büyük yazı uzaktan bile okunur ve kalabalık
       göstermez.
     - KIRILIMLAR (tür, şirket) bir cümle değil bir KÜMEDİR. Virgüllü
       metin ("3 Kasko, 2 Trafik…") gözü satır boyunca sürüklüyordu;
       etiketlere ayrıldığında her kalem kendi kutusunda, adedi kendi
       rozetinde durur. Şirket etiketleri ayrıca renk kodludur — aynı
       şirket listede hep aynı sırada geldiği için renk de sabit kalır. */
.lst-fstat {
  position: relative;
  margin: -.2rem 0 .9rem; padding: 0 0 .15rem;
  background:
    radial-gradient(115% 130% at 0% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 62%),
    var(--card);
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border));
  border-radius: 16px; box-shadow: var(--sh-sm); overflow: hidden;
  animation: fadeUp .28s cubic-bezier(.22,.61,.36,1) both;
}
/* Üst kenarda incelen vurgu şeridi — panelin "başlık" olduğunu söyler */
.lst-fstat::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--primary),
              color-mix(in srgb, var(--primary) 30%, transparent) 48%, transparent 80%);
}
.fst-h {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  padding: .65rem .9rem .6rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: linear-gradient(90deg, var(--primary-light), transparent 70%);
}
.fst-h svg { color: var(--primary); flex: none; }
.fst-h b { font-size: .88rem; font-weight: 700; letter-spacing: -.01em; }
.fst-h em {
  font-style: normal; font-size: .755rem; font-weight: 600; color: var(--primary);
  padding: .14rem .55rem; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}
/* Hücreler ayraç çizgisiyle değil kendi yumuşak kutucuklarıyla ayrılır:
   dar ekranda satır sarınca ayraç mantığı bozulmuyor. */
/* Kolon payları kırılımların lehinedir: rakam kutuları kendi içeriği kadar
   yer tutar, artan genişlik etiketlere gider — "Anadolu Sigorta" gibi uzun
   adlar satır başına İKİŞER sığsın, altı etiket üç satırda bitsin. İlk
   kolonun alt sınırı prim rakamına göredir: sekiz haneli bir tutar
   ("₺21.942.863,31") tek satırda sığmalı, kutunun dışına taşmamalı. */
.fst-cells { display: grid; gap: .5rem; padding: .6rem .6rem .65rem;
  grid-template-columns: minmax(200px, .78fr) minmax(150px, .5fr) minmax(0, 1.75fr) minmax(0, 1.75fr); }
.fst-c {
  display: flex; flex-direction: column; gap: .25rem; min-width: 0;
  padding: .6rem .8rem .65rem; border-radius: 12px;
  background: color-mix(in srgb, var(--text) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.fst-c.wide { grid-column: auto; }
.fst-c > span { font-size: .705rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.fst-c > b { font-size: 1.02rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Hero rakamlar: büyük ve ince --- */
.fst-c.fst-hero {
  background: linear-gradient(155deg, color-mix(in srgb, var(--primary) 9%, transparent), transparent 72%);
  border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
}
.fst-c.fst-hero.fst-gold {
  background: linear-gradient(155deg, color-mix(in srgb, var(--warn) 12%, transparent), transparent 72%);
  border-color: color-mix(in srgb, var(--warn) 24%, var(--border));
}
.fst-hero > b {
  font-size: clamp(1.5rem, 2.4vw, 2.05rem); font-weight: 300;
  letter-spacing: -.025em; line-height: 1.12; white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
/* Prim rakamı adet rakamından bir tık küçüktür: sekiz hane + kuruş + ₺
   sığsın diye. Ağırlık ve renk aynı kaldığı için ikisi hâlâ eş görünür. */
.fst-hero.fst-gold > b { font-size: clamp(1.35rem, 1.95vw, 1.8rem); }
.fst-hero > b .cur { font-size: .52em; font-weight: 500; opacity: .72; margin-right: .1em; vertical-align: .16em; }
/* Rakamın peşine takılan birim ("poliçe") — sayının ölçeğini bozmadan bağlam
   verir. Adet kutusunda sarmaya izin verilir: beş haneli bir sayıda birim alt
   satıra düşsün, rakamı kırpmaktansa kutu bir tık uzasın. (Rakamın kendi
   içinde boşluk yok; kırılma yalnız birimin önünde olabilir.) */
.fst-hero > b em {
  font-style: normal; font-size: .3em; font-weight: 600; color: var(--muted);
  letter-spacing: .06em; text-transform: uppercase; vertical-align: .38em;
}
.fst-hero:not(.fst-gold) > b { white-space: normal; }
.fst-c > b.is-money { color: var(--warn); }
/* Aydınlık temada `--warn` (#d97706) beyazda 3,2:1 — şeridin en büyük
   rakamı için yetersiz; uygulamanın gold tonlarında kullandığı koyu
   kehribara inilir. */
html[data-theme="light"] .fst-c > b.is-money { color: #b45309; }
.fst-c .cur { font-size: .82em; opacity: .8; margin-right: .06em; }
.fst-neg {
  font-style: normal; font-size: .705rem; font-weight: 600; color: var(--danger);
  align-self: flex-start; padding: .1rem .4rem; border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 11%, transparent);
}

/* --- Kırılım etiketleri --- */
.fst-tags { display: flex; flex-wrap: wrap; gap: .3rem; padding-top: .12rem; }
.fst-tag {
  display: inline-flex; align-items: center; gap: .28rem; max-width: 100%;
  padding: .16rem .22rem .16rem .48rem; border-radius: 999px;
  font-size: .72rem; line-height: 1.5;
  color: var(--tgc, var(--primary));
  background: color-mix(in srgb, var(--tgc, var(--primary)) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--tgc, var(--primary)) 28%, transparent);
  transition: transform .13s ease, background .13s, box-shadow .13s;
}
.fst-tag:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--tgc, var(--primary)) 18%, transparent);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--tgc, var(--primary)) 22%, transparent);
}
.fst-tag > b { font-size: 1em; font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fst-tag > i {
  flex: none; font-style: normal; font-size: .675rem; font-weight: 700;
  min-width: 1.15rem; padding: 0 .26rem; text-align: center;
  border-radius: 999px; color: var(--card); background: var(--tgc, var(--primary));
  font-variant-numeric: tabular-nums;
}
.fst-tag.is-more, .fst-tag.is-empty { --tgc: var(--muted); padding-inline: .55rem; font-weight: 600; }
.fst-tag.is-empty { border-style: dashed; }
/* Şirket etiketleri renk kodlu: palet, araç kartlarındakiyle aynı sekizli
   (bkz. `.rl-tint`). Sıra sabit olduğu için renk de kayıttan kayda oynamaz. */
.fst-tags.is-tint > :nth-child(8n+1) { --tgc: #4f46e5; }
.fst-tags.is-tint > :nth-child(8n+2) { --tgc: #0891b2; }
.fst-tags.is-tint > :nth-child(8n+3) { --tgc: #16a34a; }
.fst-tags.is-tint > :nth-child(8n+4) { --tgc: #d97706; }
.fst-tags.is-tint > :nth-child(8n+5) { --tgc: #db2777; }
.fst-tags.is-tint > :nth-child(8n+6) { --tgc: #7c3aed; }
.fst-tags.is-tint > :nth-child(8n+7) { --tgc: #dc2626; }
.fst-tags.is-tint > :nth-child(8n+8) { --tgc: #0d9488; }
html[data-theme="dark"] .fst-tags.is-tint > :nth-child(8n+1) { --tgc: #a5b4fc; }
html[data-theme="dark"] .fst-tags.is-tint > :nth-child(8n+2) { --tgc: #67e8f9; }
html[data-theme="dark"] .fst-tags.is-tint > :nth-child(8n+3) { --tgc: #86efac; }
html[data-theme="dark"] .fst-tags.is-tint > :nth-child(8n+4) { --tgc: #fcd34d; }
html[data-theme="dark"] .fst-tags.is-tint > :nth-child(8n+5) { --tgc: #f9a8d4; }
html[data-theme="dark"] .fst-tags.is-tint > :nth-child(8n+6) { --tgc: #c4b5fd; }
html[data-theme="dark"] .fst-tags.is-tint > :nth-child(8n+7) { --tgc: #fca5a5; }
html[data-theme="dark"] .fst-tags.is-tint > :nth-child(8n+8) { --tgc: #5eead4; }
/* "+3" ve "kayıt yok" palete girmez — sayaç değil, kalanın habercisidir */
.fst-tags.is-tint > .is-more, .fst-tags.is-tint > .is-empty { --tgc: var(--muted); }

@media (max-width: 1100px) {
  .fst-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .fst-cells { grid-template-columns: 1fr; }
  .fst-hero > b { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fst-tag:hover { transform: none; }
}

/* ------------------------------------------------------------
   4) GELİŞMİŞ FİLTRE PANELİ
   ------------------------------------------------------------ */
.lst-adv {
  margin-bottom: .9rem; padding: 0; overflow: hidden;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--sh-sm);
  animation: fadeUp .22s cubic-bezier(.22,.61,.36,1) both;
}
.la-head {
  display: flex; align-items: center; gap: .55rem;
  padding: .7rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.la-head h3 { margin: 0; font-size: .875rem; font-weight: 700; display: inline-flex; align-items: center; gap: .45rem; }
.la-head h3 svg { color: var(--primary); }
.la-head .la-close { margin-left: auto; }
.la-body { padding: .95rem 1rem 1.05rem; }
.la-body .cf-field label { font-size: .715rem; letter-spacing: .05em; text-transform: uppercase; }
.la-sec { margin-top: 1rem; padding-top: .85rem; border-top: 1px dashed var(--border); }
.la-sec > strong { display: block; margin-bottom: .55rem; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
/* Özel filtreler: onay kutusu yerine tıklanabilir etiket */
.la-toggles { display: flex; flex-wrap: wrap; gap: .4rem; }
.ltog { position: relative; display: inline-flex; margin: 0; }
.ltog input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ltog span {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .36rem .8rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: background .14s, color .14s, border-color .14s;
}
.ltog:hover span { border-color: var(--primary); color: var(--primary); }
.ltog input:checked + span { background: var(--primary-light); border-color: color-mix(in srgb, var(--primary) 40%, transparent); color: var(--primary); }
.ltog input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.la-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.05rem; padding-top: .85rem; border-top: 1px solid var(--border); }
.la-actions .la-hint { margin-right: auto; font-size: .775rem; color: var(--muted); display: inline-flex; align-items: center; gap: .35rem; }

/* ------------------------------------------------------------
   5) LİSTE PANELİ + ZENGİN TABLO
   ------------------------------------------------------------ */
/* `overflow: clip` — köşeleri yuvarlamak için gerekli kırpmayı yapar ama
   `hidden` gibi kaydırma kabı OLUŞTURMAZ; böylece tablo başlığı sayfanın
   kendi kaydırmasına göre yapışkan kalabilir. */
.lst-panel {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--sh-md); overflow: clip;
}
.lp-head {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .7rem .95rem; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.lp-scope {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .24rem .7rem; border-radius: 999px;
  font-size: .765rem; font-weight: 700;
  background: var(--primary-light); color: var(--primary);
}
/* Kapsam tonu üst şeritteki seçimle aynı (kişisel = indigo, ekip = mor) */
.lp-scope.sc-self { background: rgba(99,102,241,.16); color: #4338ca; }
.lp-scope.sc-team { background: rgba(139,92,246,.17); color: #6d28d9; }
html[data-theme="dark"] .lp-scope.sc-self { background: rgba(129,140,248,.20); color: #a5b4fc; }
html[data-theme="dark"] .lp-scope.sc-team { background: rgba(167,139,250,.20); color: #c4b5fd; }
.lp-total { font-size: .795rem; color: var(--muted); }
.lp-total b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.lp-tools { margin-left: auto; display: inline-flex; align-items: center; gap: .55rem; }
.lp-tools form { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.lp-tools label { margin: 0; font-size: .745rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.lp-tools select { width: auto; padding: .3rem .6rem; font-size: .8rem; border-radius: 9px; background-color: var(--card); }

/* Kaydırma kabı: uzun listelerde başlık yapışkan kalır */
/* Liste kendi içinde DİKEY kaydırmaz: sayfa başına kaç kayıt seçildiyse
   tablo o kadar uzar, gezinme sayfanın kendi kaydırmasıyla yapılır.
   Geniş ekranda kap hiç kırpmaz (yapışkan başlık sayfaya göre çalışsın);
   dar ekranda yalnız yatay kaydırma açılır. */
.lst-scroll { overflow-x: auto; }
@media (min-width: 1200px) { .lst-scroll { overflow: visible; } }
.lst-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.lst-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 34%, transparent); border-radius: 999px; border: 3px solid var(--card); }
.lst-scroll::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 55%, transparent); }

.lst-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .855rem; }
/* Yapışkan başlık sayfa kaydırmasında üst barın (`.topbar`, ~61px) hemen
   altında durur; üst barın z-index'i (20) daha yüksek olduğundan birkaç
   piksellik binme görünmez, boşluk kalmaz. */
.lst-table thead th {
  position: sticky; top: var(--topbar-h); z-index: 3;
  height: 38px; padding: 0 .8rem; vertical-align: middle; text-align: left; white-space: nowrap;
  background: var(--surface-2); color: var(--muted);
  font-size: .665rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase;
  box-shadow: inset 0 -1px 0 var(--border);
}
.lst-table thead th.num { text-align: right; }
.lst-table thead th.center { text-align: center; }
/* Sıralama bağlantısı */
.lt-sort { display: inline-flex; align-items: center; gap: .28rem; color: inherit; text-decoration: none !important; }
.lt-sort:hover { color: var(--primary); }
.lt-sort i { font-style: normal; font-size: .62rem; opacity: .45; transition: opacity .14s; }
.lt-sort:hover i { opacity: .9; }
.lt-sort.on { color: var(--primary); }
.lt-sort.on i { opacity: 1; }

/* Kolon altı arama satırı (sunucu tarafı arama) */
.lt-filters td {
  position: sticky; top: calc(var(--topbar-h) + 38px); z-index: 2;
  padding: .3rem .45rem; background: var(--card);
  box-shadow: inset 0 -1px 0 var(--border);
}
.lt-filters input {
  width: 100%; padding: .3rem .5rem; font-size: .765rem; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
}
.lt-filters select {
  width: 100%; padding: .3rem 1.5rem .3rem .5rem; font-size: .765rem; border-radius: 8px;
  background-color: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  -webkit-appearance: none; appearance: none; 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='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .35rem center;
}
.lt-filters input:focus, .lt-filters select:focus { background-color: var(--card); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
/* Dolu arama kutusu belirgin dursun (sunucuda uygulanan filtre) */
.lt-filters input.is-on, .lt-filters select.is-on {
  background-color: var(--primary-light); border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  color: var(--primary); font-weight: 600;
}
/* Satır sonundaki ara / temizle düğmeleri */
.lt-tools { display: inline-flex; gap: .2rem; justify-content: center; }
.lt-go, .lt-clear {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  background: var(--card); color: var(--muted);
  text-decoration: none !important; transition: background .14s, color .14s, border-color .14s;
}
.lt-go { background: var(--primary-light); border-color: transparent; color: var(--primary); }
.lt-go:hover { background: var(--primary); color: #fff; }
.lt-clear:hover { background: rgba(220,38,38,.1); border-color: transparent; color: var(--danger); }
html[data-theme="dark"] .lt-go { color: #6ee7b7; }
html[data-theme="dark"] .lt-go:hover { background: var(--primary); color: #04241a; }
html[data-theme="dark"] .lt-filters 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='%2393a1b5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.lst-table tbody td {
  padding: .62rem .8rem; vertical-align: middle;
  border-bottom: var(--lst-row); color: var(--text);
}
.lst-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.lst-table tbody td.center { text-align: center; }
.lst-table tbody tr { transition: background .14s, box-shadow .14s; }
.lst-table tbody tr:hover td { background: color-mix(in srgb, var(--primary) 5%, var(--card)); }
.lst-table tbody tr:hover { box-shadow: inset 3px 0 0 var(--primary); }
.lst-table tbody tr:last-child td { border-bottom: 0; }
/* Satır durumu vurguları */
.lst-table tr.is-muted td { opacity: .62; }
.lst-table tr.is-warn td  { background: color-mix(in srgb, var(--warn) 8%, var(--card)); }
.lst-table tr.is-warn:hover td { background: color-mix(in srgb, var(--warn) 13%, var(--card)); }
.lst-table tr.is-danger td { background: color-mix(in srgb, var(--danger) 7%, var(--card)); }
.lst-table tr.is-danger:hover td { background: color-mix(in srgb, var(--danger) 12%, var(--card)); }
.lst-table tr.tone-positive td:first-child { box-shadow: inset 3px 0 0 var(--success); }
.lst-table tr.tone-negative td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.lst-table tr.tone-neutral  td:first-child { box-shadow: inset 3px 0 0 var(--warn); }

@media (prefers-reduced-motion: no-preference) {
  .lst-table tbody tr { animation: fadeIn .26s ease both; }
}

/* ------------------------------------------------------------
   POLİÇE LİSTESİ — satırlar arası boşluk (bant görünümü)
   ------------------------------------------------------------
   Poliçe satırları çok satırlı (poliçe no + rozetler, müşteri künyesi,
   tür/şirket, vade, ödeme çubuğu). 1 px çizgi bunları ayırmaya yetmiyor,
   satırlar birbirine karışıyordu. Çizginin yerini sayfa zemini renginde
   ince bir boşluk alıyor: her satır ayrı bir kart bandı gibi okunuyor.

   `border-collapse: separate` zaten açık olduğu için boşluk hücrenin alt
   kenarlığıyla veriliyor — `border-spacing` kullanılmadı, çünkü o yapışkan
   başlık satırlarının arasını da açar ve kayan satırlar aradan görünür. */
#polTable tbody tr:not(.lst-noresult) td {
  padding-top: .8rem; padding-bottom: .8rem;
  background: var(--card);
  border-bottom: 7px solid var(--bg);
}
#polTable tbody tr:not(.lst-noresult) td:first-child {
  border-top-left-radius: 11px; border-bottom-left-radius: 11px;
}
#polTable tbody tr:not(.lst-noresult) td:last-child {
  border-top-right-radius: 11px; border-bottom-right-radius: 11px;
}
/* Durum vurgulu satırlarda zemin korunur, boşluk yine zemin renginde kalır */
#polTable tbody tr.is-warn td   { background: color-mix(in srgb, var(--warn) 9%, var(--card)); }
#polTable tbody tr.is-danger td { background: color-mix(in srgb, var(--danger) 8%, var(--card)); }
#polTable tbody tr:hover td     { background: color-mix(in srgb, var(--primary) 6%, var(--card)); }
/* Sol vurgu şeridi yuvarlatılmış köşeyi takip etsin diye ilk hücrede */
#polTable tbody tr:hover { box-shadow: none; }
#polTable tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
/* Son satırdan sonra boşluk gerekmez; panelin kendi dolgusu yeterli */
#polTable tbody tr:not(.lst-noresult):last-child td { border-bottom: 0; }

/* ------------------------------------------------------------
   POLİÇE ARŞİVİ — toplu seçim (süresi dolan poliçeler)
   ------------------------------------------------------------ */
.pol-chk { width: 38px; text-align: center; padding-left: .5rem !important; padding-right: .2rem !important; }
.pol-chk input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
/* Kutucuk olmayan satırlarda sütun boş kalır — hangi satırın seçilebildiği
   (yalnız süresi dolmuş olanlar) bakışta anlaşılsın diye kasıtlı. */
#polTable tbody tr.is-picked td {
  background: color-mix(in srgb, var(--primary) 11%, var(--card));
}
#polTable tbody tr.is-picked td:first-child { box-shadow: inset 3px 0 0 var(--primary); }

.pol-bulk[hidden] { display: none; }   /* bkz. .dvw[hidden] notu */
.pol-bulk {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 0 0 .7rem; padding: .55rem .8rem; border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
  border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
  box-shadow: var(--sh-sm);
}
.pol-bulk .pb-n { font-size: .82rem; color: var(--muted); }
.pol-bulk .pb-n b { font-size: .95rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.pol-bulk button[type=submit] { margin-left: auto; }

/* Arşiv rozeti ve satır içi arşivleme düğmesi */
.ltag.t-arch { color: #7c3aed; background: color-mix(in srgb, #7c3aed 12%, transparent); }
.lact.a-arch { --lac: #7c3aed; }
.cdx-actions .a-arch { --bc: #7c3aed; }

/* ============================================================
   BELGE GÖRÜNTÜLEYİCİ (.dvw) — poliçe dökümanı / müşteri dosyası
   ============================================================ */
body.dvw-open { overflow: hidden; }
.dvw { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1.2rem; }
/* `display` kuralı tarayıcının `[hidden] { display:none }` kuralını ezer:
   açıkça geri almazsak `hidden` özniteliği hiçbir işe yaramaz (modal
   kapanmaz, yalnız içeriği boşalırdı). */
.dvw[hidden] { display: none; }
.dvw-back { position: absolute; inset: 0; background: rgba(8,15,30,.62); backdrop-filter: blur(3px); }
.dvw-box {
  position: relative; display: flex; flex-direction: column;
  width: min(1080px, 100%); height: min(88vh, 100%);
  border-radius: 16px; overflow: hidden;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: 0 26px 70px rgba(8,15,30,.42);
}
.dvw-head {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .8rem; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.dvw-ico { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 9px; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.dvw-title {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: .88rem; font-weight: 700; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dvw-tools { display: flex; gap: .35rem; flex-shrink: 0; }
.dvw-tools .lbtn { padding: .4rem .7rem; font-size: .78rem; }
.dvw-tools .dvw-x { --bc: #dc2626; }

.dvw-body { flex: 1 1 auto; min-height: 0; background: var(--surface-3); }
.dvw-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.dvw-imgwrap { width: 100%; height: 100%; overflow: auto; display: grid; place-items: center; padding: 1rem; }
.dvw-img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: var(--sh-md); }
.dvw-none {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; text-align: center; padding: 2rem; color: var(--muted);
}
.dvw-none-ico { font-size: 2.6rem; }
.dvw-none strong { font-size: .95rem; color: var(--text); }
.dvw-none p { margin: 0 0 .6rem; font-size: .82rem; max-width: 380px; }

@media (max-width: 760px) {
  .dvw { padding: .5rem; }
  .dvw-box { height: 94vh; }
  .dvw-tools .lbtn { padding: .4rem .5rem; }
  .dvw-tools .lbtn span { display: none; }   /* dar ekranda yalnız ikon */
}

/* --- Ana hücre: avatar + isim + alt bilgi --- */
.lt-main { min-width: 232px; }
.lt-id { display: flex; align-items: flex-start; gap: .6rem; }
.lt-av {
  display: grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 11px;
  font-size: .74rem; font-weight: 700; letter-spacing: .01em; color: #fff;
  background: linear-gradient(150deg, #6366f1, #4338ca);
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.2), 0 2px 6px rgba(15,23,42,.14);
}
.lt-av.av-f { background: linear-gradient(150deg, #f472b6, #be185d); }
.lt-av.av-m { background: linear-gradient(150deg, #60a5fa, #1d4ed8); }
.lt-av.av-c { background: linear-gradient(150deg, #fbbf24, #b45309); }
.lt-av.av-n { background: linear-gradient(150deg, #94a3b8, #475569); }
.lt-idmain { min-width: 0; }
/* Kayıt adı: her iki temada da ana metin rengi; vurgu hover'da gelir
   (koyu temanın genel `a` yeşili burada bilinçli olarak ezilir). */
.lst a.lt-name, .lst .lt-name {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .9rem; font-weight: 700; color: var(--text); letter-spacing: -.005em;
  text-decoration: none !important;
}
.lst a.lt-name:hover { color: var(--primary); }
.lt-sub { display: flex; flex-wrap: wrap; gap: .1rem .6rem; margin-top: .16rem; font-size: .745rem; color: var(--text-2); }
.lt-sub span { display: inline-flex; align-items: center; gap: .25rem; }
.lt-sub svg { opacity: .65; }
.lt-sub b { font-weight: 600; font-variant-numeric: tabular-nums; }
.lt-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }

/* --- İletişim hücresi --- */
.lt-contact { display: flex; flex-direction: column; gap: .22rem; font-size: .795rem; }
.lt-contact a { color: var(--text-2); text-decoration: none; }
.lt-contact a:hover { color: var(--primary); }
.lt-contact span { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.lt-contact svg { opacity: .6; flex-shrink: 0; }
.lt-contact .lt-mail { font-size: .745rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }
.lt-wa {
  display: inline-grid; place-items: center; width: 21px; height: 21px; flex-shrink: 0;
  border-radius: 50%; background: #25d366; color: #fff !important;
  box-shadow: 0 2px 6px rgba(37,211,102,.35); transition: transform .12s;
}
.lt-wa:hover { transform: scale(1.1); }

/* --- Meta liste (meslek/şehir/medeni durum vb.) --- */
.lt-meta { display: flex; flex-direction: column; gap: .16rem; font-size: .78rem; color: var(--text-2); }
.lt-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.lt-meta svg { opacity: .6; flex-shrink: 0; }
.lt-meta a { color: inherit; }
.lt-meta a:hover { color: var(--primary); }

/* --- Varlık rozetleri --- */
.lt-assets { display: inline-flex; flex-wrap: wrap; gap: .25rem; justify-content: center; }
.lt-asset {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .16rem .42rem; border-radius: 8px;
  font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--surface-3); color: var(--text-2);
}
.lt-asset.as-policy { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.lt-asset.as-home   { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.lt-asset.as-car    { background: color-mix(in srgb, #6366f1 15%, transparent); color: #4f46e5; }
.lt-asset.as-pet    { background: color-mix(in srgb, #ec4899 14%, transparent); color: #db2777; }
html[data-theme="dark"] .lt-asset.as-car { color: #a5b4fc; }
html[data-theme="dark"] .lt-asset.as-pet { color: #f9a8d4; }

/* --- Temsilci çipi (ada göre sabit renk, iki temada da okunur) --- */
.rep-chip {
  --c: #4f46e5;
  display: inline-flex; align-items: center; gap: .4rem; max-width: 100%;
  padding: .2rem .62rem .2rem .22rem; border-radius: 999px;
  font-size: .755rem; font-weight: 600;
  background: color-mix(in srgb, var(--c) 11%, var(--card));
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  color: color-mix(in srgb, var(--c) 72%, var(--text));
  transition: transform .12s, box-shadow .12s;
}
.rep-chip .rc-av {
  display: grid; place-items: center; flex-shrink: 0;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--c); color: #fff; font-size: .56rem; font-weight: 700;
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.22);
}
.rep-chip .rc-n { min-width: 0; max-width: 13ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tr:hover > td > .rep-chip { transform: translateY(-1px); box-shadow: var(--sh-sm); }
html[data-theme="dark"] .rep-chip {
  background: color-mix(in srgb, var(--c) 20%, transparent);
  border-color: color-mix(in srgb, var(--c) 34%, transparent);
  color: color-mix(in srgb, var(--c) 30%, #ffffff);
}

/* --- Durum / kategori rozetleri --- */
.lstat {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .18rem .6rem; border-radius: 999px;
  font-size: .745rem; font-weight: 700; white-space: nowrap;
  background: var(--surface-3); color: var(--text-2);
}
.lstat::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* Nokta göstergesi kayıt durumuna ayrılmıştır; ödeme gibi ikincil
   rozetlerde `.plain` ile kapatılır. */
.lstat.plain::before { display: none; }
.lstat.ok   { background: color-mix(in srgb, var(--success) 13%, transparent); color: var(--success); }
.lstat.warn { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.lstat.bad  { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.lstat.off  { background: var(--surface-3); color: var(--muted); }
.lstat.info { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }

.ltag {
  display: inline-flex; align-items: center; gap: .22rem;
  padding: .1rem .45rem; border-radius: 6px;
  font-size: .665rem; font-weight: 700; letter-spacing: .015em; white-space: nowrap;
  background: var(--surface-3); color: var(--text-2);
}
.ltag.t-corp   { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.ltag.t-blue   { background: color-mix(in srgb, var(--info) 15%, transparent); color: var(--info); }
.ltag.t-pink   { background: color-mix(in srgb, #ec4899 15%, transparent); color: #db2777; }
.ltag.t-violet { background: color-mix(in srgb, #8b5cf6 16%, transparent); color: #6d28d9; }
.ltag.t-teal   { background: color-mix(in srgb, #14b8a6 16%, transparent); color: #0f766e; }
.ltag.t-green  { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
html[data-theme="dark"] .ltag.t-pink   { color: #f9a8d4; }
html[data-theme="dark"] .ltag.t-violet { color: #c4b5fd; }
html[data-theme="dark"] .ltag.t-teal   { color: #5eead4; }

/* --- Tarih hücresi --- */
.lt-date { display: flex; flex-direction: column; gap: .1rem; white-space: nowrap; }
.lt-date b { font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.lt-date span { font-size: .715rem; color: var(--muted); }
.lt-date span.is-soon { color: var(--warn); font-weight: 700; }
.lt-date span.is-over { color: var(--danger); font-weight: 700; }
/* Göreli tarihin yanındaki kayıt saati: bir tık daha küçük ve soluk. */
.lt-date .lt-clock {
  font-size: .86em; font-style: normal; opacity: .72;
  font-variant-numeric: tabular-nums; margin-left: .18em;
}

/* --- Tutar hücresi --- */
.lt-money { display: flex; flex-direction: column; align-items: flex-end; gap: .08rem; white-space: nowrap; }
.lt-money b { font-size: .95rem; font-weight: 400; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lt-money .cur { font-size: .72em; opacity: .55; margin-right: .08em; }
.lt-money small { font-size: .7rem; color: var(--muted); }
.lt-money small.neg { color: var(--danger); }

/* --- Ödeme ilerlemesi --- */
.lt-pay { display: flex; flex-direction: column; gap: .25rem; min-width: 108px; }
.lt-pay .mini-bar { height: 5px; }
.lt-pay .lp-note { font-size: .69rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- Satır işlemleri --- */
.lt-act { display: inline-flex; gap: .22rem; justify-content: center; }
.lt-act form { display: inline; margin: 0; }
.lact {
  display: inline-grid; place-items: center; width: 29px; height: 29px;
  border: 1px solid transparent; border-radius: 9px; cursor: pointer;
  background: var(--surface-3); color: var(--text-2);
  text-decoration: none !important; transition: transform .12s, background .14s, color .14s, box-shadow .14s;
}
.lact:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); }
.lact.a-view { background: color-mix(in srgb, var(--info) 13%, transparent); color: var(--info); }
.lact.a-edit { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.lact.a-add  { background: color-mix(in srgb, var(--success) 13%, transparent); color: var(--success); }
.lact.a-off  { background: color-mix(in srgb, var(--danger) 11%, transparent); color: var(--danger); }
.lact.a-view:hover { background: var(--info); color: #fff; }
.lact.a-edit:hover { background: var(--warn); color: #fff; }
.lact.a-add:hover  { background: var(--success); color: #fff; }
.lact.a-off:hover  { background: var(--danger); color: #fff; }

/* --- Boş durum --- */
.lst-empty {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: 3.2rem 1rem; text-align: center; color: var(--muted);
}
.lst-empty svg { color: color-mix(in srgb, var(--muted) 45%, transparent); margin-bottom: .35rem; }
.lst-empty strong { font-size: .95rem; color: var(--text); }
.lst-empty p { margin: .1rem 0 .8rem; font-size: .83rem; max-width: 46ch; }
/* Anlık filtre hiçbir satırı bırakmadığında JS bunu gösterir */
.lst-noresult td { padding: 2.2rem 1rem !important; text-align: center; color: var(--muted); font-size: .86rem; }

/* ------------------------------------------------------------
   6) SAYFALAMA — pencereli, kayıt aralığı bilgili
   ------------------------------------------------------------ */
.pgn {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .7rem .95rem; background: var(--surface-2); border-top: 1px solid var(--border);
}
.pgn-info { font-size: .78rem; color: var(--muted); }
.pgn-info b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.pgn-pages { margin-left: auto; display: inline-flex; align-items: center; gap: .22rem; flex-wrap: wrap; }
.pgn-pages a, .pgn-pages span {
  display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 .5rem;
  border: 1px solid var(--border); border-radius: 9px;
  font-size: .8rem; font-weight: 600; color: var(--text); background: var(--card);
  text-decoration: none !important; font-variant-numeric: tabular-nums;
  transition: color .14s, border-color .14s, background .14s, transform .12s;
}
.pgn-pages a:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-1px); }
.pgn-pages .is-cur { background: var(--brand-grad); border-color: transparent; color: #fff; box-shadow: 0 3px 10px rgba(79,70,229,.3); }
.pgn-pages .is-gap { border: 0; background: transparent; color: var(--muted); min-width: 18px; }
.pgn-pages .is-off { opacity: .4; pointer-events: none; }
html[data-theme="dark"] .pgn-pages .is-cur { color: #04241a; box-shadow: 0 3px 10px rgba(16,185,129,.28); }

@media (max-width: 720px) {
  .lst-actions { width: 100%; justify-content: flex-start; }
  .lst-table thead th, .lt-filters td { position: static; }
  .pgn-pages { margin-left: 0; }
}

/* ------------------------------------------------------------
   7) KOYU TEMA — yüzey/kenarlık düzeltmeleri
   ------------------------------------------------------------ */
html[data-theme="dark"] .lst-search,
html[data-theme="dark"] .lst-adv,
html[data-theme="dark"] .lst-panel { background: var(--card); border-color: var(--border); }
html[data-theme="dark"] .la-head,
html[data-theme="dark"] .lp-head,
html[data-theme="dark"] .pgn,
html[data-theme="dark"] .lst-table thead th { background: var(--surface-2); }
html[data-theme="dark"] .lt-filters td { background: var(--card); }
html[data-theme="dark"] .ls-f input,
html[data-theme="dark"] .ls-f select,
html[data-theme="dark"] .lt-filters input { background: var(--surface-2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .lt-av { box-shadow: inset 0 -1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.4); }
html[data-theme="dark"] .lst-scroll::-webkit-scrollbar-thumb { border-color: var(--card); }

/* ------------------------------------------------------------
   8) ESKİ ORTAK ROZETLERİN KOYU TEMA BOŞLUKLARI
   (.tag-*, .pay-badge, .camp-badge ve süresi yaklaşan satır
   vurgusu aydınlık pastel değerlerle sabitti; koyu temada
   beyaz zemin/okunmaz metin bırakıyordu — karşılıkları burada.)
   ------------------------------------------------------------ */
html[data-theme="dark"] .tag-primary { background: rgba(56,189,248,.16); color: #7dd3fc; }
html[data-theme="dark"] .tag-amber   { background: rgba(251,191,36,.16); color: #fcd34d; }
html[data-theme="dark"] .tag-pink    { background: rgba(236,72,153,.18); color: #f9a8d4; }
html[data-theme="dark"] .tag-cyan    { background: rgba(34,211,238,.16); color: #67e8f9; }
html[data-theme="dark"] .tag-teal    { background: rgba(45,212,191,.16); color: #5eead4; }
html[data-theme="dark"] .pay-paid    { background: rgba(52,211,153,.16); color: #6ee7b7; }
html[data-theme="dark"] .pay-part    { background: rgba(56,189,248,.16); color: #7dd3fc; }
html[data-theme="dark"] .pay-unpaid  { background: rgba(248,113,113,.16); color: #fca5a5; }
html[data-theme="dark"] .camp-badge  { background: rgba(52,211,153,.14); color: #6ee7b7; }
html[data-theme="dark"] .cust-table tr.row-expiring td { background: rgba(251,191,36,.08); }
html[data-theme="dark"] .cust-table tr.row-expiring:hover td { background: rgba(251,191,36,.14); }


/* ------------------------------------------------------------
   9) AYDINLIK TEMA — küçük punto anlam renklerinin kontrastı
   Yeşil/amber/camgöbeği tonları beyaz zeminde 3:1'in altında
   kalıyordu; rozet ve mini etiketlerde bir tık koyu karşılıkları
   kullanılır (koyu temada parlak tonlar aynen korunur).
   ------------------------------------------------------------ */
html[data-theme="light"] .lst .lstat.ok,
html[data-theme="light"] .lst .lt-asset.as-policy,
html[data-theme="light"] .lst .ltag.t-green { color: #15803d; }
/* #b45309 amber, %15 amber tint üzerinde 3.97:1 ölçüldü (AA sınırı 4.5);
   bir tık daha koyu tonla 4.9:1'e çıkarıldı. */
html[data-theme="light"] .lst .lstat.warn,
html[data-theme="light"] .lst .ltag.t-corp,
html[data-theme="light"] .lst .lt-date span.is-soon { color: #92400e; }
html[data-theme="light"] .lst .lstat.info,
html[data-theme="light"] .lst .ltag.t-blue,
html[data-theme="light"] .lst .lt-asset.as-home { color: #0e7490; }
html[data-theme="light"] .lst .lstat.bad,
html[data-theme="light"] .lst .lt-date span.is-over { color: #b91c1c; }
html[data-theme="light"] .lst .lt-money small.neg { color: #b91c1c; }
/* Dashboard/Bugünüm ile ortak `.delta` rozetleri: aydınlık temada
   yeşil/amber tonlar pastel zeminde 3:1'in altında kalıyordu. */
/* Yeşil ve amber rozetler kendi %12 tonlu zeminlerinde 4.39 / 4.37:1
   ölçüldü (AA sınırı 4.5); bir tık koyu karşılıklarına çekildi. */
html[data-theme="light"] .delta.up   { color: #166534; }
html[data-theme="light"] .delta.mid  { color: #92400e; }
html[data-theme="light"] .delta.down { color: #b91c1c; }

/* Canlı arama sırasında liste hafifçe soluklaşır ve ince bir ilerleme
   şeridi akar — sayfa yenilenmediği için geri bildirim şart. */
.lst-panel { position: relative; }
.lst-panel.is-busy .lst-scroll { opacity: .55; transition: opacity .12s ease; pointer-events: none; }
.lst-panel.is-busy::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 5;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: lstBusy 1s linear infinite;
}
@keyframes lstBusy { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { .lst-panel.is-busy::after { animation: none; } }

/* Tablo içine taşınan boş durum: satır zeminini bozmasın */
.lst-table tbody tr.lst-noresult:hover td { background: transparent; }
.lst-table tbody tr.lst-noresult:hover { box-shadow: none; }
.lst-table tbody tr.lst-noresult td { padding: 0; }

/* ============================================================
   MÜŞTERİ FORMU — PREMIUM KATMAN
   Kök `.dash .cfrm` olduğundan hero şeridi ve rafine tipografi
   liste ekranlarıyla ortak. Buradaki kurallar forma özgü
   parçaları (bölüm kartları, sol navigasyon, yapışkan kaydet
   çubuğu) premium tona çeker.
   ============================================================ */

/* --- Hero: formda daha kompakt --- */
.cfrm-hero { align-items: flex-start; margin-bottom: 1.1rem; }
.cfrm-hero h1 { margin: .22rem 0 .5rem; font-size: 1.38rem; }
.cfrm-hero .dh-sub { align-items: center; }

/* --- Bölüm kartı: renk aksanlı üst çizgi + yükselme --- */
.cfrm .fsec {
  position: relative; overflow: hidden;
  border-radius: 16px; box-shadow: var(--sh-sm);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.cfrm .fsec:hover { box-shadow: var(--sh-md); }
.cfrm .fsec[class*="accent-"]::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; opacity: .9; z-index: 1;
}
/* Açık bölümün başlığı hafif tintli — nerede olduğun belli olsun */
.cfrm .fsec-head { padding: .85rem 1.1rem; }
.cfrm .fsec:not(.is-closed) > .fsec-head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, transparent), transparent);
}
.cfrm .fsec-t { font-size: .98rem; letter-spacing: -.01em; }
.cfrm .fsec-t small { font-size: .74rem; }

/* İkon rozeti: cam yüzey + iç ışık (dashboard `.stat-ico` diliyle aynı) */
.cfrm .fsec-ico {
  width: 36px; height: 36px; border-radius: 11px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--primary) 16%, transparent),
                                       color-mix(in srgb, var(--primary) 7%, transparent));
  color: var(--primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 8px rgba(15,23,42,.07);
}
html[data-theme="dark"] .cfrm .fsec-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 2px 10px rgba(0,0,0,.35); }
.cfrm .fsec-chip {
  background: color-mix(in srgb, var(--primary) 13%, transparent);
  font-weight: 700; letter-spacing: .01em;
}

/* --- Sol navigasyon: numaralı, aktifi gradyan --- */
.cfrm-nav { border-radius: 16px; padding: .6rem; }
.cfn-cap { font-size: .655rem; letter-spacing: .11em; }
.cfrm .cfn-item { padding: .52rem .62rem; font-size: .845rem; font-weight: 600; }
.cfrm .cfn-item.is-active {
  background: var(--brand-grad); color: #fff;
  box-shadow: 0 4px 12px rgba(79,70,229,.32);
}
html[data-theme="dark"] .cfrm .cfn-item.is-active { color: #04241a; box-shadow: 0 4px 12px rgba(16,185,129,.28); }
html[data-theme="dark"] .cfrm .cfn-item.is-active i { color: #04241a; }
.cfn-badge { font-size: .72rem; }

/* --- Alan etiketleri ve giriş kutuları --- */
.cfrm .cf-field label { font-size: .735rem; letter-spacing: .04em; text-transform: uppercase; color: var(--label); }
.cfrm .cf-field:focus-within > label { color: var(--primary); }

/* --- Yapışkan kaydet çubuğu --- */
.cfrm .cf-actions {
  border-radius: 16px; box-shadow: 0 -6px 24px rgba(15,30,50,.10);
  background: color-mix(in srgb, var(--card) 88%, transparent);
}
.cfrm .cf-actions .btn-primary {
  background: var(--brand-grad); border: 0; color: #fff;
  box-shadow: 0 4px 13px rgba(79,70,229,.34);
}
html[data-theme="dark"] .cfrm .cf-actions { background: color-mix(in srgb, var(--card) 90%, transparent); }
html[data-theme="dark"] .cfrm .cf-actions .btn-primary { color: #04241a; }

/* --- Modal içinde: hero kısalır (başlık zaten modal başlığında) --- */
.mdl-body .cfrm-hero { padding: .8rem 1rem; margin-bottom: .9rem; }
.mdl-body .cfrm-hero h1, .mdl-body .cfrm-hero .dh-eyebrow { display: none; }
.mdl-body .cfrm-hero .dh-sub { margin-top: 0; }
.mdl-body .cfrm .fsec { border-radius: 14px; }

/* ============================================================
   POLİÇE FORMU — PREMIUM KATMAN
   Müşteri formuyla aynı `.cfrm` dili; buradaki kurallar poliçeye
   özgü parçaları (müşteri arama kutusu, sigortalı seçimi, araç
   radyoları, iki kolonlu bölüm ızgarası) tanımlar.
   ============================================================ */

/* --- Bölüm ızgarası: iki kolon, geniş bölümler tam satır ---
   `align-items: stretch` (varsayılan) ile aynı satırdaki kartlar EŞİT
   YÜKSEKLİKTE olur; `start` kullanıldığında bitişleri kayıyor ve düzen
   dağınık görünüyordu. Alt boşluk yapışkan kaydet çubuğunun son kartı
   örtmesini engeller. */
.pfrm-grid, .ofrm .pfrm-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem; align-items: stretch;
}
.pfrm-grid > .fsec { display: flex; flex-direction: column; }
.pfrm-grid > .fsec > .fsec-body { flex: 1 1 auto; }
.pfrm-grid > .pf-wide { grid-column: 1 / -1; }
@media (max-width: 1000px) { .pfrm-grid { grid-template-columns: 1fr; } .pfrm-grid > .pf-wide { grid-column: auto; } }
.pfrm .cfrm-form, .ofrm .cfrm-form { max-width: none; }
/* Yapışkan çubuk içeriği örtmesin */
.pfrm .cfrm-form, .ofrm .cfrm-form { padding-bottom: .2rem; }
.pfrm .cf-actions, .ofrm .cf-actions { margin-top: 1.1rem; }

/* Not/textarea bölümleri satırın tamamını kullansın: kısa kartın yanında
   uzayan boşluk yerine kutu kendi alanını doldursun. */
.pfrm-grid > .fsec > .fsec-body > .cf-field { height: 100%; }
.pfrm-grid > .fsec > .fsec-body > .cf-field > textarea { flex: 1 1 auto; min-height: 120px; resize: vertical; }

/* --- Müşteri kartı (adım 2) --- */
.pf-cust { display: flex; align-items: center; gap: .75rem; }
.pf-cust .lt-av { width: 42px; height: 42px; border-radius: 13px; font-size: .85rem; }
.pf-cust-main { min-width: 0; }
.pf-cust-main .lt-name { font-size: .98rem; }

/* --- Yenilemede müşteri e-postası uyarısı ---
   Kaydı ENGELLEMEYEN bir hatırlatma olduğu için hata kırmızısı değil
   uyarı sarısı kullanılır; kutu yine de gözden kaçmayacak kadar belirgin
   (sol şerit + zemin), çünkü tam da bu yüzden bugüne kadar atlanıyordu. */
.pf-mail {
  display: flex; align-items: flex-start; gap: .6rem; margin-top: .75rem;
  padding: .7rem .85rem; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warn) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-left: 3px solid var(--warn);
}
.pf-mail-i { display: inline-flex; flex: none; margin-top: .1rem; color: var(--warn); }
.pf-mail-b { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1; }
.pf-mail-b strong { font-size: .87rem; }
.pf-mail-b > span { font-size: .78rem; line-height: 1.5; color: var(--text-2, var(--muted)); }
.pf-mail .cf-field { margin-top: .45rem; max-width: 380px; }
html[data-theme="dark"] .pf-mail-b strong { color: #fcd34d; }

/* "Eposta adresini sonra gireceğim" — uyarının ikinci çıkış yolu.
   Alanın ALTINDA ve tıklanabilir bir kutu içinde: kenara iliştirilen çıplak
   bir onay kutusu görülmüyor, temsilci adresi bilmediğinde kaydı büsbütün
   bırakıyordu. Sonucu da yazıyor — işaretin bir bedeli var (görev açılır),
   bu bedel işaretlemeden önce görünmeli. */
.pf-mail-later {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: .55rem 0 0; padding: .5rem .6rem; max-width: 460px;
  border-radius: 10px; cursor: pointer;
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--warn) 45%, transparent);
  transition: background .14s, border-color .14s;
}
.pf-mail-later:hover { background: color-mix(in srgb, var(--warn) 16%, transparent); }
.pf-mail-later:has(input:checked) {
  background: color-mix(in srgb, var(--warn) 18%, transparent);
  border-style: solid; border-color: var(--warn);
}
.pf-mail-later input { flex: none; margin-top: .15rem; width: 16px; height: 16px; cursor: pointer; }
.pf-mail-later > span { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.pf-mail-later b { font-size: .81rem; font-weight: 650; }
.pf-mail-later em { font-style: normal; font-size: .745rem; line-height: 1.45; color: var(--muted); }

/* Müşteri formunda "bu işleme ait bir görev var, tamamlansın mı?"
   Adres yazılınca belirir (bkz. public/js/customer-form.js). */
.cf-taskask {
  display: flex; align-items: flex-start; gap: .6rem; margin-top: .8rem;
  padding: .7rem .85rem; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--success) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--success) 32%, transparent);
  border-left: 3px solid var(--success);
}
.cf-taskask[hidden] { display: none; }
.cf-taskask-i { display: inline-flex; flex: none; margin-top: .1rem; color: var(--success); }
.cf-taskask-b { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1; }
.cf-taskask-b strong { font-size: .87rem; }
.cf-taskask-b > span { font-size: .78rem; line-height: 1.5; color: var(--text-2, var(--muted)); }
.cf-taskask-a { display: inline-flex; gap: .35rem; flex: none; align-self: center; }
.cf-taskask-a .btn.is-on { box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 45%, transparent); }
@media (max-width: 620px) {
  .cf-taskask { flex-wrap: wrap; }
  .cf-taskask-a { width: 100%; justify-content: flex-end; }
}

/* --- Sigortalı seçimi: tıklanabilir kartçıklar --- */
/* Sigortalı öbekleri: kendisi / aile / diğer yakınlar / evcil ayrı
   kutularda. Tek listede yan yana dizilince kimin hangi yakınlık olduğu
   okunmuyordu; her öbek kendi rengini ve sayacını taşır. */
.pf-insgroups { display: grid; gap: .55rem; }
.pf-insgroup {
  padding: .55rem .65rem .6rem; border-radius: 12px;
  background: color-mix(in srgb, var(--gc, #64748b) 5%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--gc, #64748b) 22%, transparent);
}
.pf-insgroup.g-blue { --gc: #2563eb; } .pf-insgroup.g-pink { --gc: #db2777; }
.pf-insgroup.g-violet { --gc: #7c3aed; } .pf-insgroup.g-amber { --gc: #d97706; }
.pf-insgroup-h { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .45rem; }
.pf-insgroup-i {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
  background: color-mix(in srgb, var(--gc) 16%, transparent); color: var(--gc);
}
.pf-insgroup-h b { font-size: .8rem; font-weight: 800; color: var(--text); }
.pf-insgroup-h em { font-style: normal; font-size: .7rem; color: var(--muted); }
.pf-insgroup-n {
  display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; font-size: .65rem; font-weight: 800;
  background: color-mix(in srgb, var(--gc) 16%, transparent); color: var(--gc);
}
.pf-insgroup-all {
  margin-left: auto; padding: .12rem .5rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; cursor: pointer;
  color: var(--gc); background: transparent;
  border: 1px solid color-mix(in srgb, var(--gc) 35%, transparent);
}
.pf-insgroup-all:hover, .pf-insgroup-all.is-on { color: #fff; background: var(--gc); border-color: var(--gc); }

.pf-insured { display: flex; flex-wrap: wrap; gap: .45rem; }
.pf-ins { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.pf-ins input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pf-ins > span {
  display: inline-flex; flex-direction: column; gap: .05rem;
  padding: .45rem .8rem; border-radius: 11px;
  background: var(--surface-2); border: 1.5px solid var(--border);
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.pf-ins b { font-size: .85rem; font-weight: 600; color: var(--text); }
.pf-ins em { font-style: normal; font-size: .715rem; color: var(--label); }
.pf-ins:hover > span { border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.pf-ins input:checked + span {
  background: var(--primary-light); border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}
.pf-ins input:checked + span b { color: var(--primary); }
.pf-ins input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

/* --- Araç seçimi --- */
.pf-vehicles { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.pf-vlabel { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label); margin-right: .2rem; }
.pf-veh { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.pf-veh input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pf-veh > span {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .34rem .75rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.pf-veh input:checked + span { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }

/* ------------------------------------------------------------
   MÜŞTERİ SEÇİCİ (adım 1) — anlık arama
   ------------------------------------------------------------ */
/* Seçici, bulunduğu bölümün tamamını kullanır: dar kutu geniş kartın
   içinde asimetrik duruyordu. */
.cpick { max-width: none; }
.cpick-box {
  position: relative; display: flex; align-items: center;
  padding: .1rem .9rem; border-radius: 13px;
  background: var(--surface-2); border: 1.5px solid var(--border);
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.cpick-box svg { color: var(--muted); flex-shrink: 0; }
.cpick-box:focus-within { background: var(--card); border-color: var(--primary); box-shadow: 0 0 0 3.5px var(--primary-light); }
.cpick-box:focus-within svg { color: var(--primary); }
.cpick-box input {
  flex: 1 1 auto; border: 0; background: transparent; box-shadow: none;
  padding: .7rem .7rem; font-size: .95rem; color: var(--text);
}
.cpick-box input:focus { outline: 0; box-shadow: none; border: 0; background: transparent; }
.cpick-spin {
  width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--primary);
  animation: mdlSpin .7s linear infinite;
}

/* Sonuç listesi */
.cpick-results {
  margin-top: .5rem; max-height: 380px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--card); box-shadow: var(--sh-md);
  animation: fadeUp .18s cubic-bezier(.22,.61,.36,1) both;
}
.cpick-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .8rem; border-bottom: 1px solid var(--border);
  text-decoration: none !important; color: var(--text);
  transition: background .12s;
}
.cpick-item:last-child { border-bottom: 0; }
.cpick-item:hover, .cpick-item.is-active { background: color-mix(in srgb, var(--primary) 7%, var(--card)); }
.cpick-item.is-active { box-shadow: inset 3px 0 0 var(--primary); }
.cpick-av {
  display: grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 11px;
  font-size: .74rem; font-weight: 700; color: #fff;
  background: linear-gradient(150deg, #6366f1, #4338ca);
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.2);
}
.cpick-av.is-corp { background: linear-gradient(150deg, #fbbf24, #b45309); }
.cpick-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.cpick-main b { font-size: .9rem; font-weight: 700; }
.cpick-hit {
  font-style: normal; font-size: .745rem; font-weight: 600; color: var(--primary);
  background: var(--primary-light); border-radius: 6px; padding: .04rem .4rem; align-self: flex-start;
}
.cpick-meta { display: flex; flex-wrap: wrap; gap: .1rem .7rem; font-size: .745rem; color: var(--label); }
.cpick-meta span { font-variant-numeric: tabular-nums; }
.cpick-tail { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.cpick-cnt {
  font-size: .7rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success);
}
.cpick mark { background: color-mix(in srgb, var(--warn) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 .1em; }
html[data-theme="light"] .cpick-cnt { color: #15803d; }

.cpick-empty {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  margin-top: .6rem; padding: 1.6rem 1rem; text-align: center;
  color: var(--muted); border: 1px dashed var(--border); border-radius: 14px;
}
.cpick-empty svg { color: color-mix(in srgb, var(--muted) 45%, transparent); }
.cpick-hint {
  display: flex; align-items: flex-start; gap: .4rem;
  margin: .7rem 0 0; font-size: .78rem; color: var(--label);
}
.cpick-hint svg { color: var(--primary); margin-top: 1px; flex-shrink: 0; }

/* --- Teklif formu: evrak listesi --- */
.of-files { display: flex; flex-direction: column; gap: .4rem; }
.of-file {
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .7rem; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: .845rem;
}
.of-file-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); flex-shrink: 0; }
.of-file a { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.of-file a:hover { color: var(--primary); }
.of-file-size { flex-shrink: 0; font-size: .74rem; color: var(--label); font-variant-numeric: tabular-nums; }
.of-file form { margin: 0; flex-shrink: 0; }
.ofrm .auto-note .tgl { margin-right: .5rem; }
.of-note-txt { color: var(--text-2); }
html[data-theme="light"] .of-file-ico { color: #b45309; }

/* ------------------------------------------------------------
   TEKLİF KARTI ızgarası (.odx) — 12 sütun, kademeli responsive
   ------------------------------------------------------------
   Ortak `.cd-grid` 4 eşit sütun kullanıyor ve `cd-card-wide` 2 sütun
   kaplıyor. Teklif kartında bu, üst satırda ÖLÜ BOŞLUK bırakıyordu:
   üç dar kart (Müşteri, Detaylar, Dökümanlar) dizilip dördüncü sütun boş
   kalıyor, geniş "Kişiler" kartı ise sığmayıp alt satıra düşüyordu.

   12 sütunla üst satır her durumda TAM dolar:
     kişi kartı varsa   3 + 3 + 3 + 3
     yoksa              3 + 3 + 6      (bkz. views/offers/detail.php)

   Kademeler: <900px tek sütun · 900–1500 iki · ≥1500 dört.
   Sıralama mobile-first; geniş ekran kuralı en sonda gelir ki ikisi de
   aynı özgüllükte olduğunda kazanan doğru olsun. */
.cdx.odx .cd-grid {
  grid-template-columns: repeat(12, 1fr);
  /* Aynı satırdaki kartların altları hizalanır — ortak ızgara `start`
     kullanıyor ve kartlar tırtıklı duruyordu ("uyumlu kutucuk" isteği). */
  align-items: stretch;
}
.cdx.odx .cd-grid > .cd-card { grid-column: span 12; }

@media (min-width: 900px) {
  .cdx.odx .cd-grid > .odx-s3 { grid-column: span 6; }
  .cdx.odx .cd-grid > .odx-s6 { grid-column: span 12; }
}
@media (min-width: 1500px) {
  .cdx.odx .cd-grid > .odx-s3 { grid-column: span 3; }
  .cdx.odx .cd-grid > .odx-s6 { grid-column: span 6; }
}

/* Kart gövdesi esner; boş durum kutunun ortasında kalır, üstte asılı değil */
.cdx.odx .cd-card > .cdc-body { display: flex; flex-direction: column; }
.cdx.odx .cd-card > .cdc-body > .empty-card { margin: auto 0; }
/* Uzun listeler kartı taşırmaz, kendi içinde kayar */
.cdx.odx .cd-card .mini-list { max-height: 22rem; overflow-y: auto; }

/* ------------------------------------------------------------
   UAVT adres kodu seçici (public/js/uavt-picker.js)
   ------------------------------------------------------------
   Hem müşteri formunda (ev kartları) hem Hızlı Teklif'te kullanılıyor;
   bu yüzden sayfaya özel bir dosyada değil, burada. */
.uavt-pick { position: relative; }
.uavt-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: .2rem;
  max-height: 17rem; overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--sh-lg);
}
.uavt-item {
  display: block; width: 100%; text-align: left;
  padding: .5rem .7rem; border: 0; border-bottom: 1px solid var(--border);
  background: none; cursor: pointer; font-family: inherit;
}
.uavt-item:last-child { border-bottom: 0; }
.uavt-item:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.uavt-item b { display: block; font-size: .84rem; color: var(--text); font-variant-numeric: tabular-nums; }
.uavt-item span { display: block; font-size: .74rem; color: var(--muted); line-height: 1.35; }
.uavt-item em { font-style: normal; font-size: .68rem; color: var(--success); }
.uavt-item.is-new b { color: var(--primary); }
.uavt-empty { padding: .7rem; font-size: .78rem; color: var(--muted); }
.uavt-empty a, .uavt-hint a { color: var(--primary); font-weight: 600; }
.uavt-hint { margin-top: .3rem; font-size: .72rem; color: var(--muted); line-height: 1.4; }

/* ------------------------------------------------------------
   Teklif formu — "Fiyat Sorgula ve Doldur"
   ------------------------------------------------------------
   Panel ekranın kendi CSS'i (quick-quote.css) İSTEK ANINDA yükleniyor;
   bu üç kural formun kendi sayfasına ait olduğu için burada durur —
   yükleme durumu ve aktarım şeridi stilsiz görünmesin. */
.ofrm-qpanel {
  margin: 0 0 .9rem;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 4%, var(--card));
  padding: .6rem .75rem;
}
/* Gömülü ekranın kendi hero'su panelde fazladan boşluk yapmasın */
.ofrm-qpanel .dash-hero { margin-bottom: .7rem; }
.ofrm-qpanel .qq { --qq-gap: .7rem; }

.ofrm-qpanel-load,
.ofrm-qpanel-err {
  display: flex; align-items: center; gap: .55rem;
  padding: 1.1rem .4rem; font-size: .84rem; color: var(--muted);
}
.ofrm-qpanel-err { color: var(--danger); }

/* Aktarım sonrası bilgi şeridi */
.ofrm-quoted {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .6rem .85rem; margin-bottom: .8rem;
  background: color-mix(in srgb, var(--success) 11%, var(--card));
  border: 1px solid color-mix(in srgb, var(--success) 32%, transparent);
  border-radius: var(--radius-sm);
  font-size: .82rem; color: var(--text);
}
.ofrm-quoted svg { color: var(--success); flex: 0 0 auto; margin-top: 1px; }
.ofrm-quoted.is-est {
  background: color-mix(in srgb, var(--warn) 12%, var(--card));
  border-color: color-mix(in srgb, var(--warn) 34%, transparent);
}
.ofrm-quoted.is-est svg { color: var(--warn); }

/* Satır işlemi: Yenile (poliçe listesinde) */
.lact.a-renew { background: color-mix(in srgb, #8b5cf6 16%, transparent); color: #6d28d9; }
.lact.a-renew:hover { background: #6d28d9; color: #fff; }
html[data-theme="dark"] .lact.a-renew { color: #c4b5fd; }
html[data-theme="dark"] .lact.a-renew:hover { background: #7c3aed; color: #fff; }

/* Kilitli alan göstergesi (kategori) */
.cf-lock {
  display: inline-flex; align-items: center; gap: .2rem; margin-left: .35rem;
  padding: .04rem .4rem; border-radius: 999px;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: none;
  background: var(--surface-3); color: var(--label);
}
.cf-lock svg { opacity: .8; }
#categoryField.is-unlocked .cf-lock { background: var(--primary-light); color: var(--primary); }
#categoryField .chk { font-size: .8rem; color: var(--text-2); }
#categoryField select:disabled { cursor: not-allowed; }
/* Onay talebi işaretliyken kutu HEDEF kategoriyi gösterir ama kayıt hâlâ
   eski kategoriyle gider; kutunun kenarı bunu görsel olarak söyler. */
#categoryField.is-pending select { border-color: var(--warn); }

/* ------------------------------------------------------------
   KATEGORİ ONAY TALEBİ (poliçe formu)
   ------------------------------------------------------------
   Kutunun kendisi sade durur; işaretlenince açılan gövde sarı
   zeminle ayrışır: "buradan sonrası Patron'a gidiyor" demek için. */
/* Talep bloğu ızgaranın TÜM satırını kaplar: içinde açıklama alanı var,
   üç sütunlu ızgaranın bir hücresinde okunmaz hâle geliyordu. */
.cat-req { grid-column: 1 / -1; }
.cat-req .chk { font-size: .82rem; font-weight: 600; align-items: flex-start; }
.cat-req .chk input { margin-top: .18rem; }
.cat-req .chk b { font-weight: 800; }
.cat-req-body {
  margin-top: .5rem; padding: .6rem .7rem; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warn) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent);
}
.cat-req-lbl {
  display: block; margin: 0 0 .2rem; font-size: .74rem; font-weight: 700;
  letter-spacing: .01em; color: var(--muted);
}
.cat-req-body select { margin-bottom: .5rem; }
.cat-req-body .fhint { margin-top: .35rem; line-height: 1.5; }
.cat-req-open {
  display: flex; align-items: flex-start; gap: .4rem; margin: 0 0 .5rem;
  padding: .45rem .6rem; border-radius: var(--radius-sm);
  font-size: .78rem; line-height: 1.45;
  color: #b45309; background: color-mix(in srgb, var(--warn) 12%, transparent);
}
/* Poliçe numarası deseni uyarısı — hata değil, hatırlatma */
.fhint-renew {
  margin-top: .3rem; padding: .35rem .5rem; border-radius: 8px;
  font-size: .73rem; line-height: 1.45;
  color: #b45309; background: color-mix(in srgb, var(--warn) 11%, transparent);
}
html[data-theme="dark"] .cat-req-open,
html[data-theme="dark"] .fhint-renew { color: #fcd34d; }

/* ============================================================
   MÜŞTERİ KARTI (detay) — PREMIUM KATMAN
   ============================================================
   Kart başlıklarındaki "+" ikonu o bölümün panelini modalda açar
   (bkz. CustomerPanelController). Renk aksanları tek bir --ac
   değişkeni üzerinden yürür: ikon rozeti, etiket ve KPI kutusu.
   ============================================================ */

/* --- Aksan paleti --- */
.t-indigo { --ac: #4f46e5; } .t-cyan  { --ac: #0891b2; } .t-pink  { --ac: #ec4899; }
.t-violet { --ac: #7c3aed; } .t-green { --ac: #16a34a; } .t-slate { --ac: #475569; }
.t-amber  { --ac: #d97706; } .t-rose  { --ac: #e11d48; } .t-orange{ --ac: #ea7317; }
.t-red    { --ac: #dc2626; } .t-teal  { --ac: #0d9488; }

/* --- Addan türetilen aksan (bkz. Core\View::tone) ---------------------
   Sigorta türü ve şirket adı referans tablosundan gelir; liste sabit
   olmadığı için renk elle eşlenemez. `View::tone()` addan bir sıra
   üretiyor, sınıf o sıranın rengini veriyor: "Kasko" her ekranda aynı
   renkte, yeni bir şirket eklendiğinde CSS'e dokunulmuyor.
   Palet `.rl-tint` ile AYNI — araç satırlarıyla kart etiketleri aynı
   dili konuşsun. Koyu temada açık ikizler (4,5:1 kontrast). */
.tn-0 { --ac: #64748b; }
.tn-1 { --ac: #4f46e5; } .tn-2 { --ac: #0891b2; } .tn-3 { --ac: #16a34a; }
.tn-4 { --ac: #d97706; } .tn-5 { --ac: #db2777; } .tn-6 { --ac: #7c3aed; }
.tn-7 { --ac: #dc2626; } .tn-8 { --ac: #0d9488; }
html[data-theme="dark"] .tn-0 { --ac: #cbd5e1; }
html[data-theme="dark"] .tn-1 { --ac: #a5b4fc; } html[data-theme="dark"] .tn-2 { --ac: #67e8f9; }
html[data-theme="dark"] .tn-3 { --ac: #86efac; } html[data-theme="dark"] .tn-4 { --ac: #fcd34d; }
html[data-theme="dark"] .tn-5 { --ac: #f9a8d4; } html[data-theme="dark"] .tn-6 { --ac: #c4b5fd; }
html[data-theme="dark"] .tn-7 { --ac: #fca5a5; } html[data-theme="dark"] .tn-8 { --ac: #5eead4; }

/* --- Hero --- */
.cdx-hero { align-items: flex-start; }
.cdx-identity { display: flex; align-items: flex-start; gap: 1rem; min-width: 0; }
.cdx-avatar {
  display: grid; place-items: center; flex-shrink: 0;
  width: 62px; height: 62px; border-radius: 18px;
  font-size: 1.65rem; font-weight: 800; color: #fff; letter-spacing: -.02em;
  background: var(--brand-grad); box-shadow: 0 6px 18px rgba(79,70,229,.34);
}
.cdx-avatar.av-f { background: linear-gradient(135deg, #ec4899, #a855f7); box-shadow: 0 6px 18px rgba(236,72,153,.32); }
.cdx-avatar.av-corp { background: linear-gradient(135deg, #0f766e, #0891b2); box-shadow: 0 6px 18px rgba(8,145,178,.32); }

.cdx-state.s-aktif    { background: rgba(22,163,74,.13);  color: #15803d; }
.cdx-state.s-pasif    { background: #eef1f5;              color: var(--muted); }
.cdx-state.s-belirsiz { background: rgba(217,119,6,.14);  color: #b45309; }

.cdx-contact { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .55rem 0 0; font-size: .82rem; color: var(--muted); }
.cdx-contact a, .cdx-contact span { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); }
.cdx-contact a:hover { color: var(--primary); }
.cdx-actions { align-self: flex-start; }

/* --- Özet şerit --- */
.cdx-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; }
@media (max-width: 1200px) { .cdx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .cdx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cdx-kpi {
  display: flex; align-items: center; gap: .65rem; min-width: 0;
  padding: .7rem .85rem; border-radius: 13px;
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--sh-sm);
  transition: transform .14s, box-shadow .14s;
}
.cdx-kpi:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.cdx-kpi-ico {
  display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px;
  border-radius: 11px; background: color-mix(in srgb, var(--ac) 13%, transparent); color: var(--ac);
}
.cdx-kpi-txt { display: flex; flex-direction: column; min-width: 0; }
.cdx-kpi-txt em { font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cdx-kpi-txt b { font-size: 1.06rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-green { --ac: #16a34a; } .k-indigo { --ac: #4f46e5; } .k-red { --ac: #dc2626; }
.k-cyan  { --ac: #0891b2; } .k-orange { --ac: #ea7317; } .k-slate { --ac: #475569; }

/* --- Kart başlığı: ikon rozeti + "+" eylemi --- */
.cdx .cdc-head { gap: .6rem; padding: .72rem .9rem; }
.cdx .cdc-head h3 { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; font-size: .855rem; font-weight: 700; }
/* Sığmayan başlık harf ortasından kesilmesin, üç noktayla bitsin.
   Metnin kendi kabı olmak zorunda: `text-overflow` esnek kabın çıplak
   metin düğümüne işlemiyor (h3 `inline-flex`). */
.cdx .cdc-head h3 > .cdc-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdc-ico {
  display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px;
  border-radius: 9px; background: color-mix(in srgb, var(--ac, #4f46e5) 13%, transparent); color: var(--ac, #4f46e5);
}
.cdc-tools { display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.cdc-add {
  display: grid; place-items: center; width: 27px; height: 27px; flex-shrink: 0;
  border-radius: 9px; color: var(--muted); background: var(--bg);
  border: 1px dashed color-mix(in srgb, var(--muted) 42%, transparent);
  transition: color .15s, background .15s, border-color .15s, transform .12s, box-shadow .15s;
}
.cdc-add:hover {
  color: #fff; background: var(--brand-grad); border-color: transparent;
  transform: rotate(90deg) scale(1.06); box-shadow: 0 4px 12px rgba(79,70,229,.4);
}
.cdc-add:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cdc-badge.b-pink { background: #ec4899; } .cdc-badge.b-gray { background: #94a3b8; }

/* Tıklanabilir rozet (kendi penceresini açar) — sayaç olduğu kadar düğme */
a.cdc-badge.is-link { cursor: pointer; transition: filter .14s, box-shadow .14s; }
a.cdc-badge.is-link:hover { filter: brightness(1.12); box-shadow: 0 2px 8px rgba(37,99,235,.28); }
a.cdc-badge.is-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* --- Kart gövdesi: etiketli satırlar --- */
.cdx .cdc-body { padding: .8rem .9rem; }
/* Müşteri bilgileri tanım listesi. Başlık KOYU, değer NORMAL: ikisi de
   aynı puntoda ve aynı renkte olunca hangisinin etiket hangisinin veri
   olduğu ancak konumdan anlaşılıyordu. Punto da bir tık büyütüldü —
   kart bilgilerin ana durağı, en çok okunan yer burası. */
.cdx-dl { display: grid; grid-template-columns: 92px 1fr; gap: .42rem .7rem; margin: 0; font-size: .885rem; }
.cdx-dl dt { color: var(--text); font-weight: 700; letter-spacing: -.005em; }
.cdx-dl dd { margin: 0; color: var(--text); font-weight: 400; min-width: 0; overflow-wrap: anywhere; }

.cdx-item {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  padding: .42rem .5rem; margin: 0 -.5rem; border-radius: 9px;
  font-size: .83rem; color: var(--text); text-decoration: none !important;
  border-bottom: 1px solid var(--border);
}
.cdx-item:last-child { border-bottom: 0; }
.cdx-item strong { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdx-item.is-link { transition: background .13s; }
.cdx-item.is-link:hover { background: color-mix(in srgb, #4f46e5 6%, transparent); color: var(--text); }
.cdx-item-end { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; }

.cdx-tag {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding: .1rem .48rem; border-radius: 6px;
  font-size: .66rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  background: color-mix(in srgb, var(--ac, #64748b) 14%, transparent); color: var(--ac, #64748b);
}
.cdx-plate {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding: .1rem .5rem; border-radius: 5px;
  font-size: .74rem; font-weight: 800; letter-spacing: .05em;
  background: #1e293b; color: #fff; border-left: 4px solid #2563eb;
}
/* --- Poliçe satırı ----------------------------------------------------
   İki sütun, iki satır:  poliçe no  |  bitiş
                          [tür][firma] |  tutar
   Beş alan tek satıra dizilince dar kartta sarmalanıyor ve sağ blok boş
   bir satırın altına düşüyordu. Bu düzende iki sütun da dolu.

   Rakamlar `tabular-nums`: poliçe numaraları ve tutarlar alt alta tek
   hizada durur — orantılı rakamlarla sütun tırtıklı görünüyordu. */
.pol-item {
  position: relative;
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .45rem .5rem .7rem; margin: 0 -.45rem;
  border-radius: 11px;
  color: var(--text); text-decoration: none !important;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--border) 70%, transparent);
  transition: background .16s, box-shadow .16s;
}
/* Kaba bağlı değil: satırlar "Tümünü gör" penceresinde de kopyalanıyor */
.pol-item:last-child { box-shadow: none; }
/* Tür rengini taşıyan dikey aksan — kart kaydırılırken branş çizgiden okunur */
.pol-item::before {
  content: ''; position: absolute; left: .1rem; top: 50%;
  width: 3px; height: 1.5rem; transform: translateY(-50%);
  border-radius: 999px; background: var(--ac, #64748b); opacity: .8;
  transition: height .16s, opacity .16s;
}
/* `color` burada ŞART: satır bir bağlantı ve genel `a:hover` kuralı devreye
   girince poliçe numarası bağlantı rengine dönüyordu. */
.pol-item:hover {
  background: color-mix(in srgb, var(--ac, #4f46e5) 8%, transparent);
  color: var(--text); box-shadow: none;
}
.pol-item:hover::before { height: 2.05rem; opacity: 1; }
.pol-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.pol-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.pol-head { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.pol-no {
  font-size: .845rem; font-weight: 650; letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Plaka yalnız trafik/kaskoda basılır; numara uzunsa o kısalır, plaka değil */
.pol-plate { flex: 0 0 auto; font-size: .68rem; padding: .06rem .36rem; letter-spacing: .04em; }
/* Üç etiket (tür · firma · durum) dar kartta ~215px'e sığmak zorunda.
   Ölçüldü: varsayılan ölçülerle en uzun branş adlarında 14px taşıyor ve
   satır ikiye bölünüp bir poliçe daha gizleniyordu. Punto ve dolgu o
   kadarını geri veriyor; taşarsa uzun ADLAR kısalır, etiket ATILMAZ. */
.pol-tags { display: flex; align-items: center; gap: .24rem; flex-wrap: wrap; min-width: 0; }
.pol-tags .cdx-tag { font-size: .59rem; padding: .08rem .32rem; border-radius: 5px; letter-spacing: .03em; }
.pol-type { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pol-co   { max-width: 8.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Durum rozeti — sigorta firmasının hemen sağında ------------------
   Yeri tesadüf değil: "hangi şirkette, ne durumda" tek okumada çıksın.
   Üstü çizili satırda rozet ÇİZİLMEZ (bkz. `.is-off`/`.is-void`) — çizgi
   poliçeyi gösterir, rozet o çizginin sebebini yazar. */
.pol-st {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding: .08rem .34rem; border-radius: 5px;
  font-size: .59rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  background: color-mix(in srgb, var(--sc, #64748b) 15%, transparent); color: var(--sc, #64748b);
}
.st-aktif   { --sc: #16a34a; }
.st-expired { --sc: #d97706; }
.st-pasif   { --sc: #64748b; }
.st-iptal   { --sc: #dc2626; }
html[data-theme="dark"] .st-aktif   { --sc: #86efac; }
html[data-theme="dark"] .st-expired { --sc: #fcd34d; }
html[data-theme="dark"] .st-pasif   { --sc: #cbd5e1; }
html[data-theme="dark"] .st-iptal   { --sc: #fca5a5; }
/* Tür DOLU, firma DIŞ ÇİZGİLİ: yan yana iki dolu rozet birbiriyle
   çekişiyordu. Firma adı büyük harfe de çevrilmez — "Quick Sigorta"
   özel bir addır, "QUİCK SİGORTA" bağırıyor. */
.pol-co {
  background: transparent; text-transform: none; font-weight: 600;
  letter-spacing: 0; font-size: .655rem;
  border: 1px solid color-mix(in srgb, var(--ac, #64748b) 36%, transparent);
}

.pol-end {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end;
  gap: .22rem; text-align: right; white-space: nowrap;
}
.pol-date { font-size: .715rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.pol-sum  { font-size: .875rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
/* Genel `.dash .cur` kuralı simgeyi üst simge gibi kaldırıyor; bu ölçekte
   rakamdan kopuyor. Burada yalnız inceltilir, yeri korunur. */
.pol-sum .cur { font-size: .74em; font-weight: 500; opacity: .55; vertical-align: 0; margin-right: .09em; }
/* Süresi dolmuş aktif poliçe: bitiş tarihi kendini belli etsin */
.pol-date.is-over { color: var(--danger); }

/* --- Kapanmış poliçe: üstü çizili ------------------------------------
   Pasif ve süresi dolmuş GRİ, iptal edilmiş KIRMIZI çizgiyle. Çizgi
   yalnız metnin üstünden geçer; rozetler ve plaka okunur kalır —
   içlerinden çizgi geçen bir rozet okunmuyor.
   Satır ayrıca soluklaşır: çizgi tek başına küçük puntoda kaçıyordu. */
.pol-item.is-off, .pol-item.is-void { opacity: .72; }
.pol-item.is-off:hover, .pol-item.is-void:hover { opacity: 1; }
.pol-item.is-off .pol-no, .pol-item.is-off .pol-date, .pol-item.is-off .pol-sum,
.pol-item.is-void .pol-no, .pol-item.is-void .pol-date, .pol-item.is-void .pol-sum {
  text-decoration: line-through; text-decoration-thickness: 1.5px;
}
.pol-item.is-off .pol-no, .pol-item.is-off .pol-date, .pol-item.is-off .pol-sum {
  text-decoration-color: color-mix(in srgb, var(--muted) 85%, transparent);
}
.pol-item.is-void .pol-no, .pol-item.is-void .pol-date, .pol-item.is-void .pol-sum {
  text-decoration-color: var(--danger);
}
/* Sol aksan da sussun: kapanmış poliçe branş rengiyle öne çıkmamalı */
.pol-item.is-off::before  { background: var(--muted); opacity: .5; }
.pol-item.is-void::before { background: var(--danger); opacity: .75; }

/* Katmanın altlığı — yalnız kart AÇIKKEN görünür. Kapalıyken de dursaydı
   kırpılan satır sayısına karışır, "+N daha" bir fazla çıkardı. */
/* --- Açılan kartın altlığı (poliçe ve araç kartları ortak) -------------
   Altlık YAPIŞKAN: 10 satır kısa ekranda sığmıyor ve katman kendi içinde
   kayıyor. Altlık akışta kalsaydı asıl çıkış kapısı ("tamamı için
   tıklayın" / "araçları yönet") listenin görünmeyen dibinde olurdu.
   Negatif kenar boşlukları gövdenin dolgusunu delip zemini kenara kadar
   götürüyor; yoksa altından kayan satırlar iki yandan sızıyordu. */
.cdx-foot { display: none; }
.cd-card.is-expanded .cdx-foot {
  display: block;
  position: sticky; bottom: 0; z-index: 1;
  margin: .5rem -.9rem 0; padding: .45rem .9rem .55rem;
  background: var(--card);
  border-top: 1px solid var(--border);
  border-radius: 0 0 12px 12px;
}
.cdx-foot-note {
  margin: 0 0 .35rem; font-size: .705rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cdx-foot-row { display: flex; align-items: stretch; gap: .35rem; }
.cdx-foot-go, .cdx-foot-x {
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  padding: .46rem .55rem; font: inherit; font-size: .745rem; font-weight: 650;
  border: 0; border-radius: 10px; cursor: pointer;
  text-decoration: none !important;
  /* Dar kartta sarmasın: sardığında düğme üç satıra çıkıyordu */
  white-space: nowrap; overflow: hidden;
  transition: background .14s, color .14s;
}
.cdx-foot-go { flex: 1 1 auto; min-width: 0; color: var(--primary); background: var(--primary-light); }
.cdx-foot-go:hover { background: var(--primary); color: #fff; }
.cdx-foot-x { flex: 0 0 auto; width: 34px; padding: .46rem 0; color: var(--muted); background: var(--bg); }
.cdx-foot-x:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.cdx-foot-go:focus-visible, .cdx-foot-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Tıklama hedefi hep düğmenin kendisi — bkz. `.cdc-more > *` notu */
.cdx-foot-go > *, .cdx-foot-x > * { pointer-events: none; }
.cdx-foot-go svg, .cdx-foot-x svg { flex: none; }
.cdx-foot-n {
  font-weight: 700; font-size: .68rem; padding: .04rem .32rem; border-radius: 5px;
  background: color-mix(in srgb, currentColor 15%, transparent);
}
html[data-theme="dark"] .cdx-foot-x { background: var(--surface-2); }
html[data-theme="dark"] a.cdx-foot-go { color: var(--primary); }
html[data-theme="dark"] a.cdx-foot-go:hover { color: #fff; }

/* Koyu temada `html[data-theme="dark"] a` (0-1-2) satırın kendi rengini
   eziyor ve poliçe numarası bağlantı yeşiline dönüyordu. */
html[data-theme="dark"] a.pol-item,
html[data-theme="dark"] a.pol-item:hover { color: var(--text); }
/* Koyu zeminde açık aksanın %8'i seçilebilir bir vurgu bırakmıyor */
html[data-theme="dark"] .pol-item:hover { background: color-mix(in srgb, var(--ac, #818cf8) 13%, transparent); }

/* Sekmeler arası atlamanın hedefi: yapışkan üst şerit kartın başlığını
   örtmesin (bkz. public/js/customer-detail.js) */
.cd-card[data-focus-id] { scroll-margin-top: 86px; }

/* "Tüm Poliçeler" tablosu — kartla aynı rakam hizası: poliçe numaraları,
   tarihler ve tutarlar sütun sütun alt alta otursun. */
#tab-portfoy .tabtable td { font-variant-numeric: tabular-nums; }
.pf-plate { margin-top: .28rem; }
.pf-co { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
/* Kapanmış poliçe satırı kartla aynı dili konuşur: üstü çizili, solgun.
   Metin hücrelerinde çizgi, rozet hücrelerinde yok — bkz. `.pol-item.is-off`. */
#tab-portfoy .tabtable tr.is-off, #tab-portfoy .tabtable tr.is-void { opacity: .74; }
#tab-portfoy .tabtable tr.is-off:hover, #tab-portfoy .tabtable tr.is-void:hover { opacity: 1; }
#tab-portfoy .tabtable tr.is-off  td strong, #tab-portfoy .tabtable tr.is-off  td.right,
#tab-portfoy .tabtable tr.is-void td strong, #tab-portfoy .tabtable tr.is-void td.right {
  text-decoration: line-through; text-decoration-thickness: 1.5px;
}
#tab-portfoy .tabtable tr.is-off td strong, #tab-portfoy .tabtable tr.is-off td.right {
  text-decoration-color: color-mix(in srgb, var(--muted) 85%, transparent);
}
#tab-portfoy .tabtable tr.is-void td strong, #tab-portfoy .tabtable tr.is-void td.right {
  text-decoration-color: var(--danger);
}

/* Başlıktaki "X Pasif" — rozet görünümlü ama tıklanabilir bir düğme */
button.cdc-badge {
  border: 0; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: .15rem;
  transition: filter .13s, transform .13s;
}
button.cdc-badge:hover { filter: brightness(1.12); transform: translateY(-1px); }
button.cdc-badge:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* İki rozetli başlıkta ("22 Aktif" + "1 Pasif") ölçüler kısılır: dar kartta
   ikisi birden başlığın yerini yiyor, "Poliçeler" harf ortasından kesiliyordu. */
.cdc-tools:has(button.cdc-badge) { gap: .28rem; }
.cdc-tools:has(button.cdc-badge) .cdc-badge { font-size: .68rem; padding: .13rem .42rem; }
.cdc-tools:has(button.cdc-badge) button.cdc-badge svg { width: 11px; height: 11px; }

/* --- Dosya kutucukları -----------------------------------------------
   Satır düzeninde bir karta 8 dosya sığıyordu ve satırın çoğunu uzun
   dosya adı yiyordu. Kutucukta aynı yere üç katı giriyor; daha önemlisi
   göz dosyayı ADINDAN değil TÜRÜNDEN buluyor — ruhsat fotoğrafı ile
   poliçe PDF'i farklı renkte.

   Ad iki satıra kadar yazılır, taşarsa üç noktayla biter; tamamı üzerine
   gelince `title` ile görünür (bkz. views/customers/detail.php). */
.fbox-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: .45rem;
}
.fbox {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .55rem .35rem .45rem; border-radius: 12px;
  text-decoration: none !important; color: var(--text);
  background: var(--card); border: 1px solid var(--border);
  transition: transform .14s, box-shadow .14s, border-color .14s, background .14s;
}
.fbox:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--fc, #64748b) 55%, transparent);
  background: color-mix(in srgb, var(--fc, #64748b) 7%, var(--card));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--fc, #64748b) 22%, transparent);
}
.fbox:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* İkon kutusu: simge + köşesinde uzantı etiketi (klasör sekmesi gibi) */
.fbox-ico {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 11px;
  color: var(--fc, #64748b);
  background: color-mix(in srgb, var(--fc, #64748b) 14%, transparent);
}
.fbox-ico em {
  position: absolute; right: -5px; bottom: -4px;
  padding: .05rem .26rem; border-radius: 4px;
  font-style: normal; font-size: .535rem; font-weight: 800; letter-spacing: .03em;
  color: #fff; background: var(--fc, #64748b);
  border: 1.5px solid var(--card);
}
.fbox-name {
  width: 100%; font-size: .695rem; font-weight: 600; line-height: 1.25; text-align: center;
  /* İki satır sonra üç nokta — üçüncü satır kutucuğu boyca dağıtıyordu */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.fbox-date { font-size: .625rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Tür renkleri — poliçe etiketleriyle aynı paletten */
.fbox.f-pdf { --fc: #dc2626; } .fbox.f-doc { --fc: #2563eb; }
.fbox.f-xls { --fc: #16a34a; } .fbox.f-img { --fc: #7c3aed; }
.fbox.f-zip { --fc: #d97706; } .fbox.f-etc { --fc: #64748b; }
html[data-theme="dark"] .fbox.f-pdf { --fc: #fca5a5; }
html[data-theme="dark"] .fbox.f-doc { --fc: #93c5fd; }
html[data-theme="dark"] .fbox.f-xls { --fc: #86efac; }
html[data-theme="dark"] .fbox.f-img { --fc: #c4b5fd; }
html[data-theme="dark"] .fbox.f-zip { --fc: #fcd34d; }
html[data-theme="dark"] .fbox.f-etc { --fc: #cbd5e1; }
html[data-theme="dark"] .fbox-ico em { color: #0f172a; }
html[data-theme="dark"] a.fbox { color: var(--text); }

/* --- Kişi kutucukları (aile + yakınlar) -------------------------------
   Dosya kutucuklarıyla aynı dil. Liste düzeninde eş, üç çocuk ve anne
   aynı gri satırlarda birbirine karışıyordu; kutucukta cinsiyet ikonu
   kimin kim olduğunu okumadan söylüyor, kimlik ve doğum tarihi de
   satırı şişirmeden altına sığıyor. */
.pbox-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: .45rem;
}
.pbox {
  display: flex; flex-direction: column; align-items: center; gap: .18rem;
  padding: .6rem .4rem .5rem; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border);
  transition: transform .14s, box-shadow .14s, border-color .14s, background .14s;
}
.pbox:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--pc, #64748b) 55%, transparent);
  background: color-mix(in srgb, var(--pc, #64748b) 7%, var(--card));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--pc, #64748b) 20%, transparent);
}
.pbox-ico {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: var(--pc, #64748b);
  background: color-mix(in srgb, var(--pc, #64748b) 14%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--pc, #64748b) 30%, transparent);
}
.pbox-rel {
  margin-top: .28rem; padding: .04rem .38rem; border-radius: 5px;
  font-size: .585rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--pc, #64748b);
  background: color-mix(in srgb, var(--pc, #64748b) 15%, transparent);
}
.pbox-name {
  width: 100%; font-size: .735rem; font-weight: 650; line-height: 1.25; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.pbox-line {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .625rem; color: var(--muted); font-variant-numeric: tabular-nums;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pbox-line svg { flex: none; opacity: .75; }
.pbox-flag {
  display: inline-flex; align-items: center; gap: .2rem; margin-top: .18rem;
  padding: .04rem .34rem; border-radius: 999px;
  font-size: .615rem; font-weight: 700;
  color: #be185d; background: rgba(236, 72, 153, .14);
}
html[data-theme="dark"] .pbox-flag { color: #f9a8d4; background: rgba(236, 72, 153, .2); }

.pbox.p-male   { --pc: #2563eb; }
.pbox.p-female { --pc: #db2777; }
.pbox.p-none   { --pc: #64748b; }
html[data-theme="dark"] .pbox.p-male   { --pc: #93c5fd; }
html[data-theme="dark"] .pbox.p-female { --pc: #f9a8d4; }
html[data-theme="dark"] .pbox.p-none   { --pc: #cbd5e1; }

/* Evcil hayvan kutucukları — aile kutucuklarının aynısı, tür başına renk.
   Renkler birbirinden UZAK seçildi: dört tür yan yana dizildiğinde ikon
   okunmadan da ayrışsınlar. */
.pbox.pt-dog   { --pc: #b45309; }
.pbox.pt-cat   { --pc: #7c3aed; }
.pbox.pt-bird  { --pc: #0891b2; }
.pbox.pt-fish  { --pc: #2563eb; }
.pbox.pt-other { --pc: #64748b; }
html[data-theme="dark"] .pbox.pt-dog   { --pc: #fcd34d; }
html[data-theme="dark"] .pbox.pt-cat   { --pc: #c4b5fd; }
html[data-theme="dark"] .pbox.pt-bird  { --pc: #67e8f9; }
html[data-theme="dark"] .pbox.pt-fish  { --pc: #93c5fd; }
html[data-theme="dark"] .pbox.pt-other { --pc: #cbd5e1; }

/* Kutucuk bayrağının olumlu tonu (poliçesi var) — varsayılan pembe
   "gebe" bilgisi için; sigortalı olmak bir uyarı değil, iyi haber. */
.pbox-flag.f-ok { color: #15803d; background: rgba(22, 163, 74, .14); }
html[data-theme="dark"] .pbox-flag.f-ok { color: #86efac; background: rgba(34, 197, 94, .18); }

.cdx-flag {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem;
  padding: .22rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 600;
}
.cdx-flag.f-pink { background: rgba(236,72,153,.12); color: #be185d; }
.cdx-more { display: inline-block; margin-top: .5rem; font-size: .78rem; font-weight: 600; }

.cdx .empty-card { padding: 1.1rem .5rem; }
.cdx .empty-ico { font-size: 1.7rem; opacity: .55; }
.btn-soft { background: var(--primary-light); color: var(--primary); border: 0; }
.btn-soft:hover { background: var(--primary); color: #fff; }

.cdx-soon { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 3rem 1rem; text-align: center; }
.cdx-soon-ico { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: var(--primary-light); color: var(--primary); }
.cdx-soon p { margin: 0; font-size: .85rem; }

/* --- Karanlık tema --- */
html[data-theme="dark"] .cdc-add { background: var(--surface-2); }
html[data-theme="dark"] .cdx-item { border-bottom-color: var(--border); }
html[data-theme="dark"] .cdx-state.s-pasif { background: var(--surface-3); }
html[data-theme="dark"] .cdx-plate { background: #0f172a; }
html[data-theme="dark"] .btn-soft { background: rgba(129,140,248,.16); color: #a5b4fc; }

/* ============================================================
   KART PANELLERİ — modal içi bölüm formları
   ============================================================ */
.pnl-lead {
  display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 1rem;
  padding: .6rem .8rem; border-radius: 11px;
  font-size: .81rem; line-height: 1.45; color: var(--text);
  background: var(--primary-light);
}
.pnl-lead svg { flex-shrink: 0; margin-top: 1px; color: var(--primary); }

/* Bağlam şeridi: paneli açan işlem (tamamlanan görev) burada anılır */
.pnl-ctx {
  display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 .75rem;
  padding: .6rem .8rem; border-radius: 11px;
  font-size: .81rem; line-height: 1.45; color: var(--text);
  background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.28);
}
.pnl-ctx svg { flex-shrink: 0; margin-top: 1px; color: var(--success, #10b981); }
.pnl-ctx em { display: block; margin-top: .15rem; font-style: normal; opacity: .75; }
.pnl-ctx a { color: inherit; text-decoration: underline; }
html[data-theme="dark"] .pnl-ctx { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.3); }

.pnl-err {
  display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 1rem;
  padding: .65rem .85rem; border-radius: 11px; font-size: .84rem; font-weight: 600;
  color: var(--danger); background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.28);
}
.pnl-seg { margin-bottom: 1rem; }
.pnl .rep-empty { margin-bottom: .6rem; }
.pnl input[type=file] {
  width: 100%; padding: .55rem .7rem; font-size: .83rem;
  background: #f8fafc; border: 1px dashed var(--border); border-radius: 10px;
}

.pnl-list h4, .pnl-seg > h4 { display: inline-flex; align-items: center; gap: .42rem; margin: 0 0 .55rem; font-size: .84rem; }
.pnl-list h4 svg, .pnl-seg > h4 svg { color: var(--muted); }
.pnl-row {
  display: flex; align-items: flex-start; gap: .6rem; margin: 0 0 .45rem;
  padding: .6rem .75rem; border-radius: 11px; cursor: pointer;
  background: #f8fafc; border: 1px solid var(--border);
  transition: border-color .14s, background .14s;
}
.pnl-row:hover { border-color: color-mix(in srgb, #dc2626 40%, transparent); }
.pnl-row input[type=checkbox] { width: auto; margin: .2rem 0 0; flex-shrink: 0; accent-color: #dc2626; }
/* Silinmek üzere işaretlenmiş satır — sınıf customer-panel.js tarafından atanır
   (`:has()` yerine sınıf: tarayıcılar arası stil tazeleme farklarına takılmasın). */
.pnl-row.is-marked { background: rgba(220,38,38,.06); border-color: rgba(220,38,38,.35); }
.pnl-row.is-marked .pnl-row-top strong { text-decoration: line-through; color: var(--danger); }
.pnl-row-body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1 1 auto; }
.pnl-row-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .84rem; }
.pnl-row-top em { font-style: normal; font-size: .74rem; color: var(--muted); }
.pnl-row-link { margin-left: auto; display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 600; }
.pnl-row-text { font-size: .8rem; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }

/* Akıştaki WhatsApp satırı — salt okunur: imleç el olmaz, kırmızı
   "silinecek" vurgusu almaz. İşaret kutusunun yerinde yeşil simge durur. */
.pnl-row.is-wa { cursor: default; background: color-mix(in srgb, #25d366 7%, transparent); }
.pnl-row.is-wa:hover { border-color: color-mix(in srgb, #25d366 45%, transparent); }
.pnl-row-wa { flex-shrink: 0; margin-top: .1rem; color: #128c7e; }
.pnl-wa-tpl { margin-left: auto; }
html[data-theme="dark"] .pnl-row.is-wa { background: rgba(37,211,102,.08); }
html[data-theme="dark"] .pnl-row-wa { color: #25d366; }

.pnl-foot {
  position: sticky; bottom: -1px; z-index: 5;
  display: flex; justify-content: flex-end; gap: .6rem;
  margin: 1.3rem -.2rem -.2rem; padding: .85rem .2rem .2rem;
  background: linear-gradient(to top, var(--card) 72%, transparent);
}
html[data-theme="dark"] .pnl-row { background: rgba(255,255,255,.035); }
html[data-theme="dark"] .pnl input[type=file] { background: rgba(255,255,255,.035); }
html[data-theme="dark"] .pnl-lead { background: rgba(129,140,248,.12); }
html[data-theme="dark"] .pnl-err  { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.3); }

/* ============================================================
   MÜŞTERİ KARTI — ÜST EYLEM ŞERİDİ, SEKME TEMALARI, ROZETLER
   (WP customers-view.php hasadının ikinci turu)
   ============================================================ */

/* --- Hero ek bilgileri --- */
.cdx-taxinfo { font-size: .8rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.cdx-transfer { background: rgba(249,115,22,.15); color: #c2410c; }
.cdx-shared   { background: rgba(16,185,129,.14); color: #047857; }

.cdx-lastmod {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin: .55rem 0 0; padding: .34rem .6rem;
  font-size: .755rem; color: var(--muted);
  background: var(--bg); border-radius: 9px; width: fit-content; max-width: 100%;
}
.cdx-lastmod svg { opacity: .8; }
.cdx-lastmod strong { color: var(--text); font-weight: 700; }
.cdx-alllink {
  display: inline-flex; align-items: center; padding: .1rem .5rem; border-radius: 6px;
  font-size: .66rem; font-weight: 800; letter-spacing: .05em;
  background: var(--brand-grad); color: #fff !important;
  box-shadow: 0 2px 7px rgba(79,70,229,.35);
  transition: transform .12s, box-shadow .15s;
}
.cdx-alllink:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79,70,229,.45); }

/* --- Üst eylem şeridi: her düğme kendi rengiyle ---
   Künye ile eylem şeridi yan yana kalır; şerit kendi içinde sarar.
   (Eskiden hero'nun kendisi sarıyordu ve 10 düğmeli müşteri kartında
   tüm şerit künyenin ALTINA düşüyordu.) */
.cdx-hero { flex-wrap: nowrap; gap: 1rem; }
.cdx-hero > .cdx-identity { flex: 1 1 0; min-width: 0; }
/* `0 1 auto` + min-width:0 → dar kapsayıcıda şerit daralıp kendi içinde
   sarar; `0 0 auto` olsaydı 640 px'te sabit kalıp hero'dan taşardı. */
.cdx-actions { flex: 0 1 auto; min-width: 0; margin-left: auto; gap: .4rem; max-width: 640px; flex-wrap: wrap; justify-content: flex-end; }
.cdx-actions .lbtn { position: relative; padding: .46rem .74rem; font-size: .78rem; }
/* Yalnız ikonlu "listeye dön" düğmesi kare dursun */
.cdx-actions .a-list { padding: .46rem .55rem; }
@media (max-width: 900px) {
  .cdx-hero { flex-wrap: wrap; }
  .cdx-actions { max-width: none; margin-left: 0; justify-content: flex-start; }
}
.lbtn.a-refresh.is-spinning svg { animation: cdxspin .8s linear infinite; }
@keyframes cdxspin { to { transform: rotate(360deg); } }
.lbtn-badge {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px;
  margin-left: .1rem; border-radius: 999px;
  font-size: .62rem; font-style: normal; font-weight: 800;
  background: var(--danger); color: #fff;
}
.lbtn-badge.b-soft { background: var(--muted); }

.cdx-kpi-txt b .kpi-warn {
  display: inline-block; margin-left: .3rem; font-size: .62rem; font-style: normal;
  font-weight: 700; color: var(--danger); vertical-align: middle;
}
.cdx-kpi-txt b.neg, .ozt-metric b.neg { color: var(--danger); }
.k-rose { --ac: #e11d48; } .k-violet { --ac: #7c3aed; }
.cdx-kpis { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (max-width: 1400px) { .cdx-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .cdx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Sekmeler: rozet + tema --- */
.cd-tab { position: relative; }
.cd-tab-n {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  margin-left: .1rem; border-radius: 999px;
  font-size: .64rem; font-style: normal; font-weight: 800;
  background: rgba(15,23,42,.09); color: inherit;
}
.cd-tab.on .cd-tab-n { background: rgba(255,255,255,.26); }

/* Sekme gövdesi aksanı — panelin üst çizgisi ve kart ikonları o temayı alır */
.cd-panel { --tone: #4f46e5; }
.cd-panel.tone-kisisel  { --tone: #4f46e5; }
.cd-panel.tone-ozet     { --tone: #16a34a; }
.cd-panel.tone-aktivite { --tone: #7c3aed; }
.cd-panel.tone-hasar    { --tone: #dc2626; }
.cd-panel.tone-teklif   { --tone: #ea7317; }
.cd-panel.tone-portfoy  { --tone: #0891b2; }
.cd-panel.tone-cari     { --tone: #334155; }
.cd-panel.on { position: relative; padding-top: .55rem; }
.cd-panel.on::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 25%, transparent));
}
.cd-card-full { grid-column: 1 / -1; }

/* --- Kart içi rozet çipleri (premium bilgi gösterimi) --- */
.cdx-chips { display: flex; flex-wrap: wrap; gap: .38rem; }
.cdx-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem; border-radius: 999px;
  font-size: .745rem; font-weight: 600; line-height: 1.35;
  background: color-mix(in srgb, var(--cc, #64748b) 13%, transparent);
  color: var(--cc, #64748b);
  border: 1px solid color-mix(in srgb, var(--cc, #64748b) 24%, transparent);
}
.cdx-chip b { font-weight: 800; }
.cdx-chip svg { opacity: .85; }
.c-cyan { --cc: #0e7490; } .c-pink { --cc: #be185d; } .c-blue { --cc: #2563eb; }
.c-violet { --cc: #6d28d9; } .c-amber { --cc: #b45309; } .c-orange { --cc: #c2410c; }
.c-rose { --cc: #be123c; } .c-green { --cc: #15803d; } .c-slate { --cc: #475569; }

.cdx-flag.f-cyan  { background: rgba(8,145,178,.12);  color: #0e7490; }
.cdx-flag.f-amber { background: rgba(217,119,6,.13);  color: #b45309; }

/* --- Yapışkan not: silinmiş görüşme notu üzeri çizili kalır --- */
/* Silinmiş not: renk değişkenleri aşağıdaki kâğıt düzeninden gelir;
   burada yalnız üzeri çizili ve kesik kenarlık davranışı kalıyor. */
.sticky.is-deleted { box-shadow: none; border-style: dashed; opacity: .95; }
.sticky.is-deleted .sticky-body { text-decoration: line-through; }
.sticky.is-deleted .sticky-head span:first-child { text-decoration: line-through; }
.sticky-del {
  display: flex; align-items: center; gap: .25rem; margin-top: .45rem; padding-top: .35rem;
  border-top: 1px dashed #cbd5e1; font-size: .66rem; font-weight: 700; color: #dc2626;
}
.pnl-row.is-struck .pnl-row-text,
.pnl-row.is-struck .pnl-row-top strong { text-decoration: line-through; color: var(--muted); }
.pnl-row.is-struck { border-style: dashed; }
.pnl-row.is-restoring { background: rgba(22,163,74,.07); border-color: rgba(22,163,74,.35); border-style: solid; }
.pnl-row.is-restoring .pnl-row-text,
.pnl-row.is-restoring .pnl-row-top strong { text-decoration: none; color: var(--text); }
.pnl-trash .pnl-row input[type=checkbox] { accent-color: #16a34a; }
.pnl-del-info { color: var(--danger) !important; display: inline-flex; align-items: center; gap: .2rem; }
.hist-item.is-struck .hist-detail,
.hist-item.is-struck .hist-head strong { text-decoration: line-through; color: var(--muted); }

/* ============================================================
   DEĞİŞİKLİK GEÇMİŞİ / AKTİVİTE ZAMAN ÇİZELGESİ
   ============================================================ */
.hist-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1rem; }
.hist-chip {
  padding: .28rem .7rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .755rem; font-weight: 600;
  background: var(--bg); color: var(--muted); border: 1px solid var(--border);
  transition: background .14s, color .14s, border-color .14s;
}
.hist-chip b { font-weight: 800; margin-left: .15rem; }
.hist-chip:hover { border-color: var(--primary); color: var(--primary); }
.hist-chip.on { background: var(--brand-grad); border-color: transparent; color: #fff; box-shadow: var(--sh-sm); }

.hist-line { list-style: none; margin: 0; padding: 0 0 0 1.35rem; position: relative; }
.hist-line::before {
  content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--border), transparent);
}
.hist-item { position: relative; display: flex; gap: .7rem; padding: .5rem 0 .7rem; }
.hist-dot {
  position: absolute; left: -1.35rem; top: .55rem;
  display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%;
  background: var(--card); color: var(--hc, var(--muted));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hc, #94a3b8) 45%, transparent);
}
.hist-dot svg { width: 9px; height: 9px; }
.h-create { --hc: #16a34a; } .h-update { --hc: #2563eb; } .h-delete { --hc: #dc2626; }
.h-note   { --hc: #d97706; } .h-share  { --hc: #0d9488; } .h-other  { --hc: #64748b; }
.k-log { --hc: #2563eb; } .k-policy { --hc: #16a34a; } .k-task { --hc: #dc2626; }
.k-appt { --hc: #0891b2; } .k-comm { --hc: #0d9488; }

.hist-body { flex: 1 1 auto; min-width: 0; }
.hist-head { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .855rem; }
.hist-head strong { font-weight: 700; }
.hist-head a { color: inherit; }
.hist-head a:hover strong { color: var(--primary); }
.hist-head time { margin-left: auto; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.hist-badge {
  padding: .06rem .45rem; border-radius: 5px; font-size: .62rem; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase;
  background: color-mix(in srgb, var(--hc, #64748b) 15%, transparent); color: var(--hc, #64748b);
}
.hist-who { display: flex; align-items: center; gap: .25rem; margin-top: .15rem; font-size: .74rem; color: var(--muted); }
.hist-detail { margin: .3rem 0 0; font-size: .8rem; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.hist-changes { margin: .35rem 0 0; padding: .45rem .7rem; list-style: none; border-radius: 9px; background: var(--bg); }
/* Alan adı ile değeri ayrı hizalanır: "Durum  Aktif → İptal Edildi" tek
   satırda okunur, uzun değerler alta sarar. */
.hist-changes li {
  display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr);
  align-items: baseline; gap: .1rem .6rem;
  font-size: .755rem; color: var(--text); padding: .16rem 0; overflow-wrap: anywhere;
}
.hist-changes li + li { border-top: 1px dashed var(--border); }
.hist-changes li > b { font-weight: 700; color: var(--muted); }
.hist-changes li > span { font-variant-numeric: tabular-nums; }
.hist-changes li > i {
  grid-column: 2; font-style: normal; font-size: .68rem; font-weight: 700;
  color: #b45309;
}
@media (max-width: 560px) { .hist-changes li { grid-template-columns: 1fr; } }

.act-month { margin-bottom: 1.1rem; }
.act-month-h { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.act-month-h span { font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.act-month-h i { flex: 1 1 auto; height: 1px; background: var(--border); }
.act-month-h b { font-size: .68rem; font-weight: 800; color: var(--muted); background: var(--bg); padding: .1rem .45rem; border-radius: 999px; }

/* ============================================================
   ÖZET DASHBOARD
   ============================================================ */
.ozt-gauge {
  position: relative; width: 148px; height: 148px; margin: .2rem auto .9rem; border-radius: 50%;
  background: conic-gradient(var(--gc) calc(var(--v) * 1%), var(--bg) 0);
  display: grid; place-items: center;
}
.ozt-gauge.s-ok  { --gc: #16a34a; } .ozt-gauge.s-warn { --gc: #d97706; } .ozt-gauge.s-bad { --gc: #dc2626; }
.ozt-gauge-in {
  width: 112px; height: 112px; border-radius: 50%; background: var(--card);
  display: grid; place-items: center; align-content: center; box-shadow: inset 0 1px 6px rgba(15,23,42,.08);
}
.ozt-gauge-in b { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--gc); }
.ozt-gauge-in em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ozt-factors { list-style: none; margin: 0; padding: 0; }
.ozt-factors li { display: flex; justify-content: space-between; gap: .5rem; padding: .32rem 0; font-size: .8rem; border-bottom: 1px solid var(--border); }
.ozt-factors li:last-child { border-bottom: 0; }
.ozt-factors span { color: var(--muted); }
.ozt-factors b { font-weight: 700; }
.ozt-factors li.is-bad b { color: var(--danger); }

.ozt-metric {
  display: flex; flex-direction: column; gap: .1rem; min-width: 0;
  padding: .7rem .8rem; border-radius: 12px;
  background: color-mix(in srgb, var(--mc, #4f46e5) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--mc, #4f46e5) 20%, transparent);
}
.ozt-metric em { font-style: normal; font-size: .67rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--mc); }
.ozt-metric b { font-size: 1.14rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ozt-metric span { font-size: .7rem; color: var(--muted); }
.m-green { --mc: #16a34a; } .m-indigo { --mc: #4f46e5; } .m-cyan { --mc: #0891b2; }
.m-orange { --mc: #ea7317; } .m-violet { --mc: #7c3aed; } .m-slate { --mc: #475569; }
.m-red { --mc: #dc2626; }

.ozt-alert {
  display: flex; align-items: center; gap: .65rem; margin-bottom: .45rem;
  padding: .6rem .8rem; border-radius: 11px; text-decoration: none !important;
  background: color-mix(in srgb, var(--al, #64748b) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--al, #64748b) 26%, transparent);
  color: var(--text); transition: transform .12s, box-shadow .14s;
}
a.ozt-alert:hover { transform: translateX(2px); box-shadow: var(--sh-sm); }
.ozt-alert:last-child { margin-bottom: 0; }
.a-bad { --al: #dc2626; } .a-warn { --al: #d97706; } .a-info { --al: #2563eb; }
.ozt-alert-ico { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: color-mix(in srgb, var(--al) 15%, transparent); color: var(--al); }
.ozt-alert-txt { display: flex; flex-direction: column; min-width: 0; }
.ozt-alert-txt strong { font-size: .83rem; font-weight: 700; }
.ozt-alert-txt span { font-size: .765rem; color: var(--muted); }
.ozt-alert-go { margin-left: auto; color: var(--al); opacity: .7; }

.ozt-bar { display: flex; align-items: center; gap: .6rem; padding: .32rem 0; font-size: .8rem; }
.ozt-bar-lbl { display: inline-flex; align-items: center; gap: .35rem; width: 34%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ozt-bar-lbl i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.ozt-bar-track { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.ozt-bar-track i { display: block; height: 100%; border-radius: 999px; transition: width .5s ease; }
.ozt-bar-val { width: 108px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.ozt-bar-val em { display: block; font-style: normal; font-size: .68rem; font-weight: 500; color: var(--muted); }
.tf-bar { margin-top: .8rem; }

.ozt-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin-bottom: .7rem; }
.ozt-mini-i { text-align: center; padding: .55rem .3rem; border-radius: 11px; background: color-mix(in srgb, var(--mc, #64748b) 9%, transparent); }
.ozt-mini-i b { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--mc); }
.ozt-mini-i em { font-style: normal; font-size: .68rem; font-weight: 700; color: var(--muted); }
.ozt-tone { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.ozt-list { margin-top: .3rem; }

.ozt-quick { display: grid; gap: .55rem; }
.ozt-qa {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .85rem .5rem; border-radius: 13px; text-decoration: none !important;
  background: color-mix(in srgb, var(--qc, #4f46e5) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--qc, #4f46e5) 22%, transparent);
  color: var(--qc); font-size: .78rem; font-weight: 700;
  transition: transform .13s, box-shadow .15s, background .15s;
}
.ozt-qa:hover { transform: translateY(-3px); box-shadow: var(--sh-md); background: color-mix(in srgb, var(--qc) 14%, transparent); color: var(--qc); }
.q-green { --qc: #16a34a; } .q-orange { --qc: #ea7317; } .q-red { --qc: #dc2626; }
.q-cyan { --qc: #0891b2; } .q-violet { --qc: #7c3aed; } .q-indigo { --qc: #4f46e5; }

/* ============================================================
   SEKME TABLOLARI (hasar / teklif / portföy / cari)
   ============================================================ */
.tabtable { font-size: .82rem; }
.tabtable th { font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.tabtable td { padding: .55rem .7rem; vertical-align: middle; }
.tabtable .right { text-align: right; }
.tabtable tr.is-late td { background: rgba(220,38,38,.05); }
.tabtable tr.is-muted { opacity: .62; }
.tabtable-sub td { padding-top: 0; font-size: .74rem; color: var(--muted); border-top: 0; }
.cr-in  { color: #15803d; }
.cr-out { color: #b91c1c; }
.tf-soon { color: #c2410c; font-weight: 700; }

.pf-pay { width: 78px; height: 6px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.pf-pay i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #16a34a, #22c55e); }

.pf-years { display: flex; align-items: flex-end; gap: .5rem; height: 168px; padding-top: .4rem; }
.pf-year { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .25rem; height: 100%; min-width: 0; }
.pf-year-bar { width: 100%; max-width: 46px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #4f46e5, #818cf8); transition: height .5s ease; }
.pf-year-bar.neg { background: linear-gradient(180deg, #dc2626, #f87171); }
.pf-year b { font-size: .7rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-year b.neg { color: var(--danger); }
.pf-year em { font-style: normal; font-size: .66rem; color: var(--muted); }
.cr-months .pf-year-bar { background: linear-gradient(180deg, #16a34a, #4ade80); }

/* ============================================================
   ÜST EYLEM MODALLARI (kampanya · whatsapp · şifre · paylaşım)
   ============================================================ */
.camp-hero { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; border-radius: 14px; background: linear-gradient(135deg, rgba(234,115,23,.13), rgba(234,115,23,.04)); border: 1px solid rgba(234,115,23,.28); }
.camp-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, #f97316, #ea580c); color: #fff; box-shadow: 0 4px 12px rgba(234,88,12,.35); }
.camp-eyebrow { display: block; font-size: .67rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #c2410c; }
.camp-name { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.camp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin: .9rem 0; }
.camp-stat { padding: .65rem .8rem; border-radius: 12px; background: var(--bg); }
.camp-stat em { display: block; font-style: normal; font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.camp-stat b { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; }
.camp-stat b.ok { color: var(--success); } .camp-stat b.off { color: var(--muted); }
.camp-dl { margin-top: .3rem; }

.wam-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.wam-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; box-shadow: 0 4px 12px rgba(37,211,102,.35); }
.wam-head strong { display: block; font-size: .96rem; }
.wam-tpls { display: flex; flex-wrap: wrap; gap: .38rem; }
.wam-tpl {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  padding: .38rem .7rem; border-radius: 999px; font: inherit; font-size: .765rem; font-weight: 600;
  background: var(--bg); color: var(--muted); border: 1px solid var(--border);
  transition: background .14s, color .14s, border-color .14s, transform .12s;
}
.wam-tpl:hover { color: #128c7e; border-color: #25d366; transform: translateY(-1px); }
.wam-tpl.on { background: rgba(37,211,102,.14); border-color: #25d366; color: #0f766e; }
.btn-wa, .btn-wa:hover { background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; border: 0; box-shadow: 0 4px 13px rgba(37,211,102,.35); }

.pwd-ok { display: flex; align-items: center; gap: .7rem; padding: .75rem .9rem; border-radius: 12px; background: rgba(22,163,74,.1); border: 1px solid rgba(22,163,74,.3); margin-bottom: .9rem; }
.pwd-ok-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #16a34a; color: #fff; flex-shrink: 0; }
.pwd-ok strong { display: block; font-size: .92rem; }
.pwd-box { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-radius: 12px; background: var(--bg); border: 1px dashed var(--border); }
.pwd-box code { flex: 1 1 auto; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 1.32rem; font-weight: 700; letter-spacing: .12em; color: var(--text); }
.pwd-send { display: flex; flex-wrap: wrap; gap: .5rem; }

.shr-sec { padding: .9rem 1rem; margin-bottom: .8rem; border-radius: 13px; background: var(--bg); border: 1px solid var(--border); }
.shr-sec h4 { display: inline-flex; align-items: center; gap: .42rem; margin: 0 0 .7rem; font-size: .86rem; }
.shr-sec h4 svg { color: var(--muted); }
.shr-req { background: rgba(220,38,38,.06); border-color: rgba(220,38,38,.28); }
.shr-reqrow { display: flex; align-items: flex-start; gap: .8rem; flex-wrap: wrap; padding: .65rem .8rem; margin-bottom: .5rem; border-radius: 11px; background: var(--card); border: 1px solid var(--border); }
.shr-reqinfo { flex: 1 1 240px; min-width: 0; }
.shr-reqinfo strong { display: inline-block; margin-right: .4rem; }
.shr-reqact { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.shr-reqact select { width: auto; min-width: 150px; }
.shr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .4rem; max-height: 260px; overflow-y: auto; padding: .2rem; }
.shr-rep { display: flex; align-items: center; gap: .55rem; margin: 0; padding: .5rem .6rem; border-radius: 11px; cursor: pointer; background: var(--card); border: 1px solid var(--border); transition: border-color .14s, background .14s; }
.shr-rep:hover { border-color: var(--primary); }
.shr-rep.is-picked { background: var(--primary-light); border-color: var(--primary); }
.shr-rep input { width: auto; margin: 0; flex-shrink: 0; accent-color: var(--primary); }
.shr-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: var(--brand-grad); color: #fff; font-size: .75rem; font-weight: 800; }
.shr-nm { display: flex; flex-direction: column; min-width: 0; }
.shr-nm strong { font-size: .8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shr-nm em { font-style: normal; font-size: .68rem; color: var(--muted); }
.btn-danger, .btn-danger:hover { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; border: 0; box-shadow: 0 4px 13px rgba(220,38,38,.32); }

/* --- Karanlık tema --- */
html[data-theme="dark"] .cdx-lastmod { background: var(--surface-2); }
html[data-theme="dark"] .hist-chip { background: var(--surface-2); }
html[data-theme="dark"] .hist-changes { background: var(--surface-2); }
html[data-theme="dark"] .hist-dot { background: var(--surface-1, var(--card)); }
html[data-theme="dark"] .ozt-gauge-in { background: var(--surface-1, var(--card)); }
html[data-theme="dark"] .sticky-del { border-top-color: rgba(255,255,255,.16); }
html[data-theme="dark"] .shr-sec, html[data-theme="dark"] .camp-stat,
html[data-theme="dark"] .pwd-box { background: var(--surface-2); }
html[data-theme="dark"] .shr-rep, html[data-theme="dark"] .shr-reqrow { background: var(--surface-1, var(--card)); }
html[data-theme="dark"] .wam-tpl { background: var(--surface-2); }
html[data-theme="dark"] .ozt-bar-track, html[data-theme="dark"] .pf-pay { background: var(--surface-3); }
html[data-theme="dark"] .cd-tab-n { background: rgba(255,255,255,.12); }

/* ============================================================
   MÜŞTERİ LİSTESİ — WP eklentisi düzenine yaklaştırılmış tablo
   Ad Soyad hücresi kimlik + telefon(+WhatsApp) + e-posta taşır;
   meslek / şehir / medeni durum / kategori ayrı sütunlardır.
   ============================================================ */
.lst-wp td { vertical-align: top; padding: .72rem .8rem; }
.lst-wp .lt-main { min-width: 236px; }
.lst-wp .lt-name {
  display: inline-block; font-size: .93rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--text); text-decoration: none;
}
.lst-wp .lt-name:hover { color: var(--primary); }
.lt-idline {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem;
  margin: .18rem 0 .3rem; font-size: .735rem; color: var(--muted);
}
.lt-idline b { font-weight: 600; color: var(--text); letter-spacing: .01em; }
.lt-line {
  display: flex; align-items: center; gap: .34rem;
  padding: .1rem 0; font-size: .78rem; color: var(--muted);
}
.lt-line a { color: var(--muted); }
.lt-line a:hover { color: var(--primary); }
.lt-line svg { color: #64748b; opacity: .75; flex-shrink: 0; }
.lt-line.lt-mail a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 21ch; }

/* Telefonun yanındaki yuvarlak yeşil WhatsApp düğmesi (WP listesindeki gibi) */
.lt-wabtn {
  display: inline-grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%; background: #25d366; color: #fff !important;
  box-shadow: 0 2px 6px rgba(37,211,102,.4);
  transition: transform .12s, box-shadow .15s;
}
.lt-wabtn:hover { transform: scale(1.12); box-shadow: 0 4px 10px rgba(37,211,102,.5); }
.lt-wabtn svg { color: #fff; opacity: 1; }

/* Kategori rozeti */
.lcat {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .2rem .6rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.lcat.c-ind  { background: #e8f2fa; color: #1d4ed8; }
.lcat.c-corp { background: #e6fbf6; color: #0f766e; }

/* Durum hücresindeki kampanya şeridi (WP'deki kırmızı AXA rozeti) */
.lcamp {
  display: flex; align-items: center; justify-content: center; gap: .25rem;
  margin-top: .3rem; padding: .2rem .5rem; border-radius: 6px;
  font-size: .66rem; font-weight: 800; letter-spacing: .04em;
  background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff !important;
  box-shadow: 0 2px 6px rgba(220,38,38,.32);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lcamp:hover { filter: brightness(1.08); color: #fff !important; }

/* ------------------------------------------------------------
   SON GÖRÜŞME NOTU SATIRI (.lt-noterow)
   ------------------------------------------------------------
   Müşteri satırının hemen altına düşen tek satırlık şerit: müşteriyle
   iletişimin nerede kaldığı, karta girmeden okunur. Renk notun tipidir —
   yeşil olumlu, kırmızı olumsuz, kehribar belirsiz. Satır tıklanabilir:
   görüşme paneli açılır (eski notlar + yeni not).

   Not olan müşteri satırının alt çizgisi kaldırılır; iki satır tek bir
   bant gibi okunsun, not "bir sonraki müşteriye" ait sanılmasın diye. */
.lst-table tbody tr.has-note > td { border-bottom: 0; }
.lt-noterow > td { padding: 0 .8rem .5rem !important; background: transparent; }
.lt-noterow.tone-positive { --nc: var(--success); }
.lt-noterow.tone-negative { --nc: var(--danger); }
.lt-noterow.tone-neutral  { --nc: var(--warn); }
/* Ana satırdaki sol şerit bu satırda `.ln`in kendi kenarlığıyla sürüyor */
.lst-table tr.lt-noterow td:first-child { box-shadow: none; }
.lst-table tbody tr.lt-noterow:hover { box-shadow: none; }
.lst-table tbody tr.lt-noterow:hover > td { background: transparent; }

.ln {
  display: flex; align-items: center; gap: .5rem; min-width: 0;
  padding: .34rem .6rem .34rem .55rem;
  border-radius: 8px; border-left: 3px solid var(--nc, var(--border));
  background: color-mix(in srgb, var(--nc, var(--muted)) 8%, var(--card));
  color: var(--text); text-decoration: none !important;
  transition: background .14s, transform .12s;
}
.ln:hover {
  background: color-mix(in srgb, var(--nc, var(--muted)) 16%, var(--card));
  transform: translateX(1px);
}
.ln-badge {
  display: inline-flex; align-items: center; gap: .25rem; flex-shrink: 0;
  padding: .12rem .45rem; border-radius: 999px;
  font-size: .66rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  background: color-mix(in srgb, var(--nc) 20%, transparent);
  color: color-mix(in srgb, var(--nc) 78%, var(--text));
}
.ln-badge svg { opacity: .85; }
.ln-text {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .8rem; color: var(--text);
}
.ln-reason {
  display: inline-flex; align-items: center; gap: .22rem; flex-shrink: 0;
  padding: .1rem .42rem; border-radius: 6px;
  font-size: .68rem; font-weight: 700;
  background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger);
}
.ln-meta {
  flex-shrink: 0; font-size: .715rem; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ln-meta b { font-weight: 600; color: var(--text); }
.ln-meta em { font-style: normal; opacity: .75; }
/* Dar ekranda önce tarih/yazan, sonra red nedeni gizlenir; metin kalır */
@media (max-width: 1100px) { .ln-meta em { display: none; } }
@media (max-width: 820px)  { .ln-meta { display: none; } }

/* Filtre satırındaki temizle düğmesi WP'deki kırmızı X'e yaklaştırıldı */
.lst-wp .lt-filters .lt-clear {
  background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff;
  border-color: transparent; box-shadow: 0 2px 6px rgba(220,38,38,.3);
}
.lst-wp .lt-filters .lt-clear:hover { filter: brightness(1.08); }

@media (max-width: 1200px) {
  .lst-wp th:nth-child(4), .lst-wp td:nth-child(4),
  .lst-wp th:nth-child(6), .lst-wp td:nth-child(6) { display: none; }
}
@media (max-width: 900px) {
  .lst-wp th:nth-child(2), .lst-wp td:nth-child(2),
  .lst-wp th:nth-child(7), .lst-wp td:nth-child(7) { display: none; }
}

html[data-theme="dark"] .lcat.c-ind  { background: rgba(56,189,248,.16); color: #7dd3fc; }
html[data-theme="dark"] .lcat.c-corp { background: rgba(45,212,191,.16); color: #5eead4; }
html[data-theme="dark"] .lst-wp .lt-name { color: var(--text); }

/* ============================================================
   SEKME İÇERİK IZGARASI — 12 kolon, kırılma noktalı
   ============================================================
   Kişisel Bilgiler sekmesi 4 eşit kolonlu `.cd-grid` kullanır
   (çok sayıda küçük kart). Dashboard tipi sekmeler ise farklı
   genişlikte kartlar ister; onlar bu 12 kolonlu ızgarayı kullanır.

   Kenar çubuğu 210 px yer kapladığı için kırılma noktaları
   görünür alan değil, kartların gerçek genişliği düşünülerek
   seçildi (1560 → 12 kolon, 1100 → 2 kolon, altı → tek kolon).
   ============================================================ */
.tgrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}
.tgrid > * { min-width: 0; }
.tg-4  { grid-column: span 4; }
.tg-6  { grid-column: span 6; }
.tg-8  { grid-column: span 8; }
.tg-12 { grid-column: 1 / -1; }

/* 2 kolonlu katman: tg-4 ve tg-8 yarım genişliğe iner ki eşleşsinler.
   `tg-solo`, tek başına kalacak kartı tam genişliğe çeker — aksi hâlde
   tek sayıda kart olan sekmelerde satır sonunda boşluk kalıyordu. */
@media (max-width: 1560px) {
  .tg-4, .tg-8 { grid-column: span 6; }
  .tg-solo { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .tgrid > * { grid-column: 1 / -1; }
  .tgrid { gap: .8rem; }
}

/* Sekme kartları: üst aksan çizgisi sekmenin renk temasını alır */
.tgrid > .cd-card { position: relative; container-type: inline-size; container-name: tcard; }
.tgrid > .cd-card::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--tone, var(--primary)), transparent 72%);
  opacity: .55; pointer-events: none;
}
.tgrid > .cd-card:hover::after { opacity: 1; }
.tgrid .cdc-head { border-bottom-color: color-mix(in srgb, var(--tone, #4f46e5) 16%, var(--border)); }
.tgrid .cdc-body { display: flex; flex-direction: column; gap: 0; }

/* Boş kart: dev boşluk bırakmasın — kompakt, kesikli çerçeveli ve dikey ortalı */
.tgrid .empty-card {
  margin: auto 0; padding: 1.15rem .9rem;
  border: 1px dashed color-mix(in srgb, var(--tone, #94a3b8) 30%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--tone, #94a3b8) 4%, transparent);
}
.tgrid .empty-ico { font-size: 1.5rem; opacity: .5; line-height: 1.1; }
.tgrid .empty-card p { margin: .25rem 0 .55rem; font-size: .79rem; line-height: 1.5; }
.tgrid .empty-card p:last-child { margin-bottom: 0; }

/* ============================================================
   METRİK ŞERİDİ — kolon sayısı kart genişliğine göre sabit
   (auto-fit son satırda yetim kutu bırakıyordu)
   ============================================================ */
/* Kolon sayısı kartın kendi genişliğine bağlı (container query):
   aynı bileşen hem tam genişlik hem yarım kartta doğru bölünüyor. */
.ozt-metrics { display: grid; gap: .6rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ozt-metrics.m4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container tcard (max-width: 900px) { .ozt-metrics.m4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container tcard (max-width: 640px) { .ozt-metrics    { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container tcard (max-width: 380px) { .ozt-metrics, .ozt-metrics.m4 { grid-template-columns: 1fr; } }

.ozt-metric {
  position: relative; overflow: hidden;
  padding: .75rem .85rem .75rem 1rem;
  transition: transform .14s, box-shadow .16s;
}
.ozt-metric::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--mc, #4f46e5); opacity: .8;
}
.ozt-metric:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); }
.ozt-metric b { line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ozt-metric span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Hızlı eylemler: 6 kutu → her zaman tam satır (3×2 ya da 2×3) */
/* Kart genişliği kırılmalarla değiştiği için kolon sayısı da izler:
   dar kart (tg-4) 2×3 · yarım kart 3×2 · tam genişlik 6×1 */
/* 6 kutu: geniş kartta 6×1, orta kartta 3×2, dar kartta 2×3 — hep tam satır */
.ozt-quick { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@container tcard (max-width: 760px) { .ozt-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container tcard (max-width: 330px) { .ozt-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ozt-qa span { text-align: center; line-height: 1.3; }

/* Sağlık skoru kartı: gösterge ve etken listesi dikeyde yayılsın */
.ozt-score .cdc-body { justify-content: center; }
.ozt-score .ozt-factors { margin-top: auto; }

/* Uyarı listesi: kart yüksekliğini doldurunca kaydırılabilir kalsın */
.ozt-alert-txt span { line-height: 1.4; }

/* Dağılım çubukları: dar kartta etiket/değer sütunları daralır */
@container tcard (max-width: 520px) {
  .ozt-bar-lbl { width: 42%; }
  .ozt-bar-val { width: 88px; font-size: .76rem; }
}
@container tcard (max-width: 340px) {
  .ozt-bar { flex-wrap: wrap; }
  .ozt-bar-lbl { width: 100%; }
  .ozt-bar-val { width: auto; margin-left: auto; text-align: left; }
}
@container tcard (max-width: 420px) {
  .ozt-mini { grid-template-columns: 1fr; }
}

/* Yıl / ay sütun grafikleri dar kartta da okunur kalsın */
.pf-years { height: 156px; overflow-x: auto; padding-bottom: .2rem; }
.pf-year { min-width: 46px; }
.pf-year b { font-size: .68rem; }

/* ============================================================
   SEKME TABLOLARI — yapışkan başlık, satır vurgusu, mobil kaydırma
   ============================================================ */
.tgrid .lst-scroll { overflow-x: auto; border-radius: 10px; }
.tabtable { min-width: 720px; }
.tabtable thead th {
  position: sticky; top: 0; z-index: 2;
  background: color-mix(in srgb, var(--tone, #4f46e5) 8%, var(--card));
  /* Metin, sekme renginin AÇIK tonlarında da okunsun diye --muted yerine
     --text ile karıştırılıyor (turkuaz temada kontrast 3.7 → 6.9). */
  color: color-mix(in srgb, var(--tone, #4f46e5) 55%, var(--text));
  border-bottom: 1px solid color-mix(in srgb, var(--tone, #4f46e5) 24%, var(--border));
}
.tabtable tbody tr { transition: background .12s; }
.tabtable tbody tr:hover td { background: color-mix(in srgb, var(--tone, #4f46e5) 5%, transparent); }
.tabtable tbody tr.tabtable-sub:hover td { background: transparent; }
.tabtable td { border-top: 1px solid var(--border); }
.tabtable tbody tr:first-child td { border-top: 0; }
.tabtable .lact { display: inline-grid; place-items: center; }

/* Tek kolona düşünce tablo yerine kaydırma ipucu görünsün */
@media (max-width: 700px) {
  .tgrid .lst-scroll { box-shadow: inset -12px 0 12px -12px rgba(15,23,42,.25); }
}

/* ============================================================
   KARANLIK TEMA
   ============================================================ */
html[data-theme="dark"] .tgrid .empty-card { background: rgba(255,255,255,.03); }
html[data-theme="dark"] .tabtable thead th {
  background: color-mix(in srgb, var(--tone, #818cf8) 14%, var(--surface-2));
  color: color-mix(in srgb, var(--tone, #818cf8) 35%, var(--text));
}
html[data-theme="dark"] .tabtable tbody tr:hover td { background: rgba(255,255,255,.04); }

/* ============================================================
   MÜŞTERİ KARTI — DÜZELTME KATMANI 3
   1) Hızlı Eylemler artık üstte yatay bir eylem şeridi
   2) Aktif sekme karanlık temada da renkleniyor
   3) Üst şeritteki her düğme kendi premium rengini taşıyor
   ============================================================ */

/* ------------------------------------------------------------
   1. HIZLI EYLEM ŞERİDİ (Özet sekmesinin ilk kartı)
   ------------------------------------------------------------ */
.ozt-actionbar .cdc-head h3 { flex-wrap: wrap; }
.ozt-actionbar .cdc-head h3 small {
  width: 100%; padding-left: 2.05rem; margin-top: .1rem;
  font-size: .72rem; font-weight: 500; color: var(--muted); letter-spacing: 0;
}
/* Geniş şeritte kutular yatay (ikon solda) — dikey kutular seyrek duruyordu */
.ozt-actionbar .ozt-qa {
  flex-direction: row; align-items: center; justify-content: flex-start;
  gap: .55rem; padding: .7rem .85rem;
}
.ozt-actionbar .ozt-qa svg { flex-shrink: 0; }
.ozt-actionbar .ozt-qa span { text-align: left; }
@container tcard (max-width: 760px) {
  .ozt-actionbar .ozt-qa { flex-direction: column; justify-content: center; gap: .35rem; }
  .ozt-actionbar .ozt-qa span { text-align: center; }
}

/* ------------------------------------------------------------
   2. SEKME ŞERİDİ — her iki temada renkli aktif sekme
   ------------------------------------------------------------
   Hata: `html[data-theme="dark"] .cd-tab` (0,2,1) özgüllüğü
   `.cd-tab.on` (0,2,0) kuralını eziyordu; karanlık temada aktif
   sekme gri kalıyordu. Aşağıdaki kurallar iki temayı da kapsıyor.

   Aktif sekme rengi %80 oranında siyahla karıştırılıyor: ham
   `--tc` değerlerinin bir kısmı (yeşil, turuncu) beyaz yazıyla
   4.5:1 kontrastı tutturamıyordu.
   ------------------------------------------------------------ */
.cd-tab {
  background: color-mix(in srgb, var(--tc, #4f46e5) 9%, var(--card));
  color: color-mix(in srgb, var(--tc, #4f46e5) 62%, var(--text));
  border: 1px solid color-mix(in srgb, var(--tc, #4f46e5) 18%, transparent);
  border-bottom: 0;
  transition: background .16s, color .16s, box-shadow .16s, transform .12s;
}
.cd-tab svg { color: var(--tc, #4f46e5); opacity: .9; }
.cd-tab:hover:not(.on) {
  background: color-mix(in srgb, var(--tc, #4f46e5) 17%, var(--card));
  border-color: color-mix(in srgb, var(--tc, #4f46e5) 32%, transparent);
  transform: translateY(-1px);
}
.cd-tab.on,
html[data-theme="dark"] .cd-tab.on {
  background: color-mix(in srgb, var(--tc, #4f46e5) 76%, #000);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 -2px 14px color-mix(in srgb, var(--tc, #4f46e5) 42%, transparent);
}
.cd-tab.on svg { color: #fff; opacity: 1; }
.cd-tab.on .cd-tab-n { background: rgba(255,255,255,.28); color: #fff; }

html[data-theme="dark"] .cd-tab {
  background: color-mix(in srgb, var(--tc, #4f46e5) 15%, var(--surface-2));
  color: color-mix(in srgb, var(--tc, #4f46e5) 34%, var(--text));
  border-color: color-mix(in srgb, var(--tc, #4f46e5) 26%, transparent);
}
html[data-theme="dark"] .cd-tab svg { color: color-mix(in srgb, var(--tc, #4f46e5) 55%, var(--text)); }
html[data-theme="dark"] .cd-tab:hover:not(.on) {
  background: color-mix(in srgb, var(--tc, #4f46e5) 26%, var(--surface-2));
  color: var(--text);
}
html[data-theme="dark"] .cd-tab.on svg { color: #fff; }
html[data-theme="dark"] .cd-tab-n { background: rgba(255,255,255,.14); }
html[data-theme="dark"] .cd-tab.on .cd-tab-n { background: rgba(255,255,255,.28); }

/* ------------------------------------------------------------
   3. ÜST EYLEM ŞERİDİ — düğme başına premium renk
   ------------------------------------------------------------
   Her düğme `--bc` (button color) taşır; arka plan, kenarlık, yazı
   ve ikon bu tek değişkenden türetilir. Böylece aydınlık temada
   yumuşak tonlu, karanlık temada derin tonlu ama aynı kimlikte
   görünüyorlar. Hover'da dolu gradyana geçiyorlar.
   ------------------------------------------------------------ */
.cdx-actions .lbtn {
  --bc: #64748b;
  background: color-mix(in srgb, var(--bc) 11%, var(--card));
  border: 1px solid color-mix(in srgb, var(--bc) 28%, transparent);
  /* %68 yerine %55: açık tonlu renklerde (turuncu, yeşil) yazı kontrastı
     4.5:1 sınırının altına düşüyordu. */
  color: color-mix(in srgb, var(--bc) 55%, var(--text));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--bc) 14%, transparent);
}
.cdx-actions .lbtn svg { color: var(--bc); opacity: 1; }
.cdx-actions .lbtn:hover {
  background: linear-gradient(135deg, var(--bc), color-mix(in srgb, var(--bc) 68%, #000));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 5px 15px color-mix(in srgb, var(--bc) 42%, transparent);
  transform: translateY(-1px);
}
.cdx-actions .lbtn:hover svg { color: #fff; }
.cdx-actions .lbtn:focus-visible { outline: 2px solid var(--bc); outline-offset: 2px; }

/* Vurgulu iki eylem (Düzenle · WhatsApp) dolu gelir */
.cdx-actions .lbtn.is-solid {
  background: linear-gradient(135deg, var(--bc), color-mix(in srgb, var(--bc) 70%, #000));
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 13px color-mix(in srgb, var(--bc) 40%, transparent);
}
.cdx-actions .lbtn.is-solid svg { color: #fff; }
.cdx-actions .lbtn.is-solid:hover { filter: brightness(1.08); }

/* Düğme paleti */
.cdx-actions .a-edit    { --bc: #4f46e5; }
.cdx-actions .a-task    { --bc: #e11d48; }
.cdx-actions .a-policy  { --bc: #16a34a; }
.cdx-actions .a-appt    { --bc: #0891b2; }
.cdx-actions .a-offer   { --bc: #ea7317; }
.cdx-actions .a-wa      { --bc: #1eb355; }
.cdx-actions .a-camp    { --bc: #ea7317; }
.cdx-actions .a-key     { --bc: #7c3aed; }
.cdx-actions .a-share   { --bc: #0d9488; }
.cdx-actions .a-msg     { --bc: #2563eb; }
.cdx-actions .a-refresh { --bc: #64748b; }
.cdx-actions .a-list    { --bc: #475569; }

/* Durum vurguları */
.cdx-actions .a-camp.is-on {
  background: color-mix(in srgb, var(--bc) 22%, var(--card));
  border-color: color-mix(in srgb, var(--bc) 45%, transparent);
}
.cdx-actions .a-share.has-alert {
  --bc: #dc2626;
  background: color-mix(in srgb, var(--bc) 20%, var(--card));
  border-color: color-mix(in srgb, var(--bc) 46%, transparent);
}
.lbtn-badge { background: var(--bc, var(--danger)); }
.lbtn-badge.b-soft { background: color-mix(in srgb, var(--bc, #64748b) 70%, var(--text)); }
.cdx-actions .lbtn:hover .lbtn-badge,
.cdx-actions .lbtn.is-solid .lbtn-badge { background: rgba(255,255,255,.3); color: #fff; }

/* Karanlık tema: tonlar derinleşir, yazı açık kalır */
html[data-theme="dark"] .cdx-actions .lbtn {
  background: color-mix(in srgb, var(--bc) 20%, var(--surface-2));
  border-color: color-mix(in srgb, var(--bc) 38%, transparent);
  color: color-mix(in srgb, var(--bc) 38%, var(--text));
  box-shadow: none;
}
html[data-theme="dark"] .cdx-actions .lbtn svg {
  color: color-mix(in srgb, var(--bc) 58%, var(--text));
}
html[data-theme="dark"] .cdx-actions .lbtn:hover,
html[data-theme="dark"] .cdx-actions .lbtn.is-solid {
  background: linear-gradient(135deg, var(--bc), color-mix(in srgb, var(--bc) 74%, #000));
  color: #fff;
}
html[data-theme="dark"] .cdx-actions .lbtn:hover svg,
html[data-theme="dark"] .cdx-actions .lbtn.is-solid svg { color: #fff; }
html[data-theme="dark"] .cdx-actions .a-camp.is-on,
html[data-theme="dark"] .cdx-actions .a-share.has-alert {
  background: color-mix(in srgb, var(--bc) 30%, var(--surface-2));
  border-color: color-mix(in srgb, var(--bc) 52%, transparent);
}


/* ============================================================
   POLİÇE KARTI (detay) — PREMIUM KATMAN
   Kök `.dash .cd .cdx .pdx`; müşteri kartıyla ortak dil
   (hero, KPI şeridi, `.cd-card` ızgarası) korunur, buradaki
   kurallar poliçeye özgü parçaları tanımlar.
   ============================================================ */

/* --- Hero: tür rozeti + durum tonları --- */
.pdx-badge {
  display: grid; place-items: center; flex-shrink: 0;
  width: 62px; height: 62px; border-radius: 18px;
  font-size: 1.35rem; font-weight: 800; letter-spacing: .01em; color: #fff;
  background: linear-gradient(135deg, var(--pc, #4f46e5), color-mix(in srgb, var(--pc, #4f46e5) 62%, #000));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--pc, #4f46e5) 34%, transparent);
}
.pdx-badge.s-aktif  { --pc: #16a34a; } .pdx-badge.s-soon   { --pc: #d97706; }
.pdx-badge.s-exp    { --pc: #64748b; } .pdx-badge.s-cancel { --pc: #dc2626; }
.pdx-badge.s-arch   { --pc: #475569; } .pdx-badge.s-del    { --pc: #7f1d1d; }
.pdx-badge.s-pasif  { --pc: #94a3b8; }

.pdx .dash-hero h1 { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.pdx-type { font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }

.pdx-state.s-aktif  { background: rgba(22,163,74,.14);  color: #15803d; }
.pdx-state.s-soon   { background: rgba(217,119,6,.15);  color: #b45309; }
.pdx-state.s-exp    { background: #eef1f5;              color: var(--muted); }
.pdx-state.s-pasif  { background: #eef1f5;              color: var(--muted); }
.pdx-state.s-arch   { background: rgba(71,85,105,.14);  color: #475569; }
.pdx-state.s-cancel { background: rgba(220,38,38,.13);  color: #b91c1c; }
.pdx-state.s-del    { background: rgba(127,29,29,.16);  color: #7f1d1d; }
html[data-theme="dark"] .pdx-state.s-exp,
html[data-theme="dark"] .pdx-state.s-pasif { background: var(--surface-3); }

/* --- Üst şeritteki poliçeye özgü düğmeler --- */
.cdx-actions .a-hist   { --bc: #7c3aed; }
.cdx-actions .a-cancel { --bc: #dc2626; }
.cdx-actions .a-del    { --bc: #7f1d1d; }
/* Yenileme Durumu: karar verilmemişse nötr, verildiyse kararın rengi */
.cdx-actions .a-rstd        { --bc: #64748b; }
.cdx-actions .a-rstd.is-yes { --bc: #16a34a; }
.cdx-actions .a-rstd.is-no  { --bc: #dc2626; }
/* Yaşam Döngüsü: poliçenin öncesi/sonrası — bilgi rengi (mavi-camgöbeği) */
.cdx-actions .a-cycle  { --bc: #0891b2; }
.lbtn-badge.b-ok  { background: #16a34a; }
.lbtn-badge.b-err { background: #dc2626; }

/* --- "Yenilendi mi?" kartı: süresi dolan poliçede eylem şeridinin altı --- */
.pdx-renew-ask {
  display: flex; align-items: center; justify-content: space-between; gap: .7rem;
  flex-wrap: wrap; margin-top: .6rem; padding: .55rem .8rem; border-radius: 12px;
  background: color-mix(in srgb, var(--warn) 10%, var(--card));
  border: 1px dashed color-mix(in srgb, var(--warn) 42%, transparent);
}
.pdx-renew-ask .pra-q { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; min-width: 0; }
.pdx-renew-ask .pra-q svg { flex: none; color: var(--warn); }
.pdx-renew-ask .pra-q b { font-weight: 700; }
.pdx-renew-ask .pra-q em { font-style: normal; color: var(--muted); overflow-wrap: anywhere; }
.pra-btns { display: inline-flex; gap: .4rem; flex: none; }
.pra-b {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .34rem .7rem; border-radius: 9px; font-size: .78rem; font-weight: 700;
  border: 1px solid transparent; transition: background .15s, color .15s;
}
.pra-b.is-yes { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.pra-b.is-yes:hover { background: var(--success); color: #fff; }
.pra-b.is-no  { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.pra-b.is-no:hover { background: var(--danger); color: #fff; }
/* Karar verilmiş hâl: kart kararın rengini alır, soru yerine sonuç okunur */
.pdx-renew-ask.is-done-yes {
  background: color-mix(in srgb, var(--success) 9%, var(--card));
  border: 1px solid color-mix(in srgb, var(--success) 32%, transparent);
}
.pdx-renew-ask.is-done-yes .pra-q svg { color: var(--success); }
.pdx-renew-ask.is-done-no {
  background: color-mix(in srgb, var(--danger) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}
.pdx-renew-ask.is-done-no .pra-q svg { color: var(--danger); }
.pra-edit {
  flex: none; padding: .25rem .6rem; border-radius: 8px;
  font-size: .74rem; font-weight: 650; color: var(--muted);
  background: color-mix(in srgb, var(--muted) 10%, transparent);
}
.pra-edit:hover { background: var(--surface-2); color: var(--primary); }
.pra-links { display: inline-flex; gap: .35rem; flex: none; }
/* "Yenile ile bağlandı" imi: kararın elle değil zincirden geldiğini söyler */
.pra-auto {
  display: inline-flex; align-items: center; padding: .04rem .38rem; margin-left: .25rem;
  border-radius: 999px; font-size: .67rem; font-weight: 700; white-space: nowrap;
  background: color-mix(in srgb, var(--success) 16%, transparent); color: #15803d;
}
html[data-theme="dark"] .pra-auto { color: #86efac; }
.cdx-actions form.inline { display: inline-flex; margin: 0; }
/* Poliçe kartında 7 eyleme kadar çıkılıyor: şerit müşteri kartından geniş */
.pdx .cdx-actions { max-width: 780px; }

/* --- Uyarı şeritleri (silinmiş / iptal / yenileme / vade) --- */
.pdx-banner {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-bottom: 1rem; padding: .75rem 1rem; border-radius: 14px;
  font-size: .87rem; line-height: 1.45;
  background: color-mix(in srgb, var(--bnc, #64748b) 9%, var(--card));
  border: 1px solid color-mix(in srgb, var(--bnc, #64748b) 30%, transparent);
  color: var(--text);
}
.pdx-banner > div { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.pdx-banner strong { color: color-mix(in srgb, var(--bnc) 65%, var(--text)); }
.pdx-banner span { font-size: .805rem; color: var(--muted); }
.pdx-banner b { color: var(--text); font-weight: 700; }
.pdx-banner-ico {
  display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px;
  background: color-mix(in srgb, var(--bnc) 16%, transparent); color: var(--bnc);
}
.pdx-banner.b-del    { --bnc: #7f1d1d; }
.pdx-banner.b-cancel { --bnc: #dc2626; }
.pdx-banner.b-soon   { --bnc: #d97706; }
.pdx-banner.b-exp    { --bnc: #64748b; }

.progress span.bar-amber { background: #d97706; }
.progress span.bar-red   { background: #dc2626; }

/* ------------------------------------------------------------
   Hero sağ kolonu — eylem şeridi + "nabız" paneli
   Düğmelerin altındaki boşluk vade ve ödeme durumuna ayrıldı;
   aynı iki rakam özet şeritten çıkarıldı ki tekrar olmasın.
   ------------------------------------------------------------ */
.pdx-side {
  display: flex; flex-direction: column; align-items: stretch; gap: .6rem;
  flex: 0 1 auto; min-width: 0; max-width: 780px; margin-left: auto;
}
.pdx .pdx-side .cdx-actions { max-width: none; }

.pdx-aside {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: .55rem .95rem;
  padding: .7rem .9rem; border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 4%, var(--card));
  border: 1px solid var(--border); box-shadow: var(--sh-sm);
}
/* Halka iki sütuna düştüğünde de solda tam boy kalsın */
.pdx-gauge { position: relative; width: 76px; height: 76px; grid-row: 1 / -1; }
@media (max-width: 1150px) { .pdx-aside { grid-template-columns: auto minmax(0, 1fr); } }
@media (max-width: 640px) {
  .pdx-aside { grid-template-columns: 1fr; justify-items: start; }
  .pdx-gauge { grid-row: auto; justify-self: center; }
}

.pdx-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pdx-gauge circle { fill: none; stroke-width: 4; stroke-linecap: round; }
.pdx-gauge .pg-track { stroke: var(--border); }
.pdx-gauge .pg-val {
  stroke: var(--gc, #16a34a); stroke-dasharray: var(--pct, 0) 100;
  transition: stroke-dasharray .7s cubic-bezier(.22,.61,.36,1);
}
.pdx-gauge.g-green { --gc: #16a34a; } .pdx-gauge.g-amber { --gc: #d97706; }
.pdx-gauge.g-red   { --gc: #dc2626; } .pdx-gauge.g-slate { --gc: #94a3b8; }
.pdx-gauge-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.05; }
.pdx-gauge-c b { display: block; font-size: 1.28rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pdx-gauge-c b.is-word { font-size: .9rem; letter-spacing: -.01em; }
.pdx-gauge-c em {
  display: block; font-style: normal; font-size: .58rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}

.pdx-astat { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.pdx-astat > em {
  display: inline-flex; align-items: center; gap: .25rem; font-style: normal;
  font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.pdx-astat > b { font-size: .93rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pdx-astat > b.is-ok  { color: #15803d; }
.pdx-astat > b.is-due { color: #b45309; }
.pdx-astat > span { font-size: .71rem; color: var(--muted); overflow-wrap: anywhere; }
.pdx-astat > span b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.pdx-abar { height: 5px; margin-top: .3rem; border-radius: 999px; background: var(--bg); overflow: hidden; }
.pdx-abar > span { display: block; height: 100%; border-radius: 999px; background: var(--primary); transition: width .8s cubic-bezier(.22,.61,.36,1); }
.pdx-abar > span.bar-green { background: #16a34a; }
.pdx-abar > span.bar-amber { background: #d97706; }
.pdx-abar > span.bar-red   { background: #dc2626; }
html[data-theme="dark"] .pdx-abar { background: var(--surface-3); }

/* ------------------------------------------------------------
   Bilgi kutucukları — etiket/değer çiftleri
   Eski 118 px etiket + upuzun boş değer sütunu yerine ızgara:
   geniş kart gerçekten dolar, dar kartta kendiliğinden tek sütuna iner.
   ------------------------------------------------------------ */
.pdx-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: .4rem; }
.pdx-fact {
  min-width: 0; padding: .42rem .55rem; border-radius: 10px;
  background: var(--bg); border: 1px solid transparent;
  transition: border-color .14s, background .14s;
}
.pdx-fact:hover { border-color: var(--border); }
.pdx-fact > em {
  display: block; margin-bottom: .12rem; font-style: normal;
  font-size: .61rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.pdx-fact > span { display: block; font-size: .82rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.pdx-fact.is-key { background: color-mix(in srgb, var(--primary) 9%, var(--bg)); }
.pdx-fact.is-key > span, .pdx-fact.is-key b { color: var(--primary-dark); }
html[data-theme="dark"] .pdx-fact.is-key > span, html[data-theme="dark"] .pdx-fact.is-key b { color: var(--primary); }
.pdx-fact.is-soft > span { color: var(--muted); font-weight: 600; }
.pdx-fact .cdx-chip, .pdx-fact .cdx-tag, .pdx-fact .cdx-plate { margin: 0; }
.pf-mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.pf-red  { color: var(--danger); }
.pdx-chips { margin-top: .7rem; }

/* ------------------------------------------------------------
   Künye rozetleri (`.pdb`)
   Poliçe ve müşteri kartlarının başlık alanı ile "Sigorta Ettiren"
   kartı aynı rozeti kullanır: ikon + isteğe bağlı küçük etiket + değer.
   Tümü tek satırda akar, dar ekranda kendi içinde sarar.
   ------------------------------------------------------------ */
.pdx-idb { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .2rem; }
.pdb {
  display: inline-flex; align-items: center; gap: .3rem; min-width: 0;
  padding: .26rem .55rem; border-radius: 9px;
  font-size: .765rem; line-height: 1.2; color: var(--bc, #64748b);
  background: color-mix(in srgb, var(--bc, #64748b) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--bc, #64748b) 22%, transparent);
}
.pdb em {
  font-style: normal; font-size: .6rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; opacity: .72;
}
.pdb b { font-weight: 700; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.pdb svg { flex-shrink: 0; }
a.pdb { transition: background .13s, border-color .13s; }
a.pdb:hover { background: color-mix(in srgb, var(--bc) 20%, transparent); border-color: var(--bc); }
/* Durum rozeti daha baskın: kart durumu bir bakışta okunmalı */
.pdb.is-strong {
  font-weight: 800; color: color-mix(in srgb, var(--bc) 78%, var(--text));
  background: color-mix(in srgb, var(--bc) 18%, transparent);
  border-color: color-mix(in srgb, var(--bc) 40%, transparent);
}
.pdb.b-slate  { --bc: #64748b; } .pdb.b-green  { --bc: #16a34a; }
.pdb.b-blue   { --bc: #2563eb; } .pdb.b-violet { --bc: #7c3aed; }
.pdb.b-indigo { --bc: #4f46e5; } .pdb.b-amber  { --bc: #d97706; }
.pdb.b-cyan   { --bc: #0891b2; } .pdb.b-rose   { --bc: #e11d48; }
.pdb.b-red    { --bc: #dc2626; } .pdb.b-teal   { --bc: #0d9488; }
html[data-theme="dark"] .pdb { color: color-mix(in srgb, var(--bc) 62%, #e2e8f0); }

/* Sıfır sayımlı özet kutusu geri çekilir — dört kalın "0" yan yana
   durunca şerit poliçede bir şey varmış gibi bağırıyordu. */
.cdx-kpi.is-empty { opacity: .5; }
.cdx-kpi.is-empty b { font-weight: 700; color: var(--muted); }

/* ------------------------------------------------------------
   Ortak liste satırı — hasar, zeyil, döküman, görev, hareket,
   diğer poliçeler ve komisyon aynı iskeleti kullanır:
   [ikon] [başlık + alt satır] [tutar/rozet]
   ------------------------------------------------------------ */
.pdx-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: .55rem;
  padding: .45rem .4rem; border-radius: 9px; color: inherit;
}
.pdx-row + .pdx-row { border-top: 1px solid var(--border); }
.pdx-row.is-link { transition: background .13s; }
.pdx-row.is-link:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.pdx-row-ico {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: color-mix(in srgb, var(--rc, #64748b) 15%, transparent); color: var(--rc, #64748b);
}
.pdx-row-ico.is-emoji { background: transparent; font-size: 1rem; }
.pdx-row-ico.t-red { --rc: #dc2626; } .pdx-row-ico.t-green { --rc: #16a34a; }
.pdx-row-ico.t-amber { --rc: #d97706; } .pdx-row-ico.t-violet { --rc: #7c3aed; }
.pdx-row-ico.t-teal { --rc: #0d9488; } .pdx-row-ico.t-slate { --rc: #64748b; }
.pdx-row-main { min-width: 0; display: flex; flex-direction: column; gap: .04rem; }
.pdx-row-main b, .pdx-row-main a {
  font-size: .825rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdx-row-main a:hover { color: var(--primary); }
.pdx-row-main em {
  font-style: normal; font-size: .705rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdx-row-end { display: inline-flex; align-items: center; gap: .4rem; justify-content: flex-end; }
.pdx-row-val { font-size: .83rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pdx-row-val.pos { color: #16a34a; } .pdx-row-val.neg { color: #dc2626; }
.pdx-row-date { font-size: .71rem; color: var(--muted); white-space: nowrap; }

/* ---- Poliçe evrakı yükleme (poliçe kartı > Dökümanlar) ---- */
.pdx-upload { margin-bottom: .8rem; }
.pdx-drop {
  display: flex; align-items: center; gap: .6rem; cursor: pointer;
  padding: .7rem .8rem; border-radius: 12px;
  border: 1.5px dashed var(--border); background: var(--surface-2);
  transition: border-color .15s, background .15s;
}
.pdx-drop:hover, .pdx-drop.is-over { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, transparent); }
.pdx-drop svg { flex-shrink: 0; color: var(--muted); }
.pdx-drop span { font-size: .76rem; line-height: 1.35; }
.pdx-drop em { display: block; font-size: .68rem; color: var(--muted); font-style: normal; }
.pdx-upload-row { display: flex; gap: .45rem; margin-top: .5rem; }
.pdx-upload-row select { flex: 1 1 auto; min-width: 0; font-size: .76rem; }
.pdx-upload-picked {
  display: block; margin-top: .4rem; font-size: .7rem; color: var(--primary); font-weight: 600;
}
.pdx-row.is-late .pdx-row-main b { color: var(--danger); }

/* ------------------------------------------------------------
   Poliçe bağlantısı ve satır bayrağı
   Veri Aktar, Veri Kontrol ve poliçe kartı aynı görünümü paylaşır;
   bu yüzden modül dosyasında değil burada.
   ------------------------------------------------------------ */
.dc-link { display: inline-flex; align-items: center; gap: .18rem; color: var(--primary); }
.dc-link svg { opacity: .35; transition: opacity .13s, transform .13s; }
.dc-link:hover { color: var(--primary-dark); text-decoration: underline; }
.dc-link:hover svg { opacity: 1; transform: translateX(1px); }
html[data-theme="dark"] .dc-link:hover { color: var(--primary); }
.dc-flag {
  display: inline-flex; align-items: center; gap: .2rem; margin-top: .18rem;
  padding: .06rem .36rem; border-radius: 5px;
  font-size: .655rem; font-weight: 700; white-space: nowrap;
}
.dc-flag.is-warn { background: rgba(217,119,6,.14); color: #b45309; }
.dc-flag.is-off  { background: rgba(100,116,139,.16); color: #64748b; }
html[data-theme="dark"] .dc-flag.is-warn { color: #fcd34d; }
html[data-theme="dark"] .dc-flag.is-off  { color: #94a3b8; }

.pdx-note-inline {
  margin-top: .7rem; padding: .55rem .75rem; border-radius: 10px;
  font-size: .8rem; line-height: 1.5; color: var(--text); background: var(--bg);
}
.pdx-note-inline.is-ok { background: rgba(22,163,74,.09); color: #15803d; }
html[data-theme="dark"] .pdx-note-inline.is-ok { color: #6ee7b7; }

/* --- Sigorta ettiren kartı --- */
.pdx-cust { display: flex; align-items: center; gap: .65rem; margin-bottom: .75rem; }
.pdx-cust-av {
  display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px;
  border-radius: 13px; font-size: 1rem; font-weight: 800; color: #fff;
  background: linear-gradient(150deg, #60a5fa, #1d4ed8);
}
.pdx-cust-av.av-f { background: linear-gradient(150deg, #f472b6, #be185d); }
.pdx-cust-av.av-c { background: linear-gradient(150deg, #fbbf24, #b45309); }
.pdx-cust-main { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.pdx-cust-name { font-size: .95rem; font-weight: 700; color: var(--text); }
.pdx-cust-name:hover { color: var(--primary); }
.pdx-cust-acts { display: flex; gap: .4rem; margin-top: .7rem; flex-wrap: wrap; }

/* --- Sigortalı listesi --- */
.pdx-insured { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.pdx-insured li {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .38rem .5rem; border-radius: 10px; background: var(--bg);
}
.pdx-ins-av {
  display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px;
  border-radius: 8px; font-size: .72rem; font-weight: 800; color: #fff;
  background: linear-gradient(150deg, #22d3ee, #0e7490);
}
.pdx-ins-name { font-size: .85rem; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

/* --- Prim & ödeme kartı --- */
.pdx-price {
  display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem;
  margin-bottom: .8rem; padding-bottom: .7rem; border-bottom: 1px dashed var(--border);
}
.pdx-price em, .pdx-price-sub em {
  display: block; font-style: normal; font-size: .66rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.pdx-price-main b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pdx-price-sub  b { font-size: .95rem; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.price-row strong.pos, .mini-row strong.pos { color: #16a34a; }
.price-row strong.neg, .mini-row strong.neg { color: #dc2626; }
.pdx-pay-state {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem;
  padding: .26rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
}
.pdx-pay-state.is-paid   { background: rgba(22,163,74,.12); color: #15803d; }
.pdx-pay-state.is-due    { background: rgba(217,119,6,.13); color: #b45309; }
.pdx-pay-state.is-cancel { background: rgba(220,38,38,.11); color: #b91c1c; }
.pdx-trs { margin-top: .8rem; padding-top: .6rem; border-top: 1px dashed var(--border); }
.pdx-sublabel {
  display: block; margin-bottom: .25rem; font-size: .66rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.mini-row.is-late strong { color: var(--danger); }

/* --- Not formu --- */
.pdx-noteform textarea { width: 100%; min-height: 96px; resize: vertical; }
.pdx-noteform-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }

/* Poliçe kartları müşteri kartındakinden zengin (fiyat bloğu, sigortalı
   listesi): 4 yerine 3 kolon daha okunur bir yoğunluk veriyor. */
.pdx .cd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1250px) { .pdx .cd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  {
  .pdx .cd-grid { grid-template-columns: 1fr; }
  .pdx .cd-card-wide, .pdx .cd-card-full { grid-column: auto; }
}

/* ============================================================
   POLİÇE FORMU — EK PARÇALAR
   (bağlam şeridi, sigortalı araçları, navigasyon ipuçları)
   ============================================================ */
.pfrm-context {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-bottom: 1rem; padding: .7rem .95rem; border-radius: 14px;
  font-size: .855rem; line-height: 1.45;
  background: color-mix(in srgb, #8b5cf6 8%, var(--card));
  border: 1px solid color-mix(in srgb, #8b5cf6 28%, transparent);
}
.pfrm-context > div { flex: 1 1 300px; min-width: 0; }
.pfrm-context .muted { display: block; font-size: .785rem; margin-top: .1rem; }
.pfrm-context-ico {
  display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px;
  border-radius: 11px; background: rgba(139,92,246,.15); color: #7c3aed;
}
.pfrm-context.is-gold { background: color-mix(in srgb, #f59e0b 9%, var(--card)); border-color: color-mix(in srgb, #f59e0b 30%, transparent); }
.pfrm-context.is-gold .pfrm-context-ico { background: rgba(245,158,11,.16); color: #b45309; }

.pf-ins-tools { display: flex; gap: .4rem; margin-bottom: .7rem; }
.fhint-warn {
  display: flex; align-items: center; gap: .35rem; margin-bottom: .8rem;
  padding: .45rem .7rem; border-radius: 9px;
  color: #b91c1c; background: rgba(220,38,38,.08);
}
.fhint-warn svg { flex-shrink: 0; }
html[data-theme="dark"] .fhint-warn { color: #fca5a5; background: rgba(248,113,113,.1); }

.cfn-item > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.cfn-hint { font-style: normal; font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--danger); }
.cfn-item.is-active .cfn-hint { color: rgba(255,255,255,.78); }
.cfn-item.is-muted { opacity: .42; }
.cfn-foot {
  display: flex; align-items: flex-start; gap: .35rem; margin-top: .4rem;
  padding: .5rem .6rem .2rem; border-top: 1px solid var(--border);
  font-size: .69rem; line-height: 1.4; color: var(--muted);
}
.cfn-foot svg { flex-shrink: 0; margin-top: 1px; color: var(--primary); }

/* ============================================================
   POLİÇE GEÇMİŞİ MODALI (yalnız Patron)
   ============================================================ */
.hist-ip {
  margin-left: .35rem; padding: .02rem .35rem; border-radius: 4px;
  font-size: .66rem; font-variant-numeric: tabular-nums;
  background: var(--bg); color: var(--muted);
}
.hist-changes li.is-commission {
  font-weight: 700; color: #b45309;
  background: rgba(217,119,6,.09); border-radius: 6px; padding: .18rem .4rem; margin: .1rem -.4rem;
}
html[data-theme="dark"] .hist-changes li.is-commission { color: #fcd34d; background: rgba(251,191,36,.12); }
.phist-foot-note {
  display: flex; align-items: flex-start; gap: .4rem; margin: 1rem 0 0;
  padding: .55rem .75rem; border-radius: 10px;
  font-size: .755rem; line-height: 1.5; color: var(--muted); background: var(--bg);
}
.phist-foot-note svg { flex-shrink: 0; margin-top: 2px; }

/* ============================================================
   BUGÜNÜM — KİŞİSELLEŞTİRİLEBİLİR PANEL (premium katman)
   ------------------------------------------------------------
   Her panel bir "widget" kartıdır: tutamacından sürüklenir,
   genişliği değişir, gizlenebilir. Renk aksanı `.accent-*`
   sınıflarıyla dashboard diliyle ortaktır.
   ============================================================ */

/* --- Aksan tonu: her widget kendi rengini bir değişkende taşır --- */
.mdw.accent-primary { --wc: #4f46e5; } .mdw.accent-blue   { --wc: #2563eb; }
.mdw.accent-green   { --wc: #16a34a; } .mdw.accent-purple { --wc: #7c3aed; }
.mdw.accent-cyan    { --wc: #0891b2; } .mdw.accent-amber  { --wc: #d97706; }
.mdw.accent-red     { --wc: #dc2626; } .mdw.accent-indigo { --wc: #6366f1; }
.mdw.accent-pink    { --wc: #db2777; } .mdw.accent-orange { --wc: #ea580c; }
.mdw.accent-violet  { --wc: #7c3aed; } .mdw.accent-teal   { --wc: #0d9488; }
.mdw.accent-slate   { --wc: #475569; }

/* ------------------------------------------------------------
   1) PREMIUM DÜĞMELER (.pbtn) — aydınlık ve karanlıkta şık
   ------------------------------------------------------------ */
.pbtn {
  position: relative; display: inline-flex; align-items: center; gap: .45rem;
  padding: .52rem .95rem; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: .82rem; font-weight: 650; letter-spacing: -.005em;
  white-space: nowrap; text-decoration: none !important;
  color: var(--text);
  background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 92%, var(--bg)));
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(15,23,42,.05), inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .13s cubic-bezier(.22,.61,.36,1), box-shadow .18s, border-color .18s, background .18s, color .18s;
}
.pbtn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 42%, transparent);
  color: var(--primary);
  box-shadow: 0 4px 14px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.8);
}
.pbtn:active { transform: translateY(0) scale(.985); box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.pbtn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pbtn svg { opacity: .85; transition: opacity .18s, transform .18s; }
.pbtn:hover svg { opacity: 1; }
.pbtn-sm { padding: .34rem .65rem; font-size: .755rem; border-radius: 9px; }

/* Birincil: markanın gradyanı + iç ışık + renkli gölge */
.pbtn-primary {
  color: #fff; border-color: transparent;
  background: var(--brand-grad);
  box-shadow: 0 4px 14px rgba(79,70,229,.34), inset 0 1px 0 rgba(255,255,255,.25);
}
.pbtn-primary:hover {
  color: #fff; filter: brightness(1.07);
  box-shadow: 0 7px 20px rgba(79,70,229,.42), inset 0 1px 0 rgba(255,255,255,.3);
}
.pbtn-primary svg { opacity: 1; }
.pbtn-primary.is-on { box-shadow: 0 0 0 3px rgba(79,70,229,.22), 0 4px 14px rgba(79,70,229,.34); }

/* Sessiz: yalnız hover'da yüzey kazanır */
.pbtn-quiet {
  background: transparent; border-color: transparent; box-shadow: none; color: var(--muted);
}
.pbtn-quiet:hover { background: var(--surface-2); border-color: var(--border); box-shadow: var(--sh-sm); }

/* Tehlikeli eylem */
.pbtn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 32%, transparent);
  background: color-mix(in srgb, var(--danger) 7%, var(--card)); box-shadow: none; }
.pbtn-danger:hover { color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #dc2626, #991b1b); box-shadow: 0 4px 14px rgba(220,38,38,.34); }

.pbtn-n {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; font-size: .64rem; font-style: normal; font-weight: 800;
  background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary);
}
.pbtn-primary .pbtn-n { background: rgba(255,255,255,.26); color: #fff; }

html[data-theme="dark"] .pbtn {
  color: var(--text);
  background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 80%, #000));
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="dark"] .pbtn:hover {
  color: #6ee7b7; border-color: rgba(16,185,129,.45);
  box-shadow: 0 5px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
}
/* DİKKAT — özgüllük: `html[data-theme="dark"] .pbtn` (0-2-1) tek başına
   `.pbtn-primary` (0-1-0) kuralını ezer. Varyantlar bu yüzden karanlık
   temada da aynı özgüllükte yeniden yazılır; aksi halde birincil düğme
   zeminini kaybedip koyu üstüne koyu yazı olarak okunamaz hâle geliyordu. */
html[data-theme="dark"] .pbtn-primary {
  color: #04241a; border-color: transparent;
  background: var(--brand-grad);
  box-shadow: 0 4px 14px rgba(16,185,129,.32), inset 0 1px 0 rgba(255,255,255,.22);
}
html[data-theme="dark"] .pbtn-primary:hover {
  color: #04241a; filter: brightness(1.08);
  box-shadow: 0 7px 20px rgba(16,185,129,.4), inset 0 1px 0 rgba(255,255,255,.26);
}
html[data-theme="dark"] .pbtn-primary.is-on { box-shadow: 0 0 0 3px rgba(16,185,129,.24), 0 4px 14px rgba(16,185,129,.32); }
html[data-theme="dark"] .pbtn-quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
html[data-theme="dark"] .pbtn-quiet:hover { background: var(--surface-3); border-color: var(--border); color: #6ee7b7; }
html[data-theme="dark"] .pbtn-danger {
  color: #fca5a5; background: rgba(248,113,113,.1);
  border-color: rgba(248,113,113,.32); box-shadow: none;
}
html[data-theme="dark"] .pbtn-danger:hover {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #dc2626, #991b1b);
  box-shadow: 0 4px 14px rgba(220,38,38,.34);
}

/* ------------------------------------------------------------
   2) ARAÇ ÇUBUĞU
   ------------------------------------------------------------ */
.md-hero { margin-bottom: .9rem; }
.md-bar {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  flex-wrap: wrap; margin-bottom: .9rem;
  padding: .55rem .7rem; border-radius: 14px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--sh-sm);
}
.md-bar-l, .md-bar-r { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.md-bar form.inline { display: inline-flex; margin: 0; }
.md-save {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .28rem .6rem; border-radius: 999px;
  font-size: .74rem; font-weight: 650;
  background: color-mix(in srgb, var(--success) 13%, transparent); color: #15803d;
  animation: mdFade .25s ease both;
}
.md-save.is-err { background: color-mix(in srgb, var(--danger) 13%, transparent); color: #b91c1c; }
html[data-theme="dark"] .md-save { color: #6ee7b7; }
html[data-theme="dark"] .md-save.is-err { color: #fca5a5; }
@keyframes mdFade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

.md-edit-hint {
  display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 .9rem;
  padding: .6rem .85rem; border-radius: 12px;
  font-size: .805rem; line-height: 1.5; color: var(--text);
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
  border: 1px dashed color-mix(in srgb, var(--primary) 34%, transparent);
}
.md-edit-hint svg { flex-shrink: 0; margin-top: 2px; color: var(--primary); }

/* --- Günün üretim özeti: Poliçelerim'deki şeridin aynısı (.lst-fstat) --- */
.md-fstat { margin-bottom: .9rem; }
.fst-go {
  margin-left: auto; display: inline-flex; align-items: center; gap: .25rem;
  padding: .2rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 650;
  color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.fst-go:hover { background: color-mix(in srgb, var(--primary) 18%, transparent); }

/* ------------------------------------------------------------
   3) WIDGET IZGARASI
   ------------------------------------------------------------ */
/* Kart genişliği kullanıcının ÇEKTİĞİ boydur; otomatik oturtma yoktur
   (bkz. myday.js dosya başlığı). Satır sonunda boşluk kalabilir — bu bir
   kusur değil, kullanıcının bıraktığı boşluktur.

   `dense` paketleme de bilerek kullanılmaz: deliği doldurmak için kartların
   sırasını değiştirmek, kullanıcının kurduğu düzeni bozmak demektir.

   Kırılım noktaları ORAN korumak için seçildi: ızgara 4 kolondan doğrudan
   2'ye iner (2, 4'ün böleni — "yarım" iki genişlikte de tam yarımdır).
   Araya 3 kolonluk bir kırılım girseydi yarım çekilen kart ekranın üçte
   ikisini kaplar, kullanıcı çektiği boyu göremezdi. 2 kolonda "üç çeyrek"
   tek kolona iner: 3/4 ile 1/4 orada yan yana yarımşar yer tutar. */
.mdw-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem; align-items: start;
}
.mdw-grid > [data-span="1"] { grid-column: span 1; }
.mdw-grid > [data-span="2"] { grid-column: span 2; }
.mdw-grid > [data-span="3"] { grid-column: span 3; }
.mdw-grid > [data-span="4"] { grid-column: span 4; }
@media (max-width: 1180px) {
  .mdw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mdw-grid > [data-span="3"] { grid-column: span 1; }
  .mdw-grid > [data-span="4"] { grid-column: span 2; }
}
@media (max-width: 680px) {
  .mdw-grid { grid-template-columns: 1fr; }
  .mdw-grid > .mdw { grid-column: span 1 !important; }
}

/* --- Kart --- */
.mdw {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 16px; background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  transition: box-shadow .2s, transform .16s cubic-bezier(.22,.61,.36,1), border-color .2s;
}
.mdw::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--wc, #4f46e5), color-mix(in srgb, var(--wc, #4f46e5) 28%, transparent));
}
.mdw:hover { box-shadow: var(--sh-md); }

.mdw-head {
  display: flex; align-items: center; gap: .5rem;
  padding: .72rem .85rem .68rem; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--wc, #4f46e5) 5%, transparent), transparent);
}
.mdw-ico {
  display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 10px;
  background: color-mix(in srgb, var(--wc, #4f46e5) 13%, transparent); color: var(--wc, #4f46e5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
html[data-theme="dark"] .mdw-ico { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.mdw-title {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: .875rem; font-weight: 700; letter-spacing: -.01em; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Başlığın kendisi katlama düğmesidir — hedef alan kocaman olsun */
.mdw-fold {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mdw-fold:hover { color: var(--wc, #4f46e5); }
.mdw-fold:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 5px; }
.mdw-chev svg { transition: transform .18s; }
.mdw.is-folded .mdw-chev svg { transform: rotate(-90deg); }
/* Katlı kart: yalnız başlık şeridi kalır, ızgarada yeri korunur */
.mdw.is-folded { align-self: start; }
.mdw.is-folded .mdw-head { border-bottom: 0; }
/* Katlı kartta araçlar hep görünür: "buradan açılıyor" belli olsun */
.mdw.is-folded .mdw-tools { opacity: 1; }
.mdw-count {
  flex-shrink: 0; min-width: 22px; padding: .1rem .45rem; border-radius: 999px;
  font-size: .7rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--wc, #4f46e5) 14%, transparent); color: var(--wc, #4f46e5);
}

/* Tutamaç + araçlar: normalde saydam, hover/düzenlemede belirir */
.mdw-grip {
  display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px;
  margin-left: -.2rem; border: 0; border-radius: 7px; cursor: grab;
  background: transparent; color: var(--muted); opacity: 0;
  transition: opacity .16s, background .16s, color .16s;
}
.mdw-grip:active { cursor: grabbing; }
.mdw:hover .mdw-grip, .myday.is-editing .mdw-grip { opacity: 1; }
.mdw-grip:hover { background: var(--surface-2); color: var(--primary); }
.mdw-grip:focus-visible { opacity: 1; outline: 2px solid var(--primary); outline-offset: 1px; }

.mdw-tools { display: inline-flex; align-items: center; gap: .2rem; flex-shrink: 0; opacity: 0; transition: opacity .16s; }
.mdw:hover .mdw-tools, .myday.is-editing .mdw-tools { opacity: 1; }
.mdw-btn {
  display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0;
  border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--muted);
  transition: background .15s, color .15s, transform .12s;
}
.mdw-btn:hover { background: var(--surface-2); color: var(--primary); transform: translateY(-1px); }
.mdw-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
[data-w-hide]:hover { background: color-mix(in srgb, var(--danger) 13%, transparent) !important; color: var(--danger) !important; }

.mdw-body { padding: .75rem .85rem .85rem; flex: 1 1 auto; max-height: 420px; overflow-y: auto; }
.mdw[data-span="1"] .mdw-body { max-height: 340px; }
.mdw-body::-webkit-scrollbar { width: 8px; }
.mdw-body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 28%, transparent); border-radius: 999px; }
.mdw-body::-webkit-scrollbar-track { background: transparent; }

/* Düzenleme modu: kartlar hafifçe "kaldırılır", tutamaç belirginleşir */
.myday.is-editing .mdw {
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  box-shadow: 0 3px 14px rgba(79,70,229,.10);
}
.myday.is-editing .mdw-head { cursor: default; }
.myday.is-editing .mdw-grip { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }

/* Sürükleme */
.mdw.is-drag { opacity: .45; transform: scale(.985); }
.mdw.is-hidden-drag { display: none; }
.myday.is-dragging .mdw { transition: none; }
.myday.is-dragging .mdw-body { pointer-events: none; }
.mdw-ghost {
  grid-column: span var(--gs, 2);
  min-height: 120px; border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  animation: mdGhost .9s ease-in-out infinite alternate;
}
@keyframes mdGhost { from { opacity: .6; } to { opacity: 1; } }
.mdw.is-leaving { opacity: 0; transform: scale(.94); transition: opacity .18s, transform .18s; }

/* Kart üstü kısa bilgi balonu — SOL ALT köşede.
   Eskiden sağ üstteydi ve başlıktaki araç düğmelerinin üstüne biniyordu
   ("Boşluk kapatıldı" balonu sayacı ve düğmeleri kapatıyordu). Sol alt hem
   boştur hem de kullanıcının elinin olduğu yere (genişlik tutamacı) yakın;
   katlı kartta da kırpılmaz. */
.mdw-toast {
  position: absolute; left: .6rem; bottom: .4rem; z-index: 4;
  padding: .2rem .55rem; border-radius: 999px; white-space: nowrap;
  font-size: .68rem; font-weight: 700; color: #fff;
  background: rgba(15,23,42,.86); opacity: 0; transform: translateY(4px);
  transition: opacity .18s, transform .18s; pointer-events: none;
}
.mdw-toast.is-on { opacity: 1; transform: none; }

/* --- Genişlik tutamacı: kartın sağ alt köşesi --- */
.mdw-grab {
  position: absolute; right: 0; bottom: 0; z-index: 5;
  width: 26px; height: 26px; cursor: ew-resize;
  display: grid; place-items: center;
  opacity: 0; transition: opacity .16s;
  touch-action: none;                 /* çekerken sayfa kaymasın */
}
.mdw:hover .mdw-grab, .myday.is-editing .mdw-grab { opacity: .55; }
.mdw-grab:hover, .mdw.is-resize .mdw-grab { opacity: 1 !important; }
.mdw-grab:focus-visible { opacity: 1; outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 6px; }
/* Köşedeki üç eğik çizgi — "buradan çekilir" işareti */
.mdw-grab i {
  width: 13px; height: 13px;
  background:
    linear-gradient(135deg, transparent 45%, currentColor 45%, currentColor 58%, transparent 58%),
    linear-gradient(135deg, transparent 68%, currentColor 68%, currentColor 81%, transparent 81%);
  color: var(--muted);
}
.mdw-grab:hover i, .mdw.is-resize .mdw-grab i { color: var(--wc, #4f46e5); }

/* Çekme sırasında: hedef boy tutamacın yanında yazar */
.mdw-sizetag {
  position: absolute; right: 1.9rem; bottom: .3rem; z-index: 5;
  padding: .18rem .5rem; border-radius: 999px; white-space: nowrap;
  font-size: .68rem; font-weight: 700; color: #fff;
  background: var(--wc, #4f46e5); opacity: 0;
  transition: opacity .14s; pointer-events: none;
}
.mdw-sizetag.is-on { opacity: 1; }
.mdw.is-resize {
  border-color: var(--wc, #4f46e5);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--wc, #4f46e5) 22%, transparent);
}
/* Çekerken ızgara anında yerleşsin ve metin seçilmesin */
.myday.is-resizing { cursor: ew-resize; user-select: none; }
.myday.is-resizing .mdw { transition: none; }
.myday.is-resizing .mdw-body { pointer-events: none; }
/* Tek kolonlu görünümde genişlik diye bir şey yok */
@media (max-width: 680px) { .mdw-grab { display: none; } }

/* Boş durum */
.mdw-empty {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: 1.6rem .8rem; text-align: center; color: var(--muted);
}
.mdw-empty svg { color: color-mix(in srgb, var(--muted) 45%, transparent); margin-bottom: .15rem; }
.mdw-empty strong { font-size: .855rem; font-weight: 700; color: var(--text-2, var(--text)); }
.mdw-empty span { font-size: .78rem; line-height: 1.5; max-width: 34ch; }
.mdw-empty.is-err { color: var(--danger); }
.mdw-empty .pbtn { margin-top: .5rem; }
.mdw-blank { grid-column: 1 / -1; }

/* ------------------------------------------------------------
   4) WIDGET İÇİ PARÇALAR
   ------------------------------------------------------------ */
.mdw-goal .goal-t { display: flex; align-items: baseline; gap: .5rem; font-size: .8rem; color: var(--muted); }
.mdw-goal .goal-t b { margin-left: auto; font-size: 1.12rem; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.mdw-goal .goal-t .delta { margin-left: .3rem; }
.mdw-goal .progress { margin: .5rem 0 .35rem; }
.mdw-goal .goal-s { display: flex; justify-content: space-between; gap: .5rem; font-size: .765rem; color: var(--muted); }
.mdw-goal .goal-s b { color: var(--text); font-weight: 700; }
.mdw-goal .pos { color: var(--success); font-weight: 650; }

/* Hızlı eylem kutucukları */
.qact { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 1080px) { .qact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .qact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qact-tile {
  position: relative; display: flex; align-items: center; gap: .55rem; overflow: hidden;
  padding: .65rem .75rem; border-radius: 13px;
  text-decoration: none !important; color: var(--text);
  background: linear-gradient(150deg, color-mix(in srgb, var(--qc) 13%, var(--card)), var(--card));
  border: 1px solid color-mix(in srgb, var(--qc) 26%, transparent);
  transition: transform .15s cubic-bezier(.22,.61,.36,1), box-shadow .2s, border-color .2s;
}
.qact-tile::after {
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .2s;
  background: linear-gradient(150deg, color-mix(in srgb, var(--qc) 22%, transparent), transparent 65%);
}
.qact-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--qc) 55%, transparent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--qc) 26%, transparent); color: var(--text); }
.qact-tile:hover::after { opacity: 1; }
.qact-ico {
  position: relative; z-index: 1; display: grid; place-items: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 11px; color: #fff;
  background: linear-gradient(150deg, var(--qc), color-mix(in srgb, var(--qc) 65%, #000));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--qc) 38%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
}
.qact-txt { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; }
.qact-txt b { font-size: .85rem; font-weight: 700; letter-spacing: -.01em; }
.qact-txt em { font-style: normal; font-size: .71rem; color: var(--muted); }
.q-cyan { --qc: #0891b2; } .q-green { --qc: #16a34a; } .q-indigo { --qc: #4f46e5; }
.q-amber { --qc: #d97706; } .q-violet { --qc: #7c3aed; }

/* Satır içi mini eylem (yenile / poliçeleştir) */
.mdw-mini {
  display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 8px; color: var(--muted); background: var(--surface-2);
  transition: background .15s, color .15s, transform .12s; opacity: 0;
}
.mp-item:hover .mdw-mini { opacity: 1; }
.mdw-mini:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }

.mdw-time-chip {
  flex-shrink: 0; padding: .18rem .5rem; border-radius: 8px;
  font-size: .74rem; font-weight: 800; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--wc, #4f46e5) 13%, transparent); color: var(--wc, #4f46e5);
}
.mdw-bday { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 8px; background: rgba(219,39,119,.13); color: #db2777; }

.mdw-sum {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  margin-bottom: .55rem; padding-bottom: .5rem; border-bottom: 1px dashed var(--border);
  font-size: .755rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.mdw-sum b { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--danger); text-transform: none; }
.mdw-mini-bar { height: 4px; margin: .3rem 0 0; }
.mdw-note { display: flex; align-items: center; gap: .3rem; margin: 0 0 .6rem; font-size: .72rem; color: var(--muted); }
.mp-time.neg { color: var(--danger); font-weight: 700; }

/* Dağılım çubukları */
.mdw-bar { margin-bottom: .6rem; }
.mdw-bar:last-child { margin-bottom: 0; }
.mdw-bar-top { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .22rem; }
.mdw-bar-lbl { flex: 1 1 auto; min-width: 0; font-size: .805rem; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdw-bar-val { flex-shrink: 0; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.mdw-bar-val em { font-style: normal; font-size: .69rem; font-weight: 600; color: var(--muted); margin-left: .3rem; }
.mdw-bar-track { display: block; height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.mdw-bar-track i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--bc2, #6366f1), color-mix(in srgb, var(--bc2, #6366f1) 62%, #fff));
  animation: mdBar .7s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes mdBar { from { width: 0 !important; } }
.mdw-bar.t1 { --bc2: #6366f1; } .mdw-bar.t2 { --bc2: #0ea5e9; } .mdw-bar.t3 { --bc2: #10b981; }
.mdw-bar.t4 { --bc2: #f59e0b; } .mdw-bar.t5 { --bc2: #ef4444; } .mdw-bar.t6 { --bc2: #a855f7; }
.mdw-bar.t7 { --bc2: #14b8a6; } .mdw-bar.t8 { --bc2: #f43f5e; }

/* Haftalık tempo */
.tempo-legend { display: flex; flex-wrap: wrap; gap: .2rem .8rem; margin-bottom: .6rem; font-size: .73rem; color: var(--muted); }
.tempo-legend .tl { display: inline-flex; align-items: center; gap: .3rem; }
.tempo-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.tl-p i { background: #6366f1; } .tl-m i { background: #0ea5e9; } .tl-t i { background: #10b981; }
.tempo-legend b { color: var(--text); font-weight: 800; }
.tempo { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; align-items: end; }
.tempo-day { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.tempo-cols { display: flex; align-items: flex-end; gap: 2px; height: 84px; width: 100%; justify-content: center; }
.tempo-cols i { width: 7px; border-radius: 3px 3px 0 0; animation: mdCol .6s cubic-bezier(.22,.61,.36,1) both; }
@keyframes mdCol { from { height: 0 !important; } }
.tc-p { background: linear-gradient(180deg, #818cf8, #4f46e5); }
.tc-m { background: linear-gradient(180deg, #38bdf8, #0284c7); }
.tc-t { background: linear-gradient(180deg, #34d399, #059669); }
.tempo-lbl { font-size: .68rem; font-weight: 600; color: var(--muted); }
.tempo-day.is-today .tempo-lbl { color: var(--primary); font-weight: 800; }
.tempo-day.is-today { position: relative; }
.tempo-day.is-today::before {
  content: ''; position: absolute; inset: -.2rem -.15rem; border-radius: 9px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

/* Ekip sıralaması */
.rank-row { display: flex; align-items: center; gap: .55rem; padding: .4rem .35rem; border-radius: 10px; }
.rank-row.is-me { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.rank-n {
  display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 8px;
  font-size: .74rem; font-weight: 800; color: var(--muted); background: var(--surface-2);
}
.rank-n.r1 { background: linear-gradient(150deg, #fbbf24, #b45309); color: #fff; box-shadow: 0 2px 8px rgba(180,83,9,.35); }
.rank-n.r2 { background: linear-gradient(150deg, #cbd5e1, #64748b); color: #fff; }
.rank-n.r3 { background: linear-gradient(150deg, #fdba74, #c2410c); color: #fff; }
.rank-main { flex: 1 1 auto; min-width: 0; }
.rank-name { display: block; font-size: .82rem; font-weight: 650; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-name em { font-style: normal; font-size: .7rem; color: var(--primary); font-weight: 700; }
.rank-val { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end;
  font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.rank-val em { font-style: normal; font-size: .67rem; font-weight: 600; color: var(--muted); }

/* Son işlemler akışı */
.act-row { display: flex; align-items: flex-start; gap: .5rem; padding: .35rem 0; }
.act-dot {
  display: grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px;
  border-radius: 50%; color: var(--hc, var(--muted));
  background: color-mix(in srgb, var(--hc, #94a3b8) 14%, transparent);
}
.act-main { display: flex; flex-direction: column; min-width: 0; }
.act-main a, .act-main strong { font-size: .815rem; font-weight: 600; color: var(--text); }
.act-main a:hover { color: var(--primary); }

/* ------------------------------------------------------------
   Not Defterim — zaman damgalı notlar (gün + saat dilimi gruplu)
   ------------------------------------------------------------ */
.nb { display: flex; flex-direction: column; }
.nb-add { display: flex; align-items: stretch; gap: .45rem; margin-bottom: .75rem; }
.nb-add textarea { flex: 1; min-height: 44px; max-height: 130px; resize: vertical; font-size: .85rem; line-height: 1.45; }
.nb-add-btn {
  display: inline-flex; align-items: center; gap: .3rem; padding: 0 .85rem;
  border: 0; border-radius: 10px; cursor: pointer;
  font-size: .8rem; font-weight: 700; color: #fff;
  background: linear-gradient(150deg, #f59e0b, #b45309);
  box-shadow: 0 2px 8px rgba(180, 83, 9, .3);
  transition: transform .12s, box-shadow .12s;
}
.nb-add-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(180, 83, 9, .4); }

.nb-list { display: flex; flex-direction: column; gap: .8rem; max-height: 430px; overflow-y: auto; padding-right: .15rem; }
.nb-day-h { display: flex; align-items: baseline; gap: .45rem; margin-bottom: .4rem; }
.nb-day-t { font-size: .73rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text); }
.nb-day-h em { font-style: normal; font-size: .69rem; color: var(--muted); }

/* Saat dilimi şeridi: sol çizgi + küçük başlık (Sabah / Öğleden Sonra / …) */
.nb-part { margin: 0 0 .5rem; padding-left: .7rem; border-left: 2px solid color-mix(in srgb, #f59e0b 35%, transparent); }
.nb-part:last-child { margin-bottom: 0; }
.nb-part-l {
  display: block; margin: .1rem 0 .35rem;
  font-size: .65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #b45309;
}

/* Not kartı — yapışkan not hissi: amber zemin, saat çipi, gizli silme */
.nb-note {
  position: relative; display: flex; align-items: flex-start; gap: .5rem;
  padding: .5rem .6rem; margin-bottom: .4rem; border-radius: 10px;
  background: color-mix(in srgb, #f59e0b 7%, var(--card));
  border: 1px solid color-mix(in srgb, #f59e0b 22%, transparent);
  transition: opacity .18s, box-shadow .15s;
}
.nb-note:last-child { margin-bottom: 0; }
.nb-note:hover { box-shadow: var(--sh-sm); }
.nb-note.is-new { animation: nbIn .45s ease; }
@keyframes nbIn { from { opacity: 0; transform: translateY(-5px); } }
.nb-note.is-going { opacity: .35; }
.nb-time {
  flex-shrink: 0; padding: .12rem .4rem; border-radius: 6px;
  font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums;
  color: #b45309; background: color-mix(in srgb, #f59e0b 16%, transparent);
}
.nb-text { flex: 1; min-width: 0; margin: 0; font-size: .83rem; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.nb-del {
  flex-shrink: 0; width: 20px; height: 20px; border: 0; border-radius: 6px;
  display: grid; place-items: center; cursor: pointer;
  font-size: .95rem; line-height: 1; color: var(--muted); background: transparent;
  opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
.nb-note:hover .nb-del, .nb-del:focus-visible { opacity: 1; }
.nb-del:hover { background: color-mix(in srgb, #ef4444 14%, transparent); color: #dc2626; }

html[data-theme="dark"] .nb-part-l,
html[data-theme="dark"] .nb-time { color: #fbbf24; }

.pad-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .45rem; }
.pad-foot .muted { display: inline-flex; align-items: center; gap: .25rem; }
.pad-state { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 650; color: var(--success); }
.pad-state.is-err { color: #dc2626; }

/* Geciken Görevler — kademeli gecikme rozeti (1-3 amber, 4-7 turuncu, 8+ kırmızı) */
.od-late {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex-shrink: 0; width: 46px; padding: .32rem 0; border-radius: 10px; line-height: 1.1;
}
.od-late b { font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.od-late em { font-style: normal; font-size: .58rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .85; }
.od-late.l1 { color: #b45309; background: color-mix(in srgb, #f59e0b 16%, transparent); }
.od-late.l2 { color: #c2410c; background: color-mix(in srgb, #ea580c 17%, transparent); }
.od-late.l3 { color: #fff; background: linear-gradient(150deg, #ef4444, #b91c1c); box-shadow: 0 2px 8px rgba(185, 28, 28, .35); }
html[data-theme="dark"] .od-late.l1 { color: #fbbf24; }
html[data-theme="dark"] .od-late.l2 { color: #fb923c; }

/* Geciken satırındaki müşteri bağlantısı + yeşil tamamla düğmesi */
.ct-cust { color: inherit; }
.ct-cust:hover { color: var(--primary); }
.act-done { background: #dcfce7; color: #16a34a; }
.act-done:hover { filter: brightness(.96); }
html[data-theme="dark"] .act-done { background: rgba(34, 197, 94, .18); color: #86efac; }

/* ------------------------------------------------------------
   5) ÖZEL RAPOR TABLOSU
   ------------------------------------------------------------ */
.rep-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .55rem; }
.rep-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .12rem .5rem; border-radius: 999px;
  font-size: .68rem; font-weight: 650; color: var(--muted); background: var(--surface-2);
}
.rep-scroll { overflow-x: auto; margin: 0 -.2rem; padding: 0 .2rem; }
.rep-table { width: 100%; border-collapse: collapse; font-size: .795rem; }
.rep-table th {
  position: sticky; top: 0; z-index: 1;
  padding: .4rem .5rem; text-align: left; white-space: nowrap;
  font-size: .665rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  background: var(--card); border-bottom: 1px solid var(--border);
}
.rep-table td { padding: .42rem .5rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent); color: var(--text); }
.rep-table tbody tr:last-child td { border-bottom: 0; }
.rep-table tbody tr:hover td { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.rep-table .ta-money, .rep-table .ta-int { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.rep-table .ta-date, .rep-table .ta-datetime { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rep-badge {
  display: inline-block; padding: .1rem .45rem; border-radius: 6px;
  font-size: .68rem; font-weight: 700; background: var(--surface-2); color: var(--text-2, var(--text));
}
.rep-more { display: flex; align-items: center; gap: .3rem; margin: .5rem 0 0; font-size: .72rem; color: var(--muted); }

/* Halka grafik */
.rep-donut { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.rep-donut-ring {
  position: relative; flex-shrink: 0; width: 124px; height: 124px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.06);
}
.rep-donut-hole {
  position: absolute; inset: 26%; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); box-shadow: 0 2px 8px rgba(15,23,42,.1);
}
.rep-donut-hole b { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.rep-donut-hole em { font-style: normal; font-size: .64rem; color: var(--muted); }
.rep-donut-legend { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: .22rem; }
.rdl { display: flex; align-items: center; gap: .4rem; font-size: .765rem; }
.rdl i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.rdl-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.rdl b { flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--text); }

/* ------------------------------------------------------------
   6) MODÜL KİTAPLIĞI (modal)
   ------------------------------------------------------------ */
.mdlib-group { margin-bottom: 1.1rem; }
.mdlib-group h4 {
  display: flex; align-items: center; gap: .35rem; margin: 0 0 .5rem;
  font-size: .705rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.mdlib-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
@media (max-width: 720px) { .mdlib-list { grid-template-columns: 1fr; } }
.mdlib-item {
  position: relative; display: flex; align-items: center; gap: .6rem; margin: 0;
  padding: .6rem .7rem; border-radius: 13px; cursor: pointer;
  background: var(--card); border: 1.5px solid var(--border);
  transition: border-color .16s, background .16s, box-shadow .16s, transform .13s;
}
.mdlib-item:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--primary) 42%, transparent); box-shadow: var(--sh-sm); }
.mdlib-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.mdlib-item.is-on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--card)); }
.mdlib-ico {
  display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 11px;
  background: var(--surface-2); color: var(--muted); transition: background .16s, color .16s;
}
.mdlib-item.is-on .mdlib-ico { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); }
.mdlib-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.mdlib-txt b { font-size: .845rem; font-weight: 700; color: var(--text); }
.mdlib-txt em { font-style: normal; font-size: .735rem; line-height: 1.45; color: var(--muted); }
.mdlib-edit {
  display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 8px; color: var(--muted); background: var(--surface-2);
}
.mdlib-edit:hover { background: var(--primary); color: #fff; }
.mdlib-sw {
  position: relative; flex-shrink: 0; width: 38px; height: 21px; border-radius: 999px;
  background: #cbd5e1; transition: background .18s;
}
.mdlib-sw i {
  position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28); transition: transform .18s;
}
.mdlib-item.is-on .mdlib-sw { background: var(--primary); }
.mdlib-item.is-on .mdlib-sw i { transform: translateX(17px); }
html[data-theme="dark"] .mdlib-sw { background: #334155; }
.mdlib-empty {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: 1.2rem .8rem; text-align: center; color: var(--muted);
  border: 1px dashed var(--border); border-radius: 13px;
}
.mdlib-empty strong { font-size: .85rem; color: var(--text); }
.mdlib-empty span { font-size: .775rem; line-height: 1.5; max-width: 40ch; }
.mdlib-new { margin-top: .6rem; }
.mdlib-state { margin-right: auto; display: inline-flex; align-items: center; gap: .25rem;
  font-size: .755rem; font-weight: 650; color: var(--success); }

/* ------------------------------------------------------------
   7) RAPOR KURGULAYICI (modal)
   ------------------------------------------------------------ */
.repf-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .repf-grid { grid-template-columns: 1fr; } }
.repf-main { display: flex; flex-direction: column; gap: .8rem; }
.repf-side { position: sticky; top: 0; }
.repf-lbl { display: block; margin-bottom: .35rem; font-size: .735rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* Veri kaynağı seçimi */
.repf-src { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; }
@media (max-width: 720px) { .repf-src { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.repf-src-opt { position: relative; margin: 0; cursor: pointer; }
.repf-src-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.repf-src-opt > span {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .6rem .4rem; border-radius: 12px; text-align: center;
  background: var(--surface-2); border: 1.5px solid var(--border); color: var(--muted);
  transition: all .16s;
}
.repf-src-opt > span b { font-size: .765rem; font-weight: 700; }
.repf-src-opt:hover > span { border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.repf-src-opt input:checked + span {
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
  border-color: var(--primary); color: var(--primary);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 20%, transparent);
}

.repf-seg { display: flex; margin-bottom: 0; }
.repf-cols { display: flex; flex-wrap: wrap; gap: .35rem; }
.repf-col { position: relative; margin: 0; cursor: pointer; }
.repf-col input { position: absolute; opacity: 0; width: 0; height: 0; }
.repf-col > span {
  display: inline-flex; align-items: center; padding: .3rem .65rem; border-radius: 999px;
  font-size: .775rem; font-weight: 600; color: var(--muted);
  background: var(--surface-2); border: 1.5px solid transparent; transition: all .15s;
}
.repf-col:hover > span { color: var(--primary); }
.repf-col.is-on > span {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--primary) 45%, transparent); color: var(--primary);
}
.repf-col.is-on > span::before { content: '✓'; margin-right: .3rem; font-weight: 800; }
.repf-flag { justify-content: flex-end; }
.repf-flag .chk { margin-top: 1.3rem; }

.repf-prev {
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: var(--card); box-shadow: var(--sh-sm);
}
.repf-prev-head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .55rem .7rem; border-bottom: 1px solid var(--border);
  font-size: .775rem; font-weight: 700; color: var(--muted);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, transparent), transparent);
}
.repf-prev-head > span { display: inline-flex; align-items: center; gap: .35rem; }
.repf-prev-body { padding: .7rem; min-height: 180px; max-height: 460px; overflow: auto; transition: opacity .18s; }
.repf-prev-body.is-loading { opacity: .45; }
.repf-foot { display: flex; align-items: center; gap: .6rem; }
.repf-spacer { flex: 1 1 auto; }

html[data-theme="dark"] .rep-table th { background: var(--card); }
html[data-theme="dark"] .rep-donut-ring { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
html[data-theme="dark"] .mdw-toast { background: rgba(2,6,23,.9); }

/* ------------------------------------------------------------
   BUGÜNÜM — karanlık tema aksan düzeltmeleri
   ------------------------------------------------------------
   Aksan renkleri aydınlık zemine göre seçilmiş koyu tonlar; koyu
   kart zemininde (#131f33) kontrastları 2.6'ya kadar düşüyordu ve
   sayaç rozetindeki kalın küçük punto okunmuyordu. Karanlık temada
   her aksan bir üst tona çekilir (hedef ≥ 4.5:1).
   ------------------------------------------------------------ */
html[data-theme="dark"] .mdw.accent-primary { --wc: #a5b4fc; }
html[data-theme="dark"] .mdw.accent-indigo  { --wc: #a5b4fc; }
html[data-theme="dark"] .mdw.accent-blue    { --wc: #93c5fd; }
html[data-theme="dark"] .mdw.accent-green   { --wc: #4ade80; }
html[data-theme="dark"] .mdw.accent-purple  { --wc: #c4b5fd; }
html[data-theme="dark"] .mdw.accent-violet  { --wc: #c4b5fd; }
html[data-theme="dark"] .mdw.accent-cyan    { --wc: #67e8f9; }
html[data-theme="dark"] .mdw.accent-teal    { --wc: #5eead4; }
html[data-theme="dark"] .mdw.accent-amber   { --wc: #fcd34d; }
html[data-theme="dark"] .mdw.accent-orange  { --wc: #fdba74; }
html[data-theme="dark"] .mdw.accent-red     { --wc: #fca5a5; }
html[data-theme="dark"] .mdw.accent-pink    { --wc: #f9a8d4; }
html[data-theme="dark"] .mdw.accent-slate   { --wc: #cbd5e1; }

/* Kart başlığındaki aksan şeridi koyu temada fazla parlamasın */
html[data-theme="dark"] .mdw::before { opacity: .85; }
html[data-theme="dark"] .mdw-head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--wc, #a5b4fc) 8%, transparent), transparent);
}

/* Hızlı eylem başlıkları: `html[data-theme="dark"] a` (0-2-1) kuralı
   `.qact-tile` rengini eziyordu; kutucuk metni ana metin rengini korur. */
html[data-theme="dark"] .qact-tile,
html[data-theme="dark"] .qact-tile:hover { color: var(--text); }
html[data-theme="dark"] .qact-txt em { color: var(--muted); }

/* Kutucuk zeminleri koyu temada daha derin dursun */
html[data-theme="dark"] .qact-tile {
  background: linear-gradient(150deg, color-mix(in srgb, var(--qc) 20%, var(--surface-2)), var(--surface-2));
  border-color: color-mix(in srgb, var(--qc) 34%, transparent);
}
html[data-theme="dark"] .mdw-grip:hover,
html[data-theme="dark"] .mdw-btn:hover { background: var(--surface-3); color: #6ee7b7; }
html[data-theme="dark"] .rep-chip,
html[data-theme="dark"] .rep-badge,
html[data-theme="dark"] .mdw-mini { background: var(--surface-3); }
html[data-theme="dark"] .mdlib-item { background: var(--surface-2); }
html[data-theme="dark"] .mdlib-item.is-on { background: color-mix(in srgb, var(--primary) 12%, var(--surface-2)); }
html[data-theme="dark"] .mdlib-ico { background: var(--surface-3); }
html[data-theme="dark"] .repf-src-opt > span { background: var(--surface-2); }
html[data-theme="dark"] .repf-src-opt input:checked + span { background: color-mix(in srgb, var(--primary) 16%, var(--surface-2)); }
html[data-theme="dark"] .repf-col > span { background: var(--surface-3); }
html[data-theme="dark"] .md-bar { background: color-mix(in srgb, var(--card) 76%, transparent); }

/* Aydınlık temada sayaç rozeti: amber/yeşil/cyan gibi aksanlar beyaz
   zeminde 3.2:1'e kadar düşüyordu. Rozet METİN olduğu için tonu
   koyulaştırıp AA eşiğinin (4.5:1) üstüne çıkarıyoruz; ikon rozeti
   dekoratif olduğundan kendi tonunda kalır. */
html[data-theme="light"] .mdw-count { color: color-mix(in srgb, var(--wc, #4f46e5) 72%, #000); }
html[data-theme="light"] .mdw-time-chip { color: color-mix(in srgb, var(--wc, #4f46e5) 72%, #000); }
/* ============================================================
   GÖREVLERİM — PREMIUM KATMAN
   ------------------------------------------------------------
   Kök sınıflar:
     liste/pano/takvim → `.dash .lst .tsk`
     görev kartı       → `.dash .cd .cdx .tdx`
     görev formu       → `.dash .cfrm .tfrm`
   Liste iskeleti (hero, KPI kartları, filtre şeridi, tablo) müşteri
   ve poliçe modülleriyle ortaktır; buradaki kurallar yalnız göreve
   özgü parçaları ekler. Öncelik rengi tek değişkenden (`--pc`)
   türetilir: rozet, nokta, kart şeridi ve takvim çipi aynı tonu
   paylaşır.
   ============================================================ */

/* --- Öncelik paleti: tüm görev bileşenlerinin ortak kaynağı --- */
.p-urgent { --pc: #dc2626; }
.p-high   { --pc: #ea580c; }
.p-medium { --pc: #2563eb; }
.p-low    { --pc: #64748b; }

/* Aksan değişkeni eksik olan ton sınıfları (kart başlığı ikonları ve
   KPI şeridi bunları `--ac` üzerinden okur) */
.k-rose { --ac: #e11d48; } .k-amber { --ac: #d97706; }
.k-violet { --ac: #7c3aed; } .k-teal { --ac: #0d9488; }
.tdx .cdc-ico.c-indigo { --ac: #4f46e5; } .tdx .cdc-ico.c-blue { --ac: #2563eb; }
.tdx .cdc-ico.c-green  { --ac: #16a34a; } .tdx .cdc-ico.c-amber { --ac: #d97706; }
.tdx .cdc-ico.c-violet { --ac: #7c3aed; } .tdx .cdc-ico.c-cyan  { --ac: #0891b2; }
.tdx .cdc-ico.c-teal   { --ac: #0d9488; }
.cdc-badge.b-green { background: #16a34a; } .cdc-badge.b-amber { background: #d97706; }
.cdc-badge.b-soft  { background: color-mix(in srgb, var(--muted) 55%, transparent); }

/* --- Öncelik rozeti ve noktası --- */
.tprio {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .16rem .5rem; border-radius: 999px; white-space: nowrap;
  font-size: .715rem; font-weight: 700; line-height: 1.35;
  background: color-mix(in srgb, var(--pc, #64748b) 13%, transparent);
  color: color-mix(in srgb, var(--pc, #64748b) 78%, #000);
  border: 1px solid color-mix(in srgb, var(--pc, #64748b) 26%, transparent);
}
.tprio-dot {
  display: inline-block; flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--pc, #64748b);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc, #64748b) 18%, transparent);
}
.tsk-table .lt-id { align-items: flex-start; }
.tsk-table .tprio-dot { margin-top: .42rem; }
.ltag.t-type { --ltc: #4f46e5; } .ltag.t-camp { --ltc: #c2410c; } .ltag.t-rec { --ltc: #0d9488; }
.ltag.t-type, .ltag.t-camp, .ltag.t-rec {
  background: color-mix(in srgb, var(--ltc) 11%, transparent);
  color: color-mix(in srgb, var(--ltc) 76%, #000);
  border-color: color-mix(in srgb, var(--ltc) 24%, transparent);
}

/* Vade hücresi durumları */
.lt-date b.is-over, .cdx-dl dd.is-over, .is-over { color: var(--danger); }
.lt-date b.is-now  { color: var(--warn); }
.lt-date b.is-soon { color: var(--warn); }
.lt-date b.is-done, .lt-date b.is-none { color: var(--muted); font-weight: 600; }

/* Satır içi hızlı eylem düğmeleri */
.lact.a-done   { --lac: #16a34a; }
.lact.a-start  { --lac: #2563eb; }
.lact.a-snooze { --lac: #d97706; }

/* ------------------------------------------------------------
   ODAK ÇİPLERİ — geciken / bugün / yarın / hafta / ay
   ------------------------------------------------------------ */
.tsk-focus {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
  margin: 0 0 .85rem;
}
.tfocus {
  --fc: #64748b;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .7rem; border-radius: 11px;
  font-size: .8rem; font-weight: 600; text-decoration: none !important;
  color: color-mix(in srgb, var(--fc) 74%, var(--text));
  background: color-mix(in srgb, var(--fc) 9%, var(--card));
  border: 1px solid color-mix(in srgb, var(--fc) 22%, transparent);
  transition: transform .13s, box-shadow .15s, background .15s, color .15s;
}
.tfocus:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); color: color-mix(in srgb, var(--fc) 88%, var(--text)); }
.tfocus b {
  font-variant-numeric: tabular-nums; font-size: .78rem; font-weight: 800;
  padding: .05rem .38rem; border-radius: 999px;
  background: color-mix(in srgb, var(--fc) 17%, transparent);
}
.tfocus.on {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--fc), color-mix(in srgb, var(--fc) 72%, #000));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--fc) 38%, transparent);
}
.tfocus.on b { background: rgba(255,255,255,.22); color: #fff; }
.tfocus.f-all      { --fc: #4f46e5; }
.tfocus.f-overdue  { --fc: #dc2626; }
.tfocus.f-today    { --fc: #d97706; }
.tfocus.f-tomorrow { --fc: #2563eb; }
.tfocus.f-week     { --fc: #7c3aed; }
.tfocus.f-month    { --fc: #0d9488; }
.tfocus.f-undated  { --fc: #64748b; }

.tsk-focus-sep { flex: 1 1 1rem; min-width: .5rem; }
.tscope {
  padding: .34rem .62rem; border-radius: 9px;
  font-size: .765rem; font-weight: 600; color: var(--muted);
  text-decoration: none !important; border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.tscope:hover { background: var(--surface-2); color: var(--text); }
.tscope.on { background: var(--surface-3); border-color: var(--border); color: var(--text); }

/* ------------------------------------------------------------
   EKİP İŞ YÜKÜ ŞERİDİ
   ------------------------------------------------------------ */
.tsk-load {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: .8rem .9rem; margin-bottom: .9rem; box-shadow: var(--sh-sm);
}
.tsk-load > header {
  display: flex; align-items: center; gap: .45rem; margin-bottom: .65rem;
  font-size: .82rem; color: var(--muted);
}
.tsk-load > header b { color: var(--text); font-size: .87rem; }
.tsk-load > header span { margin-left: auto; font-size: .74rem; }
.tload-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .5rem; }
.tload {
  display: flex; align-items: center; gap: .55rem; min-width: 0;
  padding: .5rem .6rem; border-radius: 11px; text-decoration: none !important;
  background: var(--surface-2); border: 1px solid transparent;
  transition: transform .13s, box-shadow .15s, border-color .15s;
}
.tload:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); border-color: var(--border); }
.tload.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--surface-2)); }
.tl-av {
  display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px;
  border-radius: 50%; font-size: .72rem; font-weight: 800; color: #fff;
  background: var(--brand-grad);
}
.tl-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .22rem; }
.tl-main b { font-size: .8rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-bar { display: block; height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.tl-bar i { display: block; height: 100%; border-radius: 999px; background: var(--brand-grad); }
.tl-nums { display: inline-flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.tl-nums em {
  font-style: normal; font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: .1rem .38rem; border-radius: 7px; background: var(--surface-3); color: var(--muted);
}
.tl-nums em.over { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.tl-nums em.done { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }

/* ------------------------------------------------------------
   PANO (KANBAN)
   ------------------------------------------------------------ */
.tsk-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; align-items: start; }
@media (max-width: 1250px) { .tsk-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .tsk-board { grid-template-columns: 1fr; } }

.tcol {
  --tc: #64748b;
  background: var(--card); border: 1px solid var(--border); border-radius: 15px;
  box-shadow: var(--sh-sm); overflow: hidden; display: flex; flex-direction: column;
}
.tcol-warn { --tc: #d97706; } .tcol-info { --tc: #2563eb; }
.tcol-ok   { --tc: #16a34a; } .tcol-off  { --tc: #64748b; }
.tcol-h {
  display: flex; align-items: center; gap: .45rem;
  padding: .62rem .75rem; font-size: .83rem; color: var(--text);
  background: color-mix(in srgb, var(--tc) 9%, var(--card));
  border-bottom: 2px solid color-mix(in srgb, var(--tc) 55%, transparent);
}
.tcol-h svg { color: var(--tc); }
.tcol-h b { font-weight: 700; }
.tcol-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tc); flex-shrink: 0; }
.tcol-n {
  margin-left: auto; font-size: .74rem; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: .08rem .45rem; border-radius: 999px; color: #fff;
  background: color-mix(in srgb, var(--tc) 82%, #000);
}
.tcol-body {
  display: flex; flex-direction: column; gap: .5rem;
  padding: .6rem; min-height: 110px; max-height: 640px; overflow-y: auto;
  transition: background .15s, box-shadow .15s;
}
.tcol-body.is-over {
  background: color-mix(in srgb, var(--tc) 8%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc) 40%, transparent);
}
.tcol-empty {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 1.4rem .6rem; text-align: center; color: var(--muted); font-size: .78rem;
  border: 1px dashed var(--border); border-radius: 11px;
}
.tcol-empty svg { opacity: .5; }
/* Kolon sayfalama — pano listeye düşmeden kendi içinde gezinir */
.tcol-pgn {
  display: flex; align-items: center; gap: .35rem;
  padding: .4rem .5rem; border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.tcol-pgn .tp-b {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  text-decoration: none !important; transition: border-color .15s, color .15s, background .15s;
}
.tcol-pgn .tp-b:hover {
  border-color: var(--tc); color: var(--tc);
  background: color-mix(in srgb, var(--tc) 12%, transparent);
}
.tcol-pgn .tp-b.is-off { opacity: .32; pointer-events: none; }
.tcol-pgn .tp-info {
  flex: 1; min-width: 0; text-align: center; line-height: 1.2;
  font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.tcol-pgn .tp-info b { color: var(--text); font-weight: 700; }
.tcol-pgn .tp-info em { display: block; font-style: normal; font-size: .66rem; opacity: .85; }
.tsk-hint { margin: .6rem 0 0; font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: .35rem; }

/* --- Görev kartı (pano + gündem) --- */
.tcard {
  position: relative; display: flex; flex-direction: column; gap: .38rem;
  padding: .6rem .7rem .55rem .8rem; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--sh-sm); cursor: grab;
  transition: transform .14s, box-shadow .16s, opacity .16s;
}
.tcard::before {
  content: ''; position: absolute; left: 0; top: .55rem; bottom: .55rem; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--pc, #64748b);
}
.tcard:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.tcard[draggable="false"] { cursor: default; }
.tcard.is-dragging { opacity: .45; transform: rotate(-1.2deg) scale(.98); }
.tcard.is-saving { opacity: .6; pointer-events: none; }
.tcard.is-over::after {
  content: ''; position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent);
}
.tcard.is-closed { opacity: .72; }
.tcard.is-closed .tc-title { text-decoration: line-through; color: var(--muted); }

.tc-h { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.ttype {
  font-size: .68rem; font-weight: 600; color: var(--muted);
  padding: .1rem .4rem; border-radius: 6px; background: var(--surface-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%;
}
.tc-title {
  font-size: .855rem; font-weight: 600; line-height: 1.35; color: var(--text);
  text-decoration: none !important; overflow-wrap: anywhere;
}
.tc-title:hover { color: var(--primary); }
.tc-cust {
  display: inline-flex; align-items: center; gap: .28rem;
  font-size: .755rem; color: var(--muted); text-decoration: none !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-cust:hover { color: var(--primary); }
.tc-f {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  padding-top: .4rem; border-top: 1px solid var(--border);
}
.tdue {
  display: inline-flex; align-items: center; gap: .28rem;
  font-size: .745rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums;
}
.tdue.is-over { color: var(--danger); }
.tdue.is-now  { color: var(--warn); }
.tdue.is-soon { color: var(--warn); }
.tdue.is-none { font-style: italic; }
.tc-tail { display: inline-flex; align-items: center; gap: .3rem; }
.tc-tail form { display: inline-flex; }
.tc-notes { display: inline-flex; align-items: center; gap: .18rem; font-size: .72rem; color: var(--muted); }
.tc-done {
  display: grid; place-items: center; width: 25px; height: 25px; border: 0; cursor: pointer;
  border-radius: 8px; background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success);
  transition: transform .12s, background .15s;
}
.tc-done:hover { transform: scale(1.1); background: color-mix(in srgb, var(--success) 24%, transparent); }

/* ------------------------------------------------------------
   TAKVİM
   ------------------------------------------------------------ */
.tsk-cal {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--sh-sm); overflow: hidden; margin-bottom: 1rem;
}
.tcal-h {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
  padding: .75rem .9rem; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, transparent), transparent);
}
.tcal-nav { display: flex; align-items: center; gap: .5rem; }
.tcal-nav h2 { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; min-width: 9.5rem; text-align: center; }
.tcal-arrow {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
  transition: background .15s, color .15s, transform .12s;
}
.tcal-arrow:hover { background: var(--primary-light); color: var(--primary); transform: translateY(-1px); }
.tcal-tools { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.tcal-count { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--muted); }
.tcal-count b { color: var(--text); font-weight: 800; }
.tcal-goto { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--muted); }
.tcal-goto input { padding: .34rem .5rem; border-radius: 9px; font-size: .8rem; }

.tcal-legend { display: flex; flex-wrap: wrap; gap: .35rem .8rem; padding: .55rem .9rem; border-bottom: 1px solid var(--border); }
.tcal-legend .lg { display: inline-flex; align-items: center; gap: .3rem; font-size: .73rem; color: var(--muted); }
.tcal-legend .lg::before {
  content: ''; width: 9px; height: 9px; border-radius: 3px; background: var(--pc, #64748b);
}
.tcal-legend .lg.is-done::before { background: repeating-linear-gradient(45deg, #94a3b8 0 3px, transparent 3px 6px); }

.tcal-scroll { overflow-x: auto; }
.tcal-grid { width: 100%; min-width: 720px; border-collapse: collapse; table-layout: fixed; }
.tcal-grid th {
  padding: .45rem .3rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.tcal-cell {
  vertical-align: top; height: 108px; padding: 0;
  border: 1px solid var(--border); border-width: 0 1px 1px 0;
}
.tcal-cell:last-child { border-right: 0; }
.tcal-cell.is-blank { background: var(--surface-2); }
.tcal-cell.is-we { background: color-mix(in srgb, var(--muted) 4%, transparent); }
.tcal-day {
  display: flex; flex-direction: column; gap: .22rem; height: 100%;
  padding: .35rem .38rem; text-decoration: none !important; color: inherit;
  transition: background .14s;
}
.tcal-day:hover { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.tcd-h { display: flex; align-items: center; justify-content: space-between; gap: .3rem; }
.tcd-h b { font-size: .82rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.tcd-n {
  font-style: normal; font-size: .66rem; font-weight: 800; line-height: 1;
  padding: .16rem .34rem; border-radius: 999px; color: #fff;
  background: var(--pc, #64748b);
}
.tcal-cell.is-today .tcd-h b {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-grad); color: #fff;
}
.tcal-cell.is-sel { background: color-mix(in srgb, var(--primary) 10%, transparent); box-shadow: inset 0 0 0 2px var(--primary); }
.tcal-cell.is-over .tcd-h b { color: var(--danger); }

.tcd-list { display: flex; flex-direction: column; gap: .16rem; min-width: 0; }
.tcd-item {
  display: block; font-style: normal; font-size: .68rem; line-height: 1.3;
  padding: .12rem .3rem; border-radius: 5px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: color-mix(in srgb, var(--pc, #64748b) 82%, var(--text));
  background: color-mix(in srgb, var(--pc, #64748b) 12%, transparent);
  border-left: 2px solid var(--pc, #64748b);
}
.tcd-item em { font-style: normal; font-weight: 700; opacity: .8; margin-right: .18rem; }
.tcd-item.is-done { opacity: .55; text-decoration: line-through; }
.tcd-more { display: block; font-style: normal; font-size: .66rem; color: var(--muted); padding-left: .3rem; }

/* --- Gün gündemi --- */
.tsk-agenda {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--sh-sm); padding: .9rem; margin-bottom: 1rem;
}
.tag-h { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .75rem; }
.tag-h h3 { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-size: .98rem; font-weight: 800; }
.tag-n {
  font-size: .74rem; font-weight: 700; color: var(--muted);
  padding: .12rem .5rem; border-radius: 999px; background: var(--surface-2);
}
.tag-h .lbtn { margin-left: auto; }
.tag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: .55rem; }

/* ------------------------------------------------------------
   GÖREV KARTI (detay) — `.tdx`
   ------------------------------------------------------------ */
.tdx-badge {
  display: grid; place-items: center; flex-shrink: 0; width: 54px; height: 54px;
  border-radius: 16px; font-size: 1.4rem; font-weight: 900; color: #fff;
  background: linear-gradient(140deg, var(--pc, #64748b), color-mix(in srgb, var(--pc, #64748b) 65%, #000));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--pc, #64748b) 34%, transparent);
}
.tdx-badge.is-closed { filter: grayscale(.55); opacity: .8; }
.tdx-state { font-weight: 700; }
.tdx-state.s-warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: color-mix(in srgb, var(--warn) 76%, #000); }
.tdx-state.s-info { background: color-mix(in srgb, var(--info) 16%, transparent); color: color-mix(in srgb, var(--info) 76%, #000); }
.tdx-state.s-ok   { background: color-mix(in srgb, var(--success) 16%, transparent); color: color-mix(in srgb, var(--success) 76%, #000); }
.tdx-state.s-off  { background: var(--surface-3); color: var(--muted); }
.tdx-prio {
  background: color-mix(in srgb, var(--pc, #64748b) 13%, transparent);
  color: color-mix(in srgb, var(--pc, #64748b) 78%, #000);
}
.tdx .lstat.ok   { background: color-mix(in srgb, var(--success) 13%, transparent); color: color-mix(in srgb, var(--success) 74%, #000); }
.tdx .lstat.warn { background: color-mix(in srgb, var(--warn) 15%, transparent);    color: color-mix(in srgb, var(--warn) 74%, #000); }
.tdx .lstat.info { background: color-mix(in srgb, var(--info) 14%, transparent);    color: color-mix(in srgb, var(--info) 74%, #000); }
.tdx .lstat.off  { background: var(--surface-3); color: var(--muted); }

.pdx-banner.b-ok   { --bnc: #16a34a; }
.pdx-banner.b-over { --bnc: #dc2626; }
.pdx-banner .is-ontime { color: var(--success); }
.pdx-banner .is-late   { color: var(--danger); }

/* Üst şerit düğme renkleri (müşteri kartındaki paletle aynı mantık) */
.tdx .lbtn.a-done   { --bc: #16a34a; }
.tdx .lbtn.a-start  { --bc: #2563eb; }
.tdx .lbtn.a-snooze { --bc: #d97706; }
.tdx .lbtn.a-note   { --bc: #7c3aed; }
.tdx .lbtn.a-cust   { --bc: #0891b2; }

/* Erteleme menüsü */
.tdx-snooze { position: relative; display: inline-flex; }
.tdx-snooze-menu {
  position: absolute; top: calc(100% + .35rem); left: 0; z-index: 40; min-width: 12rem;
  display: flex; flex-direction: column; padding: .3rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--sh-lg);
}
.tdx-snooze-menu button {
  display: flex; align-items: center; gap: .45rem; width: 100%; text-align: left;
  padding: .42rem .55rem; border: 0; border-radius: 8px; cursor: pointer;
  font-size: .82rem; color: var(--text); background: transparent;
}
.tdx-snooze-menu button:hover { background: var(--surface-2); color: var(--primary); }

.tdx-desc {
  font-size: .875rem; line-height: 1.6; color: var(--text);
  padding: .7rem .8rem; border-radius: 11px; background: var(--surface-2);
  border-left: 3px solid var(--primary); margin-bottom: .85rem; overflow-wrap: anywhere;
}
.tdx-desc.is-empty { color: var(--muted); font-style: italic; border-left-color: var(--border); }
.tdx-dl { grid-template-columns: 116px 1fr; }

.tdx-empty {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: 1.3rem .6rem; text-align: center; color: var(--muted); font-size: .8rem;
  border: 1px dashed var(--border); border-radius: 12px;
}
.tdx-empty svg { opacity: .5; }

/* --- Taksit kartı --- */
.tdx-inst { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .7rem; }
.tdx-inst-box {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .55rem .65rem; border-radius: 11px; background: var(--surface-2);
  border-left: 3px solid #2563eb;
}
.tdx-inst-box.is-total { border-left-color: #16a34a; }
.tdx-inst-box em { font-style: normal; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tdx-inst-box b { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tdx-chain { margin-top: .8rem; display: flex; flex-direction: column; gap: .25rem; }
.tdx-chain-row {
  --sc: #64748b;
  display: flex; align-items: center; gap: .45rem; min-width: 0;
  padding: .35rem .5rem; border-radius: 9px; font-size: .78rem;
  text-decoration: none !important; color: var(--text); background: var(--surface-2);
}
.tdx-chain-row:hover { background: var(--surface-3); }
.tdx-chain-row.is-cur { box-shadow: inset 0 0 0 1px var(--primary); }
.tdx-chain-row.s-ok { --sc: #16a34a; } .tdx-chain-row.s-warn { --sc: #d97706; }
.tdx-chain-row.s-info { --sc: #2563eb; } .tdx-chain-row.s-off { --sc: #64748b; }
.tcr-ico { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 6px; flex-shrink: 0;
  background: color-mix(in srgb, var(--sc) 16%, transparent); color: var(--sc); }
.tcr-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcr-d { flex-shrink: 0; font-size: .73rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- Notlar --- */
.tdx-noteform { margin-bottom: .9rem; }
.tdx-noteform textarea { width: 100%; }
.tdx-noteform-a { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; }
.tdx-noteform-a .la-hint { flex: 1 1 auto; }
.tdx-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.tdx-note { display: flex; gap: .55rem; min-width: 0; }
.tn-av {
  display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px;
  border-radius: 50%; font-size: .76rem; font-weight: 800; color: #fff; background: var(--brand-grad);
}
.tn-main { flex: 1 1 auto; min-width: 0; padding: .5rem .65rem; border-radius: 11px; background: var(--surface-2); }
.tn-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .25rem; }
.tn-head b { font-size: .8rem; font-weight: 700; }
.tn-head > span { font-size: .72rem; color: var(--muted); }
.tn-act { margin-left: auto; display: inline-flex; align-items: center; gap: .25rem; opacity: 0; transition: opacity .15s; }
.tdx-note:hover .tn-act, .tn-act:focus-within { opacity: 1; }
.tn-body { margin: 0; font-size: .835rem; line-height: 1.55; overflow-wrap: anywhere; }
.tn-edit { margin-top: .4rem; }
.tn-edit textarea { width: 100%; }
.tn-edit-a { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .4rem; }
.tdx-notes.is-deleted .tn-main { background: transparent; border: 1px dashed var(--border); }
.tdx-notes.is-deleted .tn-body { color: var(--muted); }
.tdx-notes.is-deleted .tn-av { background: var(--surface-3); color: var(--muted); }
.tdx-deleted { margin-top: .8rem; }
.tdx-deleted summary {
  cursor: pointer; font-size: .78rem; color: var(--muted);
  display: inline-flex; align-items: center; gap: .35rem; padding: .25rem 0;
}
.tdx-deleted summary:hover { color: var(--text); }
.tdx-deleted[open] summary { margin-bottom: .5rem; }

/* --- Değişiklik günlüğü --- */
.tdx-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.tlog { --lc: #64748b; display: flex; gap: .5rem; min-width: 0; }
.tlog.l-create { --lc: #16a34a; } .tlog.l-update { --lc: #2563eb; }
.tlog.l-delete { --lc: #dc2626; } .tlog.l-note   { --lc: #7c3aed; }
.tlog.l-share  { --lc: #0891b2; } .tlog.l-other  { --lc: #64748b; }
.tlog-ico {
  display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; margin-top: .1rem;
  border-radius: 7px; background: color-mix(in srgb, var(--lc) 15%, transparent); color: var(--lc);
}
.tlog > div { min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.tlog b { font-size: .8rem; font-weight: 600; }
.tlog-detail { font-size: .755rem; color: var(--text); opacity: .85; overflow-wrap: anywhere; }
.tlog-meta { font-size: .705rem; color: var(--muted); }

/* ------------------------------------------------------------
   GÖREV FORMU — `.tfrm`
   ------------------------------------------------------------ */
.tfrm-prio { display: flex; gap: .3rem; flex-wrap: wrap; }
.tfp { position: relative; flex: 1 1 auto; min-width: 3.6rem; cursor: pointer; }
.tfp input { position: absolute; opacity: 0; width: 0; height: 0; }
.tfp span {
  display: block; text-align: center; padding: .44rem .3rem; border-radius: 10px;
  font-size: .78rem; font-weight: 600; color: var(--muted);
  background: var(--surface-2); border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.tfp:hover span { transform: translateY(-1px); color: color-mix(in srgb, var(--pc) 78%, var(--text)); }
.tfp input:checked + span {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--pc), color-mix(in srgb, var(--pc) 70%, #000));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--pc) 34%, transparent);
}
.tfp input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

.tfrm-quick { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-top: .85rem; }
.tfq-lead { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; color: var(--muted); margin-right: .2rem; }
.tfq {
  padding: .32rem .6rem; border-radius: 9px; cursor: pointer;
  font-size: .765rem; font-weight: 600; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: background .15s, color .15s, transform .12s;
}
.tfq:hover { transform: translateY(-1px); color: var(--primary); border-color: var(--primary); }
.tfq.on { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
.cf-field.cf-check { display: flex; align-items: flex-end; }

/* ------------------------------------------------------------
   BİLDİRİM ŞERİDİ (pano sürükle-bırak geri bildirimi)
   ------------------------------------------------------------ */
.tsk-toast {
  position: fixed; left: 50%; bottom: 1.4rem; z-index: 3000;
  transform: translate(-50%, 1rem); opacity: 0;
  padding: .6rem 1rem; border-radius: 11px; max-width: min(90vw, 26rem);
  font-size: .84rem; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #16a34a, #15803d); box-shadow: var(--sh-lg);
  transition: transform .24s ease, opacity .24s ease;
}
.tsk-toast.is-err { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.tsk-toast.on { transform: translate(-50%, 0); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tsk-toast { transition: none; } }

/* ============================================================
   GÖREVLERİM — KOYU TEMA
   Aydınlık temada okunurluk `color-mix(..., #000)` ile sağlanıyor;
   koyu zeminde aynı karışım okunmaz olduğu için beyaza çevrilir.
   ============================================================ */
html[data-theme="dark"] .tprio { color: color-mix(in srgb, var(--pc) 62%, #fff); border-color: color-mix(in srgb, var(--pc) 40%, transparent); }
html[data-theme="dark"] .ltag.t-type,
html[data-theme="dark"] .ltag.t-camp,
html[data-theme="dark"] .ltag.t-rec { color: color-mix(in srgb, var(--ltc) 55%, #fff); }
html[data-theme="dark"] .tfocus { background: color-mix(in srgb, var(--fc) 14%, var(--card)); color: color-mix(in srgb, var(--fc) 45%, #fff); }
html[data-theme="dark"] .tfocus:hover { color: color-mix(in srgb, var(--fc) 25%, #fff); }
html[data-theme="dark"] .tsk-load,
html[data-theme="dark"] .tcol,
html[data-theme="dark"] .tcard,
html[data-theme="dark"] .tsk-cal,
html[data-theme="dark"] .tsk-agenda,
html[data-theme="dark"] .tdx-snooze-menu { background: var(--card); border-color: var(--border); }
html[data-theme="dark"] .tload,
html[data-theme="dark"] .tn-main,
html[data-theme="dark"] .tdx-desc,
html[data-theme="dark"] .tdx-inst-box,
html[data-theme="dark"] .tdx-chain-row,
html[data-theme="dark"] .ttype,
html[data-theme="dark"] .tfq,
html[data-theme="dark"] .tfp span,
html[data-theme="dark"] .tcol-pgn { background: var(--surface-2); }
html[data-theme="dark"] .tcal-grid th { background: var(--surface-2); color: var(--muted); }
html[data-theme="dark"] .tcal-cell.is-blank { background: var(--surface-2); }
html[data-theme="dark"] .tcal-cell.is-we { background: color-mix(in srgb, #ffffff 3%, transparent); }
html[data-theme="dark"] .tcd-item { color: color-mix(in srgb, var(--pc) 45%, #fff); background: color-mix(in srgb, var(--pc) 20%, transparent); }
html[data-theme="dark"] .tdx-state.s-warn { color: color-mix(in srgb, var(--warn) 55%, #fff); }
html[data-theme="dark"] .tdx-state.s-info { color: color-mix(in srgb, var(--info) 55%, #fff); }
html[data-theme="dark"] .tdx-state.s-ok   { color: color-mix(in srgb, var(--success) 55%, #fff); }
html[data-theme="dark"] .tdx-prio { color: color-mix(in srgb, var(--pc) 55%, #fff); }
html[data-theme="dark"] .tdx .lstat.ok   { color: color-mix(in srgb, var(--success) 55%, #fff); }
html[data-theme="dark"] .tdx .lstat.warn { color: color-mix(in srgb, var(--warn) 55%, #fff); }
html[data-theme="dark"] .tdx .lstat.info { color: color-mix(in srgb, var(--info) 55%, #fff); }
html[data-theme="dark"] .tcol-h { background: color-mix(in srgb, var(--tc) 14%, var(--card)); }
html[data-theme="dark"] .tcol-n { background: color-mix(in srgb, var(--tc) 70%, #000); }
html[data-theme="dark"] .tsk-toast { color: #06210f; }
html[data-theme="dark"] .tsk-toast.is-err { color: #ffe4e4; }

/* KPI kartı başlığı: "Zamanında Bitirme" gibi uzun etiketler delta rozetiyle
   aynı satırda sıkışıp kırpılıyordu — göreve özgü kartlarda etiket sarılır. */
.tsk .lst-kpis .stat-cap { white-space: normal; overflow: visible; line-height: 1.25; overflow-wrap: anywhere; }
.tsk .lst-kpis .sec-head { align-items: flex-start; flex-wrap: wrap; row-gap: .3rem; }
.tsk .lst-kpis .sec-t { flex: 1 1 7.5rem; }
.tsk .lst-kpis .delta { margin-top: .1rem; }

/* ------------------------------------------------------------
   GÖREVLERİM — AYDINLIK TEMA KONTRAST DÜZELTMELERİ
   Ölçüm (geçiş animasyonları kapalı, beyaz/siyah çiftinde 21:1 ile
   doğrulanmış çözücü): odak çipi 4.28, öncelik rozeti 4.31,
   kapsam bağlantısı 4.32, iş yükü sayaçları 2.63 — hepsi AA
   sınırının (4.5) altındaydı. Renk kimliği korunarak yalnız yazı
   tonu koyulaştırıldı; koyu temada parlak tonlar aynen kalır.
   ------------------------------------------------------------ */
html[data-theme="light"] .tfocus { color: color-mix(in srgb, var(--fc) 62%, #000); }
html[data-theme="light"] .tfocus:hover { color: color-mix(in srgb, var(--fc) 52%, #000); }
html[data-theme="light"] .tprio { color: color-mix(in srgb, var(--pc) 66%, #000); }
html[data-theme="light"] .tdx-prio { color: color-mix(in srgb, var(--pc) 66%, #000); }
html[data-theme="light"] .tscope { color: var(--label); }
html[data-theme="light"] .tl-nums em { color: var(--label); }
html[data-theme="light"] .tl-nums em.over { color: #b91c1c; }
html[data-theme="light"] .tl-nums em.done { color: #15803d; }
html[data-theme="light"] .tsk .lt-date b.is-now,
html[data-theme="light"] .tsk .lt-date b.is-soon,
html[data-theme="light"] .tdue.is-now,
html[data-theme="light"] .tdue.is-soon { color: #92400e; }
html[data-theme="light"] .tdx-state.s-warn { color: #92400e; }
html[data-theme="light"] .tdx-state.s-info { color: #0e7490; }
html[data-theme="light"] .tdx-state.s-ok   { color: #15803d; }
html[data-theme="light"] .tdx .lstat.warn { color: #92400e; }
html[data-theme="light"] .tdx .lstat.info { color: #0e7490; }
html[data-theme="light"] .tdx .lstat.ok   { color: #15803d; }
html[data-theme="light"] .tcd-item { color: color-mix(in srgb, var(--pc) 70%, #000); }
html[data-theme="light"] .ltag.t-type,
html[data-theme="light"] .ltag.t-camp,
html[data-theme="light"] .ltag.t-rec { color: color-mix(in srgb, var(--ltc) 68%, #000); }
html[data-theme="light"] .tcol-pgn .tp-info,
html[data-theme="light"] .tsk-hint,
html[data-theme="light"] .tcal-count,
html[data-theme="light"] .tcal-goto,
html[data-theme="light"] .tlog-meta,
html[data-theme="light"] .tn-head > span { color: var(--label); }

/* Aktif odak çipi beyaz yazıyla dolu gradyan üzerindedir; yukarıdaki
   aydınlık tema koyulaştırması onu da ezip 1.78:1e düşürüyordu. */
html[data-theme="light"] .tfocus.on { color: #fff; }
html[data-theme="light"] .tl-nums em.done { color: #166534; }
html[data-theme="light"] .tsk .lt-date b.is-over,
html[data-theme="light"] .tdue.is-over { color: #b91c1c; }

/* Görev kartındaki uzun listeler satır yüksekliğini şişirmesin:
   günlük ve "diğer görevler" kendi içinde kaydırılır, notlar tam görünür. */
.tdx .tdx-log { max-height: 430px; overflow-y: auto; padding-right: .25rem; }
.tdx .mini-list { max-height: 380px; overflow-y: auto; }

/* ============================================================
   GÖREVLERİM — 2. TUR DÜZELTMELERİ
   1) Liste/pano üstünde mini takvim (sağ üst)
   2) Görev kartında panellerin daha verimli yerleşimi
   ============================================================ */

/* --- Üst bant: KPI kartları + mini takvim --- */
.tsk-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; align-items: start; }
.tsk-top.has-cal { grid-template-columns: minmax(0, 1fr) 258px; }
.tsk-top > .lst-kpis { margin-bottom: 0; }
/* 5 KPI kartı mini takvimin yanında da tek satırda kalsın: 1300 px'e kadar
   sığıyor, altında takvim KPI'ların altına iner (yarım satır bırakmamak için). */
.tsk-top.has-cal > .lst-kpis { grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); }
@media (max-width: 1300px) {
  .tsk-top.has-cal { grid-template-columns: minmax(0, 1fr); }
  .tsk-top.has-cal .tsk-mini { max-width: 420px; }
}

/* --- Mini takvim --- */
.tsk-mini {
  background: var(--card); border: 1px solid var(--border); border-radius: 15px;
  box-shadow: var(--sh-sm); overflow: hidden; align-self: stretch;
  display: flex; flex-direction: column;
}
.tmini-h {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  padding: .5rem .55rem; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, transparent), transparent);
}
.tmini-h b { font-size: .84rem; font-weight: 700; letter-spacing: -.01em; }
.tmini-arrow {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px;
  color: var(--muted); background: var(--surface-2); flex-shrink: 0;
  transition: background .15s, color .15s;
}
.tmini-arrow:hover { background: var(--primary-light); color: var(--primary); }

.tmini-grid { width: 100%; border-collapse: collapse; table-layout: fixed; flex: 1 1 auto; }
.tmini-grid th {
  padding: .3rem 0 .18rem; font-size: .64rem; font-weight: 700; letter-spacing: .04em;
  color: var(--label, var(--muted)); text-transform: uppercase;
}
.tmini-grid th abbr { text-decoration: none; border: 0; cursor: default; }
.tmini-cell { padding: 1px; text-align: center; }
.tmini-cell.is-blank { }
.tmini-day {
  position: relative; display: grid; place-items: center;
  width: 100%; aspect-ratio: 1 / 1; max-height: 34px;
  border-radius: 8px; font-size: .74rem; font-weight: 600; line-height: 1;
  color: var(--muted); text-decoration: none !important;
  transition: background .14s, color .14s, transform .12s;
}
.tmini-day:hover { background: var(--surface-3); color: var(--text); transform: translateY(-1px); }
.tmini-cell.has .tmini-day {
  color: color-mix(in srgb, var(--pc, #64748b) 78%, #000);
  background: color-mix(in srgb, var(--pc, #64748b) 13%, transparent);
  font-weight: 700;
}
.tmini-cell.has .tmini-day:hover { background: color-mix(in srgb, var(--pc, #64748b) 24%, transparent); }
.tmini-cell.is-over .tmini-day { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent); }
.tmini-cell.is-today .tmini-day { outline: 2px solid var(--primary); outline-offset: -2px; }
.tmini-n {
  position: absolute; top: -2px; right: -2px;
  font-style: normal; font-size: .55rem; font-weight: 800; line-height: 1;
  min-width: 13px; padding: 2px 3px; border-radius: 999px;
  background: var(--pc, #64748b); color: #fff;
}
.tmini-f {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  padding: .45rem .55rem; border-top: 1px solid var(--border);
  font-size: .72rem; color: var(--muted);
}
.tmini-f b { color: var(--text); font-weight: 800; }
.tmini-f b.is-over { color: var(--danger); }
.tmini-f a { display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; }

/* --- Görev kartı: panelleri sıkıştır --- */
/* Kartlar satır yüksekliğine gerilmesin; kısa kart boşluk bırakmasın. */
.tdx .cd-grid { align-items: start; }
.tdx .cdc-body { padding: .7rem .8rem; }
.tdx .tdx-desc { padding: .55rem .7rem; margin-bottom: .65rem; font-size: .845rem; line-height: 1.5; }
.tdx .cdx-dl { gap: .26rem .6rem; font-size: .81rem; }
.tdx .tdx-dl { grid-template-columns: 104px 1fr; }
/* Müşteri kartı: künye + eylemler tek blok, aradaki boşluk kapanır */
.tdx .pdx-cust { margin-bottom: .55rem; }
.tdx .pdx-cust-acts { flex-wrap: wrap; gap: .35rem; }
.tdx .pdx-cust-acts .lbtn { padding: .32rem .6rem; font-size: .765rem; }
/* Not defteri: yazma alanı daha küçük başlar, notlar öne çıkar */
.tdx .tdx-noteform { margin-bottom: .7rem; }
.tdx .tdx-noteform textarea { min-height: 62px; }
.tdx .tdx-notes { gap: .45rem; }
.tdx .tn-main { padding: .45rem .6rem; }
.tdx .tdx-log { gap: .38rem; max-height: 360px; }
.tdx .mini-list { max-height: 300px; }
.tdx .tdx-empty { padding: .95rem .6rem; }
/* İlerleme şeridi ve KPI'lar arasındaki boşluk daraltıldı */
.tdx .cdx-kpis { margin-bottom: .7rem; }
.tdx .pdx-term { margin-bottom: .8rem; }

/* Erteleme menüsü: üstteki düğmelerin üzerine binmesin */
.tdx-snooze-menu { z-index: 60; }
/* KRİTİK: `.tdx-snooze-menu { display:flex }` yazar stili, tarayıcının
   `[hidden] { display:none }` kuralını ezdiği için menü sayfa açılışında
   HER ZAMAN görünüyordu. JS `hidden` özelliğini doğru çeviriyordu ama
   görsel bir etkisi olmuyordu — gizleme kuralı burada geri veriliyor. */
.tdx-snooze-menu[hidden] { display: none; }
@media (max-width: 620px) { .tdx-snooze-menu { left: auto; right: 0; } }

/* --- Koyu tema --- */
html[data-theme="dark"] .tsk-mini { background: var(--card); border-color: var(--border); }
html[data-theme="dark"] .tmini-arrow { background: var(--surface-2); }
html[data-theme="dark"] .tmini-day:hover { background: var(--surface-3); }
html[data-theme="dark"] .tmini-cell.has .tmini-day { color: color-mix(in srgb, var(--pc) 48%, #fff); }
html[data-theme="light"] .tmini-cell.has .tmini-day { color: color-mix(in srgb, var(--pc) 66%, #000); }

/* Görev kartı: sabit kolon düzeni yerine eşit ağırlıklı esnek akış.
   Yer varsa dört kart da aynı satırda durur; daralınca alt satıra iner ve
   son satırdakiler genişleyip satırı tamamlar — yarım satır kalmaz.
   Her kart kendi container'ıdır: içindeki kutucuk ızgarası kartın
   genişliğine göre bölünür (sayfa genişliğine değil). */
.tdx .tdx-cards { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-start; }
.tdx .tdx-cards > .cd-card {
  flex: 1 1 260px; min-width: 0;
  container-type: inline-size; container-name: tcd;
}

/* Mini takvim gün sayacı: turuncu/gri zeminde beyaz yazı 3.56:1 ölçüldü
   (küçük punto → AA sınırı 4.5). Rozet zemini koyulaştırılıyor. */
.tmini-n { background: color-mix(in srgb, var(--pc, #64748b) 74%, #000); }

/* ============================================================
   GÖREV KARTI — YOĞUNLUK VE CONTAINER-QUERY DÜZENİ
   ------------------------------------------------------------
   İki sorun çözülüyor:
   1) Ölü boşluk — KPI şeridi 8 kolonluk sabit ızgaradaydı (6 kart →
      2 kolon boş), etiket/değer listesi ise iki kolonda kalıp geniş
      kartın sağında ~1.000 px boş bırakıyordu.
   2) Modal içinde responsive değildi — medya sorguları modalin değil
      EKRANIN genişliğini ölçtüğü için 1.050 px'lik modalde masaüstü
      yerleşimi uygulanıyor, KPI değerleri "31...." diye kırpılıyordu.
      Kök artık bir container; tüm kırılmalar `@container` ile.
   ============================================================ */

/* İki ad birden: görev kartına özel `@container tdx` sorguları çalışmaya
   devam ederken, tüm detay kartlarının paylaştığı `cdx` sorguları da
   (bkz. dosya sonundaki "DETAY KARTLARI — KAPSAYICI DÜZENİ") geçerli olur. */
.tdx { container-type: inline-size; container-name: tdx cdx; }

/* --- KPI şeridi: sabit 8 kolon yerine kartın genişliğine göre --- */
.tdx .cdx-kpis { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: .55rem; }
.tdx .cdx-kpi { padding: .6rem .7rem; gap: .55rem; }
.tdx .cdx-kpi-ico { width: 32px; height: 32px; border-radius: 10px; }
.tdx .cdx-kpi-ico svg { width: 16px; height: 16px; }
.tdx .cdx-kpi-txt b { font-size: 1rem; }

/* --- Etiket/değer kutucukları (Görev Detayı) --- */
/* Izgara yerine esnek sarma: 8 kutucuk 5 kolonlu ızgarada son satırda
   584 px boşluk bırakıyordu; flex ile son satırdaki kutular genişleyip
   satırı tamamlıyor — hiçbir genişlikte tırtıklı kenar kalmıyor. */
.tdx-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; }
.tdx-meta > .tmeta { flex: 1 1 158px; }
.tmeta {
  display: flex; flex-direction: column; gap: .15rem; min-width: 0;
  padding: .42rem .55rem; border-radius: 10px;
  background: var(--surface-2); border-left: 2px solid var(--border);
}
.tmeta dt {
  font-size: .655rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase;
  color: var(--label, var(--muted));
}
.tmeta dd { margin: 0; font-size: .835rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.tmeta.is-soft dd { font-weight: 500; color: var(--muted); font-size: .8rem; }
.tmeta.is-over { border-left-color: var(--danger); }
.tmeta.is-over dd { color: var(--danger); }
.tmeta .lstat, .tmeta .tprio { font-size: .715rem; }

/* --- Not defteri: boş durum tek satır, form kompakt --- */
.tdx-none {
  display: flex; align-items: center; gap: .35rem; margin: 0;
  font-size: .79rem; color: var(--muted);
}
.tdx-none svg { opacity: .6; }
.tdx .tdx-noteform textarea { min-height: 58px; }

/* --- Açıklama bloğu: boşken ince bir satır --- */
.tdx .tdx-desc.is-empty { padding: .4rem .6rem; font-size: .8rem; margin-bottom: .6rem; }

/* --- Üst eylem şeridi: dar kapsayıcıda düzgün sarsın --- */
.tdx .cdx-actions { flex-wrap: wrap; row-gap: .4rem; }

/* ------------------------------------------------------------
   KIRILMA NOKTALARI — kapsayıcı genişliğine göre
   (sayfa genişliği değil; modal içinde de doğru çalışır)
   ------------------------------------------------------------ */
@container tdx (max-width: 560px) {
  /* Çok dar kapsayıcıda her kart tam satır kaplar */
  .tdx .tdx-cards > .cd-card { flex: 1 1 100%; }
}
@container tdx (max-width: 860px) {
  .tdx .cdx-hero { flex-direction: column; align-items: stretch; gap: .7rem; }
  .tdx .cdx-actions { align-self: stretch; }
  .tdx-meta { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
@container tdx (max-width: 620px) {
  .tdx .cdx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tdx .cdx-kpi-txt b { white-space: normal; }
  .tdx .tdx-inst { grid-template-columns: 1fr; }
  .tdx .cdx-identity { gap: .6rem; }
  .tdx .tdx-badge { width: 42px; height: 42px; font-size: 1.1rem; border-radius: 13px; }
  .tdx .tdx-snooze-menu { left: auto; right: 0; }
}
@container tdx (max-width: 400px) {
  .tdx-meta { grid-template-columns: 1fr; }
  .tdx .cdx-kpis { grid-template-columns: 1fr; }
  .tdx .cdx-actions .lbtn { flex: 1 1 auto; justify-content: center; }
}

/* Container query desteklemeyen tarayıcılar için görüntü penceresi
   tabanlı yedek (modalde çalışmaz ama sayfa yine bozulmaz) */
@supports not (container-type: inline-size) {
  @media (max-width: 760px) { .tdx .tdx-cards > .cd-card { flex: 1 1 100%; } }
  @media (max-width: 620px)  { .tdx .cdx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
}

/* Modal kabuğu: görev kartı modalde kenar boşluklarını yemesin */
.mdl-body .tdx .cdx-hero { padding: .85rem 1rem; }
.mdl-body .tdx .cdx-kpis { margin-bottom: .6rem; }

/* --- Koyu tema --- */
html[data-theme="dark"] .tmeta { background: var(--surface-2); border-left-color: var(--border); }
html[data-theme="dark"] .tmeta.is-over { border-left-color: var(--danger); }

/* Üst eylem şeridi dar kapsayıcıda tek satırda kalsın: ikincil düğmeler
   (Düzenle · Not Ekle · Müşteri Kartı · İptal · Sil · Liste) etiketlerini
   bırakıp ikon düğmesine dönüşür. Şerit sarmadığı için "Ertele" menüsü de
   artık alt satırdaki düğmelerin üzerine binmiyor. */
.tdx .cdx-actions .lbtn { gap: .38rem; }
/* Etiketler görünür: şerit artık sağ üstte kendi içinde sardığı için
   ikon-tek düğmeye inmeye gerek kalmadı — görev kartı da müşteri/poliçe
   kartıyla aynı dili konuşuyor. Yalnız çok dar kapsayıcıda gizlenir. */
@container tdx (max-width: 420px) {
  .tdx .cdx-actions .lb-t {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
.tdx .cdx-actions .lbtn.a-edit,
.tdx .cdx-actions .lbtn.a-note,
.tdx .cdx-actions .lbtn.a-cust,
.tdx .cdx-actions .lbtn.a-cancel,
.tdx .cdx-actions .lbtn.a-del,
.tdx .cdx-actions .lbtn.a-list { padding-inline: .58rem; }
@container tdx (max-width: 560px) {
  /* Çok darda iş akışı düğmeleri de kısalır; menü sağa yaslanır */
  .tdx .cdx-actions { gap: .3rem; }
  .tdx .cdx-actions .lbtn { padding-inline: .5rem; font-size: .78rem; }
}
.tdx .cdx-actions { align-items: center; }
.tdx .cdx-actions > form { display: inline-flex; align-items: center; }

/* Aydınlık temada --muted (#64748b) yumuşak yüzey (#f5f8fc) üzerinde
   4.47:1 ölçüldü (AA sınırı 4.5) — ikincil metinler --label tonuna alınır. */
html[data-theme="light"] .tmeta.is-soft dd,
html[data-theme="light"] .tdx-desc.is-empty,
html[data-theme="light"] .tdx-none { color: var(--label); }
/* İkon düğmeleri etiketli düğmelerle aynı yükseklikte olsun (31.7 → 35.4) */
.tdx .cdx-actions .lbtn { min-height: 35px; }

/* ============================================================
   GÖREV KARTI — 4. TUR: künye rozetleri, ipucu ölçeklenmesi,
   gizlenebilir bileşenlerin `[hidden]` güvencesi
   ============================================================ */

/* --- Künye rozetleri (müşteri · telefon · poliçe · sorumlu · son tarih) --- */
.tdx-idbar { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.tbdg {
  --bg: #64748b;
  display: inline-flex; align-items: center; gap: .34rem; min-width: 0;
  padding: .24rem .58rem; border-radius: 999px;
  font-size: .765rem; line-height: 1.4; text-decoration: none !important;
  background: color-mix(in srgb, var(--bg) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--bg) 26%, transparent);
  color: color-mix(in srgb, var(--bg) 74%, var(--text));
  transition: background .15s, border-color .15s, transform .12s;
}
a.tbdg:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--bg) 20%, transparent); }
.tbdg svg { color: var(--bg); flex-shrink: 0; }
.tbdg em {
  font-style: normal; font-size: .655rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; opacity: .78; flex-shrink: 0;
}
.tbdg b { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbdg.b-cust   { --bg: #2563eb; }
.tbdg.b-phone  { --bg: #0d9488; }
.tbdg.b-policy { --bg: #7c3aed; }
.tbdg.b-rep    { --bg: #0891b2; }
.tbdg.b-due    { --bg: #64748b; }
.tbdg.b-due.is-over { --bg: #dc2626; }
.tbdg.b-due.is-over b { color: var(--danger); }
.tbdg.b-due.is-now  { --bg: #d97706; }
.tbdg.b-none   { --bg: #94a3b8; }

/* --- Not ipucu: her yazı boyunda taşmadan sarsın --- */
.tdx-noteform-a { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.tdx-hint {
  display: flex; align-items: flex-start; gap: .35rem; margin: 0;
  flex: 1 1 16rem; min-width: 0;
  font-size: clamp(.72rem, .5rem + .35vw, .8rem); line-height: 1.45; color: var(--muted);
}
.tdx-hint svg { flex-shrink: 0; margin-top: .12rem; opacity: .75; }
.tdx-hint span { min-width: 0; overflow-wrap: anywhere; }
.tdx-noteform-a .btn { flex: 0 0 auto; margin-left: auto; }

/* --- `hidden` özniteliği yazar `display` kuralları tarafından ezilmesin --- */
.tdx-notes[hidden], .tdx-none[hidden], .tn-edit[hidden],
.tcol-empty[hidden], .tdx-snooze-menu[hidden] { display: none !important; }

/* --- AJAX ile eklenen not kısa bir vurguyla belirir --- */
@keyframes tdx-note-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.tdx-note.is-new { animation: tdx-note-in .28s ease-out; }
.tdx-note.is-new .tn-main { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent); }
@media (prefers-reduced-motion: reduce) { .tdx-note.is-new { animation: none; } }
.tdx-noteform.is-busy { opacity: .6; pointer-events: none; }

/* --- Koyu tema --- */
html[data-theme="dark"] .tbdg { color: color-mix(in srgb, var(--bg) 42%, #fff); }
html[data-theme="dark"] .tbdg b { color: #e6edf6; }
html[data-theme="light"] .tbdg { color: color-mix(in srgb, var(--bg) 66%, #000); }

/* ------------------------------------------------------------
   GÖREV KARTI — 5. TUR DÜZELTMELERİ
   ------------------------------------------------------------ */

/* Ertele menüsünün son maddesi kesiliyordu: `.dash-hero { overflow:hidden }`
   mutlak konumlu menüyü kırpıyor. Görev kartında hero taşmaya izin verir;
   sol aksan çizgisi kendi yuvarlatmasını alarak köşeden taşmaz. */
.tdx .cdx-hero { overflow: visible; }
.tdx .cdx-hero::before { border-radius: 16px 0 0 16px; }
.tdx-snooze-menu { max-height: min(60vh, 20rem); overflow-y: auto; }

/* Künye rozetlerine eklenen iletişim eylemleri */
.tbdg.b-wa   { --bg: #25d366; }
.tbdg.b-mail { --bg: #4f46e5; }
.tbdg.b-city { --bg: #64748b; }
html[data-theme="light"] .tbdg.b-wa { color: #0f7a3d; }

/* Not alanına odaklanınca kısa bir vurgu (üstteki "Not Ekle" düğmesinden) */
.tdx-noteform textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.cd-card.is-flash { animation: tdx-flash 1.1s ease-out; }
@keyframes tdx-flash {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 55%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}
@media (prefers-reduced-motion: reduce) { .cd-card.is-flash { animation: none; } }

/* Kutucuklar kartın kendi genişliğine göre bölünür: dar kartta ikişerli,
   çok darda tekli. (Taban kural dosyada daha sonra geldiği için bu container
   kuralları en sona alındı — aynı özgüllükte son yazılan kazanıyor.) */
@container tcd (max-width: 340px) { .tdx-meta > .tmeta { flex: 1 1 44%; } }
@container tcd (max-width: 210px) { .tdx-meta > .tmeta { flex: 1 1 100%; } }
@container tcd (max-width: 300px) { .tdx .tdx-inst { grid-template-columns: 1fr; } }
/* Gecikme rozetinde --danger (#dc2626) kendi %12 tonlu zemininde 4.38:1
   ölçüldü (AA 4.5) — aydınlık temada bir tık koyu kırmızı. */
html[data-theme="light"] .tbdg.b-due.is-over b { color: #b91c1c; }

/* ------------------------------------------------------------
   GÖREV KARTI — 6. TUR: künye/eylem hizası
   ------------------------------------------------------------ */
/* Künye rozetleri genişleyince eylem şeridi alt satıra kayıp sola
   yaslanıyordu. Künye esneyip daralır, düğmeler sağ üstte sabit kalır. */
.tdx .cdx-hero { flex-wrap: nowrap; align-items: flex-start; gap: 1rem; }
.tdx .cdx-identity { flex: 1 1 0; min-width: 0; }   /* yer daralınca önce künye daralsın */
.tdx .cdx-actions { flex: 0 0 auto; margin-left: auto; justify-content: flex-end; }
/* Rozet şeridi kendi içinde sarar; eylem şeridini itmez */
.tdx .tdx-idbar { max-width: 100%; }
.tbdg.b-upd { --bg: #7c3aed; }
/* Etiket artık yalnız tooltip'te; `em` kalırsa da gizlenir */
.tbdg em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@container tdx (max-width: 860px) {
  /* Dar kapsayıcıda künye üstte, düğmeler altta ama yine sağa yaslı */
  .tdx .cdx-hero { flex-wrap: wrap; }
  .tdx .cdx-actions { margin-left: auto; }
}
/* Dar kapsayıcıda (modal) eylem şeridi tek satırda kalsın: aralık ve
   dolgu daraltılır — 538 px'lik şerit ~440 px'e iner. */
@container tdx (max-width: 1100px) {
  .tdx .cdx-actions { gap: .3rem; }
  .tdx .cdx-actions .lbtn { padding-inline: .5rem; font-size: .78rem; }
}

/* ============================================================
   RANDEVULAR — ajanda ve detay
   ============================================================
   Takvim ızgarası Görevler modülünün `.tcal-*` sınıflarını kullanır;
   burada yalnız ajanda ve detay ekranının kendi parçaları tanımlıdır. */

/* Durum rengi: öğe bazında --apt ile taşınır */
.c-green  { --apt: var(--success); }
.c-orange { --apt: var(--warn); }
.c-blue   { --apt: var(--info); }
.c-red    { --apt: var(--danger); }
.c-gray   { --apt: var(--muted); }

.tb-green { background: var(--success); color: #fff; border-color: transparent; }
.tb-red   { background: var(--danger);  color: #fff; border-color: transparent; }
.tb-group { display: inline-flex; gap: .25rem; }

.mini-k { color: var(--muted); font-size: .78rem; }
.mini-v { margin-left: auto; font-weight: 600; font-size: .84rem; text-align: right; }

/* ---------- Ajanda ---------- */
.agenda-sub { margin: .8rem 0 .9rem; font-size: .84rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.agenda-day {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: .8rem; overflow: hidden; box-shadow: var(--sh-sm);
}
.agenda-day.is-today { border-color: var(--primary); }
.ad-head {
  display: flex; align-items: center; gap: .7rem; padding: .55rem .9rem;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.agenda-day.is-today .ad-head { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.ad-date { display: flex; flex-direction: column; align-items: center; min-width: 2.6rem; }
.ad-date b { font-size: 1.15rem; line-height: 1; }
.ad-date em { font-style: normal; font-size: .66rem; color: var(--muted); text-transform: uppercase; }
.ad-label { font-weight: 700; font-size: .9rem; }
.ad-count { margin-left: auto; font-size: .76rem; color: var(--muted); }

.ad-items { display: flex; flex-direction: column; }
.ad-item { display: flex; align-items: flex-start; gap: .75rem; padding: .6rem .9rem; border-bottom: 1px solid var(--border); }
.ad-item:last-child { border-bottom: 0; }
.ad-item:hover { background: var(--surface-2); }
.ad-time {
  font-weight: 800; font-size: .84rem; min-width: 3.1rem; padding: .2rem .4rem;
  border-radius: 7px; text-align: center; color: var(--apt, var(--muted));
  background: color-mix(in srgb, var(--apt, var(--muted)) 13%, transparent);
}
.ad-body { flex: 1; min-width: 0; }
.ad-name { font-weight: 700; font-size: .9rem; text-decoration: none; color: var(--text); }
.ad-name:hover { color: var(--primary); }
.ad-meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: .18rem; }
.ad-tag { font-size: .72rem; color: var(--muted); }
.ad-note { margin: .3rem 0 0; font-size: .78rem; color: var(--muted); }
.ad-actions { display: flex; align-items: center; gap: .3rem; }
.ad-actions form { margin: 0; }
.ad-btn {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card); color: var(--muted);
  text-decoration: none; cursor: pointer; font-size: .88rem;
}
.ad-btn:hover { border-color: var(--primary); color: var(--primary); }
.ad-btn.ok:hover { border-color: var(--success); color: var(--success); }

/* ---------- Detay ---------- */
.apd-hero {
  display: flex; align-items: center; gap: 1.1rem; padding: 1rem 1.2rem; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--sh-sm); margin-bottom: .8rem;
}
.apd-when {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 5.2rem; padding: .55rem .7rem; border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 9%, transparent);
}
.apd-day { font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--primary); }
.apd-mon { font-size: .76rem; font-weight: 600; }
.apd-dow { font-size: .7rem; color: var(--muted); }
.apd-main { flex: 1; min-width: 12rem; }
.apd-main h2 { margin: 0 0 .35rem; font-size: 1.2rem; }
.apd-pills { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0; }
.apd-pill {
  display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem;
  padding: .12rem .5rem; border-radius: 999px; background: var(--surface-3); color: var(--muted);
}
.apd-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.apd-status { padding: .7rem .9rem; margin-bottom: .8rem; }
.apd-status-row { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.apd-status-row form { margin: 0; }
.apd-notes { margin-top: .6rem; }
.apd-notes p {
  margin: .3rem 0 0; padding: .55rem .7rem; border-radius: 9px;
  background: var(--surface-2); font-size: .84rem; line-height: 1.6;
}

@media (max-width: 820px) {
  .apd-hero { flex-direction: column; align-items: flex-start; }
  .ad-item { flex-wrap: wrap; }
}

/* ============================================================
   DETAY KARTLARI — KAPSAYICI DÜZENİ  (.cdx: müşteri · poliçe · personel)
   ------------------------------------------------------------
   Sorun: bu kartların kırılma noktaları GÖRÜNTÜ PENCERESİNİ ölçüyordu.
   Kart modal içinde açıldığında (dashboard'daki "Poliçe: …" / "Müşteri: …"
   pencereleri) ekran 1.500 px, kartın gerçek genişliği ise 1.040 px oluyor;
   1.400 px'lik medya sorgusu tetiklenmediği için KPI şeridi 8 kolon açıp
   kartları 117 px'e sıkıştırıyor ve "₺7.897", "Tamamlandı" gibi değerler
   kırpılıyordu. Künye/eylem şeridi de yan yana kalıp künyeyi 300 px'e
   düşürüyor, sağda geniş bir ölü boşluk bırakıyordu.

   Çözüm: kartın kendisi bir kapsayıcı; tüm kırılmalar `@container` ile
   kartın GERÇEK genişliğine göre. Böylece aynı stil sayfada da modalda da
   doğru davranır — ayrı bir "modal sürümü" yazmaya gerek kalmaz.

   Görev kartı (.tdx) kendi `@container tdx` kurallarını korur; personel
   kartı (.prd) KPI şeridinde zaten `auto-fit` kullanıyor — ikisi de KPI
   kurallarının dışında bırakıldı.
   ============================================================ */

.cdx:not(.tdx) { container-type: inline-size; container-name: cdx; }

/* --- KPI şeridi: kolon sayısı kart sayısına tam bölünsün --------------
   Müşteri/poliçe kartı 8, görev/personel kartı 6 KPI taşıyor. Tek bir
   kolon dizisi ikisine birden oturmuyordu: 4 kolon 8'i ikiye bölerken
   6'yı 4+2 bırakıyor, 3 kolon tersini yapıyordu. Şerit `:has()` ile
   kendi kart sayısını tanıyor ve hiçbir genişlikte yarım satır kalmıyor.
   (`:has()` desteklemeyen tarayıcıda aşağıdaki ortak yedek geçerli.) */
.cdx .cdx-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 7+ kart → 8 / 4 / 2 / 1 */
.cdx .cdx-kpis:has(> :nth-child(7)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container cdx (min-width: 1560px) {
  .cdx .cdx-kpis:has(> :nth-child(7)) { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@container cdx (max-width: 760px) {
  .cdx .cdx-kpis:has(> :nth-child(7)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 6 ve altı → 6 / 3 / 2 / 1 */
.cdx .cdx-kpis:not(:has(> :nth-child(7))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container cdx (min-width: 900px) {
  .cdx .cdx-kpis:not(:has(> :nth-child(7))) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@container cdx (max-width: 700px) {
  .cdx .cdx-kpis:not(:has(> :nth-child(7))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container cdx (max-width: 440px) {
  .cdx .cdx-kpis:has(> :nth-child(7)),
  .cdx .cdx-kpis:not(:has(> :nth-child(7))) { grid-template-columns: minmax(0, 1fr); }
}

/* Dar kartta değer kırpılmak yerine alt satıra insin: "Tamamlandı" ya da
   "₺1.284.500" üç nokta ile bitmesin. */
/* 1.180 px'lik modalde kart 1.106 px oluyor; sınır bunun üstünde olmalı
   ki "Mapfre Sigorta" gibi değerler kırpılmak yerine alta insin. */
@container cdx (max-width: 1200px) {
  .cdx .cdx-kpi-txt b { white-space: normal; overflow: visible; line-height: 1.25; }
}

/* --- Hero: eylem şeridi sağ üstte kalır ------------------------------
   Şerit 640 px'e kadar uzayabildiği için künye 300 px'e sıkışıyor, sağda
   da geniş bir boşluk kalıyordu. Artık şerit hero'nun yarısını geçmiyor
   ve kendi içinde sararak sağ üstte toplu bir blok oluşturuyor; künye
   kalan genişliği (yarıdan fazlasını) kullanıyor. */
.cdx .cdx-actions { max-width: min(52%, 640px); }

/* Şeridin künyeyi ezmeyeceği kadar yer kalmadığında künyenin altına
   tam genişlikte iner. */
@container cdx (max-width: 720px) {
  .cdx .cdx-hero { flex-wrap: wrap; }
  .cdx .cdx-hero > .cdx-identity { flex: 1 1 100%; }
  .cdx .cdx-actions {
    flex: 1 1 100%; max-width: none; margin-left: 0;
    justify-content: flex-start; align-self: stretch;
    padding-top: .7rem; border-top: 1px solid var(--border);
  }
}
/* Çok darda düğmeler satırı eşit paylaşsın (tek başına kalan düğme
   satırın ortasında asılı durmasın) */
@container cdx (max-width: 560px) {
  .cdx .cdx-actions .lbtn { flex: 1 1 auto; justify-content: center; }
  .cdx .cdx-actions .a-list { flex: 0 0 auto; }
}

/* --- Kart ızgarası: modalde 3–4 kolon 320 px'e düşüyordu -------------- */
.cdx .cd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container cdx (min-width: 1300px) {
  .cdx .cd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cdx.pdx .cd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container cdx (max-width: 860px) {
  .cdx .cd-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Poliçe kartına özel iki kolonlu bölümler ------------------------- */
@container cdx (max-width: 720px) {
  .cdx .pdx-term { flex-direction: column; align-items: flex-start; gap: .4rem; }
}

/* Kapsayıcı sorgusunu desteklemeyen tarayıcılar için görüntü penceresi
   tabanlı yedek — modalde tam isabetli olmaz ama sayfa yine bozulmaz. */
@supports not (container-type: inline-size) {
  .cdx .cdx-kpis { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  @media (max-width: 1400px) { .cdx .cdx-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (max-width: 760px)  { .cdx .cdx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .cdx .cd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 1300px) { .cdx .cd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 860px)  { .cdx .cd-grid { grid-template-columns: minmax(0, 1fr); } }
}

/* --- Modal kabuğu: geniş ekranda pencere de genişlesin ---------------
   1.060 px sabit genişlik 1.500 px'lik ekranda gereksiz dardı; dar
   ekranda ise `95vw` kenar boşluğunu koruyor. */
.mdl-dialog { max-width: min(1180px, 95vw); }
.mdl-body .cdx-hero { padding: .9rem 1rem; }
.mdl-body .cdx-kpis { margin-bottom: .8rem; }
/* Modalda da eylem şeridi **sağ üstte** kalır — tam sayfadaki yeriyle aynı.
   Şerit kendi sütununda sarar ve yarıdan fazlasını kaplayamaz; künye kalan
   yeri alır. Poliçe kartının nabız paneli düğmelerin altına sıkışmasın diye
   `display: contents` ile hero'nun doğrudan çocuğu olur ve tam genişlikte
   kendi satırına iner. */
.mdl-body .cdx-hero { flex-wrap: wrap; align-items: flex-start; }
.mdl-body .cdx-hero > .cdx-identity { flex: 1 1 300px; }
.mdl-body .cdx-hero .cdx-actions { flex: 0 1 auto; max-width: 50%; margin-left: auto; justify-content: flex-end; }
.mdl-body .pdx .pdx-side { display: contents; }
.mdl-body .pdx .pdx-aside { flex: 1 1 100%; }
@media (max-width: 760px) {
  .mdl-body .cdx-hero .cdx-actions { max-width: none; margin-left: 0; justify-content: flex-start; }
}
/* Modal 1060 px: kart ızgarası 2 kolona iner. Geniş kartlar burada iki
   kolonu birden kaplamaz — yoksa tek başına tam satır olup yanındaki kartı
   alta itiyorlar. */
.mdl-body .cd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mdl-body .cd-card-wide { grid-column: auto; }

/* ============================================================
   DETAY KARTLARI — BİLGİ PANELLERİNİN DÜZENİ
   ------------------------------------------------------------
   Üç sorun birden çözülüyor:

   1) "Poliçe Detayları" iki kolon kaplıyordu (`cd-card-wide` = span 2).
      Izgara zaten iki kolona düştüğünde bu kart tek başına tüm satırı
      yiyor, yanındaki "Sigorta Ettiren" bir alt satıra itiliyordu.
      Artık yalnızca üç kolon ve üzerinde geniş duruyor.

   2) Kartlar satırdaki en uzun kartın boyuna geriliyordu: yanında dört
      satırlık bir kart olan tek satırlık panel, altında kocaman bir
      boşlukla duruyordu. `align-items: start` ile her kart kendi boyunda.

   3) Etiket/değer listesi seyrekti (13 satırlık poliçe künyesi kartı
      gereksiz uzatıyordu); satır aralığı ve etiket kolonu daraltıldı.
   ============================================================ */

/* 1) Geniş kart yalnız üç kolonlu ızgarada iki kolon kaplasın */
.cdx .cd-card-wide { grid-column: auto; }
@container cdx (min-width: 1300px) {
  .cdx .cd-card-wide { grid-column: span 2; }
}
/* Tam genişlik kartı (poliçe notları) her zaman satırı kaplar */
.cdx .cd-card-full { grid-column: 1 / -1; }

/* 2) Kartlar kendi içeriği kadar yüksek olsun */
.cdx .cd-grid { align-items: start; }

/* 3) Etiket/değer listesi daha derli toplu */
.cdx .cdx-dl { gap: .28rem .55rem; font-size: .815rem; }
.cdx .pdx-dl { grid-template-columns: 104px 1fr; }
.cdx .cdx-dl dt { font-size: .765rem; letter-spacing: .01em; }

/* Kart gövdesi: dolgu ve panel içi bloklar arası boşluk sıkılaştırıldı —
   yarısı boş görünen paneller içeriğine oturuyor. */
.cdx .cdc-body { padding: .7rem .85rem .8rem; }
.cdx .cdc-body > * + * { margin-top: .6rem; }

/* Boş durum: dikey kule yerine tek satır ------------------------------
   Müşteri kartında 15 panelin dokuzu boş olabiliyor; her biri emoji +
   metin + düğmeyi alt alta dizip 113 px yer kaplıyordu. Ekran, içeriği
   olan panellerden çok boş kutu gösteriyordu. Tek satıra alınınca boş
   panel 34 px'e iniyor — bilgi taşıyan paneller öne çıkıyor. */
.cdx .cdc-body .empty-card {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .1rem; text-align: left;
}
.cdx .cdc-body .empty-ico {
  font-size: 1.05rem; margin: 0; flex-shrink: 0; opacity: .5;
}
.cdx .cdc-body .empty-card p {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-size: .8rem; color: var(--muted);
}
.cdx .cdc-body .empty-card .btn { flex-shrink: 0; }

/* Çok darda düğme alt satıra insin, metin kırpılmasın */
@container cdx (max-width: 520px) {
  .cdx .cdc-body .empty-card { flex-wrap: wrap; }
  .cdx .cdc-body .empty-card p { flex-basis: 100%; }
}

/* --- Boş paneller geri plana çekilir --------------------------------
   Müşteri kartındaki 15 panelin dokuzu boş olabiliyor ve hepsi dolu
   panellerle aynı beyaz kart, aynı gölge, aynı ağırlıkta duruyordu:
   ekran "kutu duvarı" gibi görünüyor, bilgi taşıyan paneller kayboluyordu.
   Boş panel artık kesik çizgili sessiz bir çerçeve — başlığı ve "ekle"
   düğmesi duruyor, ama göz önce dolu panellere gidiyor.
   (`:has()` desteklemeyen tarayıcıda kartlar eskisi gibi görünür.) */
.cdx .cd-card:has(.cdc-body > .empty-card:only-child) {
  background: transparent; box-shadow: none;
  /* Düz kenarlık rengi beyaz zeminde neredeyse görünmüyordu; yer tutucu
     olduğu anlaşılsın diye bir tık koyulaştırıldı. */
  border: 1px dashed color-mix(in srgb, var(--muted) 38%, transparent);
}
.cdx .cd-card:has(.cdc-body > .empty-card:only-child) .cdc-head {
  background: transparent; border-bottom-color: transparent;
}
.cdx .cd-card:has(.cdc-body > .empty-card:only-child) .cdc-head h3 {
  color: var(--muted); font-weight: 600;
}
.cdx .cd-card:has(.cdc-body > .empty-card:only-child) .cdc-ico { opacity: .55; }
.cdx .cd-card:has(.cdc-body > .empty-card:only-child):hover {
  border-style: solid; border-color: var(--primary);
}
html[data-theme="dark"] .cdx .cd-card:has(.cdc-body > .empty-card:only-child) {
  background: transparent;
}

/* --- Poliçe künyesi: geniş kartta iki sütun etiket/değer -------------
   13 satırlık künye tek sütunda kartı 350 px'e çıkarıyor, yanındaki
   kartların iki katı yer kaplıyordu. Kart yeterince genişken satırlar
   ikişerli diziliyor: yükseklik yarıya iniyor, kart yanındakilerle
   aynı ölçeğe geliyor. */
@container cdx (min-width: 900px) {
  .cdx .pdx-dl { grid-template-columns: 96px minmax(0, 1fr) 96px minmax(0, 1fr); }
}

/* ============================================================
   PANO TABLOLARI — ORTAK DİL  (.dtab)
   ------------------------------------------------------------
   Üye Performansı ve üç poliçe listesi aynı panoda dört ayrı tablo
   gibi duruyordu: farklı başlık ölçüsü, farklı satır yüksekliği,
   farklı vurgu. Hepsi tek bir dile alındı ve satırın tamamı
   tıklanabilir yapıldı — kayda ulaşmak için hücredeki küçük bağlantıyı
   avlamak gerekmiyor, satır modalda açılıyor.
   ============================================================ */

.dtab { font-size: .81rem; border-collapse: separate; border-spacing: 0; }

/* Başlık: tek bir ölçü, yapışkan (uzun listede kaybolmasın) */
.dtab thead th {
  position: sticky; top: 0; z-index: 1;
  padding: .5rem .55rem;
  font-size: .665rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--label, var(--muted)); background: var(--surface-2);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.dtab tbody td { padding: .5rem .55rem; vertical-align: middle; border-bottom: 1px solid var(--border); }
.dtab tbody tr:last-child td { border-bottom: 0; }
.dtab .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Birincil hücre (poliçe no / üye adı) satırın çapası */
.dtab-key { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.dtab-soft { color: var(--muted); font-weight: 500; }

/* --- Tıklanabilir satır --- */
.dtab-row { cursor: pointer; transition: background .13s ease, box-shadow .13s ease; }
.dtab-row:hover td { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.dtab-row:hover td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.dtab-row:focus-visible { outline: none; }
.dtab-row:focus-visible td { background: color-mix(in srgb, var(--primary) 9%, transparent); }
.dtab-row:focus-visible td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.dtab-row a { position: relative; z-index: 1; }   /* hücre bağlantısı satırdan önce */

/* Satır sonundaki "açılır" oku — yalnız üzerine gelince belirir */
.dtab-go { width: 30px; text-align: center; padding-inline: .2rem !important; }
.dtab-go svg { color: var(--muted); opacity: 0; transform: translateX(-3px); transition: opacity .13s, transform .13s; }
.dtab-row:hover .dtab-go svg,
.dtab-row:focus-visible .dtab-go svg { opacity: .85; transform: none; }

/* Aciliyet artık satır kenarındaki kırmızı çizgiyle değil hücredeki
   rozetle anlatılıyor (bkz. .pl-chip): çizgi, yenilemelerin çoğu 30 gün
   içinde olduğu için tabloyu baştan sona kırmızıya boğuyordu. */

/* Toplam satırı */
.dtab tfoot td {
  padding: .55rem;
  background: var(--surface-2); font-weight: 700;
  border-top: 2px solid var(--border); border-bottom: 0;
}

/* --- Üye Performansı'na özel --- */
.mp-who { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.mp-av {
  display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px;
  border-radius: 9px; font-size: .7rem; font-weight: 800; color: #fff;
  background: var(--brand-grad, var(--primary));
}
.mp-txt { display: flex; flex-direction: column; min-width: 0; }
.mp-me {
  margin-left: .3rem; padding: 0 .3rem; border-radius: 999px;
  font-size: .6rem; font-style: normal; font-weight: 700; text-transform: uppercase;
  color: var(--primary); background: var(--primary-light);
}
.mp-cell { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.mp-cell b { font-variant-numeric: tabular-nums; }
.mperf-table .mini-bar { display: block; margin-top: .25rem; }
.mini-pct { font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mini-pct.is-good { color: var(--success); }
.mini-pct.is-mid  { color: var(--warn, #d97706); }
.mini-pct.is-low  { color: var(--danger); }

/* Süresi geçmiş poliçede kalan gün kırmızı okunur */
.pl-days-late { color: var(--danger); font-weight: 600; }

/* Koyu tema */
html[data-theme="dark"] .dtab thead th,
html[data-theme="dark"] .dtab tfoot td { background: var(--surface-2); }
html[data-theme="dark"] .dtab-row:hover td { background: var(--surface-3); }

/* Dokunmatikte ve dar ekranda hover yok: ok her zaman görünür */
@media (hover: none), (max-width: 900px) {
  .dtab-go svg { opacity: .5; transform: none; }
}

/* Dar kartta (üç poliçe listesi yan yanayken kolon ~450 px) hücre dolgusu
   kısılır — tablo yatay kaydırmaya düşmesin. */
@media (max-width: 1500px) {
  .pl-row .dtab thead th,
  .pl-row .dtab tbody td { padding-inline: .4rem; }
  /* 14 haneli poliçe numarası tek başına 127 px tutuyor ve tabloyu
     birkaç piksel taşırıyordu — bu kolonda punto bir tık küçülür. */
  .pl-row .dtab .dtab-key { font-size: .765rem; }
}

/* ============================================================
   LİSTE ŞERİDİ — DÖRT TABLO TEK SATIRDA  (.pl-quad)
   ------------------------------------------------------------
   Üye Performansı ayrı bir tam genişlik kartıydı, üç poliçe listesi
   ayrı bir satırdaydı. Dördü tek ızgaraya alınıp dörtte birer kolona
   yerleşti. Dörtte birlik kolonda altı-sekiz sütun sığmadığı için
   ikincil sütunlar (`col-opt`) gizleniyor ve punto küçülüyor; gizlenen
   ölçüler satıra tıklayınca açılan kartta zaten tam hâliyle duruyor.
   ============================================================ */

.pl-quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Kolon başına ~370 px kalmadığında dörtlü düzen anlamsız: önce ikiye,
   sonra tek kolona iner. */
@media (max-width: 1600px) { .pl-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .pl-quad { grid-template-columns: minmax(0, 1fr); } }

/* --- Dörtlü düzende sıkı yerleşim --- */
@media (min-width: 1601px) {
  .pl-quad .col-opt { display: none; }

  .pl-quad .dtab { font-size: .735rem; }
  .pl-quad .dtab thead th { font-size: .61rem; letter-spacing: .045em; }
  .pl-quad .dtab thead th,
  .pl-quad .dtab tbody td,
  .pl-quad .dtab tfoot td { padding: .42rem .32rem; }
  .pl-quad .dtab .dtab-key { font-size: .64rem; letter-spacing: 0; }
  .pl-quad .dtab .pl-days { font-size: .58rem; }
  .pl-quad .dtab .badge { font-size: .62rem; padding: .05rem .35rem; }
  .pl-quad .dtab .mini-pct { font-size: .64rem; }
  .pl-quad .dtab-go { width: 22px; }

  /* Müşteri adı kolonu taşırmasın — ad kendi kutusunda üç noktayla kesilir.
     (Genişliği `max-width` ile SINIRLI bir blok olması şart: tablonun
     otomatik yerleşimi hücrenin en-küçük genişliğini buradan hesaplıyor.) */
  .pl-quad .pl-cust a { display: flex; align-items: center; gap: .3rem; min-width: 0; }
  /* Sabit tablo yerleşiminde hücre genişliği zaten belli — ad, kalan
     yeri doldurur ve gerekirse üç noktayla kesilir. */
  .pl-quad .pl-nm {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .pl-quad .mp-name { max-width: 104px; }
  .pl-quad .pl-ico { width: 16px; height: 16px; border-radius: 5px; }
  .pl-quad .pl-rep { font-size: .6rem; }

  /* İnce kaydırma çubuğu: kalın çubuk dar kartta 15 px yiyordu */
  .pl-quad .table-scroll { scrollbar-width: thin; }
  .pl-quad .table-scroll::-webkit-scrollbar { width: 7px; height: 7px; }
  .pl-quad .table-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px; background: color-mix(in srgb, var(--muted) 34%, transparent);
  }
  .pl-quad .table-scroll::-webkit-scrollbar-track { background: transparent; }

  /* Üye hücresi: rozet küçülür, unvan satırı düşer */
  .pl-quad .mp-av { width: 22px; height: 22px; border-radius: 7px; font-size: .58rem; }
  .pl-quad .mp-role { display: none; }
  .pl-quad .mp-name { font-size: .74rem; }
  .pl-quad .mp-cell { gap: .3rem; }
  .pl-quad .mperf-table .mini-bar { margin-top: .18rem; height: 4px; }

  /* Dar kolonda tarih alt satırı sütun genişliğini belirleyip müşteri
     adından yer çalıyordu; gün sayısı rozeti zaten aynı bilgiyi veriyor,
     tam tarih satıra tıklayınca açılan kartta duruyor. */
  .pl-quad .pl-sub { display: none; }
  .pl-quad .pl-ago { font-size: .68rem; }
  .pl-quad .pl-card .dtab .w-key  { width: 33%; }
  .pl-quad .pl-card .dtab .w-cust { width: 24%; }
  .pl-quad .pl-card .dtab .w-when { width: 22%; }
  .pl-quad .pl-card .dtab .w-amt  { width: 21%; }
  .pl-quad .pl-recent .dtab .w-key  { width: 35%; }
  .pl-quad .pl-recent .dtab .w-cust { width: 22%; }

  /* Dört kart aynı boyda dursun: uzun liste kendi içinde kayar,
     yapışkan başlık yerinde kalır. */
  .pl-quad .table-scroll { max-height: 24rem; overflow-y: auto; }
  .pl-quad .dash-card { min-height: 0; }

  /* Başlık şeridi dar kartta iki satıra düşmesin */
  .pl-quad .card-head h3 { font-size: .82rem; }
  .pl-quad .card-head .head-note { display: none; }
}

/* İki kolonlu ara düzende poliçe listeleri tüm sütunlarıyla sığıyor,
   ancak sekiz sütunlu Üye Performansı sığmıyor (≈950 px gerekiyor, kart
   ≈596 px). Orada da ikincil ölçüler gizlenir; tam dökümü satıra
   tıklayınca açılan personel kartı veriyor. */
@media (max-width: 1600px) and (min-width: 901px) {
  .pl-quad .mperf-table .col-opt { display: none; }
  .pl-quad .mperf-card .table-scroll { max-height: 24rem; overflow-y: auto; }
}

/* Tek kolonlu düzende (≤900 px) tablolar tüm sütunlarıyla, yatay
   kaydırmayla okunur — dar ekranda sütun gizlemek bilgi kaybı olur. */

/* ============================================================
   POLİÇE LİSTELERİ — ÜÇ TABLONUN KENDİ KARAKTERİ
   ------------------------------------------------------------
   Ortak iskelet `dtab`; ayrıştıran şey "zaman" kolonunun anlatımı:
   geri sayım rozeti / dolu gecikme rozeti / göreli zaman. Başlık şeridi
   de kartın aksan rengini alıyor, böylece üç tablo yan yanayken hangisine
   baktığınız renkten okunuyor.
   ============================================================ */

/* Sütunlar alana yayılsın: içerik genişliğine göre değil, oransal.
   (Eski otomatik yerleşimde poliçe no kolonu şişip sağda boşluk kalıyordu.) */
.pl-card .dtab { table-layout: fixed; width: 100%; }
/* Oranlar dar kolondaki gerçek içeriğe göre: poliçe numarası kesilmemeli
   (kaydın kimliği), uzun müşteri adı gerekirse üç noktayla kesilebilir. */
.pl-card .dtab .w-key  { width: 27%; }
.pl-card .dtab .w-cust { width: 27%; }
.pl-card .dtab .w-type { width: 14%; }
.pl-card .dtab .w-when { width: 18%; }
.pl-card .dtab .w-amt  { width: 18%; }
.pl-card .dtab .w-st   { width: 17%; }
.pl-card .dtab .dtab-key,
.pl-card .dtab .pl-amt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Başlık şeridi kartın aksan rengini taşır */
.pl-card .dtab thead th { color: var(--ac, var(--label, var(--muted))); border-bottom-width: 2px; }
.pl-renew   { --ac: #0e7490; }
.pl-expired { --ac: #b91c1c; }
.pl-recent  { --ac: #15803d; }
html[data-theme="dark"] .pl-renew   { --ac: #67e8f9; }
html[data-theme="dark"] .pl-expired { --ac: #fca5a5; }
html[data-theme="dark"] .pl-recent  { --ac: #86efac; }

/* Zaman hücresinin ikinci satırı: tarih, sessiz */
.pl-sub { display: block; margin-top: .1rem; font-size: .655rem; color: var(--muted); white-space: nowrap; }

/* --- 1) Yenilemeler: içi boş geri sayım rozeti, aciliyete göre renk --- */
.pl-chip {
  display: inline-block; padding: .1rem .42rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; white-space: nowrap;
  border: 1px solid currentColor; line-height: 1.35;
}
.pl-chip.c-red   { color: #b91c1c; background: rgba(185,28,28,.07); }
.pl-chip.c-amber { color: #b45309; background: rgba(180,83,9,.08); }
.pl-chip.c-cyan  { color: #0e7490; background: rgba(14,116,144,.07); }
html[data-theme="dark"] .pl-chip.c-red   { color: #fca5a5; background: rgba(248,113,113,.12); }
html[data-theme="dark"] .pl-chip.c-amber { color: #fcd34d; background: rgba(252,211,77,.12); }
html[data-theme="dark"] .pl-chip.c-cyan  { color: #67e8f9; background: rgba(103,232,249,.12); }

/* --- 2) Süresi geçmiş: dolu rozet, gecikme büyüdükçe koyulaşır ---
   Üç adım da beyaz yazıyla AA sınırını (4.5:1) geçiyor. */
.pl-late {
  display: inline-block; padding: .12rem .45rem; border-radius: 6px;
  font-size: .68rem; font-weight: 700; color: #fff; white-space: nowrap; line-height: 1.35;
}
.pl-late.l1 { background: #dc2626; }
.pl-late.l2 { background: #b91c1c; }
.pl-late.l3 { background: #7f1d1d; }

/* --- 3) Son eklenenler: göreli zaman + tür noktası --- */
.pl-ago { font-size: .72rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.pl-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: .35rem; vertical-align: 1px; flex-shrink: 0;
  background: var(--pd, #94a3b8);
}
.pt-trafik .pl-dot, .pl-dot.pt-trafik { --pd: #d97706; }
.pt-kasko .pl-dot,  .pl-dot.pt-kasko  { --pd: #4f46e5; }
.pt-dask .pl-dot,   .pl-dot.pt-dask   { --pd: #0891b2; }
.pt-konut .pl-dot,  .pl-dot.pt-konut  { --pd: #16a34a; }
.pt-sağlık .pl-dot, .pl-dot.pt-sağlık { --pd: #e11d48; }
.pt-tss .pl-dot,    .pl-dot.pt-tss    { --pd: #7c3aed; }
/* En yeni kayıt ince bir sol şeritle işaretlenir */
.pl-recent .dtab tr.is-newest td:first-child { box-shadow: inset 2px 0 0 #16a34a; }

/* Prim kolonu her üç tabloda da aynı ağırlıkta okunur */
.pl-amt { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============================================================
   GÖRÜŞME AKIŞINDA WHATSAPP MESAJLARI
   ------------------------------------------------------------
   Görüşme notu sarı yapışkan kâğıt; WhatsApp mesajı aynı akışta ama
   kendi kimliğiyle duruyor (WhatsApp yeşili, sohbet balonu kuyruğu).
   Böylece "bu bir görüşme sonucu mu, gönderdiğim bir mesaj mı?"
   sorusu tek bakışta cevaplanıyor.
   ============================================================ */

.sticky.is-wa {
  position: relative;
  box-shadow: 0 1px 4px rgba(21,128,61,.12);
}
/* Sohbet balonu kuyruğu — sarı notlardan ayıran ikinci işaret */
.sticky.is-wa::after {
  content: ''; position: absolute; left: 14px; bottom: -7px;
  border: 7px solid transparent; border-bottom: 0;
}
.sticky.is-wa .sticky-head span:first-child {
  display: inline-flex; align-items: center; gap: .28rem;
  font-size: .72rem;
}

/* Durum rozeti ve kâğıt tonları `--pk/--pg/--pb` üzerinden (aşağıda) */
.sticky.is-wa .wa-badge { background: var(--pk); }
.sticky.is-wa.is-fail .sticky-body { text-decoration: line-through; }

.sticky .wa-warn {
  display: flex; align-items: center; gap: .25rem; margin-top: .4rem;
  font-size: .66rem; font-weight: 600; color: #b45309;
}

html[data-theme="dark"] .sticky .wa-warn { color: #fcd34d; }

/* --- WhatsApp modalı: gönderim onayı --- */
.wa-confirm {
  margin-top: .9rem; padding: .85rem .95rem; border-radius: 12px;
  background: color-mix(in srgb, #16a34a 8%, transparent);
  border: 1px solid color-mix(in srgb, #16a34a 28%, transparent);
}
.wa-confirm[hidden] { display: none; }
.wa-confirm-h { display: flex; align-items: flex-start; gap: .55rem; }
.wa-confirm-h svg { flex-shrink: 0; color: #15803d; margin-top: .1rem; }
.wa-confirm-h strong { display: block; font-size: .88rem; }
.wa-confirm-h span { display: block; margin-top: .18rem; font-size: .78rem; color: var(--muted); line-height: 1.5; }
.wa-confirm-a { display: flex; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }

/* --- WhatsApp modalı: serbest metin çipi ---
   Şablon değil de "kendin yaz" olduğu kesik çizgiden anlaşılsın. */
.wam-tpl.is-free { border-style: dashed; }
.wam-tpl.is-free.on { border-style: solid; }

/* --- WhatsApp modalı: gönderim hedefi ---
   Uygulama mı, tek sekmede web mi? Cihaz başına tercih (bkz. whatsapp.js). */
.wa-target {
  margin-top: .7rem; padding: .6rem .75rem; border-radius: 11px;
  background: var(--bg); border: 1px solid var(--border);
}
.wa-target[hidden] { display: none; }
.wa-target .fhint { margin-top: .35rem; }
.wa-target-q { display: flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; }
.wa-target-q svg { color: var(--muted); flex-shrink: 0; }
.wa-target-opts { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .45rem; }
.wa-target-btn {
  cursor: pointer; padding: .34rem .7rem; border-radius: 999px; font: inherit;
  font-size: .755rem; font-weight: 600; color: var(--text);
  background: var(--card); border: 1px solid var(--border);
  transition: border-color .14s, color .14s, background .14s;
}
.wa-target-btn:hover { color: #128c7e; border-color: #25d366; background: rgba(37,211,102,.1); }
.wa-target-cur { display: inline-flex; align-items: center; gap: .3rem; font-size: .765rem; color: var(--muted); }
.wa-target-cur svg { color: #16a34a; flex-shrink: 0; }
.wa-target-cur b { color: var(--text); }
.wa-lnk {
  cursor: pointer; padding: 0 .1rem; margin-left: .45rem; font: inherit; font-size: .74rem;
  font-weight: 600; color: var(--primary); background: none; border: 0; text-decoration: underline;
}
.wa-lnk:hover { opacity: .78; }
.wa-fallback { display: flex; align-items: center; gap: .3rem; margin: .55rem 0 0; font-size: .74rem; color: #b45309; }
.wa-fallback[hidden] { display: none; }
.wa-fallback svg { flex-shrink: 0; }

html[data-theme="dark"] .wa-target { background: var(--surface-2); }
html[data-theme="dark"] .wa-target-btn { background: var(--surface-1, var(--card)); }
html[data-theme="dark"] .wa-fallback { color: #fcd34d; }

/* ============================================================
   GÖRÜŞME NOTU KÂĞITLARI — SONUCA GÖRE RENK
   ------------------------------------------------------------
   Dört kâğıt, dört anlam: olumlu mavi · belirsiz sarı · olumsuz kırmızı ·
   WhatsApp yeşil. Eskiden hepsi aynı sarı kâğıttı ve sonucu yalnız küçük
   rozet söylüyordu; artık kâğıdın kendisi söylüyor.

   Her kâğıt dört tonla kurulur: --pg zemin, --pb kenarlık, --pd tarih,
   --pt gövde; rozet zemini --pk. Rozet yazısı beyaz olduğu için --pk
   tonları AA sınırını (4.5:1) geçecek şekilde seçildi:
     mavi #1d4ed8 → 6,7:1 · sarı #b45309 → 5,1:1
     kırmızı #b91c1c → 6,5:1 · yeşil #15803d → 5,0:1
   (WhatsApp rozetinde daha önce #16a34a vardı; beyaz yazıyla 3,3:1
    ölçüldüğü için koyulaştırıldı.)
   ============================================================ */

.sticky {
  background: var(--pg, #fef9c3);
  border: 1px solid var(--pb, transparent);
}
.sticky .sticky-date { color: var(--pd, #a16207); }
.sticky .sticky-body { color: var(--pt, #422006); }
.sticky .sticky-head span:first-child { color: var(--pt, #422006); }
.sticky .sticky-badge { background: var(--pk, #64748b); }

/* Olumlu — mavi */
.sticky.n-pos { --pg: #e8f1fe; --pb: #bcd6fb; --pd: #2c5aa8; --pt: #10305e; --pk: #1d4ed8; }
/* Belirsiz — sarı (mevcut kâğıt tonu korundu) */
.sticky.n-neu { --pg: #fef9c3; --pb: #ead9a0; --pd: #a16207; --pt: #422006; --pk: #b45309; }
/* Olumsuz — kırmızı */
.sticky.n-neg { --pg: #fdecec; --pb: #f2c4c4; --pd: #a13a3a; --pt: #7f1d1d; --pk: #b91c1c; }
/* Tür verilmemiş not */
.sticky.n-def { --pg: #f1f5f9; --pb: #dbe3ec; --pd: #5b6878; --pt: #334155; --pk: #475569; }

/* WhatsApp yeşili aynı değişken düzenine bağlanır (kuyruk rengi de
   --pg'yi kullanır, böylece durum değişince kendiliğinden uyar) */
.sticky.is-wa          { --pg: #e7fbe9; --pb: #b7e8bf; --pd: #3f7c52; --pt: #14532d; --pk: #15803d; }
.sticky.is-wa.is-prep  { --pg: #fdf6e7; --pb: #ead9b0; --pd: #8a6b2f; --pt: #4a3410; --pk: #b45309; }
.sticky.is-wa.is-fail  { --pg: #fdecec; --pb: #f0c2c2; --pd: #96302f; --pt: #7f1d1d; --pk: #b91c1c; }
.sticky.is-wa::after   { border-top-color: var(--pg); filter: drop-shadow(0 1px 0 var(--pb)); }
.sticky.is-wa .sticky-head span:first-child { color: var(--pk); }

/* --- Koyu tema: kendi adımları, otomatik ters çevirme değil --- */
html[data-theme="dark"] .sticky.n-pos { --pg: #10233f; --pb: #244a7e; --pd: #8fb6ec; --pt: #d8e8ff; --pk: #3b82f6; }
html[data-theme="dark"] .sticky.n-neu { --pg: #33270f; --pb: #6b5320; --pd: #d3b467; --pt: #f5e6c8; --pk: #d97706; }
html[data-theme="dark"] .sticky.n-neg { --pg: #3a1414; --pb: #7f2c2c; --pd: #e39a9a; --pt: #f6cccc; --pk: #f87171; }
html[data-theme="dark"] .sticky.n-def { --pg: #1b2431; --pb: #33415a; --pd: #94a3b8; --pt: #cbd5e1; --pk: #94a3b8; }
html[data-theme="dark"] .sticky.is-wa         { --pg: #10301c; --pb: #1f5c33; --pd: #7ab98d; --pt: #d6f5de; --pk: #16a34a; }
html[data-theme="dark"] .sticky.is-wa.is-prep { --pg: #33270f; --pb: #6b5320; --pd: #d3b467; --pt: #f5e6c8; --pk: #d97706; }
html[data-theme="dark"] .sticky.is-wa.is-fail { --pg: #3a1414; --pb: #7f2c2c; --pd: #e39a9a; --pt: #f6cccc; --pk: #f87171; }
/* Koyu temada rozet zemini açıldığı için yazı koyu okunur */
html[data-theme="dark"] .sticky .sticky-badge { color: #0b1220; font-weight: 700; }

/* Silinmiş not rengini kaybeder — üzeri çizili gri kâğıda döner */
/* Silinmiş not soluk ama okunur kalır: gövde 7,4:1, tarih 4,7:1 */
.sticky.is-deleted { --pg: #f1f5f9; --pb: #cbd5e1; --pd: #5b6878; --pt: #475569; --pk: #64748b; }
html[data-theme="dark"] .sticky.is-deleted { --pg: #1a2130; --pb: #33415a; --pd: #8b98a9; --pt: #a9b6c6; --pk: #8b98a9; }

/* ============================================================
   KATLANABİLİR TEKRAR KARTI (.rc-fold) + RENK KODU (.rl-tint)
   ------------------------------------------------------------
   Dokuz araçlı bir müşteride araç paneli üç ekran boyundaydı ve dokuz kart
   aynı gri tonda, birbirinin aynı görünüyordu — kullanıcı hangi kartta
   olduğunu kaybediyordu. İki kalıcı önlem:

     1. Kart KATLANIR: kapalıyken tek satır (sıra · plaka · özet · ruhsat).
        Panel bir listeye dönüşür, düzenlenecek kart tıklanıp açılır.
     2. Kart RENK KODLUDUR: sol şerit ve başlık zemini SIRAYA göre sekiz
        renkli paletten gelir. `:nth-child` olduğu için ekleme/silme sonrası
        renkler kendiliğinden yerine oturur — JS'in bir şey yazması gerekmez.

   Palet yalnız `.rl-tint` taşıyan listelerde açılır: diğer panellerin
   (yakınlar, ev, evcil) görünümü olduğu gibi kalsın.
   ============================================================ */
.rcard.rc-fold {
  padding: 0; overflow: hidden;
  border-left: 3px solid var(--vac, var(--border));
}
.rcard.rc-fold > .rcard-head {
  display: flex; align-items: center; gap: .45rem;
  justify-content: flex-start; margin: 0;
  padding: .45rem .5rem .45rem .4rem;
  cursor: pointer; user-select: none;
  background: color-mix(in srgb, var(--vac, #64748b) 9%, transparent);
  transition: background .13s;
}
.rcard.rc-fold > .rcard-head:hover { background: color-mix(in srgb, var(--vac, #64748b) 16%, transparent); }
.rcard.rc-fold > .rcard-head > .rcard-title { color: var(--vac, var(--muted)); flex-shrink: 0; }
.rcard.rc-fold > .rcard-body { padding: .8rem .9rem .85rem; }
.rcard.rc-fold.is-closed > .rcard-body { display: none; }

.rcard-chev {
  display: inline-flex; flex-shrink: 0; color: var(--vac, var(--muted));
  transition: transform .16s ease;
}
.rcard.rc-fold.is-closed .rcard-chev { transform: rotate(-90deg); }

/* Kapalı kartın tek bilgi kaynağı: marka · yıl · tip */
.rcard-sum {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .79rem; color: var(--muted);
}
.rcard-sum:empty { display: none; }
.rcard-doc {
  display: inline-flex; align-items: center; gap: .22rem; flex-shrink: 0;
  padding: .1rem .42rem; border-radius: 999px;
  font-size: .66rem; font-weight: 700; letter-spacing: .02em;
  color: var(--success); background: rgba(22,163,74,.13);
}
.rcard-doc[hidden] { display: none; }
/* Kapalı kartta özet zaten `.rcard-sum` içinde — açıkken tekrar olurdu */
.rcard.rc-fold:not(.is-closed) .rcard-sum { visibility: hidden; }

.rep-foldall {
  margin-left: auto; padding: .28rem .6rem;
  font: inherit; font-size: .74rem; font-weight: 600;
  color: var(--muted); background: transparent;
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.rep-foldall:hover { color: var(--primary); border-color: var(--primary); }
.rep-foldall[hidden] { display: none; }
/* Toplu düğme varken "Ekle" kenara itilmesin: itmeyi o üstleniyor */
.rep-head:has(.rep-foldall:not([hidden])) [data-add] { margin-left: .4rem; }
.rep-hint { margin: 0 0 .5rem; font-size: .75rem; color: var(--muted); }
.rep-hint[hidden] { display: none; }

/* Sıra rengi — sekizli palet, dokuzuncu satır baştan başlar.
   Seçici öğe adı vermez: aynı palet hem araç PANELİNDEKİ `.rcard`lara hem de
   araç LİSTESİ penceresindeki `.vrow`lara uygulanır. İki ekranda "3. araç"
   aynı renkte görünsün diye — kullanıcı pencereden panele geçerken aradığı
   aracı renkten tanıyor. */
.rl-tint > :nth-child(8n+1) { --vac: #4f46e5; }
.rl-tint > :nth-child(8n+2) { --vac: #0891b2; }
.rl-tint > :nth-child(8n+3) { --vac: #16a34a; }
.rl-tint > :nth-child(8n+4) { --vac: #d97706; }
.rl-tint > :nth-child(8n+5) { --vac: #db2777; }
.rl-tint > :nth-child(8n+6) { --vac: #7c3aed; }
.rl-tint > :nth-child(8n+7) { --vac: #dc2626; }
.rl-tint > :nth-child(8n+8) { --vac: #0d9488; }
/* Koyu temada aynı renkler 4,5:1 kontrastı tutmuyor — açık ikizleri */
html[data-theme="dark"] .rl-tint > :nth-child(8n+1) { --vac: #a5b4fc; }
html[data-theme="dark"] .rl-tint > :nth-child(8n+2) { --vac: #67e8f9; }
html[data-theme="dark"] .rl-tint > :nth-child(8n+3) { --vac: #86efac; }
html[data-theme="dark"] .rl-tint > :nth-child(8n+4) { --vac: #fcd34d; }
html[data-theme="dark"] .rl-tint > :nth-child(8n+5) { --vac: #f9a8d4; }
html[data-theme="dark"] .rl-tint > :nth-child(8n+6) { --vac: #c4b5fd; }
html[data-theme="dark"] .rl-tint > :nth-child(8n+7) { --vac: #fca5a5; }
html[data-theme="dark"] .rl-tint > :nth-child(8n+8) { --vac: #5eead4; }

/* ============================================================
   ARAÇ KARTI — RUHSAT BLOĞU
   ------------------------------------------------------------
   Her araç kendi kartında ve kendi ruhsatıyla duruyor; plaka rozeti
   kartın hangi araca ait olduğunu başlıkta söylüyor.
   ============================================================ */

.veh-plate {
  margin-left: .5rem; padding: .1rem .45rem; border-radius: 5px;
  font-size: .7rem; font-weight: 800; letter-spacing: .04em;
  color: #0f172a; background: #fde68a; border: 1px solid #f0cf6a;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
html[data-theme="dark"] .veh-plate { color: #1a1505; background: #d9b850; border-color: #b3933a; }

.veh-doc {
  margin-top: .7rem; padding-top: .65rem; border-top: 1px dashed var(--border);
}
.veh-doc-l {
  display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .45rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--label, var(--muted));
}
.veh-doc-list { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .5rem; }
.veh-doc-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .45rem; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.veh-doc-a { display: flex; align-items: center; gap: .55rem; flex: 1 1 auto; min-width: 0; }
.veh-doc-thumb {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 8px; object-fit: cover;
  background: var(--surface-3); border: 1px solid var(--border);
}
.veh-doc-thumb.is-file { display: grid; place-items: center; color: var(--muted); }
.veh-doc-meta { display: flex; flex-direction: column; min-width: 0; }
.veh-doc-meta b {
  font-size: .78rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.veh-doc-meta em { font-style: normal; font-size: .68rem; color: var(--muted); }
.veh-doc-del {
  display: inline-flex; align-items: center; gap: .22rem; flex-shrink: 0;
  font-size: .7rem; font-weight: 600; color: var(--danger); cursor: pointer;
}
.veh-doc-del input { accent-color: var(--danger); }
/* İşaretlenen ruhsat kaydedilince silinecek — satır bunu göstersin */
.veh-doc-item:has(.veh-doc-del input:checked) { opacity: .6; border-style: dashed; }
.veh-doc-item:has(.veh-doc-del input:checked) .veh-doc-meta b { text-decoration: line-through; }

.veh-doc-up {
  display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
  padding: .3rem .6rem; border-radius: 8px;
  font-size: .76rem; font-weight: 600; color: var(--primary);
  background: var(--primary-light); border: 1px dashed color-mix(in srgb, var(--primary) 40%, transparent);
}
.veh-doc-up:hover { border-style: solid; }
.veh-doc-picked {
  margin-left: .35rem; font-weight: 500; color: var(--success);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12rem;
}
.veh-doc-picked[hidden] { display: none; }

/* ============================================================
   ARAÇ LİSTESİ PENCERESİ (.vmg) — "Araçları yönet"
   ------------------------------------------------------------
   Kart gövdesinin salt okunur kopyası yerine açılan gerçek liste:
   her satırda ruhsat / düzenle / sil eylemleri var
   (bkz. views/customers/vehicles.php).

   Satır rengi araç panelindeki kart rengiyle AYNI paletten gelir
   (`.rl-tint`, yukarıdaki bölüm): iki ekranda "3. araç" aynı renkte.
   ============================================================ */
.vmg-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; }
.vmg-head h3 { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-size: .98rem; }
.vmg-head h3 svg { color: var(--muted); }
.vmg-head > :last-child { margin-left: auto; }

.vlist { display: flex; flex-direction: column; gap: .5rem; }
.vrow {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .5rem .7rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  border-left: 3px solid var(--vac, var(--border));
}
.vrow:hover { background: color-mix(in srgb, var(--vac, #64748b) 6%, var(--card)); }
.vrow-no {
  display: grid; place-items: center; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 7px;
  font-size: .7rem; font-weight: 800;
  color: var(--vac, var(--muted));
  background: color-mix(in srgb, var(--vac, #64748b) 15%, transparent);
}
.vrow .cdx-plate { border-left-color: var(--vac, #2563eb); }
.vrow-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 12rem; }
.vrow-info strong {
  font-size: .86rem; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vrow-info em { font-style: normal; font-size: .74rem; color: var(--muted); }
.vrow-act { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-left: auto; }
.vrow-act form { margin: 0; }
.vrow-act .lbtn { padding: .3rem .6rem; font-size: .745rem; }
.vb-doc { color: var(--success); border-color: color-mix(in srgb, var(--success) 34%, var(--border)); }
.vb-doc:hover { color: #fff; background: var(--success); border-color: transparent; }
.vb-del { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.vb-del:hover { color: #fff; background: var(--danger); border-color: transparent; }
/* Dosya seçici görünmez; tıklanan etiketin kendisi düğme gibi davranır */
.vrow-up label { margin: 0; cursor: pointer; }
.vb-up { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 32%, var(--border)); }
.vb-up:hover { color: #fff; background: var(--primary); border-color: transparent; }

@media (max-width: 620px) {
  .vrow-act { width: 100%; margin-left: 0; justify-content: flex-end; }
  .vrow-info { flex-basis: 100%; }
}

/* --- Müşteri kartındaki dar kopya -------------------------------------
   Araç listesi penceresiyle AYNI işaretleme (`.vlist.rl-tint > .vrow`),
   yalnız ölçüler dar karta göre küçültülmüş: her araç kendi çerçevesinde
   ve kendi renginde duruyor, en sağda ruhsat eylemi. Böylece iki ekranda
   "3. araç" hem aynı renkte hem aynı düzende. */
.vlist.is-compact { gap: .4rem; }
.vlist.is-compact .vrow { padding: .38rem .5rem; gap: .35rem; border-radius: 10px; }
.vlist.is-compact .vrow-no { width: 19px; height: 19px; font-size: .64rem; border-radius: 6px; }
.vlist.is-compact .cdx-plate { font-size: .7rem; padding: .08rem .4rem; }
.vlist.is-compact .cdx-tag { font-size: .625rem; padding: .08rem .38rem; }
.vlist.is-compact .vrow-act { gap: .25rem; }
.vlist.is-compact .vrow-act .lbtn { padding: .2rem .45rem; font-size: .69rem; gap: .22rem; }
.vlist.is-compact .vrow-act .lbtn svg { width: 12px; height: 12px; }

/* --- Araç satırı: tıklanınca ALTINDA açılan detay ---------------------
   Motor/şasi/belge numaraları kartta yer kaplamadan duruyor; temsilci
   hangi aracı soruyorsa onu açıyor. Ayrı bir pencere gerekmiyor.

   Satır `data-no-modal` taşır: araç kartının tamamı tıklanınca araç
   panelini açıyor (`data-row-modal`), o kural olmasa satıra tıklamak ikisini
   birden tetiklerdi (bkz. public/js/modal.js). */
.vitem { display: flex; flex-direction: column; }
.vitem > .vrow { cursor: pointer; }
.vitem > .vrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.vitem.is-open > .vrow { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.vrow-caret { display: inline-flex; color: var(--muted); transition: transform .18s; }
.vitem.is-open .vrow-caret { transform: rotate(180deg); }

.vdet {
  padding: .45rem .6rem .5rem 1.1rem;
  background: color-mix(in srgb, var(--vac, #64748b) 7%, var(--card));
  border: 1px solid var(--border); border-top: 0;
  border-left: 3px solid var(--vac, var(--border));
  border-radius: 0 0 10px 10px;
  margin-top: -1px;
}
.vdet[hidden] { display: none; }
.vdet-dl {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: .18rem .6rem; margin: 0; font-size: .755rem;
}
.vdet-dl dt { color: var(--muted); font-weight: 600; white-space: nowrap; }
.vdet-dl dd { margin: 0; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.vdet-dl dd.muted { font-weight: 500; }
.vdet-edit { margin-top: .45rem; padding: .22rem .5rem; font-size: .7rem; gap: .25rem; }
.vdet-edit svg { width: 12px; height: 12px; }

/* ============================================================
   MÜŞTERİ KARTI — EŞİT YÜKSEKLİKTE PANELLER  (.cud)
   ------------------------------------------------------------
   Paneller içerik boyunca uzayınca ızgara tırtıklı bir duvara dönüyordu:
   yanında dört satırlık kart olan tek satırlık panel ya boşluk bırakıyor
   ya da 30 satırlık "Görüşme Notları" sayfayı üç ekran aşağı itiyordu.
   Artık hepsi aynı boyda; taşan içerik kendi içinde kayıyor ve kaydırma
   olduğu gövdenin altındaki solmayla belli ediliyor.
   ============================================================ */

/* DİKKAT — seçicilerdeki `>` kasıtlı ve zorunlu.
   Kartın kök öğesi (.cud) altında yalnız KİŞİSEL BİLGİLER ızgarasının
   doğrudan çocukları hedeflenir. Daraltma olmasaydı `.cud .cd-card`
   diğer altı sekmedeki (özet, portföy, cari, teklif, hasar, aktivite)
   20'den fazla `.tgrid` kartını da sabit yüksekliğe kırpardı; o kartlar
   tablo taşıyor ve kırpılınca içerik görünmez oluyor. */
.cdx.cud .cd-grid { align-items: stretch; }
.cdx.cud .cd-grid > .cd-card {
  height: var(--cud-card-h, 372px);
  min-height: var(--cud-card-h, 372px);
  max-height: var(--cud-card-h, 372px);
}
.cud .cd-grid > .cd-card > .cdc-head { flex: 0 0 auto; }
.cud .cd-grid > .cd-card > .cdc-body {
  position: relative;
  flex: 1 1 auto; min-height: 0;
  /* Kaydırma YOK — taşan içerik alttaki "Tümünü gör" düğmesiyle modalda
     açılır (bkz. "KART İÇİ KAYDIRMA YOK" bölümü ve card-expand.js).
     Kural burada duruyor: dar ekran geçersiz kılmaları (`overflow: visible`,
     ~860px) kaynakta AŞAĞIDA ve bunu ezebilmeli. */
  overflow: hidden;
}
/* İçeriğin kırpıldığının işareti — sığdığında kaybolur. Alttaki
   "Tümünü gör" düğmesiyle birlikte okunur: solma "devamı var" der,
   düğme de onu açar.

   DİKKAT: anahtar sınıf `has-cut` ve KARTIN üzerindedir (card-expand.js onu
   yazar). Kural eskiden gövdedeki `has-more` sınıfına bakıyordu; öyle bir
   sınıfı kimse yazmadığı için solma HİÇ görünmüyordu. Sonuç: kırpılan kart
   satırın ortasından kesiliyor ve bozuk görünüyordu — kullanıcı içeriğin
   modalda durduğunu anlamıyor, "gizli kalıyor" diye bildiriyordu. */
.cud .cd-grid > .cd-card.has-cut > .cdc-body { --fade: 1; }
.cud .cd-grid > .cd-card > .cdc-body::after,
.pdx .cd-card > .cdc-body::after {
  content: ''; position: sticky; bottom: -1px; left: 0; display: block;
  height: 30px; margin-top: -30px; pointer-events: none;
  opacity: var(--fade, 0); transition: opacity .15s ease;
  background: linear-gradient(to top, var(--card) 12%, transparent);
}
/* Poliçe kartı da aynı dili konuşur (kural orada hiç yoktu) */
.pdx .cd-card.has-cut > .cdc-body { --fade: 1; }

/* ------------------------------------------------------------
   YERİNDE AÇILAN KART  (.is-expanded — bkz. card-expand.js)
   ------------------------------------------------------------
   Poliçe kartı pencere açmak yerine olduğu yerde açılır: gövde bir
   katmana dönüşüp aşağıya, komşu panellerin ÜZERİNE uzar.

   KART AKIŞTA KALIR ve 372px'lik boyunu korur — ızgara satırı
   değişmediği için altındaki hiçbir panel kaymaz, sayfa zıplamaz.
   Yalnız gövde mutlak konumlanır; kartın kendisi konumlansaydı ızgara
   gözüne değil ızgaranın tamamına göre yerleşir (gözü belirleyen bir
   `grid-row`/`grid-column` yok), kart ilk satıra zıplar ve yerini
   boşalttığı için sonraki kartlar birer göz kayardı — denendi, oldu.

   Gövdenin başlangıcı `--head-h`: başlığın yüksekliği açılış anında bir
   kez ölçülüp karta yazılıyor. Sabit bir sayı yazılabilirdi ama başlık
   iki rozetli kartta bir satır daha uzayabiliyor. */
.cdx.cud .cd-grid > .cd-card { position: relative; }
.cdx.cud .cd-grid > .cd-card.is-expanded { overflow: visible; z-index: 40; }
.cdx.cud .cd-grid > .cd-card.is-expanded > .cdc-body {
  position: absolute; top: var(--head-h, 52px); left: 0; right: 0; z-index: 2;
  max-height: min(56vh, 600px); overflow-y: auto;
  padding-bottom: 0;
  background: var(--card);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 26px 56px rgba(15, 23, 42, .26);
  --fade: 0;
}
/* Aç/kapa düğmesi kartın dibinde, yani artık katmanın ALTINDA kalıyor.
   Yerini korusun diye gizlenir, kaldırılmaz — kapanışta zıplama olmasın.
   Kapatmanın görünen yolu katmanın kendi altlığında (bkz. `.pol-foot`). */
.cdx.cud .cd-grid > .cd-card.is-expanded > .cdc-more { visibility: hidden; }
html[data-theme="dark"] .cdx.cud .cd-grid > .cd-card.is-expanded > .cdc-body {
  box-shadow: 0 26px 56px rgba(0, 0, 0, .6);
}

/* Dar ekranda kartlar zaten serbest yükseklikte ve hiç kırpılmıyor —
   açılacak bir şey yok, katman da kurulmaz. */
@media (max-width: 860px) {
  .cdx.cud .cd-grid > .cd-card.is-expanded > .cdc-body {
    position: static; max-height: none; box-shadow: none;
  }
  .cdx.cud .cd-grid > .cd-card.is-expanded > .cdc-more { visibility: visible; }
}

/* Boş kartta içerik dikey ortalanır — sabit yükseklikle birlikte
   aksi hâlde başlığın hemen altında sıkışıp 250 px boşluk bırakıyordu. */
.cud .cd-grid > .cd-card:has(> .cdc-body > .empty-card:only-child) > .cdc-body {
  display: grid; align-content: center;
}

/* Kullanıcı seçimli sütun sayısı (poliçe kartıyla aynı dil).
   Özgüllük (0,3,0): `.mdl-body .cd-grid` (0,2,0) kuralını ezmek zorunda,
   yoksa modalda iki kolonda kilitli kalır. */
.cud .cd-grid.is-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cud .cd-grid.is-c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1240px) {
  .cud .cd-grid.is-c3, .cud .cd-grid.is-c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cud .cd-grid.is-c3, .cud .cd-grid.is-c4 { grid-template-columns: 1fr; }
}
/* Modal dar: sütun sayısı ne olursa olsun ikiye iner, kart da kısalır */
.mdl-body .cud .cd-grid.is-c3,
.mdl-body .cud .cd-grid.is-c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .mdl-body .cud .cd-grid.is-c3,
  .mdl-body .cud .cd-grid.is-c4 { grid-template-columns: 1fr; }
}
.mdl-body .cdx.cud .cd-grid > .cd-card { --cud-card-h: 322px; }

/* Tıklanabilir panel: imleç ve hafif yükselme */
.cud .cd-grid > .cd-card.is-openable { cursor: pointer; transition: box-shadow .14s ease, transform .14s ease; }
.cud .cd-grid > .cd-card.is-openable:hover {
  box-shadow: 0 6px 20px rgba(15,30,50,.13); transform: translateY(-1px);
}
.cud .cd-grid > .cd-card.is-openable:hover .cdc-add { background: var(--primary); color: #fff; }
/* Gövde içindeki bağlantı ve form öğeleri kendi imlecini korur */
.cud .cd-grid > .cd-card.is-openable a,
.cud .cd-grid > .cd-card.is-openable button,
.cud .cd-grid > .cd-card.is-openable input,
.cud .cd-grid > .cd-card.is-openable textarea { cursor: auto; }
.cud .cd-grid > .cd-card.is-openable a { cursor: pointer; }

/* ---- Panel sürükleme: tutamaç, hayalet, sürükleme hâli ---- */
.cdc-grip {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 22px; height: 22px; margin: 0 .1rem 0 -.15rem;
  border: 0; border-radius: 6px; padding: 0;
  background: transparent; color: var(--muted);
  cursor: grab; opacity: 0; touch-action: none;
  transition: opacity .16s ease, background .16s ease, color .16s ease;
}
.cd-card:hover > .cdc-head > .cdc-grip,
.cdc-grip:focus-visible { opacity: 1; }
.cdc-grip:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.cdc-grip:active { cursor: grabbing; }
.cdc-grip:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
@media (hover: none) { .cdc-grip { opacity: 1; } }   /* dokunmatikte hover yok */

.cud .cd-grid > .cd-card.is-drag { opacity: .4; }
.cud.is-dragging .cd-grid > .cd-card.is-openable:hover { box-shadow: none; transform: none; }
.cud.is-dragging .cdc-body { pointer-events: none; }
.cud .cd-ghost {
  height: var(--cud-card-h, 372px); border-radius: 12px;
  border: 2px dashed color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}

/* ============================================================
   POLİÇE FORMU — DOSYA BÖLÜMÜ  (.pfd-*)
   ------------------------------------------------------------
   Poliçe detayındaki yükleme kutusuyla aynı dil, tek farkla: burada
   her dosyanın kendi tür seçicisi var (poliçe PDF'i + dekont + ruhsat
   çoğu zaman birlikte yükleniyor ve tek tür hepsini yanlış etiketliyordu).
   ============================================================ */
.pfd-drop {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.1rem 1.15rem; border-radius: 12px; cursor: pointer;
  border: 2px dashed var(--border); background: var(--bg-soft, transparent);
  color: var(--muted);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pfd-drop:hover, .pfd-drop.is-over {
  border-color: var(--primary); color: var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}
.pfd-drop span { display: flex; flex-direction: column; gap: .15rem; font-size: .86rem; }
.pfd-drop b { color: var(--text); font-weight: 600; }
.pfd-drop em { font-style: normal; font-size: .76rem; opacity: .8; }

.pfd-list { display: flex; flex-direction: column; gap: .4rem; margin-top: .7rem; }
.pfd-list[hidden] { display: none; }
.pfd-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .6rem;
  padding: .45rem .5rem .45rem .7rem; border-radius: 9px;
  border: 1px solid var(--border); background: var(--card);
}
.pfd-name { display: flex; flex-direction: column; min-width: 0; }
.pfd-name b {
  font-size: .84rem; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pfd-name em { font-style: normal; font-size: .74rem; color: var(--muted); }
.pfd-type { min-width: 160px; font-size: .82rem; padding: .35rem .5rem; }
.pfd-del {
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--border); border-radius: 7px; cursor: pointer;
  background: var(--card); color: var(--muted); font-size: 1.05rem; line-height: 1;
  transition: color .14s ease, border-color .14s ease;
}
.pfd-del:hover { color: #dc2626; border-color: #dc2626; }

/* Düzenlemede: zaten yüklü evraklar — aynı dosya ikinci kez yüklenmesin */
.pfd-have { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .8rem; }
.pfd-have-cap {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; font-weight: 600; color: var(--muted); margin-right: .2rem;
}
.pfd-chip {
  display: inline-flex; align-items: center; gap: .35rem; max-width: 260px;
  padding: .28rem .55rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card);
  font-size: .78rem; color: var(--text); text-decoration: none !important;
}
.pfd-chip:hover { border-color: var(--primary); color: var(--primary); }
.pfd-chip em {
  font-style: normal; font-size: .66rem; font-weight: 700; letter-spacing: .03em;
  padding: .1rem .3rem; border-radius: 4px;
  background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary);
}
.pfd-chip b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfd-chip i { font-style: normal; font-size: .72rem; color: var(--muted); }

@media (max-width: 620px) {
  .pfd-row { grid-template-columns: 1fr auto; }
  .pfd-type { grid-column: 1 / -1; min-width: 0; width: 100%; }
}

/* Görünüm anahtarı sekme şeridinin sağ ucuna yaslanır. Yalnız Kişisel
   Bilgiler ızgarası için anlamlı olduğundan başka sekmedeyken gizlenir
   (bkz. customer-detail.js) — orada basılınca hiçbir şey olmaması,
   düğmenin bozuk olduğu izlenimi verirdi. */
.cd-tabs-end {
  display: flex; align-items: center; gap: .5rem;
  margin-left: auto; align-self: center; padding-bottom: .35rem;
}
.cud-viewsw[hidden] { display: none; }
/* Görüşme notu en sık girilen kayıt — şeritte kendini belli etsin.
   Renk, Görüşme Notları kartının tonuyla (mor) aynı: düğme ile açtığı
   panel arasındaki bağ renkle kuruluyor. */
.cud-notebtn {
  white-space: nowrap;
  color: #fff; background: #7c3aed; border-color: #7c3aed;
}
.cud-notebtn:hover { color: #fff; border-color: #7c3aed; filter: brightness(1.08); }
@media (max-width: 860px) {
  .cd-tabs-end { margin-left: 0; width: 100%; justify-content: space-between; }
}
.cdx-reset {
  display: grid; place-items: center; width: 26px; height: 26px;
  margin-right: .15rem; padding: 0;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--card); color: var(--muted); cursor: pointer;
  transition: color .14s ease, border-color .14s ease, transform .14s ease;
}
.cdx-reset:hover { color: var(--primary); border-color: var(--primary); transform: rotate(-40deg); }
.cdx-reset:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Sıra kaydedildi / kaydedilemedi balonu. Sayfa yenilenmediği için
   uygulamanın flash şeridi kullanılamıyor; geri bildirim şart. */
.cud-toast {
  position: fixed; z-index: 9000; left: 50%; bottom: 26px; transform: translateX(-50%);
  max-width: min(90vw, 420px);
  padding: .6rem 1rem; border-radius: 10px;
  background: #0f172a; color: #fff; font-size: .84rem; font-weight: 600;
  box-shadow: 0 10px 30px rgba(15, 30, 50, .28);
  opacity: 1; transition: opacity .35s ease, transform .35s ease;
}
.cud-toast.is-err { background: #b91c1c; }
.cud-toast.is-out { opacity: 0; transform: translate(-50%, 8px); }
@media (prefers-reduced-motion: reduce) {
  .cud-toast, .cdx-reset, .cdc-grip { transition: none; }
}

/* Dar ekranda sabit yükseklik iyi değil: kart içeriği kadar uzar.
   Eşik `@container cdx` ile aynı yere (860px) çekildi — daha önce ızgara
   860'ta tek kolona düşerken kırpma 700'e kadar sürüyor, aradaki bütün
   genişliklerde tek kolonluk kartlar 352 px'e kırpılıp çift kaydırma
   üretiyordu. */
@container cdx (max-width: 860px) {
  .cdx.cud .cd-grid > .cd-card { height: auto; min-height: 0; max-height: none; }
  .cud .cd-grid > .cd-card > .cdc-body { overflow: visible; }
  .cud .cd-grid > .cd-card > .cdc-body::after { display: none; }
  .cud .cd-ghost { height: 120px; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 860px) {
    .cdx.cud .cd-grid > .cd-card { height: auto; min-height: 0; max-height: none; }
    .cud .cd-grid > .cd-card > .cdc-body { overflow: visible; }
    .cud .cd-grid > .cd-card > .cdc-body::after { display: none; }
    .cud .cd-ghost { height: 120px; }
  }
}

/* --- Bilgi şeridi: kapatma düğmesi ve süre çizgisi --- */
.flash {
  position: relative; display: flex; align-items: flex-start; gap: .6rem;
  overflow: hidden;
  transition: opacity .25s ease, transform .25s ease, margin .25s ease, max-height .25s ease;
}
.flash > span { flex: 1 1 auto; min-width: 0; }
.flash-x {
  flex-shrink: 0; width: 22px; height: 22px; margin: -.1rem -.3rem 0 0;
  display: grid; place-items: center; border: 0; border-radius: 6px;
  background: transparent; color: inherit; opacity: .55;
  font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.flash-x:hover { opacity: 1; background: rgba(0,0,0,.07); }
html[data-theme="dark"] .flash-x:hover { background: rgba(255,255,255,.12); }

/* Kalan süre: şeridin altındaki ince çizgi tükenir */
.flash[data-flash]::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: currentColor; opacity: .35; transform-origin: left center;
  animation: flashSure var(--flash-sure, 10s) linear forwards;
}
.flash[data-flash]:hover::after { animation-play-state: paused; }
@keyframes flashSure { to { transform: scaleX(0); } }

/* Kapanış */
.flash.is-out {
  opacity: 0; transform: translateY(-6px);
  max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;
}

/* Hareket azaltma tercihinde çizgi ve geçiş kapalı — şerit yine kapanır */
@media (prefers-reduced-motion: reduce) {
  .flash[data-flash]::after { animation: none; opacity: 0; }
  .flash { transition: none; }
}

/* ============================================================
   TEMSİLCİ / BROKER PANELİ — ORTA VE ALT ŞERİT
   ------------------------------------------------------------
   Yönetici panelinde orta satırı Ekip Üretim tablosu taşıyor;
   temsilci/broker panelinde öyle bir tablo yok, iki dağılım grafiği
   satırı yarı yarıya paylaşıp gereğinden büyük duruyordu. Artık satır
   dört çeyrek:
       [ 2/4 tablo ] [ 1/4 şirket ] [ 1/4 tür ]
   Soldaki tablo broker'da Geçmiş Komisyonlar, temsilcide Yaklaşan
   Yenilemeler. Alt şerit de üç çeyrekten iki yarıya indi
   (Süresi Geçmiş + Son Eklenen).

   Kurallar dosyanın sonunda: `.dash-mid` hem `.dash-bottom` kolon
   şablonunu hem de onun medya sorgularını ezmek zorunda (medya sorgusu
   özgüllük katmaz — sonra gelen kural kazanır), bu yüzden kendi kırılım
   noktalarını burada yeniden kurar.
   ============================================================ */

/* --- Orta şerit: 2/4 + 1/4 + 1/4 --- */
.dash-mid { grid-template-columns: 2fr minmax(0, 1fr) minmax(0, 1fr); }
/* Çeyrek kolon ~330 px'in altına inince grafik okunmuyor: önce ikiye,
   sonra tek kolona düşer. */
/* Ara düzende tablo tam genişliğe çıkar, iki grafik altında yarımşar durur —
   aksi halde üç kart iki kolona sığmayıp ikinci satırda boş bir göz kalıyordu. */
@media (max-width: 1400px) and (min-width: 821px) {
  .dash-mid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dash-mid > .dash-card:first-child { grid-column: 1 / -1; }
}
@media (max-width: 820px) { .dash-mid { grid-template-columns: minmax(0, 1fr); } }

/* Satır yüksekliğini soldaki tablo belirlemesin: uzun liste kendi içinde
   kayar, başlık yerinde durur. Aksi halde 10 satırlık komisyon tablosu
   yanındaki grafikleri gereksiz uzatıyordu. */
.dash-mid > .dash-card > .table-scroll { max-height: 21rem; overflow-y: auto; scrollbar-width: thin; }
.dash-mid .team-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}

/* --- Dörtte birlik dağılım kartları --- */
/* Grafik kabı: kart ne kadar uzarsa uzasın çizim alanı tavanlı kalır;
   dar kolonda dev bir donut yerine oranlı, sakin bir grafik. */
.dash-mid .chart-fill { min-height: 170px; }
.dash-mid .donut-wrap.chart-fill { min-height: 170px; max-height: 250px; }
.dash-mid .hbar-wrap { min-height: 0; }
.dist-card .card-head { gap: .4rem; }
.dist-card .card-head h3 { font-size: .84rem; }
.dist-card .head-note { display: none; }          /* "Bu Ay" dar başlıkta yer yiyor */
.dist-card .head-btn { padding-inline: .45rem; font-size: .68rem; }

/* Tür legend'i kartı aşağı çekmesin: kendi içinde kayar. `margin-top: auto`
   legend'i kartın altına yapıştırır — donut tavana dayandığında artan boşluk
   kartın dibinde değil, grafikle legend arasında nefes payı olarak durur. */
.dash-mid .legend-tags {
  max-height: 7.5rem; overflow-y: auto; gap: .28rem .4rem;
  margin-top: .7rem; scrollbar-width: thin;
}
.dash-mid .donut-wrap.chart-fill + .legend-tags { margin-top: auto; padding-top: .8rem; }
.dash-mid .legend-tag { padding: .15rem .5rem .15rem .15rem; }
.dash-mid .lt-av { width: 18px; height: 18px; font-size: .54rem; }
.dash-mid .lt-nm { font-size: .67rem; max-width: 9ch; }
.dash-mid .lt-pct { font-size: .64rem; }

/* --- Alt şerit: iki tablo, ikişer çeyrek --- */
.pl-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .pl-duo { grid-template-columns: minmax(0, 1fr); } }

/* Yarım genişlikte kolon gizlemeye gerek yok — tüm sütunlar görünür.
   Kazanılan yer satır nefesine gidiyor: daha ferah hücre dolgusu,
   çerçeveli tablo gövdesi, yapışkan başlık. */
.pl-duo > .dash-card { display: flex; flex-direction: column; }
.pl-duo .table-scroll {
  max-height: 23rem; overflow-y: auto; scrollbar-width: thin;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--card);
}
.pl-duo .table-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.pl-duo .table-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px; background: color-mix(in srgb, var(--muted) 30%, transparent);
}
.pl-duo .table-scroll::-webkit-scrollbar-track { background: transparent; }
.pl-duo .dtab thead th { padding: .55rem .7rem; background: var(--surface-2); }
.pl-duo .dtab tbody td { padding: .56rem .7rem; }
.pl-duo .dtab tbody tr:last-child td { border-bottom: 0; }
.pl-duo .pl-empty { border: 1px dashed var(--border); border-radius: 12px; }

/* --- Özet şeridi: başlığın altında üç ölçüm --- */
/* Kartın üstü boş bir başlık şeridiyken artık listenin ne kadar iş
   olduğunu söylüyor: adet, tutar ve zaman ucu. Renk kartın aksanından
   (`--ac`) geliyor; iki kart yan yanayken hangisine baktığınız okunur. */
.pl-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem; margin: 0 0 .75rem;
}
.pl-strip > div {
  padding: .42rem .6rem; border-radius: 10px; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--border);
}
.pl-strip span {
  display: block; font-size: .6rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--label);
}
.pl-strip b {
  display: block; font-size: .88rem; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--ac, var(--text));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================
   AKSİYON MERKEZİ  (.ac-card)
   ------------------------------------------------------------
   Sıralama Tablosu'nun yerini aldı. Her satır bir eşiği aşmış sayı ve o
   listeye giden bağlantı; eşiği aşmayan satır hiç basılmıyor. Ton
   (`t-crit/t-warn/t-info/t-calm`) tek bir `--t` değişkeni kurar; satırın
   kenar çizgisi, ikon zemini ve rakam rengi ondan türer.
   ============================================================ */

.ac-card { display: flex; flex-direction: column; }
.ac-note-crit {
  color: var(--danger); font-weight: 700;
  background: color-mix(in srgb, var(--danger) 13%, transparent);
}
.ac-list { display: flex; flex-direction: column; gap: .4rem; }

.ac-row {
  display: flex; align-items: center; gap: .55rem;
  padding: .48rem .55rem; border-radius: 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--t, #94a3b8);
  color: inherit; text-decoration: none !important;
  transition: transform .13s ease, box-shadow .13s ease, background .13s ease;
}
a.ac-row:hover {
  transform: translateX(2px); background: var(--card); box-shadow: var(--sh-sm);
}
a.ac-row:focus-visible { outline: 2px solid var(--t, var(--primary)); outline-offset: 1px; }
.ac-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 8px;
  color: var(--t, var(--muted));
  background: color-mix(in srgb, var(--t, #94a3b8) 14%, transparent);
}
.ac-txt { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
/* Rengi açıkça kur: satır `<a>` olduğunda koyu temanın bağlantı yeşili
   miras yoluyla etiketi de boyuyordu. */
.ac-txt b {
  font-size: .765rem; font-weight: 700; line-height: 1.25; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ac-txt em { font-style: normal; font-size: .645rem; color: var(--muted); }
.ac-val {
  flex-shrink: 0; font-size: .85rem; font-weight: 800;
  color: var(--t, var(--text)); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ac-go { display: inline-flex; flex-shrink: 0; }
.ac-go svg { color: var(--muted); opacity: .45; }
a.ac-row:hover .ac-go svg { opacity: .9; }

.ac-row.t-crit { --t: #dc2626; }
.ac-row.t-warn { --t: #b45309; }
.ac-row.t-info { --t: #0891b2; }
.ac-row.t-calm { --t: #64748b; }
html[data-theme="dark"] .ac-row.t-crit { --t: #f87171; }
html[data-theme="dark"] .ac-row.t-warn { --t: #fbbf24; }
html[data-theme="dark"] .ac-row.t-info { --t: #38bdf8; }
html[data-theme="dark"] .ac-row.t-calm { --t: #94a3b8; }

/* --- Broker: en yakın beş yenileme --- */
/* Broker'ın orta satırı komisyon tablosuna ayrıldığı için tam yenileme
   tablosu yok; kaçmaması gereken beş kayıt burada duruyor, satıra
   tıklayınca poliçe kartı modalda açılıyor. */
/* `margin-top: auto`: uyarı listesi üstte, yenilemeler kartın dibinde.
   Satırdaki komşu kartlar daha uzun olduğunda artan boşluk ikisinin
   arasına düşer — kartın altında sarkan boşluk kalmaz. */
.ac-sec { margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--border); }
.ac-card:has(.ac-sec) .ac-list { margin-bottom: .85rem; }
.ac-sec-h {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-bottom: .45rem;
  font-size: .655rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--label);
}
.ac-sec-h > span { display: inline-flex; align-items: center; gap: .3rem; }
/* Satır kabuğu sağ kolondaki fırsat listesiyle aynı (bkz. .wopp-row): ince
   ayırıcı çizgiler yerine kendi zemini olan kartlar, aciliyet sol kenarda. */
.ac-mini { display: flex; flex-direction: column; gap: .3rem; }
.ac-mrow {
  display: flex; align-items: center; gap: .5rem;
  padding: .36rem .45rem; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--t, #94a3b8);
  cursor: pointer;
  transition: background .13s ease, box-shadow .13s ease;
}
.ac-mrow:hover, .ac-mrow:focus-visible {
  outline: none; background: var(--card); box-shadow: var(--sh-sm);
}
.ac-mrow.t-crit { --t: #dc2626; }
.ac-mrow.t-warn { --t: #b45309; }
.ac-mrow.t-info { --t: #0891b2; }
html[data-theme="dark"] .ac-mrow.t-crit { --t: #f87171; }
html[data-theme="dark"] .ac-mrow.t-warn { --t: #fbbf24; }
html[data-theme="dark"] .ac-mrow.t-info { --t: #38bdf8; }
/* AKIBETİ BELLİ OLAN SATIR — sol çerçeve aciliyeti değil SONUCU anlatır.
   Yukarıdaki üç ton "kaç gün kaldı" sorusunun cevabı; yenilenmiş bir
   poliçe ile daha yenilenmemiş biri aynı güne düştüğünde ikisi de aynı
   renkte çıkıyor ve ayırt edilemiyordu. Karar verilmişse soru artık
   "kaç gün kaldı" değil, "ne oldu": mor yenilendi, turuncu yenilenmedi.
   Rozet rengi DEĞİŞMEZ — o yeşil/kırmızı kalır (bkz. `.lt-renew`). */
.ac-mrow.t-renewed   { --t: var(--mark-renewed); }
.ac-mrow.t-unrenewed { --t: var(--mark-unrenewed); }
/* İki satırlık gövde: müşteri adı + "şirket · branş" */
.ac-mtxt { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.ac-mtxt b {
  font-size: .745rem; font-weight: 700; line-height: 1.25; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ac-mtxt em {
  font-style: normal; font-size: .635rem; line-height: 1.3; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ac-mamt {
  flex-shrink: 0; font-size: .73rem; font-weight: 700;
  color: var(--text-2); font-variant-numeric: tabular-nums;
}

/* ============================================================
   SAĞ KOLON FIRSAT ÖZETİ  (.wopp)
   ------------------------------------------------------------
   Widget ızgarasının altındaki alanı eskiden üç ölü kısayol dolduruyordu
   (Bilgi Bankası, Destek Talebi, Havuzda Bul — hepsi href="#"). Yerine
   Satış Fırsatları listesi geldi: kutucuklar sabit boy, liste kalan
   boşluğu kaplar. Komşu kartlar uzadıkça liste uzar; sığmazsa kendi
   içinde kayar — kart, satırın boyunu büyütmez.

   Satır rengi ÖNCELİĞİ değil KATEGORİYİ anlatır (`k-*`): liste skora göre
   sıralı olduğu için ilk altı satır neredeyse her zaman "Acil" çıkıyor ve
   altı kırmızı satır hiçbir şey ayırt etmiyordu. Renk artık fırsatın
   türünü söyler — BUGÜNÜM widget'ındaki `.reco-*` paletiyle aynı aile.
   ============================================================ */

.widget-grid-card { display: flex; flex-direction: column; }
.widget-grid-card > .wgrid { flex: 0 0 auto; align-content: start; }

.wopp {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
  margin-top: .8rem; padding-top: .6rem;
  border-top: 1px solid var(--border);
}
.wopp .ac-sec-h { margin-bottom: .4rem; }
.wopp-list {
  display: flex; flex-direction: column; gap: .3rem;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  /* Kaydırma çubuğu satırlara yapışmasın */
  padding-right: 2px;
  scrollbar-width: thin;
}
.wopp-row {
  display: flex; align-items: stretch; flex: 0 0 auto;
  border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--t, #94a3b8);
  transition: background .13s ease, box-shadow .13s ease;
}
.wopp-row:hover { background: var(--card); box-shadow: var(--sh-sm); }
.wopp-row.k-kazanim  { --t: #dc2626; }
.wopp-row.k-capraz   { --t: #4f46e5; }
.wopp-row.k-profil   { --t: #0d9488; }
.wopp-row.k-yasam    { --t: #db2777; }
.wopp-row.k-yenileme { --t: #b45309; }
html[data-theme="dark"] .wopp-row.k-kazanim  { --t: #f87171; }
html[data-theme="dark"] .wopp-row.k-capraz   { --t: #a5b4fc; }
html[data-theme="dark"] .wopp-row.k-profil   { --t: #5eead4; }
html[data-theme="dark"] .wopp-row.k-yasam    { --t: #f9a8d4; }
html[data-theme="dark"] .wopp-row.k-yenileme { --t: #fbbf24; }
.wopp-hit {
  display: flex; align-items: center; gap: .5rem;
  flex: 1 1 auto; min-width: 0;
  padding: .38rem .45rem;
  color: inherit; text-decoration: none !important;
}
.wopp-hit:focus-visible { outline: 2px solid var(--t, var(--primary)); outline-offset: -2px; border-radius: 8px; }
.wopp-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 7px;
  color: var(--t, var(--muted));
  background: color-mix(in srgb, var(--t, #94a3b8) 14%, transparent);
}
.wopp-txt { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
/* Renk açıkça kurulu: satır <a> olduğunda koyu temanın bağlantı rengi
   miras yoluyla müşteri adını da boyuyordu (bkz. .ac-txt). */
.wopp-txt b {
  font-size: .745rem; font-weight: 700; line-height: 1.25; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wopp-txt em {
  font-style: normal; font-size: .635rem; line-height: 1.3; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wopp-val { flex-shrink: 0; display: flex; align-items: center; }
.wopp-val b {
  font-size: .755rem; font-weight: 800; white-space: nowrap;
  color: var(--t, var(--text)); font-variant-numeric: tabular-nums;
}
/* Tutar tahmini yoksa öncelik etiketi geçer: rakam yerine rozet tipografisi */
.wopp-val b.wopp-pr {
  font-size: .615rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.wopp-act {
  display: grid; place-items: center; flex-shrink: 0; width: 26px;
  border-left: 1px solid var(--border); border-radius: 0 9px 9px 0;
  color: var(--muted); text-decoration: none !important;
  transition: background .13s ease, color .13s ease;
}
.wopp-act:hover { color: #fff; background: var(--primary); }
.wopp-empty { padding: 1.1rem .6rem; }
.wopp-empty strong { font-size: .8rem; }
.wopp-empty span { font-size: .72rem; }

/* ============================================================
   SAĞ KOLON GÖREV ÖZETİ  (.tkm) — Patron / Müdür
   ------------------------------------------------------------
   Aynı alanın yönetici karşılığı: yedi firma kısayolu (Tüm Personel …
   Veri Aktar) kaldırıldı, tam genişlikteki Ekip Görev Yönetimi paneli
   buraya sadeleşerek taşındı. Kolonun kutucukları üstte "Bugünkü /
   Yarınki Görevler" sayılarını zaten basıyor; panel onları tekrar
   etmez, kutucuklardan çıkarılamayan üçünü taşır: tamamlanma oranı,
   gecikmiş görev ve bugünün yükünün kimde olduğu.

   Yükseklik `.wopp` ile aynı kuralda: kutucuklar sabit, panel kalan
   boşluğu kaplar, üye listesi sığmazsa kendi içinde kayar — kart
   satırın boyunu büyütmez.
   ============================================================ */

.tkm {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
  margin-top: .8rem; padding-top: .6rem;
  border-top: 1px solid var(--border);
}
.tkm .ac-sec-h { margin-bottom: .45rem; }

/* --- Tamamlanma kutusu --- */
.tkm-done {
  display: block; flex: 0 0 auto;
  padding: .45rem .55rem .5rem; margin-bottom: .4rem;
  border-radius: 11px; text-decoration: none !important;
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--success) 12%, transparent),
      color-mix(in srgb, var(--success) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--success) 26%, transparent);
  transition: box-shadow .13s ease, transform .13s ease;
}
.tkm-done:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); }
.tkm-done-t { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.tkm-done-t b {
  font-size: 1.02rem; font-weight: 800; line-height: 1;
  color: var(--success); font-variant-numeric: tabular-nums;
}
.tkm-done-t em {
  font-style: normal; font-size: .655rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* `display: block` şart: buradaki ilerleme çubuğu `<span>` (kutunun tamamı
   bağlantı olduğu için `<div>` konulamıyor). Temel `.progress` kuralı display
   belirlemediğinden satır içi kalıyor, yükseklik/overflow uygulanmıyor ve
   içindeki çubuk alttaki "Gecikmiş görev" satırının üstüne biniyordu. */
.tkm-done .progress {
  display: block; height: 6px; margin: 0;
  background: color-mix(in srgb, var(--success) 16%, transparent);
}

/* --- Acil aksiyon satırı (fırsat/yenileme satırlarıyla aynı kabuk) --- */
.tkm-row {
  display: flex; align-items: center; gap: .5rem; flex: 0 0 auto;
  padding: .4rem .45rem; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--t, #94a3b8);
  color: inherit; text-decoration: none !important;
  transition: background .13s ease, box-shadow .13s ease;
}
.tkm-row:hover { background: var(--card); box-shadow: var(--sh-sm); }
.tkm-row.t-crit { --t: #dc2626; }
.tkm-row.t-calm { --t: #16a34a; }
html[data-theme="dark"] .tkm-row.t-crit { --t: #f87171; }
html[data-theme="dark"] .tkm-row.t-calm { --t: #34d399; }
.tkm-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 7px;
  color: var(--t, var(--muted));
  background: color-mix(in srgb, var(--t, #94a3b8) 14%, transparent);
}
.tkm-txt { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.tkm-txt b {
  font-size: .745rem; font-weight: 700; line-height: 1.25; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tkm-txt em { font-style: normal; font-size: .635rem; line-height: 1.3; color: var(--muted); }
.tkm-val {
  flex-shrink: 0; font-size: .85rem; font-weight: 800;
  color: var(--t, var(--text)); font-variant-numeric: tabular-nums;
}
.tkm-go { display: inline-flex; flex-shrink: 0; }
.tkm-go svg { color: var(--muted); opacity: .45; }
.tkm-row:hover .tkm-go svg { opacity: .9; }

/* --- Bugünün yükü: ekip üyesi kırılımı --- */
.tkm-sec {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin: .55rem 0 .3rem;
  font-size: .625rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--label);
}
.tkm-sec > span { display: inline-flex; align-items: center; gap: .3rem; }
.tkm-sec > em { font-style: normal; letter-spacing: 0; text-transform: none; color: var(--muted); }
/* En fazla dört üye satırı basılır (bkz. task-mini.php); `max-height` yine de
   ikinci bir emniyet: liste hiçbir veride kartı satırdan uzun yapmaz. */
.tkm-reps {
  display: flex; flex-direction: column; gap: .25rem;
  flex: 1 1 auto; min-height: 0; max-height: 8.5rem; overflow-y: auto;
  padding-right: 2px; scrollbar-width: thin; scrollbar-gutter: stable;
  /* `overscroll-behavior: contain` yok: liste dibinde panel/sayfa devam etsin */
}
.tkm-more {
  display: flex; align-items: center; justify-content: center; gap: .25rem;
  flex: 0 0 auto; margin-top: .1rem; padding: .2rem;
  font-size: .655rem; font-weight: 700; color: var(--primary);
  text-decoration: none !important;
}
.tkm-more:hover { text-decoration: underline !important; }
.tkm-rep {
  display: flex; align-items: center; gap: .45rem; flex: 0 0 auto;
  padding: .26rem .4rem; border-radius: 9px;
  color: inherit; text-decoration: none !important;
  transition: background .13s ease;
}
.tkm-rep:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.tkm-av {
  display: grid; place-items: center; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 6px;
  font-size: .575rem; font-weight: 800; letter-spacing: .01em;
  color: #fff; background: linear-gradient(135deg, #6366f1, #4338ca);
}
.tkm-rep-n {
  flex: 1 1 auto; min-width: 0; font-size: .715rem; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tkm-rep-c {
  flex-shrink: 0; min-width: 20px; text-align: center;
  padding: .04rem .3rem; border-radius: 999px;
  font-size: .655rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--primary); background: color-mix(in srgb, var(--primary) 11%, transparent);
}
.tkm-empty { margin: .2rem 0 0; font-size: .7rem; color: var(--muted); }

/* ============================================================
   CARİ İŞLEMLER  (.cari-form · .cari-pay)
   ------------------------------------------------------------
   Liste ekranı Müşterilerim/Poliçelerim ile aynı `.dash .lst`
   bileşenlerini kullanır; burada yalnız cariye özgü parçalar
   tanımlıdır: modal formdaki müşteri arama açılırı, şablon
   düğmeleri ve poliçe ödeme penceresi.
   ============================================================ */

/* Tahsilat yeşil, borç kırmızı — üç ekranda da (liste, müşteri kartı
   cari sekmesi, ödeme penceresi) aynı iki renk okunur. */
.cr-in  { color: var(--success); }
.cr-out { color: var(--danger); }

/* --- Kilitli taraf rozeti (düzenlemede müşteri değişmez) --- */
.cari-party {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .7rem; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.cari-party .cp-av {
  display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 9px; color: #fff; background: var(--brand-grad, var(--primary));
}
.cari-party b { font-size: .86rem; font-weight: 700; }
.cari-party em { font-style: normal; font-size: .74rem; color: var(--muted); }

/* --- Müşteri arama açılırı --- */
.cari-results {
  margin-top: .35rem; max-height: 15rem; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); box-shadow: var(--sh-md);
  scrollbar-width: thin;
}
.cari-results[hidden] { display: none; }
.cari-results .cr-item {
  display: flex; flex-direction: column; gap: .1rem; width: 100%;
  padding: .45rem .65rem; border: 0; border-bottom: 1px solid var(--border);
  background: transparent; text-align: left; cursor: pointer; color: inherit;
}
.cari-results .cr-item:last-child { border-bottom: 0; }
.cari-results .cr-item:hover,
.cari-results .cr-item:focus-visible {
  outline: none; background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.cari-results .cr-item b { font-size: .82rem; font-weight: 700; }
.cari-results .cr-item em { font-style: normal; font-size: .7rem; color: var(--muted); }
.cari-results .cr-empty { padding: .6rem .65rem; font-size: .78rem; color: var(--muted); }

/* --- Hızlı şablon düğmeleri --- */
.cari-tpl { display: flex; flex-wrap: wrap; gap: .4rem; }
.ctpl {
  display: inline-flex; align-items: center; gap: .32rem;
  padding: .32rem .6rem; border-radius: 999px; cursor: pointer;
  font-size: .75rem; font-weight: 600; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: border-color .13s ease, background .13s ease, transform .13s ease;
}
.ctpl:hover { transform: translateY(-1px); border-color: var(--primary); }
.ctpl.on {
  color: var(--primary); background: var(--primary-light);
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
}
.ctpl span { font-size: .9rem; line-height: 1; }

/* ============================================================
   POLİÇE ÖDEME PENCERESİ  (.cari-pay)
   ------------------------------------------------------------
   Poliçe kaydedildikten sonra otomatik açılır. Üstte poliçenin
   ödeme karnesi, altında tahsilat formu, en altta o poliçenin
   cari hareketleri.
   ============================================================ */

.cari-pay .pay-lead { margin-bottom: .8rem; }
.cari-pay .pay-lead b { color: var(--success); }

/* ---- Taksitli ödeme bloğu (tahsilat penceresi) ---- */
.pay-inst {
  margin: .8rem 0; padding: .75rem .8rem; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
}
.pay-inst h4 {
  display: flex; align-items: center; gap: .4rem;
  margin: 0 0 .6rem; font-size: .82rem; font-weight: 700;
}
.pay-seg .seg-opt span em {
  display: block; font-size: .64rem; font-weight: 500; font-style: normal; opacity: .75;
}
.inst-sum {
  display: flex; flex-direction: column; gap: .28rem;
  padding: .5rem .6rem; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
}
.inst-sum div { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.inst-sum span { font-size: .72rem; color: var(--muted); }
.inst-sum b { font-size: .78rem; font-variant-numeric: tabular-nums; }
.inst-sum b.is-hi { color: var(--primary); font-size: .86rem; font-weight: 800; }

/* ---- Poliçe kartındaki taksit tablosu ---- */
.pdx-inst { display: flex; flex-direction: column; gap: .3rem; }
.pdx-inst-row {
  display: flex; align-items: center; gap: .55rem;
  padding: .38rem .5rem; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--border);
}
.pdx-inst-row.is-paid { border-left-color: var(--success); }
.pdx-inst-row.is-due  { border-left-color: var(--warning, #d97706); }
.pdx-inst-row.is-late { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, transparent); }
.pdx-inst-no {
  flex-shrink: 0; min-width: 2.6rem; font-size: .7rem; font-weight: 700; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.pdx-inst-d { flex: 1 1 auto; min-width: 0; font-size: .72rem; color: var(--muted); }
.pdx-inst-a { flex-shrink: 0; font-size: .76rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pdx-inst-s { flex-shrink: 0; }

.pay-policy {
  padding: .75rem .85rem; margin-bottom: 1rem;
  border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border);
}
.pay-policy .pp-head {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin-bottom: .6rem;
}
.pay-policy .pp-no {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .84rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.pay-policy .pp-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem;
  margin-bottom: .6rem;
}
.pay-policy .pp-grid > div { min-width: 0; }
.pay-policy .pp-grid span {
  display: block; font-size: .62rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--label);
}
.pay-policy .pp-grid b {
  display: block; font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pay-policy .progress { margin-bottom: 0; }

.pay-done {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: 1.4rem 1rem; text-align: center; color: var(--muted);
  border: 1px dashed var(--border); border-radius: 12px;
}
.pay-done svg { color: var(--success); margin-bottom: .3rem; }
.pay-done strong { color: var(--text); font-size: .9rem; }
.pay-done span { font-size: .78rem; }

/* --- Poliçenin cari hareketleri --- */
.pay-hist { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.pay-hist h4 {
  display: flex; align-items: center; gap: .35rem; margin: 0 0 .5rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--label);
}
.ph-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .38rem .1rem; border-bottom: 1px solid var(--border);
  font-size: .77rem;
}
.ph-row:last-child { border-bottom: 0; }
.ph-row .ph-date { flex-shrink: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.ph-row .ph-desc {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ph-row b { flex-shrink: 0; font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .pay-policy .pp-grid { grid-template-columns: 1fr 1fr; }
  .ph-row .ph-date { display: none; }
}

/* Müşteri kartı cari sekmesindeki satır eylemleri (düzenle / sil) */
.cdx-rowact { display: inline-flex; align-items: center; gap: .3rem; }
.cdx-rowact form { display: inline-flex; }
/* Poliçe kartındaki "Tahsilat Ekle" düğmesi ödeme bloğundan ayrılsın */
.pdx-pay-add { margin-top: .7rem; }

/* ============================================================
   HASAR YÖNETİMİ  (.claim-card · .cl-*)
   ------------------------------------------------------------
   Liste ekranı `.dash .lst` bileşenlerini kullanır; buradaki
   kurallar hasar dosyasına özgü parçalar içindir: SLA rozeti,
   dosya künyesi, tutar üçlüsü, evrak listesi ve zaman çizelgesi.
   ============================================================ */

/* --- SLA rozeti: listede ve dosya kartında aynı dil --- */
.cl-sla {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .12rem .45rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700; white-space: nowrap;
  color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border);
}
.cl-sla.is-soon { color: #b45309; background: rgba(180,83,9,.09); border-color: rgba(180,83,9,.3); }
.cl-sla.is-over { color: #b91c1c; background: rgba(185,28,28,.09); border-color: rgba(185,28,28,.32); }
html[data-theme="dark"] .cl-sla.is-soon { color: #fcd34d; background: rgba(252,211,77,.12); border-color: rgba(252,211,77,.28); }
html[data-theme="dark"] .cl-sla.is-over { color: #fca5a5; background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.3); }

/* ============================================================
   DOSYA KARTI  (.claim-card)
   ============================================================ */

.claim-card { display: flex; flex-direction: column; }

.cl-head {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  flex-wrap: wrap; margin-bottom: .85rem;
}
.cl-head-main { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.cl-no {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .95rem; font-weight: 800; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

/* --- Müşteri / poliçe / tür künyesi --- */
.cl-party {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem;
  margin-bottom: .85rem;
}
.cl-party-i {
  display: flex; flex-direction: column; gap: .1rem; min-width: 0;
  padding: .5rem .65rem; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: inherit; text-decoration: none !important;
  transition: border-color .13s ease, transform .13s ease;
}
a.cl-party-i:hover { border-color: var(--primary); transform: translateY(-1px); }
.cl-party-i > span {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--label);
}
.cl-party-i b {
  font-size: .84rem; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-party-i em {
  font-style: normal; font-size: .68rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Tutar üçlüsü: talep / onay / ödeme --- */
.cl-money {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem;
  margin-bottom: .9rem;
}
.cl-money > div {
  padding: .5rem .65rem; border-radius: 11px; min-width: 0;
  background: var(--card); border: 1px solid var(--border);
}
.cl-money span {
  display: block; font-size: .62rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--label);
}
.cl-money b {
  display: block; font-size: .98rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-money b.muted { font-weight: 600; color: var(--muted); }

/* --- Açıklama / not --- */
.cl-text h4,
.cl-sec h4 {
  display: flex; align-items: center; gap: .35rem; margin: 0 0 .4rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--label);
}
.cl-text p { margin: 0; font-size: .84rem; line-height: 1.6; }
.cl-text .cl-note {
  padding: .55rem .7rem; border-radius: 10px;
  background: var(--surface-2); border-left: 3px solid var(--warn, #d97706);
}

/* --- Durum akışı düğmeleri --- */
.cl-flow {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  margin: 1rem 0; padding: .6rem .7rem;
  border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--border);
}
.cl-flow-l {
  display: inline-flex; align-items: center; gap: .3rem; margin-right: .2rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--label);
}
.cl-flow form { display: inline-flex; }

/* --- Bölümler --- */
.cl-sec { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--border); }

/* --- Evrak listesi --- */
.cl-docs { display: flex; flex-direction: column; gap: .35rem; }
.cl-doc {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .55rem; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.cl-doc-a { display: flex; align-items: center; gap: .55rem; flex: 1 1 auto; min-width: 0; color: inherit; }
.cl-doc-ico {
  display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px;
  border-radius: 9px; color: var(--primary); background: var(--primary-light);
}
.cl-doc-m { display: flex; flex-direction: column; min-width: 0; }
.cl-doc-m b {
  font-size: .8rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-doc-m em { font-style: normal; font-size: .68rem; color: var(--muted); }
.cl-doc form { display: inline-flex; flex-shrink: 0; }

/* --- Zaman çizelgesi --- */
/* Sol kenarda sürekli bir çizgi, her olayda bir nokta: dosyanın hikâyesi
   yukarıdan aşağı okunur (en yeni üstte). */
.cl-time { list-style: none; margin: 0; padding: 0 0 0 .9rem; position: relative; }
.cl-time::before {
  content: ''; position: absolute; left: 3px; top: .35rem; bottom: .35rem;
  width: 2px; border-radius: 2px; background: var(--border);
}
.cl-time li { position: relative; padding: 0 0 .75rem .35rem; }
.cl-time li:last-child { padding-bottom: 0; }
.ct-dot {
  position: absolute; left: -.9rem; top: .3rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 0 3px var(--card);
}
.cl-time li:first-child .ct-dot { background: var(--success); }
.ct-body { display: flex; flex-direction: column; gap: .08rem; }
.ct-body b { font-size: .8rem; font-weight: 700; }
.ct-body span { font-size: .75rem; color: var(--text-2); }
.ct-body em { font-style: normal; font-size: .67rem; color: var(--muted); }

@media (max-width: 620px) {
  .cl-party, .cl-money { grid-template-columns: 1fr; }
}

/* --- Müşteri kartı / poliçe kartı içindeki hasar kısayolları --- */
.hsr-add { margin-top: .7rem; }

/* ============================================================
   MODAL FORM KABUĞU  (.mform)
   ------------------------------------------------------------
   Cari İşlem ve Hasar Bildirimi formlarının ortak iskeleti.
   Modal başlığı zaten kaydın adını taşıyor; buradaki hero başlığı
   TEKRAR ETMEZ, ne işe yaradığını ve bağlamı (hangi müşteri /
   poliçe) söyler. Alanlar başlıklı bölümlere ayrılır, alt şerit
   yapışkandır ve seçimin özetini canlı gösterir.

   Aksan rengi köke verilir: `--mf` (ikon zemini, bölüm numarası,
   odak halkası). Cari yeşil, hasar kırmızı.
   ============================================================ */

.mform { --mf: var(--primary); display: flex; flex-direction: column; }
.mform.mf-cari  { --mf: #059669; }
.mform.mf-hasar { --mf: #dc2626; }
html[data-theme="dark"] .mform.mf-cari  { --mf: #34d399; }
html[data-theme="dark"] .mform.mf-hasar { --mf: #f87171; }

/* --- Hero şeridi --- */
.mf-hero {
  display: flex; align-items: center; gap: .7rem;
  padding: .75rem .9rem; margin-bottom: 1rem;
  border-radius: 14px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--mf) 13%, transparent),
    color-mix(in srgb, var(--mf) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--mf) 24%, transparent);
}
.mf-hero-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 12px;
  color: #fff; background: var(--mf);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--mf) 40%, transparent);
}
html[data-theme="dark"] .mf-hero-ico { color: #0b1220; }
.mf-hero-t { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.mf-hero-t b { font-size: .9rem; font-weight: 700; }
.mf-hero-t span { font-size: .765rem; line-height: 1.45; color: var(--text-2); }

/* --- Bölümler --- */
.mf-sec { margin-bottom: 1.1rem; }
.mf-sec:last-of-type { margin-bottom: 0; }
.mf-sec-h {
  display: flex; align-items: center; gap: .45rem; margin: 0 0 .55rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--label);
}
/* Bölüm sırası küçük bir rozet: form uzun olduğunda nerede olduğun belli olur */
.mf-sec-n {
  display: grid; place-items: center; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 6px;
  font-size: .64rem; font-weight: 800; letter-spacing: 0;
  color: var(--mf); background: color-mix(in srgb, var(--mf) 14%, transparent);
}
.mf-sec-h em {
  margin-left: auto; font-style: normal; text-transform: none; letter-spacing: 0;
  font-size: .68rem; font-weight: 500; color: var(--muted);
}

/* --- Seçili varlık kartı (müşteri / poliçe kilitliyken) --- */
.mf-pick {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.mf-pick-ico {
  display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px;
  border-radius: 10px; color: var(--mf);
  background: color-mix(in srgb, var(--mf) 13%, transparent);
}
.mf-pick-t { display: flex; flex-direction: column; min-width: 0; }
.mf-pick-t b {
  font-size: .85rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mf-pick-t em { font-style: normal; font-size: .7rem; color: var(--muted); }
.mf-pick .mf-pick-lock {
  margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: .25rem;
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted);
}

/* --- Arama açılırı (müşteri / poliçe seçici) --- */
.mf-search { position: relative; }
.mf-results {
  position: absolute; left: 0; right: 0; top: calc(100% + .3rem); z-index: 6;
  max-height: 15rem; overflow-y: auto; scrollbar-width: thin;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); box-shadow: var(--sh-lg);
}
.mf-results[hidden] { display: none; }
.mf-results .mf-item {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .5rem .65rem; border: 0; border-bottom: 1px solid var(--border);
  background: transparent; text-align: left; cursor: pointer; color: inherit;
}
.mf-results .mf-item:last-child { border-bottom: 0; }
.mf-results .mf-item:hover,
.mf-results .mf-item:focus-visible {
  outline: none; background: color-mix(in srgb, var(--mf) 9%, transparent);
}
.mf-item-av {
  display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px;
  border-radius: 8px; font-size: .66rem; font-weight: 800;
  color: var(--mf); background: color-mix(in srgb, var(--mf) 13%, transparent);
}
.mf-item-t { display: flex; flex-direction: column; min-width: 0; }
.mf-item-t b {
  font-size: .81rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mf-item-t em { font-style: normal; font-size: .69rem; color: var(--muted); }
.mf-results .mf-empty { padding: .65rem; font-size: .78rem; color: var(--muted); text-align: center; }

/* --- Tip seçici (tahsilat / borç · segment) --- */
.mf-seg { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.mf-seg-o { position: relative; cursor: pointer; }
.mf-seg-o input { position: absolute; opacity: 0; width: 0; height: 0; }
.mf-seg-o > span {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .7rem; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: .82rem; font-weight: 600;
  transition: border-color .13s ease, background .13s ease, transform .13s ease;
}
.mf-seg-o i {
  display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px;
  border-radius: 8px; font-style: normal; font-size: .9rem; font-weight: 800;
  color: var(--sc, var(--muted)); background: color-mix(in srgb, var(--sc, #94a3b8) 14%, transparent);
}
.mf-seg-o small { display: block; font-size: .66rem; font-weight: 500; color: var(--muted); }
.mf-seg-o:hover > span { transform: translateY(-1px); }
.mf-seg-o input:checked + span {
  background: color-mix(in srgb, var(--sc) 9%, transparent);
  border-color: color-mix(in srgb, var(--sc) 48%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sc) 30%, transparent);
}
.mf-seg-o input:focus-visible + span { outline: 2px solid var(--sc); outline-offset: 1px; }
.mf-seg-o.s-in  { --sc: #16a34a; }
.mf-seg-o.s-out { --sc: #dc2626; }
html[data-theme="dark"] .mf-seg-o.s-in  { --sc: #34d399; }
html[data-theme="dark"] .mf-seg-o.s-out { --sc: #f87171; }

/* --- Şablon / hızlı seçim düğmeleri --- */
.mf-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.mf-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .34rem .62rem; border-radius: 999px; cursor: pointer;
  font-size: .755rem; font-weight: 600; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: border-color .13s ease, background .13s ease, transform .13s ease;
}
.mf-chip:hover { transform: translateY(-1px); border-color: var(--mf); }
.mf-chip.on {
  color: var(--mf); background: color-mix(in srgb, var(--mf) 11%, transparent);
  border-color: color-mix(in srgb, var(--mf) 45%, transparent);
}
.mf-chip span { font-size: .92rem; line-height: 1; }

/* --- Tutar alanı: ₺ önekli --- */
.mf-amount { position: relative; }
.mf-amount > span {
  position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
  font-size: .9rem; font-weight: 700; color: var(--muted); pointer-events: none;
}
.mf-amount input { padding-left: 1.7rem !important; font-variant-numeric: tabular-nums; font-weight: 700; }

/* Odak halkası formun aksan rengini alsın */
.mform input:focus, .mform select:focus, .mform textarea:focus {
  border-color: var(--mf);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mf) 16%, transparent);
  outline: none;
}

/* --- Dosya alanı --- */
.mf-file {
  display: block; padding: .7rem .8rem; border-radius: 12px; cursor: pointer;
  background: var(--surface-2); border: 1px dashed color-mix(in srgb, var(--mf) 38%, transparent);
  transition: border-color .13s ease, background .13s ease;
}
.mf-file:hover { border-style: solid; background: color-mix(in srgb, var(--mf) 6%, transparent); }
.mf-file input { border: 0 !important; background: none !important; padding: 0 !important; font-size: .8rem; }

/* --- Yapışkan alt şerit + canlı özet --- */
.mf-foot {
  position: sticky; bottom: -1.4rem; z-index: 5;
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin: 1.3rem -1.25rem -1.4rem; padding: .85rem 1.25rem 1.1rem;
  border-top: 1px solid var(--border);
  background: linear-gradient(to top, var(--card) 78%, color-mix(in srgb, var(--card) 82%, transparent));
  backdrop-filter: blur(6px);
}
.mf-sum {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin-right: auto; min-width: 0;
  font-size: .76rem; color: var(--muted);
}
.mf-sum b {
  font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums;
}
.mf-sum .mf-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; }
.mf-foot .btn { flex-shrink: 0; }

@media (max-width: 640px) {
  .mf-seg { grid-template-columns: 1fr; }
  .mf-foot { margin-inline: -1rem; padding-inline: 1rem; }
  .mf-sum { width: 100%; margin-bottom: .2rem; }
}

/* Hızlı ekle menüsündeki yeni cari tonu */
.qi-emerald { background: linear-gradient(150deg,#d1fae5,#bbf3e0); color: #047857; }
html[data-theme="dark"] .qi-emerald { background: linear-gradient(150deg,rgba(52,211,153,.22),rgba(52,211,153,.08)); color: #6ee7b7; }

/* Hızlı Erişim kutusu: bulunulan modül vurgulanır */
.qbtn.is-here {
  background: var(--qc); color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--qc) 45%, transparent);
}

/* ============================================================
   YARDIM ERİŞİMİ — üst çubuk düğmesi + modül başlığındaki kısayol
   Kılavuz her ekrandan tek tıkla açılsın diye iki yerde birden durur:
   üst çubukta sabit "Yardım", modül başlığında "Kılavuz" (help-anchor.js).
   ============================================================ */
.tb-help {
  display: inline-flex; align-items: center; gap: .4rem; height: 36px; padding: 0 .8rem;
  border-radius: 10px; border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  background: var(--primary-light); color: var(--primary);
  font-size: .83rem; font-weight: 650; white-space: nowrap; transition: background .15s, color .15s;
}
.tb-help:hover { background: var(--primary); color: #fff; }
.tb-help svg { flex: none; }
html[data-theme="dark"] .tb-help { background: rgba(79,70,229,.2); color: #c7d2fe; }
@media (max-width: 1180px) { .tb-help span { display: none; } .tb-help { width: 36px; padding: 0; justify-content: center; } }

/* Kılavuz düğmesi — her modülün başlık şeridinin SAĞ ÜST köşesinde.
   Eylem düğmelerinin arasına karışmıyor, her ekranda aynı yerde duruyor. */
.hero-help-corner {
  position: absolute; top: .55rem; right: .65rem; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  color: var(--primary); opacity: .75;
  transition: opacity .15s, background .15s, color .15s, transform .15s;
}
.hero-help-corner:hover {
  opacity: 1; background: var(--primary); color: #fff;
  border-color: var(--primary); transform: scale(1.06);
}
.hero-help-corner svg { display: block; }
html[data-theme="dark"] .hero-help-corner { background: rgba(79,70,229,.18); color: #c7d2fe; }
/* Hero'nun sağ üstünde eylem düğmeleri varsa köşe düğmesinin altına girmesinler */
.dash-hero .lst-actions { padding-right: 1.9rem; }

/* --- Üst çubuk logosu: boyutu sayfadan sayfaya değişmesin ---
   Yalnız `max-height`/`max-width` verilmişti; görselin doğal boyutuna ve
   başlık metninin uzunluğuna göre logo bazı modüllerde büyüyüp küçülüyordu.
   Sabit yükseklik + `width:auto` + `object-fit` bunu kilitler. */
.topbar-title { flex: none; min-width: 0; }
.topbar-title .tb-logo {
  height: 30px; width: auto; max-width: 168px;
  object-fit: contain; object-position: left center;
  display: block; margin-bottom: .1rem; flex: none;
}
.topbar-title .tb-sub {
  max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Doğrulama uyarı kutusundaki bilgilendirme satırı (hata değil, açıklama) */
.cfrm-alert li.is-note {
  margin-top: .35rem; padding-top: .35rem;
  border-top: 1px dashed color-mix(in srgb, var(--danger) 35%, transparent);
  list-style: none; opacity: .85; font-style: italic;
}

/* =====================================================================
   POLİÇE KARTI — künye şeridi (pdx-facts kartının yerine)
   =====================================================================
   Poliçe no, plaka, ağ, belge seri, muayene, ödeme şekli gibi küçük
   alanlar eskiden "Poliçe Detayları" adlı ayrı bir kartta duruyordu.
   Kart dört satır içerik taşıyor ama ızgarada iki sütun genişliğinde
   yer kaplıyordu — ekranın en büyük boşluğu oradaydı. Aynı alanlar
   burada tek satırlık yoğun bir şeride toplandı.
   ===================================================================== */
.pdx-bar {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: .7rem .85rem; margin-bottom: 1rem;
  border-radius: 13px;
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--sh-sm);
}
.pdx-bar-i {
  display: flex; flex-direction: column; gap: .1rem; min-width: 0;
  padding: .1rem .75rem;
  border-left: 2px solid var(--border);
}
.pdx-bar-i:first-child { border-left: 0; padding-left: .15rem; }
.pdx-bar-i em {
  font-style: normal; font-size: .64rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.pdx-bar-i b {
  font-size: .82rem; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdx-bar-i.is-key b { font-size: .92rem; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.pdx-bar-i.is-soft b { font-weight: 600; color: var(--text-2); font-size: .76rem; }
.pdx-bar-i.is-red b { color: var(--danger); }
.pdx-bar-i .cdx-plate { font-size: .8rem; }
/* Sağa yaslanan bakım bilgileri (oluşturma/son düzenleme) */
.pdx-bar-sep { flex: 1 1 auto; min-width: .5rem; border: 0; }

/* KPI şeridi artık bağlantı: karta kaydırır */
a.cdx-kpi { text-decoration: none; color: inherit; cursor: pointer; }
a.cdx-kpi:hover { transform: translateY(-1px); box-shadow: var(--sh-md); border-color: var(--primary); }
a.cdx-kpi.is-empty:hover { transform: none; }

/* Kart içi hedef vurgusu — KPI'dan gelindiğinde kısa süre parlar */
.cd-card:target, .cd-card.is-flash {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  transition: outline-color 1.2s ease-out;
}
.cd-card.is-flash { animation: cdFlash 1.6s ease-out 1; }
@keyframes cdFlash {
  0%, 40% { outline-color: var(--primary); }
  100%    { outline-color: transparent; }
}

/* Taraflar kartı — sigorta ettiren + sigortalılar tek kartta */
.pdx-parties-sub {
  margin: .85rem 0 .45rem; padding-top: .7rem;
  border-top: 1px dashed var(--border);
  display: flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.pdx-parties-sub .lb-n {
  margin-left: auto; text-transform: none; letter-spacing: 0;
}

/* =====================================================================
   POLİÇE KARTI IZGARASI — dört eşit sütun, eşit yükseklik, iç kaydırma
   =====================================================================
   Kullanıcı isteği: tüm kartlar aynı boyutta olsun, taşan içerik kartın
   İÇİNDE kaydırılsın. Eskiden kartlar içeriğe göre farklı boylardaydı;
   iki kart yan yana gelince altlarında düzensiz boşluklar kalıyordu.

   `align-items: stretch` (varsayılan) + sabit yükseklik → satırdaki
   dört kart birebir aynı. `.cdc-body` taşarsa kendi içinde kayar.
   ===================================================================== */
.pdx .cd-grid { align-items: stretch; }

.pdx .cd-card {
  height: var(--pdx-card-h, 384px);
  min-height: var(--pdx-card-h, 384px);
}
.pdx .cd-card .cdc-head { flex: 0 0 auto; }
.pdx .cd-card .cdc-body {
  flex: 1 1 auto;
  min-height: 0;              /* flex çocuğun taşmayı kırpabilmesi için şart */
  /* Kaydırma YOK — müşteri kartıyla aynı kural: taşan içerik "Tümünü gör"
     düğmesiyle modalda açılır. Bkz. "KART İÇİ KAYDIRMA YOK". */
  overflow: hidden;
}

/* "+N poliçe daha" bağlantısı (Diğer Poliçeler kartı 5 satırla sınırlı) */
.pdx-more {
  display: flex; align-items: center; gap: .35rem; justify-content: center;
  margin-top: .45rem; padding: .4rem;
  border-radius: 9px; border: 1px dashed var(--border);
  font-size: .72rem; font-weight: 600; color: var(--muted); text-decoration: none;
}
.pdx-more:hover { color: var(--primary); border-color: var(--primary); }

/* Hero: kayıt künyesi (ödeme şekli · oluşturma · son düzenleme) */
.pdx-meta { margin-top: .4rem; gap: .3rem; }
.pdx-meta .pdb { font-size: .68rem; padding: .12rem .45rem; }
.pdb.b-soft {
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  color: var(--text-2); border-color: transparent;
}

/* ---- Sütun sayısı KULLANICININ seçimi (3 / 4) ----
   Ekran genişliğine göre sabit kırılım dayatmak yanlıştı: 1350 px'lik
   ekranda kullanıcı 4 sütun isterken 3'e düşüyordu. Geniş ekranda karar
   kullanıcının; yalnız fiziksel olarak sığmayan dar ekranlarda azaltılır. */
.pdx .cd-grid.is-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pdx .cd-grid.is-c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1240px) {
  .pdx .cd-grid.is-c3, .pdx .cd-grid.is-c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pdx .cd-grid.is-c3, .pdx .cd-grid.is-c4 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pdx .cd-grid { grid-template-columns: 1fr; }
  /* Telefonda sabit yükseklik + iç kaydırma iki kat kaydırma demek;
     kart içeriğe göre uzasın, sayfa tek akışta kaysın. */
  .pdx .cd-card { height: auto; min-height: 0; }
  .pdx .cd-card .cdc-body { overflow-y: visible; }
}

/* Modal içinde açıldığında pencere zaten sınırlı: kartlar biraz kısalır */
/* `.mdl-body` — `.mdl-doc` DEĞİL: modal.js gelen belgenin yalnız
   innerHTML'ini kopyaladığı için `.mdl-doc` canlı DOM'a hiç girmiyor,
   kural sessizce ölüydü ve poliçe kartı modalde tam boy kalıyordu. */
.mdl-body .pdx .cd-card { --pdx-card-h: 330px; }

/* =====================================================================
   Görünüm anahtarı (3 / 4 sütun) + panel açma + daha küçük tipografi
   ===================================================================== */
.cdx-viewsw {
  display: flex; align-items: center; gap: .5rem; justify-content: center;
  padding: .55rem .7rem; border-radius: 13px;
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--sh-sm);
}
.cdx-viewsw-cap {
  font-size: .62rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.cdx-viewsw-b { display: flex; gap: .25rem; }
.cdx-viewsw-b button {
  display: grid; place-items: center; width: 30px; height: 26px;
  border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2);
  transition: background .13s, border-color .13s, transform .13s;
}
.cdx-viewsw-b button:hover { border-color: var(--primary); transform: translateY(-1px); }
.cdx-viewsw-b button.on { background: var(--primary); border-color: var(--primary); }
/* Minik kare ikonlar — 3'lü ve 4'lü ızgarayı temsil eder */
.sw-g { display: flex; gap: 2px; }
.sw-g i { display: block; width: 4px; height: 12px; border-radius: 1.5px; background: var(--muted); }
.sw-4 i { width: 3px; }
.cdx-viewsw-b button.on .sw-g i { background: #fff; }

/* Kart başlığı → bölüm modalını açar */
.cdc-open { display: flex; align-items: center; min-width: 0; text-decoration: none; color: inherit; }
.cdc-open:hover h3 { color: var(--primary); }
.cdc-open-i {
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 6px; color: var(--muted); opacity: .55; transition: opacity .13s, background .13s;
}
.cd-card:hover .cdc-open-i { opacity: 1; }
.cdc-open-i:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }

/* ---- Tipografi: kart içi biraz küçüldü, daha derli toplu görünüm ---- */
.pdx .cdc-head { padding: .6rem .75rem; }
.pdx .cdc-head h3 { font-size: .8rem; }
.pdx .cdc-body { padding: .7rem .75rem; font-size: .8rem; }
.pdx .pdx-row { padding: .32rem .4rem; gap: .45rem; }
.pdx .pdx-row-main b { font-size: .76rem; }
.pdx .pdx-row-main em { font-size: .68rem; }
.pdx .pdx-row-val { font-size: .76rem; }
.pdx .pdx-row-date { font-size: .66rem; }
.pdx .price-row { font-size: .76rem; }
.pdx .pdx-sublabel { font-size: .64rem; }
.pdx .cdc-badge { font-size: .66rem; }

/* ---- Bölüm paneli (modal) ---- */
.ppn-sec { margin-bottom: 1.1rem; }
.ppn-sec:last-child { margin-bottom: 0; }
.ppn-sec h4 {
  display: flex; align-items: center; gap: .4rem;
  margin: 0 0 .5rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
  font-size: .78rem; font-weight: 700;
}
.ppn-sec h4 .lb-n { margin-left: auto; }
.ppn-row {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .3rem 0; border-bottom: 1px dashed color-mix(in srgb, var(--border) 60%, transparent);
}
.ppn-row:last-child { border-bottom: 0; }
.ppn-row em {
  flex: 0 0 8.5rem; font-style: normal; font-size: .7rem; font-weight: 600; color: var(--muted);
}
.ppn-row b { flex: 1 1 auto; min-width: 0; font-size: .8rem; font-weight: 600; word-break: break-word; }
.ppn-row.is-key b { font-size: .95rem; font-weight: 800; }
.ppn-note { display: block; margin-top: .2rem; opacity: .8; }

/* İYS izni olmayan pazarlama şablonu — kilitli görünüm */
.wam-tpl.is-locked { opacity: .45; cursor: not-allowed; border-style: dashed; }
.wam-tpl.is-locked:hover { transform: none; border-color: var(--border); }

/* Müşteri kartı: izin rozetleri */
.cdx-consent { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }

/* --- İzin anahtarları --------------------------------------------------
   Etiket değil ANAHTAR: tıklanınca izin panelini o izin çevrilmiş hâlde
   açar. Yerinde kaydetmiyor çünkü izin vermek KANAL istiyor — kanalsız
   izin İYS denetiminde izin sayılmıyor
   (bkz. CustomerPanelController::saveIzin, views/customers/panels/izin.php).

   Renk üç durumu ayırır: yeşil var, gri aydınlatma yok (engel değil),
   kırmızı ticari izin yok (pazarlamayı KAPATIR). */
.csw {
  display: flex; align-items: center; gap: .45rem;
  padding: .5rem .55rem; border-radius: 11px;
  font-size: .765rem; font-weight: 600; text-decoration: none !important;
  color: var(--text); background: var(--card);
  border: 1px solid color-mix(in srgb, var(--sw, #64748b) 40%, transparent);
  cursor: pointer; transition: background .14s, border-color .14s, transform .12s, box-shadow .14s;
}
.csw:hover:not(.is-static) {
  transform: translateY(-1px);
  border-color: var(--sw, #64748b);
  background: color-mix(in srgb, var(--sw, #64748b) 9%, var(--card));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--sw, #64748b) 20%, transparent);
}
.csw:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.csw.is-static { cursor: default; }
.csw-ui {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px;
  border-radius: 7px; color: #fff; background: var(--sw, #64748b);
}
.csw-t { min-width: 0; line-height: 1.2; }
.csw.is-on  { --sw: #16a34a; }
.csw.is-off { --sw: #94a3b8; }
.csw.is-no  { --sw: #dc2626; }
html[data-theme="dark"] a.csw, html[data-theme="dark"] .csw { color: var(--text); }
html[data-theme="dark"] .csw.is-on  { --sw: #22c55e; }
html[data-theme="dark"] .csw.is-off { --sw: #64748b; }
html[data-theme="dark"] .csw.is-no  { --sw: #ef4444; }

/* Durum metni — anahtarlar "ne seçili"yi, bu blok "sonucu ne"yi söyler */
.csw-info {
  display: flex; align-items: flex-start; gap: .45rem; margin-top: .6rem;
  padding: .55rem .65rem; border-radius: 10px;
  font-size: .755rem; line-height: 1.45;
}
.csw-info svg { flex: none; margin-top: 1px; }
.csw-info.is-ok   { background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--text); }
.csw-info.is-ok svg { color: var(--success); }
.csw-info.is-warn { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--text); }
.csw-info.is-warn svg { color: var(--warn); }

@media (max-width: 420px) { .cdx-consent { grid-template-columns: 1fr; } }

/* E-posta gönderme penceresi — şablon önizlemesi */
.mail-preview {
  max-height: 220px; overflow-y: auto;
  padding: .7rem .8rem; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: .78rem; line-height: 1.6;
}

/* =====================================================================
   YENİLEME HATTI — yaşlandırma panosu
   ===================================================================== */
.rnw-board {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem;
  align-items: start;
}
@media (max-width: 1400px) { .rnw-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .rnw-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .rnw-board { grid-template-columns: 1fr; } }

.rnw-col {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 13px; box-shadow: var(--sh-sm); overflow: hidden;
}
.rnw-col-h {
  display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
  padding: .55rem .7rem; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.rnw-col-h b { font-size: .78rem; font-weight: 700; }
.rnw-col-h em { font-size: .64rem; font-style: normal; color: var(--muted); }
.rnw-n {
  margin-left: auto; min-width: 22px; padding: 0 .35rem;
  display: inline-grid; place-items: center; height: 19px; border-radius: 999px;
  font-size: .68rem; font-weight: 800;
  background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--text-2);
}
/* Sütun tonu — soldaki ince şerit aciliyeti renkle söyler */
.rnw-col-h.k-slate  { border-left: 3px solid #64748b; }
.rnw-col-h.k-indigo { border-left: 3px solid #4f46e5; }
.rnw-col-h.k-cyan   { border-left: 3px solid #0891b2; }
.rnw-col-h.k-orange { border-left: 3px solid #ea7317; }
.rnw-col-h.k-rose   { border-left: 3px solid #e11d48; }

/* Sütun gövdesi: uzun listede sayfayı değil, sütunu kaydır */
.rnw-col-b { padding: .5rem; max-height: 62vh; overflow-y: auto; scrollbar-width: thin; }
.rnw-empty {
  display: flex; align-items: center; gap: .35rem; justify-content: center;
  padding: 1rem .5rem; margin: 0; font-size: .72rem; color: var(--muted);
}
.rnw-card {
  padding: .5rem .55rem; margin-bottom: .45rem; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  transition: border-color .13s, transform .13s;
}
.rnw-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.rnw-card:last-child { margin-bottom: 0; }
.rnw-card-t { display: block; text-decoration: none; color: inherit; }
.rnw-card-t b { display: block; font-size: .76rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rnw-card-t em { display: block; font-size: .66rem; font-style: normal; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rnw-card-m {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  margin: .35rem 0 .3rem; font-size: .67rem; color: var(--muted);
}
.rnw-card-m b { font-size: .72rem; color: var(--text); font-variant-numeric: tabular-nums; }
.rnw-card-f { display: flex; align-items: center; gap: .25rem; }
.rnw-card-f .btn { margin-left: auto; }

/* Poliçe kartı üst şeridi: yeni eylemler */
.lbtn.a-mail:hover  { border-color: #2563eb; color: #2563eb; }
.lbtn.a-print:hover { border-color: #64748b; color: #475569; }

/* ============================================================
   ÜST ÇUBUK AÇILIR PANELLERİ (bildirim + mesaj)
   ------------------------------------------------------------
   Tek iskelet iki kutuda kullanılır: `views/notifications/panel.php`
   ve `views/messages/panel.php`. Ölçüler hızlı ekle menüsüyle (.qa-menu)
   aynı aileden — üst çubuktan açılan üç kutu birbirine benzesin.
   ============================================================ */
.tbp { position: relative; }
.tbp .tb-icon { border: 0; cursor: pointer; font: inherit; }
.tbp.is-open .tb-icon { background: var(--primary-light); color: var(--primary); }
.tbp-menu[hidden] { display: none; }
.tbp-menu {
  position: absolute; top: calc(100% + .55rem); right: 0; z-index: 60;
  width: 350px; max-width: calc(100vw - 1.6rem);
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15,23,42,.20), 0 2px 6px rgba(15,23,42,.08);
  animation: qaIn .16s cubic-bezier(.22,.61,.36,1);
  overflow: hidden;
}
.tbp-menu::before {
  content: ""; position: absolute; top: -5px; right: 13px; width: 10px; height: 10px;
  background: var(--card); border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  transform: rotate(45deg); border-radius: 2px 0 0 0;
}

.ntp-head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .6rem .8rem; border-bottom: 1px solid var(--border);
}
.ntp-head b { font-size: .82rem; font-weight: 700; }
.ntp-head form { margin: 0; }
.ntp-clear {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .2rem .45rem; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--muted); font: inherit; font-size: .7rem;
}
.ntp-clear:hover { background: var(--primary-light); color: var(--primary); }

/* Uzun listede kutu büyümesin, içi kaysın */
.ntp-list { max-height: 60vh; overflow-y: auto; }

.ntp-item { display: block; border-bottom: 1px solid var(--border); margin: 0; }
.ntp-item:last-child { border-bottom: 0; }
.ntp-btn {
  display: flex; align-items: flex-start; gap: .55rem; width: 100%;
  padding: .6rem .8rem; border: 0; background: transparent; cursor: pointer;
  font: inherit; text-align: left; text-decoration: none; color: inherit;
  position: relative;
}
.ntp-btn:hover, .ntp-btn:focus-visible { background: var(--primary-light); outline: 0; }
.ntp-item.is-unread .ntp-btn { background: rgba(79,70,229,.045); }
.ntp-item.is-unread .ntp-btn:hover { background: var(--primary-light); }

.ntp-ico {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 9px; flex-shrink: 0;
}
.ntp-av { font-size: .68rem; font-weight: 700; background: var(--surface-2); color: var(--muted); }

.ntp-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.ntp-txt b {
  display: flex; align-items: center; gap: .3rem;
  font-size: .78rem; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ntp-txt em {
  font-style: normal; font-size: .715rem; color: var(--muted); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ntp-txt i { font-style: normal; font-size: .655rem; color: var(--muted); opacity: .85; }

/* Okunmadı noktası — satırın sağ üstünde, metni itmeden */
.ntp-new {
  position: absolute; top: .7rem; right: .65rem;
  width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex-shrink: 0;
}

.ntp-empty { padding: 1.6rem 1rem; text-align: center; color: var(--muted); }
.ntp-empty svg { opacity: .45; }
.ntp-empty p { margin: .5rem 0 .2rem; font-size: .82rem; }
.ntp-empty small { font-size: .7rem; opacity: .8; }

.ntp-foot {
  display: flex; align-items: center; justify-content: center; gap: .25rem;
  padding: .55rem; border-top: 1px solid var(--border);
  font-size: .74rem; font-weight: 600; color: var(--primary); text-decoration: none;
}
.ntp-foot:hover { background: var(--primary-light); }
.ntp-foot-row { display: flex; border-top: 1px solid var(--border); }
.ntp-foot-row .ntp-foot { flex: 1 1 auto; border-top: 0; }
.ntp-foot-row .ntp-foot-new { flex: 0 0 auto; border-left: 1px solid var(--border); padding-inline: .8rem; }

.tbp-loading {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: 1.6rem 1rem; color: var(--muted); font-size: .78rem;
}
.tbp-spin {
  width: 14px; height: 14px; border-radius: 50%; display: inline-block;
  border: 2px solid var(--border); border-top-color: var(--primary);
  animation: tbpSpin .7s linear infinite;
}
@keyframes tbpSpin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .tbp-menu { width: min(350px, calc(100vw - 1.2rem)); right: -.4rem; }
}

/* ============================================================
   MESAJLAŞMA
   ------------------------------------------------------------
   Liste ekranlarının `lt-*` tablo düzeni yerine posta kutusu düzeni:
   satırın ağırlığı konu ve özet metinde. 9 kolonluk tablo poliçede
   anlamlıydı, mesajda değil.
   ============================================================ */
.msg-card { padding: 0; overflow: hidden; }

.msg-tabs { display: flex; gap: .2rem; padding: .5rem .6rem 0; border-bottom: 1px solid var(--border); }
.msg-tab {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .85rem; border-radius: 10px 10px 0 0;
  font-size: .82rem; font-weight: 600; color: var(--muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.msg-tab:hover { color: var(--text); background: var(--surface-2); }
.msg-tab.on { color: var(--primary); border-bottom-color: var(--primary); background: transparent; }
.msg-tab b {
  min-width: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: .65rem; line-height: 18px; text-align: center;
}
.msg-tab-c { font-size: .7rem; color: var(--muted); font-weight: 500; }

.msg-filter {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .7rem .85rem; border-bottom: 1px solid var(--border);
}
.msg-search { position: relative; flex: 1 1 220px; min-width: 180px; }
.msg-search svg { position: absolute; left: .55rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.msg-search input { width: 100%; padding-left: 2rem; }
.msg-filter select { min-width: 150px; }
.msg-chk {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; color: var(--muted); cursor: pointer;
}
.msg-chk small { font-size: .68rem; opacity: .8; }

.msg-list { display: flex; flex-direction: column; }
.msg-row {
  display: flex; align-items: stretch; gap: .3rem;
  border-bottom: 1px solid var(--border);
}
.msg-row:last-child { border-bottom: 0; }
.msg-row:hover { background: var(--surface-2); }
.msg-row.is-unread { background: rgba(79,70,229,.045); }
.msg-row.is-unread:hover { background: var(--primary-light); }
.msg-row.is-high { box-shadow: inset 3px 0 0 var(--danger); }

.msg-open {
  display: flex; align-items: flex-start; gap: .7rem; flex: 1 1 auto;
  padding: .75rem .9rem; text-decoration: none; color: inherit; min-width: 0;
}
.msg-av {
  display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 10px; background: var(--surface-2); color: var(--muted);
  font-size: .74rem; font-weight: 700;
}
.msg-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 auto; }
.msg-top { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.msg-top b { font-size: .84rem; font-weight: 600; }
.msg-top em { font-style: normal; font-size: .68rem; color: var(--muted); }
.msg-row.is-unread .msg-top b { font-weight: 700; }

.msg-subject { font-size: .82rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-row.is-unread .msg-subject { font-weight: 700; }
.msg-preview {
  font-size: .74rem; color: var(--muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.msg-tags { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .15rem; }
.msg-time { flex-shrink: 0; font-size: .7rem; color: var(--muted); padding-top: .15rem; white-space: nowrap; }
.msg-del { display: flex; align-items: center; padding-right: .7rem; margin: 0; }

.msg-flag {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .05rem .35rem; border-radius: 999px;
  background: rgba(220,38,38,.12); color: var(--danger);
  font-size: .63rem; font-weight: 700;
}

/* Konuşma ekranı */
.msg-ctx { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: .7rem .9rem; }
.msg-ctx-form { border: 1px dashed var(--border); border-radius: 10px; margin-bottom: .9rem; background: var(--surface-2); }
.ltag-link { text-decoration: none; }
.ltag-link:hover { border-color: var(--primary); color: var(--primary); }

.msg-thread { display: flex; flex-direction: column; gap: .7rem; margin: .9rem 0; }
.msg-bubble {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: .8rem .95rem; box-shadow: var(--sh-sm);
}
/* Kendi mesajım sağa kaydırılmış ve vurgulu — kimin yazdığı okumadan belli olsun */
.msg-bubble.is-mine { margin-left: 2.5rem; border-color: var(--primary); background: var(--primary-light); }
.msg-bubble.is-high { box-shadow: inset 3px 0 0 var(--danger), var(--sh-sm); }
.msg-bubble header { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; }
.msg-bubble .msg-av { width: 30px; height: 30px; font-size: .68rem; }
.msg-who { display: flex; flex-direction: column; line-height: 1.25; flex: 1 1 auto; min-width: 0; }
.msg-who b { font-size: .82rem; font-weight: 600; }
.msg-who small { font-size: .68rem; color: var(--muted); }
.msg-seen { font-size: .67rem; color: var(--success); display: inline-flex; align-items: center; gap: .2rem; }
.msg-seen.is-pending { color: var(--muted); }
.msg-text { font-size: .85rem; line-height: 1.55; word-break: break-word; }
/* WP'den devralınan gövdelerde korunan tek satır içi biçimlendirme
   (bkz. Core\RichText): kalın/italik ve müşteri kartı bağlantısı. */
.msg-text strong { font-weight: 700; }
.rt-link {
  color: var(--primary); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px;
}
.rt-link:hover { text-decoration-thickness: 2px; }
.msg-bubble footer { display: flex; justify-content: flex-end; margin-top: .5rem; }
.msg-bubble footer form { margin: 0; }
.msg-mini {
  display: inline-flex; align-items: center; gap: .2rem;
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: .68rem; color: var(--muted); padding: .15rem .3rem; border-radius: 6px;
}
.msg-mini:hover { background: rgba(220,38,38,.1); color: var(--danger); }

.msg-reply textarea { width: 100%; resize: vertical; }
.msg-reply-h { display: flex; align-items: center; gap: .35rem; margin-bottom: .45rem; font-size: .82rem; color: var(--muted); }
.msg-reply-h b { color: var(--text); }
.msg-reply-f { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; }

@media (max-width: 620px) {
  .msg-open { padding: .65rem .7rem; }
  .msg-time { display: none; }
  .msg-bubble.is-mine { margin-left: .8rem; }
  .msg-filter select, .msg-search { flex: 1 1 100%; }
}

/* --- Koyu tema --- */
html[data-theme="dark"] .tbp-menu {
  background: var(--card); border-color: var(--border);
  box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
}
html[data-theme="dark"] .tbp-menu::before { background: var(--card); border-color: var(--border); }
html[data-theme="dark"] .ntp-item.is-unread .ntp-btn { background: rgba(16,185,129,.07); }
html[data-theme="dark"] .msg-row.is-unread { background: rgba(16,185,129,.07); }
html[data-theme="dark"] .msg-bubble.is-mine { background: rgba(16,185,129,.09); }
html[data-theme="dark"] .msg-flag { background: rgba(248,113,113,.18); color: #fca5a5; }

/* ============================================================
   ÜST BAR — "SADE ŞERİT" DÜZENİ  (.topbar.tb-cmd)
   ============================================================
   Yönetim Ayarları → Görünüm → Üst Bar Düzeni ile seçilir; klasik
   düzen dokunulmadan yerinde durur (bkz. views/layouts/main.php).

   TEK KURAL: üst bar yalnız EYLEM taşır, bilgi taşımaz.
     SOLDA   ☰ + logo + geri
     ORTADA  arama
     SAĞDA   yardım · bildirim · mesaj · ＋Yeni · çıkış

   Kullanıcı adı, rol, avatar ve tema anahtarı BİLEREK yok: üçü de
   kenar çubuğunda duruyor. Aynı bilgiyi iki yerde göstermek panelin
   yoğunluğunu artırıyor, hiçbir şey kazandırmıyordu.

   Izgara neden: `1fr auto 1fr` sol ve sağ blok ne kadar genişlerse
   genişlesin arama kutusunu EKRANIN tam ortasında tutar. Flex ile
   ortalama, blok genişlikleri değiştikçe (uzun logo, rozetli sayaç)
   kayıyordu.
   ============================================================ */
.topbar.tb-cmd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  align-items: center; gap: 1rem; padding: .5rem 1.1rem;
  /* Cam yüzey: içerik barın ALTINDAN geçerken bulanıklaşır. */
  background: color-mix(in srgb, var(--card) 84%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 rgba(15,23,42,.03), 0 6px 18px -12px rgba(15,23,42,.22);
}
@supports not (backdrop-filter: blur(1px)) { .topbar.tb-cmd { background: var(--card); } }
html[data-theme="dark"] .topbar.tb-cmd {
  background: color-mix(in srgb, var(--card) 88%, transparent);
  box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 8px 22px -14px rgba(0,0,0,.7);
}

/* --- SOL --- */
.tb-left { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.tb-cmd .hamburger {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  transition: background .15s, color .15s;
}
.tb-cmd .hamburger:hover { background: var(--primary-light); color: var(--primary); }
/* Logo panoya döner — her panelde beklenen davranış */
.tb-home {
  display: inline-flex; align-items: center; padding: .1rem .35rem; border-radius: 9px;
  text-decoration: none !important; min-width: 0;
  transition: background .15s;
}
.tb-home:hover { background: color-mix(in srgb, var(--muted) 10%, transparent); }
.tb-cmd .tb-logo {
  height: 30px; width: auto; max-width: 168px;
  object-fit: contain; object-position: left center; display: block; margin: 0;
}
.tb-cmd .tb-brand {
  font-weight: 700; font-size: 1rem; letter-spacing: -.01em; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- ORTA: arama. Tek gövde, ızgaranın orta sütunu. --- */
.tb-cmd .topbar-search {
  position: relative; align-items: center; height: 38px;
  /* Genişlik `100%` OLAMAZ: orta sütun `auto` ve yüzde ona göre çözülüyor —
     döngü kutuyu içeriğin doğal boyutuna (~200px) düşürüyordu. Görünüm
     penceresine bağlı bir clamp, sütuna gerçek bir genişlik verir. */
  width: clamp(220px, 34vw, 560px); max-width: none; flex: none;
}
.tb-cmd .topbar-search input {
  width: 100%; height: 38px; padding: 0 .9rem 0 2.35rem; border-radius: 11px;
  font: inherit; font-size: .845rem; color: var(--text);
  background: color-mix(in srgb, var(--muted) 8%, transparent);
  border: 1.5px solid transparent;
  transition: background .16s, border-color .16s, box-shadow .16s;
}
.tb-cmd .topbar-search input:hover { background: color-mix(in srgb, var(--muted) 12%, transparent); }
.tb-cmd .topbar-search input:focus {
  outline: 0; background: var(--card); border-color: var(--primary);
  box-shadow: 0 0 0 3.5px var(--primary-light);
}
.tbs-ico {
  position: absolute; left: .72rem; top: 50%; transform: translateY(-50%);
  color: var(--muted); display: grid; place-items: center; pointer-events: none;
}

/* --- SAĞ: tek düğme dili. Hepsi 36px, 10px köşe, saydam zemin. --- */
.tb-cmd .topbar-actions { gap: .28rem; justify-self: end; }
.tb-cmd .tb-icon {
  width: 36px; height: 36px; border-radius: 10px; display: inline-grid; place-items: center;
  background: transparent; color: var(--muted); border: 0; cursor: pointer;
  transition: background .15s, color .15s, transform .12s;
}
.tb-cmd .tb-icon:hover { background: var(--primary-light); color: var(--primary); transform: translateY(-1px); }
/* Rozet küçüldü: iki büyük kırmızı balon şeridi sürekli "alarmda" gösteriyordu */
.tb-cmd .tb-dot {
  top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px;
  font-size: .6rem; border-width: 2px;
}
/* Çıkış ayrı bir eylem: ince bir ayraçla öbekten kopar, hover'da kırmızıya döner */
.tb-out { margin-left: .3rem; position: relative; }
.tb-out::before {
  content: ''; position: absolute; left: -.32rem; top: 50%; transform: translateY(-50%);
  width: 1px; height: 20px; background: var(--border);
}
/* Seçici `.tb-cmd` ile sınırlı DEĞİL: çıkış düğmesi klasik düzende de var
   (kenar çubuğundaki "Çıkış Yap" kaldırıldı, tek çıkış yolu bu). */
.tb-out:hover { background: rgba(220,38,38,.1); color: var(--danger); }
html[data-theme="dark"] .tb-out:hover { background: rgba(248,113,113,.14); color: #fca5a5; }

/* Birincil eylem: barın TEK gradyanı buna ait.
   Seçici `.qa .tb-add-wide`: dairesel biçimi kuran `.qa .tb-add` kuralı
   (0,2,0) `padding: 0` diyor ve daha düşük özgüllükteki bir kuralı
   ezerdi — etiket sıfır genişliğe düşüyordu. */
.qa .tb-add-wide {
  width: auto; height: 36px; padding: 0 .85rem 0 .7rem; border-radius: 11px;
  display: inline-flex; align-items: center; gap: .35rem;
  font: inherit; font-size: .83rem; font-weight: 700; color: #fff; white-space: nowrap;
  margin-left: .25rem;
}
.qa .tb-add-wide svg { width: 16px; height: 16px; }
/* Karanlık temada gradyan zümrüde döner; beyaz metin 2,4:1'de kalıyordu.
   Uygulamanın `.lbtn-primary` için kullandığı koyu mürekkebin aynısı. */
html[data-theme="dark"] .qa .tb-add-wide { color: #04241a; }

/* --- Dar ekran --- */
@media (max-width: 1100px) {
  /* Izgara bozulur, arama kalan alanı doldurur */
  .topbar.tb-cmd { display: flex; gap: .55rem; }
  .tb-cmd .topbar-search { flex: 1 1 auto; width: auto; min-width: 0; }
  .tb-cmd .topbar-actions { margin-left: auto; }
}
@media (max-width: 760px) {
  .topbar.tb-cmd { padding: .5rem .7rem; }
  .tb-cmd .tb-logo { max-width: 104px; }
  .tb-cmd .tb-goback { display: none; }   /* geri: mobilde donanım/kaydırma tuşu var */
  .qa .tb-add-wide span { display: none; }
  .qa .tb-add-wide { padding: 0 .6rem; }
}

/* ============================================================
   AI ASİSTAN — sürüklenebilir yüzen düğme (.ai-dock)
   ============================================================
   Asistan sol menüden çıkarıldı; girişi artık her ekranda sağ altta
   duran bu düğme. Varsayılan yeri sağ alt; kullanıcı çekince konum
   `localStorage`e yazılır ve orada sabitlenir (bkz. js/ai-dock.js).

   Konum `left/top` ile taşınır, `right/bottom` ile başlar: JS ilk
   sürüklemede `right/bottom`u `auto` yapıp `left/top`a geçer. Böylece
   hiç dokunulmamış düğme pencere boyutundan bağımsız köşede kalır.
   ============================================================ */
.ai-dock {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-grad); color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(79,70,229,.42), 0 2px 6px rgba(15,23,42,.18);
  transition: transform .16s cubic-bezier(.22,.61,.36,1), box-shadow .16s;
}
.ai-dock:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 26px rgba(79,70,229,.5); }
/* Yerinde açılan kart varken düğme ÇEKİLİR.
   Sağ alt köşede sabit duruyor ve kart o köşeye denk geldiğinde altlıktaki
   "Kapat" düğmesini örtüp tıklamayı yutuyordu.

   z-index düşürmek YETMEDİ — ölçüldü: sabit konumlu düğme, kartın z-index
   40'ına karşı 5'e indirildiğinde bile üstte kalmayı sürdürüyor. Bu yüzden
   görünürlükten çıkarılıyor: kart açıkken zaten kullanılmıyor, kart
   kapanınca yerine geri geliyor. Yumuşak geçiş, "kayboldu" hissi vermesin
   diye (bkz. public/js/card-expand.js — `has-expanded-card`). */
body.has-expanded-card .ai-dock {
  opacity: 0; transform: scale(.85); pointer-events: none;
  transition: opacity .16s, transform .16s;
}
.ai-dock:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
html[data-theme="dark"] .ai-dock {
  color: #04241a;
  box-shadow: 0 6px 18px rgba(16,185,129,.4), 0 2px 6px rgba(0,0,0,.5);
}
html[data-theme="dark"] .ai-dock:hover { box-shadow: 0 10px 26px rgba(16,185,129,.5); }

.aid-ico { display: grid; place-items: center; position: relative; z-index: 1; }
.aid-ico svg { display: block; }

/* Nefes alan halka — "burada canlı bir şey var" sinyali.
   Sürüklerken ve fare üzerindeyken durur: o anda dikkat zaten düğmede. */
.aid-glow {
  position: absolute; inset: -4px; border-radius: 50%;
  background: var(--brand-grad); opacity: .35; z-index: 0;
  animation: aidPulse 2.8s ease-in-out infinite;
}
.ai-dock:hover .aid-glow { animation-play-state: paused; opacity: .2; }
@keyframes aidPulse {
  0%, 100% { transform: scale(1);    opacity: .30; }
  50%      { transform: scale(1.22); opacity: 0;   }
}
@media (prefers-reduced-motion: reduce) {
  .aid-glow { animation: none; opacity: .25; }
  .ai-dock, .ai-dock:hover { transition: none; transform: none; }
}

/* Etiket — düğmenin SOLUNDA açılır. Sağda açılsaydı düğme sağ kenardayken
   ekran dışına taşardı. Taşındıktan sonra (is-moved) da solda kalır:
   kullanıcı düğmeyi sola çekmişse etiket içeriğin üstüne gelir ama
   ekran dışına çıkmaz. */
.aid-tip {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(6px);
  padding: .34rem .6rem; border-radius: 9px; white-space: nowrap; pointer-events: none;
  font-size: .78rem; font-weight: 650; letter-spacing: .01em;
  color: var(--text); background: var(--card);
  border: 1px solid var(--border); box-shadow: var(--sh-md);
  opacity: 0; transition: opacity .15s, transform .15s;
}
.ai-dock:hover .aid-tip, .ai-dock:focus-visible .aid-tip { opacity: 1; transform: translateY(-50%) translateX(0); }

@media (max-width: 760px) {
  .ai-dock { width: 48px; height: 48px; right: 14px; bottom: 14px; }
  .aid-tip { display: none; }
}

/* ============================================================
   KLAVYE KISAYOLLARI + HIZLI BİLGİ
   ============================================================
   Üç parça, tek dil:
     .kbdx / kbd  — tuş rozeti (menü, şerit, kart, ipucu — hepsi aynı)
     .sc-*        — "Yeni kayıt" modu şeridi ve kısayol kartı
     .qtip        — Hızlı Bilgi hap kartı
   Davranış: public/js/shortcuts.js ve public/js/quick-tips.js
   İçerik:   config/shortcuts.php ve config/tips.php
   ============================================================ */

/* --- Tuş rozeti — TEK biçim, dört yerde ---------------------
   Fiziksel tuş hissi: alt kenar bir piksel kalın, hafif iç ışık.
   Ekranda "bu bir metin değil, basılacak bir şey" demesi gerekiyor. */
.qa-key,
.sc-bar kbd, .sc-card kbd, .qtip kbd, .qa-foot kbd {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 .34rem;
  font-family: inherit; font-size: .715rem; font-weight: 700; line-height: 1;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
html[data-theme="dark"] .qa-key,
html[data-theme="dark"] .sc-bar kbd, html[data-theme="dark"] .sc-card kbd,
html[data-theme="dark"] .qtip kbd, html[data-theme="dark"] .qa-foot kbd {
  background: var(--surface-3); box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* --- "Yeni" menüsündeki tuş sütunu -------------------------- */
.qa-head { display: flex; align-items: center; gap: .5rem; }
.qa-head em {
  margin-left: auto; font-style: normal; font-weight: 600;
  letter-spacing: 0; text-transform: none; font-size: .64rem; opacity: .75;
}
.qa-item { position: relative; }
.qa-key { margin-left: auto; flex-shrink: 0; }
/* Satır üzerindeyken tuş öne çıksın: göz zaten oradayken öğrenilir */
.qa-item:hover .qa-key, .qa-item:focus-visible .qa-key {
  color: var(--primary); border-color: var(--primary);
}

/* Menü altındaki kalıcı giriş */
.qa-foot {
  display: flex; align-items: center; gap: .45rem; width: 100%;
  padding: .42rem .6rem; border: 0; border-radius: 10px;
  background: transparent; color: var(--muted); cursor: pointer;
  font: inherit; font-size: .765rem; font-weight: 600; text-align: left;
}
.qa-foot span { flex: 1 1 auto; }
.qa-foot:hover { background: var(--primary-light); color: var(--primary); }

/* ------------------------------------------------------------
   "YENİ KAYIT" MODU ŞERİDİ (.sc-bar)
   ------------------------------------------------------------
   Ctrl + Y'ye basınca ekranın altında belirir. Olmasaydı kısayol
   "hiçbir şey olmadı" gibi görünür, kullanıcı ikinci tuşa basmadan
   vazgeçerdi. Alt kenar bilerek seçildi: içeriğin üstünü örtmez ve
   göz zaten formun kaydet şeridini orada aramaya alışkın.
   ------------------------------------------------------------ */
.sc-bar {
  position: fixed; left: 50%; bottom: 20px; z-index: 95;
  transform: translate(-50%, 14px);
  display: flex; align-items: center; gap: .38rem; flex-wrap: wrap;
  max-width: min(940px, calc(100vw - 2rem));
  padding: .5rem .6rem;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--sh-lg);
  opacity: 0; pointer-events: none;
  transition: opacity .14s ease, transform .14s cubic-bezier(.22,.61,.36,1);
}
.sc-bar.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

.sc-cap {
  padding: .2rem .5rem; margin-right: .15rem; border-radius: 999px;
  font-size: .69rem; font-weight: 800; letter-spacing: .03em;
  background: var(--brand-grad); color: #fff;
}
html[data-theme="dark"] .sc-cap { color: #04241a; }

.sc-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .45rem .2rem .25rem; border-radius: 9px;
  font-size: .76rem; color: var(--muted); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.sc-chip:hover { background: var(--primary-light); color: var(--primary); }
.sc-chip:hover kbd { border-color: var(--primary); color: var(--primary); }

.sc-esc {
  display: inline-flex; align-items: center; gap: .3rem; margin-left: auto;
  padding-left: .5rem; border-left: 1px solid var(--border);
  font-size: .72rem; color: var(--muted);
}

/* Kalan süre — flash şeritlerindeki ince çizginin aynısı */
.sc-fuse {
  position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px;
  border-radius: 2px; background: var(--primary); transform-origin: left;
  animation: scFuse var(--sc-sure, 3s) linear forwards;
}
.sc-bar:hover .sc-fuse { animation-play-state: paused; }
@keyframes scFuse { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 760px) {
  /* Dokunmatikte klavye yok: şerit yer kaplamasın */
  .sc-bar { display: none; }
}

/* ------------------------------------------------------------
   KISAYOL KARTI (.sc-card) — modal içinde
   ------------------------------------------------------------ */
.sc-card { font-size: .88rem; }
.sc-lead { margin: 0 0 1rem; color: var(--muted); line-height: 1.6; }
.sc-h {
  margin: 1.1rem 0 .5rem; font-size: .7rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.sc-h:first-child { margin-top: 0; }
.sc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.sc-list.sc-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.sc-list li {
  display: flex; align-items: center; gap: .6rem;
  padding: .42rem .55rem; border-radius: 10px; background: var(--bg);
}
html[data-theme="dark"] .sc-list li { background: var(--surface-2); }
.sc-keys { display: inline-flex; align-items: center; gap: .18rem; flex-shrink: 0; }
.sc-keys i { font-style: normal; font-size: .68rem; color: var(--muted); }
.sc-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.sc-txt b { font-size: .82rem; font-weight: 650; }
.sc-txt small { font-size: .7rem; color: var(--muted); }
.sc-foot {
  margin: 1.1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--border);
  font-size: .8rem; color: var(--muted); line-height: 1.6;
}

/* ------------------------------------------------------------
   HIZLI BİLGİ (.qtip) — asistandan çıkan konuşma balonu
   ------------------------------------------------------------
   Balon, sağ alttaki AI Asistan düğmesine KUYRUKLA bağlanır ve
   konumu JS ile ölçülür (düğme sürüklenebilir; bkz. quick-tips.js).

   NEDEN AYRI BİR ZEMİN: ilk kurguda balon `--card` kullanıyordu ve
   arkasındaki kartlarla aynı renkteydi — göz onu "sayfanın bir
   parçası" sayıp atlıyordu. Artık marka renginden pay alan hafif
   bir gradyan taşıyor: dikkat çeker ama uyarı kırmızısı gibi
   telaş yaratmaz. Renk `--primary`den türetildiği için tema
   değiştiğinde (indigo ↔ yeşil) kendiliğinden uyum sağlar.
   ------------------------------------------------------------ */
.qtip {
  position: fixed; z-index: 96;
  right: 22px; bottom: 22px;                 /* JS ölçene kadarki ilk yer */
  width: min(340px, calc(100vw - 2rem));
  padding: .85rem .95rem .8rem;
  color: var(--text);
  background:
    linear-gradient(158deg,
      color-mix(in srgb, var(--primary) 24%, var(--card)) 0%,
      color-mix(in srgb, var(--primary) 9%, var(--card)) 60%,
      var(--card) 100%);
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--border));
  border-radius: 16px;
  box-shadow:
    0 12px 34px color-mix(in srgb, var(--primary) 26%, transparent),
    0 2px 8px rgba(15,23,42,.16);
  opacity: 0; transform: scale(.86);
  transition: opacity .2s ease, transform .22s cubic-bezier(.34,1.3,.64,1);
}
.qtip.is-on { opacity: 1; transform: none; }
html[data-theme="dark"] .qtip {
  background:
    linear-gradient(158deg,
      color-mix(in srgb, var(--primary) 26%, var(--card)) 0%,
      color-mix(in srgb, var(--primary) 11%, var(--card)) 60%,
      var(--card) 100%);
  box-shadow:
    0 12px 34px color-mix(in srgb, var(--primary) 30%, transparent),
    0 2px 10px rgba(0,0,0,.5);
}

/* Kuyruk — balonu asistan düğmesine bağlar.
   Döndürülmüş kare: iki kenarı balonun kenarlığını sürdürür, zemini
   balonun O NOKTADAKİ rengiyle eşleşsin diye gradyanın alt ucundan
   (yani düz `--card`) alınır. */
.qtip-tail {
  position: absolute; width: 12px; height: 12px;
  margin-left: -6px; transform: rotate(45deg);
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--border));
}
.qtip:not(.is-below) .qtip-tail {
  bottom: -7px; border-top: 0; border-left: 0;       /* aşağı bakan uç */
}
.qtip.is-below .qtip-tail {
  top: -7px; border-bottom: 0; border-right: 0;      /* yukarı bakan uç */
  /* Üstte kuyruk gradyanın en KOYU ucuna denk gelir */
  background: color-mix(in srgb, var(--primary) 24%, var(--card));
}
html[data-theme="dark"] .qtip.is-below .qtip-tail {
  background: color-mix(in srgb, var(--primary) 26%, var(--card));
}
/* Düğme yoksa (asistan sayfası) kuyruk gizlenir — JS de `hidden` verir */
.qtip.is-free .qtip-tail { display: none; }

/* Üst kenardaki kalan süre çizgisi */
.qtip-bar {
  position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  border-radius: 16px 16px 0 0; background: var(--brand-grad);
  transform-origin: left; animation: qtipFuse var(--qtip-sure, 14s) linear forwards;
}
.qtip.is-held .qtip-bar { animation-play-state: paused; }
@keyframes qtipFuse { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Başlık satırı — "bu bir sistem uyarısı değil, asistanın sözü" */
.qtip-cap { display: flex; align-items: center; gap: .4rem; }
.qtip-av {
  display: grid; place-items: center; flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand-grad); color: #fff;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 40%, transparent);
}
html[data-theme="dark"] .qtip-av { color: #04241a; }
.qtip-cap b { font-size: .78rem; font-weight: 700; letter-spacing: -.01em; }
.qtip-tag {
  padding: .05rem .38rem; border-radius: 999px;
  font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.qtip-t { display: block; margin: .45rem 0 0; font-size: .93rem; font-weight: 700; }
.qtip-keys { display: flex; align-items: center; gap: .22rem; margin: .5rem 0 0; }
.qtip-keys i { font-style: normal; font-size: .72rem; color: var(--muted); }
.qtip-p { margin: .45rem 0 0; font-size: .8rem; line-height: 1.55; color: var(--muted); }

.qtip-x {
  position: absolute; top: .5rem; right: .5rem;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: var(--muted); cursor: pointer;
  font-size: 1.05rem; line-height: 1; opacity: .65;
}
.qtip-x:hover { opacity: 1; background: color-mix(in srgb, var(--primary) 14%, transparent); }

/* Balon açılırken düğme bir an "konuşur": kaynağın neresi olduğu
   kuyruktan önce hareketle anlaşılsın. */
.ai-dock.is-speaking { animation: aidSpeak .5s cubic-bezier(.34,1.4,.64,1) 2; }
@keyframes aidSpeak {
  0%, 100% { transform: scale(1) rotate(0); }
  35%      { transform: scale(1.1) rotate(-7deg); }
  70%      { transform: scale(1.04) rotate(5deg); }
}

.qtip-act { display: flex; align-items: center; gap: .4rem; margin: .75rem 0 0; }
.qtip-link, .qtip-ok {
  padding: .34rem .7rem; border-radius: 9px; cursor: pointer;
  font: inherit; font-size: .765rem; font-weight: 650; text-decoration: none;
}
.qtip-link {
  border: 1px solid var(--border); background: transparent; color: var(--text);
}
.qtip-link:hover { border-color: var(--primary); color: var(--primary); }
.qtip-ok {
  margin-left: auto; border: 0; background: var(--brand-grad); color: #fff;
  box-shadow: 0 3px 10px rgba(79,70,229,.3);
}
html[data-theme="dark"] .qtip-ok { color: #04241a; box-shadow: 0 3px 10px rgba(16,185,129,.28); }
.qtip-ok:hover { filter: brightness(1.06); }

@media (max-width: 560px) {
  /* Dar ekranda balon tam genişliğe yayılır ve düğmenin üstüne oturur;
     JS'in ölçtüğü `left` bu kuralla ezilir, kuyruk yine düğmeyi gösterir. */
  .qtip { right: 12px !important; left: 12px !important; width: auto; }
}

/* Hareket azaltma tercihi: çizgiler ve geçişler sussun, kartlar dursun.
   Süre sayacı JS'te işlediği için içerik yine kendiliğinden kapanır. */
@media (prefers-reduced-motion: reduce) {
  .sc-bar, .qtip { transition: none; transform: none; }
  .sc-bar { transform: translateX(-50%); }
  .sc-bar.is-on { transform: translateX(-50%); }
  .qtip .qtip-tail { transform: rotate(45deg); }
  .sc-fuse, .qtip-bar { animation: none; opacity: .35; }
  .ai-dock.is-speaking { animation: none; }
}

/* ============================================================
   HAREKETSİZLİK UYARISI (.idle-warn)
   ------------------------------------------------------------
   30 dakikalık sayacın son iki dakikasında ekranın ÜST ortasında
   belirir (bkz. public/js/session-idle.js). Alt kenar bilerek
   seçilmedi: orada kısayol şeridi (.sc-bar) ve bilgi baloncukları
   var; oturumun kapanmak üzere olduğu haberi onların arkasında
   kalamaz. Kehribar renk uyarı ailesindendir — kırmızı olsaydı
   "bir şey bozuldu" derdi, oysa henüz bir şey olmadı.
   ============================================================ */
.idle-warn {
  position: fixed; left: 50%; top: 14px; transform: translateX(-50%);
  z-index: 120;
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  max-width: min(680px, calc(100vw - 1.6rem));
  padding: .6rem .75rem;
  font-size: .84rem; line-height: 1.4;
  color: var(--text);
  background: var(--card);
  border: 1px solid color-mix(in srgb, #f59e0b 45%, var(--border));
  border-left: 4px solid #f59e0b;
  border-radius: 12px;
  box-shadow: var(--sh-lg);
}
.idle-warn-t { flex: 1 1 240px; }
.idle-warn-c { font-variant-numeric: tabular-nums; color: #b45309; }
html[data-theme="dark"] .idle-warn-c { color: #fbbf24; }
.idle-warn-b {
  flex: none; padding: .38rem .7rem; border-radius: 9px; cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 700;
  color: #fff; background: var(--primary); border: 1px solid var(--primary);
}
.idle-warn-b:hover { filter: brightness(1.08); }

/* ============================================================
   KART İÇİ KAYDIRMA YOK — taşan kart "Tümünü gör" ile modalda açılır
   ============================================================
   Sayfada TEK kaydırma yüzeyi vardır: sayfanın kendisi. Kart gövdeleri
   kendi içlerinde kaymaz.

   Neden: gövde kaydırılabilir olduğunda fare sayfayı kaydırırken kartın
   üzerinden geçmek tekerleği karta kaptırıyordu; kullanıcı sayfayı
   ilerletemiyor, kart da bir iki satır kayıp duruyordu. Ara çözüm olarak
   denenen "üzerinde bir an durursa kart devralır" kuralı da öngörülemez
   kaldı — kaydırma bir görünüp bir kayboluyordu.

   Yerine: taşan kartın altına `.cdc-more` düğmesi konur (JS ölçer, bkz.
   card-expand.js), içeriğin TAMAMI modalda gösterilir. Kart kırpılmış
   olduğunu alttaki solma + düğme ile açıkça söyler.

   `overflow: hidden` kuralları kartların kendi bölümlerinde duruyor
   (".cud .cd-grid > .cd-card > .cdc-body" ve ".pdx .cd-card .cdc-body"):
   dar ekranda kartı serbest bırakan geçersiz kılmalar kaynakta onlardan
   sonra geliyor ve ezebilmeleri gerekiyor. */

/* Kartın altına yapışan "devamı var" düğmesi. Gövdenin İÇİNDE değil
   kardeşi: içinde olsaydı kendi yüksekliği taşmayı büyütür, ölçüm
   kendi kendini besleyen bir döngüye girerdi. */
.cdc-more {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  width: 100%; margin: 0; padding: .45rem .6rem;
  font: inherit; font-size: .735rem; font-weight: 700;
  color: var(--primary); background: transparent;
  border: 0; border-top: 1px solid var(--border);
  cursor: pointer;
  /* Satır SARMAMALI. Sardığında düğme iki satıra çıkıyor, gövde kısalıyor,
     bir satır daha gizleniyor, "+N daha" değişiyor, düğme yeniden yazılıyor
     ve ölçüm baştan başlıyordu — kendini besleyen bir döngü. Sabit yükseklik
     o döngünün beslendiği yeri kapatıyor. */
  white-space: nowrap; overflow: hidden;
}
.cdc-more:hover { background: var(--primary-light); }
.cdc-more:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* Tıklama hedefi HER ZAMAN düğmenin kendisi olsun.
   Düğmenin içeriği (`innerHTML`) sayı değiştikçe yeniden yazılıyor; basılan
   <span> mouseup'a kadar yaşamadığında tarayıcı click olayını hiç üretmiyor.
   Kullanıcının gördüğü buydu: yazının üstüne basınca hiçbir şey olmuyor,
   biraz altına (düğmenin dolgusuna) basınca açılıyordu. */
.cdc-more > * { pointer-events: none; }
.cdc-more svg { flex: none; transition: transform .18s; }
.cdc-more em { font-style: normal; font-weight: 600; color: var(--muted); }
.cd-card.is-expanded > .cdc-more svg { transform: rotate(180deg); }

/* Modalda basılan tam içerik — kart gövdesinin kırpılmamış hâli */
.cdc-full > * { margin-top: 0; }
.cdc-full > * + * { margin-top: .6rem; }
.cdc-full .cdc-more { display: none; }   /* klonda düğme anlamsız */
/* Poliçe kartı buraya hiç düşmez: pencere yerine YERİNDE açılıyor
   (`data-more-toggle` — bkz. card-expand.js, `.is-expanded`). */

/* =====================================================================
   YENİLEME DURUMU — poliçe listesindeki rozet ve düğme
   =====================================================================
   Düğme ÜÇ durumu anlatır: işaretsiz (nötr), yenilendi (yeşil),
   yenilenmedi (kırmızı). Renk süs değil — temsilci listeye baktığında
   hangi vadelerin hâlâ cevapsız olduğunu tek bakışta görsün diye. */
.lact.a-rst { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); }
.lact.a-rst:hover { background: var(--muted); color: #fff; }
.lact.a-rst.is-yes { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.lact.a-rst.is-yes:hover { background: var(--success); color: #fff; }
.lact.a-rst.is-no { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.lact.a-rst.is-no:hover { background: var(--danger); color: #fff; }

/* Yaşam Döngüsü düğmesi — yalnız zincire bağlı satırlarda çıkar
   (tek dönemlik poliçede gösterecek bir "öncesi/sonrası" yok). */
.lact.a-cycle { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.lact.a-cycle:hover { background: var(--info); color: #fff; }

.lt-renew {
  display: inline-flex; align-items: center; gap: .22rem;
  margin-top: .18rem; padding: .06rem .4rem; border-radius: 999px;
  font-size: .645rem; font-weight: 700; letter-spacing: .01em;
}
.lt-renew.is-yes { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.lt-renew.is-no  { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }

/* ---------------------------------------------------------------------
   AKIBET ŞERİDİ — süresi dolmuş poliçenin sonucu satırın solundan okunur.
   MOR = yenilendi, TURUNCU = yenilenmedi (--mark-*). Rozet bundan
   etkilenmez: o yeşil/kırmızı kalır. Şerit satırı İŞARETLER, rozet
   sonucu SÖYLER; ikisi ayrı renk ailesinde olunca satırın öteki
   ucundaki aciliyet tonlarıyla karışmıyor. Sınıflar yalnız süresi dolmuş (ve iptal edilmemiş) satırlara verilir;
   şerit hover vurgusunu da ezer, yoksa fare üzerinden geçerken bilgi
   kayboluyordu. Soluklaştırma (.62) bu satırlarda hafifletilir: sonucu
   belli olmuş poliçe "ölü kayıt" değil, okunması istenen kayıttır. */
#polTable tbody tr.is-outcome-yes td:first-child,
#polTable tbody tr.is-outcome-yes:hover td:first-child { box-shadow: inset 4px 0 0 var(--mark-renewed); }
#polTable tbody tr.is-outcome-no td:first-child,
#polTable tbody tr.is-outcome-no:hover td:first-child  { box-shadow: inset 4px 0 0 var(--mark-unrenewed); }
.lst-table tr.is-muted.is-outcome-yes td,
.lst-table tr.is-muted.is-outcome-no td { opacity: .82; }
#polTable tbody tr.is-outcome-yes td { background: color-mix(in srgb, var(--mark-renewed) 6%, var(--card)); }
#polTable tbody tr.is-outcome-no td  { background: color-mix(in srgb, var(--mark-unrenewed) 6%, var(--card)); }

/* ---------------------------------------------------------------------
   AKIBET ALT SATIRI — kararın açılımı ana satırın hemen altında iç satır
   olarak durur: yenilenen poliçenin künyesi + detay sayfası bağlantısı,
   yenilenmediyse sebep. Bant görünümünde alt satır ana satıra YAPIŞIR:
   aradaki 7 px boşluk kalkar, köşe yuvarlatmaları alt satıra devrolur. */
#polTable tbody tr:has(+ tr.pol-sub) td { border-bottom: 0; }
#polTable tbody tr:has(+ tr.pol-sub) td:first-child { border-bottom-left-radius: 0; }
#polTable tbody tr:has(+ tr.pol-sub) td:last-child  { border-bottom-right-radius: 0; }
#polTable tbody tr.pol-sub td {
  padding: 0 .9rem .55rem;
  border-bottom: 7px solid var(--bg);
  border-top-left-radius: 0 !important; border-top-right-radius: 0 !important;
}
/* Alt satır ana satırın devamı: şeridi ve zemini ondan alır.
   İçindeki rozetler yine yeşil/kırmızı (bkz. `.psub-badge`). */
#polTable tbody tr.pol-sub.is-yes td,
#polTable tbody tr.pol-sub.is-yes:hover td {
  background: color-mix(in srgb, var(--mark-renewed) 6%, var(--card));
  box-shadow: inset 4px 0 0 var(--mark-renewed);
}
#polTable tbody tr.pol-sub.is-no td,
#polTable tbody tr.pol-sub.is-no:hover td {
  background: color-mix(in srgb, var(--mark-unrenewed) 6%, var(--card));
  box-shadow: inset 4px 0 0 var(--mark-unrenewed);
}

.psub {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  padding: .45rem .55rem;
  border-radius: 9px;
  border: 1px dashed color-mix(in srgb, var(--muted) 26%, transparent);
  background: color-mix(in srgb, var(--card) 55%, transparent);
  font-size: .74rem; line-height: 1.35;
}
.pol-sub.is-yes .psub { border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.pol-sub.is-no  .psub { border-color: color-mix(in srgb, var(--danger) 28%, transparent); }
.psub-elbow {
  flex: none; width: 12px; height: 12px; margin-left: .15rem;
  border-left: 2px solid color-mix(in srgb, var(--muted) 45%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--muted) 45%, transparent);
  border-bottom-left-radius: 7px; transform: translateY(-3px);
}
.psub-badge {
  flex: none; display: inline-flex; align-items: center; gap: .28rem;
  padding: .14rem .5rem; border-radius: 999px;
  font-size: .66rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
}
.pol-sub.is-yes .psub-badge { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.pol-sub.is-no  .psub-badge { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.psub-pol {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .16rem .55rem; border-radius: 8px;
  font-weight: 700; font-size: .78rem;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
  transition: background .14s, color .14s, transform .14s;
}
.psub-pol:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }
.psub-pol .psub-go { display: inline-flex; opacity: .7; }
.psub-meta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .55rem; color: var(--muted); min-width: 0; }
.psub-meta > b { color: var(--text); font-weight: 700; }
.psub-meta > span { display: inline-flex; align-items: center; gap: .25rem; }
.psub-meta svg { opacity: .65; }
.psub-prim { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.psub-prim .cur { font-size: .82em; opacity: .55; font-weight: 500; }
.psub-delta { font-style: normal; font-weight: 800; font-size: .68rem; padding: .1rem .38rem; border-radius: 999px; }
.psub-delta.up   { background: color-mix(in srgb, var(--warn) 18%, transparent); color: color-mix(in srgb, var(--warn) 78%, #000); }
.psub-delta.down { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.psub-nolink { font-style: italic; color: var(--muted); }
.psub-reason {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .16rem .55rem; border-radius: 8px;
  font-weight: 700; color: color-mix(in srgb, var(--danger) 82%, var(--text));
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
}
.psub-note { display: inline-flex; align-items: center; gap: .28rem; color: var(--muted); font-style: italic; min-width: 0; }
.psub-mark { margin-left: auto; display: inline-flex; align-items: center; gap: .25rem; color: var(--muted); font-size: .68rem; white-space: nowrap; }
/* Alt satırdan yaşam döngüsüne kısayol — "bu vade ne oldu"nun bir üst katı */
.psub-cycle {
  display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap;
  padding: .08rem .42rem; border-radius: 999px; font-size: .68rem; font-weight: 700;
  text-decoration: none; color: var(--info);
  background: color-mix(in srgb, var(--info) 12%, transparent);
}
.psub-cycle:hover { background: var(--info); color: #fff; }

html[data-theme="dark"] .psub { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
html[data-theme="dark"] .psub-delta.up { color: #fbbf24; }

/* KPI kart başlığındaki "net" imi (Toplam Prim · yıl) */
.stat-cap .stat-note {
  font-style: normal; margin-left: .3rem; padding: .05rem .4rem; border-radius: 999px;
  font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success);
  cursor: help;
}

/* =====================================================================
   POLİÇE FORMU — "Bu bir yenileme mi?" bölümü
   =====================================================================
   Form sonundaki soru. Adaylar sunucudan gelir (`/policeler/yenileme-adaylari`)
   ve seçim isteğe bağlıdır: karşı poliçe henüz sistemde olmayabilir. */
.pfr-ask { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 640px) { .pfr-ask { grid-template-columns: 1fr; } }
.pfr-opt {
  display: flex; align-items: flex-start; gap: .55rem; cursor: pointer;
  padding: .7rem .8rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); border-left: 3px solid var(--border);
  background: var(--card); transition: border-color .15s, background .15s;
}
.pfr-opt:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.pfr-opt > input { margin-top: .2rem; flex: none; }
.pfr-opt-t { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pfr-opt-t > b { font-size: .875rem; font-weight: 700; }
.pfr-opt-t > em { font-style: normal; font-size: .72rem; color: var(--muted); line-height: 1.45; }
.pfr-opt.is-on { border-color: var(--primary); border-left-color: var(--primary);
                 background: var(--primary-light); }

.pfr-list { margin-top: .8rem; display: flex; flex-direction: column; gap: .35rem;
            max-height: 300px; overflow-y: auto; padding-right: .2rem; }
.pfr-cap { font-size: .655rem; font-weight: 700; letter-spacing: .05em;
           text-transform: uppercase; color: var(--muted); margin: .3rem 0 .1rem; }
.pfr-row {
  display: flex; align-items: flex-start; gap: .55rem; cursor: pointer;
  padding: .5rem .6rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); border-left: 3px solid var(--border);
  background: var(--card); transition: border-color .15s, background .15s;
}
.pfr-row:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.pfr-row.is-on { border-left-color: var(--primary); background: var(--primary-light); }
.pfr-row > input { margin-top: .25rem; flex: none; }
.pfr-row-b { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.pfr-row-b > b { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; font-size: .84rem; }
.pfr-row-b > span { font-size: .71rem; color: var(--muted); overflow-wrap: anywhere; }
.pfr-row-none { border-style: dashed; }
.pfr-tag {
  font-style: normal; display: inline-flex; padding: .05rem .36rem; border-radius: 999px;
  font-size: .62rem; font-weight: 700;
  background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted);
}
.pfr-tag.is-bad { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.pfr-empty { font-size: .75rem; color: var(--muted); line-height: 1.5; padding: .5rem .1rem; }
/* Cevapsız bırakılan "Bu bir yenileme mi?" sorusu — hata özetiyle aynı dil */
.pfr-ask.has-err .pfr-opt { border-color: var(--danger); }

/* Ödeme penceresindeki "Seçenekler ne yapar?" katlanır yardım kutusu.
   Modalın odağı formdur; açıklama isteyene açılır, istemeyeni yormaz. */
.pay-help { margin: .9rem 0 .2rem; border-top: 1px dashed var(--border); padding-top: .6rem; }
.pay-help > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .35rem;
  font-size: .765rem; font-weight: 600; color: var(--muted);
}
.pay-help > summary::-webkit-details-marker { display: none; }
.pay-help > summary:hover { color: var(--primary); }
.pay-help ul { margin: .5rem 0 .4rem; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .28rem; }
.pay-help li { font-size: .755rem; color: var(--muted); line-height: 1.5; }
.pay-help p { font-size: .735rem; color: var(--muted); margin: 0; }

/* Taksit tahsil edilince kartın başında beliren onay şeridi.
   Kullanıcı hangi rakamın işlendiğini panellerin arasında aramasın diye
   tutar burada açıkça yazılır; şerit birkaç saniye sonra kaybolur. */
.pdx-paid-flash {
  display: flex; align-items: center; gap: .45rem;
  margin: 0 0 .7rem; padding: .5rem .65rem; border-radius: var(--radius-sm);
  font-size: .78rem; line-height: 1.4;
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 32%, transparent);
  animation: payFlashIn .25s ease;
}
.pdx-paid-flash svg { flex: none; }
.pdx-paid-flash.is-err {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 32%, transparent);
}
@keyframes payFlashIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ============================================================
   GÖRÜŞMELER — kart ızgarası + yorum akışı (/gorusmeler)
   ============================================================
   Kartlar satırda 4-5'li dizilir (auto-fill); "Yorumlar" düğmesi kartı
   satır boyunca genişletir (is-open → grid-column 1/-1) ve yorum dizisini
   açar. Cevap bekleyen bilgi talebi taşıyan kart amber halkayla yanar. */

.mtg-warn {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .7rem .9rem; margin-bottom: .8rem; border-radius: 12px;
  background: color-mix(in srgb, #f59e0b 10%, var(--card));
  border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
  font-size: .82rem; color: var(--text);
}
.mtg-warn svg { flex-shrink: 0; color: #b45309; margin-top: .1rem; }

.mtg-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .6rem; align-items: start;
}

.mtg-card {
  display: flex; flex-direction: column; gap: .38rem;
  padding: .7rem .78rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 13px;
  box-shadow: var(--sh-sm); transition: box-shadow .15s, border-color .15s;
}
.mtg-card:hover { box-shadow: 0 4px 14px rgba(2, 6, 23, .08); }
.mtg-card.has-request { border-color: color-mix(in srgb, #f59e0b 45%, var(--border)); }
.mtg-card.is-waiting { box-shadow: 0 0 0 1px color-mix(in srgb, #f59e0b 40%, transparent), var(--sh-sm); }
.mtg-card.is-open { grid-column: 1 / -1; }
.mtg-card.is-target { animation: mtgTarget 1.6s ease 1; }
@keyframes mtgTarget {
  0%, 55% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 45%, transparent); }
  100% { box-shadow: var(--sh-sm); }
}

/* Üst şerit: saat · sonuç işareti · rozetler */
.mtg-top { display: flex; align-items: center; gap: .35rem; min-height: 24px; }
.mtg-top-sp { flex: 1 1 auto; }
.mtg-time {
  padding: .1rem .4rem; border-radius: 7px;
  font-size: .7rem; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--muted); background: var(--surface-2);
}
.mtg-cc {
  padding: .1rem .4rem; border-radius: 6px; white-space: nowrap;
  font-size: .64rem; font-weight: 650; color: var(--muted); background: var(--surface-2);
}
.mtg-cc b { color: var(--text); font-weight: 800; }

.mtg-cust {
  font-size: .85rem; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mtg-cust:hover { color: var(--primary); }

/* Kapalı kartta not metni 3 satırla kırpılır; açılınca tamamı */
.mtg-text {
  margin: 0; font-size: .78rem; line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.mtg-card.is-open .mtg-text { display: block; overflow: visible; color: var(--text); }

.mtg-foot { display: flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: .15rem; }
.mtg-author {
  display: inline-flex; align-items: center; gap: .25rem; flex: 1 1 auto; min-width: 0;
  font-size: .69rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mtg-toggle {
  display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0;
  padding: .26rem .55rem; border: 0; border-radius: 8px; cursor: pointer;
  font-size: .7rem; font-weight: 700;
  color: var(--primary); background: var(--primary-light);
  transition: transform .12s, box-shadow .12s;
}
.mtg-toggle:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); }
.mtg-toggle > span { display: inline-flex; align-items: center; gap: .3rem; }
.mtg-card.is-open .mtg-t-open { display: none; }
.mtg-card:not(.is-open) .mtg-t-close { display: none; }

/* Genişleyen bölüm */
.mtg-detail { display: none; }
.mtg-card.is-open .mtg-detail {
  display: block; margin-top: .3rem; padding-top: .55rem;
  border-top: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
}
.mtg-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; font-size: .72rem; color: var(--muted); }
.mtg-meta span { display: inline-flex; align-items: center; gap: .22rem; }
.mtg-meta-link { display: inline-flex; align-items: center; gap: .22rem; color: var(--primary); font-weight: 650; }

.mtg-badge {
  display: inline-flex; align-items: center; gap: .22rem;
  padding: .1rem .45rem; border-radius: 6px;
  font-size: .62rem; font-weight: 800; letter-spacing: .03em; white-space: nowrap;
}
.mb-green { background: #dcfce7; color: #15803d; }
.mb-red   { background: #fee2e2; color: #b91c1c; }
.mb-gray  { background: #eef1f5; color: #64748b; }
/* Belirsiz görüşme rozeti — kare işaretle aynı renk ailesinden (mavi) */
.mb-blue  { background: #dbeafe; color: #1d4ed8; }
.mb-req   { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
html[data-theme="dark"] .mb-green { background: rgba(34,197,94,.16); color: #86efac; }
html[data-theme="dark"] .mb-red   { background: rgba(239,68,68,.16); color: #fca5a5; }
html[data-theme="dark"] .mb-gray  { background: rgba(148,163,184,.16); color: #cbd5e1; }
html[data-theme="dark"] .mb-blue  { background: rgba(59,130,246,.18); color: #93c5fd; }
html[data-theme="dark"] .mb-req   { color: #fbbf24; }

/* ------------------------------------------------------------------
   AKIŞTAKİ WHATSAPP KARTI
   Görüşme notuyla aynı iskelet, iki farkla: sonuç işareti yerine İLETİM
   DURUMU taşır ve yorum dizisi yoktur (yorum not kimliğine bağlı). Yeşil
   sol şerit, notlarla karışmasın diye — müşteri kartındaki yapışkan
   WhatsApp kâğıdıyla aynı renk ailesi.
   ------------------------------------------------------------------ */
.mtg-card.is-wa { border-left: 3px solid #25d366; }
.mtg-card.is-wa.is-fail .mtg-text { text-decoration: line-through; }
.note-mark.nm-wa { background: #128c7e; }
html[data-theme="dark"] .note-mark.nm-wa { background: #25d366; color: #052e16; }

.mb-wa { background: #dcfce7; color: #15803d; }
.is-prep .mb-wa { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.is-fail .mb-wa { background: #fee2e2; color: #b91c1c; }
html[data-theme="dark"] .mb-wa { background: rgba(37,211,102,.16); color: #86efac; }
html[data-theme="dark"] .is-prep .mb-wa { color: #fbbf24; }
html[data-theme="dark"] .is-fail .mb-wa { background: rgba(239,68,68,.16); color: #fca5a5; }

/* "Gönderildiği doğrulanmadı" — `.rj-tag` iskeleti, uyarı tonunda */
.mtg-wa-warn { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; }
html[data-theme="dark"] .mtg-wa-warn { color: #fcd34d; }

.mtg-wa-tpl {
  flex-shrink: 0; padding: .1rem .45rem; border-radius: 6px;
  font-size: .64rem; font-weight: 700; color: var(--muted); background: var(--surface-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42%;
}

.dh-pill-wa { background: #dcfce7; color: #15803d; }
html[data-theme="dark"] .dh-pill-wa { background: rgba(37,211,102,.16); color: #86efac; }

/* Yorum dizisi */
.mtg-thread { margin-top: .55rem; display: flex; flex-direction: column; gap: .45rem; }
.mtg-comment {
  padding: .5rem .65rem; border-radius: 10px;
  background: var(--surface-2);
  border-left: 3px solid color-mix(in srgb, var(--primary) 35%, transparent);
  transition: opacity .18s;
}
.mtg-comment.is-req {
  background: color-mix(in srgb, #f59e0b 8%, var(--card));
  border-left-color: #f59e0b;
}
.mtg-comment.is-new { animation: nbIn .45s ease; }
.mtg-comment.is-going { opacity: .35; }
.mtg-c-head { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: .2rem; }
.mtg-c-head b { font-size: .78rem; color: var(--text); }
.mtg-c-head time { font-size: .68rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mtg-c-role {
  padding: .06rem .35rem; border-radius: 5px;
  font-size: .62rem; font-weight: 800; letter-spacing: .04em;
  background: linear-gradient(150deg, #4f46e5, #312e81); color: #fff;
}
.mtg-comment p { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--text); word-break: break-word; }
.mtg-c-del {
  margin-left: auto; width: 20px; height: 20px; border: 0; border-radius: 6px;
  display: grid; place-items: center; cursor: pointer;
  font-size: .95rem; line-height: 1; color: var(--muted); background: transparent;
  opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
.mtg-comment:hover .mtg-c-del, .mtg-c-del:focus-visible { opacity: 1; }
.mtg-c-del:hover { background: color-mix(in srgb, #ef4444 14%, transparent); color: #dc2626; }

/* Yorum formu */
.mtg-c-form { display: flex; flex-direction: column; gap: .35rem; }
.mtg-c-form textarea {
  width: 100%; min-height: 38px; max-height: 120px; resize: vertical;
  font-size: .8rem; line-height: 1.45;
}
.mtg-c-row { display: flex; align-items: center; gap: .6rem; }
.mtg-c-req {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .74rem; font-weight: 650; color: #b45309; cursor: pointer;
}
html[data-theme="dark"] .mtg-c-req { color: #fbbf24; }
.mtg-c-msg { font-size: .72rem; font-weight: 650; color: var(--success); }
.mtg-c-msg.is-err { color: #dc2626; }
.mtg-c-send { margin-left: auto; }

/* Gün gezinme okları */
.mtg-nav { padding-inline: .55rem; }
.mtg-nav.is-off { opacity: .35; pointer-events: none; }

.mtg-empty-card { padding: 2rem 1rem; }

/* Müşteri kipinde kart başlığı: ad yerine GÜN yazar */
.mtg-cust.is-day {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--label); font-weight: 700; cursor: default;
}
.mtg-cust.is-day svg { color: var(--muted); }

/* Eşleşme bulunamadı satırı */
.mtg-miss {
  display: flex; align-items: center; flex-wrap: wrap; gap: .3rem;
  margin: -.2rem 0 .7rem; padding: .55rem .8rem;
  font-size: .78rem; line-height: 1.5; color: var(--label);
  background: var(--surface-2); border: 1px dashed var(--border); border-radius: 11px;
}
.mtg-miss svg { color: var(--muted); flex-shrink: 0; }

/* ------------------------------------------------------------
   MÜŞTERİ SÜZGECİ (görüşme şeridi) — anlık arama
   ------------------------------------------------------------
   Süzgeç şeridinin içinde durur, bu yüzden `cpick`ten ayrı: sonuç
   listesi akışı aşağı itmemeli, şeridin ÜSTÜNE düşmeli. */
/* Şeridin boş genişliğini bu alan kapar: arama, gün oklarıyla aynı ağırlıkta
   bir çip değil, ekranın asıl giriş alanıdır. `~` seçicisi bilerek: sonraki
   bilgi çipinin `margin-left:auto`'su kaldırılmazsa boş alanı O yutar ve
   flex-grow hiç çalışmaz (otomatik kenar boşluğu büyümeden önce doyar). */
.mcp { position: relative; flex: 1 1 320px; min-width: 240px; max-width: 620px; }
.mcp ~ .md-fbar-info { margin-left: 0; }

.mcp-box {
  width: 100%; gap: .55rem; padding: .34rem .5rem .34rem .65rem;
  border-radius: 12px; cursor: text;
}
.mcp-box:focus-within { background: var(--card); }
.mcp-ico { display: inline-flex; flex-shrink: 0; color: var(--muted); }
.mcp-box:focus-within .mcp-ico { color: var(--primary); }
.mcp-field { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.mcp-box input[type="search"] {
  border: 0; background: transparent; box-shadow: none; -webkit-appearance: none;
  padding: 0; font-size: .84rem; font-weight: 600; color: var(--text); width: 100%;
}
.mcp-box input[type="search"]:focus { outline: 0; box-shadow: none; }
.mcp-box input::-webkit-search-cancel-button { display: none; }
.mcp-box input::placeholder { font-weight: 500; color: var(--muted); }
/* Alt satır kutunun ne yaptığını söyler; dar ekranda ve yazarken gizlenir */
.mcp-sub {
  font-size: .65rem; line-height: 1.3; color: var(--label);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mcp.is-filled .mcp-sub { display: none; }

.mcp-clear {
  display: grid; place-items: center; flex-shrink: 0;
  width: 20px; height: 20px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); font-size: 1.05rem; line-height: 1;
  cursor: pointer;
}
.mcp-clear:hover { background: color-mix(in srgb, #ef4444 14%, transparent); color: #dc2626; }
.mcp-spin {
  width: 13px; height: 13px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--primary);
  animation: mdlSpin .7s linear infinite;
}
/* Klavye ipucu yalnız kutu odaktayken görünür — boştayken yer kaplamasın */
.mcp-keys { display: none; gap: .15rem; flex-shrink: 0; }
.mcp-box:focus-within .mcp-keys { display: inline-flex; }
.mcp-keys kbd {
  font: inherit; font-size: .6rem; font-weight: 700; line-height: 1;
  padding: .18rem .3rem; border-radius: 5px; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border);
}

.mcp-pop {
  position: absolute; z-index: 40; top: calc(100% + .35rem); left: 0;
  width: 100%; min-width: 320px; max-height: 360px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 13px;
  background: var(--card); box-shadow: var(--sh-md);
  animation: fadeUp .16s cubic-bezier(.22,.61,.36,1) both;
}
.mcp-head {
  padding: .4rem .7rem; font-size: .68rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.mcp-none { padding: .9rem .8rem; font-size: .8rem; color: var(--muted); text-align: center; }
.mcp-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem; border-bottom: 1px solid var(--border);
  text-decoration: none !important; color: var(--text);
}
.mcp-item:last-child { border-bottom: 0; }
.mcp-item:hover, .mcp-item.is-active { background: color-mix(in srgb, var(--primary) 7%, var(--card)); }
.mcp-item.is-active { box-shadow: inset 3px 0 0 var(--primary); }
.mcp-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .08rem; }
/* Tek satır + kırpma: uzun ad ya da "telefon · şehir · temsilci" satırı
   sarınca öneri yüksekliği iki katına çıkıyor, liste taranamaz hâle geliyordu */
.mcp-main b, .mcp-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcp-main b { font-size: .84rem; font-weight: 700; }
.mcp-meta { font-size: .71rem; color: var(--label); }
.mcp-tail { display: flex; flex-direction: column; align-items: flex-end; gap: .12rem; flex-shrink: 0; }
.mcp-cnt {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .68rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px;
  background: var(--primary-light); color: var(--primary); white-space: nowrap;
}
/* Olumsuz sayısı rozetin İÇİNDE: ayrı satır, listeyi gereksiz uzatıyordu */
.mcp-neg { font-style: normal; font-size: .66rem; font-weight: 800; color: #dc2626; }
.mcp-last { font-size: .66rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Seçili müşteri rozeti (süzgeç etkinken kutunun yerini alır) */
.mcp-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .5rem .3rem .6rem; border-radius: 11px;
  background: var(--primary-light); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  font-size: .8rem; color: var(--text); max-width: 340px;
}
.mcp-chip svg { color: var(--primary); flex-shrink: 0; }
.mcp-chip b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcp-chip i { font-style: normal; font-size: .72rem; color: var(--label); font-variant-numeric: tabular-nums; }
.mcp-chip a {
  display: grid; place-items: center; width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 50%; font-size: 1rem; line-height: 1;
  color: var(--muted); text-decoration: none !important;
}
.mcp-chip a:hover { background: color-mix(in srgb, #ef4444 14%, transparent); color: #dc2626; }

/* Dar ekran: arama kendi satırını alsın, açıklama satırı ve klavye ipucu
   düşsün — 300 piksellik bir kutuda ikisi de okunmuyor. */
@media (max-width: 860px) {
  .mcp { flex-basis: 100%; max-width: none; }
  .mcp-pop { min-width: 0; }
}
@media (max-width: 560px) {
  .mcp-sub, .mcp-keys, .mcp-box:focus-within .mcp-keys { display: none; }
  .mcp-box input[type="search"] { font-size: .8rem; }
}

/* Dar ekran: tek sütuna in, açık kart zaten tam satır */
@media (max-width: 640px) {
  .mtg-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   LİSANSA DAHİL OLMAYAN MODÜLLER
   ============================================================
   Kilitli kalem GİZLENMEZ, soluk gösterilir: müşteri modülün
   varlığından haberdar olsun ve yükseltme fırsatı kaybolmasın.
   Tıklanınca license-lock.js uyarı verir. */

.side-nav a.lic-locked {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(1);
  position: relative;
}
.side-nav a.lic-locked:hover {
  opacity: .62;
  background: transparent;
}
.side-nav a.lic-locked .lic-lock {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  opacity: .8;
}

.side-quick .qbtn.qb-locked {
  opacity: .38;
  filter: grayscale(1);
  cursor: not-allowed;
  position: relative;
}
.side-quick .qbtn.qb-locked:hover {
  opacity: .55;
  transform: none;
}
.side-quick .qbtn.qb-locked .qb-lock {
  position: absolute;
  right: 2px;
  bottom: 2px;
  display: inline-flex;
  background: rgba(0, 0, 0, .55);
  border-radius: 999px;
  padding: 1px;
  color: #fff;
}

/* ============================================================
   TUTAR GİZLEME — banka uygulaması kalıbı
   ============================================================
   Bankacılık uygulamalarındaki bakiye gizleme davranışının aynısı:
   tutar ya OKUNUR ya da yerinde NOKTALARLA (••••) durur, hemen
   yanında da onu açıp kapatan küçük bir göz ikonu bulunur. Durum
   <html>.pv-on sınıfıdır (public/js/privacy.js yönetir; sayfa
   açılışında layout'taki satır içi betik basar ki rakam bir an
   görünüp sonra kaybolmasın).

   NEDEN NOKTA, NEDEN BULANIKLIK DEĞİL
   Bulanıklık "bozuk mu?" hissi verir, büyük puntoda rakamın hatları
   yine de seçilir ve ekran görüntüsünde okunabilir kalır. Nokta
   perdesi ise NİYETLİ görünür: "burada bir tutar var, gizli". İçerik
   `color: transparent` ile görünmez, üstünü kaplayan `::after`
   noktaları basar — metin DOM'da kalır (ekran okuyucu ve kopyalama
   için `user-select: none` + `aria-hidden` yerine görsel perde
   tercih edildi; bu bir gizlilik perdesi, şifreleme değil).

   NE GİZLENİR — üç kanal:
     1. ₺ TUTARLARI KENDİLİĞİNDEN. Her tutar `$try` yardımcısından
        `<span class="cur">₺</span>` ile doğar; kabı `:has(> .cur)`
        ile yakalanır. Bütün paneller (Dashboard, Bugünüm, Poliçelerim,
        Cari, Teklifler, Raporlar…) aynı yardımcıyı kullandığı için
        yeni eklenen her tutar da işaretsiz maskelenir.
     2. `[data-priv]` — ₺ taşımayan ama gizlenmesi istenen rakamlar
        (adet heroları gibi).
     3. `[data-priv-tip]` — yalnız fare olaylarını keser: prim
        tooltip'i gösteren grafikler şeklini korur, üzerine gelince
        tutar fısıldamaz.

   KAPSAM GENELDİR: `.pv-scope` gibi bir kök şartı YOK. Kullanıcı
   "gizle" dediğinde uygulamanın tamamında tutarlar kapanır —
   bankada bakiyeyi gizleyip başka bir sekmede açık bulmak gibi bir
   tutarsızlık olmasın. */

/* ------------------------------------------------------------------
   İŞARETLEME NEDEN CSS'TE DEĞİL, JS'TE
   ------------------------------------------------------------------
   İlk kurgu tutarları doğrudan `:has(> .cur)` ile yakalıyordu; kurallar
   doğru eşleşiyordu ama <html>'e `pv-on` eklendiğinde tarayıcı `:has()`
   içeren kuralları YENİDEN DEĞERLENDİRMİYOR — sayfa açılışında maske
   çalışıyor, düğmeye basınca hiçbir şey olmuyordu (`::after` uygulanıp
   `color` uygulanmaması gibi tutarsız bir sonuçla).

   Bu yüzden bulma işi JS'e alındı: "₺ + rakam" geçen kaplar bir kez
   taranıp `.pv-amt` sınıfıyla işaretlenir (public/js/privacy.js), CSS
   ise düz bir sınıf seçicisi kullanır. Hem tarayıcı uyumu sorunu kalmaz
   hem de her tuşta yeniden `:has()` çözmeye göre çok daha ucuzdur. */
.pv-amt { transition: color .16s ease; }
html.pv-on .pv-amt {
  position: relative;
  color: transparent !important;
  user-select: none;
}
/* İçerideki parçalar (₺ işareti, "mn/bin" kısaltması, ayraçlar) da
   sönsün — kendi renkleri varsa miras almazlar. Göz ve içindeki SVG
   bunun dışında: perdeyi kaldıracak düğme kaybolmasın. */
html.pv-on .pv-amt *:not(.pv-eye):not(.pv-eye *) { color: transparent !important; }

/* Nokta perdesi. `currentColor` yerine sabit gri: metin şeffaf olduğu
   için currentColor da şeffaf olurdu. */
html.pv-on .pv-amt::after {
  content: '••••';
  position: absolute; inset: 0;
  display: flex; align-items: center;
  justify-content: inherit;
  letter-spacing: .06em;
  color: var(--muted);
  /* Nokta boyu tutarın puntosuyla ölçeklenir ama üst sınırı var:
     30px'lik hero'da nokta iriliği gülünçleşmesin. */
  font-size: min(1em, 1.35rem);
  line-height: 1;
  pointer-events: none;
}
/* Sağa yaslı yerlerde (tablo `td.num`, KPI alt satırları) noktalar da
   sağa yaslansın — sütun hizası bozulmasın. */
html.pv-on td.num .pv-amt::after,
html.pv-on .num .pv-amt::after,
html.pv-on .mrow .pv-amt::after { justify-content: flex-end; }

html.pv-on [data-priv-tip] { pointer-events: none; }

/* ------------------------------------------------------------------
   GÖZ İKONU — tutarın yanındaki küçük anahtar
   ------------------------------------------------------------------
   public/js/privacy.js basar: maskenin yakaladığı alanların aynısını
   tarar, punto eşiğini geçen ÖNE ÇIKAN tutarlara (KPI, hero, özet
   şeridi) göz koyar — tablo satırlarına koymaz, ekran düğmeye
   boğulmasın. Gerekçe betiğin başlığında.

   Göz, tutarın SON ÇOCUĞU olarak eklenir; böylece rakamın hemen
   yanında akar ve hiçbir yerleşimi (grid kolonu, ellipsis, hizalama)
   bozmaz. Karşılığında maskeden ayrı tutulması gerekir — aşağıdaki
   üç kural bunun içindir. */
.pv-eye {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle;
  width: 1.45rem; height: 1.45rem; margin-left: .3rem; padding: 0;
  flex: none;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--muted);
  opacity: .45; cursor: pointer;
  /* Nokta perdesi `inset: 0` ile kabı kapladığı için gözün üstünde
     kalırdı; yığın sırasıyla öne alınır. */
  position: relative; z-index: 2;
  transition: opacity .15s, background .15s, color .15s;
}
/* Göz her zaman aynı fiziksel boyda: 30px'lik hero'nun yanında `em` ile
   büyüseydi ikon değil ikinci bir başlık gibi dururdu. */
.pv-eye svg { width: 15px; height: 15px; flex: none; }
.pv-eye:hover, .pv-eye:focus-visible {
  opacity: 1; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 13%, transparent);
}
.pv-eye:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* Gizliyken göz TAM görünür ve kehribar yanar: perdenin nasıl
   kaldırılacağı aranmasın. */
html.pv-on .pv-eye { opacity: 1; color: var(--warn); }
html.pv-on .pv-eye:hover, html.pv-on .pv-eye:focus-visible {
  background: color-mix(in srgb, var(--warn) 15%, transparent);
}
/* İki yüz: açıkken "gizle" (üstü çizili göz), gizliyken "göster" (göz) */
.pv-eye .pv-show, .pv-eye .pv-hide { display: inline-flex; }
.pv-eye .pv-hide { display: none; }
html.pv-on .pv-eye .pv-show { display: none; }
html.pv-on .pv-eye .pv-hide { display: inline-flex; }
/* Gözün kendisi ASLA maskelenmez. `inherit` olmaz — kabın rengi
   `transparent` olduğu için göz de kaybolurdu; renk açıkça yazılır. */
html.pv-on .pv-eye { color: var(--warn) !important; }
html.pv-on .pv-eye * { color: currentColor !important; }
.pv-eye::after, .pv-eye::before { content: none !important; }
/* Kap `user-select: none` alsa da göz tıklanabilir kalmalı */
html.pv-on .pv-eye { user-select: auto; }

@media (prefers-reduced-motion: reduce) {
  .pv-amt, .pv-eye { transition: none; }
}

/* ============================================================
   CANLI RAKAMLAR (live-stats.js) — Dashboard & BUGÜNÜM
   Ekran açıkken başka kullanıcının eklediği poliçe/müşteri,
   sayaçları yukarı saydırır: yeşil sayım + altın parıltı + "+N".
   ============================================================ */

/* "Canlı" göstergesi: yeşil nabız; güncelleme gelince altın ışıma */
.live-ind { display: inline-flex; align-items: center; gap: .38em; }
.live-ind i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success, #10b981); flex: none;
  animation: liveDot 2.6s ease-out infinite;
}
@keyframes liveDot {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, .45); }
  60%  { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.live-ind.is-hit { background: #fef3c7; color: #b45309; }
.live-ind.is-hit i { background: #f59e0b; }

/* Sayım sürerken rakam yeşile kayar, bitince eski rengine döner */
[data-live] { transition: color .35s ease; }
[data-live].live-counting { color: var(--success, #059669); }
/* Beyaz zeminli kutucuklarda (wtile) yeşil kaybolur: parlak sarı kullan */
.wtile [data-live].live-counting { color: #fde68a; }

/* Artışta kabın altın parıltısı — kutuyu hafifçe kaldırıp ışıtır */
[data-live-bump] { position: relative; }
.live-bump { animation: liveBump 2.2s ease; }
@keyframes liveBump {
  0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
  18%  { box-shadow: 0 0 0 3px rgba(245, 158, 11, .30), 0 8px 22px rgba(245, 158, 11, .22); transform: translateY(-2px); }
  55%  { box-shadow: 0 0 0 2px rgba(245, 158, 11, .16), 0 4px 12px rgba(245, 158, 11, .12); transform: translateY(0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* Yükselip sönen "+N" rozeti */
.live-chip {
  position: absolute; top: -8px; right: 10px; z-index: 6;
  padding: 2px 9px; border-radius: 999px;
  font-size: .7rem; font-weight: 800; letter-spacing: .01em;
  color: #78350f; background: linear-gradient(135deg, #fde68a, #f59e0b);
  box-shadow: 0 3px 10px rgba(245, 158, 11, .35);
  pointer-events: none; white-space: nowrap;
  animation: liveChip 2.4s ease forwards;
}
@keyframes liveChip {
  0%   { opacity: 0; transform: translateY(8px) scale(.7); }
  14%  { opacity: 1; transform: translateY(0) scale(1.08); }
  28%  { transform: translateY(0) scale(1); }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-16px) scale(.96); }
}

@media (prefers-reduced-motion: reduce) {
  .live-ind i, .live-bump { animation: none; }
  .live-chip { animation: liveChipFade 2s ease forwards; }
  @keyframes liveChipFade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
  /* Bildirim şeridi: dönüş betikte de kapanıyor (is-static); burada
     nabız, ışıma ve rozet yanıp sönmesi susturulur. "YENİ" rozeti
     KALIR — hareketten değil renkten okunuyor. */
  .lfd-dot, .lfd-new, .lfd.is-hit, .lfd-i.is-fresh, .lfd-bar i { animation: none; }
}

/* --- Canlı rakamlar, 2. faz: azalışlar da izlenir (iptal / iade) --- */

/* Rozetin çıpası her zaman kap: bump/dip sınıfı alan eleman konumlanır
   (data-live-bump olmayan mrow/goal satırları için güvence) */
.live-bump, .live-dip { position: relative; }

/* Azalışta kızıl ışıma — kutlama değil uyarı dili */
.live-dip { animation: liveDip 2.2s ease; }
@keyframes liveDip {
  0%   { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); }
  18%  { box-shadow: 0 0 0 3px rgba(225, 29, 72, .25), 0 8px 22px rgba(225, 29, 72, .18); }
  55%  { box-shadow: 0 0 0 2px rgba(225, 29, 72, .12), 0 4px 12px rgba(225, 29, 72, .10); }
  100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); }
}
.live-dip [data-live].live-counting { color: var(--danger, #e11d48); }

/* Azalış rozeti: kızıl */
.live-chip.is-neg {
  color: #fff; background: linear-gradient(135deg, #fb7185, #e11d48);
  box-shadow: 0 3px 10px rgba(225, 29, 72, .35);
}

/* Hedef çubukları canlı dolarken yumuşak aksın */
.progress > span { transition: width .9s cubic-bezier(.22, .9, .35, 1); }

@media (prefers-reduced-motion: reduce) {
  .live-dip { animation: none; }
  .progress > span { transition: none; }
}