/* Locations View Styling */
.locations-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

@media (max-width: 768px) {
    .locations-grid {
        grid-template-columns: 1fr;
    }
}

.location-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
}

.location-card {
    cursor: pointer;
}

.location-card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.location-card-price-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 12px;
}

.location-card-price-item {
    background: rgba(var(--ust-katman-rgb), 0.02);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: var(--border-radius-sm);
}

.location-card-price-label {
    font-size: 10px;
    color: var(--text-muted);
}

.location-card-price-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--secondary);
}

.chart-pane {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chart-wrapper {
    flex-grow: 1;
    position: relative;
    min-height: 250px;
}

/* Locations View Styling */
.new-radar-layout {
    display: grid;
    grid-template-columns: 1.3fr 1.1fr !important;
    gap: 24px !important;
    align-items: start;
}

@media (max-width: 1024px) {
    .new-radar-layout {
        grid-template-columns: 1fr !important;
    }
}

.region-cards-wrap {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--ust-katman-rgb), 0.1) transparent;
}

.location-pill-card {
    padding: 10px 16px;
    border: 1px solid var(--border-color);
    background: rgba(var(--ust-katman-rgb), 0.01);
    cursor: pointer;
    border-radius: var(--border-radius-md);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 150px;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.location-pill-card:hover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.02);
    transform: translateY(-1px);
}

.location-pill-card.active-pill {
    border-color: var(--ton-koyu-turuncu) !important;
    background: rgba(var(--koyu-turuncu-rgb), 0.05) !important;
    box-shadow: 0 0 10px rgba(var(--koyu-turuncu-rgb), 0.1);
}

.location-pill-card.active-pill .pill-name {
    color: var(--text-primary) !important;
}

.location-pill-card.active-pill .pill-meta {
    color: var(--pill-aktif-meta) !important;
}

.pill-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: 'Outfit', sans-serif;
    transition: color 0.2s;
}

.pill-meta {
    font-size: 10.5px;
    color: var(--text-muted);
    transition: color 0.2s;
}

.location-card-price-item {
    background: rgba(var(--ust-katman-rgb), 0.02);
    border: 1px solid var(--border-color);
    padding: 12px;
    border-radius: var(--border-radius-md);
    transition: transform 0.2s, border-color 0.2s;
}

.location-card-price-item:hover {
    border-color: rgba(var(--ust-katman-rgb), 0.1);
}

.location-card-price-item.highlighted-amort {
    border-color: rgba(var(--koyu-turuncu-rgb), 0.2) !important;
}

.location-card-price-item.highlighted-amort:hover {
    border-color: rgba(var(--koyu-turuncu-rgb), 0.4) !important;
}

.chart-pane {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.details-pane-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
}

.chart-wrapper {
    position: relative;
    width: 100%;
}

/* Gemini settings card styling */
.gemini-settings-card {
    padding: 16px;
    background: rgba(var(--yuzey-rgb), 0.4) !important;
    border: 1px solid var(--border-color) !important;
    transition: all 0.2s ease;
    border-radius: var(--border-radius-lg);
    margin-bottom: 20px;
}

#gemini-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

#gemini-settings-header:hover h4 {
    color: var(--ton-koyu-turuncu) !important;
}

/* News radar feed styling */
.news-radar-card {
    padding: 24px !important;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: var(--border-radius-lg);
}

.radar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
}

/* Güncel gelişmeler (web aramalı, kaydedilmez — §2.136): düğme satırı + pencere */
.radar-gelisme {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-width: 0;
}

.radar-gelisme .btn {
    padding: 6px 10px;
    font-size: 11px;
}

.radar-gelisme-not {
    font-size: 11px;
    color: var(--text-muted);
}

.gelisme-pencere {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.gelisme-bekle {
    align-items: center;
    padding: 24px 0;
    color: var(--text-secondary);
    font-size: 12px;
}

.gelisme-not {
    margin: 0;
    font-size: 11px;
    color: var(--text-muted);
}

.gelisme-metin {
    white-space: pre-line;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.gelisme-oneri {
    width: 100%;
    height: 72px;
    border: 0;
    border-radius: var(--border-radius-sm);
}

.gelisme-kaynak-baslik {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.gelisme-kaynaklar ul {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
}

.gelisme-kaynaklar a {
    color: var(--primary);
    overflow-wrap: anywhere;
}

.gelisme-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 11px;
    color: var(--text-muted);
}

.gelisme-hata {
    margin: 0;
    color: var(--danger);
    font-size: 12px;
}

.news-radar-feed {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* 2026-07-17: eski max-height:520px + overflow-y:auto kaldırıldı — 3-blok AI
       brifingi tek uzun kart olunca metin görünmez bir iç kaydırma kutusunda
       kesiliyordu (thin+soluk scrollbar fark edilmiyordu; kullanıcı bildirdi).
       Kart doğal yüksekliğinde akar; sayfa kaydırması zaten var. */
    padding-right: 4px;
}

.news-card {
    padding: 14px;
    background: rgba(var(--ust-katman-rgb), 0.015);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    cursor: pointer;
}

.news-card:hover {
    border-color: rgba(var(--koyu-turuncu-rgb), 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--golge-rgb), 0.15);
}

.news-summary-box {
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(var(--koyu-turuncu-rgb), 0.02);
    border-left: 2px solid var(--ton-koyu-turuncu);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}

.news-title {
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 1.4;
    color: var(--text-primary);
    transition: color 0.2s;
}

.news-card:hover .news-title {
    color: var(--turuncu-yazi);
}

/* Animations & Skeletons */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin-animation {
    display: inline-block;
    animation: spin 0.8s linear infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.3; }
}

.skeleton-news {
    animation: pulse 1.5s infinite ease-in-out;
}

/* Stepper & Lifecycle Progress Animations */
.step-node:hover .step-circle {
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(var(--koyu-turuncu-rgb), 0.4);
}
.step-node:hover .step-label {
    color: var(--text-primary) !important;
}

/* Sub-neighborhood Table Enhancements */
.sub-neigh-table tbody tr {
    transition: background-color var(--transition-fast);
}
.sub-neigh-table tbody tr:hover {
    background: rgba(var(--ust-katman-rgb), 0.03) !important;
}

/* Orange Accent Color Highlights */
.accent-orange {
    color: var(--ton-koyu-turuncu) !important;
}
.bg-orange {
    background-color: var(--ton-koyu-turuncu) !important;
}
.border-orange {
    border-color: var(--ton-koyu-turuncu) !important;
}

/* Social Media Writer View */
.social-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
}

@media (max-width: 1024px) {
    .social-layout {
        grid-template-columns: 1fr;
    }
}

.social-output-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.social-text-preview {
    background: rgba(var(--yuzey-rgb), 0.6);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 16px;
    min-height: 250px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
    white-space: pre-wrap;
    overflow-y: auto;
    margin-top: 12px;
    margin-bottom: 20px;
}

.social-checklist {
    list-style: none;
    margin-top: 16px;
}

.social-checklist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

.social-check {
    color: var(--secondary);
}

/* --- Sosyal Medya: hibrit AI eklentileri --- */
.social-mode-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: .3px;
    text-transform: uppercase;
    border: 1px solid transparent;
}
.social-mode-ai { color: var(--primary); background: var(--primary-glow); border-color: rgba(var(--primary-rgb), .35); }
.social-mode-tpl { color: var(--text-secondary); background: rgba(var(--ust-katman-rgb), .05); border-color: var(--border-color); }
.social-mode-loading { color: var(--warning); background: rgba(var(--warning-rgb), .12); border-color: rgba(var(--warning-rgb), .35); }

.social-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: -8px;
}
.social-counter { font-size: 11px; color: var(--text-secondary); }

.social-link-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 2px;
}
.social-link-btn:hover { color: var(--primary-hover); text-decoration: underline; }

/* Son taslaklar (geçmiş) */
.social-history { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.social-history-empty { font-size: 12px; color: var(--text-secondary); padding: 6px 0; }
.social-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(var(--ust-katman-rgb), .02);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.social-history-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.social-history-title { font-size: 13px; color: var(--text-primary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.social-history-tags { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .3px; }

/* İşaretlenebilir kontrol listesi */
.social-check-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.social-check-label input { margin-top: 3px; accent-color: var(--primary); flex-shrink: 0; }
.social-checked-text { color: var(--text-secondary); text-decoration: line-through; opacity: .7; }

/* Toast Notifications */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    /* ⚠️ TOAST EN ÜSTTE. 2000 iken drawer backdrop'unun (9998) ALTINDA kalıyordu:
       drawer'dan bir ayar kaydedilince başarı/HATA mesajı hiç görünmüyordu
       (ölçüldü — `elementFromPoint` toast'ın merkezinde `drw-backdrop` buldu).
       Geri bildirim kanalı her katmanın üstünde olmalı. */
    z-index: 10100;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* KRİTİK (2026-07-13 fix): konteyner + toast'lar tıklamaları YUTMASIN.
       position:fixed konteyner sağ-altta form "Ekle" butonuyla aynı bölgede;
       hızlı ard arda eklemede toast'lar yığılınca kutusu büyüyüp (z-index 2000)
       butonu örtüyor → tıklanamıyor + toast metninde I-beam imleç. Toast'lar
       tamamen bilgilendirici (tıklama/kapatma yok) → tüm katman pointer-events:none;
       böylece tıklamalar altındaki butona/forma GEÇER. */
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(var(--yuzey-rgb), 0.9);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: 0 10px 25px rgba(var(--golge-rgb), 0.4);
    min-width: 250px;
    transform: translateY(20px);
    opacity: 0;
    animation: slideIn var(--transition-fast) forwards;
    backdrop-filter: blur(10px);
    pointer-events: none;
}

@keyframes slideIn {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.toast.success { border-left: 4px solid var(--secondary); }
.toast.info { border-left: 4px solid var(--primary); }
.toast.warning { border-left: 4px solid var(--warning); }
.toast.error { border-left: 4px solid var(--danger); }

.toast-message {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

/* ── Toast içi tek eylem ("Geri al", 2026-09-13) ────────────────────────────
   🔴 `pointer-events` YALNIZ BU BUTONA açılır — `.toast-container` ve `.toast`
   bilerek `none` (yukarıdaki 2026-07-13 notu: yığılan toast'lar formun "Ekle"
   butonunu örtüp tıklanamaz kılıyordu). Kaba ya da toast'ın tamamına açmak o
   düzeltmeyi geri alırdı; yalnız küçük buton dikdörtgeni tıklamayı yakalasın.
   Bu satır SÜS DEĞİL, yük taşıyor: olmazsa buton görünür ama ölüdür (§2.17). */
.toast-eylem {
    pointer-events: auto;
    margin-left: auto;
    flex-shrink: 0;
    background: rgba(var(--primary-rgb), 0.15);
    border: 1px solid rgba(var(--primary-rgb), 0.45);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.toast-eylem:hover {
    background: rgba(var(--primary-rgb), 0.3);
}

/* ── Kanban kartında aşama kısayolu (2026-09-13) ────────────────────────────
   Kartı bir sonraki sütuna taşımanın tek dokunuşluk yolu. Sürükle-bırak
   dokunmatikte HİÇ çalışmıyor (HTML5 DnD touch'tan tetiklenmez), düzenleme
   yolu ise 5 etkileşim — canlı ölçümde 8 kartın 7'si ilk sütunda kalmıştı. */
.kanban-ilerlet {
    display: block;
    width: 100%;
    margin-top: 10px;
    background: rgba(var(--secondary-rgb), 0.1);
    border: 1px solid rgba(var(--secondary-rgb), 0.35);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    /* Dokunma hedefi: 375px'te parmakla isabet ettirilebilmeli (§2.10). */
    min-height: 34px;
    padding: 8px 10px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    text-align: center;
    transition: background var(--transition-fast);
}

.kanban-ilerlet:hover {
    background: rgba(var(--secondary-rgb), 0.22);
}

.kanban-ilerlet:disabled {
    opacity: 0.55;
    cursor: default;
}

/* Detay modalındaki kardeşi — Düzenle'nin ÜSTÜNDE, tam genişlikte. */
.gorusme-ilerlet-satir {
    margin-top: 16px;
}

/* ── Kanban kartında ilan bağı (2026-09-13) ────────────────────────────────
   Kullanıcı: "portföy ne ilerleme havuzlarında görünüyor ne de detayda…
   orası kalabalık olduğunda o müşteriye nereyi göstericem?"
   ⚠️ Başlık uzun olabilir; kart dar → tek satır + ellipsis. Sarmalamak
   kartı uzatıp sütunu kaydırırdı (§2.10). */
.kanban-card-ilan {
    font-size: 10.5px;
    color: var(--secondary);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
}

/* Bağ var ama ilan görünmüyor (silinmiş/arşivlenmiş/başka acente): üç
   durumun ikincisi — bağ GERÇEK, görünmeyen ilanın kendisi (§2.3/§2.41). */
.kanban-card-ilan--kayip {
    color: var(--text-muted);
    font-style: italic;
}

/* "İlgili İlan" ipucu, Ev Gösterme seçiliyken vurgulanır (2026-09-13).
   Canlı ölçüm: 8 pipeline görüşmesinin 7'sinde ilan bağı hiç girilmemiş.
   ⚠️ Alan ZORUNLU DEĞİL (§5.2) — yalnız etiket konuşur, engelleme yok. */
.form-hint-vurgu {
    color: var(--secondary);
    font-weight: 600;
}

/* Yetki kapısı SESSİZ DEĞİL: buton basılmıyorsa sebebi yazılır (§2.51). */
.gorusme-kilit-notu {
    margin-top: 16px;
    font-size: 11.5px;
    color: var(--text-muted);
    text-align: center;
}

.leaflet-control-zoom {
    border: 1px solid var(--border-color) !important;
}

.leaflet-bar a {
    background-color: var(--modal-zemin) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.leaflet-bar a:hover {
    background-color: var(--kart-zemin-2) !important;
}

/* Calendar Birthday Event Pill */
.calendar-event-pill.dogum-gunu {
    background: rgba(var(--pembe-rgb), 0.12) !important;
    color: var(--takvim-yazi-dogum) !important;
    border-left: 3px solid var(--pembe-vurgu) !important;
}

.calendar-event-pill.sozlesme-bitisi {
    background: rgba(var(--turuncu-rgb), 0.12) !important;
    color: var(--takvim-yazi-arama) !important;
    border-left: 3px solid var(--ton-koyu-turuncu) !important;
}

.calendar-event-pill.mulk-yildonumu {
    background: rgba(var(--secondary-rgb), 0.12) !important;
    color: var(--takvim-yazi-gosterim) !important;
    border-left: 3px solid var(--secondary) !important;
}

/* Profile Page Layout */
.profile-container {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
    animation: fadeIn var(--transition-smooth) ease-in-out;
}

.profile-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .profile-layout {
        grid-template-columns: 1fr;
    }
}

.profile-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(var(--golge-rgb), 0.3);
    padding: 24px;
    overflow: hidden;
}

.avatar-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.avatar-upload-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.avatar-preview-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid var(--primary);
    box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.3);
    transition: all var(--transition-smooth) ease;
}

.avatar-preview-wrapper:hover {
    transform: scale(1.03);
    box-shadow: 0 0 25px rgba(var(--primary-rgb), 0.5);
}

.avatar-preview-wrapper.dragover {
    border-color: var(--secondary);
    transform: scale(1.05);
}

.profile-avatar-large {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--yuzey-rgb), 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 0;
    transition: opacity var(--transition-fast) ease;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.avatar-preview-wrapper:hover .avatar-hover-overlay {
    opacity: 1;
}

.upload-tip {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}

.profile-summary h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.role-badge {
    display: inline-block;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

.agency-info {
    font-size: 13px;
    color: var(--text-secondary);
}

.profile-form-area {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.card-header-simple {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
}

.card-icon-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-icon-wrapper.secondary {
    background: rgba(var(--secondary-rgb), 0.1);
    color: var(--secondary);
}

.card-header-simple h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Profilim: e-posta değişince açılan şifre kutusunun açıklaması (§2.128) */
.profil-alan-notu {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

@media (max-width: 600px) {
    .form-row-two {
        grid-template-columns: 1fr;
    }
}

.form-actions-profile {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

/* Google Login Button */
.btn-google-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 24px;
    background: rgba(var(--ust-katman-rgb), 0.08);
    border: 1px solid rgba(var(--ust-katman-rgb), 0.15);
    border-radius: var(--border-radius-md);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 12px rgba(var(--golge-rgb), 0.15);
    box-sizing: border-box;
}

.btn-google-login:hover {
    background: rgba(var(--ust-katman-rgb), 0.15);
    border-color: rgba(var(--ust-katman-rgb), 0.3);
    box-shadow: 0 6px 20px rgba(var(--golge-rgb), 0.25);
    transform: translateY(-1px);
}

.btn-google-login:active {
    transform: translateY(0);
}

/* Google Simulator Modal Overlay */
.google-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(var(--yuzey-rgb), 0.7);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.google-modal-card {
    background: var(--kart-zemin-2);
    border: 1px solid rgba(var(--ust-katman-rgb), 0.1);
    border-radius: 16px;
    padding: 36px 32px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 25px 50px -12px rgba(var(--golge-rgb), 0.5);
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.google-modal-header {
    text-align: center;
    margin-bottom: 24px;
}

.google-modal-header h2 {
    font-size: 22px;
    font-weight: 600;
    margin: 8px 0 4px 0;
    color: var(--text-primary);
}

.google-modal-header p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

.form-group-sim {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.form-group-sim label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group-sim input {
    background: var(--modal-zemin);
    border: 1px solid var(--sinir-guclu);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text-primary);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.form-group-sim input:focus {
    outline: none;
    border-color: var(--ton-mavi);
}

.avatar-selector {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.sim-avatar-option {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.sim-avatar-option:hover {
    transform: scale(1.1);
}

.sim-avatar-option.active {
    border-color: var(--ton-mavi);
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(var(--mavi-rgb), 0.4);
}

.google-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

.btn-sim-primary {
    background: #1a73e8;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-sim-primary:hover {
    background: #1557b0;
}

.btn-sim-primary:disabled {
    background: var(--sinir-guclu);
    color: var(--text-secondary);
    cursor: not-allowed;
}

.btn-sim-secondary:hover {
    border-color: var(--sinir-guclu-2);
    color: var(--text-primary);
}

/* ==========================================================================
   Apple Reminders ('Anımsatıcılar') View Styles
   ========================================================================== */

.reminders-container {
    padding: 24px;
    height: calc(100vh - 120px);
    overflow: hidden;
}

.reminders-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px;
    height: 100%;
}

@media (max-width: 900px) {
    .reminders-layout {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }
    .reminders-container {
        height: auto;
        overflow: visible;
    }
}

.reminders-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.reminders-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Apple Style Smart Counter Cards */
.reminder-counter-card {
    background: rgba(var(--yuzey-2-rgb), 0.45);
    border: 1px solid rgba(var(--ust-katman-rgb), 0.05);
    backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100px;
    user-select: none;
}

.reminder-counter-card:hover {
    transform: translateY(-2px);
    background: rgba(var(--yuzey-2-rgb), 0.65);
    border-color: rgba(var(--ust-katman-rgb), 0.1);
}

.reminder-counter-card.active {
    background: rgba(var(--ust-katman-rgb), 0.08);
    border-color: var(--card-active-border, rgba(var(--ust-katman-rgb), 0.2)) !important;
    box-shadow: 0 4px 20px rgba(var(--golge-rgb), 0.2);
}

.reminder-counter-card .card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.reminder-counter-card .icon-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.reminder-counter-card .icon-wrapper svg {
    width: 18px;
    height: 18px;
}

.reminder-counter-card .counter-number {
    font-size: 28px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    line-height: 1;
}

.reminder-counter-card .card-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 8px;
}

/* Counter Card Colors */
.reminder-counter-card.blue .icon-wrapper { background: var(--ios-mavi); }
.reminder-counter-card.blue .counter-number { color: var(--ios-mavi); }
.reminder-counter-card.blue.active { --card-active-border: rgba(var(--ios-mavi-rgb), 0.35); }

.reminder-counter-card.orange .icon-wrapper { background: var(--ios-turuncu); }
.reminder-counter-card.orange .counter-number { color: var(--ios-turuncu); }
.reminder-counter-card.orange.active { --card-active-border: rgba(var(--ios-turuncu-rgb), 0.35); }

.reminder-counter-card.grey .icon-wrapper { background: var(--ios-gri); }
.reminder-counter-card.grey .counter-number { color: var(--ios-gri); }
.reminder-counter-card.grey.active { --card-active-border: rgba(var(--ios-gri-rgb), 0.35); }

.reminder-counter-card.green .icon-wrapper { background: var(--ios-yesil); }
.reminder-counter-card.green .counter-number { color: var(--ios-yesil); }
.reminder-counter-card.green.active { --card-active-border: rgba(var(--ios-yesil-rgb), 0.35); }

/* Right Column: Reminders List */
.reminders-list-col {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: rgba(var(--yuzey-rgb), 0.3);
    border: 1px solid rgba(var(--ust-katman-rgb), 0.03);
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: blur(8px);
    /* overflow:hidden creates the scroll boundary so the list
       stays contained and the footer never escapes the panel */
    overflow: hidden;
}

.reminders-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(var(--ust-katman-rgb), 0.05);
    padding-bottom: 14px;
}

.reminders-header-row .category-title {
    font-size: 24px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    margin: 0;
}

/* Category Title Colors */
.reminders-header-row .category-title.blue { color: var(--ios-mavi); }
.reminders-header-row .category-title.orange { color: var(--ios-turuncu); }
.reminders-header-row .category-title.grey { color: var(--text-primary); }
.reminders-header-row .category-title.green { color: var(--ios-yesil); }

.category-total-badge {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
}
.category-total-badge.blue { background: rgba(var(--ios-mavi-rgb), 0.15); color: var(--ios-mavi); }
.category-total-badge.orange { background: rgba(var(--ios-turuncu-rgb), 0.15); color: var(--ios-turuncu); }
.category-total-badge.grey { background: rgba(var(--ust-katman-rgb), 0.05); color: var(--text-secondary); }
.category-total-badge.green { background: rgba(var(--ios-yesil-rgb), 0.15); color: var(--ios-yesil); }

/* Reminders Scroll Area */
.reminders-list-container {
    flex: 1 1 0;        /* flex-grow:1 flex-shrink:1 flex-basis:0 */
    min-height: 0;      /* CRITICAL: breaks the flexbox overflow trap so list can shrink */
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 0;
    /* Smooth scrollbar for dark mode */
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--ust-katman-rgb), 0.12) transparent;
}

.reminders-list-container::-webkit-scrollbar {
    width: 4px;
}
.reminders-list-container::-webkit-scrollbar-track {
    background: transparent;
}
.reminders-list-container::-webkit-scrollbar-thumb {
    background: rgba(var(--ust-katman-rgb), 0.1);
    border-radius: 4px;
}
.reminders-list-container::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--ust-katman-rgb), 0.18);
}

/* Empty State */
.empty-reminders-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-muted);
}
.empty-reminders-state .empty-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

/* Reminder Item */
.reminder-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(var(--ust-katman-rgb), 0.015);
    border: 1px solid rgba(var(--ust-katman-rgb), 0.03);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.reminder-list-item:hover {
    background: rgba(var(--ust-katman-rgb), 0.03);
    border-color: rgba(var(--ust-katman-rgb), 0.06);
}

.reminder-list-item.completed {
    opacity: 0.55;
    border-color: transparent;
    background: rgba(var(--ust-katman-rgb), 0.005);
}

.reminder-item-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-grow: 1;
    min-width: 0;
}

/* Apple Style Circular Checkbox */
.apple-checkbox-outer {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    margin-top: 2px;
}

.apple-checkbox-inner {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Checkbox Colors & Active States */
.apple-checkbox-outer.blue { border-color: var(--ios-mavi); }
.apple-checkbox-outer.blue .apple-checkbox-inner { background: var(--ios-mavi); }

.apple-checkbox-outer.orange { border-color: var(--ios-turuncu); }
.apple-checkbox-outer.orange .apple-checkbox-inner { background: var(--ios-turuncu); }

.apple-checkbox-outer.grey { border-color: var(--ios-gri); }
.apple-checkbox-outer.grey .apple-checkbox-inner { background: var(--ios-gri); }

.apple-checkbox-outer.green { border-color: var(--ios-yesil); }
.apple-checkbox-outer.green .apple-checkbox-inner { background: var(--ios-yesil); }

.apple-checkbox-outer.checked .apple-checkbox-inner {
    transform: scale(1.1);
}

/* Reminder Content Details */
.reminder-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex-grow: 1;
}

.reminder-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    word-break: break-word;
}

.reminder-list-item.completed .reminder-title {
    text-decoration: line-through;
    color: var(--text-muted);
}

.reminder-desc {
    font-size: 12px;
    color: var(--text-secondary);
    word-break: break-word;
}

.reminder-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 4px;
}

.reminder-date-tag {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.reminder-date-tag.overdue {
    color: var(--danger);
    font-weight: 500;
}

.reminder-cat-tag {
    font-size: 10px;
    background: rgba(var(--ust-katman-rgb), 0.05);
    color: var(--text-muted);
    padding: 1px 6px;
    border-radius: 4px;
}

.reminder-action-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
    opacity: 0;
}

.reminder-list-item:hover .reminder-action-btn {
    opacity: 1;
}

/* 🔴 2026-08-02 (iOS Simulator'da bulundu): düzenle ve sil butonları
   `opacity: 0` ile gizli, yalnız satır HOVER'ında açılıyordu. Dokunmatik
   cihazda hover YOKTUR → telefonda iki buton da hiç görünmüyor, yani
   anımsatıcıyı düzenlemek ve silmek fiilen ULAŞILAMAZDI. (Teknik olarak
   tıklanabiliyorlardı — `opacity:0` tıklamayı engellemez — ama kullanıcı
   göremediği için işlev yok sayılır.)
   ⚠️ Ölçüt `max-width` DEĞİL `hover: none`: sorun dar ekran değil, işaretleme
   aygıtının hover üretmemesi. Dokunmatik dizüstü ve yatay moddaki tablet de
   kapsanır; hover'ı olan dar pencerede eski davranış (hover'da açılma) korunur. */
@media (hover: none) {
    .reminder-action-btn { opacity: 1; }
}

.reminder-action-btn:hover {
    background: rgba(var(--ust-katman-rgb), 0.05);
}

.reminder-action-btn.delete-btn:hover {
    color: var(--danger);
    background: rgba(var(--danger-rgb), 0.1);
}

.reminder-action-btn.edit-btn:hover {
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.1);
}

/* Footer: Add Reminder Form Styling */
.add-reminder-footer {
    border-top: 1px solid rgba(var(--ust-katman-rgb), 0.05);
    padding-top: 16px;
    margin-top: 12px;
    /* Pin to bottom: never shrinks, never scrolls away */
    flex-shrink: 0;
    position: relative;
}

.btn-toggle-add {
    background: transparent;
    border: none;
    color: var(--ios-mavi);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.btn-toggle-add:hover {
    background: rgba(var(--ios-mavi-rgb), 0.1);
}

.btn-toggle-add .plus-icon {
    font-size: 18px;
}

.reminder-inline-form {
    background: rgba(var(--ust-katman-rgb), 0.015);
    border: 1px solid rgba(var(--ust-katman-rgb), 0.05);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.reminder-inline-form.hidden {
    display: none;
}

/* 🔴 2026-09-17: `1fr 1fr` telefonda formu EKRANDAN TAŞIRIYORDU — sütunlar
   içeriğin min genişliğine göre 306px'e büyüdü, kutu 251px'ti; Bitiş Tarih/Saat
   ve Liste ekranın dışında kalıp görünmüyordu. Sütun sayısı artık kutunun
   genişliğinden gelir: yer varsa İKİ (en çok), yoksa bir; `min()` kutu 220px'ten
   de darsa taşmayı engeller. Görünüm ekran boyutuna değil KUTUYA bakar, çünkü
   liste sütunu masaüstünde de dar olabiliyor. */
.form-inputs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(220px, calc((100% - 12px) / 2))), 1fr));
    gap: 12px;
}

.form-input-group.span-full {
    grid-column: 1 / -1;
}

.form-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Tarih + saat + dakika (reminders.js dtPartsHtml — ekleme formu VE düzenleme
   modalı). Saat kutuları içeriğe göre genişler; sığmazsa saat grubu tarih
   kutusunun altına iner. `.dt-saat` saat ile dakikayı birlikte taşır, ":"
   satır başında yalnız kalmaz. */
.dt-parts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.dt-parts input[type="date"] {
    flex: 1 1 160px;
    width: auto;
    min-width: 0;
}
.dt-parts .dt-saat {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}
.dt-parts select {
    width: auto;
    flex: none;
}

.form-input-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.form-input-group input[type="text"],
.form-input-group textarea,
.form-input-group input[type="date"],
.form-input-group select {
    background: rgba(var(--yuzey-rgb), 0.5);
    border: 1px solid rgba(var(--ust-katman-rgb), 0.08);
    color: var(--yazi-tam);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    transition: all 0.2s;
}

.form-input-group input[type="text"]:focus,
.form-input-group textarea:focus,
.form-input-group input[type="date"]:focus,
.form-input-group select:focus {
    border-color: var(--ios-mavi);
    background: rgba(var(--yuzey-rgb), 0.8);
    outline: none;
}

.form-actions-row {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.form-actions-row .btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

/* Autocomplete results dropdown styles */
.autocomplete-results-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--oneri-zemin) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius-sm) !important;
    z-index: 1000 !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    box-shadow: 0 10px 15px -3px rgba(var(--golge-rgb), 0.5) !important;
}

.autocomplete-item {
    padding: 8px 12px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    color: var(--text-primary) !important;
    transition: background 0.15s ease !important;
    border-bottom: 1px solid rgba(var(--ust-katman-rgb), 0.02) !important;
}

.autocomplete-item:hover {
    background: rgba(var(--primary-rgb), 0.15) !important;
}

.autocomplete-item-sub {
    font-size: 11px !important;
    color: var(--text-secondary) !important;
    display: block !important;
    margin-top: 2px !important;
}

/* Client Type Badges */
.client-type-badge {
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-block !important;
}

.client-type-badge.alici {
    background: rgba(var(--secondary-rgb), 0.15) !important;
    color: var(--secondary) !important;
}

.client-type-badge.satici {
    background: rgba(var(--mor-rgb), 0.15) !important;
    color: var(--mor-vurgu) !important;
}

/* General Display Utilities */
.hidden {
    display: none !important;
}

/* Reminders List Management Sidebar & Color Pickers */
.reminders-lists-panel {
    background: rgba(var(--yuzey-2-rgb), 0.25);
    border: 1px solid rgba(var(--ust-katman-rgb), 0.05);
    border-radius: 14px;
    padding: 16px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reminders-lists-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(var(--ust-katman-rgb), 0.05);
    padding-bottom: 8px;
}

.btn-add-list {
    background: transparent;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-add-list:hover {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--indigo-vurgu-2);
}

.reminders-lists-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 4px;
}

.reminders-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    user-select: none;
}

.reminders-list-row:hover {
    background: rgba(var(--ust-katman-rgb), 0.03);
}

.reminders-list-row.active {
    background: rgba(var(--ust-katman-rgb), 0.06);
    border-color: rgba(var(--ust-katman-rgb), 0.08);
}

.reminders-list-row-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.list-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.list-name-text {
    font-size: 13px;
    font-weight: 550;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reminders-list-row.active .list-name-text {
    color: var(--text-primary);
    font-weight: 600;
}

.reminders-list-row-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.list-count-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(var(--ust-katman-rgb), 0.05);
    padding: 2px 6px;
    border-radius: 8px;
}

.list-action-icon {
    opacity: 0;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

.reminders-list-row:hover .list-action-icon {
    opacity: 1;
}

.list-action-icon:hover {
    color: var(--text-primary);
}

.list-action-icon.delete:hover {
    color: var(--danger);
}

/* Color Picker Container for Adding List */
.add-list-form-container {
    background: rgba(var(--yuzey-rgb), 0.6);
    border: 1px solid rgba(var(--ust-katman-rgb), 0.08);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.add-list-form-container input[type="text"] {
    background: rgba(var(--golge-rgb), 0.2);
    border: 1px solid rgba(var(--ust-katman-rgb), 0.1);
    color: var(--yazi-tam);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    width: 100%;
}

.color-dots-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.color-picker-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.color-picker-dot:hover {
    transform: scale(1.15);
}

.color-picker-dot.selected {
    border-color: var(--yazi-tam);
    box-shadow: 0 0 6px rgba(var(--ust-katman-rgb), 0.6);
}

/* Header actions row for toggle between calendar and list views */
.view-toggle-container {
    display: flex;
    background: rgba(var(--yuzey-2-rgb), 0.6);
    border: 1px solid rgba(var(--ust-katman-rgb), 0.05);
    border-radius: 10px;
    padding: 2px;
    gap: 2px;
    align-self: center;
}

.btn-view-toggle {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-view-toggle.active {
    background: rgba(var(--ust-katman-rgb), 0.08);
    color: var(--text-primary);
    box-shadow: 0 2px 4px rgba(var(--golge-rgb), 0.15);
}

/* FullCalendar Customizations for Dark Theme */
.calendar-view-container {
    flex-grow: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.fc {
    --fc-page-bg-color: transparent;
    --fc-border-color: rgba(var(--ust-katman-rgb), 0.08);
    --fc-neutral-bg-color: rgba(var(--yuzey-rgb), 0.15);
    --fc-neutral-text-color: var(--text-secondary);
    --fc-today-bg-color: rgba(var(--primary-rgb), 0.1);
    --fc-event-bg-color: var(--primary);
    --fc-event-border-color: var(--primary);
    --fc-event-text-color: #ffffff;
    --fc-list-event-hover-bg-color: rgba(var(--ust-katman-rgb), 0.05);
    font-family: 'Urbanist', 'Outfit', sans-serif !important;
}

.fc .fc-toolbar-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

.fc .fc-toolbar {
    margin-bottom: 1.5em !important;
}

.fc .fc-button-primary {
    background-color: rgba(var(--yuzey-2-rgb), 0.8) !important;
    border-color: rgba(var(--ust-katman-rgb), 0.08) !important;
    color: var(--text-primary) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    transition: all 0.2s !important;
}

.fc .fc-button-primary:hover {
    background-color: rgba(var(--ust-katman-rgb), 0.08) !important;
}

.fc .fc-button-primary:active, .fc .fc-button-primary:focus {
    background-color: rgba(var(--ust-katman-rgb), 0.12) !important;
    box-shadow: none !important;
}

.fc .fc-button-active {
    background-color: var(--fc-event-bg-color) !important;
    border-color: var(--fc-event-border-color) !important;
    color: white !important;
}

.fc .fc-col-header-cell-cushion {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none !important;
    padding: 8px 4px !important;
}

.fc .fc-daygrid-day-number {
    font-size: 12px;
    font-weight: 550;
    color: var(--text-secondary);
    text-decoration: none !important;
    padding: 6px 8px !important;
}

.fc-theme-standard td, .fc-theme-standard th {
    border: 1px solid rgba(var(--ust-katman-rgb), 0.05) !important;
}

.fc .fc-day-other .fc-daygrid-day-number {
    opacity: 0.3;
}

.fc-event {
    cursor: pointer;
    border-radius: 6px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(var(--golge-rgb), 0.15) !important;
    transition: all 0.15s ease !important;
}

.fc-event:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(var(--golge-rgb), 0.25) !important;
    filter: brightness(1.1);
}

.fc-v-event .fc-event-title-container {
    padding: 1px 2px;
}

/* Event types indicator badge/dot */
.reminder-type-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.reminder-meta-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
    flex-wrap: wrap;
}

.reminder-type-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(var(--ust-katman-rgb), 0.05);
    color: var(--text-secondary);
}

.reminder-list-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
}

/* Modal styling for details */
.calendar-detail-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--modal-zemin);
    border: 1px solid rgba(var(--ust-katman-rgb), 0.1);
    box-shadow: 0 20px 25px -5px rgba(var(--golge-rgb), 0.5);
    border-radius: 16px;
    width: 90%;
    max-width: 460px;
    padding: 24px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.calendar-detail-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(var(--golge-rgb), 0.6);
    z-index: 1040;
}

/* Premium Currency Suffix Sizing and Positioning */
.currency-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.currency-input-wrapper input {
    padding-right: 40px !important;
}

.currency-symbol-affix {
    position: absolute;
    right: 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    pointer-events: none;
    user-select: none;
}

/* Advanced Filter V2 Drawer Styles */
.advanced-filter-drawer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease, margin-bottom 0.4s ease;
    background: rgba(var(--yuzey-rgb), 0.3);
    border: 0 solid var(--border-color);
    border-radius: var(--border-radius-md);
    margin-bottom: 0;
    padding: 0 24px;
    width: 100%;
    box-sizing: border-box;
}
.advanced-filter-drawer.open {
    max-height: 1200px;
    border: 1px solid var(--border-color);
    margin-bottom: 24px;
    padding: 24px;
}
.filter-drawer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
/* Şehir / İlçe / Mahalle üçlüsü — Portföy ve Ortak Havuz detaylı aramasında.
   🔴 2026-09-17: kutular `width:33%` idi; telefonda yazı 16px olunca 80px'lik
   kutuda "İSTANBUL" → "İSTAN" okunuyordu. Yan yana sığmıyorsa alt alta iner.
   ⚠️ Taban `em`: yazı mobilde 16px, masaüstünde 12px — px taban tablette üç
   kutuyu yine yan yana sıkıştırıyordu ("KÜÇÜKÇEKMECE" 168px ister, 153px kaldı).
   12em ≈ en uzun il adı ("KAHRAMANMARAŞ"). */
.konum-filtre-satiri {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.konum-filtre-satiri > select {
    flex: 1 1 12em;
    min-width: 0;
}
.filter-badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.filter-badge {
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(var(--ust-katman-rgb), 0.03);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
}
.filter-badge:hover {
    background: rgba(var(--ust-katman-rgb), 0.08);
    color: var(--text-primary);
}
.filter-badge.active {
    background: rgba(var(--turuncu-rgb), 0.15);
    border-color: var(--turuncu-yazi);
    color: var(--turuncu-yazi);
    font-weight: 600;
}
.filter-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    max-height: 120px;
    overflow-y: auto;
    padding: 6px;
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-sm);
    background: rgba(var(--yuzey-rgb), 0.4);
}
.filter-pill {
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(var(--ust-katman-rgb), 0.03);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.filter-pill:hover {
    background: rgba(var(--ust-katman-rgb), 0.08);
    color: var(--text-primary);
}
.filter-pill.excluded {
    background: rgba(var(--danger-rgb), 0.15);
    border-color: rgba(var(--danger-rgb), 0.4);
    color: var(--kirmizi-vurgu);
    font-weight: 600;
}
.filter-pill.active {
    background: rgba(var(--turuncu-rgb), 0.15);
    border-color: rgba(var(--turuncu-rgb), 0.4);
    color: var(--ton-turuncu);
    font-weight: 600;
}

/* ============================================================ */
/* FAYDALI LİNKLER (Useful Links) modülü                        */
/* ============================================================ */
.ul-section {
    margin-bottom: 36px;
}
.ul-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}
.ul-section-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 18px 0;
}

/* (A) İşlem rehberleri — detay kartları */
.ul-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.ul-detail-card {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 18px 20px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ul-detail-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-focus);
    box-shadow: 0 8px 24px rgba(var(--golge-rgb), 0.3);
}
.ul-detail-icon {
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
}
.ul-detail-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.ul-detail-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.ul-detail-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.ul-detail-arrow {
    font-size: 22px;
    color: var(--primary);
    flex-shrink: 0;
}

/* (B) Hızlı erişim — kategori grupları + direkt link kartları */
.ul-group {
    margin-bottom: 20px;
}
.ul-group-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--warning);
    margin: 0 0 10px 0;
    padding-left: 2px;
}
.ul-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.ul-link-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 14px 16px;
    text-decoration: none;
    transition: transform var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}
.ul-link-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-focus);
    background: var(--bg-card-hover);
}
.ul-link-icon {
    font-size: 18px;
    flex-shrink: 0;
}
.ul-link-label {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}
.ul-link-ext {
    font-size: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.ul-link-card:hover .ul-link-ext {
    color: var(--primary);
}

.ul-disclaimer {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
    margin-top: 8px;
}

/* Detay alt-sayfası */
.ul-back-btn {
    padding: 7px 14px;
    font-size: 12px;
}
.ul-detail-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 760px;
}
.ul-intro-panel {
    background: rgba(var(--primary-rgb), 0.08);
    border-left: 3px solid var(--primary);
    border-radius: var(--border-radius-md);
    padding: 16px 18px;
}
.ul-intro-panel h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 8px 0;
}
.ul-intro-panel p {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
}
.ul-docs-card {
    padding: 18px 20px;
}
.ul-docs-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}
.ul-docs-list {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ul-docs-list li {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.ul-warning-panel {
    background: rgba(var(--warning-rgb), 0.08);
    border-left: 3px solid var(--warning);
    border-radius: var(--border-radius-md);
    padding: 16px 18px;
}
.ul-warning-panel h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--warning);
    margin: 0 0 10px 0;
}
.ul-warning-panel ul {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ul-warning-panel li {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.ul-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.ul-action-btn {
    text-decoration: none;
}
.ul-footer-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(var(--danger-rgb), 0.06);
    border: 1px solid rgba(var(--danger-rgb), 0.18);
    border-radius: var(--border-radius-md);
    padding: 14px 16px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .ul-detail-grid,
    .ul-link-grid {
        grid-template-columns: 1fr;
    }
    .ul-actions .ul-action-btn {
        flex: 1;
        justify-content: center;
    }
}

/* ============================================================ */

/* ============================================================ */
/* MESAJLAR (ilan-bazlı danışman mesajlaşması / co-broke)        */
/* ============================================================ */
.messages-layout {
    display: flex;
    gap: 18px;
    height: calc(100vh - 175px);
    min-height: 460px;
}
.messages-threads {
    flex: 0 0 320px;
    background: var(--bg-card);
    border: 1px solid rgba(var(--ust-katman-rgb), 0.06);
    border-radius: var(--border-radius-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.messages-threads-head {
    display: flex; align-items: center; gap: 8px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(var(--ust-katman-rgb), 0.06);
}
.messages-threads-head h3 {
    margin: 0; font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700; color: var(--text-primary);
    min-width: 0;                 /* §2.10: dar ekranda başlık küçülsün, butonu itmesin */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.messages-threads-count {
    background: rgba(var(--primary-rgb), 0.15); color: var(--primary);
    font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 12px;
}
.messages-thread-list { flex: 1; overflow-y: auto; }
.messages-empty-list {
    padding: 30px 18px; text-align: center; color: var(--text-secondary); font-size: 13px; line-height: 1.6;
}
.messages-empty-list small { color: var(--text-muted); font-size: 11px; }
.messages-thread-item {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 14px; cursor: pointer; position: relative;
    border-bottom: 1px solid rgba(var(--ust-katman-rgb), 0.04);
    transition: background 0.15s ease;
}
.messages-thread-item:hover { background: var(--bg-card-hover); }
.messages-thread-item.active { background: var(--bg-card-hover); box-shadow: inset 3px 0 0 var(--primary); }
.messages-thread-avatar {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 1px solid rgba(var(--ust-katman-rgb), 0.08);
}
.messages-thread-meta { flex: 1; min-width: 0; }
.messages-thread-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.messages-thread-name { font-weight: 600; font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.messages-thread-time { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
.messages-thread-portfolio { font-size: 11px; color: var(--primary); margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.messages-thread-last { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.messages-thread-unread {
    position: absolute; right: 12px; bottom: 13px;
    background: var(--primary); color: #fff; font-size: 10px; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
    display: flex; align-items: center; justify-content: center;
}

/* Sağ panel (seçili konuşma) */
.messages-thread-pane {
    flex: 1; background: var(--bg-card);
    border: 1px solid rgba(var(--ust-katman-rgb), 0.06);
    border-radius: var(--border-radius-md);
    display: flex; flex-direction: column; overflow: hidden; min-width: 0;
}
.messages-pane-empty {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: 14px; gap: 10px;
}
.messages-pane-empty-ic { font-size: 40px; opacity: 0.6; }
.messages-pane-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid rgba(var(--ust-katman-rgb), 0.06);
}
.messages-pane-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(var(--ust-katman-rgb), 0.08); }
.messages-pane-titlebox { flex: 1; min-width: 0; }   /* §2.10: dar ekranda kalan genişliğe sığsın, uzun ilan adı "…" ile kesilsin */
.messages-pane-name { font-weight: 700; font-size: 14px; color: var(--text-primary); }
.messages-pane-portfolio { font-size: 12px; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.messages-portfolio-link {
    background: none; border: none; padding: 0; margin: 0; cursor: pointer;
    font-family: inherit; text-align: left; display: inline-flex; align-items: center; gap: 4px;
    max-width: 100%;
    transition: color 0.15s ease;
}
/* inline-flex kabın kendi metninde "…" çalışmaz → ad kendi kutusunda kesilir, "›" görünür kalır (§2.118) */
.messages-portfolio-link .messages-portfolio-ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messages-portfolio-link:hover { color: var(--primary-hover); text-decoration: underline; }
.messages-portfolio-link .messages-portfolio-go { font-size: 15px; font-weight: 700; opacity: 0.8; flex-shrink: 0; }
.messages-back-btn {
    display: none; background: none; border: none; color: var(--text-secondary);
    font-size: 22px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.messages-bubbles {
    flex: 1; overflow-y: auto; padding: 18px 16px;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--bg-dark);
}
.msg-bubble-row { display: flex; }
.msg-bubble-row.mine { justify-content: flex-end; }
.msg-bubble-row.theirs { justify-content: flex-start; }
.msg-bubble {
    max-width: 72%; padding: 9px 13px; border-radius: 14px;
    font-size: 13px; line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere;
}
.msg-bubble-row.mine .msg-bubble { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.msg-bubble-row.theirs .msg-bubble { background: var(--bg-card-hover); color: var(--text-primary); border: 1px solid rgba(var(--ust-katman-rgb), 0.06); border-bottom-left-radius: 4px; }
.msg-bubble-body { white-space: pre-wrap; }
.msg-bubble-time { font-size: 9px; opacity: 0.65; margin-top: 4px; text-align: right; }
.messages-composer {
    display: flex; gap: 10px; align-items: flex-end;
    padding: 12px 14px; border-top: 1px solid rgba(var(--ust-katman-rgb), 0.06);
}
.messages-composer textarea {
    flex: 1; resize: none; max-height: 120px; min-height: 40px;
    padding: 10px 12px; border-radius: var(--border-radius-sm);
    border: 1px solid rgba(var(--ust-katman-rgb), 0.08); background: rgba(var(--ust-katman-rgb), 0.03);
    color: var(--text-primary); font-family: inherit; font-size: 13px; line-height: 1.4;
}
.messages-composer textarea:focus { outline: none; border-color: var(--primary); }
.messages-composer .btn { flex-shrink: 0; padding: 10px 18px; font-size: 13px; }

/* Sidebar "Mesajlar" okunmamış rozeti */
.sidebar-msg-badge {
    margin-left: auto; background: var(--primary); color: #fff;
    font-size: 10px; font-weight: 700; min-width: 18px; height: 18px;
    border-radius: 9px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center;
}
.sidebar-msg-badge.hidden { display: none; }

/* Mobil: tek sütun, thread açılınca panel tam ekran */
@media (max-width: 768px) {
    .messages-layout { height: calc(100vh - 140px); gap: 0; }
    .messages-threads { flex-basis: 100%; }
    .messages-thread-pane { display: none; }
    .messages-layout.thread-open .messages-threads { display: none; }
    .messages-layout.thread-open .messages-thread-pane { display: flex; flex-basis: 100%; }
    .messages-back-btn { display: block; }
    .msg-bubble { max-width: 85%; }
}

/* Ortak Havuz: silme butonu (inline hover JS yerine) + "Siz" rozeti */
.btn-shared-delete { background: rgba(var(--danger-rgb), 0.15); color: var(--kirmizi-vurgu); border: 1px solid rgba(var(--danger-rgb), 0.3); }
.btn-shared-delete:hover { background: rgba(var(--danger-rgb), 0.25); }
.shp-own-badge {
    background: rgba(var(--primary-rgb), 0.15); color: var(--primary); border: 1px solid rgba(var(--primary-rgb), 0.3);
    font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 10px; white-space: nowrap;
}

/* Anımsatıcılar: Sözleşme Uyarıları bölümü (dashboard "Bekleyen Görev" kartının hedefi) */
.contract-warnings-section {
    background: rgba(var(--koyu-turuncu-rgb), 0.06); border: 1px solid rgba(var(--koyu-turuncu-rgb), 0.25);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
}
.contract-warnings-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; color: var(--ton-turuncu); margin-bottom: 10px;
}
.cw-count {
    background: rgba(var(--koyu-turuncu-rgb), 0.2); color: var(--ton-turuncu); font-size: 11px; font-weight: 700;
    min-width: 20px; height: 20px; border-radius: 10px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
}
.contract-warning-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px;
    border-radius: 8px; cursor: pointer; min-width: 0;
}
.contract-warning-item:hover { background: rgba(var(--koyu-turuncu-rgb), 0.12); }
.cw-type-tag {
    flex-shrink: 0; font-size: 10px; font-weight: 700; text-transform: uppercase;
    background: rgba(var(--gri-rgb), 0.15); color: var(--text-secondary); padding: 2px 7px; border-radius: 6px;
}
.cw-title {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13px; font-weight: 500; color: var(--text-primary);
}
.cw-badge {
    flex-shrink: 0; font-size: 11px; font-weight: 700;
    background: rgba(var(--koyu-turuncu-rgb), 0.18); color: var(--ton-turuncu); padding: 2px 8px; border-radius: 6px; white-space: nowrap;
}
.cw-badge--overdue { background: rgba(var(--danger-rgb), 0.18); color: var(--kirmizi-vurgu); }
.cw-date { flex-shrink: 0; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 480px) {
    .contract-warning-item { flex-wrap: wrap; }
    .cw-date { display: none; }
}

/* Anımsatıcılar dar ekran çökmesi (≤900px): container height:auto olunca
   .reminders-list-col'un height:100%'ü çözülemez → flex:1 1 0 (basis 0) liste
   konteynerini 0px'e düşürüyordu (içerik + ☕ boş-durum + sözleşme uyarıları
   görünmüyordu). Dar ekranda liste içerik yüksekliğinde akar, sayfa kaydırılır. */
@media (max-width: 900px) {
    .reminders-list-col { height: auto; }
    .reminders-list-container {
        flex: none;
        overflow-y: visible;
        padding-right: 0;
    }
}

/* --- Yeni Bölge Ekle modal redesign (2026-07-17) --- */
.loc-suggest-row { display: flex; flex-wrap: wrap; gap: 8px; }
.loc-suggest {
    background: rgba(var(--menekse-rgb), 0.08);
    border: 1px solid rgba(var(--menekse-rgb), 0.3);
    color: var(--text-primary);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.loc-suggest:hover { background: rgba(var(--menekse-rgb), 0.18); border-color: var(--ton-menekse); }
.loc-suggest-count { color: var(--ton-mor); font-weight: 700; font-size: 11px; margin-left: 4px; }

.loc-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.loc-chip {
    background: rgba(var(--ust-katman-rgb), 0.03);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.loc-chip:hover { border-color: var(--ton-menekse); color: var(--text-primary); }
.loc-chip.active {
    background: rgba(var(--menekse-rgb), 0.16);
    border-color: var(--ton-menekse);
    color: var(--mor-vurgu);
    font-weight: 600;
}
.loc-chip-hint { font-size: 10px; color: var(--text-muted); font-weight: 400; }

.loc-preview {
    margin-top: 8px;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: var(--border-radius-md);
    line-height: 1.5;
}
.loc-preview--hit { background: rgba(var(--yesil-rgb), 0.08); border: 1px solid rgba(var(--yesil-rgb), 0.25); color: var(--yesil-vurgu-2); }
.loc-preview--miss { background: rgba(var(--gok-acik-rgb), 0.06); border: 1px solid rgba(var(--gok-acik-rgb), 0.2); color: var(--gok-vurgu); }

.loc-manual-toggle {
    background: none; border: none; color: var(--text-secondary);
    font-size: 12px; cursor: pointer; padding: 0; margin-bottom: 12px;
    font-family: 'Inter', sans-serif;
}
.loc-manual-toggle:hover { color: var(--text-primary); }
.loc-save-hint { font-size: 11px; color: var(--text-muted); text-align: center; margin: 10px 0 0; line-height: 1.5; }

/* --- Sosyal AI yapılandırılmış çıktı: kanca seçici + bloklar (2026-07-19) --- */
.social-hooks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.social-hooks-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.social-hook {
    text-align: left;
    background: rgba(var(--ust-katman-rgb), 0.03);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--border-radius-md);
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.5;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: 'Inter', sans-serif;
}
.social-hook:hover { border-color: var(--ton-menekse); color: var(--text-primary); }
.social-hook.active {
    background: rgba(var(--menekse-rgb), 0.14);
    border-color: var(--ton-menekse);
    color: var(--menekse-vurgu-3);
    font-weight: 600;
}
.social-ai-body { white-space: pre-line; font-size: 13px; line-height: 1.6; color: var(--text-primary); }
.social-ai-tags { margin-top: 12px; font-size: 12px; color: var(--gok-vurgu); word-break: break-word; }

/* ── Yedek sağlık uyarısı (dashboard, YALNIZ admin — 2026-07-25) ────────────
   Sağlıklıyken hiç render edilmez; yalnız bayat/eksik yedekte görünür.       */
.backup-health-banner {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(var(--warning-rgb), 0.08);
    border: 1px solid rgba(var(--warning-rgb), 0.35);
    border-left: 4px solid var(--warning);
    border-radius: var(--border-radius-md);
    padding: 14px 16px;
    margin-bottom: 20px;
}
.backup-health-banner .bh-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.backup-health-banner .bh-text { min-width: 0; font-size: 12.5px; color: var(--text-secondary); }
.backup-health-banner .bh-text strong { display: block; color: var(--warning); font-size: 13.5px; margin-bottom: 6px; }
.backup-health-banner ul { margin: 0 0 6px; padding-left: 18px; }
.backup-health-banner li { margin-bottom: 3px; }
.backup-health-banner .bh-hint { font-size: 11px; color: var(--text-muted); }

/* ── Müşteri rol rozetleri (2026-07-25) ─────────────────────────────────────
   Tip + Talep Tipi birleşimi: alici/kiraci/satici/evsahibi. Renk ayrımı
   danışmanın listede bir bakışta "arıyor mu, veriyor mu" görmesini sağlar. */
.client-type-badge.kiraci   { background: rgba(var(--camgobegi-rgb), 0.14);  color: var(--camgobegi-vurgu); border: 1px solid rgba(var(--camgobegi-rgb), 0.3); }
.client-type-badge.evsahibi { background: rgba(var(--mor-rgb), 0.14); color: var(--mor-vurgu); border: 1px solid rgba(var(--mor-rgb), 0.3); }

/* ── Aranabilir seçici (search picker) — ORTAK BİLEŞEN, 2026-07-25 ──────────
   Uzun listelerde düz <select> kullanılamaz hale geliyordu (kullanıcı
   bildirdi). Portföy + müşteri seçimlerinin HEPSİ bu sınıfları kullanır;
   stil tek yerde. ui.js initSearchPicker ile birlikte çalışır. */
.sp-search {
    width: 100%;
    margin-bottom: 8px;
}
.sp-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: rgba(var(--golge-rgb), 0.18);
}
.sp-row {
    padding: 9px 12px;
    border-bottom: 1px solid rgba(var(--ust-katman-rgb), 0.04);
    cursor: pointer;
    transition: background 0.12s ease;
}
.sp-row:last-child { border-bottom: none; }
.sp-row:hover,
.sp-row.active { background: rgba(var(--primary-rgb), 0.16); }
.sp-row-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sp-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    /* Uzun ilan başlıkları satırı taşırmasın */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.sp-row-sub {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 3px;
}
.sp-row-sub strong { color: var(--secondary); }
.sp-badge {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.sp-badge--sale { background: rgba(var(--primary-rgb), 0.18); color: var(--indigo-vurgu); }
.sp-badge--rent { background: rgba(var(--camgobegi-rgb), 0.18); color: var(--camgobegi-vurgu); }
.sp-badge--warn { background: rgba(var(--warning-rgb), 0.18); color: var(--sari-vurgu); }
.sp-empty { padding: 18px 12px; text-align: center; font-size: 12px; color: var(--text-muted); }
.sp-count { display: block; font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.sp-chosen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--primary-rgb), 0.35);
    background: rgba(var(--primary-rgb), 0.08);
    border-radius: var(--border-radius-md);
}
.sp-chosen-info { min-width: 0; }
.sp-chosen-meta {
    display: block;
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 3px;
}
.sp-badge--role { background: rgba(var(--gri-rgb), 0.16); color: var(--text-soft); }
.sp-row-main .sp-title { flex: 1; min-width: 0; }
/* HTML `hidden` özniteliği, author `display:flex` kuralına YENİLİR — açıkça
   bastırmazsak seçim kartı boşken de görünür (boş kutu olarak). */
.sp-chosen[hidden] { display: none; }

/* ── ÇOKLU KİŞİ SEÇİCİ (2026-08-20, ui.js initCokluKisiSecici) ──
   Stil `.sp-*` ile ORTAK; buraya yalnız çip şeridi ve "seçili satır" eklendi.
   ⚠️ YENİ İÇ KAYDIRMA KUTUSU YOK (§2.10): çip şeridi `flex-wrap` ile SARAR,
      kendi max-height'i YOKTUR. Dar ekranda kırpma yerine yükseklik büyür. */
.cks-cipler {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 8px;
    min-width: 0; max-width: 100%;
}
.cks-cipler:empty { display: none; }
/* Seçili satır: çipin rengiyle aynı aile — "bu zaten eklendi" sinyali.
   ⚠️ .sp-row.active (klavye vurgusu) ile ÇAKIŞMAZ; farklı sınıf, farklı renk. */
.sp-row.secili {
    background: rgba(var(--warning-rgb), 0.13);
    box-shadow: inset 3px 0 0 var(--warning);
}
.sp-row.secili:hover { background: rgba(var(--warning-rgb), 0.2); }

/* Vekil bloğu — VARSAYILAN KAPALI. Modal zaten 1126 px; her taraf için açık bir
   seçici eklemek yüksekliği ~500 px daha artırırdı. */
.vekil-ac {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; padding: 4px 0;
    color: var(--text-secondary); font-size: 11.5px; font-weight: 600;
    cursor: pointer; font-family: inherit;
}
.vekil-ac:hover { color: var(--text-primary); }
.vekil-kutu { margin-top: 8px; min-width: 0; max-width: 100%; }
.vekil-kutu[hidden] { display: none; }

/* ── Hesaplama parametresi bayatlık uyarısı (2026-07-27) ────────────────────
   Vergi parametreleri yılda bir değişir; donmuş değer sessizce YANLIŞ vergi
   üretir. Uyarı görünür olmalı, admin oradan güncelleyebilmeli. */
.calc-param-warn {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
    background: rgba(var(--warning-rgb), 0.08);
    border: 1px solid rgba(var(--warning-rgb), 0.35);
    border-left: 4px solid var(--warning);
    border-radius: var(--border-radius-md);
    padding: 14px 16px;
    margin-bottom: 18px;
}
.calc-param-warn .cpw-icon { font-size: 18px; line-height: 1.2; flex-shrink: 0; }
.calc-param-warn .cpw-text { flex: 1; min-width: 220px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; }
.calc-param-warn .cpw-text strong { color: var(--warning); }
.calc-param-warn .cpw-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.calc-param-warn .cpw-form input { padding: 7px 10px; font-size: 12.5px; width: 130px; }
.calc-param-warn .cpw-form input#cpw-yil { width: 82px; }

/* Ek Özellikler (katlanabilir) — portföy ekle/düzenle formu, 2026-07-27.
   Form zaten uzun; 9 nitelik alanı varsayılan kapalı gelir, dolu kayıtta açılır. */
.pf-extras {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: rgba(var(--ust-katman-rgb), 0.02);
}
.pf-extras > summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    list-style: none;
    padding: 4px 0;
}
.pf-extras > summary::-webkit-details-marker { display: none; }
.pf-extras > summary::before { content: '▸ '; color: var(--text-secondary); }
.pf-extras[open] > summary::before { content: '▾ '; }
.pf-extras[open] > summary { margin-bottom: 12px; }
.pf-extras-hint { font-weight: 400; color: var(--text-muted); font-size: 11px; }

/* Kiralık ilanda komisyon YÜZDE değil, 1 kira + KDV — input yerine bu not
   gösterilir (2026-07-27, kullanıcı bildirdi). */
.rent-comm-note {
    padding: 9px 12px;
    background: rgba(var(--primary-rgb), 0.08);
    border: 1px solid rgba(var(--primary-rgb), 0.25);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}
.rent-comm-note span {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-secondary);
}

/* ── Bölge Analizleri yatay taşma kalkanı (2026-07-29, kullanıcı bildirdi) ──
   SORUN: bölge sayısı artınca TÜM SAYFA yana kayıyor, sağ panel (Canlı Piyasa
   Radarı) ekran dışında kalıyordu. 9 bölgede sağ panel 381px dışarıdaydı.
   KÖK NEDEN: grid/flex çocukları varsayılan `min-width: auto` alır — yani
   İÇERİĞİNDEN küçülemez. Bölge şeridinde `overflow-x: auto` VARDI ama hiç
   devreye girmiyordu: kapsayıcı zaten içeriğe göre şiştiği için kaydırmaya
   "gerek kalmıyor", bunun yerine grid sütununu genişletiyordu.
   ÇÖZÜM: min-width:0 → sütun sabit kalır, şerit kendi içinde kaydırılır.
   Dashboard'daki (2026-07-03) aynı düzeltmenin eşi. */
.new-radar-layout,
.new-radar-layout > *,
.locations-left-panel,
.locations-right-panel,
.region-selector-card,
.region-cards-wrap {
    min-width: 0;
    max-width: 100%;
}

/* Bölge sahipliği rozetleri ve kota göstergesi (2026-07-29) */
.pill-std { font-size: 11px; }
.loc-kota {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.loc-kota b { color: var(--text-primary); }
.loc-std-note {
    font-size: 11px;
    color: var(--text-muted);
    padding: 5px 10px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    white-space: nowrap;
}

/* ── Ciro Raporu: hedef tempo kartı (2026-07-29) ──────────────────────────
   "%57" tek başına iyi mi kötü mü söylemiyordu. Bar üzerindeki yıl işareti
   ("şu an burada olmalıydım") + durum satırı bunu tek bakışta veriyor. */
.goal-pct {
    font-size: 26px;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
    color: var(--primary);
    line-height: 1;
}
.goal-track-wrap { position: relative; padding-top: 14px; }
.goal-track {
    /* İç gölge: boş kısım "oyuk" gibi dursun, dolu kısım ondan ayrışsın */
    background: rgba(var(--ust-katman-rgb), 0.06);
    box-shadow: inset 0 1px 2px rgba(var(--golge-rgb), 0.35);
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
}
.goal-bar {
    width: 0%;
    height: 100%;
    /* ⚠️ `var(--primary-color)` TANIMSIZDI (doğrusu `--primary`) → gradient'in
       tamamı geçersiz oluyor ve bar HİÇ boyanmıyordu; kullanıcı "dolu kısım
       görünmüyor" diye bildirdi. Tanımsız CSS değişkeni hata vermez, sessizce
       stili düşürür. */
    background: linear-gradient(90deg, var(--primary), var(--ton-menekse));
    border-radius: 7px;
    box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.45);
    transition: width 1s ease-in-out;
    position: relative;
}
/* Ucunda hafif parlaklık — doluluğun nerede bittiği net görünsün */
.goal-bar::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 3px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 0 7px 7px 0;
}
/* Yılın geçen kısmını gösteren dikey işaret + üstünde etiketi */
.goal-yearmark {
    position: absolute;
    top: 10px;
    bottom: -4px;
    width: 2px;
    background: var(--text-strong);
    opacity: 0.9;
    border-radius: 1px;
    transition: left 1s ease-in-out;
    z-index: 2;
}
.goal-yearmark::after {
    content: attr(data-label);
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: var(--text-muted);
    white-space: nowrap;
}
.goal-status {
    margin-top: 12px;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 8px;
    line-height: 1.4;
}
.goal-status--ok   { background: rgba(var(--secondary-rgb), 0.10); color:var(--secondary); border:1px solid rgba(var(--secondary-rgb), 0.25); }
.goal-status--warn { background: rgba(var(--warning-rgb), 0.10); color:var(--sari-vurgu); border:1px solid rgba(var(--warning-rgb), 0.28); }
.goal-status--bad  { background: rgba(var(--danger-rgb), 0.10);  color:var(--kirmizi-vurgu); border:1px solid rgba(var(--danger-rgb), 0.28); }
.goal-pace {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Danışman sıralaması — pay çubuğuyla kıyaslanabilir */
.perf-row { display: flex; flex-direction: column; gap: 5px; }
.perf-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.perf-rank { font-weight: 800; font-size: 13px; flex-shrink: 0; }
.perf-name {
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.perf-amount { font-weight: 700; color: var(--text-primary); flex-shrink: 0; }
/* Maskeli tutar (2026-09-07) — BOŞ bırakmak "veri yok" gibi okunurdu; nokta
   dizisi "var ama size kapalı" der (§2.3: ölçülmemiş ile gizlenen ayrı şeyler). */
/* ── Hızlı temas şeridi (2026-09-07) ─────────────────────────────────────────
   🔴 GERÇEK TARAYICIDA BULUNDU (§2.10): ilk sürüm `flex:1 1 0; min-width:0`
   kullanıyordu; 726px genişlikte üç buton sıfıra kadar sıkışıp etiketler
   ÜST ÜSTE BİNDİ ("AradıUlaşılamadı"). Statik testler temizdi — bu kusur
   yalnız ekrana bakınca görünüyor.
   Çözüm: `min-width` ile sıkışma tabanı + `flex-basis` ile sığmayınca ALT
   SATIRA geçiş. Metin `nowrap` — kelime ortadan bölünmez. */
.temas-serit {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.temas-btn {
    flex: 1 1 100px;          /* sığmazsa alt satıra geçer, sıfıra sıkışmaz */
    min-width: 100px;
    font-size: 11.5px;
    padding: 7px 6px;
    white-space: nowrap;
    text-align: center;
}

/* Hızlı temas: "Ulaşılamadı" sonrası "Tekrar Ara" butonunu kısa süre vurgular
   (2026-09-07). Otomatik anımsatıcı AÇILMIYOR — karar kullanıcıda; bu yalnız
   bir davet. `prefers-reduced-motion` saygı gösterilir. */
.temas-vurgu {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
    animation: temasVurgu 1.4s ease-in-out 2;
}
@keyframes temasVurgu {
    0%, 100% { box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25); }
    50%      { box-shadow: 0 0 0 5px rgba(var(--primary-rgb), 0.10); }
}
@media (prefers-reduced-motion: reduce) {
    .temas-vurgu { animation: none; }
}
.deal-tutar-gizli {
    letter-spacing: 2px;
    color: var(--text-muted);
    font-weight: 600;
    cursor: help;
}
.perf-amount-gizli {
    letter-spacing: 2px;
    color: var(--text-muted);
    font-weight: 600;
    cursor: help;
}
.perf-bar-track {
    background: rgba(var(--ust-katman-rgb), 0.04);
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}
.perf-bar { height: 100%; border-radius: 3px; transition: width .8s ease-in-out; }
.perf-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
    color: var(--text-muted);
}

/* ── Ciro Raporu: kapsam seçici + hedef kaynağı (2026-07-29) ────────────────
   Rapor sayfasının üst yarısı TEK kapsamı anlatır; seçici o kapsamı değiştirir.
   İzin verilen kapsamları sunucu söyler — tek seçenek varsa şerit hiç basılmaz. */
.scope-picker {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.scope-chip {
    background: rgba(var(--ust-katman-rgb), 0.04);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-family: inherit;
}
.scope-chip:hover { color: var(--text-primary); border-color: var(--primary); }
.scope-chip.active {
    background: rgba(var(--primary-rgb), 0.18);
    border-color: var(--primary);
    color: var(--text-primary);
}

/* Hedefin hangi kademeden geldiği. Miras edilenler soluk (atanmamış olduğu belli
   olsun), kişiye özel olanlar renkli. */
.goal-source { font-size: 10px; opacity: 0.75; }
.goal-source--self { color: var(--sari-vurgu); opacity: 1; }
.goal-source--assigned { color: var(--primary); opacity: 1; }

/* Leaderboard'da kendi satırın */
.perf-row--me { background: rgba(var(--primary-rgb), 0.07); border-radius: var(--border-radius-sm); padding: 6px 8px; margin: -6px -8px; }
.perf-me-tag {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.15);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 6px;
}
/* Hedef atanmamış durumu: eylem çağrısı, hata değil */
.goal-status--none { color: var(--text-muted); }

/* Kuşbakışı: ofis satırında danışman kırılımını açan düğme (Faz 3) */
.ofis-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    padding: 0 6px 0 0;
    font-family: inherit;
    transition: var(--transition-smooth);
}
.ofis-toggle:hover { color: var(--primary); }
.ofis-detay { background: rgba(var(--ust-katman-rgb), 0.02); }

/* ⚠️ Ciro Raporu grafik+hedef satırı: `grid-template-columns: 2fr 1fr` inline yazılı
   ve media query'si YOKTU → 375px'te grafik kartı 830px'e şişip hedef kartını ve
   leaderboard'u ekran dışına itiyordu (#app-view overflow-x:hidden olduğu için
   kaydırılamıyor da). Grid/flex çocukları varsayılan `min-width:auto` alır ve
   içeriğinden küçülemez — dashboard (2026-07-03) ve Bölge Analizleri'nde
   (2026-07-29) çıkan AYNI hata sınıfı. Dar ekranda tek sütuna iner. */
.reports-main-grid { min-width: 0; }
.reports-main-grid > * { min-width: 0; max-width: 100%; }
@media (max-width: 900px) {
    .reports-main-grid { grid-template-columns: 1fr !important; }
}

/* Geçici şifre hatırlatma şeridi (2026-07-30). Admin şifreyi sıfırladığında
   kullanıcı kendi şifresini belirleyene kadar her sayfada görünür. Zorunlu
   değiştirme bilinçli olarak yok — hatırlatma bu yüzden kalıcı ve görünür. */
.temp-pw-banner {
    margin: 0 0 16px 0;
    padding: 12px 16px;
    border-radius: var(--border-radius-md);
    background: rgba(var(--koyu-turuncu-rgb), 0.1);
    border: 1px solid rgba(var(--koyu-turuncu-rgb), 0.3);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.temp-pw-banner[hidden] { display: none; }
.temp-pw-link {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.4);
}
.temp-pw-link:hover { border-bottom-color: var(--primary); }

/* ---------------------------------------------------------------------------
   Eşleştirme uyarıları (2026-08-02) — portföy formunda oda/bina yaşı boşken.
   Motor eksik veriyi NÖTR sayar (arsa/ticaride oda olmaz), bu yüzden boş alan
   tam uyumla berabere çıkıyordu; çözüm motorda değil kaynakta: danışman uyarılır.
   ENGELLEYİCİ DEĞİL — amber ton bilinçli (kırmızı "hata" izlenimi verirdi).
   `hidden` özniteliği author kuralına yenilmesin diye ayrıca gizleniyor
   (2026-07-25'te .sp-chosen'da yaşanan tuzağın aynısı).
--------------------------------------------------------------------------- */
.match-warn {
    margin-top: 6px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--sari-vurgu);
    background: rgba(var(--sari-rgb), 0.08);
    border-left: 3px solid rgba(var(--sari-rgb), 0.55);
    border-radius: 0 var(--border-radius-sm, 6px) var(--border-radius-sm, 6px) 0;
    padding: 6px 10px;
}
.match-warn[hidden] { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
   BİREYSEL ÇALIŞMA ALANINDA AKTİVİTE AKIŞI (2026-08-05)
   Ölçüm (canlı, 1710×985): kart 480px, iç listede görünen 391px, içerik
   18.704px → %97,9'u görünmüyordu; 6 satır göstermek için 246 satır DOM'a
   basılıyor ve 15 sn'lik her poll'de yeniden çiziliyordu.
   Panel çok danışmanlı ofiste ekip akışıdır (DEĞİŞMEZ); tek kişilik alanda
   kullanıcının kendi yaptıklarını geri anlatır. Bu yüzden yalnız `--solo`
   işaretli hâlinde küçültülür. SİLİNMEZ: "o kaydı ne zaman sildim" bilgisi
   bazen gerekiyor, silmek geri alınamaz kayıp olurdu.
   ───────────────────────────────────────────────────────────────────────── */
.activity-feed-card--solo {
    height: 260px;   /* 480 → 260; AI kartıyla hizayı bilerek bırakıyoruz
                        (.dashboard-grid align-items:start zaten üstten hizalı) */
}

/* ── Mobil: bireysel alanda aktivite EN ALTA iner ──────────────────────────
   Ölçüm (2026-08-02, iOS Simulator): 874px ekranda ilk gerçek içerik 964px'te
   başlıyordu — bir tam ekran boyu kaydırmadan hiçbir şey görünmüyordu; 480px'lik
   aktivite kartı bunun büyük kısmıydı.
   ⚠️ `display: contents` ŞART: kartlar iki sütun DIV'inin içinde duruyor, doğrudan
   grid çocuğu değiller — sarmalayıcılar şeffaflaşmadan `order` onlara işlemez.
   ⚠️ `!important` gerekli: sol sütun DIV'i inline `display:flex` taşıyor ve
   inline stil normal CSS'i yener.
   Sonuç sıra: Piyasalar → AI Eşleştirme → Konut Kredisi → Son Hareketlerim. */
@media (max-width: 1024px) {
    .dashboard-grid--solo > div {
        display: contents !important;
    }
    .dashboard-grid--solo .activity-feed-card--solo {
        order: 99;
    }
    /* Musa (2026-08-05): "piyasalar ile akıllı eşleştirmenin yerlerini
       değiştirelim". Mobilde AI Eşleştirme, Piyasalar'ın ÜSTÜNE alınır —
       eşleşmeler aksiyon alınabilir bilgi, kurlar referans bilgidir.
       Yeni sıra: AI Eşleştirme → Piyasalar → Konut Kredisi → Son Hareketlerim.
       ⚠️ Masaüstü ETKİLENMEZ: kural @1024 içinde; geniş ekranda iki kart
       zaten yan yana ve yerleri değişmiyor. */
    .dashboard-grid--solo .ai-matchmaking-card {
        order: -1;
    }
    /* Ekip ofisi (2026-10-21, Musa: "yukarı alalım"): Konut Kredisi sol sütuna geçince (§2.119) alt alta
       dizilen sütunlarda AI Eşleştirme Konut Kredisi'nin ALTINA düşmüştü. Aynı şeffaflaştırma + sıra:
       Aktivite (ekip akışı, en üstte KALIR) → AI Eşleştirme → Piyasalar → Konut Kredisi → Doğum Günü.
       Bireysel kural yukarıda, aynen (aktivite en altta). */
    .dashboard-grid:not(.dashboard-grid--solo) > div {
        display: contents !important;
    }
    .dashboard-grid:not(.dashboard-grid--solo) .activity-feed-card {
        order: -2;
    }
    .dashboard-grid:not(.dashboard-grid--solo) .ai-matchmaking-card {
        order: -1;
    }
}

/* ── Ortak Havuz: "Yalnız diğer danışmanlar" çipi (2026-08-05) ─────────────
   Havuzun tek amacı BAŞKASININ stoğunu görmek; canlı ölçümde 31 ilanın 23'ü
   (%74) ekranı açanın kendi ilanıydı. Çip tek tıkla kendi ilanlarını gizler.
   Varsayılan KAPALI — mevcut davranış değişmez. */
.shp-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(var(--yuzey-rgb), 0.6);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 10px 14px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.shp-chip:hover { border-color: var(--primary); color: var(--text-primary); }
.shp-chip.active {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: var(--primary);
    color: var(--primary);
}
.shp-chip-count {
    background: rgba(var(--gri-rgb), 0.2);
    color: inherit;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
}
.shp-chip.active .shp-chip-count { background: rgba(var(--primary-rgb), 0.3); }
/* [hidden] author kuralına yenilmesin (.sp-chosen dersi, 2026-07-25) */
.shp-chip[hidden] { display: none; }
/* Tür + sıralama seçicileri (2026-09-17) — kutular içeriğinden dar kalıyordu:
   telefonda "Tüm İlanl" / "Sırala: En", masaüstünde "Fiyat: Düşükten Yüks".
   Masaüstünde yan yana KALIR ve en uzun seçenek kadar genişler (arama kutusu
   kalan yeri alır); telefonda alt alta iner.
   ⚠️ `max-content` telefonda UYGULANMAZ — dar ekranda kutuyu ekrandan taşırır. */
.shp-secim-satiri {
    display: flex;
    gap: 12px;
}
.shp-secim-satiri > select { min-width: max-content; }
@media (max-width: 768px) {
    .shp-secim-satiri { flex-wrap: wrap; }
    .shp-secim-satiri > select {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* Kira fiyatlarında "/ay" soneki (2026-08-05) — ₺28.000 (aylık kira) ile
   ₺8.300.000 (satış) listede yan yana duruyor ve aynı puntoda/renkte
   basılıyordu. Sonek fiyattan belirgin şekilde SÖNÜK: rakam okunurluğunu
   bozmadan birimi söyler. */
.price-period {
    font-size: 0.62em;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
}

/* Portföy kartında "N eşleşen müşteri" rozeti (2026-08-05; "uygun" → "eşleşen" 2026-11-05, §2.139) — veri zaten
   `state.opportunities`'te vardı ama yalnız dashboard'da gösteriliyordu.
   Canlı ölçüm: 23 aktif ilanın 7'sinde eşleşme var, 16'sında yok → rozet
   seyrek çıkar, ekran gürültülenmez. Renk mor: AI eşleştirme paneliyle
   aynı dil (o panel de mor çerçeveli). */
.match-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(var(--mor-rgb), 0.15);
    color: var(--mor-vurgu);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

/* ⚠️ `.portfolio-bottom` space-between kullanıyor. Bireysel alanda danışman
   satırı gizlenince satırda tek öğe (statü rozeti) kalabiliyor ve sola
   kayıyordu. `margin-left:auto` statüyü kaç öğe olursa olsun SAĞDA tutar:
   [danışman] [eşleşme] ....... [statü]   /  [eşleşme] ....... [statü]  /  ....... [statü] */
.portfolio-bottom .status-badge {
    margin-left: auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   MÜŞTERİ LİSTESİ — "Sorumlu Danışman" sütununu bireysel alanda gizle
   (2026-08-06). Ölçüm: 49 satırın 49'unda aynı isim, iki farklı yazımla.
   ⚠️ Sınıf HEM th HEM td'de → tek anahtarla kapanır, sayıları ayrışamaz.
      Koşullu DOM kullanılsaydı soğuk açılışta (acente henüz bilinmiyor)
      başlık ile hücre sayısı tutmayabilir ve tablo kayardı.
   ⚠️ Çok danışmanlı ofiste sınıf hiç eklenmez → sütun aynen görünür. */
.crm-table.hide-agent-col .col-agent {
    display: none;
}

/* --- Eklenti kurulum akışı (Profilim, 2026-08-09) --------------------------
   Üç adımlı: indir → Chrome'a yükle → bağla. Eskiden yalnız "anahtar üret"
   butonu vardı ve danışman anahtarı elle kopyalayıp eklentiye yapıştırıyordu;
   üstelik eklentiyi NEREDEN alacağı hiçbir yerde yazmıyordu. */
.ext-steps { list-style: none; counter-reset: ext; margin: 0 0 14px; padding: 0; }
.ext-steps > li {
    counter-increment: ext;
    position: relative;
    padding: 0 0 16px 34px;
    border-left: 1px solid var(--border-color);
    margin-left: 11px;
}
.ext-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.ext-steps > li::before {
    content: counter(ext);
    position: absolute; left: -11px; top: 0;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--primary); color: #fff;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.ext-step-baslik { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.ext-step-not { font-size: 11.5px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 8px; }
.ext-kod {
    background: rgba(var(--primary-rgb), 0.12); color: var(--primary);
    padding: 1px 6px; border-radius: 4px; font-family: monospace; font-size: 11px;
}
.ext-btn { font-size: 12px; padding: 8px 12px; }
.ext-durum { font-size: 11.5px; margin-top: 8px; line-height: 1.5; }
.ext-durum.ok { color: var(--yesil-vurgu); }
.ext-durum.err { color: var(--gul-vurgu); }
.ext-durum.warn { color: var(--sari-vurgu); }
.ext-manuel { margin-top: 4px; }
.ext-manuel > summary {
    cursor: pointer; font-size: 11.5px; color: var(--text-muted);
    padding: 6px 0; user-select: none;
}
.ext-manuel > summary:hover { color: var(--text-secondary); }

/* --- Eklenti güncelleme uyarısı (2026-08-09) -------------------------------
   Paketlenmemiş eklentiler ASLA otomatik güncellenmez ve eski sürüm uyarısı
   yalnız popup'ta, yalnız _EXT_MIN_VERSION aşılırsa çıkıyordu → danışmanlar
   sessizce eski sürümde kalıyordu. Şerit dashboard'da, ayrıntı Profilim'de. */
.ext-update-banner {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px; margin-bottom: 18px;
    background: rgba(var(--sari-rgb), 0.08);
    border: 1px solid rgba(var(--sari-rgb), 0.3);
    border-radius: var(--border-radius-md);
}
.ext-upd-ikon { font-size: 20px; flex-shrink: 0; }
.ext-upd-metin { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ext-upd-metin strong { font-size: 13px; color: var(--sari-vurgu); }
.ext-upd-metin span { font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; }
.ext-upd-btn { flex-shrink: 0; font-size: 12px; padding: 7px 12px; text-decoration: none; }
.ext-upd-kapat {
    flex-shrink: 0; background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 15px; padding: 4px 6px; line-height: 1;
}
.ext-upd-kapat:hover { color: var(--text-secondary); }

.ext-update-note {
    padding: 12px 14px; margin-bottom: 14px;
    background: rgba(var(--sari-rgb), 0.08);
    border: 1px solid rgba(var(--sari-rgb), 0.3);
    border-radius: var(--border-radius-sm);
}
.ext-update-note > strong { display: block; font-size: 12.5px; color: var(--sari-vurgu); margin-bottom: 8px; }
.ext-update-note ol { margin: 0 0 8px; padding-left: 18px; }
.ext-update-note li { font-size: 11.5px; color: var(--text-secondary); line-height: 1.7; }
.ext-upd-ipucu { font-size: 11px; color: var(--text-muted); }

@media (max-width: 768px) {
    /* Dar ekranda buton ve kapatma alta insin, metin ezilmesin. */
    .ext-update-banner { flex-wrap: wrap; }
    .ext-upd-metin { flex-basis: 100%; order: 1; }
    .ext-upd-btn { order: 2; }
}

/* Kişisel çalışma alanı rozeti — hiyerarşi seçicisinin yerine geçer.
   (Bireysel alanlar ofis hiyerarşisine dahil edilmez; 2026-08-09.) */
.ag-tag--muted { opacity: 0.7; font-weight: 500; }

/* Kanban sütununda kırpma notu — sessiz kesme "hepsi bu" diye okunur (2026-08-12). */
.kanban-more {
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    padding: 8px 6px;
    border-top: 1px dashed var(--border-color);
    margin-top: 4px;
}

/* Gecikmiş anımsatıcı sayacı (2026-08-12) — yalnız gecikmiş iş varken basılır. */
.reminder-counter-card.red .icon-wrapper { background: var(--ios-kirmizi); }
.reminder-counter-card.red .counter-number { color: var(--ios-kirmizi); }
.reminder-counter-card.red.active { --card-active-border: rgba(var(--ios-kirmizi-rgb), 0.35); }
.category-title.red, .category-total-badge.red { color: var(--ios-kirmizi); }
.category-total-badge.red { background: rgba(var(--ios-kirmizi-rgb), 0.12); }

/* ═══════════ Geri Bildirim Merkezi (2026-08-17) ═══════════ */
/* ⚠️ Dar ekranda İÇ KAYDIRMA KUTUSU (max-height + overflow) YOK: bu kod
   tabanında aynı hata üç kez çıktı (anımsatıcılar flex:1 1 0 → 0px, bölge
   brifingi max-height:520px kesmesi, mobil portföy grid'i). Liste doğal
   yüksekliğinde akar, sayfanın kendisi kaydırılır. */
.fb-duzen {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.fb-sol, .fb-sag { min-width: 0; max-width: 100%; }

.fb-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 20px;
}
.fb-card-baslik {
    font-family: 'Outfit', sans-serif;
    font-size: 16px; font-weight: 700;
    margin: 0 0 6px; color: var(--text-primary);
}
.fb-yardim { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 16px; }
.fb-ops { color: var(--text-muted); font-weight: 400; font-size: 11px; }

.fb-satir { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.fb-alan { margin-bottom: 14px; min-width: 0; }
.fb-alan label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; font-weight: 600; }
.fb-alan input[type="text"], .fb-alan select, .fb-alan textarea { width: 100%; }
.fb-alan textarea { resize: vertical; min-height: 110px; }
.fb-sayac { text-align: right; font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* Yerel dosya seçici gizlenir (metni "Choose Files / No file chosen" olarak
   TARAYICI çizer, Türkçeleştirilemez); yerine kendi düğmemiz görünür.
   ⚠️ `display:none` KULLANILMAZ — öğe yerleşimde kalsın ki `.click()` her
   tarayıcıda güvenle çalışsın. `pointer-events:none` kazara tıklamayı,
   markup'taki `tabindex="-1"` de çift sekmelemeyi önler. */
.fb-dosya-gizli {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.fb-dosya-sec-satir {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fb-dosya-sec { padding: 9px 16px; font-size: 13px; }

.fb-dosya-durum {
    font-size: 13px;
    color: var(--text-secondary);
}

.fb-dosya-liste { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.fb-dosya {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 11px; color: var(--text-secondary);
    background: rgba(var(--ust-katman-rgb), 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 6px 10px;
}
.fb-dosya span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-dosya-kaldir {
    background: none; border: none; color: var(--danger);
    cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; flex-shrink: 0;
}
.fb-uyari {
    margin-top: 10px; font-size: 11px; line-height: 1.5;
    color: var(--sari-vurgu); background: rgba(var(--sari-rgb), 0.08);
    border: 1px solid rgba(var(--sari-rgb), 0.25);
    border-radius: var(--border-radius-sm); padding: 8px 10px;
}
.fb-form-alt { display: flex; gap: 10px; flex-wrap: wrap; }

.fb-liste { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.fb-bos {
    padding: 28px 16px; text-align: center;
    color: var(--text-muted); font-size: 13px;
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-md);
}
.fb-kayit {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 14px 16px;
}
.fb-kayit-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fb-kayit-baslik { font-weight: 600; font-size: 14px; color: var(--text-primary); margin-bottom: 4px; }
.fb-kayit-metin { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; white-space: pre-line; }
.fb-kayit-alt { margin-top: 10px; }
.fb-not { font-size: 11px; color: var(--text-muted); }
.fb-tarih { font-size: 11px; color: var(--text-muted); margin-left: auto; }
.fb-kategori, .fb-modul { font-size: 11px; color: var(--text-secondary); }
.fb-modul { color: var(--text-muted); }

.fb-durum {
    font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
    padding: 3px 8px; border-radius: 999px; text-transform: uppercase;
}
.fb-durum--yeni        { background: rgba(var(--primary-rgb), 0.15);  color: var(--indigo-vurgu); }
.fb-durum--inceleniyor { background: rgba(var(--sari-rgb), 0.15);  color: var(--sari-vurgu); }
.fb-durum--cozuldu     { background: rgba(var(--yesil-vurgu-rgb), 0.15);  color: var(--yesil-vurgu); }
.fb-durum--reddedildi  { background: rgba(var(--gri-rgb), 0.15); color: var(--text-secondary); }

.fb-oncelik { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.fb-oncelik--dusuk  { background: rgba(var(--gri-rgb), 0.15); color: var(--text-secondary); }
.fb-oncelik--normal { background: rgba(var(--primary-rgb), 0.15);  color: var(--indigo-vurgu); }
.fb-oncelik--yuksek { background: rgba(var(--ton-turuncu-rgb), 0.15);  color: var(--ton-turuncu); }
.fb-oncelik--kritik { background: rgba(var(--danger-rgb), 0.15);   color: var(--kirmizi-vurgu); }

.fb-gorseller { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.fb-gorsel-link { display: block; line-height: 0; }
.fb-gorsel-link img {
    width: 120px; height: 80px; object-fit: cover;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
}
.fb-yanit {
    margin-top: 12px; padding: 10px 12px;
    background: rgba(var(--yesil-vurgu-rgb), 0.06);
    border-left: 3px solid var(--yesil-vurgu);
    border-radius: var(--border-radius-sm);
}
.fb-yanit-ust { display: flex; align-items: center; font-size: 11px; font-weight: 700; color: var(--yesil-vurgu); margin-bottom: 6px; }
.fb-yanit-metin { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; white-space: pre-line; }

@media (max-width: 900px) {
    .fb-duzen { grid-template-columns: 1fr; }
}

/* Geri Bildirim — yönetici modu */
.fb-admin-filtre {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto;
    gap: 12px; align-items: center;
    margin-bottom: 16px;
}
.fb-admin-filtre input[type="search"], .fb-admin-filtre select { width: 100%; }
.fb-arsiv-toggle {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-secondary); white-space: nowrap;
}
.fb-sayac-etiket { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

.fb-kayit--admin { border-left: 3px solid var(--primary); }
.fb-arsiv { opacity: 0.6; }
.fb-bildiren { font-size: 11.5px; color: var(--text-muted); margin-bottom: 8px; }

.fb-tani { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fb-tani-oge {
    font-size: 10.5px; color: var(--text-muted);
    background: rgba(var(--ust-katman-rgb), 0.04);
    border: 1px solid var(--border-color);
    border-radius: 999px; padding: 3px 9px;
}

.fb-admin-kutu {
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--border-color);
    display: flex; flex-direction: column; gap: 10px;
}
.fb-admin-satir { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.fb-admin-satir label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 11px; color: var(--text-secondary); min-width: 0;
}
.fb-admin-satir select { min-width: 140px; }
.fb-yanit-alan { width: 100%; resize: vertical; min-height: 56px; }
.fb-yanit-kaydet { align-self: flex-start; }

@media (max-width: 900px) {
    .fb-admin-filtre { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   ACENTE AYAR DRAWER'I (2026-08-19)
   8 kontrol satırdan panele taşındı → satır 223 px'ten ~56 px'e indi,
   11 acente tek ekrana sığıyor (önce 2 sığıyordu).
   ═══════════════════════════════════════════════════════════════════ */
.ag-drw-bolum { margin-bottom: 22px; }
.ag-drw-bolum:last-child { margin-bottom: 0; }
.ag-drw-bolum-baslik {
    font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--text-secondary); margin: 0 0 6px;
    padding-bottom: 6px; border-bottom: 1px solid var(--border-color);
}
.ag-drw-ipucu { font-size: 11.5px; color: var(--text-muted); margin: 0 0 10px; line-height: 1.5; }
.ag-drw-ipucu--uyari { color: var(--warning); }

/* ⚠️ min-width:0 — grid/flex çocuğu varsayılan auto alır, dar panelde taşar (§2.10) */
.ag-drw-alanlar { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ag-drw-alanlar > * { min-width: 0; max-width: 100%; }
.ag-drw-alanlar .ag-select,
.ag-drw-alanlar .ag-rate-input { width: 100%; }
.ag-drw-alanlar .btn { width: 100%; justify-content: center; }

.ag-drw-etiket {
    display: flex; flex-direction: column; gap: 5px;
    font-size: 11.5px; color: var(--text-secondary); min-width: 0;
}

.ag-drw-bolum--tehlike .ag-drw-bolum-baslik { color: var(--danger); border-bottom-color: rgba(var(--danger-rgb), .28); }

/* Satır artık tek düğme taşıyor → tablo kompakt */
.ag-row .btn-ag-ayarlar { white-space: nowrap; }
/* Satırın tamamı ayar panelini açar (mobilde İŞLEMLER sütunu ekran dışında) */
.ag-row[data-agency-id] { cursor: pointer; }
.ag-row[data-agency-id]:hover { background: rgba(var(--primary-rgb), 0.07); }
.ag-row[data-agency-id]:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* ── PROFİL · HESAP İZİ (2026-09-08) ──────────────────────────────────────────
   Üç zaman damgası. ⚠️ Yeni iç kaydırma kutusu YOK (§2.10): liste kısa ve
   sabit; `max-height` + `overflow-y` koymak dar ekranda satırları görünmez
   kırpardı. Satırlar dar ekranda alt alta geçer, kırpılmaz.                   */
.iz-liste {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.iz-satir {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    min-width: 0;
}
.iz-satir:last-child { border-bottom: none; }
.iz-etiket {
    font-size: 12px;
    color: var(--text-secondary);
    flex: 1 1 150px;
    min-width: 0;
}
.iz-deger {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    min-width: 0;
}
.iz-bagil {
    font-weight: 500;
    color: var(--text-muted);
}
.iz-not {
    flex: 1 1 100%;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.45;
}

/* ── Form etiketi yanındaki "(isteğe bağlı)" ipucu (2026-09-09) ─────────────
   Görüşme formundaki "İlgili İlan" alanı için. Zorunlu/isteğe bağlı ayrımını
   ETİKETTE söylemek, alanı boş bırakan danışmanın bir şeyi atladığını
   sanmasını engeller (§2.3: alan boş kalabilir ve bu geçerli bir cevaptır). */
.form-hint-inline {
    font-weight: 400;
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 4px;
}

/* ══ GENEL ARAMA (2026-09-09) ══════════════════════════════════════════════
   Palet `openModal` içinde açılır — yeni z-index katmanı YOK (§2.17).
   ⚠️ İÇ KAYDIRMA KUTUSU YOK (§2.10): `.modal-content` zaten overflow-y:auto;
      buraya max-height koymak dar ekranda sonuçları görünmez kırpardı.
      Uzunluk grup başına tavanla (GRUP_TAVANI) sınırlanıyor, kırpma olursa
      "+N sonuç daha" satırı AÇIKÇA söylüyor. */
.ga-kap { display: flex; flex-direction: column; gap: 14px; }

.ga-girdi {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    color: var(--text-primary);
    background: rgba(var(--yuzey-rgb), 0.6);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
}
.ga-girdi:focus {
    outline: none;
    border-color: var(--primary);
}

.ga-sonuc { display: flex; flex-direction: column; gap: 16px; }

.ga-ipucu {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 18px 8px;
    line-height: 1.5;
}

.ga-grup { display: flex; flex-direction: column; }
.ga-grup-baslik {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 0 4px 6px;
    border-bottom: 1px solid var(--border-color);
}
.ga-sayi {
    background: rgba(var(--gri-rgb), 0.16);
    color: var(--text-soft);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 10px;
}

.ga-satir {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 8px;
    border-bottom: 1px solid rgba(var(--ust-katman-rgb), 0.03);
    text-decoration: none;
    color: inherit;
    /* Uzun başlık dar ekranda satırı taşırmasın (§2.10 kalkanı) */
    min-width: 0;
}
.ga-satir:last-child { border-bottom: none; }
.ga-satir:hover,
.ga-satir.active { background: rgba(var(--primary-rgb), 0.16); }
.ga-satir-ad {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
.ga-satir-alt {
    font-size: 11px;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}
.ga-daha {
    font-size: 11px;
    color: var(--text-muted);
    padding: 8px 8px 0;
    font-style: italic;
}

/* Dashboard tetikleyicisi — arama kutusu GÖRÜNÜMÜNDE buton */
.ga-tetik {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-bottom: 20px;
    padding: 12px 16px;
    cursor: pointer;
    text-align: left;
    color: var(--text-muted);
    background: rgba(var(--yuzey-rgb), 0.6);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    transition: border-color 0.2s, color 0.2s;
}
.ga-tetik:hover {
    border-color: var(--primary);
    color: var(--text-secondary);
}
.ga-tetik-metin {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ga-tetik-kisayol {
    flex: 0 0 auto;
    font-family: monospace;
    font-size: 10px;
    padding: 2px 7px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   YENİ MESAJ — kişiden başlayan akış (2026-09-15)
   ═══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ Buton KÜÇÜLMEZ (§2.42): başlık şeridine üçüncü öğe eklemek, topbar'da
   breadcrumb'ı ezen kusurun aynısını üretebilir. Başlık ellipsis'lenir,
   buton sabit kalır. */
.messages-yeni-btn {
    margin-left: auto; flex-shrink: 0;
    font-size: 11px; font-weight: 700; padding: 6px 11px;
    border-radius: var(--border-radius-sm); white-space: nowrap;
}

.ym-form { display: flex; flex-direction: column; gap: 16px; color: var(--text-primary); }
.ym-alan { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
/* 🔴 [hidden] bir UA kuralıdır ve yukarıdaki display:flex (yazar stili) onu YENER.
   Bu satır olmasa "İlgili İlan" alanı kişi seçilmeden de görünürdü. Depodaki
   altıncı örnek — .sp-chosen (2026-07-25) · .vekil-kutu · .temp-pw-banner ·
   .match-warn · .shp-chip aynı dersi taşıyor. */
.ym-alan[hidden] { display: none; }
.ym-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.ym-ipucu { font-weight: 400; color: var(--text-muted); }
.ym-yukleniyor, .ym-bos {
    padding: 14px; text-align: center; font-size: 12px; color: var(--text-secondary);
    background: rgba(var(--ust-katman-rgb), 0.02); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm); line-height: 1.6;
}
.ym-bos small { color: var(--text-muted); font-size: 11px; }
.ym-form textarea {
    width: 100%; resize: vertical; padding: 12px; font-family: inherit; font-size: 13px;
    border-radius: var(--border-radius-sm); border: 1px solid var(--border-color);
    background: rgba(var(--yuzey-rgb), 0.4); color: var(--text-primary);
}
.ym-actions { display: flex; justify-content: flex-end; gap: 10px; }

.ym-kisi-satir { display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; }
.ym-kisi-foto {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 1px solid rgba(var(--ust-katman-rgb), 0.08);
}
.ym-kisi-bilgi { min-width: 0; flex: 1; }
.ym-kisi-ad {
    font-size: 13px; font-weight: 600; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ym-kisi-acente {
    font-size: 10px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ym-rozet {
    flex-shrink: 0; font-size: 9px; font-weight: 700; padding: 2px 7px;
    border-radius: 10px; white-space: nowrap;
}
.ym-rozet-acente { background: rgba(var(--primary-rgb), 0.15); color: var(--primary); border: 1px solid rgba(var(--primary-rgb), 0.3); }
.ym-rozet-havuz { background: rgba(var(--ios-yesil-rgb), 0.12); color: var(--ios-yesil); border: 1px solid rgba(var(--ios-yesil-rgb), 0.28); }
.ym-rozet-diger { background: rgba(var(--gri-rgb), 0.12); color: var(--text-secondary); border: 1px solid rgba(var(--gri-rgb), 0.28); }

.ym-ilan-satir { min-width: 0; }
.ym-ilan-baslik {
    font-size: 12px; font-weight: 600; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ym-ilan-konum { font-size: 10px; color: var(--text-muted); }

/* ── Ciro Raporu: yoldaki ciro katmanı (§2.66, 2026-09-22) ──────────────────
   Hedef çubuğunda kazanılanın hemen ardından SOLUK + ÇİZGİLİ ikinci katman:
   açık süreçlerin OLASI komisyonu. Dolu kısımla karışmasın diye renk aynı aile,
   doku farklı (kesin değil, olası). Çubuk flex olur ki iki katman yan yana dizilsin;
   genişlikler toplamı JS'te %100 ile sınırlı → taşma yok. */
.goal-track { display: flex; }
.goal-track > .goal-bar,
.goal-track > .goal-bar-acik { flex: none; }
.goal-bar-acik {
    width: 0%;
    height: 100%;
    background: repeating-linear-gradient(135deg,
        rgba(var(--menekse-rgb), 0.38) 0 6px, rgba(var(--menekse-rgb), 0.16) 6px 12px);
    border-radius: 0 7px 7px 0;
    transition: width 1s ease-in-out;
}
.goal-acik {
    font-size: 11px;
    color: var(--menekse-vurgu-2);
    margin-top: 6px;
    line-height: 1.45;
}
.goal-acik:empty { display: none; }

/* ===========================================================================
   KVKK Paket 1 (2026-09-25, KVKK_PLANI.md) — beyan ekranı, kayıt formundaki
   beyan, Profilim ofis kartı, müşteri aydınlatma kutusu/rozeti/bloğu.
   ⚠️ İç kaydırma kutusu YOK (§2.10): beyan metni sayfanın kendisinde akar.
   ⚠️ Yalnız tanımlı değişkenler (§2.13); renkler mevcut dilin tonları.
   =========================================================================== */
.beyan-ekrani {
    min-height: 100%;
    display: flex;
    justify-content: center;
    padding: 32px 16px 48px;
}
.beyan-kart {
    width: 100%;
    max-width: 720px;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 28px 24px;
    color: var(--text-primary);
}
.beyan-etiket {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--beyan-renk);
    background: rgba(var(--beyan-rgb), 0.12);
    border-radius: 999px;
    padding: 2px 10px;
}
.beyan-baslik { font-size: 22px; line-height: 1.3; margin: 12px 0 8px; text-wrap: balance; }
.beyan-aciklama { color: var(--text-secondary); font-size: 13px; line-height: 1.6; margin: 0 0 18px; }
.beyan-metin p { font-size: 14px; line-height: 1.7; margin: 0 0 12px; max-width: 68ch; }
.beyan-yukleniyor { color: var(--text-secondary); margin: 0; }
.beyan-onay,
.auth-beyan-onay {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: rgba(var(--ust-katman-rgb), 0.02);
    font-size: 13.5px;
    line-height: 1.5;
    cursor: pointer;
}
.beyan-onay input,
.auth-beyan-onay input { margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px; }
.beyan-butonlar { display: flex; flex-wrap: wrap; gap: 10px; }
.beyan-butonlar .btn { flex: 1 1 180px; }

.auth-beyan { margin: 0 0 16px; min-width: 0; }
.auth-beyan[hidden] { display: none; }
.auth-beyan-metin {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 10px 12px;
}
.auth-beyan-metin summary { cursor: pointer; color: var(--text-primary); font-weight: 600; }
.auth-beyan-metin p { margin: 10px 0 0; }
.auth-beyan-onay { margin: 10px 0 0; font-size: 12.5px; }

.kvkk-kart-aciklama { font-size: 12.5px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 14px; }
.kvkk-kart-not { font-size: 12px; color: var(--text-secondary); margin: 12px 0 0; line-height: 1.5; }
.kvkk-kart-not a { color: var(--primary); font-weight: 600; }
.kvkk-kart-uyari {
    font-size: 12.5px;
    line-height: 1.6;
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--border-radius-md);
    background: rgba(var(--koyu-turuncu-rgb), 0.1);
    border: 1px solid rgba(var(--koyu-turuncu-rgb), 0.3);
}
.kvkk-ofis-oku { display: grid; gap: 8px; font-size: 13px; }
.kvkk-ofis-oku div { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.kvkk-ofis-oku span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.kvkk-anahtar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}
.kvkk-anahtar div { display: grid; gap: 4px; flex: 1 1 240px; min-width: 0; }
.kvkk-anahtar span { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

.aydinlatma-kutu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 4px 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--beyan-rgb), 0.35);
    background: rgba(var(--beyan-rgb), 0.07);
    border-radius: var(--border-radius-md);
    font-size: 13px;
    min-width: 0;
}
.aydinlatma-kutu label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; margin: 0; min-width: 0; }
.aydinlatma-kutu input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; width: 17px; height: 17px; }
.aydinlatma-kutu.kapali { border-color: var(--border-color); background: rgba(var(--ust-katman-rgb), 0.02); opacity: .85; }
.aydinlatma-kutu.kapali label { cursor: not-allowed; }
.aydinlatma-kutu.tamam { border-color: rgba(var(--secondary-rgb), 0.35); background: rgba(var(--secondary-rgb), 0.07); }
.aydinlatma-not { font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; }
.aydinlatma-baglanti { font-size: 12px; color: var(--primary); font-weight: 600; white-space: nowrap; }
.aydinlatma-rozet {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.aydinlatma-rozet.tamam { background: rgba(var(--secondary-rgb), 0.12); color: var(--secondary); }
.aydinlatma-rozet.bekliyor { background: rgba(var(--warning-rgb), 0.12); color: var(--warning); }
.not-ozel-veri { display: block; margin-top: 6px; font-size: 11px; color: var(--text-muted); }

.kvkk-musteri-blok {
    /* Kartın iki sütunlu bilgi ızgarasında (.specs-grid) TAM SATIR: telefon hücresinin
       içinde ~150px'e sıkışıyor, butonlar iki satıra kırılıyordu (canlıda ölçüldü). */
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    min-width: 0;
}
.kvkk-musteri-blok .btn {
    font-size: 11px;
    padding: 6px 12px;
    /* Canlıda görüldü (2026-09-25): dar kart sütununda iki buton iki satıra kırılıyor,
       <a> biçimli WhatsApp butonu altı çizili bağlantı gibi duruyordu. Tam genişlik +
       tek satır; bağlantı çizgisi yok (komşu Ara/WhatsApp butonları gibi). */
    flex: 1 1 220px;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    color: var(--text-primary);
}
.kvkk-wa-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.kvkk-wa-onay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-size: 12.5px;
}
.kvkk-wa-onay[hidden] { display: none; }

/* KVKK Paket 2 (2026-09-25) — saklama uyarı penceresi (components/saklama.js). */
.saklama-aciklama { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 14px; }
.saklama-bos { font-size: 13px; color: var(--text-secondary); margin: 8px 0; }
.saklama-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.saklama-satir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: rgba(var(--ust-katman-rgb), 0.02);
    min-width: 0;
}
.saklama-bilgi { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; overflow-wrap: anywhere; }
.saklama-tur { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.saklama-tarih { font-size: 12px; color: var(--text-secondary); }

/* KVKK beyan sütunu — Danışmanlar tablosu (2026-09-25). */
.usr-beyan { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.usr-beyan.tamam { background: rgba(var(--secondary-rgb), 0.12); color: var(--secondary); }
.usr-beyan.eski, .usr-beyan.bekliyor { background: rgba(var(--warning-rgb), 0.12); color: var(--warning); }
.usr-beyan-tarih { font-size: 11px; color: var(--text-muted); margin-top: 3px; white-space: nowrap; }

/* Ortak Havuz seçimi (Aşama 1, 2026-09-29). Kutu formda; rozet YALNIZ havuza
   kapalı ilanda (kart + detay). Ölçüler .office-badge / .aydinlatma-kutu ile aynı dil. */
.havuz-kutu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin: 4px 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--gok-acik-rgb), 0.3);
    background: rgba(var(--gok-acik-rgb), 0.06);
    border-radius: var(--border-radius-md);
    font-size: 13px;
    min-width: 0;
    max-width: 100%;
}
.havuz-kutu label { display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; font-weight: 600; min-width: 0; }
.havuz-kutu input[type="checkbox"] { flex-shrink: 0; width: 17px; height: 17px; margin: 0; }
.havuz-not { flex: 1 1 240px; min-width: 0; font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; overflow-wrap: anywhere; }
.havuz-kapali-rozet {
    display: inline-flex; align-items: center; gap: 3px;
    margin-top: 4px;
    max-width: 100%;
    padding: 2px 8px;
    font-size: 11px; font-weight: 600; line-height: 1.4;
    color: var(--text-secondary);
    background: rgba(var(--gri-rgb), 0.12);
    border: 1px solid rgba(var(--gri-rgb), 0.3);
    border-radius: 20px;
    white-space: nowrap;
    vertical-align: middle;
    align-self: flex-start;   /* detay bölümü dikey flex: yoksa tam genişliğe yayılıyordu (iPhone'da görüldü) */
}
.portfolio-details .office-badge + .havuz-kapali-rozet { margin-left: 4px; }

/* ── PROJELER (Paket 3a, 2026-09-30, §2.79) ───────────────────────────────
   Dar ekranda ızgara yerine LİSTE (projeler.js darEkran). Her kap min-width:0 +
   max-width:100% (§2.10); ızgara hücreleri SARAR, yatay kaydırma yok. */
.pj-bos { padding: 28px 16px; text-align: center; color: var(--text-secondary); font-size: 13px; }
.pj-arac { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; min-width: 0; }
.pj-anahtar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    margin: 0 0 14px; padding: 12px 14px; min-width: 0; max-width: 100%;
    border: 1px solid rgba(var(--warning-rgb), 0.35); background: rgba(var(--warning-rgb), 0.07);
    border-radius: var(--border-radius-md); font-size: 13px;
}
.pj-anahtar div { display: flex; flex-direction: column; gap: 3px; flex: 1 1 260px; min-width: 0; }
.pj-anahtar span { color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.pj-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.pj-kart {
    display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer;
    padding: 14px; min-width: 0; max-width: 100%;
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-md);
    color: var(--text-primary); font: inherit;
}
.pj-kart:hover { background: var(--bg-card-hover); border-color: var(--border-focus); }
.pj-kart-ust { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; min-width: 0; }
.pj-kart-ad { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.pj-kart-ofis, .pj-kart-meta { font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }
.pj-cipler { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; min-width: 0; }
.pj-cip {
    display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600;
    background: rgba(var(--gri-rgb), 0.12); border: 1px solid rgba(var(--gri-rgb), 0.28); color: var(--text-secondary);
    white-space: nowrap;
}
.pj-d-satista { background: rgba(var(--secondary-rgb), 0.14); border-color: rgba(var(--secondary-rgb), 0.45); color: var(--yesil-vurgu); }
.pj-d-opsiyonlu { background: rgba(var(--warning-rgb), 0.14); border-color: rgba(var(--warning-rgb), 0.45); color: var(--sari-vurgu); }
.pj-d-surecte { background: rgba(var(--turuncu-rgb), 0.14); border-color: rgba(var(--turuncu-rgb), 0.45); color: var(--ton-turuncu); }
.pj-d-satildi { background: rgba(var(--primary-rgb), 0.16); border-color: rgba(var(--primary-rgb), 0.45); color: var(--indigo-vurgu); }
/* Satıldı (CRM dışı) — müteahhidin kendi satışı (§2.107): satılmış rengi, kesik kenarla CRM satışından ayrılır. */
.pj-d-satildi_disarida { background: rgba(var(--primary-rgb), 0.08); border-color: rgba(var(--primary-rgb), 0.45); border-style: dashed; color: var(--indigo-vurgu); }
.pj-d-kapali { background: rgba(var(--gri-rgb), 0.10); border-color: rgba(var(--gri-rgb), 0.35); color: var(--text-muted); }
.pj-ayrinti-ust { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; min-width: 0; }
/* Geri solda, eylemler sağda; üç düğme dar ekranda SARAR (§2.10 — "Projeyi Sil" eklendi, §2.88). */
.pj-ayrinti-ust > #pj-geri { margin-right: auto; }
.pj-baslik h2 { margin: 0 0 4px; font-size: 20px; overflow-wrap: anywhere; }
.pj-not { margin-top: 6px; font-size: 12.5px; color: var(--text-secondary); white-space: pre-line; overflow-wrap: anywhere; }
.pj-suzgec {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; min-width: 0;
}
.pj-suzgec select, .pj-suzgec input { flex: 1 1 8em; min-width: 0; max-width: 100%; }
.pj-gorunum { display: inline-flex; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); overflow: hidden; }
.pj-gorunum-btn { background: transparent; border: 0; color: var(--text-secondary); padding: 6px 12px; cursor: pointer; font: inherit; font-size: 12.5px; }
.pj-gorunum-btn.aktif { background: rgba(var(--primary-rgb), 0.18); color: var(--text-primary); }
.pj-sayac { font-size: 12px; color: var(--text-muted); margin: 0 0 8px; }
.pj-blok { margin: 0 0 16px; padding: 12px; border: 1px solid var(--border-color); border-radius: var(--border-radius-md); min-width: 0; max-width: 100%; }
.pj-blok-ad { font-weight: 700; margin: 0 0 8px; }
.pj-kat { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; border-top: 1px solid rgba(var(--gri-rgb), 0.12); min-width: 0; }
.pj-kat-ad { flex: 0 0 4.5em; font-size: 12px; color: var(--text-secondary); padding-top: 8px; overflow-wrap: anywhere; }
.pj-hucreler { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.pj-hucre {
    display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 64px; padding: 6px 8px;
    border-radius: var(--border-radius-sm); border: 1px solid; cursor: pointer; font: inherit; line-height: 1.25;
}
.pj-hucre-no { font-weight: 700; font-size: 13px; }
.pj-hucre-alt { font-size: 10.5px; opacity: 0.9; }
/* Satışta olmayan kartta durum ADI — renk tek başına yetmez, dokunmatikte ipucu açılmaz. */
.pj-hucre-durum {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; opacity: 0.95;
    max-width: 6.5em; text-align: center; line-height: 1.15;     /* uzun ad ("Satıldı (CRM dışı)") kartı genişletmez, sarar */
}
/* Proje ayrıntısındaki durum çipi bir süzgeç düğmesidir: tıklayınca o duruma süzer, yeniden tıklayınca kaldırır. */
.pj-cip-dugme { cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 600; }
.pj-cip-dugme:hover { filter: brightness(1.15); }
.pj-cip-dugme.aktif { box-shadow: 0 0 0 2px currentColor; }
.pj-cip-dugme:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pj-satir-m2f { display: block; font-size: 11px; font-weight: 400; color: var(--text-secondary); }
/* m² fiyatı fiyat VE ölçüye bağlı → pencerede ikisinin altında, form satırlarından ayrık. */
.pj-b-m2f { margin: -4px 0 12px; }
/* Sıralama seçeneklerinin metni ("₺/m² (azalan)") sığsın — taban em, sabit genişlik değil (§2.61). */
.pj-suzgec #pj-s-sira { flex-basis: 11em; }
.pj-soluk { opacity: 0.22; }
.pj-liste { display: flex; flex-direction: column; gap: 6px; }
.pj-satir {
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr) auto;
    gap: 8px; align-items: center; text-align: left; padding: 10px 12px; cursor: pointer; font: inherit; font-size: 12.5px;
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm);
    color: var(--text-primary); min-width: 0; max-width: 100%;
}
.pj-satir > span { min-width: 0; overflow-wrap: anywhere; }
.pj-satir-ad { font-weight: 600; }
.pj-satir-fiyat { font-weight: 600; }
.pj-form-uc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr)); gap: 0 10px; }
.pj-ipucu { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.pj-uyari { color: var(--warning); }
.pj-birim-bilgi { display: grid; gap: 6px; font-size: 13px; margin-bottom: 12px; }
.pj-birim-bilgi span { display: inline-block; min-width: 7.5em; color: var(--text-muted); font-size: 12px; }
.pj-gecmis-baslik { margin: 14px 0 6px; font-weight: 700; font-size: 13px; }
.pj-gecmis { font-size: 12.5px; color: var(--text-secondary); }
.pj-gecmis-satir { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 4px 0; border-top: 1px solid rgba(var(--gri-rgb), 0.12); }
.pj-onz-kap { max-width: 100%; overflow-x: auto; margin: 8px 0; }
.pj-onz { width: 100%; border-collapse: collapse; font-size: 12px; }
.pj-onz th, .pj-onz td { text-align: left; padding: 5px 8px; border-bottom: 1px solid rgba(var(--gri-rgb), 0.15); vertical-align: top; }
.pj-onz-hata td { color: var(--danger); }
.pj-onz-yeni td:nth-child(3) { color: var(--yesil-vurgu); }
@media (max-width: 768px) {
    .pj-satir { grid-template-columns: minmax(0, 1fr) auto; }
    .pj-satir > span:nth-child(2), .pj-satir > span:nth-child(3) { grid-column: 1 / -1; font-size: 12px; color: var(--text-secondary); }
}
/* Paket 3b — proje müşterileri (§2.81) */
.pj-sekmeler { display: flex; gap: 6px; margin: 10px 0 12px; border-bottom: 1px solid var(--border-color); min-width: 0; max-width: 100%; }
.pj-sekme {
    background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--text-secondary);
    padding: 8px 12px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; margin-bottom: -1px;
}
.pj-sekme.aktif { color: var(--text-primary); border-bottom-color: var(--primary); }
.pj-msatir {
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px; align-items: center; text-align: left; padding: 10px 12px; cursor: pointer; font: inherit; font-size: 12.5px;
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm);
    color: var(--text-primary); min-width: 0; max-width: 100%;
}
.pj-msatir > span { min-width: 0; overflow-wrap: anywhere; }
.pj-msatir-kim { font-size: 11.5px; color: var(--text-muted); }
.pj-beyan { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.pj-beyan input { margin-top: 3px; flex: 0 0 auto; }
.pj-onz-atla td { color: var(--text-muted); }
/* Paket 3c — opsiyon + teklif (§2.82) */
.pj-ops { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 13px; margin-bottom: 8px; min-width: 0; }
.pj-ops span { color: var(--text-secondary); font-size: 12px; overflow-wrap: anywhere; }
.pj-ops-form, .pj-t-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; min-width: 0; max-width: 100%; }
.pj-ops-form select, .pj-t-form select, .pj-t-form input { flex: 1 1 12em; min-width: 0; max-width: 100%; }
/* Proje satışı (3d-1, §2.83) — opsiyon bloğuyla aynı dil; dar ekranda alt alta (§2.10, §2.61). */
.pj-satis { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 13px; margin-bottom: 8px; min-width: 0; }
.pj-satis span { color: var(--text-secondary); font-size: 12px; overflow-wrap: anywhere; }
.pj-satis-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; min-width: 0; max-width: 100%; }
.pj-satis-form select, .pj-satis-form input { flex: 1 1 12em; min-width: 0; max-width: 100%; }
.pj-teklif {
    display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 6px 0;
    border-top: 1px solid rgba(var(--gri-rgb), 0.12); min-width: 0;
}
.pj-teklif > span { min-width: 0; overflow-wrap: anywhere; }
.pj-teklif-not { color: var(--text-muted); font-size: 12px; }
.pj-teklif select { min-width: 0; max-width: 100%; }
@media (max-width: 768px) {
    .pj-msatir { grid-template-columns: minmax(0, 1fr); gap: 3px; }
    .pj-msatir > span:not(.pj-satir-ad) { font-size: 12px; color: var(--text-secondary); }
    .pj-msatir > span:empty { display: none; }
}
/* Proje raporu (3d-2, §2.84) — tablolar .pj-onz (yatay kayar, §2.61); iki sütun dar ekranda alt alta (§2.10). */
.pj-r-ust { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin: 0 0 12px; min-width: 0; }
.pj-r-bolum { margin: 0 0 18px; min-width: 0; max-width: 100%; }
.pj-r-baslik { font-weight: 700; font-size: 14px; margin: 0 0 6px; }
.pj-r-alt { margin-top: 12px; font-size: 13px; }
.pj-r-not { font-size: 12px; color: var(--text-muted); line-height: 1.5; overflow-wrap: anywhere; min-width: 0; }
.pj-r-yuzde { font-size: 10.5px; color: var(--text-muted); }
.pj-r-tablo .pj-r-sag { text-align: right; white-space: nowrap; }
.pj-r-toplam td { font-weight: 700; border-top: 1px solid rgba(var(--gri-rgb), 0.35); }
.pj-r-iki { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16em), 1fr)); gap: 12px; min-width: 0; }
.pj-r-iki > div { min-width: 0; max-width: 100%; }
/* İZLEYİCİ / salt okuma (3e-2, §2.85) — TEK mekanizma: app.js gövdeye `salt-okuma` koyar.
   `data-yazma`: yazma denetimi · `data-kapali`: izleyiciye kapalı veriye dayanan bölüm (ölçülmeyen 0 basılmaz, §2.3).
   ⚠️ Asıl koruma sunucu kapısı; bu nezakettir (§3.4). Öğe DOM'da kalır → dinleyici çökmez (§2.18). */
body.salt-okuma [data-yazma],
body.salt-okuma [data-kapali] { display: none !important; }

/* Davet penceresi — izleyici notu + açık davetler (3e-2, §2.85). Dar ekranda satır SARAR (§2.10). */
.inv-izleyici-not { font-size: 12px; line-height: 1.5; color: var(--text-secondary); background: rgba(var(--gri-rgb), 0.08);
    border: 1px solid rgba(var(--gri-rgb), 0.25); border-radius: var(--border-radius-sm); padding: 10px 12px; margin: 0 0 14px; }
.inv-acik-baslik { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin: 20px 0 8px;
    padding-top: 14px; border-top: 1px solid var(--border-color); }
.inv-acik { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.inv-acik-bos { margin: 0; color: var(--text-muted); font-size: 12px; }
.inv-satir { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); min-width: 0; max-width: 100%; }
.inv-satir--gecersiz { opacity: 0.6; }
.inv-satir-bilgi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inv-satir-bilgi span { color: var(--text-muted); overflow-wrap: anywhere; }
.inv-satir-eylem { display: flex; gap: 6px; flex-shrink: 0; }

/* ORTAK SATIŞ (Aşama 4, §2.87) — süreç türü seçici + karşı ofis kutuları.
   ⚠️ fieldset varsayılanı `min-width: min-content` → dar ekranda taşar (§2.10); sıfırlanır.
   Seçenekler SARAR, sabit genişlik yok (§2.61). [hidden] yazar stilini yenmez → açık kural. */
.ortak-mod { border: 0; margin: 0; padding: 0; min-width: 0; max-width: 100%; }   /* blok: fieldset'te flex Safari'de güvenilmez */
.ortak-mod legend { padding: 0; margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.ortak-mod-secenekler { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.ortak-mod-secenek { flex: 1 1 10em; min-width: 0; display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer;
    padding: 9px 11px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm);
    font-size: 12.5px; color: var(--text-secondary); text-transform: none; letter-spacing: normal; line-height: 1.35; }
.ortak-mod-secenek input { width: 16px; height: 16px; margin: 0; flex-shrink: 0; accent-color: var(--primary); cursor: pointer; }
.ortak-mod-secenek span { min-width: 0; overflow-wrap: anywhere; }
.ortak-mod-secenek:has(input:checked) { border-color: rgba(var(--gok-acik-rgb), 0.55); background: rgba(var(--gok-acik-rgb), 0.07); color: var(--text-primary); }
.ortak-mod-aciklama { display: block; margin-top: 8px; font-size: 11px; line-height: 1.5; color: var(--text-muted); }
.karsi-kutu { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 100%; }
.karsi-kutu[hidden] { display: none; }
.karsi-kutu small { font-size: 11px; color: var(--text-muted); line-height: 1.5; }
.karsi-onizleme { padding: 10px 12px; border: 1px dashed rgba(var(--gok-acik-rgb), 0.4); border-radius: var(--border-radius-sm);
    font-size: 12.5px; color: var(--text-primary); overflow-wrap: anywhere; min-width: 0; }
.ortak-bilgi { font-size: 12px; line-height: 1.5; color: var(--text-secondary); background: rgba(var(--gok-acik-rgb), 0.06);
    border: 1px solid rgba(var(--gok-acik-rgb), 0.25); border-radius: var(--border-radius-sm); padding: 10px 12px; overflow-wrap: anywhere; }

/* Proje silme kilidi (§2.88): düğme pasifken sebep GÖRÜNÜR satırda da yazılı (dokunmatikte ipucu açılmaz). */
/* Proje sayfası şeridi (2026-11-07): üyesiz ofis · komisyon oranı yok. Renk token'dan (iki tema, §2.137). */
.pj-serit { font-size: 12px; line-height: 1.5; color: var(--text-secondary); background: rgba(var(--warning-rgb), 0.08);
    border: 1px solid rgba(var(--warning-rgb), 0.3); border-radius: var(--border-radius-sm); padding: 8px 10px; margin: 0 0 10px;
    overflow-wrap: anywhere; }
.pj-sil-kilit { font-size: 12px; line-height: 1.5; color: var(--text-secondary); background: rgba(var(--gri-rgb), 0.08);
    border: 1px solid rgba(var(--gri-rgb), 0.25); border-radius: var(--border-radius-sm); padding: 8px 10px; margin: 0 0 12px;
    overflow-wrap: anywhere; }

/* Akıllı Excel içe aktarma (Faz 2c, §2.109): adımlar tek sütun akar; seçici kendi hücresini doldurur (sabit genişlik YOK,
   §2.61); tablo .pj-onz-kap ile yatay kayar; ızgara çocukları min-width:0 (§2.10). fieldset varsayılanı min-content —
   sıfırlanmazsa uzun sayfa adı pencereyi genişletir. */
.pj-es-satirlar { display: grid; gap: 8px; margin: 10px 0; min-width: 0; max-width: 100%; }
.pj-es-satir { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) auto; gap: 6px 10px;
    align-items: center; min-width: 0; max-width: 100%; }
.pj-es-satir > * { min-width: 0; }
.pj-es-satir label { font-size: 13px; color: var(--text-secondary); overflow-wrap: anywhere; }
.pj-es-satir select, .pj-es-sabit { width: 100%; }
.pj-es-sabit { grid-column: 2 / -1; }
.pj-rozet { display: inline-block; font-size: 11px; line-height: 1.6; padding: 0 8px; border-radius: 999px;
    border: 1px solid rgba(var(--gri-rgb), 0.3); color: var(--text-secondary); white-space: nowrap; }
.pj-rozet-kesin { color: var(--yesil-vurgu); border-color: rgba(var(--yesil-vurgu-rgb), 0.4); }
.pj-rozet-kontrol { color: var(--warning); border-color: rgba(var(--warning-rgb), 0.45); }
.pj-rozet-yok { color: var(--text-muted); }
/* Faz 4b (§2.112): yapay zekâ önerisi kendi rengiyle — "Kontrol edin" (motor) ile karışmasın. İpucu satırı ızgarada tam
   genişlik; gerekçe uzun olabilir → kelime kırılır (dar ekranda taşmaz, §2.10). */
.pj-rozet-yz { color: var(--indigo-vurgu); border-color: rgba(var(--primary-rgb), 0.5); }
.pj-es-yz { grid-column: 1 / -1; font-size: 12px; line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere;
    min-width: 0; }
.pj-es-yz .btn { margin-left: 6px; }
.pj-onz .pj-es-yz { margin-top: 4px; white-space: normal; }
.pj-yz-kutu { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 8px 0; min-width: 0; max-width: 100%; }
.pj-yz-kutu .pj-ipucu { margin: 0; flex: 1 1 14em; min-width: 0; }
.pj-es-uyarilar { margin: 6px 0; padding-left: 18px; font-size: 12px; line-height: 1.5; color: var(--warning);
    overflow-wrap: anywhere; }
.pj-es-sayfalar { border: 1px solid rgba(var(--gri-rgb), 0.2); border-radius: var(--border-radius-sm); padding: 8px 10px;
    margin: 8px 0; min-width: 0; max-width: 100%; }
.pj-es-sayfalar legend { font-size: 12px; color: var(--text-secondary); padding: 0 4px; }
.pj-es-kutu { display: flex; gap: 6px; align-items: center; font-size: 13px; padding: 2px 0; overflow-wrap: anywhere; }
.pj-es-baslik { margin: 14px 0 4px; font-size: 14px; }
@media (max-width: 768px) {
    .pj-es-satir { grid-template-columns: minmax(0, 1fr) auto; }
    .pj-es-satir label { grid-column: 1 / -1; }
    /* Uzun YZ rozeti dar ekranda seçiciyi daraltıyordu (360px'te ölçüldü: "H — İSKONTO" kesik) → iki satıra sarar. */
    .pj-rozet-yz { white-space: normal; max-width: 9.5em; text-align: center; line-height: 1.3; padding: 2px 8px;
        border-radius: 10px; }
}
/* 🔴 [hidden] UA kuralıdır, .btn { display:inline-flex } onu YENER (iPhone'da görüldü: sihirbaz açıkken üstteki "Onayla ve
   Yükle" görünür kalıyordu). Gizlenen her öğe için açık kural. */
#pj-onayla[hidden], .pj-es-satirlar ~ .pj-uyari[hidden], #pj-es-engel[hidden], #pj-es-eksik[hidden] { display: none; }
/* Aktarım önizleme tablosu: bugünkü önizlemenin "3. sütun = İşlem" rengi burada Kat'a düşerdi → işlem hücresi sınıfla. */
.pj-onz-aktarim .pj-onz-yeni td:nth-child(3) { color: inherit; }
.pj-onz-aktarim .pj-onz-yeni td.pj-es-islem { color: var(--yesil-vurgu); }
.pj-onz-aktarim td { white-space: nowrap; }
.pj-onz-aktarim td:last-child { white-space: normal; min-width: 14em; }

/* ── BELGELER (2026-10-18, §2.115) — ilan kartı + form ─────────────────────
   ⚠️ Dar ekran: satırlar sarar, sabit genişlik yok (§2.10 / §2.61); dosya adı uzun olabilir. */
.belge-bolumu { margin-top: 16px; min-width: 0; max-width: 100%; }
.belge-baslik { margin-bottom: 8px; }
.belge-eksik { font-size: 12px; color: var(--warning); background: rgba(var(--warning-rgb), 0.08);
    border: 1px solid rgba(var(--warning-rgb), 0.3); border-radius: var(--border-radius-md); padding: 8px 10px; margin: 0 0 8px; }
.belge-tamam { font-size: 12px; color: var(--yesil-vurgu); margin: 0 0 8px; }
.belge-bos, .belge-not { font-size: 12px; color: var(--text-muted); margin: 4px 0 8px; }
.belge-liste, .belge-bekleyen { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
.belge-satir { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 10px;
    padding: 8px 10px; border: 1px solid var(--border-color); border-radius: var(--border-radius-md);
    background: rgba(var(--ust-katman-rgb), 0.02); min-width: 0; }
.belge-bilgi { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 180px; }
.belge-tur { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.belge-ad { font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }
.belge-aciklama-metni { font-size: 11px; color: var(--text-secondary); overflow-wrap: anywhere; }
.belge-meta { font-size: 10.5px; color: var(--text-muted); }
.belge-eylem { display: flex; flex-wrap: wrap; gap: 6px; }
.belge-eylem .btn { padding: 5px 10px; font-size: 11px; text-decoration: none; }
.belge-eylem .belge-sil { color: var(--danger); border-color: rgba(var(--danger-rgb), 0.35); }
.belge-secici-satir { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.belge-secici-satir select { flex: 1 1 12em; min-width: 0; }
.belge-dosya-dugme { cursor: pointer; white-space: nowrap; margin: 0; }
.belge-aciklama { margin-top: 6px; width: 100%; }
.belge-ipucu { display: block; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.belge-mevzuat { display: block; font-size: 11px; color: var(--warning); margin-top: 4px; }
.belge-mevzuat[hidden] { display: none; }
.belge-bekleyen { margin-top: 8px; }
.belge-bekleyen-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 8px;
    border: 1px dashed var(--border-color); border-radius: var(--border-radius-sm); min-width: 0; }
.belge-bekleyen-satir .belge-ad { flex: 1 1 140px; min-width: 0; }
.belge-kaldir { background: none; border: none; color: var(--text-muted); font-size: 16px; line-height: 1;
    cursor: pointer; padding: 2px 6px; }
.belge-kaldir:hover { color: var(--danger); }
.belge-yukle { margin-top: 4px; }
.belge-durum { font-size: 11px; color: var(--text-secondary); margin: 4px 0 0; min-height: 0; }
.belge-durum:empty { display: none; }
/* Müşteri silinirken ilan belgeleri seçimi (Parça 2). z-index 1300: modalın (1000) üstü, bildirim (10100) altı (§2.17). */
.belge-secim-ortu { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(var(--golge-rgb), 0.6); }
.belge-secim-kart { width: 100%; max-width: 28rem; padding: 20px; background: var(--bg-card); border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(var(--golge-rgb), 0.45); }
.belge-secim-kart h3 { margin: 0 0 8px; }
.belge-secim-kart p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 12px; }
.belge-secim-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.belge-secim-dugmeler .btn { flex: 1 1 auto; }

/* Liste eksik evrak rozeti (Parça 3, §2.117) — .havuz-kapali-rozet ile aynı dil, uyarı rengi.
   Yalnız özellik açıldıktan sonra eklenen açık kayıtta basılır (sunucu `rozet`). */
.belge-eksik-rozet {
    display: inline-flex; align-items: center; gap: 3px;
    margin-top: 4px;
    max-width: 100%;
    padding: 2px 8px;
    font-size: 11px; font-weight: 600; line-height: 1.4;
    color: var(--warning);
    background: rgba(var(--warning-rgb), 0.1);
    border: 1px solid rgba(var(--warning-rgb), 0.3);
    border-radius: 20px;
    white-space: nowrap;
    vertical-align: middle;
}
.portfolio-details .office-badge + .belge-eksik-rozet,
.portfolio-details .havuz-kapali-rozet + .belge-eksik-rozet { margin-left: 4px; }
/* Süreç panelinde bağlı belgeler (salt okuma) */
.belge-surec-grup { padding: 10px 0; border-top: 1px solid var(--border-color); min-width: 0; }
.belge-surec-grup:first-child { border-top: none; padding-top: 0; }
.belge-surec-baslik { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px;
    overflow-wrap: anywhere; }
/* İşlem belgesi (2026-10-24, §2.126) — tamamlanan süreçte isteğe bağlı kira sözleşmesi / yeni tapu.
   Yer "Bağlı belgeler"in başında; öneri kartı "Tamamlandı" anında modalın başında (müşteri önerisinin altında). */
.islem-belgesi { padding: 10px 12px; margin-bottom: 10px; border: 1px dashed var(--border-focus);
    border-radius: var(--border-radius-md); background: rgba(var(--gok-acik-rgb), 0.04); min-width: 0; }
.islem-belgesi-baslik { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px;
    font-size: 13px; font-weight: 600; color: var(--text-primary); }
.islem-belgesi-istege { font-size: 10.5px; font-weight: 500; color: var(--text-muted);
    border: 1px solid var(--border-color); border-radius: 10px; padding: 0 6px; }
.islem-belgesi .belge-dosya-dugme { margin-top: 6px; }
.islem-belgesi-teklif { border: 1px solid var(--border-focus); border-radius: var(--border-radius-md);
    background: var(--bg-card-hover); padding: 16px; margin-bottom: 20px; min-width: 0; }
.islem-belgesi-teklif-baslik { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.islem-belgesi-teklif-metin { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.islem-belgesi-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.islem-belgesi-dugmeler .btn { flex: 1 1 140px; justify-content: center; }

/* ─────────────────────────────────────────────────────────────────────────
   DASHBOARD ORAN LİSTELERİ — Piyasalar + Konut Kredisi (2026-10-21, Musa)
   Konut Kredisi kartı sağ sütundan Piyasalar'ın altına alındı. İki liste aynı
   desende: geniş kartta İKİ sütuna akar (yukarıdan aşağı, sonra yan sütun —
   sıralı liste sırasını korur), dar kartta ve telefonda TEK sütun kalır.
   `columns: 2 200px` = en çok 2 sütun, sütun en az ~200px → medya sorgusu yok;
   sol sütun daralınca (≈1100px pencere) kendiliğinden tek sütuna döner (§2.10).
   ⚠️ Satır sütun ortasında BÖLÜNMEZ (break-inside), yükleniyor/boş metni tüm
   genişliğe yayılır (column-span) — yoksa yalnız sol yarıda ortalanırdı.
   ───────────────────────────────────────────────────────────────────────── */
.oran-listesi {
    columns: 2 200px;
    column-gap: 32px;
}
.oran-listesi > div { break-inside: avoid; }
.oran-listesi > p { column-span: all; }

/* ─────────────────────────────────────────────────────────────────────────
   ROL YETKİLERİ KAYDI (2026-10-22) — izinler okunmadan kayıt yok
   Okunurken / okunamazsa düzenlenebilir kartlar soluk ve kilitli; sebep
   "Kaydet"in yanında kalır (§2.95). Yönetici kartı sabit, soluklaşmaz.
   ───────────────────────────────────────────────────────────────────────── */
.izin-kayit-satiri { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.izin-durum { margin: 0; font-size: 12px; color: var(--text-secondary); line-height: 1.5;
    min-width: 0; max-width: 100%; }
.izin-durum:empty { display: none; }
.izin-durum .btn { display: block; margin-top: 8px; }
.izin-bekliyor .izin-kart--duzenlenebilir { opacity: .45; }

/* ─────────────────────────────────────────────────────────────────────────
   DEVİR PENCERESİ (2026-10-22, §2.122) — seçenekler + sunucunun önizlemesi
   Önizleme iç kaydırma kutusu DEĞİL (§2.10): pencere kendi içinde kayar.
   ───────────────────────────────────────────────────────────────────────── */
.devir-pencere { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.devir-uyari-kutu { padding: 12px 14px; border-radius: var(--border-radius-sm); background: rgba(var(--koyu-turuncu-rgb), 0.1);
    border: 1px solid rgba(var(--koyu-turuncu-rgb), 0.3); font-size: 13px; line-height: 1.5; color: var(--text-primary); }
.devir-etiket { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.devir-secici { width: 100%; padding: 10px; background: rgba(var(--yuzey-rgb), 0.6); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm); color: var(--text-primary); font-size: 13px; }
.devir-grup { border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 10px 12px; margin: 0;
    display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.devir-grup legend { font-size: 12px; font-weight: 600; color: var(--text-secondary); padding: 0 4px; }
.devir-grup label:not(.devir-etiket), .devir-kutu { display: flex; gap: 8px; align-items: flex-start; font-size: 13px;
    line-height: 1.4; color: var(--text-primary); cursor: pointer; }
/* min-height: 0 → mobile.css'teki `input { min-height: 44px }` radyoyu 44px'e uzatıp yazının altına kaydırıyordu */
.devir-grup input, .devir-kutu input { margin-top: 2px; flex-shrink: 0; min-height: 0; accent-color: var(--primary); }
.devir-ipucu { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.devir-onizleme { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.devir-ofis { padding: 10px 12px; border-radius: var(--border-radius-sm); background: rgba(var(--yuzey-rgb), 0.4);
    border: 1px solid var(--border-color); overflow-wrap: anywhere; }
.devir-ofis--uyari { border-color: var(--warning); }
.devir-ofis-ad { font-weight: 600; color: var(--text-primary); }
.devir-ofis-durum { color: var(--text-secondary); margin-top: 2px; }
.devir-ofis-sayi { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.devir-not { margin: 0; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.devir-sebep { margin: 0; font-size: 12px; color: var(--warning); line-height: 1.5; }
.devir-sebep:empty { display: none; }
.devir-dugmeler { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* Bölge brifingi "Yenile": yazamayana hidden ile gizlenir — .btn'in display'i [hidden]'ı yenmesin (§2.109 dersi) */
#btn-refresh-news { display: flex; }
#btn-refresh-news[hidden] { display: none; }

/* Bölge düzenleme formu geçmiş yıllar: SINIF ile ızgara — mobile.css modal içindeki satır içi ızgarayı tek sütuna
   indiriyor, iki kutu alt alta düşünce hangisinin kira olduğu belli olmuyordu (yerel 375 px'te görüldü). */
.le-trend-satir { display: grid; grid-template-columns: 3.5em minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; margin-bottom: 8px; min-width: 0; }
.le-trend-satir > span { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.le-trend-baslik { margin-bottom: 4px; }
.le-trend-baslik > span { font-size: 10px; font-weight: 600; }

/* Bölge Analizleri Paket 2b (§2.133): Konut | Ticari sekmesi, eski karışık hesap uyarısı, canlı mahalle tablosu,
   düzenleme formunun ticari bölümü. Mahalle satırı dar ekranda iki satıra iner (ad üstte, üç değer altta, §2.10). */
.loc-tur-sekmeleri { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; min-width: 0; }
.loc-tur-sekme {
    padding: 6px 14px; font-size: 12px; font-weight: 600; border-radius: 999px; cursor: pointer;
    background: rgba(var(--ust-katman-rgb), 0.03); border: 1px solid rgba(var(--ust-katman-rgb), 0.08); color: var(--text-secondary);
    transition: var(--transition-fast);
}
.loc-tur-sekme:hover { color: var(--text-primary); border-color: rgba(var(--primary-rgb), 0.35); }
.loc-tur-sekme.aktif { background: rgba(var(--primary-rgb), 0.15); border-color: rgba(var(--primary-rgb), 0.5); color: var(--text-primary); }
.loc-karisik-uyari {
    margin-top: 12px; padding: 8px 12px; font-size: 12px; line-height: 1.5; border-radius: var(--border-radius-sm);
    background: rgba(var(--warning-rgb), 0.08); border: 1px solid rgba(var(--warning-rgb), 0.3); color: var(--warning);
}
.loc-mahalle { margin-bottom: 20px; min-width: 0; }
.loc-mahalle:empty { display: none; }
.loc-mahalle-baslik { font-size: 13px; font-weight: 600; margin: 0 0 4px; font-family: 'Outfit', sans-serif; color: var(--text-primary); }
.loc-mahalle-not { font-size: 11px; color: var(--text-muted); margin: 0 0 8px; line-height: 1.5; }
.loc-mahalle-bos { font-size: 12px; color: var(--text-muted); font-style: italic; margin: 0; }
.loc-mahalle-tablo { border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); overflow: hidden; min-width: 0; }
.loc-mahalle-satir {
    display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center;
    padding: 7px 10px; font-size: 12px; color: var(--text-primary); border-top: 1px solid var(--border-color); min-width: 0;
}
.loc-mahalle-satir:first-child { border-top: 0; }
.loc-mahalle-satir > span { min-width: 0; overflow-wrap: anywhere; }
.loc-mahalle-satir small { color: var(--text-muted); font-size: 10px; }
.loc-mahalle-ust { font-size: 10px; font-weight: 600; color: var(--text-muted); background: rgba(var(--ust-katman-rgb), 0.02); }
.loc-mahalle-ad { font-weight: 600; }
.le-tur-bolum {
    border: 1px dashed var(--border-color); border-radius: var(--border-radius-md); padding: 12px; margin-bottom: 16px;
    background: rgba(var(--ust-katman-rgb), 0.01); min-width: 0;
}
.le-tur-baslik { font-size: 12px; font-weight: 600; margin-bottom: 8px; color: var(--text-secondary); }
@media (max-width: 600px) {
    .loc-mahalle-satir { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2px; }
    .loc-mahalle-ad { grid-column: 1 / -1; }
    .loc-mahalle-ust > span:first-child { display: none; }
}
.le-tur-not { font-size: 11px; font-weight: 600; margin: 4px 0 6px; color: var(--text-muted); }

/* ---------- Tema seçici — Profilim "Görünüm" kartı (TEMA_PLANI.md, js/tema.js temaKartiHtml) ---------- */
.tema-ikon { background: var(--vurgu-zemin); color: var(--primary); }
.tema-secici { display: flex; flex-wrap: wrap; gap: 8px; }
.tema-secenek {
    flex: 1 1 7em;
    min-width: 7em;
    padding: 10px 12px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-card-hover);
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.tema-secenek:hover { color: var(--text-primary); }
.tema-secenek[aria-pressed="true"] { border-color: var(--primary); background: var(--vurgu-zemin); color: var(--text-primary); }
.tema-not { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 12px 0 0; }
.tema-not-uyari { color: var(--warning); }

/* ── Anımsatıcı liste rengi yazıda (Tema Aşama 4, CLAUDE.md §2.137) ───────────────────────────────────────────────────
   Liste rengi kullanıcının seçtiği VERİDİR (sarı dahil). Satır içi `color` yerine `--liste-renk` taşınır: koyuda yazı
   aynen o renk; açıkta koyu yazıyla %40 karışır — hazır yedi rengin hepsi renkli zemin üstünde ≥ 5,5 (ölçüldü).
   `!important`: eski satır içi `color` kategori sınıflarını (.category-title.grey …) eziyordu, aynı öncelik korunur. */
.liste-renkli-yazi { color: var(--liste-renk) !important; }
:root[data-tema="acik"] .liste-renkli-yazi { color: color-mix(in srgb, var(--liste-renk) 40%, var(--text-primary)) !important; }

/* ── Açık tema okunaklılık (T2) — opaklıkla soluklaştırılmış yazılar ────────────────────────────────────────────────
   Koyu zeminde soluk açık yazı okunuyor; açık zeminde aynı opaklık 4,5'in altına düşüyor (scratch/tema/kontrast.py
   ölçtü). Renk değil opaklık olduğu için token değil, yalnız açık temada geçerli kural. */
:root[data-tema="acik"] .ag-tag--muted,
:root[data-tema="acik"] .goal-source,
:root[data-tema="acik"] .pj-hucre-alt,
:root[data-tema="acik"] .pj-hucre-durum { opacity: 1; }
/* Kutudaki örnek yazı (::placeholder): CSS'te kural yoktu, renk tarayıcı varsayılanıydı — WebKit açık modda #a9a9a9
   (beyaz üstünde 2,35; iPhone'da soluk okunuyordu). Açıkta metin renginin %65'i — gri zeminli kutularda da ≥ 4,5 (%60
   orada 4,18 kalıyordu, WebKit ölçümü); koyuda varsayılan AYNEN. */
:root[data-tema="acik"] ::placeholder { color: rgba(var(--ust-katman-rgb), 0.65); opacity: 1; }

/* ── Akıllı Eşleştirme satırı (2026-11-05, §2.139) ───────────────────────────────────────────────────────────
   Başlık artık hep İLAN adı; yanında müşteri rozeti (👤 ad / "N eşleşen müşteri"), uyarı ve kapsam rozetleri var.
   Rozetler küçülmez (flex-shrink:0) → yer daralınca başlık "AL…"a kadar eziliyordu (1440px'te ölçüldü).
   Başlık en az 140px tutar; sığmayan rozetler ALT satıra sarar. Mobil kural (mobile.css @768, daha özgül seçici)
   başlığı tam satıra alır ve bunu ezer. */
.matchmaking-list .match-title-row { flex-wrap: wrap; row-gap: 4px; }
.matchmaking-list .match-title { flex: 1 1 140px; }

/* ── Ciro kart açılır kutusu (2026-11-08, §2.141) ─────────────────────────────
   'Tüm Alanlarım'da kartın rakamı alan alan. Kutu kartın İÇİNDE konumlanır (sol/sağ kart kenarında) →
   sayfa yana taşmaz (#app-view overflow-x:hidden kırpardı, §2.10). Açık kart alttaki kartın üstüne çıkar:
   kartlar backdrop-filter yüzünden ayrı yığın bağlamıdır, z-index KARTA verilir (yerel; genel katman
   tablosuna girmez, §2.17). Renkler token'dan (§2.137); küçük yazı --text-secondary — koyuda --text-muted 3,75 (AA 4,5 altı, ölçüldü). */
.kart-dokumlu { position: relative; }
.kart-dokumlu[data-dokum-acik="1"] { z-index: 30; }
.kart-dokum-ipucu {
    align-self: flex-start; background: none; border: 0; padding: 4px 0; margin: 0;
    font: inherit; font-size: 11px; font-weight: 600; color: var(--text-secondary); cursor: pointer;
    text-decoration: underline dotted; text-underline-offset: 3px;
}
.kart-dokum-ipucu:hover, .kart-dokum-ipucu[aria-expanded="true"] { color: var(--text-primary); }
.kart-dokum-ipucu[hidden] { display: none; }
.kart-dokum {
    position: absolute; left: 12px; right: 12px; top: calc(100% - 6px); z-index: 30;
    background: var(--modal-zemin); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm); box-shadow: 0 12px 30px rgba(var(--golge-rgb), 0.45);
    padding: 10px 12px; font-size: 12px; line-height: 1.4;
}
.kart-dokum[hidden] { display: none; }
.kart-dokum-baslik { font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.kart-dokum-satir { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 4px; }
.kart-dokum-ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.kart-dokum-deger { flex-shrink: 0; font-weight: 600; color: var(--text-primary); }
.kart-dokum-alt { font-size: 11px; color: var(--text-secondary); padding-bottom: 2px; }