:root{
--bg:#0d3620;
--bg-dark:#082415;
--gold:#e0c070;
--gold-soft:#b8993f;
--text:#f7f1d0;
--card-bg:rgba(255,255,255,.04);
--border:rgba(224,192,112,.25);
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,
body{
min-height:100%;
}

body{
background:var(--bg);
color:var(--text);
font-family:'Kalameh',Tahoma,sans-serif;
direction:rtl;
display:flex;
flex-direction:column;
}

/* ==========================
ساختار کلی
========================== */

.page-layout{
flex:1;
display:flex;
justify-content:center;
align-items:stretch;
width:100%;
padding:20px 0;
}

.main-container{
width:100%;
max-width:1100px;
padding:25px 40px;
position:relative;
z-index:2;
}

/* ==========================
تصاویر کناری
========================== */

.side-strip{
width:189px;
flex-shrink:0;
display:flex;
justify-content:center;
align-items:stretch;
overflow:hidden;
pointer-events:none;
}

.side-strip img{
width:100%;
height:100%;
display:block;
object-fit:contain;
object-position:center top;
}

/* ==========================
هدر
========================== */

.site-header{
text-align:center;
margin-bottom:35px;
}

.logo-box{
width:140px;
height:140px;
margin:auto;
border-radius:50%;
overflow:hidden;
border:4px solid var(--gold);
background:#fff;
box-shadow:0 0 25px rgba(224,192,112,.4);
}

.logo-box img{
width:100%;
height:100%;
object-fit:cover;
}

.site-title{
margin-top:18px;
color:var(--gold);
font-size:34px;
font-weight:700;
}

.site-subtitle{
margin-top:8px;
color:#d8c78e;
font-size:18px;
}

/* ==========================
تب ها
========================== */

.tabs-section{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:30px;
}

.tab-button{
border:none;
background:var(--gold);
color:#0d3620;
padding:12px 24px;
border-radius:10px;
cursor:pointer;
font-family:inherit;
font-size:16px;
font-weight:bold;
transition:.3s;
}

.tab-button:hover{
background:#f0d690;
transform:translateY(-2px);
}

.tab-button.active{
background:var(--gold-soft);
color:#fff;
box-shadow:0 0 18px rgba(224,192,112,.4);
}

/* ==========================
تب ها
========================== */

.tab-panel{
display:none;
}

.tab-panel.active{
display:block;
}

/* ==========================
محصولات
========================== */

.menu-card{
display:flex;
align-items:center;
gap:20px;
background:var(--card-bg);
border:1px solid var(--border);
border-radius:16px;
padding:18px;
margin-bottom:15px;
backdrop-filter:blur(4px);
transition:.3s;
}

.menu-card:hover{
transform:translateY(-3px);
border-color:var(--gold);
}

.menu-image{
width:110px;
height:110px;
flex-shrink:0;
overflow:hidden;
border-radius:12px;
}

.menu-image img{
width:100%;
height:100%;
object-fit:cover;
}

.menu-content{
flex:1;
}

.menu-title{
margin-bottom:8px;
font-weight:bold;
line-height:1.6;
}

.menu-description{
line-height:1.9;
opacity:.95;
}

.menu-price{
min-width:120px;
text-align:left;
font-weight:bold;
white-space:nowrap;
}

.empty-menu{
text-align:center;
padding:40px;
border:1px dashed var(--gold);
border-radius:12px;
color:var(--gold);
}

/* ==========================
فوتر
========================== */

.site-footer{
margin-top:auto;
text-align:center;
padding:25px 15px;
}

.footer-image{
width:100%;
max-width:600px;
height:auto;
display:block;
margin:0 auto 15px;
}

.footer-text{
color:var(--gold);
font-size:15px;
}

/* ==========================
تبلت
========================== */

@media (max-width:1200px){

.side-strip{
width:80px;
}

}

/* ==========================
موبایل
========================== */

@media (max-width:768px){

.page-layout{
padding:10px 0;
}

.side-strip{
width:45px;
}

.main-container{
padding:15px;
}

.logo-box{
width:90px;
height:90px;
}

.site-title{
font-size:24px;
}

.site-subtitle{
font-size:14px;
}

.menu-card{
flex-wrap:wrap;
gap:12px;
}

.menu-image{
width:80px;
height:80px;
}

.menu-content{
width:calc(100% - 95px);
}

.menu-price{
width:100%;
text-align:center;
padding-top:10px;
border-top:1px solid rgba(255,255,255,.08);
}

.tab-button{
padding:10px 18px;
font-size:14px;
}

.footer-image{
max-width:280px;
}

}