/* ═══════════════════════════════════════════════════════════
   MANGAL DADI — UI Redesign  |  Dark Fire Theme
   Palette: #080808 coal · #F5A800 ember · #FF4500 fire
   ═══════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────── */
:root {
    --ember:         #F5A800;
    --ember-light:   #FFD166;
    --ember-dark:    #C98800;
    --fire:          #FF4500;
    --fire-dim:      rgba(255,69,0,0.15);
    --fire-glow:     rgba(245,168,0,0.35);
    --fire-glow-sm:  rgba(245,168,0,0.10);

    --coal:          #080808;
    --coal-1:        #0E0E0E;
    --coal-2:        #151515;
    --coal-3:        #1C1C1C;
    --coal-4:        #252525;

    --white:         #FFFFFF;
    --text:          rgba(255,255,255,0.88);
    --text-muted:    rgba(255,255,255,0.50);
    --text-dim:      rgba(255,255,255,0.28);

    --glass:         rgba(255,255,255,0.04);
    --glass-hover:   rgba(255,255,255,0.07);
    --glass-border:  rgba(255,255,255,0.08);
    --glass-border-h:rgba(245,168,0,0.30);

    --radius:        14px;
    --radius-sm:     8px;
    --radius-lg:     22px;
    --header-h:      72px;
    --ease:          cubic-bezier(0.4,0,0.2,1);
    --transition:    0.24s var(--ease);
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:'Inter',sans-serif;
    color:var(--text);
    background:var(--coal);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font:inherit}
ul{list-style:none}
main{flex:1}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* ── Keyframes ─────────────────────────────────────────── */
@keyframes ticker-scroll{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}
@keyframes flicker{
    0%,100%{transform:scaleY(1) scaleX(1) rotate(-1deg)}
    15%    {transform:scaleY(1.05) scaleX(0.96) rotate(1.5deg)}
    30%    {transform:scaleY(0.97) scaleX(1.03) rotate(-0.5deg)}
    50%    {transform:scaleY(1.03) scaleX(0.97) rotate(1deg)}
    70%    {transform:scaleY(0.98) scaleX(1.02) rotate(-1.5deg)}
    85%    {transform:scaleY(1.04) scaleX(0.98) rotate(0.5deg)}
}
@keyframes ember-float{
    0%  {transform:translateY(0) translateX(0) scale(1);opacity:0.9}
    40% {transform:translateY(-70px) translateX(12px) scale(0.7);opacity:0.7}
    100%{transform:translateY(-160px) translateX(-8px) scale(0.15);opacity:0}
}
@keyframes ember-float-alt{
    0%  {transform:translateY(0) translateX(0) scale(1);opacity:0.8}
    35% {transform:translateY(-55px) translateX(-14px) scale(0.65);opacity:0.6}
    100%{transform:translateY(-140px) translateX(10px) scale(0.1);opacity:0}
}
@keyframes glow-pulse{
    0%,100%{opacity:0.82}
    50%    {opacity:1}
}
@keyframes scroll-bounce{
    0%,100%{transform:translateX(-50%) translateY(0)}
    50%    {transform:translateX(-50%) translateY(7px)}
}
@keyframes fade-in-up{
    from{opacity:0;transform:translateY(24px)}
    to  {opacity:1;transform:translateY(0)}
}
@keyframes modal-in{
    from{opacity:0;transform:scale(0.94) translateY(14px)}
    to  {opacity:1;transform:scale(1)    translateY(0)}
}

/* ── Ticker ─────────────────────────────────────────────── */
.ticker-bar{
    background:var(--coal-2);
    border-bottom:1px solid rgba(245,168,0,0.18);
    color:var(--ember);
    height:33px;
    overflow:hidden;
    display:flex;
    align-items:center;
}
.ticker-track{
    display:flex;
    white-space:nowrap;
    animation:ticker-scroll 50s linear infinite;
}
.ticker-content{
    display:inline-block;
    font-size:12px;
    font-weight:600;
    letter-spacing:0.05em;
}

/* ── Header ─────────────────────────────────────────────── */
.site-header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(8,8,8,0.88);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid var(--glass-border);
    transition:box-shadow var(--transition),background var(--transition);
}
.site-header.scrolled{
    background:rgba(8,8,8,0.97);
    box-shadow:0 4px 40px rgba(0,0,0,0.7),0 1px 0 rgba(245,168,0,0.15);
}
.header-inner{
    max-width:1240px;
    margin:0 auto;
    padding:0 24px;
    height:var(--header-h);
    display:flex;
    align-items:center;
    gap:28px;
}

/* Logo */
.logo{
    flex-shrink:0;display:flex;align-items:center;
    position:relative;
}
/* Hover glow via pseudo-element — filter buraya koyulsa img'nin blend-mode'unu bozardı */
.logo::after{
    content:'';
    position:absolute;
    inset:-20px -24px;
    background:radial-gradient(ellipse at center,rgba(245,168,0,0.22),transparent 68%);
    border-radius:50%;
    opacity:0;
    pointer-events:none;
    transition:opacity var(--transition);
}
.logo:hover::after{opacity:1}

.logo-img-nav{
    height:52px;
    width:auto;
    mix-blend-mode:screen;
    /* filter YOK — filter+mix-blend-mode aynı elementde blend'i kırar */
    transition:transform var(--transition);
    position:relative;z-index:1;
}
.logo:hover .logo-img-nav{transform:scale(1.06)}
.logo-text-fallback{
    display:none;
    font-family:'Playfair Display',serif;
    font-size:24px;
    font-weight:900;
    background:linear-gradient(135deg,var(--ember-light),var(--ember));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.main-nav{
    display:flex;
    align-items:center;
    gap:4px;
    margin-left:auto;
}
.nav-link{
    color:var(--text-muted);
    font-size:14px;
    font-weight:500;
    padding:8px 16px;
    border-radius:var(--radius-sm);
    transition:color var(--transition),background var(--transition);
    letter-spacing:0.01em;
}
.nav-link:hover,
.nav-link.active{color:var(--ember);background:var(--fire-glow-sm)}
.nav-phone{
    border:1px solid rgba(245,168,0,0.30);
    color:var(--ember) !important;
    background:rgba(245,168,0,0.07);
    margin-left:8px;
    font-weight:600;
}
.nav-phone:hover{
    background:rgba(245,168,0,0.18) !important;
    border-color:var(--ember);
    box-shadow:0 0 20px var(--fire-glow);
}

/* Burger */
.burger-btn{
    display:none;
    width:44px;height:44px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-left:auto;
    border-radius:var(--radius-sm);
    background:var(--glass);
    border:1px solid var(--glass-border);
    transition:background var(--transition),border-color var(--transition);
}
.burger-btn:hover{background:var(--fire-glow-sm);border-color:var(--glass-border-h)}
.burger-btn span{
    display:block;width:22px;height:2px;
    background:var(--text);border-radius:2px;
    transition:transform var(--transition),opacity var(--transition);
}
.burger-btn.active span:nth-child(1){transform:translateY(8px) rotate(45deg);background:var(--ember)}
.burger-btn.active span:nth-child(2){opacity:0}
.burger-btn.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);background:var(--ember)}

/* Mobile nav */
.mobile-nav{
    display:none;
    flex-direction:column;
    background:var(--coal-1);
    padding:8px 24px 20px;
    border-top:1px solid var(--glass-border);
}
.mobile-nav.active{display:flex}
.mobile-nav .nav-link{
    padding:14px 0;
    border-bottom:1px solid var(--glass-border);
    font-size:16px;
    color:var(--text-muted);
}
.mobile-nav-info{
    display:flex;flex-direction:column;gap:8px;
    padding-top:16px;
    font-size:13px;color:var(--text-dim);
    border-top:1px solid var(--glass-border);
    margin-top:4px;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
    display:inline-flex;align-items:center;gap:9px;
    padding:14px 30px;
    border-radius:var(--radius);
    font-size:15px;font-weight:600;
    transition:all var(--transition);
    cursor:pointer;letter-spacing:0.01em;
    position:relative;overflow:hidden;
}
.btn-primary{
    background:linear-gradient(135deg,var(--ember) 0%,var(--fire) 100%);
    color:var(--white);
    box-shadow:0 4px 22px rgba(245,168,0,0.40);
}
.btn-primary::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,0.12),transparent 60%);
    pointer-events:none;
}
.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 36px rgba(245,168,0,0.55),0 0 60px rgba(255,69,0,0.25);
    filter:brightness(1.08);
}
.btn-outline{
    border:1.5px solid var(--glass-border);
    color:var(--text);
    background:var(--glass);
    backdrop-filter:blur(8px);
}
.btn-outline:hover{
    border-color:rgba(245,168,0,0.40);
    color:var(--ember);
    background:var(--fire-glow-sm);
    transform:translateY(-2px);
}

/* ── Hero ────────────────────────────────────────────────── */
.hero{
    position:relative;
    min-height:100vh;
    background:var(--coal);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:120px 24px 100px;
}

/* Radial ambient glow */
.hero::before{
    content:'';position:absolute;inset:0;
    background:
        radial-gradient(ellipse 70% 55% at 50% 75%, rgba(255,69,0,0.13) 0%, transparent 65%),
        radial-gradient(ellipse 45% 40% at 20% 90%, rgba(245,168,0,0.07) 0%, transparent 55%),
        radial-gradient(ellipse 45% 40% at 80% 90%, rgba(245,168,0,0.07) 0%, transparent 55%);
    pointer-events:none;
}

/* Bottom fire glow wash */
.hero::after{
    content:'';position:absolute;
    bottom:0;left:0;right:0;
    height:180px;
    background:linear-gradient(to top,rgba(255,69,0,0.14),rgba(245,168,0,0.04),transparent);
    pointer-events:none;
}

/* Ember / particle layer */
.hero-ember-layer{
    position:absolute;inset:0;
    pointer-events:none;overflow:hidden;
}
.ember{
    position:absolute;
    border-radius:50%;
    background:radial-gradient(circle,#FFD700 0%,#FF6B00 55%,transparent 100%);
    pointer-events:none;
    animation:ember-float linear forwards;
}
.ember.alt{animation-name:ember-float-alt}

/* CSS Flames at bottom */
.hero-flames{
    position:absolute;
    bottom:0;left:0;right:0;
    height:130px;
    pointer-events:none;
}
.flame-c{
    position:absolute;
    bottom:0;
    border-radius:50% 50% 35% 35% / 55% 55% 20% 20%;
    transform-origin:center bottom;
    filter:blur(2px);
    animation:flicker ease-in-out infinite alternate;
}
.flame-c.f1{width:80px;height:130px;left:5%;background:linear-gradient(to top,rgba(255,50,0,0.9),rgba(255,120,0,0.6),transparent);animation-duration:2.2s;animation-delay:0s}
.flame-c.f2{width:55px;height:95px;left:12%;background:linear-gradient(to top,rgba(255,80,0,0.7),rgba(245,168,0,0.4),transparent);animation-duration:1.7s;animation-delay:0.4s}
.flame-c.f3{width:100px;height:165px;left:22%;background:linear-gradient(to top,rgba(200,30,0,0.85),rgba(255,100,0,0.55),transparent);animation-duration:2.6s;animation-delay:0.1s}
.flame-c.f4{width:60px;height:105px;left:35%;background:linear-gradient(to top,rgba(255,60,0,0.8),rgba(255,150,0,0.5),transparent);animation-duration:1.9s;animation-delay:0.7s}
.flame-c.f5{width:120px;height:190px;left:44%;background:linear-gradient(to top,rgba(220,40,0,0.9),rgba(255,90,0,0.6),transparent);animation-duration:2.9s;animation-delay:0s}
.flame-c.f6{width:70px;height:120px;left:57%;background:linear-gradient(to top,rgba(255,70,0,0.75),rgba(245,168,0,0.45),transparent);animation-duration:2.1s;animation-delay:0.5s}
.flame-c.f7{width:95px;height:155px;left:65%;background:linear-gradient(to top,rgba(200,25,0,0.88),rgba(255,110,0,0.55),transparent);animation-duration:2.4s;animation-delay:0.2s}
.flame-c.f8{width:50px;height:88px;left:77%;background:linear-gradient(to top,rgba(255,80,0,0.65),rgba(245,168,0,0.35),transparent);animation-duration:1.6s;animation-delay:0.8s}
.flame-c.f9{width:85px;height:140px;left:84%;background:linear-gradient(to top,rgba(220,40,0,0.82),rgba(255,120,0,0.50),transparent);animation-duration:2.3s;animation-delay:0.3s}
.flame-c.f10{width:60px;height:100px;left:93%;background:linear-gradient(to top,rgba(255,60,0,0.70),rgba(255,160,0,0.40),transparent);animation-duration:1.8s;animation-delay:0.6s}

.hero-inner{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:820px;
    margin:0 auto;
    animation:fade-in-up 0.8s var(--ease) both;
}

/* Big logo in hero */
.hero-logo{
    display:block;
    margin:0 auto 44px;
    width:min(320px,70vw);
    height:auto;
    mix-blend-mode:screen;
    /* filter YOK — opacity animasyonu blend-mode'u kırmaz, filter kırardı */
    animation:glow-pulse 3.5s ease-in-out infinite;
}
.hero-logo-text{
    display:none;
    font-family:'Playfair Display',serif;
    font-size:clamp(52px,10vw,96px);
    font-weight:900;
    line-height:1;
    margin-bottom:44px;
    background:linear-gradient(135deg,var(--ember-light) 0%,var(--ember) 50%,var(--fire) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    filter:drop-shadow(0 0 40px rgba(245,168,0,0.50));
}

.hero-eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:11px;font-weight:700;
    letter-spacing:0.15em;text-transform:uppercase;
    color:var(--ember);
    margin-bottom:20px;
    padding:6px 18px;
    border:1px solid rgba(245,168,0,0.25);
    border-radius:20px;
    background:rgba(245,168,0,0.07);
}
.hero h1{
    font-family:'Playfair Display',serif;
    font-size:clamp(36px,6vw,68px);
    font-weight:900;
    color:var(--white);
    line-height:1.1;
    margin-bottom:18px;
    letter-spacing:-0.025em;
}
.hero h1 .accent{
    background:linear-gradient(135deg,var(--ember-light) 0%,var(--ember) 50%,var(--fire) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.hero p{
    font-size:clamp(15px,2vw,18px);
    color:var(--text-muted);
    line-height:1.75;
    margin-bottom:48px;
    max-width:480px;
    margin-left:auto;margin-right:auto;
}
.hero-actions{
    display:flex;gap:16px;
    justify-content:center;flex-wrap:wrap;
}

/* Scroll indicator */
.hero-scroll{
    position:absolute;
    bottom:28px;left:50%;
    transform:translateX(-50%);
    z-index:2;
    display:flex;flex-direction:column;align-items:center;gap:6px;
    color:var(--text-dim);
    font-size:10px;font-weight:700;
    letter-spacing:0.14em;text-transform:uppercase;
    animation:scroll-bounce 2.2s ease-in-out infinite;
}
.hero-scroll svg{opacity:0.35}

/* ── Section common ─────────────────────────────────────── */
.section-title{
    text-align:center;
    font-family:'Playfair Display',serif;
    font-size:clamp(26px,4vw,44px);
    font-weight:800;
    color:var(--white);
    margin-bottom:10px;
    line-height:1.15;
    letter-spacing:-0.02em;
}
.section-title .accent{
    background:linear-gradient(135deg,var(--ember-light),var(--ember));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.section-subtitle{
    text-align:center;
    font-size:16px;
    color:var(--text-muted);
    margin-bottom:52px;
    max-width:480px;
    margin-left:auto;margin-right:auto;
    line-height:1.65;
}

/* Thin gold divider lines */
.divider-line{
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(245,168,0,0.30),transparent);
}

/* ── Features ────────────────────────────────────────────── */
.features{
    padding:96px 24px;
    background:var(--coal-1);
    position:relative;
}
.features::before,.features::after{
    content:'';position:absolute;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(245,168,0,0.22),transparent);
}
.features::before{top:0}
.features::after{bottom:0}

.features-grid{
    max-width:1100px;margin:0 auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:18px;
}
.feature-card{
    background:var(--coal-2);
    border-radius:var(--radius);
    padding:38px 28px;
    text-align:center;
    border:1px solid var(--glass-border);
    transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
    position:relative;overflow:hidden;
}
.feature-card::before{
    content:'';position:absolute;top:0;left:50%;
    transform:translateX(-50%);
    width:0;height:2px;
    background:linear-gradient(90deg,transparent,var(--ember),transparent);
    transition:width 0.4s var(--ease);
    border-radius:1px;
}
.feature-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 48px rgba(0,0,0,0.5),0 0 32px rgba(245,168,0,0.08);
    border-color:rgba(245,168,0,0.20);
}
.feature-card:hover::before{width:70%}
.feature-icon{
    font-size:46px;margin-bottom:20px;display:block;
    filter:drop-shadow(0 0 12px rgba(245,168,0,0.45));
    transition:transform var(--transition);
}
.feature-card:hover .feature-icon{transform:scale(1.1)}
.feature-card h3{
    font-family:'Playfair Display',serif;
    font-size:18px;font-weight:700;
    color:var(--white);margin-bottom:12px;
}
.feature-card p{
    font-size:14px;color:var(--text-muted);line-height:1.65;
}

/* ── CTA Banner ───────────────────────────────────────────── */
.cta-banner{
    background:var(--coal);
    padding:96px 24px;
    text-align:center;
    position:relative;overflow:hidden;
}
.cta-banner::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse 65% 85% at 50% 50%,rgba(245,168,0,0.06) 0%,transparent 70%);
    pointer-events:none;
}
.cta-inner{position:relative;z-index:1}
.cta-banner h2{
    font-family:'Playfair Display',serif;
    font-size:clamp(26px,4vw,50px);
    font-weight:800;color:var(--white);
    margin-bottom:16px;letter-spacing:-0.02em;
}
.cta-banner p{
    color:var(--text-muted);
    font-size:17px;margin-bottom:40px;
    max-width:520px;margin-left:auto;margin-right:auto;
    line-height:1.65;
}

/* ── Category Nav (Menu Page) ─────────────────────────────── */
.cat-nav-wrapper{
    position:sticky;
    top:var(--header-h);
    z-index:90;
    background:rgba(8,8,8,0.94);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--glass-border);
}
.cat-nav{
    max-width:1240px;margin:0 auto;
    display:flex;gap:6px;
    padding:12px 24px;
    overflow-x:auto;scrollbar-width:none;
}
.cat-nav::-webkit-scrollbar{display:none}
.cat-nav-btn{
    flex-shrink:0;
    padding:8px 18px;
    border-radius:20px;
    font-size:13px;font-weight:500;
    color:var(--text-muted);cursor:pointer;
    transition:all var(--transition);
    border:1.5px solid transparent;white-space:nowrap;
}
.cat-nav-btn:hover{color:var(--ember);border-color:rgba(245,168,0,0.22);background:var(--fire-glow-sm)}
.cat-nav-btn.active{
    background:linear-gradient(135deg,rgba(245,168,0,0.16),rgba(255,69,0,0.10));
    color:var(--ember);
    border-color:rgba(245,168,0,0.42);
    box-shadow:0 0 18px rgba(245,168,0,0.12);
}

/* ── Menu Page ───────────────────────────────────────────── */
.menu-page{background:var(--coal);padding-bottom:80px}
.menu-section{padding-top:64px}
.menu-section-inner{max-width:1240px;margin:0 auto;padding:0 24px}
.menu-section-header{
    display:flex;align-items:center;gap:14px;
    margin-bottom:28px;padding-bottom:18px;
    border-bottom:1px solid var(--glass-border);
    position:relative;
}
.menu-section-header::after{
    content:'';position:absolute;bottom:-1px;left:0;
    width:72px;height:2px;
    background:linear-gradient(90deg,var(--ember),var(--fire));
    border-radius:1px;
}
.cat-emoji{font-size:30px;line-height:1;filter:drop-shadow(0 0 8px rgba(245,168,0,0.5))}
.menu-section-header h2{
    font-family:'Playfair Display',serif;
    font-size:26px;font-weight:800;color:var(--white);
}
.menu-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:16px;
}
.menu-grid.sets-grid{
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:18px;
}
.empty-msg{color:var(--text-muted);font-size:14px;grid-column:1/-1;padding:20px 0}

/* ── Menu Card ───────────────────────────────────────────── */
.menu-card{
    background:var(--coal-2);
    border-radius:var(--radius);
    border:1px solid var(--glass-border);
    display:flex;flex-direction:column;
    transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
    cursor:pointer;overflow:hidden;
}
.menu-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 44px rgba(0,0,0,0.55),0 0 24px rgba(245,168,0,0.09);
    border-color:rgba(245,168,0,0.22);
}
.menu-card-img{
    width:100%;aspect-ratio:16/9;overflow:hidden;
    background:var(--coal-3);
}
.menu-card-img img{
    width:100%;height:100%;object-fit:cover;
    transition:transform 0.42s var(--ease);
}
.menu-card:hover .menu-card-img img{transform:scale(1.07)}
.menu-card-body{
    padding:18px 20px 22px;flex:1;
    display:flex;flex-direction:column;gap:8px;
}
.menu-card-top{
    display:flex;justify-content:space-between;
    align-items:flex-start;gap:8px;
}
.menu-card-name{
    font-size:15px;font-weight:600;
    color:var(--white);line-height:1.4;
}
.menu-card-badges{display:flex;gap:4px;flex-shrink:0}
.badge{
    font-size:10px;font-weight:700;
    padding:3px 8px;border-radius:10px;
    letter-spacing:0.05em;text-transform:uppercase;
}
.badge-new{background:rgba(0,200,100,0.13);color:#00C864;border:1px solid rgba(0,200,100,0.20)}
.badge-popular{background:rgba(245,168,0,0.14);color:var(--ember);border:1px solid rgba(245,168,0,0.22)}
.menu-card-desc{
    font-size:13px;color:var(--text-muted);
    line-height:1.6;flex:1;
}
.menu-card-price{
    font-size:16px;font-weight:700;
    color:var(--ember);margin-top:4px;
}

/* ── Item Modal ──────────────────────────────────────────── */
.item-modal{
    position:fixed;inset:0;z-index:500;
    display:flex;align-items:center;justify-content:center;
    padding:20px;
}
.item-modal[hidden]{display:none}
.item-modal-overlay{
    position:absolute;inset:0;
    background:rgba(0,0,0,0.88);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
.item-modal-box{
    position:relative;z-index:1;
    background:var(--coal-2);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-lg);
    max-width:480px;width:100%;
    max-height:90vh;overflow-y:auto;
    box-shadow:0 32px 80px rgba(0,0,0,0.8),0 0 50px rgba(245,168,0,0.08);
    animation:modal-in 0.22s var(--ease);
}
.item-modal-close{
    position:absolute;top:12px;right:12px;z-index:2;
    width:34px;height:34px;
    background:rgba(0,0,0,0.65);
    color:var(--white);border-radius:50%;
    font-size:20px;line-height:1;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    border:1px solid var(--glass-border);
    transition:background var(--transition),color var(--transition);
}
.item-modal-close:hover{background:rgba(245,168,0,0.25);color:var(--ember)}
.item-modal-img-wrap{
    width:100%;aspect-ratio:16/9;overflow:hidden;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    background:var(--coal-3);
}
.item-modal-img-wrap img{width:100%;height:100%;object-fit:cover}
.item-modal-content{padding:28px}
.item-modal-content h3{
    font-family:'Playfair Display',serif;
    font-size:24px;font-weight:800;
    color:var(--white);margin-bottom:12px;
}
.item-modal-desc{
    font-size:14px;color:var(--text-muted);
    line-height:1.7;margin-bottom:18px;
}
.item-modal-desc:empty{display:none}
.item-modal-price{font-size:26px;font-weight:800;color:var(--ember)}

/* ── Set Card ────────────────────────────────────────────── */
.set-card{
    background:var(--coal-2);
    border-radius:var(--radius);
    border:1px solid var(--glass-border);
    border-left:3px solid var(--ember);
    transition:transform var(--transition),box-shadow var(--transition),border-left-color var(--transition);
    cursor:pointer;position:relative;overflow:hidden;
}
.set-card::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(245,168,0,0.04) 0%,transparent 55%);
    pointer-events:none;
}
.set-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 44px rgba(0,0,0,0.55),0 0 24px rgba(245,168,0,0.10);
    border-left-color:var(--fire);
}
.set-card-body{padding:24px 26px}
.set-card-number{
    font-size:10px;font-weight:700;
    letter-spacing:0.15em;text-transform:uppercase;
    color:var(--ember);margin-bottom:8px;opacity:0.65;
}
.set-card-name{
    font-family:'Playfair Display',serif;
    font-size:18px;font-weight:700;
    color:var(--white);margin-bottom:12px;line-height:1.3;
}
.set-card-items{
    font-size:13px;color:var(--text-muted);
    line-height:1.8;margin-bottom:20px;
}
.set-card-footer{
    display:flex;justify-content:space-between;align-items:center;
    padding-top:16px;border-top:1px solid var(--glass-border);
}
.set-card-price{
    font-size:30px;font-weight:900;
    color:var(--ember);line-height:1;
}
.set-card-price span{font-size:17px;font-weight:700;margin-left:1px;opacity:0.75}

/* ── Bonus Section ───────────────────────────────────────── */
.bonus-section{padding:52px 24px 0}
.bonus-section-inner{
    max-width:1240px;margin:0 auto;
    background:var(--coal-2);
    border-radius:var(--radius);
    padding:32px 36px;
    border:1px solid var(--glass-border);
    border-top:2px solid var(--ember);
    position:relative;overflow:hidden;
}
.bonus-section-inner::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse 70% 80% at 50% 0%,rgba(245,168,0,0.04) 0%,transparent 65%);
    pointer-events:none;
}
.bonus-section-inner h3{
    font-family:'Playfair Display',serif;
    font-size:20px;font-weight:800;
    color:var(--white);margin-bottom:20px;
}
.bonus-list{display:flex;flex-direction:column;gap:10px}
.bonus-item{
    font-size:14px;font-weight:500;
    color:var(--text);
    padding:14px 18px;
    background:var(--glass);
    border-radius:var(--radius-sm);
    border:1px solid var(--glass-border);
    display:flex;align-items:center;gap:12px;
    transition:border-color var(--transition),background var(--transition);
}
.bonus-item:hover{border-color:rgba(245,168,0,0.25);background:var(--glass-hover)}
.bonus-item::before{content:'🎁';font-size:18px}

/* ── WhatsApp FAB ─────────────────────────────────────────── */
.whatsapp-fab{
    position:fixed;bottom:28px;right:24px;z-index:200;
    width:58px;height:58px;
    background:linear-gradient(135deg,#25D366,#128C7E);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 28px rgba(37,211,102,0.42);
    transition:transform var(--transition),box-shadow var(--transition);
}
.whatsapp-fab:hover{
    transform:scale(1.1) translateY(-3px);
    box-shadow:0 12px 36px rgba(37,211,102,0.58);
}
.whatsapp-fab svg{width:28px;height:28px;fill:white}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer{
    background:var(--coal-1);
    color:var(--text-muted);
    padding:64px 24px 32px;
    position:relative;
}
.site-footer::before{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(245,168,0,0.35),transparent);
}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-top{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr;
    gap:48px;margin-bottom:44px;
}
.footer-logo{
    width:130px;height:auto;
    mix-blend-mode:screen;
    margin-bottom:18px;
    /* filter YOK */
}
.footer-logo-text{
    display:none;
    font-family:'Playfair Display',serif;
    font-size:22px;font-weight:900;
    background:linear-gradient(135deg,var(--ember-light),var(--ember));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    margin-bottom:18px;
}
.footer-brand p{font-size:14px;line-height:1.75;color:var(--text-muted)}
.footer-section h4{
    font-size:11px;font-weight:700;
    letter-spacing:0.12em;text-transform:uppercase;
    color:var(--ember);margin-bottom:18px;
}
.footer-section ul li{font-size:14px;line-height:2.4}
.footer-section ul li a{transition:color var(--transition)}
.footer-section ul li a:hover{color:var(--ember)}
.footer-map-link{
    display:inline-flex;align-items:center;gap:6px;
    color:var(--text-muted);font-size:13px;
    margin-top:8px;
    transition:color var(--transition);
}
.footer-map-link:hover{color:var(--ember)}
.footer-bottom{
    padding-top:28px;
    border-top:1px solid var(--glass-border);
    text-align:center;font-size:12px;
    color:var(--text-dim);
}

/* ── Error Pages ─────────────────────────────────────────── */
.error-page{
    display:flex;align-items:center;justify-content:center;
    min-height:100vh;padding:40px 24px;
    background:var(--coal);text-align:center;
}
.error-inner{max-width:480px}
.error-code{
    font-family:'Playfair Display',serif;
    font-size:120px;font-weight:900;
    background:linear-gradient(135deg,var(--ember-light),var(--ember));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    line-height:1;margin-bottom:8px;
}
.error-msg{font-family:'Playfair Display',serif;font-size:24px;color:var(--white);margin-bottom:12px}
.error-sub{font-size:15px;color:var(--text-muted);margin-bottom:36px;line-height:1.6}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:900px){
    .footer-top{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:768px){
    .main-nav{display:none}
    .burger-btn{display:flex}

    .hero{min-height:90vh;padding:100px 20px 90px}
    .hero-logo{width:min(260px,65vw)}

    .footer-top{grid-template-columns:1fr;gap:32px}

    .menu-grid{grid-template-columns:1fr 1fr}
    .menu-grid.sets-grid{grid-template-columns:1fr}

    .features{padding:64px 20px}
    .cta-banner{padding:72px 20px}

    .flame-c.f1,.flame-c.f2,.flame-c.f8,.flame-c.f10{display:none}

    /* Cat-nav daha az padding — daha çox düymə görünsün */
    .cat-nav{padding:10px 12px}

    /* Modal touch-friendly */
    .item-modal{padding:12px}
    .item-modal-content{padding:20px}
}
@media (max-width:520px){
    .hero-actions{flex-direction:column;align-items:center}
    .btn{width:100%;justify-content:center;max-width:320px}
    .features-grid{grid-template-columns:1fr}
    .menu-grid{grid-template-columns:1fr}
    .bonus-section-inner{padding:24px 20px}

    /* Cat-nav düymələri kiçil */
    .cat-nav-btn{padding:7px 12px;font-size:12px}

    /* Modal başlığı kiçil */
    .item-modal-content h3{font-size:20px}
    .item-modal-price{font-size:22px}
}