/* =====================================================================
   BONO BURGER — "Gece Vitrini"
   The frame stays quiet, the stage gets loud.
   ===================================================================== */

@property --tint { syntax: '<color>'; inherits: true; initial-value: #D8457F; }

:root{
  /* ---- colour: night frame ---- */
  --c-night:#0B0A08; --c-soot:#15130F; --c-soot-2:#1C1915;
  --c-line:#2B2722; --c-line-2:rgba(244,238,227,.14);
  --c-sign:#F4EEE3; --c-smoke:#A59C8C; --c-ash:#8A8273; /* ≥4.8:1 on night & soot */
  /* ---- accent ---- */
  --c-gold:#E3A33E; --c-amber:#F6CF7E;
  --c-gold-06:rgba(227,163,62,.06); --c-gold-16:rgba(227,163,62,.16);
  /* ---- booths ---- */
  --c-bottle:#183428; --c-leather:#2F5A47; --c-glint:#5FAF8A;
  /* ---- packaging ---- */
  --c-paper:#F3EFE6; --c-paper-2:#FAF7F0; --c-ink:#141311;
  --c-kraft-d:#8C6239;
  /* ---- micro ---- */
  --c-chili:#C9361E;
  --tint:#D8457F;

  /* ---- type ---- */
  --ff-display:'Jost','Segoe UI',system-ui,-apple-system,sans-serif;
  --ff-body:'Jost','Segoe UI',system-ui,-apple-system,sans-serif;
  --ff-wide:'Jost','Segoe UI',system-ui,-apple-system,sans-serif;
  --ff-tl:'Jost','Segoe UI',Arial,sans-serif;

  --fs-backdrop:clamp(8rem,30vw,34rem);
  --fs-hero:clamp(2.6rem,1.2rem + 5.2vw,7.25rem);
  --fs-name:clamp(3.75rem,1rem + 11vw,12rem);
  --fs-h2:clamp(2.1rem,1rem + 3.6vw,4.5rem);
  --fs-statement:clamp(1.75rem,1rem + 2.6vw,3.75rem);
  --fs-h3:clamp(1.35rem,1rem + 1vw,1.9rem);
  --fs-price:clamp(1.5rem,1rem + 1.6vw,3.5rem);
  --fs-stat:clamp(3rem,1.5rem + 5vw,5.5rem);
  --fs-lead:clamp(1.1rem,1rem + .4vw,1.3rem);
  --fs-body:1.0625rem; --fs-label:.6875rem;

  /* ---- layout ---- */
  --maxw:1440px;
  --pad:max(clamp(16px,5vw,80px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --gut:clamp(16px,2vw,28px);
  --sect:clamp(96px,14vw,200px);
  --bar-h:34px; --nav-h:calc(72px + var(--bar-h)); /* top bar + nav row */
  --jump-gap:16px; /* air between the header and a #hash / focus target */
  --sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
  --sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;
  --r-0:0;--r-pill:999px;

  /* ---- shadows ---- */
  --sh-card:0 30px 60px -30px rgba(0,0,0,.65);
  --sh-photo:0 40px 80px -40px rgba(0,0,0,.75),0 0 0 1px var(--c-line);
  --sh-paper:0 18px 40px -24px rgba(60,35,15,.45);

  /* ---- motion ---- */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-spring:linear(0,.5 7%,.86 15%,1.04 24%,1.06 30%,1.01 40%,.99 55%,1);
  --ease-stamp:cubic-bezier(.34,1.56,.64,1);
  --t-fast:180ms;--t-med:420ms;

  --z-nav:50;--z-overlay:60;

  --bono-pattern:none; --bono-pattern-ink:none; --bono-band:none; /* filled in by main.js */
  --hero-p:0; --hero-m:0; /* --hero-m = --hero-p, but 0 when motion is reduced (parallax transforms) */
  color-scheme:dark;
}
@media (max-width:767px){ :root{ --bar-h:32px; --nav-h:calc(60px + var(--bar-h)); } }

/* ============================ RESET ============================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:#2B2722 var(--c-night); scroll-padding-top:calc(var(--nav-h) + var(--jump-gap)); }
/* blocks a nav link jumps to bring their own top padding: they start right under the header, so no sliver of the block above shows */
.sect[id],.serit,#nerdeyiz{ scroll-margin-top:calc(var(--jump-gap) * -1); }
@media (max-width:767px){
  html{ scroll-padding-bottom:calc(56px + env(safe-area-inset-bottom) + 16px); }
  /* sticky menu tabs (44px) sit under the nav on phones */
  .mcard :is(a,button,[tabindex]), [id^="menu-"]{ scroll-margin-top:60px; }
}
body{ margin:0; background:var(--c-night); color:var(--c-sign); font:400 var(--fs-body)/1.65 var(--ff-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; overflow-x:clip; text-rendering:optimizeLegibility; }
h1,h2,h3,h4,p,ul,ol,figure,address,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
address{ font-style:normal; }
img,svg,iframe{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
hr{ border:0; margin:0; }
em{ font-style:italic; }
::selection{ background:var(--c-gold); color:var(--c-ink); }
:focus-visible{ outline:2px solid var(--c-gold); outline-offset:3px; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:var(--c-night); }
::-webkit-scrollbar-thumb{ background:#2B2722; }
[hidden]{ display:none !important; }

.visually-hidden{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.skip{ position:fixed; left:16px; top:-80px; z-index:100; background:var(--c-gold); color:var(--c-ink); padding:12px 18px; font-weight:600; transition:top var(--t-fast); }
.skip:focus{ top:12px; }


/* ============================ TYPE ============================ */
.label{ font:300 var(--fs-label)/1.4 var(--ff-wide); letter-spacing:.28em; text-transform:uppercase; color:var(--c-smoke); }
.label--gold{ color:var(--c-gold); }
.eyebrow{ display:flex; align-items:center; gap:14px; font:300 var(--fs-label)/1.4 var(--ff-wide); letter-spacing:.28em; text-transform:uppercase; color:var(--c-gold); margin-bottom:var(--sp-5); }
.eyebrow::before{ content:''; width:24px; height:1px; background:currentColor; flex:none; }
.eyebrow--c{ justify-content:center; }
.h2{ font:350 var(--fs-h2)/1 var(--ff-display); letter-spacing:-.025em; max-width:18ch; font-optical-sizing:auto; }
.statement{ font:300 var(--fs-statement)/1.12 var(--ff-display); letter-spacing:-.02em; font-optical-sizing:auto; }
.lead{ font:300 var(--fs-lead)/1.55 var(--ff-body); color:var(--c-smoke); max-width:52ch; }
.footnote{ font:400 .75rem/1.6 var(--ff-body); color:var(--c-ash); }
.caption{ margin-top:var(--sp-4); }
.price{ font-family:var(--ff-display); font-weight:400; font-variant-numeric:lining-nums tabular-nums; white-space:nowrap; }
.tl{ font-family:var(--ff-tl); font-size:.55em; font-weight:500; vertical-align:.08em; }
.tag{ display:inline-block; font:400 10px/1 var(--ff-wide); letter-spacing:.12em; padding:3px 5px 2px; border:1px solid currentColor; vertical-align:middle; text-transform:none; position:relative; top:-.1em; }
.tag--chili{ color:#E0533A; }
.tag--gold{ color:var(--c-gold); }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
/* red chili marks after ACI tags, as on the QR menu: KIŞ two, the rest one */
.heat{ display:inline-flex; gap:1px; margin-left:5px; vertical-align:middle; position:relative; top:-.1em; color:#E5432F; }
.heat svg{ width:14px; height:14px; }
.ulink{ background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size 300ms var(--ease-out), color var(--t-fast); padding-bottom:2px; }
.ulink:hover{ background-size:100% 1px; color:var(--c-gold); }
.textbtn{ font:500 .8125rem/1 var(--ff-body); letter-spacing:.08em; text-transform:uppercase; color:var(--c-gold); padding:16px 0; border-bottom:1px solid var(--c-gold-16); }
.textbtn:hover{ border-color:var(--c-gold); }

/* ============================ LAYOUT ============================ */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gut); }
.sect{ padding-block:var(--sect); position:relative; }
.shead{ margin-bottom:clamp(48px,7vw,104px); }
.shead__sub{ margin-top:var(--sp-5); }
.shead--c{ text-align:center; }
.shead--c .h2,.shead--c .shead__sub{ margin-inline:auto; }

/* ============================ LOGO ============================ */
.logo{ display:inline-flex; flex-direction:column; align-items:stretch; color:var(--c-sign); line-height:1; }
.logo__box{ font:200 1.375rem/1 var(--ff-wide); letter-spacing:.16em; padding:6px 6px 4px 12px; border:1px solid currentColor; text-align:center; }
.logo__sub{ display:block; font:600 7px/1 var(--ff-body); letter-spacing:.62em; padding-left:.62em; text-align:center; margin-top:4px; color:var(--c-sign); }

/* ============================ BUTTONS ============================ */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; height:48px; padding:0 24px; font:600 .8125rem/1 var(--ff-body); letter-spacing:.08em; text-transform:uppercase; border-radius:var(--r-0); overflow:hidden; white-space:nowrap; transition:background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), scale 160ms var(--ease-out), translate 500ms var(--ease-stamp); }
.btn:active{ scale:.97; }
.btn__arrow{ width:12px; height:12px; flex:none; transition:transform 300ms var(--ease-out); }
.btn__label{ display:inline-block; transition:translate 500ms var(--ease-stamp); }
.btn--sm{ height:40px; padding:0 16px; }
.btn--primary{ background:var(--c-gold); color:var(--c-ink); }
.btn--primary::after{ content:''; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(246,207,126,.6) 50%,transparent 70%); transform:translateX(-120%); pointer-events:none; }
.btn--ghost{ background:transparent; color:var(--c-sign); box-shadow:inset 0 0 0 1px var(--c-line); }
.btn--green:focus-visible{ outline-color:var(--c-glint); }
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover::after{ transform:translateX(120%); transition:transform 700ms var(--ease-io); }
  .btn--primary:hover .btn__arrow{ transform:translate(3px,-3px); }
  .btn--ghost:hover{ color:var(--c-gold); box-shadow:inset 0 0 0 1px var(--c-gold); background:var(--c-gold-06); }
}
@media (max-width:767px){ .btn{ min-height:44px; } }

/* ============================ STATUS ============================ */
.status{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--c-line); border-radius:var(--r-pill); padding:6px 12px 6px 10px; font:500 .75rem/1.2 var(--ff-body); color:var(--c-sign); white-space:nowrap; }
.status__dot{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--c-glint); flex:none; }
.status__dot::after{ content:''; position:absolute; inset:0; border-radius:50%; background:inherit; animation:pulse 2s var(--ease-out) infinite; }
.status[data-state="closing"] .status__dot{ background:var(--c-gold); }
.status[data-state="closed"] .status__dot{ background:var(--c-chili); }
.status[data-state="closed"] .status__dot::after{ display:none; }
/* static / no-JS: hours only, no live claim */
.status:not([data-state]) .status__dot{ background:var(--c-smoke); }
.status:not([data-state]) .status__dot::after{ display:none; }
@keyframes pulse{ from{ transform:scale(1); opacity:.5; } to{ transform:scale(2.2); opacity:0; } }

/* ============================ TOP BAR (hours + phone) ============================ */
.topbar{ position:fixed; inset:0 0 auto 0; height:var(--bar-h); z-index:calc(var(--z-nav) + 1); display:flex; align-items:center; justify-content:space-between; gap:16px; padding-inline:var(--pad); background:#000; border-bottom:1px solid var(--c-line); font:500 .75rem/1 var(--ff-body); letter-spacing:.04em; color:var(--c-sign); transition:transform var(--t-med) var(--ease-out); }
body.nav-hidden .topbar{ transform:translateY(-100%); }
body:has(.nav:focus-within) .topbar,.topbar:focus-within{ transform:none; }
body:has(.topbar:focus-within) .nav{ transform:none; }
.topbar__info.status{ border:0; border-radius:0; padding:0; min-width:0; font:inherit; letter-spacing:inherit; }
.topbar__sep{ color:var(--c-ash); }
.topbar .status__text{ color:var(--c-smoke); overflow:hidden; text-overflow:ellipsis; }
html:not(.js) .topbar__sep{ display:none; }
.topbar__tel{ display:inline-flex; align-self:stretch; align-items:center; gap:8px; white-space:nowrap; color:var(--c-sign); transition:color var(--t-fast); }
.topbar__tel:hover{ color:var(--c-gold); }
.topbar__ico{ width:14px; height:14px; fill:none; stroke:var(--c-gold); stroke-width:1.3; stroke-linejoin:round; flex:none; }
.topbar__state{ display:none; }
@media (max-width:560px){
  .topbar__sep,.topbar .status__text{ display:none; }
  .topbar__state:not(:empty){ display:inline; }
  .topbar__state:not(:empty)::after{ content:' · '; color:var(--c-ash); }
}
@media (max-width:389px){ .topbar__days{ display:none; } }

/* ============================ NAV ============================ */
.nav{ position:fixed; inset:var(--bar-h) 0 auto 0; height:calc(var(--nav-h) - var(--bar-h)); z-index:var(--z-nav); display:flex; align-items:center; justify-content:space-between; gap:24px; padding-inline:var(--pad); transition:transform var(--t-med) var(--ease-out), background-color 300ms, border-color 300ms, opacity 400ms; border-bottom:1px solid transparent; }
.nav.is-scrolled{ background:rgba(11,10,8,.78); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); border-bottom-color:var(--c-line); }
.nav.is-hidden{ transform:translateY(calc(-100% - var(--bar-h))); }
.nav:focus-within{ transform:none !important; }
.nav__links{ display:none; gap:40px; position:absolute; left:50%; translate:-50% 0; }
.nav__links a{ position:relative; font:500 .8125rem/1 var(--ff-body); letter-spacing:.08em; text-transform:uppercase; padding:10px 0; color:var(--c-sign); transition:color var(--t-fast); }
.nav__links a::after{ content:''; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--c-gold); transform:scaleX(0); transform-origin:left; transition:transform 400ms var(--ease-out); }
.nav__links a:hover{ color:var(--c-gold); }
.nav__links a.is-active::after{ transform:scaleX(1); }
.nav__right{ display:flex; align-items:center; gap:12px; }
.nav__dir{ display:none; }
.nav__toggle{ position:relative; width:44px; height:44px; display:grid; place-items:center; }
.nav__toggle span{ position:absolute; left:10px; width:24px; height:1px; background:var(--c-sign); transition:transform 300ms var(--ease-out); }
.nav__toggle span:first-child{ transform:translateY(-4px); }
.nav__toggle span:last-child{ transform:translateY(4px); }
.nav__toggle[aria-expanded="true"] span:first-child{ transform:rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child{ transform:rotate(-45deg); }
@media (min-width:1100px){
  .nav__links,.nav__dir{ display:inline-flex; }
  .nav__toggle{ display:none; }
}
@media (min-width:1100px) and (max-width:1299px){ .nav__links{ gap:28px; } }
.js .nav{ opacity:0; }
.js.is-loaded .nav{ opacity:1; }
body.is-menu-open .nav{ z-index:70; background:transparent; border-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; transform:none; }

/* overlay */
.overlay{ position:fixed; inset:0; z-index:var(--z-overlay); background:var(--c-night); padding:calc(var(--nav-h) + 24px) var(--pad) max(24px, env(safe-area-inset-bottom)); display:flex; flex-direction:column; justify-content:space-between; overflow-y:auto; opacity:0; transition:opacity 300ms var(--ease-out); }
.overlay.is-open{ opacity:1; }
.overlay__links a{ display:flex; align-items:baseline; gap:18px; font:300 clamp(2.2rem,9vw,3rem)/1.1 var(--ff-display); padding:14px 0; border-bottom:1px solid var(--c-line); opacity:0; transform:translateY(16px); transition:opacity 500ms var(--ease-out), transform 500ms var(--ease-out), color var(--t-fast); transition-delay:calc(var(--i,0) * 60ms); }
.overlay__links a:hover{ color:var(--c-gold); }
.overlay.is-open .overlay__links a{ opacity:1; transform:none; }
.overlay__links .label{ font-size:10px; color:var(--c-gold); min-width:2.4em; }
.overlay__foot{ display:grid; gap:14px; margin-top:32px; justify-items:start; }
.overlay__info{ font-size:.875rem; color:var(--c-smoke); }
.overlay__btns{ display:flex; gap:12px; flex-wrap:wrap; width:100%; }
.overlay__btns .btn{ flex:1 1 140px; }

/* ---- no JS (or main.js failed): nothing dead, section links visible ---- */
html:not(.js) :is([data-show], [data-motion-toggle], .nav__toggle){ display:none !important; }
@media (max-width:1099px){
  html:not(.js) .nav__links{ display:flex; position:static; translate:none; gap:16px; min-width:0; overflow-x:auto; scrollbar-width:none; }
  html:not(.js) .nav__right{ display:none; }
}

/* ============================ HERO ============================ */
.hero{ --tint:#D8457F; position:relative; min-height:100vh; min-height:100svh; overflow:hidden; isolation:isolate; background:var(--c-night); transition:--tint 900ms var(--ease-io); }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(40% 40% at 50% 45%, color-mix(in oklab, var(--tint) 16%, transparent), transparent),
    radial-gradient(55% 48% at 50% 42%, rgba(227,163,62,.20), transparent 70%),
    radial-gradient(30% 9% at 50% 70%, rgba(246,207,126,.10), transparent),
    conic-gradient(from 180deg at 50% -10%, transparent 160deg, rgba(246,207,126,.07) 175deg 185deg, transparent 200deg),
    #0B0A08;
}
.hero__bg::after{ content:''; position:absolute; inset:0; opacity:.06; mix-blend-mode:overlay; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.hero__backdrop{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__frame{ position:absolute; top:calc(var(--nav-h) + 3vh); left:5vw; width:calc(100% - 10vw); height:calc(100% - var(--nav-h) - 15vh); overflow:visible; }
.hero__frame rect{ fill:none; stroke:rgba(244,238,227,.10); stroke-width:1; vector-effect:non-scaling-stroke; width:100%; height:100%; }
.js .hero__frame rect{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.4s var(--ease-io) 120ms; }
.js.is-loaded .hero__frame rect{ stroke-dashoffset:0; }
.hero__dateline{ position:absolute; top:calc(var(--nav-h) + 3vh); translate:0 -50%; font:300 .625rem/1 var(--ff-wide); letter-spacing:.28em; color:var(--c-smoke); background:var(--c-night); padding:0 12px; white-space:nowrap; transition:opacity 600ms 900ms; }
.hero__dateline--l{ left:8%; }
.hero__dateline--r{ right:8%; }
.hero__dateline time{ font:inherit; }
.js .hero__dateline{ opacity:0; }
.js.is-loaded .hero__dateline{ opacity:1; }
.hero__wordmark{ position:absolute; left:50%; top:42%; translate:-50% -50%; display:flex; white-space:nowrap; font:200 min(var(--fs-backdrop),20vw)/1 var(--ff-wide); letter-spacing:.06em; color:transparent; -webkit-text-stroke:1px rgba(244,238,227,.11); transform:translateX(calc(var(--hero-m) * -8vw)); opacity:calc(1 - var(--hero-p) * .5); user-select:none; }
.hero__wordmark i{ display:inline-block; font-style:normal; }
.js .hero__wordmark i{ opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease-out), transform 1.2s var(--ease-out); }
.js .hero__wordmark span:first-child i:nth-child(1){ transition-delay:120ms; }
.js .hero__wordmark span:first-child i:nth-child(2){ transition-delay:200ms; }
.js .hero__wordmark span:last-child i:nth-child(1){ transition-delay:280ms; }
.js .hero__wordmark span:last-child i:nth-child(2){ transition-delay:360ms; }
.js.is-loaded .hero__wordmark i{ opacity:1; transform:none; }
.hero__burgerword{ position:absolute; left:50%; bottom:12vh; translate:-50% 50%; font:600 .7rem/1 var(--ff-body); letter-spacing:.9em; padding:0 calc(14px - .9em) 0 14px; background:var(--c-night); color:var(--c-smoke); }

/* stage (contract) */
/* photo width + centre of its lit oval (on .hero so the phone wordmark can follow); the breakpoints below re-tune them.
   The centre never rises so high that the lit photo starts under the nav. */
.hero{ --stage-w:min(42vh,64vw); --stage-y:max(44%, calc(var(--nav-h) + 3vh + var(--stage-w) * .56)); }
.hero-stage{ position:absolute; inset:0; z-index:1;
  /* horizontal position of the hero photo: in the gap between copy (left) and picker (right) */
  --h3d-x:.14; --stage-x:calc(50% + var(--h3d-x, 0) * 50%); }
/* warm pool of light under the photo: the burger sits forward instead of sinking into the night */
.hero-stage::before{ content:''; position:absolute; left:var(--stage-x); top:calc(var(--stage-y) + var(--stage-w) * .34); translate:-50% -50%; width:calc(var(--stage-w) * 1.7); height:calc(var(--stage-w) * .9); background:radial-gradient(closest-side, rgba(246,207,126,.14), color-mix(in oklab, var(--tint) 6%, rgba(227,163,62,.06)) 50%, transparent); pointer-events:none; }
/* bigger lit core, eased falloff into the dark. The oval sits a little low in the shot (where Bono's burgers sit),
   so the photo's own top edge — table, wall — stays in the night */
.hero-fallback{ position:absolute; left:var(--stage-x); top:var(--stage-y); translate:-50% -55%; width:var(--stage-w); height:auto; aspect-ratio:4/5; object-fit:cover; -webkit-mask-image:radial-gradient(50% 45% at 50% 55%,#000 48%,rgba(0,0,0,.8) 62%,rgba(0,0,0,.5) 75%,rgba(0,0,0,.22) 87%,rgba(0,0,0,.06) 95%,transparent); mask-image:radial-gradient(50% 45% at 50% 55%,#000 48%,rgba(0,0,0,.8) 62%,rgba(0,0,0,.5) 75%,rgba(0,0,0,.22) 87%,rgba(0,0,0,.06) 95%,transparent); filter:brightness(1.02) contrast(1.05) saturate(1.04); transition:opacity 600ms var(--ease-out), visibility 0s; }
/* the ACILI TAVUK shot is only 492 px wide: never blown up past ~1.1× (or past its old size on very wide screens) */
.hero-fallback[src$="acili-tavuk.jpg"]{ max-width:max(540px, 26vw); max-height:max(675px, 32.5vw); }
.hero-fallback.is-entering{ opacity:0; }
.hero__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; display:none; }

/* content layer */
.hero-content{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.hero-content a,.hero-content button{ pointer-events:auto; }
.hero__main{ display:contents; }
.hero__copy{ position:absolute; left:var(--pad); bottom:10vh; width:min(560px,42vw); transform:translateY(calc(var(--hero-m) * -12vh)); opacity:calc(1 - var(--hero-p) / .6); }
.hero__eyebrow{ color:var(--c-gold); margin-bottom:18px; }
.hero__title{ font:340 var(--fs-hero)/.92 var(--ff-display); letter-spacing:-.025em; font-optical-sizing:auto; }
.hero__title em{ font-weight:300; display:inline-block; }
.hl{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.hl__in{ display:block; }
.js .hl__in{ transform:translateY(105%); transition:transform 900ms var(--ease-out); }
.js .hl:nth-child(1) .hl__in{ transition-delay:350ms; }
.js .hl:nth-child(2) .hl__in{ transition-delay:440ms; }
.js .hero__title em{ transform:skewX(-2deg); transition:transform 1.2s var(--ease-out) 700ms; }
.js.is-loaded .hl__in,.js.is-loaded .hero__title em{ transform:none; }
.hero__sub{ margin-top:20px; font:300 var(--fs-lead)/1.55 var(--ff-body); color:var(--c-smoke); max-width:44ch; }
.hero__ctas{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.hero__meta{ display:flex; align-items:center; gap:16px; margin-top:20px; flex-wrap:wrap; }
.rating{ font:500 .75rem/1.2 var(--ff-body); color:var(--c-smoke); white-space:nowrap; }
.star{ color:var(--c-gold); }
.rating__short{ display:none; }
.show-xs{ display:none; }
.js .hero__eyebrow,.js .hero__sub,.js .hero__ctas,.js .hero__meta{ opacity:0; transform:translateY(24px); transition:opacity 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay:600ms; }
.js .hero__eyebrow{ transition-delay:250ms; }
.js .hero__ctas{ transition-delay:680ms; }
.js .hero__meta{ transition-delay:760ms; }
.js.is-loaded .hero__eyebrow,.js.is-loaded .hero__sub,.js.is-loaded .hero__ctas,.js.is-loaded .hero__meta{ opacity:1; transform:none; }

/* picker */
.hero__side{ position:absolute; right:var(--pad); top:50%; width:340px; transform:translateY(calc(-50% - var(--hero-m) * 4vh)); }
.hero__pickerlabel{ margin-bottom:14px; }
.picker{ position:relative; }
.picker__bar{ position:absolute; left:-14px; top:0; width:2px; height:52px; background:var(--c-gold); transform:translateY(var(--bar-y,0px)); transition:transform var(--t-med) var(--ease-spring); }
.pick{ position:relative; display:grid; grid-template-columns:32px minmax(0,1fr); align-items:center; column-gap:10px; width:100%; height:52px; text-align:left; color:var(--c-sign); }
.pick::before,.pick:last-of-type::after{ content:''; position:absolute; left:0; right:0; top:0; height:1px; background:var(--c-line); transform-origin:left; }
.pick:last-of-type::after{ top:auto; bottom:0; }
.pick__num{ font:300 10px/1 var(--ff-wide); letter-spacing:.12em; color:var(--c-smoke); }
.pick__name{ font:500 1.25rem/1 var(--ff-display); letter-spacing:.02em; transition:transform 300ms var(--ease-out), color 300ms; white-space:nowrap; }
.pick__name .tag{ margin-left:6px; }
.pick[aria-pressed="true"] .pick__name{ color:var(--c-gold); }
.pick.is-pulse .pick__name{ animation:pickPulse 600ms var(--ease-out); }
@keyframes pickPulse{ 40%{ text-shadow:0 0 18px rgba(227,163,62,.6); } }
@media (hover:hover) and (pointer:fine){ .pick:hover .pick__name{ transform:translateX(6px); } }
.js .pick::before,.js .pick:last-of-type::after{ transform:scaleX(0); transition:transform 900ms var(--ease-out); }
.js .pick > span{ opacity:0; transition:opacity 600ms var(--ease-out), transform 300ms var(--ease-out), color 300ms; }
.js.is-loaded .pick::before,.js.is-loaded .pick:last-of-type::after{ transform:scaleX(1); transition-delay:750ms; }
.js.is-loaded .pick > span{ opacity:1; transition-delay:calc(1000ms + var(--i,0) * 50ms), 0s, 0s; }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px); } }
.hero__cue{ position:absolute; left:50%; bottom:3.5vh; translate:-50% 0; display:flex; flex-direction:column; align-items:center; gap:8px; font:300 9px/1 var(--ff-wide); letter-spacing:.24em; text-transform:uppercase; color:var(--c-ash); padding:4px 8px; }
.hero__cue i{ position:relative; width:1px; height:40px; background:var(--c-line); overflow:hidden; }
.hero__cue i::after{ content:''; position:absolute; left:0; top:-40%; width:1px; height:40%; background:linear-gradient(transparent,var(--c-gold)); animation:cue 2.2s var(--ease-io) infinite; }
@keyframes cue{ to{ top:100%; } }
.hero__cue:hover{ color:var(--c-gold); }

/* ---- hero: wide / short desktop ---- */
@media (min-width:768px) and (min-aspect-ratio:5/4){
  /* fallback photo sits where the 3D burger would be (between copy and picker);
     centred on the wordmark, dropped just enough that its lit top clears the frame line */
  .hero{ --stage-w:min(46vh,28.5vw); --stage-y:max(42%, calc(var(--nav-h) + 3vh + var(--stage-w) * .56)); }
  .hero-stage{ --h3d-x:.1; }
}
@media (min-width:1100px){
  /* the photo's lit edge keeps 30px clear of the picker's bar */
  .hero-stage{ --stage-x:min(50% + var(--h3d-x, 0) * 50%, 100% - var(--pad) - 384px - var(--stage-w) * .435); }
}
@media (min-width:1100px) and (max-width:1535px){
  /* laptops: title (5.8vw) and picker (340px) close in → the photo never outgrows the gap between them (unless the window is
     tall enough that the copy sits well below it), and may sit a little higher; on short screens the copy rises toward it,
     so the photo trims down with the height */
  .hero{ --stage-w:min(46vh, 94vh - 376px, 28.5vw, max(57vw - 410px, 40vw - 192px, 50vh - 140px)); --stage-y:max(38%, calc(var(--nav-h) + 3vh + var(--stage-w) * .56)); }
}
@media (min-width:1100px) and (max-height:860px){
  /* short screens: anchor the picker column under the frame line */
  .hero__pickerlabel{ display:none; }
  .pick,.picker__bar{ height:44px; }
  .hero__cue i{ height:26px; }
}

/* ---- hero: tablet landscape (768–1099, wide) = compact desktop ---- */
@media (min-width:768px) and (max-width:1099px) and (min-aspect-ratio:5/4){
  .hero__copy{ width:min(460px,46vw); bottom:8vh; }
  .hero__title{ font-size:clamp(2.6rem,4.6vw,3.6rem); }
  .hero__sub{ display:none; }
  .hero__side{ width:290px; top:54%; }
  .hero__pickerlabel,.hero__dateline--r,.hero__cue{ display:none; }
  .pick{ height:46px; }
  .picker__bar{ height:46px; }
  /* copy sits bottom-left, picker right: burger goes to the free upper-left/centre area, its lit top just under the frame line */
  .hero-stage{ --h3d-x:-.1; }
  .hero{ --stage-w:min(44vh,33vw); --stage-y:calc(var(--nav-h) + 3vh + var(--stage-w) * .56); }
}
/* landscape phones (e.g. 844×390): the centred picker column would rise under the nav → slim column under the nav */
@media (min-width:768px) and (max-width:1099px) and (min-aspect-ratio:5/4) and (max-height:560px){
  .hero__side{ top:calc(var(--nav-h) + 8px); transform:translateY(calc(var(--hero-m) * -4vh)); width:260px; }
  .hero__eyebrow,.hero__meta,.hero__burgerword,.hero__dateline{ display:none; }
  .pick,.picker__bar{ height:36px; } /* seven picks still fit under the nav */
  .hero__title{ font-size:clamp(2rem,4.2vw,2.8rem); }
  /* burger stays below the nav, in the pocket between the buttons and the picker */
  .hero{ --stage-w:min(43vh,24vw); --stage-y:calc(var(--nav-h) + var(--stage-w) * .6); }
  .hero-stage{ --h3d-x:.02; }
}

/* ---- hero: phone + tablet portrait share the bottom stack ---- */
/* chip row edges: only the side that still hides chips fades (scroll-driven where supported, else a fixed right fade) */
@property --chip-l{ syntax:'<length-percentage>'; inherits:false; initial-value:0px; }
@property --chip-r{ syntax:'<length-percentage>'; inherits:false; initial-value:0px; }
@keyframes chipEdges{ 0%{ --chip-l:0px; --chip-r:44px; } 6%{ --chip-l:16px; } 94%{ --chip-r:44px; } 100%{ --chip-l:16px; --chip-r:0px; } }
@media (max-width:767px), (min-width:768px) and (max-width:1099px) and (max-aspect-ratio:5/4){
  /* three rows: nav · stage · stack. The stage row is exactly the room the stack leaves,
     so the burger fills it and never slips under the chips or the title */
  .hero{ --hp:var(--pad); display:grid; grid-template:var(--nav-h) minmax(0,1fr) auto / minmax(0,1fr); }
  .hero-stage{ --h3d-x:0; position:relative; inset:auto; grid-row:2; }
  /* photo as tall as the row allows (at most 80vw wide); the pool of light follows it */
  .hero-fallback{ top:50%; width:auto; height:min(100% - 24px, 100vw); }
  .hero-stage::before{ top:calc(50% + min(100% - 24px, 100vw) * .27); width:auto; height:calc(min(100% - 24px, 100vw) * .72); aspect-ratio:17/9; }
  .hero-content{ position:relative; inset:auto; grid-row:3; }
  .hero__burgerword{ display:none; }
  /* the scrim only lies under the stack (+ a short fade above it): it no longer dims the burger */
  .hero__scrim{ display:block; grid-row:3; inset:-56px 0 0; background:linear-gradient(to top, rgba(11,10,8,.94), rgba(11,10,8,.6) 55%, transparent); }
  .hero__main{ display:flex; flex-direction:column; gap:12px; position:relative; padding:0 var(--hp) max(16px, env(safe-area-inset-bottom)); transform:translateY(calc(var(--hero-m) * -6vh)); opacity:calc(1 - var(--hero-p) / .6); }
  .hero__copy,.hero__side{ display:contents; }
  .hero__copy{ transform:none; opacity:1; }
  .hero__eyebrow,.hero__pickerlabel{ display:none; }
  /* chips */
  .hero__picker{ order:1; min-width:0; margin-inline:calc(var(--hp) * -1); }
  .picker{ display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-inline:var(--hp); scroll-padding-inline:var(--hp); --chip-r:15%; -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--chip-l,0px),#000 calc(100% - var(--chip-r)),transparent); mask-image:linear-gradient(to right,transparent,#000 var(--chip-l,0px),#000 calc(100% - var(--chip-r)),transparent); }
  @supports (animation-timeline:scroll()){ .picker{ --chip-r:0px; animation:chipEdges linear both; animation-timeline:scroll(self inline); } }
  .picker::-webkit-scrollbar{ display:none; }
  .picker::after{ content:''; flex:0 0 24px; }
  .picker__bar,.pick__num{ display:none; }
  .pick{ display:inline-flex; width:auto; height:44px; padding:0 16px; gap:8px; border:1px solid var(--c-line); flex:none; scroll-snap-align:start; background:rgba(11,10,8,.35); transition:border-color 300ms, background-color 300ms; }
  .pick::before,.pick:last-of-type::after{ display:none; }
  .pick__name{ font-size:1rem; }
  .pick__name .tag{ display:none; }
  .pick[aria-pressed="true"]{ border-color:var(--c-gold); background:var(--c-gold-06); }
  .pick:focus-visible{ outline-offset:-4px; } /* the chip row scrolls: an outside ring would be clipped */
  /* stack order */
  .hero__meta{ order:3; margin-top:0; gap:10px; }
  .rating__full{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .rating__short{ display:inline; }
  .hero__title{ order:4; font-size:clamp(2.3rem,10vw,3rem); }
  .hero__sub{ order:5; margin-top:0; font-size:1rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .hero__ctas{ order:6; margin-top:4px; flex-wrap:nowrap; }
  .hero__ctas .btn{ flex:1; padding:0 12px; }
  .hero__cue{ display:none; }
}
/* tablet portrait refinements */
@media (min-width:768px) and (max-width:1099px) and (max-aspect-ratio:5/4){
  .hero{ grid-template-rows:calc(var(--nav-h) + 2vh) minmax(0,1fr) auto; } /* stage starts at the frame line, under the datelines */
  .hero__frame{ top:calc(var(--nav-h) + 2vh); left:4vw; width:calc(100% - 8vw); height:calc(60% - var(--nav-h) - 2vh); }
  .hero__main{ padding-bottom:max(5vh, env(safe-area-inset-bottom)); gap:14px; }
  .hero__title{ font-size:clamp(3rem,7vw,4.6rem); }
  .hero__ctas .btn{ flex:0 0 auto; padding:0 24px; }
  .hero__sub{ max-width:52ch; font-size:1.05rem; }
  /* the seven chips fit across a tablet: one even row, no scrolling, no fade */
  .picker{ --chip-r:0px; }
  .picker::after{ display:none; }
  .pick{ flex:1 0 auto; justify-content:center; padding:0 12px; }
}
/* squarish tablet / small laptop window (aspect 1–1.25): the full stack would cover the burger → slimmer stack, burger higher */
@media (min-width:768px) and (max-width:1099px) and (max-aspect-ratio:5/4) and (min-aspect-ratio:1/1){
  .hero__sub{ display:none; }
  .hero__title{ font-size:clamp(2.4rem,5.4vw,3.4rem); }
  .hero__main{ gap:10px; padding-bottom:max(4vh, env(safe-area-inset-bottom)); }
  .hero__frame{ height:calc(52% - var(--nav-h) - 2vh); }
}
/* ---- hero: phone ---- */
@media (max-width:767px){
  .hero{ height:100vh; height:100svh; min-height:640px; }
  .hero__bg{ background:
    radial-gradient(40% 40% at 50% 36%, color-mix(in oklab, var(--tint) 16%, transparent), transparent),
    radial-gradient(70% 40% at 50% 36%, rgba(227,163,62,.20), transparent 70%),
    radial-gradient(40% 7% at 50% 52%, rgba(246,207,126,.10), transparent),
    conic-gradient(from 180deg at 50% -10%, transparent 160deg, rgba(246,207,126,.07) 175deg 185deg, transparent 200deg),
    #0B0A08; }
  .hero__frame,.hero__dateline{ display:none; }
  /* the stacked BO/NO sits on the stage row, centred on the photo, and grows with it so the letters still frame the burger */
  .hero__backdrop{ grid-row:2 / 3; container-type:size; }
  .hero__wordmark{ flex-direction:column; align-items:center; top:50%; font-size:50vw; font-size:calc(min(100cqh - 24px, 100vw) * .5); line-height:.9; }
  .hide-xs{ display:none; }
  .show-xs{ display:inline; }
}
@media (max-width:359px){
  .hero__ctas{ flex-wrap:wrap; }
  .hero__ctas .btn{ flex:1 1 100%; }
}
@media (max-width:767px) and (max-height:700px){
  .hero__sub{ display:none; }
}

/* ============================ ŞERİT ============================ */
.serit{ position:relative; height:84px; overflow:hidden; border-block:1px solid var(--c-line); background:var(--c-night); display:flex; align-items:center; }
.serit__track{ display:flex; width:max-content; transform:translate3d(var(--mx,0px),0,0) skewX(var(--msk,0deg)); will-change:transform; }
.serit__row{ display:flex; align-items:center; flex:none; }
.serit__it{ font:300 1.6rem/1 var(--ff-display); font-style:italic; color:var(--c-sign); white-space:nowrap; }
.serit__en{ font:300 .75rem/1 var(--ff-wide); letter-spacing:.3em; color:var(--c-gold); white-space:nowrap; }
.serit__sep{ width:12px; height:8px; border:1px solid var(--c-smoke); margin:0 28px; flex:none; }
@media (max-width:767px){ .serit{ height:60px; } .serit__it{ font-size:1.15rem; } .serit__sep{ margin:0 18px; } }

/* ============================ PHOTO FRAME / PLACEHOLDER ============================ */
.ph{ position:relative; display:block; overflow:hidden; background:var(--c-soot-2); }
.ph.is-broken,.ambalaj .ph{ background:var(--c-paper) var(--bono-pattern) repeat; background-size:240px auto; } /* branded paper only on failure (and on the paper section) */
.ph > img{ width:100%; height:100%; object-fit:cover; }
.ph.is-broken > img{ visibility:hidden; }
.ph__name{ position:absolute; left:50%; top:50%; translate:-50% -50%; font:700 .8rem/1.2 var(--ff-wide); letter-spacing:.12em; color:var(--c-ink); background:var(--c-paper-2); border:1px solid var(--c-ink); padding:10px 14px; text-align:center; max-width:86%; }
.frame{ position:relative; overflow:visible; }
.frame::before{ content:''; position:absolute; inset:-14px; border:1px solid var(--c-line); pointer-events:none; }
.frame.ph{ overflow:hidden; outline:1px solid var(--c-line); outline-offset:13px; }
.frame.ph::before{ display:none; }
.corner{ position:absolute; font:300 10px/1 var(--ff-wide); letter-spacing:.2em; color:var(--c-smoke); z-index:3; background:var(--c-night); padding:2px 8px; }
.corner--tl{ top:-19px; left:12px; }
.corner--br{ bottom:-19px; right:12px; }

/* unveil */
.js .unveil{ clip-path:inset(100% 0 0 0); transition:clip-path 1.4s var(--ease-io); }
.js .unveil > img{ scale:1.18; transition:scale 1.8s var(--ease-out); }
.js .unveil.is-in{ clip-path:inset(0); }
.js .unveil.is-in > img{ scale:1; }
.js .frame.unveil{ clip-path:inset(100% -20px -20px -20px); }
.js .frame.unveil.is-in{ clip-path:inset(-20px); }

/* reveals */
.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay:calc(var(--i,0) * 70ms); }
.js .reveal.is-in{ opacity:1; transform:none; }
.split-lines .w{ display:inline-block; overflow:hidden; vertical-align:top; padding:0 .05em .12em; margin:0 -.05em -.12em; }
.split-lines .w__in{ display:inline-block; }
.js .split-lines.is-split .w__in{ transform:translateY(105%); transition:transform 900ms var(--ease-out); transition-delay:calc(var(--l,0) * 90ms); }
.js .split-lines.is-split.is-in .w__in{ transform:none; }
.rule{ display:block; height:1px; background:var(--c-line); transform-origin:left; }
.js .rule{ transform:scaleX(0); transition:transform 1.2s var(--ease-io); }
.js .rule.is-in{ transform:scaleX(1); }

/* ============================ §01 HİKÂYE ============================ */
.hikaye__text{ grid-column:1/9; }
.hikaye .statement{ max-width:20ch; }
.statement .sw{ opacity:clamp(.18, calc(var(--p,1) * (var(--n,1) + 1) - var(--w,0)), 1); transition:opacity 120ms linear; }
.hikaye__lead{ margin-top:var(--sp-7); margin-left:calc(100% / 8); }
.hikaye__lead + .hikaye__lead{ margin-top:var(--sp-4); }
.hikaye__photo{ grid-column:9/13; align-self:start; margin-top:var(--sp-6); }
.hikaye__photo .ph{ aspect-ratio:4/5; overflow:hidden; }
.hikaye__photo .frame > img{ position:absolute; inset:-6% 0; height:112%; object-position:50% 35%; transform:translateY(calc(var(--pp,0) * 6%)); }
.stats{ grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); margin-top:var(--sp-9); border-top:1px solid var(--c-line); }
.stat{ padding:var(--sp-6) var(--sp-5) 0; border-left:1px solid var(--c-line); }
.stat:first-child{ border-left:0; padding-left:0; }
.stat__num{ font:300 var(--fs-stat)/1 var(--ff-display); letter-spacing:-.03em; font-variant-numeric:lining-nums tabular-nums; white-space:nowrap; }
.stat:nth-child(4) .stat__num{ font-size:calc(var(--fs-stat) * .5); line-height:1.1; white-space:normal; padding-top:.35em; }
.stat__unit{ font-size:.4em; letter-spacing:0; color:var(--c-smoke); }
.stat__label{ margin-top:var(--sp-3); font-size:.875rem; color:var(--c-smoke); max-width:22ch; }
.hikaye__foot{ grid-column:1/-1; margin-top:var(--sp-6); }
.hikaye__macro{ position:relative; margin-top:var(--sp-9); }
.hikaye__macro .ph{ aspect-ratio:21/9; }
.hikaye__macro img{ object-position:50% 55%; }
.hikaye__macro figcaption{ position:absolute; left:0; right:0; bottom:0; margin:0; padding:80px var(--pad) 28px; background:linear-gradient(transparent, rgba(11,10,8,.75)); color:var(--c-sign); }
@media (max-width:1099px){
  .hikaye__text{ grid-column:1/8; }
  .hikaye__photo{ grid-column:8/13; }
  .hikaye__lead{ margin-left:0; }
  .stat__num{ font-size:calc(var(--fs-stat) * .8); }
}
@media (max-width:767px){
  .hikaye__text,.hikaye__photo{ grid-column:1/-1; }
  .hikaye__photo{ margin-top:var(--sp-8); padding:0 14px; }
  .stats{ grid-template-columns:1fr 1fr; }
  .stat{ padding:var(--sp-5) var(--sp-4); border-bottom:1px solid var(--c-line); }
  .stat:nth-child(odd){ border-left:0; padding-left:0; }
  .stat__num{ font-size:2.6rem; }
  .stat:nth-child(4) .stat__num{ font-size:1.45rem; line-height:1.8; }
  .hikaye__macro .ph{ aspect-ratio:4/3; }
}

/* ============================ §02 İMZA ============================ */
.imza{ --tint:#D8457F; transition:--tint 900ms var(--ease-io); background:radial-gradient(50% 50% at 72% 40%, color-mix(in oklab, var(--tint) 8%, transparent), transparent), var(--c-night); }
.imza__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gut); }
.imza__stage{ display:none; }
.imza__list{ grid-column:1/-1; }
.spread{ padding-block:var(--sp-8); }
.spread + .spread{ border-top:1px solid var(--c-line); }
.spread__photo{ width:min(82vw,560px); aspect-ratio:4/5; margin:14px auto var(--sp-8); }
.spread__name{ font:300 clamp(3.5rem,18vw,5rem)/.85 var(--ff-display); letter-spacing:-.035em; margin-top:var(--sp-3); font-optical-sizing:auto; white-space:nowrap; }
.spread__name .ch{ display:inline-block; }
.spread__name .chw{ white-space:nowrap; }
.spread__name--2{ white-space:normal; } /* ACILI TAVUK: wraps between the words */
/* room above the caps so Ü/İ dots aren't clipped by the reveal mask */
.spread__name.is-split{ overflow:hidden; padding-bottom:.08em; padding-top:.22em; margin-top:calc(var(--sp-3) - .22em); }
.js .spread__name.is-split .ch{ transform:translateY(100%); transition:transform 800ms var(--ease-out); transition-delay:calc(var(--c) * 40ms); }
.js .spread.is-in .spread__name.is-split .ch{ transform:none; }
.spread__btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--sp-6); }
/* tablet: photo left (sticky), text right — roughly halves the section */
@media (min-width:768px) and (max-width:1099px){
  .spread{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); grid-template-rows:repeat(7,auto) 1fr; align-items:start; column-gap:var(--sp-7); padding-block:var(--sp-7); }
  .spread > :not(.spread__photo){ grid-column:2; }
  .spread__photo,.spread__photo.tilt{ grid-column:1; grid-row:1 / -1; align-self:start; width:auto; margin:14px; position:sticky; top:calc(var(--nav-h) + 28px); }
  .spread__name{ font-size:clamp(3rem,7.5vw,4.5rem); }
}
/* phone: smaller photo */
@media (max-width:767px){
  .spread{ padding-block:var(--sp-7); }
  .spread__photo{ width:min(72vw,420px); margin:14px auto var(--sp-6); }
}
@media (min-width:1100px){
  .imza__stage{ display:flex; align-items:center; justify-content:center; grid-column:1/6; position:sticky; top:max(12vh, calc(var(--nav-h) + 24px)); height:76vh; }
  .imza__frame{ width:min(100%, calc(76vh * .8 - 28px)); aspect-ratio:4/5; }
  .imza__frame::before{ z-index:1; }
  .imza__ph{ position:absolute; inset:0; clip-path:inset(100% 0 0 0); transition:clip-path 900ms var(--ease-io), scale 900ms var(--ease-io), opacity 900ms var(--ease-io); }
  .imza__ph.is-active{ clip-path:inset(0); z-index:2; }
  .imza__ph.was-active{ clip-path:inset(0); z-index:1; scale:1.04; opacity:.6; }
  .imza__list{ grid-column:7/13; container-type:inline-size; }
  .spread{ min-height:70vh; display:flex; flex-direction:column; justify-content:center; padding-block:var(--sp-8); }
  .spread + .spread{ border-top:0; }
  .spread__photo{ display:none; }
  .spread__name{ font-size:var(--fs-name); font-size:min(var(--fs-name), 27cqi); }
}

/* ============================ §03 MENÜ ============================ */
.menu{ background:var(--c-soot); }
.mcard{ position:relative; max-width:1200px; margin-inline:auto; border:1px solid var(--c-line); padding:clamp(24px,5vw,72px); }
.mcard__logo{ position:absolute; top:0; left:50%; translate:-50% -50%; background:var(--c-soot); padding:0 16px; }
.mcard__head{ text-align:center; padding-top:var(--sp-5); }
.mcard__head .h2{ margin-inline:auto; }
.mcard__live{ margin-top:var(--sp-5); font-size:10px; }
.tabs{ position:relative; display:flex; justify-content:center; gap:4px; margin:var(--sp-7) auto var(--sp-6); border-bottom:1px solid var(--c-line); width:max-content; max-width:100%; }
.tabs [role="tab"]{ height:44px; padding:0 18px; font:600 .8125rem/1 var(--ff-body); letter-spacing:.08em; text-transform:uppercase; color:var(--c-smoke); transition:color var(--t-fast); white-space:nowrap; }
.tabs [role="tab"]:hover,.tabs [aria-selected="true"]{ color:var(--c-sign); }
.tabs__n{ font:300 10px/1 var(--ff-wide); letter-spacing:.1em; color:var(--c-gold); margin-left:4px; vertical-align:.3em; }
.tabs__ind{ position:absolute; bottom:-1px; left:0; height:1px; width:var(--iw,0px); background:var(--c-gold); transform:translateX(var(--ix,0px)); transition:transform var(--t-med) var(--ease-out), width var(--t-med) var(--ease-out); }
.tpanel{ outline-offset:8px; }
.tpanel + .tpanel{ margin-top:var(--sp-8); }
.js .tabs:not([hidden]) ~ .tpanel + .tpanel{ margin-top:0; }
.tpanel__h{ font:300 var(--fs-h3)/1.2 var(--ff-display); margin-bottom:var(--sp-5); color:var(--c-smoke); }
.js .tabs:not([hidden]) ~ .tpanel .tpanel__h{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.tpanel.is-anim .mrow,.tpanel.is-anim .ad,.tpanel.is-anim .feat{ animation:fadeUp 500ms var(--ease-out) both; animation-delay:calc(var(--i,0) * 25ms); }

/* featured */
.feat{ display:grid; grid-template-columns:40% 1fr; background:var(--c-night); border:1px solid var(--c-gold); margin-bottom:var(--sp-7); position:relative; }
.feat__photo{ aspect-ratio:4/5; }
.feat__body{ position:relative; padding:clamp(24px,4vw,56px); display:flex; flex-direction:column; justify-content:center; gap:14px; }
.feat__name{ font:300 3rem/1 var(--ff-display); letter-spacing:-.02em; }
.feat__desc{ color:var(--c-smoke); max-width:40ch; }
.feat__price{ font-size:2.5rem; line-height:1; color:var(--c-gold); }
.stamp{ position:absolute; top:24px; right:24px; font:500 10px/1 var(--ff-wide); letter-spacing:.2em; color:#E0533A; border:1.5px solid currentColor; padding:8px 10px; rotate:-4deg; }
/* narrow cards: the stamp sits above the name instead of on top of it */
@media (max-width:767px){ .stamp{ position:static; display:inline-block; align-self:flex-start; margin-bottom:14px; } }
/* the lamp (mouse only; main.js builds it once the card is near the screen): a warm cone leaves the cursor tip and
   lands on the burger. Pool = warm soft-light on the burger (a deep orange, so the bun gets toastier, not paler: its
   red is already at full). Beam = one canvas over the card, drawn by main.js: the rest of the photo in dusk, cut
   through by the pool and the cone's path, and the cone in the air over the dark side (normal blending, faint enough
   that the description it crosses keeps ≥4.8:1 even at its brightest, the cursor tip). Hidden until a mouse rests on
   the card. */
.feat__pool,.feat__beam{ position:absolute; pointer-events:none; visibility:hidden; }
.feat.is-lamp :is(.feat__pool,.feat__beam){ visibility:visible; }
.feat__pool{ left:0; top:0; width:200px; height:200px; margin:-100px 0 0 -100px; border-radius:50%; opacity:0; background:radial-gradient(closest-side, rgba(255,140,60,.8), rgba(255,140,60,.55) 45%, rgba(255,140,60,.18) 78%, rgba(255,140,60,0)); mix-blend-mode:soft-light; }
.feat__beam{ inset:0; width:100%; height:100%; z-index:1; }
/* the small red stamp has the least contrast to spare (5.15:1, 3.6:1 under the cone): it stays above the light */
.feat.is-lamp .stamp{ z-index:2; }
@media (max-width:767px){ .feat.is-lamp .stamp{ position:relative; } }
@media (forced-colors:active){ .feat__pool,.feat__beam{ display:none; } }

/* rows */
.mlist--2{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(32px,5vw,72px); grid-auto-flow:column; grid-template-rows:repeat(4,auto); }
.mrow{ position:relative; padding:18px 0; border-bottom:1px solid var(--c-line); }
.mrow__line{ display:grid; grid-template-columns:auto minmax(16px,1fr) auto; align-items:baseline; gap:12px; }
.mrow__name{ font:500 1.3rem/1.2 var(--ff-display); letter-spacing:.04em; transition:transform 300ms var(--ease-out); }
.mrow--s .mrow__name{ letter-spacing:0; }
.mrow__name .tag{ margin-left:6px; }
.mrow__btn{ font:inherit; letter-spacing:inherit; text-align:left; }
.mrow.is-expandable{ cursor:pointer; }
.mrow__lead{ height:1px; align-self:baseline; border-bottom:1px dotted var(--c-line); background:linear-gradient(var(--c-gold),var(--c-gold)) 0 100%/0 1px no-repeat; transition:background-size 500ms var(--ease-out); position:relative; top:-.3em; }
.mrow .price{ font-size:1.3rem; }
.mrow__desc{ margin-top:6px; font-size:.9375rem; color:var(--c-smoke); max-width:46ch; line-height:1.55; }
.mrow__spec{ margin-top:8px; font:300 10px/1.6 var(--ff-wide); letter-spacing:.14em; color:var(--c-ash); display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mini3d::after{ content:''; position:absolute; inset:-8px -6px; } /* 44px hit area, same look */
.mini3d{ position:relative; z-index:1; height:28px; padding:0 10px; font:300 10px/1 var(--ff-wide); letter-spacing:.14em; color:var(--c-gold); border:1px solid var(--c-gold); transition:background-color var(--t-fast), color var(--t-fast); }
.mini3d:hover{ background:var(--c-gold); color:var(--c-ink); }
.mrow__more{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 500ms var(--ease-out); }
.mrow__more > div{ overflow:hidden; min-height:0; visibility:hidden; transition:visibility 0s 500ms; }
.mrow.is-open .mrow__more{ grid-template-rows:1fr; }
.mrow.is-open .mrow__more > div{ visibility:visible; transition-delay:0s; }
.mrow__ph{ width:38%; max-width:220px; aspect-ratio:4/5; margin-top:14px; }
.mrow.is-flash{ animation:flash 1.2s var(--ease-out); }
@keyframes flash{ from{ background:var(--c-gold-16); } to{ background:transparent; } }
@media (hover:hover) and (pointer:fine){
  .mrow:hover .mrow__lead,.mrow:focus-within .mrow__lead{ background-size:100% 1px; }
  .mrow:hover .mrow__name,.mrow:focus-within .mrow__name{ transform:translateX(6px); }
}

/* classifieds */
.ads{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--c-line); border-left:1px solid var(--c-line); }
.ad{ position:relative; padding:24px 24px 64px; border-right:1px solid var(--c-line); border-bottom:1px solid var(--c-line); transition:background-color var(--t-fast); }
.ad:hover{ background:var(--c-soot-2); }
.ad__name{ margin-top:0; font:500 1.15rem/1.25 var(--ff-display); }
.ad__price{ position:absolute; right:16px; bottom:16px; background:var(--c-sign); color:var(--c-ink); padding:2px 8px; font-weight:500; }
.ad__price .price{ font-weight:500; }
.mcard__foot{ margin-top:var(--sp-8); padding-top:var(--sp-6); border-top:1px solid var(--c-line); display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.mcard__note{ font-size:.875rem; color:var(--c-smoke); }

/* cursor preview */
.mpreview{ position:fixed; left:0; top:0; z-index:40; width:240px; height:300px; pointer-events:none; opacity:0; transform:translate3d(var(--px,0px),var(--py,0px),0) rotate(var(--pr,0deg)); scale:.9; transition:opacity 250ms var(--ease-out), scale 350ms var(--ease-out); }
.mpreview.is-on{ opacity:1; scale:1; }
.mpreview__in{ width:100%; height:100%; box-shadow:var(--sh-photo); clip-path:inset(0 0 100% 0); transition:clip-path 450ms var(--ease-out); }
.mpreview.is-on .mpreview__in{ clip-path:inset(0); }
.mpreview__name{ display:none; }
.mpreview.is-empty{ display:none; } /* rows without a Bono photo get no floating card */
.mpreview.is-empty .mpreview__name,.mpreview .is-broken .mpreview__name{ display:block; position:absolute; left:50%; top:50%; translate:-50% -50%; font:700 .75rem/1.2 var(--ff-wide); letter-spacing:.1em; color:var(--c-ink); background:var(--c-paper-2); border:1px solid var(--c-ink); padding:10px 12px; text-align:center; width:max-content; max-width:80%; }

@media (min-width:1100px){ .ad:last-child:nth-child(3n+2){ grid-column:span 2; } .ad:last-child:nth-child(3n+1){ grid-column:span 3; } }
@media (max-width:1099px){ .ads{ grid-template-columns:1fr 1fr; } .ad:last-child:nth-child(odd){ grid-column:span 2; } }
@media (max-width:767px){
  .tabs{ position:sticky; top:var(--nav-h); z-index:5; background:var(--c-soot); width:auto; margin-inline:calc(clamp(24px,5vw,72px) * -1 + 0px); padding-inline:8px; gap:0; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; transition:top var(--t-med) var(--ease-out); }
  body.nav-hidden .tabs{ top:0; }
  body:has(.nav:focus-within) .tabs,body:has(.topbar:focus-within) .tabs{ top:var(--nav-h); }
  .tabs{ max-width:none; }
  .tabs::-webkit-scrollbar{ display:none; }
  .tabs [role="tab"]{ padding:0 9px; letter-spacing:.04em; font-size:.75rem; }
  .tabs [role="tab"]:focus-visible{ outline-offset:-4px; }
  .mlist--2{ grid-template-columns:1fr; grid-auto-flow:row; grid-template-rows:none; }
  .feat{ grid-template-columns:1fr; }
  .feat__photo{ aspect-ratio:16/10; }
  .feat__name{ font-size:2.4rem; }
  .ads{ grid-template-columns:1fr; }
  .ad,.ad:last-child:nth-child(odd){ grid-column:auto; padding:16px 96px 16px 20px; min-height:56px; }
  .ad__price{ top:50%; bottom:auto; translate:0 -50%; }
  .mrow__name{ font-size:1.15rem; }
  .mrow .price{ font-size:1.15rem; }
}

/* tilt (İmza photos) */
.tilt{ position:relative; transition:transform 600ms var(--ease-out); transform:perspective(900px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)); }
.tilt::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 35%,rgba(246,207,126,.18) 50%,transparent 65%); background-size:250% 100%; background-position:var(--gx,120%) 0; opacity:0; transition:opacity 300ms; }
.tilt.is-tilting::after{ opacity:1; }

/* ============================ AMBALAJ ============================ */
.ambalaj{ --torn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14V7l6-4 7 5 5-6 9 7 6-5 8 4 4-6 9 6 7-3 5 5 8-7 6 5 9-3 5 6 7-6 8 4 5-5 9 6 6-4 7 3 4-5 8 6 7-4 6 2V14z'/%3E%3C/svg%3E");
  --torn-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14' preserveAspectRatio='none'%3E%3Cpath transform='matrix(1 0 0 -1 0 14)' d='M0 14V8l5-5 8 6 6-5 8 4 5-6 9 7 6-4 8 3 5-6 8 5 7-2 6 5 9-6 5 4 8-3 6 5 7-5 5 3 9-4 6 6 7-5 5 4 8-6 6 5 4-1V14z'/%3E%3C/svg%3E");
  position:relative; background:var(--c-paper); color:var(--c-ink); min-height:max(420px,70vh); display:flex; align-items:center; overflow:hidden;
  -webkit-mask:var(--torn) top/160px 14px repeat-x, linear-gradient(#000,#000) center/100% calc(100% - 26px) no-repeat, var(--torn-b) bottom/160px 14px repeat-x;
  mask:var(--torn) top/160px 14px repeat-x, linear-gradient(#000,#000) center/100% calc(100% - 26px) no-repeat, var(--torn-b) bottom/160px 14px repeat-x; }
.ambalaj::before{ content:''; position:absolute; inset:-160px; background:var(--bono-pattern-ink) repeat; background-size:360px auto; opacity:.9; will-change:transform; transform:translate3d(calc(var(--d,0) * .15px), calc(var(--d,0) * .08px), 0); }
.ambalaj__in{ position:relative; width:100%; display:flex; align-items:center; justify-content:center; gap:clamp(32px,6vw,96px); padding-block:72px; }
.ambalaj__label{ background:var(--c-paper-2); border:1px solid var(--c-ink); padding:28px 40px; box-shadow:var(--sh-paper); text-align:center; max-width:560px; transform:translateY(calc(var(--ap,0) * -4%)); }
.ambalaj__lab{ color:var(--c-kraft-d); }
.ambalaj__h{ margin-top:12px; font:400 var(--fs-h2)/1 var(--ff-display); font-style:italic; letter-spacing:-.02em; }
.ambalaj__sub{ margin-top:14px; color:rgba(20,19,17,.75); }
.ambalaj__photo{ position:relative; width:300px; flex:none; background:var(--c-paper-2); padding:10px 10px 0; box-shadow:var(--sh-paper); rotate:-4deg; transition:rotate 1.2s var(--ease-out); }
.ambalaj__photo.is-in{ rotate:-2deg; }
.ambalaj__photo .ph{ aspect-ratio:4/5; }
.ambalaj__photo figcaption{ padding:10px 2px 12px; color:var(--c-ink); font-size:9px; }
.tape{ position:absolute; top:-12px; left:50%; translate:-50% 0; width:90px; height:26px; background:rgba(184,138,92,.7); rotate:3deg; z-index:2; }
@media (max-width:767px){
  .ambalaj{ min-height:max(420px,60vh); }
  .ambalaj__in{ flex-direction:column; }
  .ambalaj__label{ padding:24px 22px; }
  .ambalaj__photo{ width:64vw; rotate:-2deg; }
  .ambalaj__photo.is-in{ rotate:-1deg; }
}

/* ============================ §04 NERDEYİZ ============================ */
.nerdeyiz{ background:var(--c-night); }
.sign{ padding:var(--sect) var(--pad) clamp(48px,6vw,88px); text-align:center; position:relative; }
.sign__main{ font:200 clamp(2.5rem,8vw,8rem)/1 var(--ff-wide); letter-spacing:.12em; color:#FFF6E2; text-shadow:0 0 6px rgba(255,236,200,.8),0 0 28px rgba(255,200,140,.35),0 0 80px rgba(227,163,62,.18); white-space:nowrap; padding-left:.12em; }
.sign__sub{ margin-top:.9em; font:300 clamp(.42rem,1.33vw,1.33rem)/1 var(--ff-wide); letter-spacing:.6em; padding-left:.6em; color:#FFF6E2; text-shadow:0 0 6px rgba(255,236,200,.6),0 0 18px rgba(255,200,140,.25); }
.sign__l{ display:inline-block; }
.js .sign[data-ready] .sign__l{ opacity:.08; }
.js .sign.is-lit .sign__l{ animation:flick 900ms linear both; animation-delay:calc(var(--i) * 70ms); }
@keyframes flick{ 0%{ opacity:.08; } 30%{ opacity:1; } 55%{ opacity:.7; } 100%{ opacity:1; } } /* ≤3 changes/s per letter */
.sign__refl{ transform:scaleY(-1); -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.35),transparent 60%); mask-image:linear-gradient(to top,rgba(0,0,0,.35),transparent 60%); opacity:.12; filter:blur(2px); margin-top:6px; pointer-events:none; user-select:none; }
.js .sign[data-ready] .sign__refl{ opacity:0; transition:opacity 1s 1.1s; }
.js .sign.is-lit .sign__refl{ opacity:.12; }
@media (max-width:767px){ .sign{ overflow-x:clip; } .sign__main{ font-size:8.4vw; letter-spacing:.08em; } .sign__sub{ font-size:max(9px, 1.6vw); letter-spacing:.4em; padding-left:.4em; } }

.booth{ position:relative; background:var(--c-bottle); padding-block:clamp(72px,10vw,140px);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 59px, rgba(47,90,71,.5) 59px 60px, transparent 60px 66px, transparent 66px 120px),
    radial-gradient(120% 80% at 30% 0%, rgba(95,175,138,.08), transparent 60%); }
.booth::before{ content:''; position:absolute; inset:0; pointer-events:none; background-image:repeating-linear-gradient(180deg, rgba(244,238,227,.10) 0 4px, transparent 4px 9px); -webkit-mask-image:repeating-linear-gradient(90deg, transparent 0 65px, #000 65px 66px, transparent 66px 120px); mask-image:repeating-linear-gradient(90deg, transparent 0 65px, #000 65px 66px, transparent 66px 120px); opacity:.5; }
.booth::after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.08; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.booth__grid{ position:relative; z-index:1; row-gap:var(--sp-8); }
.booth :focus-visible{ outline-color:var(--c-glint); }
.booth .eyebrow{ color:var(--c-amber); }
.booth__info{ grid-column:1/6; }
.addr{ margin-top:var(--sp-6); font:400 1.5rem/1.35 var(--ff-display); }
.booth__btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--sp-6); }
.booth__btns .btn--ghost{ box-shadow:inset 0 0 0 1px var(--c-leather); }
.booth__map{ grid-column:7/13; align-self:start; }
.map{ position:relative; aspect-ratio:4/3; background:var(--c-night); transition:transform 500ms var(--ease-out); }
.map::before{ content:''; position:absolute; inset:-12px; border:1px solid var(--c-gold); pointer-events:none; translate:12px 12px; z-index:-1; }
.map iframe{ width:100%; height:100%; border:0; filter:grayscale(.9) invert(.9) sepia(.25) hue-rotate(110deg) contrast(.92); transition:filter 600ms var(--ease-out); }
.map:hover,.map:focus-within{ transform:translateY(-4px); }
.map:hover iframe,.map:focus-within iframe{ filter:none; }
.map__ns{ position:absolute; inset:0; display:grid; place-items:center; color:var(--c-smoke); }
.map__link{ margin-top:28px; font-size:.9375rem; }
.booth__mekan{ grid-column:1/-1; font:300 1.6rem/1.35 var(--ff-display); font-style:italic; color:rgba(244,238,227,.85); border-top:1px solid var(--c-leather); padding-top:var(--sp-6); }
@media (max-width:1099px){ .booth__info{ grid-column:1/7; } .booth__map{ grid-column:7/13; } }
@media (max-width:767px){
  .booth__info,.booth__map{ grid-column:1/-1; }
  .booth__btns .btn{ flex:1 1 auto; }
  .booth__call{ order:-1; flex-basis:100% !important; }
  .map{ aspect-ratio:1/1; margin-inline:12px 12px; }
  .booth__mekan{ font-size:1.3rem; }
}

/* ============================ YORUMLAR ============================ */
/* four Google reviews the owner chose: quiet cards, the guests' words in the display face */
.yorumlar{ background:var(--c-night); }
.yorumlar .shead__sub .star{ margin-right:4px; }
.quotes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gut); max-width:1200px; margin-inline:auto; }
.quote figure{ margin:0; height:100%; display:flex; flex-direction:column; gap:18px; padding:clamp(24px,3vw,44px); background:var(--c-soot); border:1px solid var(--c-line); }
.quote__stars{ font-size:.875rem; letter-spacing:.24em; color:var(--c-gold); }
.quote blockquote{ margin:0; flex:1; }
.quote blockquote p{ font:300 clamp(1.1rem,1rem + .45vw,1.375rem)/1.5 var(--ff-display); color:var(--c-sign); text-wrap:pretty; }
.quote blockquote p::before{ content:'“'; }
.quote blockquote p::after{ content:'”'; }
.quote figcaption{ color:var(--c-smoke); }
.quotes__cta{ display:flex; justify-content:center; margin-top:var(--sp-7); }
@media (max-width:767px){ .quotes{ grid-template-columns:1fr; } }

/* ============================ §05 İLETİŞİM ============================ */
.iletisim{ background:var(--c-soot); }
.iletisim__head{ grid-column:1/6; align-self:start; }
.clist{ grid-column:7/13; border-top:1px solid var(--c-line); }
.crow{ display:grid; grid-template-columns:7.5rem minmax(0,1fr) auto; align-items:baseline; column-gap:var(--sp-5); padding-block:clamp(20px,2.2vw,30px);
  background:linear-gradient(var(--c-gold),var(--c-gold)) 0 100%/0 1px no-repeat, linear-gradient(var(--c-line),var(--c-line)) 0 100%/100% 1px no-repeat; transition:background-size 500ms var(--ease-out); }
.crow__v{ font:300 clamp(1.5rem,1rem + 1.5vw,2.4rem)/1.15 var(--ff-display); letter-spacing:-.01em; font-variant-numeric:lining-nums tabular-nums; white-space:nowrap; transition:transform 300ms var(--ease-out), color var(--t-fast); }
.crow__note{ display:block; margin-top:8px; font:400 .8125rem/1.4 var(--ff-body); letter-spacing:.02em; color:var(--c-smoke); }
.crow__go{ font:600 .75rem/1 var(--ff-body); letter-spacing:.08em; text-transform:uppercase; color:var(--c-gold); white-space:nowrap; }
.crow:focus-visible{ outline-offset:4px; }
@media (hover:hover) and (pointer:fine){
  .crow:hover{ background-size:100% 1px, 100% 1px; }
  .crow:hover .crow__v{ transform:translateX(8px); color:var(--c-gold); }
}
@media (max-width:1099px){ .iletisim__head,.clist{ grid-column:1/-1; } .clist{ margin-top:var(--sp-8); } }
@media (max-width:767px){
  .crow{ grid-template-columns:minmax(0,1fr) auto; row-gap:8px; }
  .crow__k{ grid-column:1/-1; }
  .crow__v{ font-size:1.5rem; }
}

/* ============================ SİZDEN ============================ */
#sizden .eyebrow{ text-transform:none; letter-spacing:.12em; } /* the handle stays as written: @bonoburgerr */
.ig{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gut); align-items:start; }
.ig__it{ display:block; }
.ig__it .ph{ aspect-ratio:4/5; outline:1px solid var(--c-line); outline-offset:0; transition:outline-color 400ms, outline-offset 500ms var(--ease-out); }
.ig__it:nth-child(even) .ph{ aspect-ratio:1/1; }
.ig__it .frame::before{ display:none; }
.ig__it .ph::after{ content:'↗'; position:absolute; top:10px; right:12px; font-size:1rem; color:var(--c-sign); background:rgba(11,10,8,.6); width:30px; height:30px; display:grid; place-items:center; opacity:0; transform:translateY(-6px); transition:opacity 300ms, transform 300ms; }
.ig__it .ph img{ transition:scale 900ms var(--ease-out); }
@media (min-width:1100px){ .ig__it:nth-child(even){ margin-top:40px; } }
@media (hover:hover) and (pointer:fine){
  .ig:hover .ig__it .ph,.ig:focus-visible .ig__it .ph{ outline-color:var(--c-line); }
  .ig__it:hover .ph{ outline-color:var(--c-gold); outline-offset:6px; }
  .ig__it:hover .ph img{ scale:1.05; }
  .ig__it:hover .ph::after{ opacity:1; transform:none; }
}
.ig:focus-visible{ outline-offset:10px; }
.sizden__cta{ margin-top:var(--sp-8); display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
@media (max-width:1099px){ .ig__it:nth-child(even) .ph{ aspect-ratio:4/5; } }
@media (max-width:767px){ .ig{ grid-template-columns:1fr 1fr; gap:8px; } }

/* ============================ FOOTER ============================ */
.foot{ background:var(--c-night); border-top:1px solid var(--c-line); padding-block:var(--sp-10) var(--sp-6); }
.foot__logo{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.foot__box{ position:relative; display:inline-flex; font:200 min(17vw,20rem)/1 var(--ff-wide); letter-spacing:.12em; padding:.08em .08em .04em .2em; }
.foot__box > span{ display:inline-block; font-weight:var(--w,200); transition:font-weight 300ms var(--ease-out); }
.foot__rect{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.foot__rect rect{ fill:none; stroke:var(--c-sign); stroke-width:1; vector-effect:non-scaling-stroke; }
.js .foot__rect rect{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.8s var(--ease-io); }
.js .foot__logo.is-in .foot__rect rect{ stroke-dashoffset:0; }
.foot__burger{ margin-top:18px; font:600 clamp(.7rem,1.3vw,1.1rem)/1 var(--ff-body); letter-spacing:.9em; padding-left:.9em; }
.foot__tag{ margin-top:18px; }
.foot__info{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gut); margin-top:var(--sp-9); padding-top:var(--sp-6); border-top:1px solid var(--c-line); }
.foot__info .label{ margin-bottom:12px; }
.foot__info p,.foot__info address{ font-size:.9375rem; color:var(--c-sign); line-height:1.6; }
/* one crisp row of cream BONO between two hairlines; without JS just the hairlines */
.foot__strip{ height:32px; margin-top:var(--sp-8); border-block:1px solid var(--c-line); background:var(--bono-band, none) 0 50% / auto 20px repeat-x; }
.foot__bar{ display:flex; justify-content:space-between; align-items:center; gap:4px 24px; flex-wrap:wrap; margin-top:var(--sp-5); font-size:.8125rem; color:var(--c-smoke); }
.foot__bar > p{ margin-right:auto; }
.foot__motion{ font-size:.6875rem; color:var(--c-smoke); border-bottom:0; text-decoration:underline 1px var(--c-line); text-underline-offset:5px; }
.foot__motion:hover,html[data-motion="off"] .foot__motion{ color:var(--c-gold); text-decoration-color:var(--c-gold); }
.foot__top{ display:inline-block; padding:12px 0; }
@media (max-width:767px){
  .foot{ padding-bottom:calc(var(--sp-6) + env(safe-area-inset-bottom)); }
  .foot__info{ grid-template-columns:1fr 1fr; row-gap:var(--sp-6); }
  .foot__bar{ flex-direction:column; align-items:flex-start; }
}

/* ============================ MOBILE BAR ============================ */
.mbar{ display:none; }
@media (max-width:767px){
  .mbar{ position:fixed; left:0; right:0; bottom:0; z-index:45; display:grid; grid-template-columns:repeat(3,1fr); height:calc(56px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:rgba(11,10,8,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--c-line); transform:translateY(100%); visibility:hidden; transition:transform var(--t-med) var(--ease-out), visibility 0s var(--t-med); }
  body.show-mbar .mbar{ transform:none; visibility:visible; transition-delay:0s; }
  .mbar a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; font:600 .75rem/1 var(--ff-body); letter-spacing:.08em; text-transform:uppercase; color:var(--c-sign); }
  .mbar a + a{ border-left:1px solid var(--c-line); }
  .mbar svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
  .mbar__call{ color:var(--c-gold) !important; }
}

/* ============================ JOST METRICS ============================ */
/* Jost runs wider than the original display/body fonts: keep the original line breaks */
@media (min-width:1536px) and (min-aspect-ratio:5/4){ .hero{ --stage-w:min(53vh,30vw); } }
@media (min-width:1100px) and (max-width:1535px){ .hero__title{ font-size:min(var(--fs-hero), 5.8vw); } }
@media (max-width:767px){
  .spread__btns{ flex-wrap:nowrap; }
  .spread__btns .btn{ flex:1 1 auto; min-width:0; padding:0 14px; }
}
@media (max-width:339px){ .spread__btns{ flex-wrap:wrap; } }
.foot__info .ulink,.foot__info time{ white-space:nowrap; }
@media (max-width:374px){ .foot__info{ column-gap:12px; } .foot__info p,.foot__info address{ font-size:.875rem; } }

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:1ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; }
  .js .reveal,.js .split-lines.is-split .w__in,.js .unveil,.js .rule,.js .hl__in,.js .hero__wordmark i,.js .pick > span,.js .spread__name.is-split .ch{ transform:none !important; clip-path:none !important; scale:1 !important; transition:opacity 200ms linear !important; }
  .js .unveil > img{ scale:1 !important; }
  .js .hero__frame rect,.js .foot__rect rect{ stroke-dashoffset:0 !important; transition:none !important; }
  .statement .sw{ opacity:1 !important; }
  .serit__track{ transform:none !important; justify-content:center; }
  .ambalaj::before{ transform:none !important; }
  .ambalaj__label{ transform:none !important; }
  .status__dot::after,.hero__cue i::after{ animation:none !important; display:none; }
  .tilt{ transform:none !important; }
  .hikaye__photo .frame > img{ transform:none !important; }
  .js .sign[data-ready] .sign__l{ opacity:1; }
  .js .sign[data-ready] .sign__refl{ opacity:.12; }
  .imza__ph{ transition:opacity 200ms linear !important; }
  .imza__ph.was-active{ scale:1; }
}
/* the same, switched on by the on-page "Animasyonları durdur" toggle (WCAG 2.2.2) */
html[data-motion="off"]{ scroll-behavior:auto; }
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{ animation-duration:1ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; }
html.js[data-motion="off"] :is(.reveal,.split-lines.is-split .w__in,.unveil,.rule,.hl__in,.hero__wordmark i,.pick > span,.spread__name.is-split .ch){ transform:none !important; clip-path:none !important; scale:1 !important; transition:opacity 200ms linear !important; }
html.js[data-motion="off"] .unveil > img{ scale:1 !important; }
html.js[data-motion="off"] :is(.hero__frame rect,.foot__rect rect){ stroke-dashoffset:0 !important; transition:none !important; }
html[data-motion="off"] .statement .sw{ opacity:1 !important; }
html[data-motion="off"] .serit__track{ transform:none !important; justify-content:center; }
html[data-motion="off"] .ambalaj::before{ transform:none !important; }
html[data-motion="off"] .ambalaj__label{ transform:none !important; }
html[data-motion="off"] :is(.status__dot,.hero__cue i)::after{ animation:none !important; display:none; }
html[data-motion="off"] .tilt{ transform:none !important; }
html[data-motion="off"] .hikaye__photo .frame > img{ transform:none !important; }
html.js[data-motion="off"] .sign[data-ready] .sign__l{ opacity:1; }
html.js[data-motion="off"] .sign[data-ready] .sign__refl{ opacity:.12; }
html[data-motion="off"] .imza__ph{ transition:opacity 200ms linear !important; }
html[data-motion="off"] .imza__ph.was-active{ scale:1; }

/* ============================ PRINT ============================ */
@media print{
  .js .reveal,.js .unveil,.js .split-lines .w__in,.js .rule,.js .hl__in{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .topbar{ position:static; }
  .nav,.overlay,.mbar,.hero-stage,.hero__cue,.serit,.mpreview,.map,[data-motion-toggle],.feat__pool,.feat__beam{ display:none !important; }
  .tpanel[hidden]{ display:block !important; }
  .tabs{ display:none !important; }
  .js .tabs:not([hidden]) ~ .tpanel .tpanel__h{ position:static; width:auto; height:auto; clip-path:none; }
}