/* Ateon One — arayüz stilleri
   dashboard.html'den ayrıldı (Faz 4). */

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Arial, sans-serif; }
        body { height: 100vh; overflow: hidden; background-color: #f1f5f9; }

        /* ---------- GİRİŞ EKRANI ---------- */
        #login-screen { height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); }
        .login-box { background: white; padding: 40px; border-radius: 14px; width: 380px; box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
        .login-logo { font-size: 24px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
        .login-sub { font-size: 12px; color: #64748b; margin-bottom: 28px; }
        .login-error { background: #fee2e2; color: #b91c1c; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
        .login-hint { margin-top: 18px; font-size: 11px; color: #64748b; text-align: center; line-height: 1.6; }

        /* ---------- ANA UYGULAMA ---------- */
        #app { display: none; height: 100vh; }
        #app.active { display: flex; }
        aside { width: 260px; background-color: #0f172a; color: #94a3b8; display: flex; flex-direction: column; justify-content: space-between; flex-shrink: 0; overflow-y: auto; overflow-x: hidden; transition: width 0.2s ease; }
        .sb-header { padding: 20px; border-bottom: 1px solid #1e293b; color: white; font-weight: bold; font-size: 18px; display: flex; align-items: center; gap: 12px; }
        .hamburger { background: none; border: none; color: #94a3b8; cursor: pointer; padding: 4px; display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
        .hamburger span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
        .hamburger:hover { color: #3b82f6; }
        .sb-title { flex-grow: 1; white-space: nowrap; overflow: hidden; }

        /* --- Uygulama değiştirici (hamburger paneli) --- */
        #app-switcher { background: #0b0f19; border-bottom: 1px solid #1e293b; padding: 10px; }
        .switcher-title { font-size: 10px; color: #475569; font-weight: bold; text-transform: uppercase; padding: 6px 10px 10px; }
        .app-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px; color: #cbd5e1; background: #0f172a; border: 1px solid #1e293b; border-radius: 8px; text-align: left; font-size: 13px; font-weight: 700; cursor: pointer; margin-bottom: 8px; }
        .app-item:hover { border-color: #3b82f6; color: white; }
        .app-item.app-current { border-color: #3b82f6; background: #1e293b; color: #3b82f6; }
        .app-item .app-icon { font-size: 20px; }
        .app-item .app-desc { display: block; font-size: 10px; font-weight: 500; color: #64748b; margin-top: 2px; }
        .app-locked { opacity: 0.4; cursor: not-allowed; }

        /* --- Yetki matrisi tablosu --- */
        .perm-table td, .perm-table th { text-align: center; }
        .perm-table td:first-child, .perm-table th:first-child { text-align: left; font-weight: 700; }
        .perm-table input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

        /* --- Aranabilir açılır liste (büyüteçli) --- */
        .search-select { position: relative; }
        .search-select input { width: 100%; padding: 8px 30px 8px 32px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; background-color: #f8fafc; font-family: inherit; }
        .search-select input:focus { outline: 2px solid #2563eb; outline-offset: 1px; border-color: #3b82f6; background: white; }
        .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; color: #64748b; pointer-events: none; }
        .search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #cbd5e1; cursor: pointer; font-size: 14px; padding: 2px 4px; }
        .search-clear:hover { color: #ef4444; }
        .search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: white; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 8px 20px rgba(15,23,42,0.12); max-height: 260px; overflow-y: auto; z-index: 50; }
        .search-item { padding: 9px 12px; font-size: 13px; cursor: pointer; border-bottom: 1px solid #f1f5f9; }
        .search-item:last-child { border-bottom: none; }
        .search-item:hover, .search-item.active { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
        .search-item .item-sub { display: block; font-size: 11px; color: #64748b; font-weight: 400; margin-top: 2px; }
        .search-empty { padding: 14px 12px; font-size: 12px; color: #64748b; text-align: center; }
        .sb-brand { font-size: 11px; color: #64748b; display: block; margin-top: 2px; }
        nav { padding: 15px; flex-grow: 1; }
        .nav-title { font-size: 10px; color: #475569; font-weight: bold; text-transform: uppercase; padding: 10px 10px 6px; display: block; }
        .nav-group-title { font-size: 10px; color: #64748b; font-weight: bold; text-transform: uppercase; padding: 14px 10px 4px; margin-top: 6px; border-top: 1px solid #1e293b; display: block; }
        .nav-group-title:first-of-type { border-top: none; margin-top: 0; }
        .nav-link { width: 100%; display: block; padding: 9px 12px; color: #94a3b8; background: none; border: none; border-radius: 6px; text-align: left; font-size: 13px; font-weight: 600; cursor: pointer; margin-bottom: 3px; }
        .nav-link:hover { background-color: #1e293b; color: #3b82f6; }
        .nav-active { background-color: #1e293b; color: #3b82f6; border-left: 4px solid #3b82f6; border-radius: 0 6px 6px 0; }
        .sb-footer { padding: 15px; border-top: 1px solid #1e293b; background-color: #0b0f19; font-size: 12px; color: white; }
        .sb-user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
        .logout-btn { width: 100%; background: #1e293b; color: #94a3b8; border: none; padding: 8px; border-radius: 6px; font-size: 12px; cursor: pointer; font-weight: 600; }
        .logout-btn:hover { background: #334155; color: white; }

        main { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; }
        header { height: 56px; background-color: white; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
        .h-title { font-size: 16px; font-weight: 700; color: #1e293b; }
        .sync-btn { background-color: #3b82f6; color: white; border: none; padding: 8px 14px; font-size: 12px; font-weight: 600; border-radius: 6px; cursor: pointer; }
        .sync-btn:hover { background-color: #2563eb; }
        .c-body { padding: 24px; overflow-y: auto; flex-grow: 1; }
        .hidden { display: none !important; }

        /* ODAK GÖSTERGESİ — WCAG 2.2 SC 2.4.11 (Odak Görünümü)
           Tarayıcı varsayılanı rgb(16,16,16) çiziyor. Açık zeminde iş görüyor
           ama KOYU KENAR ÇUBUĞUNDA (#0f172a) kontrast 1.07:1 — pratikte
           görünmez. Gerçek tarayıcıda Tab'layarak ölçüldü; statik taramada
           yakalanmıyor çünkü CSS'te "outline: none" yok, sorun varsayılan
           halkanın rengi. */
        :focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
        aside :focus-visible { outline-color: #93c5fd; }   /* 9.9:1 */

        .grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 24px; }
        .card { background-color: white; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; }
        .card-title { font-size: 11px; font-weight: bold; color: #64748b; text-transform: uppercase; }
        .card-value { font-size: 26px; font-weight: 800; color: #1e293b; margin-top: 4px; }
        .card-icon { font-size: 24px; }
        .panel-box { background-color: white; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; margin-bottom: 24px; }
        .panel-header { padding: 14px 20px; background-color: #f8fafc; border-bottom: 1px solid #e2e8f0; font-size: 12px; font-weight: bold; color: #64748b; display: flex; justify-content: space-between; align-items: center; }
        table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
        th { padding: 12px 20px; background-color: #f1f5f9; color: #475569; font-weight: 600; font-size: 11px; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
        td { padding: 13px 20px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
        .form-group { margin-bottom: 12px; }
        .form-group label { font-size: 11px; font-weight: bold; color: #64748b; display: block; margin-bottom: 4px; }
        .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; background-color: #f8fafc; font-family: inherit; }
        .form-group textarea { resize: vertical; min-height: 60px; }
        .two-col { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; }

        .badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: capitalize; white-space: nowrap; }
        .badge-new, .badge-open, .badge-planned, .badge-todo, .badge-qualification { background: #dbeafe; color: #1d4ed8; }
        .badge-qualified, .badge-active, .badge-in_progress, .badge-contacted, .badge-proposal { background: #fef3c7; color: #b45309; }

        /* --- Talep durumları: her biri ayrı renk (T33) ---
           Önceden on_hold ile in_progress aynı sarıydı; hangi talebin
           beklemede olduğu listeye bakınca anlaşılmıyordu.
           SLA'yı DURAKLATAN durumlar mor/gri ailesinde toplandı — SLA
           rozetindeki "duraklatıldı" moruyla aynı dili konuşsun. */
        .badge-on_hold          { background: #e2e8f0; color: #475569; }
        .badge-work_planned     { background: #e0e7ff; color: #4338ca; }
        .badge-waiting_customer { background: #ede9fe; color: #6d28d9; }
        .badge-waiting_vendor   { background: #ccfbf1; color: #0f766e; }
        .badge-converted, .badge-completed, .badge-resolved, .badge-closed, .badge-done, .badge-closed_won { background: #dcfce7; color: #15803d; }
        .badge-Critical { background: #7f1d1d; color: #fff; }
        .badge-High { background: #fee2e2; color: #b91c1c; }
        .badge-Medium { background: #fef3c7; color: #b45309; }
        .badge-Low { background: #dbeafe; color: #1d4ed8; }
        .badge-Info { background: #f1f5f9; color: #64748b; }
        .badge-urgent, .badge-high, .badge-closed_lost, .badge-escalated, .badge-expired { background: #fee2e2; color: #b91c1c; }
        .badge-normal, .badge-low, .badge-negotiation, .badge-cancelled { background: #f1f5f9; color: #475569; }

        .status-select { padding: 4px 8px; border-radius: 6px; border: 1px solid #cbd5e1; font-size: 11px; background: white; }
        .link-tag { font-size: 11px; color: #3b82f6; background: #eff6ff; padding: 2px 8px; border-radius: 6px; }
        /* #94a3b8 idi — beyaz zeminde 2.56:1, WCAG AA (4.5:1) altında.
           #64748b 4.76:1 veriyor. Koyu kenar çubuğundaki #94a3b8
           kullanımları DEĞİŞMEDİ: orada zaten 6.96:1. */
        .muted { color: #64748b; font-size: 12px; }
        .row-link { color:#3b82f6; font-weight:700; text-decoration:none; cursor: pointer; }
        .row-link:hover { text-decoration: underline; }
        .activity-item { display: flex; gap: 10px; padding: 10px 20px; border-bottom: 1px solid #f1f5f9; font-size: 13px; align-items: center; }
        .activity-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px; text-transform: uppercase; flex-shrink: 0; }
        .tag-CRM { background: #dbeafe; color: #1d4ed8; }
        .tag-Desk { background: #fee2e2; color: #b91c1c; }
        .tag-Proje { background: #dcfce7; color: #15803d; }
        /* WCAG 2.2 SC 2.5.8 — en az 24x24 CSS px. Öncesinde yalnızca 14px yazı
   tipiydi, tıklama alanı ~14x14 idi. Renk de #cbd5e1'den koyulaştırıldı:
   beyaz zeminde 1.48:1 veriyordu, simge neredeyse görünmezdi. */
.del-btn { background: none; border: none; color: #64748b; cursor: pointer;
           font-size: 14px; min-width: 24px; min-height: 24px;
           display: inline-flex; align-items: center; justify-content: center; }
        .del-btn:hover { color: #ef4444; }
        /* --- HealthCheck yardımcıları --- */
        /* Görsel olarak gizli ama ekran okuyucuya açık. Tablo içindeki
           girdilerin görünür etiketi olamıyor ama etiketsiz de kalamaz. */
        .sr-only { position: absolute; width: 1px; height: 1px; padding: 0;
                   margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
                   white-space: nowrap; border: 0; }
        /* Satır içi küçük eylem butonu. min-height 24px: WCAG 2.2 SC 2.5.8 */
        .mini-btn { background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0;
                    padding: 4px 10px; border-radius: 6px; font-size: 11px;
                    font-weight: 600; cursor: pointer; min-height: 24px; margin-right: 4px; }
        .mini-btn:hover { background: #e2e8f0; }
        .mini-btn.danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
        .mini-btn.danger:hover { background: #fee2e2; }
        .badge-ok { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0;
                    padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
        .link-btn { background: none; border: none; padding: 0; color: #2563eb;
                    text-decoration: underline; cursor: pointer; font-size: inherit;
                    min-height: 24px; }
        .sync-btn.secondary { background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; }
        .convert-btn { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; cursor: pointer; }
        .convert-btn:hover { background: #d1fae5; }
        .empty-row td { text-align: center; color: #64748b; padding: 24px; font-size: 12px; }
        .row-actions { display: flex; gap: 6px; align-items: center; }

        /* Kullanıcı rozeti (Zoho'daki renkli owner etiketi) */
        .user-chip { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; color: white; white-space: nowrap; }
        .avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: 700; flex-shrink: 0; }

        /* Ticket detay: sol özellik paneli + sağ konuşma alanı */
        .ticket-layout { display: grid; grid-template-columns: 340px 1fr; gap: 24px; align-items: start; }
        .prop-group { margin-bottom: 18px; }
        .prop-group-title { font-size: 12px; font-weight: 800; color: #1e293b; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid #e2e8f0; }
        .prop-row { margin-bottom: 10px; }
        .prop-label { font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; }
        .prop-value { font-size: 13px; color: #1e293b; margin-top: 2px; }
        .comment { padding: 14px 20px; border-bottom: 1px solid #f1f5f9; }
        .comment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
        .comment-body { font-size: 13px; color: #334155; white-space: pre-wrap; line-height: 1.6; }

        /* --- Hesap detayı: Zoho tarzı iki sütunlu etiket-değer düzeni --- */
        .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 40px; margin-bottom: 18px; }
        .detail-row { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f8fafc; align-items: start; }
        .detail-label { font-size: 12px; color: #64748b; text-align: right; }
        .detail-value { font-size: 13px; color: #1e293b; word-break: break-word; }
        .section-title { font-size: 13px; font-weight: 800; color: #1e293b; padding-bottom: 8px; margin: 22px 0 14px; border-bottom: 1px solid #e2e8f0; }
        .section-title:first-child { margin-top: 0; }
        .two-col-equal { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
        .preview-item { padding: 10px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
        .preview-item:last-child { border-bottom: none; }
        .note-item { display: flex; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #f1f5f9; }
        .note-body { flex: 1; font-size: 13px; color: #334155; white-space: pre-wrap; line-height: 1.6; }
        .note-meta { font-size: 11px; color: #64748b; margin-top: 6px; }
        /* Başlık açıklamadan KOYULUK ve punto ile ayrılıyor; art arda düşülen
           notlar aynı puntoda akınca hangisinin neyle ilgili olduğu
           okunmuyordu. `white-space` .note-body'den miras geliyor. */
        .note-title { font-size: 13.5px; font-weight: 700; color: #0f172a; margin-bottom: 3px; }
        .note-text { color: #475569; }
        /* Firmanın Mevcut Çözümleri — ürün · kategori · üretici satırları.
           Sabit dört kolon: silme düğmesi hep aynı hizada kalsın. */
        .cozum-baslik, .cozum-satir {
            display: grid; grid-template-columns: 2fr 1.3fr 1.3fr 32px;
            gap: 8px; align-items: center; }
        .cozum-baslik { font-size: 11.5px; font-weight: 700; color: #64748b;
            text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; }
        .cozum-satir { margin-bottom: 6px; }
        /* Satır içi düzenleme: alanın tıklanabilir olduğunu belli eden
           kesikli alt çizgi. Kutuya çevirmek kartı forma benzetiyordu. */
        .inline-duzenlenebilir { cursor: pointer; border-bottom: 1px dashed #cbd5e1; }
        .inline-duzenlenebilir:hover { border-bottom-color: #3b82f6; background: #f8fafc; }
        .inline-girdi { width: 100%; padding: 4px 7px; border: 1px solid #3b82f6;
            border-radius: 5px; font-size: 13px; font-family: inherit; }
        .cozum-satir select, .cozum-satir input {
            width: 100%; padding: 7px 9px; border: 1px solid #cbd5e1;
            border-radius: 6px; font-size: 13px; font-family: inherit; }

        @media (max-width: 992px) {
            .detail-grid { grid-template-columns: 1fr; gap: 0; }
            .two-col-equal { grid-template-columns: 1fr; }
        }
        @media (max-width: 640px) {
            .detail-row { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
            .detail-label { text-align: left; }
        }

        /* --- Aday (Lead) kart listesi --- */
        .lead-card { display: flex; justify-content: space-between; gap: 20px;
                     padding: 18px 20px; border-bottom: 1px solid #f1f5f9; }
        .lead-card:last-child { border-bottom: none; }
        .lead-card:hover { background: #f8fafc; }
        .lead-name { font-size: 17px; font-weight: 700; color: #1e293b; margin-bottom: 8px;
                     cursor: pointer; }
        .lead-name:hover { color: #3b82f6; }
        .lead-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12.5px; color: #334155; }
        .lead-meta .lm { display: inline-flex; gap: 5px; align-items: center; }
        .lead-meta .lm-label { color: #64748b; }
        .lead-meta .sep { color: #e2e8f0; }
        .lead-side { text-align: right; min-width: 170px; }
        .lead-owner { font-size: 13px; font-weight: 600; color: #334155; }
        .lead-date { font-size: 12px; color: #64748b; margin-top: 2px; }
        .lead-actions { margin-top: 8px; display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

        @media (max-width: 768px) {
            .lead-card { flex-direction: column; gap: 10px; }
            .lead-side { text-align: left; }
            .lead-actions { justify-content: flex-start; }
        }

        /* --- Talep detay sekmeleri --- */
        .td-tabs { display: flex; border-bottom: 2px solid #e2e8f0; overflow-x: auto; }
        .td-tab { padding: 13px 18px; background: none; border: none; font-size: 12.5px;
                  font-weight: 700; color: #64748b; cursor: pointer; white-space: nowrap;
                  border-bottom: 2px solid transparent; margin-bottom: -2px; font-family: inherit; }
        .td-tab:hover { color: #1e293b; }
        .td-tab-active { color: #1d4ed8; border-bottom-color: #1d4ed8; }
        .chan-badge { display: inline-block; padding: 2px 8px; border-radius: 5px;
                      font-size: 10px; font-weight: 700; margin-left: 8px; }
        .chan-email_in { background: #dcfce7; color: #15803d; }
        .chan-email_out { background: #dbeafe; color: #1d4ed8; }
        .chan-note { background: #f1f5f9; color: #64748b; }
        .chan-portal { background: #fef3c7; color: #b45309; }
        .att-row { display: flex; justify-content: space-between; align-items: center;
                   gap: 12px; padding: 13px 20px; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
        .hist-row { display: flex; gap: 14px; padding: 13px 20px; border-bottom: 1px solid #f1f5f9;
                    font-size: 12.5px; }
        .hist-dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; margin-top: 5px; flex-shrink: 0; }

        /* --- Fırsat (Deal) kalem tabloları --- */
        .line-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .line-table th { padding: 10px 12px; background: #f1f5f9; color: #475569;
                         font-size: 11px; font-weight: 700; text-align: left;
                         border: 1px solid #e2e8f0; white-space: nowrap; }
        .line-table td { padding: 6px; border: 1px solid #e2e8f0; }
        .line-table input, .line-table select { width: 100%; padding: 7px 9px; border: 1px solid #cbd5e1;
                         border-radius: 5px; font-size: 12.5px; background: #f8fafc; font-family: inherit; }
        .line-table input[readonly] { background: #f1f5f9; color: #64748b; }
        .line-table .row-del { background: none; border: none; color: #cbd5e1; cursor: pointer; font-size: 14px; }
        .line-table .row-del:hover { color: #ef4444; }

        /* --- Fırsat kart listesi --- */
        .deal-card { display: flex; justify-content: space-between; gap: 20px;
                     padding: 18px 20px; border-bottom: 1px solid #f1f5f9; }
        .deal-card:last-child { border-bottom: none; }
        .deal-card:hover { background: #f8fafc; }
        .deal-title { font-size: 17px; font-weight: 700; color: #1e293b; margin-bottom: 8px; cursor: pointer; }
        .deal-title:hover { color: #3b82f6; }
        .stage-chip { display: inline-block; padding: 3px 12px; border-radius: 20px;
                      font-size: 11px; font-weight: 700; color: white; white-space: nowrap; }

        @media (max-width: 768px) {
            .deal-card { flex-direction: column; gap: 10px; }
        }

        /* --- Desk talep tablosu ---
           Satır yüksekliği sabit: uzun konular iki satıra sarınca satırlar
           farklı boylarda oluyor, göz tabloda kayıyordu. Taşan metin üç
           noktayla kesiliyor, tamamı title'da duruyor. */
        #table-desk-list td { height: 46px; padding: 0 14px;
                              overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
        #table-desk-list th { padding: 10px 14px; }
        #table-desk-list td .row-link { display: inline-block; max-width: 100%;
                              overflow: hidden; text-overflow: ellipsis;
                              white-space: nowrap; vertical-align: middle; }
        /* Satırın tamamı talebi açıyor */
        .talep-satiri { cursor: pointer; }

        /* Sütun genişliği tutamağı: başlıkların arasında, sürüklenince
           sütun genişler. Başlığın kendisi sıralama yaptığı için tutamak
           tıklamayı yutuyor (bkz. core.js). */
        .sutun-tutamac { position: absolute; top: 0; right: 0; width: 7px; height: 100%;
                         cursor: col-resize; user-select: none; }
        .sutun-tutamac:hover { background: #93c5fd; }

        /* --- Desk görünüm menüsü ---
           Görünümler soldaki 260px'lik sütundan üstteki açılır menüye taşındı
           (.view-item ve arkadaşları o sütunla birlikte kaldırıldı).
           Menü başlık gibi durmalı: kendi kutusu olmasın, zemini panelle aynı
           kalsın; düzenlenebilir olduğu yalnızca fare üstüne gelince
           çerçeveyle belli olsun. */
        .gorunum-sec { background: transparent; border: 1px solid transparent;
                       border-radius: 8px; font-family: inherit; font-size: 15px;
                       font-weight: 700; color: #1e293b; padding: 6px 8px;
                       cursor: pointer; max-width: 380px; }
        .gorunum-sec:hover { border-color: #cbd5e1; }
        .gorunum-sec:focus { outline: 2px solid #2563eb; outline-offset: 1px; border-color: #3b82f6; }
        .gorunum-sec optgroup { font-size: 11px; color: #64748b; }
        .gorunum-sec option { font-size: 13px; font-weight: 600; color: #1e293b; }
        .crit-row { display: grid; grid-template-columns: 40px 1fr 1fr 1.4fr 36px; gap: 8px;
                    align-items: center; margin-bottom: 8px; }
        .crit-row select, .crit-row input { padding: 8px 10px; border: 1px solid #cbd5e1;
                    border-radius: 6px; font-size: 13px; background: #f8fafc; width: 100%; font-family: inherit; }
        .crit-no { text-align: center; font-size: 12px; color: #64748b; font-weight: 700; }
        @media (max-width: 768px) {
            .crit-row { grid-template-columns: 1fr; }
            .crit-no { text-align: left; }
        }

        /* Tıklanınca düzenlenebilen alanlar */
        .editable-field { cursor: pointer; border-radius: 6px; padding: 2px 6px; margin-left: -6px; transition: background 0.15s; }
        .editable-field:hover { background: #eff6ff; box-shadow: inset 0 0 0 1px #bfdbfe; }
        .editable-field:hover::after { content: " ✏️"; font-size: 11px; opacity: 0.7; }

        /* --- Projects modülü --- */
        .badge-not_started { background: #f1f5f9; color: #475569; }
        .badge-delayed, .badge-fixed, .badge-reopened { background: #fee2e2; color: #b91c1c; }
        .badge-Critical-sev { background: #7f1d1d; color: #fff; }
        .badge-Major { background: #fee2e2; color: #b91c1c; }
        .badge-Minor { background: #fef3c7; color: #b45309; }
        .badge-Trivial { background: #f1f5f9; color: #64748b; }

        .progress-track { background: #f1f5f9; border-radius: 20px; height: 8px; overflow: hidden; }
        .progress-fill { height: 100%; background: #3b82f6; transition: width 0.3s; }
        .progress-fill.complete { background: #16a34a; }

        .project-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
        .project-card { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px 20px; cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s; }
        .project-card:hover { border-color: #93c5fd; box-shadow: 0 2px 10px rgba(59,130,246,0.12); }
        .project-card-title { font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 6px; }
        .project-card-meta { font-size: 12px; color: #64748b; margin-bottom: 12px; }
        .project-card-stats { display: flex; gap: 14px; margin-top: 12px; font-size: 11.5px; color: #64748b; }

        /* Görev listesi — Zoho Projects'in liste görünümüne denk.
           Kanban ikinci görünüm olarak duruyor; Zoho'nun varsayılanı bu tablo. */
        .gorev-tablo-sarmal { overflow-x: auto; }
        .gorev-tablo { width: 100%; border-collapse: collapse; font-size: 12.5px; }
        .gorev-tablo th { position: sticky; top: 0; z-index: 2; background: #f8fafc; color: #475569;
            font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
            text-align: left; padding: 9px 12px; border-bottom: 1px solid #e2e8f0;
            border-right: 1px solid #eef2f7; white-space: nowrap; }
        .gorev-tablo td { padding: 0 12px; height: 38px; border-bottom: 1px solid #eef2f7;
            border-right: 1px solid #f1f5f9; vertical-align: middle; }
        /* Durum hücresi bilinçli olarak dışarıda: dolu renkli zemini var ve
           yazısı beyaz. Hover arka planı ona da uygulanınca beyaz üstüne
           beyaz kalıp okunamaz oluyordu. */
        .gorev-tablo tbody tr:hover td:not(.durum-hucre) { background: #fafbfd; }

        /* Grup başlığı: görev listesi adı + içindeki görev sayısı */
        .gorev-grup td { background: #f8fafc; border-bottom: 1px solid #e2e8f0;
            font-weight: 700; color: #1e293b; height: 40px; }
        .gorev-grup td:hover { background: #f1f5f9; }
        .gorev-grup .grup-sayi { color: #64748b; font-weight: 600; margin-left: 6px; }
        .gorev-grup .grup-ok { display: inline-block; width: 14px; color: #64748b;
            transition: transform .12s; }
        .gorev-grup.kapali .grup-ok { transform: rotate(-90deg); }

        /* Görev satırı — solda renkli şerit, Zoho'daki gibi */
        .gorev-satir td:first-child { box-shadow: inset 3px 0 0 #60a5fa; }
        .gorev-satir.tamam td:first-child { box-shadow: inset 3px 0 0 #34d399; }
        .gorev-anahtar { color: #64748b; font-size: 11.5px; white-space: nowrap; }
        .gorev-ad { color: #1d4ed8; cursor: pointer; font-weight: 600; }
        .gorev-ad:hover { text-decoration: underline; }
        .gorev-alt { padding-left: 18px; position: relative; }
        .gorev-alt::before { content: "↳"; position: absolute; left: 2px; color: #64748b; }

        /* Durum: Zoho'da hücrenin tamamı dolu renkli.
           Renk span'e değil td'ye veriliyor — span'in height:100%'i, td'nin
           yüksekliği içeriğe göre değiştiğinde tutmuyor ve üstte altta beyaz
           şerit bırakıyordu. */
        .durum-hucre { text-align: center; font-weight: 700; color: #fff !important;
            font-size: 11.5px; padding: 6px 8px !important; }
        .durum-todo, .data-table tbody tr:hover .durum-todo { background: #22c55e; }
        .durum-in_progress, .data-table tbody tr:hover .durum-in_progress { background: #3b82f6; }
        .durum-on_hold, .data-table tbody tr:hover .durum-on_hold { background: #f59e0b; }
        .durum-done, .data-table tbody tr:hover .durum-done { background: #64748b; }
        /* Proje durumları */
        .durum-planned, .data-table tbody tr:hover .durum-planned { background: #8b5cf6; }
        .durum-active, .data-table tbody tr:hover .durum-active { background: #14b8a6; }
        .durum-completed, .data-table tbody tr:hover .durum-completed { background: #0ea5e9; }
        .durum-cancelled, .data-table tbody tr:hover .durum-cancelled { background: #ef4444; }

        /* Uzun proje/liste adları satırı şişirmesin */
        .gorev-tablo .kisalt { max-width: 190px; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; }
        /* Sayfalama çubuğu — Zoho'nun tablo altındaki şeridi */
        .sayfa-cubugu { display: flex; align-items: center; justify-content: flex-end; gap: 14px;
            padding: 10px 18px; border-top: 1px solid #e2e8f0; background: #f8fafc;
            font-size: 12.5px; color: #475569; flex-wrap: wrap; }
        .sayfa-cubugu select { padding: 4px 8px; border: 1px solid #cbd5e1; border-radius: 6px;
            font-size: 12.5px; }
        .sayfa-btn { background: #fff; border: 1px solid #cbd5e1; border-radius: 6px;
            width: 28px; height: 28px; cursor: pointer; color: #475569; font-size: 13px; }
        .sayfa-btn:hover:not(:disabled) { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
        .sayfa-btn:disabled { opacity: .4; cursor: default; }

        /* Toplu seçim */
        .sec-sutun { width: 34px; text-align: center; }
        /* Seçim vurgusu durum hücresinin dolu rengini ezmesin */
        .gorev-satir.secili td:not(.durum-hucre) { background: #eff6ff !important; }
        .toplu-cubuk { display: flex; align-items: center; gap: 12px; padding: 9px 18px;
            background: #1e293b; color: #fff; font-size: 12.5px; }
        .toplu-cubuk select { padding: 4px 8px; border-radius: 6px; border: none; font-size: 12.5px; }
        .toplu-cubuk button { background: #3b82f6; color: #fff; border: none; padding: 5px 12px;
            border-radius: 6px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
        .toplu-cubuk .vazgec { background: transparent; text-decoration: underline; }

        /* AI cevabı akarken yanıp sönen imleç */
        .yaziyor { animation: yaziyor-yanip-son 1s steps(2) infinite; color: #3b82f6; font-weight: 700; }
        @keyframes yaziyor-yanip-son { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

        .gorev-ekle-satir td { color: #64748b; font-size: 12px; }
        .gorev-ekle-satir a { color: #64748b; cursor: pointer; margin-right: 14px; }
        .gorev-ekle-satir a:hover { color: #1d4ed8; text-decoration: underline; }

        /* Görünüm seçici — Zoho'nun turuncu "All Open" başlığı */
        .gorunum-secici { border: none; background: transparent; color: #ea580c;
            font-weight: 700; font-size: 14px; cursor: pointer; padding: 4px 2px; }

        /* Kanban board */
        .kanban-board { display: grid; grid-template-columns: repeat(4, minmax(230px, 1fr)); gap: 14px; overflow-x: auto; padding: 18px 20px; align-items: start; }
        .kanban-col { background: #f8fafc; border-radius: 10px; padding: 10px; min-height: 120px; }
        .kanban-col-header { font-size: 11.5px; font-weight: 800; color: #475569; text-transform: uppercase; padding: 6px 8px 10px; display: flex; justify-content: space-between; }
        .kanban-col.drag-over { background: #eff6ff; box-shadow: inset 0 0 0 2px #93c5fd; }
        .kanban-card { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; cursor: grab; font-size: 12.5px; }
        .kanban-card:hover { border-color: #93c5fd; }
        .kanban-card.dragging { opacity: 0.4; }
        .kanban-card-title { font-weight: 700; color: #1e293b; margin-bottom: 6px; }
        .kanban-card-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
        .kanban-card-sub { font-size: 10.5px; color: #64748b; margin-top: 4px; }

        /* Gantt (basit özel timeline) */
        .gantt-scroll { overflow-x: auto; }
        .gantt-wrap { min-width: 760px; }
        .gantt-header-row { display: flex; border-bottom: 2px solid #e2e8f0; padding: 8px 0; }
        .gantt-label-col { width: 260px; flex-shrink: 0; font-size: 11px; font-weight: 800; color: #64748b; text-transform: uppercase; padding: 0 12px; }
        .gantt-timeline-col { flex: 1; position: relative; font-size: 11px; color: #64748b; }
        .gantt-row { display: flex; align-items: center; border-bottom: 1px solid #f1f5f9; min-height: 38px; }
        .gantt-row.gantt-group-row { background: #f8fafc; }
        .gantt-row-label { width: 260px; flex-shrink: 0; padding: 0 12px; font-size: 12.5px; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .gantt-row-label.gantt-group-label { font-weight: 800; color: #475569; font-size: 11.5px; text-transform: uppercase; }
        .gantt-track { flex: 1; position: relative; height: 24px; }
        .gantt-bar { position: absolute; top: 3px; height: 18px; border-radius: 5px; background: #93c5fd; overflow: hidden; }
        .gantt-bar-fill { height: 100%; background: #2563eb; }
        .gantt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #ef4444; }

        .subtask-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 12.5px; }
        .dep-chip { display: inline-flex; align-items: center; gap: 6px; background: #f1f5f9; border-radius: 6px; padding: 4px 10px; font-size: 12px; margin: 3px 6px 3px 0; }
        .dep-chip button { background: none; border: none; color: #64748b; cursor: pointer; font-size: 12px; }
        .dep-chip button:hover { color: #ef4444; }

        /* Proje detay başlık paneli */
        .pd-hero { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px 24px; margin-bottom: 20px; }
        .pd-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
        .pd-hero-title { font-size: 22px; font-weight: 800; color: #0f172a; margin-bottom: 8px; line-height: 1.25; }
        .pd-hero-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
        .pd-hero-sub { display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 12.5px; color: #64748b; margin-top: 14px; }
        .pd-hero-sub .lbl { color: #64748b; }
        .pd-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
        .ghost-btn { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; padding: 8px 14px;
                     border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
        .ghost-btn:hover { background: #f1f5f9; color: #1e293b; }
        .ghost-btn.active { background: #1e293b; color: #fff; border-color: #1e293b; }
        .danger-btn { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; padding: 8px 14px;
                      border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
        .danger-btn:hover { background: #ffe4e6; }

        .stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
        .stat-box { background: white; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px; }
        .stat-box .sv { font-size: 21px; font-weight: 800; color: #1e293b; }
        .stat-box .sl { font-size: 10.5px; font-weight: 700; color: #64748b; text-transform: uppercase; margin-top: 3px; letter-spacing: 0.03em; }
        .stat-box.warn .sv { color: #b91c1c; }
        .stat-box.good .sv { color: #15803d; }

        .empty-state { padding: 44px 20px; text-align: center; color: #64748b; }
        .empty-state .es-icon { font-size: 30px; opacity: 0.5; margin-bottom: 10px; }
        .empty-state .es-text { font-size: 13px; }

        /* Toast bildirimleri */
        #toast-stack { position: fixed; right: 22px; bottom: 22px; z-index: 9000; display: flex; flex-direction: column; gap: 10px; }
        .toast { background: #0f172a; color: white; padding: 12px 18px; border-radius: 8px; font-size: 13px;
                 box-shadow: 0 8px 24px rgba(15,23,42,0.24); animation: toast-in 0.2s ease-out; max-width: 340px; }
        .toast.ok { background: #166534; }
        .toast.err { background: #b91c1c; }
        @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

        /* Gantt ızgarası */
        .gantt-axis { position: relative; height: 34px; border-bottom: 1px solid #e2e8f0; }
        .gantt-axis-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid #f1f5f9; padding-left: 6px;
                           font-size: 10.5px; color: #64748b; white-space: nowrap; padding-top: 9px; }
        .gantt-grid { position: absolute; left: 260px; right: 0; top: 0; bottom: 0; pointer-events: none; }
        .gantt-gridline { position: absolute; top: 0; bottom: 0; border-left: 1px solid #f8fafc; }
        .gantt-bar.overdue { background: #fecaca; }
        .gantt-bar.overdue .gantt-bar-fill { background: #dc2626; }
        .gantt-milestone-marker { position: absolute; top: 4px; width: 14px; height: 14px; background: #7c3aed;
                                  transform: rotate(45deg); border-radius: 2px; }
        .gantt-row-label .gl-owner { font-size: 10.5px; color: #64748b; margin-left: 6px; }

        /* --- Zorunlu alan işaretleri (T9) --- */
        .req { color: #dc2626; font-weight: 700; margin-left: 2px; }
        .field-error { border-color: #f87171 !important; background: #fef2f2 !important; }
        .field-error:focus { outline-color: #dc2626; }

        /* --- Sıralanabilir tablo başlıkları (T8) --- */
        th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
        th.sortable:hover { background: #eef2ff; color: #4338ca; }
        .sort-ind { display: inline-block; margin-left: 5px; font-size: 10px; color: #cbd5e1; }
        th.sortable:hover .sort-ind { color: #6366f1; }
        .sort-ind.active { color: #4338ca; font-weight: 700; }

        /* Fare üstündeyken satır vurgusu — SLA rengi OLMAYAN satırlar için.
           Hover kuralları yalnızca SLA renkli satırlara yazılmıştı; renksiz
           satırlar hiç tepki vermiyordu. Satırın tamamı talebi açtığı için
           artık hepsinde geri bildirim olmalı.

           Özgüllük bilinçli olarak düşük tutuldu: .talep-satiri:hover (0,2,0)
           SLA satırlarının kendi hover'ından (tr.sla-breached:hover = 0,2,1)
           zayıf, dolayısıyla renkli satırlar kendi tonlarını koruyor.
           Aynı kuralı #table-desk-list ile yazmak ID özgüllüğü yüzünden
           SLA renklerini ezerdi. */
        .talep-satiri:hover { background: #f1f5f9; }

        /* --- SLA durum renklendirmesi (talep listesi) --- */
        tr.sla-breached  { background: #fef2f2; }
        tr.sla-breached:hover  { background: #fee2e2; }
        tr.sla-critical  { background: #fff7ed; }
        tr.sla-critical:hover  { background: #ffedd5; }
        tr.sla-warning   { background: #fefce8; }
        tr.sla-warning:hover   { background: #fef9c3; }
        tr.sla-breached td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
        tr.sla-critical td:first-child { box-shadow: inset 3px 0 0 #ea580c; }
        tr.sla-warning  td:first-child { box-shadow: inset 3px 0 0 #ca8a04; }

        .sla-pill { display: inline-block; padding: 3px 9px; border-radius: 20px;
                    font-size: 11px; font-weight: 700; white-space: nowrap; }
        .sla-pill.breached { background: #dc2626; color: #fff; }
        .sla-pill.critical { background: #ffedd5; color: #c2410c; }
        .sla-pill.warning  { background: #fef9c3; color: #a16207; }
        .sla-pill.ok       { background: #dcfce7; color: #15803d; }
        .sla-pill.none     { background: #f1f5f9; color: #64748b; }
.sla-pill.paused   { background: #ede9fe; color: #6d28d9; }
tr.sla-paused      { background: #faf5ff; }
tr.sla-paused:hover { background: #f3e8ff; }
tr.sla-paused td:first-child { box-shadow: inset 3px 0 0 #7c3aed; }

        /* Durum seçicisi listede renkli görünsün — göz taramayla durum ayırt etsin */
        .status-select.st-open          { background:#dbeafe; color:#1d4ed8; border-color:#bfdbfe; }
        .status-select.st-in_progress   { background:#fef3c7; color:#b45309; border-color:#fde68a; }
        .status-select.st-escalated     { background:#fee2e2; color:#b91c1c; border-color:#fecaca; }
        .status-select.st-on_hold       { background:#e2e8f0; color:#475569; border-color:#cbd5e1; }
        .status-select.st-work_planned  { background:#e0e7ff; color:#4338ca; border-color:#c7d2fe; }
        .status-select.st-waiting_customer { background:#ede9fe; color:#6d28d9; border-color:#ddd6fe; }
        .status-select.st-waiting_vendor   { background:#ccfbf1; color:#0f766e; border-color:#99f6e4; }
        .status-select.st-closed        { background:#dcfce7; color:#15803d; border-color:#bbf7d0; }
        .status-select { font-weight: 600; }

        .sla-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px;
                      color: #64748b; padding: 10px 20px; border-top: 1px solid #f1f5f9; }
        .sla-legend .dot { display: inline-block; width: 9px; height: 9px;
                           border-radius: 2px; margin-right: 5px; vertical-align: middle; }

        /* ================= DUYARLI TASARIM ================= */
        .filter-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }

        /* Tablolar dar ekranda yatay kaydırılabilsin */
        .panel-box { max-width: 100%; }
        .panel-box > table { display: table; }

        /* --- Orta boy ekranlar: iki sütunlu düzenler tek sütuna iner --- */
        @media (max-width: 1200px) {
            .ticket-layout { grid-template-columns: 1fr; }
            .two-col { grid-template-columns: 1fr; }
            .filter-layout { grid-template-columns: 220px 1fr; }
        }

        /* --- Tabletler --- */
        @media (max-width: 992px) {
            .filter-layout { grid-template-columns: 1fr; }
            .grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
            .c-body { padding: 16px; }
            aside { width: 200px; }
            .sb-header { font-size: 16px; padding: 16px; }
        }

        /* --- Dar ekranlar: sol menü yalnızca ikon --- */
        @media (max-width: 768px) {
            aside { width: 60px; }
            .sb-title, .nav-title, .nav-group-title, .nav-label, .logout-label,
            .sb-user > span:not(.avatar) { display: none; }
            .sb-header { padding: 16px 0; justify-content: center; }
            nav { padding: 10px 6px; }
            .nav-link { text-align: center; padding: 12px 0; font-size: 18px; }
            .nav-active { border-left: none; border-radius: 6px; }
            .sb-footer { padding: 10px 6px; }
            .sb-user { justify-content: center; margin-bottom: 8px; }
            .logout-btn { padding: 8px 0; }
            #app-switcher { padding: 8px 6px; }
            .app-item { flex-direction: column; gap: 4px; padding: 10px 4px; font-size: 10px; text-align: center; }
            .app-item .app-desc { display: none; }

            header { height: auto; min-height: 52px; padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
            .h-title { font-size: 14px; }
            .c-body { padding: 12px; }
            .grid-4 { grid-template-columns: 1fr 1fr; gap: 12px; }
            .card { padding: 14px; }
            .card-value { font-size: 20px; }
            .panel-header { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
            th, td { padding: 10px 12px; }
            .prop-group-title { font-size: 11px; }
            /* Geniş tablolar dar ekranda yatay kaydırılsın (satırlar bozulmasın) */
            .panel-box table { display: block; overflow-x: auto; max-width: 100%; }
            .search-results { max-height: 200px; }
        }

        /* --- Telefon --- */
        @media (max-width: 520px) {
            .grid-4 { grid-template-columns: 1fr; }
            .login-box { width: 92%; padding: 28px 22px; }
            .ticket-layout, .two-col, .filter-layout { gap: 14px; }
            .panel-box { margin-bottom: 14px; }
        }

        /* Aç/kapa düğmesi — zamanlanmış raporlarda kullanılır */
        .switch { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; }
        .switch input { opacity: 0; width: 0; height: 0; }
        .switch .slider {
            position: absolute; inset: 0; background: #cbd5e1; border-radius: 22px;
            transition: background .18s;
        }
        .switch .slider::before {
            content: ""; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px;
            background: #fff; border-radius: 50%; transition: transform .18s;
            box-shadow: 0 1px 3px rgba(0,0,0,.2);
        }
        .switch input:checked + .slider { background: #22c55e; }
        .switch input:checked + .slider::before { transform: translateX(18px); }

/* Görev satırındaki sahip hücresi: tabloda düz metin gibi dursun,
   yalnızca üzerine gelince düzenlenebilir olduğu belli olsun.
   <select> değil <button>: bir göreve birden fazla kişi atanabiliyor,
   tek seçimlik açılır menü bunu gösteremiyordu. */
.sahip-btn {
    display: flex; align-items: center; gap: 4px; width: 100%;
    border: 1px solid transparent; background: transparent;
    font-size: 12.5px; padding: 3px 5px; border-radius: 5px;
    max-width: 175px; cursor: pointer; text-align: left; color: inherit;
    font-family: inherit;
}
.sahip-btn > span:first-child { flex: 1; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.sahip-btn.bos { color: #64748b; }
.sahip-btn .sahip-ok { color: #64748b; font-size: 10px; }
.sahip-btn:hover { border-color: #cbd5e1; background: #fff; }

/* Menü <body>'ye ekleniyor: tablo hücresinin taşma kırpması ve satır
   yüksekliği yüzünden hücrenin içinde açılamıyor. */
.sahip-menu {
    position: fixed; z-index: 900; width: 290px;
    background: #fff; border: 1px solid #cbd5e1; border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15,23,42,.18);
    display: flex; flex-direction: column; overflow: hidden;
}
.sahip-menu-ara { padding: 8px; border-bottom: 1px solid #f1f5f9; }
.sahip-menu-ara input { width: 100%; padding: 6px 9px; font-size: 12.5px;
    border: 1px solid #cbd5e1; border-radius: 6px; }
.sahip-menu-liste { max-height: 240px; overflow-y: auto; }
.sahip-menu-baslik { padding: 7px 11px 4px; font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px; color: #64748b;
    background: #f8fafc; position: sticky; top: 0; }
.sahip-menu-satir { display: flex; align-items: center; gap: 8px;
    padding: 6px 11px; font-size: 13px; cursor: pointer; }
.sahip-menu-satir:hover { background: #eff6ff; }
.sahip-menu-satir > span { flex: 1; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
/* Karşı taraf seçiliyken pasif: görev ya iç personele ya müşteri
   kişisine atanır, ikisine birden değil. */
.sahip-menu-satir.pasif { opacity: .45; cursor: not-allowed; }
.sahip-menu-satir.pasif:hover { background: transparent; }
.sahip-ana { font-size: 10px; font-weight: 700; color: #1d4ed8;
    background: #dbeafe; padding: 1px 6px; border-radius: 20px; flex: none; }
.sahip-not { font-size: 10px; color: #64748b; flex: none; }
.sahip-menu-bos { padding: 8px 11px; font-size: 12px; color: #64748b; }
.sahip-menu-alt { display: flex; align-items: center; gap: 6px; padding: 8px;
    border-top: 1px solid #f1f5f9; background: #f8fafc; }
.btn-mini { background: #fff; border: 1px solid #cbd5e1; border-radius: 6px;
    padding: 5px 10px; font-size: 12px; cursor: pointer; color: #475569; }
.btn-mini:hover { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.btn-mini.birincil { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.btn-mini.birincil:hover { background: #2563eb; color: #fff; }

/* Durum hücresi tamamen dolu renkli; menü onun üstünde şeffaf durmalı,
   yoksa beyaz bir kutu olarak sırıtıyor.
   Menü hücrenin TAMAMINI kaplıyor: hücre dolgusunun içinde küçük bir kutu
   olarak dursaydı yeşil alanın kenarları tıklamaya yanıt vermez, kullanıcı
   renkli alana basıp hiçbir şey olmadığını görürdü. Bu yüzden hücrenin
   dolgusu sıfırlanıp aynı dolgu menüye veriliyor. */
.durum-hucre-menu { padding: 0 !important; }
.gorev-durum-sec {
    display: block; width: 100%; height: 100%; min-height: 38px;
    box-sizing: border-box; padding: 6px 8px;
    background: transparent; border: 2px solid transparent; color: inherit;
    font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
    text-align: center; border-radius: 0;
    appearance: none; -webkit-appearance: none;
}
/* Çerçeve hücrenin kenarına oturuyor — yazının etrafında değil */
.gorev-durum-sec:hover { border-color: rgba(255,255,255,.75); }
.gorev-durum-sec:focus { outline: 2px solid #2563eb; outline-offset: 1px; }
/* Açılan liste beyaz zeminde: beyaz yazı okunmaz olurdu */
.gorev-durum-sec option { color: #1e293b; background: #fff; font-weight: 600; }


/* ---------- ŞABLON DÜZENLEME AĞACI ---------- */
/* Kilometre taşı > görev listesi > görev > alt görev — iç içe üç seviye.
   Girinti ve sol çizgi olmadan hangi görevin hangi listeye ait olduğu
   okunmuyor. */
.tpl-asama { border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px;
    margin-bottom: 12px; background: #fff; }
.tpl-asama-bas { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tpl-liste { border-left: 3px solid #cbd5e1; padding: 8px 0 8px 12px;
    margin: 8px 0 8px 10px; }
.tpl-liste-bas { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tpl-gorev { display: flex; align-items: center; gap: 6px; padding: 3px 0; flex-wrap: wrap; }
.tpl-gorev.tpl-alt { padding-left: 22px; }
/* Alt görev ekleme satır İÇİNDE: her görevin altına ayrı bir satır koymak
   14 görevlik bir şablonda listeyi iki katına çıkarıyordu. */
.tpl-alt-ekle { font-size: 11px; color: #64748b; cursor: pointer; padding: 4px 7px;
    border: 1px dashed #cbd5e1; border-radius: 6px; white-space: nowrap; }
.tpl-alt-ekle:hover { color: #1d4ed8; border-color: #93c5fd; background: #eff6ff; }
.tpl-asama input, .tpl-gorev input, .tpl-gorev select, .tpl-liste-bas input {
    padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 12.5px; }
.tpl-asama input:focus, .tpl-gorev input:focus, .tpl-gorev select:focus {
    outline: 2px solid #2563eb; outline-offset: 1px; border-color: #3b82f6; }

/* ---------- Gruplar ve Departman Erişimi ---------- */
/* Renk değerleri mevcut paletten alındı; yeni renk uydurulmadı. */
.grup-satir { padding: 12px 14px; border-bottom: 1px solid #e2e8f0; cursor: pointer; }
.grup-satir:last-child { border-bottom: 0; }
.grup-satir:hover { background: #f8fafc; }
.grup-satir-aktif { background: #eff6ff; box-shadow: inset 3px 0 0 #2563eb; }

/* Uzun listeler kutuyu taşırmasın; departman sayısı müşteri geldikçe artıyor. */
.secim-kutusu { max-height: 260px; overflow-y: auto; border: 1px solid #e2e8f0;
                border-radius: 8px; padding: 6px; }
.secim-oge { display: flex; align-items: center; gap: 8px; padding: 7px 8px;
             border-radius: 6px; cursor: pointer; min-height: 34px; }
.secim-oge:hover { background: #f1f5f9; }
.secim-oge input { width: 16px; height: 16px; cursor: pointer; }

/* Yetkilendirme — departman listesi iki bölümlü: gruptan gelenler ve
   elle verilenler. Kaynağı görünür kılmak bu ekrandaki asıl karışıklığı
   çözüyor; gruptan gelen satır kilitli çünkü kaldırma yolu gruptan
   çıkarmaktır, kutunun işaretini kaldırmak değil. */
.ku-dep-baslik { font-size: 11.5px; font-weight: 600; color: #475569;
    text-transform: uppercase; letter-spacing: .03em;
    padding: 8px 8px 5px; border-top: 1px solid #e2e8f0; }
.ku-dep-baslik:first-child { border-top: 0; }
.ku-dep-baslik .muted { font-weight: 400; text-transform: none;
    letter-spacing: 0; font-size: 11px; }
.secim-oge.ku-dep-grup { background: #f8fafc; }
.secim-oge.ku-dep-grup:hover { background: #f1f5f9; }
.secim-oge.ku-dep-grup input { cursor: default; }
/* Mükerrer fırsat satırının ikinci satırı: aynı adlı iki kaydı
   ayırt etmeye yarayan alanlar (id, tarih, tutar, bağlı kayıt). */
.mukerrer-alt { display:block; font-size:11px; color:#64748b; margin-top:2px; }

.ku-dep-kaynak { margin-left: auto; font-size: 11px; color: #2563eb;
    background: #eff6ff; border-radius: 10px; padding: 1px 8px;
    white-space: nowrap; }

/* ---------- Yetkilendirme ekranı ---------- */
.yk-tur-seridi { display: flex; border-bottom: 1px solid #e2e8f0; }
.yk-tur { flex: 1; min-height: 42px; border: 0; background: none; cursor: pointer;
          font-size: 13px; font-weight: 600; color: #64748b;
          border-bottom: 2.5px solid transparent; }
.yk-tur:hover { background: #f8fafc; }
.yk-tur-aktif { color: #1d4ed8; border-bottom-color: #2563eb; background: #eff6ff; }

.yk-sekmeler { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.yk-sekme { min-height: 36px; padding: 0 14px; border-radius: 8px;
            border: 1px solid #e2e8f0; background: #fff; cursor: pointer;
            font-size: 13px; font-weight: 600; color: #64748b; }
.yk-sekme:hover { background: #f1f5f9; }
.yk-sekme-aktif { background: #2563eb; border-color: #2563eb; color: #fff; }

/* ---------- Panel kartı ---------- */
/* `.card` KPI kartları için: display:flex + align-items:center, yani
   içindekiler YAN YANA ve dikey ortalı dizilir. Yığılmalı içerik (başlık +
   açıklama + tablo) için kullanılınca düzen bozuluyordu. Bu sınıf aynı
   görünümü verir ama içeriği normal blok akışında bırakır. */
.panel-kart { background-color: #fff; padding: 20px; border-radius: 12px;
              border: 1px solid #e2e8f0; }

/* Geniş tablolar kendi kabında yatay kaysın; sayfa gövdesi kaymamalı. */
.tablo-kaydir { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablo-kaydir > table { min-width: max-content; }

/* Desk genel arama paneli — Zoho Desk'teki gibi gruplu canlı sonuç */
.arama-panel {
    position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px);
    background: #fff; border: 1px solid #cbd5e1; border-radius: 8px;
    max-height: 420px; overflow-y: auto;
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}
.arama-turler { display: flex; gap: 4px; padding: 8px 10px; border-bottom: 1px solid #f1f5f9;
                position: sticky; top: 0; background: #fff; flex-wrap: wrap; }
.arama-tur { padding: 3px 10px; border-radius: 999px; font-size: 12px; cursor: pointer;
             border: 1px solid #e2e8f0; background: #f8fafc; color: #475569; }
.arama-tur.aktif { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.arama-grup { padding: 7px 12px 4px; font-size: 11px; font-weight: 700;
              letter-spacing: .04em; text-transform: uppercase; color: #94a3b8; }
.arama-satir { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f8fafc; }
.arama-satir:hover { background: #eff6ff; }
.arama-satir b { display: block; font-size: 13px; color: #1e293b; font-weight: 600; }
.arama-satir span { font-size: 11.5px; color: #94a3b8; }
.arama-bos { padding: 14px 12px; font-size: 13px; color: #94a3b8; text-align: center; }
.arama-daha { padding: 6px 12px 10px; font-size: 11.5px; color: #64748b; }

/* Fırsat aşama şeridi — Zoho CRM'deki pipeline görünümü */
.pipe-serit { display:flex; gap:2px; flex-wrap:wrap; margin-bottom:10px; }
.pipe-adim { flex:1; min-width:96px; padding:7px 10px 7px 18px; background:#f1f5f9;
             color:#64748b; font-size:11.5px; font-weight:600; cursor:pointer;
             position:relative; clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,
             calc(100% - 10px) 100%,0 100%,10px 50%); text-align:center; }
.pipe-adim:hover { background:#e2e8f0; }
.pipe-adim.gecti { background:#bfdbfe; color:#1e40af; }
.pipe-adim.aktif { background:#2563eb; color:#fff; }
.pipe-adim span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Kapanış ve özel kayıt aşamaları da akış adımlarıyla AYNI chevron
   biçiminde. Önceden yuvarlak köşeli düğmelerdi ve şeridin altında ayrı
   bir tasarım dili gibi duruyordu; aşama rengi artık kenarlıkta değil
   dolguda taşınıyor — clip-path kenarlığı zaten kesiyordu. */
.pipe-kapanis { display:flex; gap:2px; flex-wrap:wrap; }
.pipe-btn { flex:1; min-width:96px; padding:7px 10px 7px 18px; background:#f1f5f9;
            color:#64748b; font-size:11.5px; font-weight:600; cursor:pointer;
            border:0; font-family:inherit; text-align:center;
            clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,
            calc(100% - 10px) 100%,0 100%,10px 50%);
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pipe-btn:hover { background:#e2e8f0; }

/* Aşama değiştirilince açılan ek bilgi paneli (Zoho'daki "hangi bayiye
   kaybedildi?" sorusunun karşılığı). Şeridin hemen altında açılıyor —
   ayrı bir kip penceresi bağlamı koparıyordu. */
.asama-soru-kutu { margin-top:12px; padding:12px 14px; border:1px solid #fcd34d;
                   background:#fffbeb; border-radius:8px; max-width:520px; }
.asama-soru-baslik { font-size:13px; font-weight:600; color:#92400e; margin-bottom:8px; }
.asama-soru-etiket { display:block; font-size:12px; color:#475569; margin-bottom:4px; }
.asama-soru-kutu input[type=text], .asama-soru-kutu input[type=date],
.asama-soru-kutu textarea { width:100%; padding:6px 9px; border:1px solid #cbd5e1;
                   border-radius:6px; font-size:13px; font-family:inherit; box-sizing:border-box; }
.asama-soru-dugmeler { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }

/* --- Analitik panosu (Zoho Analytics karşılığı) --------------------
   Grafik kütüphanesi YOK: bu kod tabanı çerçevesiz ve bir grafik
   bağımlılığı eklemek CSP ile de çakışırdı. Çubuklar düz CSS genişliği,
   gösterge tek bir SVG yayı — ikisi de birkaç satır. */
.an-sekme { padding:6px 14px; border:1px solid #cbd5e1; border-radius:6px;
            background:#fff; font-size:13px; cursor:pointer; color:#475569; }
.an-sekme.aktif { background:#2563eb; border-color:#2563eb; color:#fff; font-weight:600; }
.an-kartlar { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.an-kart { background:#fff; border:1px solid #e2e8f0; border-radius:8px; padding:14px 16px; }
.an-kart .etiket { font-size:12px; color:#64748b; }
.an-kart .deger { font-size:24px; font-weight:600; margin-top:4px;
                  font-variant-numeric:tabular-nums; }
.an-kart .alt { font-size:11.5px; color:#94a3b8; margin-top:2px; }

/* Yatay çubuk listesi */
.an-cubuk-satir { display:grid; grid-template-columns:minmax(120px,1.4fr) 3fr auto;
                  gap:10px; align-items:center; padding:5px 0; font-size:13px; }
.an-cubuk-yol { background:#f1f5f9; border-radius:4px; height:16px; overflow:hidden; }
.an-cubuk { height:100%; background:#3b82f6; border-radius:4px; }
.an-cubuk.yesil { background:#22c55e; }
.an-cubuk.kirmizi { background:#ef4444; }
.an-cubuk.turuncu { background:#f59e0b; }
.an-cubuk-deger { font-variant-numeric:tabular-nums; color:#475569; white-space:nowrap; }

/* Kişi × tür matrisi */
.an-matris { width:100%; border-collapse:collapse; font-size:13px; }
.an-matris th, .an-matris td { padding:8px 12px; border-bottom:1px solid #f1f5f9; }
.an-matris th { background:#f8fafc; font-size:11.5px; text-transform:uppercase;
                letter-spacing:.05em; color:#64748b; text-align:right; }
.an-matris th:first-child, .an-matris td:first-child { text-align:left; }
.an-matris td { text-align:right; font-variant-numeric:tabular-nums; }
.an-matris td:first-child { font-weight:600; color:#0f172a; }
.an-matris tr:hover td { background:#f8fafc; }

/* Eğilim sütunları */
.an-egilim { display:flex; gap:6px; align-items:flex-end; height:150px;
             padding-top:10px; overflow-x:auto; }
/* Sütun kabın TAMAMINI kaplar ve içerik alta yaslanır; yoksa çubuğun
   yüzde yüksekliği hesaplanacak bir taban bulamıyor ve sıfır çıkıyor. */
.an-ay { flex:1; min-width:42px; height:100%; display:flex; flex-direction:column;
         align-items:center; justify-content:flex-end; gap:4px; }
.an-ay-cubuk { width:100%; background:#3b82f6; border-radius:3px 3px 0 0; min-height:3px; }
.an-ay-etiket { font-size:10.5px; color:#94a3b8; white-space:nowrap; }
.an-ay-deger { font-size:11px; color:#475569; font-variant-numeric:tabular-nums; }

/* --- Desk toplu seçim (Zoho Desk'teki satır seçimi + üst çubuk) ------
   Kutu normalde SÖNÜK duruyor, satırın üstüne gelince ya da seçiliyken
   belirginleşiyor: her satırda parlak bir kutu olması listeyi
   gürültülendiriyordu. */
/* Sütun genişlik yöneticisi hücrelere ellipsis + overflow:hidden
   veriyor; seçim hücresindeki boşluk karakterleri bu yüzden "..." olarak
   çiziliyordu. Burada ikisi de geri alınıyor. */
.sec-sutun { text-align:center; overflow:visible !important;
             text-overflow:clip !important; padding-left:6px; padding-right:6px; }
.sec-sutun input { margin:0; vertical-align:middle; }
.sec-kutu { opacity:0; transition:opacity .12s; cursor:pointer; }
.talep-satiri:hover .sec-kutu,
.talep-satiri.secili .sec-kutu,
.sec-kutu:focus { opacity:1; }
.talep-satiri.secili { background:#eff6ff !important; }
.talep-satiri.secili td { border-color:#bfdbfe; }

#desk-toplu-cubuk {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    margin:0 0 10px 0; padding:9px 14px; background:#1e293b; color:#fff;
    border-radius:8px; font-size:13px;
}
#desk-toplu-cubuk .toplu-sayi { font-weight:600; margin-right:4px; }
#desk-toplu-cubuk .toplu-alan {
    padding:5px 9px; border-radius:6px; border:1px solid #475569;
    background:#0f172a; color:#e2e8f0; font-size:12.5px; max-width:190px;
}
#desk-toplu-cubuk .toplu-ayrac {
    width:1px; height:20px; background:#475569; margin:0 4px;
}
#desk-toplu-cubuk .btn-mini { background:#f8fafc; border-color:#cbd5e1; }
#desk-toplu-cubuk .btn-mini.toplu-sil { color:#b91c1c; }
#desk-toplu-cubuk .btn-mini.toplu-sil:hover { background:#fee2e2; border-color:#fca5a5; }

/* --- Kullanıcı yetki rozetleri -------------------------------------
   Beş ayrı sütun yerine tek hücrede modül kısaltmaları. Renk yetki
   SEVİYESİNİ gösteriyor: dolu = tam, orta = yazma, açık = okuma. */
.yk-rozet {
    display:inline-block; font-size:11px; font-weight:600; letter-spacing:.02em;
    padding:2px 6px; border-radius:4px; margin:1px 2px 1px 0; white-space:nowrap;
    cursor:default;
}
.yk-rozet.yk-tam    { background:#dcfce7; color:#15803d; }
.yk-rozet.yk-yazma  { background:#dbeafe; color:#1d4ed8; }
.yk-rozet.yk-okuma  { background:#f1f5f9; color:#64748b; }
/* Pasif kullanıcı satırı soluk — listede varlar ama öne çıkmasınlar */
tr.yk-pasif td { opacity:.55; }