/* pys_module_themes_1_kimlik.css
 * ===========================================================================
 * KAYNAK: pys_module_themes.css satir 1-1190 (bolundu: 2026-08-28)
 *
 * !! YUKLEME SIRASI KRITIK !!
 * Bu dosya ailesi (pys_module_themes_1..7) UC YERDE numara sirasiyla
 * yuklenmek ZORUNDA: web/index.html, web/yonetim/index.html ve
 * pys_motivation_system.js yazdirma penceresi. Dosya kronolojik bolundu:
 * sonraki parcalar oncekileri KASITLI eziyor. Sira bozulursa gorunum
 * sessizce bozulur (hata vermez).
 *
 * ICERIK: Kurumsal kimlik v2 (Plus Jakarta Sans + Cabin, sicak zemin, HCP mavi ailesi), A3 banner + serit, segment cubugu, kontrol sarmalayici, teslim et butonu, Gonderilmedi durumu, kategori grup ayraci, durum modali basligi, kategorisiz is daveti, durum popup sure/kategori
 * ===========================================================================
 */
/** OBİG PYS — kurumsal kimlik v2 (Plus Jakarta Sans + Cabin, sıcak zemin, HÇP mavi ailesi). */

/* Yazı tipleri bu dosyada DEĞİL: hepsi tek kaynakta — assets/pys_fonts.css.
   Uygulama ve tanıtım sayfaları o dosyayı ayrı bir <link> ile yükler. Buraya
   yeniden @font-face yazma; ağırlık eklemek gerekirse pys_fonts.css güncellenir.
   (2026-08-15: Google Fonts bağımlılığı kaldırıldı, dosyalar kendi sunucumuzda.) */
/* —— OBİG PYS Design Token Sistemi v2 —— */
:root {
    /* Fontlar */
    --pys-font-display: 'Plus Jakarta Sans', 'Cabin', system-ui, sans-serif;
    --pys-font-sans:    'Cabin', system-ui, sans-serif;

    /* ── Yazı ölçeği (Paket 1, 2026-08-19) ───────────────────────────────────
       Değerlendirme panelinde 41 ayrı yazı boyu vardı (8px'den 32px'e, arada
       10 tane rem değeri): 11.5 ile 12, 12.5 ile 13, 14 ile 15 yan yana
       duruyordu. Yarım pikselli fark hiyerarşi ÜRETMEZ, yalnız hizasızlık
       üretir — ayrım artık boyutla değil renk + kalınlıkla taşınıyor.
       Kademeler arasında gerçek boşluk var; yeni kural bu altı değerin
       DIŞINA çıkmaz. Ham px yazmak yerine tokenı kullan.
         xs  mikro   — rozet, çip, meta satırı, ipucu
         sm  gövde   — buton, ikincil etiket
         md  başlık  — iş başlığı, bileşen başlığı, uzun metin okuma
         lg  bölüm   — kart/bölüm başlığı
         xl  sayı    — büyük sayaç
         2xl hero    — kutlama/boş durum görseli */
    --pys-fs-xs:  12px;
    --pys-fs-sm:  13px;
    --pys-fs-md:  15px;
    --pys-fs-lg:  18px;
    --pys-fs-xl:  22px;
    --pys-fs-2xl: 32px;

    /* İkon ölçeği — glif boyu metin ölçeğinden AYRI ailedir. Aynı yerde 8, 9,
       10, 10.5, 11, 13.5px glifler vardı; artık dört kademe + iki hero.
       Metin tokenıyla karıştırma: ikon boyu satır yüksekliğini metin gibi
       etkilemez, kendi ölçeğinde kalması gerekir. */
    --pys-fi-xs:  10px;
    --pys-fi-sm:  12px;
    --pys-fi-md:  14px;
    --pys-fi-lg:  18px;
    --pys-fi-xl:  26px;
    --pys-fi-2xl: 32px;

    /* ── Boşluk ölçeği (Paket 1, 2026-08-19) ─────────────────────────────────
       Değerlendirme yüzeyinde 28 ayrı boşluk değeri vardı ve dörtte biri
       ölçek dışıydı: 1, 3, 5, 7, 9, 11, 13, 14, 15, 17, 18, 22, 26, 28, 30px.
       Yan yana duran iki çipin biri 7px, öteki 8px dolgu alıyordu — hizasızlık
       böyle doğuyor. 367 değer en yakın basamağa oturtuldu.
       Aşağıdaki basamakların DIŞINA çıkma; adı zaten değerini söylüyor.
       (Mevcut kurallar hâlâ ham px yazar — çok değerli kısayollarda
       `padding: var(--pys-space-12) var(--pys-space-16)` okunaksız kalıyordu;
       token yeni kurallar ve tek değerli boşluklar için.) */
    --pys-space-2:  2px;
    --pys-space-4:  4px;
    --pys-space-6:  6px;
    --pys-space-8:  8px;
    --pys-space-10: 10px;
    --pys-space-12: 12px;
    --pys-space-16: 16px;
    --pys-space-20: 20px;
    --pys-space-24: 24px;
    --pys-space-32: 32px;
    --pys-space-48: 48px;

    /* ── Köşe + yükseklik merdiveni (Paket 1, 2026-08-19) ────────────────────
       Bu iki merdivenin ASLI web/index.html içindeki :root bloğuydu. Sorun:
       pys_module_themes.css'i yükleyen ikinci sayfa (web/yonetim/index.html) o
       bloğu TAŞIMIYOR — orada var(--pys-radius-*) tanımsız kalıyor ve köşe
       sessizce 0'a düşüyor. Tanım buraya kopyalandı: değerler index.html'deki
       ile BİREBİR aynı, bu dosya sonra yüklendiği için kazanan taraf burası.
       Yeni token yazacaksan BURAYA yaz; index.html'deki blok eski kayıt.
       ⚠️ İki kopya ayrışırsa görünen değer BU dosyadakidir. */
    --pys-radius-2xs: 2px;
    --pys-radius-xs:  4px;
    --pys-radius-sm:  8px;
    --pys-radius-md:  12px;
    --pys-radius-lg:  16px;
    --pys-radius-xl:  20px;
    --pys-radius-pill: 999px;
    --pys-elev-flat-xs: 0 1px 0 0;
    --pys-elev-flat-sm: 0 2px 0 0;
    --pys-elev-flat-md: 0 3px 0 0;
    --pys-elev-1: 0 1px 3px 0;
    --pys-elev-2: 0 3px 12px 0;
    --pys-elev-3: 0 8px 24px 0;

    /* HÇP modül renk ailesi */
    --hcp1: #3FA0EC;
    --hcp2: #1E6FD0;
    /* Klavye odak halkası — tek kaynak (açık zeminde AA geçen koyu mavi) */
    --hcp-focus-ring: #1a63c4;
    --hcp-s:  #2E8FFF;
    --hcp-sh: #1F7DEB;
    --hcp-sa: #1A6FD4;

    /* Diğer modül renkleri */
    --etk1:    #F9A02A; --etk2:    #EE6E12;
    --motiv1:  #FF8A47; --motiv2:  #ED4F2C;
    --das1:    #B85AE0; --das2:    #9134C4;
    --superv1: #1FC6B6; --superv2: #0E938C;
    --saglik1: #2BC07A; --saglik2: #16A05A;
    --veri1:   #8366F0; --veri2:   #5E3FD6;
    --aile1:   #FF6088; --aile2:   #E84C72;
    --dash1:   #1FA8EC; --dash2:   #12C2C0;
    --ok1:     #19C37D; --ok2:     #5FD98C;

    /* Aksiyon — tek kaynak: HÇP/modül renk ailesi (üstte). Aynı hex'i tekrar
       yazma; yeni rol/aksiyon tokenını var() ile aileye bağla (#9 renk tek kaynak).
       Koyu temada kendisi override edilen token (ör. action-primary) oradan yönetilir. */
    --color-action-primary:      var(--hcp-s);
    --color-action-primary-deep: var(--hcp-sa);
    --color-role-control:        var(--hcp2);
    --color-role-manager:        var(--das1);
    --color-deadline:            var(--motiv2);

    /* Durum renkleri */
    --color-status-pending:  #2563EB;
    --color-status-progress: #F59E0B;
    --color-status-success:  #16A34A;
    --color-status-info:     var(--hcp2);
    --color-status-danger:   #EF4444;
    --color-status-muted:    var(--das1);
    --color-status-neutral:  #5a6c70;
    --color-status-warning:  #F59E0B;
    --color-status-indigo:   #4338CA; /* rapor-hazır bildirimi ailesi */

    /* HÇP değerlendirme işaretleri — TEK KAYNAK (yeşil / kırmızı / mavi / gri).
       + Tamamlandı=yeşil, − Tamamlanamadı=kırmızı, R Revizyon=MAVİ
       (Devam Ediyor amberi ile çakışmasın), DD Değerlendirme dışı=GRİ (nötr "sayılmıyor").
       Kontrol + Geri Bildirim panelleri BURADAN okur; başka yere renk sabiti yazma. */
    /* ── P3 "Elektrik" paleti (2026-08-18, Alperen onayı) ────────────────────
       Önceki palet iki somut sorun taşıyordu, ikisi de ölçüldü:
         · Hızlanalım amberi (#D97706) beyaz glifle 3,2:1 — ikon turuncuda kayboluyordu.
         · Tamamlandı yeşili (#16A34A) beyaz glifle 3,3:1 ve Yolunda turkuazıyla yakın.
       Yeni palet yüksek kroma ama disiplinli; her ton beyaz glifi taşıyacak eşikte.
       Alperen kararı: Tamamlandı AÇIK yeşil, Yolunda KOYU yeşil — ikisi aynı aileden
       ama luminans olarak açıkça ayrılıyor, üstelik biçim de farklı (daire vs kare).
       -lt = madalyon gradyanının AÇIK ucu (yeni). Gradyanın açık ucunda beyaz glif
       düşük kontrast verir; bu yüzden glife koyu hale eklendi (bkz. control.css).
       2026-08-18 (Alperen kararı — Seçenek B): Tamamlandı'nın açık ucu #34D77E
       beyaz glifle yalnız 1,88:1 veriyordu (WCAG 1.4.11 eşiği 3:1). Bir kademe
       koyultuldu → #17A85D = 3,09:1. Koyu hale ölçüm yedeği olarak KALIYOR.
       Aynı gün Revizyon açık ucu (#3E9BFF, 2,86:1) da aynı gerekçeyle
       koyultuldu → #2E86F5 = 3,59:1. */
    --hcp-mark-plus:        #10B981;  --hcp-mark-plus-soft:   #E2F6EF;  --hcp-mark-plus-ink:   #085C40;

/* Formal AA (2026-08-19, Alperen kararı: "formal aa isterim"): gradyanların AÇIK
   ucunda beyaz glif eşiğin altındaydı. Açık uçlar TON KORUNARAK koyulaştırıldı —
   yalnız parlaklık düştü, renk kimliği (yeşil/kırmızı/mavi/gri/magenta) aynı.
   Beyaz glif kontrastı: Tamamlandı 3,09 → 4,63 · Tamamlanamadı 3,48 → 4,50
   · Revizyon 3,59 → 4,52 · Değerlendirilmez 3,08 → 4,55 · Hızlanalım 3,29 → 4,54.
   Yolunda (#1E7A46) zaten 5,35:1 — DOKUNULMADI. Koyu ucalar hiç değişmedi,
   gradyanın kendisi duruyor. */
    --hcp-mark-plus-lt:     #10B981;
    --hcp-mark-minus:       #F43F5E;  --hcp-mark-minus-soft:  #FDE7EB;  --hcp-mark-minus-ink:  #7A1F2F;
    --hcp-mark-minus-lt:    #F43F5E;
    --hcp-mark-revise:      #0EA5E9;  --hcp-mark-revise-soft: #E2F4FC;  --hcp-mark-revise-ink: #075274;
    --hcp-mark-revise-lt:   #0EA5E9;
    --hcp-mark-dd:          #8B5CF6;  --hcp-mark-dd-soft:     #F1EBFD;  --hcp-mark-dd-ink:     #452E7B;
    --hcp-mark-dd-lt:       #8B5CF6;
    /* Ara durum işaretleri (2026-08-06 işaret sistemi v2). Yolunda artık KOYU YEŞİL
       (turkuaz değil), Hızlanalım MAGENTA (amber değil) — amber "Devam Ediyor"
       grubunun rengiydi ve işaretle karışıyordu, üstelik beyaz glifi taşımıyordu. */
    --hcp-mark-ontrack:     #F59E0B;  --hcp-mark-ontrack-soft: #FDF3E1; --hcp-mark-ontrack-ink: #7A4F05;
    --hcp-mark-ontrack-lt:  #F59E0B;
    --hcp-mark-speedup:     #EC4899;  --hcp-mark-speedup-soft: #FCE9F2; --hcp-mark-speedup-ink: #76244C;
    --hcp-mark-speedup-lt:  #EC4899;

    /* Durum arka planları */
    --color-status-pending-bg:   #DBEAFE;
    --color-status-progress-bg:  #FEF3C7;
    --color-status-success-bg:   #D1FAE5;
    --color-status-info-bg:      #E7F2FF;
    --color-status-danger-bg:    #FEE2E2;
    --color-status-muted-bg:     #EDE9FE;

    /* Uyarı — friday/overdue hex kalır: status-progress/danger koyu temada
       override edilir, uyarı renkleri ise her temada sabit (zincirlenirse koyu
       temada istenmeden açılırlar). */
    --color-warn-friday:   #F59E0B;
    --color-warn-saturday: var(--motiv2);
    --color-warn-overdue:  #EF4444;

    /* Marka */
    --color-brand-cini:      var(--hcp1);
    --color-brand-cini-deep: var(--hcp2);
    --color-brand-kobalt:    var(--hcp2);

    /* İlerleme — full/zero hex kalır (kaynakları koyu temada değişiyor, çubuk
       renkleri her temada sabit kalmalı). */
    --hcp-progress-full: #16A34A;
    --hcp-progress-high: var(--hcp-s);
    --hcp-progress-mid:  #F59E0B;
    --hcp-progress-low:  var(--hcp-sa);
    --hcp-progress-zero: #EEECE6;

    /* Zemin & kart */
    --color-background-primary:   #ffffff;
    --color-background-secondary: #FBFAF6;
    --color-background-tertiary:  #EEECE6;

    /* Metin — SICAK kağıt ailesi (panel yüzeyinin kendi tonu) */
    --color-text-primary:   #1b2a2e;
    --color-text-secondary: #3A5058;
    --color-text-tertiary:  #687A80;

    /* Metin — SOĞUK slate merdiveni (Paket 1, 2026-08-19).
       Değerlendirme panelinde metin rengi olarak 114 ayrı hex vardı; soğuk gri
       ailesinde #0F172A, #1E293B, #1F2937, #334155, #475569, #52627A, #5C6B85,
       #64748B, #6B7280 gibi birbirinden gözle ayırt edilemeyen tonlar yan yana
       duruyordu. Beş basamağa indi. Birleştirme her zaman KOYU olana doğru
       yapıldı — kontrast hiçbir yerde düşmedi, iki yerde yükseldi:
         #64748B (52 kural) krem zeminde 4,22:1 (AA ALTI) -> #5C6B85 4,78:1 ✓
         #52627A -> #475569  6,20 -> 7,58:1
       ⚠️ Sıcak kağıt ailesiyle BİRLEŞTİRİLMEDİ: ikisini tek aileye indirmek
       sanat yönetimi kararıdır (Katman/krem yüzeyin karakterine dokunur) ve
       Alperen'e sorulacak. ⚠️ Karanlık mod açılırsa bu beş tokenın da
       html.pys-theme-dark altında karşılığı yazılmalı. */
    --pys-ink-1: #0F172A;
    --pys-ink-2: #1E293B;
    --pys-ink-3: #334155;
    --pys-ink-4: #475569;
    --pys-ink-5: #5C6B85;

    /* Kenarlık */
    --color-border-secondary: #C4BFB3;
    --color-border-tertiary:  #D9D5CE;

    /* Gölge & boyut */
    --hcp-row-border-width: 3px;
    --hcp-row-radius: 0.875rem;
    --hcp-card-shadow: 0 1px 2px rgba(11,42,80,.06), 0 6px 18px rgba(11,42,80,.10);
    --hcp-btn-shadow: 0 2px 6px rgba(46,143,255,.26), 0 8px 20px rgba(46,143,255,.22);
    --hcp-btn-shadow-strong: 0 4px 12px rgba(46,143,255,.3), 0 10px 26px rgba(22,160,210,.26);

    /* HÇP status tokens */
    --hcp-status-info:    #2563EB;
    --hcp-status-warning: #F59E0B;
    --hcp-status-success: #16A34A;
    --hcp-status-danger:  #EF4444;
    --hcp-status-purple:  #B85AE0;
}

html.pys-theme-dark {
    --color-action-primary:      #3FA0EC;
    --color-status-pending:      #60a5fa;
    --color-status-success:      #34d399;
    --color-status-progress:     #fbbf24;
    --color-status-danger:       #f87171;
    --color-status-muted:        #c084fc;
    --color-status-neutral:      #9aa0a0;
    --color-status-pending-bg:   rgba(59, 130, 246, 0.12);
    --color-status-progress-bg:  rgba(245, 158, 11, 0.12);
    --color-status-success-bg:   rgba(22, 163, 74, 0.12);
    --color-status-danger-bg:    rgba(239, 68, 68, 0.12);
    --color-status-muted-bg:     rgba(184, 90, 224, 0.12);
    --color-background-primary:  #1a2428;
    --color-background-secondary:#1f2d32;
    --color-background-tertiary: #253338;
    --color-text-primary:        #e8e4dc;
    --color-text-secondary:      #9aa0a0;
    --color-text-tertiary:       #96a3a3;
    --color-border-secondary:    #2e3d42;
    --color-border-tertiary:     #263238;
}

@keyframes hcp-rise { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
/* Paneller (Plan/Kontrol/Geri Bildirim) acilirken yumusak giris — hcp-rise tanimliydi
   ama hicbir yere uygulanmamisti; tab gecisleri artik "snap" yerine yumusak. */
#main-app #page-hcp .hcp-role-panel:not(.hidden) { animation: hcp-rise 0.28s ease; }
@media (prefers-reduced-motion: reduce) {
    #main-app #page-hcp .hcp-role-panel:not(.hidden) { animation: none; }
}

/* —— A3 Banner + şerit —— */
.pys-hcp-banner-wrap {
    border-radius: 14px;
    overflow: visible;
    border: 0.5px solid var(--color-border-tertiary);
}
.pys-hcp-banner-wrap .pys-hero-band--hcp {
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    box-shadow: none;
    animation: none;
    margin: 0;
    min-height: 0;
    background: linear-gradient(118deg, #3FA0EC 0%, #1E6FD0 52%, #0B2A50 100%);
}
.pys-hcp-banner-wrap .pys-hero-band__inner {
    padding: 18px 22px 16px;
    min-height: 0;
}
.pys-hcp-banner-wrap .pys-hero-band__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 24px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}
.pys-hcp-banner-wrap .pys-hero-band__kicker {
    font-size: 11px;
    letter-spacing: 0.04em;
    font-weight: 600;
    opacity: 0.82;
    text-transform: none;
}
.pys-hcp-banner-wrap .pys-hero-band__title {
    font-size: 1.65rem;
    font-weight: 700;
    text-shadow: none;
    letter-spacing: -0.01em;
    font-family: var(--pys-font-display);
}

/* —— HÇP header aksiyon barı (Brief 2B) —— */
.hcp-header-action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 14px 18px 16px;
    background: #ffffff;
    border-radius: 0 0 16px 16px;
    border-top: 1.5px solid #efece4;
    box-shadow: 0 4px 16px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.9);
}
/* Uyarı/Cumartesi vurgusu: yasak üst renk şeridi yerine tint + yumuşak renkli gölge. */
.hcp-header-action-bar--warn { background: #fffbeb; box-shadow: 0 4px 16px rgba(245,158,11,.20), inset 0 1px 0 rgba(255,255,255,.9); }
.hcp-header-action-bar--saturday { background: #fff7ed !important; box-shadow: 0 4px 16px rgba(249,115,22,.22), inset 0 1px 0 rgba(255,255,255,.9); }
.hcp-header-left,
.hcp-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.hcp-header-icons-scroll {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.hcp-header-iw {
    position: relative;
    flex-shrink: 0;
}
.hcp-header-iw.hidden { display: none !important; }
.hcp-header-iw .tip {
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-text-primary, #0f172a);
    color: var(--color-background-primary, #fff);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 9px;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s;
    z-index: 5;
}
.hcp-header-iw:hover .tip { opacity: 1; }
.hcp-header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    width: 38px;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    flex-shrink: 0;
    box-shadow: var(--hcp-btn-shadow);
}
.hcp-header-icon-btn i { font-size: 16px; }
.hcp-header-icon-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow: var(--hcp-btn-shadow-strong);
}
/* Klavye ile gezinirken odak halkası görünsün (koyu bant üstünde beyaz) */
.hcp-header-icon-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hcp-header-icon-btn--feedback {
    background: linear-gradient(135deg, #3FA0EC, #1E6FD0) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.hcp-header-icon-btn--analyze {
    background: linear-gradient(135deg, #3FA0EC, #1E6FD0) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.hcp-header-icon-btn--leave {
    background: linear-gradient(135deg, #F9A02A, #EE6E12) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.hcp-header-icon-btn--assign {
    background: linear-gradient(135deg, #3FA0EC, #1E6FD0) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.hcp-header-icon-btn--outgoing {
    background: linear-gradient(135deg, #2BC07A, #16A05A) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.hcp-header-icon-btn--feedback { position: relative; }
.hcp-header-icon-btn--feedback.is-active {
    box-shadow: inset 0 0 0 2px rgba(24, 95, 165, 0.45);
}
.hcp-header-icon-btn--feedback .hcp-fb-dot,
.hcp-header-icon-btn--control .hcp-ctrl-dot {
    top: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    background: #BA7517;
    border-color: var(--color-background-primary, #fff);
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid #fff;
}
.hcp-header-icon-btn--control .hcp-ctrl-dot { background: #1D4ED8; }
.hcp-header-icon-btn.has-alert {
    animation: hcp-header-pulse 1.8s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(186, 117, 23, 0.45);
}
.hcp-header-icon-btn--control.has-alert {
    box-shadow: 0 0 0 0 rgba(29, 78, 216, 0.4);
}
@keyframes hcp-header-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(186, 117, 23, 0.35); }
    50% { box-shadow: 0 0 0 6px rgba(186, 117, 23, 0); }
}
.hcp-header-icon-btn--control { position: relative; }
.hcp-edited-mark--minimal,
.hcp-pending-mark--minimal {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    padding: 0;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}
.hcp-edited-mark--minimal { background: #94a3b8; }
.hcp-pending-mark--minimal { background: #f59e0b; }
.hcp-history-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #fafafa;
}
.hcp-history-card__head { font-size: 11px; color: #64748b; margin-bottom: 6px; }
.hcp-history-diff { font-size: 12px; color: #1b2a2e; padding: 2px 0; }
.hcp-history-field__old { color: #94a3b8; text-decoration: line-through; }
.hcp-history-field__new { color: #0f172a; font-weight: 500; }
.hcp-fb-panel--page {
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    padding: 16px;
}
.hcp-fb-panel__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.hcp-fb-panel__title {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}
.hcp-fb-back-btn {
    border: none;
    background: #FBFAF6;
    color: #1b2a2e;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.hcp-fb-back-btn:hover { background: #e2e8f0; }
.hcp-header-vsep {
    width: 1px;
    height: 26px;
    background: var(--color-border-tertiary, #e2e8f0);
    margin: 0 2px;
    flex-shrink: 0;
}
.hcp-header-submit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 44px;
    padding: 0 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: linear-gradient(135deg, #3FA0EC, #16C7E0);
    color: #fff;
    font-family: var(--pys-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 2px 6px rgba(22,160,210,.28), 0 10px 26px rgba(22,160,210,.3);
    flex-shrink: 0;
    white-space: nowrap;
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.hcp-header-action-wrap {
    position: relative;
    flex-shrink: 0;
}
.hcp-header-action-wrap.hidden { display: none !important; }
.hcp-header-control {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, #3FA0EC, #1E6FD0);
    color: #fff;
    font-family: var(--pys-font-display);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 6px rgba(46,143,255,.26), 0 8px 20px rgba(46,143,255,.22);
    flex-shrink: 0;
    white-space: nowrap;
    position: relative;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.hcp-header-control:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}
.hcp-header-control .hcp-ctrl-dot {
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #FBBF24;
    border-color: #1D4ED8;
    position: absolute;
    border-radius: 50%;
    border: 2px solid #1D4ED8;
}
.hcp-header-control.has-alert {
    animation: hcp-header-pulse-control 1.8s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.45);
}
@keyframes hcp-header-pulse-control {
    0%, 100% { box-shadow: 0 3px 10px rgba(29, 78, 216, 0.32), 0 0 0 0 rgba(251, 191, 36, 0.4); }
    50% { box-shadow: 0 3px 10px rgba(29, 78, 216, 0.32), 0 0 0 6px rgba(251, 191, 36, 0); }
}
.hcp-header-submit:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}
.hcp-header-submit.warn-saturday {
    background: linear-gradient(135deg, #F97316, #EA580C);
    box-shadow: 0 4px 16px rgba(234, 88, 12, 0.38);
}
.hcp-header-submit.hidden { display: none !important; }

/* —— Segment çubuğu —— */
.hcp-segment-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: visible;
    flex-shrink: 0;
}
/* Birleşik segment grubu (Analizim + Kontrol) — tek temiz gölge */
.hcp-segment-bar .hcp-seg--analyze,
.hcp-segment-bar .hcp-seg--control-wrap {
    box-shadow: 0 2px 8px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.08);
}
/* "Eksikler" çipi (.hcp-submit-blockers-hint) kaldırıldı — teslim engeli yok, çip hiç
   görünmüyordu. (2026-08-06 denetim, G1) */
.hcp-seg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    font-weight: 800;
    font-size: 13px;
    border: none;
    cursor: pointer;
    font-family: var(--pys-font-sans, inherit);
    border-right: 1px solid rgba(255, 255, 255, 0.14);
    white-space: nowrap;
    color: #fff;
    transition: filter 0.15s ease;
}
.hcp-seg:hover { filter: brightness(1.12); }
/* Analizim — turkuaz (Seçenek B) */
.hcp-seg--analyze {
    background: linear-gradient(135deg, #16B3C4, #0C8F9F);
    border-radius: 12px 0 0 12px;
}
/* Kontrol sarmalayıcı */
.hcp-seg--control-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}
.hcp-seg--control-wrap.hidden { display: none !important; }
/* Kontrol — HÇP mavi */
.hcp-seg--control-main {
    background: linear-gradient(135deg, #3FA0EC, #1E6FD0);
    border-radius: 12px 0 0 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    position: relative;
}
.hcp-seg--control-main.hidden { display: none !important; }
.hcp-seg--control-main.has-alert {
    animation: hcp-header-pulse-control 1.8s ease-in-out infinite;
}
.hcp-seg--control-main .hcp-ctrl-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: #F9A02A;
    border-radius: 50%;
    border: 2px solid #1E6FD0;
}
/* Chevron — koyu HÇP */
.hcp-seg--control-chevron {
    background: linear-gradient(135deg, #1E6FD0, #1A6FD4);
    border-radius: 0 12px 12px 0;
    border-right: none;
    border-left: 2px solid rgba(255, 255, 255, 0.22);
    padding: 0 13px;
    font-size: 11px;
    font-weight: 900;
}
.hcp-seg--control-chevron.hidden { display: none !important; }
.hcp-seg--control-chevron:hover { background: linear-gradient(135deg, #1A6FD4, #185EC0); }
/* Geribildirimler — HÇP mavi */
.hcp-seg--feedbacks-direct {
    background: linear-gradient(135deg, #3FA0EC, #1E6FD0);
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}
.hcp-seg--feedbacks-direct.hidden { display: none !important; }
/* Teslim et butonu */
@keyframes cowBlink {
    0%, 89%, 96%, 100% { transform: scaleY(1); }
    92% { transform: scaleY(0.07); }
}
@keyframes ikvFly {
    0%   { opacity: 0; transform: translate(0, 0) scale(0.9); }
    22%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-82px, -66px) scale(1.06); }
}
@keyframes successPop {
    0%   { transform: scale(1); }
    42%  { transform: scale(1.055); }
    100% { transform: scale(1); }
}
@keyframes teslim-spin {
    to { transform: rotate(360deg); }
}

.teslim-btn {
    font-family: var(--pys-font-display);
    font-weight: 700;
    font-size: 14px;
    height: 44px;
    min-width: 128px; /* İş Ata / İzin ile eşit taban genişlik */
    color: white;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    position: relative;
    overflow: visible;
    border-radius: 12px;
    background: linear-gradient(135deg, #F23127, #C01818);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 2px 6px rgba(192,24,24,.30), 0 10px 26px rgba(192,24,24,.32);
    transition: background .28s, box-shadow .22s, transform .14s;
}
/* Kırmızı hover/aktif efektleri yalnız GERÇEKTEN gönderilebilir durumda çalışır.
   :not(.missed) şart: seçici özgüllüğü (0,4,0) .teslim-btn.missed:hover'ı (0,3,0)
   yenerdi ve nötr buton üzerine gelince kırmızıya dönerdi. */
.teslim-btn:hover:not(.submitted):not(.missed):not(.loading) {
    background: linear-gradient(135deg, #DD1F1F, #A11212);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 12px rgba(217,45,32,.34), 0 14px 34px rgba(217,45,32,.4);
}
.teslim-btn:active:not(.submitted):not(.missed) {
    transform: translateY(0);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.18);
}
.teslim-btn .layer-normal {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 24px 0 17px;
    transition: opacity .2s;
}
.teslim-btn .layer-normal svg {
    width: 24px;
    height: 23px;
    flex-shrink: 0;
}
.teslim-btn .layer-submitted,
.teslim-btn .layer-missed,
.teslim-btn .layer-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: inherit;
    opacity: 0;
    transition: opacity .25s;
    font-weight: 600;
    font-size: 15px;
    color: white;
    pointer-events: none;
    padding: 0 18px;
    white-space: nowrap;
}
/* Gönderildi: kırmızı inek → altın sarısı madalya (başarı anı).
   Daha net madalya hissi: canlı altın gradient, ince altın kenar halkası,
   yumuşak altın gölge; yazı koyu altın-kahve (#5A3D00) ile AA kontrast. */
.teslim-btn.submitted {
    background: linear-gradient(135deg, #FCD34D 0%, #F0B429 45%, #D9970B 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(146,94,0,.4), 0 3px 12px rgba(180,120,0,.32);
    color: #5A3D00;
    cursor: default;
}
.teslim-btn.submitted:hover {
    background: linear-gradient(135deg, #FCD34D 0%, #F0B429 45%, #D9970B 100%);
    transform: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(146,94,0,.4), 0 3px 12px rgba(180,120,0,.32);
}
.teslim-btn.submitted .layer-normal { opacity: 0; }
.teslim-btn.submitted .layer-submitted { opacity: 1; pointer-events: auto; color: #5A3D00; font-weight: 700; letter-spacing: .01em; }
.teslim-btn.submitted .layer-submitted i { font-size: 17px; line-height: 1; }
/* Yönetici: kilidi açmak için tıklanabilir — üzerine gelince koyu altın.
   (Eski ::after kilit ikonu butondan dışarı taşıyordu — kaldırıldı; sarı banttaki
   "Hafta kapandı + Kilidi Aç" zaten kilit sinyalini veriyor.) */
.teslim-btn.submitted.teslim-btn--unlockable { cursor: pointer; }
.teslim-btn.submitted.teslim-btn--unlockable:hover {
    background: linear-gradient(135deg, #F0B429, #C77C02);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 4px 12px rgba(180,120,0,.34);
}
.teslim-btn.submitted.teslim-btn--unlockable:hover .layer-submitted { color: #fff; }
/* Üçüncü durum — "Gönderilmedi": hafta kapandı ve plan hiç teslim edilmedi.
   Altın madalya YALNIZ gerçek teslime aittir; teslim edilmemiş planı altın
   göstermek aynı ekrandaki "henüz teslim edilmedi" şeridiyle çelişiyordu.
   Nötr taş rengi: ne ödül (altın) ne çağrı (kırmızı) — yalnız kayıt.
   Yazı #4A463F krem/gri zeminde AA üstü kontrast verir. */
.teslim-btn.missed {
    background: linear-gradient(135deg, #F3F1EC 0%, #E2DFD7 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(90,86,78,.26), 0 2px 8px rgba(60,56,50,.12);
    color: #4A463F;
    cursor: default;
}
.teslim-btn.missed:hover {
    background: linear-gradient(135deg, #F3F1EC 0%, #E2DFD7 100%);
    transform: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(90,86,78,.26), 0 2px 8px rgba(60,56,50,.12);
}
.teslim-btn.missed .layer-normal { opacity: 0; }
.teslim-btn.missed .layer-missed {
    opacity: 1;
    pointer-events: auto;
    color: #4A463F;
    font-weight: 700;
    letter-spacing: .01em;
}
.teslim-btn.missed .layer-missed i { font-size: 16px; line-height: 1; }
.teslim-btn.loading .layer-normal { opacity: 0; }
.teslim-btn.loading .layer-loading { opacity: 1; }
.teslim-btn.justsubmitted { animation: successPop .34s ease; }
.teslim-btn.hidden { display: none !important; }
.teslim-btn:disabled,
.teslim-btn[disabled] {
    background: #EEECE6;
    color: #6b6a63;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.teslim-btn .cow-eye {
    transform-box: fill-box;
    transform-origin: center;
    animation: cowBlink 2.6s ease-in-out infinite;
}
.teslim-btn .cow-eye.right { animation-delay: .04s; }
.teslim-btn .ikv-text {
    position: absolute;
    right: 18px;
    top: 50%;
    margin-top: -10px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 19px;
    letter-spacing: .03em;
    background: linear-gradient(135deg, #FB6B5B, #D92D20);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #D92D20;
    filter: drop-shadow(0 1px 1.5px rgba(255,255,255,.88));
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    user-select: none;
    z-index: 5;
}
.teslim-btn:hover:not(.submitted):not(.missed):not(.loading) .ikv-text {
    animation: ikvFly 2s cubic-bezier(.22,.7,.3,1) 1 forwards;
}
.teslim-btn.warn-saturday {
    background: linear-gradient(135deg, #F23127, #C01818);
}
.teslim-btn.warn-saturday:hover:not(.submitted):not(.missed):not(.loading) {
    background: linear-gradient(135deg, #DD1F1F, #A11212);
}
.teslim-btn .spinner {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: white;
    border-radius: 50%;
    animation: teslim-spin .7s linear infinite;
    flex-shrink: 0;
}
/* Kontrol dropdown */
.hcp-control-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 196px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    box-shadow:
        0 12px 32px rgba(15, 23, 42, 0.16),
        0 3px 8px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.9);
    z-index: 300;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 5px 0;
}
.hcp-ctrl-dd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: var(--pys-fs-sm);
    font-weight: 700;
    color: var(--pys-ink-1);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease;
}
.hcp-ctrl-dd-item:hover { background: #FBFAF6; color: #1A63C4; }
.hcp-ctrl-dd-item i { width: 15px; font-size: var(--pys-fi-md); opacity: 0.85; }
#hcp-ctrl-dd-feedbacks i { color: #0E938C; }
#hcp-ctrl-dd-assign i { color: #1a63c4; }
#hcp-ctrl-dd-leave i { color: #F9A02A; }

/* —— Work area chip'leri zaten var, ek selector stilleri —— */
.hcp-wa-selector-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.hcp-wa-selector {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    background: #fff;
    border: 1.5px solid #3FA0EC;
    border-radius: 9px;
    padding: 0 11px;
    font-size: 13px;
    font-weight: 700;
    color: #1b2a2e;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(15,23,42,0.06);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.hcp-wa-selector:hover { border-color: #1a63c4; background: #F0F6FF; box-shadow: 0 2px 8px rgba(46,143,255,0.18); }
.hcp-wa-selector--disabled { opacity: 0.45; pointer-events: none; }
.hcp-wa-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.hcp-wa-chevron { font-size: 10px; opacity: 0.5; margin-left: 2px; }
.hcp-wa-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #fff;
    border: 1px solid #e7e3da;
    border-radius: 12px;
    box-shadow:
        0 12px 32px rgba(15, 23, 42, 0.16),
        0 3px 8px rgba(15, 23, 42, 0.08);
    /* Yukarı açıldığında başlık/ilerleme şeridinin üstünde kalsın (eskiden şeridin
       altında kalıp içerikle çakışıyordu). */
    z-index: 1200;
    padding: 10px;
    /* max-height dolguyu ve kenarlığı DA kapsasın: JS yüksekliği offsetHeight ile
       (yani dolgu dahil) ölçüyor, content-box'ta ikisi 22px kayıyor ve menü ekranın
       altından o kadar taşıyordu. */
    box-sizing: border-box;
    max-height: 280px;
    overflow-y: auto;
    /* Kompakt çip ızgarası (2026-08-12, mockup Öneri 3): gruplar ince ayraç
       satırı, kategoriler yan yana akan renkli çipler. Eski 3 kolonlu ızgara
       560px genişliği ve mavi grup bantlarıyla ekranda kesiliyordu; bu form
       hem dar hem kısa — 21 kategori kaydırmasız görünür. */
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 5px;
    width: min(400px, 92vw);
}
.hcp-wa-dd-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    color: #1b2a2e;
    background: #F2F5FA;
    border: none;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    border-radius: 7px;
    transition: background 0.12s ease, box-shadow 0.12s ease;
}
.hcp-wa-dd-item:focus-visible { outline: 2px solid #1a63c4; outline-offset: 1px; }
/* Açıkken menü gövdeye taşınır (portal): ekrana göre konumlanır, hiçbir üst kap
   kırpamaz. Konum JS'ten inline gelir; burada yalnız bağlam ve katman. */
.hcp-wa-dropdown--portal {
    position: fixed;
    z-index: 2000;
    margin: 0;
}
/* Kategori grup ayracı — tam satır kaplar: küçük Title Case etiket + ince çizgi.
   Eski mavi zeminli banner dikeyde yer yiyordu. */
.hcp-wa-dd-group {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 2px 1px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #7b8794;
}
.hcp-wa-dd-group::after { content: ''; flex: 1; height: 1px; background: #E8EDF4; }
.hcp-wa-dd-group:first-child { margin-top: 0; }
.hcp-wa-dd-item .hcp-wa-dot { width: 8px; height: 8px; box-shadow: none; }
.hcp-wa-dd-item:hover { background: #E9EEF6; }
.hcp-wa-dd-item.is-selected { background: #E7F2FF; color: #1a63c4; box-shadow: inset 0 0 0 1.5px #1a63c4; }
/* Çip kendi renginin açık tonuyla dolar; hover/seçimde ton koyulaşır */
@supports (background: color-mix(in srgb, red 10%, white)) {
    .hcp-wa-dd-item { background: color-mix(in srgb, var(--wa-color, #CBD5E1) 10%, #fff); }
    .hcp-wa-dd-item:hover { background: color-mix(in srgb, var(--wa-color, #CBD5E1) 20%, #fff); }
    .hcp-wa-dd-item.is-selected {
        background: color-mix(in srgb, var(--wa-color, #1E6FD0) 26%, #fff);
        color: #1b2a2e;
        box-shadow: inset 0 0 0 1.5px var(--wa-color, #1a63c4);
    }
}
/* Boş durum — kategori seçilmedi (zorunlu): belirgin mavi çağrı */
.hcp-wa-selector--empty { background: #F0F6FF; border-color: #3FA0EC; }
.hcp-wa-selector--empty .hcp-wa-label { color: #1A63C4; font-weight: 700; }
.hcp-wa-selector--empty .hcp-wa-dot {
    background: conic-gradient(from 90deg, #8366F0, #3FA0EC, #16B3C4, #16A34A, #F9A02A, #FF6088, #8366F0) !important;
    width: 12px; height: 12px; box-shadow: 0 0 0 2px rgba(255,255,255,0.7);
}
.hcp-quick-add--disabled .hcp-wa-selector { opacity: 0.45; }
/* Kategori seçilmeden eklemeye çalışınca dikkat çekici uyarı (kısa süre) */
@keyframes hcp-wa-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(225,29,72,0.55); transform: translateX(0); }
    15%  { transform: translateX(-4px); }
    30%  { transform: translateX(4px); }
    45%  { transform: translateX(-3px); }
    60%  { transform: translateX(3px); }
    75%  { transform: translateX(0); }
    100% { box-shadow: 0 0 0 10px rgba(225,29,72,0); transform: translateX(0); }
}
.hcp-wa-selector--pulse {
    animation: hcp-wa-pulse 0.9s ease-out 2;
    border-color: #E11D48 !important;
    background: #FFF1F2 !important;
}
.hcp-wa-selector--pulse .hcp-wa-label { color: #BE123C !important; font-weight: 700; }
/* Durum modalı başlığı seçilen durumun yumuşak tonunu alır — hangi modda olduğun belli */
.hcp-center-modal[data-sp-status="completed"] .hcp-center-modal__head { background: #EAF7EF; }
.hcp-center-modal[data-sp-status="completed"] .hcp-center-modal__title { color: #15803D; }
.hcp-center-modal[data-sp-status="in_progress"] .hcp-center-modal__head { background: #FFF7E8; }
.hcp-center-modal[data-sp-status="in_progress"] .hcp-center-modal__title { color: #B45309; }
.hcp-center-modal[data-sp-status="not_completed"] .hcp-center-modal__head { background: #FEECEC; }
.hcp-center-modal[data-sp-status="not_completed"] .hcp-center-modal__title { color: #B91C1C; }
/* Vazgecildi = mor aile (buton/gosterge moruyla ayni dil; eskiden tek bu sey gri kaliyordu) */
.hcp-center-modal[data-sp-status="abandoned"] .hcp-center-modal__head { background: #F3E8FF; }
.hcp-center-modal[data-sp-status="abandoned"] .hcp-center-modal__title { color: #6D28D9; }
/* Açıklama sayacı sınıra yaklaşınca uyarır */
.hcp-sp-counter--warn { color: #B45309 !important; font-weight: 700; }
.hcp-sp-counter--limit { color: #B91C1C !important; font-weight: 700; }
/* "Yapılacaklara geri al" iki adımlı onay durumu */
.hcp-sp-revert.is-armed { color: #B91C1C !important; font-weight: 700; }
/* Kategorisi seçilmemiş işlerin soluk daveti */
.hcp-area-badge--none {
    border: 1px dashed #CBD5E1;
    background: #F8FAFC;
    font-style: italic;
}
.hcp-area-badge--none .hcp-area-badge__label { color: #5c686b; }
/* Durum popup: süre (sol) + kategori (sağ) */
.hcp-sp-row2 { display: flex; gap: 12px; align-items: flex-start; }
.hcp-sp-row2 .hcp-sp-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hcp-sp-row2 .hcp-wa-selector-wrap,
.hcp-sp-row2 .hcp-wa-selector { width: 100%; }
.hcp-sp-row2 .hcp-wa-selector { justify-content: space-between; }
/* Durum popup'ı kaydırılabilir gövdede; kategori menüsü/özel giriş YUKARI açılır ki kırpılmasın */
.hcp-sp-row2 .hcp-wa-dropdown { left: auto; right: 0; top: auto; bottom: calc(100% + 6px); }
/* "Diğer" özel kategori adı girişi — selector'ın hemen altında */
.hcp-wa-custom {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    display: flex;
    gap: 6px;
    align-items: center;
    width: max-content;
    min-width: 280px;
    max-width: min(360px, 86vw);
    background: #fff;
    border: 1px solid #3FA0EC;
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16), 0 3px 8px rgba(15, 23, 42, 0.08);
    z-index: 320;
}
/* Durum panelinde sağa hizala (ekran dışına taşmasın) */
.hcp-sp-row2 .hcp-wa-custom { left: auto; right: 0; top: auto; bottom: calc(100% + 6px); }
.hcp-wa-custom-input {
    flex: 1;
    min-width: 0;
    border: 1px solid #e7e3da;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
    color: #1b2a2e;
    outline: none;
}
.hcp-wa-custom-input:focus { border-color: #1a63c4; box-shadow: 0 0 0 3px rgba(46,143,255,0.15); }
.hcp-wa-custom-ok {
    flex-shrink: 0;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: #1E6FD0;
    cursor: pointer;
}
.hcp-wa-custom-ok:hover { background: #1559aa; }

.hcp-header-progress {
    min-width: 0;
}
.hcp-header-progress--ring {
    display: flex;
    align-items: center;
    gap: 10px;
}
.hcp-header-progress__ring {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: conic-gradient(
        #16A34A 0deg calc(var(--progress-pct, 0) * 3.6deg),
        #3FA0EC calc(var(--progress-pct, 0) * 3.6deg) calc((var(--progress-pct, 0) + var(--progress-wip, 0)) * 3.6deg),
        #EEECE6 calc((var(--progress-pct, 0) + var(--progress-wip, 0)) * 3.6deg) 360deg
    );
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.12);
}
.hcp-header-progress__ring::after {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: #fff;
}
.hcp-header-progress__ring.is-empty {
    background: #e2e8f0;
}
.hcp-header-progress__ring.is-complete {
    background: conic-gradient(#16A34A 0deg 360deg);
}
.hcp-header-progress__ring-icon {
    position: relative;
    z-index: 1;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    color: #15803D;
    background: linear-gradient(135deg, #D1FAE5, #ecfdf5);
}
.hcp-header-progress__ring.is-empty .hcp-header-progress__ring-icon { color: #94a3b8; background: #f8fafc; }
.hcp-header-progress__meta { min-width: 0; }
.hcp-header-progress__stats {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #15803D;
    line-height: 1.25;
}
.hcp-header-progress__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
    gap: 8px;
}
.hcp-header-progress__label {
    font-size: 11px;
    color: var(--color-text-secondary, #64748b);
    white-space: nowrap;
}
.hcp-header-progress__pct {
    font-size: 12px;
    font-weight: 500;
    color: #15803D;
}
.hcp-header-progress__pct.hidden { display: none; }
.hcp-header-progress__bar {
    display: flex;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--color-background-secondary, #FBFAF6);
    width: 120px;
}
.hcp-header-progress__seg { height: 100%; transition: width 0.25s ease; }
.hcp-header-progress__seg--done {
    background: linear-gradient(90deg, #5FD98C, #16A34A);
}
.hcp-header-progress__seg--wip { background: #3FA0EC; }