/* Alça Kafe — QR menyu. Telefon üçün qurulub (qonaq masada QR-ı skan edir); masaüstündə iki sütun.
   Şəxsi demolar (/t/...) da bu stildir: --alca, --alcaAcik, --alcaUstu (rəng üstündə mətn), --alcaKolge restoranın rənginə görə dəyişir. */
:root{
  --fon:#FAF6EF; --kart:#FFFFFF; --ink:#2A1A16; --ink2:#645149; --ink3:#86756B; --xett:#ECE2D5;
  --alca:#8E1F3A; --alcaAcik:#F7E4E8; --alcaUstu:#fff; --alcaKolge:rgba(142,31,58,.65);
  --zeytun:#5C6A26; --zeytunAcik:#EDF0DC; --qizil:#8A5A0B; --qizilAcik:#FBEFD9;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--fon); color:var(--ink); font:16px/1.5 'Nunito', system-ui, sans-serif; -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%}
h1,h2,h3,p{margin:0}
.gizli{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ik{flex:none}
a,button,input{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--alca); outline-offset:2px}

/* Başlıq */
.kUst{display:flex; align-items:center; justify-content:space-between; padding:12px 16px}
.kLogo{display:inline-flex; align-items:center; gap:8px; color:var(--alca); text-decoration:none}
.kLogo span{font-size:24px; font-weight:700; letter-spacing:-.03em; color:var(--ink); line-height:1}
.kLogo small{margin-left:5px; font-size:15px; font-weight:500; letter-spacing:0; color:var(--ink3)}
.kDil{display:flex; padding:3px; border-radius:999px; background:var(--kart); border:1px solid var(--xett)}
.kDil a{padding:5px 11px; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--ink3); text-decoration:none}
.kDil a[aria-current]{background:var(--ink); color:var(--fon)}
/* Şəxsi demo: loqo şəkli və ya adın ilk hərfi; uzun ad bir sətirdə qısalır */
.kUstAd{gap:12px}
.kUstAd .kLogo{min-width:0}
.kUstAd .kLogo span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:21px; line-height:1.3}
.kLogoSekil{flex:none; width:auto; max-width:120px; height:36px; object-fit:contain; border-radius:8px}
.kHerf{flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--alca); color:var(--alcaUstu);
  font-size:17px; font-weight:800; line-height:1}

/* Kafe haqqında */
.kIc{padding:0 16px}
.kOrtu{margin:0; aspect-ratio:2/1; border-radius:18px; overflow:hidden; background:var(--xett)}
.kOrtu img{width:100%; height:100%; object-fit:cover}
.kHaqqinda{padding-top:14px}
.kHaqqinda h1{font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.15; overflow-wrap:anywhere}
.kSloqan{margin-top:2px; color:var(--ink2); font-size:15px}
.kMel{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px 16px; color:var(--ink2); font-size:14px}
.kMel li{display:inline-flex; align-items:center; gap:6px}
.kMel .ik{color:var(--ink3)}
.kWifi{margin-top:12px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; padding:10px 14px; border-radius:12px;
  background:var(--kart); border:1px solid var(--xett); font-size:14px; color:var(--ink3)}
.kWifi b{color:var(--ink); font-weight:600; margin-left:2px}
.kWifi .ik{color:var(--alca)}
/* Ofisiant düyməsi: telefonda ekranın altında sabit */
.kOfisiant{position:fixed; z-index:30; left:50%; bottom:calc(16px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 22px; min-height:50px; border-radius:999px;
  background:var(--alca); color:var(--alcaUstu); font-weight:600; font-size:15.5px; text-decoration:none; white-space:nowrap;
  box-shadow:0 14px 30px -12px var(--alcaKolge)}

/* Axtarış və kateqoriyalar */
.kAxtar{position:relative; display:block; margin-top:18px}
.kAxtar .ik{position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--ink3); pointer-events:none}
.kAxtar input{width:100%; height:48px; padding:0 14px 0 44px; border-radius:14px; border:1px solid var(--xett); background:var(--kart);
  font:inherit; font-size:16px; color:var(--ink); -webkit-appearance:none; appearance:none}
.kAxtar input::placeholder{color:var(--ink3)}
.kAxtar input:focus{outline:none; border-color:var(--ink)}
.kKat{position:sticky; top:0; z-index:20; display:flex; gap:8px; margin:0 -16px; padding:12px 16px; overflow-x:auto; background:var(--fon);
  scrollbar-width:none; -webkit-overflow-scrolling:touch}
.kKat::-webkit-scrollbar{display:none}
.kKat a{flex:none; padding:8px 15px; border-radius:999px; background:var(--kart); border:1px solid var(--xett);
  font-size:14.5px; font-weight:500; color:var(--ink2); text-decoration:none; transition:background-color .15s, color .15s}
.kKat a.akt{background:var(--ink); border-color:var(--ink); color:var(--fon)}

/* Yeməklər */
.kBolme{padding-top:14px; scroll-margin-top:62px}
.kBolme h2{font-size:20px; font-weight:700; letter-spacing:-.01em}
.kBolme h2 small{margin-left:6px; font-size:13.5px; font-weight:500; color:var(--ink3)}
.kList{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:10px}
.kYemek{display:grid; grid-template-columns:1fr 104px; align-items:center; gap:14px; width:100%; padding:12px 12px 12px 16px; border-radius:16px;
  border:1px solid var(--xett); background:var(--kart); color:inherit; font:inherit; text-align:left; cursor:pointer; transition:border-color .15s}
.kYemek:hover{border-color:#D6C7B4}
.kYemek img{width:104px; height:104px; border-radius:12px; object-fit:cover; background:var(--xett)}
.kYemekSekilsiz{grid-template-columns:minmax(0, 1fr); padding:14px 16px}
.kYMetn{display:flex; flex-direction:column; gap:3px; min-width:0}
.kEt{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:2px}
.kEt i{font-style:normal; font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:999px}
.e-sef{background:var(--qizilAcik); color:var(--qizil)}
.e-yeni{background:var(--alcaAcik); color:var(--alca)}
.e-veg{background:var(--zeytunAcik); color:var(--zeytun)}
.kYAd{font-size:16px; font-weight:600; line-height:1.3; overflow-wrap:anywhere}
.kYT{font-size:13.5px; color:var(--ink2); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.kYQ{display:flex; align-items:baseline; gap:8px; margin-top:4px}
.kYQ b{font-size:16.5px; font-weight:700}
.kYQ small{font-size:12.5px; color:var(--ink3)}
.kBos{margin-top:24px; padding:24px; text-align:center; color:var(--ink2); border:1px dashed var(--xett); border-radius:16px}
.kQeyd{margin-top:28px; font-size:13.5px; color:var(--ink3)}
.kAlt{margin-top:8px; padding-bottom:110px; font-size:12.5px; color:var(--ink3)}

/* Yemək pəncərəsi: telefonda aşağıdan açılan vərəq, masaüstündə mərkəzdə */
.kDetal{padding:0; border:0; width:100%; max-width:560px; margin:auto auto 0; border-radius:22px 22px 0 0; background:var(--kart); color:var(--ink); overflow:hidden}
.kDetal::backdrop{background:rgba(42,26,22,.5)}
.kDetal[open]{animation:vereq .28s cubic-bezier(.2,.8,.2,1)}
@keyframes vereq{from{transform:translateY(40px); opacity:.4}}
.kDetal img{width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--xett)}
.kDIc{padding:20px 22px calc(28px + env(safe-area-inset-bottom))}
.kDEt{font-size:13px; font-weight:600; color:var(--alca); min-height:1px}
.kDetal h3{margin-top:4px; font-size:24px; font-weight:700; letter-spacing:-.02em; line-height:1.2; overflow-wrap:anywhere}
.kDetalSekilsiz .kDIc{padding-top:60px}
.kDT{margin:8px 0 16px; color:var(--ink2); font-size:15.5px}
.kDQ b{font-size:22px; font-weight:700}
.kDQ small{margin-left:8px; font-size:14px; color:var(--ink3)}
.kDetal form{position:absolute; top:12px; right:12px; margin:0}
.kDBagla{width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(255,255,255,.92); color:var(--ink); cursor:pointer}

@media(min-width:960px){
  .kUst{max-width:1240px; margin:0 auto; padding:20px 32px 16px}
  .kIc{max-width:1240px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:330px 1fr; gap:40px; align-items:start}
  .kYan{position:sticky; top:16px}
  .kOrtu{aspect-ratio:4/3}
  .kHaqqinda h1{font-size:30px}
  .kOfisiant{position:static; transform:none; width:100%; margin-top:14px; box-shadow:none}
  .kAxtar{margin-top:0}
  .kKat{margin:0; padding:12px 0}
  .kList{grid-template-columns:repeat(2, 1fr); gap:12px}
  .kYemek{grid-template-columns:1fr 112px; min-height:138px}
  .kYemek img{width:112px; height:112px}
  .kYemekSekilsiz{grid-template-columns:minmax(0, 1fr)}
  .kAlt{padding-bottom:40px}
  .kDetal{margin:auto; border-radius:20px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto} .kDetal[open]{animation:none}}