/* ═══════════════════════════════════════════════════════════════════
   MVS SEARCH OVERLAY — Bottom Sheet (mobile) + Centered Modal (desktop)
   İç dizilim mobile + desktop'ta BİREBİR aynı (referans tasarım).
   Sadece .mvs-overlay container'ı responsive davranır; iç children
   media query DIŞINDA tek tanım.
   Revizyon: 2026-05-24
   ═══════════════════════════════════════════════════════════════════ */

.mvs-backdrop,
.mvs-overlay {
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Universal box-sizing — ama font-family ASLA: Font Awesome (.fas, .fa-*)
   kendi font-family'sini koruyabilsin, yoksa ikonlar boş gelir.        */
.mvs-overlay *,
.mvs-overlay *::before,
.mvs-overlay *::after {
    box-sizing: border-box;
}

/* ════════════════════════════════════════════════════════════════
   mobile.css içinde TÜM butonlara uygulanan global override'ları
   (display:none!, min-width:44px!, padding:12px 24px!) MVS
   icon-button'larında sıfırla. Width/height KENDİ kuralında kalır
   (specificity zaten yetiyor).
   ════════════════════════════════════════════════════════════════ */
.mvs-overlay button {
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0;
    line-height: 1;
    box-sizing: border-box;
}
/* Icon-only butonlar — daire/kare şekli korunsun (mobile.css'in
   button{min-height:44px} kuralı bu butonların oranını bozmasın). */
.mvs-overlay .mvs-close,
.mvs-overlay .mvs-back,
.mvs-overlay .mvs-clear,
.mvs-overlay .mvs-recent-remove {
    min-height: 0 !important;
    flex: 0 0 auto !important;
}
/* Icon-button içerikleri (Font Awesome <i>) — flex children olarak
   ortaya hizalansın, mobile.css'in olası i overrides'ından korunsun */
.mvs-overlay button > i.fas,
.mvs-overlay button > i.far,
.mvs-overlay button > i.fa-solid,
.mvs-overlay button > i.fa-regular {
    flex: 0 0 auto;
    line-height: 1;
}

/* ─── Backdrop ──────────────────────────────────────────────── */
.mvs-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 10, 7, 0.48);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s cubic-bezier(.16, 1, .3, 1),
                visibility 0s linear .28s;
}
.mvs-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .28s cubic-bezier(.16, 1, .3, 1),
                visibility 0s linear 0s;
}
.mvs-backdrop[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   OVERLAY CONTAINER — Desktop default: centered modal (DEĞİŞMEZ)
   ═══════════════════════════════════════════════════════════════ */
.mvs-overlay {
    position: fixed;
    z-index: 9999;
    background: rgba(255, 253, 248, 0.98);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    display: flex;
    flex-direction: column;
    color: #2C1810;

    /* Desktop: centered modal */
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 16px));
    width: min(640px, calc(100vw - 32px));
    max-width: 640px;
    max-height: min(80vh, 720px);
    min-height: 400px;
    height: auto;

    border-radius: 20px;
    border: 1px solid rgba(184, 115, 51, 0.18);
    box-shadow:
        0 24px 64px -16px rgba(15, 10, 7, 0.32),
        0 8px 24px -8px rgba(15, 10, 7, 0.16);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transition: transform .32s cubic-bezier(.16, 1, .3, 1),
                opacity .25s ease,
                visibility 0s linear .32s;
}

.mvs-overlay.is-open {
    transform: translate(-50%, -50%);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .32s cubic-bezier(.16, 1, .3, 1),
                opacity .25s ease,
                visibility 0s linear 0s;
}

.mvs-overlay[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE (≤768px) — Bottom Sheet (yarım pencere)
   SADECE container'ın position/transform/size değişir.
   İç children media query DIŞINDA tek tanım → mobile+desktop AYNI.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .mvs-overlay {
        /* Alta yapışık bottom sheet */
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: translateY(100%);

        width: 100vw;
        max-width: 100vw;
        max-height: 78vh;       /* yarım pencere — fullscreen DEĞİL */
        min-height: 320px;
        height: auto;

        /* SADECE üst köşeler yuvarlak */
        border-radius: 20px 20px 0 0;
        border: 0;
        border-top: 1px solid rgba(184, 115, 51, 0.18);
        box-shadow:
            0 -12px 32px -8px rgba(15, 10, 7, 0.24),
            0 -4px 16px -4px rgba(15, 10, 7, 0.10);

        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .mvs-overlay.is-open {
        transform: translateY(0);
    }

    /* Drag handle (mobile-only pseudo) */
    .mvs-overlay::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: rgba(184, 115, 51, 0.32);
        border-radius: 99px;
        pointer-events: none;
        z-index: 2;
    }

    /* Header padding-top biraz fazla (handle için yer) */
    .mvs-header {
        padding-top: 22px !important;
    }

    /* Back arrow YOK — sadece close X */
    .mvs-back {
        display: none !important;
    }
    .mvs-close {
        display: inline-flex !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   İÇ DİZİLİM — Mobile + Desktop ORTAK (media query DIŞINDA)
   Referans tasarımının kusursuz halini koru.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Header ─── */
.mvs-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px 12px;
    border-bottom: 1px solid rgba(184, 115, 51, 0.10);
}

.mvs-back {
    display: none;  /* Default gizli (back arrow her ekranda kapalı) */
    width: 36px;
    height: 36px;
    border: 0;
    background: rgba(184, 115, 51, 0.06);
    border-radius: 99px;
    color: #2C1810;
    font-size: 14px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.mvs-back:hover,
.mvs-back:active {
    background: rgba(184, 115, 51, 0.16);
}

.mvs-title {
    flex: 1 1 auto;
    font-size: 16px;
    font-weight: 700;
    color: #0F0A07;
    margin: 0;
    letter-spacing: -0.01em;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Playfair Display', Georgia, serif;
}

.mvs-close {
    width: 36px;
    height: 36px;
    border: 0;
    background: rgba(184, 115, 51, 0.06);
    border-radius: 99px;
    color: #2C1810;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.mvs-close:hover,
.mvs-close:active {
    background: rgba(184, 115, 51, 0.16);
}

/* ─── Big search input — premium yuvarlak hatlı ─── */
.mvs-search-big {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    margin: 12px 20px 4px;
    border: 2px solid rgba(184, 115, 51, 0.22);
    border-radius: 14px;
    background: #FFFEF9;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mvs-search-big:focus-within {
    border-color: #B87333;
    box-shadow: 0 0 0 4px rgba(184, 115, 51, 0.10);
}
.mvs-search-icon {
    color: #B87333;
    font-size: 16px;
    flex: 0 0 auto;
}
.mvs-search-big input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    outline: 0;
    font-size: 16px;     /* iOS no-zoom */
    line-height: 1.4;
    color: #0F0A07;
    font-family: inherit;
}
.mvs-search-big input::placeholder {
    color: #6B5B4F;
    font-style: italic;
}
.mvs-clear {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border: 0;
    background: rgba(184, 115, 51, 0.10);
    border-radius: 99px;
    color: #6B5B4F;
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease;
}
.mvs-clear[hidden] { display: none !important; }
.mvs-clear:hover { background: rgba(184, 115, 51, 0.18); }

/* ─── Chips ─── */
.mvs-chips {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 8px 20px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.mvs-chips::-webkit-scrollbar { display: none; }

.mvs-chip {
    flex: 0 0 auto;
    padding: 6px 14px;
    min-height: 32px;
    border: 1px solid rgba(184, 115, 51, 0.22);
    background: transparent;
    border-radius: 99px;
    color: #6B5B4F;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease,
                color .15s ease,
                border-color .15s ease,
                box-shadow .15s ease;
}
.mvs-chip i { font-size: 11px; }
.mvs-chip:hover {
    border-color: #B87333;
    color: #B87333;
}
.mvs-chip.is-active {
    background: linear-gradient(135deg, #B87333 0%, #8B5A2B 100%);
    color: #FFFEF9;
    border-color: #B87333;
    box-shadow: 0 2px 8px rgba(184, 115, 51, 0.24);
}

/* ─── Body (scroll area) ─── */
.mvs-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 8px 20px 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(184, 115, 51, 0.32) transparent;
}
.mvs-body::-webkit-scrollbar { width: 4px; }
.mvs-body::-webkit-scrollbar-thumb {
    background: rgba(184, 115, 51, 0.32);
    border-radius: 99px;
}

/* ─── Section label ─── */
.mvs-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #B87333;
    padding: 12px 4px 6px;
}

/* ─── Recent searches ─── */
.mvs-recent-item {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}
.mvs-recent-btn {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    min-height: 44px;
    border: 0;
    background: transparent;
    border-radius: 10px;
    color: #2C1810;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease;
}
.mvs-recent-btn:hover,
.mvs-recent-btn:active {
    background: rgba(184, 115, 51, 0.08);
}
.mvs-recent-btn i {
    color: #6B5B4F;
    font-size: 13px;
    flex: 0 0 16px;
}
.mvs-recent-btn span {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mvs-recent-remove {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #6B5B4F;
    border-radius: 99px;
    cursor: pointer;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, color .15s ease;
}
.mvs-recent-remove:hover {
    background: rgba(184, 115, 51, 0.10);
    color: #B87333;
}

/* ─── Results ─── */
.mvs-results-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mvs-result-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    width: 100%;
    min-height: 56px;
    border: 0;
    background: transparent;
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease;
}
.mvs-result-item:hover,
.mvs-result-item:active {
    background: rgba(184, 115, 51, 0.06);
}
.mvs-result-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(184, 115, 51, 0.10);
    color: #B87333;
    border-radius: 8px;
    font-size: 13px;
}
.mvs-result-content {
    flex: 1 1 auto;
    min-width: 0;
}
.mvs-result-title {
    font-size: 14px;
    font-weight: 600;
    color: #0F0A07;
    line-height: 1.3;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.mvs-result-meta {
    font-size: 12px;
    color: #6B5B4F;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mvs-result-item mark {
    background: rgba(197, 165, 78, 0.32);
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 700;
}

/* ─── Empty state ─── */
.mvs-empty {
    padding: 32px 16px;
    text-align: center;
    color: #6B5B4F;
    font-size: 14px;
    line-height: 1.5;
}
.mvs-empty-icon {
    display: block;
    font-size: 26px;
    color: #C5A54E;
    margin-bottom: 10px;
    opacity: 0.8;
}

/* ─── Body scroll lock ─── */
body.mvs-open {
    overflow: hidden !important;
}
@media (max-width: 768px) {
    body.mvs-open {
        position: fixed;
        width: 100%;
        touch-action: none !important;
    }
}

/* ─── Highlight target on close (scroll + flash) ─── */
.mvs-highlighted {
    animation: mvs-pulse 2.5s ease;
    border-radius: 12px;
}
@keyframes mvs-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(184, 115, 51, 0); }
    20%      { box-shadow: 0 0 0 6px rgba(184, 115, 51, 0.28); }
    50%      { box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.14); }
}

/* ─── prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
    .mvs-overlay,
    .mvs-backdrop,
    .mvs-chip,
    .mvs-result-item,
    .mvs-recent-btn,
    .mvs-highlighted {
        transition: none !important;
        animation: none !important;
    }
}