/* ============================================================================
   Mobil arama paneli (site/layout/mobile-search.blade.php, 13 Eki 2026).
   Referans: Gizem'in "Dikkan Valve mobil arama akisi" gorseli.

   - Yalnizca 991px ve alti: mobil header'daki buyutec de yalnizca orada
     gorunuyor. Ustunde panel hic cizilmez (display: none).
   - Renkler v5-search.css ile ayni degiskenlerden (turuncu, antrasit, gri
     zemin, hairline); yazi tipi sitenin Arial'i.
   - Tam ekran: tek kaydirma alani govde (.m-search__body); baslik, arama
     kutusu ve sekmeler ustte sabit kalir. Sayfanin kendisi acikken kilitli.
   - Kucuk kontroller (arama kutusu) yuvarlak, satirlar duz liste.
   - Sadelestirme (13 Eki 2026, "Dikkan mobil vana arama paneli" referansi):
     logo ve aciklama satiri yok, sekmeler iki parcali secici gorunumunde
     (bes sekme kaldigi icin yatayda kayar), yardim tek satir, "Tum urunler"
     altta sabit turuncu buton. Ikon ve yazi boyutlari BILEREK eski halinde
     (Gizem: referanstaki iri ikonlar istenmedi).
   ============================================================================ */

.m-search {
    display: none;
}

@media (max-width: 991px) {
    .m-search {
        --ms-orange: var(--dikkan-color, #FF4100);
        --ms-ink: #2b2b2b;
        --ms-body: var(--dikkan-antrasit-color, #58595B);
        --ms-muted: #8b8c90;
        --ms-paper: #fff;
        --ms-paper-2: #F4F5F7;
        --ms-line: rgba(24, 29, 78, 0.08);
        --ms-line-2: rgba(24, 29, 78, 0.16);
        --ms-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
        --ms-gutter: 16px;

        display: block;
        position: fixed;
        inset: 0;
        /* Mobil menu 9999, sitedeki en ust katman 99999 (imlec halkalari
           haric): tam ekran panel hepsinin ustunde durmali. */
        z-index: 100000;
        visibility: hidden;
        pointer-events: none;
        font-family: 'Plus Jakarta Sans', Arial, sans-serif;
    }

    .m-search.is-open {
        visibility: visible;
        pointer-events: auto;
    }

    .m-search__panel {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        background: var(--ms-paper);
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.25s var(--ms-ease), transform 0.3s var(--ms-ease);
    }

    .m-search.is-open .m-search__panel {
        opacity: 1;
        transform: none;
    }

    /* ------------------------------------------------------------- baslik */

    .m-search__head {
        flex: 0 0 auto;
        padding: 16px var(--ms-gutter) 0;
    }

    .m-search__title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .m-search__title {
        margin: 0;
        font-family: 'Plus Jakarta Sans', Arial, sans-serif;
        font-size: 22px;
        font-weight: 700;
        line-height: 1.2;
        color: var(--ms-ink);
    }

    .m-search__close {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: -10px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--ms-ink);
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
    }

    /* ------------------------------------------------------ arama kutusu */

    .m-search__field {
        position: relative;
        margin-top: 12px;
    }

    .m-search__field-icon {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 22px;
        color: var(--ms-body);
        pointer-events: none;
    }

    .m-search__input {
        display: block;
        width: 100%;
        height: 52px;
        padding: 0 48px 0 46px;
        border: 1px solid var(--ms-line-2);
        border-radius: 8px;
        background: var(--ms-paper-2);
        color: var(--ms-ink);
        font-family: 'Plus Jakarta Sans', Arial, sans-serif;
        /* 16px: iOS Safari daha kucuk yazili kutuya odaklaninca sayfayi
           yakinlastiriyor. */
        font-size: 16px;
        outline: none;
        -webkit-appearance: none;
        appearance: none;
        transition: border-color 0.2s var(--ms-ease), background-color 0.2s var(--ms-ease);
    }

    .m-search__input::placeholder {
        color: var(--ms-muted);
        opacity: 1;
    }

    .m-search__input::-webkit-search-cancel-button {
        display: none;
    }

    .m-search__input:focus {
        border-color: var(--ms-orange);
        background: var(--ms-paper);
    }

    .m-search__clear {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--ms-ink);
        font-size: 20px;
        cursor: pointer;
    }

    .m-search__clear[hidden] {
        display: none;
    }

    /* ----------------------------------------------------------- sekmeler */

    /* Iki parcali secici gorunumu (referans): gri ray, secili sekme beyaz
       kutu. Bes sekme ekrana sigmadigi icin ray yatayda kayar, cubuk gizli
       (urunler sayfasindaki mobil filtre cipleriyle ayni yaklasim). */
    .m-search__tabs {
        flex: 0 0 auto;
        display: flex;
        gap: 2px;
        margin: 14px var(--ms-gutter) 0;
        padding: 3px;
        border: 1px solid var(--ms-line-2);
        border-radius: 8px;
        background: var(--ms-paper-2);
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .m-search__tabs::-webkit-scrollbar {
        display: none;
    }

    .m-search__tab {
        flex: 1 0 auto;
        padding: 10px 16px;
        border: 1px solid transparent;
        border-radius: 6px;
        background: none;
        color: var(--ms-body);
        font-family: 'Plus Jakarta Sans', Arial, sans-serif;
        font-size: 15px;
        line-height: 1.2;
        white-space: nowrap;
        cursor: pointer;
    }

    .m-search__tab.is-active {
        border-color: var(--ms-line-2);
        background: var(--ms-paper);
        color: var(--ms-orange);
        font-weight: 700;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    }

    /* -------------------------------------------------------------- govde */

    .m-search__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .m-search__pane {
        display: none;
        padding: 6px var(--ms-gutter) 8px;
    }

    .m-search__pane.is-active {
        display: block;
    }

    .m-search__pane-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 0 6px;
    }

    .m-search__pane-head h3 {
        margin: 0;
        font-family: 'Plus Jakarta Sans', Arial, sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: var(--ms-ink);
    }

    .m-search__pane-head span {
        font-size: 13px;
        color: var(--ms-body);
    }

    /* ------------------------------------------------------------ satirlar */

    .m-search__row {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 60px;
        padding: 8px 0;
        border-bottom: 1px solid var(--ms-line);
        color: var(--ms-ink);
        text-decoration: none;
    }

    .m-search__row:last-child {
        border-bottom: 0;
    }

    .m-search__row:hover,
    .m-search__row:focus-visible {
        color: var(--ms-ink);
    }

    .m-search__row-icon {
        flex: 0 0 32px;
        font-size: 28px;
        text-align: center;
        color: var(--ms-body);
    }

    .m-search__row-text {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
    }

    .m-search__row-label {
        font-size: 16px;
        line-height: 1.3;
        color: var(--ms-ink);
    }

    .m-search__row-meta {
        font-size: 13px;
        line-height: 1.3;
        color: var(--ms-muted);
    }

    .m-search__row-count {
        flex: 0 0 auto;
        font-size: 15px;
        color: var(--ms-body);
        font-variant-numeric: tabular-nums;
    }

    .m-search__row-arrow {
        flex: 0 0 auto;
        font-size: 20px;
        color: var(--ms-orange);
    }

    /* Urun sonucu: solda kucuk gorsel. */
    .m-search__thumb {
        flex: 0 0 72px;
        width: 72px;
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--ms-paper-2);
        overflow: hidden;
    }

    .m-search__thumb img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .m-search__row--product {
        min-height: 88px;
    }

    .m-search__row--product .m-search__row-label {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Araniyor / sonuc yok / hata. */
    .m-search__note {
        padding: 18px 0;
        font-size: 15px;
        color: var(--ms-body);
    }

    .m-search__more {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 56px;
        margin: 0 calc(var(--ms-gutter) * -1);
        padding: 0 var(--ms-gutter);
        border-top: 1px solid var(--ms-line);
        color: var(--ms-ink);
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
    }

    .m-search__more i {
        font-size: 20px;
        color: var(--ms-orange);
    }

    /* ------------------------------------------- yardim + tum urunler */

    /* Yardim: listenin altinda tek satir ("Yardim mi lazim? Sihirbazi
       deneyin >"). Aramada sonuc listesi gorunurken ikisi de gizli; sonuc
       listesinin kendi "tum sonuclar" baglantisi var. */
    .m-search.is-searching .m-search__help,
    .m-search.is-searching .m-search__foot {
        display: none;
    }

    .m-search__help {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 10px;
        margin: 0;
        padding: 14px var(--ms-gutter) 20px;
        font-size: 15px;
        line-height: 1.4;
        color: var(--ms-ink);
    }

    .m-search__help-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 44px;
        color: var(--ms-orange);
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
    }

    .m-search__help-link i {
        font-size: 18px;
    }

    .m-search__help-link:hover,
    .m-search__help-link:focus-visible {
        color: var(--ms-orange);
    }

    /* Govdenin disinda, panelin altinda sabit. */
    .m-search__foot {
        flex: 0 0 auto;
        padding: 12px var(--ms-gutter) calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--ms-line);
        background: var(--ms-paper);
    }

    .m-search__all {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        padding: 0 48px;
        border-radius: 8px;
        background: var(--ms-orange);
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
    }

    .m-search__all i {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
    }

    .m-search__all:hover,
    .m-search__all:focus-visible {
        color: #fff;
    }
}