@font-face {
    font-family: 'Ungai';
    src: url('../../fonts/ungai/Hiraikana-j9ne7.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
* {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
:root{
--bg:#080808;
--surface:#101010;
--surface2:#151515;
--border:#222222;
--border-light:#333333;
--red:#b83324;
--red-light:#d94534;
--gold:#d4af37;
--text:#f0f0f0;
--text-muted:#999999;
--text-dim:#666666;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Cormorant Garamond',serif;font-size:0.5rem;line-height:1.6;min-height:100vh;overflow-x:hidden;display:flex;flex-direction:column}
.page-header{
position:relative;height:360px;display:flex;align-items:center;justify-content:center;overflow:hidden;
background:linear-gradient(135deg,#080808 0%,#140505 50%,#080808 100%);
}
.page-header::before{
content:'';position:absolute;inset:0;
background:url('../img/hero.svg') center/cover;
opacity:0.12;transition:transform 0.1s linear;
}
.page-header-content{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;}
.page-header-content h1{
font-family:'Ungai' ;font-size:4.5rem;color:var(--text);letter-spacing:0.02em;line-height:1;
text-shadow:0 0 40px rgba(184,51,36,0.3);
}
.page-header-content span{
font-family:'Ungai';font-size:2.2rem;color:var(--red-light);
}
.header-line{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--red),transparent);margin:8px auto}

.btn-wa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.55rem;
    font-family: 'Josefin Sans', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-light);
    padding: 10px 24px;
    border-radius: 40px;
    letter-spacing: 0.15em;
    transition: all 0.3s ease;
    margin-top: 4px;
}
.btn-wa:hover {
    color: #25D366;
    border-color: #25D366;
    background: rgba(37, 211, 102, 0.05);
    transform: translateY(-2px);
}
.btn-wa svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.social-wrap {
    display: flex;
    gap: 14px;
    margin-top: 6px;
}
.btn-social {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-light);
    border-radius: 50%;
    transition: all 0.3s ease;
}
.btn-social svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    transition: transform 0.3s ease;
}
.btn-social:hover {
    transform: translateY(-3px);
}
.btn-fb:hover {
    color: #1877F2;
    border-color: #1877F2;
    background: rgba(24, 119, 242, 0.05);
}
.btn-ig:hover {
    color: #E4405F;
    border-color: #E4405F;
    background: rgba(228, 64, 95, 0.05);
}

.schedule-container {
    position: fixed;
    top: 4px;
    right: 4px;
    z-index: 1000;
    font-family: 'Josefin Sans', sans-serif;
    background: rgba(16, 16, 16, 0.85);
    backdrop-filter: blur(5px);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
.schedule-header {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 14px;
}
.status-dot {
    width: 8px;
    height: 8px;
    background-color: #25D366;
    border-radius: 50%;
    box-shadow: 0 0 8px #25D366;
}
.schedule-text {
    font-size: 0.5rem;
    color: var(--text);
    letter-spacing: 0.05em;
}
.chevron {
    transition: transform 0.3s ease;
    stroke: var(--text-muted);
}
.schedule-container.open .chevron {
    transform: rotate(180deg);
}
.schedule-dropdown {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: rgba(16, 16, 16, 0.95);
    border-top: none;
    border-radius: 0 0 8px 8px;
}
.schedule-container.open .schedule-dropdown {
    max-height: 250px;
    border-top: 1px solid var(--border-light);
}
.schedule-dropdown li {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 0.55rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.schedule-dropdown li:last-child {
    border-bottom: none;
}
.schedule-dropdown li span:first-child {
    color: var(--text);
    margin-right: 15px;
}

.menu-wrapper{max-width:1100px;margin:0 auto;padding:0 16px 60px;flex:1;}
.section-block{margin-bottom:0}
.section-hero{
position:relative;height:120px;display:flex;align-items:center;justify-content:center;
overflow:hidden;margin:0 -16px;cursor:default;
}
.section-hero-img{
position:absolute;inset:0;background-size:cover;background-position:center;
transition:transform 0.6s ease;will-change:transform;
}
.section-hero::after{
content:'';position:absolute;inset:0;
background:linear-gradient(to bottom,rgba(0,0,0,0.72) 0%,rgba(8,8,8,0.95) 100%);
}
.section-hero-title{
position:relative;z-index:2;text-align:center;
}
.section-hero-title .t1{
font-family:'Ungai';font-size:2rem;color:#fff;display:block;
text-shadow:0 2px 20px rgba(184,51,36,0.6);letter-spacing:0.03em;
}
.section-hero-title .t2{
font-family:'Josefin Sans',sans-serif;font-size:0.6rem;color:var(--red-light);
letter-spacing:0.35em;text-transform:uppercase;display:block;margin-top:2px;
}
.columns-wrapper{
display:grid;grid-template-columns:1fr 1fr;
border:1px solid var(--border);border-top:none;
}
.col-single{grid-template-columns:1fr}
.menu-col{border-right:1px solid var(--border)}
.menu-col:last-child{border-right:none}
.menu-item{
display:grid;grid-template-columns:90px 1fr auto 24px;
align-items:center;gap:8px;
padding:10px 16px;
border-bottom:1px solid var(--border);
transition:background 0.3s ease;
}
.menu-item:last-child{border-bottom:none}
.menu-item:hover{background:rgba(255,255,255,0.02)}
.item-name{
font-family:'Josefin Sans',sans-serif;font-size:0.55rem;font-weight:400;
color:var(--text);letter-spacing:0.06em;line-height:1.3;
}
.item-ingredients{
font-size:0.6rem;color:var(--text-muted);line-height:1.35;
}
.item-ingredients em{color:var(--text-dim);font-style:normal}
.item-price{
font-family:'Josefin Sans',sans-serif;font-size:0.65rem;
color:var(--gold);white-space:nowrap;font-weight:300;letter-spacing:0.04em;
}
.img-btn{
width:20px;height:20px;background:none;border:1px solid var(--border-light);
border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:all 0.3s ease;padding:0;flex-shrink:0;
}
.img-btn:hover{border-color:var(--red);background:rgba(184,51,36,0.1);transform:scale(1.1);}
.img-btn svg{width:10px;height:10px;stroke:var(--text-muted);transition:stroke 0.3s}
.img-btn:hover svg{stroke:var(--red-light)}
.modal-overlay{
position:fixed;inset:0;background:rgba(0,0,0,0);
z-index:1000;display:flex;align-items:center;justify-content:center;
pointer-events:none;transition:background 0.35s ease;
}
.modal-overlay.active{background:rgba(0,0,0,0.92);pointer-events:all;backdrop-filter:blur(3px);}
.modal-box{
background:var(--surface);border:1px solid var(--border-light);
max-width:420px;width:90%;
transform:translateY(24px) scale(0.96);opacity:0;
transition:transform 0.38s cubic-bezier(0.16,1,0.3,1),opacity 0.32s ease;
overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,0.6);
}
.modal-overlay.active .modal-box{transform:translateY(0) scale(1);opacity:1}
.modal-img-wrap{position:relative;height:240px;overflow:hidden;background:#0d0d0d}
.modal-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.6s ease}
.modal-img-wrap:hover img{transform:scale(1.04)}
.modal-img-placeholder{
width:100%;height:100%;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#111 0%,#1a0a0a 100%);
}
.modal-img-placeholder svg{width:48px;height:48px;stroke:var(--border-light);stroke-width:1}
.modal-info{padding:20px}
.modal-info h2{
font-family:'Josefin Sans',sans-serif;font-size:1.6rem;color:var(--text);margin-bottom:4px;line-height:1;
}
.modal-info .modal-cat{
font-family:'Josefin Sans',sans-serif;font-size:0.45rem;color:var(--red-light);
letter-spacing:0.3em;text-transform:uppercase;margin-bottom:12px;display:block;
}
.modal-rows{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.modal-row-label{
font-family:'Josefin Sans',sans-serif;font-size:0.42rem;color:var(--text-dim);
letter-spacing:0.2em;text-transform:uppercase;margin-bottom:4px;
}
.modal-row-val{font-size:0.65rem;color:var(--text-muted);line-height:1.4}
.modal-price-row{
display:flex;align-items:center;justify-content:space-between;
border-top:1px solid var(--border);padding-top:14px;
}
.modal-price{font-family:'Josefin Sans',sans-serif;font-size:1rem;color:var(--gold);letter-spacing:0.04em}
.modal-close{
background:none;border:1px solid var(--border-light);padding:8px 16px;cursor:pointer;
font-family:'Josefin Sans',sans-serif;font-size:0.45rem;letter-spacing:0.2em;
text-transform:uppercase;color:var(--text-muted);transition:all 0.3s ease;border-radius:20px;
}
.modal-close:hover{border-color:var(--red);color:var(--red);background:rgba(184,51,36,0.05)}
.grain{
position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:0.025;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
background-repeat:repeat;background-size:128px;
}
.missing-img-msg {
    width:100%;height:100%;display:flex;align-items:center;justify-content:center;
    text-align:center;font-family:'Josefin Sans',sans-serif;font-size:0.6rem;
    color:var(--text-dim);padding:20px;background:#0d0d0d;letter-spacing:0.05em;text-transform:uppercase;
}
.page-footer {
    border-top: 1px solid var(--border-light);
    padding: 30px 16px;
    text-align: center;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 0.5rem;
    color: var(--text-dim);
    background: #060606;
}
.page-footer p {
    margin-bottom: 6px;
    letter-spacing: 0.05em;
}
.page-footer p:last-child {
    margin-bottom: 0;
}
.page-footer a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}
.page-footer a:hover {
    color: var(--red-light);
}
@media(max-width:700px){
.page-header{height:280px}
.page-header-content h1{font-size:3rem}
.section-hero{height:100px}
.section-hero-title .t1{font-size:1.6rem}
.columns-wrapper{grid-template-columns:1fr}
.menu-col{border-right:none;border-bottom:1px solid var(--border)}
.menu-col:last-child{border-bottom:none}
.menu-item{grid-template-columns:80px 1fr auto 20px;padding:10px 12px}
.modal-rows{grid-template-columns:1fr}
}
@media(max-width:400px){
.menu-item{grid-template-columns:70px 1fr auto 20px;gap:6px;padding:8px 10px}
.section-hero-title .t1{font-size:1.4rem}
}

#scroll-indicator {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 0.5s ease;
    z-index: 100;
    cursor: pointer;
    color: var(--text-muted);
}
#scroll-indicator .text {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}
#scroll-indicator .icon {
    width: 30px;
    height: 45px;
    border: 2px solid var(--text-muted);
    border-radius: 20px;
    position: relative;
}
#scroll-indicator .icon::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--text-muted);
    margin-left: -3px;
    top: 8px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    animation: move-down 2s infinite;
}
@keyframes move-down {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(20px); opacity: 0; }
}
.hidden {
    opacity: 0 !important;
    pointer-events: none;
}