/* Rahmat Shef — mijoz menyusi */
:root{
  --bg:#100E0C; --bg2:#171310; --card:#1D1815; --card2:#241E19;
  --line:#2E2620; --text:#F6F0E7; --dim:#A99C8D; --dim2:#7C7166;
  --gold:#D9A441; --gold-soft:rgba(217,164,65,.14);
  --radius:16px; --shadow:0 8px 28px rgba(0,0,0,.4);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.45; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}

/* ---------- yuklanish ---------- */
#splash{position:fixed;inset:0;background:var(--bg);display:grid;place-items:center;z-index:100;transition:opacity .4s}
#splash.gone{opacity:0;pointer-events:none}
.spin{width:38px;height:38px;border:3px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- sarlavha ---------- */
.hero{position:relative;padding:64px 18px 18px;text-align:center;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 80% at 50% 0%,var(--gold-soft),transparent 70%)}
.hero>*{position:relative;z-index:1}
.hero-cover{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.28;filter:saturate(.9)}
.hero-cover+.hero-veil{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(16,14,12,.55),var(--bg))}
.logo{width:72px;height:72px;margin:0 auto 10px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);background:var(--card)}
.logo.wide{width:auto;height:auto;max-width:270px;max-height:100px;border:0;border-radius:0;background:none;margin-bottom:4px}
.hero.has-mark h1{display:none}
.hero.has-mark p{margin-top:2px}
.logo-txt{width:72px;height:72px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;
  border:2px solid var(--gold);font-size:30px;background:var(--card)}
.hero h1{margin:0;font-size:27px;font-weight:700;letter-spacing:.4px}
.hero p{margin:5px 0 0;color:var(--dim);font-size:13.5px}
.hero-info{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:12px;color:var(--dim);font-size:12.5px}
.hero-info span{display:inline-flex;align-items:center;gap:5px}

/* ---------- til / qidiruv ---------- */
.topbar{position:absolute;top:14px;left:14px;right:14px;z-index:3;display:flex;justify-content:space-between;align-items:center}
.lang{display:flex;background:rgba(0,0,0,.42);border:1px solid var(--line);border-radius:999px;padding:3px;backdrop-filter:blur(8px)}
.lang button{padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--dim)}
.lang button.on{background:var(--gold);color:#1A1207}
.icon-btn{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.42);border:1px solid var(--line);backdrop-filter:blur(8px);font-size:16px}

/* ---------- qidiruv paneli ---------- */
.search{display:none;padding:0 16px 12px}
.search.on{display:block}
.search input{width:100%;padding:12px 16px;border-radius:12px;background:var(--card);
  border:1px solid var(--line);color:var(--text);outline:none}
.search input:focus{border-color:var(--gold)}

/* ---------- bo'lim tugmalari ---------- */
.tabs{position:sticky;top:0;z-index:20;background:rgba(16,14,12,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);padding:10px 0}
.tabs-scroll{display:flex;gap:8px;overflow-x:auto;padding:0 16px;scrollbar-width:none}
.tabs-scroll::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;padding:8px 15px;border-radius:999px;background:var(--card);border:1px solid var(--line);
  font-size:13.5px;font-weight:500;color:var(--dim);white-space:nowrap;transition:.2s}
.tab.on{background:var(--gold);border-color:var(--gold);color:#1A1207;font-weight:600}

/* ---------- menyu ---------- */
main{padding:8px 16px calc(40px + var(--safe-b))}
.cat{margin-top:22px;scroll-margin-top:70px}
.cat-title{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:19px;font-weight:700}
.cat-title small{color:var(--dim2);font-size:12px;font-weight:500}
.items{display:grid;gap:11px}
@media(min-width:700px){.items{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.items{grid-template-columns:repeat(3,1fr)}main{max-width:1200px;margin:0 auto}}

.item{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:11px;transition:.18s;text-align:left;width:100%;align-items:center}
.item:active{transform:scale(.985);background:var(--card2)}
.item-img{width:82px;height:82px;flex:0 0 82px;border-radius:12px;object-fit:cover;background:var(--card2)}
.item-img.ph{display:grid;place-items:center;font-size:26px;opacity:.35}
.item-b{flex:1;min-width:0}
.item-name{font-weight:600;font-size:15px;margin:0 0 3px}
.item-desc{color:var(--dim);font-size:12.5px;margin:0 0 6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item-bot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.price{color:var(--gold);font-weight:700;font-size:15.5px;white-space:nowrap}
.price s{color:var(--dim2);font-weight:400;font-size:12.5px;margin-left:5px}
.weight{color:var(--dim2);font-size:11.5px}
.tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;letter-spacing:.3px;text-transform:uppercase}
.tag.hit{background:rgba(217,164,65,.16);color:var(--gold)}
.tag.new{background:rgba(90,190,130,.16);color:#6CCF95}
.tag.spicy{background:rgba(220,90,70,.16);color:#EC7A66}
.tag.veg{background:rgba(120,190,90,.16);color:#8FCB63}
.item.out{opacity:.45}
.item.out .price::after{content:" ";}

/* ---------- taom oynasi ---------- */
.modal{position:fixed;inset:0;z-index:60;display:none}
.modal.on{display:block}
.modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(3px)}
.modal-card{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:520px;
  background:var(--bg2);border-radius:22px 22px 0 0;overflow:hidden;max-height:92vh;overflow-y:auto;
  animation:up .28s cubic-bezier(.2,.9,.3,1);padding-bottom:var(--safe-b)}
@keyframes up{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
@media(min-width:700px){.modal-card{bottom:auto;top:50%;transform:translate(-50%,-50%);border-radius:22px}
  @keyframes up{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}}
.modal-img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--card2)}
.modal-body{padding:18px 20px 24px}
.modal-body h2{margin:0 0 6px;font-size:21px}
.modal-body .d{color:var(--dim);font-size:14px;margin:0 0 14px}
.modal-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding-top:14px;border-top:1px solid var(--line)}
.modal-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.55);display:grid;place-items:center;font-size:17px;backdrop-filter:blur(6px)}

/* ---------- holat ---------- */
.empty{text-align:center;padding:60px 24px;color:var(--dim)}
.empty div{font-size:44px;margin-bottom:12px;opacity:.5}
.offline{position:fixed;bottom:calc(14px + var(--safe-b));left:50%;transform:translateX(-50%);z-index:50;
  background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:7px 15px;
  font-size:12.5px;color:var(--dim);box-shadow:var(--shadow);display:none}
.offline.on{display:block}

/* ---------- pastki ma'lumot ---------- */
footer{text-align:center;padding:30px 20px calc(34px + var(--safe-b));color:var(--dim2);
  font-size:12.5px;border-top:1px solid var(--line);margin-top:30px}
footer a{color:var(--gold);text-decoration:none}
.foot-links{display:flex;gap:10px;justify-content:center;margin-bottom:12px;flex-wrap:wrap}
.foot-links a{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);color:var(--text);font-size:13px}