/* Bi Kadeh — misafir menüsü
   Koyu tema: akşam salonu. Telefonda tam ekran çalışır. */
:root{
  --zemin:#071316; --yuzey:#0B181C; --yuzey2:#102229;
  --yazi:#F1EEE4; --yazi-sonuk:#B9C7C9; --sonuk:#8CA3A8; --silik:#6F868B;
  --pirinc:#D6B570; --pirinc-ac:#EDD8A6; --pirinc-yumusak:rgba(214,181,112,.14);
  --cizgi:rgba(255,255,255,.07); --cizgi-pirinc:rgba(214,181,112,.28);
  --iyi:#83BF9F; --uyari:#DCA05C; --kotu:#D9765F;
}
*{box-sizing:border-box}
*{scrollbar-width:none; -ms-overflow-style:none}
::-webkit-scrollbar{width:0; height:0; display:none}

html,body{height:100%}
body{
  margin:0; background:var(--zemin); color:var(--yazi);
  font-family:'Karla','Noto Sans Georgian','Noto Sans Arabic',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
h1,h2,h3{font-family:'Gilda Display',Georgia,serif; font-weight:400; margin:0; text-wrap:balance}
button,input,select{font-family:inherit; font-size:inherit}
:focus-visible{outline:2px solid var(--pirinc); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
.ka{font-family:'Noto Sans Georgian','Karla',sans-serif}
.ar{font-family:'Noto Sans Arabic','Karla',sans-serif}
[dir="rtl"]{font-family:'Noto Sans Arabic','Karla',sans-serif}

#uyg{height:100vh; height:100dvh; min-height:520px; display:flex; flex-direction:column; overflow:hidden; max-width:560px; margin:0 auto;
  position:relative; background:var(--zemin)}
.ekran{display:none; flex-direction:column; height:100%; min-height:0}
.ekran.acik{display:flex; animation:bel .26s ease}
@keyframes bel{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

/* ---- dil ekranı ---- */
.dil-ekran{justify-content:center; gap:26px; padding:30px 26px; text-align:center;
  background:radial-gradient(120% 80% at 50% 0%, rgba(214,181,112,.16), transparent 62%), linear-gradient(var(--yuzey), #050D10)}
.marka{display:flex; flex-direction:column; align-items:center; gap:11px; color:var(--pirinc)}
.marka svg{width:38px; height:49px}
.marka .ad{font-family:'Gilda Display',Georgia,serif; font-size:2.4rem; color:var(--yazi); line-height:1}
.marka .alt{font-size:.7rem; letter-spacing:.24em; text-transform:uppercase}
.soru{font-size:.8rem; color:var(--sonuk); margin:0 0 11px}
.diller{display:flex; flex-direction:column; gap:8px}
.dil-dugme{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 18px;
  border-radius:12px; background:rgba(241,238,228,.05); border:1px solid var(--cizgi-pirinc);
  color:var(--yazi); text-decoration:none; transition:background .16s, border-color .16s}
.dil-dugme:active,.dil-dugme:hover{background:var(--pirinc-yumusak); border-color:var(--pirinc)}
.d-ad{font-weight:600}
.d-kod{font-size:.68rem; letter-spacing:.12em; color:var(--sonuk)}
.masa-yaz{font-size:.76rem; color:var(--sonuk); letter-spacing:.06em}

/* ---- üst çubuk ---- */
.ust-cubuk{display:flex; align-items:center; gap:11px; flex:none;
  padding:calc(12px + env(safe-area-inset-top)) 16px 11px;
  background:var(--yuzey); border-bottom:1px solid var(--cizgi-pirinc)}
.ust-cubuk .kim{flex:1; min-width:0}
.ust-cubuk .kim b{display:block; font-family:'Gilda Display',Georgia,serif; font-weight:400; font-size:1.14rem; line-height:1.2}
.ust-cubuk .kim span{display:block; font-size:.69rem; color:var(--sonuk); letter-spacing:.08em; text-transform:uppercase}
.geri{background:none; border:none; color:var(--pirinc); font-size:1.6rem; line-height:1; padding:0 4px; cursor:pointer}
.dil-rozet{font-size:.68rem; letter-spacing:.1em; color:var(--pirinc); border:1px solid var(--cizgi-pirinc);
  padding:5px 9px; border-radius:6px; text-decoration:none; flex:none}
.sepet-dugme{position:relative; background:var(--pirinc-yumusak); border:1px solid var(--cizgi-pirinc);
  color:var(--pirinc); width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex:none; cursor:pointer}
.sepet-dugme svg{width:18px; height:18px}
.sepet-dugme .sayi{position:absolute; top:-6px; inset-inline-end:-6px; min-width:19px; height:19px; padding:0 5px;
  border-radius:99px; background:var(--pirinc); color:#071316; font-size:.68rem; font-weight:700;
  display:grid; place-items:center; font-variant-numeric:tabular-nums}
.sepet-dugme .sayi[hidden]{display:none}

/* ---- kategoriler: alt alta şerit ---- */
.kat-ust{padding:18px 16px 10px; flex:none}
.kat-ust h2{font-size:1.7rem}
.kat-ust p{margin:3px 0 0; font-size:.82rem; color:var(--sonuk)}
.kat-liste{flex:1; overflow-y:auto; padding:4px 14px calc(20px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:9px}
.kat-serit{position:relative; height:88px; flex:none; width:100%; border:none; padding:0; cursor:pointer;
  border-radius:13px; overflow:hidden; display:flex; align-items:center; text-align:start; color:inherit;
  background:none; box-shadow:inset 0 0 0 1px var(--cizgi-pirinc); transition:transform .16s, box-shadow .16s}
.kat-serit:active{transform:scale(.985)}
.kat-serit svg,.kat-serit img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.kat-serit .perde{position:absolute; inset:0;
  background:linear-gradient(to right,#050D10 26%, rgba(5,13,16,.72) 58%, rgba(5,13,16,.25) 100%)}
[dir="rtl"] .kat-serit .perde{background:linear-gradient(to left,#050D10 26%, rgba(5,13,16,.72) 58%, rgba(5,13,16,.25) 100%)}
.kat-serit .yz{position:relative; z-index:2; padding:0 15px; flex:1; min-width:0}
.k-ad{display:block; font-family:'Gilda Display',Georgia,serif; font-size:1.18rem; line-height:1.2; color:var(--yazi)}
.k-say{display:block; font-size:.73rem; color:var(--pirinc); margin-top:2px}
.kat-serit .ok{position:relative; z-index:2; color:var(--pirinc); font-size:1.3rem; padding:0 15px; line-height:1; opacity:.75}
.bos-yazi{color:var(--silik); text-align:center; padding:50px 20px; font-size:.9rem}

/* ---- içerik çubuğu ---- */
.icerik-cubuk{display:flex; align-items:center; gap:9px; padding:9px 14px; flex:none;
  background:var(--yuzey); border-bottom:1px solid var(--cizgi)}
.ok-dugme{background:var(--pirinc-yumusak); border:1px solid var(--cizgi-pirinc); color:var(--pirinc);
  width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:1.1rem; line-height:1;
  flex:none; display:grid; place-items:center}
.icerik-cubuk .orta{flex:1; text-align:center; min-width:0}
.icerik-cubuk .orta b{display:block; font-family:'Gilda Display',Georgia,serif; font-weight:400; font-size:1.12rem; line-height:1.2}
.noktalar{display:flex; gap:4px; justify-content:center; margin-top:4px}
.noktalar i{width:5px; height:5px; border-radius:50%; background:rgba(241,238,228,.24); display:block; transition:all .2s}
.noktalar i.on{background:var(--pirinc); width:14px; border-radius:99px}

/* ---- ürün listesi ---- */
.liste{flex:1; overflow-y:auto; padding:4px 14px calc(18px + env(safe-area-inset-bottom)); touch-action:pan-y}
.liste.kay-sol{animation:kaySol .26s ease}
.liste.kay-sag{animation:kaySag .26s ease}
@keyframes kaySol{from{opacity:0; transform:translateX(34px)}to{opacity:1; transform:none}}
@keyframes kaySag{from{opacity:0; transform:translateX(-34px)}to{opacity:1; transform:none}}
.satir{display:grid; grid-template-columns:68px 1fr auto; gap:13px; align-items:center; width:100%;
  padding:11px 6px; background:none; border:none; border-bottom:1px solid rgba(255,255,255,.055);
  cursor:pointer; text-align:start; color:inherit}
.satir:active{background:var(--pirinc-yumusak)}
.kucuk{width:68px; height:68px; border-radius:12px; flex:none; overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--cizgi-pirinc); background:var(--yuzey2)}
.kucuk svg,.kucuk img{display:block; width:100%; height:100%; object-fit:cover}
.orta-alan{min-width:0}
.s-ad{display:block; font-weight:600; font-size:.96rem; line-height:1.3}
.s-ac{display:block; font-size:.79rem; color:var(--sonuk); line-height:1.4; margin-top:3px}
.s-fiyat{font-weight:700; font-size:.96rem; color:var(--pirinc); white-space:nowrap; font-variant-numeric:tabular-nums}
[dir="rtl"] .s-fiyat,[dir="rtl"] .u-fiyat,[dir="rtl"] .c-fiyat{direction:ltr; unicode-bidi:embed}
.etiketler{display:flex; gap:5px; flex-wrap:wrap; margin-top:6px}
.etiket{font-size:.63rem; padding:2px 6px; border-radius:4px; background:rgba(241,238,228,.08); color:var(--yazi-sonuk)}
.etiket.bitti{background:rgba(217,118,95,.16); color:var(--kotu)}
.satir.pasif{opacity:.45; pointer-events:none}
.ipucu{text-align:center; font-size:.72rem; color:var(--silik); padding:10px}

/* ---- ürün detayı ---- */
.u-gorsel{height:210px; flex:none; position:relative; overflow:hidden; background:var(--yuzey2)}
.u-gorsel svg,.u-gorsel img{width:100%; height:100%; display:block; object-fit:cover}
.u-gorsel::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,var(--zemin) 5%, transparent 60%)}
.u-govde{flex:1; overflow-y:auto; padding:0 20px 18px; margin-top:-42px; position:relative; z-index:2}
.u-govde h3{font-size:1.55rem; margin-bottom:4px}
.u-fiyat{color:var(--pirinc); font-weight:700; font-size:1.15rem; font-variant-numeric:tabular-nums}
.u-govde p{color:var(--yazi-sonuk); font-size:.88rem; margin:12px 0 0}
.alan{margin-top:18px}
.alan label{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sonuk); display:block; margin-bottom:7px}
.alan input{width:100%; padding:12px 13px; border-radius:9px; background:rgba(241,238,228,.06);
  border:1px solid rgba(241,238,228,.14); color:var(--yazi); font-size:.92rem}
.alan input::placeholder{color:var(--silik)}
.adet{display:flex; align-items:center; border:1px solid var(--cizgi-pirinc); border-radius:9px; overflow:hidden; width:fit-content}
.adet button{width:46px; height:46px; background:var(--pirinc-yumusak); border:none; color:var(--pirinc); font-size:1.25rem; cursor:pointer}
.adet button:disabled{opacity:.35}
.adet span{width:50px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums}

.alt-dugme{padding:14px 18px calc(14px + env(safe-area-inset-bottom)); flex:none;
  background:var(--yuzey); border-top:1px solid var(--cizgi)}
.birincil{width:100%; padding:16px; border-radius:11px; border:none; cursor:pointer;
  background:linear-gradient(#E4CE97,#C9A65E); color:#071316; font-weight:700; font-size:.98rem;
  display:flex; align-items:center; justify-content:center; gap:8px}
.birincil:disabled{opacity:.45}
.birincil.hayalet{background:none; border:1px solid var(--cizgi-pirinc); color:var(--pirinc)}

/* ---- sepet ---- */
.sepet-liste{flex:1; overflow-y:auto; padding:14px 18px}
.c-satir{display:grid; grid-template-columns:1fr auto; gap:10px; padding:13px 0; border-bottom:1px solid var(--cizgi)}
.c-ad{font-weight:600; font-size:.94rem}
.c-adet{font-size:.78rem; color:var(--sonuk); margin-top:3px; font-variant-numeric:tabular-nums}
.c-not{font-size:.78rem; color:var(--uyari); margin-top:3px; font-style:italic}
.c-fiyat{color:var(--pirinc); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.c-sil{background:none; border:none; color:var(--silik); font-size:.75rem; cursor:pointer;
  padding:5px 0 0; text-align:end; display:block; width:100%}
.sepet-bos{padding:70px 24px; text-align:center; color:var(--silik); font-size:.9rem}
.toplamlar{padding:14px 18px 0; flex:none}
.t-satir{display:flex; justify-content:space-between; padding:5px 0; font-size:.86rem; color:var(--yazi-sonuk)}
.t-satir.buyuk{font-size:1.14rem; color:var(--yazi); font-weight:700; padding-top:11px; margin-top:6px;
  border-top:1px solid var(--cizgi-pirinc); font-variant-numeric:tabular-nums}
.t-satir.buyuk span:first-child{font-family:'Gilda Display',Georgia,serif; font-weight:400}

/* ---- onay ---- */
.bitti{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  padding:34px 28px; text-align:center;
  background:radial-gradient(110% 70% at 50% 22%, rgba(131,191,159,.14), transparent 62%), var(--zemin)}
.tik{width:64px; height:64px; border-radius:50%; border:1.5px solid var(--iyi); display:grid; place-items:center; color:var(--iyi)}
.tik svg{width:28px; height:28px}
.bitti h3{font-size:1.65rem}
.bitti p{color:var(--sonuk); font-size:.88rem; margin:6px 0 0; max-width:32ch}
.izle{width:100%; display:flex; flex-direction:column; text-align:start}
.adim{display:grid; grid-template-columns:20px 1fr; gap:13px; align-items:start; padding-bottom:16px; position:relative}
.adim:not(:last-child)::before{content:""; position:absolute; inset-inline-start:9.5px; top:20px; bottom:0; width:1px; background:rgba(241,238,228,.14)}
.adim .nokta{width:20px; height:20px; border-radius:50%; border:1.5px solid rgba(241,238,228,.24); background:var(--zemin); z-index:2}
.adim.on .nokta{border-color:var(--iyi); background:var(--iyi); box-shadow:0 0 0 4px rgba(131,191,159,.14)}
.adim .yz{font-size:.87rem; font-weight:600; line-height:1.2}
.adim:not(.on) .yz{color:var(--silik); font-weight:400}
.adim .saat{font-size:.74rem; color:var(--silik); margin-top:2px}

/* ---- uyarı şeridi ---- */
.uyari-serit{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(22px + env(safe-area-inset-bottom));
  background:var(--kotu); color:#fff; padding:11px 18px; border-radius:10px; font-size:.86rem;
  z-index:50; box-shadow:0 8px 24px rgba(0,0,0,.5); max-width:88vw; text-align:center}

/* ---- kategori ekranı: üst seviyeye dönüş ---- */
.kat-ust{display:flex; align-items:flex-start; gap:10px}
.ust-geri{background:none; border:none; color:var(--pirinc); font-size:1.7rem; line-height:1;
  padding:0 2px; cursor:pointer; margin-top:-2px}
.ust-geri[hidden]{display:none}

/* ---- liste satırı: tıklanabilir alan + hızlı ekleme ---- */
.satir{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; width:100%;
  padding:0; background:none; border:none; border-bottom:1px solid rgba(255,255,255,.055)}
.satir-ac{display:grid; grid-template-columns:68px 1fr; gap:13px; align-items:center; width:100%;
  padding:11px 6px; background:none; border:none; cursor:pointer; text-align:start; color:inherit; min-width:0}
.satir-ac:active{background:var(--pirinc-yumusak)}
.sag-alan{display:flex; flex-direction:column; align-items:flex-end; gap:7px; padding:11px 6px 11px 0}
.hizli{display:inline-flex; align-items:center; border:1px solid var(--cizgi-pirinc); border-radius:99px;
  overflow:hidden; background:rgba(214,181,112,.08)}
.hizli button{width:34px; height:32px; background:none; border:none; color:var(--pirinc);
  font-size:1.15rem; line-height:1; cursor:pointer; padding:0}
.hizli button:active{background:var(--pirinc-yumusak)}
.hizli .hz-n{min-width:22px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; font-size:.9rem}
.hizli:not(.acik) .hz-eksi,.hizli:not(.acik) .hz-n{display:none}
.hizli:not(.acik){background:var(--pirinc); border-color:var(--pirinc)}
.hizli:not(.acik) .hz-arti{color:#071316; font-weight:700; width:38px}
.satir.pasif .sag-alan{opacity:.5}