/* ============================================================
   BİLDİRİM SLIDE PANEL
   ============================================================ */
.notif-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 360px;
    height: 100vh;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-color);
    z-index: 400;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 24px rgba(0,0,0,0.18);
}
.notif-panel.open { transform: translateX(0); }
/* Kapalıyken ekranın solunda bekleyen panelin gölgesi sayfa kenarına taşmasın */
.notif-panel:not(.open) { box-shadow: none; }

.notif-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.30);
    z-index: 399;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.notif-panel-backdrop.open { opacity: 1; pointer-events: all; }

.np-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.np-title {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
}
.np-title i { color: var(--accent); }
.np-header-actions { display: flex; gap: 6px; }
.np-icon-btn {
    width: 36px; height: 36px;
    border: none; background: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    transition: background 0.18s, color 0.18s;
}
.np-icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.np-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    overflow-x: auto;
}
.np-tab {
    padding: 6px 12px;
    border: none;
    border-radius: var(--radius-full);
    background: none;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    white-space: nowrap;
}
.np-tab:hover { background: var(--bg-hover); color: var(--text-primary); }
.np-tab.active { background: var(--accent-light); color: var(--accent); font-weight: 600; }

.np-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.np-loading, .np-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--text-secondary);
    font-size: 15px;
}
.np-empty i { font-size: 36px; opacity: 0.4; }

.np-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.18s;
    position: relative;
}
.np-notif-item:hover { background: var(--bg-hover); }
.np-notif-item.unread { background: var(--accent-light); }
.np-notif-item.unread:hover { background: var(--accent-lighter); }
.np-notif-icon {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.np-notif-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.np-notif-initial {
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 14px;
}
.np-notif-content { flex: 1; min-width: 0; }
.np-notif-text { font-size: 14px; line-height: 1.4; }
.np-notif-text strong { color: var(--text-primary); }
.np-notif-time { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.np-unread-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    margin-top: 4px;
}

/* ============================================================
   ACCOUNT POPUP
   ============================================================ */
.acct-popup {
    position: fixed;
    bottom: 80px;
    left: 4px;
    width: 280px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 300;
    overflow: hidden;
    transform: scale(0.9) translateY(12px);
    opacity: 0;
    pointer-events: none;
    transform-origin: bottom left;
    transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease;
}
.acct-popup.open {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: all;
}
.acct-popup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 299;
    opacity: 0;
    pointer-events: none;
}
.acct-popup-backdrop.open { pointer-events: all; }

.acct-popup-current {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
}
.acct-popup-info { flex: 1; min-width: 0; }
.acct-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-handle { font-size: 12px; color: var(--text-muted); }
.acct-popup-accounts { padding: 4px 0; }
.acct-popup-divider { height: 1px; background: var(--border-color); margin: 4px 0; }
.acct-popup-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: background 0.18s;
}
.acct-popup-item:hover { background: var(--bg-hover); }
.acct-popup-item i { width: 18px; text-align: center; color: var(--text-secondary); }
.acct-popup-item.danger { color: var(--danger); }
.acct-popup-item.danger i { color: var(--danger); }
.acct-item { display: flex; align-items: center; gap: 0; padding: 6px 16px; }
.acct-item-link {
    display: flex; align-items: center; gap: 10px;
    flex: 1; text-decoration: none; color: var(--text-primary); min-width: 0;
}
.acct-item-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.acct-item-initial { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; }
.acct-item-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-item-handle { font-size: 11px; color: var(--text-muted); white-space: nowrap; margin-left: auto; flex-shrink: 0; }
.acct-item-remove {
    width: 24px; height: 24px; border: none; background: none; border-radius: 50%;
    color: var(--text-muted); cursor: pointer; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.18s, color 0.18s; flex-shrink: 0;
}
.acct-item-remove:hover { background: var(--bg-hover); color: var(--danger); }
.acct-add-btn { color: var(--accent) !important; font-weight: 600; }
.acct-add-btn i { color: var(--accent) !important; }

/* ── Sidebar nav-btn ──────────────────────────────── */
.sidebar-nav .nav-btn {
    width: 100%; border: none; background: none;
    cursor: pointer; font-family: inherit; text-align: left;
}

/* ── Sidebar avatar gear badge ────────────────────── */
.su-avatar-wrap { position: relative; flex-shrink: 0; }
.su-gear-badge {
    position: absolute; bottom: -2px; right: -2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--sidebar-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; color: var(--sidebar-text-muted);
    border: 1px solid var(--sidebar-border);
    opacity: 0; transition: opacity 0.2s;
}
.sidebar-user:hover .su-gear-badge { opacity: 1; }

/* ============================================================
   PROFILE PAGE
   ============================================================ */
.pro-cover {
    height: 140px;
    background: linear-gradient(135deg, var(--accent) 0%, #272C33 100%);
    position: relative; overflow: hidden;
}
.pro-cover::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.08) 0%, transparent 60%);
}
.pro-card { padding: 0 20px 16px; border-bottom: 1px solid var(--border-color); }
.pro-avatar-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-top: -40px; margin-bottom: 12px;
}
.pro-avatar { width: 80px !important; height: 80px !important; border-radius: 50% !important; object-fit: cover; border: 4px solid var(--bg-primary); box-shadow: var(--shadow-md); }
.avatar-initial.pro-avatar { display: flex !important; align-items: center; justify-content: center; font-size: 32px !important; font-weight: 700; color: #fff; }
.pro-actions { display: flex; gap: 8px; align-items: center; }
.pro-identity { margin-bottom: 6px; }
.pro-name { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.pro-handle { color: var(--text-secondary); font-size: 14px; }
.pro-bio { font-size: 15px; line-height: 1.5; margin: 10px 0; color: var(--text-primary); }
.pro-meta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.pro-meta-item { font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; }
.pro-meta-item i { color: currentColor; opacity: 0.85; }
.pro-rating { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.pro-stars { color: #f59e0b; display: flex; gap: 2px; font-size: 14px; }
.pro-rating-text { font-size: 13px; color: var(--text-secondary); }
.pro-stats { display: flex; gap: 20px; margin-top: 10px; }
.pro-stat { text-decoration: none; color: var(--text-primary); font-size: 14px; }
.pro-stat strong { font-weight: 700; margin-right: 4px; }
.pro-stat span { color: var(--text-secondary); }
.pro-info-bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--border-color); align-items: center; }
.pro-info-chip { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-full); font-size: 13px; font-weight: 600; background: var(--bg-secondary); border: 1px solid var(--border-color); }
.pro-info-chip.sell { color: #00BA7C; border-color: rgba(0,186,124,.3); background: rgba(0,186,124,.08); }
.pro-info-chip.swap { color: var(--accent); border-color: var(--accent-light); background: var(--accent-light); }
.pro-info-chip.rental { color: #8b5cf6; border-color: rgba(139,92,246,.3); background: rgba(139,92,246,.08); }
.pro-info-chip.phone { color: var(--text-secondary); }
.pro-social-links { display: flex; gap: 8px; margin-left: auto; }
.pro-social-btn { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; text-decoration: none; transition: transform 0.2s, opacity 0.2s; }
.pro-social-btn:hover { transform: translateY(-2px); opacity: 0.9; }
.pro-social-btn.fb { background: #1877f2; }
.pro-social-btn.ig { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.pro-social-btn.yt { background: #ff0000; }

.modern-tabs { display: flex; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; background: var(--bg-primary); z-index: 10; }
.modern-tab { flex: 1; text-align: center; padding: 14px 0; font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px; }
.modern-tab:hover { color: var(--text-primary); background: var(--bg-hover); }
.modern-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }

.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 12px; padding: 16px; }
.detail-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 14px 12px; text-align: center; transition: border-color 0.2s, box-shadow 0.2s; }
.detail-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.detail-card.danger { border-color: rgba(244,33,46,.3); background: rgba(244,33,46,.05); }
.detail-card-icon { font-size: 22px; color: var(--accent); margin-bottom: 6px; }
.detail-card.danger .detail-card-icon { color: var(--danger); }
.detail-card-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.detail-card-value { font-size: 14px; font-weight: 700; color: var(--text-primary); }

.damage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px,1fr)); gap: 8px; }
.damage-part { padding: 8px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; text-align: center; border: 1px solid transparent; }
.damage-part.original { background: rgba(0,186,124,.1); color: #00BA7C; border-color: rgba(0,186,124,.3); }
.damage-part.painted  { background: rgba(218,115,82,.1); color: var(--accent); border-color: var(--accent-light); }
.damage-part.changed  { background: rgba(244,33,46,.1); color: var(--danger); border-color: rgba(244,33,46,.3); }

.review-card { padding: 16px 20px; border-bottom: 1px solid var(--border-color); }
.review-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.review-meta { flex: 1; }
.review-author { font-weight: 700; font-size: 14px; text-decoration: none; color: var(--text-primary); }
.review-author:hover { color: var(--accent); }
.review-time { font-size: 12px; color: var(--text-muted); margin-left: 8px; }
.review-stars { color: #f59e0b; font-size: 14px; display: flex; gap: 2px; margin-bottom: 6px; }
.review-text { font-size: 14px; color: var(--text-primary); line-height: 1.5; }

/* ============================================================
   EDIT PROFILE PAGE
   ============================================================ */
.edit-profile-layout { max-width: 680px; margin: 0 auto; padding: 24px 20px; }
.edit-profile-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border-color); }
.edit-profile-header h1 { font-size: 20px; font-weight: 800; }
.edit-avatar-section { display: flex; align-items: center; gap: 20px; padding: 20px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); margin-bottom: 20px; }
.edit-avatar-wrap { position: relative; }
.edit-avatar-img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--border-color); display: block; }
.edit-avatar-overlay { position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; opacity: 0; cursor: pointer; transition: opacity 0.2s; }
.edit-avatar-wrap:hover .edit-avatar-overlay { opacity: 1; }
.edit-avatar-overlay i { color: #fff; font-size: 20px; }
.edit-avatar-info { flex: 1; }
.edit-avatar-info h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.edit-avatar-info p { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.edit-section { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); margin-bottom: 16px; overflow: hidden; }
.edit-section-title { padding: 14px 20px 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); border-bottom: 1px solid var(--border-color); }
.edit-field { padding: 14px 20px; border-bottom: 1px solid var(--border-color); }
.edit-field:last-child { border-bottom: none; }
.edit-field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.edit-field input, .edit-field textarea, .edit-field select { width: 100%; padding: 10px 14px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); font-size: 15px; font-family: inherit; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.edit-field input:focus, .edit-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); background: var(--bg-primary); }
.edit-field textarea { resize: vertical; min-height: 80px; }
.edit-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.edit-actions { display: flex; gap: 12px; justify-content: flex-end; padding: 16px 20px; border-top: 1px solid var(--border-color); position: sticky; bottom: 0; background: var(--bg-primary); }

@media (max-width: 600px) {
    .notif-panel { left: 0; width: 100vw; }
    .acct-popup { left: 8px; width: calc(100vw - 16px); }
    .edit-field-row { grid-template-columns: 1fr; }
    .pro-info-bar { flex-direction: column; align-items: flex-start; }
    .pro-social-links { margin-left: 0; }
}

/* ============================================================
   CHAT POPUP FAB
   ============================================================ */
.chat-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    width: 50px;
    height: 50px;
    background: var(--sidebar-text);
    color: var(--sidebar-bg);
    border: none;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,0.20);
    z-index: 200;
    transition: transform 0.2s, box-shadow 0.2s;
}
.chat-fab:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.28); }
.chat-fab-icon { font-size: 20px; }
.chat-fab-label { display: none !important; }
.chat-fab-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    background: #f4212e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--bg-primary);
}

/* ============================================================
   PIN MODAL
   ============================================================ */
.pin-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 500;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
}
.pin-modal-overlay.open { opacity: 1; pointer-events: all; }

.pin-modal {
    background: var(--bg-primary);
    border-radius: 24px;
    padding: 32px 28px 28px;
    width: 320px;
    max-width: 94vw;
    position: relative;
    transform: scale(0.92) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: 0 24px 60px rgba(0,0,0,0.22);
}
.pin-modal-overlay.open .pin-modal { transform: scale(1) translateY(0); }

.pin-modal-header { text-align: center; margin-bottom: 24px; }
.pin-modal-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    font-size: 24px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
}
.pin-modal-title { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.pin-modal-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

.pin-dots {
    display: flex; gap: 16px;
    justify-content: center;
    margin-bottom: 8px;
}
.pin-dot {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: transparent;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.pin-dot.filled { background: var(--accent); border-color: var(--accent); transform: scale(1.15); }
.pin-dot.shake { animation: dotShake 0.4s ease; }

@keyframes dotShake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-5px); }
    40%     { transform: translateX(5px); }
    60%     { transform: translateX(-4px); }
    80%     { transform: translateX(4px); }
}

.pin-error {
    text-align: center;
    font-size: 13px;
    color: var(--danger);
    min-height: 20px;
    margin-bottom: 10px;
    font-weight: 500;
}

.pin-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 4px;
}
.pin-key {
    height: 58px;
    border: none;
    border-radius: 14px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 22px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    display: flex; align-items: center; justify-content: center;
}
.pin-key:hover { background: var(--bg-hover); }
.pin-key:active { transform: scale(0.93); background: var(--accent-light); }
.pin-key-empty { background: transparent !important; cursor: default; pointer-events: none; }
.pin-key-del { font-size: 18px; color: var(--text-secondary); }

.pin-modal-close {
    position: absolute; top: 14px; right: 14px;
    width: 30px; height: 30px;
    border: none; background: none;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.18s, color 0.18s;
}
.pin-modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ============================================================
   CHAT POPUP WINDOW
   ============================================================ */
.chat-popup {
    position: fixed;
    bottom: 90px;
    right: 24px;
    width: 360px;
    max-width: calc(100vw - 48px);
    height: 520px;
    max-height: calc(100vh - 120px);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.18);
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.85) translateY(30px);
    opacity: 0;
    pointer-events: none;
    transform-origin: bottom right;
    transition: transform 0.3s cubic-bezier(0.34,1.2,0.64,1), opacity 0.25s ease;
}
.chat-popup.open { transform: scale(1) translateY(0); opacity: 1; pointer-events: all; }

.cp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background: var(--bg-primary);
}
.cp-header-left {
    display: flex; align-items: center; gap: 10px;
    font-size: 16px; font-weight: 700; color: var(--text-primary);
}
.cp-header-left i { color: var(--accent); font-size: 18px; }
.cp-header-left img, .cp-header-left .avatar-initial {
    width: 32px; height: 32px; border-radius: 50%; font-size: 13px;
}
.cp-header-actions { display: flex; gap: 4px; }
.cp-icon-btn {
    width: 32px; height: 32px;
    border: none; background: none; border-radius: 50%;
    color: var(--text-secondary); font-size: 15px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.18s, color 0.18s;
}
.cp-icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.cp-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}
.cp-loading {
    display: flex; align-items: center; justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 22px;
}

/* Conversation list */
.cp-conv-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.18s;
    border-bottom: 1px solid var(--border-color);
}
.cp-conv-item:hover { background: var(--bg-hover); }
.cp-conv-item:last-child { border-bottom: none; }
.cp-conv-avatar { flex-shrink: 0; }
.cp-conv-avatar img, .cp-conv-avatar .avatar-initial {
    width: 42px; height: 42px; border-radius: 50%; font-size: 16px;
}
.cp-conv-info { flex: 1; min-width: 0; }
.cp-conv-name {
    font-size: 14px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--text-primary);
}
.cp-conv-preview {
    font-size: 13px; color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 2px;
}
.cp-conv-meta { text-align: right; flex-shrink: 0; }
.cp-conv-time { font-size: 11px; color: var(--text-muted); }
.cp-conv-unread {
    display: inline-block;
    min-width: 18px; height: 18px;
    background: var(--accent);
    color: #fff;
    font-size: 11px; font-weight: 700;
    border-radius: 9px; padding: 0 4px;
    text-align: center; line-height: 18px;
    margin-top: 4px;
}
.cp-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; height: 100%;
    color: var(--text-muted);
}
.cp-empty i { font-size: 36px; opacity: 0.35; }

/* Chat messages */
.cp-msgs {
    display: flex; flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
}
.cp-msg {
    max-width: 80%;
    padding: 9px 13px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
}
.cp-msg.mine {
    align-self: flex-end;
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.cp-msg.theirs {
    align-self: flex-start;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}
.cp-msg-time { font-size: 10px; opacity: 0.65; margin-top: 3px; text-align: right; }

.cp-composer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    background: var(--bg-primary);
}
.cp-input {
    flex: 1;
    padding: 9px 14px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}
.cp-input:focus { border-color: var(--accent); }
.cp-send-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.18s, transform 0.1s;
}
.cp-send-btn:hover { background: var(--accent-dark, var(--accent)); transform: scale(1.08); }

@media (max-width: 600px) {
    .chat-fab { bottom: 80px; right: 12px; }
    .chat-popup { right: 8px; bottom: 140px; width: calc(100vw - 16px); max-width: calc(100vw - 16px); }
}

/* ── Plaka Hero & Review Cards ─────────────────────────────── */
.plaka-hero{display:flex;gap:16px;align-items:center;padding:20px;margin:12px;border:1px solid var(--border-color);border-radius:14px;background:var(--card-bg);}
.plaka-hero-avatar .avatar-lg,.plaka-hero-avatar img,.plaka-hero-avatar .avatar-initial{width:72px;height:72px;border-radius:50%;object-fit:cover;font-size:28px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;}
.plaka-hero-info{flex:1;min-width:0;}
.plaka-hero-name{font-weight:700;font-size:18px;color:var(--text-primary);text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.plaka-hero-meta{color:var(--text-secondary);font-size:14px;margin-top:4px;display:flex;flex-wrap:wrap;gap:12px;}
.plaka-hero-bio{color:var(--text-secondary);font-size:13px;margin:8px 0 0;}

.section-header{padding:16px 16px 8px;display:flex;align-items:center;justify-content:space-between;}
.section-header h3{font-size:15px;font-weight:700;color:var(--text-primary);margin:0;display:flex;align-items:center;gap:8px;}
.count-badge{background:var(--accent-light,rgba(29,155,240,.1));color:var(--accent);font-size:12px;padding:2px 8px;border-radius:10px;font-weight:600;}

.review-list{padding:0 12px 16px;display:flex;flex-direction:column;gap:10px;}
.review-card{display:flex;gap:12px;padding:14px;border:1px solid var(--border-color);border-radius:12px;background:var(--card-bg);}
.review-avatar .avatar-sm,.review-avatar img,.review-avatar .avatar-initial{width:40px;height:40px;border-radius:50%;}
.review-body{flex:1;min-width:0;}
.review-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;}
.review-name{font-weight:600;color:var(--text-primary);text-decoration:none;}
.review-stars{color:#f59e0b;font-size:12px;}
.review-time{color:var(--text-secondary);font-size:12px;}
.review-text{margin:6px 0 0;font-size:14px;color:var(--text-primary);line-height:1.5;}

.empty-state-modern.compact{padding:24px 16px;}

/* ── Meeting Detail ─────────────────────────────────────────── */
.meeting-detail-card{margin:12px;padding:20px;border:1px solid var(--border-color);border-radius:14px;background:var(--card-bg);}
.meeting-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 16px;}
.meeting-meta-grid .meta-item{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-secondary);}
.meeting-meta-grid .meta-item i{color:currentColor;opacity:0.85;width:16px;}
.meeting-meta-grid .meta-item a{color:var(--text-primary);text-decoration:none;font-weight:500;}
.meeting-description{margin:16px 0 0;padding-top:16px;border-top:1px solid var(--border-color);color:var(--text-primary);font-size:14px;line-height:1.6;}
.meeting-actions{margin-top:16px;display:flex;gap:8px;}

.participants-modern{padding:0 12px 8px;display:flex;flex-wrap:wrap;gap:8px;}
.participant-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border:1px solid var(--border-color);border-radius:999px;text-decoration:none;color:var(--text-primary);font-size:13px;background:var(--card-bg);transition:background .15s;}
.participant-chip:hover{background:var(--hover-bg,rgba(0,0,0,.04));}
.participant-chip .avatar-sm,.participant-chip img,.participant-chip .avatar-initial{width:28px;height:28px;border-radius:50%;font-size:12px;}

.comment-list-modern{padding:0 12px 16px;display:flex;flex-direction:column;gap:10px;}
.comment-modern{display:flex;gap:10px;padding:12px;border:1px solid var(--border-color);border-radius:12px;background:var(--card-bg);}
.comment-modern .avatar-sm,.comment-modern img,.comment-modern .avatar-initial{width:36px;height:36px;border-radius:50%;flex-shrink:0;}
.comment-body{flex:1;min-width:0;}
.comment-user{font-weight:600;color:var(--text-primary);text-decoration:none;font-size:13px;}
.comment-body p{margin:4px 0 0;font-size:14px;color:var(--text-primary);line-height:1.5;}
.comment-form-modern{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:12px;border:1px solid var(--border-color);border-radius:12px;background:var(--card-bg);}
.comment-form-modern textarea{width:100%;padding:10px;border:1px solid var(--border-color);border-radius:8px;resize:vertical;font:inherit;background:transparent;color:var(--text-primary);}
.comment-form-modern textarea:focus{outline:none;border-color:var(--accent);}
.comment-form-modern button{align-self:flex-end;}

/* ── Home page enhancements ─────────────────────────────────── */
.page-top-bar.sticky{position:sticky;top:0;z-index:50;background:var(--bg,var(--card-bg));backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border-color);}
.page-top-left{display:flex;flex-direction:column;gap:2px;}
.page-top-sub{font-size:12px;color:var(--text-secondary);font-weight:400;}

.composer-shortcut{display:flex;align-items:center;gap:12px;margin:12px;padding:12px 16px;border:1px solid var(--border-color);border-radius:999px;background:var(--card-bg);text-decoration:none;transition:background .15s,border-color .15s;}
.composer-shortcut:hover{background:var(--hover-bg,rgba(0,0,0,.04));border-color:var(--accent);}
.composer-shortcut .avatar-sm,.composer-shortcut img,.composer-shortcut .avatar-initial{width:36px;height:36px;border-radius:50%;flex-shrink:0;}
.composer-placeholder{flex:1;color:var(--text-secondary);font-size:14px;}
.composer-actions{display:flex;gap:12px;color:var(--accent);font-size:16px;}

.sticky-tabs{position:sticky;top:56px;z-index:40;background:var(--card-bg);}

.panel-empty{padding:12px 14px;font-size:13px;color:var(--text-secondary);display:flex;align-items:center;gap:6px;}

/* ── Compose Post Modal ─────────────────────────────────────── */
.compose-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.compose-overlay.open{opacity:1;pointer-events:all;}
.compose-modal{width:100%;max-width:560px;background:var(--bg-primary);border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.25);overflow:hidden;transform:translateY(16px);transition:transform .2s;margin:16px;}
.compose-overlay.open .compose-modal{transform:translateY(0);}
.compose-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-color);font-weight:700;font-size:16px;color:var(--text-primary);}
.compose-close-btn{background:none;border:none;cursor:pointer;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;transition:background .15s;}
.compose-close-btn:hover{background:var(--hover-bg,rgba(0,0,0,.06));}
.compose-body{display:flex;gap:12px;padding:16px 20px 8px;}
.compose-body .avatar-sm,.compose-body img,.compose-body .avatar-initial{width:42px;height:42px;border-radius:50%;flex-shrink:0;font-size:17px;}
.compose-textarea{flex:1;border:none;outline:none;resize:none;font:inherit;font-size:16px;color:var(--text-primary);background:transparent;line-height:1.6;min-height:100px;}
.compose-textarea::placeholder{color:var(--text-secondary);}
.compose-preview{padding:0 20px 8px;}
.compose-img-wrap{position:relative;display:inline-block;}
.compose-img-preview{max-width:100%;max-height:260px;border-radius:12px;display:block;}
.compose-img-remove{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.7);color:#fff;border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;}
.compose-modal-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 20px 16px;border-top:1px solid var(--border-color);}
.compose-tools{display:flex;align-items:center;gap:12px;}
.compose-tool{cursor:pointer;color:var(--accent);font-size:20px;padding:6px;border-radius:50%;transition:background .15s;display:flex;align-items:center;}
.compose-tool:hover{background:var(--accent-light,rgba(29,155,240,.1));}
.compose-char{font-size:13px;color:var(--text-secondary);}

/* ── Infinite Scroll ─────────────────────────────────────────── */
.feed-sentinel{height:1px;}
.feed-loader{display:flex;justify-content:center;padding:20px;color:var(--text-secondary);font-size:20px;}

/* ── Dil ve Lokasyon Modal ───────────────────────────────────── */
.lang-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 900;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
  padding: 20px;
}
.lang-modal-overlay.open { opacity: 1; pointer-events: all; }
.lang-modal {
  width: 100%; max-width: 460px;
  background: var(--bg-primary);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  transform: translateY(18px) scale(0.98);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
  max-height: 88vh; overflow-y: auto;
}
.lang-modal-overlay.open .lang-modal { transform: translateY(0) scale(1); }
.lang-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--border-color);
}
.lang-modal-title {
  margin: 0 0 4px; font-size: 18px; font-weight: 800; color: var(--text-primary);
  display: flex; align-items: center; gap: 10px;
}
.lang-modal-title i { color: var(--accent); }
.lang-modal-sub { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.lang-modal-close {
  background: none; border: none; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); font-size: 17px;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.lang-modal-close:hover { background: var(--bg-secondary); color: var(--text-primary); }

.lang-modal-section { padding: 16px 22px; }
.lang-modal-section + .lang-modal-section { border-top: 1px solid var(--border-color); }
.lang-modal-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 12px;
}
.lang-options { display: flex; flex-direction: column; gap: 8px; }
.lang-option {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-primary); color: var(--text-primary);
  cursor: pointer; text-align: left; width: 100%;
  font-family: inherit; font-size: 14px;
  transition: border-color .15s, background .15s, transform .1s;
}
.lang-option:hover { background: var(--bg-secondary); border-color: var(--accent); }
.lang-option:active { transform: scale(0.99); }
.lang-option.selected {
  border-color: var(--accent);
  background: rgba(15, 20, 25, 0.05);
}
.lang-flag {
  font-size: 28px;
  line-height: 1;
  display: none; /* masaüstünde gizle — Windows'ta bayrak yerine harf çıkıyor */
}
@media (max-width: 768px) {
  .lang-flag { display: inline-block; }
}
.lang-option-info { flex: 1; min-width: 0; }
.lang-option-name { font-weight: 700; font-size: 15px; color: var(--text-primary); }
.lang-option-native { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.lang-check {
  color: var(--accent); font-size: 16px;
  opacity: 0; transform: scale(0.6);
  transition: opacity .2s, transform .2s;
}
.lang-option.selected .lang-check { opacity: 1; transform: scale(1); }

/* Country picker — search + scrollable list */
.country-picker {
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-primary);
}
.country-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}
.country-search-icon {
  position: absolute;
  left: 14px;
  color: var(--text-secondary);
  font-size: 13px;
  pointer-events: none;
}
.country-search {
  width: 100%;
  padding: 12px 40px 12px 40px;
  border: none; background: transparent;
  color: var(--text-primary);
  font-size: 14px; font-family: inherit;
  outline: none;
}
.country-search::placeholder { color: var(--text-secondary); opacity: 0.75; }
.country-search-clear {
  position: absolute;
  right: 8px;
  background: none; border: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%;
  color: var(--text-secondary); font-size: 13px;
  display: none;
  align-items: center; justify-content: center;
  transition: background .15s;
}
.country-search-clear.visible { display: flex; }
.country-search-clear:hover { background: var(--border-color); color: var(--text-primary); }

.country-list {
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.country-list::-webkit-scrollbar { width: 8px; }
.country-list::-webkit-scrollbar-track { background: transparent; }
.country-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
.country-list::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

.country-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border: none; background: transparent;
  color: var(--text-primary);
  text-align: left; cursor: pointer;
  font-family: inherit; font-size: 14px;
  transition: background .1s;
}
.country-item:hover { background: var(--bg-secondary); }
.country-item.selected { background: rgba(15, 20, 25, 0.08); color: var(--accent); font-weight: 600; }
.country-item.hidden  { display: none; }
.country-flag {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  width: 26px;
  display: none; /* masaüstünde gizle — Windows bayrakları harf olarak gösteriyor */
}
@media (max-width: 768px) {
  .country-flag { display: inline-block; }
}
.country-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country-check {
  color: var(--accent);
  font-size: 13px;
  opacity: 0;
  transition: opacity .15s;
}
.country-item.selected .country-check { opacity: 1; }
.country-empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.country-empty i { font-size: 22px; opacity: 0.6; }

.lang-modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 22px 20px;
  border-top: 1px solid var(--border-color);
}
.lang-modal-foot .btn-ghost {
  padding: 10px 18px;
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  background: transparent; color: var(--text-primary);
  font-weight: 600; font-family: inherit; font-size: 14px;
  cursor: pointer; transition: background .15s;
}
.lang-modal-foot .btn-ghost:hover { background: var(--bg-secondary); }
.lang-modal-foot .btn-primary {
  padding: 10px 22px;
  border: none; border-radius: 10px;
  background: var(--accent); color: #fff;
  font-weight: 700; font-family: inherit; font-size: 14px;
  cursor: pointer; transition: filter .15s, transform .1s;
}
.lang-modal-foot .btn-primary:hover { filter: brightness(1.08); }
.lang-modal-foot .btn-primary:active { transform: scale(0.98); }
.lang-modal-foot .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

/* Account popup'taki dil badge — sadece mobilde görünür */
.acct-lang-current {
  margin-left: auto;
  font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  background: var(--bg-secondary); color: var(--text-secondary);
  letter-spacing: 0.5px;
  display: none;
}
@media (max-width: 768px) {
  .acct-lang-current { display: inline-flex; align-items: center; }
}

/* ── Auth Modern Enhancements ────────────────────────────────── */
/* Edge-flush wrapper — hiçbir padding/margin yok, sidebar yok */
body.auth-body { margin: 0 !important; padding: 0 !important; }
body.auth-body .sidebar,
body.auth-body .right-panel,
body.auth-body .topbar,
body.auth-body .mobile-nav,
body.auth-body .notif-panel,
body.auth-body .notif-panel-backdrop,
body.auth-body .chat-fab,
body.auth-body .fab-compose { display: none !important; }
.auth-wrapper  { margin: 0 !important; padding: 0 !important; width: 100%; }

/* Sol dekoratif panel — daha geniş, köşeye bitişik, animasyonlu */
.auth-side {
  flex: 0 0 52% !important;
  padding: 64px 72px !important;
  background: linear-gradient(135deg, #7c3aed 0%, #5e17eb 100%) !important;
  background-size: 300% 300% !important;
  animation: authGradientShift 18s ease infinite;
  overflow: hidden;
}
@keyframes authGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Blobs — mevcut ::before/::after'ı genişlet ve hareketlendir */
.auth-side::before {
  width: 620px !important;
  height: 620px !important;
  background: radial-gradient(circle, rgba(255,255,255,0.18), rgba(255,255,255,0) 70%) !important;
  top: -180px !important;
  right: -200px !important;
  filter: blur(20px);
  animation: authFloat1 18s ease-in-out infinite;
}
.auth-side::after {
  width: 480px !important;
  height: 480px !important;
  background: radial-gradient(circle, rgba(255,255,255,0.14), rgba(255,255,255,0) 70%) !important;
  bottom: -140px !important;
  left: -120px !important;
  filter: blur(24px);
  animation: authFloat2 22s ease-in-out infinite;
}
@keyframes authFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(50px, -40px) scale(1.08); }
  66%      { transform: translate(-30px, 50px) scale(0.95); }
}
@keyframes authFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-60px, -50px) scale(1.12); }
}

/* Noktalı pattern overlay — dekoratif grid */
.auth-side { position: relative; }
.auth-wrapper .auth-side > .auth-side-content { position: relative; z-index: 2; }

/* Ek dekoratif noktalar — pseudo tabanlı overlay */
.auth-side-content::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1.5px, transparent 1.6px);
  background-size: 24px 24px;
  opacity: 0.4;
  pointer-events: none;
  z-index: -1;
  animation: authDrift 40s linear infinite;
}
@keyframes authDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 240px 240px; }
}
/* İçerik fade-in */
.auth-side-content { animation: authContentIn 0.7s cubic-bezier(.2,.8,.2,1) both; max-width: 460px !important; }
@keyframes authContentIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Logo float */
.auth-side-logo-img { animation: authLogoFloat 5s ease-in-out infinite; }
@keyframes authLogoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Feature stagger */
.auth-feature { opacity: 0; animation: authFeatureIn 0.55s cubic-bezier(.2,.8,.2,1) forwards; transition: transform .25s ease; }
.auth-feature:nth-child(1) { animation-delay: 0.30s; }
.auth-feature:nth-child(2) { animation-delay: 0.42s; }
.auth-feature:nth-child(3) { animation-delay: 0.54s; }
.auth-feature:nth-child(4) { animation-delay: 0.66s; }
.auth-feature:hover { transform: translateX(4px); }
@keyframes authFeatureIn {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Feature icon interactive */
.auth-feature-icon { transition: transform .35s cubic-bezier(.2,.8,.2,1), background .3s; }
.auth-feature:hover .auth-feature-icon {
  transform: scale(1.12) rotate(-6deg);
  background: rgba(255,255,255,0.24) !important;
}

/* Eski shine çizgisi devre dışı */
.auth-side-shine { display: none; }

/* Yükselen baloncuklar */
.auth-bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.auth-bubble {
  position: absolute;
  bottom: -80px;
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  background: radial-gradient(circle at 30% 28%,
    rgba(255,255,255,0.45),
    rgba(255,255,255,0.14) 52%,
    rgba(255,255,255,0.04) 82%);
  box-shadow:
    inset 0 -3px 6px rgba(255,255,255,0.22),
    inset 0 2px 4px rgba(255,255,255,0.35),
    0 0 14px rgba(255,255,255,0.08);
  opacity: 0;
  animation: bubbleRise linear infinite;
  backdrop-filter: blur(1px);
}
@keyframes bubbleRise {
  0%   { transform: translate3d(0, 0, 0) scale(0.9); opacity: 0; }
  8%   { opacity: 0.85; }
  40%  { transform: translate3d(18px, -40vh, 0) scale(1.05); }
  70%  { transform: translate3d(-14px, -75vh, 0) scale(1); }
  92%  { opacity: 0.65; }
  100% { transform: translate3d(12px, -115vh, 0) scale(0.85); opacity: 0; }
}

/* Her baloncuğa farklı boyut/hız/konum */
.auth-bubble:nth-child(1)  { left: 8%;  width: 22px; height: 22px; animation-duration: 14s; animation-delay: 0s; }
.auth-bubble:nth-child(2)  { left: 18%; width: 42px; height: 42px; animation-duration: 19s; animation-delay: 2s; }
.auth-bubble:nth-child(3)  { left: 28%; width: 14px; height: 14px; animation-duration: 12s; animation-delay: 5s; }
.auth-bubble:nth-child(4)  { left: 40%; width: 54px; height: 54px; animation-duration: 22s; animation-delay: 1s; }
.auth-bubble:nth-child(5)  { left: 50%; width: 26px; height: 26px; animation-duration: 16s; animation-delay: 4s; }
.auth-bubble:nth-child(6)  { left: 60%; width: 18px; height: 18px; animation-duration: 13s; animation-delay: 7s; }
.auth-bubble:nth-child(7)  { left: 72%; width: 48px; height: 48px; animation-duration: 20s; animation-delay: 3s; }
.auth-bubble:nth-child(8)  { left: 82%; width: 30px; height: 30px; animation-duration: 17s; animation-delay: 6s; }
.auth-bubble:nth-child(9)  { left: 92%; width: 20px; height: 20px; animation-duration: 15s; animation-delay: 8s; }
.auth-bubble:nth-child(10) { left: 35%; width: 36px; height: 36px; animation-duration: 18s; animation-delay: 9s; }
.auth-bubble:nth-child(11) { left: 65%; width: 24px; height: 24px; animation-duration: 14s; animation-delay: 10s; }
.auth-bubble:nth-child(12) { left: 12%; width: 40px; height: 40px; animation-duration: 21s; animation-delay: 11s; }

/* Pop (patlama) efekti */
.auth-bubble.popping {
  animation: bubblePop 0.45s cubic-bezier(.2,.8,.2,1) forwards !important;
}
@keyframes bubblePop {
  0%   { transform: scale(1);   opacity: 1; }
  40%  { transform: scale(1.5); opacity: 0.75; filter: blur(0.5px); }
  100% { transform: scale(2.2); opacity: 0;    filter: blur(3px); }
}
.auth-bubble.popping::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(255,255,255,0.7);
  border-radius: 50%;
  animation: bubbleRing 0.5s ease-out forwards;
  pointer-events: none;
}
@keyframes bubbleRing {
  0%   { opacity: 1; transform: scale(0.6); border-width: 2px; }
  100% { opacity: 0; transform: scale(2.6); border-width: 0.5px; }
}

/* Mouse spotlight — imleci takip eden parlak halka */
.auth-side-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .35s ease;
  background:
    radial-gradient(
      380px circle at var(--mx, 50%) var(--my, 50%),
      rgba(255,255,255,0.22),
      rgba(255,255,255,0.08) 30%,
      transparent 60%
    );
  mix-blend-mode: overlay;
}
.auth-side:hover .auth-side-glow { opacity: 1; }

/* Panel hover'da çok hafif parallax tilt */
.auth-side-content { transition: transform .25s ease; }
.auth-side:hover .auth-side-content {
  transform: translate(calc((var(--mx-pct, 0.5) - 0.5) * 10px), calc((var(--my-pct, 0.5) - 0.5) * 6px));
}

@media (prefers-reduced-motion: reduce) {
  .auth-side, .auth-side::before, .auth-side::after,
  .auth-side-content, .auth-side-content::before,
  .auth-side-logo-img, .auth-feature, .auth-side-shine,
  .auth-side-glow, .auth-bubble {
    animation: none !important;
    transition: none !important;
  }
  .auth-bubble { display: none; }
  .auth-side:hover .auth-side-content { transform: none !important; }
}
.auth-main { padding: 40px 48px !important; }
@media (max-width: 1200px) {
  .auth-side { flex: 0 0 46% !important; padding: 48px 56px !important; }
}
@media (max-width: 900px) {
  .auth-side { display: none !important; }
  .auth-main { padding: 32px 20px !important; }
}

.auth-side-logo {
  display: block !important;
  background: transparent !important;
  backdrop-filter: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
}
.auth-side-logo-img {
  height: 84px;
  width: auto;
  object-fit: contain;
  display: block;
  border-radius: 12px;
}
.auth-feature-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,0.12); display: flex; align-items: center;
  justify-content: center; font-size: 14px; flex-shrink: 0;
}

/* Label row with forgot link */
.auth-label-row { display: flex; align-items: center; justify-content: space-between; }
.auth-forgot-link { font-size: 12px; color: var(--text-secondary); text-decoration: none; transition: color .2s; }
.auth-forgot-link:hover { color: var(--accent); }

/* Password strength bar */
.auth-strength { height: 4px; background: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.auth-strength-bar { height: 100%; border-radius: 2px; width: 0; transition: width .3s ease, background .3s ease; }

/* Hint text */
.auth-hint { font-size: 11px; color: var(--text-secondary); margin-top: 3px; display: block; }

/* Terms text */
.auth-terms { font-size: 12px; color: var(--text-secondary); text-align: center; line-height: 1.5; margin-top: -4px; }
.auth-terms a { color: var(--accent); text-decoration: none; }
.auth-terms a:hover { text-decoration: underline; }

/* Sliding tab indicator */
.auth-tab-bar { position: relative !important; }
.auth-tab-indicator {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  border-radius: 10px; background: var(--bg-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: left .22s ease, width .22s ease;
  pointer-events: none; z-index: 0; width: 0;
}
.auth-tab { position: relative; z-index: 1; }
.auth-tab.active { background: transparent !important; box-shadow: none !important; }

/* Submit loading */
.auth-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* Forgot / Reset page extras */
.auth-back {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  color: var(--text-secondary); text-decoration: none; margin-bottom: 24px;
  transition: color .2s;
}
.auth-back:hover { color: var(--accent); }
.auth-box-narrow { max-width: 420px !important; }
.auth-box-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(15, 20, 25, 0.08); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 16px;
}
.auth-box-title { font-size: 22px; font-weight: 800; color: var(--text-primary); margin: 0 0 8px; }
.auth-box-subtitle { font-size: 14px; color: var(--text-secondary); margin: 0 0 24px; line-height: 1.55; }

/* Success alert (already in style.css but ensure visible) */
.auth-alert.auth-alert-success { background: rgba(0,186,124,0.08); color: #00ba7c; border-color: rgba(0,186,124,0.15); }

/* Fix: grid/flex children overflow — input shrink edebilsin */
.auth-row { min-width: 0; }
.auth-row .auth-field,
.auth-field,
.auth-input-wrap { min-width: 0; }
.auth-input { min-width: 0; width: 100%; }

/* Google OAuth button */
.auth-oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 16px;
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, transform .1s;
  margin-bottom: 18px;
}
.auth-oauth-btn:hover  { background: var(--bg-secondary); border-color: var(--accent); }
.auth-oauth-btn:active { transform: scale(0.99); }
.auth-oauth-btn svg    { flex-shrink: 0; }

/* Divider */
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--text-secondary); font-size: 12px;
  margin: 4px 0 18px;
}
.auth-divider::before,
.auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border-color);
}

/* ── Mesajlar PIN kilit ekranı ──────────────────────────────── */
.pin-lock-screen { text-align: center; padding: 40px 24px 60px; max-width: 360px; margin: 0 auto; }
.pin-lock-icon { width: 84px; height: 84px; margin: 10px auto 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36px; color: var(--accent); background: var(--accent-light); }
.pin-lock-screen h2 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.pin-lock-screen > p { color: var(--text-secondary); font-size: 14px; margin-bottom: 22px; }
.pin-lock-dots { display: flex; justify-content: center; gap: 14px; margin-bottom: 14px; }
.pin-lock-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-light); transition: background .15s, border-color .15s; }
.pin-lock-dot.filled { background: var(--accent); border-color: var(--accent); }
.pin-lock-error { color: var(--danger); font-size: 13px; min-height: 18px; margin-bottom: 10px; }
.pin-lock-input { width: 180px; text-align: center; letter-spacing: 12px; font-size: 24px; padding: 12px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-secondary); color: var(--text-primary); outline: none; margin: 0 auto 18px; display: block; }
.pin-lock-input:focus { border-color: var(--accent); }
.pin-lock-screen .btn-primary { display: inline-flex; align-items: center; gap: 8px; }

/* ── @etiket (mention) linkleri ─────────────────────────────── */
.mention { color: var(--accent); font-weight: 600; text-decoration: none; }
.mention:hover { text-decoration: underline; }

/* ── Yorum taşma fix: uzun metin/kelime alt satıra insin ────── */
.comment-item { min-width: 0; }
.comment-item .comment-body { min-width: 0; overflow: hidden; }
.comment-item .comment-content,
.comment-item .post-header .post-name,
.comment-item .post-header .post-handle {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── Yorum yanıtları ─────────────────────────────────────────── */
.comment-replies {
  margin-left: 40px;
  border-left: 2px solid var(--border-color);
}
.comment-reply { padding-top: 10px; padding-bottom: 10px; }
.comment-reply .comment-content { font-size: 14px; }
.action-reply { color: var(--text-secondary); }
.action-reply:hover { color: var(--accent); background: var(--accent-light); }

.reply-form {
  display: none;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
}
.reply-form.open { display: flex; }
.reply-form .avatar-xs,
.reply-form img,
.reply-form .avatar-initial { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; font-size: 12px; }
.reply-input {
  flex: 1;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 8px 14px;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--bg-secondary);
  resize: none;
  min-height: 38px;
  outline: none;
  transition: border-color 0.2s;
}
.reply-input:focus { border-color: var(--border-light); }

/* ── Çok tipli composer (Gönderi / Buluşma / Arıyorum) ──────── */
.compose-types { display: flex; gap: 8px; padding: 12px 20px 14px; border-bottom: 1px solid var(--border-color); margin-bottom: 6px; }
.compose-type {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 6px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12.5px; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s;
}
.compose-type i { font-size: 12px; }
.compose-type:hover { border-color: var(--accent); color: var(--accent); }
.compose-type.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.compose-fields { display: flex; flex-direction: column; gap: 10px; padding: 4px 20px 6px; }
.compose-field-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-top: 2px; }
.compose-field-label i { margin-right: 4px; }
.compose-field {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 11px 14px;
  font: inherit; font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-secondary);
  outline: none;
  transition: border-color .18s;
}
.compose-field::placeholder { color: var(--text-secondary); }
.compose-field:focus { border-color: var(--border-light); }

/* Buluşma haritası */
.meet-map {
  height: 220px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  z-index: 0;
  background: var(--bg-secondary);
}
.meet-map .leaflet-control-attribution { font-size: 9px; }
/* İçerik uzayınca modal kayabilsin (harita + alanlar) */
.compose-modal { max-height: 92vh; overflow-y: auto; }

/* ─── Sigorta & Kasko Teklif Sayfası Stilleri (Modernize) ────────── */
.insurance-page-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 16px 80px;
}

/* Hero Banner */
.insurance-hero-banner {
  position: relative;
  background: linear-gradient(135deg, rgba(94, 23, 235, 0.14) 0%, rgba(37, 99, 235, 0.08) 50%, rgba(16, 185, 129, 0.05) 100%);
  border: 1px solid rgba(94, 23, 235, 0.22);
  border-radius: 24px;
  padding: 40px 36px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(94, 23, 235, 0.05);
}

.insurance-hero-glow {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(94, 23, 235, 0.25) 0%, rgba(94, 23, 235, 0) 70%);
  pointer-events: none;
}

.insurance-kicker-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(94, 23, 235, 0.12);
  border: 1px solid rgba(94, 23, 235, 0.25);
  color: var(--primary, #5e17eb);
  font-size: 12.5px;
  font-weight: 750;
  margin-bottom: 14px;
}

.insurance-hero-title {
  font-size: 32px;
  font-weight: 850;
  color: var(--text-primary, #0f172a);
  margin: 0 0 14px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.insurance-hero-desc {
  font-size: 15px;
  color: var(--text-secondary, #475569);
  max-width: 780px;
  line-height: 1.65;
  margin: 0 0 28px;
}

.insurance-badges-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.hero-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--bg-primary, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.hero-feature-item i {
  font-size: 20px;
  color: var(--primary, #5e17eb);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(94, 23, 235, 0.08);
  border-radius: 8px;
  flex-shrink: 0;
}

.hero-feature-item strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}

.hero-feature-item small {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted, #64748b);
}

/* Partners Strip */
.insurance-partners-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 16px;
  margin-bottom: 28px;
  overflow-x: auto;
  white-space: nowrap;
}

.partners-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary, #475569);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.partners-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
}

.partner-badge i {
  color: #10b981;
  font-size: 11px;
}

/* Alerts */
.insurance-alert {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 16px;
  margin-bottom: 24px;
  font-size: 13.5px;
}

.insurance-alert i {
  font-size: 20px;
  margin-top: 2px;
  flex-shrink: 0;
}

.insurance-alert strong {
  display: block;
  font-size: 14.5px;
  margin-bottom: 2px;
}

.insurance-alert p {
  margin: 0;
}

.insurance-alert.alert-success {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: #065f46;
}

.insurance-alert.alert-danger {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.28);
  color: #991b1b;
}

/* Main Grid Layout */
.insurance-grid-layout {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 28px;
  align-items: start;
}

.insurance-form-card,
.insurance-my-requests-card,
.insurance-info-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 22px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.insurance-card-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  padding-bottom: 20px;
}

.header-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary, #5e17eb), #3b82f6);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(94, 23, 235, 0.25);
}

.insurance-card-header h2 {
  font-size: 21px;
  font-weight: 800;
  color: var(--text-primary, #0f172a);
  margin: 0 0 6px;
}

.insurance-card-header p {
  font-size: 13.5px;
  color: var(--text-secondary, #64748b);
  margin: 0;
  line-height: 1.5;
}

.form-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 750;
  color: var(--text-primary, #0f172a);
}

.section-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary, #5e17eb);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Service Selection Cards */
.insurance-services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.service-checkbox-card {
  position: relative;
  cursor: pointer;
}

.service-checkbox-card input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.service-card-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: var(--bg-secondary, #f8fafc);
  border: 2px solid var(--border-color, #e2e8f0);
  transition: all 0.2s ease;
}

.service-card-inner .service-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(94, 23, 235, 0.08);
  color: var(--primary, #5e17eb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.service-card-inner .service-info {
  flex: 1;
  min-width: 0;
}

.service-card-inner .service-info strong {
  display: block;
  font-size: 13px;
  font-weight: 750;
  color: var(--text-primary, #0f172a);
  line-height: 1.3;
}

.service-card-inner .service-info small {
  display: block;
  font-size: 11px;
  color: var(--text-muted, #64748b);
  margin-top: 3px;
  line-height: 1.3;
}

.service-card-inner .service-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-color, #cbd5e1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: transparent;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.service-checkbox-card input[type="checkbox"]:checked + .service-card-inner {
  border-color: var(--primary, #5e17eb);
  background: rgba(94, 23, 235, 0.04);
}

.service-checkbox-card input[type="checkbox"]:checked + .service-card-inner .service-check {
  background: var(--primary, #5e17eb);
  border-color: var(--primary, #5e17eb);
  color: #ffffff;
}

.service-checkbox-card.featured .service-card-inner {
  border-color: rgba(94, 23, 235, 0.35);
}

/* Plate Input & 3D Live Plate */
.plate-input-container {
  display: flex;
  align-items: center;
  gap: 14px;
}

.plate-input-box {
  flex: 1;
}

.live-tr-plate {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 2.5px solid #0f172a;
  border-radius: 9px;
  overflow: hidden;
  height: 48px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255,255,255,0.8);
  position: relative;
}

.plate-blue-strip {
  background: #003399;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  padding: 0 9px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-right: 1.5px solid #0f172a;
}

.plate-country {
  font-family: Arial, sans-serif;
  letter-spacing: 0.05em;
}

.plate-number-display {
  color: #0f172a;
  font-size: 17px;
  font-weight: 900;
  font-family: 'Consolas', 'Courier New', monospace;
  letter-spacing: 0.1em;
  padding: 0 16px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,0.1);
}

/* Form Fields */
.insurance-request-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.insurance-request-form .form-group {
  margin-bottom: 16px;
}

.insurance-request-form label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  margin-bottom: 8px;
}

.insurance-request-form label i {
  color: var(--primary, #5e17eb);
  font-size: 12px;
}

.insurance-request-form .req {
  color: var(--danger, #ef4444);
}

.insurance-request-form .opt {
  font-size: 11px;
  font-weight: normal;
  color: var(--text-muted, #64748b);
}

.insurance-request-form .form-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: var(--bg-secondary, #f8fafc);
  border: 1.5px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  color: var(--text-primary, #0f172a);
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
}

.insurance-request-form .form-input:focus {
  border-color: var(--primary, #5e17eb);
  background: var(--bg-card, #ffffff);
  box-shadow: 0 0 0 3.5px rgba(94, 23, 235, 0.12);
}

.insurance-request-form .form-textarea {
  height: auto;
  padding: 12px 16px;
  resize: vertical;
}

.form-hint {
  display: block;
  font-size: 12px;
  color: var(--text-muted, #64748b);
  margin-top: 6px;
  line-height: 1.4;
}

/* Submit Button */
.btn-insurance-submit {
  width: 100%;
  padding: 16px 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary, #5e17eb) 0%, #4f46e5 100%);
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 6px 20px rgba(94, 23, 235, 0.35);
  transition: all 0.2s ease;
  margin-top: 20px;
}

.btn-insurance-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(94, 23, 235, 0.45);
}

.btn-insurance-submit .btn-text {
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-insurance-submit .btn-subtext {
  font-size: 11.5px;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Fast WhatsApp Strip */
.fast-wa-quote-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 16px;
  background: rgba(37, 211, 102, 0.08);
  border: 1px solid rgba(37, 211, 102, 0.25);
  margin-top: 24px;
}

.wa-strip-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wa-strip-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.wa-strip-content strong {
  display: block;
  font-size: 13.5px;
  color: var(--text-primary, #0f172a);
}

.wa-strip-content span {
  display: block;
  font-size: 12px;
  color: var(--text-secondary, #475569);
}

.btn-wa-fast {
  padding: 10px 18px;
  border-radius: 10px;
  background: #25d366;
  color: #ffffff;
  font-size: 13px;
  font-weight: 750;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px rgba(37, 211, 102, 0.3);
}

.btn-wa-fast:hover {
  background: #20ba59;
  transform: translateY(-1px);
}

/* Side Column */
.insurance-side-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.info-card-head h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary, #0f172a);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-card-head h3 i {
  color: #f59e0b;
}

.info-card-head p {
  font-size: 13px;
  color: var(--text-secondary, #64748b);
  margin: 0 0 20px;
}

/* Benefits list */
.insurance-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.insurance-benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.benefit-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(94, 23, 235, 0.08);
  color: var(--primary, #5e17eb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.insurance-benefits-list strong {
  display: block;
  font-size: 13.5px;
  color: var(--text-primary, #0f172a);
  margin-bottom: 2px;
}

.insurance-benefits-list p {
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  margin: 0;
  line-height: 1.45;
}

/* WhatsApp Box */
.whatsapp-support-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 16px;
  background: rgba(37, 211, 102, 0.08);
  border: 1px solid rgba(37, 211, 102, 0.25);
}

.wa-top-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.wa-icon {
  font-size: 26px;
  color: #25d366;
}

.wa-text strong {
  font-size: 14px;
  color: var(--text-primary, #0f172a);
}

.wa-text p {
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  margin: 2px 0 0;
  line-height: 1.4;
}

.wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px;
  border-radius: 10px;
  background: #25d366;
  color: #ffffff;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.wa-btn:hover {
  background: #20ba59;
  transform: translateY(-1px);
}

/* My Requests Styles */
.my-requests-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.my-requests-header h3 {
  font-size: 17px;
  font-weight: 800;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary, #0f172a);
}

.my-requests-header h3 i {
  color: var(--primary, #5e17eb);
}

.req-count-badge {
  font-size: 11.5px;
  font-weight: 750;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(94, 23, 235, 0.1);
  color: var(--primary, #5e17eb);
}

.my-requests-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 440px;
  overflow-y: auto;
}

.my-request-item {
  padding: 16px;
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 14px;
}

.req-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.req-plate-badge {
  font-weight: 850;
  font-size: 13px;
  background: #ffffff;
  color: #0f172a;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1.5px solid #0f172a;
  letter-spacing: 0.05em;
}

.req-plate-none {
  font-size: 12px;
  font-weight: 650;
  color: var(--text-muted, #64748b);
  display: flex;
  align-items: center;
  gap: 5px;
}

.req-status-pill {
  font-size: 11.5px;
  font-weight: 750;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.req-status-pill.status-pending { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.req-status-pill.status-contacted { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.req-status-pill.status-completed { background: rgba(16, 185, 129, 0.12); color: #059669; }
.req-status-pill.status-cancelled { background: rgba(239, 68, 68, 0.12); color: #dc2626; }

.req-item-services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.srv-tag {
  font-size: 11px;
  font-weight: 650;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  color: var(--text-secondary, #475569);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.srv-tag.tag-best {
  background: rgba(94, 23, 235, 0.08);
  border-color: rgba(94, 23, 235, 0.25);
  color: var(--primary, #5e17eb);
}

.req-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-muted, #64748b);
  border-top: 1px solid var(--border-color, #e2e8f0);
  padding-top: 10px;
}

.btn-cancel-request {
  background: none;
  border: none;
  color: var(--danger, #ef4444);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-cancel-request:hover {
  text-decoration: underline;
}

/* 3 Step Process */
.insurance-process-section {
  margin-top: 48px;
  padding: 40px 30px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 24px;
}

.section-title-center {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 36px;
}

.section-title-center .sub-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(94, 23, 235, 0.08);
  color: var(--primary, #5e17eb);
  font-size: 12px;
  font-weight: 750;
  margin-bottom: 8px;
}

.section-title-center h2 {
  font-size: 24px;
  font-weight: 850;
  color: var(--text-primary, #0f172a);
  margin: 0 0 8px;
}

.section-title-center p {
  font-size: 14px;
  color: var(--text-secondary, #64748b);
  margin: 0;
}

.process-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.process-step-card {
  position: relative;
  padding: 28px 22px;
  border-radius: 18px;
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  text-align: center;
  transition: all 0.2s ease;
}

.process-step-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.step-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary, #5e17eb);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(94, 23, 235, 0.1);
  color: var(--primary, #5e17eb);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.process-step-card h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary, #0f172a);
  margin: 0 0 8px;
}

.process-step-card p {
  font-size: 12.5px;
  color: var(--text-secondary, #64748b);
  margin: 0;
  line-height: 1.5;
}

/* FAQ Accordion */
.insurance-faq-section {
  margin-top: 36px;
}

.faq-accordion {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border-radius: 14px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  overflow: hidden;
  transition: all 0.2s ease;
}

.faq-question {
  width: 100%;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: none;
  border: none;
  text-align: left;
  font-size: 14.5px;
  font-weight: 750;
  color: var(--text-primary, #0f172a);
  cursor: pointer;
}

.faq-question i {
  color: var(--text-muted, #94a3b8);
  transition: transform 0.2s ease;
}

.faq-item.active .faq-question i {
  transform: rotate(180deg);
  color: var(--primary, #5e17eb);
}

.faq-answer {
  display: none;
  padding: 0 20px 18px;
  font-size: 13.5px;
  color: var(--text-secondary, #475569);
  line-height: 1.6;
}

.faq-item.active .faq-answer {
  display: block;
}

/* Dark Mode Overrides */
[data-theme="dark"] .insurance-hero-banner {
  background: linear-gradient(135deg, rgba(94, 23, 235, 0.2) 0%, rgba(30, 41, 59, 0.4) 100%);
  border-color: rgba(94, 23, 235, 0.3);
}

[data-theme="dark"] .live-tr-plate {
  background: #f8fafc;
  border-color: #0f172a;
}

[data-theme="dark"] .partner-badge {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
}

[data-theme="dark"] .process-step-card,
[data-theme="dark"] .service-card-inner,
[data-theme="dark"] .my-request-item {
  background: rgba(30, 41, 59, 0.5);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Responsive Media Queries */
@media (max-width: 900px) {
  .insurance-grid-layout {
    grid-template-columns: 1fr;
  }
  .insurance-hero-title {
    font-size: 26px;
  }
  .insurance-services-grid {
    grid-template-columns: 1fr;
  }
  .insurance-request-form .form-row {
    grid-template-columns: 1fr;
  }
  .process-steps-grid {
    grid-template-columns: 1fr;
  }
  .fast-wa-quote-strip {
    flex-direction: column;
    align-items: flex-start;
  }
  .btn-wa-fast {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .insurance-page-container {
    padding: 14px 12px 60px;
  }
  .insurance-hero-banner {
    padding: 26px 18px;
    border-radius: 18px;
  }
  .insurance-hero-title {
    font-size: 22px;
  }
  .insurance-form-card,
  .insurance-my-requests-card,
  .insurance-info-card,
  .insurance-process-section {
    padding: 20px 16px;
    border-radius: 18px;
  }
  .plate-input-container {
    flex-direction: column;
    align-items: stretch;
  }
  .live-tr-plate {
    width: 100%;
    justify-content: center;
  }
}

/* ── Kiralık Araçlar (Rentals) Module ─────────────────────────────── */
.rental-type-tag {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 3;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(94, 23, 235, 0.88);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.rental-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 9px 0;
}

.rental-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
  line-height: 1.3;
}

.rental-period-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rental-terms-box {
  background: var(--card-bg-subtle, rgba(94, 23, 235, 0.03));
  border: 1px solid var(--border-color, rgba(94, 23, 235, 0.12));
  border-radius: 12px;
  padding: 16px;
}

.market-top-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary, #5e17eb) 0%, #4f46e5 100%);
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 750;
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(94, 23, 235, 0.28);
  transition: all 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
}

.market-top-create-btn:hover {
  background: #4f46e5;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(94, 23, 235, 0.4);
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

@media (max-width: 640px) {
  .quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
}

/* ── Araç Arıyorum (Wanted Listings) Stilleri ────────────────────────── */
.wanted-page-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 16px 80px;
}

.wanted-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(135deg, rgba(94, 23, 235, 0.12) 0%, rgba(59, 130, 246, 0.08) 100%);
  border: 1px solid rgba(94, 23, 235, 0.22);
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 22px;
}

.wanted-hero-info .wanted-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(94, 23, 235, 0.12);
  color: var(--primary, #5e17eb);
  font-size: 12px;
  font-weight: 750;
  margin-bottom: 10px;
}

.wanted-hero-info h1 {
  font-size: 26px;
  font-weight: 850;
  color: var(--text-primary, #0f172a);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.wanted-hero-info p {
  font-size: 14px;
  color: var(--text-secondary, #475569);
  margin: 0;
  max-width: 680px;
  line-height: 1.55;
}

.btn-create-wanted {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary, #5e17eb) 0%, #4f46e5 100%);
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 750;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(94, 23, 235, 0.3);
  transition: all 0.2s ease;
}

.btn-create-wanted:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(94, 23, 235, 0.45);
}

/* ─── Wanted (İhtiyacım Var) Modern Filter Box ────────────────────── */
.wanted-filter-box {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 20px;
  padding: 22px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.wanted-filter-card-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Quick Pills Bar */
.wanted-quick-pills-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.wanted-quick-pills-bar::-webkit-scrollbar {
  height: 4px;
}

.wanted-quick-pills-bar::-webkit-scrollbar-thumb {
  background: var(--border-color, #cbd5e1);
  border-radius: 4px;
}

.wanted-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 650;
  color: var(--text-secondary, #64748b);
  background: var(--bg-secondary, #f8fafc);
  border: 1.5px solid var(--border-color, #e2e8f0);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.wanted-type-pill i {
  font-size: 12.5px;
  color: inherit;
  transition: color 0.2s ease;
}

.wanted-type-pill:hover {
  color: var(--primary, #5e17eb);
  border-color: rgba(94, 23, 235, 0.35);
  background: var(--primary-light, #f5f3ff);
  transform: translateY(-1px);
}

.wanted-type-pill:hover i {
  color: var(--primary, #5e17eb);
}

.wanted-type-pill.active {
  background: linear-gradient(135deg, #5e17eb 0%, #4338ca 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(94, 23, 235, 0.28);
}

.wanted-type-pill.active i {
  color: #ffffff;
}

/* Search Row */
.wanted-search-row {
  width: 100%;
}

.wanted-search-input-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.wanted-search-input-wrap .search-icon {
  position: absolute;
  left: 16px;
  color: var(--text-muted, #94a3b8);
  font-size: 15px;
  pointer-events: none;
}

.wanted-search-input {
  width: 100%;
  height: 46px;
  padding: 0 42px 0 46px;
  background: var(--bg-secondary, #f8fafc);
  border: 1.5px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  font-size: 14px;
  color: var(--text-primary, #0f172a);
  outline: none;
  transition: all 0.2s ease;
}

.wanted-search-input:focus {
  border-color: var(--primary, #5e17eb);
  background: var(--bg-card, #ffffff);
  box-shadow: 0 0 0 3px rgba(94, 23, 235, 0.12);
}

.wanted-search-input-wrap .search-clear-btn {
  position: absolute;
  right: 14px;
  background: none;
  border: none;
  color: var(--text-muted, #94a3b8);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.wanted-search-input-wrap .search-clear-btn:hover {
  color: var(--danger, #ef4444);
}

/* 5-Column Criteria Grid */
.wanted-filter-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.wanted-filter-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wanted-col-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary, #475569);
  letter-spacing: 0.2px;
}

.wanted-col-label i {
  color: inherit;
  font-size: 11px;
}

.wanted-select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  background: var(--bg-secondary, #f8fafc);
  border: 1.5px solid var(--border-color, #e2e8f0);
  border-radius: 11px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #0f172a);
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wanted-select:focus {
  border-color: var(--primary, #5e17eb);
  background: var(--bg-card, #ffffff);
  box-shadow: 0 0 0 3px rgba(94, 23, 235, 0.1);
}

/* Footer / Tags & Actions */
.wanted-filter-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color, #f1f5f9);
  flex-wrap: wrap;
}

.wanted-filter-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

.wanted-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--primary-light, #f5f3ff);
  color: var(--primary, #5e17eb);
  border: 1px solid rgba(94, 23, 235, 0.2);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.wanted-filter-tag button {
  background: none;
  border: none;
  color: var(--primary, #5e17eb);
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  display: inline-flex;
  align-items: center;
}

.wanted-filter-tag button:hover {
  color: var(--danger, #ef4444);
}

.wanted-clear-filters-link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--danger, #ef4444);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.wanted-clear-filters-link:hover {
  text-decoration: underline;
}

.wanted-filter-hint {
  font-size: 12.5px;
  color: var(--text-muted, #94a3b8);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wanted-filter-action-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-wanted-filter-submit {
  height: 42px;
  padding: 0 22px;
  border-radius: 11px;
  background: linear-gradient(135deg, #5e17eb 0%, #4338ca 100%);
  color: #ffffff;
  border: none;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 4px 14px rgba(94, 23, 235, 0.25);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-wanted-filter-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(94, 23, 235, 0.35);
}

.btn-wanted-filter-clear {
  height: 42px;
  padding: 0 16px;
  border-radius: 11px;
  background: var(--bg-secondary, #f8fafc);
  border: 1.5px solid var(--border-color, #e2e8f0);
  color: var(--text-secondary, #64748b);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-wanted-filter-clear:hover {
  color: var(--danger, #ef4444);
  border-color: var(--danger, #ef4444);
  background: #fef2f2;
}

/* Wanted Listings Grid */
.wanted-listings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.wanted-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

.wanted-card:hover {
  border-color: rgba(94, 23, 235, 0.3);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}

.wanted-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.wanted-user-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wanted-avatar-link {
  flex-shrink: 0;
}

.wanted-user-names {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wanted-display-name {
  font-size: 14.5px;
  font-weight: 750;
  color: var(--text-primary, #0f172a);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.wanted-display-name:hover {
  color: var(--primary, #5e17eb);
}

.wanted-user-handle {
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

.wanted-time-tag {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Chips Row */
.wanted-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.wanted-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
}

.brand-chip {
  background: rgba(94, 23, 235, 0.08);
  border: 1px solid rgba(94, 23, 235, 0.2);
  color: var(--primary, #5e17eb);
}

.type-chip {
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  color: var(--text-secondary, #475569);
}

.price-chip {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #059669;
}

.city-chip {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: #2563eb;
}

.wanted-card-content {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-primary, #1e293b);
  margin-bottom: 16px;
  background: var(--bg-secondary, #f8fafc);
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color, #f1f5f9);
}

.wanted-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-wanted-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.share-btn {
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  color: var(--text-secondary, #475569);
}

.share-btn:hover {
  background: var(--border-color, #e2e8f0);
  color: var(--text-primary, #0f172a);
}

.message-btn {
  background: var(--primary, #5e17eb);
  color: #ffffff !important;
}

.message-btn:hover {
  background: #4f46e5;
  transform: translateY(-1px);
}

.delete-btn {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger, #ef4444);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.delete-btn:hover {
  background: var(--danger, #ef4444);
  color: #ffffff;
}

.wanted-empty-box {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 20px;
  padding: 48px 24px;
  text-align: center;
}

.wanted-empty-box .empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: rgba(94, 23, 235, 0.08);
  color: var(--primary, #5e17eb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 16px;
}

/* Dark Mode Overrides */
[data-theme="dark"] .wanted-hero-card {
  background: linear-gradient(135deg, rgba(94, 23, 235, 0.2) 0%, rgba(30, 41, 59, 0.4) 100%);
  border-color: rgba(94, 23, 235, 0.3);
}

[data-theme="dark"] .wanted-card-content,
[data-theme="dark"] .type-chip,
[data-theme="dark"] .wanted-type-pill,
[data-theme="dark"] .wanted-search-input,
[data-theme="dark"] .wanted-select,
[data-theme="dark"] .btn-wanted-filter-clear {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(255, 255, 255, 0.09);
  color: #f1f5f9;
}

[data-theme="dark"] .wanted-type-pill:hover {
  background: rgba(94, 23, 235, 0.2);
  color: #c4b5fd;
  border-color: rgba(94, 23, 235, 0.5);
}

[data-theme="dark"] .wanted-type-pill.active {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #ffffff;
}

[data-theme="dark"] .wanted-filter-footer {
  border-top-color: rgba(255, 255, 255, 0.06);
}

@media (max-width: 1024px) {
  .wanted-filter-grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .wanted-hero-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 18px;
  }
  .btn-create-wanted {
    width: 100%;
    justify-content: center;
  }
  .wanted-filter-grid-5 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .wanted-filter-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .wanted-filter-action-btns {
    width: 100%;
  }
  .btn-wanted-filter-submit {
    flex: 1;
    justify-content: center;
  }
  .btn-wanted-filter-clear {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .wanted-filter-grid-5 {
    grid-template-columns: 1fr;
  }
  .wanted-filter-box {
    padding: 16px;
    border-radius: 16px;
  }
}

/* ─── Yardım & Sistem Rehberi Modal Stilleri ────────────────────────── */
.help-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
}

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

.help-modal {
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transform: scale(0.96);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.help-modal-overlay.open .help-modal {
  transform: scale(1);
}

.help-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  background: var(--bg-card, #ffffff);
}

.help-head-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.help-head-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(94, 23, 235, 0.1);
  color: var(--primary, #5e17eb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.help-modal-title {
  font-size: 19px;
  font-weight: 850;
  color: var(--text-primary, #0f172a);
  margin: 0 0 3px;
}

.help-modal-sub {
  font-size: 12.5px;
  color: var(--text-secondary, #64748b);
  margin: 0;
}

.help-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  color: var(--text-secondary, #64748b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.help-modal-close:hover {
  background: var(--border-color, #e2e8f0);
  color: var(--text-primary, #0f172a);
}

/* Search Bar */
.help-search-bar {
  position: relative;
  padding: 14px 26px;
  background: var(--bg-secondary, #f8fafc);
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.help-search-bar i.fa-magnifying-glass {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted, #94a3b8);
  font-size: 14px;
}

.help-search-bar input {
  width: 100%;
  height: 42px;
  padding: 0 38px;
  background: var(--bg-card, #ffffff);
  border: 1.5px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--text-primary, #0f172a);
  outline: none;
  transition: all 0.2s ease;
}

.help-search-bar input:focus {
  border-color: var(--primary, #5e17eb);
  box-shadow: 0 0 0 3px rgba(94, 23, 235, 0.1);
}

.help-search-bar button#helpSearchClear {
  position: absolute;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  font-size: 14px;
}

/* Modal Body / FAQ List */
.help-modal-body {
  padding: 20px 26px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.help-group-title {
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #64748b);
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}

.help-group-title i {
  color: var(--primary, #5e17eb);
}

.help-faq-item {
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 14px;
  background: var(--bg-card, #ffffff);
  margin-bottom: 10px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.help-faq-q {
  width: 100%;
  padding: 14px 18px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  font-size: 14px;
  font-weight: 750;
  color: var(--text-primary, #0f172a);
  cursor: pointer;
}

.help-faq-q i {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  transition: transform 0.2s ease;
}

.help-faq-item.active .help-faq-q i {
  transform: rotate(180deg);
  color: var(--primary, #5e17eb);
}

.help-faq-a {
  display: none;
  padding: 0 18px 16px;
  font-size: 13px;
  color: var(--text-secondary, #475569);
  line-height: 1.6;
}

.help-faq-item.active .help-faq-a {
  display: block;
}

/* Footer Contact Box */
.help-modal-foot-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 26px;
  background: linear-gradient(135deg, rgba(94, 23, 235, 0.08) 0%, rgba(59, 130, 246, 0.06) 100%);
  border-top: 1px solid var(--border-color, #e2e8f0);
}

.help-contact-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary, #5e17eb);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.help-contact-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.help-contact-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}

.help-contact-mail-link {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--primary, #5e17eb);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.help-contact-mail-link:hover {
  text-decoration: underline;
}

.btn-copy-mail {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-copy-mail:hover {
  background: var(--primary, #5e17eb);
  color: #ffffff;
  border-color: var(--primary, #5e17eb);
}

/* Dark Mode Overrides */
[data-theme="dark"] .help-modal-overlay {
  background: rgba(0, 0, 0, 0.75);
}

[data-theme="dark"] .help-faq-item,
[data-theme="dark"] .help-search-bar input {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
}

[data-theme="dark"] .btn-copy-mail {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
}

@media (max-width: 600px) {
  .help-modal-foot-contact {
    flex-direction: column;
    align-items: flex-start;
  }
  .btn-copy-mail {
    width: 100%;
    justify-content: center;
  }
}

.maui-post-fab {
  display: none !important;
}

/* ─── Hafif Morumsu Tema Renginde Araç SVG & Kart Stilleri ───────────── */
.corporate-qcard {
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.corporate-qcard:hover {
  border-color: rgba(94, 23, 235, 0.35) !important;
  box-shadow: 0 8px 24px rgba(94, 23, 235, 0.12) !important;
}

[data-theme="dark"] .corporate-qcard:hover {
  border-color: rgba(167, 139, 250, 0.45) !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.25) !important;
}

.qcard-icon.corporate-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12) 0%, rgba(94, 23, 235, 0.07) 100%);
  color: #5e17eb !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(94, 23, 235, 0.20);
  box-shadow: 0 4px 14px rgba(94, 23, 235, 0.10);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}

.corp-vehicle-svg {
  display: block;
  stroke: currentColor !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.corporate-qcard:hover .qcard-icon.corporate-icon {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.22) 0%, rgba(94, 23, 235, 0.15) 100%);
  border-color: #5e17eb;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(94, 23, 235, 0.22);
}

.corporate-qcard:hover .corp-vehicle-svg {
  transform: scale(1.1);
}

/* Koyu Mod (Dark Mode): Hafif Morumsu Lila & Derin Mor */
[data-theme="dark"] .qcard-icon.corporate-icon {
  background: rgba(124, 58, 237, 0.18);
  color: #c4b5fd !important;
  border: 1px solid rgba(167, 139, 250, 0.30);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.20);
}

[data-theme="dark"] .qcard-icon.corporate-icon .corp-vehicle-svg {
  stroke: #c4b5fd !important;
}

[data-theme="dark"] .corporate-qcard:hover .qcard-icon.corporate-icon {
  background: rgba(124, 58, 237, 0.28);
  border-color: #a78bfa;
  box-shadow: 0 6px 22px rgba(124, 58, 237, 0.35);
}

/* Sidebar & Başlık Corporate SVGs — Hafif Morumsu Tema */
.nav-corp-svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  color: #7c3aed;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s ease, color 0.2s ease;
}

[data-theme="dark"] .nav-corp-svg {
  color: #c4b5fd;
}

.nav-link.active .nav-corp-svg {
  color: #ffffff !important;
}

.nav-link:hover .nav-corp-svg {
  transform: scale(1.12);
  color: #5e17eb;
}

[data-theme="dark"] .nav-link:hover .nav-corp-svg {
  color: #ddd6fe;
}

/* Compose Modal Corporate SVGs — Hafif Morumsu Tema */
.compose-corp-svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  color: #7c3aed;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  transition: color 0.18s ease;
}

[data-theme="dark"] .compose-corp-svg {
  color: #c4b5fd;
}

.compose-type.active .compose-corp-svg {
  color: #ffffff !important;
}

/* ─── Sidebar Menü & Butonlar Arası %5 Boşluk ───────────────────────── */
body.modern-ui .sidebar-nav .nav-item,
.sidebar-nav .nav-item {
  margin-bottom: 5% !important;
}

body.modern-ui .sidebar-nav .nav-item:last-child,
.sidebar-nav .nav-item:last-child {
  margin-bottom: 0 !important;
}

/* ─── Sigorta Sayfasında Sağ Paneli Kaldırma ─────────────────────────── */
body.insurance-page .right-panel {
  display: none !important;
}

body.insurance-page .main-content {
  border-right: none !important;
}

/* ─── Mobil Header: Profil Resmi Butonu, Ortalı Logo, Arama Popup & Çekmece Menü ─── */
@media (max-width: 768px) {
  .mobile-top-header {
    position: relative !important;
  }
  .m-header-avatar-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 2px solid var(--accent, #5e17eb) !important;
    padding: 0 !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  .m-header-avatar-btn:active {
    transform: scale(0.92);
  }
  .m-header-avatar-btn img,
  .m-header-avatar-btn .avatar,
  .m-header-avatar-btn .avatar-xs,
  .m-header-avatar-btn .avatar-sm {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
  }
  .m-guest-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: var(--bg-secondary, #f3f4f6) !important;
    color: var(--text-secondary, #64748b) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
  }
  .m-header-logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    z-index: 1 !important;
  }
  .m-logo-img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    object-fit: contain !important;
    display: block !important;
  }
  .m-logo-text {
    display: none !important;
  }
  .sidebar.mobile-open,
  body.sidebar-open .sidebar {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 10025 !important;
  }
  .sidebar-backdrop.open,
  body.sidebar-open .sidebar-backdrop {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 10020 !important;
  }

  /* ── Mobilde Sol Menü Text ve İkon Kontrast Güvencesi (Light Mod #0f1419, Dark Mod #e2e8f0) ── */
  body.modern-ui .sidebar,
  .sidebar {
    color: #0f1419 !important;
  }
  body.modern-ui .sidebar .sidebar-logo span,
  body.modern-ui .sidebar .sidebar-logo-text,
  .sidebar .sidebar-logo span,
  .sidebar .sidebar-logo-text {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-width: none !important;
    color: #0f1419 !important;
    -webkit-text-fill-color: #0f1419 !important;
    background: none !important;
  }
  body.modern-ui .sidebar .sidebar-nav .nav-link,
  .sidebar .sidebar-nav .nav-link {
    color: #0f1419 !important;
  }
  body.modern-ui .sidebar .sidebar-nav .nav-link i,
  .sidebar .sidebar-nav .nav-link i {
    color: #475569 !important;
  }
  body.modern-ui .sidebar .sidebar-nav .nav-link .nav-label,
  .sidebar .sidebar-nav .nav-link .nav-label {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-width: none !important;
    color: #0f1419 !important;
  }
  body.modern-ui .sidebar .sidebar-nav .nav-link.active,
  .sidebar .sidebar-nav .nav-link.active {
    background: #5e17eb !important;
    color: #ffffff !important;
  }
  body.modern-ui .sidebar .sidebar-nav .nav-link.active i,
  .sidebar .sidebar-nav .nav-link.active i,
  body.modern-ui .sidebar .sidebar-nav .nav-link.active .nav-label,
  .sidebar .sidebar-nav .nav-link.active .nav-label {
    color: #ffffff !important;
  }
  body.modern-ui .sidebar .sidebar-user .user-info .name,
  .sidebar .sidebar-user .user-info .name {
    color: #0f1419 !important;
    display: block !important;
  }
  body.modern-ui .sidebar .sidebar-user .user-info .handle,
  .sidebar .sidebar-user .user-info .handle {
    color: #64748b !important;
    display: block !important;
  }
  body.modern-ui .sidebar .sidebar-user .fa-ellipsis,
  .sidebar .sidebar-user .fa-ellipsis {
    color: #64748b !important;
    display: block !important;
  }

  [data-theme="dark"] body.modern-ui .sidebar,
  [data-theme="dark"] .sidebar {
    color: #e2e8f0 !important;
  }
  [data-theme="dark"] body.modern-ui .sidebar .sidebar-logo span,
  [data-theme="dark"] body.modern-ui .sidebar .sidebar-logo-text,
  [data-theme="dark"] .sidebar .sidebar-logo span,
  [data-theme="dark"] .sidebar .sidebar-logo-text {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  [data-theme="dark"] body.modern-ui .sidebar .sidebar-nav .nav-link,
  [data-theme="dark"] .sidebar .sidebar-nav .nav-link {
    color: #e2e8f0 !important;
  }
  [data-theme="dark"] body.modern-ui .sidebar .sidebar-nav .nav-link i,
  [data-theme="dark"] .sidebar .sidebar-nav .nav-link i {
    color: #94a3b8 !important;
  }
  [data-theme="dark"] body.modern-ui .sidebar .sidebar-nav .nav-link .nav-label,
  [data-theme="dark"] .sidebar .sidebar-nav .nav-link .nav-label {
    color: #e2e8f0 !important;
  }
  [data-theme="dark"] body.modern-ui .sidebar .sidebar-nav .nav-link.active,
  [data-theme="dark"] .sidebar .sidebar-nav .nav-link.active {
    background: #5e17eb !important;
    color: #ffffff !important;
  }
  [data-theme="dark"] body.modern-ui .sidebar .sidebar-nav .nav-link.active i,
  [data-theme="dark"] .sidebar .sidebar-nav .nav-link.active i,
  [data-theme="dark"] body.modern-ui .sidebar .sidebar-nav .nav-link.active .nav-label,
  [data-theme="dark"] .sidebar .sidebar-nav .nav-link.active .nav-label {
    color: #ffffff !important;
  }
  [data-theme="dark"] body.modern-ui .sidebar .sidebar-user .user-info .name,
  [data-theme="dark"] .sidebar .sidebar-user .user-info .name {
    color: #f1f5f9 !important;
  }
  [data-theme="dark"] body.modern-ui .sidebar .sidebar-user .user-info .handle,
  [data-theme="dark"] .sidebar .sidebar-user .user-info .handle {
    color: #94a3b8 !important;
  }
  [data-theme="dark"] body.modern-ui .sidebar .sidebar-user .fa-ellipsis,
  [data-theme="dark"] .sidebar .sidebar-user .fa-ellipsis {
    color: #94a3b8 !important;
  }
}

/* ============================================================
   UNIVERSAL CONFIRM & ALERT POPUP MODAL (BP MODAL)
   ============================================================ */
.bp-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100050 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
  box-sizing: border-box;
}

.bp-modal-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.bp-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 25, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

[data-theme="dark"] .bp-modal-backdrop {
  background: rgba(0, 0, 0, 0.76);
}

.bp-modal-box {
  position: relative;
  width: 100%;
  max-width: 420px;
  border-radius: 24px;
  background: #ffffff;
  color: #0f1419;
  box-shadow: 0 24px 60px rgba(15, 20, 25, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.06);
  padding: 28px 24px 22px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: scale(0.92) translateY(14px);
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease;
  z-index: 2;
}

.bp-modal-overlay.active .bp-modal-box {
  transform: scale(1) translateY(0);
}

[data-theme="dark"] .bp-modal-box {
  background: #16181c;
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.bp-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--bg-secondary, #f1f3f5);
  color: var(--text-secondary, #64748b);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.15s ease;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

[data-theme="dark"] .bp-modal-close {
  background: #242938;
  color: #94a3b8;
}

.bp-modal-close:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  transform: scale(1.06);
}

.bp-modal-icon-badge {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.bp-modal-icon-badge.danger {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1.5px solid rgba(239, 68, 68, 0.25);
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.16);
}

.bp-modal-icon-badge.warning {
  background: rgba(245, 158, 11, 0.14);
  color: #f59e0b;
  border: 1.5px solid rgba(245, 158, 11, 0.28);
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.16);
}

.bp-modal-icon-badge.primary,
.bp-modal-icon-badge.info {
  background: rgba(94, 23, 235, 0.12);
  color: #5e17eb;
  border: 1.5px solid rgba(94, 23, 235, 0.25);
  box-shadow: 0 0 24px rgba(94, 23, 235, 0.16);
}

.bp-modal-icon-badge.success {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1.5px solid rgba(16, 185, 129, 0.25);
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.16);
}

.bp-modal-title {
  font-size: 19.5px;
  font-weight: 800;
  margin: 0 0 8px 0;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: inherit;
}

.bp-modal-message {
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 22px 0;
  color: var(--text-secondary, #64748b);
  white-space: pre-line;
}

[data-theme="dark"] .bp-modal-message {
  color: #94a3b8;
}

.bp-modal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.bp-modal-btn {
  flex: 1;
  height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.12s ease, filter 0.15s ease, background 0.15s ease;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

.bp-modal-btn:active {
  transform: scale(0.96);
}

.bp-btn-cancel {
  background: var(--bg-secondary, #f1f3f5);
  color: var(--text-primary, #0f1419);
  border: 1px solid var(--border-color, #e5e7eb);
}

[data-theme="dark"] .bp-btn-cancel {
  background: #242938;
  color: #f1f5f9;
  border-color: #2f3336;
}

.bp-btn-cancel:hover {
  background: rgba(0, 0, 0, 0.07);
}

[data-theme="dark"] .bp-btn-cancel:hover {
  background: #2d3345;
}

.bp-btn-confirm.danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

.bp-btn-confirm.danger:hover {
  filter: brightness(1.06);
}

.bp-btn-confirm.primary {
  background: linear-gradient(135deg, #7c3aed 0%, #5e17eb 100%);
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(94, 23, 235, 0.35);
}

.bp-btn-confirm.primary:hover {
  filter: brightness(1.06);
}

.bp-btn-confirm.success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.bp-btn-confirm.success:hover {
  filter: brightness(1.06);
}

.bp-btn-confirm.warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}

.bp-btn-confirm.warning:hover {
  filter: brightness(1.06);
}

.bp-modal-actions.single .bp-modal-btn {
  width: 100%;
  flex: 1;
}

/* ==========================================================================
   MOBİL UYUMLULUK
   ========================================================================== */

/* iOS Safari, yazı boyutu 16px'ten küçük bir form alanına odaklanınca sayfayı
   yakınlaştırır ve geri uzaklaştırmaz. Onlarca bileşen kuralı 11–15px'i daha
   güçlü seçicilerle verdiği için burada !important şart. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* İki sütunlu form satırları: dosya seçici gibi geniş içerik sütunu ekrandan
   taşırmasın, dar ekranda alanlar alt alta dizilsin (ör. /groups/create) */
.form-row > * {
  min-width: 0;
}

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

/* Tarayıcının varsayılan dosya seçici genişliği dar kartlardan taşar */
input[type="file"] {
  max-width: 100%;
}

/* Mobilde bildirim paneli tam ekran açılır: sabit üst header'ın (z-index 1000)
   altında kalıp başlığı ve kapatma butonu görünmez olmasın */
@media (max-width: 768px) {
  .notif-panel {
    z-index: 10030;
    height: 100vh;
    height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* modern.css sonra yüklenip aynı özgüllükte 18px verdiği için html ön eki */
  html body.modern-ui .notif-panel {
    border-radius: 0;
  }

  .notif-panel-backdrop {
    z-index: 10029;
  }
}

/* Hata sayfaları (404 / 500) — ana layout içinde render edilir */
.error-page {
  max-width: 520px;
  margin: 0 auto;
  padding: 56px 20px 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.error-code {
  font-size: clamp(56px, 16vw, 88px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent, #5e17eb);
}

.error-icon {
  font-size: 30px;
  color: var(--text-secondary, #68707b);
}

.error-title {
  margin: 6px 0 0;
  font-size: 22px;
  color: var(--text-primary, #0f1419);
}

.error-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary, #68707b);
}

.error-trace {
  box-sizing: border-box;
  width: 100%;
  margin: 8px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--border-color, #e1e5ea);
  border-radius: 10px;
  background: var(--bg-secondary, #f5f6f8);
  color: var(--text-primary, #0f1419);
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.error-home-btn {
  margin-top: 12px;
}