/* ---------- Fonts (self-hosted) ---------- */
@font-face{font-family:"Barlow Condensed";font-style:italic;font-weight:900;font-display:swap;src:url(fonts/barlow-condensed-latin-900-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:italic;font-weight:900;font-display:swap;src:url(fonts/barlow-condensed-latin-ext-900-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:italic;font-weight:800;font-display:swap;src:url(fonts/barlow-condensed-latin-800-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:italic;font-weight:800;font-display:swap;src:url(fonts/barlow-condensed-latin-ext-800-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  --cream:#F2EADC;      /* pack brand zone */
  --paper:#FBF6EC;
  --ink:#1E1814;
  --patent:#178A45;        /* logo black, warmed */
  --om:#D3171D;         /* the red OM */
  --yolk:#F3BA1C;       /* omelet arc */
  --tomato:#9D1E18;     /* Menemen Soğanlı field */
  --flavor:#9D1E18;     /* live: selected flavor field */
  --flavor-ink:#FBF6EC;
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(16px,4vw,56px);
  --max:1280px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:clamp(17px,1.05vw + 10px,20px);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--om);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:50}
.skip:focus{left:8px}

/* 3D canvas sits between section backgrounds (z auto) and section content (z 2) */
#scene{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;z-index:1;pointer-events:none;display:block}
.no-webgl #scene{display:none}

.wrap{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sec{position:relative;background:var(--bg);padding:clamp(96px,12vw,170px) 0}
.brushed::before{content:"";position:absolute;left:0;right:0;top:-58px;height:60px;background:var(--bg);
  -webkit-mask:url(assets/img/brush-top.svg) center bottom/100% 100% no-repeat;mask:url(assets/img/brush-top.svg) center bottom/100% 100% no-repeat;pointer-events:none}

.display{font-family:var(--display);font-style:italic;font-weight:900;letter-spacing:-.005em;line-height:.9;text-transform:none;margin:0}
.h2{font-size:clamp(46px,6.4vw,104px);max-width:14ch;text-wrap:balance}
.lede{font-size:clamp(18px,1.2vw + 10px,22px);max-width:36ch;margin:0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.01em;padding:.55em 1.1em .5em;border-radius:999px;text-decoration:none;border:2px solid currentColor;transition:transform .15s ease,background-color .15s ease,color .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-ink:hover{background:var(--om);border-color:var(--om)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}

/* ---------- Header ---------- */
.top{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:24px;padding:18px var(--gutter);max-width:calc(var(--max) + 0px);margin:0 auto}
.top-logo img{width:clamp(108px,11vw,150px);height:auto}
.top-nav{margin-left:auto;display:flex;gap:clamp(14px,2vw,30px)}
.top-nav a{font-family:var(--display);font-weight:700;font-size:20px;text-decoration:none;padding:6px 2px;border-bottom:2px solid transparent}
.top-nav a:hover{border-bottom-color:var(--om)}
.lang{display:flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.lang button{font:700 16px/1 var(--display);background:transparent;color:var(--ink);border:0;padding:7px 11px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* ---------- Hero ---------- */
.sec-hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-top:110px;padding-bottom:110px}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:clamp(16px,3vw,48px);width:100%}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.status{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:16px;margin:0;padding:6px 14px 6px 12px;border-radius:999px;background:var(--paper)}
.status .dot{width:9px;height:9px;border-radius:50%;background:var(--om);box-shadow:0 0 0 0 rgba(211,23,29,.5);animation:pulse 2.4s ease-out infinite}
/* patent badge */
.status-patent{background:var(--patent);color:#fff;font-size:17px;font-weight:700;padding:8px 18px 8px 12px;box-shadow:0 0 0 3px rgba(23,138,69,.22),0 6px 18px -6px rgba(23,138,69,.6);animation:patentGlow 2.8s ease-in-out infinite}
.pt-ico{width:22px;height:22px;flex:none}
@keyframes patentGlow{0%,100%{box-shadow:0 0 0 3px rgba(23,138,69,.22),0 6px 18px -6px rgba(23,138,69,.6)}50%{box-shadow:0 0 0 7px rgba(23,138,69,.12),0 6px 22px -6px rgba(23,138,69,.75)}}
@media (prefers-reduced-motion:reduce){.status-patent{animation:none}}
.foot-text p.foot-patent{display:inline-flex;align-items:center;gap:10px;opacity:1;background:var(--patent);color:#fff;font-weight:700;font-size:16px;padding:8px 18px 8px 12px;border-radius:999px;margin:0 0 14px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(211,23,29,.45)}80%,100%{box-shadow:0 0 0 10px rgba(211,23,29,0)}}
.hero-title{font-size:clamp(56px,6.6vw,118px);line-height:.86;margin-bottom:28px}
.hero-title .line{display:block}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.stage{position:relative;width:100%}
.stage-hero{height:min(78vh,760px)}
.fallback{display:none}
.no-webgl .stage .fallback{display:block;height:100%;width:auto;margin:0 auto;object-fit:contain;filter:drop-shadow(0 24px 30px rgba(60,30,10,.25))}
.drag-hint{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);margin:0;font-size:15px;font-weight:500;opacity:.7;white-space:nowrap}
.no-webgl .drag-hint{display:none}
[data-drag]{cursor:grab;touch-action:pan-y}
[data-drag].dragging{cursor:grabbing}

/* ---------- Chores ---------- */
.sec-chores{color:var(--paper)}
.chores-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.chores{list-style:none;margin:0;padding:0;font-family:var(--display);font-weight:700;font-size:clamp(28px,3vw,44px);line-height:1.1}
.chores li{position:relative;width:fit-content;padding:.12em 0;transition:opacity .4s ease}
.chores li::after{content:"";position:absolute;left:-4%;top:52%;height:.42em;width:108%;background:var(--om);transform:translateY(-50%) scaleX(0);opacity:0;transform-origin:left center;transition:transform .45s cubic-bezier(.7,0,.2,1),opacity .1s linear;
  -webkit-mask:url(assets/img/strike.svg) center/100% 100% no-repeat;mask:url(assets/img/strike.svg) center/100% 100% no-repeat}
.chores li.struck{opacity:.45}
.chores li.struck::after{transform:translateY(-50%) scaleX(1);opacity:1}
.chores-after{grid-column:2;font-size:clamp(20px,1.5vw + 8px,26px);font-weight:600;margin:12px 0 0;max-width:28ch;color:var(--yolk)}

/* ---------- Equation ---------- */
.sec-eq{padding:0;height:330vh}
.eq-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.eq-inner{width:100%;text-align:center}
.eq-title{font-size:clamp(46px,6vw,100px);margin:0 auto 14px;max-width:none}
.eq-sub{max-width:52ch;margin:0 auto;font-size:clamp(17px,1vw + 10px,20px)}
.eq-row{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:clamp(4px,1.5vw,24px);margin-top:clamp(20px,4vh,48px)}
.eq-cell{display:flex;flex-direction:column;align-items:center}
.eq-anchor{width:100%;height:clamp(180px,38vh,400px);position:relative}
.no-webgl .eq-anchor .fallback{display:block;height:100%;width:auto;margin:0 auto;object-fit:contain}
.no-webgl .eq-anchor .fallback.round{border-radius:50%;aspect-ratio:1}
.eq-op{font-family:var(--display);font-style:italic;font-weight:900;font-size:clamp(48px,6vw,96px);color:var(--om);line-height:1}
.eq-label{font-family:var(--display);font-weight:700;font-size:clamp(20px,1.8vw,30px);margin:14px 0 0;opacity:.18;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.eq-label.on{opacity:1;transform:none}
.eq-live{min-height:1.6em;margin:clamp(12px,3vh,32px) auto 0;font-weight:600;font-size:clamp(17px,1vw + 10px,21px);color:var(--tomato)}

/* ---------- How ---------- */
.sec-how{color:var(--paper)}
.steps{list-style:none;padding:0;margin:clamp(40px,5vw,72px) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,36px)}
.step{position:relative}
.clip{aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:#000}
.clip video{width:100%;height:100%;object-fit:cover}
.step-n{position:absolute;top:-30px;left:14px;font-family:var(--display);font-style:italic;font-weight:900;font-size:96px;line-height:1;color:var(--yolk);text-shadow:0 4px 0 rgba(0,0,0,.18)}
.step h3{font-family:var(--display);font-weight:700;font-size:clamp(26px,2.2vw,34px);line-height:1.05;margin:20px 0 8px}
.step p{margin:0;max-width:34ch;opacity:.92}

/* ---------- Flavors ---------- */
.sec-flavors{color:var(--flavor-ink);transition:background-color .6s ease,color .6s ease}
.sec-flavors.brushed::before{transition:background-color .6s ease}
.flavors-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,4vw,64px);align-items:center}
.flavor-picker{margin-top:clamp(28px,4vw,44px);display:grid;gap:22px}
.fp-group h3{font-family:var(--body);font-weight:600;font-size:15px;margin:0 0 10px;opacity:.75}
.fp-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.fp-btn{display:inline-flex;align-items:center;gap:9px;font:700 19px/1 var(--display);color:inherit;background:transparent;border:2px solid currentColor;border-radius:999px;padding:8px 14px 8px 9px;cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .15s ease}
.fp-btn:hover{transform:translateY(-2px)}
.fp-btn .sw{width:16px;height:16px;border-radius:50%;background:var(--sw);box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.fp-btn[aria-pressed="true"]{background:var(--flavor-ink);color:var(--flavor);border-color:var(--flavor-ink)}
.flavor-note{font-size:14px;opacity:.75;margin:28px 0 0;max-width:44ch}
.flavor-show{display:flex;flex-direction:column;align-items:center}
.stage-flavor{height:min(66vh,640px)}
.flavor-caption{text-align:center;margin-top:12px;min-height:5.4em}
.flavor-name{font-size:clamp(38px,4.2vw,64px)}
.flavor-line{margin:10px auto 0;max-width:36ch}

/* ---------- Film ---------- */
.sec-film{color:var(--paper)}
.film{position:relative;margin-top:clamp(32px,4vw,56px);border-radius:26px;overflow:hidden;background:#000;aspect-ratio:16/9}
.film video{width:100%;height:100%;object-fit:cover}
.film-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:16px;border:0;background:rgba(20,14,10,.28);color:var(--paper);font:900 italic clamp(30px,4vw,56px)/1 var(--display);cursor:pointer;transition:background-color .2s ease}
.film-play:hover{background:rgba(20,14,10,.12)}
.film-play-icon{width:clamp(64px,7vw,96px);aspect-ratio:1;border-radius:50%;background:var(--om);position:relative;flex:none}
.film-play-icon::after{content:"";position:absolute;left:38%;top:28%;border-left:26px solid var(--paper);border-top:16px solid transparent;border-bottom:16px solid transparent}
.film.playing .film-play{display:none}
.film-cap{margin:14px 0 0;font-size:15px;opacity:.7}

/* ---------- Vision ---------- */
.sec-vision{color:var(--ink)}
.vision{margin:0}
.vision p{font-size:clamp(52px,8.4vw,150px);line-height:.88;max-width:13ch}
.vision-sub{margin:clamp(24px,3vw,40px) 0 0;max-width:46ch;font-size:clamp(18px,1.2vw + 10px,22px);font-weight:500}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:end}
.contact-grid .btn{margin-top:28px}
.contact-mail{margin:14px 0 0;font-weight:600}

/* ---------- Footer ---------- */
.foot{position:relative;background:var(--ink);color:var(--paper);padding:56px 0 64px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center}
.foot-logo{width:140px;height:auto;background:var(--cream);border-radius:16px;padding:10px 14px}
.foot-text p{margin:0 0 8px;max-width:70ch;opacity:.82}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .top-nav{display:none}
  .lang{margin-left:auto}
  .hero-grid{grid-template-columns:1fr;text-align:left}
  .sec-hero{padding-top:96px;padding-bottom:90px;align-items:flex-start}
  .stage-hero{height:min(48vh,440px);order:-1;margin:-8px 0 4px}
  .hero-title{font-size:clamp(58px,15vw,104px)}
  .chores-grid,.contact-grid,.flavors-grid{grid-template-columns:1fr}
  .chores-after{grid-column:1}
  .steps{grid-template-columns:1fr;gap:56px}
  .eq-row{grid-template-columns:1fr auto 1fr;row-gap:0}
  .eq-row > :nth-child(4){grid-column:1 / -1;font-size:40px;margin:-6px 0 -10px}
  .eq-row > :nth-child(5){grid-column:1 / -1}
  .eq-anchor{height:clamp(110px,19vh,190px)}
  .eq-anchor-pan{height:clamp(130px,23vh,230px)}
  .eq-label{margin-top:6px}
  .eq-sub{font-size:15px;line-height:1.4}
  .eq-live{margin-top:8px}
  .eq-label{font-size:17px;line-height:1.1}
  .flavor-show{order:-1}
  .stage-flavor{height:52vh}
  .fp-btn{font-size:17px}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .eq-op{font-size:34px}
  .eq-sub{font-size:16px}
  .btn{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation:none!important}
}