/* ============================================================================
   GoatMenu customer-facing menu page (Views/Home/Index.cshtml)

   Moved out of the view unchanged in order and content, except for dead rules
   removed and exact duplicates merged. Source order is load-bearing: rules later
   in this file override earlier ones of equal specificity, and the whole file
   is linked from <body> so it loads AFTER _Layout.cshtml's inline <style>.

   Sections (search for the banner comments):
     1. Horizontal scroll lock, phone frame on desktop/landscape
     2. Landing section (video/image hero, logo, CTA button, story hint)
     3. Featured products strip
     4. Header, social icons, logo ring
     5. Categories grid (theme 1 accordion, theme 2 alternating grid)
     6. Category header video + landing video loading states
     7. Product cards (.item), subcategories
     8. Responsive overrides (768 / 576 / 480 / 400 px)
     9. Popup scroll lock, theme 2 category popup, shared video states
    10. Product detail popup
   ============================================================================ */


/* ========================================
   PREVENT HORIZONTAL SCROLL/SWIPE
   Only allow vertical scrolling on menu page
   ======================================== */
html, body {
    overflow-x: hidden;
    overscroll-behavior-x: none;
}


/* ========================================
   VERTICAL CARD WRAPPER - Desktop/Landscape
   Makes desktop view look like mobile/vertical
   ======================================== */
.vertical-card-wrapper {
    width: 100%;
    overflow-x: hidden;
}

/* Mobile/portrait: full viewport height */
@media (max-width: 768px) and (orientation: portrait) {
    .vertical-card-wrapper {
        min-height: 100vh;
        min-height: 100dvh;
    }
}

/* Only apply vertical card on landscape/desktop */
@media (min-width: 769px), (orientation: landscape) and (min-width: 568px) {
    /* Lock the outer page - no scrolling, phone scrolls internally */
    html, body {
        height: 100vh;
        height: 100dvh;
        overflow: hidden !important;
    }
    
    /* Phone dimensions - use CSS custom properties for easy reuse */
    :root {
        --phone-w: 375px;
        --phone-h: 812px; /* iPhone X/14 Pro - fixed, never stretches */
    }
    
    /* The fixed-bg-layer with restaurant background - clip to card width */
    .fixed-bg-layer {
        position: fixed;
        left: 50% !important;
        top: 50%;
        transform: translate(-50%, -50%);
        max-width: var(--phone-w) !important;
        height: var(--phone-h);
        max-height: calc(100vh - 60px);
        border-radius: 40px;
        box-shadow: none;
    }
    
    .vertical-card-wrapper {
        width: var(--phone-w);
        max-width: var(--phone-w);
        height: var(--phone-h);
        max-height: calc(100vh - 60px); /* Never touch browser edges */
        margin: 0 auto;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* Internal scrolling */
        overflow-y: auto;
        overflow-x: hidden;
        /* Phone frame */
        border: 6px solid #1a1a1a;
        border-radius: 40px;
        box-shadow:
            0 0 0 2px #333,                          /* outer ring */
            0 30px 80px rgba(0, 0, 0, 0.45),         /* drop shadow */
            inset 0 0 0 1px rgba(255,255,255,0.05);   /* inner highlight */
        /* Smooth scrolling */
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    /* Hide scrollbar but keep scrollable */
    -ms-overflow-style: none;
    scrollbar-width: none;
    }
    
    /* Hide scrollbar but keep scrollable */
    .vertical-card-wrapper::-webkit-scrollbar {
        display: none;
    }
    
    /* Phone notch - stays fixed over the phone frame */
    .vertical-card-wrapper::before {
        content: "";
        position: sticky;
        top: 0;
        display: block;
        width: 126px;
        height: 32px;
        margin: 0 auto;
        background: #1a1a1a;
        border-radius: 0 0 18px 18px;
        z-index: 9999;
        pointer-events: none;
        flex-shrink: 0;
    }
    
    /* Phone home indicator - stays at bottom of viewport within phone */
    .vertical-card-wrapper::after {
        content: "";
        position: sticky;
        bottom: 6px;
        display: block;
        width: 120px;
        height: 4px;
        margin: 0 auto;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 2px;
        z-index: 9999;
        pointer-events: none;
    }
    
    /* Landing section fills exactly one phone screen */
    .vertical-card-wrapper .landing-section {
        width: 100%;
        height: var(--phone-h);
        max-height: calc(100vh - 60px);
        flex-shrink: 0;
    }
    
    /* Ensure menu container doesn't exceed card width */
    .vertical-card-wrapper .menu-container {
        max-width: 100%;
        padding: 0 12px;
    }
    
    /* Adjust header for vertical card */
    .vertical-card-wrapper .header-wrap {
        padding: 15px 10px;
    }
    
    /* Force single column grid like mobile */
    .vertical-card-wrapper .items-grid {
        grid-template-columns: 1fr !important;
    }
    
    .vertical-card-wrapper .subcategory .items-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Adjust category header for vertical view */
    .vertical-card-wrapper .category-header {
        min-height: var(--cat-header-min, 156px);
    }
    
    /* Language selector must stay within the phone */
    .language-selector-bottom {
        position: sticky;
        bottom: 15px;
        z-index: 1000;
    }
}

/* Tablet landscape - slightly smaller phone */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    :root {
        --phone-w: 350px;
        --phone-h: 750px;
    }
}

/* Large desktop - full size phone */
@media (min-width: 1200px) {
    :root {
        --phone-w: 375px;
        --phone-h: 812px;
    }
}

/* Ensure mobile portrait stays unchanged */
@media (max-width: 768px) and (orientation: portrait) {
    html, body {
        height: auto;
        overflow: visible !important;
    }
    .vertical-card-wrapper {
        max-width: 100%;
        width: 100%;
        height: auto;
        max-height: none;
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        margin: 0;
        overflow: visible;
    }
    .vertical-card-wrapper::before,
    .vertical-card-wrapper::after {
        display: none;
    }
}

/* Landing Page Styles */
.landing-section {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    background: #000;
}

.landing-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 1;
}

.landing-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    z-index: 2;
    pointer-events: none;
}

.landing-content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 30px 20px 50px;
    width: 100%;
}

/* Landing hero logo. The selector is doubled on purpose: the plain .logo-wrapper
   rule further down also sets position/margin and would otherwise win by source order. */
.logo-wrapper.landing-logo-wrapper {
    position: absolute;
    top: max(20px, env(safe-area-inset-top));
    left: 50%;
    right: auto;
    margin: 0;
    transform: translateX(-50%);
    z-index: 3;
}

.landing-title {
    font-family: var(--brand-font);
    font-size: var(--brand-name-size);
    color: var(--brand-name-color, #fff);
    margin: 0 0 8px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.landing-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: #fff;
    padding: 11px 42px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: .4px;
    font-family: var(--brand-font, inherit);
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(8, 8, 8, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    transition: all 0.35s ease;
    backdrop-filter: blur(12px);
    animation: landing-btn-glow 2.8s ease-in-out infinite;
}

.landing-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(8, 8, 8, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}

.landing-btn i {
    font-size: 1.1rem;
    transition: transform 0.35s ease, color 0.35s ease;
}

.landing-btn:hover i {
    transform: translateY(3px);
    color: #ffffff;
}

@media (max-width: 768px) {
    .landing-btn {
        padding: 8px 45px;
    }
}

@media (orientation: landscape) and (max-width: 1024px) {
    .landing-btn {
        padding: 12px 45px;
    }
}

.landing-btn::after {
    content: "";
    position: absolute;
    top: -120%;
    left: -30%;
    width: 35%;
    height: 320%;
    transform: rotate(18deg);
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    pointer-events: none;
    transition: transform 0.6s ease;
}

.landing-btn:hover::after {
    transform: rotate(18deg) translateX(260%);
}

@keyframes landing-btn-glow {
    0%, 100% { box-shadow: 0 12px 30px rgba(8, 8, 8, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.36);}
    50% { box-shadow: 0 16px 34px rgba(8, 8, 8, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.55);}
}

.story-click-hint{
  position:absolute;
  bottom:-30px;
  left:50%;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  color: #fff;
  border: 1px solid rgba(255,255,255,.42);
  border-radius:999px;
  padding:8px 14px;
  font-size:0.76rem;
  font-weight:700;
  letter-spacing:.35px;
  font-family: var(--brand-font, inherit);
  line-height:1;
  z-index:4;
  box-shadow:0 6px 18px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.35);
  text-transform:none;
  pointer-events:none;
  animation: story-hint-pulse 2.4s ease-in-out infinite;
  backdrop-filter: blur(8px);
}

.story-click-hint i{
  font-size:0.82rem;
  color: rgba(241, 220, 186, 0.98);
}

.story-click-hint-text{
  white-space:nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

@keyframes story-hint-pulse {
  0%,100% { transform:translate(-50%, 0); filter: brightness(1);}
  50% { transform:translate(-50%, 4px); filter: brightness(1.08);}
}

/* ========================================
   FEATURED PRODUCTS SECTION
   Horizontal draggable card
   ======================================== */
.featured-section {
    padding: 15px;
    margin-bottom: 20px;
}

.featured-title {
    font-family: var(--brand-font);
    font-size: 18px;
    font-weight: 600;
    color: var(--brand-name-color, #3b2c2c);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.featured-title i {
    color: #ffd700;
}

.featured-scroll-container {
    overflow: hidden;
    position: relative;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x; /* Allow horizontal swipe for featured items */
}

.featured-scroll-container:active {
    cursor: grabbing;
}

.featured-items {
    display: flex;
    gap: 12px;
    transition: transform 0.1s ease-out;
    will-change: transform;
}

.featured-item {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
}

.featured-item:hover {
    transform: scale(1.02);
}

.featured-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.featured-item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
    padding: 40px 10px 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.featured-item-name {
    font-family: var(--item-font, Arial, sans-serif);
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
    line-height: 1.3;
}

.featured-item-price {
    font-family: var(--item-font, Arial, sans-serif);
    font-size: 12px;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

/* Featured item with no image - gradient background tile */
.featured-item.no-image {
    background: linear-gradient(135deg, var(--item-bg, #f5f0e8) 0%, #e8ddd0 100%);
}
.featured-item.no-image .featured-item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 100%);
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}
.featured-item.no-image .featured-item-name {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}
.featured-item.no-image .featured-item-price {
    margin-top: 4px;
}

/* Fiyatsız öne çıkan kart: isim %70 ile sınırlı kalıp gereksiz yere
   kısaltılmasın, iki satıra kadar sarsın. */
.featured-item.no-price .featured-item-name {
    max-width: 100%;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Featured section scroll indicators */
.featured-scroll-hint {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 10;
}

.featured-scroll-hint.left {
    left: 5px;
}

.featured-scroll-hint.right {
    right: 5px;
}

.featured-scroll-container:hover .featured-scroll-hint {
    opacity: 0.7;
}

.featured-scroll-hint i {
    font-size: 14px;
    color: #333;
}

/* Mobile adjustments for featured */
@media (max-width: 768px) {
    .featured-section {
        padding: 12px 10px;
    }
    
    .featured-item {
        width: 120px;
        height: 120px;
    }
    
    .featured-item-name {
        font-size: 11px;
    }
    
    .featured-item-price {
        font-size: 11px;
    }
    
    .featured-title {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .featured-item {
        width: 110px;
        height: 110px;
    }
    
    .featured-item-name {
        font-size: 10px;
    }
    
    .featured-item-price {
        font-size: 10px;
    }
    
    .featured-item-overlay {
        padding: 30px 8px 8px;
    }
}

/* Header & Logo */
.header-wrap{display:flex;justify-content:center;padding:20px;width:100%}
header{text-align:center;position:relative;margin-bottom:30px;width:100%}

.header-content{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;width:100%;padding:0 10px}
.header-icons-left,.header-icons-right{display:flex;gap:15px;flex:1}
.header-icons-left{justify-content:flex-start}
.header-icons-right{justify-content:flex-end}
.header-icon{display:flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,0.9);backdrop-filter:blur(10px);box-shadow:0 4px 15px rgba(0,0,0,0.1);transition:all .25s ease;text-decoration:none;position:relative;z-index:1001}
.header-icon:hover{background:rgba(199,161,122,0.9);transform:scale(1.1) translateZ(0);box-shadow:0 6px 20px rgba(0,0,0,0.2)}
.header-icon i{font-size:27px;color:var(--icon-color);transition:.25s}
.header-icon:hover i{color:#fff}
/* Inline SVG glyph (Tripadvisor owl) — FA6 has no fa-tripadvisor, so we tint an SVG
   with the icon color exactly like the <i> glyphs above. */
.header-icon svg.header-svg-icon{width:27px;height:27px;fill:var(--icon-color);transition:.25s}
.header-icon:hover svg.header-svg-icon{fill:#fff}

/* PNG Icon Styles */
.header-icon.png-icon {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    width: 30px;
    height: 30px;
}
.header-icon.png-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
    transition: transform 0.25s ease;
}
.header-icon.png-icon:hover {
    transform: scale(1.1);
    background: transparent !important;
}
.header-icon.png-icon:hover img {
    filter: drop-shadow(0 6px 8px rgba(0,0,0,0.3));
}
/* Font Awesome fallback (e.g. Tripadvisor) shown in PNG mode when no PNG asset exists.
   Matches the compact, transparent look of .png-icon so it lines up with the real PNGs. */
.header-icon.png-fallback {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    width: 30px;
    height: 30px;
}
.header-icon.png-fallback i {
    font-size: 28px;
    color: #00af87; /* Tripadvisor brand green */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
    transition: transform 0.25s ease;
}
.header-icon.png-fallback:hover {
    transform: scale(1.1);
    background: transparent !important;
}
.header-icon.png-fallback:hover i {
    color: #00af87;
    filter: drop-shadow(0 6px 8px rgba(0,0,0,0.3));
}

.logo-wrapper{
  position:relative;
  flex-shrink:0;
  width: calc(var(--logo-size) + var(--logo-ring) * 2);
  height: calc(var(--logo-size) + var(--logo-ring) * 2);
  margin:20px auto 16px;display:flex;align-items:center;justify-content:center;cursor:default;
  max-width: 216px;
  max-height: 216px;
}
.logo-wrapper.has-stories{
  cursor: pointer;
}
.logo-wrapper.has-stories::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  border:2px solid rgba(199,161,122,.32);
  opacity:0;
}
.logo-wrapper::before{
  content:"";position:absolute;inset:0;border-radius:50%;padding:var(--logo-ring);
  background:conic-gradient(from 0deg,purple 0deg 20deg,transparent 20deg 40deg,purple 40deg 60deg,transparent 60deg 80deg,purple 80deg 100deg,transparent 100deg 120deg,purple 120deg 140deg,transparent 140deg 160deg,purple 160deg 180deg,transparent 180deg 200deg,purple 200deg 220deg,transparent 220deg 240deg,purple 240deg 260deg,transparent 260deg 280deg,purple 280deg 300deg,transparent 300deg 320deg,purple 320deg 340deg,transparent 340deg 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--logo-ring)),#000 calc(100% - var(--logo-ring)));
  mask:radial-gradient(farthest-side,transparent calc(100% - var(--logo-ring)),#000 calc(100% - var(--logo-ring)));
  transition:all .3s ease
}
.logo-wrapper.has-stories::before{
  animation: story-ring-spin 7s linear infinite, story-ring-glow 2.2s ease-in-out infinite;
}
.story-arrow{
  font-size:0.84rem;
  opacity:0;
}
.logo{width:var(--logo-size);height:var(--logo-size);border-radius:50%;overflow:hidden;border:4px solid #c7a17a;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.logo img{width:100%;height:100%;object-fit:cover}
@keyframes story-ring-spin {to{transform:rotate(360deg)}}
@keyframes story-ring-glow {0%,100%{filter:drop-shadow(0 0 0 rgba(199,161,122,.28))}50%{filter:drop-shadow(0 0 10px rgba(199,161,122,.9))}}
@keyframes story-arrow-pulse {0%,100%{transform:translate(0,0);opacity:0}40%{transform:translate(2px,-2px);opacity:1}80%{opacity:0}}
@keyframes story-tap-ripple {0%{transform:scale(0.88); opacity:0.6;}30%{opacity:.35;}100%{transform:scale(1.25); opacity:0;}}

header h1{font-family:var(--brand-font);font-size:var(--brand-name-size);color:var(--brand-name-color);margin:16px 0 8px}
header p{font-family:var(--brand-font);font-size:var(--brand-slogan-size);color:var(--brand-slogan-color);margin:0}

/* Container */
.menu-container { max-width:800px; margin:0 auto 40px; padding:0 15px; overflow-x:hidden; }

/* Categories Grid - Theme 1 (default: 1 column) */
.categories-grid {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 25px;
}

/* Categories Grid - Theme 2 (2-1-2-1 pattern with alternating widths) */
.categories-grid.theme-2 {
    display: grid;
    grid-template-columns: 65fr 35fr;
    column-gap: 8px;
    row-gap: 1px;
}

/* Theme 2: Full width categories */
.categories-grid.theme-2 .category.full-width {
    grid-column: 1 / -1;
}

/* Row wrapper for alternating width pattern */
.categories-grid.theme-2 .category-row {
    display: contents;
}

.categories-grid.theme-2 .category-row.row-swap {
    display: grid;
    grid-template-columns: 35fr 65fr;
    column-gap: 8px;
    row-gap: 1px;
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
}

.categories-grid.theme-2 .category-row.row-swap .category {
    width: 100%;
}

/* Theme 2 category sizing for 2-column items - uses the same CSS variable as Theme 1 */
.categories-grid.theme-2 .category:not(.full-width) .category-header {
    min-height: var(--cat-header-min, 156px);
}

/* Category */
.category{ border-radius:15px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.1); background:transparent; width: 100%; }

/* Theme 2: Tighter category styling */
.categories-grid.theme-2 .category { 
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* Make category transparent when opened so gradient background shows through */
.category.is-open { 
    background: transparent; 
    box-shadow: none;
}

/* Subcategory open state */
.subcategory[open] {
    padding: 0 0 10px 0;
    margin-bottom: 15px;
}

.category-header{
    min-height: var(--cat-header-min, 156px);
    padding: 15px 25px calc(var(--cat-header-pad-pct, 0) * (var(--cat-header-min, 156px) - 50px) / 100) 25px;
    display:flex; align-items:flex-end;
    position:relative;
    font-family:var(--cat-font); font-size:var(--cat-size); color:var(--cat-text); font-weight:bold;
    background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:3px 3px 0 0;
    text-shadow:1px 1px 4px rgba(0,0,0,.6);
    cursor: pointer;
    overflow:hidden;
}
.category-header::before{ content:""; position:absolute; inset:0; background:var(--cat-overlay); border-radius:inherit; z-index:0; }
.category-header>*{ position:relative; z-index:1; }

/* Category video background */
.category-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* Above background image but below text */
    transition: opacity 0.3s ease;
    /* Hide default video controls and play button on mobile */
    pointer-events: none;
}
.category-video-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.category-video-loader.hidden {
    display: none;
}
.video-spinner-small {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Landing video sits above the fallback image; the image shows while the video loads.
   Loading/playing opacity states are in the shared "Video loading states" block below. */
.landing-fallback-img {
    z-index: 1;
}
.landing-video {
    z-index: 2;
    transition: opacity 0.3s ease;
    /* Hide default video controls and play button on mobile */
    pointer-events: none;
}
.video-loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}
.video-loading-indicator.hidden {
    display: none;
}
.video-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Tap-to-play button shown when iOS blocks autoplay (Low Power Mode, Low Data Mode, per-site settings) */
.landing-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    width: 88px;
    height: 88px;
    background: transparent;
    border: none;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 56px;
    padding: 0;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
    transition: transform 0.2s ease;
}
.landing-play-button.visible {
    display: flex;
}
.landing-play-button:active {
    transform: translate(-50%, -50%) scale(0.92);
}


/* Expandable category content */
.category-content {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    background: transparent;
    transition: none !important;
}

.category.is-open .category-content {
    max-height: none;
    padding: 20px 15px;
}

/* Grids - Bufibu style 2 column layout */
.items-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* Alt kategori kartı full-width */
.items-grid > .subcategory { grid-column: 1 / -1; }

/* Alt kategoriler içindeki grid'ler için aynı sütun sayısını kullan */
.subcategory .items-grid {
  grid-template-columns: repeat(2, 1fr);
  padding: 15px 0;
}

/* Menu Item - Bufibu horizontal style */
.item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  background: var(--item-bg, #fff);
  padding: 10px;
  gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

/* Transparent item background - like category when opened */
body.item-bg-transparent .item {
  background: transparent !important;
  box-shadow: none !important;
}

body.item-bg-transparent .item:hover {
  transform: none;
  box-shadow: none !important;
}

body.item-bg-transparent .item-content {
  background: transparent !important;
}

.item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,.12);
}

/* Product thumbnail - small square on left, vertically centered */
.item img {
  width: 70px;
  height: 70px;
  min-width: 70px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  align-self: center;
}

/* Product content - right side */
.item-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  background: var(--item-bg, transparent);
  font-family: var(--item-font, Arial, sans-serif);
}

/* Title row with name and price */
.item-content .baslikp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 0;
  width: 100%;
  overflow: hidden;
}

.item-name {
  font-weight: 600;
  font-size: var(--item-size, 14px);
  color: var(--item-name-color, #b8860b);
  margin: 0;
  line-height: 1.4;
  flex: 1 1 0;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.item-price {
  font-weight: 700;
  color: var(--item-price-color, #b8860b);
  font-size: var(--item-size, 14px);
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
}

/* Fiyatı 0 olan ürünlerde fiyat hiç basılmaz (.no-price). Başlık satırı tek
   çocukla kalır; isim tüm genişliği kullansın ve satır dengesiz görünmesin. */
.item.no-price .baslikp {
  gap: 0;
}
.item.no-price .item-name {
  flex: 1 1 100%;
}
.item-price:empty { display: none; }

/* Dotted line below name and price */
.item-dots {
  width: 100%;
  border-bottom: 2px dotted var(--item-dots-color, #b8860b);
  margin: 6px 0;
}

/* Description below */
.item-desc {
  font-size: calc(var(--item-size, 14px) - 3px);
  color: var(--item-desc-color, #b8860b);
  opacity: 0.7;
  line-height: 1.3;
  margin-top: 2px;
}

/* Emoji labels */
.item-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  line-height: 1;
}
.item-labels span {
  font-size: calc(var(--item-size, 14px) - 2px);
  background: rgba(128,128,128,0.15);
  border-radius: 6px;
  padding: 2px 4px;
}

/* Allergen line on the product card (hidden when the product has none) */
.item-allergens {
  font-size: calc(var(--item-size, 14px) - 4px);
  color: var(--item-desc-color, #b8860b);
  opacity: 0.7;
  line-height: 1.35;
  margin-top: 5px;
  font-style: italic;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.item-allergens-label {
  font-weight: 700;
  font-style: normal;
  margin-right: 4px;
}

/* Featured item labels */
.featured-item-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 2px;
  justify-content: center;
  line-height: 1;
}
.featured-item-labels span {
  font-size: 11px;
  background: rgba(255,255,255,0.25);
  border-radius: 6px;
  padding: 1px 3px;
}

/* No-image product card - content fills full width */
.item.no-image {
  padding: 12px 14px;
}
.item.no-image .item-content {
  width: 100%;
}
.item.no-image .baslikp {
  align-items: center;
}
.item.no-image .item-name {
  flex: 1 1 0;
  min-width: 0;
}
.item.no-image .item-dots {
  width: 100%;
}

.subcategories{ margin-top:15px; }
.subcategory {
  margin-bottom: 15px;
}
.subcategory summary{
    min-height: var(--subcat-header-min, 100px);
    position:relative;
    background-size:cover; background-position:center;
    padding: 12px 18px calc(var(--subcat-header-pad-pct, 0) * (var(--subcat-header-min, 100px) - 40px) / 100) 18px; margin:8px 0; border-radius:12px;
    display:flex; align-items:flex-end;
    color:var(--subcat-text); font-family:var(--subcat-font); font-size:var(--subcat-size);
    cursor:pointer; overflow:hidden; list-style:none;
}
.subcategory summary::marker { content: ""; }
.subcategory summary::before{ content:""; position:absolute; inset:0; background:var(--subcat-overlay); border-radius:inherit; z-index:0; }
.subcategory summary>*{ position:relative; z-index:1; }

/* Story video (popup markup lives in _Layout.cshtml). Overrides the layout's
   object-fit: contain with cover - keep this file loading after the layout styles. */
.story-content video.story-video{
  width:100%; height:100%; object-fit:cover; display:none;
}

/* Desktop - keep 2 columns */
@media (min-width: 769px) {
  .items-grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
  .subcategory .items-grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
}

/* Mobile - single column for products */
@media (max-width:768px){ 
  .items-grid{ grid-template-columns: 1fr; } 
  .subcategory .items-grid { grid-template-columns: 1fr; }
  
  /* Horizontal item layout on mobile */
  .item {
    padding: 8px;
    gap: 10px;
  }
  
  .item img {
    width: 60px;
    height: 60px;
    min-width: 60px;
  }
  
  .category.is-open .category-content {
    padding: 15px 10px;
  }
}

/* Very small screens (320px-400px) - tighter product cards */
@media (max-width: 400px) {
  .item {
    padding: 6px;
    gap: 8px;
  }
  .item img {
    width: 50px;
    height: 50px;
    min-width: 50px;
  }
  .item-content .baslikp {
    gap: 4px;
  }
  .item.no-image {
    padding: 10px 10px;
  }
  .menu-container {
    padding: 0 8px;
  }
}

/* Mobile portrait mode - single column for categories */
@media (max-width: 768px) and (orientation: portrait) {
  .categories-grid { 
    flex-direction: column;
    gap: 1px;
  }
  
  .menu-container {
    max-width: 100%;
    padding: 0 10px;
  }
}

@media (max-width: 768px) {
    /* Mobile responsive improvements */
    .header-wrap {
        padding: 15px;
    }
    
    .menu-container {
        padding: 0 8px;
        max-width: 100%;
        width: 100%;
    }
    
    .category {
        margin-bottom: 20px;
        border-radius: 12px;
    }
    
    .category-header {
        min-height: var(--cat-header-min, 156px);
        padding: 15px 20px calc(var(--cat-header-pad-pct, 0) * (var(--cat-header-min, 156px) - 50px) / 100) 20px;
    }
    
    .category-header h2 {
        font-size: 1.5rem;
    }
    
    .items-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .item-content {
        padding: 12px;
    }
    
    .subcategory summary {
        min-height: var(--subcat-header-min, 100px);
        padding: 12px 15px calc(var(--subcat-header-pad-pct, 0) * (var(--subcat-header-min, 100px) - 40px) / 100) 15px;
    }
    
    .subcategory summary h3 {
        font-size: 1.2rem;
    }
    
    .logo-wrapper {
        max-width: 173px;
        max-height: 173px;
    }
    
    .header-content {
        gap: 20px;
    }
    
    .header-icons-left, .header-icons-right {
        gap: 10px;
    }
    
    .header-icon {
        width: 60px;
        height: 60px;
    }
    
    .header-icon i {
        font-size: 24px;
    }
}
@media (min-width: 769px) {
    .story-arrow{
        display:inline-flex;
        animation: story-arrow-pulse 1.35s ease-in-out infinite;
    }
    .logo-wrapper.has-stories::after{
        animation: none;
    }
}

@media (max-width: 576px) {
    .header-wrap {
        padding: 10px;
    }
    
    .menu-container {
        padding: 0 6px;
        max-width: 100%;
        width: 100%;
    }
    
    .category {
        margin-bottom: 18px;
        border-radius: 10px;
    }
    
    .category-header {
        min-height: var(--cat-header-min, 156px);
        padding: 12px 15px calc(var(--cat-header-pad-pct, 0) * (var(--cat-header-min, 156px) - 50px) / 100) 15px;
    }
    
    .category-header h2 {
        font-size: 1.3rem;
    }
    
    .items-grid {
        gap: 12px;
    }
    
    .item-content {
        padding: 10px;
    }
    
    .subcategory summary {
        min-height: var(--subcat-header-min, 100px);
        padding: 10px 12px calc(var(--subcat-header-pad-pct, 0) * (var(--subcat-header-min, 100px) - 40px) / 100) 12px;
    }
    
    .subcategory summary h3 {
        font-size: 1.1rem;
    }
    
    .logo-wrapper {
        max-width: 144px;
        max-height: 144px;
    }
    .story-click-hint{
        bottom:-26px;
        font-size:0.7rem;
        padding:7px 12px;
    }
    .story-arrow{
        display:none;
    }
    .logo-wrapper.has-stories{
        margin-bottom:20px;
    }
    .logo-wrapper.has-stories::after{
        animation: story-tap-ripple 1.6s ease-out infinite;
        animation-delay: .6s;
    }
    
    .header-content {
        gap: 15px;
    }
    
    .header-icons-left, .header-icons-right {
        gap: 8px;
    }
    
    .header-icon {
        width: 53px;
        height: 53px;
    }
    
    .header-icon i {
        font-size: 21px;
    }
}

@media (max-width: 480px) {
    .header-wrap {
        padding: 8px;
    }
    
    .menu-container {
        padding: 0 4px;
        max-width: 100%;
        width: 100%;
    }
    
    .category {
        margin-bottom: 15px;
        border-radius: 8px;
    }
    
    .category-header {
        min-height: var(--cat-header-min, 156px);
        padding: 10px 12px calc(var(--cat-header-pad-pct, 0) * (var(--cat-header-min, 156px) - 50px) / 100) 12px;
    }
    
    .category-header h2 {
        font-size: 1.2rem;
    }
    
    .items-grid {
        gap: 10px;
    }
    
    .item-content {
        padding: 8px;
    }
    
    .subcategory summary {
        min-height: var(--subcat-header-min, 100px);
        padding: 8px 10px calc(var(--subcat-header-pad-pct, 0) * (var(--subcat-header-min, 100px) - 40px) / 100) 10px;
    }
    
    .subcategory summary h3 {
        font-size: 1rem;
    }
    
    .logo-wrapper {
        max-width: 130px;
        max-height: 130px;
    }
    .story-click-hint{
        bottom:-24px;
        font-size:0.68rem;
        padding:6px 10px;
    }
    .logo-wrapper.has-stories{
        margin-bottom:20px;
    }
    .logo-wrapper.has-stories::after{
        inset:-12px;
        border-width:3px;
        animation: story-tap-ripple 1.45s ease-out infinite;
        animation-delay: .4s;
    }
    
    .header-content {
        gap: 12px;
    }
    
    .header-icons-left, .header-icons-right {
        gap: 6px;
    }
    
    .header-icon {
        width: 45px;
        height: 45px;
    }
    
    .header-icon i {
        font-size: 18px;
    }
}

/* ========================================
   Popup açıkken arka plan kaydırma kilidi
   Mobil portrait media query'si html/body'ye "overflow: visible !important"
   veriyor; bu yüzden JS'ten inline overflow:hidden vermek işe yaramıyordu.
   Sınıf tabanlı + !important kilit bunu aşar.
   NOT: body'ye position:fixed VERİLMEZ. Verilirse sayfa akıştan çıkıp
   kaydırma 0'a düşüyor, popup kapanınca JS geri sarsa bile mobil Safari
   arada bir kare çiziyor ve "en yukarı zıplayıp geri inme" görülüyor.
   Sadece overflow kilidi + dokunuş engeli konum hiç bozulmadan iş görüyor.
   ======================================== */
html.popup-scroll-lock,
body.popup-scroll-lock {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* ========================================
   Theme 2 Category Popup Modal
   ======================================== */
.category-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.category-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.category-popup-modal {
    background: var(--item-bg, #fff);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    border-radius: 20px;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.category-popup-overlay.active .category-popup-modal {
    transform: scale(1);
}

.category-popup-header {
    position: relative;
    min-height: var(--cat-header-min, 156px);
    padding: 15px 25px calc(var(--cat-header-pad-pct, 0) * (var(--cat-header-min, 156px) - 50px) / 100) 25px;
    display: flex;
    align-items: flex-end;
    font-family: var(--cat-font);
    font-size: var(--cat-size);
    color: var(--cat-text);
    font-weight: bold;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-shadow: 1px 1px 4px rgba(0,0,0,.6);
}

.category-popup-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--cat-overlay);
    border-radius: inherit;
    z-index: 0;
}

.category-popup-header > * {
    position: relative;
    z-index: 1;
}

.category-popup-header .popup-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.category-popup-close {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.2s ease;
}

.category-popup-close:hover {
    background: #fff;
}

.category-popup-close::before,
.category-popup-close::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 2px;
    background: #333;
}

.category-popup-close::before {
    transform: rotate(45deg);
}

.category-popup-close::after {
    transform: rotate(-45deg);
}

.category-popup-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 15px;
    background: transparent;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Popup içindeki items-grid ayarları - tek sütun */
.category-popup-content .items-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.category-popup-content .subcategory {
    grid-column: 1 / -1;
}

/* Video loading states - hide until actually playing to prevent iOS play button */
.landing-video.is-loading,
.category-video-bg.is-loading,
.popup-video-bg.is-loading {
    opacity: 0;
    visibility: hidden;
}

/* Only show when actually playing */
.landing-video.is-playing,
.category-video-bg.is-playing,
.popup-video-bg.is-playing {
    opacity: 1;
    visibility: visible;
}

/* Extra iOS play button hiding */
video::-webkit-media-controls {
    display: none !important;
    -webkit-appearance: none;
}
video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
    opacity: 0;
    pointer-events: none;
}
video::-webkit-media-controls-panel {
    display: none !important;
}
video::-webkit-media-controls-play-button {
    display: none !important;
    -webkit-appearance: none;
}

/* Mobile adjustments for popup */
@media (max-width: 480px) {
    .category-popup-modal {
        max-width: 100%;
        max-height: 95vh;
        border-radius: 15px;
    }
    
    .category-popup-overlay {
        padding: 10px;
    }
    
    .category-popup-content {
        padding: 15px 10px;
    }
}

/* ========================================
   PRODUCT DETAIL POPUP
   Markup sits outside .vertical-card-wrapper so it covers the full viewport.
   ======================================== */
.product-popup-overlay{
    position:fixed; inset:0;
    background:rgba(0,0,0,.72);
    z-index:10000;
    display:flex; align-items:center; justify-content:center;
    padding:16px;
    opacity:0; visibility:hidden;
    transition:opacity .22s ease, visibility 0s linear .22s;
    -webkit-tap-highlight-color:transparent;
}
.product-popup-overlay.active{
    opacity:1; visibility:visible;
    transition:opacity .22s ease, visibility 0s linear 0s;
}
.product-popup-modal{
    background:var(--item-bg, #fff);
    color:var(--item-name-color, #222);
    width:100%; max-width:460px;
    max-height:92vh; max-height:92dvh;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
    transform:translateY(20px) scale(.96);
    transition:transform .25s cubic-bezier(.2,.7,.3,1.2);
    display:flex; flex-direction:column;
    font-family:var(--item-font, Arial, sans-serif);
}
.product-popup-overlay.active .product-popup-modal{
    transform:translateY(0) scale(1);
}
.product-popup-image-wrap{
    position:relative;
    width:100%;
    background:#000;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    max-height:65vh;
    max-height:65dvh;
}
.product-popup-image-wrap.is-empty{ display:none; }
.product-popup-image{
    max-width:100%;
    max-height:65vh;
    max-height:65dvh;
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
}
.product-popup-close{
    position:absolute; top:10px; right:10px;
    width:36px; height:36px;
    border:0; border-radius:50%;
    background:rgba(0,0,0,.55);
    color:#fff;
    font-size:22px; line-height:1;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    z-index:2;
    transition:background .15s ease, transform .15s ease;
}
.product-popup-close:hover{ background:rgba(0,0,0,.8); transform:scale(1.05); }
.product-popup-image-wrap.is-empty + .product-popup-body .product-popup-close-floating{ display:flex; }
.product-popup-body{
    padding:18px 20px 22px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    position:relative;
}
.product-popup-image-wrap.is-empty ~ .product-popup-body{
    padding-top:46px;
}
.product-popup-title-row{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}
.product-popup-name{
    margin:0;
    font-size:20px; font-weight:700;
    color:var(--item-name-color, #222);
    flex:1 1 auto; min-width:0;
    word-wrap:break-word; overflow-wrap:break-word;
    line-height:1.25;
}
.product-popup-price{
    font-size:18px; font-weight:700;
    color:var(--item-price-color, #b8860b);
    white-space:nowrap;
    flex-shrink:0;
}
/* Fiyatı olmayan üründe boş kutu ne yer ne de flex boşluğu kaplasın. */
.product-popup-price:empty{ display:none; }
.product-popup-desc{
    font-size:14px; line-height:1.5;
    color:var(--item-desc-color, #444);
    opacity:.9;
    white-space:pre-wrap;
    margin:0;
}
.product-popup-desc:empty{ display:none; }
.product-popup-section{
    margin-top:16px;
    padding-top:14px;
    border-top:1px dashed rgba(128,128,128,.35);
}
.product-popup-section-title{
    font-size:13px; font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:8px;
    opacity:.85;
}
.product-popup-allergens-list{
    display:flex; flex-wrap:wrap; gap:6px;
}
.product-popup-allergen-tag{
    display:inline-flex; align-items:center;
    background:rgba(128,128,128,.15);
    border-radius:999px;
    padding:4px 10px;
    font-size:12px; font-weight:500;
}
@media (max-width:480px){
    .product-popup-modal{ max-width:100%; max-height:94vh; max-height:94dvh; border-radius:14px; }
    .product-popup-name{ font-size:18px; }
    .product-popup-price{ font-size:16px; }
}
