:root{
  --ink:#0B0D07;
  --paper:#EDE7D3;
  --oil:#D8A63D;
  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --body:'Inter', system-ui, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--ink);color:var(--paper);font-family:var(--body)}
body{overflow-x:hidden}

/* ---------- PRELOADER ---------- */
#preloader{position:fixed;inset:0;z-index:999;background:var(--ink);
  display:flex;align-items:center;justify-content:center;transition:opacity .6s ease}
.pre-inner{display:flex;flex-direction:column;align-items:center;gap:26px}
.pre-logo{width:570px;opacity:.9;filter:brightness(0) invert(1) opacity(.85)}
.pre-bar{width:280px;height:3px;background:rgba(237,231,211,.15);overflow:hidden;margin-top:-200px;}
.pre-bar i{display:block;height:100%;width:0;background:var(--oil)}

/* ---------- CINEMA ---------- */
#cinema{position:relative}          /* yüksekliği JS veriyor */
.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink)}

/* 16:9 cover kutusu — JS boyutlandırıyor.
   Tüm asset'ler 16:9 olduğu için katmanlar arası yüzde koordinatları birebir örtüşür. */
.frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  overflow:hidden;will-change:width,height}

.layer{position:absolute;inset:0;width:100%;height:100%;
  background-size:100% 100%;background-position:center;background-repeat:no-repeat;
  object-fit:fill;
  opacity:0;will-change:transform,opacity;backface-visibility:hidden;
  transform-origin:50% 50%}
canvas.layer{display:block}

.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%, transparent 45%, rgba(11,13,7,.55) 100%);
  opacity:.75}

/* ---------- TİPOGRAFİ ---------- */
.type{position:absolute;inset:0;pointer-events:none;z-index:5}
.t-hero{position:absolute;left:6vw;top:22vh;font-family:var(--display);
  font-weight:700;line-height:.86;letter-spacing:-.02em;opacity:0}
.t-hero span{display:block;font-size:clamp(48px,11vw,160px)}
.t-hero em{display:block;font-style:normal;font-weight:300;
  font-size:clamp(24px,5.2vw,74px);letter-spacing:.02em;opacity:.72}
.t-whisper{position:absolute;font-family:var(--display);font-weight:300;
  font-size:clamp(13px,1.5vw,18px);letter-spacing:.34em;text-transform:uppercase;opacity:0}
#tW1{left:6vw;top:calc(22vh + clamp(78px,17vw,242px));color:var(--oil)}
.t-w2{left:6vw;bottom:16vh}
.t-w3{right:6vw;bottom:16vh}

.cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:6}
.cue span{display:block;width:1px;height:44px;background:rgba(237,231,211,.2);position:relative;overflow:hidden}
.cue span::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;
  background:var(--oil);animation:cueRun 2s ease-in-out infinite}
@keyframes cueRun{50%{top:100%}100%{top:100%}}

/* ---------- SONRASI ---------- */
.after{min-height:70vh;display:flex;align-items:center;justify-content:center;
  background:#F6F2E8;color:#5b5541;font-size:14px;letter-spacing:.04em}

@media (prefers-reduced-motion: reduce){
  .cue span::after{animation:none}
}

/* ===========================================================
   KÖPRÜ — video1'in (L.v1 canvas'ının) KENDİSİ küçülüyor.
   Ayrı bir bölüm/fotoğraf yok — bu metin #stage'in içinde,
   frame küçülürken ekranın sabit bir yerinde beliriyor.
=========================================================== */
.exit-text{
  position:absolute; top:50%; right:6vw; transform:translateY(-50%);
  z-index:6; opacity:0; max-width:34vw; pointer-events:none;
}
.exit-text .b-eyebrow{
  font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--oil); margin-bottom:20px; white-space:nowrap;
}
.exit-text .b-title{ font-family:var(--display); font-weight:700; line-height:.94; }
.exit-text .b-title span{ display:block; overflow:hidden; }
.exit-text .b-title em{
  display:block; font-style:normal;
  font-size:clamp(28px,4vw,60px); white-space:nowrap;
}
@media (max-width:820px){
  .exit-text{ display:none; }   /* mobilde köprü sadece görsel küçülmesi yeterli */
}

/* ===========================================================
   ÜRÜNLER
=========================================================== */
.products{ background:var(--paper); color:#12150C; padding:8vh clamp(24px,5vw,64px) 10vh; }
.products-inner{ width:min(92vw,1500px); margin-inline:auto; }
.products-eyebrow{
  font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:#5B6B45; text-align:center; margin-bottom:7vh;
}
.product-row{
  display:flex; align-items:center; gap:clamp(32px,5vw,90px);
  padding:5vh 0; position:relative; scroll-margin-top:14vh;
}
.product-row + .product-row{ border-top:1px solid rgba(18,21,12,0.1); }
.product-row[data-side="left"]{ flex-direction:row-reverse; }
.product-num{
  position:absolute; top:0; font-family:var(--display); font-style:normal;
  font-weight:300; font-size:15px; letter-spacing:.1em; color:#8C6A1F;
}
.product-row[data-side="right"] .product-num{ left:0; }
.product-row[data-side="left"] .product-num{ right:0; }
.product-media{
  flex:1 1 60%; aspect-ratio:4/3; overflow:hidden; min-width:0;
}
.product-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-copy{ flex:1 1 40%; min-width:320px; max-width:520px; }
.product-copy h3{
  font-family:var(--display); font-weight:700; font-size:clamp(30px,4.4vw,58px);
  letter-spacing:-.01em; margin-bottom:20px; color:#14170D;
}
.product-desc{
  font-size:clamp(15px,1.1vw,17px); line-height:1.75; color:#3E3E31;
  max-width:480px; margin-bottom:34px;
}

/* WhatsApp text-link CTA — klasik yeşil buton değil, ince altı çizili link */
.wa-textlink{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; letter-spacing:.02em; color:#14170D;
  border-bottom:1px solid rgba(18,21,12,0.35); padding-bottom:5px;
  transition:border-color .3s ease, color .3s ease, gap .3s ease;
}
.wa-textlink svg{ color:#8C6A1F; flex-shrink:0; }
.wa-textlink .arrow{ display:inline-block; transition:transform .3s ease; }
.wa-textlink:hover{ border-color:#14170D; color:#4E5C3A; gap:16px; }
.wa-textlink:hover .arrow{ transform:translateX(4px); }

@media (max-width:820px){
  .product-row, .product-row[data-side="left"]{ flex-direction:column; align-items:flex-start; }
  .product-num{ position:static; display:block; margin-bottom:16px; }
  .product-media{ width:100%; }
  .product-copy{ max-width:none; }
}

/* ===========================================================
   03 — KARAGÖZ / MARKA HİKAYESİ
   Sticky editorial: sol görsel sticky, sağ taraf uzun/sıralı.
=========================================================== */
.story{
  background:var(--paper); color:#12150C;
  padding:0 clamp(24px,6vw,96px) 20vh;
  margin-top:-8vh;         /* 02 ZEYTİN'in kuyruğuyla hafif örtüşsün, ani kesme olmasın */
  position:relative; z-index:2;
}
.story-layout{
  display:grid;
  grid-template-columns: 42% 1fr;
  grid-template-areas: "media intro" "media blocks";
  column-gap: clamp(32px,6vw,100px);
  padding-top:18vh;
}
.story-media-col{ grid-area:media; }
.story-media{
  position:sticky; top:14vh; aspect-ratio:4/5; overflow:hidden;
  will-change:clip-path;
}
.story-media img{
  width:100%; height:100%; object-fit:cover; display:block; will-change:transform;
}
.story-intro{
  grid-area:intro; min-height:56vh;
  display:flex; flex-direction:column; justify-content:center;
}
.story-num{
  display:block; font-family:var(--display); font-weight:300; font-size:15px;
  letter-spacing:.12em; color:#8C6A1F; margin-bottom:22px;
}
.story-title{
  font-family:var(--display); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(40px,6vw,88px); line-height:.9; color:#14170D; margin-bottom:8px;
}
.story-sub{
  font-family:var(--display); font-weight:300;
  font-size:clamp(20px,2.6vw,32px); line-height:1.18; color:#4E5C3A;
}
.story-blocks-col{ grid-area:blocks; display:flex; flex-direction:column; }
.story-block-wrap{
  min-height:52vh; display:flex; align-items:center;
  max-width:560px;
}
.story-block{
  font-family:var(--display); font-weight:300;
  font-size:clamp(22px,2.6vw,36px); line-height:1.45; color:#14170D;
}

@media (max-width:900px){
  .story{ margin-top:0; padding-top:8vh; }
  .story-layout{
    display:flex; flex-direction:column; padding-top:0;
  }
  .story-intro{ order:1; min-height:auto; padding:6vh 0 2vh; }
  .story-media-col{ order:2; }
  .story-media{ position:static; aspect-ratio:4/3; }
  .story-blocks-col{ order:3; }
  .story-block-wrap{ min-height:auto; padding:4vh 0; max-width:none; }
}

/* ===========================================================
   04 — SSS
=========================================================== */
.faq{ background:var(--paper); color:#12150C; padding:14vh clamp(24px,5vw,64px) 14vh; }
.faq-inner{
  display:grid; grid-template-columns:34% 1fr;
  column-gap:clamp(40px,6vw,100px);
  max-width:1480px; margin-inline:auto; align-items:start;
}
.faq-head{ position:sticky; top:16vh; }
.faq-num{
  display:block; font-family:var(--display); font-weight:300; font-size:15px;
  letter-spacing:.12em; color:#8C6A1F; margin-bottom:18px; opacity:0;
}
.faq-title{ font-family:var(--display); font-weight:700; line-height:.9; }
.faq-title span{ display:block; overflow:hidden; }
.faq-title em{
  display:block; font-style:normal; letter-spacing:-.01em;
  font-size:clamp(34px,4.6vw,64px); color:#14170D; opacity:0;
}

.faq-list{ border-top:1px solid rgba(18,21,12,0.14); }
.faq-item{ border-bottom:1px solid rgba(18,21,12,0.14); opacity:0; }
.faq-q{
  width:100%; display:flex; align-items:center; gap:clamp(16px,3vw,36px);
  padding:clamp(26px,3.8vh,38px) 0; background:none; border:0; cursor:pointer;
  text-align:left; font-family:inherit; color:#14170D;
}
.faq-q-num{
  font-family:var(--display); font-weight:300; font-size:14px;
  letter-spacing:.05em; color:#8C6A1F; flex-shrink:0; width:28px;
}
.faq-q-text{
  flex:1; font-family:var(--display); font-weight:500;
  font-size:clamp(21px,2.4vw,34px); line-height:1.22;
}
.faq-q-icon{
  position:relative; width:18px; height:18px; flex-shrink:0;
}
.faq-q-icon::before, .faq-q-icon::after{
  content:''; position:absolute; background:#14170D; transition:transform .35s ease;
}
.faq-q-icon::before{ left:0; top:50%; width:100%; height:1px; transform:translateY(-50%); }
.faq-q-icon::after{ top:0; left:50%; width:1px; height:100%; transform:translateX(-50%); }
.faq-item.is-open .faq-q-icon::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }

.faq-a{
  max-height:0; overflow:hidden;
  transition:max-height .5s ease, opacity .4s ease, margin .4s ease;
  opacity:0;
}
.faq-item.is-open .faq-a{ max-height:260px; opacity:1; margin-bottom:clamp(26px,3.8vh,38px); }
.faq-a p{
  font-size:clamp(15px,1.1vw,17px); line-height:1.75; color:#3E3E31;
  max-width:600px; padding-left:calc(28px + clamp(16px,3vw,36px));
}

@media (max-width:900px){
  .faq{ padding:10vh 20px 10vh; }
  .faq-inner{ grid-template-columns:1fr; row-gap:5vh; }
  .faq-head{ position:static; }
  .faq-q{ gap:14px; }
  .faq-a p{ padding-left:0; margin-top:10px; }
}

/* ===========================================================
   FOOTER
   Motion neredeyse yok — sayfanın en sakin noktası.
=========================================================== */
.site-footer{ background:var(--paper); color:#14170D; padding:9vh clamp(24px,5vw,64px) 5vh; }
.footer-top{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:6vh 4vw; padding-bottom:7vh; border-bottom:1px solid rgba(18,21,12,0.14);
  max-width:1600px; margin-inline:auto;
}
.footer-brand{ display:flex; align-items:center; gap:28px; }
.footer-logo{
  width:450px;
  height:450px;
  object-fit:contain;
  opacity:.85;
  filter:brightness(0) saturate(100%);
  max-width:100%;      /* dar mobilde taşmasın — 350x350 değeri değişmiyor */
  flex-shrink:0;
}
.footer-wordmark{
  font-family:var(--display); font-weight:700; font-size:clamp(24px,2.4vw,32px);
  letter-spacing:.02em; color:#14170D; line-height:1;
}
.footer-sub{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#5B6B45; margin-top:8px;
}
.footer-links{
  display:flex; flex-direction:column; gap:15px; min-width:180px;
}
.footer-links-eyebrow{
  font-size:15px; letter-spacing:.22em; text-transform:uppercase;
  color:#8C6A1F; margin-bottom:6px;
}
.footer-links a{
  font-size:20px; color:#3E3E31; border-bottom:1px solid transparent;
  transition:border-color .25s ease, color .25s ease; padding-bottom:2px; width:fit-content;
}
.footer-links a:hover{ color:#14170D; border-color:#14170D; }
.footer-bottom{
  padding-top:4vh; max-width:1600px; margin-inline:auto;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.footer-bottom p{ font-size:12px; color:#8A8A78; letter-spacing:.03em; }
.footer-location{ color:#5B6B45; }

@media (max-width:700px){
  .footer-top{ flex-direction:column; align-items:flex-start; gap:5vh; }
  .footer-logo{ width:220px; height:220px; }   /* mobilde 350px ekranı böler — sadece burada küçültüldü */
  .footer-links{ flex-direction:column; }
}