/* ==========================================================================
   Tuna Food România — tema
   Yapı/tipografi referansı: hisarziraat.com (Shopify Horizon)
   Palet: Tuna Food marka kırmızısı
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap');

:root{
  /* ---- renk ---- */
  --ink:            #0D0D0D;
  --ink-70:         rgba(13,13,13,.70);
  --ink-45:         rgba(13,13,13,.45);
  --ink-12:         rgba(13,13,13,.12);
  --ink-06:         rgba(13,13,13,.06);
  --paper:          #FFFFFF;
  --paper-70:       rgba(255,255,255,.70);
  --paper-25:       rgba(255,255,255,.25);
  --paper-12:       rgba(255,255,255,.12);

  --brand:          #A2292A;   /* Tuna Food kırmızısı */
  --brand-deep:     #7E1F20;
  --brand-ink:      #2A0F0F;   /* koyu bölüm zemini */
  --brand-ink-2:    #1A0909;

  --accent:         #F3E3C8;   /* sıcak krem — hisar'daki limon yeşilinin karşılığı */
  --accent-deep:    #E7D0AC;

  --surface:        #F0F0F0;   /* ürün kartı zemini */
  --surface-2:      #F7F5F3;
  --line:           #E6E3E0;
  --muted:          #6F727B;

  /* ---- ölçü ---- */
  --page:           144rem;    /* 1440px */
  --page-narrow:    88rem;
  --gutter:         2.4rem;
  --section-y:      6.75rem;
  --section-y-sm:   4.8rem;

  /* ---- yarıçap ---- */
  --r-card:         2rem;
  --r-lg:           2rem;
  --r-md:           1rem;
  --r-pill:         999px;

  /* ---- tipografi (akışkan) ---- */
  --f-body:         'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-mega:        clamp(4.032rem, calc(3.368vw + 1.448rem), 5.76rem);
  --fs-h1:          clamp(3.36rem,  calc(2.807vw + 1.207rem), 4.8rem);
  --fs-h2:          clamp(2.688rem, calc(2.246vw + 0.966rem), 3.84rem);
  --fs-h3:          clamp(2.352rem, calc(1.965vw + 0.845rem), 3.36rem);
  --fs-h4:          clamp(1.92rem,  calc(1.404vw + 0.844rem), 2.64rem);
  --fs-h5:          clamp(1.92rem,  calc(0.468vw + 1.561rem), 2.16rem);
  --fs-body:        1.5rem;
  --fs-sm:          1.35rem;
  --fs-xs:          1.2rem;

  --lh-display:     1.1;
  --lh-h1:          1.2;
  --lh-h2:          1.3125;
  --lh-h3:          1.357;
  --lh-body:        1.6;

  --ease:           cubic-bezier(.2,.7,.3,1);
  --header-h:       6.4rem;
}

/* ---- reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:62.5%; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:var(--fs-body); line-height:var(--lh-body);
  font-weight:400; -webkit-font-smoothing:antialiased;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,p{ margin:0; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:4px; }

/* ---- düzen ---- */
.wrap{ width:100%; max-width:var(--page); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:var(--page-narrow); }
.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:var(--section-y-sm); }
.section--dark{ background:var(--brand-ink); color:var(--paper); }
.section--surface{ background:var(--surface-2); }

/* ---- tipografi yardımcıları ---- */
.eyebrow{
  font-size:var(--fs-body); font-weight:500; letter-spacing:.075em;
  text-transform:uppercase; color:var(--ink-70);
}
.section--dark .eyebrow{ color:var(--paper-70); }
.h1{ font-size:var(--fs-h1); line-height:var(--lh-h1); font-weight:400; letter-spacing:-.01em; }
.h2{ font-size:var(--fs-h2); line-height:var(--lh-h2); font-weight:400; letter-spacing:-.01em; }
.h3{ font-size:var(--fs-h3); line-height:var(--lh-h3); font-weight:400; }
.h4{ font-size:var(--fs-h4); line-height:1.35; font-weight:500; }
.h5{ font-size:var(--fs-h5); line-height:1.45; font-weight:500; }
.lede{ font-size:1.7rem; line-height:1.65; color:var(--ink-70); }
.section--dark .lede{ color:var(--paper-70); }
.small{ font-size:var(--fs-sm); }
.muted{ color:var(--muted); }
.center{ text-align:center; }

.section-head{ display:flex; flex-direction:column; gap:1.2rem; align-items:center; text-align:center; margin-bottom:4.8rem; }
.section-head--left{ align-items:flex-start; text-align:left; }
.section-head p.lede{ max-width:62ch; }

/* ---- buton ---- */
.btn{
  display:inline-flex; align-items:center; gap:1rem;
  padding:1.1rem 2.4rem; border-radius:var(--r-pill);
  font-size:var(--fs-body); font-weight:500; line-height:1;
  border:1px solid transparent; transition:.28s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:1.6rem; height:1.6rem; transition:transform .28s var(--ease); }
.btn:hover svg{ transform:translateX(.3rem); }
.btn--accent{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.btn--accent:hover{ background:var(--accent-deep); border-color:var(--accent-deep); }
.btn--brand{ background:var(--brand); border-color:var(--brand); color:var(--paper); }
.btn--brand:hover{ background:var(--brand-deep); border-color:var(--brand-deep); }
.btn--ghost{ border-color:var(--ink-12); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); }
.section--dark .btn--ghost,
.hero .btn--ghost,
.quote__body .btn--ghost{ border-color:var(--paper-25); color:var(--paper); }
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.quote__body .btn--ghost:hover{ border-color:var(--paper); background:var(--paper-12); }
.btn--sm{ padding:.8rem 1.8rem; font-size:var(--fs-sm); }

/* ---- rozet ---- */
.badge{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.5rem 1.2rem; border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:500; letter-spacing:.02em;
  background:var(--accent); color:var(--ink);
}
.badge--outline{ background:transparent; border:1px solid var(--ink-12); color:var(--ink-70); }
.badge--halal{ background:var(--brand); color:var(--paper); }

/* ==========================================================================
   Header
   ========================================================================== */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--header-h);
  display:flex; align-items:center; color:var(--paper);
  transition:background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.header__inner{
  width:100%; max-width:var(--page); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem;
}
.header.is-solid{ background:var(--brand-ink); box-shadow:0 1px 0 var(--paper-12); }
.header.is-light{ background:var(--paper); color:var(--ink); box-shadow:0 1px 0 var(--line); }

.nav{ display:flex; align-items:center; gap:2.8rem; font-size:var(--fs-body); }
.nav a{ position:relative; padding-block:.4rem; opacity:.9; transition:opacity .2s; }
.nav a:hover,.nav a[aria-current="page"]{ opacity:1; }
.nav a[aria-current="page"]::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
}
.nav__group{ position:relative; }
.nav__toggle{ display:inline-flex; align-items:center; gap:.6rem; opacity:.9; }
.nav__toggle svg{ width:1.2rem; height:1.2rem; transition:transform .25s var(--ease); }
.nav__group[data-open="true"] .nav__toggle svg{ transform:rotate(180deg); }
.nav__menu{
  position:absolute; top:calc(100% + 1.4rem); left:-1.6rem; min-width:26rem;
  background:var(--paper); color:var(--ink); border-radius:var(--r-md);
  padding:1.2rem; box-shadow:0 2rem 4rem rgba(0,0,0,.14);
  opacity:0; visibility:hidden; transform:translateY(-.6rem);
  transition:.25s var(--ease);
}
.nav__group[data-open="true"] .nav__menu{ opacity:1; visibility:visible; transform:none; }
.nav__menu a{
  display:flex; justify-content:space-between; gap:2rem; align-items:center;
  padding:.9rem 1.2rem; border-radius:.8rem; font-size:var(--fs-sm); opacity:1;
}
.nav__menu a:hover{ background:var(--ink-06); }
.nav__menu a span:last-child{ color:var(--muted); font-size:var(--fs-xs); }

.brandmark{ display:flex; align-items:center; justify-content:center; }
.brandmark img{ height:3.4rem; width:auto; }
.header:not(.is-light) .brandmark img{ filter:brightness(0) invert(1); }

.header__actions{ display:flex; align-items:center; justify-content:flex-end; gap:1.6rem; }
.icon-btn{
  display:grid; place-items:center; width:4rem; height:4rem; border-radius:50%;
  transition:background .2s;
}
.icon-btn:hover{ background:var(--paper-12); }
.header.is-light .icon-btn:hover{ background:var(--ink-06); }
.icon-btn svg{ width:2rem; height:2rem; }
.lang{ display:flex; align-items:center; gap:.8rem; font-size:var(--fs-sm); }
.lang button{ opacity:.55; transition:opacity .2s; }
.lang button.is-active{ opacity:1; font-weight:500; }
.nav-toggle{ display:none; }

/* ---- mobil menü çekmecesi ---- */
.drawer{
  position:fixed; inset:0; z-index:150; visibility:hidden; pointer-events:none;
}
.drawer[data-open="true"]{ visibility:visible; pointer-events:auto; }
.drawer__scrim{
  position:absolute; inset:0; background:rgba(13,13,13,.5); opacity:0;
  transition:opacity .3s var(--ease);
}
.drawer[data-open="true"] .drawer__scrim{ opacity:1; }
.drawer__panel{
  position:absolute; inset:0 auto 0 0; width:min(86vw,36rem);
  background:var(--paper); color:var(--ink);
  transform:translateX(-100%); transition:transform .38s var(--ease);
  display:flex; flex-direction:column; padding:2.4rem 2rem; overflow-y:auto;
}
.drawer[data-open="true"] .drawer__panel{ transform:none; }
.drawer__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:3.2rem; }
.drawer__head img{ height:3.2rem; }
.drawer__close{ display:grid; place-items:center; width:4rem; height:4rem; border-radius:50%; }
.drawer__close:hover{ background:var(--ink-06); }
.drawer__close svg{ width:2rem; height:2rem; }
.drawer nav a{ display:block; padding:1.4rem 0; font-size:2rem; border-bottom:1px solid var(--line); }
.drawer__sub{ padding:1.2rem 0 1.2rem 1.6rem; border-bottom:1px solid var(--line); }
.drawer__sub a{ font-size:var(--fs-body)!important; padding:.8rem 0!important; border:0!important; color:var(--ink-70); display:flex!important; justify-content:space-between; }
.drawer__sub a:hover{ color:var(--ink); }
.drawer__label{ font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem; }
.drawer__foot{ margin-top:auto; padding-top:3.2rem; display:grid; gap:1.2rem; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ position:relative; min-height:78vh; display:grid; background:var(--brand-ink); }
.hero__slide{
  grid-area:1/1; position:relative; display:grid; place-items:center;
  opacity:0; transition:opacity .9s var(--ease); pointer-events:none;
}
.hero__slide.is-active{ opacity:1; pointer-events:auto; }
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,8,8,.62) 0%, rgba(20,8,8,.28) 42%, rgba(20,8,8,.72) 100%);
}
.hero__body{
  position:relative; z-index:1; text-align:center; color:var(--paper);
  padding:calc(var(--header-h) + 6rem) var(--gutter) 12rem;
  display:flex; flex-direction:column; align-items:center; gap:2rem;
  max-width:96rem;
}
.hero__body .eyebrow{ color:var(--paper-70); }
.hero__title{ font-size:var(--fs-mega); line-height:var(--lh-display); font-weight:300; letter-spacing:-.02em; }
.hero__title strong{ font-weight:500; }
.hero__sub{ font-size:1.8rem; color:var(--paper-70); max-width:56ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:center; margin-top:1rem; }

.hero__controls{
  position:absolute; left:50%; bottom:5.6rem; transform:translateX(-50%); z-index:3;
  display:flex; align-items:center; gap:1.6rem; color:var(--paper);
}
.hero__count{ font-size:var(--fs-sm); font-variant-numeric:tabular-nums; white-space:nowrap; }
.hero__progress{ position:relative; width:14rem; height:2px; background:var(--paper-25); }
.hero__progress span{ position:absolute; inset:0 auto 0 0; background:var(--paper); transition:width .5s var(--ease); }
.hero__arrows{ display:flex; gap:.4rem; }
.hero__arrows button{
  display:grid; place-items:center; width:3.2rem; height:3.2rem; border-radius:50%;
  border:1px solid var(--paper-25); transition:.2s;
}
.hero__arrows button:hover{ background:var(--paper); color:var(--ink); }
.hero__arrows svg{ width:1.4rem; height:1.4rem; }

/* hero'nun üstüne binen yuvarlak köşeli gövde */
.overlap{
  position:relative; z-index:4; margin-top:-4rem;
  background:var(--paper); border-radius:var(--r-lg) var(--r-lg) 0 0;
}

/* ==========================================================================
   Ürün kartı
   ========================================================================== */
.product-grid{
  display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fill, minmax(26rem, 1fr));
}
.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border-radius:var(--r-card); overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover{ transform:translateY(-.4rem); box-shadow:0 1.6rem 3.2rem rgba(13,13,13,.10); }
.card__media{ position:relative; aspect-ratio:1; overflow:hidden; background:var(--surface); }
.card__media img{
  width:100%; height:100%; object-fit:contain; padding:1.6rem;
  transition:transform .5s var(--ease);
}
.card:hover .card__media img{ transform:scale(1.05); }
.card__flag{ position:absolute; top:1.4rem; left:1.4rem; z-index:2; }
.card__body{ display:flex; flex-direction:column; gap:.6rem; padding:1.8rem 2rem 2.2rem; }
.card__cat{ font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.card__name{ font-size:1.6rem; font-weight:500; line-height:1.35; }
.card__meta{ display:flex; align-items:center; gap:.8rem; margin-top:.4rem; font-size:var(--fs-sm); color:var(--muted); }
.card__link{ position:absolute; inset:0; z-index:3; }
.card__quick{
  position:absolute; right:1.4rem; bottom:1.4rem; z-index:4;
  display:grid; place-items:center; width:4rem; height:4rem; border-radius:50%;
  background:var(--paper); color:var(--ink); box-shadow:0 .4rem 1.2rem rgba(0,0,0,.12);
  opacity:0; transform:translateY(.6rem); transition:.3s var(--ease);
}
.card:hover .card__quick{ opacity:1; transform:none; }
.card__quick svg{ width:1.8rem; height:1.8rem; }

/* sekmeli ürün bölümü */
.tabs{ display:flex; justify-content:center; gap:.6rem; margin-bottom:3.2rem; }
.tab{
  padding:1rem 2rem; border-radius:var(--r-pill); font-size:var(--fs-body); font-weight:500;
  color:var(--ink-70); transition:.25s var(--ease);
}
.tab.is-active{ background:var(--accent); color:var(--ink); }
.tab:hover:not(.is-active){ background:var(--ink-06); color:var(--ink); }

/* yatay kaydırmalı sıra */
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(26rem,1fr);
  gap:2rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:1rem; scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }
.rail>*{ scroll-snap-align:start; }
.rail-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:3.2rem; }
.rail-nav{ display:flex; gap:.6rem; }
.rail-nav button{
  display:grid; place-items:center; width:4.4rem; height:4.4rem; border-radius:50%;
  border:1px solid var(--ink-12); transition:.2s;
}
.rail-nav button:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.section--dark .rail-nav button{ border-color:var(--paper-25); }
.section--dark .rail-nav button:hover{ background:var(--paper); color:var(--ink); }
.rail-nav svg{ width:1.6rem; height:1.6rem; }

/* ==========================================================================
   Kategori kılavuzu (iki sütun)
   ========================================================================== */
.guide{ display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; }
.guide__list{ display:flex; flex-direction:column; }
.guide__item{
  position:relative; padding:2.4rem 0 2.4rem 3.2rem; border-bottom:1px solid var(--line);
  cursor:pointer; transition:.3s var(--ease);
}
.guide__item:first-child{ border-top:1px solid var(--line); }
.guide__item::before{
  content:''; position:absolute; left:0; top:2.9rem; width:.8rem; height:.8rem; border-radius:50%;
  background:var(--ink-12); transition:.3s var(--ease);
}
.guide__item.is-active::before{ background:var(--brand); box-shadow:0 0 0 .5rem rgba(162,41,42,.14); }
.guide__item h3{ font-size:2.1rem; font-weight:500; transition:color .3s; }
.guide__item.is-active h3{ color:var(--brand); }
.guide__item p{
  font-size:var(--fs-sm); color:var(--muted); max-height:0; overflow:hidden;
  transition:max-height .45s var(--ease), margin .45s var(--ease), opacity .3s; opacity:0;
}
.guide__item.is-active p{ max-height:12rem; margin-top:.8rem; opacity:1; }
.guide__media{ position:relative; aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
.guide__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .6s var(--ease), transform 6s linear;
}
.guide__media img.is-active{ opacity:1; transform:scale(1.06); }

/* ==========================================================================
   Zaman çizelgesi
   ========================================================================== */
.timeline{ display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:start; }
.timeline__steps{ position:relative; padding-left:3.2rem; }
.timeline__steps::before{
  content:''; position:absolute; left:.55rem; top:1rem; bottom:1rem; width:1px; background:var(--line);
}
.section--dark .timeline__steps::before{ background:var(--paper-25); }
.step{ position:relative; padding-bottom:4.4rem; }
.step:last-child{ padding-bottom:0; }
.step::before{
  content:''; position:absolute; left:-3.2rem; top:.7rem; width:1.2rem; height:1.2rem;
  border-radius:50%; background:var(--brand); box-shadow:0 0 0 .5rem rgba(162,41,42,.16);
}
.step__no{
  display:inline-block; padding:.4rem 1rem; border-radius:var(--r-pill);
  background:var(--accent); color:var(--ink);
  font-size:var(--fs-xs); font-weight:500; margin-bottom:1rem;
}
.step h3{ font-size:2.2rem; font-weight:500; margin-bottom:.8rem; }
.step p{ font-size:var(--fs-sm); color:var(--ink-70); max-width:46ch; }
.section--dark .step p{ color:var(--paper-70); }
.timeline__media{ position:sticky; top:calc(var(--header-h) + 3rem); }
.timeline__media img{ width:100%; border-radius:var(--r-lg); aspect-ratio:4/5; object-fit:cover; }

/* ==========================================================================
   İstatistikler
   ========================================================================== */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.stat{ padding:3.2rem 2rem; border-radius:var(--r-lg); background:var(--paper-12); text-align:center; }
.stat__n{ font-size:clamp(3.6rem,4vw,5.2rem); font-weight:300; line-height:1; letter-spacing:-.02em; }
.stat__n em{ font-style:normal; font-size:.5em; opacity:.7; margin-left:.2rem; }
.stat__l{ margin-top:1rem; font-size:var(--fs-sm); color:var(--paper-70); }

/* ==========================================================================
   Görüş / alıntı
   ========================================================================== */
.quote{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; border-radius:var(--r-lg); overflow:hidden; }
.quote__media img{ width:100%; height:100%; min-height:44rem; object-fit:cover; }
.quote__body .eyebrow{ color:var(--paper-70); }
.quote__body{
  background:var(--brand-ink); color:var(--paper);
  padding:6rem 5rem; display:flex; flex-direction:column; justify-content:center; gap:2.4rem;
}
.quote__text{ font-size:clamp(2.2rem,2.2vw,3rem); line-height:1.35; font-weight:300; }
.quote__who{ display:flex; align-items:center; gap:1.2rem; }
.quote__who img{ width:4.4rem; height:4.4rem; border-radius:50%; object-fit:cover; }
.quote__who strong{ display:block; font-weight:500; font-size:var(--fs-body); }
.quote__who span{ font-size:var(--fs-sm); color:var(--paper-70); }

/* ==========================================================================
   Özellik kartları / değerler
   ========================================================================== */
.features{ display:grid; grid-template-columns:repeat(auto-fit,minmax(24rem,1fr)); gap:2rem; }
.feature{
  padding:3.2rem 2.8rem; border-radius:var(--r-lg);
  background:var(--surface-2); display:flex; flex-direction:column; gap:1.2rem;
}
.section--dark .feature{ background:var(--paper-12); }
.feature__icon{
  display:grid; place-items:center; width:4.8rem; height:4.8rem; border-radius:50%;
  background:var(--brand); color:var(--paper); margin-bottom:.8rem;
}
.feature__icon svg{ width:2.2rem; height:2.2rem; }
.feature h3{ font-size:1.9rem; font-weight:500; }
.feature p{ font-size:var(--fs-sm); color:var(--ink-70); }
.section--dark .feature p{ color:var(--paper-70); }

/* ---- kategori kartları ---- */
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(22rem,1fr)); gap:2rem; }
.cat-card{
  position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--surface);
  aspect-ratio:3/4; display:flex; flex-direction:column; justify-content:flex-end;
  padding:2.4rem; color:var(--paper); transition:transform .4s var(--ease);
}
.cat-card:hover{ transform:translateY(-.5rem); }
.cat-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
}
.cat-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(42,15,15,.05) 35%, rgba(42,15,15,.88) 100%);
}
.cat-card:hover img{ transform:scale(1.06); }
.cat-card__body{ position:relative; z-index:2; }
.cat-card h3{ font-size:2.1rem; font-weight:500; }
.cat-card span{ font-size:var(--fs-sm); color:var(--paper-70); }

/* ---- kayan şerit ---- */
.marquee{ overflow:hidden; border-block:1px solid var(--line); padding-block:2rem; }
.marquee__track{ display:flex; gap:4rem; width:max-content; animation:slide 38s linear infinite; }
.marquee a{
  display:inline-flex; align-items:center; gap:1.2rem;
  font-size:var(--fs-h4); font-weight:400; white-space:nowrap; color:var(--ink-70);
  transition:color .25s;
}
.marquee a:hover{ color:var(--brand); }
.marquee a::after{ content:'·'; color:var(--ink-12); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ==========================================================================
   Bülten + Footer
   ========================================================================== */
.newsletter{ display:flex; flex-direction:column; align-items:center; gap:2.4rem; text-align:center; }
.newsletter form{ display:flex; gap:.8rem; width:100%; max-width:46rem; }
.field{
  flex:1; padding:1.3rem 2rem; border-radius:var(--r-pill);
  border:1px solid var(--ink-12); background:var(--paper); font-size:var(--fs-body);
}
.section--dark .field{ background:transparent; border-color:var(--paper-25); color:var(--paper); }
.section--dark .field::placeholder{ color:var(--paper-70); }
.field:focus{ outline:none; border-color:var(--brand); }

.footer{ background:var(--brand-ink-2); color:var(--paper); padding-block:6.4rem 3.2rem; }
.footer__top{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:4rem; padding-bottom:4.8rem; }
.footer__brand img{ height:3.6rem; filter:brightness(0) invert(1); margin-bottom:1.8rem; }
.footer__brand p{ font-size:var(--fs-sm); color:var(--paper-70); max-width:34ch; }
.footer h4{ font-size:var(--fs-sm); font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--paper-70); margin-bottom:1.8rem; }
.footer li{ margin-bottom:1rem; }
.footer li a{ font-size:var(--fs-sm); color:var(--paper); opacity:.8; transition:opacity .2s; }
.footer li a:hover{ opacity:1; }
.footer__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.6rem;
  padding-top:2.8rem; border-top:1px solid var(--paper-12);
  font-size:var(--fs-xs); color:var(--paper-70);
}
.socials{ display:flex; gap:1rem; }
.socials a{ display:grid; place-items:center; width:3.6rem; height:3.6rem; border-radius:50%; border:1px solid var(--paper-25); transition:.2s; }
.socials a:hover{ background:var(--paper); color:var(--brand-ink); }
.socials svg{ width:1.7rem; height:1.7rem; }

/* ==========================================================================
   Ürün listesi sayfası
   ========================================================================== */
.page-head{ padding-top:calc(var(--header-h) + 5.6rem); padding-bottom:3.2rem; }
.breadcrumb{ display:flex; gap:.8rem; font-size:var(--fs-sm); color:var(--muted); margin-bottom:1.6rem; }
.breadcrumb a:hover{ color:var(--ink); }
.filters{
  position:sticky; top:var(--header-h); z-index:20; background:var(--paper);
  padding-block:1.6rem; border-bottom:1px solid var(--line);
  display:flex; gap:.8rem; overflow-x:auto; scrollbar-width:none;
}
.filters::-webkit-scrollbar{ display:none; }
.chip{
  padding:.9rem 1.8rem; border-radius:var(--r-pill); border:1px solid var(--ink-12);
  font-size:var(--fs-sm); font-weight:500; white-space:nowrap; color:var(--ink-70);
  transition:.22s var(--ease);
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip.is-active{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.result-count{ font-size:var(--fs-sm); color:var(--muted); margin-block:2.8rem 2rem; }

/* ==========================================================================
   Ürün detay
   ========================================================================== */
.pdp{ display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:start; padding-top:calc(var(--header-h) + 4.8rem); }
.pdp__media{ position:sticky; top:calc(var(--header-h) + 3rem); }
.pdp__main{ background:var(--surface); border-radius:var(--r-lg); aspect-ratio:1; display:grid; place-items:center; overflow:hidden; }
.pdp__main img{ width:100%; height:100%; object-fit:contain; padding:4rem; }
.pdp__thumbs{ display:flex; gap:1rem; margin-top:1.2rem; }
.pdp__thumbs button{
  width:8rem; aspect-ratio:1; border-radius:var(--r-md); overflow:hidden;
  background:var(--surface); border:2px solid transparent; transition:.2s;
}
.pdp__thumbs button.is-active{ border-color:var(--ink); }
.pdp__thumbs img{ width:100%; height:100%; object-fit:contain; padding:.8rem; }
.pdp__info{ display:flex; flex-direction:column; gap:2rem; }
.pdp__badges{ display:flex; flex-wrap:wrap; gap:.8rem; }
.pdp__desc{ font-size:1.6rem; line-height:1.7; color:var(--ink-70); }
.pdp__actions{ display:flex; flex-wrap:wrap; gap:1rem; padding-block:.8rem; }

.spec{ border-top:1px solid var(--line); }
.spec__row{ display:flex; justify-content:space-between; gap:2rem; padding:1.4rem 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm); }
.spec__row dt{ color:var(--muted); }
.spec__row dd{ margin:0; font-weight:500; text-align:right; }
.spec h3{ font-size:1.8rem; font-weight:500; margin-block:3.2rem 1.2rem; }

.note{
  display:flex; gap:1.2rem; padding:1.8rem 2rem; border-radius:var(--r-md);
  background:var(--surface-2); font-size:var(--fs-sm); color:var(--ink-70);
}
.note svg{ width:2rem; height:2rem; flex:none; color:var(--brand); }

/* ==========================================================================
   Arama paneli
   ========================================================================== */
.search-panel{
  position:fixed; inset:0; z-index:200; background:rgba(13,13,13,.5);
  opacity:0; visibility:hidden; transition:.3s var(--ease); backdrop-filter:blur(4px);
}
.search-panel[data-open="true"]{ opacity:1; visibility:visible; }
.search-panel__box{
  background:var(--paper); padding:3.2rem var(--gutter);
  transform:translateY(-2rem); transition:transform .35s var(--ease);
}
.search-panel[data-open="true"] .search-panel__box{ transform:none; }
.search-panel input{
  width:100%; border:0; border-bottom:1px solid var(--ink-12); padding:1.6rem 0;
  font-family:var(--f-body); font-size:var(--fs-h4); background:transparent;
}
.search-panel input:focus{ outline:none; border-color:var(--ink); }
.search-results{ display:grid; grid-template-columns:repeat(auto-fill,minmax(22rem,1fr)); gap:1.6rem; margin-top:2.8rem; max-height:52vh; overflow-y:auto; }
.search-hit{ display:flex; gap:1.4rem; align-items:center; padding:1rem; border-radius:var(--r-md); transition:background .2s; }
.search-hit:hover{ background:var(--ink-06); }
.search-hit img{ width:6rem; height:6rem; object-fit:contain; background:var(--surface); border-radius:.8rem; flex:none; }
.search-hit strong{ font-size:var(--fs-sm); font-weight:500; display:block; }
.search-hit span{ font-size:var(--fs-xs); color:var(--muted); }

/* ==========================================================================
   Giriş animasyonu
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(2.4rem); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ==========================================================================
   Duyarlı
   ========================================================================== */
@media (max-width:1100px){
  .guide,.timeline,.quote,.pdp{ grid-template-columns:1fr; gap:4rem; }
  .timeline__media,.pdp__media{ position:static; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .footer__top{ grid-template-columns:1fr 1fr; gap:3.2rem; }
  .quote__media img{ min-height:32rem; }
  .quote__body{ padding:4rem 3.2rem; }
}
@media (max-width:1024px){
  .nav,.lang{ display:none; }
  .nav-toggle{ display:grid; }
  .header__inner{ grid-template-columns:auto 1fr auto; }
  .brandmark{ justify-content:flex-start; margin-left:.8rem; }
}
@media (max-width:820px){
  :root{ --gutter:1.8rem; --section-y:4.8rem; --section-y-sm:3.6rem; --header-h:5.6rem; }
  .hero{ min-height:70vh; }
  .hero__body{ padding-bottom:10rem; }
  .hero__controls{ bottom:3.2rem; gap:1.2rem; }
  .hero__progress{ width:9rem; }
  .product-grid{ grid-template-columns:repeat(2,1fr); gap:1.2rem; }
  .card__body{ padding:1.4rem 1.4rem 1.8rem; }
  .rail{ grid-auto-columns:minmax(22rem,1fr); }
  .rail-head{ flex-direction:column; align-items:flex-start; }
  .footer__top{ grid-template-columns:1fr; }
  .pdp__main img{ padding:2rem; }
  .section-head{ margin-bottom:3.2rem; }
}
@media (max-width:520px){
  .stats{ grid-template-columns:1fr; }
  .newsletter form{ flex-direction:column; }
  .newsletter form .btn{ justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---- iletişim formu ---- */
.contact-grid select.field{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D0D0D' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 2rem center; background-size:1.4rem; padding-right:4.4rem; }
.contact-grid textarea.field{ font-family:var(--f-body); line-height:var(--lh-body); }
@media (max-width:980px){
  .contact-grid{ grid-template-columns:1fr!important; gap:4rem!important; }
}
@media (max-width:620px){
  .row-2{ grid-template-columns:1fr!important; }
}