/* ══════════════════════════════════════════════════════════════
   Köfteci Kadırgalı — tablet menü
   demoz.jacca.com "Saki" şablonunun renk / tipografi / yerleşim
   değerleri birebir alınmıştır.
   ══════════════════════════════════════════════════════════════ */

:root{
  --navy:#041f4c;          /* şablon zemin  */
  --gold:#f4d16a;          /* şablon vurgu  */
  --gold-soft:rgba(244,209,106,.35);
  --card:#ffffff;
  --ink:#111111;

  --f-display:'Philosopher', 'Palatino Linotype', serif;   /* açılış  */
  --f-serif:'Oranienbaum', 'Times New Roman', serif;       /* başlık / ürün adı / fiyat */
  --f-mono:'Inconsolata', 'SF Mono', monospace;            /* açıklama */
  --f-sans:'Raleway', system-ui, sans-serif;               /* kategori adı / not */
  --f-script:'Allison', cursive;                           /* "menü" */
  --f-ar:'Noto Naskh Arabic', serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--navy);
  color:var(--gold);
  font-family:var(--f-display);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
  touch-action:manipulation;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}

/* Arapça: yazı yönü ve yazı tipi */
html[dir="rtl"] body{font-family:var(--f-ar)}
html[dir="rtl"] .item-name,
html[dir="rtl"] .item-price,
html[dir="rtl"] .cat-strip,
html[dir="rtl"] .detail-name,
html[dir="rtl"] .detail-price,
html[dir="rtl"] .cat-card-name{font-family:var(--f-ar)}

/* ────────────────────────── ekranlar ────────────────────────── */
.screen{
  position:fixed; inset:0;
  display:none; flex-direction:column;
  background:var(--navy);
}
.screen.is-active{display:flex}

/* ══════════════════════ AÇILIŞ SAYFASI ══════════════════════ */
#intro{
  justify-content:space-between;
  align-items:center;
  padding:max(18px,env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
  cursor:pointer;
  text-align:center;
}
.intro-lang{width:100%;display:flex;justify-content:center;flex:0 0 auto}
.lang-pill{
  display:inline-flex;align-items:center;gap:10px;
  color:#fff;font-family:var(--f-sans);font-weight:400;font-size:22px;
  padding:8px 18px;border:1px solid var(--gold-soft);border-radius:999px;
}
.lang-pill .ico{width:26px;height:26px;color:var(--gold)}

.intro-body{
  flex:1 1 auto;
  width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(10px,2.2vh,26px);
  min-height:0;
}
.intro-logo{
  /* Yükseklik de sınırlı: kısa ekranlarda logo dil düğmesinin üstüne taşıyordu. */
  width:min(76vw,580px);
  max-height:17vh;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.45));
  opacity:1;animation:fadeIn .9s ease backwards;
}
.intro-hero{
  /* Tek değişkenle kare tutulur; en/boy oranı bozulmadan ekrana sığar. */
  --d:min(62vw,440px,40vh);
  width:var(--d);height:var(--d);
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 26px 60px rgba(0,0,0,.55), 0 0 0 1px var(--gold-soft);
  opacity:1;animation:fadeIn 1.1s .15s ease backwards;
}
.intro-rule{
  flex:0 0 1px;
  width:min(52%,360px);height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.85;
}
.intro-script{
  font-family:var(--f-script);
  color:var(--gold);
  font-size:clamp(52px,10vh,120px);
  line-height:.9;
  padding-bottom:.12em;
  opacity:1;animation:fadeIn 1.2s .3s ease backwards;
}
html[dir="rtl"] .intro-script,
html[lang="ru"] .intro-script{
  font-family:var(--f-display);
  font-size:clamp(38px,6vh,64px);
  letter-spacing:.08em;
}

.intro-foot{flex:0 0 auto;width:100%;display:flex;flex-direction:column;gap:18px}
.intro-cta{
  font-family:var(--f-display);
  color:var(--gold);
  font-size:clamp(24px,3.4vh,32px);
  letter-spacing:.04em;
  opacity:1;animation:fadeIn .6s .5s backwards, pulsate 2.4s 1.2s ease-in-out infinite;
}
.intro-note{
  font-family:var(--f-sans);font-weight:100;
  color:var(--gold);
  font-size:clamp(15px,2vh,20px);
  line-height:1.55;
  opacity:1;animation:scaleIn .7s .7s backwards;
}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes pulsate{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.965)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ══════════════════════ ÜST ÇUBUK ══════════════════════ */
.bar{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:max(14px,env(safe-area-inset-top)) 22px 14px;
  border-bottom:1px solid rgba(229,229,229,.22);
  background:var(--navy);
}
.bar--slim{padding-bottom:10px}
.bar-side{display:flex;align-items:center;gap:20px;min-width:96px}
.bar-side--end{justify-content:flex-end}
.ibtn{
  display:grid;place-items:center;
  width:52px;height:52px;color:var(--gold);
  border-radius:12px;
}
.ibtn:active{background:rgba(244,209,106,.14)}
.ico{width:34px;height:34px;fill:none}
.bar-logo{height:64px;width:auto;object-fit:contain}
.bar-crumb{
  flex:1;text-align:center;
  font-family:var(--f-sans);font-weight:600;font-style:italic;
  color:var(--gold);font-size:clamp(20px,2.6vh,28px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ══════════════════════ KATEGORİLER ══════════════════════ */
.cats-scroll{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:22px 16px calc(48px + env(safe-area-inset-bottom));
}
.cats-title{
  margin:0 0 20px;text-align:center;
  font-family:var(--f-serif);font-weight:400;
  color:var(--gold);font-size:clamp(26px,3.6vh,38px);letter-spacing:.12em;
}
.cats-grid{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}

.cat-card{
  position:relative;
  flex:1 1 300px;max-width:640px;
  min-height:132px;
  border-radius:5px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:#0a2c63 center/cover no-repeat;
  border:1px solid var(--gold-soft);
  transition:transform .15s ease;
}
.cat-card::after{content:"";position:absolute;inset:0;background:rgba(4,31,76,.58)}
.cat-card:active{transform:scale(.985)}
.cat-card--plain{background:linear-gradient(135deg,#0a2c63,#04173a)}
.cat-card-name{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:14px;
  font-family:var(--f-sans);font-weight:600;font-style:italic;
  color:#fff;font-size:clamp(21px,3vh,35px);
  line-height:1.16;
  text-align:center;padding:16px 18px;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
  overflow-wrap:anywhere;
}
.cat-card-name .ico{width:24px;height:24px;flex:0 0 auto;stroke-width:2.4}
html[dir="rtl"] .cat-card-name .ico{transform:scaleX(-1)}

/* ══════════════════════ ÜRÜN LİSTESİ ══════════════════════ */
.items-scroll{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(60px + env(safe-area-inset-bottom));
  scroll-behavior:smooth;
}
.cat-strip{
  position:sticky;top:0;z-index:5;
  background:var(--gold);color:#000;
  font-family:var(--f-serif);font-weight:400;
  font-size:clamp(30px,4.4vh,45px);
  text-align:center;padding:12px 16px;
  letter-spacing:.03em;
}

.item{
  display:flex;align-items:stretch;
  background:var(--card);color:var(--ink);
  border-radius:15px;margin:15px 10px 0;
  overflow:hidden;
  transition:transform .12s ease;
}
.item:active{transform:scale(.99)}
.item-img{
  flex:0 0 auto;
  width:200px;height:200px;
  margin:10px 0 10px 10px;
  border-radius:8px;
  background:#e9e9e9 center/cover no-repeat;
}
.item-body{
  flex:1;min-width:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:14px 20px;
}
.item--noimg .item-body{padding-left:24px}
.item-name{
  font-family:var(--f-serif);font-weight:600;
  font-size:clamp(24px,3vh,30px);line-height:1.15;
  margin-bottom:10px;
}
.item-desc{
  font-family:var(--f-mono);
  font-size:clamp(17px,2.2vh,23px);line-height:1.35;
  color:#111;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
html[dir="rtl"] .item-desc{font-family:var(--f-ar);font-size:clamp(16px,2vh,21px)}
.item-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  justify-content:space-between;padding-top:12px;
}
.item-price{
  font-family:var(--f-serif);font-weight:800;
  font-size:clamp(21px,2.6vh,25px);white-space:nowrap;
}
.item-price .cur{font-family:'Raleway',Roboto,sans-serif;font-weight:400}

.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{
  font-family:var(--f-sans);font-weight:600;font-size:13px;
  letter-spacing:.04em;
  padding:3px 9px;border-radius:999px;
  background:#f1e6c6;color:#6a5417;border:1px solid #ddc98c;
  white-space:nowrap;
}

/* ══════════════════════ ÜRÜN DETAYI ══════════════════════ */
#detail{background:var(--navy)}
.detail-close{
  position:absolute;z-index:10;
  top:calc(14px + env(safe-area-inset-top));right:16px;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(4,31,76,.78);color:var(--gold);
  border:1px solid var(--gold-soft);
  backdrop-filter:blur(6px);
}
.detail-scroll{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(56px + env(safe-area-inset-bottom));
}
.detail-hero{
  width:100%;aspect-ratio:4/3;
  background:#0a2c63 center/cover no-repeat;
}
.detail-hero--none{
  display:grid;place-items:center;aspect-ratio:16/7;
  font-family:var(--f-sans);font-weight:300;color:var(--gold);
  font-size:20px;background:linear-gradient(135deg,#0a2c63,#04173a);
}
.detail-card{
  background:var(--card);color:var(--ink);
  margin:-26px 12px 0;border-radius:18px;
  padding:26px 24px 30px;
  box-shadow:0 -8px 40px rgba(0,0,0,.4);
  position:relative;
}
.detail-name{
  font-family:var(--f-serif);font-weight:600;
  font-size:clamp(30px,4.4vh,44px);line-height:1.12;
}
.detail-price{
  font-family:var(--f-serif);font-weight:800;
  font-size:clamp(26px,3.6vh,36px);
  margin-top:12px;color:#8a6d15;
}
.detail-desc{
  font-family:var(--f-mono);
  font-size:clamp(18px,2.4vh,24px);line-height:1.5;
  margin-top:18px;color:#222;
}
html[dir="rtl"] .detail-desc{font-family:var(--f-ar)}
.detail-allergens{margin-top:24px;border-top:1px solid #e8e8e8;padding-top:18px}
.detail-allergens h3{
  margin:0 0 10px;
  font-family:var(--f-sans);font-weight:600;font-size:16px;
  letter-spacing:.08em;text-transform:uppercase;color:#7a6a3a;
}
.detail-cat{
  margin-top:22px;text-align:center;
  font-family:var(--f-sans);font-weight:600;font-style:italic;
  color:var(--gold);font-size:20px;letter-spacing:.06em;
}

/* ══════════════════════ MODALLER ══════════════════════ */
.sheet{
  position:fixed;inset:0;z-index:50;
  display:grid;place-items:center;
  background:rgba(2,12,32,.72);
  backdrop-filter:blur(4px);
  padding:24px;
}
.sheet[hidden]{display:none}
.sheet-card{
  width:min(560px,100%);max-height:82vh;overflow-y:auto;
  background:var(--navy);color:var(--gold);
  border:1px solid var(--gold-soft);border-radius:25px;
  padding:30px 28px;
  opacity:1;
  animation:popIn .22s ease;
}
@keyframes popIn{from{transform:scale(.94)}to{transform:scale(1)}}
.sheet-title{
  margin:0 0 22px;text-align:center;
  font-family:var(--f-serif);font-weight:400;
  font-size:30px;letter-spacing:.08em;
}
.lang-list{display:flex;flex-direction:column;gap:12px}
.lang-btn{
  width:100%;text-align:center;
  font-family:var(--f-sans);font-size:24px;
  padding:16px;border-radius:12px;
  border:1px solid var(--gold-soft);color:var(--gold);
}
.lang-btn.is-on{background:var(--gold);color:#000;font-weight:600}

.allergen-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.allergen-list .tag{font-size:16px;padding:7px 14px}
.allergen-note{
  font-family:var(--f-sans);font-weight:300;
  font-size:16px;line-height:1.6;margin:22px 0 0;color:var(--gold);opacity:.9;
  text-align:center;
}
.sheet-btn{
  display:block;width:100%;margin-top:24px;
  background:var(--gold);color:#000;
  font-family:var(--f-sans);font-weight:600;font-size:20px;
  padding:15px;border-radius:12px;
}

/* ══════════════════════ GENİŞ TABLET / YATAY ══════════════════════ */
@media (min-width:900px){
  .cats-grid{gap:24px}
  .cat-card{flex:1 1 380px;min-height:150px}

  /* Geniş ekranda iki sütun. Grid yerine flex-wrap: grid satır yüksekliği
     kartların içindeki 200px görseli eziyordu. */
  .items-scroll{display:flex;flex-wrap:wrap;align-content:flex-start}
  .cat-strip{flex:0 0 100%;width:100%}
  .item{flex:1 1 calc(50% - 32px);min-width:400px;margin:15px 8px 0}
  .detail-scroll{max-width:900px;margin:0 auto;width:100%}
}
@media (min-width:1500px){
  .item{flex:1 1 calc(33.333% - 32px)}
}

/* ══════════════════════ AÇILIŞ MODALI ══════════════════════
   Şablondaki "SİPARİŞ VER / GÖRÜŞ PAYLAŞ" penceresi.
   Açılışa dokununca çıkar; menüye buradan geçilir.            */
.sheet-card--start{
  /* Şablonda kart kenarlığı açık gri (#c3c3c3), altın değil. */
  border-color:rgba(226,226,226,.6);
  position:relative;
  padding:44px 34px 30px;
  display:flex;flex-direction:column;gap:22px;
  overflow:visible;
}
.sheet-x{
  position:absolute;top:-18px;right:-18px;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:#111;color:#fff;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 6px 20px rgba(0,0,0,.5);
}
html[dir="rtl"] .sheet-x{right:auto;left:-18px}   /* sağdan sola: kapatma da aynalanır */
.sheet-x .ico{width:26px;height:26px}
.sheet-x:active{background:#000}

.start-btn{
  display:block;width:100%;
  background:var(--gold);color:#000;
  font-family:var(--f-display);
  font-size:clamp(24px,3.4vh,34px);
  letter-spacing:.02em;text-align:center;text-decoration:none;
  padding:22px 18px;border-radius:18px;
  transition:transform .12s ease,filter .12s ease;
}
html[dir="rtl"] .start-btn{font-family:var(--f-ar);font-size:clamp(22px,3vh,30px)}
.start-btn:active{transform:scale(.985);filter:brightness(.94)}

.start-note{
  margin:4px 0 0;text-align:center;
  font-family:var(--f-sans);font-weight:400;
  font-size:15px;line-height:1.55;color:var(--gold);
}
html[dir="rtl"] .start-note{font-family:var(--f-ar)}
.start-note a{color:#c9b787;text-decoration:underline}
.start-note a:active{color:#fff}