/* =========================================================
   Bi Yesen – Gürece  ·  Bodrum mavisi koyu tema
   ========================================================= */
:root{
  --deep:   #061f38;   /* en koyu Ege lacivanti  */
  --navy:   #0c3257;   /* bölüm laciverti        */
  --navy-2: #103c68;   /* kart laciverti         */
  --sea:    #4ea3d6;   /* açık deniz mavisi (link/vurgu) */
  --wash:   #f3ede0;   /* badanalı sıcak beyaz   */
  --foam:   #fcfaf4;   /* köpük beyazı           */
  --sun:    #e8a93a;   /* Ege güneşi / kumsal sarısı */
  --sun-2:  #f3c061;
  --line:   rgba(243,237,224,.16);
  --line-strong: rgba(243,237,224,.34);
  --txt:    #eaf1f7;
  --muted:  #a9c0d4;

  --shadow: 0 24px 60px -28px rgba(0,0,0,.7);
  --r:      18px;
  --maxw:   1080px;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--txt);
  background:var(--deep);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Ege "badana" dokusu: lacivert üzerine çok hafif ışık */
body::before{
  content:"";
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:-2;
  background:
    radial-gradient(1100px 600px at 78% -8%, rgba(78,163,214,.18), transparent 60%),
    radial-gradient(900px 700px at 8% 12%, rgba(16,60,104,.55), transparent 55%),
    linear-gradient(180deg, var(--deep), #04182c 90%);
}

a{ color:var(--sea); text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.08; margin:0; }

.wrap{ width:100%; max-width:var(--maxw); margin-left:auto; margin-right:auto; padding-left:clamp(32px, 8vw, 56px); padding-right:clamp(32px, 8vw, 56px); }

.eyebrow{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:.72rem;
  font-weight:700;
  color:var(--sun);
}

/* ---------- Düğmeler ---------- */
.btn{
  --bg:var(--sun); --fg:#0a1f33;
  display:inline-flex; align-items:center; gap:.55em;
  background:var(--bg); color:var(--fg);
  font-weight:700; font-size:1rem;
  padding:.85em 1.4em; border-radius:999px;
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow:0 12px 26px -12px rgba(232,169,58,.6);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn.ghost{
  --bg:transparent; --fg:var(--txt);
  border-color:var(--line-strong);
  box-shadow:none;
}
.btn.ghost:hover{ border-color:var(--sea); color:#fff; }
.btn svg{ width:1.05em; height:1.05em; }

:focus-visible{ outline:3px solid var(--sun-2); outline-offset:3px; border-radius:6px; }

/* ---------- Üst çubuk ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(32px, 8vw, 56px);
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.topbar.solid{
  background:rgba(6,31,56,.86);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
  padding:10px clamp(32px, 8vw, 56px);
}
.brand{ display:flex; align-items:center; gap:.6em; color:var(--foam); }
.brand .badge{ width:34px; height:26px; color:var(--foam); }
.brand b{ font-family:var(--font-display); font-weight:600; font-size:1.18rem; letter-spacing:.01em; }
.brand span{ color:var(--sun); font-weight:700; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; }
.topbar .nav{ display:flex; align-items:center; gap:22px; }
.topbar .nav a.lnk{ color:var(--muted); font-weight:600; font-size:.95rem; }
.topbar .nav a.lnk:hover{ color:#fff; }
@media (max-width:760px){ .topbar .nav a.lnk{ display:none; } }

/* ---------- Hero ---------- */
.hero{
  min-height:100vh;
  min-height:100svh;
  display:grid; place-items:center;
  text-align:center;
  padding:120px 0 90px;
  position:relative;
  overflow:hidden;
}
.hero .badge{
  width:clamp(150px, 30vw, 230px); height:auto;
  color:var(--foam);
  margin-left:auto; margin-right:auto;
  animation:rise .9s cubic-bezier(.2,.7,.2,1) both;
}
.badge-name{ font-family:var(--font-display); font-weight:600; font-size:30px; fill:currentColor; }
.badge-sub{ font-family:var(--font-body); font-weight:700; font-size:13px; letter-spacing:6px; fill:var(--sun); }

.hero h1{
  font-size:clamp(2.9rem, 9vw, 5.6rem);
  font-style:italic;
  font-weight:600;
  margin:.35em 0 0;
  color:var(--foam);
  letter-spacing:-.01em;
  animation:rise .9s .08s cubic-bezier(.2,.7,.2,1) both;
}
.hero .tagline{
  font-family:var(--font-display);
  font-size:clamp(1.15rem,3.4vw,1.6rem);
  color:var(--sun-2);
  margin-top:.2em;
  animation:rise .9s .16s cubic-bezier(.2,.7,.2,1) both;
}
.hero .lead{
  max-width:46ch; margin:1.3em auto 0;
  color:var(--muted); font-size:1.06rem;
  animation:rise .9s .24s cubic-bezier(.2,.7,.2,1) both;
}
.hero .cta-row{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
  margin-top:2em;
  animation:rise .9s .32s cubic-bezier(.2,.7,.2,1) both;
}
.scrollcue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  color:var(--muted); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scrollcue::after{
  content:""; width:1px; height:30px;
  background:linear-gradient(var(--sun), transparent);
  animation:pulse 1.8s ease-in-out infinite;
}

@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes pulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

/* ---------- Dalga ayraç ---------- */
.wave{ display:block; width:100%; height:48px; color:var(--navy); }
.wave.up{ transform:rotate(180deg); }

/* ---------- Bölümler ---------- */
section{ position:relative; }
.section-pad{ padding-top:84px; padding-bottom:84px; }
.section-head{ max-width:60ch; margin-bottom:42px; }
.section-head h2{ font-size:clamp(2rem,5vw,2.9rem); color:var(--foam); margin-top:.25em; }
.section-head p{ color:var(--muted); margin:.7em 0 0; font-size:1.05rem; }

/* ---------- Hakkında ---------- */
.about{ background:linear-gradient(180deg, var(--navy), transparent); }
.about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.about-grid p{ color:#d3e2ee; font-size:1.12rem; }
.about-card{
  background:var(--navy-2); border:1px solid var(--line);
  border-radius:var(--r); padding:30px; box-shadow:var(--shadow);
}
.about-card .badge{ width:92px; color:var(--sun); margin-bottom:14px; }
.about-card h3{ color:var(--foam); font-size:1.5rem; }
.about-card .hl{ color:var(--sun-2); font-style:italic; }
@media (max-width:760px){ .about-grid{ grid-template-columns:1fr; gap:30px; } }

/* ---------- Menü ---------- */
.menu .cat{ margin-bottom:46px; }
.menu .cat:last-child{ margin-bottom:0; }
.cat-title{
  display:flex; align-items:baseline; gap:14px;
  color:var(--foam); font-size:1.55rem; margin-bottom:18px;
}
.cat-title::after{ content:""; flex:1; height:1px; background:var(--line); }
.items{ display:grid; grid-template-columns:1fr 1fr; gap:8px 44px; }
@media (max-width:680px){ .items{ grid-template-columns:1fr; } }

.item{
  display:grid; grid-template-columns:1fr auto; align-items:baseline;
  gap:6px 12px; padding:12px 4px; border-bottom:1px dashed var(--line);
}
.item .nm{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.item .nm b{ font-weight:700; font-size:1.06rem; color:#f3f8fc; }
.item .desc{ grid-column:1/-1; color:var(--muted); font-size:.92rem; margin-top:-2px; }
.item .price{ font-family:var(--font-display); font-weight:600; color:var(--sun); font-size:1.12rem; white-space:nowrap; }
.pill{
  font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#0a1f33; background:var(--sun); padding:.28em .6em; border-radius:999px;
}

/* ---------- Saatler ---------- */
.hours{ background:linear-gradient(180deg, transparent, var(--navy)); }
.hours-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:640px; }
.hour-card{
  background:var(--navy-2); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 26px;
}
.hour-card .d{ color:var(--muted); font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; }
.hour-card .t{ font-family:var(--font-display); font-size:1.7rem; color:var(--sun-2); margin-top:6px; }
.hours-note{ color:var(--muted); margin-top:18px; max-width:60ch; }
.hours-note svg{ width:1.15em; height:1.15em; vertical-align:-.2em; color:var(--sun); flex:none; }

/* Saatler bölümü ortalı + zenginleştirilmiş */
.hours .section-head{ margin-left:auto; margin-right:auto; text-align:center; }
.hours-grid{ margin-left:auto; margin-right:auto; justify-content:center; }
.hours .hours-note{ margin-left:auto; margin-right:auto; text-align:center; }
.hours .hour-card{ text-align:center; }
.hours .hour-card .d{ display:block; }
.status-pill{
  display:inline-flex; align-items:center; gap:.55em;
  margin:0 auto 26px; padding:.5em 1.1em; border-radius:999px;
  font-weight:700; font-size:.95rem;
  border:1px solid var(--line-strong); background:var(--navy-2); color:var(--txt);
}
.status-pill .dot{ width:10px; height:10px; border-radius:50%; background:var(--muted); box-shadow:0 0 0 0 rgba(62,199,138,.5); }
.status-pill.open{ border-color:rgba(62,199,138,.5); color:#bdf0d6; }
.status-pill.open .dot{ background:#3ec78a; animation:beat 2s ease-in-out infinite; }
.status-pill.closed{ border-color:rgba(240,116,107,.45); color:#ffc9c4; }
.status-pill.closed .dot{ background:#f0746b; }
@keyframes beat{ 0%,100%{ box-shadow:0 0 0 0 rgba(62,199,138,.45);} 50%{ box-shadow:0 0 0 7px rgba(62,199,138,0);} }
.feature-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:24px; }
.fchip{
  display:inline-flex; align-items:center; gap:.45em;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  color:#d3e2ee; border-radius:999px; padding:.55em 1em; font-size:.92rem; font-weight:600;
}
.fchip::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--sun); }
.hours .cta-row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:30px; }
@media (max-width:520px){ .hours-grid{ grid-template-columns:1fr; } }

/* ---------- Ziyaret / harita ---------- */
.visit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:stretch; }
.map-box{
  border-radius:var(--r); overflow:hidden; border:1px solid var(--line-strong);
  box-shadow:var(--shadow); min-height:330px; background:var(--navy-2);
}
.map-box iframe{ width:100%; height:100%; min-height:330px; border:0; display:block; filter:saturate(1.05); }
.visit-info{ display:flex; flex-direction:column; gap:18px; }
.visit-info .row{ display:flex; gap:14px; align-items:flex-start; }
.visit-info .row svg{ width:22px; height:22px; color:var(--sun); flex:none; margin-top:3px; }
.visit-info .row .k{ color:var(--muted); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; }
.visit-info .row .v{ color:#eef5fa; font-size:1.08rem; }
.visit-info .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
@media (max-width:760px){ .visit-grid{ grid-template-columns:1fr; } }

/* ---------- Sosyal şerit ---------- */
.social{ text-align:center; }
.social .badge{ width:70px; color:var(--sun); margin:0 auto 18px; }
.social h2{ color:var(--foam); font-size:clamp(1.8rem,5vw,2.6rem); }
.social p{ color:var(--muted); margin:.6em auto 0; max-width:46ch; }
.social-links{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:26px; }
.chip{
  display:inline-flex; align-items:center; gap:.5em;
  border:1px solid var(--line-strong); border-radius:999px;
  padding:.7em 1.15em; color:var(--txt); font-weight:600;
  transition:border-color .18s, color .18s, background .18s;
}
.chip:hover{ border-color:var(--sun); color:#fff; }
.chip svg{ width:1.15em; height:1.15em; }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--line); padding:34px 0 44px; margin-top:40px; }
.foot-grid{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.foot-grid .brand b{ font-size:1.05rem; }
footer .small{ color:var(--muted); font-size:.86rem; }
footer a.admin{ color:var(--muted); }
footer a.admin:hover{ color:var(--sun); }

/* Kaydırmayla beliren bölümler */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ===================== Sürüm 2: logo, mobil menü, dijital menü ===================== */

/* Özel logo görselleri */
.logo-img{ display:block; width:auto; }
.brand-txt{ display:flex; flex-direction:column; line-height:1; }
.hero-logo{ display:flex; justify-content:center; }
.hero-logo-img{
  width:100%; height:auto; margin-left:auto; margin-right:auto;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.5));
  animation:rise .9s cubic-bezier(.2,.7,.2,1) both;
}

/* Hamburger + mobil menü */
.hamburger{
  display:none; background:transparent; border:1px solid var(--line-strong);
  color:var(--foam); width:44px; height:44px; border-radius:12px; cursor:pointer;
  align-items:center; justify-content:center; flex:none;
}
.hamburger svg{ width:22px; height:22px; }
.mobile-nav{
  position:fixed; top:0; right:0; bottom:0; z-index:60;
  width:min(82vw, 320px);
  background:var(--deep); border-left:1px solid var(--line);
  display:none; flex-direction:column; gap:4px; padding:84px 22px 26px;
  box-shadow:-30px 0 60px -20px rgba(0,0,0,.7);
  animation:slideIn .25s ease both;
}
.mobile-overlay{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:55; display:none;
  background:rgba(3,16,30,.62); backdrop-filter:blur(2px);
  animation:fadeIn .2s ease both;
}
body.nav-open .mobile-nav{ display:flex; }
body.nav-open .mobile-overlay{ display:block; }
.mnav-close{
  position:absolute; top:16px; right:16px;
  width:44px; height:44px; border-radius:12px;
  background:transparent; border:1px solid var(--line-strong); color:var(--foam);
  font-size:1.7rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.mnav-close:hover{ border-color:var(--sun); color:var(--sun); }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes slideIn{ from{ transform:translateX(100%);} to{ transform:none; } }
.mobile-nav a{ color:var(--txt); font-weight:600; font-size:1.08rem; padding:.75em 0; border-bottom:1px solid var(--line); }
.mobile-nav a.btn{ border-bottom:0; justify-content:center; margin-top:12px; color:#0a1f33; }
.mobile-nav a.btn.ghost{ color:var(--txt); }

/* Dijital menü paneli */
.digital-menu{
  display:grid; grid-template-columns:1.4fr .8fr; gap:30px; align-items:center;
  background:var(--navy-2); border:1px solid var(--line); border-radius:var(--r);
  padding:34px; box-shadow:var(--shadow);
}
.dm-text .badge{ width:66px; color:var(--sun); margin-bottom:10px; }
.dm-text h3{ color:var(--foam); font-size:clamp(1.5rem,4vw,1.9rem); }
.dm-text p{ color:var(--muted); margin:.5em 0 1.2em; max-width:46ch; font-size:1.05rem; }
.btn.lg{ font-size:1.05rem; padding:.95em 1.6em; }
.dm-qr{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.dm-qr #qrcode{ background:#fff; padding:12px; border-radius:16px; line-height:0; box-shadow:var(--shadow); }
.dm-qr #qrcode img, .dm-qr #qrcode canvas{ display:block; }
.dm-qr span{ color:var(--muted); font-size:.85rem; letter-spacing:.04em; }
@media (max-width:680px){
  .digital-menu{ grid-template-columns:1fr; text-align:center; padding:26px; }
  .dm-text .badge, .dm-text p{ margin-left:auto; margin-right:auto; }
}

/* Responsive üst menü: tablet ve altı hamburger */
@media (max-width:860px){
  .topbar .nav a.lnk{ display:none; }
  .hamburger{ display:inline-flex; }
  .topbar .nav{ gap:10px; }
}
@media (min-width:861px){ .mobile-nav{ display:none !important; } }

/* Çok küçük ekran ince ayarları */
@media (max-width:420px){
  .hero{ padding-top:110px; }
  .btn{ font-size:.95rem; padding:.8em 1.15em; }
  .cta-row{ gap:10px; }
}

/* Tablet: bölüm boşluklarını biraz daralt */
@media (min-width:681px) and (max-width:1024px){
  .section-pad{ padding-top:70px; padding-bottom:70px; }
  .items{ gap:6px 30px; }
}

/* Yatay taşmayı engelle: grid/flex çocukları daralabilsin */
.about-grid>*, .visit-grid>*, .digital-menu>*, .hours-grid>*{ min-width:0; }
img, iframe, svg{ max-width:100%; }

/* ===================== Sürüm 3: hero görseli, galeri, sabit butonlar ===================== */

/* Hero arka plan fotoğrafı */
.hero-bg{
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
  animation:kenburns 22s ease-in-out infinite alternate;
}
.hero-overlay{
  position:absolute; top:0; left:0; right:0; bottom:0; z-index:0;
  background:linear-gradient(180deg, rgba(6,31,56,.5), rgba(6,31,56,.82) 66%, var(--deep));
}
.hero.has-bg > .wrap{ position:relative; z-index:1; }
.hero.has-bg .scrollcue{ z-index:1; }
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.09); } }

/* Galeri */
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 300px)); gap:14px; justify-content:center; }
.gphoto{
  position:relative; height:0; padding-bottom:75%;
  border:0; margin:0; cursor:pointer; overflow:hidden;
  border-radius:16px; background:var(--navy-2); box-shadow:var(--shadow);
}
.gphoto img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.gphoto:hover img, .gphoto:focus-visible img{ transform:scale(1.07); }
.gphoto .cap{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:24px 14px 12px; text-align:left; color:#fff; font-weight:600; font-size:.92rem;
  background:linear-gradient(transparent, rgba(3,16,30,.85));
}
@media (max-width:560px){ .gallery-grid{ grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; } }

/* Lightbox */
.lightbox{
  position:fixed; top:0; left:0; right:0; bottom:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  background:rgba(3,12,24,.93); padding:24px; animation:fadeIn .2s ease both;
}
.lightbox[hidden]{ display:none; }
.lightbox figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:14px; }
.lightbox img{ max-width:92vw; max-height:80vh; object-fit:contain; border-radius:14px; box-shadow:0 30px 80px -20px rgba(0,0,0,.85); }
.lightbox figcaption{ color:#dbe7f0; font-weight:600; text-align:center; }
.lb-close{
  position:absolute; top:16px; right:16px; width:48px; height:48px; border-radius:14px;
  background:transparent; border:1px solid rgba(255,255,255,.3); color:#fff; font-size:1.9rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lb-close:hover{ border-color:var(--sun); color:var(--sun); }

/* Sabit hızlı butonlar (mobil/tablet) */
.fab{ position:fixed; right:16px; bottom:16px; z-index:45; display:flex; flex-direction:column; gap:12px; }
.fab-btn{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 12px 26px -8px rgba(0,0,0,.65); transition:transform .18s ease;
}
.fab-btn svg{ width:27px; height:27px; }
.fab-btn.wa{ background:#25d366; }
.fab-btn.call{ background:var(--sun); color:#0a1f33; }
.fab-btn:hover{ transform:translateY(-3px); }
@media (min-width:861px){ .fab{ display:none; } }

/* Görsel cila: yumuşak kart etkileşimleri */
.hour-card, .digital-menu, .about-card, .map-box{ transition:transform .2s ease, border-color .2s ease; }
.hour-card:hover, .digital-menu:hover{ transform:translateY(-2px); border-color:var(--line-strong); }
.chip:hover, .fchip:hover{ transform:translateY(-1px); }

/* ===================== Sürüm 4: günün yemeği şeridi + online sipariş ===================== */

/* Günün yemeği şeridi */
.daily-bar{
  position:fixed; top:0; left:0; right:0; z-index:48; height:42px;
  display:flex; align-items:center; overflow:hidden;
  background:linear-gradient(90deg, var(--sun), var(--sun-2));
  color:#0a1f33; font-weight:800; font-size:.92rem;
}
.daily-track{ display:inline-flex; flex:none; white-space:nowrap; animation:dailyScroll 20s linear infinite; }
.daily-track:hover{ animation-play-state:paused; }
.daily-track .di{ padding:0 2.5rem; }
@keyframes dailyScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .daily-bar{ justify-content:center; }
  .daily-track{ animation:none; }
  .daily-track .di:nth-child(2){ display:none; }
}
body.has-daily .topbar{ top:42px; }
body.has-daily .hero{ padding-top:164px; }

/* Online sipariş */
.order-list{ max-width:760px; margin-left:auto; margin-right:auto; }
.ocat{ margin-bottom:28px; }
.oitem{ display:flex; align-items:center; gap:14px; padding:12px 8px; border-bottom:1px dashed var(--line); border-radius:10px; transition:background .2s; }
.oitem.active{ background:rgba(232,169,58,.07); }
.oinfo{ flex:1; min-width:0; }
.oinfo b{ color:#f3f8fc; }
.oinfo .od{ display:block; color:var(--muted); font-size:.85rem; }
.oprice{ font-family:var(--font-display); color:var(--sun); font-weight:600; white-space:nowrap; }
.qty{ display:flex; align-items:center; gap:8px; flex:none; }
.qbtn{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; color:var(--foam); font-size:1.2rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.qbtn:hover{ border-color:var(--sun); color:var(--sun); }
.qn{ min-width:18px; text-align:center; font-weight:700; }
.order-note-wrap{ max-width:760px; margin:24px auto 0; }
.order-note-wrap label{ display:block; color:var(--muted); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; }
.order-note-wrap textarea{ width:100%; background:var(--navy-2); border:1px solid var(--line-strong); border-radius:12px; color:var(--txt); padding:.8em; font:inherit; resize:vertical; }

/* Sticky sipariş çubuğu */
.order-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:54;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px clamp(16px, 5vw, 40px);
  background:rgba(6,31,56,.96); backdrop-filter:blur(10px);
  border-top:1px solid var(--line-strong); box-shadow:0 -10px 30px -12px rgba(0,0,0,.6);
}
.order-bar[hidden]{ display:none; }
.ob-info{ color:var(--txt); font-size:1rem; }
.ob-info b{ color:var(--sun-2); font-family:var(--font-display); font-size:1.2rem; }
.order-bar .btn{ white-space:nowrap; }
body.cart-open .fab{ bottom:86px; }
@media (max-width:420px){
  .order-bar{ padding:10px 16px; gap:10px; }
  .order-bar .btn{ font-size:.9rem; padding:.7em 1em; }
  .ob-info{ font-size:.9rem; }
}

/* ===================== Sürüm 5: gelişmiş sipariş formu ===================== */
.order-form{ max-width:760px; margin:26px auto 0; display:flex; flex-direction:column; gap:16px; }
.of-row{ display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.of-label{ color:var(--muted); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; min-width:74px; padding-top:8px; }
.seg{ display:inline-flex; gap:8px; flex-wrap:wrap; flex:1; }
.seg-btn{ border:1px solid var(--line-strong); background:var(--navy-2); color:var(--txt); border-radius:999px; padding:.5em 1.05em; cursor:pointer; font:inherit; font-size:.9rem; transition:.15s; }
.seg-btn:hover{ border-color:var(--sea); }
.seg-btn.active{ background:var(--sun); color:#0a1f33; border-color:var(--sun); font-weight:700; }
.of-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .of-grid{ grid-template-columns:1fr; } }
.of-field{ display:flex; flex-direction:column; }
.of-field label{ color:var(--muted); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; }
.of-field input, .of-field textarea{ width:100%; background:var(--navy-2); border:1px solid var(--line-strong); border-radius:12px; color:var(--txt); padding:.7em .9em; font:inherit; resize:vertical; }
.of-field input:focus, .of-field textarea:focus{ outline:none; border-color:var(--sea); }
.loc-btn{ align-self:flex-start; margin-top:8px; border:1px dashed var(--sea); background:transparent; color:var(--sea); border-radius:10px; padding:.5em .9em; cursor:pointer; font:inherit; font-size:.9rem; }
.loc-btn:hover{ background:rgba(78,163,214,.12); }
.loc-btn.done{ border-style:solid; color:var(--sun); border-color:var(--sun); }
.loc-status{ display:inline-block; margin-top:6px; color:var(--muted); font-size:.85rem; }
.loc-hint{ display:block; margin-top:6px; color:var(--muted); font-size:.8rem; opacity:.85; }