/* =============================================================================
   YENİ TASARIM (2026) — TELEFON / TABLET BİLEŞENLERİ
   -----------------------------------------------------------------------------
   Kaynak: Çiçek Lazım Content\yeni-tasarim-mobil.css (29-09-2026'da lite'a uyarlandı).
   TELEFON ve TABLETTE (≤991px) görünen, masaüstünde karşılığı OLMAYAN parçalar:
     1) Mobil başlık (hamburger · logo) + arama
     1b) Yukarıdan inen yapışık çubuk
     2) Soldan açılan menü çekmecesi (saf CSS, JavaScript yok)
     3) Alt bilgi akordiyonu
     4) Ekranın altında sabit "Geri / Hemen Ara / WhatsApp" çubuğu
   Lite'ta olmayan parçalar ÇIKARILDI: sepet düğmesi, Sipariş Takibi / Koda Göre Ara kısayolları.

   Markup'ta ayrım Bootstrap 3 sınıflarıyla:
     masaüstü blokları -> hidden-xs hidden-sm   (yalnız >=992px'te görünür)
     mobil bloklar     -> hidden-md hidden-lg   (yalnız <992px'te görünür)
   ⚠ Bu dosyadaki media query ile markup'taki hidden-* sınıfları AYNI eşiği (991px)
     kullanmalı, yoksa mobil markup görünür ama stilsiz kalır.
   ERİŞİLEBİLİRLİK: her buton dolgu arka planlı, hover rengi sabit.
   ============================================================================= */

/* Çekmeceyi açan gizli kutu — her ölçüde gizli kalmalı */
.yt-m-menuKutu {
    display: none;
}

@media (max-width: 991px) {

    /* Alt sabit çubuğun altında kalan içerik için gövdeye pay (iPhone alt çentik dahil). */
    body {
        padding-bottom: 64px;
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        padding-top: 0;
    }

    /* üst şerit: yalnız sosyal ikonlar, ortalı; slogan telefona sığmıyor */
    .yt-ustSerit .yt-kapsayici {
        justify-content: center;
        min-height: 40px;
    }

    .yt-ustSlogan {
        display: none;
    }

    .yt-sosyal {
        gap: 22px;
    }

        .yt-sosyal a span.yt-sosyalYazi {
            display: none;
        }

    .yt-sosyalKutu {
        width: 24px;
        height: 24px;
        border-radius: 6px;
        font-size: 12px;
    }


    /* ======================= 1) MOBİL BAŞLIK ========================= */
    .yt-m-baslikAlani {
        background: var(--yt-krem);
        padding: 10px 0 12px;
    }

    .yt-m-baslikUst {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .yt-m-hamburger {
        width: 42px;
        height: 42px;
        border-radius: 8px;
        background: var(--yt-siyah);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 21px;
        cursor: pointer;
        flex: 0 0 auto;
        margin: 0;
        transition: background .15s;
    }

        .yt-m-hamburger:hover {
            background: var(--yt-siyah-hover);
            color: #fff;
        }

    .yt-m-logo {
        min-width: 0;
        display: flex;
        justify-content: center;
    }

        .yt-m-logo img {
            height: auto;
            max-height: 46px;
            max-width: 100%;
            width: auto;
            display: block;
        }

        .yt-m-logo .yt-logoYazi {
            font-size: 22px;
        }

    /* logo ortada kalsın diye sağda görünmez denge kutusu */
    .yt-m-denge {
        width: 42px;
        height: 42px;
        flex: 0 0 auto;
    }

    /* ---- mobil arama ---- */
    .yt-m-arama {
        display: flex;
        height: 46px;
        margin: 12px 0 0;
    }

        .yt-m-arama input {
            flex: 1 1 auto;
            width: 100%;
            min-width: 0;
            border: 1px solid var(--yt-cerceve);
            border-right: 0;
            border-radius: 9px 0 0 9px;
            padding: 0 14px;
            font-family: inherit;
            color: var(--yt-metin);
            background: #fff;
            outline: none;
            box-shadow: none;
        }

            .yt-m-arama input::placeholder {
                color: var(--yt-metin-soluk);
            }

        .yt-m-arama button {
            flex: 0 0 54px;
            border: 0;
            border-radius: 0 9px 9px 0;
            background: var(--yt-siyah);
            color: #fff;
            font-size: 19px;
            cursor: pointer;
            transition: background .15s;
        }

            .yt-m-arama button:hover,
            .yt-m-arama button:focus {
                background: var(--yt-siyah-hover);
                color: #fff;
            }


    /* ================= 1b) YUKARIDAN İNEN YAPIŞIK ÇUBUK ============== */
    /* Sayfa kayınca üstte yalnız menü + logo. Mobil başlık üç satır olduğu için sticky
       yapılmadı (boyu değişirse içerik zıplardı); ayrı, "fixed" bir çubuk yukarıdan iner.
       Hamburger aynı gizli kutuyu (#ytMenuAc) işaretleyen ikinci bir <label>. */
    .yt-m-yapisik {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        background: var(--yt-krem);
        border-bottom: 1px solid var(--yt-cerceve);
        box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
        padding: 8px 0;
        transform: translateY(-100%);
        transition: transform .28s cubic-bezier(.23, 1, .32, 1);
    }

    body.yt-yapisik .yt-m-yapisik {
        transform: translateY(0);
    }

    .yt-m-yapisikIc {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .yt-m-yapisik .yt-m-logo img {
        max-height: 38px;
    }


    /* ======================= 2) MENÜ ÇEKMECESİ ======================= */
    .yt-m-perde {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,.45);
        z-index: 1090;
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s;
        margin: 0;
    }

    .yt-m-menuKutu:checked ~ .yt-m-perde {
        opacity: 1;
        visibility: visible;
    }

    .yt-m-menu {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 290px;
        max-width: 86%;
        z-index: 1095;
        background: #fff;
        box-shadow: 2px 0 18px rgba(0,0,0,.2);
        transform: translateX(-100%);
        transition: transform .25s;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .yt-m-menuKutu:checked ~ .yt-m-menu {
        transform: translateX(0);
    }

    .yt-m-menuBaslik {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 14px 16px;
        background: var(--yt-krem);
        border-bottom: 1px solid var(--yt-cerceve);
    }

        .yt-m-menuBaslik img {
            height: auto;
            max-height: 38px;
            max-width: 190px;
            width: auto;
        }

    .yt-m-menuKapat {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: var(--yt-siyah);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        cursor: pointer;
        margin: 0;
        flex: 0 0 auto;
    }

        .yt-m-menuKapat:hover {
            background: var(--yt-siyah-hover);
        }

    .yt-m-menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .yt-m-menu > ul > li > a,
    .yt-m-menu summary {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 14px 16px;
        font-size: 14.5px;
        letter-spacing: .04em;
        color: var(--yt-metin);
        text-decoration: none;
        border-bottom: 1px solid var(--yt-cerceve-ince);
        cursor: pointer;
    }

    .yt-m-menu summary {
        list-style: none;
    }

        .yt-m-menu summary::-webkit-details-marker {
            display: none;
        }

        .yt-m-menu summary .yt-m-ok {
            margin-left: auto;
            font-size: 12px;
            transition: transform .2s;
        }

    .yt-m-menu details[open] summary .yt-m-ok {
        transform: rotate(180deg);
    }

    .yt-m-menu details[open] summary {
        background: var(--yt-krem);
    }

    .yt-m-altListe li a {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 12px 16px 12px 22px;
        font-size: 14px;
        color: var(--yt-metin-ikincil);
        text-decoration: none;
        border-bottom: 1px solid var(--yt-cerceve-ince);
        background: var(--yt-krem-acik);
    }

        .yt-m-altListe li a:hover {
            background: var(--yt-krem-koyu);
            color: #000;
        }

    .yt-m-altListe .ytIkon {
        width: 21px;
        height: 21px;
    }


    /* ======================= 3) ALT BİLGİ AKORDİYONU ================= */
    .yt-m-altBilgi details {
        border-top: 1px solid var(--yt-cerceve);
    }

    .yt-m-altBilgi summary {
        display: flex;
        align-items: center;
        padding: 14px;
        font-size: 13.5px;
        font-weight: 600;
        letter-spacing: .05em;
        color: var(--yt-metin);
        cursor: pointer;
        list-style: none;
    }

        .yt-m-altBilgi summary::-webkit-details-marker {
            display: none;
        }

        .yt-m-altBilgi summary .yt-m-ok {
            margin-left: auto;
            font-size: 12px;
            transition: transform .2s;
        }

    .yt-m-altBilgi details[open] summary .yt-m-ok {
        transform: rotate(180deg);
    }

    .yt-m-altBilgi ul {
        margin: 0;
        padding: 0 14px 12px;
        list-style: none;
    }

    .yt-m-altBilgi li {
        margin-bottom: 9px;
        list-style: none;
    }

    .yt-m-altBilgi a {
        font-size: 13px;
        color: var(--yt-metin-ikincil);
        text-decoration: none;
    }

        .yt-m-altBilgi a:hover {
            color: #000;
            text-decoration: underline;
        }

    .yt-altRozet {
        margin-bottom: 0;
    }


    /* ======================= 4) ALTTA SABİT ÇUBUK =================== */
    .yt-m-altCubuk {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1080;
        display: flex;
        gap: 10px;
        padding: 9px 12px;
        padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid var(--yt-cerceve);
        box-shadow: 0 -3px 14px rgba(0,0,0,.08);
    }

        .yt-m-altCubuk a {
            flex: 1 1 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            border-radius: 9px;
            padding: 12px 6px;
            font-size: 14px;
            font-weight: 500;
            color: #fff;
            text-decoration: none;
            transition: background .15s;
        }

    .yt-m-ara {
        background: var(--yt-siyah);
    }

        .yt-m-ara:hover, .yt-m-ara:active {
            background: var(--yt-siyah-hover);
            color: #fff;
        }

    .yt-m-wp {
        background: var(--yt-yesil);
    }

        .yt-m-wp:hover, .yt-m-wp:active {
            background: #15612F;
            color: #fff;
        }

    .yt-m-altCubuk i {
        font-size: 18px;
    }
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
    .yt-m-yapisik {
        transition: none;
    }
}


/* =============================================================================
   5) GERİ DÜĞMESİ — alt çubuğun SOL ucu (Çiçek Lazım, 17.09.2026)
   Ne zaman "Geri", ne zaman "Ana Sayfa", ne zaman gizli: Scripts\mobil-geri.js.
   Varsayılan GİZLİ: betik çalışmazsa çubuk iki düğmeli hâliyle kalır.
   ============================================================================= */
.yt-m-geri,
.yt-m-altCubuk .yt-m-geri {
    display: none;
}

@media (max-width: 991px) {

    .yt-m-altCubuk .yt-m-geri.yt-geri-onceki,
    .yt-m-altCubuk .yt-m-geri.yt-geri-ana {
        display: flex;
    }

    .yt-m-geri > span {
        display: none;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
    }

    .yt-m-geri.yt-geri-onceki > .yt-geriOnceki,
    .yt-m-geri.yt-geri-ana > .yt-geriAna {
        display: inline-flex;
    }

    .yt-m-altCubuk .yt-m-geri {
        flex: 0 0 auto;
        min-width: 48px;
        padding: 12px 14px;
        background: #fff;
        border: 1px solid var(--yt-cerceve-koyu);
        color: var(--yt-metin);
    }

        .yt-m-altCubuk .yt-m-geri:hover,
        .yt-m-altCubuk .yt-m-geri:active {
            background: var(--yt-krem-koyu);
            color: #000;
        }

    /* hızlı çift dokunuşta iOS sayfayı yakınlaştırmasın */
    .yt-m-altCubuk a,
    .yt-m-hamburger {
        touch-action: manipulation;
    }
}

/* Dar ekranda üç düğme yan yana sığmaz: etiket gizlenir, yalnız ikon kalır. */
@media (max-width: 420px) {
    .yt-m-altCubuk .yt-geriAna .yt-geriYazi {
        display: none;
    }
}

@media (max-width: 360px) {
    .yt-m-altCubuk .yt-geriOnceki .yt-geriYazi {
        display: none;
    }
}


/* =============================================================================
   6) iOS ODAKLANINCA YAKINLAŞTIRMA — girdiler telefonda 16px (Çiçek Lazım, 17.09.2026)
   16px altındaki girdiye dokununca iPhone sayfayı yakınlaştırıp geri dönmüyor.
   ============================================================================= */
@media (max-width: 991px) {
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    select,
    textarea,
    .form-control {
        font-size: 16px !important;
    }
}