/* ==========================================================================
   BODRUM GURME - NATIVE MOBILE APP UX & PERFORMANCE LAYER
   GPU Hardware Acceleration, Scroll Jitter Elimination & Native Touch UX
   ========================================================================== */

/* 0. Alpine.js FOUC Flash Önleyici */
[x-cloak] {
    display: none !important;
}

/* 1. Dokunmatik Gecikmesini ve Mavi Seçim Işığını Sıfırla */
* {
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation;
}

/* 2. Pürüzsüz Kaydırma & Native App Sayfa Davranışı */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* 3. Tarayıcı Üstten/Alttan Sektirme (Bounce/Overscroll) Engeli */
html, body {
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
}

/* 4. GPU Donanım Hızlandırma (Jitter & Titreme Önleyici Katman) */
.hardware-accelerate,
.sticky,
[class*="sticky"] {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    will-change: transform;
}

/* 5. Mobilde Hızlı Dokunma Buton Tepkileri */
button, a, [role="button"], input[type="submit"], input[type="button"] {
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

/* 6. Form Girişlerinde iOS Zoom Koruması */
input, select, textarea {
    font-size: 16px !important;
}

/* 7. Akıcı Liste Kaydırma */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 8. Mobil Alt Boşluk (Padding) Standartı - Sabit Alt Navigasyon Çakışmasını Önleme */
@media (max-width: 767px) {
    main,
    .main-content,
    body > main,
    .page-wrapper {
        padding-bottom: 64px !important;
    }
    /* Footer masaüstünde görünür, mobilde gizli — padding etkilemesin */
    footer {
        padding-bottom: 0 !important;
    }
}

/* ==========================================================================
   9. OTOMATİK DİKEY RENK SİSTEMİ (Self-Discover & Focus)
   .theme-su    → Su/Damacana mavi paleti
   .theme-restaurant → Restoran turuncu/sarı paleti
   ========================================================================== */

/* ─── SU DİKEYİ CSS TOKEN'LARI ─────────────────────────────────── */
.theme-su {
    --vertical-primary: #0284C7;         /* sky-600  */
    --vertical-primary-hover: #0369A1;   /* sky-700  */
    --vertical-primary-light: #E0F2FE;   /* sky-100  */
    --vertical-accent: #38BDF8;          /* sky-400  */
    --vertical-accent-hover: #0EA5E9;    /* sky-500  */
    --vertical-ring: rgba(14,165,233,.3);
    --vertical-shadow: rgba(14,165,233,.25);
    --vertical-badge-bg: rgba(14,165,233,.1);
    --vertical-badge-text: #0284C7;
    --vertical-tab-active: #0284C7;
    --vertical-gradient-from: #0369A1;   /* sky-700  */
    --vertical-gradient-to: #38BDF8;     /* sky-400  */
    --vertical-emoji: "💧";
    --vertical-selection-bg: #38BDF8;
    --vertical-selection-text: #fff;
}

/* ─── RESTORAN DİKEYİ CSS TOKEN'LARI ────────────────────────────── */
.theme-restaurant {
    --vertical-primary: #FF6B35;         /* orange-500 */
    --vertical-primary-hover: #E85A24;   /* orange-600 */
    --vertical-primary-light: #FFF7ED;   /* orange-50  */
    --vertical-accent: #ECA800;          /* amber-500  */
    --vertical-accent-hover: #D49600;    /* amber-600  */
    --vertical-ring: rgba(255,107,53,.3);
    --vertical-shadow: rgba(255,107,53,.25);
    --vertical-badge-bg: rgba(255,107,53,.1);
    --vertical-badge-text: #FF6B35;
    --vertical-tab-active: #FF6B35;
    --vertical-gradient-from: #FF6B35;
    --vertical-gradient-to: #FF8C42;
    --vertical-emoji: "🍽️";
    --vertical-selection-bg: #FF6B35;
    --vertical-selection-text: #fff;
}

/* ─── ÇARŞI & MARKET DİKEYİ CSS TOKEN'LARI (THEME-CARSI) ─────── */
.theme-carsi {
    --carsi-primary: #5D3EBC;
    --carsi-primary-hover: #4B2DA6;
    --carsi-bg: #F3F4F6;
    --vertical-primary: #5D3EBC;         /* #5D3EBC Mor */
    --vertical-primary-hover: #4B2DA6;   /* Koyu Mor */
    --vertical-primary-light: #F3F0FF;   /* Mor Açık Fon */
    --vertical-accent: #10B981;          /* emerald-500 */
    --vertical-accent-hover: #059669;    /* emerald-600 */
    --vertical-ring: rgba(93,62,188,.3);
    --vertical-shadow: rgba(93,62,188,.25);
    --vertical-badge-bg: rgba(93,62,188,.12);
    --vertical-badge-text: #5D3EBC;
    --vertical-tab-active: #5D3EBC;
    --vertical-gradient-from: #5D3EBC;
    --vertical-gradient-to: #7849D6;
    --vertical-emoji: "🛍️";
    --vertical-selection-bg: #5D3EBC;
    --vertical-selection-text: #fff;
}

.text-carsi-primary {
    color: #5D3EBC !important;
}

.bg-carsi-primary {
    background-color: #5D3EBC !important;
}

.border-carsi-primary {
    border-color: #5D3EBC !important;
}

/* ─── VERTİKAL-AWARE BUTON SİSTEMİ ─────────────────────────────── */
.theme-su .btn-vertical-primary,
.theme-su .vertical-cta {
    background: linear-gradient(135deg, var(--vertical-gradient-from), var(--vertical-gradient-to)) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px var(--vertical-shadow) !important;
}
.theme-su .btn-vertical-primary:hover,
.theme-su .vertical-cta:hover {
    background: linear-gradient(135deg, var(--vertical-primary-hover), var(--vertical-primary)) !important;
}

.theme-restaurant .btn-vertical-primary,
.theme-restaurant .vertical-cta {
    background: linear-gradient(135deg, var(--vertical-gradient-from), var(--vertical-gradient-to)) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px var(--vertical-shadow) !important;
}
.theme-restaurant .btn-vertical-primary:hover,
.theme-restaurant .vertical-cta:hover {
    background: linear-gradient(135deg, var(--vertical-primary-hover), var(--vertical-primary)) !important;
}

.theme-carsi .btn-vertical-primary,
.theme-carsi .vertical-cta {
    background: linear-gradient(135deg, var(--vertical-gradient-from), var(--vertical-gradient-to)) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px var(--vertical-shadow) !important;
}
.theme-carsi .btn-vertical-primary:hover,
.theme-carsi .vertical-cta:hover {
    background: linear-gradient(135deg, var(--vertical-primary-hover), var(--vertical-primary)) !important;
}

/* ─── SEPETİM CTA BUTONU ─────────────────────────────────────────── */
.theme-su .cart-cta-btn {
    background: linear-gradient(135deg, #0369A1, #38BDF8) !important;
    box-shadow: 0 4px 14px rgba(14,165,233,.35) !important;
}
.theme-restaurant .cart-cta-btn {
    background: linear-gradient(135deg, #FF6B35, #FF8C42) !important;
    box-shadow: 0 4px 14px rgba(255,107,53,.30) !important;
}
.theme-carsi .cart-cta-btn {
    background: linear-gradient(135deg, #8B5CF6, #6D28D9) !important;
    box-shadow: 0 4px 14px rgba(139,92,246,.35) !important;
}

/* ─── ÖDEME (CHECKOUT) TOPLAM RENK ──────────────────────────────── */
.theme-su .price-total-highlight {
    color: #0284C7 !important;
}
.theme-restaurant .price-total-highlight {
    color: #FF6B35 !important;
}
.theme-carsi .price-total-highlight {
    color: #7C3AED !important;
}

/* ─── AKTİF SEKME / PILL ────────────────────────────────────────── */
.theme-su .vertical-tab-active {
    border-color: var(--vertical-primary) !important;
    color: var(--vertical-primary) !important;
}
.theme-su .vertical-tab-bar {
    border-color: var(--vertical-primary) !important;
}

.theme-restaurant .vertical-tab-active {
    border-color: var(--vertical-primary) !important;
    color: var(--vertical-primary) !important;
}

.theme-carsi .vertical-tab-active {
    border-color: var(--vertical-primary) !important;
    color: var(--vertical-primary) !important;
}

/* ─── ROZET / BADGE ──────────────────────────────────────────────── */
.theme-su .vertical-badge {
    background: var(--vertical-badge-bg) !important;
    color: var(--vertical-badge-text) !important;
}
.theme-restaurant .vertical-badge {
    background: var(--vertical-badge-bg) !important;
    color: var(--vertical-badge-text) !important;
}
.theme-carsi .vertical-badge {
    background: var(--vertical-badge-bg) !important;
    color: var(--vertical-badge-text) !important;
}

/* ─── SEPETİM ALT ÇUBUĞU - MOBİL CART BADGE ─────────────────────── */
.theme-su .cart-badge-count {
    background-color: #38BDF8 !important;
    color: #0C4A6E !important;
}
.theme-restaurant .cart-badge-count {
    background-color: #ECA800 !important;
    color: #1C1917 !important;
}
.theme-carsi .cart-badge-count {
    background-color: #8B5CF6 !important;
    color: #FFFFFF !important;
}

/* ─── BOTTOM NAV AKTİF DURUM & OPAK BEYAZ ARKA PLAN ──────────────── */
#bottom-main-nav {
    background-color: #ffffff !important;
    background: #ffffff !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.theme-su nav a.active-nav,
.theme-su nav a[aria-current="page"] {
    color: var(--vertical-primary) !important;
}
.theme-restaurant nav a.active-nav,
.theme-restaurant nav a[aria-current="page"] {
    color: var(--vertical-primary) !important;
}
.theme-carsi nav a.active-nav,
.theme-carsi nav a[aria-current="page"] {
    color: var(--vertical-primary) !important;
}


/* ─── TEXT SEÇİM RENK ───────────────────────────────────────────── */
.theme-su ::selection {
    background-color: var(--vertical-selection-bg);
    color: var(--vertical-selection-text);
}
.theme-restaurant ::selection {
    background-color: var(--vertical-selection-bg);
    color: var(--vertical-selection-text);
}
.theme-carsi ::selection {
    background-color: var(--vertical-selection-bg);
    color: var(--vertical-selection-text);
}

/* ─── FOCUS RING ───────────────────────────────────────────────── */
.theme-su :focus-visible {
    outline-color: var(--vertical-primary) !important;
}
.theme-restaurant :focus-visible {
    outline-color: var(--vertical-primary) !important;
}
.theme-carsi :focus-visible {
    outline-color: var(--vertical-primary) !important;
}

/* ─── ÇAPRAZ RENK SIZINTISI ENGEL ──────────────────────────────── */
/* Su dikeyinde asla restoran turuncu sızmaması için */
.theme-su .text-orange-500,
.theme-su .text-\[\\#FF6B35\] {
    color: var(--vertical-primary) !important;
}
/* Restoran dikeyinde sky renkleri sızmaması için */
.theme-restaurant .text-sky-500,
.theme-restaurant .text-sky-600 {
    color: var(--vertical-primary) !important;
}
/* Çarşı dikeyinde mor & zümrüt dışı sızıntıları önle */
.theme-carsi .text-orange-500,
.theme-carsi .text-sky-500 {
    color: var(--vertical-primary) !important;
}