/* ============================ SİMİTHANE ============================ */

:root{
  --bg:            #0a0809;
  --bg-2:          #100c0e;
  --card:          #14100f;
  --card-2:        #1a1513;
  --line:          rgba(224,174,85,.22);
  --line-soft:     rgba(224,174,85,.12);

  --gold:          #E0AE55;
  --gold-lite:     #F7E3AE;
  --gold-deep:     #A9762E;
  --gold-grad:     linear-gradient(180deg,#F7E3AE 0%,#E0AE55 48%,#B8863B 100%);

  --ink:           #F3EAE0;
  --ink-soft:      #B9AB9C;
  --ink-dim:       #7E7269;

  --r:             16px;
  --pad:           18px;
  --tabs-h:        58px;

  --font-display:  "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-ui:       "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--tabs-h) + 14px);
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  background:
    radial-gradient(120% 60% at 50% 0%, #17110f 0%, transparent 62%),
    radial-gradient(90% 50% at 50% 100%, #150f0d 0%, transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ince doku katmanı */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.035) .5px, transparent .5px);
  background-size:3px 3px;
}

/* ============================ HERO ============================ */

.hero{
  position:relative; z-index:1;
  padding:22px 14px 8px;
}
.hero__frame{
  position:relative;
  max-width:640px; margin:0 auto;
  padding:30px 20px 26px;
  border:1px solid var(--line);
  border-radius:20px;
  background:
    radial-gradient(90% 120% at 50% -10%, rgba(224,174,85,.10) 0%, transparent 65%),
    linear-gradient(180deg, #16110f 0%, #0d0a0b 100%);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(247,227,174,.08);
  overflow:hidden;
}
/* köşe süsleri */
.hero__ornament{
  position:absolute; top:6px;
  width:112px; height:84px;
  color:var(--gold);
  opacity:.34;
  pointer-events:none;
}
.hero__ornament--l{ left:6px; }
.hero__ornament--r{ right:6px; transform:scaleX(-1); }
@media (min-width:760px){
  .hero__ornament{ width:150px; height:112px; top:10px; }
  .hero__ornament--l{ left:14px; }
  .hero__ornament--r{ right:14px; }
}

.logo{ position:relative; text-align:center; }
.logo__mark{
  width:56px; height:56px; display:block; margin:0 auto 6px;
  filter:drop-shadow(0 3px 10px rgba(224,174,85,.35));
}
.logo__word{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(34px, 11.5vw, 56px);
  line-height:1.05;
  letter-spacing:.01em;
  background:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  text-shadow:0 10px 30px rgba(224,174,85,.14);
}
.logo__tag{
  margin:8px auto 0;
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); opacity:.85;
  padding-top:10px;
  max-width:300px;
  border-top:1px solid var(--line-soft);
}
.logo__tag i{ font-style:normal; opacity:.5; margin:0 2px; }

/* ============================ SEKME ÇUBUĞU ============================ */

.tabs{
  position:sticky; top:0; z-index:20;
  height:var(--tabs-h);
  display:flex; align-items:center;
  margin-top:16px;
  background:rgba(10,8,9,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.tabs__track{
  display:flex; gap:8px;
  width:100%;
  padding:0 14px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.tabs__track::-webkit-scrollbar{ display:none; }

.tab{
  flex:0 0 auto;
  scroll-snap-align:center;
  appearance:none; border:1px solid var(--line-soft);
  background:rgba(255,255,255,.02);
  color:var(--ink-soft);
  font:600 13px/1 var(--font-ui);
  letter-spacing:.02em;
  padding:9px 14px;
  border-radius:999px;
  white-space:nowrap;
  cursor:pointer;
  transition:color .2s, background .2s, border-color .2s, transform .12s;
}
.tab:active{ transform:scale(.96); }
.tab[aria-current="true"]{
  color:#241703;
  background:var(--gold-grad);
  border-color:transparent;
  box-shadow:0 6px 18px -8px rgba(224,174,85,.8);
}

/* ============================ MENÜ ============================ */

.menu{
  position:relative; z-index:1;
  max-width:640px; margin:0 auto;
  padding:8px 14px 40px;
}

.section{ padding-top:34px; }

.section__head{
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
}
.section__icon{
  width:34px; height:34px; flex:0 0 34px;
  display:grid; place-items:center;
  font-size:17px; line-height:1;
  border:1px solid var(--line);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(224,174,85,.14), rgba(224,174,85,.03));
}
.section__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700; font-size:23px; letter-spacing:.02em;
  background:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section__rule{
  flex:1; height:1px;
  background:linear-gradient(90deg, var(--line) 0%, transparent 100%);
}

/* --- öne çıkan kart (Serpme Kahvaltı) --- */
.featured{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:18px var(--pad);
  margin-bottom:14px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(224,174,85,.13) 0%, transparent 60%),
    linear-gradient(180deg, var(--card-2), var(--card));
  box-shadow:0 18px 40px -26px rgba(0,0,0,.9);
  overflow:hidden;
}
.featured::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(247,227,174,.55), transparent);
}
.featured__media{
  display:block;
  margin:-18px calc(var(--pad) * -1) 14px;
  aspect-ratio:16/9;
  overflow:hidden;
  position:relative;
}
.featured__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,8,9,.15) 0%, rgba(10,8,9,.55) 78%, var(--card) 100%);
}
.featured__media img{
  width:100%; height:100%; object-fit:cover; display:block;
}

.featured__top{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.featured__name{
  margin:0;
  font-family:var(--font-display); font-weight:700;
  font-size:24px; color:var(--gold-lite);
}
.featured__badge{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--line);
  padding:4px 9px; border-radius:999px;
}
.featured__desc{
  margin:10px 0 14px;
  font-size:14px; line-height:1.6; color:var(--ink-soft);
}
.featured__label{
  margin:16px 0 8px;
  font-size:10.5px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); opacity:.9;
}
.featured__price{
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  flex-wrap:wrap; margin-top:16px;
}
.featured__extra{
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft);
  border:1px dashed var(--line);
  padding:5px 11px; border-radius:999px;
}
.featured__extra b{ color:var(--gold); font-weight:800; }

/* --- içindekiler listesi --- */
.ilist{
  list-style:none; margin:0; padding:0;
  display:grid; gap:5px 14px;
  grid-template-columns:repeat(auto-fill, minmax(128px, 1fr));
}
.ilist--wide{ grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); }
.ilist li{
  position:relative;
  padding-left:14px;
  font-size:13px; line-height:1.45; color:var(--ink-soft);
}
.ilist li::before{
  content:""; position:absolute;
  left:2px; top:.52em;
  width:5px; height:5px;
  border-radius:1px;
  transform:rotate(45deg);
  background:var(--gold); opacity:.8;
}

/* --- kahvaltı tabağı kartları --- */
.plates{
  display:grid; gap:14px;
  margin-bottom:2px;
}
.plate{
  position:relative;
  display:flex; flex-direction:column;
  border:1px solid var(--line-soft);
  border-radius:var(--r);
  background:linear-gradient(180deg, var(--card-2), var(--card));
  box-shadow:0 18px 40px -30px rgba(0,0,0,.9);
  overflow:hidden;
}
.plate__media{
  aspect-ratio:16/10;
  overflow:hidden;
  border-bottom:1px solid var(--line-soft);
  background:var(--card-2);
}
.plate__media img{ width:100%; height:100%; object-fit:cover; display:block; }

.plate__body{ padding:14px var(--pad) 16px; }
.plate__top{
  display:flex; align-items:center; gap:10px;
  margin-bottom:12px;
}
.plate__name{
  margin:0; flex:1 1 auto; min-width:0;
  font-family:var(--font-display); font-weight:700;
  font-size:19px; letter-spacing:.01em; color:var(--gold-lite);
}

/* --- ürün satırı --- */
.card{
  border:1px solid var(--line-soft);
  border-radius:var(--r);
  background:linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.008));
  overflow:hidden;
}
.item{
  display:flex; align-items:baseline; gap:10px;
  padding:13px var(--pad);
  border-bottom:1px solid rgba(255,255,255,.045);
}
.item:last-child{ border-bottom:0; }

.item__thumb{
  flex:0 0 auto;
  width:74px; height:52px;
  align-self:center;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--line-soft);
  background:var(--card-2);
}
.item__thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.item--media{ padding-top:10px; padding-bottom:10px; }

/* fotoğraflı + açıklamalı satır: açıklama alt satırda, tam genişlikte */
.item--desc{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  column-gap:12px; row-gap:4px;
}
.item--desc .item__thumb{ grid-row:1 / span 2; }
.item--desc .item__body{ grid-row:1; grid-column:2; }
.item--desc .price{ grid-row:1; grid-column:3; }
.item--desc .item__note{ grid-row:2; grid-column:2 / 4; margin-top:0; }

.item__body{ min-width:0; }
.item__name{
  font-weight:600; font-size:15.5px; letter-spacing:.01em; color:var(--ink);
}
.item__spicy{ margin-left:5px; font-size:13px; }
.item__note{
  display:block; margin-top:3px;
  font-size:12px; color:var(--ink-dim); letter-spacing:.01em;
}
.item__dots{
  flex:1 1 auto; min-width:14px;
  height:1px; align-self:center;
  margin-bottom:2px;
  background-image:linear-gradient(90deg, rgba(224,174,85,.42) 40%, transparent 0);
  background-size:6px 1px; background-repeat:repeat-x;
}

.price{
  flex:0 0 auto;
  display:inline-flex; align-items:baseline; gap:3px;
  padding:5px 11px;
  border-radius:9px;
  background:var(--gold-grad);
  color:#221604;
  font-weight:800; font-size:14px; letter-spacing:.01em;
  box-shadow:0 6px 16px -10px rgba(224,174,85,.9);
  white-space:nowrap;
}
.price small{ font-size:10px; font-weight:800; opacity:.75; }
.price--empty{
  background:none; color:var(--ink-dim);
  border:1px dashed var(--line);
  box-shadow:none; font-weight:600;
  padding:5px 14px;
}

/* ============================ FOOTER ============================ */

.footer{
  position:relative; z-index:1;
  max-width:640px; margin:0 auto;
  padding:8px 20px calc(46px + env(safe-area-inset-bottom));
  text-align:center;
  border-top:1px solid var(--line-soft);
}
.footer__afiyet{
  margin:24px 0 16px;
  font-family:var(--font-display); font-style:italic; font-size:21px;
  background:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.footer__links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
}
.footer__link{
  display:inline-flex; align-items:center; gap:7px;
  text-decoration:none;
  color:var(--gold);
  font-size:13.5px; font-weight:600;
  padding:9px 15px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(224,174,85,.05);
  transition:background .2s, transform .12s;
}
.footer__link:active{ transform:scale(.97); }
.footer__link svg{ width:16px; height:16px; }
.footer__note{
  margin:18px 0 0;
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim);
}

/* ============================ YUKARI ÇIK ============================ */

.totop{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:30;
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(20,16,15,.9);
  backdrop-filter:blur(10px);
  color:var(--gold);
  cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s, transform .25s, visibility .25s;
}
.totop svg{ width:19px; height:19px; }
.totop.is-visible{ opacity:1; visibility:visible; transform:none; }

/* ============================ GİRİŞ ANİMASYONU ============================ */

.section{ transition:opacity .5s ease, transform .5s ease; }
.section.is-hidden{ opacity:0; transform:translateY(14px); transition:none; }

/* ============================ GENİŞ EKRAN ============================ */

@media (min-width:760px){
  :root{ --pad:22px; }
  .menu{ max-width:940px; }
  .hero__frame{ max-width:940px; padding:40px 28px 32px; }
  .footer{ max-width:940px; }
  .section{ padding-top:44px; }
  .section__title{ font-size:26px; }
  .item{ padding:15px var(--pad); }
  .item__thumb{ width:92px; height:62px; }
  .plates{ grid-template-columns:repeat(2, 1fr); gap:18px; }
  .plate__name{ font-size:21px; }
}