:root {
    /* ============================================================
       S10 (2026-09-23) — MVD GÖRSEL DİLİ, BİREBİR (docs/TASARIM.md)
       Kaynak: MVD Enerji · Reaktif İzleme demosu. Ürün sahibi kararı: pano bu dili
       BİREBİR alır. Önce demonun adlarıyla temel değerler, sonra panonun eski
       değişken ADLARI bu değerlere bağlanır (937 kullanım tek yerden taşındı).
       Kural (2026-08-31'den): TEK hâkim renk yeşildir; kırmızı/amber/mavi YALNIZ
       anlam taşır. Her anlam renginin bir ZEMİN eşi vardır. Yeni renk UYDURMA —
       önce docs/TASARIM.md §2 tablosuna bak.
       ============================================================ */
    --mvd:        #6BC894;   /* logo yeşili — koyu zeminde vurgu */
    --mvd-koyu:   #2E9464;   /* ana düğme, etkin sekme, odak */
    --mvd-derin:  #1B6E48;   /* düğme gradyanının koyu ucu */
    --koyu:       #0E1F18;   /* koyu şerit / karanlık tema zemini */
    --koyu-2:     #16332A;   /* karanlık tema yüzeyi */
    --koyu-3:     #1F4739;
    --koyu-cizgi: rgba(255, 255, 255, 0.10);
    --kagit:      #EEF3F0;   /* sayfa zemini (yeşile çalan nötr) */
    --yuzey:      #FFFFFF;   /* kart / panel */
    --murekkep:   #11201C;   /* ana metin */
    --soluk:      #6C7D77;   /* ikincil metin */
    --cizgi:      #E2E9E5;   /* kenarlık */
    --cizgi-koyu: #C9D5CF;   /* girdi kenarı */
    --aktif: #3FAE73;  --aktif-zemin: #E8F5EE;   /* olumlu */
    --alarm: #D14840;  --alarm-zemin: #FCEDEB;   /* risk / gecikmiş */
    --uyari: #D69A21;  --uyari-zemin: #FCF4E2;   /* dikkat */
    --kap:   #2E86C8;  --kap-zemin:   #E9F2FA;   /* bilgi / yakında / kontrol */
    --ind:   #E07B39;  --ind-zemin:   #FDF1E7;   /* ikinci kademe uyarı */
    /* Koyu zemin üstünde okunur tonlar (demo: koyu panel metinleri; anlam renklerinin açık eşleri — karanlık tema) */
    --koyu-soluk: #A6BDB2;  --koyu-metin: #B9CEC4;
    --alarm-acik: #F0928B;  --uyari-acik: #EFC66B;  --kap-acik: #8CC2EA;
    --koyu-yazi:  #E4EFE9;   /* koyu zeminde ana metin (karanlık tema --text-main, kenar menü) */
    --golge:        0 1px 2px rgba(17, 32, 28, 0.05), 0 6px 18px rgba(17, 32, 28, 0.05);
    --golge-yuksek: 0 2px 6px rgba(17, 32, 28, 0.07), 0 14px 34px rgba(17, 32, 28, 0.09);
    --yuvarlak: 12px;

    /* Yazı: IBM Plex Sans (metin) + IBM Plex Mono (SAYI). Google Fonts'tan tek istek (Inter'in yerine);
       internet yoksa sistem yazı tiplerine düşer — pano yine okunur. */
    --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* ⚠️ Rakam fontu YALNIZ sayısal değerlerde (.mono sınıfı); şehir/dönem adı gibi METİNDE kullanma. */
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
                 "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* ---- MARKA PALETİ (2026-08-31 adları korunur, değerler MVD dilinden) ---- */
    --brand-900: var(--koyu);      /* en koyu — koyu şeritler */
    --brand-800: var(--koyu-2);    /* ana düğme, başlık vurgusu */
    --brand-700: var(--mvd-derin);
    --brand-600: var(--mvd-koyu);  /* bağlantı/aktif metin */
    --brand-500: var(--aktif);
    --brand-400: var(--mvd);       /* LOGO YEŞİLİ — vurgu, pozitif */
    --brand-300: #9ED9B6;
    --brand-200: #C7EBD6;
    --brand-100: var(--aktif-zemin); /* yumuşak zemin */
    --brand-50:  #F3FAF6;

    /* Anlam renkleri — başka amaçla kullanma */
    --danger: var(--alarm);
    --warning: var(--uyari);

    --bg-color: var(--kagit);
    --text-main: var(--murekkep);
    --text-muted: var(--soluk);
    --column-bg: #E4EBE7;
    --card-bg: var(--yuzey);
    /* ⚠️ İSİM YANILTICI: `col1` adında ama sütun rengi DEĞİL — uygulamanın MARKA
       vurgu rengidir (ana düğme, aktif sekme, arama odağı, seçim rengi).
       Sütun renkleri panoda ayrı atanır. Adı geriye uyumluluk için korundu. */
    --col1-color: var(--brand-600);
    /* Sütun renkleri — TASARIM.md §2: şimdilik aynı kalır (değişim ürün sahibi kararı) */
    --col2-color: #3b82f6;   /* Mavi - Veri Beklenenler */
    --col3-color: #f59e0b;   /* Turuncu - Teklif Değerlendirmede */
    --col4-color: #10b981;   /* Yeşil - Kazanıldı */
    --col5-color: #ef4444;   /* Kırmızı - Kazanılmadı */
    --col6-color: #94a3b8;   /* Gri - Çözüm Bekliyor */

    --card-shadow: var(--golge);
    --hover-shadow: var(--golge-yuksek);

    /* ---- NÖTR GRİ SKALASI — S10: maviye çalan Tailwind "slate"ten YEŞİLE ÇALAN nötrlere
       (demo: kagit / cizgi / cizgi-koyu / soluk / murekkep). Adlar aynı, 638 kullanım kendiliğinden taşındı. ---- */
    --gray-50:  #F5F8F7;   /* en açık zemin */
    --gray-100: var(--kagit);
    --gray-200: var(--cizgi);      /* EN ÇOK kullanılan: kenarlık / ayraç */
    --gray-300: var(--cizgi-koyu);
    --gray-400: #9DB0A8;   /* soluk metin, pasif ikon */
    --gray-500: var(--soluk);
    --gray-600: #4F605A;
    --gray-700: #34463F;   /* koyu metin */
    --gray-800: #1C2F28;
    --gray-900: var(--murekkep);   /* en koyu başlık */

    /* ---- Anlam TONLARI (adlar 2026-09-02'den, değerler MVD dilinden) ---- */
    --danger-50:   var(--alarm-zemin);  /* en açık kırmızı zemin */
    --danger-100:  #F8DCD9;   /* kırmızı kutu zemini */
    --danger-500:  var(--alarm);        /* acil kart sol çubuğu */
    --danger-700:  #A8362F;   /* koyu kırmızı metin */
    --danger-800:  #8A2B25;   /* acil kart başlık metni (AÇIK temada) */
    --warning-50:  var(--uyari-zemin);  /* amber kutu zemini */
    --warning-100: #F8EACB;
    --warning-200: #EFD697;   /* amber kenarlık */
    --warning-500: var(--uyari);        /* bayatlama kademe 1 çubuğu */
    --warning-800: #7A5510;   /* koyu amber metin */
    --warning-900: #93660F;
    --success:     var(--aktif);
    --success-50:  var(--aktif-zemin);  /* kutu zemini */
    --success-100: #D3EDDF;   /* ikon zemini */
    --success-200: #B4DEC8;   /* kenarlık */
    --success-800: var(--mvd-derin);    /* koyu yeşil metin */
    --info:        var(--kap);          /* bilgi mavisi (link/ipucu) */
    --info-50:     var(--kap-zemin);
    --tier2-bar:   var(--ind);          /* bayatlama kademe 2 çubuğu */
    --tier2-bg:    var(--ind-zemin);    /* bayatlama kademe 2 zemini */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* S10: düğme/girdi/seçici yazı tipini DEVRALIR — eskiden bu kural yoktu, sekmeler ve ~100 düğme Arial'e düşüyordu */
button, input, select, textarea { font-family: inherit; }

body {
    font-family: var(--font-sans);
    background-color: var(--bg-color);
    color: var(--text-main);
    display: flex;
    justify-content: center;
    padding: 1.5rem;
    min-height: 100vh;
}

/* Seçim Rengi */
::selection {
    background-color: var(--col1-color);
    color: white;
}

/* Konteyner */
.app-container {
    width: 100%;
    max-width: 1600px;
    display: flex;
    flex-direction: column;
}

/* Üst Başlık Kısmı */
header {
    margin-bottom: 20px;
}

/* S12: başlık = demo .baslik-bant — ince, açık bant; 19 px tek satır başlık (eskiden 28.8 px, iki satır kart) */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    background: var(--yuzey);
    padding: 12px 18px;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge);
}

.header-text h1 {
    font-size: 19px;
    font-weight: 600;
    margin: 0;
    color: var(--murekkep);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.header-text p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Buton Tasarımı */
/* S12: ana düğme = demo .giris-btn — MVD yeşili gradyan, 9 px köşe, yumuşak yeşil gölge */
.btn-primary {
    background: linear-gradient(135deg, var(--mvd-koyu), var(--mvd-derin));
    color: var(--yuzey);
    border: none;
    padding: 10px 16px;
    border-radius: 9px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    box-shadow: 0 4px 14px rgba(27, 110, 72, 0.26);
    transition: filter 0.15s, transform 0.05s;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.btn-primary:hover {
    filter: brightness(1.08);
}

.btn-primary:active {
    transform: translateY(1px);
}

/* Gelişmiş Arama Çubuğu */
.search-container {
    margin-top: 1.5rem;
    position: relative;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Sekme (Tabs) Yapısı */
.app-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--gray-200);
    flex-wrap: wrap; /* Mobilde sekmelerin taşmasını engellemek için */
}

.tab-btn {
    background: none;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    position: relative;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    color: var(--gray-700);
    background-color: var(--gray-50);
}

.tab-btn.active {
    color: var(--col1-color);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    /* border-bottom ile hizalamak için */
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--col1-color);
    border-radius: 3px 3px 0 0;
}

.search-box {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid var(--gray-300);
    border-radius: 24px;
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: all 0.2s;
}

.search-box:focus-within {
    border-color: var(--col1-color);
    box-shadow: 0 0 0 3px rgba(34, 160, 107, 0.1);
}

.search-icon {
    color: var(--gray-400);
    margin-right: 0.75rem;
}

#customer-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    color: var(--gray-700);
    background: transparent;
    padding: 0.25rem 0;
    font-family: inherit;
}

#customer-search-input::placeholder {
    color: var(--gray-400);
}

/* Canlı Arama Sonuç Listesi (Dropdown) */
.search-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    list-style: none;
    display: none;
    /* JS ile açılacak */
}

.search-dropdown.active {
    display: block;
}

.search-item {
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-800);
    font-size: 0.95rem;
    transition: background-color 0.15s;
    display: flex;
    align-items: center;
}

.search-item:last-child {
    border-bottom: none;
}

.search-item:hover {
    background-color: var(--gray-50);
    color: var(--col1-color);
    font-weight: 500;
}

.search-item-icon {
    margin-right: 0.75rem;
    color: var(--gray-400);
}

/* Mini Özet Paneli (Dashboard) */
/* ⚠️ 2026-08-31: eskiden `display:flex` idi — 7 kart tek sıraya sığmayınca
   sayfayı 60px yatay taşırıyordu (sağdaki kart ekran dışında kalıyordu).
   Saran ızgara: ekran daraldıkça kartlar alt satıra iner, sayfa YATAY KAYMAZ. */
.dashboard-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    width: 100%;
}

/* S11 (2026-09-23) — gösterge kartı = demo "KPI kartı" kalıbı (docs/TASARIM.md §5):
   solda 12.5 px soluk başlık + altında mono değer; SAĞDA 38 px anlam renkli ikon kutusu.
   Yalnız CSS — HTML sırası (ikon önce) değişmedi, ızgara ile sağa alındı. Tıklama akışına (tuzak #10) DOKUNULMADI.
   Anlam eşlemesi (renk süs değil): Takibi Geçmiş = alarm · Hareketsiz / İşlem Bekleyen / Görüşülmeyen = uyari ·
   Planlanan / Bekleyen KT / BNI = kap · Bu Dönem Kazanılan = aktif · Toplam Kart = nötr. */
.dash-card {
    background-color: var(--yuzey);
    border-radius: var(--yuvarlak);
    padding: 13px 14px 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 10px;
    box-shadow: var(--golge);
    border: 1px solid var(--cizgi);
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.dash-card > .dash-icon { grid-column: 2; grid-row: 1; }
.dash-card > .dash-info { grid-column: 1; grid-row: 1; min-width: 0; }

.dash-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--golge-yuksek);
}

/* Dashboard Etkileşim */
.interactive-dash-card { cursor: pointer; }
.interactive-dash-card:hover { border-color: var(--cizgi-koyu); }

/* Takibi Geçmiş & Bu Dönem Kazanılan — vurgu yalnız ikon kutusu + değer renginde (sol çubuk/gradyan kalktı) */
.dash-card-overdue .dash-value { color: var(--alarm); }
.dash-card-won .dash-value { color: var(--aktif); }

/* Filter button: Bu Hafta Takip için pasif renk vurgusu (sadece active değilken çerçeve hafif) */
.filter-btn[data-filter="thisweek-reminder"] {
    border-color: #fcd34d;
    color: var(--warning-800);
}
.filter-btn[data-filter="thisweek-reminder"].active {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #ffffff;
}

/* Modal Liste Stili */
.preview-list-item {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-bottom: 1px solid var(--gray-200);
}

.preview-list-item:last-child {
    border-bottom: none;
}

.preview-item-title {
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 4px;
}

.preview-item-details {
    font-size: 0.85rem;
    color: var(--gray-500);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.preview-item-col {
    background: var(--gray-100);
    padding: 2px 6px;
    border-radius: 4px;
}

.preview-item-date {
    background: #e0f2fe;
    color: #0369a1;
    padding: 2px 6px;
    border-radius: 4px;
}

/* 38 px ikon kutusu — anlam zemini (emoji kalır, TASARIM.md §6) */
.dash-icon {
    font-size: 18px;
    background-color: var(--kagit);
    color: var(--soluk);
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
}
.dash-card[data-type="overdue-reminder"] .dash-icon { background-color: var(--alarm-zemin); color: var(--alarm); }
.dash-card[data-type="inactive"] .dash-icon,
.dash-card[data-type="pending"] .dash-icon,
.dash-card[data-type="gorusme-eski"] .dash-icon  { background-color: var(--uyari-zemin); color: var(--uyari); }
.dash-card[data-type="planned"] .dash-icon,
.dash-card[data-type="kt"] .dash-icon,
.dash-card[data-type="bni"] .dash-icon           { background-color: var(--kap-zemin); color: var(--kap); }
.dash-card-won .dash-icon                        { background-color: var(--aktif-zemin); color: var(--aktif); }
/* BNI "B" harfi — eskiden satır içi kırmızı (#dc2626) idi, "risk" gibi okunuyordu (S11) */
.dash-icon-harf { font-size: 16px; font-weight: 700; }

.dash-info {
    display: flex;
    flex-direction: column;
}

/* Başlık: 12.5 px / 500 / soluk — büyük harf DEĞİL (TASARIM.md §3) */
.dash-title {
    font-size: 12.5px;
    color: var(--soluk);
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: 7px;
}

/* Değer: mono 23 px / 600 (KPI 21–25 aralığı) — font ailesi aşağıdaki "RAKAM FONTU YAYILIMI" bloğunda */
.dash-value {
    font-size: 23px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--murekkep);
    transition: color 0.3s;
}

/* S09: gösterge kartının altındaki kırılım satırı (ör. "kaydı yok 12 · 10+ gün 0") — S11: demo .not ölçüsü */
.dash-alt {
    font-size: 11.5px;
    color: var(--soluk);
    font-weight: 400;
    margin-top: 5px;
}
.dash-alt:empty { display: none; }

/* Dashboard Rakam Animasyonu */
@keyframes flashText {
    0% {
        color: var(--kap);
        transform: scale(1.1);
    }

    100% {
        color: var(--murekkep);
        transform: scale(1);
    }
}

.flash-update {
    animation: flashText 0.5s ease-out;
}

/* S11: telefonda iki sütun (demo ≤980 px: minmax(150px)) — 170 px'lik alt sınır 375 px'te tek sütuna düşürüyordu */
@media (max-width: 600px) {
    .dashboard-panel { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; }
    .dash-card { padding: 11px 12px 10px; }
    .dash-value { font-size: 21px; }
    .dash-icon { width: 34px; height: 34px; font-size: 16px; }
}

/* CRM Filtreleme Çubuğu */
.filter-bar {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.filter-btn {
    background-color: #ffffff;
    border: 1px solid var(--gray-300);
    color: var(--gray-600);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.filter-btn:hover {
    background-color: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-800);
}

.filter-btn.active {
    background-color: var(--col1-color);
    border-color: var(--col1-color);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(34, 160, 107, 0.3);
}

/* Kanban Board Yapısı */
.kanban-board {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 1.5rem;
    /* Mobilde daha rahat kaydırma için (momentum) */
    -webkit-overflow-scrolling: touch;
    height: calc(100vh - 150px);
}

/* Scrollbar Şekillendirmesi - Yatay ve Dikey */
.kanban-board::-webkit-scrollbar,
.column-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.kanban-board::-webkit-scrollbar-track,
.column-content::-webkit-scrollbar-track {
    background: transparent;
}

.kanban-board::-webkit-scrollbar-thumb,
.column-content::-webkit-scrollbar-thumb {
    background-color: var(--gray-300);
    border-radius: 10px;
}

.kanban-board::-webkit-scrollbar-thumb:hover,
.column-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--gray-400);
}

/* Sütunlar */
.column {
    /* ⚠️ GENİŞLİK KARARI (2026-08-31, kullanıcı tercihi):
       Kartlarda uzun notlar tutuluyor, bu yüzden sütun BİLEREK geniş.
       Eskiden 320px yazıyordu ama `min-width` olmadığı için içerik sütunu
       şişiriyordu ve her sütun farklı genişlikte çıkıyordu (ölçümde 550px).
       Artık genişlik SABİT ve tek yerden ayarlanır — dar/geniş isteği
       gelirse yalnızca aşağıdaki 420px değişir. */
    flex: 0 0 420px;
    min-width: 0;
    background-color: var(--column-bg);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

/* Sütun Başlığı */
.column-header {
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 5px solid transparent;
    /* Dinamik eklenecek */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background-color: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid var(--gray-300);
}

.column-header h2 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge {
    background-color: var(--gray-300);
    color: var(--gray-800);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* Sütun İçi */
.column-content {
    padding: 1rem;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 150px;
    transition: background-color 0.2s ease;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Müşteri Kartları */
.card {
    position: relative;
    background-color: var(--card-bg);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: var(--card-shadow);
    margin-bottom: 1rem;
    border: 1px solid var(--gray-300);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
    box-shadow: var(--hover-shadow);
    border-color: var(--gray-400);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.card-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--gray-900);
    padding-right: 0.5rem;
    /* Sil butonu ve Handle için boşluk */
    word-break: break-word;
}

/* Kart İçi Eylem İkonları (CRM) */
.card-action-icons {
    display: flex;
    /* ⚠️ 2026-08-31: sarma YOKTU — 6 ikon + B/T düğmeleri + tarih kutusu tek satıra
       sığmayınca TARİH kartın dışına taşıp kırpılıyordu (kullanıcı bildirdi).
       Sarma sayesinde tarih dar kartta alt satıra iner, hiçbir şey kesilmez. */
    flex-wrap: wrap;
    gap: 0.5rem;
    row-gap: 0.35rem;
    margin-bottom: 0.75rem;
    margin-top: 0.25rem;
}

.crm-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--gray-400);
    opacity: 0.4;
    transition: all 0.2s ease;
    padding: 2px;
    border-radius: 4px;
    filter: grayscale(100%);
}

.crm-icon-btn:hover {
    opacity: 0.7;
    background-color: var(--gray-100);
}

.crm-icon-btn.active {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.1);
}

/* BNI İkonu Özelleştirmesi */
.bni-icon-btn {
    font-weight: 800;
    font-family: inherit;
    color: var(--gray-400);
    background-color: transparent;
    padding: 2px 6px;
    font-size: 1rem;
    border: 1px dashed var(--gray-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bni-icon-btn.active {
    color: #ffffff;
    background-color: var(--danger);
    border: 1px solid var(--danger);
    opacity: 1;
    filter: none;
    transform: scale(1.1);
}

/* Aşamada Bekleme Süresi Rozeti */
.column-time-badge {
    margin-left: auto; /* İkonların en sağına yaslamak için */
    background-color: var(--gray-100);
    color: var(--gray-500);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    border: 1px solid var(--gray-200);
}

/* Aşamada 7+ gün — sarı uyarı */
.column-time-badge.column-slow {
    background-color: var(--warning-100);
    color: var(--warning-800);
    border-color: #fbbf24;
}

/* Aşamada 14+ gün — kırmızı kritik (Tıkanmış) */
.column-time-badge.column-stalled {
    background-color: var(--danger-100);
    color: #991b1b;
    border-color: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}

/* === YÖNETİCİ ÖZETİ KUTULARI (Reports sayfası üstü) ===
   Tasarım Paketi 2 / Aşama 2 (2026-09-02) — PİLOT EKRAN.
   Desen: [etiket solda · tonlu ikon karesi sağda] / DEV DEĞER / açıklama.
   ⚠️ Rakam fontu YALNIZ sayısal değerlere gelir (.mono sınıfı, script.js
   içindeki sayisalDeger() atar). "HAZİRAN 2026" / şehir adı gibi METİN
   değerler normal fontta kalır — monospace metni çirkinleştirir.
   ⚠️ Bu blok pilot alandır; beğenilirse aynı desen diğer ekranlara taşınır.
   ================================================================= */
#executive-summary-container {
    margin-bottom: 16px;
}

.exec-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.exec-summary-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.exec-card {
    background: var(--card-bg);
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    padding: 16px 18px 15px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    box-shadow: 0 1px 2px rgba(16, 33, 28, 0.04),
                0 1px 3px rgba(16, 33, 28, 0.06);
    position: relative;
}

/* Vurgu MARKA yeşilidir. Eskiden mavi (#3b82f6) idi — marka dışıydı. */
.exec-card:hover {
    border-color: var(--brand-400);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(14, 44, 34, 0.10);
}

/* Başlık satırı: etiket solda, ikon sağda */
.exec-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.exec-card-label {
    font-size: 0.76rem;
    color: var(--gray-500);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.35;
    margin: 0;
}

/* Tonlu ikon karesi — emoji çıplak durmasın, kart bir "gösterge" gibi okunsun */
.exec-card-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
    border-radius: 10px;
    background: var(--brand-100);
    margin: 0;
}

.exec-card-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.15;
    word-break: break-word;
}

/* SAYISAL değer: sabit genişlikli rakam. Kartlar alt alta gelince
   basamaklar hizalanır; sayı "veri" gibi okunur, metin gibi değil. */
.exec-card-value.mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.7rem;
    letter-spacing: -0.02em;
}

.exec-card-detail {
    font-size: 0.75rem;
    color: var(--gray-400);
    margin-top: 5px;
    line-height: 1.4;
}

/* --- Durum çeşitleri: kenarlık + ikon tonu + değer rengi birlikte değişir --- */
.exec-card-warn {
    border-color: var(--warning-200);
    background: var(--warning-50);
}
.exec-card-warn .exec-card-icon { background: var(--warning-100); }
.exec-card-warn .exec-card-value { color: var(--warning-900); }

.exec-card-good {
    border-color: var(--success-200);
    background: var(--success-50);
}
.exec-card-good .exec-card-icon { background: var(--success-100); }
.exec-card-good .exec-card-value { color: var(--success-800); }

.exec-card-bad {
    border-color: var(--danger-100);
    background: var(--danger-50);
}
.exec-card-bad .exec-card-icon { background: var(--danger-100); }
.exec-card-bad .exec-card-value { color: var(--danger-700); }

/* --- Yönetici Özeti kartları: KOYU TEMA (2026-09-02) ---
   ⚠️ GEREKÇE — yaşanmış hata: Aşama 2'de kart zemini sabit `white` yerine
   var(--card-bg)'ye bağlandı. Koyu temada --card-bg koyulaşıyor ama değer
   rengi var(--gray-900) (çok koyu) kalıyordu → KOYU ÜSTÜNE KOYU, okunmuyordu.
   Kart zemini temaya bağlanıyorsa, üstündeki METİN de bağlanmalıdır.
   Aynı hatayı yeni bir bileşende tekrarlama: koyu tema karşılığını YAZ. */
[data-theme="dark"] .exec-summary-title { color: var(--gray-200); }

[data-theme="dark"] .exec-card {
    background: var(--gray-800);
    border-color: var(--gray-700);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .exec-card:hover {
    border-color: var(--brand-500);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .exec-card-label  { color: var(--gray-400); }
[data-theme="dark"] .exec-card-value  { color: var(--gray-100); }
[data-theme="dark"] .exec-card-detail { color: var(--gray-500); }
/* İkon karesi: koyu zeminde açık yeşil kare göz alıyordu — şeffaf ton */
[data-theme="dark"] .exec-card-icon { background: rgba(92, 201, 141, 0.15); }

/* Durum kartları: koyu temada AÇIK zemin kullanma, rengin şeffaf tonunu kullan */
[data-theme="dark"] .exec-card-warn {
    background: rgba(217, 119, 6, 0.12);
    border-color: rgba(217, 119, 6, 0.35);
}
[data-theme="dark"] .exec-card-warn .exec-card-icon  { background: rgba(217, 119, 6, 0.22); }
[data-theme="dark"] .exec-card-warn .exec-card-value { color: #fbbf24; }

[data-theme="dark"] .exec-card-good {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
}
[data-theme="dark"] .exec-card-good .exec-card-icon  { background: rgba(16, 185, 129, 0.22); }
[data-theme="dark"] .exec-card-good .exec-card-value { color: #6ee7b7; }

[data-theme="dark"] .exec-card-bad {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.35);
}
[data-theme="dark"] .exec-card-bad .exec-card-icon  { background: rgba(220, 38, 38, 0.22); }
[data-theme="dark"] .exec-card-bad .exec-card-value { color: #fca5a5; }

/* Google Keep İkonu Butonu */
.keep-link-btn {
    background-color: #fef08a;
    /* Google Keep sarısı tonu */
    border: 1px solid #fde047;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--gray-700);
    transition: all 0.2s ease;
    padding: 2px 6px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.keep-link-btn:hover {
    background-color: #fde047;
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Hatırlatma Tarihi (Date Picker) */
.reminder-date-input {
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    padding: 0.1rem 0.25rem;
    font-size: 0.75rem;
    font-family: inherit;
    /* iOS'ta yerleşik fontu devral */
    color: var(--gray-600);
    background-color: transparent;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    margin-left: auto;
    /* İkonların en sağına itmek için */
    flex-shrink: 0;
    /* iOS Flexbox çökmesine (collapse) karşı önlem */
    min-width: 105px;
    /* iOS'ta sıfır genişliğe düşmesini engeller */
    max-width: 125px;
    /* Aşırı büyümesini engeller */
    height: 24px;
    box-sizing: border-box;
}

.reminder-date-input:hover,
.reminder-date-input:focus {
    border-color: var(--gray-400);
    background-color: var(--gray-50);
}

/* Tarihi Geçmiş/Bugün Olan Hatırlatma Uyarı Stili */
.reminder-date-input.overdue-reminder {
    border-color: #ef4444;
    color: var(--danger-700);
    background-color: var(--danger-50);
    font-weight: 600;
}

.card-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Acil Butonu */
.urgent-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400);
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Akıllı Taşıma Butonu */
.smart-move-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #3b82f6;
    /* Dikkat çeken mavi ton */
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.smart-move-btn:hover {
    background-color: #eff6ff;
    transform: scale(1.1);
}

/* Dinamik Açılır Menü (Dropdown) */
.smart-move-menu {
    position: absolute;
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    min-width: 150px;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.smart-move-menu.active {
    display: flex;
}

.smart-move-menu-title {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-500);
    background-color: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    user-select: none;
}

.smart-move-menu-item {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    color: var(--gray-800);
    cursor: pointer;
    transition: background-color 0.15s;
    user-select: none;
}

.smart-move-menu-item:hover {
    background-color: var(--gray-100);
    color: #3b82f6;
    font-weight: 500;
}

.urgent-btn:hover {
    background-color: var(--gray-100);
    color: #ef4444;
}

/* Sürükleme Tutamacı - Kusursuz Drag & Drop İçin */
.drag-handle {
    cursor: grab;
    color: var(--gray-400);
    padding: 0.25rem;
    border-radius: 4px;
    touch-action: none;
    /* Mobilde scroll'u iptal edip drag eventini yakalamak için kritik! */
    transition: background-color 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drag-handle:hover {
    background-color: var(--gray-100);
    color: var(--gray-500);
}

.drag-handle:active {
    cursor: grabbing;
}

/* Düzenlenebilir Not Alanı */
.editable-note {
    font-size: 0.85rem;
    color: var(--gray-600);
    background-color: var(--gray-50);
    border-radius: 6px;
    padding: 0.5rem;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    min-height: 2.5rem;
    outline: none;
    line-height: 1.5;
    word-break: break-word;
    /* Uzun metinler kartı bozmasın */
}

.editable-note:hover {
    background-color: var(--gray-100);
}

.editable-note:focus {
    background-color: #ffffff;
    border-color: var(--col1-color);
    box-shadow: 0 0 0 2px rgba(34, 160, 107, 0.2);
}

.editable-note[contenteditable="true"]:empty:before {
    content: "Not eklemek için tıklayın...";
    color: var(--gray-400);
    pointer-events: none;
}

/* Kart Sil Butonu (Arşivle) */
.delete-btn {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    opacity: 0;
    padding: 0.35rem;
    transition: all 0.2s;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-btn:hover {
    background-color: var(--danger-50);
}

.card:hover .delete-btn {
    opacity: 0.6;
}

.card .delete-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* === OPERASYON DURUM ÇUBUĞU & FİLTRESİ === */
.operation-filter-select {
    padding: 0.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 20px;
    background-color: #ffffff;
    color: var(--gray-600);
    font-weight: 500;
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
}

.operation-filter-select:hover,
.operation-filter-select:focus {
    border-color: var(--gray-400);
    background-color: var(--gray-50);
}

.operation-bar {
    display: flex;
    justify-content: space-around;
    padding: 6px 0;
    margin-top: 10px;
    border-top: 1px dashed var(--gray-200);
    align-items: center;
}

.op-icon {
    cursor: pointer;
    user-select: none;
    font-size: 1.15rem;
    transition: all 0.2s ease;
    padding: 3px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.op-icon:hover {
    transform: scale(1.15);
    background-color: var(--gray-100);
}

/* 0: Gri (Başlamadı) */
.op-status-0 {
    filter: grayscale(100%);
    opacity: 0.4;
}

/* 1: Turuncu (İşlemde) - Sepia & Hue Rotate yardımıyla turuncumsu ton */
.op-status-1 {
    filter: sepia(100%) hue-rotate(5deg) saturate(300%);
    opacity: 1;
    text-shadow: 0 0 4px rgba(245, 158, 11, 0.4);
}

/* 2: Yeşil (Tamamlandı) - Hue Rotate yardımıyla yeşil ton */
.op-status-2 {
    filter: sepia(100%) hue-rotate(80deg) saturate(300%);
    opacity: 1;
    text-shadow: 0 0 4px rgba(16, 185, 129, 0.4);
}

/* CRM Kart Filtreleme Gizlemesi */
.hidden-by-filter {
    display: none !important;
}

/* Operasyon Filtresi Gizlemesi */
.hidden-by-op-filter {
    display: none !important;
}

/* Filtre sırasında boş kalan sütunlar */
.column.column-hidden-by-filter {
    display: none !important;
}

/* Eisenhower: filtre sırasında boş kalan kadranlar */
.eisenhower-quadrant.eq-hidden-by-filter {
    display: none !important;
}

/* ==== Satış Panosu: Filtre Aktifken Kompakt Kart Modu ==== */
#board.board-filter-active .card {
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.5rem;
    transition: padding 0.25s ease, margin 0.25s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

#board.board-filter-active .card-header {
    margin-bottom: 0.25rem;
}

#board.board-filter-active .card-title {
    font-size: 0.88rem;
    line-height: 1.25;
}

#board.board-filter-active .card-action-icons {
    margin-bottom: 0.35rem;
    margin-top: 0.1rem;
    gap: 0.35rem;
}

#board.board-filter-active .crm-icon-btn {
    font-size: 0.95rem;
    padding: 1px;
}

#board.board-filter-active .bni-icon-btn {
    font-size: 0.85rem;
    padding: 1px 4px;
}

#board.board-filter-active .column-time-badge {
    font-size: 0.68rem;
    padding: 0.1rem 0.4rem;
}

/* Kompakt modda notları/açıklamayı sakla */
#board.board-filter-active .card-notes,
#board.board-filter-active .card-description,
#board.board-filter-active .urgent-note {
    display: none;
}

/* Kompakt modda hatırlatma tarihi alanı biraz daralır */
#board.board-filter-active .reminder-date-input {
    font-size: 0.75rem;
    padding: 2px 4px;
}

/* Kompakt modda kart geçişi yumuşak olsun */
.card {
    transition: padding 0.25s ease, margin 0.25s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* Kademeli Yaşlanmış Kartlar (Tiered Aging) */
/* === KADEMELI YASLANMIS KARTLAR (Tiered Aging) ===
   Sol renk cubugu deseni: durum sinyali kartin SOL KENARINDA durur,
   icerigi bogmaz. Renkler artik palet degiskenlerinden gelir. */

/* Seviye 1: 3 Gunu Gecenler (Dikkat) */
.card.aged-card-tier-1 {
    background-color: var(--warning-50);
    border-left: 4px solid var(--warning-500);
}

/* Seviye 2: 5 Gunu Gecenler (Uyari) */
.card.aged-card-tier-2 {
    background-color: var(--tier2-bg);
    border-left: 4px solid var(--tier2-bar);
}

/* Seviye 3: 7 Gunu Gecenler (Kritik) */
.card.aged-card-tier-3 {
    background-color: var(--danger-50);
    border-left: 4px solid var(--danger-700);
}

/* Acil, yaslanmayi EZER - tum kademelerde ayni kirmizi */
.card.aged-card-tier-1.urgent,
.card.aged-card-tier-2.urgent,
.card.aged-card-tier-3.urgent {
    border-left: 4px solid var(--danger-500) !important;
    background-color: var(--danger-50);
}

/* Acil Durum Tasarimi (Urgent) */
.card.urgent {
    border-left: 4px solid var(--danger-500) !important;
    background-color: var(--danger-50);
}

.card.urgent .card-title {
    color: var(--danger-800);
}

/* --- KOYU TEMA (2026-09-02) ---
   ⚠️ YASANMIS SORUN (benden ONCE vardi): koyu temada kart zemini
   koyulasiyor ama `.card.urgent .card-title` kurali daha yuksek
   ozgullukte oldugu icin baslik KOYU KIRMIZI kaliyordu -> koyu
   uzerine koyu, okunmuyordu. Kademe zeminleri de acik renk oldugu
   icin koyu temada tonlu-seffaf zemine cevrildi.
   ⚠️ Yeni bir kart durumu eklerken koyu tema karsiligini da YAZ. */
[data-theme="dark"] .card.urgent .card-title { color: #fca5a5; }
[data-theme="dark"] .card.urgent,
[data-theme="dark"] .card.aged-card-tier-1.urgent,
[data-theme="dark"] .card.aged-card-tier-2.urgent,
[data-theme="dark"] .card.aged-card-tier-3.urgent {
    background-color: rgba(220, 38, 38, 0.13);
}
[data-theme="dark"] .card.aged-card-tier-1 { background-color: rgba(245, 158, 11, 0.12); }
[data-theme="dark"] .card.aged-card-tier-2 { background-color: rgba(234, 88, 12, 0.13); }
[data-theme="dark"] .card.aged-card-tier-3 { background-color: rgba(220, 38, 38, 0.13); }

.card.urgent .urgent-btn {
    color: #ef4444;
}

.card.urgent .urgent-btn:hover {
    background-color: var(--danger-100);
}

.urgent-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #ef4444;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
    pointer-events: none;
    display: none;
}

.card.urgent .urgent-badge {
    display: block;
}

/* Drag & Drop Sürükleme Efektleri (Pointer Events için) */

body.dragging-active {
    /* Sürükleme esnasında metin seçimini ve mobil yan etkileri engelle */
    user-select: none;
    -webkit-user-select: none;
}

.ghost {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    /* Bu çok kritik! Alttaki elemanları hesaplamak için */
    opacity: 0.95;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
    transform: rotate(3deg);
    cursor: grabbing;
}

.placeholder {
    background-color: rgba(203, 213, 225, 0.5);
    /* Hafif gri */
    border: 2px dashed var(--gray-400);
    border-radius: 8px;
    margin-bottom: 1rem;
    transition: height 0.2s ease;
}

/* Modal Ekranı Tasarımı */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(14, 31, 24, 0.5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 2rem;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(0.95);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.modal-header h3 {
    font-size: 1.25rem;
    color: var(--gray-900);
    font-weight: 700;
    margin-right: 1rem;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    color: var(--gray-400);
    transition: color 0.2s;
    padding: 0;
}

.close-btn:hover {
    color: #ef4444;
}

.modal-content p {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.modal-buttons-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.modal-stage-btn {
    background-color: var(--gray-50);
    border: 1px solid var(--gray-200);
    padding: 0.85rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    color: var(--gray-700);
    text-align: left;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    border-left: 4px solid transparent;
}

.modal-stage-btn:hover {
    background-color: var(--gray-100);
    border-color: var(--gray-300);
    transform: translateX(4px);
}

/* Responsive Düzenlemeler - Mobil Uyumluluk */
@media (max-width: 768px) {
    body {
        padding: 0.75rem;
    }

    .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 14px;
    }

    .header-text h1 {
        font-size: 17px; /* S12: demo mobil başlık */
    }

    .btn-primary {
        width: 100%;
        justify-content: center;
    }

    /* Sekmeleri tek sıra + yatay kaydırılabilir yap (taşmasın) */
    .app-tabs {
        gap: 0.25rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.75rem;
        scrollbar-width: none;
    }
    .app-tabs::-webkit-scrollbar { display: none; }
    .tab-btn {
        padding: 0.5rem 0.85rem;
        font-size: 0.85rem;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .tab-btn.active::after {
        bottom: -0.75rem;
    }

    /* MOBİL AKORDEON: sütunlar yatay scroll yerine dikey yığılır */
    .kanban-board {
        flex-direction: column;
        overflow-x: visible;
        overflow-y: visible;
        height: auto;
        padding-bottom: 1rem;
        gap: 0.6rem;
    }

    .column {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        max-height: none;
    }

    /* Başlık tıklanabilir + sağda yön oku */
    .column-header {
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0,0,0,0.05);
        padding: 0.85rem 1rem;
        gap: 0.5rem;
    }
    .column-header::after {
        content: '▾';
        font-size: 1rem;
        line-height: 1;
        color: var(--gray-500);
        margin-left: 0.5rem;
        transition: transform 0.2s ease;
        flex-shrink: 0;
    }
    .column.collapsed .column-header::after {
        transform: rotate(-90deg);
    }
    .column.collapsed .column-content,
    .column.collapsed .planner-add-task {
        display: none;
    }
    /* Açık sütunda içerik fazla uzarsa kendi içinde scroll, aksi halde doğal akış */
    .column-content {
        max-height: 65vh;
    }

    /* === KART İÇİ TAŞMA DÜZELTMELERİ === */
    html, body { overflow-x: hidden; }
    .card-action-icons {
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }
    .card-action-icons .column-time-badge {
        margin-left: 0;
    }
    .card-action-icons .reminder-date-input {
        margin-left: 0;
        min-width: 0;
        flex: 0 1 auto;
        max-width: 130px;
    }
    .operation-bar { flex-wrap: wrap; }
}

/* ============================================================
   DARK MODE — body[data-theme="dark"] üzerinde aktif
   ============================================================ */
/* S10: karanlık tema MVD koyu yeşiline çekildi (TASARIM.md §7) — eskiden maviye çalan slate (#0f172a / #1e293b) */
[data-theme="dark"] {
    --bg-color: var(--koyu);
    --text-main: var(--koyu-yazi);
    --text-muted: #9DB5AA;
    --column-bg: #132A22;
    --card-bg: var(--koyu-2);
    --card-shadow: 0 1px 3px rgba(0,0,0,0.35);
    --hover-shadow: 0 6px 14px rgba(0,0,0,0.45);
}
[data-theme="dark"] body { background-color: var(--bg-color); color: var(--text-main); }
[data-theme="dark"] .header-content { background: var(--card-bg); border-color: var(--koyu-cizgi); box-shadow: none; }
[data-theme="dark"] .header-text h1 { color: var(--koyu-yazi); }
[data-theme="dark"] .header-text p { color: var(--text-muted); }
[data-theme="dark"] .app-tabs { border-bottom-color: var(--gray-700); }
[data-theme="dark"] .tab-btn { color: var(--gray-400); }
[data-theme="dark"] .tab-btn:hover { background-color: var(--gray-800); color: var(--gray-200); }
[data-theme="dark"] .column { background-color: var(--column-bg); }
[data-theme="dark"] .column-header { background-color: rgba(14, 31, 24,0.5); border-bottom-color: var(--gray-700); }
[data-theme="dark"] .column-header h2 { color: var(--gray-300); }
[data-theme="dark"] .card { background-color: var(--card-bg); border-color: var(--gray-700); }
[data-theme="dark"] .card-title { color: var(--gray-100); }
[data-theme="dark"] .editable-note { color: var(--gray-300); background-color: rgba(14, 31, 24,0.4); }
[data-theme="dark"] .editable-note:hover,
[data-theme="dark"] .editable-note:focus { background-color: rgba(14, 31, 24,0.7); }
[data-theme="dark"] .editable-note[contenteditable="true"]:empty:before { color: var(--gray-500); }
[data-theme="dark"] .search-box,
[data-theme="dark"] #customer-search-input { background-color: var(--gray-800); color: var(--text-main); border-color: var(--gray-700); }
[data-theme="dark"] #customer-search-input::placeholder { color: var(--gray-500); }
[data-theme="dark"] .operation-filter-select { background-color: var(--gray-800); color: var(--text-main); border-color: var(--gray-700); }
[data-theme="dark"] .dash-card { background-color: var(--card-bg); border-color: var(--koyu-cizgi); color: var(--text-main); box-shadow: none; }
[data-theme="dark"] .filter-btn { background-color: var(--gray-800); border-color: var(--gray-700); color: var(--gray-300); }
[data-theme="dark"] .filter-btn:hover { background-color: var(--gray-700); color: var(--gray-100); }
[data-theme="dark"] .badge { background-color: var(--gray-700); color: var(--gray-100); }
[data-theme="dark"] .reminder-date-input { background-color: var(--gray-900); color: var(--text-main); border-color: var(--gray-700); }
[data-theme="dark"] .column-time-badge { background-color: var(--gray-900); color: var(--gray-300); border-color: var(--gray-700); }
[data-theme="dark"] .column-time-badge.column-slow { background-color: #422006; color: #fcd34d; border-color: var(--warning); }
[data-theme="dark"] .column-time-badge.column-stalled { background-color: #450a0a; color: #fca5a5; border-color: var(--danger); }
[data-theme="dark"] .bni-icon-btn { color: var(--gray-500); border-color: var(--gray-700); }
[data-theme="dark"] .card-add-task-btn { background-color: rgba(59,130,246,0.15); color: #93c5fd; border-color: rgba(59,130,246,0.3); }
[data-theme="dark"] .planner-add-task { background-color: var(--gray-900); border-bottom-color: var(--gray-700); }
[data-theme="dark"] #planner-task-input { background-color: var(--gray-800); color: var(--text-main); border-color: var(--gray-700); }
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal { background-color: var(--gray-800); color: var(--text-main); }
[data-theme="dark"] .crm-icon-btn:hover { background-color: var(--gray-700); }
[data-theme="dark"] .modal-stage-btn { background-color: var(--gray-800); color: var(--gray-300); border-color: var(--gray-700); }
[data-theme="dark"] .modal-stage-btn:hover { background-color: var(--gray-700); }
[data-theme="dark"] .search-dropdown { background-color: var(--gray-800); border-color: var(--gray-700); }
/* S11 — gösterge kartı karanlık tema: yüzey koyu-2, ikon kutusu saydam anlam zemini (TASARIM.md §7) */
[data-theme="dark"] .dash-card-overdue .dash-value { color: var(--alarm-acik); }
[data-theme="dark"] .dash-card-won .dash-value { color: var(--mvd); }
[data-theme="dark"] .dash-icon { background-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .dash-card[data-type="overdue-reminder"] .dash-icon { background-color: rgba(209, 72, 64, 0.18); color: var(--alarm-acik); }
[data-theme="dark"] .dash-card[data-type="inactive"] .dash-icon,
[data-theme="dark"] .dash-card[data-type="pending"] .dash-icon,
[data-theme="dark"] .dash-card[data-type="gorusme-eski"] .dash-icon { background-color: rgba(214, 154, 33, 0.16); color: var(--uyari-acik); }
[data-theme="dark"] .dash-card[data-type="planned"] .dash-icon,
[data-theme="dark"] .dash-card[data-type="kt"] .dash-icon,
[data-theme="dark"] .dash-card[data-type="bni"] .dash-icon { background-color: rgba(46, 134, 200, 0.18); color: var(--kap-acik); }
[data-theme="dark"] .dash-card-won .dash-icon { background-color: rgba(107, 200, 148, 0.14); color: var(--mvd); }
[data-theme="dark"] .filter-btn[data-filter="thisweek-reminder"] {
    border-color: var(--warning-800);
    color: #fcd34d;
}
[data-theme="dark"] .filter-btn[data-filter="thisweek-reminder"].active {
    background: #f59e0b;
    border-color: #f59e0b;
    color: var(--gray-800);
}

/* ============================================================
   ÜST BAR TEMA + GÖRÜNÜM BUTONLARI
   ============================================================ */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* S12: üst düğmeler TEK TİP (demo .cip) — beyaz + ince çizgi. Eskiden 5'inde satır içi süs rengi vardı
   (yeşil/kırmızı/çivit/mavi); 🎯'nin kırmızısı "risk" gibi okunuyordu. Tanıma emojiden devam eder. */
.icon-btn {
    background-color: var(--yuzey);
    border: 1px solid var(--cizgi-koyu);
    color: var(--murekkep);
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 17px;
    transition: background 0.13s, border-color 0.13s;
    font-family: inherit;
    padding: 0;
}
.icon-btn:hover {
    background-color: var(--gray-50);
    border-color: var(--mvd-koyu);
}
[data-theme="dark"] .icon-btn {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: var(--koyu-cizgi);
    color: var(--koyu-yazi);
}
[data-theme="dark"] .icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(107, 200, 148, 0.35);
}
/* Görünüm modu butonu sadece mobilde anlamlı */
.view-mode-toggle { display: none; }
@media (max-width: 768px) {
    .view-mode-toggle { display: inline-flex; }
    .header-actions {
        order: 3;
        margin-top: 0.25rem;
    }
}

/* ============================================================
   GÖRÜNÜM MODU: TAM EKRAN SÜTUN (sadece mobilde aktif)
   body[data-view-mode="modal"] ile etkin olur
   ============================================================ */
@media (max-width: 768px) {
    /* Modal mod → varsayılan olarak sütun içerikleri gizli, sadece başlıklar görünür */
    [data-view-mode="modal"] .column .column-content,
    [data-view-mode="modal"] .column .planner-add-task {
        display: none;
    }
    /* Modal modunda chevron yerine "tam ekrana çıkar" oku */
    [data-view-mode="modal"] .column-header::after {
        content: '⤢';
        font-size: 1.05rem;
        transform: none;
    }

    /* Açılmış sütun → tam ekran kapatıcı */
    [data-view-mode="modal"] .column.as-modal {
        position: fixed;
        inset: 0;
        z-index: 1000;
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        border-radius: 0;
        background-color: var(--column-bg);
        overflow-y: auto;
        animation: kanbanSlideUp 0.22s ease-out;
    }
    [data-view-mode="modal"] .column.as-modal .column-header {
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: #ffffff;
        border-radius: 0;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--gray-200);
    }
    [data-theme="dark"][data-view-mode="modal"] .column.as-modal .column-header {
        background-color: var(--gray-800);
        border-bottom-color: var(--gray-700);
    }
    [data-view-mode="modal"] .column.as-modal .column-header::after {
        content: '✕';
        font-size: 1.2rem;
        font-weight: 700;
    }
    [data-view-mode="modal"] .column.as-modal .column-content,
    [data-view-mode="modal"] .column.as-modal .planner-add-task {
        display: flex;
        max-height: none;
        padding: 1rem 1.25rem 2rem;
    }
    body.modal-open {
        overflow: hidden;
    }
    @keyframes kanbanSlideUp {
        from { transform: translateY(16px); opacity: 0.6; }
        to   { transform: translateY(0);    opacity: 1; }
    }
}

/* HAFTALIK PLANLAYICI ÖZEL STİLLERİ */
.planner-add-task {
    padding: 1rem;
    background-color: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#planner-task-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
}

#planner-task-input:focus {
    border-color: var(--gray-400);
}

.color-picker {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.25rem 0;
}

.color-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s, box-shadow 0.2s;
}

.color-dot:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.color-dot.active {
    border-color: var(--gray-900);
    transform: scale(1.2);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.planner-board .card {
    margin-bottom: 0.75rem;
}

/* Toast Bildirimleri (Bulut ve Takvim) Bağımsızlaştırma */
.toast {
    position: fixed !important;
    bottom: 20px;
    right: 20px;
    /* Sağ altta çıkması daha modern */
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 99999;
    margin: 0 !important;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 600;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

#toast-notification {
    background-color: #10b981;
    color: white;
}

#calendar-toast-notification {
    background-color: #3b82f6 !important;
    /* Mavi */
    color: white;
    /* Takvim bildirimi üstte de durabilir, bu yüzden top vs. ayarlanabilir ama şimdilik toast class'ının özelliklerini baz alırız, sadece alt margin vs engeller */
}

/* Aynı anda iki bildirim çıkarsa alt alta dizilmesi için (script.js içerisinden bottom offset de verilebilir, ama ekran daralma sorunu fixed ile çözülmüştür) */

/* --- YENİ EKLENEN RAPORLAR MODÜLÜ (CHART.JS) --- */
.reports-board {
    padding: 1rem 0;
    width: 100%;
}

.reports-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    width: 100%;
}

.chart-box {
    background: var(--card-bg); /* S10: karanlıkta beyaz kalıyordu */
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--golge);
    border: 1px solid var(--gray-200);
    flex: 1 1 calc(33.333% - 1.5rem);
    min-width: 300px; /* Mobilde alta kayması için */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chart-box h3 {
    font-size: 1.1rem;
    color: var(--gray-800);
    margin-bottom: 1rem;
    text-align: center;
    font-weight: 600;
}

.chart-wrapper {
    position: relative;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 1024px) {
    .chart-box {
        flex: 1 1 calc(50% - 1.5rem);
    }
}

@media (max-width: 768px) {
    .chart-box {
        flex: 1 1 100%;
    }
}

/* === CRM MÜŞTERİ DETAY MODALI STİLLERİ === */
.crm-modal-content {
    max-width: 600px;
    max-height: 85vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.crm-modal-content > .modal-header {
    padding: 1rem 1.5rem;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--card-bg);
    border-bottom: 1px solid var(--gray-200);
}

.crm-modal-body {
    padding: 1.5rem 2rem;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
}

.crm-modal-body::-webkit-scrollbar { width: 6px; }
.crm-modal-body::-webkit-scrollbar-track { background: transparent; }
.crm-modal-body::-webkit-scrollbar-thumb { background-color: var(--gray-300); border-radius: 8px; }
.crm-modal-body::-webkit-scrollbar-thumb:hover { background-color: var(--gray-400); }

.crm-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.crm-info-box {
    background-color: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.crm-info-box.full-width {
    grid-column: span 2;
}

.crm-info-box label {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-500);
    font-weight: 600;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.crm-readonly-text {
    font-size: 1rem;
    color: var(--gray-900);
    font-weight: 500;
    min-height: 24px;
}

.crm-input {
    width: 100%;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    padding: 0.5rem;
    font-size: 1rem;
    color: var(--gray-900);
    outline: none;
    transition: border-color 0.2s;
    background-color: var(--card-bg);
}

.crm-input:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 2px rgba(34, 160, 107, 0.22);
}

/* Timeline (Görüşme Geçmişi) */
.crm-timeline-section {
    border-top: 1px dashed var(--gray-300);
    padding-top: 1.5rem;
}

.crm-timeline-section h4 {
    font-size: 1rem;
    color: var(--gray-800);
    margin-bottom: 1rem;
    font-weight: 600;
}

.timeline-add-box {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

#crm-timeline-input {
    width: 100%;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    padding: 0.75rem;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
}

#crm-timeline-input:focus {
    border-color: var(--brand-500);
}

.timeline-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 250px;
    overflow-y: auto;
    padding-right: 0.5rem;
    /* Firefox desteği */
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
}

/* Chrome, Edge, Safari WebKit Scrollbar Tasarımı */
.timeline-list::-webkit-scrollbar {
    width: 6px;
}

.timeline-list::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 8px;
}

.timeline-list::-webkit-scrollbar-thumb {
    background-color: var(--gray-300);
    border-radius: 8px;
}

.timeline-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--gray-400);
}

.timeline-item {
    position: relative;
    padding-left: 1.5rem;
    border-left: 2px solid var(--gray-200);
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--brand-500);
    border: 2px solid var(--card-bg);
}

.timeline-date {
    font-size: 0.75rem;
    color: var(--gray-500);
    background-color: var(--gray-100);
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.timeline-content {
    font-size: 0.9rem;
    color: var(--gray-700);
    background-color: var(--gray-50);
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--gray-200);
    line-height: 1.4;
}

/* Risk Radar Butonu Secili Durum */
#risk-drilldown-btn { border-color: var(--danger-500); color: var(--danger); }
#risk-drilldown-btn:hover { background-color: var(--danger-50); }
#risk-drilldown-btn.active { background-color: var(--danger-100); color: var(--danger); border-color: var(--danger); box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3); }

/* ============================================= */
/* === ISTANBUL ILCE HAKIMIYET PANOSU STILLERI === */
/* ============================================= */

.district-modal-content { width: 92vw; max-width: 1200px; max-height: 88vh; padding: 0 !important; display: flex; flex-direction: column; overflow: hidden; }
.district-modal-header { padding: 18px 24px !important; border-bottom: 1px solid var(--gray-200); background: linear-gradient(135deg, var(--gray-50) 0%, #e0f2fe 100%); border-radius: 16px 16px 0 0; flex-shrink: 0; }

.district-filter-panel { display: flex; align-items: center; gap: 20px; padding: 12px 24px; background: rgba(248, 250, 252, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-200); flex-shrink: 0; flex-wrap: wrap; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.district-filter-title { font-weight: 700; font-size: 0.85rem; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 8px; }
.district-filter-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 500; color: var(--gray-700); cursor: pointer; padding: 5px 12px; border-radius: 20px; border: 1px solid var(--gray-200); background: #ffffff; transition: all 0.2s ease; user-select: none; }
.district-filter-label:hover { background: var(--gray-100); border-color: var(--gray-400); }
.district-filter-cb { width: 16px; height: 16px; cursor: pointer; accent-color: #22a06b; }
.district-filter-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.district-grid { display: block; padding: 0; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }
.district-grid::-webkit-scrollbar { width: 6px; }
.district-grid::-webkit-scrollbar-track { background: transparent; }
.district-grid::-webkit-scrollbar-thumb { background-color: var(--gray-300); border-radius: 8px; }
.district-grid::-webkit-scrollbar-thumb:hover { background-color: var(--gray-400); }

.district-card { position: relative; border-radius: 12px; padding: 16px 14px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 100px; border: 1px solid rgba(226, 232, 240, 0.8); background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; animation: districtCardAppear 0.35s ease-out both; }
.district-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, transparent, rgba(34, 160, 107, 0.3), transparent); opacity: 0; transition: opacity 0.3s ease; }
.district-card:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); border-color: var(--gray-400); z-index: 2; }
.district-card:hover::before { opacity: 1; }
.district-card:active { transform: translateY(-1px) scale(1.01); }

.district-card-name { font-weight: 700; font-size: 0.88rem; color: var(--gray-800); margin-bottom: 8px; letter-spacing: -0.01em; line-height: 1.2; }
.district-card-count { font-size: 1.6rem; font-weight: 800; color: var(--gray-900); line-height: 1; margin-bottom: 4px; }
.district-card-label { font-size: 0.7rem; color: var(--gray-500); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }

.district-heat-0 { background: linear-gradient(145deg, var(--gray-50), var(--gray-100)); border-color: var(--gray-200); }
.district-heat-0 .district-card-count { color: var(--gray-400); }
.district-heat-1 { background: linear-gradient(145deg, #eff6ff, #dbeafe); border-color: #bfdbfe; }
.district-heat-2 { background: linear-gradient(145deg, #dbeafe, #bfdbfe); border-color: #93c5fd; }
.district-heat-2 .district-card-name { color: #1e40af; }
.district-heat-3 { background: linear-gradient(145deg, #a8e3c4, #a5b4fc); border-color: #7bd3a4; }
.district-heat-3 .district-card-name { color: var(--brand-800); }
.district-heat-3 .district-card-count { color: var(--brand-900); }
.district-heat-4 { background: linear-gradient(145deg, var(--warning-100), var(--warning-200)); border-color: #fbbf24; box-shadow: 0 2px 12px rgba(251, 191, 36, 0.2); }
.district-heat-4 .district-card-name { color: var(--warning-800); }
.district-heat-4 .district-card-count { color: #78350f; }

.district-card.has-risk { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3), 0 2px 8px rgba(239, 68, 68, 0.08); }
.district-card.has-risk::after { content: '\26A0\FE0F'; position: absolute; top: 6px; right: 8px; font-size: 0.75rem; }
.district-card.has-won { box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25), 0 2px 8px rgba(16, 185, 129, 0.08); }

.district-status-dots { display: flex; gap: 4px; margin-top: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
.district-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; opacity: 0.9; }
.district-status-dot.dot-blue { background-color: #3b82f6; }
.district-status-dot.dot-orange { background-color: #f59e0b; }
.district-status-dot.dot-green { background-color: #10b981; }
.district-status-dot.dot-red { background-color: #ef4444; }
.district-status-dot.dot-purple { background-color: var(--brand-600); }

.gmaps-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 20px; margin-top: 16px; background: linear-gradient(135deg, #1e40af, #3b82f6); color: #ffffff; font-size: 1rem; font-weight: 700; font-family: inherit; border-radius: 12px; text-decoration: none; transition: all 0.25s ease; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); border: none; cursor: pointer; }
.gmaps-btn:hover { background: linear-gradient(135deg, #1e3a8a, #2563eb); box-shadow: 0 6px 18px rgba(59, 130, 246, 0.4); transform: translateY(-2px); }
.gmaps-btn:active { transform: translateY(0); }

.district-customer-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background-color: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 8px; transition: all 0.2s ease; }
.district-customer-item:hover { background-color: var(--gray-100); border-color: var(--gray-400); }
.district-customer-name { font-weight: 600; font-size: 0.95rem; color: var(--gray-800); cursor: pointer; transition: color 0.2s; }
.district-customer-name:hover { color: var(--brand-600); text-decoration: underline; }
.district-customer-status { font-size: 0.78rem; font-weight: 600; padding: 3px 10px; border-radius: 12px; white-space: nowrap; }
.district-customer-status.status-pending { background-color: #dbeafe; color: #1e40af; }
.district-customer-status.status-idle { background-color: var(--warning-100); color: var(--warning-800); }
.district-customer-status.status-won { background-color: #d1fae5; color: #065f46; }
.district-customer-status.status-risky { background-color: var(--danger-100); color: #991b1b; }
.district-customer-status.status-bni { background-color: #f3e8ff; color: var(--brand-800); }
.district-customer-status.status-active { background-color: #f0f9ff; color: #0369a1; }

/* Tümünü Kaldır Butonu */
.filter-clear-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; font-weight: 600; color: var(--gray-500); cursor: pointer; padding: 5px 14px; border-radius: 20px; border: 1px dashed var(--gray-400); background: transparent; transition: all 0.2s ease; font-family: inherit; margin-left: auto; }
.filter-clear-btn:hover { color: #ef4444; border-color: #ef4444; background: var(--danger-50); }

/* Şehir Başlık Bölümü (Çoklu Şehir Desteği) */
.city-section { margin-bottom: 8px; }
.city-section-header { display: flex; align-items: center; gap: 10px; padding: 10px 24px 6px 24px; position: sticky; top: 0; z-index: 1; background: rgba(248, 250, 252, 0.95); backdrop-filter: blur(8px); }
.city-section-title { font-size: 1rem; font-weight: 800; color: var(--gray-900); text-transform: uppercase; letter-spacing: 0.04em; }
.city-section-badge { font-size: 0.75rem; font-weight: 700; color: var(--gray-600); background: var(--gray-200); padding: 2px 10px; border-radius: 12px; }
.city-section-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--gray-300), transparent); }
.city-section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; padding: 6px 24px 16px 24px; }

/* Nabız Noktaları (Pulse Badges) — Filtre bağımsız röntgen */
.district-pulse-badges { position: absolute; top: 7px; right: 7px; display: flex; gap: 4px; z-index: 2; }
.district-pulse { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255,255,255,0.8); }
.district-pulse.pulse-red { background: #ef4444; animation: pulseGlow 2s ease-in-out infinite; }
.district-pulse.pulse-blue { background: #3b82f6; }
.district-pulse.pulse-orange { background: #f59e0b; }
.district-pulse.pulse-green { background: #10b981; }
.district-pulse.pulse-purple { background: var(--brand-600); }

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.8); }
    50% { box-shadow: 0 0 0 2px rgba(255,255,255,0.8), 0 0 6px 2px rgba(239, 68, 68, 0.4); }
}

@keyframes districtCardAppear {
    from { opacity: 0; transform: translateY(12px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 768px) {
    .district-modal-content { width: 96vw; max-height: 92vh; }
    .district-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; padding: 12px 14px; }
    .district-card { min-height: 80px; padding: 12px 10px; }
    .district-card-count { font-size: 1.3rem; }
    .district-filter-panel { gap: 10px; padding: 10px 14px; }
}

@media (max-width: 480px) {
    .district-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* ========================================= */
/* === EISENHOWER GÖREv MATRİSİ STİLLERİ === */
/* ========================================= */

.eisenhower-board {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.eisenhower-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, var(--gray-50) 100%);
    padding: 1.25rem 1.75rem;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid var(--gray-200);
    gap: 1rem;
    flex-wrap: wrap;
}

.eisenhower-title-row {
    flex: 1;
}

.eisenhower-title-row h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.25rem;
}

.eisenhower-subtitle {
    font-size: 0.88rem;
    color: var(--gray-500);
    margin: 0;
}

/* 2×2 Grid Layout */
.eisenhower-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
    min-height: calc(100vh - 320px);
}

/* Çeyrek Kutuları */
.eisenhower-quadrant {
    background: #ffffff;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.eisenhower-quadrant:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

/* Çeyrek Renk Kodlamaları */
.eq-q1 { border-top: 4px solid #ef4444; }
.eq-q2 { border-top: 4px solid #3b82f6; }
.eq-q3 { border-top: 4px solid #f59e0b; }
.eq-q4 { border-top: 4px solid var(--gray-400); }

.eq-q1:hover { border-color: #fca5a5; }
.eq-q2:hover { border-color: #93c5fd; }
.eq-q3:hover { border-color: #fcd34d; }
.eq-q4:hover { border-color: var(--gray-300); }

/* Çeyrek Başlığı */
.eq-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(248,250,252,0.8) 0%, rgba(241,245,249,0.5) 100%);
    border-bottom: 1px solid var(--gray-100);
}

.eq-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

.eq-q1 .eq-icon { background: linear-gradient(135deg, var(--danger-50), var(--danger-100)); }
.eq-q2 .eq-icon { background: linear-gradient(135deg, #eff6ff, #dbeafe); }
.eq-q3 .eq-icon { background: linear-gradient(135deg, #fffbeb, var(--warning-100)); }
.eq-q4 .eq-icon { background: linear-gradient(135deg, var(--gray-50), var(--gray-100)); }

.eq-header-text {
    flex: 1;
}

.eq-header-text h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
}

.eq-tagline {
    font-size: 0.75rem;
    color: var(--gray-400);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.eq-count {
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.2rem 0.7rem;
    border-radius: 20px;
    min-width: 28px;
    text-align: center;
}

.eq-q1 .eq-count { background: var(--danger-50); color: var(--danger); }
.eq-q2 .eq-count { background: #eff6ff; color: #2563eb; }
.eq-q3 .eq-count { background: #fffbeb; color: var(--warning); }
.eq-q4 .eq-count { background: var(--gray-50); color: var(--gray-500); }

/* Çeyrek İçerik */
.eq-content {
    flex: 1;
    padding: 0.75rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 100px;
}

.eq-content::-webkit-scrollbar { width: 5px; }
.eq-content::-webkit-scrollbar-track { background: transparent; }
.eq-content::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 10px; }

/* Görev Kartı */
.eq-task-card {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    transition: all 0.2s ease;
    animation: eqTaskAppear 0.3s ease-out;
    position: relative;
}

@keyframes eqTaskAppear {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.eq-task-card:hover {
    border-color: var(--gray-400);
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}

.eq-task-card.done {
    opacity: 0.5;
    background: var(--gray-50);
}

.eq-task-card.done .eq-task-text {
    text-decoration: line-through;
    color: var(--gray-400);
}

/* Görev Öncelik Sıra Numarası Rozeti */
.eq-task-rank {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
    margin-top: 1px;
    background: var(--gray-100);
    color: var(--gray-400);
    border: 1px solid var(--gray-200);
    transition: all 0.15s ease;
}

.eq-task-rank:hover {
    background: var(--gray-200);
    color: var(--gray-600);
    transform: scale(1.08);
}

/* İlk 3 görev: dikkat çeken renk (1 en güçlü) */
.eq-task-rank.top {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #ffffff;
    border-color: #ea580c;
    box-shadow: 0 1px 4px rgba(234, 88, 12, 0.3);
}

.eq-task-rank.top-1 {
    background: linear-gradient(135deg, #ef4444, var(--danger));
    border-color: var(--danger);
    box-shadow: 0 1px 5px rgba(220, 38, 38, 0.4);
}

/* Tamamlanan görevin rozeti (numara yok) */
.eq-task-rank.done-rank {
    background: transparent;
    border-color: transparent;
    color: var(--gray-300);
    cursor: default;
}
.eq-task-rank.done-rank:hover {
    transform: none;
    background: transparent;
    color: var(--gray-300);
}

/* Sıra numarası düzenleme kutusu */
.eq-task-rank.editing {
    background: #ffffff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    padding: 0;
    overflow: hidden;
}
.eq-rank-input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--gray-800);
    background: transparent;
    padding: 0;
    -moz-appearance: textfield;
}
.eq-rank-input::-webkit-outer-spin-button,
.eq-rank-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Görev Checkbox */
.eq-task-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--gray-300);
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-top: 2px;
    background: #ffffff;
}

.eq-task-checkbox:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.eq-task-checkbox.checked {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
}

.eq-task-checkbox.checked::after {
    content: '✓';
    font-size: 11px;
    color: white;
    font-weight: 700;
}

/* Görev İçerik */
.eq-task-info {
    flex: 1;
    min-width: 0;
}

.eq-task-text {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--gray-800);
    word-break: break-word;
    line-height: 1.4;
}

.eq-task-customer {
    font-size: 0.75rem;
    color: var(--gray-400);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.eq-task-customer::before {
    content: '👤';
    font-size: 0.7rem;
}

/* Görev Silme Butonu */
.eq-task-delete {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-300);
    font-size: 1rem;
    padding: 2px;
    border-radius: 4px;
    transition: all 0.15s;
    flex-shrink: 0;
    opacity: 0;
    line-height: 1;
}

.eq-task-card:hover .eq-task-delete {
    opacity: 1;
}

.eq-task-delete:hover {
    color: #ef4444;
    background: var(--danger-50);
}

/* Boş Çeyrek Mesajı */
.eq-empty-msg {
    color: var(--gray-300);
    font-size: 0.85rem;
    text-align: center;
    padding: 2rem 1rem;
    font-style: italic;
}

/* ============================= */
/* === KART İÇİ GÖREV BUTONU === */
/* ============================= */

.card-add-task-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #bfdbfe;
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: inherit;
    transition: all 0.2s ease;
    margin-top: 0.5rem;
    float: right;
}

.card-add-task-btn:hover {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border-color: #93c5fd;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(37,99,235,0.15);
}

.card-add-task-btn:active {
    transform: translateY(0);
}

.card-add-task-btn svg {
    flex-shrink: 0;
}

/* ================================== */
/* === HIZLI GÖREV POPOVER FORMU === */
/* ================================== */

.task-popover-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(14, 31, 24, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    animation: popoverOverlayIn 0.2s ease-out;
}

.task-popover-overlay.active {
    display: flex;
}

@keyframes popoverOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.task-popover {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
    width: 400px;
    max-width: 92vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: popoverSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

@keyframes popoverSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.task-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-100);
    background: linear-gradient(135deg, var(--gray-50), #ffffff);
}

.task-popover-header h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.task-popover-body {
    padding: 1.25rem;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* Kaydet butonu — popover'ın alt kenarına yapışık (sticky) */
#task-popover-submit-btn {
    position: sticky;
    bottom: 0;
    margin: 0 -1.25rem !important;
    padding: 0.85rem !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.4), #ffffff 30%);
    border-top: 1px solid var(--gray-100);
    z-index: 5;
    flex-shrink: 0;
}
[data-theme="dark"] #task-popover-submit-btn {
    background: linear-gradient(180deg, rgba(14, 31, 24,0.4), var(--gray-900) 30%);
    border-top: 1px solid var(--gray-700);
}

.task-popover-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.task-popover-field label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.task-popover-input {
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.92rem;
    font-family: inherit;
    color: var(--gray-800);
    outline: none;
    transition: all 0.2s;
    background: #ffffff;
}

.task-popover-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.task-popover-input[readonly] {
    background: var(--gray-50);
    color: var(--gray-500);
    cursor: default;
}

.task-popover-select {
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.92rem;
    font-family: inherit;
    color: var(--gray-800);
    outline: none;
    cursor: pointer;
    transition: all 0.2s;
    background: #ffffff;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 2rem;
}

.task-popover-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

/* ============================================ */
/* === YENİ: POPOVER ETİKET CHIP'LERİ === */
/* ============================================ */
.task-popover-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
/* === 📞 GÖREV İLETİŞİM BLOĞU (Paket 22, 2026-08-07) — yalnız 'temas' etiketinde görünür === */
.task-contact-box {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.7rem;
    border: 1.5px solid #bae6fd;
    border-radius: 10px;
    background: #f0f9ff;
}
.task-contact-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.task-contact-label {
    flex: 0 0 74px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #0369a1;
}
.task-contact-row .task-popover-input {
    flex: 1 1 auto;
    min-width: 0;
}
.task-contact-link {
    flex: 0 0 auto;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    background: var(--info);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.task-contact-link:hover { background: #0369a1; }
.task-contact-link.disabled {
    background: var(--gray-200);
    color: var(--gray-400);
    pointer-events: none;
}
.task-contact-intro-btn {
    width: 100%;
    padding: 0.5rem;
    border: none;
    border-radius: 8px;
    background: var(--info);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.task-contact-intro-btn:hover:not(:disabled) { background: #0369a1; }
.task-contact-intro-btn:disabled {
    background: var(--gray-200);
    color: var(--gray-400);
    cursor: not-allowed;
}
.task-contact-hint {
    font-size: 0.72rem;
    color: var(--gray-500);
    text-align: center;
}
[data-theme="dark"] .task-contact-box {
    background: #0c2231;
    border-color: #075985;
}
[data-theme="dark"] .task-contact-label { color: #7dd3fc; }
[data-theme="dark"] .task-contact-link.disabled,
[data-theme="dark"] .task-contact-intro-btn:disabled {
    background: var(--gray-700);
    color: var(--gray-500);
}
[data-theme="dark"] .task-contact-hint { color: var(--gray-400); }

/* === 📋 TERFİ (Paket 23, 2026-08-08) — görev iletişim bloğu içindeki düğme + onay ekranı === */
.task-contact-promote-btn {
    width: 100%;
    padding: 0.5rem;
    border: 1.5px solid var(--info);
    border-radius: 8px;
    background: #ffffff;
    color: #0369a1;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.task-contact-promote-btn:hover { background: #e0f2fe; }
.promote-threshold {
    padding: 0.6rem 0.7rem;
    margin-bottom: 0.8rem;
    border-radius: 8px;
    background: #fffbeb;
    border: 1px solid var(--warning-200);
    color: var(--warning-800);
    font-size: 0.78rem;
    line-height: 1.45;
}
.promote-warning {
    margin-top: 0.4rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    background: var(--danger-50);
    border: 1px solid #fecaca;
    color: var(--danger-700);
    font-size: 0.76rem;
    line-height: 1.4;
}
.promote-note {
    margin: 0.6rem 0;
    font-size: 0.75rem;
    color: var(--gray-500);
    line-height: 1.45;
}
.promote-confirm-q {
    padding: 0.8rem;
    border-radius: 8px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #0c4a6e;
    font-size: 0.9rem;
    text-align: center;
    line-height: 1.5;
}
.promote-secondary {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    background: #ffffff;
    color: var(--gray-500);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.promote-secondary:hover { background: var(--gray-50); }
.promote-reopen {
    display: block;
    margin-top: 0.7rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--info);
}
[data-theme="dark"] .task-contact-promote-btn {
    background: #0c2231;
    color: #7dd3fc;
    border-color: #075985;
}
[data-theme="dark"] .task-contact-promote-btn:hover { background: #113047; }
[data-theme="dark"] .promote-threshold { background: #3f2d0a; border-color: #78350f; color: #fcd34d; }
[data-theme="dark"] .promote-warning { background: #3b1113; border-color: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .promote-confirm-q { background: #0c2231; border-color: #075985; color: #bae6fd; }
[data-theme="dark"] .promote-secondary { background: var(--gray-800); border-color: var(--gray-700); color: var(--gray-300); }
[data-theme="dark"] .promote-note { color: var(--gray-400); }

/* === 🗑️ MÜŞTERİ KALDIRMA (Paket 24, 2026-08-08) === */
.crm-danger-zone {
    margin-top: 1.2rem;
    padding-top: 0.9rem;
    border-top: 1px dashed #fecaca;
}
.crm-danger-btn {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #ffffff;
    color: var(--danger-700);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.crm-danger-btn:hover { background: var(--danger-50); }
.crm-danger-hint {
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: var(--gray-400);
    text-align: center;
}
.purge-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.6rem;
    word-break: break-word;
}
.purge-inventory {
    padding: 0.7rem;
    border-radius: 8px;
    background: var(--danger-50);
    border: 1px solid #fecaca;
    font-size: 0.82rem;
    color: #7f1d1d;
    line-height: 1.7;
}
.purge-inventory b { color: var(--danger-700); }
.purge-sheet-note {
    margin: 0.7rem 0;
    font-size: 0.78rem;
    color: var(--gray-500);
    line-height: 1.5;
}
.purge-confirm-btn {
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.6rem;
    border: none;
    border-radius: 8px;
    background: var(--danger);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.purge-confirm-btn:hover:not(:disabled) { background: var(--danger-700); }
.purge-confirm-btn:disabled { background: var(--gray-200); color: var(--gray-400); cursor: not-allowed; }
.purge-restore {
    margin-top: 0.9rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--gray-200);
    font-size: 0.78rem;
    color: var(--gray-500);
    text-align: center;
}
.purge-restore-btn {
    display: block;
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.45rem;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    background: #f0fdf4;
    color: #166534;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
[data-theme="dark"] .crm-danger-btn { background: var(--gray-800); border-color: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .purge-name { color: var(--gray-200); }
[data-theme="dark"] .purge-inventory { background: #3b1113; border-color: #7f1d1d; color: #fecaca; }
[data-theme="dark"] .purge-inventory b { color: #fca5a5; }
[data-theme="dark"] .purge-sheet-note, [data-theme="dark"] .purge-restore { color: var(--gray-400); }
[data-theme="dark"] .purge-restore-btn { background: #0f2a19; border-color: #166534; color: #86efac; }

/* === 🌡️ TEMAS SICAKLIĞI + TEMAS DEFTERİ (Paket 26, 2026-08-08) === */
.task-sicaklik-row { align-items: flex-start; }
.task-sicaklik-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; flex: 1 1 auto; }
.sicaklik-chip {
    padding: 0.3rem 0.6rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 999px;
    background: #ffffff;
    color: var(--gray-500);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.sicaklik-chip:hover { border-color: var(--gray-300); }
.sicaklik-chip.selected[data-sicaklik=""]      { background: var(--gray-100); border-color: var(--gray-400); color: var(--gray-700); }
.sicaklik-chip.selected[data-sicaklik="SICAK"] { background: var(--danger-100); border-color: #ef4444; color: var(--danger-700); }
.sicaklik-chip.selected[data-sicaklik="ILIK"]  { background: var(--warning-100); border-color: #f59e0b; color: var(--warning-800); }
.sicaklik-chip.selected[data-sicaklik="SOGUK"] { background: #e0f2fe; border-color: var(--info); color: #075985; }

/* S12: Temas Defteri şeridi koyu bloktan BEYAZ PANELE (demo .panel) — açık temada içerikte en fazla bir koyu blok
   kuralı (TASARIM.md §11). Sıcaklık sayıları anlam etiketi (§5 .etiket), uyarı sayıları alarm renginde kalır —
   sinyal kaybolmaz. JS (temasDefteriSeridiYaz) ve tıklama/filtre akışı DEĞİŞMEDİ. */
#temas-defteri-serit {
    margin: 0 0 14px;
    padding: 12px 16px;
    border-radius: var(--yuvarlak);
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    box-shadow: var(--golge);
    color: var(--murekkep);
    cursor: pointer;
    transition: box-shadow 0.18s, border-color 0.18s;
}
#temas-defteri-serit:hover { border-color: var(--cizgi-koyu); box-shadow: var(--golge-yuksek); }
.tdefter-ust { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tdefter-baslik { font-weight: 600; font-size: 11px; letter-spacing: 0.08em; color: var(--soluk); }
.tdefter-toplam { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--murekkep); }
.tdefter-sayilar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; }
.tdefter-uyarilar { margin-top: 8px; font-size: 12.5px; color: var(--soluk); line-height: 1.6; }
.tdefter-uyari-vurgu { color: var(--alarm); font-weight: 600; }
.tdefter-ipucu { margin-top: 4px; font-size: 11.5px; color: var(--gray-400); }

/* Şeritteki sayaçlar filtre düğmesidir (Paket 26.1) */
.tdefter-tiklanir {
    cursor: pointer;
    padding: 1px 6px;
    border-radius: 6px;
    border: 1px solid transparent;
}
.tdefter-tiklanir:hover { background: var(--gray-50); border-color: var(--cizgi-koyu); }
/* Sıcaklık sayaçları = etiket (anlam rengi + zemini) */
.tdefter-sayilar .tdefter-tiklanir { padding: 2px 9px; font-weight: 600; background: var(--kagit); color: var(--soluk); }
.tdefter-sayilar .tdefter-tiklanir[data-tdefter-filtre="SICAK"] { background: var(--alarm-zemin); color: var(--alarm); }
.tdefter-sayilar .tdefter-tiklanir[data-tdefter-filtre="ILIK"]  { background: var(--uyari-zemin); color: var(--warning-800); }
.tdefter-sayilar .tdefter-tiklanir[data-tdefter-filtre="SOGUK"] { background: var(--kap-zemin); color: var(--kap); }
.tdefter-sayilar .tdefter-tiklanir:hover { border-color: var(--cizgi-koyu); }
[data-theme="dark"] #temas-defteri-serit { background: var(--card-bg); border-color: var(--koyu-cizgi); box-shadow: none; color: var(--koyu-yazi); }
[data-theme="dark"] .tdefter-toplam { color: var(--koyu-yazi); }
[data-theme="dark"] .tdefter-baslik,
[data-theme="dark"] .tdefter-uyarilar { color: var(--text-muted); }
[data-theme="dark"] .tdefter-uyari-vurgu { color: var(--alarm-acik); }
[data-theme="dark"] .tdefter-tiklanir:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--koyu-cizgi); }
[data-theme="dark"] .tdefter-sayilar .tdefter-tiklanir { background: rgba(255, 255, 255, 0.06); color: var(--text-muted); }
[data-theme="dark"] .tdefter-sayilar .tdefter-tiklanir[data-tdefter-filtre="SICAK"] { background: rgba(209, 72, 64, 0.18); color: var(--alarm-acik); }
[data-theme="dark"] .tdefter-sayilar .tdefter-tiklanir[data-tdefter-filtre="ILIK"]  { background: rgba(214, 154, 33, 0.16); color: var(--uyari-acik); }
[data-theme="dark"] .tdefter-sayilar .tdefter-tiklanir[data-tdefter-filtre="SOGUK"] { background: rgba(46, 134, 200, 0.18); color: var(--kap-acik); }

/* Liste başındaki filtre satırı */
.tdefter-filtre-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 4px 6px 10px;
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 1;
}
/* Paket A: arama + filtre TEK yapışkan blok. Grup başlıkları bunun ALTINA yapışır;
   bu bloğun yüksekliği JS'te ölçülüp --tdefter-ust-h değişkenine yazılır.
   ⚠️ SINIF ADI `tdefter-kabuk` OLMAK ZORUNDA: `tdefter-ust` adı ŞERİDİN başlık satırında
   (Satış Panosu'ndaki koyu kutu) zaten kullanılıyor — aynı adı verince şeridin başlığı
   beyaza boyanıp okunmaz olmuştu (2026-08-31'de yaşandı). */
.tdefter-kabuk {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #ffffff;
}
/* #preview-modal-list'in 10px üst boşluğu yapışkan bloğun ÜSTÜNDE kalıyor ve altından
   kayan satırlar oradan sırıtıyordu ("yukarıda sabit değil" şikayeti). Perde o bandı kapatır. */
.tdefter-kabuk::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -14px;
    height: 14px;
    background: inherit;
}
.tdefter-kabuk .tdefter-filtre-bar { position: static; }
[data-theme="dark"] .tdefter-kabuk { background: var(--gray-900); }

/* 🔎 Defter içi arama çubuğu */
.tdefter-arama-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px 8px;
}
.tdefter-arama-ikon { font-size: 0.85rem; opacity: 0.7; }
.tdefter-arama-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 10px;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: inherit;
    background: #ffffff;
    color: var(--gray-800);
}
.tdefter-arama-input:focus { outline: none; border-color: var(--info); }
.tdefter-arama-temizle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    background: #ffffff;
    color: var(--gray-500);
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    padding: 0;
}
.tdefter-arama-temizle:hover { border-color: var(--gray-300); color: var(--gray-800); }
[data-theme="dark"] .tdefter-arama-input { background: var(--gray-800); border-color: var(--gray-700); color: var(--gray-200); }
[data-theme="dark"] .tdefter-arama-temizle { background: var(--gray-800); border-color: var(--gray-700); color: var(--gray-300); }
.tdefter-filtre-chip {
    padding: 5px 10px;
    border: 1.5px solid var(--gray-200);
    border-radius: 999px;
    background: #ffffff;
    color: var(--gray-500);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.tdefter-filtre-chip:hover { border-color: var(--gray-300); }
.tdefter-filtre-chip.selected { background: var(--gray-900); border-color: var(--gray-900); color: #ffffff; }
.tdefter-filtre-chip b { font-weight: 700; }
[data-theme="dark"] .tdefter-filtre-bar { background: var(--gray-900); border-color: var(--gray-700); }
[data-theme="dark"] .tdefter-filtre-chip { background: var(--gray-800); border-color: var(--gray-700); color: var(--gray-300); }
[data-theme="dark"] .tdefter-filtre-chip.selected { background: #2e8b63; border-color: #2e8b63; color: #ffffff; }

/* Defter listesi (önizleme penceresi içinde) */
/* Paket A: grup başlığı KAYDIRIRKEN üstte asılı kalır — uzun listede hangi gruptasınız
   (sıcak mı, soğuk mu) her an görünür. top değeri arama+filtre bloğunun ölçülen yüksekliği. */
.tdefter-grup {
    position: sticky;
    top: var(--tdefter-ust-h, 46px);
    z-index: 2;
    margin: 16px 0 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gray-600);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    border-left: 4px solid var(--gray-300);
    border-radius: 4px 4px 0 0;
    padding: 6px 8px;
}
.tdefter-satir {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 6px 8px 10px;
    border-bottom: 1px solid var(--gray-100);
    border-left: 4px solid var(--gray-200); /* grup rengi — aşağıda sınıfa göre boyanır */
}
.tdefter-satir.soguk { opacity: 0.6; }

/* Grup renkleri: renk TEK BAŞINA ayırt edici değildir (renk körlüğü + güneş altında ekran),
   bu yüzden her satırda sıcaklık ikonu da durmaya devam eder. */
.tdefter-grup.tg-kontrol { border-left-color: var(--danger); background: var(--danger-50); color: #991b1b; }
.tdefter-satir.tg-kontrol { border-left-color: var(--danger); }
.tdefter-grup.tg-ileri   { border-left-color: var(--brand-600); background: #f4faf7; color: var(--brand-900); }
.tdefter-satir.tg-ileri  { border-left-color: var(--brand-600); }
.tdefter-grup.tg-sicak   { border-left-color: #ea580c; background: #fff7ed; color: #9a3412; }
.tdefter-satir.tg-sicak  { border-left-color: #ea580c; }
.tdefter-grup.tg-ilik    { border-left-color: #eab308; background: #fefce8; color: #854d0e; }
.tdefter-satir.tg-ilik   { border-left-color: #eab308; }
.tdefter-grup.tg-bos     { border-left-color: var(--gray-400); background: var(--gray-50); color: var(--gray-600); }
.tdefter-satir.tg-bos    { border-left-color: var(--gray-300); }
.tdefter-grup.tg-soguk   { border-left-color: var(--info); background: #f0f9ff; color: #075985; }
.tdefter-satir.tg-soguk  { border-left-color: var(--info); }
[data-theme="dark"] .tdefter-grup { background: var(--gray-800); }
[data-theme="dark"] .tdefter-grup.tg-kontrol { background: #3f1d1d; color: #fca5a5; }
[data-theme="dark"] .tdefter-grup.tg-ileri   { background: #0b241c; color: #c3edd6; }
[data-theme="dark"] .tdefter-grup.tg-sicak   { background: #431407; color: #fdba74; }
[data-theme="dark"] .tdefter-grup.tg-ilik    { background: #422006; color: var(--warning-200); }
[data-theme="dark"] .tdefter-grup.tg-bos     { background: var(--gray-800); color: var(--gray-300); }
[data-theme="dark"] .tdefter-grup.tg-soguk   { background: #0c4a6e; color: #bae6fd; }
.tdefter-ad {
    flex: 1 1 180px;
    min-width: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gray-800);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}
.tdefter-ad:hover { text-decoration: underline; }
.tdefter-meta { font-size: 0.73rem; color: var(--gray-500); white-space: nowrap; }
.tdefter-meta.bayat { color: var(--danger-700); font-weight: 600; }
.tdefter-mini { display: flex; gap: 3px; }
.tdefter-mini button {
    width: 26px; height: 26px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    padding: 0;
}
.tdefter-mini button.selected { border-color: var(--gray-900); background: var(--gray-100); }
.tdefter-tel { font-size: 0.78rem; color: var(--info); text-decoration: none; white-space: nowrap; }
/* 🎯 Kaynak rozeti (Paket B) — yalnız ikon, adı title'da; satırı şişirmesin */
.tdefter-kaynak { font-size: 0.85rem; opacity: 0.75; cursor: help; }
/* ✅ Kaydı kapat (Paket B) — temaslar matriste olmadığı için kapatmanın tek yolu */
.tdefter-kapat {
    width: 26px; height: 26px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    padding: 0;
}
.tdefter-kapat:hover { border-color: #16a34a; background: #f0fdf4; }
[data-theme="dark"] .tdefter-kapat { background: var(--gray-800); border-color: var(--gray-700); }
/* Kapanış nedenleri 2x2 dizilsin — 4 seçenek tek satırda okunmaz hale geliyordu */
#kapanis-secenekler .acmadi-secenek { flex: 1 1 45%; text-align: left; }
[data-theme="dark"] .sicaklik-chip { background: var(--gray-800); border-color: var(--gray-700); color: var(--gray-300); }
[data-theme="dark"] .tdefter-grup { color: var(--gray-300); border-color: var(--gray-700); }
[data-theme="dark"] .tdefter-satir { border-color: var(--gray-800); }
[data-theme="dark"] .tdefter-ad { color: var(--gray-200); }
[data-theme="dark"] .tdefter-mini button { background: var(--gray-800); border-color: var(--gray-700); color: var(--gray-200); }
[data-theme="dark"] .tdefter-mini button.selected { background: var(--gray-700); border-color: var(--gray-400); }

/* ============================================================
   S04 (2026-09-16) — Temas Defteri: üst menü düğmesi + birleşik filtre kabuğu
   Kabuk sınıfı yine `tdefter-kabuk` (⚠️ `tdefter-ust` YASAK — şeridin başlık satırı).
   ============================================================ */
/* 📞 Temaslar — metinli düğme; .icon-btn'nin 40px kare kalıbına sıkıştırılmaz */
/* S12: .icon-btn ile aynı tek tip (beyaz + ince çizgi), metinli */
.temas-ac-btn {
    height: 38px;
    padding: 0 12px;
    border-radius: 9px;
    border: 1px solid var(--cizgi-koyu);
    background: var(--yuzey);
    color: var(--murekkep);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.13s, border-color 0.13s;
}
.temas-ac-btn:hover { background: var(--gray-50); border-color: var(--mvd-koyu); }
.temas-ac-btn:focus-visible { outline: 2px solid var(--mvd-koyu); outline-offset: 2px; }
[data-theme="dark"] .temas-ac-btn { background: rgba(255, 255, 255, 0.04); border-color: var(--koyu-cizgi); color: var(--koyu-yazi); }
[data-theme="dark"] .temas-ac-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(107, 200, 148, 0.35); }
@media (max-width: 768px) {
    .header-actions { flex-wrap: wrap; }   /* metinli düğme dar ekranda alt satıra sarar, taşmaz */
}

/* Görünüm düğmeleri: Açık · Kapanmış (terfi dahil) · Müşteriye dönüşmüş — tek seçimli */
.tdefter-gorunum-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 6px 6px;
}
.tdefter-gorunum-btn {
    padding: 5px 10px;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    background: #ffffff;
    color: var(--gray-600);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.tdefter-gorunum-btn:hover { border-color: var(--gray-300); }
.tdefter-gorunum-btn.selected { background: var(--brand-600, #16a34a); border-color: var(--brand-600, #16a34a); color: #ffffff; }
.tdefter-gorunum-btn:focus-visible,
.tdefter-filtre-chip:focus-visible,
.tdefter-temizle-btn:focus-visible,
.tdefter-etkin-cip button:focus-visible { outline: 2px solid var(--info, #0ea5e9); outline-offset: 1px; }
[data-theme="dark"] .tdefter-gorunum-btn { background: var(--gray-800); border-color: var(--gray-700); color: var(--gray-300); }
[data-theme="dark"] .tdefter-gorunum-btn.selected { background: #2e8b63; border-color: #2e8b63; color: #ffffff; }

/* Açılır kutular: takip · ilçe · kaynak (etiketli, dar ekranda sarar) */
.tdefter-secim-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 6px 6px 4px;
    border-bottom: 1px solid var(--gray-200);
}
.tdefter-secim {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--gray-500);
    flex: 1 1 140px;
    min-width: 0;
}
.tdefter-secim select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    padding: 5px 6px;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    background: #ffffff;
    color: var(--gray-800);
    font-size: 0.78rem;
    font-family: inherit;
}
.tdefter-secim select:disabled { opacity: 0.55; cursor: not-allowed; }
.tdefter-secim-ipucu { flex: 1 1 100%; font-weight: 400; font-size: 0.68rem; color: var(--gray-400); }
.tdefter-secim-ipucu:empty { display: none; }
[data-theme="dark"] .tdefter-secim-bar { border-color: var(--gray-700); }
[data-theme="dark"] .tdefter-secim select { background: var(--gray-800); border-color: var(--gray-700); color: var(--gray-200); }

/* Özet: "N sonuç / M açık kayıt" + etkin koşul çipleri + Filtreleri temizle */
.tdefter-ozet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 6px 8px;
    font-size: 0.74rem;
    color: var(--gray-600);
    border-bottom: 1px solid var(--gray-200);
}
.tdefter-ozet-sayi b { font-size: 0.86rem; color: var(--gray-900); }
.tdefter-etkin { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; min-width: 0; max-width: 100%; }
.tdefter-etkin-bos { color: var(--gray-400); }
.tdefter-etkin-cip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 8px;
    border-radius: 999px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    color: var(--gray-800);
    font-weight: 600;
    /* R2 (16.09): tek uzun çip listeyi genişletmesin — kapsayıcıyla sınırlı, metin gerekirse KIRILIR,
       ✕ düğmesi küçülmez ve her zaman erişilebilir kalır */
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.tdefter-etkin-metin {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.3;
}
.tdefter-etkin-cip button { flex: 0 0 auto; }
.tdefter-etkin-cip button {
    width: 18px; height: 18px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--gray-500);
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1;
    padding: 0;
}
.tdefter-etkin-cip button:hover { background: var(--gray-300); color: var(--gray-900); }
.tdefter-temizle-btn {
    margin-left: auto;
    padding: 3px 9px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: #ffffff;
    color: var(--gray-700);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.tdefter-temizle-btn:hover { border-color: var(--danger, #dc2626); color: var(--danger-700, #b91c1c); }
[data-theme="dark"] .tdefter-ozet { color: var(--gray-300); border-color: var(--gray-700); }
[data-theme="dark"] .tdefter-ozet-sayi b { color: #ffffff; }
[data-theme="dark"] .tdefter-etkin-cip { background: var(--gray-800); border-color: var(--gray-700); color: var(--gray-200); }
[data-theme="dark"] .tdefter-etkin-cip button { color: var(--gray-400); }
[data-theme="dark"] .tdefter-temizle-btn { background: var(--gray-800); border-color: var(--gray-600); color: var(--gray-200); }

/* Satırdaki ilçe · kaynak açıklaması (filtre sonucunu gözle doğrulamak için) — sarabilir */
.tdefter-etiketler { font-size: 0.72rem; color: var(--gray-500); }
/* Kapalı satırın metası uzundur (neden · terfi notu · tarih) — sarar, yatay kaydırma çıkarmaz */
.tdefter-satir.tg-kapali .tdefter-meta, .tdefter-satir.tg-terfi .tdefter-meta { white-space: normal; }
.tdefter-bos { padding: 14px; color: #94a3b8; font-size: 0.85rem; line-height: 1.5; }

/* Kapalı görünüm grupları: takip rengi yok, nötr/yeşil kenar */
.tdefter-grup.tg-kapali  { border-left-color: var(--gray-500); background: var(--gray-50); color: var(--gray-700); }
.tdefter-satir.tg-kapali { border-left-color: var(--gray-400); }
.tdefter-grup.tg-terfi   { border-left-color: #16a34a; background: #f0fdf4; color: #166534; }
.tdefter-satir.tg-terfi  { border-left-color: #16a34a; }
.tdefter-grup.tg-diger   { border-left-color: var(--gray-400); background: var(--gray-50); color: var(--gray-600); }
.tdefter-satir.tg-diger  { border-left-color: var(--gray-300); }
[data-theme="dark"] .tdefter-grup.tg-kapali { background: var(--gray-800); color: var(--gray-300); }
[data-theme="dark"] .tdefter-grup.tg-terfi  { background: #0b241c; color: #c3edd6; }
[data-theme="dark"] .tdefter-grup.tg-diger  { background: var(--gray-800); color: var(--gray-300); }
/* Dar ekranda satır metaları sarabilsin (ilçe+kaynak+süre tek satıra sığmaz) */
@media (max-width: 480px) {
    .tdefter-meta { white-space: normal; }
    /* Yapışkan kabuk telefonda ekranın büyük kısmını yemesin: kontroller sıkılaştırılır (davranış aynı) */
    .tdefter-gorunum-btn, .tdefter-kabuk .tdefter-filtre-chip { padding: 3px 7px; font-size: 0.7rem; }
    .tdefter-gorunum-bar { gap: 3px; padding-bottom: 3px; }
    .tdefter-kabuk .tdefter-filtre-bar { gap: 3px; padding: 2px 6px 6px; }
    .tdefter-secim-bar { gap: 3px 8px; padding: 4px 6px 2px; }
    .tdefter-secim { flex: 1 1 100%; font-size: 0.7rem; }
    .tdefter-secim select { padding: 3px 5px; font-size: 0.74rem; }
    .tdefter-ozet { padding: 4px 6px 6px; font-size: 0.7rem; }
}

.task-label-chip {
    padding: 0.4rem 0.7rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 999px;
    background: #ffffff;
    color: var(--gray-500);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    user-select: none;
}
.task-label-chip:hover {
    border-color: var(--gray-400);
    background: var(--gray-50);
}
.task-label-chip.selected {
    background: #22a06b;
    border-color: #22a06b;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(139,92,246,0.3);
}

/* Tedarikçi chip'leri — her bayinin kendi rengi, seçili olunca dolu görünür */
.task-supplier-chip {
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.15s;
    user-select: none;
    opacity: 0.65;
}
.task-supplier-chip:hover {
    opacity: 0.9;
}
.task-supplier-chip.selected {
    opacity: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}
.task-supplier-chip[data-supplier="YETAS"].selected { background:#f97316 !important; color:#fff !important; border-color:#f97316 !important; }
.task-supplier-chip[data-supplier="KEY"].selected   { background:#3b82f6 !important; color:#fff !important; border-color:#3b82f6 !important; }
.task-supplier-chip[data-supplier="REGES"].selected { background:#10b981 !important; color:#fff !important; border-color:#10b981 !important; }
.task-supplier-chip[data-supplier="AKSA"].selected  { background:#ef4444 !important; color:#fff !important; border-color:#ef4444 !important; }

/* ============================================ */
/* === YENİ: ÖZET / UYARI PANELİ === */
/* ============================================ */
.task-summary-panel {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    margin: 0.5rem 0 1rem;
}
.task-summary-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    background: #ffffff;
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    text-align: left;
    outline: none;
}
.task-summary-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
.task-summary-card .summary-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}
.task-summary-card .summary-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.task-summary-card .summary-label {
    font-size: 0.72rem;
    color: var(--gray-500);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.task-summary-card .summary-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1.1;
}
.task-summary-card.summary-overdue.active,
.task-summary-card.summary-overdue:hover { border-color: #ef4444; }
.task-summary-card.summary-thisweek.active,
.task-summary-card.summary-thisweek:hover { border-color: #f59e0b; }
.task-summary-card.summary-active.active,
.task-summary-card.summary-active:hover { border-color: #3b82f6; }
.task-summary-card.summary-done.active,
.task-summary-card.summary-done:hover { border-color: #10b981; }
.task-summary-card.active {
    background: var(--gray-50);
    box-shadow: 0 0 0 2px rgba(139,92,246,0.08);
}

/* ============================================ */
/* === YENİ: GÖREV ARAMA KUTUSU === */
/* ============================================ */
.task-search-row {
    margin: 0 0 0.6rem 0;
}
.task-search-wrap {
    display: flex;
    align-items: center;
    background: var(--card-bg, #fff);
    border: 1.5px solid var(--gray-300);
    border-radius: 10px;
    padding: 0 0.75rem;
    gap: 0.5rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.task-search-wrap:focus-within {
    border-color: #22a06b;
    box-shadow: 0 0 0 3px rgba(34, 160, 107, 0.12);
}
.task-search-icon {
    font-size: 0.95rem;
    color: var(--gray-400);
    flex-shrink: 0;
}
.task-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.55rem 0;
    font-size: 0.9rem;
    color: var(--gray-900);
    outline: none;
}
.task-search-input::placeholder {
    color: var(--gray-400);
}
.task-search-clear-btn {
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
    color: var(--gray-500);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.15s;
}
.task-search-clear-btn:hover {
    background: var(--gray-200);
    color: var(--gray-800);
}

/* Dark mode */
[data-theme="dark"] .task-search-wrap {
    background: var(--gray-800);
    border-color: var(--gray-700);
}
[data-theme="dark"] .task-search-input {
    color: var(--gray-100);
}
[data-theme="dark"] .task-search-clear-btn {
    background: var(--gray-700);
    color: var(--gray-400);
}
[data-theme="dark"] .task-search-clear-btn:hover {
    background: var(--gray-600);
}

/* === YENİ: ETİKET FİLTRE BAR === */
/* ============================================ */
.task-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.8rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    margin-bottom: 1rem;
}
.filter-bar-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.3rem;
}
.task-filter-chip {
    padding: 0.35rem 0.7rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 999px;
    background: #ffffff;
    color: var(--gray-500);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.task-filter-chip:hover {
    border-color: var(--gray-400);
    background: var(--gray-100);
}
.task-filter-chip.active {
    background: var(--gray-800);
    border-color: var(--gray-800);
    color: #ffffff;
}

/* Tedarikçi bayi filtre chip'leri — popover chip'leriyle aynı renk kodlaması */
.task-supplier-filter-chip {
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1.5px solid var(--gray-200);
    background: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    color: var(--gray-500);
    opacity: 0.7;
}
.task-supplier-filter-chip:hover { opacity: 0.95; }
.task-supplier-filter-chip[data-supplier-filter="YETAS"].active { background:#f97316; border-color:#f97316; color:#fff; opacity:1; }
.task-supplier-filter-chip[data-supplier-filter="KEY"].active   { background:#3b82f6; border-color:#3b82f6; color:#fff; opacity:1; }
.task-supplier-filter-chip[data-supplier-filter="REGES"].active { background:#10b981; border-color:#10b981; color:#fff; opacity:1; }
.task-supplier-filter-chip[data-supplier-filter="AKSA"].active  { background:#ef4444; border-color:#ef4444; color:#fff; opacity:1; }
.task-filter-clear {
    margin-left: auto;
    padding: 0.35rem 0.7rem;
    border: 1px solid #fca5a5;
    background: #fff1f2;
    color: var(--danger-700);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.task-filter-clear:hover {
    background: var(--danger-100);
}

/* 📞 Paket A: temas kayıtlarını matriste göster/gizle düğmesi.
   Etiket çiplerinden GÖRSEL OLARAK AYRI durur — o bir süzgeç değil, görünüm anahtarıdır. */
.task-temas-toggle {
    margin-left: auto;
    padding: 0.35rem 0.7rem;
    border: 1px dashed #7dd3fc;
    background: #f0f9ff;
    color: #0369a1;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.task-temas-toggle:hover { background: #e0f2fe; }
.task-temas-toggle.active {
    border-style: solid;
    background: var(--info);
    border-color: var(--info);
    color: #ffffff;
}
/* Temizle düğmesi de varsa ikisi yan yana dursun (ikisinde de margin-left:auto var) */
.task-temas-toggle + .task-filter-clear { margin-left: 6px; }
[data-theme="dark"] .task-temas-toggle { background: #0c4a6e; border-color: #0369a1; color: #bae6fd; }
[data-theme="dark"] .task-temas-toggle.active { background: var(--info); color: #ffffff; }

/* ============================================ */
/* === YENİ: GÖREV KARTI META (TARİH + ETİKET) === */
/* ============================================ */
.eq-task-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.4rem;
}
.eq-task-due {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.5rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--gray-100);
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
    white-space: nowrap;
}
.eq-task-due.overdue {
    background: var(--danger-100);
    color: var(--danger-700);
    border-color: #fecaca;
}
.eq-task-due.today {
    background: var(--warning-100);
    color: var(--warning-800);
    border-color: var(--warning-200);
}
.eq-task-due.soon {
    background: #fef9c3;
    color: #854d0e;
    border-color: #fef08a;
}
.eq-task-due.future {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}
.eq-task-labels {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.eq-task-label {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

/* === Gecikmiş / Bugün renklendirme — kart kenarı === */
.eq-task-card.overdue {
    border-left: 3px solid #ef4444;
    background: linear-gradient(to right, rgba(239,68,68,0.06), transparent 30%);
}
.eq-task-card.due-today {
    border-left: 3px solid #f59e0b;
    background: linear-gradient(to right, rgba(245,158,11,0.06), transparent 30%);
}

/* ============================================ */
/* === DARK MODE — Yeni öğeler === */
/* ============================================ */
[data-theme="dark"] .task-label-chip {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--gray-300);
}
[data-theme="dark"] .task-label-chip:hover {
    background: var(--gray-700);
    border-color: var(--gray-600);
}
[data-theme="dark"] .task-label-chip.selected {
    background: #22a06b;
    border-color: #22a06b;
    color: #ffffff;
}
[data-theme="dark"] .task-summary-card {
    background: var(--gray-800);
    border-color: var(--gray-700);
}
[data-theme="dark"] .task-summary-card:hover {
    background: #273449;
}
[data-theme="dark"] .task-summary-card.active {
    background: #273449;
}
[data-theme="dark"] .task-summary-card .summary-label {
    color: var(--gray-400);
}
[data-theme="dark"] .task-summary-card .summary-value {
    color: var(--gray-200);
}
[data-theme="dark"] .task-filter-bar {
    background: var(--gray-800);
    border-color: var(--gray-700);
}
[data-theme="dark"] .filter-bar-label {
    color: var(--gray-400);
}
[data-theme="dark"] .task-filter-chip {
    background: var(--gray-900);
    border-color: var(--gray-700);
    color: var(--gray-300);
}
[data-theme="dark"] .task-filter-chip:hover {
    background: var(--gray-800);
}
[data-theme="dark"] .task-filter-chip.active {
    background: var(--gray-200);
    border-color: var(--gray-200);
    color: var(--gray-900);
}
[data-theme="dark"] .task-filter-clear {
    background: rgba(239,68,68,0.15);
    border-color: #7f1d1d;
    color: #fca5a5;
}
[data-theme="dark"] .eq-task-due {
    background: var(--gray-800);
    color: var(--gray-300);
    border-color: var(--gray-700);
}
[data-theme="dark"] .eq-task-due.overdue {
    background: rgba(239,68,68,0.18);
    color: #fca5a5;
    border-color: #7f1d1d;
}
[data-theme="dark"] .eq-task-due.today {
    background: rgba(245,158,11,0.2);
    color: #fcd34d;
    border-color: #78350f;
}
[data-theme="dark"] .eq-task-due.soon {
    background: rgba(234,179,8,0.18);
    color: var(--warning-200);
    border-color: #713f12;
}
[data-theme="dark"] .eq-task-due.future {
    background: rgba(16,185,129,0.15);
    color: #6ee7b7;
    border-color: #064e3b;
}

/* Mobil özet/filtre düzenlemesi */
@media (max-width: 768px) {
    .task-summary-panel {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    .task-summary-card {
        padding: 0.55rem 0.65rem;
    }
    .task-summary-card .summary-icon {
        font-size: 1.2rem;
    }
    .task-summary-card .summary-value {
        font-size: 1.1rem;
    }
    .task-filter-bar {
        padding: 0.5rem 0.6rem;
    }
    .filter-bar-label {
        display: none;
    }
    .task-filter-chip {
        font-size: 0.75rem;
        padding: 0.3rem 0.55rem;
    }
}

/* ========================== */
/* === RESPONSIVE MATRIS === */
/* ========================== */

@media (max-width: 768px) {
    .eisenhower-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        min-height: auto;
    }

    .eisenhower-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .eisenhower-header .btn-primary {
        width: 100%;
        justify-content: center;
    }

    .eq-content {
        min-height: 80px;
    }

    .task-popover {
        width: 95vw;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .eisenhower-grid {
        grid-template-columns: 1fr 1fr;
        min-height: auto;
    }
}

/* ============================================================
   BUGÜNÜN MASASI — Günlük takip paneli
   ============================================================ */

/* S10 (2026-09-23) — PİLOT EKRAN: MVD görsel diline taşındı (docs/TASARIM.md §5 "durum satırı").
   Sabit renk YOK (karanlık temadaki saydam anlam zeminleri hariç — TASARIM.md §7) — yalnız değişken.
   Satır: beyaz yüzey + 1 px çizgi + 4 px ANLAM kenarı + 36 px ikon kutusu (anlam zemini).
   Grup anlamları: gecikmiş = alarm · bugün = uyari · kontrol (beklemede) = kap · yakında = kap · eski birikim = cizgi-koyu.
   JS / sınıf adları / tıklama akışı DEĞİŞMEDİ. */

/* Köşedeki sürekli görünür rozet */
#today-board-badge {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 9998;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    background: linear-gradient(135deg, var(--mvd-koyu) 0%, var(--mvd-derin) 100%);
    color: var(--yuzey);
    border: none;
    border-radius: 99px;
    box-shadow: 0 4px 14px rgba(27, 110, 72, 0.26);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
#today-board-badge:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: var(--golge-yuksek);
}
#today-board-badge .today-badge-icon { font-size: 1.1rem; }
#today-board-badge .today-badge-count {
    background: var(--yuzey);
    color: var(--mvd-derin);
    border-radius: 99px;
    padding: 1px 8px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
}
#today-board-badge.has-overdue {
    /* 2026-08-31: düğme marka renginde kalır, aciliyeti yalnız kırmızı sayaç ve ince halka anlatır. */
    background: linear-gradient(135deg, var(--koyu-2) 0%, var(--koyu) 100%);
    box-shadow: 0 0 0 2px var(--alarm), 0 6px 18px rgba(14, 31, 24, 0.35);
}
#today-board-badge.has-overdue .today-badge-count { color: var(--alarm); }

/* Tam ekran overlay */
.today-board-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14, 31, 24, 0.55);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: today-fade-in 0.18s ease-out;
}
@keyframes today-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.today-board-panel {
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    width: min(820px, 100%);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(14, 31, 24, 0.25);
    overflow: hidden;
    animation: today-pop-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes today-pop-in {
    from { transform: scale(0.96) translateY(10px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

/* Başlık: demonun koyu şeridi (giriş ekranı sol paneli) — koyu yeşil gradyan + logo yeşili parıltı */
.today-board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: radial-gradient(600px 220px at 10% 0%, rgba(107, 200, 148, 0.16), transparent 62%),
                linear-gradient(160deg, var(--koyu) 0%, var(--koyu-2) 60%, var(--koyu) 100%);
    border-bottom: 1px solid var(--koyu-cizgi);
}
.today-board-header h2 {
    margin: 0;
    color: var(--yuzey);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.today-board-subtitle {
    color: var(--koyu-soluk);
    font-size: 12.5px;
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}
.today-board-close-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--koyu-cizgi);
    color: var(--koyu-metin);
    width: 36px;
    height: 36px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.13s, color 0.13s;
}
.today-board-close-btn:hover { background: rgba(255, 255, 255, 0.12); color: var(--yuzey); }

.today-board-body {
    overflow-y: auto;
    padding: 16px 20px;
    flex: 1;
}

.today-board-empty {
    text-align: center;
    padding: 38px 16px;
    color: var(--soluk);
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge);
}
.today-board-empty-icon { font-size: 2.6rem; margin-bottom: 8px; }
.today-board-empty-baslik { font-size: 15.5px; font-weight: 600; color: var(--murekkep); margin-bottom: 6px; }

/* Grup başlığı (Bugün / Gecikmiş / Kontrol / Yakında / Eski birikim) */
.today-group { margin-bottom: 20px; }
.today-group:last-child { margin-bottom: 0; }
.today-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--murekkep);
    margin-bottom: 8px;
    padding: 0 2px 8px;
    border-bottom: 1px solid var(--cizgi);
}
/* Grup başlığında renk yalnız SAYAÇ rozetinde (anlam rengi + zemini); başlık metni mürekkep */
.today-group-count {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--kagit);
    color: var(--soluk);
}
.today-group.group-today .today-group-count   { background: var(--uyari-zemin); color: var(--warning-800); }
.today-group.group-overdue .today-group-count { background: var(--alarm-zemin); color: var(--alarm); }
.today-group.group-kontrol .today-group-count,
.today-group.group-soon .today-group-count    { background: var(--kap-zemin); color: var(--kap); }

/* S09: eski birikim katlı (<details>) — dikkat çekmesin */
.today-group.group-birikim .today-group-title { color: var(--soluk); cursor: pointer; list-style: none; }
.today-group.group-birikim .today-group-title::-webkit-details-marker { display: none; }
.today-group.group-birikim .today-group-title::before { content: '▸'; font-size: 12px; }
.today-group.group-birikim[open] .today-group-title::before { content: '▾'; }
.today-birikim-ipucu { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--gray-400); }

/* Alt kategori başlığı (Aramalar / Kargo / Teklif vs.) — küçük etiket: büyük harf + geniş aralık serbest (§3) */
.today-cat-title {
    font-size: 11px;
    color: var(--soluk);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 12px 2px 6px;
}

/* Tek bir iş satırı — demo .tesis-satir / .uyari-satir kalıbı */
.today-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-left: 4px solid var(--cizgi-koyu);
    border-radius: 10px;
    margin-bottom: 7px;
    cursor: pointer;
    box-shadow: var(--golge);
    transition: background 0.13s, border-color 0.13s, box-shadow 0.13s;
}
.today-item:hover {
    background: var(--gray-50);
    border-color: var(--cizgi-koyu);
    box-shadow: var(--golge-yuksek);
}
.today-item.is-today   { border-left-color: var(--uyari); }
.today-item.is-overdue { border-left-color: var(--alarm); }
.today-item.is-kontrol,
.today-item.is-soon    { border-left-color: var(--kap); }
.today-item.is-birikim { border-left-color: var(--cizgi-koyu); opacity: 0.85; }

/* 36 px ikon kutusu — anlam zemini (emoji kalır, TASARIM.md §6) */
.today-item-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 17px;
    background: var(--kagit);
}
.today-item.is-today .today-item-icon   { background: var(--uyari-zemin); }
.today-item.is-overdue .today-item-icon { background: var(--alarm-zemin); }
.today-item.is-kontrol .today-item-icon,
.today-item.is-soon .today-item-icon    { background: var(--kap-zemin); }

.today-item-body { flex: 1; min-width: 0; }
.today-item-title {
    font-weight: 600;
    color: var(--murekkep);
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.today-item-sub {
    font-size: 12.5px;
    color: var(--soluk);
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
/* Etiket — demo .etiket: 11.5 px / 600 / 6 px köşe / anlam rengi + zemini */
.today-item-sub .pill {
    background: var(--kagit);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--soluk);
}
.today-item-sub .pill.overdue     { background: var(--alarm-zemin); color: var(--alarm); }
.today-item-sub .pill.today       { background: var(--uyari-zemin); color: var(--warning-800); }
.today-item-sub .pill.source-task { background: var(--aktif-zemin); color: var(--mvd-derin); }
.today-item-sub .pill.source-card { background: var(--kap-zemin); color: var(--kap); }

.today-item-arrow {
    color: var(--gray-400);
    font-size: 18px;
    flex-shrink: 0;
}
.today-item:hover .today-item-arrow { color: var(--mvd-koyu); }

.today-board-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid var(--cizgi);
    background: var(--yuzey);
    gap: 16px;
}
.today-board-tip { font-size: 12.5px; color: var(--soluk); }

/* Karanlık tema (TASARIM.md §7) — yüzey koyu-2, anlam zeminleri saydam */
body[data-theme="dark"] .today-board-panel { background: var(--koyu); border-color: var(--koyu-cizgi); color: var(--text-main); }
body[data-theme="dark"] .today-group-title { color: var(--text-main); border-color: var(--koyu-cizgi); }
body[data-theme="dark"] .today-group.group-birikim .today-group-title { color: var(--text-muted); }
body[data-theme="dark"] .today-group-count { background: rgba(255, 255, 255, 0.06); color: var(--text-muted); }
body[data-theme="dark"] .today-group.group-today .today-group-count   { background: rgba(214, 154, 33, 0.16); color: var(--uyari-acik); }
body[data-theme="dark"] .today-group.group-overdue .today-group-count { background: rgba(209, 72, 64, 0.18); color: var(--alarm-acik); }
body[data-theme="dark"] .today-group.group-kontrol .today-group-count,
body[data-theme="dark"] .today-group.group-soon .today-group-count    { background: rgba(46, 134, 200, 0.18); color: var(--kap-acik); }
body[data-theme="dark"] .today-cat-title { color: var(--text-muted); }
body[data-theme="dark"] .today-item { background: var(--koyu-2); border-color: var(--koyu-cizgi); box-shadow: none; }
body[data-theme="dark"] .today-item.is-today   { border-left-color: var(--uyari); }
body[data-theme="dark"] .today-item.is-overdue { border-left-color: var(--alarm); }
body[data-theme="dark"] .today-item.is-kontrol,
body[data-theme="dark"] .today-item.is-soon    { border-left-color: var(--kap); }
body[data-theme="dark"] .today-item.is-birikim { border-left-color: var(--koyu-3); }
body[data-theme="dark"] .today-item:hover { background: var(--koyu-3); border-color: rgba(107, 200, 148, 0.35); }
body[data-theme="dark"] .today-item-title { color: var(--text-main); }
body[data-theme="dark"] .today-item-icon { background: rgba(255, 255, 255, 0.06); }
body[data-theme="dark"] .today-item.is-today .today-item-icon   { background: rgba(214, 154, 33, 0.16); }
body[data-theme="dark"] .today-item.is-overdue .today-item-icon { background: rgba(209, 72, 64, 0.18); }
body[data-theme="dark"] .today-item.is-kontrol .today-item-icon,
body[data-theme="dark"] .today-item.is-soon .today-item-icon    { background: rgba(46, 134, 200, 0.18); }
body[data-theme="dark"] .today-item-sub .pill { background: rgba(255, 255, 255, 0.06); color: var(--text-muted); }
body[data-theme="dark"] .today-item-sub .pill.overdue     { background: rgba(209, 72, 64, 0.18); color: var(--alarm-acik); }
body[data-theme="dark"] .today-item-sub .pill.today       { background: rgba(214, 154, 33, 0.16); color: var(--uyari-acik); }
body[data-theme="dark"] .today-item-sub .pill.source-task { background: rgba(107, 200, 148, 0.14); color: var(--mvd); }
body[data-theme="dark"] .today-item-sub .pill.source-card { background: rgba(46, 134, 200, 0.18); color: var(--kap-acik); }
body[data-theme="dark"] .today-board-empty { background: var(--koyu-2); border-color: var(--koyu-cizgi); box-shadow: none; }
body[data-theme="dark"] .today-board-empty-baslik { color: var(--text-main); }
body[data-theme="dark"] .today-board-footer { background: var(--koyu-2); border-color: var(--koyu-cizgi); }

/* Mobil */
@media (max-width: 600px) {
    .today-board-panel { max-height: 100vh; border-radius: 0; border: none; }
    .today-board-overlay { padding: 0; }
    .today-board-body { padding: 14px 12px; }
    .today-board-header { padding: 14px 16px; }
    #today-board-badge {
        bottom: 12px;
        right: 12px;
        padding: 8px 14px;
        font-size: 13.5px;
    }
    #today-board-badge .today-badge-label { display: none; }
}

/* ============================================
   SORUMLU KİŞİ (ASSIGNEE) — rozetler, filtre, yönetim penceresi
   ============================================ */

/* "Kişileri Yönet" linki (filtre çubuğu + popover) */
.manage-assignees-link {
    background: #eef2ff;
    border: 1px dashed #a8e3c4;
    color: var(--brand-800);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.manage-assignees-link:hover {
    background: #e9f5ef;
    border-color: #a5b4fc;
}

/* Popover içindeki kişi seçim rozetleri */
.task-assignee-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--gray-300);
    background: var(--gray-50);
    color: var(--gray-600);
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.task-assignee-chip:hover { border-color: var(--gray-400); }
.task-assignee-chip.selected {
    background: var(--brand-800);
    border-color: var(--brand-800);
    color: #ffffff;
}
.task-assignee-chip .assignee-supplier-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.task-assignee-group-label {
    width: 100%;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gray-400);
    margin: 6px 0 2px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.task-assignee-empty-hint {
    font-size: 0.8rem;
    color: var(--gray-400);
    font-style: italic;
}

/* Filtre çubuğundaki kişi rozetleri */
.task-assignee-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--gray-200);
    background: #ffffff;
    color: var(--gray-600);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.task-assignee-filter-chip:hover { border-color: #a5b4fc; }
.task-assignee-filter-chip.active {
    background: var(--brand-800);
    border-color: var(--brand-800);
    color: #ffffff;
}
.task-assignee-filter-chip .assignee-supplier-dot { width: 8px; height: 8px; }

/* Görev kartı üzerindeki kişi rozeti */
.eq-task-assignee {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eef2ff;
    color: var(--brand-800);
    border: 1px solid #a8e3c4;
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 0.7rem;
    font-weight: 700;
}
.eq-task-assignee .assignee-supplier-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ---- Kişileri Yönet penceresi ---- */
.assignee-manager-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14, 31, 24, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000;
    padding: 16px;
}
.assignee-manager-panel {
    background: #ffffff;
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    overflow: hidden;
}
.assignee-manager-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 10px;
}
.assignee-manager-header h2 { margin: 0; font-size: 1.2rem; }
.assignee-manager-close-btn {
    background: var(--gray-100);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    color: var(--gray-600);
}
.assignee-manager-close-btn:hover { background: var(--gray-200); }
.assignee-manager-tip {
    margin: 0 20px 8px;
    font-size: 0.82rem;
    color: var(--gray-500);
    line-height: 1.4;
}
.assignee-manager-body {
    padding: 4px 20px 8px;
    overflow-y: auto;
}
.assignee-supplier-block {
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
}
.assignee-supplier-block-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 800;
    font-size: 0.95rem;
    margin-bottom: 8px;
}
.assignee-person-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.assignee-person-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    padding: 4px 6px 4px 11px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-700);
}
.assignee-person-pill button {
    background: var(--danger-100);
    color: var(--danger-700);
    border: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.assignee-person-pill button:hover { background: #fecaca; }
.assignee-add-row { display: flex; gap: 6px; }
.assignee-add-input {
    flex: 1;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 0.85rem;
    outline: none;
}
.assignee-add-input:focus { border-color: var(--brand-800); }
.assignee-add-btn {
    background: var(--brand-800);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0 14px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.85rem;
}
.assignee-add-btn:hover { background: #17614a; }
.assignee-empty-people { font-size: 0.8rem; color: var(--gray-400); font-style: italic; margin-bottom: 10px; }
.assignee-manager-footer {
    padding: 12px 20px 18px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--gray-100);
}

/* ============================================
   GİRİŞ KİLİDİ — erişim şifresi ekranı
   ============================================ */
#auth-lock-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, var(--gray-800), var(--gray-900));
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.auth-lock-panel {
    background: #ffffff;
    border-radius: 18px;
    padding: 34px 30px 28px;
    width: 100%;
    max-width: 360px;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0,0,0,0.45);
}
.auth-lock-icon { font-size: 2.6rem; margin-bottom: 8px; }
.auth-lock-panel h2 { margin: 0 0 6px; font-size: 1.25rem; color: var(--gray-900); }
.auth-lock-panel p { margin: 0 0 18px; font-size: 0.88rem; color: var(--gray-500); }
#auth-lock-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--gray-300);
    border-radius: 10px;
    font-size: 1rem;
    text-align: center;
    outline: none;
    margin-bottom: 10px;
    box-sizing: border-box;
}
#auth-lock-input:focus { border-color: #22a06b; }
#auth-lock-error {
    background: var(--danger-50);
    color: var(--danger-700);
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.82rem;
    margin-bottom: 10px;
}
#auth-lock-submit { width: 100%; justify-content: center; }

/* ============================================
   BEKLEMEDE (WAITING / TAKİP) — durum + kontrol tarihi
   ============================================ */

/* Popover: "Beklemede" anahtarı satırı */
.task-waiting-toggle {
    display: flex !important;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    background: #fffbeb;
    border: 1px solid var(--warning-200);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.86rem;
    color: var(--warning-800);
}
.task-waiting-toggle input[type="checkbox"] {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--warning);
    flex-shrink: 0;
}
.task-popover-date-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    color: #b45309;
    background: #fffbeb;
    border-radius: 8px;
    padding: 7px 9px;
    line-height: 1.4;
}

/* Kart: beklemede hali (amber sol şerit) */
.eq-task-card.waiting {
    background: #fffdf5;
    border-color: var(--warning-200);
    border-left: 4px solid #f59e0b;
}

/* Rank yerine 🟡 (beklemede) */
.eq-task-rank.waiting-rank {
    background: var(--warning-100);
    border-color: var(--warning-200);
    color: #b45309;
    cursor: default;
    font-size: 0.7rem;
}
.eq-task-rank.waiting-rank:hover { transform: none; background: var(--warning-100); }

/* "🟡 Beklemede" rozeti */
.eq-task-waiting-badge {
    display: inline-flex;
    align-items: center;
    background: var(--warning-100);
    color: var(--warning-800);
    border: 1px solid var(--warning-200);
    border-radius: 6px;
    padding: 1px 7px;
    font-size: 0.7rem;
    font-weight: 800;
}

/* Kontrol tarihi badge'i (beklemede görevde tarih) */
.eq-task-due.check {
    background: var(--warning-100);
    color: var(--warning-800);
    border: 1px solid var(--warning-200);
}
.eq-task-due.check.check-due {
    background: #f59e0b;
    color: #ffffff;
    border-color: var(--warning);
    animation: eqCheckPulse 1.8s ease-in-out infinite;
}
@keyframes eqCheckPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); }
}

/* Kart üzerindeki hızlı "beklemeye al / çıkar" butonu */
.eq-task-waiting-btn {
    background: none;
    border: 1px solid var(--gray-200);
    color: var(--gray-400);
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    flex-shrink: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    transition: all 0.15s;
}
.eq-task-waiting-btn:hover {
    border-color: #f59e0b;
    color: var(--warning);
    background: #fffbeb;
}
.eq-task-waiting-btn.active {
    background: var(--warning-100);
    border-color: #f59e0b;
    color: #b45309;
}

/* Özet panel: Beklemede kartı */
.task-summary-card.summary-waiting .summary-icon { filter: none; }
.task-summary-card.summary-waiting.active {
    background: #fffbeb;
    border-color: #f59e0b;
}

/* === HAFTALIK VİTRİN (Planlayıcı) === */
/* Ana kap dikey: üstte araç çubuğu, altta sütun şeridi */
.planner-board {
    flex-direction: column;
    overflow-x: visible;
}

/* ⚠️ 2026-08-31: Planlayıcı da `.column` sınıfını kullanıyor. Satış panosundaki
   sütun 420px'e çıkarılınca (uzun notlar için) 7 günlük planlayıcı da 2940px'e
   uzadı ve ekranda 3 gün görünür oldu. Planlayıcıda kartlar KISA olduğu için
   sütunlar burada bilerek dar tutulur — iki genişlik AYRI ayarlanır. */
/* ⚠️ PLANLAYICI SÜTUN GENİŞLİĞİ (2026-08-31, kullanıcı kararı):
   Önce "hafta tek ekrana sığsın" diye esnek yapılmıştı (170px'e kadar iniyordu),
   ama kartlar sıkışık görünüyordu — kullanıcı ESKİ HALİNİ istedi.
   Artık sabit 320px: kartlar rahat, hafta yatay kaydırma ile gezilir.
   Satış panosundan AYRI tutulur (orası 420px, uzun notlar için). Tek knob budur. */
.planner-columns .column {
    flex: 0 0 320px;
    min-width: 0;
}

.planner-columns {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 1.5rem;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.planner-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 0.75rem;
    width: 100%;
}

.planner-week-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.planner-nav-btn {
    padding: 4px 12px;
    font-size: 0.85rem;
    justify-content: center;
}

.planner-week-label {
    font-weight: 700;
    color: var(--gray-700);
    font-size: 0.9rem;
    margin-left: 6px;
    white-space: nowrap;
}

.planner-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.planner-filter-chip {
    border: 1px solid var(--gray-300);
    background: var(--gray-100);
    color: var(--gray-500);
    border-radius: 14px;
    padding: 3px 10px;
    font-size: 0.78rem;
    cursor: pointer;
}

.planner-filter-chip.active {
    background: #e9f5ef;
    border-color: #2e8b63;
    color: var(--brand-800);
    font-weight: 600;
}

/* Bugünün sütunu vurgusu */
.planner-today .column-header {
    background: #fef9c3;
    box-shadow: inset 0 0 0 2px #f59e0b;
    border-radius: 6px;
}

.planner-day-date {
    font-size: 0.72rem;
    color: var(--gray-500);
    font-weight: 500;
    margin-left: 4px;
}

/* Kaynak filtresi ve yoğunluk sınırı gizlemeleri */
.planner-source-hidden {
    display: none !important;
}

.planner-overflow-hidden {
    display: none !important;
}

.planner-more-btn {
    text-align: center;
    font-size: 0.78rem;
    color: var(--brand-800);
    background: #eef2ff;
    border: 1px dashed #a5b4fc;
    border-radius: 6px;
    padding: 5px;
    cursor: pointer;
    margin-top: 4px;
}

/* Türetilmiş öğeler tıklanabilir (kaynağa gider) */
.planner-board .card[data-is-auto="true"] {
    cursor: pointer;
}

/* Hatırlatma saati (isteğe bağlı) — tarih kutusuyla aynı görünüm */
.reminder-time-input {
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    padding: 0.1rem 0.25rem;
    font-size: 0.75rem;
    font-family: inherit;
    color: var(--gray-600);
    background-color: transparent;
    cursor: pointer;
    outline: none;
    max-width: 74px;
}

.reminder-time-input:hover,
.reminder-time-input:focus {
    border-color: var(--gray-400);
    background-color: var(--gray-50);
}

/* Mobil: sütunlar (hafta sonu dahil) alt alta akar */
@media (max-width: 768px) {
    .planner-columns {
        flex-direction: column;
        overflow-x: visible;
        gap: 0.6rem;
    }

    .planner-toolbar {
        justify-content: flex-start;
    }
}


/* === TANITIM MAİLİ ÖNİZLEME PENCERESİ — EKRANA SIĞMA (2026-07-20) === */
/* Pencere ekranı aşmaz; taşan içerik pencere İÇİNDE kayar, sayfa kaymaz.
   Gönder/Vazgeç alt çubuğa sabitlenir → mobilde her zaman parmakla ulaşılır. */
#intro-mail-modal .modal-content {
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#intro-mail-modal .modal-header,
#intro-mail-modal #intro-mail-customer {
    flex-shrink: 0;
}
/* Adımlar flex sütun olur (JS display:'flex' atar) */
#intro-mail-step1,
#intro-mail-step2 {
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
#intro-mail-step1 {
    overflow-y: auto;
}
.intro-scroll-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
}
.intro-sticky-footer {
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    padding-top: 10px;
    margin-top: 4px;
    background: #fff;
    border-top: 1px solid var(--gray-200);
}
@media (max-width: 600px) {
    #intro-mail-modal .modal-content {
        max-height: 88vh;
    }
}

/* 🔍 Beklemede işareti — defter satırında bilgi amaçlı (Paket 26.2, 2026-08-25) */
.tdefter-bekleme {
    flex: 0 0 auto;
    font-size: 0.8rem;
    opacity: 0.75;
    cursor: help;
}

/* ═══════════════════════════════════════════════════════════════
   📵 ULAŞILAMADI + 📓 TEMAS GEÇMİŞİ (Paket 27, 2026-08-26)
   ═══════════════════════════════════════════════════════════════ */

/* Defter satırındaki 📵 düğmesi */
.tdefter-acmadi {
    flex: 0 0 auto;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    border-radius: 6px;
    padding: 3px 7px;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}
.tdefter-acmadi:hover {
    background: #ffedd5;
    border-color: #fb923c;
    transform: translateY(-1px);
}

/* ⛔ eşiği aşan satır: "telefon işe yaramıyor, başka yol dene" sinyali */
.tdefter-satir.cok-deneme {
    background: #fff1f2;
    border-left: 3px solid #f43f5e;
}

/* 📓 Görev penceresindeki geçmiş listesi (salt okunur) */
.task-gecmis-kutu {
    border: 1px solid var(--gray-200);
    background: #ffffff;
    border-radius: 10px;
    padding: 10px;
}
.task-gecmis-baslik {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--gray-500);
    margin-bottom: 6px;
}
.task-gecmis-liste {
    max-height: 130px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.task-gecmis-satir {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.78rem;
    padding: 3px 6px;
    background: var(--gray-50);
    border-radius: 5px;
}
.task-gecmis-zaman {
    flex: 0 0 auto;
    color: var(--gray-400);
    font-variant-numeric: tabular-nums;
    min-width: 66px;
}
.task-gecmis-olay {
    color: var(--gray-700);
    word-break: break-word;
}

/* 📵 Ulaşılamadı penceresi — defter listesinin (z-index 9999) ÜSTÜNDE durmalı */
.acmadi-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(14, 31, 24, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.acmadi-overlay.active { display: flex; }
.acmadi-box {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 50px rgba(14, 31, 24, 0.3);
}
.acmadi-baslik {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 14px;
}
.acmadi-etiket {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--gray-500);
    margin: 10px 0 5px;
}
.acmadi-input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    box-sizing: border-box;
}
.acmadi-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.acmadi-secim {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.acmadi-secenek {
    flex: 1 1 auto;
    padding: 9px 10px;
    border: 1px solid var(--gray-300);
    background: var(--gray-50);
    color: var(--gray-600);
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}
.acmadi-secenek:hover { border-color: var(--gray-400); }
.acmadi-secenek.selected {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1d4ed8;
    font-weight: 600;
}
.acmadi-ipucu {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 7px;
    min-height: 1em;
}
.acmadi-dugmeler {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}
.acmadi-dugmeler .btn-primary { flex: 1 1 auto; justify-content: center; }
.acmadi-vazgec {
    flex: 0 0 auto;
    padding: 9px 16px;
    border: 1px solid var(--gray-300);
    background: #ffffff;
    color: var(--gray-500);
    border-radius: 8px;
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
}
.acmadi-vazgec:hover { background: var(--gray-100); }
.acmadi-kural {
    margin-top: 12px;
    padding: 8px 10px;
    background: #fffbeb;
    border: 1px solid var(--warning-200);
    border-radius: 8px;
    font-size: 0.73rem;
    color: var(--warning-800);
    line-height: 1.45;
}

/* ═══ 📓 Görev geçmişine NOT EKLEME (Paket 28, 2026-08-26) ═══ */
.task-gecmis-satir { position: relative; }
.task-gecmis-olay { flex: 1 1 auto; }
.task-gecmis-sil {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--gray-300);
    font-size: 0.75rem;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.task-gecmis-satir:hover .task-gecmis-sil { opacity: 1; }
.task-gecmis-sil:hover { background: var(--danger-100); }
.task-gecmis-bos {
    font-size: 0.78rem;
    color: var(--gray-400);
    padding: 4px 2px;
}
.task-gecmis-ekle {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.task-gecmis-ekle .task-popover-input { flex: 1 1 auto; }
.task-gecmis-add-btn {
    flex: 0 0 auto;
    padding: 7px 12px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 8px;
    font-size: 0.82rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.task-gecmis-add-btn:hover { background: #dbeafe; border-color: #60a5fa; }
.task-gecmis-bilgi {
    margin-top: 7px;
    font-size: 0.7rem;
    color: var(--gray-400);
    line-height: 1.4;
}
.task-gecmis-bilgi.dolu {
    color: #b45309;
    font-weight: 600;
}

/* ═══ 🔎 Aramada TEMAS KAYITLARI grubu (Paket 30, 2026-08-26) ═══ */
.search-grup-baslik {
    padding: 8px 14px 4px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--gray-400);
    border-top: 1px solid var(--gray-200);
    cursor: default;
    list-style: none;
}
.search-item-temas {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.search-item-temas.kapali { opacity: 0.62; }
.search-temas-ikon {
    flex: 0 0 auto;
    font-size: 0.95rem;
    line-height: 1.3;
}
.search-temas-govde {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.search-temas-ad {
    font-weight: 600;
    color: var(--gray-800);
    word-break: break-word;
}
.search-temas-ad em {
    font-style: normal;
    font-weight: 400;
    color: var(--gray-500);
}
.search-temas-ozet {
    font-size: 0.72rem;
    color: var(--gray-500);
    line-height: 1.35;
}

/* ═══ 📍 İlçe kartında TEMAS KAYITLARI + aramada ilçe rozeti (Paket 31, 2026-08-26) ═══ */
.search-temas-ilce {
    font-size: 0.66rem;
    color: #0369a1;
    background: #e0f2fe;
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 4px;
    white-space: nowrap;
}
.ilce-temas-baslik {
    margin-top: 14px;
    padding: 9px 12px 5px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--gray-500);
    border-top: 1px dashed var(--gray-300);
}
.ilce-temas-item {
    cursor: pointer;
    align-items: flex-start !important;
}
.ilce-temas-item.kapali { opacity: 0.6; }
.ilce-temas-govde {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ilce-temas-ad {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.9rem;
}
.ilce-temas-ad em {
    font-style: normal;
    font-weight: 400;
    color: var(--gray-500);
}
.ilce-temas-ozet {
    font-size: 0.73rem;
    color: var(--gray-500);
    line-height: 1.35;
}

/* ============================================================
   DÜZEN DÜZELTMELERİ (2026-08-31, tasarım paketi 1)
   Amaç: sayfanın YATAY kaymaması. Ölçülen sorun: kart içeriği
   sütunu 320 → 550px şişiriyordu, dashboard kartları 60px taşıyordu.
   ============================================================ */

/* Uzun firma adları sütunu genişletmesin, satır atlasın */
.card {
    min-width: 0;
}
/* ⚠️ `anywhere` DEĞİL `break-word`: `anywhere` kelimeyi her fırsatta böler ve
   sütunun asgari genişliğini de küçülttüğü için dar planlayıcı sütunlarında
   metin "Gör / ev: / KA / TS / AN" diye harf çorbasına dönüyordu (31.08.2026).
   `break-word` yalnız SIĞMAYAN uzun kelimeyi böler, normal kelime sarması korunur. */
.card-title,
.card-notes,
.card-description {
    overflow-wrap: break-word;
}
/* Kart başlığı dar sütunda alt satıra insin (eylem ikonları taşırmasın) */
.card-header {
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Sekme şeridi: 5 sekme dar ekranda taşıyordu — sarsın, ortalansın */
.tabs {
    flex-wrap: wrap;
    justify-content: center;
}
@media (max-width: 720px) {
    .tab-btn {
        padding: 0.6rem 0.9rem;
        font-size: 0.95rem;
    }
}

/* ============================================================
   ⚡ TEDARİĞE BAŞLAYANLAR RAPORU (2026-08-31)
   Dönem seçimli, e-tablo kaynaklı performans kutusu.
   ============================================================ */
.tb-kutu {
    flex: 1 1 100%;
    width: 100%;
    text-align: left;
}
.tb-aciklama {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: -0.25rem 0 0.9rem;
    line-height: 1.55;
}
.tb-donem-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 1rem;
}
.tb-donem-btn {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1.5px solid var(--rule, var(--gray-200));
    background: var(--gray-50);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.tb-donem-btn:hover { border-color: var(--brand-300); color: var(--brand-700); }
.tb-donem-btn.selected {
    background: var(--brand-800);
    border-color: var(--brand-800);
    color: #ffffff;
}
.tb-ozet {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 1rem;
}
.tb-kutucuk {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: var(--brand-50);
    text-align: left;
    font-family: inherit;
}
.tb-tiklanir { cursor: pointer; transition: all 0.15s; }
.tb-tiklanir:hover { border-color: var(--brand-400); transform: translateY(-2px); }
.tb-deger {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--brand-800);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.tb-deger.tb-kucuk { font-size: 1.15rem; }
.tb-birim { font-size: 0.85rem; font-weight: 600; margin-left: 4px; color: var(--brand-600); }
.tb-etiket { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }
.tb-uyari { color: var(--warning); }
.tb-bayiler {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-200);
}
.tb-bayi-baslik {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tb-bayi-rozet {
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--gray-100);
    color: var(--gray-600);
}
.tb-bayi-rozet b { color: var(--brand-700); }
.tb-notlar {
    margin-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.8rem;
    color: #7c5a1a;
    background: #fef9ec;
    border-left: 3px solid var(--warning);
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
    line-height: 1.6;
}
.tb-bos { font-size: 0.86rem; color: var(--text-muted); padding: 8px 0; }
.tb-liste-satir {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 6px;
    border-bottom: 1px solid var(--gray-100);
}
.tb-liste-ad { font-weight: 600; font-size: 0.9rem; color: var(--text-main); }
.tb-liste-meta { font-size: 0.78rem; color: var(--text-muted); }

[data-theme="dark"] .tb-donem-btn { background: var(--gray-800); border-color: var(--gray-700); color: var(--gray-300); }
[data-theme="dark"] .tb-kutucuk { background: #16261f; border-color: var(--gray-700); }
[data-theme="dark"] .tb-deger { color: var(--brand-300); }
[data-theme="dark"] .tb-bayi-rozet { background: var(--gray-800); color: var(--gray-300); }
[data-theme="dark"] .tb-notlar { background: #2a2113; color: #fcd9a0; }
[data-theme="dark"] .tb-liste-satir { border-color: var(--gray-800); }
[data-theme="dark"] .tb-liste-ad { color: var(--gray-200); }

/* ⚠️ .chart-box `align-items:center` + `flex-direction:column` uyguluyor; bu yüzden
   içerideki ızgara kutunun ortasında dar bir sütun olarak sıkışıyordu. Rapor kutusu
   tam genişlik kullanır ve içerik SOLA hizalanır (okunacak metin, grafik değil). */
.tb-kutu.chart-box {
    align-items: stretch;
    flex-basis: 100%;
}
.tb-kutu h3 {
    text-align: left;
    margin-bottom: 0.35rem;
}

/* === RAKAM FONTU YAYILIMI (2026-09-02, Tasarım Paketi 2 — Aşama 2) ===
   Bu iki sınıfın değeri HER ZAMAN sayıdır (kart adedi, görev adedi),
   bu yüzden .exec-card'daki gibi JS tarafında ayrım gerekmez —
   doğrudan uygulanır.
   ⚠️ Yeni bir sayaç sınıfı eklerken: değeri METİN de olabiliyorsa
   burayı KULLANMA, .exec-card-value.mono desenini (JS'te sayisalDeger)
   uygula — yoksa şehir/dönem adları monospace olur ve çirkinleşir. */
.dash-value,
.task-summary-card .summary-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* İş Hacmi şeridindeki rakamlar (2026-09-02, Tasarım Paketi 2).
   ⚠️ Yalnız SAYIYI sarar, yanındaki "müşteri"/"MWh" kelimesini DEĞİL —
   kelimeyi de monospace yapmak okunurluğu düşürür. */
.ishacmi-sayi {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* === CRM MODALI: rakam fontu + KOYU TEMA (2026-09-02, Tasarım Paketi 2) ===
   Telefon, tüketim ve e-posta sabit genişlikli yazılır: bunlar okunup
   karşılaştırılan/kopyalanan KİMLİK verileridir, cümle değil.
   ⚠️ Müşteri ADI, il/ilçe, sektör gibi alanlara UYGULAMA — onlar metindir. */
#crm-sheet-telefon,
#crm-sheet-tuketim,
#crm-sheet-eposta,
#crm-sheet-mail-link {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* --- KOYU TEMA ---
   ⚠️ Modalın kabuğu zaten koyuydu ama içindeki kutular/girdiler AÇIK
   renkte kalıyordu: koyu modalın ortasında beyaz başlık şeridi ve açık
   gri kutular. Okunuyordu ama tema yarım kalıyordu. */
[data-theme="dark"] .crm-modal-content > .modal-header {
    background: var(--gray-800);
    border-bottom-color: var(--gray-700);
}
[data-theme="dark"] .crm-info-box {
    background-color: var(--gray-900);
    border-color: var(--gray-700);
}
[data-theme="dark"] .crm-info-box label { color: var(--gray-400); }
[data-theme="dark"] .crm-readonly-text  { color: var(--gray-100); }
[data-theme="dark"] .crm-input {
    background-color: var(--gray-900);
    border-color: var(--gray-700);
    color: var(--gray-100);
}
[data-theme="dark"] .crm-input:focus { border-color: var(--brand-500); }
[data-theme="dark"] .crm-input::placeholder { color: var(--gray-600); }
[data-theme="dark"] .crm-timeline-section { border-top-color: var(--gray-700); }
[data-theme="dark"] .crm-danger-hint { color: var(--gray-400); }

/* Temas Defteri: telefon sabit genişlikli (2026-09-02, Tasarım Paketi 2).
   ⚠️ Yalnız telefon — firma adı / muhatap adı METİNdir, dokunma. */
.tdefter-tel {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ============================================================
   S12 (2026-09-23) — ÇERÇEVE: SEKME ŞERİDİ + SOL MENÜ = MVD demosunun kenar menüsü
   (docs/TASARIM.md §11 "Çerçeve"). Önceki iki blok (2026-09-02 "hap görünüm" + "sol dikey menü")
   bunun yerine geçti.

   - ≥1200 px: sola sabit 248 px koyu yeşil menü (demo .kenar). Etkin öğe: yarı saydam yeşil gradyan
     + ince iç halka, ikon logo yeşili (demo .kenar nav button.etkin). Marka bloğu HTML'e dokunmadan
     ::before ("MVD") + ::after (alt yazı, flex order ile üste) — demo .marka-yazi.
   - <1200 px: aynı koyu yeşil, yatay kaydırılan bant (telefon/tablet).
   - İkonlar: emoji DEĞİL, çizgi SVG (demo .cizgi-im, stroke 1.9) — CSS mask ile, currentColor.
     Yalnız 6 gezinme ikonu (TASARIM.md §6: arayüz ikonu → çizgi; veri ikonları emoji kalır).
   - Şerit her iki temada da aynı (marka rengi). .tab-btn'de satır içi stil YOK (doğrulandı) —
     2026-09-02'de geri alınan üst şerit sorunu (header-actions satır içi renkleri) burada olamaz.
   ⚠️ HTML yapısı ve JS DEĞİŞMEDİ: sekme geçişi data-target ile. Geri almak için bu bloğu sil.
   ============================================================ */

/* Gezinme ikonları (24×24, stroke 1.9, yuvarlak uç) — maske olarak kullanılır, rengi currentColor */
.tab-btn[data-target="board"]            { --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='5' height='16' rx='1.5'/%3E%3Crect x='10' y='4' width='5' height='11' rx='1.5'/%3E%3Crect x='17' y='4' width='4' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.tab-btn[data-target="operations-board"] { --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 3 8l9 5 9-5-9-5Z'/%3E%3Cpath d='m3 13 9 5 9-5'/%3E%3C/svg%3E"); }
.tab-btn[data-target="planner-board"]    { --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.tab-btn[data-target="reports-board"]    { --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M6 17v-5M11 17V7M16 17v-8M21 17v-3'/%3E%3C/svg%3E"); }
.tab-btn[data-target="task-board"]       { --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6h10M10 12h10M10 18h10'/%3E%3Cpath d='m4 6 1.5 1.5L8 5M4 12l1.5 1.5L8 11M4 18l1.5 1.5L8 17'/%3E%3C/svg%3E"); }
.tab-btn[data-target="goals-board"]      { --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E"); }

.tab-btn::before {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--ikon) center / contain no-repeat;
    mask: var(--ikon) center / contain no-repeat;
    opacity: 0.85;
}

/* Şerit (her genişlikte ortak) — demo .kenar renkleri */
.app-tabs,
[data-theme="dark"] .app-tabs {
    display: flex;
    gap: 3px;
    margin: 0 0 20px;
    padding: 6px;
    border: none;
    border-radius: var(--yuvarlak);
    background: linear-gradient(135deg, var(--koyu) 0%, var(--koyu-2) 100%);
    box-shadow: var(--golge);
}
.tab-btn,
[data-theme="dark"] .tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 9px;
    color: var(--koyu-soluk);
    background: none;
    box-shadow: none;
    transition: background 0.13s, color 0.13s;
}
.tab-btn:hover,
[data-theme="dark"] .tab-btn:hover {
    background: rgba(255, 255, 255, 0.055);
    color: var(--koyu-yazi);
}
.tab-btn.active,
[data-theme="dark"] .tab-btn.active {
    background: linear-gradient(135deg, rgba(107, 200, 148, 0.20), rgba(107, 200, 148, 0.09));
    color: var(--yuzey);
    box-shadow: inset 0 0 0 1px rgba(107, 200, 148, 0.24);
}
.tab-btn.active::before { background-color: var(--mvd); opacity: 1; }
.tab-btn.active::after { display: none; }

/* <1200 px: yatay kaydırılan bant (taşmaz) */
@media (max-width: 1199px) {
    .app-tabs,
    [data-theme="dark"] .app-tabs {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .app-tabs::-webkit-scrollbar { display: none; }
    .tab-btn { white-space: nowrap; flex-shrink: 0; }
}
@media (max-width: 768px) {
    .tab-btn, [data-theme="dark"] .tab-btn { padding: 8px 11px; font-size: 13.5px; gap: 7px; }
    .tab-btn::before { width: 16px; height: 16px; }
}

/* ≥1200 px: sola sabit kenar menü — demo .kenar (248 px) */
@media (min-width: 1200px) {
    body { padding-left: calc(248px + 1.5rem); }

    .app-tabs,
    [data-theme="dark"] .app-tabs {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 248px;
        z-index: 900;          /* modal 9999 ve tam ekran sütun 1000 ÜSTTE kalsın */
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        flex-wrap: nowrap;
        margin: 0;
        padding: 20px 14px 16px;
        border-radius: 0;
        overflow-y: auto;
        background: linear-gradient(180deg, var(--koyu) 0%, var(--koyu-2) 100%);
        box-shadow: none;
    }

    /* Marka bloğu — demo .marka-yazi (HTML'e dokunmadan; ::after flex order ile ::before'un altına) */
    .app-tabs::before {
        content: "MVD";
        order: -2;
        display: block;
        color: var(--yuzey);
        font-size: 19px;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1.1;
        padding: 2px 8px 0;
    }
    .app-tabs::after {
        content: "ENERJİ · MÜŞTERİ TAKİP";
        order: -1;
        display: block;
        color: var(--mvd);
        font-size: 9.5px;
        font-weight: 600;
        letter-spacing: 0.19em;
        padding: 4px 8px 18px;
        margin-bottom: 14px;
        border-bottom: 1px solid var(--koyu-cizgi);
    }

    .tab-btn,
    [data-theme="dark"] .tab-btn {
        width: 100%;
        text-align: left;
        white-space: normal;
        padding: 10px 11px;
        gap: 11px;
    }
}

/* ============================================================
   📱 MOBİL ARAÇ KATLAYICI (2026-09-02, Aşama 5)

   SORUN: Telefonda panoya ulaşmak için başlık + arama + Hızlı Temas +
   Temas Defteri + 8 sayaç kartı + 8 filtre düğmesi ≈ 1300px kaydırmak
   gerekiyordu (~2 ekran boyu).

   ÇÖZÜM: #customer-tools'a 'araclar-kapali' sınıfı gelince ÇOCUKLARI
   gizlenir. Arama kutusu HER ZAMAN açık kalır.

   ⚠️ #customer-tools'un KENDİ display'ine ASLA dokunma — sekme mantığı
   onu satır içi yönetiyor (script.js:42 'customerTools.style.display').
   Satır içi stil bu dosyayı ezer; çakışırsak sekme geçişi bozulur.

   ⚠️ #temas-defteri-serit'in display'ini de JS satır içi veriyor
   (script.js:10353 — kayıt yoksa 'none'). Burada YALNIZ 'none' yazıyoruz;
   'block' YAZMA, yoksa kayıt olmadığında boş şerit görünür.

   ⚠️ YALNIZ 768px ALTI. Masaüstü düzeni (sol menü) ETKİLENMEZ.
   ============================================================ */
#araclar-toggle { display: none; }

@media (max-width: 768px) {
    #araclar-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        width: 100%;
        margin: 0 0 14px;
        padding: 11px 14px;
        background-color: var(--brand-100);
        border: 1px solid var(--brand-200);
        border-radius: 10px;
        color: var(--brand-800);
        font-family: inherit;
        font-size: 0.9rem;
        font-weight: 700;
        cursor: pointer;
    }
    #araclar-toggle-ok { transition: transform 0.2s ease; }
    #customer-tools.araclar-kapali #araclar-toggle-ok { transform: rotate(-90deg); }

    /* Katlanınca gizlenenler — arama kutusu listede YOK, hep açık kalır */
    #customer-tools.araclar-kapali #quick-contact-bar,
    #customer-tools.araclar-kapali #temas-defteri-serit,
    #customer-tools.araclar-kapali .dashboard-panel,
    #customer-tools.araclar-kapali .filter-bar {
        display: none;
    }

    [data-theme="dark"] #araclar-toggle {
        background-color: var(--gray-800);
        border-color: var(--gray-700);
        color: var(--gray-100);
    }
}

/* ============================================================
   🎯 HEDEFLERİM PANOSU (2026-09-06)
   enerji-saha-kocu skill'inin panodaki karşılığı.
   Renkler paletten gelir — sabit renk YAZMA (Aşama 1 kuralı).
   ============================================================ */
.goals-board {
    max-width: 1100px;
    width: 100%;
    padding-bottom: 3rem;
}

.hedef-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    background: linear-gradient(135deg, var(--brand-900), var(--brand-800));
    color: #ffffff;
    padding: 1.1rem 1.4rem;
    border-radius: 14px;
}
.hedef-donem-ad { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
.hedef-donem-alt { font-size: 0.86rem; color: rgba(255, 255, 255, 0.82); margin-top: 0.25rem; }
.hedef-duzenle {
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.26);
    color: #ffffff;
    padding: 0.5rem 0.95rem;
    border-radius: 9px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
}
.hedef-duzenle:hover { background-color: rgba(255, 255, 255, 0.24); }

.hedef-pencere-bar {
    height: 7px;
    background-color: var(--gray-200);
    border-radius: 99px;
    margin: 0.9rem 0 0.3rem;
    overflow: hidden;
}
.hedef-pencere-bar > div { height: 100%; background-color: var(--brand-500); border-radius: 99px; }
.hedef-pencere-not { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 1.4rem; }

.hedef-kartlar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.6rem;
}
.hedef-kart {
    background-color: var(--card-bg);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    box-shadow: var(--card-shadow);
}
.hedef-kart-baslik {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.hedef-kart-deger {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0.35rem 0 0.6rem;
    line-height: 1;
}
.hedef-kart-deger span { font-size: 1rem; font-weight: 600; color: var(--text-muted); }
.hedef-kart-not { font-size: 0.74rem; color: var(--text-muted); margin-top: 0.5rem; }
/* Takip hareketi: hedefe GİRMEYEN bilgi satırı — kartın hedef rakamıyla
   karışmasın diye ayrı renk + üstten ince çizgi (2026-09-09). */
.hedef-takip-not {
    display: block;
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px dashed var(--border-color, #dbe8e2);
    color: #a2570b;
}
[data-theme="dark"] .hedef-takip-not { color: #e8b878; }

/* 📋 Bu hafta ne yaptım — haftalık hareket raporu (2026-09-09) */
.hedef-hafta-rapor {
    margin-top: 0.5rem;
    background: transparent;
    border: 1px solid var(--border-color, #dbe8e2);
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 0.72rem;
    font-family: inherit;
    color: var(--text-muted);
    cursor: pointer;
}
.hedef-hafta-rapor:hover { background: var(--bg-hover, #eef5f1); color: var(--text-color); }
[data-theme="dark"] .hedef-hafta-rapor { border-color: #23392f; }
[data-theme="dark"] .hedef-hafta-rapor:hover { background: #162b23; }

.hhrapor-ozet {
    display: flex; flex-wrap: wrap; gap: 14px;
    padding: 10px 14px; margin: 0 10px 8px;
    background: var(--bg-hover, #eef5f1);
    border-radius: 8px; font-size: 0.84rem;
}
.hhrapor-ozet strong { font-size: 1.05rem; }
.hhrapor-gun {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 9px 14px 5px; margin-top: 6px;
    font-weight: 700; font-size: 0.86rem;
    border-bottom: 1px solid var(--border-color, #dbe8e2);
}
.hhrapor-gun span { font-weight: 400; font-size: 0.76rem; color: var(--text-muted); }
.hhrapor-satir {
    display: flex; gap: 9px; align-items: flex-start;
    padding: 7px 14px; font-size: 0.84rem;
}
.hhrapor-satir.yeni { background: var(--bg-hover, #eef5f1); }
.hhrapor-saat {
    font-variant-numeric: tabular-nums; color: var(--text-muted);
    font-size: 0.78rem; min-width: 38px;
}
.hhrapor-ikon { min-width: 20px; }
.hhrapor-govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hhrapor-etiket { font-size: 0.74rem; color: var(--text-muted); }
.hhrapor-not {
    font-size: 0.79rem; color: var(--text-muted);
    white-space: pre-wrap; word-break: break-word;
}
.hhrapor-bos { padding: 26px 16px; text-align: center; color: var(--text-muted); line-height: 1.6; }
[data-theme="dark"] .hhrapor-ozet,
[data-theme="dark"] .hhrapor-satir.yeni { background: #162b23; }
[data-theme="dark"] .hhrapor-gun { border-bottom-color: #23392f; }

.hedef-bar {
    height: 8px;
    background-color: var(--gray-200);
    border-radius: 99px;
    overflow: hidden;
}
.hedef-bar-dolu { height: 100%; border-radius: 99px; transition: width 0.3s ease; }
.hedef-iyi   { background-color: var(--brand-500); }
.hedef-orta  { background-color: var(--warning-500); }
.hedef-zayif { background-color: var(--danger-500); }
.hedef-yuzde { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); margin-top: 0.3rem; }

.hedef-bolum-baslik {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 1.5rem 0 0.7rem;
}

.hedef-huni {
    background-color: var(--card-bg);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
}
.hedef-huni-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1.1rem;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.88rem;
}
.hedef-huni-satir:last-child { border-bottom: none; }
.hedef-huni-satir span { color: var(--text-muted); }
.hedef-huni-satir strong { font-family: var(--font-mono); color: var(--gray-900); }
.hedef-huni-satir.huni-ok strong { color: var(--success-800); }
.hedef-huni-satir.huni-zayif { background-color: var(--warning-50); }
.hedef-huni-satir.huni-zayif strong { color: var(--warning-800); }
/* S06 (2026-09-20): YETAŞ seçiliyken eşdeğer huni yerine not — mono değil, sarılabilir, kısık */
.hedef-huni-satir strong .hedef-yetas-not { font-family: inherit; font-weight: 500; font-size: 0.78rem; color: var(--text-muted); text-align: right; display: inline-block; max-width: 22rem; }

.hedef-yorum {
    background-color: var(--brand-50);
    border: 1px solid var(--brand-200);
    border-radius: 12px;
    padding: 0.5rem 1.1rem;
}
.hedef-yorum ul { margin: 0; padding-left: 1.1rem; }
.hedef-yorum li { margin: 0.6rem 0; font-size: 0.88rem; line-height: 1.55; color: var(--gray-800); }

.hedef-form {
    margin-top: 1.5rem;
    background-color: var(--card-bg);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 0.5rem 1.2rem 1.3rem;
}
.hedef-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.9rem;
}
.hedef-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}
.hedef-form-grid input,
.hedef-form-grid select {
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    background-color: var(--card-bg);
    color: var(--text-main);
}
.hedef-kaydet {
    margin-top: 1.1rem;
    padding: 0.6rem 1.4rem;
    background-color: var(--brand-800);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.hedef-kaydet:hover { background-color: var(--brand-700); }
.hedef-form-not { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.7rem; }

/* --- KOYU TEMA (özgüllük: tek seçicili kurallarım [data-theme] ile ezilmez,
       ama gray-900 metin koyu zeminde okunmaz — açıkça çeviriyoruz) --- */
[data-theme="dark"] .hedef-kart-deger,
[data-theme="dark"] .hedef-huni-satir strong { color: var(--gray-100); }
[data-theme="dark"] .hedef-bolum-baslik { color: var(--gray-200); }
[data-theme="dark"] .hedef-yorum {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
}
[data-theme="dark"] .hedef-yorum li { color: var(--gray-200); }
[data-theme="dark"] .hedef-huni-satir { border-bottom-color: var(--gray-700); }
[data-theme="dark"] .hedef-huni-satir.huni-zayif { background-color: rgba(180, 83, 9, 0.18); }
[data-theme="dark"] .hedef-huni-satir.huni-zayif strong { color: var(--warning-200); }
[data-theme="dark"] .hedef-pencere-bar { background-color: var(--gray-700); }
[data-theme="dark"] .hedef-bar { background-color: var(--gray-700); }

/* Sekme ikonu — S12: çizgi SVG, bkz. ÇERÇEVE bloğu */

/* Huni bölümünde vurgulanan satır — "darboğaz" ve "tek ezberlenecek sayı" */
/* S09: varsayım kutusu (tempo) — gri, kesin hüküm gibi görünmesin */
.hedef-huni.huni-varsayim { background-color: var(--gray-50); border-style: dashed; }
.hedef-huni.huni-varsayim .hedef-huni-satir strong { color: var(--gray-600); }
[data-theme="dark"] .hedef-huni.huni-varsayim { background-color: rgba(148, 163, 184, 0.08); }
[data-theme="dark"] .hedef-huni.huni-varsayim .hedef-huni-satir strong { color: var(--gray-300); }
.hedef-huni-satir.huni-vurgu { background-color: var(--brand-50); }
.hedef-huni-satir.huni-vurgu strong { color: var(--brand-700); font-weight: 700; }
[data-theme="dark"] .hedef-huni-satir.huni-vurgu { background-color: rgba(34, 160, 107, 0.14); }
[data-theme="dark"] .hedef-huni-satir.huni-vurgu strong { color: var(--brand-300); }

/* ============================================================
   S05 (2026-09-16) — 📞 son görüşme + ➡️ sonraki adım: müşteri kartı satırı, CRM bölümü, Bugünün Masası rozeti
   ============================================================ */
.card-takip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 4px;
    font-size: 0.72rem;
}
.card-gorustum-btn {
    padding: 3px 8px;
    border: 1px solid #a8e3c4;
    border-radius: 6px;
    background: #e9f5ef;
    color: #14392e;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.card-gorustum-btn:hover { background: #d1fae5; }
.card-son-gorusme { color: var(--gray-500); white-space: nowrap; }
.card-son-gorusme.eski { color: var(--danger-700, #b91c1c); font-weight: 600; }
.card-adim-select {
    flex: 1 1 130px;
    min-width: 0;
    max-width: 100%;
    padding: 3px 6px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    background: #ffffff;
    color: var(--gray-700);
    font-size: 0.72rem;
    font-family: inherit;
}
.card-adim-select:focus-visible, .card-gorustum-btn:focus-visible { outline: 2px solid var(--info, #0ea5e9); outline-offset: 1px; }
[data-theme="dark"] .card-gorustum-btn { background: #0b241c; border-color: #2e8b63; color: #c3edd6; }
[data-theme="dark"] .card-son-gorusme { color: var(--gray-400); }
[data-theme="dark"] .card-adim-select { background: var(--gray-800); border-color: var(--gray-700); color: var(--gray-200); }

/* CRM penceresi bölümü */
.crm-takip-section {
    border: 1px solid #a8e3c4;
    border-radius: 8px;
    padding: 10px 12px;
    background: #f0fdf4;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.crm-takip-satir { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 0.85rem; }
.crm-takip-baslik { font-weight: 700; color: #14392e; font-size: 0.85rem; }
.crm-takip-son { color: var(--gray-600); }
.crm-takip-son.eski { color: var(--danger-700, #b91c1c); font-weight: 600; }
.crm-gorustum-btn {
    margin-left: auto;
    padding: 5px 10px;
    border: 1px solid #16a34a;
    border-radius: 6px;
    background: #16a34a;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.crm-gorustum-btn:hover { background: #15803d; }
.crm-takip-select {
    flex: 1 1 200px;
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid #86efac;
    border-radius: 6px;
    background: #ffffff;
    color: var(--gray-800);
    font-size: 0.85rem;
    font-family: inherit;
}
.crm-takip-tarih { font-size: 0.75rem; color: var(--gray-500); flex: 1 1 100%; }
.crm-takip-tarih:empty { display: none; }
[data-theme="dark"] .crm-takip-section { background: #0b241c; border-color: #2e8b63; }
[data-theme="dark"] .crm-takip-baslik { color: #c3edd6; }
[data-theme="dark"] .crm-takip-son { color: var(--gray-300); }
[data-theme="dark"] .crm-takip-select { background: var(--gray-800); border-color: var(--gray-700); color: var(--gray-200); }

/* Bugünün Masası: sonraki adım rozeti */
.today-item .pill.pill-adim { background: var(--aktif-zemin); color: var(--mvd-derin); border: 1px solid var(--success-200); } /* S10: değişkene taşındı */
[data-theme="dark"] .today-item .pill.pill-adim { background: rgba(107, 200, 148, 0.14); color: var(--mvd); border-color: rgba(107, 200, 148, 0.35); }
/* Görüştüm penceresindeki select, acmadi input ile aynı kalıp */
#gorusme-modal select.acmadi-input { cursor: pointer; }

/* ═══ 📇 REHBER — rakip / kurum kişileri (S08, 2026-09-20) ═══ */
.rehber-aciklama { color: var(--gray-500, #64748b); font-size: 0.85rem; margin: 5px 0 12px; }
.rehber-arama-kutu { margin-bottom: 10px; }
.rehber-arama-kutu input {
    width: 100%; box-sizing: border-box; padding: 10px 14px; font-size: 0.95rem;
    border: 2px solid #c7d2fe; border-radius: 8px; background: #fff; color: var(--gray-800);
}
.rehber-filtreler {
    display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center;
    padding: 8px; margin-bottom: 10px; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 6px;
}
.rehber-filtreler select { padding: 6px 8px; font-size: 0.83rem; border: 1px solid #a5b4fc; border-radius: 5px; background: #fff; color: var(--gray-800); min-width: 0; }
.rehber-filtreler #rehber-count { font-size: 0.75rem; font-weight: 600; color: #3730a3; padding: 0 8px; white-space: nowrap; }
.rehber-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.rehber-bos { text-align: center; color: var(--gray-400); font-size: 0.85rem; padding: 30px; border: 1px dashed var(--gray-300); border-radius: 6px; }
.rehber-satir {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
    padding: 10px 12px; background: #fff; border: 1px solid #c7d2fe; border-left: 4px solid #4f46e5; border-radius: 6px;
}
.rehber-satir.vurgulu { box-shadow: 0 0 0 3px #a5b4fc; }
.rehber-satir-govde { flex: 1; min-width: 0; }
.rehber-rozetler { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
.rehber-firma { background: #4f46e5; color: #fff; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 8px; }
.rehber-rol, .rehber-bolge { background: #eef2ff; color: #3730a3; font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 8px; border: 1px solid #c7d2fe; }
.rehber-ad { font-weight: 600; color: var(--gray-800); font-size: 0.92rem; word-break: break-word; }
.rehber-ad em { font-style: normal; font-weight: 500; color: var(--gray-500, #64748b); }
.rehber-baglam { font-size: 0.78rem; color: var(--gray-600, #475569); margin-top: 3px; }
.rehber-not { font-size: 0.78rem; color: var(--gray-600, #475569); margin-top: 3px; font-style: italic; }
.rehber-son-arama { font-size: 0.72rem; color: var(--gray-400); margin-top: 4px; }
.rehber-aksiyonlar { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; align-items: stretch; }
.rehber-tel {
    display: inline-block; padding: 7px 10px; background: #16a34a; color: #fff; text-decoration: none; border-radius: 5px;
    font-size: 0.82rem; font-weight: 700; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.rehber-tel:hover { background: #15803d; }
.rehber-tel-yok { font-size: 0.7rem; color: var(--gray-400); padding: 5px; text-align: center; }
.rehber-duzenle, .rehber-sil { background: none; padding: 5px 10px; border-radius: 5px; font-size: 0.78rem; cursor: pointer; }
.rehber-duzenle { border: 1px solid #93c5fd; color: #2563eb; }
.rehber-sil { border: 1px solid #fca5a5; color: #dc2626; }
.rehber-form { border: 1px solid #c7d2fe; border-radius: 8px; background: #f5f6ff; }
.rehber-form > summary { padding: 10px 12px; cursor: pointer; font-weight: 600; color: #312e81; font-size: 0.9rem; }
.rehber-form-govde { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.rehber-edit-banner {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    background: #dbeafe; border: 1px solid #93c5fd; padding: 8px 12px; border-radius: 5px; font-size: 0.85rem; color: #1e40af;
}
.rehber-edit-banner button { background: none; border: 1px solid #93c5fd; color: #1e40af; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; cursor: pointer; }
.rehber-form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rehber-form-govde input, .rehber-form-govde select, .rehber-form-govde textarea {
    width: 100%; box-sizing: border-box; padding: 7px 10px; font-size: 0.85rem; font-family: inherit;
    border: 1px solid #a5b4fc; border-radius: 5px; background: #fff; color: var(--gray-800); min-width: 0;
}
.rehber-form-govde textarea { resize: vertical; }
.rehber-kaydet { width: 100%; background: #4f46e5; border-color: #4f46e5; }
@media (max-width: 600px) {
    .rehber-form-satir, .rehber-filtreler { grid-template-columns: 1fr; }
    .rehber-satir { flex-direction: column; }
    .rehber-aksiyonlar { flex-direction: row; flex-wrap: wrap; }
    .rehber-tel { flex: 1 1 100%; }
}
/* üst arama kutusunda rehber satırı */
.search-rehber-tel { font-size: 0.78rem; color: #15803d; font-weight: 700; text-decoration: none; margin-top: 2px; font-variant-numeric: tabular-nums; }
.search-rehber-tel:hover { text-decoration: underline; }
[data-theme="dark"] .rehber-arama-kutu input, [data-theme="dark"] .rehber-filtreler select,
[data-theme="dark"] .rehber-form-govde input, [data-theme="dark"] .rehber-form-govde select, [data-theme="dark"] .rehber-form-govde textarea {
    background: var(--gray-900, #0f172a); color: var(--text-main, #e2e8f0); border-color: #4338ca;
}
[data-theme="dark"] .rehber-filtreler { background: #1e1b4b; border-color: #4338ca; }
[data-theme="dark"] .rehber-filtreler #rehber-count { color: #c7d2fe; }
[data-theme="dark"] .rehber-satir { background: var(--gray-800); border-color: #4338ca; }
[data-theme="dark"] .rehber-rol, [data-theme="dark"] .rehber-bolge { background: #1e1b4b; color: #c7d2fe; border-color: #4338ca; }
[data-theme="dark"] .rehber-ad { color: var(--text-main, #e2e8f0); }
[data-theme="dark"] .rehber-form { background: #16162e; border-color: #4338ca; }
[data-theme="dark"] .rehber-form > summary { color: #c7d2fe; }
[data-theme="dark"] .rehber-edit-banner { background: #1e3a5f; border-color: #3b82f6; color: #bfdbfe; }
[data-theme="dark"] .search-rehber-tel { color: #86efac; }

/* ============================================================
   S09 (2026-09-23) — pano UX denetimi
   ============================================================ */
/* 📥 yerel yedekten geri yükle: acil durum aracı — sönük, sıranın sonunda */
.icon-btn.icon-btn-acil { opacity: 0.55; filter: grayscale(0.6); }
.icon-btn.icon-btn-acil:hover,
.icon-btn.icon-btn-acil:focus-visible { opacity: 1; filter: none; }

/* Telefonda kart üstündeki 🗑️ ve T (test) düğmeleri gizli — sahada tek elle yanlış dokunma riski.
   Masaüstünde yerinde durur. Test işaretli kartta T görünür kalır (durum bilgisi). */
@media (max-width: 768px) {
    #board .card .delete-btn { display: none !important; }
    #board .card .test-icon-btn:not(.active) { display: none !important; }
}

/* S10 — karanlık temada beyaz kalan Hızlı Temas kutusu (zemini index.html'de satır içi --brand-50) */
[data-theme="dark"] #quick-contact-bar { background: rgba(107, 200, 148, 0.08) !important; border-color: var(--koyu-3) !important; }
[data-theme="dark"] #quick-contact-bar > span:first-child { color: var(--mvd) !important; }
/* S10 — karanlık temada gösterge sayıları koyu zeminde okunmuyordu (değer rengi --gray-900 = mürekkep, S10'dan önce de böyleydi).
   Kırmızı (Takibi Geçmiş) ve yeşil (Bu Dönem Kazanılan) kartların kendi kuralları daha özgül olduğu için etkilenmez. */
[data-theme="dark"] .dash-value { color: var(--text-main); }

/* ============================================================
   S13 (2026-09-24) — 📑 TOPLU TAKİP LİSTESİ penceresi (docs/TASARIM.md §5: panel · durum satırı · etiket)
   Sabit renk YOK (karanlık temadaki saydam anlam zeminleri hariç, §7). Ölçek 11 · 11.5 · 12.5 · 13.5 · 14 · 15.5.
   pano-tasarim denetimi sonrası (aynı gün): açıklama seçici gücü, karanlık başlık + soluk metin, satır rengi
   Bugünün Masası kuralından, telefonda 44 px dokunma + dar iç boşluk, ölçek dışı boyutlar düzeltildi.
   ============================================================ */
.toplu-icerik { max-width: 760px; text-align: left; max-height: 90vh; overflow-y: auto; }
/* Genel `.modal-content p` (15.2 px, 24 px boşluk) bu açıklamayı eziyordu → kimlikli seçici. Yalnız boş durumda görünür. */
#toplu-modal .toplu-aciklama { display: none; font-size: 12.5px; color: var(--soluk); line-height: 1.55; margin: 0 0 14px; }
#toplu-modal.toplu-bos-durum .toplu-aciklama { display: block; }
.toplu-ust { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.toplu-ust .btn-primary { display: inline-flex; width: auto; }
.toplu-geri { margin-right: auto; background: none; border: 1px solid var(--cizgi-koyu); color: var(--murekkep); border-radius: 9px;
    padding: 9px 12px; min-height: 40px; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.toplu-geri:hover { border-color: var(--mvd-koyu); background: var(--gray-50); }
.toplu-bos { padding: 28px 16px; text-align: center; color: var(--soluk); font-size: 13.5px; line-height: 1.6;
    background: var(--yuzey); border: 1px dashed var(--cizgi-koyu); border-radius: var(--yuvarlak); }
.toplu-bos-kucuk { font-size: 12.5px; color: var(--gray-400); padding: 6px 2px; }
.toplu-bolum-baslik { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--soluk); margin: 14px 2px 8px; cursor: default; }
.toplu-kapali summary { cursor: pointer; list-style: none; }
.toplu-kapali summary::-webkit-details-marker { display: none; }
.toplu-kapali summary::before { content: "▸"; }
.toplu-kapali[open] summary::before { content: "▾"; }
.toplu-sayac { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 600;
    padding: 1px 7px; border-radius: 6px; background: var(--kagit); color: var(--soluk); letter-spacing: 0; }

/* Liste satırı (genel görünüm) — durum satırı kalıbı */
.toplu-liste-satir { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
    padding: 10px 12px; margin-bottom: 7px; background: var(--yuzey); border: 1px solid var(--cizgi);
    border-left: 4px solid var(--kap); border-radius: 10px; box-shadow: var(--golge); font: inherit; color: inherit;
    transition: box-shadow 0.13s, border-color 0.13s; }
.toplu-liste-satir:hover { border-color: var(--cizgi-koyu); border-left-color: var(--kap); box-shadow: var(--golge-yuksek); }
.toplu-liste-satir.kapandi { border-left-color: var(--aktif); opacity: 0.85; }
.toplu-liste-ikon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
    font-size: 17px; background: var(--kap-zemin); }
.toplu-liste-satir.kapandi .toplu-liste-ikon { background: var(--aktif-zemin); }
.toplu-liste-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.toplu-liste-bilgi b { font-size: 14px; font-weight: 600; color: var(--murekkep);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 2 satır — ay bilgisi kesilmesin */
.toplu-liste-bilgi span { font-size: 12.5px; color: var(--soluk); }
.toplu-liste-ilerleme { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 78px; }
.toplu-sayi { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; color: var(--murekkep); }
.toplu-aranan { font-size: 11px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.toplu-bar { display: block; width: 70px; height: 5px; border-radius: 99px; background: var(--kagit); overflow: hidden; }
.toplu-bar > span { display: block; height: 100%; background: var(--aktif); border-radius: 99px; }
.toplu-ok { color: var(--gray-400); font-size: 18px; }

/* Yeni liste formu */
.toplu-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.toplu-alan { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--soluk); }
.toplu-alan-genis { grid-column: 1 / -1; }
.toplu-alan-ipucu { font-size: 11px; font-weight: 400; color: var(--gray-400); }
.toplu-alan input, .toplu-alan select, .toplu-arama-kutu input, .toplu-not, .toplu-tarih-satiri input {
    padding: 9px 11px; font-size: 14px; border: 1px solid var(--cizgi-koyu); border-radius: 9px;
    background: var(--gray-50); color: var(--murekkep); width: 100%; min-height: 40px; }
.toplu-alan input:focus, .toplu-alan select:focus, .toplu-arama-kutu input:focus, .toplu-not:focus, .toplu-tarih-satiri input:focus {
    outline: none; border-color: var(--mvd-koyu); background: var(--yuzey); box-shadow: 0 0 0 3px rgba(46, 148, 100, 0.14); }
.toplu-arama-kutu { position: relative; margin-bottom: 12px; }
.toplu-oneriler { display: none; margin-top: 6px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 10px;
    box-shadow: var(--golge-yuksek); overflow: hidden; }
.toplu-oneriler.acik { display: block; }
.toplu-oneri { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 10px 12px; min-height: 44px; font: inherit;
    font-size: 13.5px; color: var(--murekkep); background: none; border: none; border-bottom: 1px solid var(--cizgi); cursor: pointer; }
.toplu-oneri:last-child { border-bottom: none; }
.toplu-oneri:hover { background: var(--gray-50); }
.toplu-oneri-yok { padding: 10px 12px; font-size: 12.5px; color: var(--soluk); line-height: 1.5; }
.toplu-uyari-rozet { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 6px; background: var(--uyari-zemin); color: var(--warning-800); }
.toplu-secilen-baslik { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--soluk); margin: 4px 2px 8px; }
.toplu-secilenler { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.toplu-cip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 2px 2px 12px; font-size: 13.5px; font-weight: 500;
    border-radius: 99px; background: var(--kap-zemin); color: var(--murekkep); border: 1px solid transparent; }
.toplu-cip-sil { border: none; background: none; cursor: pointer; font-size: 14px; line-height: 1; color: var(--soluk);
    width: 36px; height: 36px; border-radius: 99px; }
.toplu-cip-sil:hover { background: var(--kagit); color: var(--alarm); }
.toplu-alt { display: flex; justify-content: flex-end; margin-top: 16px; }
.toplu-alt .btn-primary { width: auto; }
.toplu-alt .btn-primary:disabled { filter: grayscale(1); opacity: 0.5; cursor: not-allowed; }

/* Liste detayı */
.toplu-detay-baslik { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px;
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); box-shadow: var(--golge); }
.toplu-detay-ad { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.toplu-detay-ad b { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--murekkep); }
.toplu-detay-ad span { font-size: 12.5px; color: var(--soluk); }
.toplu-detay-sayilar { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 12.5px; color: var(--soluk); }
.toplu-detay-sayilar b.toplu-sayi { font-size: 13.5px; margin-left: 4px; }

/* Satır: 4 px sol kenar = durum (Bugünün Masası kuralı: gecikmiş alarm · bugün uyari · diğer kap · bitti aktif) */
.toplu-satir { padding: 10px 12px; margin-bottom: 8px; background: var(--yuzey); border: 1px solid var(--cizgi);
    border-left: 4px solid var(--kap); border-radius: 10px; box-shadow: var(--golge); }
.toplu-satir.durum-alarm { border-left-color: var(--alarm); }
.toplu-satir.durum-uyari { border-left-color: var(--uyari); }
.toplu-satir.durum-bitti { border-left-color: var(--aktif); opacity: 0.85; }
.toplu-satir-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.toplu-kim { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.toplu-musteri { font: inherit; font-size: 14px; font-weight: 600; color: var(--murekkep); background: none; border: none;
    padding: 6px 0; min-height: 32px; cursor: pointer; text-align: left; }
.toplu-musteri:hover { color: var(--mvd-koyu); text-decoration: underline; }
.toplu-muhatap { font-size: 12.5px; color: var(--soluk); }
.toplu-ara { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 9px;
    border: 1px solid var(--cizgi-koyu); background: var(--yuzey); color: var(--murekkep); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.toplu-ara:hover { border-color: var(--mvd-koyu); background: var(--gray-50); }
.toplu-tel { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.toplu-tel-yok { font-size: 12.5px; color: var(--gray-400); }
.toplu-durum-satiri { margin-bottom: 8px; }
/* Durum etiketi — §5 etiket (anlam rengi + zemin): "Aranmadı", "📵 Ulaşılamadı (2. kez) · tekrar 18.09", "🤝 Söz: 30.09 · kontrol" */
.toplu-durum-etiket { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 6px;
    background: var(--kagit); color: var(--soluk); font-variant-numeric: tabular-nums; }
.toplu-durum-etiket.toplu-iyi   { background: var(--aktif-zemin); color: var(--mvd-derin); }
.toplu-durum-etiket.toplu-kap   { background: var(--kap-zemin);   color: var(--kap); }
.toplu-durum-etiket.toplu-uyari { background: var(--uyari-zemin); color: var(--warning-800); }
.toplu-durum-etiket.toplu-alarm { background: var(--alarm-zemin); color: var(--alarm); }
.toplu-sonuclar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.toplu-sonuc-cip { font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--cizgi-koyu); background: var(--yuzey); color: var(--murekkep); min-height: 40px; }
.toplu-sonuc-cip:hover { border-color: var(--mvd-koyu); }
.toplu-satir.sonuclu .toplu-sonuc-cip:not(.secili) { color: var(--soluk); font-weight: 500; } /* seçili sonuç öne çıksın */
.toplu-sonuc-cip.secili.toplu-iyi   { background: var(--aktif-zemin); color: var(--mvd-derin); border-color: var(--aktif); }
.toplu-sonuc-cip.secili.toplu-kap   { background: var(--kap-zemin);   color: var(--kap);       border-color: var(--kap); }
.toplu-sonuc-cip.secili.toplu-uyari { background: var(--uyari-zemin); color: var(--warning-800); border-color: var(--uyari); }
.toplu-sonuc-cip.secili.toplu-alarm { background: var(--alarm-zemin); color: var(--alarm);     border-color: var(--alarm); }
.toplu-tarih-satiri { display: none; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.toplu-tarih-satiri.acik { display: flex; }
.toplu-tarih-satiri label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--soluk); }
.toplu-tarih-satiri input { width: auto; }
.toplu-tarih-satiri .btn-primary { display: inline-flex; width: auto; padding: 9px 14px; min-height: 40px; }
.toplu-tarih-vazgec, .toplu-not-ekle { background: none; border: 1px solid var(--cizgi-koyu); border-radius: 9px; padding: 8px 12px; min-height: 40px;
    cursor: pointer; font: inherit; font-size: 13.5px; color: var(--murekkep); white-space: nowrap; }
.toplu-not-ekle:hover, .toplu-tarih-vazgec:hover { border-color: var(--mvd-koyu); }
.toplu-not-satiri { display: flex; gap: 6px; }
.toplu-not { font-size: 13.5px; padding: 7px 10px; }
.toplu-son-not { margin-top: 6px; font-size: 12.5px; color: var(--murekkep); line-height: 1.45; }
.toplu-son-not span { color: var(--soluk); font-variant-numeric: tabular-nums; }
.toplu-ekle-sonradan { margin-top: 12px; }
.toplu-ekle-sonradan summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--mvd-koyu); padding: 10px 2px; }
.toplu-ekle-sonradan .toplu-arama-kutu { margin-top: 8px; }
.today-item-sub .pill.pill-liste { background: var(--kap-zemin); color: var(--kap); }

@media (max-width: 600px) {
    #toplu-modal .toplu-icerik { width: 100%; max-height: 100vh; border-radius: 0; padding: 16px 14px; }
    .toplu-form { grid-template-columns: 1fr; }
    .toplu-liste-ilerleme { min-width: 60px; }
    .toplu-bar { width: 54px; }
    .toplu-sonuclar { display: grid; grid-template-columns: 1fr 1fr; }
    .toplu-sonuc-cip { min-height: 44px; }
    .toplu-alt { position: sticky; bottom: -16px; background: var(--yuzey); padding: 10px 0; margin-top: 10px; }
    .toplu-detay-baslik { flex-wrap: wrap; }
}

/* Karanlık tema — pencere başlığı (genel kural --gray-900 = mürekkep, koyu zeminde görünmüyordu) + soluk metin (#9DB5AA, §7) */
[data-theme="dark"] #toplu-modal .modal-header h3 { color: var(--koyu-yazi); }
[data-theme="dark"] #toplu-modal .toplu-aciklama,
[data-theme="dark"] .toplu-bolum-baslik, [data-theme="dark"] .toplu-liste-bilgi span, [data-theme="dark"] .toplu-aranan,
[data-theme="dark"] .toplu-alan, [data-theme="dark"] .toplu-secilen-baslik, [data-theme="dark"] .toplu-detay-ad span,
[data-theme="dark"] .toplu-detay-sayilar, [data-theme="dark"] .toplu-muhatap, [data-theme="dark"] .toplu-tarih-satiri label,
[data-theme="dark"] .toplu-oneri-yok, [data-theme="dark"] .toplu-son-not span, [data-theme="dark"] .toplu-bos { color: var(--text-muted); }
[data-theme="dark"] .toplu-geri, [data-theme="dark"] .toplu-tarih-vazgec, [data-theme="dark"] .toplu-not-ekle,
[data-theme="dark"] .toplu-ara { background: rgba(255, 255, 255, 0.04); border-color: var(--koyu-cizgi); color: var(--koyu-yazi); }
[data-theme="dark"] .toplu-bos { background: var(--card-bg); border-color: var(--koyu-cizgi); }
[data-theme="dark"] .toplu-sayac, [data-theme="dark"] .toplu-bar { background: rgba(255, 255, 255, 0.06); color: var(--text-muted); }
[data-theme="dark"] .toplu-liste-satir, [data-theme="dark"] .toplu-satir, [data-theme="dark"] .toplu-detay-baslik,
[data-theme="dark"] .toplu-oneriler { background: var(--card-bg); border-color: var(--koyu-cizgi); box-shadow: none; }
[data-theme="dark"] .toplu-liste-satir, [data-theme="dark"] .toplu-satir { border-left-color: var(--kap); }
[data-theme="dark"] .toplu-satir.durum-alarm { border-left-color: var(--alarm); }
[data-theme="dark"] .toplu-satir.durum-uyari { border-left-color: var(--uyari); }
[data-theme="dark"] .toplu-liste-satir.kapandi, [data-theme="dark"] .toplu-satir.durum-bitti { border-left-color: var(--aktif); }
[data-theme="dark"] .toplu-liste-ikon { background: rgba(46, 134, 200, 0.18); }
[data-theme="dark"] .toplu-liste-satir.kapandi .toplu-liste-ikon { background: rgba(107, 200, 148, 0.14); }
[data-theme="dark"] .toplu-liste-bilgi b, [data-theme="dark"] .toplu-sayi, [data-theme="dark"] .toplu-detay-ad b,
[data-theme="dark"] .toplu-musteri, [data-theme="dark"] .toplu-oneri, [data-theme="dark"] .toplu-son-not { color: var(--koyu-yazi); }
[data-theme="dark"] .toplu-oneri { border-color: var(--koyu-cizgi); }
[data-theme="dark"] .toplu-oneri:hover { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .toplu-alan input, [data-theme="dark"] .toplu-alan select, [data-theme="dark"] .toplu-arama-kutu input,
[data-theme="dark"] .toplu-not, [data-theme="dark"] .toplu-tarih-satiri input { background: rgba(255, 255, 255, 0.04); border-color: var(--koyu-cizgi); color: var(--koyu-yazi); }
[data-theme="dark"] .toplu-cip { background: rgba(46, 134, 200, 0.18); color: var(--koyu-yazi); }
[data-theme="dark"] .toplu-cip-sil:hover { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .toplu-sonuc-cip { background: rgba(255, 255, 255, 0.04); border-color: var(--koyu-cizgi); color: var(--koyu-yazi); }
[data-theme="dark"] .toplu-satir.sonuclu .toplu-sonuc-cip:not(.secili) { color: var(--text-muted); }
[data-theme="dark"] .toplu-sonuc-cip.secili.toplu-iyi, [data-theme="dark"] .toplu-durum-etiket.toplu-iyi   { background: rgba(107, 200, 148, 0.14); color: var(--mvd); border-color: var(--aktif); }
[data-theme="dark"] .toplu-sonuc-cip.secili.toplu-kap, [data-theme="dark"] .toplu-durum-etiket.toplu-kap   { background: rgba(46, 134, 200, 0.18); color: var(--kap-acik); border-color: var(--kap); }
[data-theme="dark"] .toplu-sonuc-cip.secili.toplu-uyari, [data-theme="dark"] .toplu-durum-etiket.toplu-uyari { background: rgba(214, 154, 33, 0.16); color: var(--uyari-acik); border-color: var(--uyari); }
[data-theme="dark"] .toplu-sonuc-cip.secili.toplu-alarm, [data-theme="dark"] .toplu-durum-etiket.toplu-alarm { background: rgba(209, 72, 64, 0.18); color: var(--alarm-acik); border-color: var(--alarm); }
[data-theme="dark"] .toplu-durum-etiket { background: rgba(255, 255, 255, 0.06); color: var(--text-muted); }
[data-theme="dark"] .toplu-uyari-rozet { background: rgba(214, 154, 33, 0.16); color: var(--uyari-acik); }
[data-theme="dark"] .toplu-alt { background: var(--card-bg); }
[data-theme="dark"] .today-item-sub .pill.pill-liste { background: rgba(46, 134, 200, 0.18); color: var(--kap-acik); }