/* ==========================================================================
   ARDEN ÇORBA - TAM MOBİL UYUMLULUK KATMANI (mobile.css)
   style.css'ten SONRA yüklenir. Yalnızca mobil/tablet/dokunmatik düzeltmeleri.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL GÜVENLİK AĞI (Yatay kaymayı önleme, medya taşmaları)
   -------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 90px;
}

body {
    overflow-x: clip; /* 'hidden' sticky header'ı bozar; 'clip' bozmaz */
}

img,
svg,
video,
iframe,
canvas {
    max-width: 100%;
}

img {
    height: auto;
}

a,
button,
input,
select,
textarea,
label {
    -webkit-tap-highlight-color: rgba(216, 30, 38, 0.12);
}

button,
.btn,
a.btn,
.nav-link,
.drawer-link,
.orbit-soup-node,
.slider-btn {
    touch-action: manipulation;
}

h1, h2, h3, h4,
.category-hero-title,
.section-title,
.story-paper-title,
.pdf-item-title,
.soup-title {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: manual;
}

/* Mobil hızlı aksiyon çubuğu varsayılan olarak gizli */
.mobile-action-bar {
    display: none;
}

/* --------------------------------------------------------------------------
   2. TABLET (≤ 1080px)
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .mobile-toggle {
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }

    .soup-stage-wrapper {
        height: auto !important;
    }

    .soup-info-panel {
        height: auto !important;
        max-height: none !important;
    }

    .contact-map-wrapper iframe {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   3. TELEFON (≤ 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* style.css'teki overflow-x:hidden sticky header'ı kırıyordu */
    html,
    body {
        overflow-x: clip !important;
    }

    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    .main-header {
        padding-top: env(safe-area-inset-top, 0px);
    }

    .container {
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }

    /* Mobil çekmece menü */
    .mobile-drawer {
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: calc(20px + env(safe-area-inset-top, 0px)) 22px calc(24px + env(safe-area-inset-bottom, 0px));
        width: 86%;
    }

    .drawer-backdrop {
        height: 100dvh;
    }

    .drawer-close {
        min-width: 44px;
        min-height: 44px;
    }

    .drawer-links {
        gap: 4px;
    }

    .drawer-link {
        display: flex;
        align-items: center;
        min-height: 50px;
        padding: 6px 4px;
        border-bottom: 1px solid var(--border-color);
        font-size: 1.15rem;
    }

    /* Butonlar: parmakla rahat basılabilir minimum 44px */
    .btn {
        min-height: 44px;
    }

    /* Hero başlık */
    .section-title {
        font-size: clamp(1.8rem, 8vw, 2.4rem);
        line-height: 1.15;
    }

    .sub-badge {
        font-size: 0.72rem;
        white-space: normal;
        text-align: center;
    }

    /* Çorba başlığı: uzun isimler taşmasın */
    .soup-title {
        white-space: normal !important;
        font-size: clamp(1.5rem, 6.5vw, 1.9rem);
        line-height: 1.15;
    }

    .soup-subtitle {
        white-space: normal !important;
    }

    .soup-pricing-block {
        flex-wrap: wrap;
        white-space: normal;
        row-gap: 8px;
    }

    .soup-badge-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    .soup-description {
        max-height: none !important;
        overflow: visible;
    }

    .soup-info-panel {
        min-height: 0 !important;
    }

    .tags-wrapper {
        flex-wrap: wrap;
    }

    .orbit-soup-node {
        min-width: 44px;
        min-height: 44px;
    }

    /* Menü kartları */
    .pdf-item-row {
        align-items: flex-start;
    }

    .pdf-item-thumb {
        flex-shrink: 0;
    }

    .pdf-item-info {
        min-width: 0;
        flex: 1;
    }

    .pdf-price-tag {
        flex-wrap: wrap;
        white-space: normal;
        row-gap: 6px;
    }

    .price-date-tag {
        white-space: nowrap;
    }

    /* Kategori kırmızı başlıklar */
    .category-hero-red {
        padding: 44px 0;
    }

    .category-hero-title {
        font-size: clamp(2rem, 9vw, 2.8rem);
        line-height: 1.1;
    }

    .category-hero-red p {
        font-size: 0.95rem !important;
        line-height: 1.5;
    }

    /* Hikaye */
    .story-paper-title {
        font-size: clamp(1.7rem, 7.5vw, 2.2rem);
    }

    /* İletişim & Harita */
    .contact-layout-grid {
        gap: 24px;
    }

    .contact-map-wrapper,
    .contact-map-wrapper iframe {
        height: 300px;
    }

    .contact-form-card button[type="submit"],
    .contact-form-card .btn {
        width: 100%;
        justify-content: center;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        min-height: 46px;
    }

    /* Footer */
    .social-links {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .social-links a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .footer-links a,
    .footer-links li a {
        display: inline-block;
        padding: 6px 0;
    }

    /* Düşen baharat efekti mobilde daha hafif ve arkada */
    #spicesCanvas {
        opacity: 0.7;
    }

    /* ----------------------------------------------------------------------
       MOBİL HIZLI AKSİYON ÇUBUĞU (Ara / Menü / Yol Tarifi)
       ---------------------------------------------------------------------- */
    .mobile-action-bar {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9990;
        background: #FFFFFF;
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .mobile-action-bar a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 60px;
        font-size: 0.74rem;
        font-weight: 700;
        color: var(--text-primary);
        text-decoration: none;
    }

    .mobile-action-bar a .mab-icon {
        font-size: 1.25rem;
        line-height: 1;
    }

    .mobile-action-bar a.mab-primary {
        background: var(--brand-red);
        color: #FFFFFF;
    }

    .mobile-action-bar a:active {
        opacity: 0.8;
    }

    /* Çekmece açıkken aksiyon çubuğu gizlensin */
    body.drawer-open .mobile-action-bar {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   4. KÜÇÜK TELEFON (≤ 380px) - iPhone SE / mini, küçük Android
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
    /* Logo + buton + hamburger 320px'e sığsın */
    .nav-actions .btn-sm {
        display: none;
    }

    .nav-container {
        padding: 8px 12px;
        gap: 8px;
    }

    .soup-visual-showcase {
        width: min(280px, 88vw) !important;
        height: min(280px, 88vw) !important;
    }

    .soup-action-row .btn {
        font-size: 0.85rem;
    }

    .pdf-item-row {
        gap: 10px;
    }
}

/* --------------------------------------------------------------------------
   5. YATAY TELEFON (landscape, kısa ekran)
   -------------------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
    .soup-visual-showcase {
        width: min(300px, 70vh) !important;
        height: min(300px, 70vh) !important;
    }

    .soup-plate-center {
        width: min(190px, 45vh) !important;
        height: min(190px, 45vh) !important;
    }

    .category-hero-red {
        padding: 28px 0;
    }

    .mobile-drawer {
        justify-content: flex-start;
    }

    .drawer-links {
        margin: 14px 0;
    }

    .mobile-action-bar a {
        min-height: 48px;
    }

    body {
        padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
    }
}

/* --------------------------------------------------------------------------
   6. DOKUNMATİK CİHAZLAR (hover yok) - yapışkan hover efektlerini kapat
   -------------------------------------------------------------------------- */
@media (hover: none) {
    .brand-logo-wrap:hover .brand-mascot-logo {
        transform: none;
    }

    .nav-link:hover::after {
        width: 0;
    }

    .nav-link.active::after {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   7. HAREKET AZALTMA TERCİHİ (erişilebilirlik)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    #spicesCanvas {
        display: none !important;
    }
}