/* ==========================================================================
   TempoCandy — doğal atıştırmalık markası
   1. Tokens · 2. Reset · 3. Yardımcılar · 4. Bileşenler · 5. Bölümler
   6. Hareket · 7. Duyarlı (responsive)
   ========================================================================== */

/* ── 1. Tokens ────────────────────────────────────────────────────────── */
:root{
  /* renk */
  --bg:          #fbf8f2;
  --surface:     #ffffff;
  --ink:         #1c3125;
  --ink-soft:    #46524a;
  --muted:       #6f7369;
  --line:        #e9e1d4;

  --green:       #10382a;
  --green-mid:   #1d4a37;
  /* Vurgu rengi amblemin kırmızısıdır: assets/tempo-logo.svg dosyasından
     ölçülen tam değer #EC1C24. (--orange adı geriye dönük uyumluluk için.) */
  --orange:      #ec1c24;
  --orange-lit:  #f5343b;

  --olive:       #8b9a62;
  --sand:        #f1e4d1;
  --apricot:     #f7d8b2;
  --sage:        #dbdfc1;
  --b2b:         #f9dcbc;
  --ico-bg:      #f6ead3;

  /* tipografi */
  --serif: "Playfair Display", "Times New Roman", serif;
  --sans:  "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand:  "Caveat", cursive;

  /* ölçü — 1440 px tasarım ızgarası */
  --shell:     1292px;
  --pad:       clamp(18px, 5.1vw, 74px);
  --r-band:    28px;
  --r-tile:    24px;
  /* Bölümler arası dikey ritim. Kart içi dolgudan (26px) belirgin biçimde
     büyük olmalı; yoksa bölümler tek blok gibi okunuyor. */
  --gap-band:  54px;   /* birbirine ait iki blok arası */
  --gap-sec:   88px;   /* ayrı bölümler arası          */

  /* gölge */
  --sh-card: 0 14px 34px -20px rgb(28 49 37 / .28);
  --sh-soft: 0 22px 50px -30px rgb(28 49 37 / .40);
}

/* ── 2. Reset ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:124px}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.6 var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,figure,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}

/* tek ikon sistemi: çizgi tabanlı, currentColor ile renklenir */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* çizgi ikonları — amblem kendi renk/ölçüsünü taşıdığı için dışarıda bırakılır */
svg:not(.sprite):not(.brand__mark){
  display:block;flex:none;width:1em;height:1em;
  fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

:where(a,button,input):focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}

.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:50%;top:-60px;transform:translateX(-50%);z-index:99;background:var(--green);color:#fff;padding:10px 20px;border-radius:0 0 12px 12px;transition:top .2s}
.skip:focus-visible{top:0}

/* ── 3. Yardımcılar ───────────────────────────────────────────────────── */
.shell{width:100%;max-width:calc(var(--shell) + var(--pad)*2);margin-inline:auto;padding-inline:var(--pad)}
/* Not: burada genel bir `main > .shell + .shell` kuralı vardı; özgüllüğü
   (0-2-1) bölümlerin kendi margin-top değerlerini (0-1-0) eziyor ve hepsini
   aynı dar aralığa çekiyordu. Her bölüm kendi aralığını bildiriyor. */

/* Fotoğraf sistemi — şimdilik tek görselden kırpılıyor.
   Gerçek ürün fotoğrafı geldiğinde ilgili öğeye şunu eklemek yeterli:
     style="--src:url('assets/urun/krokan.jpg');--z:cover;--p:50% 50%"
   ya da JS'teki ürün verisine  foto: "assets/urun/krokan.jpg"  yazmak. */
.ph{
  display:block;
  background-image:var(--src, url("assets/tempo-products.webp"));
  background-repeat:no-repeat;
  background-size:var(--z, cover);
  background-position:var(--p, 50% 50%);
  background-color:#f2ece1;
}
.ph--krokan{--z:300%; --p:52% 78%}   /* krokan dilimleri   */
.ph--bar   {--z:520%; --p:51% 72%}   /* tek bar, yakın plan */
.ph--jar   {--z:330%; --p:98% 72%}   /* ezme kavanozu      */
.ph--nuts  {--z:360%; --p:89% 92%}   /* kuru meyve öbeği   */
.ph--fig   {--z:500%; --p:73% 96%}   /* kuru incir/kayısı  */
.ph--pist  {--z:290%; --p:16% 92%}   /* saçılmış fıstıklar */
.ph--pouch {--z:230%; --p:84% 42%}   /* ambalaj            */
.ph--coffee{--z:250%; --p:14% 88%}   /* fıstık yayılımı    */
.ph--scene {--z:200%; --p:58% 82%}   /* geniş sahne        */
/* hero sahnesi katmanları */
.ph--pack     {--z:325%; --p:78% 32%}   /* dik duran ambalaj  */
.ph--bars     {--z:303%; --p:52% 80%}   /* krokan istifi      */
.ph--barTight {--z:360%; --p:51% 76%}   /* tek bar            */
.ph--jarFront {--z:498%; --p:92% 70%}   /* öndeki kavanoz     */
.ph--nutsL    {--z:427%; --p:24% 100%}  /* sol fıstık öbeği   */
.ph--nutsR    {--z:480%; --p:82% 100%}  /* sağ kuru meyve     */

.eyebrow{font-size:12px;font-weight:700;line-height:1;letter-spacing:.13em;text-transform:uppercase;color:var(--orange)}
.h2{font:400 clamp(29px,2.65vw,38px)/1.14 var(--serif);letter-spacing:-.012em;margin-top:15px}
.h2--sm{font-size:clamp(27px,2.4vw,34px)}
.lede{margin-top:13px;font-size:13.5px;line-height:1.6;color:var(--ink-soft);max-width:33ch}
.lede--xs{font-size:12.5px;max-width:31ch}

/* ── 4. Bileşenler ────────────────────────────────────────────────────── */

/* düğmeler */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:15px 27px;border-radius:100px;
  font-size:14px;font-weight:700;white-space:nowrap;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background-color .25s;
}
.btn__i{font-size:17px}
.btn:hover{transform:translateY(-2px)}
.btn--green{background:var(--green);color:#fff;box-shadow:0 10px 24px -14px rgb(16 56 42 / .9)}
.btn--green:hover{background:var(--green-mid);box-shadow:0 16px 30px -14px rgb(16 56 42 / .9)}
.btn--orange{background:var(--orange);color:#fff;box-shadow:0 10px 24px -14px rgb(236 28 36 / .95)}
.btn--orange:hover{background:var(--orange-lit);box-shadow:0 16px 30px -14px rgb(236 28 36 / .95)}
.btn--white{background:#fff;color:var(--orange);box-shadow:0 10px 24px -16px rgb(80 24 0 / .6)}
.btn--sm{padding:12px 23px;font-size:13px}

.tlink{display:inline-flex;align-items:center;gap:11px;margin-top:24px;font-size:13px;font-weight:700;color:var(--ink)}
.tlink__i{font-size:15px;transition:transform .25s}
.tlink:hover .tlink__i{transform:translateX(5px)}
.tlink--dark{color:var(--green);margin-top:11px}

/* marka: yalnızca amblem ─────────────────────────────────────────────────
   Amblem `assets/tempo-logo.svg` — resmi logonun vektörü, 202×201 viewBox.
   Kurumsal kimlik kuralları:
   · Ölçü YALNIZCA width ile verilir; height:auto oranı SVG'den alır, böylece
     hiçbir kırılma noktasında esneme/ezilme olamaz. İkisini birden yazmayın.
   · Dosya kılpayı kırpılmıştır (çevresinde saydam pay yok), bu yüzden
     yazılan piksel değeri amblemin gerçek görünen boyutudur.
   · En küçük kullanım 52px'tir; altına inilmez (TEMPO yazısı okunmaz olur).
   · Amblem döndürülmez, eğilmez, rengi değiştirilmez. Hover'da yalnızca
     çok hafif bir büyüme var.
   -------------------------------------------------------------------------- */
.brand{display:inline-flex;align-items:center;line-height:1}
.brand__mark{
  display:block;flex:none;
  width:92px;height:auto;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.brand:hover .brand__mark{transform:scale(1.045)}

/* ── 5. Bölümler ──────────────────────────────────────────────────────── */

/* 5.1 üst bar */
.hdr{position:sticky;top:0;z-index:40;background:rgb(251 248 242 / .88);backdrop-filter:blur(14px);transition:box-shadow .3s}
.hdr.is-stuck{box-shadow:0 1px 0 var(--line), 0 10px 30px -24px rgb(28 49 37 / .5)}
.hdr__in{--shell:1320px;--pad:clamp(18px,4.2vw,60px);display:flex;align-items:center;gap:26px;height:116px}
.nav{display:flex;gap:clamp(16px,2.2vw,32px);margin-inline:auto}
.nav a{position:relative;padding-block:6px;font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink)}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}

.hdr__tools{display:flex;align-items:center;gap:14px}
.iconbtn{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:20px;color:var(--ink);transition:background-color .22s,color .22s}
.iconbtn:hover{background:#efe8da;color:var(--green)}
.burger{display:none}
.cartCount{
  position:absolute;top:0;right:-1px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--orange);color:#fff;font-size:9.5px;font-weight:700;line-height:16px;text-align:center;
}

/* 5.2 hero karuseli */
.topband{
  position:relative;
  background:radial-gradient(128% 104% at 66% 30%,#fbf6ed 0%,#f9f2e6 54%,#f6eee0 100%);
}

.hero{position:relative}
.hero__in{padding-top:6px}
/* Kaydırma tabanlı ray: transform kullanmıyoruz, çünkü transform bir karışım
   (blend) izolasyonu yaratıp sahnedeki `darken` katmanlarını bozuyor. */
.hero__viewport{
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;
}
.hero__viewport::-webkit-scrollbar{display:none}
.hero__track{display:contents}

.slide{
  scroll-snap-align:start;
  display:grid;grid-template-columns:40% 60%;align-items:center;min-height:404px;
}
.slide__copy{position:relative;z-index:2;padding:16px 20px 24px 0}
.slide__t{font:700 clamp(29px,3.24vw,46px)/1.2 var(--sans);letter-spacing:-.028em;color:#1d3b2c}
.slide__t em{font-style:normal;color:var(--orange)}
.slide__p{margin-top:19px;max-width:43ch;font-size:13.5px;line-height:1.74;color:#5d6659}
.slide__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:25px}
.slide__note{display:flex;align-items:center;gap:9px;margin-top:21px;font-size:12.5px;font-weight:600;color:#4d5a47}
.slide__note svg{font-size:17px;color:#7f8d55}

/* ürün sahnesi: tek fotoğraftan katmanlanan kompozisyon */
.slide__art{position:relative;aspect-ratio:1.72}
/* Fotoğrafın açık zemini `darken` + hafif parlaklıkla arka planın altında kalır,
   yani kaybolur; ürünler ve gölgeleri kesilmiş gibi durur. Maskeye gerek yok.
   Bu katmanların üstüne AÇIK renkli hiçbir şey konmamalı, yoksa kutu kenarları
   yeniden görünür (parlama katmanı bu yüzden kaldırıldı). */
.art{position:absolute;mix-blend-mode:darken;filter:contrast(1.18) brightness(1.07)}
.art--pack {left:50%;top:1%;width:31%;height:88%;transform:translateX(-50%)}
.art--front{left:9%;bottom:-2%;width:47%;height:47%}
.art--l    {left:-3%;top:28%;width:33%;height:48%}
.art--r    {right:-5%;top:18%;width:34%;height:52%}
/* Kalan tezgâh yüzeyi eliptik maskeyle erisin. Yarıçaplar kutu genişliğinin
   yüzdesi olduğu için 50%'nin altında kalmalı, yoksa geçiş kutu dışında biter. */
.art--pack{
  -webkit-mask-image:radial-gradient(ellipse 49.5% 49.5% at 50% 50%,#000 86%,transparent 100%);
          mask-image:radial-gradient(ellipse 49.5% 49.5% at 50% 50%,#000 86%,transparent 100%);
}
.art--front{
  -webkit-mask-image:radial-gradient(ellipse 46% 48% at 46% 50%,#000 66%,transparent 100%);
          mask-image:radial-gradient(ellipse 46% 48% at 46% 50%,#000 66%,transparent 100%);
}
.art--l,.art--r{
  -webkit-mask-image:radial-gradient(ellipse 41% 43% at 50% 47%,#000 56%,transparent 100%);
          mask-image:radial-gradient(ellipse 41% 43% at 50% 47%,#000 56%,transparent 100%);
}

/* ambalaj üzerine basılan etiket */
.pack{
  position:absolute;left:50%;top:37%;width:19.5%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  color:#f3ecd9;text-shadow:0 1px 2px rgb(26 38 16 / .38);
}
.pack__brand{font:500 clamp(9px,1.05vw,15px)/1 var(--serif)}
.pack__brand i{font-style:italic;color:#e7d8a6}
.pack__line{width:58%;height:1px;margin:7px 0 8px;background:rgb(243 236 217 / .45)}
.pack__kind{font-size:clamp(6px,.6vw,8.5px);font-weight:700;letter-spacing:.19em;text-transform:uppercase;opacity:.92}
.pack__name{margin-top:4px;font:700 clamp(12px,1.4vw,20px)/1.06 var(--sans);letter-spacing:.015em;text-transform:uppercase}
.pack__claim{
  margin-top:7px;font-style:normal;color:#dcc98d;
  font-size:clamp(5.5px,.52vw,7.5px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}

/* ambalajın sağ altına oturan yuvarlak rozet (kalite bölümündeki .seal ile karıştırma) */
.stamp{
  position:absolute;right:24%;top:52%;width:16%;aspect-ratio:1;
  display:grid;place-items:center;border-radius:50%;
  background:#f8f1e2;box-shadow:0 10px 22px -12px rgb(60 44 18 / .45);text-align:center;
}
.stamp::before{content:"";position:absolute;inset:8%;border:1px solid #ccba8d;border-radius:50%}
.stamp span{font:500 clamp(7px,.72vw,10px)/1.42 var(--serif);color:#3d4a2c}

/* karusel kumandası */
.hero__nav{display:flex;align-items:center;gap:13px;padding:0 0 24px}
.hero__arw{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid #e0d4bf;background:rgb(255 255 255 / .55);color:var(--green);font-size:16px;
  transition:background-color .22s,border-color .22s,color .22s,transform .22s;
}
.hero__arw:hover{background:var(--green);border-color:var(--green);color:#fff;transform:scale(1.06)}
.hero__arw[data-step="-1"] svg{transform:scaleX(-1)}
.dots{display:flex;gap:8px}
.dot{width:9px;height:9px;border-radius:50%;background:#dbcfb9;transition:background-color .35s,width .35s}
.dot:hover{background:#c3b498}
.dot.is-on{width:28px;border-radius:5px;background:var(--orange)}

/* 5.3 değer şeridi */
.values{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:#f5ecdd;border-radius:var(--r-band) var(--r-band) 0 0;
  padding:30px 16px;
}
.value{display:flex;gap:20px;align-items:center;padding:2px 30px;border-right:1px solid #e6dac5}
.value:last-child{border-right:0}
.value__ico{
  flex:none;display:grid;place-items:center;width:52px;height:52px;
  border:1.2px solid #24402e;border-radius:50%;color:#22402f;font-size:26px;
}
.value__ico svg{stroke-width:1.5}
.value__t{font:700 21px/1.15 var(--serif);color:#1d3b2c;letter-spacing:-.01em}
.value__t--year{font-size:25px;letter-spacing:.005em}
.value p{margin-top:8px;font-size:13.5px;line-height:1.55;color:#6d746a;max-width:26ch}

/* 5.4 iki kolonlu bölüm iskeleti */
.split{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;margin-top:var(--gap-sec)}
.split__aside{align-self:center}

/* 5.5 kategoriler */
.cats{display:flex;flex-direction:column;gap:13px}
.cats__row{display:grid;gap:13px}
.cats__row--a{grid-template-columns:46fr 54fr}
.cats__row--b{grid-template-columns:39fr 61fr}
.cat{
  position:relative;display:flex;overflow:hidden;
  min-height:190px;padding:28px 30px;border-radius:var(--r-tile);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
}
.cat:hover{transform:translateY(-4px);box-shadow:var(--sh-soft)}
.cat__txt{position:relative;z-index:3;max-width:56%}
.cat__t{display:block;font:400 33px/1.08 var(--serif);letter-spacing:-.018em}
.cat__d{display:block;margin-top:9px;font-size:12px;line-height:1.5;font-weight:500;opacity:.85}
.cat__ph{
  position:absolute;right:0;top:0;bottom:0;width:54%;z-index:1;
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 26%);
          mask-image:linear-gradient(90deg,transparent,#000 26%);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.cat__ph--wide{width:58%}
.cat:hover .cat__ph{transform:scale(1.05)}
/* Krokan karosu: tam kanama fotoğraf + soldan gelen zeytin perdesi */
.cat__ph--full{
  width:100%;mix-blend-mode:normal;
  -webkit-mask-image:none;mask-image:none;
}
/* Krokan karosu gerçek fotoğrafla kaplı; fotoğrafın kendi koyu zeytin zemini
   var, bu yüzden karo rengi ve perde onunla aynı tona alındı. Perde yalnızca
   başlığın okunmasını garantiler, görseli soldurmaz. */
.cat--olive{background:#4d4820;color:#fff}
.cat--olive::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgb(77 72 32 / .82) 0%,rgb(77 72 32 / .55) 34%,rgb(77 72 32 / .12) 62%,transparent 80%);
}
/* Bar karosu da gerçek fotoğrafla kaplı; perde fotoğrafın krem zemininin
   tonunda, koyu başlık üzerinde okunsun diye. */
.cat--sand{background:#fbead9;color:var(--ink)}
.cat--sand::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgb(251 234 217 / .88) 0%,rgb(251 234 217 / .62) 34%,rgb(251 234 217 / .14) 62%,transparent 80%);
}
.cat--apricot{background:#fee2b3;color:#5a3213}
.cat--apricot::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgb(254 226 179 / .9) 0%,rgb(254 226 179 / .62) 34%,rgb(254 226 179 / .14) 62%,transparent 80%);
}
.cat--sage{background:#dcd9c2;color:#2f3a24}
.cat--sage::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgb(220 217 194 / .9) 0%,rgb(220 217 194 / .64) 34%,rgb(220 217 194 / .16) 62%,transparent 80%);
}

/* 5.6 zaman çizelgesi */
.tline{display:grid;grid-template-columns:352px minmax(0,1fr);gap:44px;margin-top:var(--gap-sec);align-items:start}
.tline__t{font:400 clamp(23px,2.1vw,30px)/1.2 var(--serif);letter-spacing:-.016em;color:var(--ink)}
.tline__t em{font-style:normal;color:var(--orange)}
.tline__p{margin-top:16px;max-width:38ch;font-size:12.5px;line-height:1.62;color:var(--muted)}

.tline__list{display:grid;grid-template-columns:repeat(5,1fr);gap:0 14px}
.tstep{position:relative;display:flex;flex-direction:column}
.tstep::after{content:"";position:absolute;right:-7px;top:112px;bottom:2px;width:1px;background:var(--line)}
.tstep:last-child::after{display:none}
.tstep__ph{height:94px;border-radius:8px;margin-bottom:16px}
.tstep b{padding-top:12px;border-top:1px solid #ddd2bf;font:400 17px/1 var(--serif)}
.tstep small{margin-top:9px;padding-right:12px;font-size:11.5px;line-height:1.5;color:var(--muted)}

/* 5.7 ikili panel iskeleti */
.duo{display:grid;gap:16px;margin-top:var(--gap-sec)}
.duo--a{grid-template-columns:41fr 58fr}
.duo--b{grid-template-columns:57fr 42fr}
.panel{background:#f7f1e5;border-radius:var(--r-band);padding:26px 28px;min-width:0}
.panel__t{font:400 clamp(18px,1.62vw,23px)/1.24 var(--serif);letter-spacing:-.014em;color:var(--ink)}

/* içindekiler rozetleri */
.diet__list{display:grid;grid-template-columns:repeat(4,1fr);margin-top:36px}
.diet__list li{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  padding:2px 8px;border-right:1px solid #e4d9c6;
}
.diet__list li:last-child{border-right:0}
/* Bu dörtlü kendi renklerini taşıyan çizimler; çizgi ikonlardan daha
   ayrıntılı olduğu için daha büyük çiziliyor. */
.diet__ico{font-size:52px;color:#2d4a35}
.diet__list b{font-size:11px;font-weight:600;line-height:1.45;color:var(--ink-soft)}

/* tat seçici */
.taste__chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.tchip{
  padding:8px 13px;border-radius:100px;border:1px solid #ded2bd;
  font-size:11px;font-weight:600;color:var(--ink);white-space:nowrap;
  transition:background-color .22s,border-color .22s,color .22s;
}
.tchip:hover{border-color:#bfae90}
.tchip.is-on{background:var(--green);border-color:var(--green);color:#fff}
.taste__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:18px}
.tcard{display:flex;flex-direction:column;gap:9px;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.tcard:hover{transform:translateY(-3px)}
/* Ürün fotoğrafları paketshot; Ürünler sayfasındaki gibi kırpmadan
   (--z:contain) beyaz zemine oturuyor. */
.tcard__ph{
  height:92px;border-radius:10px;
  padding:8px;background-color:#fff;background-origin:content-box;
  border:1px solid var(--line);
}
.tcard b{
  font-size:11px;font-weight:600;line-height:1.35;color:var(--ink);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.tcard:hover b{color:var(--orange)}

/* 5.9 kurumsal iş birlikleri */
.biz{display:grid;grid-template-columns:200px minmax(0,1fr);gap:26px;align-items:center}
.biz .panel__t{font-size:clamp(16px,1.4vw,20px)}
.biz__copy .btn{margin-top:18px}
.biz__list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.biz__list li{
  display:flex;flex-direction:column;gap:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 12px;
}
/* İçindekiler dörtlüsü gibi kendi renklerini taşıyan çizimler; çizgi
   ikonlardan daha ayrıntılı olduğu için daha büyük çiziliyor. */
.biz__ico{font-size:52px;color:#2d4a35}
.biz__list b{font-size:10.5px;font-weight:700;line-height:1.3}
.biz__list small{font-size:9.5px;line-height:1.45;color:var(--muted)}

/* 5.10 belgeler */
.trust{display:flex;flex-direction:column}
.trust__list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.trust__list li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px}
/* Resmi logolar beyaz kartta, oranları bozulmadan ortalanır (bkz.
   assets/belge/KULLANIM-NOTU.txt). İki logonun oranı çok farklı
   (FSSC 5,2:1 · Yerli Üretim 2,3:1); sabit yükseklikli kart ikisini de
   aynı görsel ağırlıkta tutuyor. */
.tmark{
  display:grid;width:100%;height:78px;
  padding:14px 18px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);
}
/* Görsel grid alanını doldurur, ortalamayı object-fit yapar. place-items
   ile ortalanırsa satır içerikten boyutlanıyor, height:%100 çözülemiyor ve
   dik oranlı logo kutudan taşıyor. width/height:auto ise logoları kendi
   küçük doğal boyutlarında (FSSC 131×25) bırakıyor. */
.tmark img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;display:block}
.trust__list small{font-size:9.5px;color:var(--muted)}
.trust .btn{align-self:flex-start;margin-top:auto;margin-top:24px}

/* 5.11 günün anları */
.hours{margin-top:var(--gap-sec)}
.hours__t{font:400 clamp(19px,1.75vw,25px)/1.2 var(--serif);letter-spacing:-.014em}
.hours__row{display:grid;grid-template-columns:minmax(0,1fr) 148px;gap:26px;margin-top:18px;align-items:start}
.hours__list{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hour{position:relative;height:148px;border-radius:12px;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
.hour:hover{transform:translateY(-4px);box-shadow:var(--sh-soft)}
.hour__ph{position:absolute;inset:0;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.hour:hover .hour__ph{transform:scale(1.05)}
.hour::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(22 13 5 / .84) 0%,rgb(22 13 5 / .32) 54%,transparent 100%)}
.hour__body{position:absolute;left:16px;right:14px;bottom:14px;z-index:2;color:#fff}
.hour__when{font-size:10.5px;opacity:.9}
.hour__when b{font-size:14px;font-weight:700;margin-right:5px}
.hour__say{margin-top:5px;font-size:10.5px;line-height:1.42;opacity:.88}
.hours__tag{padding-top:4px}
.hours__handle{font-size:12.5px;font-weight:700}
.hours__hash{margin-top:3px;font-size:12.5px;color:var(--ink-soft)}
.social--sm{margin-top:14px;gap:9px}
.social--sm a{width:28px;height:28px;font-size:16px}

/* 5.12 kapanış afişi */
.finale{position:relative;display:grid;align-items:center;overflow:hidden;min-height:172px;margin-top:var(--gap-sec)}
.finale__ph{position:absolute;inset:0}
.finale::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgb(58 33 11 / .52) 0%,rgb(58 33 11 / .26) 50%,rgb(58 33 11 / .52) 100%);
}
.finale__in{position:relative;z-index:2;text-align:center;padding-block:34px}
.finale__t{font:400 clamp(20px,1.98vw,29px)/1.26 var(--serif);color:#fff;text-shadow:0 2px 16px rgb(38 20 5 / .55)}
.finale__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:20px}

/* 5.13 alt bilgi */
.foot{margin-top:var(--gap-sec)}
.foot__in{display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr 1.55fr;gap:clamp(22px,2.8vw,48px);padding-block:30px 22px}
.brand--foot .brand__mark{width:84px}
.social{display:flex;gap:12px;margin-top:18px}
.social a{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:18px;color:var(--ink-soft);transition:color .22s,background-color .22s}
.social a:hover{color:var(--green);background:#efe8da}
.foot__col{display:flex;flex-direction:column;gap:8px}
.foot__col h3{margin-bottom:4px;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.foot__col a{font-size:12px;color:var(--ink-soft);transition:color .2s}
.foot__col a:hover{color:var(--orange)}
.foot__news p{font-size:12px;line-height:1.55;color:var(--ink-soft);max-width:30ch}
.news{margin-top:12px}
.news__field{display:flex;align-items:center;gap:8px;padding:3px 3px 3px 17px;border:1px solid var(--line);border-radius:100px;background:var(--surface);transition:border-color .22s}
.news__field:focus-within{border-color:#cfc5b2}
.news__field input{flex:1;min-width:0;border:0;background:none;outline:0;font-size:12px;padding-block:9px}
.news__field input::placeholder{color:#9b9c93}
.news__go{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--orange);color:#fff;font-size:16px;transition:background-color .22s,transform .22s}
.news__go:hover{background:var(--orange-lit);transform:scale(1.07)}
.news__msg{margin-top:8px;font-size:11px;min-height:1em;color:var(--muted)}
.news__msg.is-bad{color:#c0421c}
.news__msg.is-good{color:#4c7a3a}

.foot__legal{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  padding-block:13px 24px;border-top:1px solid var(--line);
  font-size:10.5px;color:var(--muted);
}
.foot__legal nav{display:flex;gap:9px}
.foot__legal a:hover{color:var(--orange)}

/* bildirim baloncuğu */
.toast{
  position:fixed;left:50%;bottom:28px;z-index:60;
  padding:13px 24px;border-radius:100px;background:var(--green);color:#fff;
  font-size:13px;font-weight:600;box-shadow:0 18px 40px -18px rgb(16 56 42 / .9);
  transform:translate(-50%,26px);opacity:0;pointer-events:none;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),opacity .35s;
}
.toast.is-on{transform:translate(-50%,0);opacity:1}

/* ── 6. Hareket ───────────────────────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(24px)}
[data-reveal].is-in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}

/* Çapayla açılan sayfalarda (ör. index'ten kalite.html#belgeler) hedef 24px
   yukarıda kalıyordu: tarayıcı konumu hesaplarken bölüm henüz translateY(24px)
   ile aşağıdayken, animasyon bitince içerik yukarı kayıyor ve bölümün üstü
   yapışkan başlığın altında kalıyor. Aynı 24px'i kaydırma payı olarak
   ekleyerek telafi ediliyor.
   :not(.is-in) şart: bölüm bir kez göründükten sonra kayma olmayacağı için
   pay da kalkmalı, yoksa sayfa içi çapa tıklamaları 24px aşağı düşer. */
[data-reveal]:not(.is-in){scroll-margin-top:24px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  /* Burada kayma hiç olmuyor; pay da olmamalı. */
  [data-reveal]{opacity:1;transform:none}
  [data-reveal]:not(.is-in){scroll-margin-top:0}
  .hero__viewport{scroll-behavior:auto}
}

/* ── 7. Duyarlı ───────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .split{grid-template-columns:250px minmax(0,1fr);gap:30px}
  .tline{grid-template-columns:280px minmax(0,1fr);gap:30px}
  .panel{padding:22px 22px}
  .duo--a,.duo--b{grid-template-columns:1fr}
  .biz{grid-template-columns:190px minmax(0,1fr);gap:22px}
  .hours__row{grid-template-columns:minmax(0,1fr) 132px;gap:20px}
}

@media (max-width:980px){
  :root{--gap-band:42px;--gap-sec:64px}
  .nav{
    position:fixed;inset:116px 0 auto;z-index:39;flex-direction:column;gap:0;margin:0;
    background:var(--bg);border-bottom:1px solid var(--line);padding:8px var(--pad) 22px;
    box-shadow:0 20px 40px -26px rgb(28 49 37 / .5);
    clip-path:inset(0 0 100% 0);transition:clip-path .4s cubic-bezier(.2,.7,.3,1);
  }
  .nav.is-open{clip-path:inset(0 0 0 0)}
  .nav a{padding-block:15px;border-bottom:1px solid var(--line);font-size:13px}
  .nav a::after{display:none}
  .hdr__tools{margin-left:auto}
  .hdr__cta{display:none}
  .burger{display:grid}

  .slide{grid-template-columns:1fr;min-height:0}
  .slide__copy{padding:20px 0 20px}
  .slide__p{max-width:56ch}
  .slide__art{aspect-ratio:1.42}
  .hero__nav{padding-bottom:20px}

  .values{grid-template-columns:1fr 1fr;padding:16px 10px}
  .value{padding:16px 18px}
  .value:nth-child(2){border-right:0}
  .value:nth-child(-n+2){border-bottom:1px solid #e6dac5}
  .value:last-child{grid-column:1/-1}

  .split{grid-template-columns:minmax(0,1fr);gap:24px}

  .cats__row--a,.cats__row--b{grid-template-columns:1fr 1fr}

  .tline{grid-template-columns:1fr;gap:22px}
  .tline__list{grid-auto-flow:column;grid-auto-columns:190px;grid-template-columns:none;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .tline__list::-webkit-scrollbar{display:none}
  .tstep::after{display:none}

  .diet__list{grid-template-columns:1fr 1fr;gap:20px 0}
  .diet__list li:nth-child(2n){border-right:0}
  .taste__grid{grid-auto-flow:column;grid-auto-columns:150px;grid-template-columns:none;overflow-x:auto;scrollbar-width:none}
  .taste__grid::-webkit-scrollbar{display:none}

  .biz{grid-template-columns:1fr;gap:20px}
  .biz__list{grid-template-columns:1fr 1fr}

  .hours__row{grid-template-columns:1fr;gap:18px}
  .hours__list{grid-auto-flow:column;grid-auto-columns:250px;grid-template-columns:none;overflow-x:auto;scrollbar-width:none}
  .hours__list::-webkit-scrollbar{display:none}
  .hours__tag{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .social--sm{margin-top:0}

  .foot__in{grid-template-columns:1fr 1fr 1fr;row-gap:30px}
  .foot__brand,.foot__news{grid-column:1/-1}
}

@media (max-width:600px){
  :root{--gap-band:34px;--gap-sec:52px}
  .hdr__in{height:88px}
  .nav{inset:88px 0 auto}
  .brand__mark{width:66px}
  .slide__t{font-size:clamp(27px,7.6vw,34px)}
  .slide__actions{gap:10px}
  .slide__actions .btn{flex:1 1 138px;justify-content:center;gap:9px;padding:14px 16px;font-size:13px}
  .slide__art{aspect-ratio:1.22}
  .pack{width:22%}
  .pack__name{font-size:11px}
  .values{grid-template-columns:1fr}
  .value{border-right:0!important;padding:14px 12px}
  .value:not(:last-child){border-bottom:1px solid #e6dac5}
  .value:last-child{border-bottom:0}
  .cats__row--a,.cats__row--b{grid-template-columns:1fr}
  .cat{min-height:164px;padding:24px}
  .cat__txt{max-width:58%}
  .cat__t{font-size:28px}
  .panel{padding:20px 18px}
  .tline__list{grid-auto-columns:164px}
  .diet__list{grid-template-columns:1fr 1fr}
  .biz__list{grid-template-columns:1fr 1fr}
  .hours__list{grid-auto-columns:222px}
  .finale__actions .btn{flex:1 1 150px;justify-content:center}
  .foot__in{grid-template-columns:1fr 1fr}
  .foot__legal{flex-direction:column}
}