/* ================================================================
   COMPONENTS.CSS — TurkSesli Premium Components
   Modals, Toasts, DM, Toolbar Popups, Badges, etc.
   ================================================================ */

/* ── Toolbar popup (emoji / gif) ── */
.toolbar-popup {
    position: absolute; bottom: 50px; left: 8px;
    background: var(--glass-heavy);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    padding: 10px; display: none;
    width: 252px; max-height: 280px; overflow-y: auto;
    z-index: 200;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.emoji-item { font-size: 22px; cursor: pointer; display: inline-block; padding: 5px; transition: transform 0.15s var(--ease-out); border-radius: var(--r-sm); }
.emoji-item:hover { transform: scale(1.35); background: rgba(255,255,255,0.06); }
#gif-picker { display: none; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 8px; }
.gif-item { width: 100%; aspect-ratio: 1/1; object-fit: cover; cursor: pointer; border-radius: var(--r-sm); transition: all 0.2s; border: 1px solid transparent; }
.gif-item:hover { transform: scale(1.04); border-color: var(--border-mid); box-shadow: 0 4px 12px rgba(0,0,0,0.4); }

/* ── DM Boxes ── */
.dm-box {
    position: fixed; bottom: 0; width: 255px;
    background: var(--glass-heavy);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-mid);
    border-top-left-radius: var(--r-md); border-top-right-radius: var(--r-md);
    display: flex; flex-direction: column;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.5);
    z-index: 1000; overflow: hidden;
    transition: transform 0.28s var(--ease-out);
}
.dm-box.collapsed { transform: translateY(calc(100% - 40px)); }
.dm-header {
    background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(6,182,212,0.15));
    border-bottom: 1px solid rgba(59,130,246,0.2);
    color: var(--text-primary); padding: 0 12px; height: 40px;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; font-size: 12px; font-weight: 600; font-family: var(--font-body);
}
.dm-header:hover { background: linear-gradient(135deg, rgba(59,130,246,0.28), rgba(6,182,212,0.22)); }
.dm-body {
    height: 230px; padding: 10px; overflow-y: auto;
    background: rgba(2,5,16,0.7);
    display: flex; flex-direction: column;
}
.dm-footer {
    padding: 7px; background: rgba(4,9,22,0.8);
    border-top: 1px solid var(--border-faint);
    display: flex; gap: 5px;
}
.dm-footer input {
    flex: 1; min-width: 0; padding: 7px 10px;
    border-radius: var(--r-sm); border: 1px solid var(--border-soft);
    background: rgba(8,14,30,0.9); color: var(--text-primary);
    font-size: 12px; outline: none; font-family: var(--font-body);
    transition: border-color 0.2s;
}
.dm-footer input:focus { border-color: rgba(59,130,246,0.4); }

/* ── Modal System ── */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    display: flex; justify-content: center; align-items: center;
    z-index: 2000;
}
.modal-content {
    background: var(--glass-heavy);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    width: 100%; max-width: 400px;
    border-radius: var(--r-xl);
    border: 1px solid var(--border-mid);
    box-shadow: var(--shadow-lg), 0 0 60px rgba(59,130,246,0.08), inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
    animation: modalIn 0.28s var(--ease-out);
}
@keyframes modalIn { from { transform: scale(0.88) translateY(16px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }

.modal-header {
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--border-faint);
    display: flex; justify-content: space-between; align-items: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
}
.modal-header h3 {
    margin: 0; font-size: 15px; color: var(--text-primary);
    display: flex; align-items: center; gap: 9px;
    font-family: var(--font-display); font-weight: 700; letter-spacing: -0.3px;
}
.close-btn {
    width: 28px; height: 28px;
    background: transparent; border: 1px solid transparent;
    border-radius: var(--r-sm); color: var(--text-muted);
    font-size: 13px; cursor: pointer; transition: all 0.18s;
    display: flex; align-items: center; justify-content: center;
}
.close-btn:hover { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.25); color: #f87171; }
.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }

/* ── Icon Action Buttons (legacy compat) ── */
.icon-action-btn {
    background: transparent; border: 1px solid transparent;
    width: 28px; height: 28px; border-radius: var(--r-sm);
    display: flex; justify-content: center; align-items: center;
    font-size: 13px; cursor: pointer; color: var(--text-muted);
    padding: 0; transition: all 0.2s var(--ease-io);
}
.icon-action-btn:hover {
    background: rgba(255,255,255,0.07); border-color: var(--border-soft); color: var(--text-primary);
}

/* ── Toast Notifications ── */
#toast-container {
    position: fixed; top: 18px; right: 18px; z-index: 9999;
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.custom-toast {
    background: var(--glass-heavy);
    backdrop-filter: blur(20px);
    color: var(--text-primary); padding: 13px 16px;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(255,255,255,0.04) inset;
    font-size: 13px; font-weight: 500;
    display: flex; align-items: center; gap: 11px;
    animation: toastIn 0.35s var(--ease-out), toastOut 0.35s ease 4.65s forwards;
    min-width: 240px; max-width: 340px;
    border-left: 3px solid var(--sapphire);
    font-family: var(--font-body);
    pointer-events: all;
}
.custom-toast:hover { animation-play-state: paused; }
.custom-toast.toast-success { border-left-color: var(--success); }
.custom-toast.toast-error   { border-left-color: var(--danger); }
.custom-toast.toast-warning { border-left-color: var(--warning); }
.custom-toast.toast-info    { border-left-color: var(--cyan); }
.toast-icon { font-size: 18px; flex-shrink: 0; }
@keyframes toastIn  { from { transform: translateX(110%) scale(0.9); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } }
@keyframes toastOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.9); } }

/* ── Marquee ── */
.marquee-wrapper {
    background: rgba(2,5,16,0.9);
    border-bottom: 1px solid rgba(239,68,68,0.25);
    color: var(--text-primary); padding: 7px 0;
    display: flex; align-items: center; overflow: hidden;
    position: relative; z-index: 10; width: 100%; flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(239,68,68,0.1);
    backdrop-filter: blur(8px);
}
.marquee-label {
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: #fff; font-weight: 800; padding: 7px 14px;
    font-size: 11px; text-transform: uppercase;
    position: absolute; left: 0; z-index: 2;
    box-shadow: 4px 0 12px rgba(0,0,0,0.4);
    display: flex; align-items: center; gap: 5px;
    font-family: var(--font-display); letter-spacing: 0.5px;
}
.marquee-content {
    white-space: nowrap; font-weight: 500; font-size: 13px;
    animation: marqueeScroll 28s linear infinite;
    padding-left: 100%; color: var(--text-secondary);
    font-family: var(--font-body);
}
.marquee-content:hover { animation-play-state: paused; cursor: default; }
@keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* ── Light Theme Overrides ── */
body.light-theme .toolbar-popup { background: rgba(255,255,255,0.97); border-color: rgba(0,0,0,0.1); }
body.light-theme .modal-content { background: rgba(255,255,255,0.97); border-color: rgba(0,0,0,0.1); }
body.light-theme .modal-header h3 { color: #0f172a; }
body.light-theme .modal-header { background: linear-gradient(180deg, rgba(0,0,0,0.02) 0%, transparent 100%); border-bottom-color: rgba(0,0,0,0.07); }
body.light-theme .close-btn { color: #94a3b8; }
body.light-theme .custom-toast { background: rgba(255,255,255,0.97); color: #0f172a; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
body.light-theme .marquee-wrapper { background: rgba(255,255,255,0.92); border-bottom-color: rgba(239,68,68,0.2); }
body.light-theme .marquee-content { color: #475569; }
body.light-theme .dm-box { background: rgba(255,255,255,0.96); border-color: rgba(0,0,0,0.1); }
body.light-theme .dm-header { background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(6,182,212,0.08)); }
body.light-theme .dm-body { background: #f8fafc; }
body.light-theme .dm-footer { background: #f1f5f9; border-top-color: rgba(0,0,0,0.07); }
body.light-theme .dm-footer input { background: #fff; border-color: rgba(0,0,0,0.1); color: #0f172a; }

/* ================================================================
   MOBİL COMPONENT DÜZELTMELER
   ================================================================ */
@media (max-width: 768px) {
    /* Profil modal tam genişlik input'lar */
    .modal-body .input-group input,
    .modal-body .input-group select {
        font-size: 16px; /* iOS zoom önleme */
        padding: 13px 14px;
    }

    /* Profil modal butonlar */
    .btn-primary-auth, .btn-secondary-auth { padding: 14px; font-size: 15px; }

    /* Mikrofon ve voice butonlar büyük */
    .voice-btn { padding: 11px 10px !important; font-size: 12px !important; }

    /* Right panel içindeki kartlar düzgün padding */
    .right-panel-card { border-radius: 0 !important; }
    .right-panel-title { padding: 10px 16px 8px; font-size: 9px; }
}
/* ── Mobilde toast küçük ── */
@media (max-width: 768px) {
    #toast-container {
        top: 8px; right: 8px; left: auto;
        bottom: auto; max-width: 220px;
    }
    .custom-toast {
        font-size: 11px; padding: 8px 11px;
        min-width: unset; max-width: 220px;
        border-radius: 8px;
        gap: 7px;
    }
    .toast-icon { font-size: 14px; }
}