/* ============================================================
   BÖLÜM: base  (eski: css/base.css)
   ============================================================ */
/* ============================================================
   BOLÇİ · base
   Reset + tasarım token'ları + GLOBAL CONTAINER SİSTEMİ

   Projede hazır bir container sistemi (Bootstrap / Tailwind /
   site-grid) bulunmadığı için tek ve yeniden kullanılabilir
   `.site-container` burada tanımlanır. Header ve hero
   AYNI container'ı miras alır — hizalama buradan gelir.
   ============================================================ */

:root{
  /* ——— CONTAINER (§2) ——— */
  --container-max   : 1440px;
  --container-gutter: clamp(20px, 4vw, 64px);

  /* container'ın gerçek genişliği — breakout hesabı buna dayanır */
  --container-width : min(
                        calc(100% - (var(--container-gutter) * 2)),
                        var(--container-max)
                      );

  /* container'ın SOL/SAĞ kenarının ekrana uzaklığı.
     Tam genişlikte konumlanan öğeler (filigran, künye, mutlak
     yerleşen küçük parçalar) hizayı buradan alır — böylece
     container dışındakiler de aynı kenara oturur. */
  --container-edge  : max(
                        var(--container-gutter),
                        calc((100vw - var(--container-max)) / 2)
                      );

  /* Solunda dikey çizgi olan metin bloklarının girintisi.
     Craft, koleksiyon, hikâye ve anatomi bölümlerinde aynı motif
     farklı ölçülerle kullanılıyordu; tek kaynağa bağlandı. */
  --rule-gap        : clamp(20px, 2vw, 34px);

  /* ——— MARKA PALETİ · yalnızca iki ana renk ——— */
  --brand-coral:#D47F61;
  --brand-brown:#2B1A14;

  /* açık yüzeyler */
  --parchment:#F6F1E8;   /* açık bölümlerin zemini */
  --sand-100:#FCF9F3;
  --sand-200:#F6F1E8;
  --sand-300:#E8DFD1;

  /* açık ↔ koyu bölüm sınırındaki yumuşama payı */
  --fade-h:clamp(46px,5vw,96px);

  /* ara tonlar */
  --caramel :var(--brand-coral);
  --clay    :var(--brand-coral);
  --cocoa   :var(--brand-brown);
  --cocoa-900:var(--brand-brown);

  --accent      :var(--brand-coral);
  --accent-deep :var(--brand-brown);
  --accent-light:var(--brand-coral);
  --accent-soft :rgba(212,127,97,.16);
  --on-accent   :#FFFFFF;

  /* Eski değişken adları korunuyor; renkleri artık çikolata/mercan. */
  --surface-green      :var(--brand-brown);
  --surface-green-deep :var(--brand-brown);
  --bronze  :var(--brand-coral);
  --bronze-soft:rgba(212,127,97,.42);
  --gold-pale:var(--brand-coral);

  /* mürekkep */
  --ink     :var(--brand-brown);
  --ink-soft:var(--brand-brown);
  --cream   :#F8F4EC;

  /* ——— KOYU YÜZEYLER ——— */
  --surface-1:var(--brand-brown);
  --surface-2:var(--brand-brown);
  --surface-3:var(--brand-brown);
  --on-dark  :#F8F3E9;
  --on-dark-soft:rgba(248,243,233,.7);
  --glow-warm:rgba(212,127,97,.28);
  /* ——— TİPOGRAFİ · yalnızca iki aile ———
     Resmî metin: Inter. Dekoratif vurgu: Italianno. */
  --font-body    :"Inter","Segoe UI",system-ui,sans-serif;
  --font-official:var(--font-body);
  --font-accent  :"Italianno","Segoe Script",cursive;
  --font-display :var(--font-official);
  --font-ui      :var(--font-body);

  /* ——— HAREKET ——— */
  --ease-out :cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

html,body{
  margin:0;
  min-height:100%;
  /* beyaz yok — sıcak ortam (§9) */
  background:var(--sand-200);
}

body{
  font-family:var(--font-body);
  font-weight:400;
  color:var(--ink-soft);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* yatay taşma güvenliği (§30) — clip, scroll konteyneri yaratmaz */
  overflow-x:clip;
}

button,
input,
select,
textarea{
  font-family:var(--font-body);
}

img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,p{ margin:0; }

svg{ fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }

/* ——— TÜRKÇE TİPOGRAFİ GÜVENLİĞİ (§11) ———
   1) Cormorant Garamond varsayılan olarak OLDSTYLE rakam kullanır:
      "43" gibi sayılarda 4 alta sarkar, rakamlar hizasız görünür.
      Başlıklarda daima lining (versal) rakam zorlanır.
   2) Diakritikler (ş ç ğ ı İ Ö Ü) düşük line-height'ta üst satırın
      kuyruğuyla çakışır — başlık line-height'ları .92 altına inmez. */
h1,h2,h3,h4,h5,h6,strong,b{
  font-variant-numeric:lining-nums proportional-nums;
  font-feature-settings:"lnum" 1;
}

/* Resmî başlıklarda okunaklı Inter ağırlığı korunur. */
h1,h2,h3,h4,
.hero-headline,
.hero-facts dd,
.qa__card h3,
.value-card__body h3,
.product-card__body h3{
  font-weight:400;
}

/* İkinci font yalnızca vurgu kelimelerinde kullanılır. Paragraf,
   açıklama, menü, buton ve bilgi kartları daima resmî fonttadır. */
.home-page h1 em,
.home-page h2 em,
.home-page h3 em{
  font-family:var(--font-accent);
  font-size:1.18em;
  font-style:normal;
  font-weight:400;
  line-height:.8;
  letter-spacing:.01em;
}

::selection{ background:var(--cocoa); color:var(--cream); }

:focus-visible{ outline:2px solid var(--bronze); outline-offset:4px; border-radius:2px; }


/* ════════════════════════════════════════════════════════════
   SITE CONTAINER — tek kaynak (§2, §5)
   Header ve hero bunu paylaşır, bu yüzden logonun sol kenarı
   eyebrow / başlık / metin / CTA ile aynı hizadadır.
   ════════════════════════════════════════════════════════════ */
.site-container{
  width:var(--container-width);
  margin-inline:auto;
}


/* ════════════════════════════════════════════════════════════
   INTRO ENTEGRASYONU (§24)
   Hero her zaman render edilir ve görselleri hemen iner;
   yalnızca giriş animasyonu bekletilir.
   ════════════════════════════════════════════════════════════ */
body.intro-active{ overflow:hidden; }

/* giriş animasyonu oynayacaksa başlangıç durumu JS ile kurulur;
   JS yoksa içerik olduğu gibi görünür (progressive enhancement) */


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   BÖLÜM: intro  (eski: css/intro.css)
   ============================================================ */
/* Higgsfield opening film: original logo over a full-resolution video. */
.bolci-intro{
  position:fixed;inset:0;z-index:99999;overflow:hidden;
  display:grid;place-items:center;background:#f7ead7;color:#51301f;
  opacity:1;visibility:visible;transition:opacity .7s ease,visibility .7s;
}
.bolci-intro__film{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;pointer-events:none;
}
.bolci-intro__brand{
  position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:center;width:min(88vw,520px);text-align:center;
  opacity:0;transform:translateY(12px);
  transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1);
}
.bolci-intro.is-started .bolci-intro__brand{opacity:1;transform:none}
.bolci-intro__logo{width:clamp(170px,18vw,240px);height:auto}
.bolci-intro__brand>span{
  margin-top:20px;font:500 clamp(11px,1vw,14px)/1.3 var(--font-ui);
  letter-spacing:.22em;color:#51301f;
}
.bolci-intro__brand small{
  margin-top:10px;font:500 10px/1.3 var(--font-ui);letter-spacing:.18em;color:#805a40;
}
.bolci-intro__brand>i{width:38px;height:1px;margin:23px 0;background:#b8936b}
.bolci-intro__brand em{
  font:400 9px/1.5 var(--font-ui);font-style:normal;letter-spacing:.13em;color:#805a40;
}
.bolci-intro__skip{
  position:absolute;z-index:2;right:max(24px,env(safe-area-inset-right));
  bottom:max(24px,env(safe-area-inset-bottom));padding:11px 17px;
  border:1px solid rgba(247,234,215,.55);border-radius:30px;
  background:rgba(47,24,13,.55);color:#fff4e5;
  font:400 11px/1.2 var(--font-ui);letter-spacing:.04em;cursor:pointer;
  transition:background .2s;
}
.bolci-intro__skip:hover{background:rgba(47,24,13,.85)}
.bolci-intro__skip:focus-visible{outline:2px solid #fff4e5;outline-offset:4px}
.bolci-intro.is-covering .bolci-intro__brand{opacity:0;transform:translateY(-12px);transition-duration:.4s}
.bolci-intro.is-revealing{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:600px){
  .bolci-intro__logo{width:190px}
  .bolci-intro__brand>span{font-size:11px}
  .bolci-intro__skip{right:18px;bottom:max(18px,env(safe-area-inset-bottom))}
}
@media(max-height:540px){.bolci-intro__brand{scale:.72}}
@media(prefers-reduced-motion:reduce){.bolci-intro{display:none}}

/* ============================================================
   BÖLÜM: header  (eski: css/header.css)
   ============================================================ */
/* ============================================================
   BOLÇİ · HeroHeader
   Hero ile AYNI `.site-container`ı kullanır (§5).
   Kendi padding-left/right'ı YOKTUR.
   ============================================================ */

/* Sabit üst menü — kaydırma yönüne göre gizlenip görünür.
   Sınıfları js/header-scroll.js yönetir. */
.bolci-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:60;
  flex:0 0 auto;
  background:transparent;
  border-top:0;
  transition:transform .5s var(--ease-out), box-shadow .35s ease, background .35s ease;
  will-change:transform;
}
/* aşağı kaydırırken yukarı çekilir */
.bolci-header.is-hidden{ transform:translateY(-100%); }
/* sayfa kaydıysa hafif gölge — menü içerikten ayrılsın */
/* (eski katı bar kuralı kaldırıldı — menü artık her zaman şeffaf) */

/* menü akıştan çıktığı için üstte onun kadar yer ayrılır.
   --header-h'i JS ölçer; JS yoksa bu yedek değer kullanılır. */
:root{ --header-h:clamp(78px,6.2vw,104px); }   /* JS ölçene kadar geçerli yedek — .bolci-header__inner ile aynı */
body.page{ padding-top:var(--header-h); }
.bolci-hero{ padding-top:var(--header-h); }

.bolci-header__inner{
  display:flex;
  align-items:center;
  gap:clamp(16px, 2.4vw, 44px);
  /* menü yüksekliği düşürüldü — 158px başlık bandı çok yer kaplıyordu */
  min-height:clamp(78px,6.2vw,104px);
}
.bolci-header::after{
  display:none;
}

/* ————— marka ————— */
.brand{
  flex:0 0 auto;
  display:grid;
  justify-items:start;
  gap:clamp(1px, .28vw, 5px);
  color:var(--ink);
  /* Logo, container'ın sol kenarında başlar — hero metni, iç sayfa
     başlıkları, bölüm metinleri ve footer ile aynı dikey çizgide.
     Site genelinde tek hiza çizgisi vardır: .site-container kenarı. */
}
/* Kurumsal logo (assets/img/logo.png · 640×399, şeffaf PNG) */
.brand__logo{
  display:block;
  width:auto;
  height:clamp(46px, 3.9vw, 70px);
}

/* metin logo (yedek — artık kullanılmıyor) */
.brand__word{
  position:relative;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(30px, 3.1vw, 58px);
  line-height:1.12;
  letter-spacing:-.01em;
  padding-right:.24em;
}
.brand__leaf{
  position:absolute;
  right:-.1em; top:-.06em;
  width:.4em; height:auto;
  fill:var(--bronze);
  stroke:none;
  transform:rotate(-6deg);
}
.brand__leaf-vein{ fill:none; stroke:var(--sand-200); stroke-width:2.6; }

.brand__sub{
  margin-top:6px;
  font-size:clamp(10px, .7vw, 12px);
  font-weight:400;
  letter-spacing:.14em;
  color:var(--cocoa);
}
.brand__year{
  display:flex; align-items:center; gap:.7em;
  font-size:clamp(10px, .7vw, 12px);
  font-weight:400;
  letter-spacing:.12em;
  color:var(--bronze);
}
.brand__year i{ width:.46em; height:.46em; border-radius:50%; background:currentColor; }

/* ————— navigasyon ————— */
.bolci-nav{
  flex:1 1 auto;
  display:flex;
  justify-content:center;
}
.bolci-nav ul{
  display:flex;
  gap:clamp(14px, 2.6vw, 52px);
}
.bolci-nav a{
  position:relative;
  display:inline-block;
  padding:.45em 0;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(15px, 1.15vw, 21px);
  color:var(--ink);
  white-space:nowrap;
  transition:color .3s var(--ease-soft);
}
.bolci-nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:.22em;
  height:1px;
  background:var(--bronze);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.bolci-nav a:hover{ color:var(--cocoa); }
.bolci-nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ————— açılır alt menü —————
   JS yok: masaüstünde :hover / :focus-within ile açılır, mobilde
   iç içe liste olarak zaten görünür. Böylece klavye de çalışır. */
.bolci-nav .has-sub{ position:relative; }
.bolci-nav .has-sub > a::before{
  content:"";
  position:absolute;
  right:-14px; top:50%;
  width:5px; height:5px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:translateY(-70%) rotate(45deg);
  opacity:.55;
  transition:transform .3s var(--ease-out);
}
.bolci-nav .has-sub:hover > a::before,
.bolci-nav .has-sub:focus-within > a::before{ transform:translateY(-20%) rotate(-135deg); }

/* .bolci-nav ul{display:flex} bu listeyi de yakalıyor ve maddeleri
   yan yana diziyordu. Seçici oradan daha güçlü olmalı: */
.bolci-nav .bolci-subnav{
  display:block;
  gap:0;
}
.bolci-subnav{
  position:absolute;
  top:100%;
  left:50%;
  z-index:5;
  min-width:250px;
  padding:14px 0;
  background:var(--sand-100);
  border:1px solid var(--bronze-soft);
  box-shadow:0 26px 54px rgba(58,33,16,.16);
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,10px);
  transition:opacity .3s ease, transform .35s var(--ease-out), visibility .3s;
}
.bolci-nav .has-sub:hover > .bolci-subnav,
.bolci-nav .has-sub:focus-within > .bolci-subnav{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}
.bolci-subnav li{ display:block; }
.bolci-subnav a{
  display:block;
  padding:10px clamp(20px,1.8vw,30px);
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:400;
  letter-spacing:.06em;
  white-space:nowrap;
  color:var(--ink-soft);
}
.bolci-subnav a::after{ display:none; }
.bolci-subnav a:hover{ background:var(--sand-200); color:var(--ink); }

/* ————— alışverişe başla ————— */
.nav-cta{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  padding:13px clamp(16px,1.5vw,26px);
  border:1px solid var(--bronze);
  border-radius:3px;
  background:var(--cocoa-900);
  color:var(--cream);
  font-size:clamp(10px,.7vw,12px);
  font-weight:500;
  letter-spacing:.1em;
  white-space:nowrap;
  transition:background .35s var(--ease-soft), transform .35s var(--ease-out);
}
.nav-cta:hover{ background:var(--cocoa); transform:translateY(-2px); }

/* ————— sağ aksiyonlar ————— */
.bolci-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:clamp(8px, 1.5vw, 26px);
}
.action{
  position:relative;
  display:grid; place-items:center;
  width:clamp(30px, 2.2vw, 40px);
  height:clamp(30px, 2.2vw, 40px);
  color:var(--ink);
  transition:color .3s var(--ease-soft), transform .3s var(--ease-out);
}
.action svg{ width:100%; height:100%; stroke-width:1.15; }
.action:hover{ color:var(--cocoa); transform:translateY(-2px); }

.action__count{
  position:absolute; right:-.38em; bottom:-.14em;
  width:1.5em; height:1.5em;
  display:grid; place-items:center;
  font-size:clamp(10px, .7vw, 12px);
  font-weight:400;
  border:1px solid var(--bronze-soft);
  border-radius:50%;
  background:var(--sand-100);
  color:var(--cocoa);
}

/* ————— mobil menü tetikleyici (§23) ————— */
.menu-trigger{
  display:none;
  width:38px; height:38px;
  padding:11px 7px;
  flex-direction:column;
  justify-content:space-between;
}
.menu-trigger i{
  height:1.4px;
  background:var(--ink);
  transition:transform .4s var(--ease-out), opacity .3s;
}
.menu-trigger[aria-expanded="true"] i:nth-child(1){ transform:translateY(7.3px) rotate(45deg); }
.menu-trigger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.menu-trigger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-7.3px) rotate(-45deg); }


/* ════════ TABLET ════════ */
@media (max-width:1199px){
  .bolci-nav ul{ gap:clamp(12px, 2vw, 30px); }
  .bolci-nav a{ font-size:clamp(14px, 1.5vw, 18px); }
}

/* ════════ MOBİL (§23) ════════
   Masaüstü menüsü küçültülmez — tamamen gizlenir,
   yerine açılır panel gelir. */
@media (max-width:767px){
  .bolci-header__inner{ justify-content:space-between; }

  .action--account{ display:none; }
  .menu-trigger{ display:flex; }

  .bolci-nav{
    position:absolute;
    left:0; right:0; top:100%;
    z-index:40;
    display:block;
    background:var(--sand-100);
    border-bottom:1px solid var(--bronze-soft);
    max-height:0;
    overflow:hidden;
    transition:max-height .45s var(--ease-out);
  }
  .bolci-nav.is-open{ max-height:70svh; }
  .bolci-nav ul{
    flex-direction:column;
    gap:0;
    width:var(--container-width);
    margin-inline:auto;
    padding:4px 0 16px;
  }
  .bolci-nav a{
    display:block;
    padding:14px 0;
    font-size:20px;
    border-bottom:1px solid rgba(168,123,74,.16);
  }
  .bolci-nav a::after{ display:none; }

  /* alt menü mobilde açılır panel değil — girintili liste */
  .bolci-nav .has-sub > a::before{ display:none; }
  .bolci-nav .bolci-subnav{ display:block; }
  .bolci-subnav{
    position:static;
    min-width:0;
    padding:0 0 6px 18px;
    border:0;
    background:none;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .bolci-subnav a{
    padding:11px 0;
    font-size:15px;
    border-bottom:1px solid rgba(168,123,74,.12);
  }
  .bolci-subnav a:hover{ background:none; }

  .nav-cta{ display:none; }        /* mobilde menü panelinde sunulur */
  .bolci-nav .nav-cta--mobile{
    display:inline-flex;
    margin:16px 0 4px;
    border-bottom:0;
  }
}

/* masaüstünde mobil kopyası görünmez */
@media (min-width:768px){
  .bolci-nav .nav-cta--mobile{ display:none; }
}

/* ════════════════════════════════════════════════════════════
   ŞEFFAF ÜST MENÜ
   ------------------------------------------------------------
   Hero artık tam ekran koyu fotoğraf; üstünde krem bir bar
   durunca tasarım bölünüyordu. Menü sayfanın en üstündeyken
   ŞEFFAF ve açık renkli, kaydırma başlayınca KATI ve koyu
   metinli hâle geçer. Sınıfı header-scroll.js yönetir.
   ════════════════════════════════════════════════════════════ */

.bolci-header{
  background:transparent;
  border-top:0;
  -webkit-backdrop-filter:none;
          backdrop-filter:none;
}
.bolci-header__inner{ border-bottom:0; }

/* şeffafken: açık renkli yazı */
.bolci-nav a,
.action{ color:#F8F3E9; }
.bolci-nav a::after{ background:var(--gold-pale); }
.bolci-nav a:hover{ color:var(--gold-pale); }
.menu-trigger i{ background:#F8F3E9; }

/* iki logo: şeffafken krem, katıyken kahverengi */
.brand{ position:relative; }
.brand__logo--dark{
  position:absolute;
  inset:0 auto auto 0;
  opacity:0;
}
.brand__logo--light,
.brand__logo--dark{ transition:opacity .3s ease-out; }

/* ————— kaydırınca —————
   ZEMİN YOK. Menü her durumda şeffaf kalır; yalnızca yazı rengi
   değişir çünkü altındaki bölümler açık zeminli. Zemin, gölge ve
   blur tamamen kaldırıldı. */
.bolci-header.is-stuck{
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
          backdrop-filter:none;
}
.bolci-header.is-stuck .bolci-header__inner{ border-bottom-color:transparent; }
.bolci-header.is-stuck .bolci-nav a,
.bolci-header.is-stuck .action{ color:var(--ink); }
.bolci-header.is-stuck .bolci-nav a:hover{ color:var(--accent); }
.bolci-header.is-stuck .bolci-nav a::after{ background:var(--accent); }
.bolci-header.is-stuck .menu-trigger i{ background:var(--ink); }
.bolci-header.is-stuck .brand__logo--light{ opacity:0; }
.bolci-header.is-stuck .brand__logo--dark{ opacity:1; }

/* açılır alt menü katı barla aynı dilde */
.bolci-subnav{
  background:rgba(250,247,241,.97);
  border-color:rgba(169,124,67,.28);
  -webkit-backdrop-filter:blur(12px);
          backdrop-filter:blur(12px);
}
.bolci-subnav a{ color:var(--ink-soft); }
.bolci-subnav a:hover{ background:var(--sand-200); color:var(--accent); }

/* mobil açılır panel */
@media (max-width:767px){
  .bolci-nav{ background:rgba(250,247,241,.98); }
  .bolci-nav a{ color:var(--ink); }
  .bolci-nav a:hover{ color:var(--accent); }
}

/* Ana sayfanın ilk ekranında logo hero metninin parçasıdır.
   Header yalnızca ortalanmış menü + sağ aksiyondan oluşur.
   Hero geçildiğinde `is-stuck` ile eski solda-logo düzeni döner. */
@media (min-width:768px){
  .home-page .bolci-header:not(.is-stuck) .bolci-header__inner{
    position:relative;
    justify-content:center;
  }
  .home-page .bolci-header:not(.is-stuck) .brand{
    width:0;
    min-width:0;
    overflow:hidden;
    opacity:0!important;
    visibility:hidden;
    pointer-events:none;
  }
  .home-page .bolci-header:not(.is-stuck) .bolci-nav{
    position:absolute;
    left:50%;
    flex:none;
    transform:translateX(-50%);
  }
  .home-page .bolci-header:not(.is-stuck) .bolci-actions{
    position:absolute;
    right:0;
  }
}

/* Hero üzerinde zemin yoktur. Video bittikten sonra header eski
   açık renkli yapısına döner; koyu bölümlerde de okunur kalır. */
.home-page .bolci-header.is-stuck{
  background:rgba(248,242,232,.96);
  border-bottom:1px solid rgba(155,101,45,.2);
  box-shadow:0 10px 34px rgba(31,14,7,.1);
  -webkit-backdrop-filter:blur(14px);
          backdrop-filter:blur(14px);
}
.home-page .bolci-header.is-hidden{ transform:none; }

/* ============================================================
   BÖLÜM: hero  (eski: css/hero.css)
   ============================================================ */
.bolci-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:max(760px,100svh);color:#32170d;background:#efe0ca}
.bolci-hero::after{display:none}
.bolci-hero__background,.hero-bg__slides,.hero-slide{position:absolute;inset:0}.bolci-hero__background{z-index:0;overflow:hidden;pointer-events:none}.hero-bg__wash{position:absolute;inset:0;background:#efe0ca}.hero-bg__slides{z-index:1;top:var(--header-h)}
/* Görsel cover değil, yüksekliğe göre ölçeklenir: ürünlerin üstü ve altı kırpılmaz. */
.hero-slide{background-size:100% 100%;background-position:center;background-repeat:no-repeat;filter:none;transform:none}
/* Sol metin paneli: sıcak krem kâğıt, ince iç çerçeve ve kemerli birleşim. */
.hero-bg__veil{position:absolute;top:var(--header-h);bottom:0;left:0;width:40.5%;z-index:2;background:radial-gradient(circle at 22% 24%,rgba(255,252,244,.75),transparent 36%),linear-gradient(112deg,rgba(248,237,220,.99),rgba(239,219,193,.98));border-right:1px solid rgba(181,126,55,.72);box-shadow:12px 0 32px rgba(68,34,15,.08)}
.hero-bg__veil::before{content:"";position:absolute;inset:15px;border:1px solid rgba(174,119,52,.36);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.055'/%3E%3C/svg%3E");box-shadow:inset 0 0 45px rgba(132,83,35,.06)}
.hero-bg__veil::after{content:"";position:absolute;top:-1px;right:-17%;width:34%;height:118%;border:2px solid rgba(181,126,55,.54);border-right:0;border-radius:52% 0 0 52% / 48% 0 0 48%}
.hero-bg__texture{position:absolute;inset:0;z-index:6;opacity:.08;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E")}
.hero-chocolate{position:absolute;z-index:3;right:-3%;bottom:-18%;width:37%;height:45%;overflow:hidden;opacity:.3;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(ellipse at 70% 70%,#000,rgba(0,0,0,.86) 38%,transparent 76%);mask-image:radial-gradient(ellipse at 70% 70%,#000,rgba(0,0,0,.86) 38%,transparent 76%)}.hero-chocolate video{width:100%;height:100%;object-fit:cover;filter:sepia(.3) saturate(1.25) contrast(1.18) brightness(.58);transform:scale(1.12)}
.bolci-hero__container{position:relative;z-index:10;flex:1 1 auto;display:flex;align-items:center;padding:clamp(48px,4vw,72px) 0 clamp(112px,9vw,142px)}.hero-copy{width:min(31vw,520px);margin-left:0;transform:translateY(-1%);color:#32170d;text-shadow:none}
.hero-eyebrow{display:flex;align-items:center;gap:16px;margin:0 0 22px;color:#9b652d;font:500 clamp(9px,.67vw,12px)/1 var(--font-ui);letter-spacing:.12em}.hero-eyebrow i{width:40px;height:1px;background:rgba(155,101,45,.56)}
.hero-headline{margin:0;color:#32170d;font-family:var(--font-display);font-weight:500;font-size:clamp(50px,4.05vw,74px);line-height:.9;letter-spacing:-.04em}.hero-headline__line{display:block;overflow:visible;padding:.07em 0;white-space:nowrap}.hero-headline__line em{display:block;font-style:normal}.hero-headline__line:last-child{color:#32170d}
.hero-copy__ornament{display:flex;align-items:center;gap:9px;width:min(240px,100%);margin:20px 0 18px;color:#a56b2c}.hero-copy__ornament i{height:1px;flex:1;background:currentColor;opacity:.65}.hero-copy__ornament b{font-size:18px;font-weight:400}.hero-copy__lead{max-width:440px;margin:0;color:rgba(50,23,13,.84);font:400 clamp(17px,1.2vw,22px)/1.55 var(--font-display)}
.hero-controls{position:absolute;left:0;bottom:clamp(84px,7.4vw,124px);z-index:12;display:flex}.hero-dots{display:none}.hero-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;min-width:330px;padding:21px 30px;background:linear-gradient(105deg,#401609,#652b13);border:1px solid #a66d2e;outline:1px solid rgba(166,109,46,.45);outline-offset:3px;border-radius:2px;color:#f2d8b4;font:500 clamp(13px,.92vw,17px)/1 var(--font-display);letter-spacing:.15em;box-shadow:0 12px 28px rgba(54,22,8,.2);transition:.35s}.hero-cta:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(54,22,8,.28)}.hero-cta svg{width:36px;stroke:currentColor;fill:none}
.hero-marquee,.hero-scroll-cue,.hero-product-cut,.hero-bg__arch{display:none!important}
.hero-bg__veil,.hero-bg__texture,.hero-chocolate{display:none!important}
@media(max-width:1199px){.hero-bg__veil{width:42%}.hero-copy{width:32vw;margin-left:0}.hero-controls{left:0}.hero-headline{font-size:clamp(44px,3.9vw,60px)}.hero-chocolate{width:42%}}
@media(max-width:899px){.bolci-hero{min-height:780px}.hero-bg__veil{width:58%}.hero-bg__veil::after{opacity:.35}.hero-copy{width:min(48vw,520px);margin-left:0}.hero-headline__line{white-space:normal}.hero-chocolate{display:none}}
@media(prefers-reduced-motion:reduce){.hero-chocolate{display:none}}

/* ————— giriş ışığı —————
   Açılışta hero'nun üzerinden bir kez geçen sıcak parıltı.
   Öğeyi js/hero-motion.js oluşturur, animasyon bitince siler. */
.hero-sweep{
  position:absolute;
  inset:0 auto 0 0;
  z-index:9;
  width:48%;
  pointer-events:none;
  background:linear-gradient(105deg,
    transparent 0%,
    rgba(255,241,214,.3) 38%,
    rgba(255,248,231,.55) 52%,
    rgba(255,241,214,.26) 66%,
    transparent 100%);
  filter:blur(20px);
  mix-blend-mode:soft-light;
}

/* ════════════════════════════════════════════════════════════
   KURUMSAL HERO KATMANI
   Sayfa bir alışveriş vitrini değil, kurumsal tanıtım.
   Bu yüzden hero'da tek bir "keşfet" düğmesi yerine:
     · kimlik bildiren eyebrow
     · künye şeridi (kuruluş · üretim · çeşit · ihracat)
     · biri dolu biri kontur iki yönlendirme
   ════════════════════════════════════════════════════════════ */

/* ————— künye şeridi ————— */
/* Esnek dizilimde öğeler içeriğe göre farklı genişlikte kalıyor,
   şerit hizasız görünüyordu. Eşit sütunlu ızgara + ayırıcı çizgi:
   etiketler ve değerler her sütunda aynı hizadan başlar. */
.hero-facts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:min(100%,540px);
  margin:clamp(26px,2.6vw,40px) 0 0;
  padding-top:clamp(20px,2vw,30px);
  border-top:1px solid rgba(155,101,45,.34);
}
.hero-facts > div{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-inline:clamp(10px,1.2vw,20px);
  border-left:1px solid rgba(216,182,129,.22);
}
.hero-facts > div:first-child{
  padding-left:0;
  border-left:0;
}
.hero-facts dt{
  color:#9b652d;
  font:500 11px/1 var(--font-ui);
  letter-spacing:.1em;
  white-space:nowrap;
}
.hero-facts dd{
  margin:0;
  color:#32170d;
  font-family:var(--font-display);
  font-size:clamp(16px,1.25vw,22px);
  font-weight:600;
  line-height:1.1;                 /* Türkçe diakritik güvenliği */
  letter-spacing:-.005em;
  white-space:nowrap;
  /* rakamlar eşit yükseklikte ve eşit genişlikte dizilsin */
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}

/* ————— ikinci yönlendirme · kontur ————— */
.hero-controls{ gap:clamp(10px,1.2vw,18px); align-items:center; }
/* Buton biçimleri ui.css'te tek yerden yönetilir — buradaki
   eski .hero-cta--ghost kuralları kaldırıldı. */

@media (max-width:899px){
  .hero-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:18px; max-width:340px; }
  .hero-facts > div:nth-child(3){ padding-left:0; border-left:0; }
  .hero-facts dd{ font-size:16px; }
}

/* ════════════════════════════════════════════════════════════
   KOYU HERO GÖRSELİ · okunabilirlik
   Yeni hero fotoğrafı koyu; metin renkleri ise eski açık krem
   panele göre ayarlanmıştı (koyu kahve yazı) — fotoğrafın
   üzerinde tamamen kayboluyordu. Sol tarafa karartma perdesi
   serilir, yazılar krem/altın tona çevrilir.
   ════════════════════════════════════════════════════════════ */
.bolci-hero__background::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(16,9,4,.94) 0%,
      rgba(18,10,5,.86) 22%,
      rgba(20,11,6,.55) 42%,
      rgba(20,11,6,.12) 60%,
      transparent 74%),
    linear-gradient(0deg,rgba(16,9,4,.5),transparent 34%);
}

.hero-eyebrow{ color:var(--gold-pale); }
.hero-eyebrow i{ background:rgba(216,182,129,.55); }

.hero-headline,
.hero-headline__line:last-child{
  color:var(--on-dark);
  text-shadow:0 2px 6px rgba(0,0,0,.6),0 14px 44px rgba(0,0,0,.55);
}

.hero-copy__ornament{ color:var(--gold-pale); }

.hero-copy__lead{
  color:rgba(252,243,228,.86);
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}

.hero-facts{ border-top-color:rgba(216,182,129,.3); }
.hero-facts dt{ color:var(--gold-pale); }
.hero-facts dd{
  color:var(--on-dark);
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}

/* ════════════════════════════════════════════════════════════
   HERO · TAM EKRAN FOTOĞRAF DÜZENİ
   ------------------------------------------------------------
   Referans mantığı: tek dramatik ürün fotoğrafı tüm ekranı
   kaplar, metin ayrı bir panel içinde değil doğrudan fotoğrafın
   KARANLIK kısmında durur, başlık iri ve sıkı.

   Fotoğraf zaten sol üçte biri siyah bırakacak şekilde üretildi;
   bu yüzden ağır bir perde gerekmiyor, hafif bir derinleştirme
   yetiyor.
   ════════════════════════════════════════════════════════════ */

/* fotoğraf ekranı doldursun (eski: 100% 100% gerdirme) */
.hero-slide{
  background-size:cover;
  background-position:center right;
}

/* perde: yalnızca sol tarafı bir tık derinleştirir */
.bolci-hero__background::after{
  background:
    linear-gradient(90deg,
      rgba(6,3,2,.72) 0%,
      rgba(8,4,3,.5) 26%,
      rgba(10,5,3,.16) 46%,
      transparent 62%),
    linear-gradient(0deg,rgba(6,3,2,.6),transparent 38%);
}

/* içerik alta hizalanır */
.bolci-hero__container{
  align-items:flex-end;
  padding-block:0 clamp(40px,4.6vw,74px);
}
.hero-copy{
  width:min(56vw,760px);
  margin-left:0;
  transform:none;
}

.hero-eyebrow{
  gap:0;
  margin-bottom:clamp(14px,1.4vw,22px);
  color:var(--gold-pale);
  font-size:clamp(10px,.78vw,12px);
  letter-spacing:.16em;
}
.hero-eyebrow i{ display:none; }

/* Başlık: referanstaki ağırlık serif değil, KALIN SANS.
   Iri, sıkı ve iki satır. */
.hero-headline{
  margin:0;
  font-family:var(--font-ui);
  font-weight:600;
  font-size:clamp(40px,6.2vw,104px);
  line-height:.94;
  letter-spacing:-.035em;
  color:#FBF6EE;
  text-shadow:0 2px 8px rgba(0,0,0,.55),0 18px 60px rgba(0,0,0,.5);
}
.hero-headline__line{
  display:block;
  padding:0;
  white-space:nowrap;
}
.hero-headline__line em{ font-style:normal; }

.hero-copy__ornament{ display:none; }

.hero-copy__lead{
  max-width:46ch;
  margin:clamp(18px,1.8vw,26px) 0 0;
  color:rgba(251,246,238,.72);
  font-family:var(--font-ui);
  font-size:clamp(14px,1.02vw,17px);
  line-height:1.7;
}

/* butonlar metnin hemen altında (mutlak konum kalktı) */
.hero-controls{
  position:static;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:clamp(26px,2.6vw,40px);
}

/* künye: sağ altta ince satır */
.hero-facts{
  position:absolute;
  right:0;
  bottom:clamp(40px,4.6vw,74px);
  grid-template-columns:repeat(4,auto);
  max-width:none;
  margin:0;
  padding:0;
  border:0;
  gap:clamp(16px,2vw,34px);
  text-align:right;
}
.hero-facts > div{
  padding:0 0 0 clamp(16px,2vw,34px);
  border-left:1px solid rgba(216,182,129,.24);
  gap:6px;
}
.hero-facts > div:first-child{ padding-left:0; border-left:0; }
.hero-facts dt{ font-size:9px; letter-spacing:.14em; color:rgba(216,182,129,.75); }
.hero-facts dd{
  font-family:var(--font-ui);
  font-size:clamp(13px,1vw,16px);
  font-weight:500;
  color:rgba(251,246,238,.9);
}

/* sosyal · sağ üst köşe değil, künyenin üstünde */
.hero-social{
  position:absolute;
  right:0;
  bottom:calc(clamp(40px,4.6vw,74px) + 74px);
  display:flex;
  gap:12px;
}
.hero-social a{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid rgba(216,182,129,.32);
  border-radius:50%;
  color:var(--gold-pale);
  transition:background .2s ease-out, color .2s ease-out, border-color .2s ease-out;
}
.hero-social a:hover{
  background:var(--gold-pale);
  border-color:var(--gold-pale);
  color:#231308;
}
.hero-social svg{ width:17px; height:17px; stroke-width:1.5; }

@media (max-width:1100px){
  .hero-facts{ position:static; margin-top:clamp(30px,4vw,48px); text-align:left; }
  .hero-social{ display:none; }
  .hero-copy{ width:min(78vw,640px); }
}
@media (max-width:700px){
  .hero-headline__line{ white-space:normal; }
  .hero-facts{ grid-template-columns:repeat(2,1fr); row-gap:16px; }
  .hero-facts > div:nth-child(3){ padding-left:0; border-left:0; }
}

/* menü artık şeffaf: hero fotoğrafı onun ALTINA uzanır.
   header.css'teki `.bolci-hero{ padding-top:var(--header-h) }`
   kuralı burada iptal edilir; içerik zaten alta hizalı. */
.bolci-hero{ padding-top:0; }

/* Fotoğraf menünün ALTINA kadar uzansın.
   Eski düzende slider `top:var(--header-h)` ile başlıyordu (menü
   opak bir bar olduğu için mantıklıydı). Menü şeffaflaşınca üstte
   fotoğrafsız bir şerit kaldı ve orada gövdenin krem zemini
   görünüyordu — ekranın tepesindeki açık bant buydu. */
.hero-bg__slides{ top:0; }
.hero-bg__wash{ background:#0B0705; }

/* ════════════════════════════════════════════════════════════
   AKAN ÇİKOLATA HERO · merkez kompozisyon
   Video bütün ilk ekranı kaplar; içerik hiçbir köşeye yaslanmaz.
   ════════════════════════════════════════════════════════════ */
.hero-bg__video{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(1.03) contrast(1.03) brightness(.94);
  transform:scale(1.025);
}

.bolci-hero__background::after{
  z-index:4;
  background:
    radial-gradient(ellipse at 50% 48%,rgba(15,6,3,.4) 0%,rgba(10,4,2,.3) 38%,rgba(5,2,1,.1) 78%),
    linear-gradient(0deg,rgba(6,2,1,.42),transparent 32%,rgba(5,2,1,.3));
}

.bolci-hero__container{
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:calc(var(--header-h) + clamp(24px,3vw,46px)) 0 clamp(42px,5vw,78px);
  text-align:center;
}

.hero-copy{
  display:flex;
  width:min(92%,920px);
  margin:0;
  flex-direction:column;
  align-items:center;
  color:var(--on-dark);
}

.hero-copy__logo{
  display:block;
  width:clamp(120px,10.5vw,180px);
  height:auto;
  margin:0 auto clamp(14px,1.5vw,24px);
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.38));
}

.hero-eyebrow{
  justify-content:center;
  margin-bottom:clamp(14px,1.4vw,22px);
}

.hero-headline{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(52px,5.2vw,92px);
  line-height:.9;
  letter-spacing:-.025em;
}

.hero-headline__line{ white-space:nowrap; }
.hero-headline__line:last-child{
  margin-top:.02em;
  color:#e9bd7b;
  font-family:var(--font-accent);
  font-size:1.18em;
  font-weight:400;
  line-height:.72;
  letter-spacing:.01em;
  text-transform:none;
}

.hero-copy__lead{
  max-width:54ch;
  margin-inline:auto;
  color:rgba(255,244,226,.88);
}

.hero-controls{
  justify-content:center;
  margin-top:clamp(22px,2.2vw,34px);
}

.hero-facts{
  position:static;
  grid-template-columns:repeat(4,minmax(100px,1fr));
  width:min(720px,88%);
  margin:clamp(28px,3vw,46px) auto 0;
  padding-top:clamp(18px,1.5vw,24px);
  border-top:1px solid rgba(216,182,129,.32);
  gap:0;
  text-align:center;
}
.hero-facts > div,
.hero-facts > div:first-child{
  padding:0 clamp(12px,1.5vw,24px);
  border-left:1px solid rgba(216,182,129,.22);
}
.hero-facts > div:first-child{ border-left:0; }
.hero-social{ display:none; }

/* Önce ayrı bir geçiş bandı olan mesafe artık hero'nun parçası:
   video kesilmeden aşağıya kadar devam eder. */
.home-page .bolci-hero{
  min-height:max(900px,calc(110svh + clamp(56px,5.5vw,88px)));
}
.home-page #bolu{
  margin-top:0;
  padding-top:var(--gap-top);
}

@media (max-width:899px){
  .home-page .bolci-hero{ min-height:max(780px,100svh); }
  .hero-copy{ width:min(90%,680px); }
  .hero-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-headline__line{ white-space:normal; }
}

@media (prefers-reduced-motion:reduce){
  .hero-bg__video{ display:none; }
}

/* Banner altından sonraki bölüme geçiş bağlantısı. */
.hero-scroll-cue{
  position:relative;
  z-index:14;
  display:block!important;
  flex:0 0 auto;
  width:34px;
  height:54px;
  margin:clamp(26px,2.4vw,38px) auto 0;
  border:1.5px solid rgba(255,244,226,.82);
  border-radius:18px;
  pointer-events:auto;
  cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.26),inset 0 0 0 1px rgba(84,37,16,.16);
}
.hero-scroll-cue::before{
  content:"";
  position:absolute;
  top:11px;
  left:50%;
  width:3px;
  height:11px;
  margin-left:-1.5px;
  border-radius:3px;
  background:#fff3df;
  box-shadow:0 0 8px rgba(255,220,170,.5);
  animation:heroScrollLine 1.75s cubic-bezier(.45,0,.2,1) infinite;
}
@keyframes heroScrollLine{
  0%{ transform:translateY(0); opacity:0; }
  18%{ opacity:1; }
  68%{ opacity:1; }
  100%{ transform:translateY(18px); opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  .hero-scroll-cue::before{
    top:50%;
    animation:none;
    transform:translateY(-50%);
  }
}

/* ============================================================
   BÖLÜM: collections  (eski: css/collections.css)
   ============================================================ */
.collections{
  --collection-gap:clamp(48px,6vw,110px);
  position:relative;
  overflow:hidden;
  padding:clamp(110px,11vw,190px) 0 clamp(100px,9vw,160px);
  background:#f7f3ed;
  color:#21140f;
}
.collections::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}
.collections__intro{
  position:relative;
  display:grid;
  grid-template-columns:minmax(440px,.95fr) minmax(300px,.55fr);
  column-gap:clamp(80px,10vw,180px);
  align-items:end;
  margin-bottom:clamp(80px,8vw,130px);
}
.collections__intro > *{
  opacity:0;
  transform:translateY(42px);
  transition:opacity .8s ease, transform 1s var(--ease-out);
}
.collections.is-visible .collections__eyebrow{
  opacity:1;
  transform:none;
  transition-delay:.05s;
}
.collections.is-visible .collections__intro h2{
  opacity:1;
  transform:none;
  transition-delay:.16s;
}
.collections.is-visible .collections__lead{
  opacity:1;
  transform:none;
  transition-delay:.34s;
}
.collections__eyebrow{
  grid-column:1/-1;
  margin:0 0 24px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  color:#9c704d;
}
.collections__intro h2{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(72px,7.2vw,132px);
  font-weight:500;
  line-height:.95;
  letter-spacing:-.038em;
}
.collections__intro h2 em{
  display:inline-block;
  margin-left:clamp(50px,8vw,145px);
  color:#8a4e2f;
  font-weight:400;
}
.collections__lead{
  max-width:440px;
  margin:0 0 4px;
  font-size:clamp(16px,1.15vw,20px);
  line-height:1.8;
  color:#6e5b50;
}
.collections__stage{
  position:relative;
  min-height:650px;
  opacity:0;
  transform:translateY(70px);
  transition:opacity 1s ease, transform 1.2s var(--ease-out);
}
.collections.is-visible .collections__stage{ opacity:1; transform:none; }
.collections__side-title{
  position:absolute;
  left:var(--container-edge);
  bottom:18px;
  z-index:3;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:var(--font-ui);
  font-size:clamp(54px,5vw,88px);
  font-weight:500;
  line-height:1;
  letter-spacing:-.05em;
  color:#241712;
}
.collections__viewport{
  overflow:visible;
  width:calc(100% - max(170px,9vw));
  margin-left:max(150px,9vw);
  cursor:grab;
}
.collections__viewport.is-dragging{ cursor:grabbing; }
.collections__track{
  display:flex;
  align-items:stretch;
  gap:var(--collection-gap);
  transform:translate3d(0,0,0);
  transition:transform 1.05s var(--ease-out);
  will-change:transform;
}
.collections__viewport.is-dragging .collections__track{ transition:none; }
.collection-card{
  position:relative;
  flex:0 0 min(70vw,1100px);
  height:590px;
  opacity:.45;
  transform:scale(.94);
  /* sol kenardan ölçekleyince kartlar arası boşluk eşit görünmüyordu */
  transform-origin:center;
  transition:opacity .75s ease, transform 1s var(--ease-out);
}
.collection-card.is-current{ opacity:1; transform:scale(1); }
.collection-card__media{
  position:absolute;
  inset:0 25% 0 0;
  overflow:hidden;
  background:#d8c3b2;
}
.collection-card__media{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.25s var(--ease-out), box-shadow .7s ease;
}
.collections.is-visible .collection-card__media{
  clip-path:inset(0 0 0 0);
  transition-delay:.24s;
}
.collection-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 38%,rgba(27,12,7,.18));
  pointer-events:none;
}
.collection-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.08);
  transition:transform 1.4s var(--ease-out);
  will-change:transform;
}
.collection-card.is-current:hover .collection-card__media img{ transform:scale(1.14); }
.collection-card__glow{
  position:absolute;
  inset:-30%;
  z-index:2;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--glow-x,50%) var(--glow-y,50%),rgba(255,238,205,.8),transparent 25%);
  transition:opacity .5s ease;
}
.collection-card.is-current:hover .collection-card__glow{ opacity:.75; }
.collection-card__panel{
  position:absolute;
  top:15%;
  right:0;
  z-index:4;
  width:42%;
  min-width:420px;
  height:70%;
  padding:clamp(48px,4vw,76px) clamp(44px,4.2vw,80px);
  background:#fff;
  box-shadow:0 34px 70px rgba(42,24,16,.13);
  transition:transform .7s var(--ease-out), box-shadow .7s ease;
}
.collection-card__panel{
  opacity:0;
  transform:translateY(45px);
  transition:opacity .75s ease, transform .95s var(--ease-out), box-shadow .7s ease;
}
.collections.is-visible .collection-card__panel{
  opacity:1;
  transform:none;
  transition-delay:.58s;
}
.collection-card.is-current:hover .collection-card__panel{
  transform:translateY(-8px);
  box-shadow:0 42px 90px rgba(42,24,16,.18);
}
.collection-card__number{
  position:absolute;
  top:-62px;
  right:-4px;
  font-family:var(--font-ui);
  font-size:122px;
  font-weight:500;
  line-height:1;
  letter-spacing:-.08em;
  color:#8b3f24;
}
.collection-card h3{
  margin:0 0 20px;
  font-family:var(--font-display);
  font-size:clamp(46px,4vw,70px);
  font-weight:600;
  line-height:.98;
  letter-spacing:-.02em;
}
.collection-card__panel > p{
  max-width:320px;
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:#725e53;
}
.collection-card__link{
  position:absolute;
  left:clamp(44px,4.2vw,80px);
  bottom:50px;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.13em;
}
.collection-card__link i{
  display:block;
  width:46px;
  height:2px;
  background:#8b3f24;
  transition:width .4s var(--ease-out);
}
.collection-card__link:hover i{ width:70px; }
.collections__nav{
  position:absolute;
  left:calc(max(150px,9vw) + min(70vw,1100px) - 26%);
  bottom:-37px;
  z-index:8;
  display:flex;
  align-items:center;
  gap:14px;
}
.collections__arrow{
  width:46px;
  height:46px;
  border-radius:50%;
  color:#6a4938;
  font-size:22px;
  opacity:.65;
  transition:opacity .3s ease, transform .3s ease;
}
.collections__arrow:hover{ opacity:1; transform:translateX(-3px); }
.collections__progress{
  position:relative;
  display:grid;
  place-items:center;
  width:94px;
  height:94px;
  border-radius:50%;
  background:#e2d9ce;
  color:#251711;
  box-shadow:0 12px 35px rgba(51,31,22,.13);
  transition:transform .4s var(--ease-out), background .3s ease;
}
.collections__progress:hover{ transform:scale(1.06); background:#d6c6b5; }
.collections__progress-ring{
  position:absolute;
  inset:0;
  border:2px solid #a87542;
  border-radius:50%;
  clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%);
  transform:rotate(var(--progress-angle,0deg));
  transition:transform .8s var(--ease-out);
}
.collections__progress-arrow{ transform:translateY(-7px); font-size:28px; }
.collections__counter{
  position:absolute;
  top:55px;
  font-size:12px;
  font-weight:400;
  letter-spacing:.08em;
}
.collections__counter b{ font-weight:500; }

@media (max-width:1100px){
  .collections__intro{ grid-template-columns:1fr; }
  .collections__lead{ margin-top:50px; }
  .collection-card{ flex-basis:900px; }
}


/* ══════════════════════════════════════════════════════
   BOLÇİ YORUMU · koyu sinematik koleksiyon vitrini
   ══════════════════════════════════════════════════════ */

.collections{
  padding-top:clamp(120px,11vw,190px);
  /* AÇIK BÖLÜM — sayfa açık/koyu ritmiyle iniyor:
     hero(açık) → original(koyu) → koleksiyon(AÇIK) → banner(koyu)
     → craft(açık) → hikâye(koyu). Kart panelleri koyu kalır,
     böylece açık zeminde çapa görevi görür. */
  background:
    radial-gradient(58% 44% at 14% 8%,rgba(201,154,100,.20),transparent 62%),
    radial-gradient(52% 46% at 92% 84%,rgba(169,124,67,.16),transparent 62%),
    var(--parchment);
  color:var(--ink);
}
.collections::after{
  content:"BOLÇİ";
  position:absolute;
  right:var(--container-edge);      /* filigran da container kenarında biter */
  top:25px;
  color:rgba(107,70,48,.055);       /* açık zeminde soluk kahve filigran */
  font-family:var(--font-display);
  font-size:clamp(220px,25vw,470px);
  font-weight:700;
  line-height:1;
  pointer-events:none;
}
.collections__intro{
  grid-template-columns:minmax(520px,1fr) 390px;
  margin-bottom:clamp(70px,7vw,115px);
}
.collections__eyebrow{ color:var(--clay); }
.collections__intro h2{
  color:var(--ink);
  font-size:clamp(44px,4.3vw,84px);
  /* "Çikolatanın / en özel hâlleri." — ç kuyruğu + â şapkası çakışıyordu */
  line-height:.95;
}
.collections__intro h2 em{
  color:var(--clay);
  margin-left:clamp(70px,10vw,180px);
}
.collections__lead{
  color:var(--ink-soft);
  border-left:1px solid var(--bronze-soft);
  padding-left:var(--rule-gap);
}
.collections__stage{ min-height:800px; }
.collections__side-title{
  left:var(--container-edge);
  top:-35px;
  bottom:auto;
  writing-mode:horizontal-tb;
  transform:none;
  color:rgba(107,70,48,.09);
  font-family:var(--font-display);
  font-size:clamp(56px,6vw,116px);
  font-weight:600;
  letter-spacing:-.055em;
  pointer-events:none;
}
.collections__viewport{
  width:calc(100% - max(110px,6vw));
  margin-left:max(110px,6vw);
  padding-top:70px;
  touch-action:pan-y;
  -webkit-user-select:none;
          user-select:none;
}
.collection-card{
  flex-basis:min(76vw,1240px);
  height:720px;
  opacity:.3;
  transform:scale(.92) translateY(24px);
  transform-origin:center;
}
.collection-card.is-current{ transform:none; }
.collection-card__media{
  /* Kadraj panelin ÜSTÜNDE biter. (inset:0 denendi: cover kutusu
     büyüyünce fotoğraf yeniden çerçevelenip aşağı kayıyordu.)
     Panelin arkasındaki soluk görüntü __panel::before ile veriliyor. */
  inset:0 0 170px;
  border-radius:2px;
  background:#513323;
  box-shadow:0 40px 90px rgba(0,0,0,.38);
}
.collection-card__media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(15,8,5,.1),transparent 50%),
    linear-gradient(0deg,rgba(18,9,6,.88),transparent 62%);
  pointer-events:none;
}
/* ————— SİLİK PERDE —————
   Fotoğraflar dosya olarak korunuyor; yalnızca üstlerine sıcak,
   yumuşak bir perde seriliyor. Böylece görseller öne fırlamıyor,
   bölümün rengiyle aynı ailede kalıyor ve yazı öne çıkıyor.
   Aktif kart daha az soluk — odak orada. */
.collection-card__media::after{
  z-index:2;
  background:
    linear-gradient(110deg,rgba(255,226,186,.07),transparent 40%,rgba(46,27,17,.22)),
    radial-gradient(120% 90% at 50% 40%,transparent 42%,rgba(36,20,9,.34)),
    linear-gradient(0deg,rgba(46,27,17,.26),rgba(46,27,17,.26));
  transition:opacity .75s ease;
}
.collection-card.is-current .collection-card__media::after{ opacity:.62; }
.collection-card__media img{ transform:scale(1.045); }
.collection-card.is-current:hover .collection-card__media img{ transform:scale(1.085); }
.collection-card[data-collection-type="spesiyal"] .collection-card__media img{
  object-position:center 68%;
}
.collection-card[data-collection-type="yaldizli"] .collection-card__media img{
  object-position:center 56%;
}
.collection-card[data-collection-type="bolu"] .collection-card__media img{
  object-position:center 63%;
}
.collection-card__panel{
  top:auto;
  left:0;
  right:auto;
  bottom:0;
  display:grid;
  grid-template-columns:minmax(280px,.8fr) minmax(270px,.65fr) auto;
  align-items:end;
  gap:clamp(35px,4vw,75px);
  width:100%;
  min-width:0;
  height:auto;
  /* Sol pay: kenara tamamen yapıştırılınca yazı kırpılmış
     görünüyordu. Küçük ama gerçek bir nefes payı bırakıldı. */
  padding:34px clamp(40px,4.2vw,72px) 38px clamp(22px,2.4vw,44px);
  color:var(--on-dark);
  min-height:172px;
  /* içerik alta yaslanır — üstte kocaman boşluk kalmasın */
  align-content:end;
  /* overflow:hidden KULLANMA — __number dairesi panelin dışında
     (top:-500px) duruyor, kırpılıp kayboluyor. Bulanık katman
     kendi clip-path'i ile sınırlanıyor. */
  /* yarı saydam: altındaki bulanık görsel katmanı okunur kalsın */
  background:linear-gradient(90deg,rgba(36,20,9,.72),rgba(59,37,23,.58) 62%,rgba(46,27,17,.7));
  border-top:1px solid rgba(255,238,216,.18);
  box-shadow:none;
}
.collection-card.is-current:hover .collection-card__panel{
  transform:none;
  box-shadow:none;
}

/* ————— panelin arkasındaki soluk görüntü —————
   Kartın kendi fotoğrafı (--card-img) bulanık ve karartılmış olarak
   panelin zeminine serilir: blok tamamen düz kahverengi durmaz,
   arkası hafifçe belli olur. Kadrajı hiç etkilemez — bu ayrı bir
   katman, __media'ya dokunulmaz. */
.collection-card__panel::before{
  content:"";
  position:absolute;
  /* blur kenarlarda solmasın diye kutunun dışına taşar */
  inset:-60px;
  z-index:0;
  background-image:var(--card-img);
  background-size:cover;
  background-position:center 78%;
  /* daha güçlü ve daha görünür: panelin arkası artık gerçekten
     seziliyor, düz kahverengi bir blok gibi durmuyor */
  filter:blur(26px) saturate(.95) brightness(.62);
  /* filtre uygulandıktan SONRA panel sınırına geri kırpılır:
     blur ne dışarı taşar ne de kenarlarda solar */
  clip-path:inset(60px);
  opacity:.85;
  pointer-events:none;
}
/* Metin soluk katmanın üstünde kalır.
   DİKKAT: burada `> *` KULLANMA — .collection-card__number ve
   .collection-card__link position:absolute; blanket kural onları
   relative yapıp grid akışına sokuyor ve paneli şişiriyor. */
.collection-card__panel h3,
.collection-card__panel > p{
  position:relative;
  z-index:1;
}
/* bunlar zaten absolute — yalnızca sıralama veriyoruz */
.collection-card__number,
.collection-card__link{ z-index:5; }
.collection-card__number{
  top:-500px;
  right:36px;
  display:grid;
  place-items:center;
  width:92px;
  height:92px;
  border:1px solid rgba(255,240,220,.58);
  border-radius:50%;
  color:var(--on-dark);
  background:rgba(34,18,12,.24);
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  font-family:var(--font-display);
  font-size:36px;
  font-weight:500;
  letter-spacing:0;
}
.collection-card h3{
  grid-column:1;
  margin:0;                    /* 20px üst boşluk paneli şişiriyordu */
  color:#fff8ed;
  font-size:clamp(32px,3vw,54px);
  /* "Spesiyal / Çikolatalar", "Hediyelik / Çikolatalar" — Ç kuyruğu için */
  line-height:.98;
}
.collection-card__panel > p{
  grid-column:2;
  grid-row:1/3;
  align-self:end;
  color:rgba(255,244,229,.67);
  font-size:14px;
  line-height:1.8;
}
.collection-card__link{
  position:relative;
  left:auto;
  bottom:auto;
  grid-column:3;
  grid-row:1/3;
  align-self:end;
  /* ölçü artık ui.css'teki ortak buton sisteminden gelir */
  width:auto;
  height:auto;
}
/* Buton dolgusu ui.css'te — eski ::before efekti kaldırıldı. */
.collection-card__link i{ display:none; }
.collection-card__link span{ position:relative; z-index:1; }
.collections__nav{
  left:auto;
  right:max(45px,5vw);
  bottom:-48px;
}
.collections__arrow{
  color:var(--cocoa);
  border:1px solid var(--bronze-soft);
}
.collections__progress{
  background:var(--cocoa-900);
  color:var(--cream);
  box-shadow:0 20px 45px rgba(58,33,16,.22);
}
.collections__progress:hover{ background:var(--cocoa); }
.collections__progress-ring{ border-color:var(--bronze); }


/* Global site-container hizası */
.collections__stage{
  width:var(--container-width);
  margin-inline:auto;
}
.collections__side-title{
  left:0;
}
.collections__viewport{
  width:100%;
  margin-left:0;
}
.collection-card{
  flex-basis:calc(100% - clamp(110px,9vw,165px));
}
.collections__nav{
  right:0;
}

/* Büyük bölüm kelimesi, sitenin ikinci ve tek dekoratif fontu. */
.collections__side-title{
  font-family:var(--font-accent);
  font-weight:400;
  letter-spacing:.01em;
}

/* Koleksiyon girişi tek bir tipografik odağa indirildi. Önceki dev
   BOLÇİ filigranı ve kartların üstüne taşan bölüm adı birlikte fazla
   katman oluşturuyordu. */
.collections{
  --collection-card-width:min(72vw,1080px);
  padding:clamp(88px,8vw,132px) 0 clamp(90px,8vw,140px);
}
.collections::after{ display:none; }
.collections__intro{
  display:block;
  margin-bottom:clamp(42px,4.5vw,68px);
}
.collections__eyebrow{
  margin-bottom:14px;
}
.collections__intro h2{
  max-width:850px;
  font-size:clamp(52px,5vw,86px);
  line-height:1.02;
}
.collections__intro h2 em{
  margin-left:clamp(34px,5vw,86px);
}
.collections__side-title{ display:none; }
.collections__stage{ min-height:700px; }
.collections__viewport{ padding-top:0; }
.collection-card{ height:560px; }
.collections__track.is-jumping{ transition:none !important; }

/* Komşu kartlar yalnızca sağda kontrollü bir önizleme olarak görünür;
   taşan panel ve numaralar bölümün üstünü kirletmez. */
.collections__viewport{ overflow:visible; }
.collection-card__number{
  top:24px;
  right:24px;
  z-index:7;
  opacity:0;
  transform:scale(.82);
  transition:opacity .35s ease, transform .55s var(--ease-out);
}
.collection-card.is-current .collection-card__number{
  opacity:1;
  transform:scale(1);
}

/* ══════════════════════════════════════════════════════
   DAHA KOMPAKT VİTRİN
   Kart ve bölüm oranları küçültülür; carousel ölçüleri JS
   tarafından DOM'dan okunduğu için merkezleme/döngü değişmez.
   ══════════════════════════════════════════════════════ */
.collections{
  --collection-card-width:min(64vw,920px);
  padding:clamp(68px,6vw,96px) 0 clamp(76px,6.5vw,108px);
}
.collections__intro{
  margin-bottom:clamp(34px,3.5vw,50px);
}
.collections__eyebrow{
  margin-bottom:11px;
  font-size:10px;
}
.collections__intro h2{
  max-width:720px;
  font-size:clamp(44px,4.2vw,68px);
}
.collections__intro h2 em{
  margin-left:clamp(28px,4vw,68px);
}
.collections__stage{
  min-height:610px;
}
.collections__track{
  gap:clamp(28px,2.6vw,44px);
}
.collection-card{
  height:480px;
}
.collection-card__panel{
  padding:clamp(28px,2.8vw,44px) clamp(26px,2.7vw,44px);
}
.collection-card h3{
  font-size:clamp(30px,2.7vw,48px);
}
.collection-card__panel > p{
  margin-top:11px;
  font-size:13px;
}
.collection-card__link{
  margin-top:clamp(16px,1.7vw,22px);
}
.collection-card__number{
  top:20px;
  right:20px;
  width:74px;
  height:74px;
  font-size:29px;
}
.collections__nav{
  top:510px;
}
.collections__progress{
  width:80px;
  height:80px;
}
.collections__progress-arrow{
  transform:translateY(-6px);
  font-size:24px;
}
.collections__counter{
  top:47px;
  font-size:11px;
}

/* Masaüstü vitrini: aktif kart ortada, komşu kartlar iki yanda görünür. */
.collections__track{
  gap:clamp(34px,3vw,54px);
  transition-duration:.72s;
}
.collection-card{
  flex-basis:var(--collection-card-width);
  opacity:.5;
  transform:scale(.94);
  transition-duration:.5s,.65s;
}
.collection-card.is-current{
  opacity:1;
  transform:scale(1);
}
.collection-card__media{ inset:0 0 145px; }
.collection-card__panel{
  min-height:158px;
  padding-top:28px;
  padding-bottom:30px;
}
.collection-card__kicker{ display:none !important; }
.collections__nav{
  right:calc((100% - var(--collection-card-width))/2);
  top:592px;
  bottom:auto;
}

/* Sonsuz döngü için JS, kart setini üç kez çoğaltır. Kopyalar
   yalnızca görsel; erişilebilirlik ağacından çıkarılır. */
.collection-card.is-carousel-copy{ user-select:none; }

/* ════════════════════════════════════════════════════════════
   KART · BİRLEŞİK DÜZEN
   ------------------------------------------------------------
   Önce fotoğraf üstte, yazı ayrı bir bant hâlinde altındaydı;
   kart iki parça gibi okunuyordu. Artık fotoğraf kartın tamamı,
   yazı da onun üzerinde eriyen bir perdenin içinde — tek parça.
   Metin de tek sütuna indi (başlık → tek satır açıklama → buton).
   ════════════════════════════════════════════════════════════ */
.collection-card__media{ inset:0; }

.collection-card__panel{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  grid-template-columns:none;
  min-height:0;
  padding:clamp(34px,3.4vw,58px) clamp(30px,3.2vw,56px);
  border-top:0;
  /* alttan yukarı eriyen perde — sert bant sınırı yok */
  background:linear-gradient(0deg,
    rgba(27,16,11,.94) 0%,
    rgba(29,17,12,.86) 34%,
    rgba(32,19,13,.5) 66%,
    rgba(32,19,13,0) 100%);
}
/* panelin arkasındaki bulanık kopya artık gereksiz */
.collection-card__panel::before{ content:none; }

.collection-card h3{
  margin:0;
  max-width:14ch;
  color:var(--on-dark);
  font-size:clamp(34px,3.2vw,58px);
  line-height:1.02;
}
.collection-card__panel > p{
  max-width:42ch;
  margin:14px 0 0;
  color:rgba(248,243,233,.72);
  font-size:14px;
  line-height:1.7;
}
.collection-card__link{
  position:relative;
  left:auto;
  bottom:auto;
  margin-top:clamp(20px,2.2vw,30px);
}
/* Kart numarası: görselin sağ üstünde, yerleşimi etkilemeyen cam rozet.
   Komşu kartlarda silik, aktif kartta tamamen görünür. */
.collection-card__number{
  display:grid;
  pointer-events:none;
  opacity:.55;
  transform:scale(.9);
}
.collection-card.is-current .collection-card__number{
  opacity:1;
  transform:scale(1);
}

/* ============================================================
   BÖLÜM: gift  (eski: css/gift.css)
   ============================================================ */
/* ============================================================
   BOLÇİ · gift bands
   ------------------------------------------------------------
   Full-bleed sinematik şerit + site-container hizasında yazı.
   Görseller (banner5 / banner6) SOL tarafı boş bırakacak şekilde
   üretildi; yazı o negatif alana oturur, perde yalnızca kontrastı
   garantiye alır.

   NOT: Türkçe diakritikler için başlık line-height'ı .95 altına
   inmez (bkz. base.css tipografi güvenliği).
   ============================================================ */

.gift{
  position:relative;
  background:var(--surface-1);
  color:var(--on-dark);
}

.gift-band{
  position:relative;
  display:flex;
  align-items:center;
  min-height:clamp(430px,42vw,620px);
  overflow:clip;
  isolation:isolate;
}

/* ————— görsel ————— */
.gift-band__media{
  position:absolute;
  inset:0;
  z-index:0;
}
.gift-band__media img{
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  /* kompozisyonun ağırlığı sağda — kırpma oradan korunur */
  object-position:85% center;
  /* girişte hafif yaklaşma + kaydırırken yumuşak paralaks */
  transform:scale(1.06) translate3d(0,var(--gift-shift,0px),0);
  transition:transform 1.6s var(--ease-out);
  will-change:transform;
}
.gift-band.is-visible .gift-band__media img{ transform:scale(1) translate3d(0,var(--gift-shift,0px),0); }

/* ————— okunabilirlik perdesi —————
   Soldan sağa açılır: yazı alanı koyu, ürün alanı temiz kalır. */
.gift-band__veil{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(36,20,9,.92) 0%,
      rgba(40,23,13,.76) 26%,
      rgba(46,27,17,.3) 48%,
      rgba(46,27,17,0) 66%),
    linear-gradient(0deg,rgba(36,20,9,.5),transparent 42%);
}

/* üst/alt komşu bölümlere yumuşak geçiş — sert kesim yok */
.gift-band::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(0deg,rgba(46,27,17,.85),transparent 18%,transparent 84%,rgba(46,27,17,.7));
}

/* ————— yazı ————— */
/* NOT: bu öğe .site-container'ı da taşır — genişliğini KISITLAMA.
   max-width verilirse margin-inline:auto bloğu ekranın ortasına
   kaydırır ve sol hiza header/hero ile bozulur. Ölçüyü içerideki
   başlık ve metin kendi max-width'iyle alır. */
.gift-band__copy{
  position:relative;
  z-index:3;
  padding-block:clamp(56px,6vw,90px);
}
/* GİRİŞ = ANIMATION, hover = TRANSITION.
   Önce giriş de transition ile yapılıyordu ve sıralama için
   transition-delay veriliyordu. O gecikme öğede KALICI olduğu
   için buton hover'a geç tepki veriyor, imleç çekilince de eski
   rengine geç dönüyordu. Animation kullanınca giriş ve hover
   birbirinden tamamen ayrılır. */
.gift-band__copy > *{
  opacity:0;
}
.gift-band.is-visible .gift-band__copy > *{
  animation:giftIn .85s var(--ease-out) both;
}
.gift-band.is-visible .gift-band__eyebrow{ animation-delay:.06s; }
.gift-band.is-visible .gift-band__copy h2{ animation-delay:.18s; }
.gift-band.is-visible .gift-band__lead{ animation-delay:.32s; }
.gift-band.is-visible .gift-band__cta{ animation-delay:.44s; }

@keyframes giftIn{
  from{ opacity:0; transform:translateY(34px); }
  to  { opacity:1; transform:none; }
}

/* butonu metinden biraz daha aşağı al */
.gift-band__cta{ margin-top:clamp(30px,3.4vw,52px); }

.gift-band__eyebrow{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 22px;
  color:#d7a57d;
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
}
.gift-band__eyebrow::before{
  content:"";
  width:clamp(28px,3vw,54px);
  height:1px;
  background:rgba(215,165,125,.6);
}

.gift-band__copy h2{
  max-width:12ch;
  margin:0 0 26px;
  font-family:var(--font-display);
  font-size:clamp(36px,3.5vw,64px);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.025em;
  text-shadow:0 14px 44px rgba(0,0,0,.5);
}
.gift-band__copy h2 em{
  display:inline-block;
  color:#d9a97c;
  font-weight:400;
}

.gift-band__lead{
  max-width:470px;
  margin:0;
  color:rgba(246,235,218,.7);
  font-size:15px;
  line-height:1.8;
}

/* Buton biçimi ui.css'te tek yerden yönetilir. */
/* Buton biçimi ve hover'ı ui.css'te tek yerden yönetilir.
   Buradaki eski ::before dolgu efekti kaldırıldı: ui.css onu
   kapattığı için hover'da hiçbir görsel değişiklik olmuyordu. */

/* iki şerit arasında ince ayrım */
.gift-band + .gift-band{ border-top:1px solid rgba(235,191,151,.14); }

/* ————— dar ekran · üstte görsel, altta yazı —————
   Perde ile okutmak yerine ayırmak daha güvenli: ürün de,
   yazı da tam görünür. */
@media (max-width:860px){
  .gift-band{
    display:block;
    min-height:0;
  }
  .gift-band__copy h2{ max-width:none; }
  .gift-band__media{
    position:relative;
    height:clamp(240px,58vw,380px);
  }
  .gift-band__media img{ object-position:center; }
  .gift-band__veil{
    inset:auto 0 0 0;
    height:45%;
    background:linear-gradient(0deg,var(--surface-1) 12%,rgba(46,27,17,0));
  }
  .gift-band::after{ content:none; }
  .gift-band__copy{
    max-width:none;
    padding-block:clamp(38px,7vw,58px) clamp(52px,9vw,76px);
    margin-top:-6px;
  }
}

@media (prefers-reduced-motion:reduce){
  .gift-band__media img{ transform:none !important; }
  /* giriş artık animation ile yapılıyor — kapatılırken opaklığın
     açık kalması için animasyonu da iptal etmek gerekiyor */
  .gift-band__copy > *{ opacity:1; transform:none; animation:none !important; }
}

/* ============================================================
   BÖLÜM: anatomy  (eski: css/anatomy.css)
   ============================================================ */
/* ============================================================
   BOLÇİ · KROKAN ANATOMİSİ
   ------------------------------------------------------------
   Ürünün nasıl kurulduğunu anlatan bölüm: solda yapışkan
   (sticky) görsel, sağda kaydırdıkça ilerleyen adımlar.
   Aktif adımın görseli yumuşakça öne geçer.

   Bu, markanın en ayırt edici hikâyesi: Bolu Çikolatası
   "krokanın çikolatayla kaplanması"dır — başka hiçbir yerde
   anlatılmıyor.
   ============================================================ */

/* AÇIK BÖLÜM: iki koyu banner'ın arasında nefes alanı.
   Sayfa boyunca süren koyu şerit burada kesilir, göz dinlenir. */
.anatomy{
  position:relative;
  padding:clamp(90px,9vw,150px) 0;
  color:var(--ink-soft);
  background:
    radial-gradient(58% 46% at 84% 8%,rgba(201,154,100,.18),transparent 62%),
    var(--parchment,#F2E8D6);
  border-block:1px solid var(--bronze-soft);
}

.anatomy__head{
  max-width:52ch;
  margin-bottom:clamp(44px,5vw,80px);
}
.anatomy__eyebrow{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 20px;
  color:var(--clay);
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
}
.anatomy__eyebrow::before{
  content:"";
  width:clamp(28px,3vw,54px);
  height:1px;
  background:var(--bronze-soft);
}
.anatomy h2{
  margin:0 0 22px;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:clamp(40px,4.2vw,76px);
  font-weight:500;
  line-height:1;                    /* Türkçe diakritik güvenliği */
  letter-spacing:-.025em;
}
.anatomy h2 em{ color:var(--clay); font-weight:400; }
.anatomy__lead{
  max-width:52ch;
  margin:0;
  color:var(--ink-soft);
  font-size:clamp(15px,1.1vw,18px);
  line-height:1.85;
}

/* ————— iki sütun: yapışkan görsel + adımlar ————— */
.anatomy__body{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(36px,5vw,96px);
  align-items:start;
}

.anatomy__stage{
  position:sticky;
  top:calc(var(--header-h) + clamp(24px,4vw,60px));
  width:100%;
  max-width:560px;
  aspect-ratio:4/5;
  overflow:hidden;
  background:#120A05;
  box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.anatomy__stage img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.06);
  transition:opacity 1s var(--ease-soft), transform 1.6s var(--ease-out);
}
.anatomy__stage img.is-on{ opacity:1; transform:scale(1); }
/* altın ince iç çerçeve */
.anatomy__stage::after{
  content:"";
  position:absolute;
  inset:14px;
  z-index:2;
  border:1px solid rgba(255,244,226,.32);
  pointer-events:none;
}

/* ————— adımlar ————— */
.anatomy__steps{
  display:grid;
  gap:0;
}
.anatomy-step + .anatomy-step{ border-top:1px solid rgba(169,124,67,.16); }
.anatomy-step{
  position:relative;
  /* Her adıma kendi kaydırma mesafesi: üçü birden ekrana sığınca
     yapışkan görsel kaymıyor ve geçiş hiç tetiklenmiyordu.
     min-height sayesinde her adım sırayla ekranın ortasına gelir. */
  min-height:34vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(24px,2.4vw,36px) 0 clamp(24px,2.4vw,36px) var(--rule-gap);
  border-left:1px solid var(--bronze-soft);
  opacity:.42;
  transition:opacity .6s ease, border-color .6s ease;
}
.anatomy-step.is-active{
  opacity:1;
  border-left-color:var(--clay);
}
/* sol çizgide ilerleyen işaret */
.anatomy-step::before{
  content:"";
  position:absolute;
  left:-5px;
  top:50%;
  margin-top:-4.5px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--clay);
  opacity:0;
  transform:scale(.4);
  transition:opacity .5s ease, transform .5s var(--ease-out);
}
.anatomy-step.is-active::before{ opacity:1; transform:none; }

.anatomy-step__num{
  display:block;
  margin-bottom:14px;
  color:var(--clay);
  font:500 12px/1 var(--font-ui);
  letter-spacing:.14em;
}
.anatomy-step h3{
  margin:0 0 14px;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:clamp(26px,2.4vw,44px);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.02em;
}
.anatomy-step p{
  max-width:46ch;
  margin:0;
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.8;
}

@media (max-width:900px){
  .anatomy__body{ grid-template-columns:1fr; }
  .anatomy__stage{
    position:relative;
    top:auto;
    aspect-ratio:3/2;
  }
  .anatomy-step{ min-height:0; }
}

@media (prefers-reduced-motion:reduce){
  .anatomy-step{ opacity:1; }
  .anatomy__stage img{ transition:none; }
}

/* ============================================================
   BÖLÜM: original  (eski: css/original.css)
   ============================================================ */
/* ============================================================
   BOLÇİ · BOLU ÇİKOLATASI (birleşik bölüm)
   ------------------------------------------------------------
   Önce iki ayrı bant vardı: "THE ORIGINAL" ürün şeridi ve
   "Dağın fındığı" hammadde bandı. İkisi de aynı ürünü anlattığı
   için sayfada tekrar gibi okunuyordu.

   Artık tek bölüm: SOLDA hammadde, SAĞDA ürün, ORTADA metin.
   "Hammadde → ürün" ilişkisini kompozisyonun kendisi kuruyor,
   metnin ayrıca anlatmasına gerek kalmıyor.
   ============================================================ */

.bolu{
  --gap-top:clamp(30px,3.6vw,64px);

  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.95fr) minmax(0,1fr);
  align-items:stretch;
  min-height:clamp(420px,38vw,600px);
  overflow:clip;
  isolation:isolate;
  color:var(--on-dark);

  /* Üstteki pay MARGIN değil PADDING: margin verilince iki koyu
     bölüm arasında gövdenin krem zemini şerit gibi görünüyordu.
     Pay bölümün içinde kalıyor ve hero'nun koyusundan bölümün
     tonuna yumuşak bir renk geçişiyle iniyor — gölge yok. */
  padding-top:var(--gap-top);
  background:
    linear-gradient(180deg,
      #100803 0%,
      #150C06 45%,
      var(--surface-3) 100%) top / 100% calc(var(--gap-top) + 90px) no-repeat,
    var(--surface-3);
}

/* ————— yan fotoğraflar ————— */
.bolu__media{
  position:relative;
  margin:0;
  overflow:hidden;
}
.bolu__media img{
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  /* ilgi noktaları kadrajın iç tarafında kalsın */
  object-position:60% center;
  transform:scale(1.04);
  transition:transform 1.6s var(--ease-out);
}
.bolu:hover .bolu__media img{ transform:scale(1); }
.bolu__media:last-of-type img{ object-position:70% center; }

/* fotoğrafların iç kenarı orta sütuna erisin — sert kesim yok */
.bolu__media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 42%,rgba(24,12,7,.5) 72%,#180c07 100%);
}
.bolu__media:last-of-type::after{
  background:linear-gradient(270deg,transparent 42%,rgba(24,12,7,.5) 72%,#180c07 100%);
}

/* köşe etiketi: HAMMADDE / ÜRÜN */
.bolu__media figcaption{
  position:absolute;
  left:clamp(16px,1.6vw,26px);
  bottom:clamp(14px,1.4vw,22px);
  z-index:2;
  padding:6px 12px 5px;
  border:1px solid rgba(216,182,129,.42);
  color:var(--gold-pale);
  background:rgba(20,11,6,.5);
  -webkit-backdrop-filter:blur(4px);
          backdrop-filter:blur(4px);
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
}
.bolu__media:last-of-type figcaption{ left:auto; right:clamp(16px,1.6vw,26px); }

/* ————— orta sütun · metin ————— */
.bolu__copy{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:clamp(48px,5vw,86px) clamp(24px,2.6vw,48px);
  background:radial-gradient(circle at 50% 44%,#24140d 0%,#180c07 76%);
}
.bolu__copy::before,
.bolu__copy::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:clamp(90px,9vw,165px);
  pointer-events:none;
}
.bolu__copy::before{
  right:100%;
  background:linear-gradient(90deg,transparent,#180c07);
}
.bolu__copy::after{
  left:100%;
  background:linear-gradient(90deg,#180c07,transparent);
}
.bolu__copy>*{ position:relative; z-index:1; }
.bolu__eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 20px;
  color:var(--gold-pale);
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
}
.bolu__eyebrow::before,
.bolu__eyebrow::after{
  content:"";
  width:clamp(20px,2vw,38px);
  height:1px;
  background:rgba(216,182,129,.5);
}
.bolu__copy h2{
  margin:0 0 22px;
  font-family:var(--font-display);
  font-size:clamp(36px,3.4vw,62px);
  font-weight:500;
  line-height:1.02;                /* Türkçe diakritik güvenliği */
  letter-spacing:-.025em;
  text-shadow:0 12px 40px rgba(0,0,0,.5);
}
.bolu__copy h2 em{
  display:block;
  color:var(--gold-pale);
  font-weight:400;
}
.bolu__lead{
  max-width:44ch;
  margin:0;
  color:rgba(246,235,218,.74);
  font-size:15px;
  line-height:1.85;
}

.bolu__cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  overflow:hidden;
  margin-top:clamp(28px,2.8vw,40px);
  padding:17px 34px;
  border:1px solid rgba(216,182,129,.55);
  color:var(--on-dark);
  font-size:12px;
  font-weight:500;
  letter-spacing:.1em;
  white-space:nowrap;
  background-image:linear-gradient(var(--clay),var(--clay));
  background-repeat:no-repeat;
  background-position:bottom center;
  background-size:100% 0%;
  transition:background-size .45s var(--ease-out), color .35s var(--ease-soft), border-color .4s ease;
}
.bolu__cta:hover,
.bolu__cta:focus-visible{
  color:var(--ink);
  border-color:var(--clay);
  background-size:100% 100%;
}
.bolu__cta svg{
  width:32px;
  height:auto;
  flex:0 0 auto;
  stroke-width:1.1;
  transition:transform .4s var(--ease-out);
}
.bolu__cta:hover svg{ transform:translateX(5px); }

/* ————— dar ekran ————— */
@media (max-width:900px){
  .bolu{
    grid-template-columns:1fr 1fr;
    min-height:0;
  }
  .bolu__media{ aspect-ratio:1/1; }
  .bolu__copy{
    grid-column:1 / -1;
    grid-row:1;
    padding-block:clamp(44px,8vw,68px);
  }
  .bolu__media::after{ background:linear-gradient(0deg,rgba(26,14,7,.55),transparent 55%); }
  .bolu__media:last-of-type::after{ background:linear-gradient(0deg,rgba(26,14,7,.55),transparent 55%); }
  .bolu__copy::before,.bolu__copy::after{ display:none; }
}
@media (max-width:560px){
  .bolu{ grid-template-columns:1fr; }
  .bolu__media{ aspect-ratio:16/10; }
}

@media (prefers-reduced-motion:reduce){
  .bolu__media img{ transform:none; }
}

/* ============================================================
   BÖLÜM: craft  (eski: css/craft.css)
   ============================================================ */
.craft{
  position:relative;
  overflow:hidden;
  padding:clamp(120px,11vw,190px) 0 clamp(110px,9vw,165px);
  /* AÇIK BÖLÜM (açık/koyu ritmi) — panel görselleri koyu olduğu
     için parşömen zemin galeriyi öne çıkarır. */
  color:var(--ink);
  background:
    radial-gradient(56% 42% at 84% 10%,rgba(201,154,100,.20),transparent 62%),
    var(--parchment);
}
.craft::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.13;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
}
.craft__head{
  position:relative;
  display:grid;
  /* "03 / CRAFT" sütunu kaldırıldı — ızgara ikiye indi */
  grid-template-columns:minmax(0,1fr) minmax(280px,390px);
  align-items:end;
  gap:clamp(36px,5vw,86px);
  margin-bottom:clamp(65px,6vw,105px);
}
.craft__title > p{ margin:0 0 22px; color:var(--clay); font-size:11px; font-weight:500; letter-spacing:.14em; }
.craft__title h2{
  margin:0;
  font-family:var(--font-display);
  /* 7.3vw ekranı dolduruyordu — başlık üç satıra taşıp bölümü
     yutuyordu. Ölçek okunur bir seviyeye çekildi. */
  font-size:clamp(38px,3.9vw,70px);
  font-weight:500;
  /* "Teknoloji ve / ustalığın buluşması." — j/ğ/ş kuyrukları için */
  line-height:1.02;
  letter-spacing:-.03em;
}
.craft__title em{ color:var(--clay); font-weight:400; }
.craft__intro{
  margin:0 0 5px;
  padding-left:var(--rule-gap);
  border-left:1px solid var(--bronze-soft);
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.8;
}
.craft__gallery{
  position:relative;
  display:flex;
  height:clamp(560px,43vw,720px);
  gap:10px;
  opacity:0;
  transform:translateY(60px);
  transition:opacity 1s ease,transform 1.2s var(--ease-out);
}
.craft.is-visible .craft__gallery{ opacity:1; transform:none; }
.craft-panel{
  position:relative;
  flex:1 1 0;
  min-width:0;
  overflow:hidden;
  cursor:pointer;
  transition:flex 1s var(--ease-out);
  isolation:isolate;
}
.craft-panel:focus-visible{ outline:1px solid rgba(225,177,138,.8); outline-offset:-5px; }
.craft-panel.is-active{ flex:2.35 1 0; }
.craft-panel__media{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  filter:saturate(.9) contrast(1.06) brightness(.72);
  transform:scale(1.08);
  transition:transform 1.6s var(--ease-out),filter 1s ease;
  will-change:transform;
  background:#100705;
}
.craft-panel.is-active .craft-panel__media{ filter:saturate(1.18) contrast(1.14) brightness(1.08); transform:scale(1.008); }
.craft-panel__veil{
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(8,3,2,.94) 0%,rgba(10,4,2,.72) 20%,rgba(10,4,2,.22) 38%,transparent 54%),linear-gradient(90deg,rgba(10,4,2,.2),transparent 52%);
}
.craft-panel.is-active .craft-panel__veil{
  background:linear-gradient(0deg,rgba(8,3,2,.94) 0%,rgba(10,4,2,.64) 18%,rgba(10,4,2,.12) 34%,transparent 49%);
}
.craft-panel::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(112deg,transparent 32%,rgba(255,209,158,.18) 45%,transparent 57%);
  transform:translateX(-70%);
}
.craft-panel.is-active::after{ opacity:1; animation:craftLight 5.8s ease-in-out infinite; }
.craft-panel__copy{
  position:absolute;
  left:clamp(26px,3vw,54px);
  right:clamp(26px,3vw,54px);
  bottom:clamp(30px,3.3vw,58px);
  z-index:3;
}
.craft-panel__copy > span{ color:#e8b88f; font-size:11px; font-weight:500; letter-spacing:.1em; text-shadow:0 2px 9px rgba(0,0,0,.8); }
.craft-panel h3{
  margin:13px 0 0;
  font-family:var(--font-display);
  font-size:clamp(28px,2.6vw,48px);
  font-weight:500;
  /* "Çikolatanın / saf hâli", "Usta / dokunuşu" — ç/ş/â için */
  line-height:.98;
  letter-spacing:-.025em;
  white-space:nowrap;
  color:var(--on-dark);
  text-shadow:0 3px 20px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.9);
}
.craft-panel__copy p{
  max-width:430px;
  max-height:0;
  margin:0;
  overflow:hidden;
  opacity:0;
  color:rgba(255,246,233,.92);
  font-size:13px;
  line-height:1.7;
  transform:translateY(18px);
  transition:max-height .7s ease,margin .7s ease,opacity .55s ease,transform .7s var(--ease-out);
  text-shadow:0 2px 12px rgba(0,0,0,.92);
}
.craft-panel.is-active .craft-panel__copy p{ max-height:80px; margin-top:18px; opacity:1; transform:none; }
.craft__facts{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:54px;
  border-block:1px solid var(--bronze-soft);
}
.craft__facts div{ display:flex; align-items:baseline; gap:14px; padding:28px 24px; border-right:1px solid var(--bronze-soft); }
.craft__facts div:last-child{ border-right:0; }
.craft__facts strong{ color:var(--clay); font-family:var(--font-display); font-size:clamp(28px,2.2vw,42px); font-weight:500; white-space:nowrap; }
.craft__facts span{ color:var(--ink-soft); font-size:11px; font-weight:500; letter-spacing:.09em; }
@keyframes craftLight{ 0%,16%{transform:translateX(-80%)} 68%,100%{transform:translateX(85%)} }
@media (prefers-reduced-motion:reduce){
  .craft-panel.is-active::after{animation:none}
  .craft__gallery{opacity:1;transform:none}
}

/* ============================================================
   BÖLÜM: story  (eski: css/story.css)
   ============================================================ */
/* BOLÇİ · kompakt scroll tarihçesi */
.brand-history{position:relative;height:390vh;padding-top:clamp(28px,4vw,58px);background:#eee7dc;color:var(--on-dark)}
.brand-history__sticky{position:sticky;top:calc(var(--header-h) + clamp(18px,2vw,32px));height:calc(100vh - var(--header-h) - clamp(38px,5vw,72px));min-height:610px}
.brand-history__shell{display:grid;grid-template-columns:clamp(124px,9vw,154px) minmax(0,1fr);gap:clamp(14px,1.5vw,24px);height:100%}

/* sol tarih rayı */
.history-rail{position:relative;display:flex;flex-direction:column;min-width:0;padding:clamp(22px,2.2vw,34px) 14px;overflow:hidden;border-radius:9px;background:linear-gradient(155deg,#60402f,#342219 72%);box-shadow:0 22px 54px rgba(49,27,17,.18)}
.history-rail>p{margin:0;color:rgba(248,243,233,.58);font:500 9px/1 var(--font-ui);letter-spacing:.18em;text-align:center}
.history-rail__list{position:relative;z-index:2;display:flex;flex:1;flex-direction:column;justify-content:space-evenly;margin-top:10px}
.history-rail__list::before{content:"";position:absolute;left:7px;top:11%;bottom:11%;width:1px;background:rgba(248,243,233,.18)}
.history-rail button{position:relative;display:grid;grid-template-columns:16px 1fr;align-items:center;gap:8px;width:100%;padding:8px 0;color:rgba(248,243,233,.48);font:500 clamp(10px,.72vw,12px)/1 var(--font-ui);letter-spacing:.06em;text-align:left;transition:color .4s ease,transform .5s var(--ease-out)}
.history-rail button i{position:relative;z-index:2;display:block;width:7px;height:7px;margin-left:4px;border-radius:50%;background:#a99486;box-shadow:0 0 0 0 rgba(239,192,129,0);transition:background .4s ease,transform .5s var(--ease-out),box-shadow .5s ease}
.history-rail button.is-active{color:#fff7e9;transform:translateX(3px)}
.history-rail button.is-active i{background:#f4d099;transform:scale(1.45);box-shadow:0 0 0 5px rgba(239,192,129,.14),0 0 18px rgba(239,192,129,.5)}
.history-rail__progress{position:absolute;left:21px;top:20%;bottom:18%;z-index:1;width:1px;overflow:hidden}
.history-rail__progress i{display:block;width:100%;height:100%;background:#e9bc7b;transform:scaleY(0);transform-origin:top;will-change:transform}

/* sağdaki medya sahneleri */
.history-scenes{position:relative;min-width:0;height:100%;overflow:hidden;border-radius:9px;background:#1a0d08;box-shadow:0 28px 70px rgba(45,24,14,.24)}
.history-scenes::after{content:"";position:absolute;inset:12px;z-index:8;border:1px solid rgba(255,235,204,.2);border-radius:4px;pointer-events:none}
.history-scene{--scene-opacity:0;--scene-scale:1.06;--scene-copy-y:26px;position:absolute;inset:0;z-index:1;overflow:hidden;opacity:var(--scene-opacity);pointer-events:none;will-change:opacity}
.history-scene.is-active{z-index:3;pointer-events:auto}
.history-scene img,.history-scene video{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;filter:none;transform:scale(var(--scene-scale));transition:transform .15s linear}
.history-scene:nth-child(2) img{object-position:center right}
.history-scene__veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,6,3,.35) 0%,rgba(16,7,4,.18) 42%,rgba(16,7,4,.03) 72%,rgba(10,4,2,.06)),linear-gradient(0deg,rgba(8,3,2,.55),transparent 48%)}
.history-scene__copy{position:absolute;left:clamp(34px,5vw,82px);bottom:clamp(42px,6vw,92px);z-index:5;width:min(590px,58%);transform:translateY(var(--scene-copy-y));color:#fff8ee;text-shadow:0 4px 24px rgba(0,0,0,.5);will-change:transform}
.history-scene__year{display:block;margin-bottom:clamp(16px,2vw,28px);color:rgba(241,198,139,.28);font:600 clamp(70px,9vw,154px)/.62 var(--font-ui);letter-spacing:-.06em}
.history-scene__eyebrow{margin:0 0 13px;color:#e8bd82;font:500 10px/1 var(--font-ui);letter-spacing:.18em}
.history-scene h2{margin:0;color:#fff8ee;font-family:var(--font-ui);font-size:clamp(38px,4.2vw,72px);font-weight:400;line-height:.92;letter-spacing:-.04em}
.history-scene h2 em{color:#efc487;font-family:var(--font-accent);font-size:1.18em;font-style:normal;font-weight:400;line-height:.75;letter-spacing:.01em}
.history-scene__copy>p:last-of-type{max-width:54ch;margin:clamp(20px,2vw,30px) 0 0;color:rgba(255,248,238,.76);font-size:clamp(13px,.92vw,16px);line-height:1.75}
.history-scene__copy a{display:inline-flex;align-items:center;gap:18px;margin-top:clamp(22px,2.2vw,34px);padding-bottom:7px;border-bottom:1px solid rgba(239,196,135,.55);color:#f2c98f;font:500 10px/1 var(--font-ui);letter-spacing:.14em}
.history-scene__copy a span{transition:transform .35s var(--ease-out)}
.history-scene__copy a:hover span{transform:translateX(6px)}

@media(max-width:900px){.brand-history{height:auto;padding:50px 0}.brand-history__sticky{position:relative;top:auto;height:auto;min-height:0}.brand-history__shell{grid-template-columns:1fr}.history-rail{display:none}.history-scenes{height:auto;overflow:visible;background:none;box-shadow:none}.history-scenes::after{display:none}.history-scene{position:relative;inset:auto;min-height:620px;margin-bottom:18px;border-radius:8px;opacity:1}.history-scene__copy{width:min(82%,560px)}}
@media(prefers-reduced-motion:reduce){.history-scene img,.history-scene video{transform:none;transition:none}}

/* ============================================================
   BÖLÜM: partners  (eski: css/partners.css)
   ============================================================ */
.partners{
  position:relative;
  overflow:hidden;
  border-top:clamp(18px,2vw,30px) solid #eee7dc;
  padding:clamp(42px,4vw,60px) 0 clamp(34px,3.2vw,48px);
  color:var(--cream);
  background:var(--brand-brown);
}
.partners::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(55% 140% at 15% 50%,rgba(212,127,97,.14),transparent 64%),
    radial-gradient(50% 130% at 88% 48%,rgba(212,127,97,.1),transparent 68%);
}
.partners__filters{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}
.partners__head{
  position:relative;
  z-index:2;
  text-align:center;
}
.partners__head p{
  margin:0 0 10px;
  color:var(--brand-coral);
  font-size:10px;
  font-weight:600;
  letter-spacing:.18em;
}
.partners__head h2{
  margin:0;
  color:var(--cream);
  font-family:var(--font-display);
  font-size:clamp(28px,2.5vw,40px);
  font-weight:400;
  letter-spacing:-.035em;
}
.partners__viewport{
  position:relative;
  z-index:2;
  width:100%;
  margin-top:clamp(26px,2.8vw,40px);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.partners__rail{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:partnersMarquee 42s linear infinite paused;
}
.partners__rail.is-ready{ animation-play-state:running; }
.partners__viewport:hover .partners__rail.is-ready{ animation-play-state:paused; }
.partners__group{
  display:flex;
  align-items:center;
  gap:clamp(42px,4.5vw,82px);
  padding-right:clamp(42px,4.5vw,82px);
}
.partner-logo{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  width:clamp(150px,13vw,230px);
  min-height:58px;
  color:var(--cream);
  opacity:.78;
  transition:opacity .3s ease,transform .35s var(--ease-out);
}
a.partner-logo:hover{ opacity:1; transform:translateY(-3px); }
.partner-logo--image img{
  display:block;
  max-width:100%;
  max-height:48px;
  object-fit:contain;
  filter:url(#partnerLogoMonochrome);
}
.partner-logo--knockout img{
  filter:grayscale(1) invert(1);
  mix-blend-mode:screen;
}
.partner-logo__mask{
  display:block;
  width:100%;
  height:52px;
  background:var(--cream);
  -webkit-mask-position:center;
          mask-position:center;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-size:contain;
          mask-size:contain;
}
.partner-logo__mask--gold{
  -webkit-mask-image:url('assets/img/partners/gold-group.svg');
          mask-image:url('assets/img/partners/gold-group.svg');
}
.partners__note{
  position:relative;
  z-index:2;
  margin-top:clamp(20px,2.2vw,30px);
  color:rgba(248,244,236,.46);
  font-size:9px;
  letter-spacing:.1em;
  text-align:center;
}
@keyframes partnersMarquee{
  to{ transform:translate3d(calc(-1 * var(--partners-shift, 50%)),0,0); }
}
@media (prefers-reduced-motion:reduce){
  .partners__rail{ animation:none; }
  .partners__viewport{ overflow-x:auto; }
}

/* ============================================================
   BÖLÜM: social  (eski: css/social.css)
   ============================================================ */
/* ============================================================
   BOLÇİ · Instagram şeridi
   ------------------------------------------------------------
   Elfsight'ın "slider" şablonundaki mantık: kare gönderi karoları
   yan yana kayıyor, üzerine gelince koyu perde + Instagram ikonu
   beliriyor. Oklar, noktalar ve sürükleme js/social.js'te.

   NOT: Gönderi GÖRSELLERİ elle eklenir. Instagram'ın CDN adresleri
   imzalı ve birkaç günde geçersiz olduğu için doğrudan bağlanamaz;
   otomatik çekim ise resmî API (token) ya da Elfsight gibi ücretli
   bir servis gerektirir. Karo yapısı hazır: <a> içine <img> koymak
   yeterli, filigran otomatik gizlenir.
   ============================================================ */

.social{
  position:relative;
  overflow:clip;
  padding:clamp(78px,7.5vw,128px) 0 clamp(82px,7.5vw,132px);
  color:var(--on-dark);
  background:
    radial-gradient(60% 90% at 8% 20%,rgba(212,127,97,.16),transparent 66%),
    radial-gradient(48% 82% at 94% 78%,rgba(212,127,97,.11),transparent 68%),
    linear-gradient(145deg,#24120d 0%,var(--brand-brown) 52%,#2b160f 100%);
}
.social::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.17;
  background-image:linear-gradient(rgba(248,243,233,.08) 1px,transparent 1px);
  background-size:100% 92px;
}

/* ————— başlık ————— */
.social__head{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(28px,4vw,64px);
  margin-bottom:clamp(38px,4.5vw,68px);
}
.social__title{ max-width:700px; }
.social__eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0;
  color:var(--brand-coral);
  font-size:10px;
  font-weight:600;
  letter-spacing:.19em;
}
.social__eyebrow::before{
  content:"";
  width:clamp(24px,2.6vw,46px);
  height:1px;
  background:rgba(212,127,97,.72);
}
.social__head h2{
  margin:18px 0 0;
  font-family:var(--font-display);
  font-size:clamp(42px,4.7vw,76px);
  font-weight:400;
  line-height:.96;
  letter-spacing:-.045em;
}
.social__head h2 em{
  color:var(--brand-coral);
  font-family:var(--font-accent);
  font-size:1.12em;
  font-style:normal;
  font-weight:400;
  letter-spacing:0;
}
.social__lead{
  max-width:520px;
  margin:22px 0 0;
  color:rgba(248,243,233,.62);
  font-size:14px;
  line-height:1.7;
}

.social__follow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:14px 22px;
  border:1px solid rgba(212,127,97,.55);
  border-radius:999px;
  color:var(--cream);
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  white-space:nowrap;
  background:rgba(212,127,97,.08);
  transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s var(--ease-out);
}
.social__follow:hover,
.social__follow:focus-visible{
  color:var(--cream);
  border-color:var(--brand-coral);
  background:var(--brand-coral);
  transform:translateY(-2px);
}
.social__follow svg{ width:16px; height:16px; stroke-width:1.6; }

/* ————— iki hesap · takip butonları ————— */
.social__accounts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.social__follow--alt{
  border-color:rgba(212,127,97,.28);
  color:var(--on-dark-soft);
}

/* ————— kaydırmalı şerit —————
   TRANSFORM DEĞİL YEREL KAYDIRMA kullanılıyor. Sebep: her kart bir
   Instagram iframe'i ve iframe imleç/dokunma olaylarını yutuyor —
   transform tabanlı sürüklemede kartın üstünden tutup kaydırmak
   imkânsızdı. Yerel kaydırmada parmak/trackpad doğrudan çalışır,
   scroll-snap da kartları hizalar. */
.social__viewport{
  position:relative;
  z-index:2;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  scrollbar-width:none;             /* Firefox */
  -ms-overflow-style:none;
  padding:10px 0 18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.social__viewport::-webkit-scrollbar{ display:none; }

.social__track{
  display:flex;
  align-items:flex-start;
  gap:clamp(18px,1.8vw,30px);
  width:max-content;
}
.social__slide{
  position:relative;
  /* Embed'ler kendi ölçülerini dayatıyor ve içerik türüne göre
     farklı yükseklikte geliyor (reel 9:16, kare 1:1, dikey 4:5;
     bazılarında "Orijinal ses" satırı da var). İframe farklı
     origin olduğu için içine müdahale edilemez.

     Çözüm: kart ölçüsü sabit + alt kenarda MASKE. Böylece her
     kart aynı yerde ve aynı biçimde sönümlenerek biter; yarım
     kalmış beyaz yorum çubukları görünmez. */
  flex:0 0 clamp(286px,22vw,332px);
  height:492px;
  overflow:hidden;
  scroll-snap-align:start;
  border:1px solid rgba(248,243,233,.13);
  border-radius:18px;
  background:var(--cream);
  box-shadow:0 20px 54px rgba(13,6,4,.22);
  opacity:.64;
  transform:scale(.965);
  transition:opacity .5s ease,transform .55s var(--ease-out),border-color .45s ease,box-shadow .45s ease;
  -webkit-mask-image:linear-gradient(180deg,#000 84%,rgba(0,0,0,.72) 94%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 84%,rgba(0,0,0,.72) 94%,transparent 100%);
}
.social__slide.is-active{
  opacity:1;
  transform:scale(1);
  border-color:rgba(212,127,97,.62);
  box-shadow:0 28px 70px rgba(13,6,4,.34),0 0 0 1px rgba(212,127,97,.12);
}

/* Instagram hem blockquote'a hem de yerine koyduğu iframe'e satır
   içi ölçü basar; ikisini de sabitlemek gerekiyor. */
.social__slide .instagram-media,
.social__slide iframe.instagram-media{
  min-width:0 !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  border-radius:18px !important;
  box-shadow:none !important;
}
/* embed yüklenene kadar yer tutucu */
.social:not(.is-loaded) .social__slide::after{
  content:"";
  display:block;
  height:100%;
  border-radius:4px;
  background:linear-gradient(160deg,rgba(58,42,31,.5),rgba(31,22,17,.5));
}

/* ————— sürükleme yakalayıcı —————
   Kartlar Instagram iframe'i olduğu için imleç olayları içeride
   yutuluyor ve fareyle sürüklemek mümkün olmuyordu. Her kartın
   üstüne şeffaf bir katman konur: basılı tutup sürükleme bu
   katmanda yakalanır, hareketsiz tıklamada gönderi açılır. */
.social__slide{ cursor:grab; }
.social__slide.is-dragging{ cursor:grabbing; }
.social__grab{
  position:absolute;
  inset:0;
  z-index:3;
  display:block;
  background:transparent;
  touch-action:pan-x pan-y;
}
/* ————— oklar + noktalar ————— */
.social__nav{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:clamp(26px,2.6vw,40px);
}
.social__arrow{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1px solid rgba(212,127,97,.48);
  border-radius:50%;
  color:var(--cream);
  transition:background .35s ease, color .35s ease, border-color .35s ease;
}
.social__arrow:hover{
  background:var(--brand-coral);
  color:var(--cream);
  border-color:var(--brand-coral);
}
.social__arrow svg{ width:40%; height:40%; stroke-width:1.7; }

.social__dots{ display:flex; gap:8px; }
.social__dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(248,243,233,.22);
  transition:width .4s var(--ease-out), background .35s ease;
}
.social__dot.is-on{ width:28px; background:var(--brand-coral); }

.social__fallback{
  margin:0;
  color:var(--on-dark-soft);
  font-size:14px;
}
.social__fallback a{ color:var(--brand-coral); text-decoration:underline; }
@media (max-width:700px){
  .social__head{ flex-direction:column; align-items:flex-start; }
  .social__slide{ flex:0 0 82vw; max-width:326px; height:470px; }
}

/* ============================================================
   BÖLÜM: page  (eski: css/page.css)
   ============================================================ */
/* ============================================================
   BOLÇİ · iç sayfalar (Hakkımızda, Belgeler, Haberler, …)
   ------------------------------------------------------------
   Ana sayfa sinematik ve koyu; iç sayfalar okunmak için var.
   Bu yüzden zemin parşömen krem, mürekkep çikolata. Renkler
   base.css token'larından gelir — palet tek yerden yönetilir.
   Hizalama .site-container ile, ana sayfayla aynı kenardan.
   ============================================================ */

.page{
  /* açık bölümlerin tonu hero'nun parşömeniyle aynı */
  background:
    radial-gradient(60% 45% at 82% 0%,rgba(201,154,100,.16),transparent 60%),
    var(--parchment);
  color:var(--ink-soft);
}

/* ————— sayfa başlığı ————— */
.page-hero{
  position:relative;
  padding:clamp(64px,7vw,110px) 0 clamp(46px,5vw,74px);
  border-bottom:1px solid var(--bronze-soft);
}
.page-hero__eyebrow{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 20px;
  color:var(--clay);
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
}
.page-hero__eyebrow::before{
  content:"";
  width:clamp(28px,3vw,54px);
  height:1px;
  background:var(--bronze-soft);
}
.page-hero h1{
  max-width:16ch;
  margin:0;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:clamp(46px,5.4vw,96px);
  font-weight:500;
  line-height:.98;                 /* Türkçe diakritik güvenliği */
  letter-spacing:-.025em;
}
.page-hero h1 em{ color:var(--clay); font-weight:400; }
.page-hero__lead{
  max-width:62ch;
  margin:26px 0 0;
  font-size:clamp(15px,1.1vw,18px);
  line-height:1.85;
}

/* ════════════════════════════════════════════════════════════
   GÖRSELLİ SAYFA BAŞLIĞI
   Parşömen başlık yerine sinematik bant: fotoğraf + sıcak perde.
   Sayfa hemen bir karakter kazanır, alt gövde açık kalır —
   böylece iç sayfalarda da koyu/açık ritmi sürer.
   ════════════════════════════════════════════════════════════ */
.page-hero--media{
  position:relative;
  /* menü şeffaf: fotoğraf onun altına uzanır, boşluk telafi edilir */
  margin-top:calc(var(--header-h) * -1);
  padding-top:var(--header-h);
  isolation:isolate;
  overflow:clip;
  display:flex;
  align-items:flex-end;
  min-height:clamp(280px,26vw,390px);
  /* DİKKAT: burada kısayol `padding` KULLANMA — yukarıdaki
     padding-top:var(--header-h) değerini sıfırlıyor ve şeffaf
     menü fotoğrafın üstüne biniyordu. */
  padding-bottom:clamp(38px,4vw,64px);
  border-bottom:0;
  background:var(--surface-3);
  color:var(--on-dark);
}
.page-hero__media{
  position:absolute;
  inset:0;
  z-index:0;
}
.page-hero__media img{
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
}
/* okunabilirlik perdesi — yazı alanı koyu, üst taraf açık kalır */
.page-hero--media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(0deg,rgba(20,11,6,.9) 0%,rgba(24,13,7,.5) 34%,rgba(26,14,7,.1) 62%),
    linear-gradient(90deg,rgba(20,11,6,.55),transparent 58%);
}
.page-hero--media > .site-container{ position:relative; z-index:2; }
.page-hero--media .page-hero__eyebrow{ color:var(--gold-pale); }
.page-hero--media .page-hero__eyebrow::before{ background:rgba(216,182,129,.6); }
.page-hero--media h1{ color:var(--on-dark); text-shadow:0 12px 40px rgba(0,0,0,.5); }
.page-hero--media h1 em{ color:var(--gold-pale); }
.page-hero--media .page-hero__lead{ color:var(--on-dark-soft); }

/* ————— görsel + metin ikilisi ————— */
.media-split{
  display:grid;
  /* görsel sütunu metinden biraz dar — fotoğraflar sayfayı yutmasın */
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,3.6vw,64px);
  align-items:center;
}
.media-split__media{
  position:relative;
  overflow:hidden;
  aspect-ratio:3/2;
  background:var(--sand-300);
}
.media-split__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--ease-out);
}
.media-split:hover .media-split__media img{ transform:scale(1.04); }
/* sırayı ters çevir — bloklar dönüşümlü aksın */
.media-split--reverse .media-split__media{ order:2; }

/* beyaz zeminli ürün fotoğrafları: multiply ile parşömene oturur,
   beyaz kutu gibi durmaz */
.media-split__media--product{
  aspect-ratio:4/3;
  background:none;
}
.media-split__media--product{ position:relative; }
/* Beyaz zeminli ürün fotoğrafı parşömende havada duruyordu.
   Arkasına sıcak bir ışık havuzu konunca ürün zemine oturuyor. */
.media-split__media--product::before{
  content:"";
  position:absolute;
  inset:4%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(201,154,100,.34),rgba(201,154,100,.1) 52%,transparent 72%);
  filter:blur(6px);
}
.media-split__media--product img{
  position:relative;
  z-index:1;
  object-fit:contain;
  mix-blend-mode:multiply;
}

@media (max-width:820px){
  .media-split{ grid-template-columns:1fr; }
  .media-split--reverse .media-split__media{ order:0; }
}

/* ════════════════════════════════════════════════════════════
   DEĞER KARTLARI · görsel üstte, başlık görselin içinde
   Düz metin kartı yerine: fotoğraf + üzerine düşen perde +
   altında açıklama. Kartlar tek tip olduğu için sayfa ızgara
   gibi okunur, fotoğraflar da dolgu değil taşıyıcı olur.
   ════════════════════════════════════════════════════════════ */
.value-grid{
  display:grid;
  /* auto-fit geniş ekranda 4'e çıkıyordu — satır başına 3 sabit */
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2vw,32px);
}
@media (max-width:980px){ .value-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .value-grid{ grid-template-columns:1fr; } }
.value-card{
  position:relative;
  overflow:hidden;
  border-radius:3px;
  /* Tam fotoğraf karo: "görsel + beyaz kutu" ikilisi düz duruyordu.
     Metin fotoğrafın üstünde, perdeyle okunur hâlde. */
  aspect-ratio:4/5;
  background:var(--surface-3);
  box-shadow:0 6px 20px rgba(60,36,20,.1);
  transition:transform .55s var(--ease-out), box-shadow .55s ease;
}
.value-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 58px rgba(46,27,14,.3);
}

.value-card__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.3s var(--ease-out);
}
.value-card:hover .value-card__img{ transform:scale(1.06); }

/* okunabilirlik perdesi — alt yarı neredeyse opak */
.value-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(0deg,
    rgba(11,6,3,.97) 0%,
    rgba(13,7,4,.93) 28%,
    rgba(16,9,5,.62) 52%,
    rgba(18,10,6,.14) 78%,
    transparent 100%);
  transition:opacity .5s ease;
}

/* altın ince iç çerçeve — karoya çerçeveli baskı hissi verir */
.value-card::after{
  content:"";
  position:absolute;
  inset:13px;
  z-index:3;
  border:1px solid rgba(216,182,129,.22);
  pointer-events:none;
  transition:border-color .5s ease, inset .5s var(--ease-out);
}
.value-card:hover::after{ border-color:rgba(216,182,129,.48); }

.value-card__body{
  position:absolute;
  inset:auto 0 0 0;
  z-index:2;
  padding:clamp(22px,2vw,32px);
}
.value-card__num{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  margin-bottom:16px;
  border:1px solid rgba(216,182,129,.55);
  border-radius:50%;
  color:var(--gold-pale);
  font:500 12px/1 var(--font-ui);
  letter-spacing:.06em;
}
/* .page-section h3 bu kuralı eziyordu (aynı özgüllük, sonra geliyor):
   başlık koyu kahveye dönüp fotoğrafın içinde kayboluyordu. */
.value-card .value-card__body h3{
  margin:0 0 12px;
  color:var(--on-dark);
  font-family:var(--font-display);
  font-size:clamp(24px,1.95vw,34px);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.015em;
  text-shadow:0 2px 5px rgba(0,0,0,.8),0 8px 30px rgba(0,0,0,.7);
}
.value-card .value-card__body h3::after{
  content:"";
  display:block;
  width:38px;
  height:1px;
  margin-top:14px;
  background:var(--gold-pale);
  opacity:.6;
}
.value-card__body p{
  margin:12px 0 0;
  color:rgba(255,244,229,.82);
  font-size:14px;
  line-height:1.7;
  text-shadow:0 2px 10px rgba(0,0,0,.85);
}
/* ════════════════════════════════════════════════════════════
   HİKÂYE BLOĞU · solda metin, sağda dar fotoğraf sütunu
   Fotoğraflar metnin yanında küçük kalır; bölüm okuma
   karakterini korur, görseller anlatıyı destekler.
   ════════════════════════════════════════════════════════════ */
.story-split{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(30px,4vw,72px);
  align-items:start;
}
/* Rakam şeridi sol sütunun içinde: metin kısa kaldığı için altında
   büyük bir boşluk oluşuyordu, iki sütun dengesizdi. Burada 3'lü
   ızgaraya düşer ve boşluğu doldurur. */
.story-split .fact-row{
  grid-template-columns:repeat(3,1fr);
  margin-top:clamp(30px,3.2vw,46px);
}
.story-split .fact-row div:nth-child(-n+3){
  border-bottom:1px solid rgba(169,124,67,.22);
}
.story-split .fact-row div:nth-child(3n){ border-right:0; }
.story-split .fact-row strong{ font-size:clamp(21px,1.6vw,30px); }
.story-split__text h2{ margin-top:0; }
.story-split__media{
  display:grid;
  gap:clamp(12px,1.4vw,20px);
}
.story-split__media figure{
  position:relative;
  margin:0;
  overflow:hidden;
  background:var(--surface-3);
  box-shadow:0 14px 34px rgba(52,30,15,.16);
}
.story-split__media img{
  display:block;
  width:100%;
  /* 4:3 iken sütun sol taraftan çok daha uzun kalıyordu */
  aspect-ratio:3/2;
  object-fit:cover;
  transition:transform 1.1s var(--ease-out);
}
.story-split__media figure:hover img{ transform:scale(1.05); }
.story-split__media figcaption{
  position:absolute;
  inset:auto 0 0 0;
  padding:clamp(26px,2.6vw,40px) clamp(14px,1.3vw,20px) clamp(12px,1.2vw,18px);
  background:linear-gradient(0deg,rgba(18,10,5,.94),rgba(18,10,5,.5) 55%,transparent);
  color:var(--on-dark);
}
.story-split__media figcaption b{
  display:block;
  margin-bottom:6px;
  color:var(--gold-pale);
  font:500 11px/1 var(--font-ui);
  letter-spacing:.12em;
}
.story-split__media figcaption span{
  font-family:var(--font-display);
  font-size:clamp(15px,1.15vw,19px);
  line-height:1.2;
}
@media (max-width:860px){
  .story-split{ grid-template-columns:1fr; }
  .story-split__media{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .story-split__media{ grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════════════════════
   ÖNCE / ŞİMDİ İKİLİSİ
   İki fotoğraf YAN YANA — ölçek karşılaştırmasını metin değil
   görsel anlatır. (Bu kural bir ara dosyadan düşmüştü; ızgara
   olmayınca iki fotoğraf tam genişlikte alt alta diziliyordu.)
   ════════════════════════════════════════════════════════════ */
.diptych{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(12px,1.5vw,24px);
  max-width:1040px;
  margin-top:clamp(30px,3.2vw,50px);
}
.diptych figure{
  position:relative;
  margin:0;
  overflow:hidden;
  background:var(--surface-3);
  box-shadow:0 18px 44px rgba(52,30,15,.18);
  transition:transform .6s var(--ease-out), box-shadow .6s ease;
}
/* Kademeli yerleşim: iki fotoğraf aynı hizada durunca düz bir
   şerit gibi okunuyordu. Biri aşağı, diğeri yukarı kayınca
   kompozisyon derinlik kazanıyor, göz soldan sağa akıyor. */
.diptych figure:first-child{ margin-top:clamp(16px,3vw,52px); }
.diptych figure:last-child { margin-bottom:clamp(16px,3vw,52px); }
.diptych figure:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px rgba(52,30,15,.26);
}
/* altın ince iç çerçeve */
.diptych figure::after{
  content:"";
  position:absolute;
  inset:11px;
  z-index:3;
  border:1px solid rgba(216,182,129,.3);
  pointer-events:none;
}
.diptych img{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  transition:transform 1.2s var(--ease-out);
}
.diptych figure:hover img{ transform:scale(1.04); }
.diptych figcaption{
  position:absolute;
  inset:auto 0 0 0;
  padding:clamp(30px,3vw,48px) clamp(18px,1.6vw,26px) clamp(15px,1.4vw,22px);
  background:linear-gradient(0deg,rgba(18,10,5,.92),rgba(18,10,5,.45) 55%,transparent);
  color:var(--on-dark);
}
.diptych figcaption b{
  display:inline-block;
  margin-bottom:11px;
  padding:6px 12px 5px;
  border:1px solid rgba(216,182,129,.5);
  color:var(--gold-pale);
  font:500 11px/1 var(--font-ui);
  letter-spacing:.12em;
  backdrop-filter:blur(4px);
}
.diptych figcaption span{
  font-family:var(--font-display);
  font-size:clamp(17px,1.6vw,26px);
  line-height:1.15;
}
@media (max-width:700px){
  .diptych{ grid-template-columns:1fr; }
  /* dar ekranda kademe bozulur — alt alta eşit dursunlar */
  .diptych figure:first-child{ margin-top:0; }
  .diptych figure:last-child { margin-bottom:0; }
}

/* ————— gövde ————— */
.page-body{ padding:clamp(56px,6vw,96px) 0 clamp(72px,8vw,120px); }
.page-section + .page-section{ margin-top:clamp(52px,5.5vw,88px); }
.page-section h2{
  margin:0 0 24px;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:clamp(30px,2.9vw,48px);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.02em;
}
.page-section h3{
  margin:0 0 10px;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:clamp(21px,1.7vw,27px);
  font-weight:600;
  line-height:1.15;
}
.page-section p{
  max-width:74ch;
  margin:0 0 18px;
  font-size:15px;
  line-height:1.9;
}
.page-section p:last-child{ margin-bottom:0; }
.page-section a:not([class]){
  color:var(--clay);
  border-bottom:1px solid var(--bronze-soft);
}
.page-section a:not([class]):hover{ color:var(--ink); }

/* ————— rakam şeridi ————— */
/* ════════════════════════════════════════════════════════════
   RAKAM ŞERİDİ
   Eskiden rakam ve etiket YAN YANA duruyordu: "BUGÜNKÜ TESİS",
   "AYLIK KAPASİTE" gibi uzun etiketler iki satıra kırılınca
   hücreler farklı yükseklikte kalıyor, taban çizgisi kayıyordu.
   auto-fit de sütun genişliklerini eşitsiz dağıtıyordu.
   Çözüm: 6 eşit sütun + rakam üstte, etiket altta.
   ════════════════════════════════════════════════════════════ */
.fact-row{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  margin:clamp(34px,4vw,54px) 0 0;
  border-block:1px solid var(--bronze-soft);
}
.fact-row div{
  display:flex;
  flex-direction:column;
  align-items:center;          /* hücre içeriği ortalı */
  justify-content:center;
  text-align:center;
  gap:10px;
  padding:clamp(22px,2.2vw,32px) clamp(12px,1.2vw,20px);
  border-right:1px solid rgba(169,124,67,.22);
}
.fact-row div:last-child{ border-right:0; }
.fact-row strong{
  color:var(--clay);
  font-family:var(--font-display);
  font-size:clamp(24px,2vw,38px);
  font-weight:600;
  line-height:1;
  white-space:nowrap;
}
.fact-row span{
  color:var(--ink-soft);
  font-size:11px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.09em;
}

@media (max-width:1100px){
  .fact-row{ grid-template-columns:repeat(3,1fr); }
  /* üst sıranın altına ayırıcı çizgi */
  .fact-row div:nth-child(-n+3){ border-bottom:1px solid rgba(169,124,67,.22); }
  .fact-row div:nth-child(3n){ border-right:0; }
}
@media (max-width:560px){
  .fact-row{ grid-template-columns:repeat(2,1fr); }
  .fact-row div:nth-child(2n){ border-right:0; }
  .fact-row div:nth-child(-n+4){ border-bottom:1px solid rgba(169,124,67,.22); }
}

/* ————— kart ızgarası (değerler · belgeler) ————— */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(16px,1.6vw,26px);
}
.card{
  padding:clamp(26px,2.4vw,38px);
  background:var(--cream);
  border:1px solid var(--bronze-soft);
  transition:transform .45s var(--ease-out), box-shadow .45s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 22px 46px rgba(58,33,16,.12); }
.card__index{
  display:block;
  margin-bottom:14px;
  color:var(--clay);
  font-family:var(--font-display);
  font-size:26px;
  font-weight:600;
}
.card p{ margin:0; font-size:14px; line-height:1.8; }

/* ————— mağaza listesi ————— */
.store-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(16px,1.6vw,26px);
}
.store{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:clamp(26px,2.4vw,36px);
  background:var(--cream);
  border:1px solid var(--bronze-soft);
}
.store h3{ margin:0; }
.store__tag{
  align-self:flex-start;
  padding:5px 12px;
  border:1px solid var(--bronze-soft);
  color:var(--clay);
  font-size:11px;
  font-weight:500;
  letter-spacing:.1em;
}
.store address{
  font-style:normal;
  font-size:14px;
  line-height:1.8;
}
.store__phone{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--bronze-soft);
  font-size:13px;
}
.store__phone a{ color:var(--ink); white-space:nowrap; }
.store__phone a:hover{ color:var(--clay); }

/* ————— haber listesi ————— */
.news-list{ border-top:1px solid var(--bronze-soft); }
.news{
  display:grid;
  grid-template-columns:minmax(96px,120px) 1fr;
  gap:clamp(16px,2.4vw,44px);
  align-items:baseline;
  padding:clamp(22px,2.2vw,32px) 0;
  border-bottom:1px solid var(--bronze-soft);
}
.news time{
  color:var(--clay);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  font-variant-numeric:lining-nums tabular-nums;
}
.news h3{ margin:0 0 8px; }
.news p{ max-width:70ch; margin:0; font-size:14px; line-height:1.8; }
.news__source{
  display:inline-block;
  margin-top:10px;
  color:var(--clay);
  font-size:11px;
  font-weight:500;
  letter-spacing:.1em;
}

/* ————— iletişim ————— */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(18px,2vw,32px);
}
.contact-card{
  padding:clamp(26px,2.4vw,36px);
  background:var(--cream);
  border:1px solid var(--bronze-soft);
}
.contact-card h3{ margin:0 0 14px; }
.contact-card p{ margin:0 0 8px; font-size:14px; line-height:1.8; }
.contact-card a{ color:var(--ink); }
.contact-card a:hover{ color:var(--clay); }

/* ————— sayfa sonu CTA ————— */
/* ════════════════════════════════════════════════════════════
   FOOTER — ana sayfa ve iç sayfalar ortak
   ════════════════════════════════════════════════════════════ */
.site-footer{
  padding:clamp(56px,6vw,88px) 0 30px;
  /* footer de yeşil: sayfa koyu kahveyle bitmesin */
  background:var(--surface-green-deep);
  color:var(--on-dark-soft);
}
.site-footer__grid{
  display:grid;
  grid-template-columns:minmax(240px,1.2fr) repeat(auto-fit,minmax(170px,1fr));
  gap:clamp(30px,3.4vw,60px);
}
.site-footer h4{
  margin:0 0 18px;
  color:var(--gold-pale);
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
}
.site-footer ul{ display:grid; gap:11px; }
.site-footer a{ font-size:13px; line-height:1.5; }
.site-footer a:hover{ color:var(--on-dark); }
/* Koyu zemin için krem renkli logo sürümü (logo-krem.png).
   Ölçü verilmezse görsel ham boyutunda (143px) duruyor ve
   footer sütununu eziyordu. */
.site-footer__logo{
  display:block;
  width:auto;
  height:clamp(38px,2.7vw,52px);
  margin-bottom:2px;
}

/* metin logo (yedek — artık kullanılmıyor) */
.site-footer__brand{
  font-family:var(--font-display);
  font-size:34px;
  font-weight:600;
  color:var(--on-dark);
  line-height:1.12;               /* ç sedillası için */
}
.site-footer__note{
  max-width:34ch;
  margin:14px 0 0;
  font-size:13px;
  line-height:1.8;
}
.site-footer__bottom{
  display:flex;
  flex-wrap:wrap;
  gap:12px 26px;
  justify-content:space-between;
  margin-top:clamp(40px,4vw,64px);
  padding-top:22px;
  border-top:1px solid rgba(235,191,151,.16);
  font-size:11px;
  letter-spacing:.06em;
}

@media (max-width:640px){
  .news{ grid-template-columns:1fr; gap:8px; }
}

/* ════════════════════════════════════════════════════════════
   ÜRÜN KARTLARI
   Fotoğraflar sonra gelecek. Görsel alanı şimdiden ayrıldı ve
   boş durmasın diye markanın kendi rozet formu filigran olarak
   kullanıldı — "eksik" değil, "sade" duruyor.

   Görsel eklemek için tek adım:
     <div class="product-card__media"> içine <img> koymak.
   Filigran ve doku otomatik gizlenir, düzen kaymaz.
   ════════════════════════════════════════════════════════════ */
.product-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2vw,30px);
  margin-top:clamp(30px,3.4vw,50px);
}
@media (max-width:1000px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .product-grid{ grid-template-columns:1fr; } }

/* KOYU KART: parşömen zeminde beyaz kutular soluk kalıyordu.
   Çikolata tonundaki kart hem markanın paletine oturuyor hem de
   fotoğraf geldiğinde onu çerçeveleyen doğal bir zemin sağlıyor. */
.product-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:3px;
  background:linear-gradient(170deg,var(--surface-1) 0%,var(--surface-3) 100%);
  border:1px solid rgba(216,182,129,.16);
  box-shadow:0 8px 26px rgba(45,26,13,.16);
  transition:transform .5s var(--ease-out), box-shadow .5s ease, border-color .5s ease;
}
.product-card:hover{
  transform:translateY(-6px);
  border-color:rgba(216,182,129,.44);
  box-shadow:0 30px 60px rgba(35,20,10,.34);
}

/* ————— görsel alanı ————— */
.product-card__media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:
    radial-gradient(75% 65% at 50% 40%,rgba(255,252,246,.9),transparent 70%),
    linear-gradient(155deg,var(--sand-100) 0%,var(--sand-200) 55%,var(--sand-300) 100%);
  border-bottom:1px solid rgba(169,124,67,.24);
}
/* marka rozeti · çok soluk filigran */
.product-card__media::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("assets/img/logo.png") center/44% no-repeat;
  opacity:.08;
  transition:opacity .5s ease, transform .8s var(--ease-out);
}
.product-card:hover .product-card__media::before{
  opacity:.13;
  transform:scale(1.04);
}
/* gerçek fotoğraf geldiğinde filigran gizlenir */
.product-card__media:has(img)::before{ display:none; }
.product-card__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.1s var(--ease-out);
}
.product-card:hover .product-card__media img{ transform:scale(1.05); }

/* Sıra numarası madalyonu kaldırıldı: kartın açık görsel
   alanıyla koyu gövdesinin sınırına denk geliyor ve hiçbir
   zeminde okunmuyordu. */

/* köşe etiketi (TESCİLLİ, HEDİYE …) */
.product-card__tag{
  position:absolute;
  top:clamp(12px,1.1vw,16px);
  right:clamp(12px,1.1vw,16px);
  z-index:2;
  padding:6px 11px 5px;
  border:1px solid rgba(107,70,48,.34);
  color:var(--cocoa);
  background:rgba(255,253,249,.78);
  font-size:11px;
  font-weight:500;
  letter-spacing:.1em;
}

/* ————— metin ————— */
.product-card__body{
  flex:1 1 auto;
  padding:clamp(30px,2.4vw,38px) clamp(20px,1.8vw,28px) clamp(24px,2.1vw,32px);
}
.product-card__body h3{
  margin:0 0 14px;
  color:var(--on-dark);
  font-family:var(--font-display);
  font-size:clamp(21px,1.7vw,28px);
  font-weight:600;
  line-height:1.1;                 /* Türkçe diakritik güvenliği */
  letter-spacing:-.015em;
}
.product-card__body h3::after{
  content:"";
  display:block;
  width:32px;
  height:1px;
  margin-top:13px;
  background:var(--gold-pale);
  opacity:.7;
  transition:width .5s var(--ease-out);
}
.product-card:hover .product-card__body h3::after{ width:58px; }
.product-card__body p{
  margin:0;
  color:rgba(255,244,229,.74);
  font-size:14px;
  line-height:1.72;
}





/* ════════════════════════════════════════════════════════════
   SORU KARUSELİ
   Ortada aktif kart, iki yanda komşular kısmen görünür ve soluk
   durur. Ok tuşları / noktalar / sürükleme: js/qa.js.
   ════════════════════════════════════════════════════════════ */
.qa{
  position:relative;
  margin-top:clamp(34px,3.6vw,54px);
}
.qa__viewport{
  overflow:hidden;
  /* kenarlarda komşu kartlar erisin, sert kesilmesin */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.qa__track{
  display:flex;
  align-items:stretch;
  gap:clamp(16px,1.8vw,30px);
  transition:transform .85s var(--ease-out);
  will-change:transform;
  cursor:grab;
}
.qa__track:active{ cursor:grabbing; }

.qa__card{
  position:relative;
  flex:0 0 min(62%,620px);
  padding:clamp(34px,3.4vw,56px) clamp(28px,3vw,52px);
  border:1px solid var(--bronze-soft);
  border-radius:4px;
  background:linear-gradient(165deg,#FBF4E7 0%,var(--sand-100) 100%);
  box-shadow:0 10px 30px rgba(58,33,16,.08);
  opacity:.5;
  transform:scale(.93);
  transition:opacity .7s ease, transform .8s var(--ease-out), box-shadow .7s ease;
}
/* AKTİF KART KOYU: hepsi açık kremken kartlar parşömen zeminde
   yassı duruyordu, hangisinin aktif olduğu da zayıf okunuyordu.
   Odaktaki kart çikolata tonuna geçince hem kontrast hem
   hiyerarşi kuruluyor; komşular açık ve soluk kalıyor. */
.qa__card.is-current{
  opacity:1;
  transform:none;
  border-color:rgba(216,182,129,.34);
  background:
    radial-gradient(70% 60% at 88% 4%,rgba(190,132,68,.24),transparent 60%),
    linear-gradient(165deg,#33200F 0%,var(--surface-3) 62%,#1C1007 100%);
  box-shadow:0 34px 74px rgba(35,20,10,.34);
}
/* altın ince iç çerçeve — yalnızca odaktaki kartta */
.qa__card.is-current::after{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(216,182,129,.2);
  pointer-events:none;
}
.qa__card.is-current .qa__mark{ color:var(--gold-pale); opacity:.34; }
.qa__card.is-current .qa__label{ color:var(--gold-pale); }
.qa__card.is-current h3{ color:var(--on-dark); }
.qa__card.is-current .qa__answer{ border-top-color:rgba(216,182,129,.26); }
.qa__card.is-current .qa__by{ color:var(--gold-pale); }
.qa__card.is-current .qa__answer p{ color:rgba(255,244,229,.78); }
.qa__card.is-current .qa__answer a{ color:var(--gold-pale); }

.qa__mark{
  position:absolute;
  top:clamp(10px,1.2vw,20px);
  right:clamp(20px,2vw,34px);
  color:var(--clay);
  opacity:.22;
  font-family:var(--font-display);
  font-size:clamp(64px,6vw,110px);
  line-height:1;
  pointer-events:none;
}
.qa__label{
  margin:0 0 14px;
  color:var(--clay);
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
}
.qa__card h3{
  max-width:22ch;
  margin:0;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:clamp(24px,2.3vw,38px);
  font-weight:600;
  line-height:1.15;                /* Türkçe diakritik güvenliği */
  letter-spacing:-.02em;
}
.qa__answer{
  margin-top:clamp(22px,2.2vw,32px);
  padding-top:clamp(20px,2vw,28px);
  border-top:1px solid rgba(169,124,67,.28);
}
.qa__by{
  display:block;
  margin-bottom:10px;
  color:var(--cocoa);
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
}
.qa__answer p{
  max-width:62ch;
  margin:0;
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.85;
}
.qa__answer a{ color:var(--clay); text-decoration:underline; text-underline-offset:3px; }

/* ————— oklar ————— */
.qa__arrow{
  position:absolute;
  top:50%;
  z-index:3;
  display:grid;
  place-items:center;
  width:clamp(44px,3.4vw,56px);
  height:clamp(44px,3.4vw,56px);
  margin-top:calc(clamp(44px,3.4vw,56px) / -2);
  border-radius:50%;
  background:var(--cocoa-900);
  color:var(--gold-pale);
  box-shadow:0 12px 30px rgba(45,26,13,.3);
  transition:background .35s ease, transform .35s var(--ease-out);
}
.qa__arrow:hover{ background:var(--clay); color:var(--ink); transform:scale(1.06); }
.qa__arrow svg{ width:42%; height:42%; stroke-width:1.7; }
.qa__arrow--prev{ left:clamp(4px,3vw,60px); }
.qa__arrow--next{ right:clamp(4px,3vw,60px); }

/* ————— noktalar ————— */
.qa__dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:clamp(26px,2.6vw,40px);
}
.qa__dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:rgba(169,124,67,.34);
  transition:width .4s var(--ease-out), background .35s ease;
}
.qa__dot.is-on{
  width:30px;
  background:var(--clay);
}

@media (max-width:820px){
  .qa__card{ flex-basis:min(84%,520px); }
  .qa__arrow--prev{ left:2px; }
  .qa__arrow--next{ right:2px; }
}
/* ════════════════════════════════════════════════════════════
   KOYU BÖLÜM · tam genişlik kaçış (breakout)
   Bölüm container'ın içinde duruyor ama zemini ekranın tamamına
   yayılıyor; iç boşluk container kenarına eşit olduğu için yazı
   hizası bozulmaz. Açık kartlar koyu zeminde öne çıkar.
   ════════════════════════════════════════════════════════════ */
.page-section--dark{
  position:relative;
  margin-inline:calc(50% - 50vw);
  padding:clamp(60px,6vw,100px) var(--container-edge) clamp(66px,6.4vw,106px);
  color:var(--on-dark);
  background:
    radial-gradient(58% 46% at 86% 6%,rgba(212,127,97,.22),transparent 62%),
    linear-gradient(180deg,var(--surface-green) 0%,var(--surface-green-deep) 100%);
}
.page-section--dark > h2{ color:var(--on-dark); }
.page-section--dark .section-lead{ color:var(--on-dark); }
/* bağlantı çizgisi koyu zeminde görünür kalsın */
.page-section--dark .process::before{
  background:linear-gradient(90deg,
    rgba(216,182,129,.1),
    rgba(216,182,129,.45) 30%,
    rgba(216,182,129,.45) 70%,
    rgba(216,182,129,.1));
}
/* madalyon koyu zeminde kaybolmasın — altın dolgu */
.page-section--dark .process__icon{
  background:var(--gold-pale);
  color:#231308;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.page-section--dark .process__step:hover .process__icon{ background:#F0D6A8; }
/* ════════════════════════════════════════════════════════════
   SÜREÇ ADIMLARI · ikonlu, kademeli renkli
   Dört kutu birbirinin kopyasıydı. Artık adım ilerledikçe ikon
   madalyonunun tonu koyulaşıyor (açık karamel → koyu kakao):
   renk, sürecin ilerlediğini kendisi anlatıyor.
   ════════════════════════════════════════════════════════════ */
/* Bölüm giriş cümlesi — normal gövde metninden bir tık koyu ve
   büyük. Açık zeminde soluk kalmasın diye ayrı sınıf. */
.section-lead{
  max-width:60ch;
  color:var(--ink);
  font-size:clamp(15px,1.15vw,18px);
  line-height:1.8;
}
.process{
  --dot:34px;
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,1.8vw,28px);
  margin:clamp(44px,4.4vw,68px) 0 0;
  padding:0;
  list-style:none;
  counter-reset:none;
}
/* adımları birbirine bağlayan yatay çizgi — madalyonların hizasında */
.process::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:calc(var(--dot) / 2);
  height:1px;
  background:linear-gradient(90deg,
    rgba(199,154,100,.15),
    rgba(169,124,67,.5) 30%,
    rgba(107,70,48,.5) 70%,
    rgba(107,70,48,.15));
}

.process__step{
  position:relative;
  /* overflow:hidden KULLANMA — ikon madalyonu kartın üst kenarından
     taşıyor, kırpılınca yarısı kayboluyor. Arkadaki dev rakam bu
     yüzden kart sınırları içinde konumlandırıldı. */
  padding:calc(var(--dot) / 2 + clamp(26px,2.4vw,38px)) clamp(20px,1.8vw,30px) clamp(28px,2.4vw,38px);
  border:1px solid var(--bronze-soft);
  border-radius:3px;
  background:linear-gradient(165deg,#FDF8EE 0%,var(--sand-100) 58%,#EDE0C8 100%);
  box-shadow:0 14px 34px rgba(20,11,6,.34);
  transition:transform .5s var(--ease-out), box-shadow .5s ease, border-color .5s ease;
}
/* kartın arkasında dev soluk sıra numarası — düz dikdörtgen
   hissini kırar, derinlik verir */
.process__step::after{
  content:attr(data-step);
  position:absolute;
  right:clamp(10px,1vw,18px);
  bottom:clamp(6px,.6vw,12px);
  color:var(--clay);
  opacity:.13;
  font-family:var(--font-display);
  font-size:clamp(64px,5.4vw,104px);
  font-weight:600;
  line-height:.72;
  pointer-events:none;
  transition:opacity .5s ease, transform .6s var(--ease-out);
}
.process__step:hover::after{ opacity:.17; transform:translateY(-4px); }
.process__step:hover{
  transform:translateY(-5px);
  border-color:rgba(169,124,67,.5);
  box-shadow:0 24px 48px rgba(58,33,16,.16);
}

/* ————— ikon madalyonu ————— */
.process__icon{
  position:absolute;
  top:calc(var(--dot) / -2);
  left:clamp(20px,1.8vw,30px);
  display:grid;
  place-items:center;
  width:var(--dot);
  height:var(--dot);
  border-radius:50%;
  color:#FFF6E9;
  box-shadow:0 6px 16px rgba(58,33,16,.24);
  transition:transform .5s var(--ease-out), background .45s ease;
}
.process__step:hover .process__icon{ transform:scale(1.08) rotate(-4deg); }
.process__icon svg{
  width:56%;
  height:56%;
  stroke-width:1.6;
}

/* TEK VURGU: dört farklı kahve tonu denendi, yan yana gelince
   çamurlu duruyordu. Madalyonlar tek renkte — ayrım rengi değil,
   ikonu ve sıra numarası taşıyor. */
.process__icon{ background:var(--cocoa-900); }
/* kartın üst kenarında ince altın çizgi */
.process__step::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--clay) 22%,var(--clay) 78%,transparent);
  opacity:.55;
}
.process__step:hover .process__icon{ background:var(--clay); }

/* Küçük sıra numarası kaldırıldı: arkadaki dev rakam zaten sırayı
   söylüyor, ikisi birden gereksiz tekrar oluyordu. */
.process__num{ display:none; }
.process__step h3{
  position:relative;
  z-index:1;
  margin:0 0 12px;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:clamp(19px,1.5vw,25px);
  font-weight:600;
  line-height:1.2;                 /* Türkçe diakritik güvenliği */
  letter-spacing:-.015em;
}
.process__step p{
  position:relative;
  z-index:1;
  margin:0;
  color:var(--ink-soft);
  font-size:14px;
  line-height:1.72;
}

@media (max-width:980px){
  .process{ grid-template-columns:repeat(2,1fr); row-gap:clamp(34px,4vw,50px); }
  .process::before{ display:none; }
}
@media (max-width:560px){
  .process{ grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════════════════════
   İKİNCİL RENK KATMANI · koyu orman yeşili
   ------------------------------------------------------------
   Palet 105 renkti ama hepsi tek ailedendi (kahve/krem), bu
   yüzden site "her yerde aynı" görünüyordu. Yeşil yalnızca
   EYLEM ve VURGU noktalarında kullanılır: birincil butonlar,
   bağlantılar, aktif göstergeler, küçük işaretler.
   Zemin ve tipografi kahve ailesinde kalır — kontrast buradan.
   ════════════════════════════════════════════════════════════ */


/* ————— bağlantılar ————— */
.page-section a:not([class]){
  color:var(--accent);
  border-bottom-color:rgba(212,127,97,.35);
}
.page-section a:not([class]):hover{ color:var(--accent-deep); }
.qa__answer a,
.faq__body a{ color:var(--accent); }

/* ————— aktif göstergeler ————— */
.qa__dot.is-on{ background:var(--accent); }
.collections__progress{ background:var(--accent); color:var(--on-accent); }
.collections__progress:hover{ background:var(--accent-deep); }
.collections__progress-ring{ border-color:var(--gold-pale); }

/* ————— küçük işaretler ————— */
.process__icon{ background:var(--accent); color:var(--on-accent); }
.process__step:hover .process__icon{ background:var(--accent-deep); }
.page-section--dark .process__icon{ background:var(--gold-pale); color:var(--accent-deep); }
.page-section--dark .process__step:hover .process__icon{ background:var(--gold-pale); }

.card__index,
.store__tag{
  color:var(--accent);
  border-color:rgba(212,127,97,.32);
}

/* ————— iç sayfa başlık vurgusu ————— */
.page-hero h1 em{ color:var(--accent); }
.page-hero--media h1 em{ color:var(--gold-pale); }   /* koyu zeminde altın kalır */

/* ————— seçim rengi ————— */
::selection{ background:var(--accent); color:var(--on-accent); }

/* ════════════════════════════════════════════════════════════
   ALINTI BLOĞU
   Uzun metin akışını kesen tek cümlelik vurgu. Sayfa boyunca
   aynı "başlık + paragraf + fotoğraf" ritmi tekrarlanınca
   düz okunuyordu; bu blok nefes ve renk getiriyor.
   ════════════════════════════════════════════════════════════ */
.pullquote{
  position:relative;
  margin:clamp(60px,6vw,100px) 0;
  padding:clamp(44px,4.4vw,72px) clamp(30px,3.4vw,58px);
  border-left:3px solid var(--accent);
  background:
    radial-gradient(70% 120% at 92% 10%,var(--accent-soft),transparent 60%),
    var(--sand-100);
}
.pullquote blockquote{
  max-width:26ch;
  margin:0;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:clamp(30px,3.2vw,54px);
  font-weight:400;
  line-height:1.12;                /* Türkçe diakritik güvenliği */
  letter-spacing:-.02em;
}
.pullquote blockquote em{
  color:var(--accent);
  font-style:italic;
}
.pullquote figcaption{
  margin-top:22px;
  color:var(--accent);
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
}
/* köşedeki büyük tırnak */
.pullquote::after{
  content:"”";
  position:absolute;
  right:clamp(20px,2.4vw,42px);
  top:clamp(6px,1vw,18px);
  color:var(--accent);
  opacity:.16;
  font-family:var(--font-display);
  font-size:clamp(110px,10vw,190px);
  line-height:1;
  pointer-events:none;
}



/* ════════════════════════════════════════════════════════════
   BİR BAKIŞTA · rakam şeridi
   Sayfa açılır açılmaz şirketin ölçeğini veren blok.
   ════════════════════════════════════════════════════════════ */
.glance{
  padding:clamp(46px,4.6vw,74px) 0 clamp(10px,1vw,18px);
}
.glance__label{
  margin:0 0 clamp(20px,2vw,30px);
  color:var(--accent);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
}
.glance .fact-row{
  grid-template-columns:repeat(4,1fr);
  margin-top:0;
}
.glance .fact-row div:nth-child(-n+4){ border-bottom:1px solid rgba(169,124,67,.22); }
.glance .fact-row div:nth-child(4n){ border-right:0; }
@media (max-width:900px){
  .glance .fact-row{ grid-template-columns:repeat(2,1fr); }
  .glance .fact-row div:nth-child(2n){ border-right:0; }
  .glance .fact-row div:nth-child(-n+6){ border-bottom:1px solid rgba(169,124,67,.22); }
}

/* ════════════════════════════════════════════════════════════
   NUMARALI SÜTUNLAR (01–04)
   Her blok: bir yanda fotoğraf, diğer yanda numara + başlık +
   metin. Sıra dönüşümlü ilerler; numara büyük ve soluk durur,
   sayfaya ritim veren şey bu tekrar.
   ════════════════════════════════════════════════════════════ */
.pillar{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,4vw,76px);
  align-items:center;
  padding:clamp(52px,5.4vw,86px) 0;
  border-top:1px solid rgba(169,124,67,.2);
}
.pillar:first-of-type{ border-top:0; }
.pillar--reverse .pillar__media{ order:2; }

.pillar__media{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
  border-radius:3px;
  background:var(--sand-300);
}
.pillar__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--ease-out);
}
.pillar:hover .pillar__media img{ transform:scale(1.04); }

.pillar__num{
  display:block;
  margin-bottom:14px;
  color:var(--accent);
  font-family:var(--font-display);
  font-size:clamp(38px,3.6vw,62px);
  font-weight:400;
  line-height:1;
  opacity:.42;
}
.pillar__copy h2{
  margin:0 0 20px;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:clamp(32px,3.2vw,56px);
  font-weight:400;
  line-height:1.06;                /* Türkçe diakritik güvenliği */
  letter-spacing:-.025em;
}
.pillar__copy h2::after{
  content:"";
  display:block;
  width:46px;
  height:2px;
  margin-top:18px;
  background:var(--accent);
  opacity:.5;
}
.pillar__copy p{
  max-width:56ch;
  margin:18px 0 0;
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.85;
}
.pillar__copy em{ color:var(--accent); font-style:italic; }
.pillar__copy strong{ color:var(--ink); font-weight:600; }

@media (max-width:860px){
  .pillar{ grid-template-columns:1fr; }
  .pillar--reverse .pillar__media{ order:0; }
}

/* ============================================================
   BÖLÜM: contact  (eski: css/contact.css)
   ============================================================ */
/* ============================================================
   BOLÇİ · İletişim
   ------------------------------------------------------------
   Solda koyu bilgi paneli, sağda form. Panel yeşil (sitedeki
   ikincil yüzey), form parşömen üstünde açık kart.
   ============================================================ */

.contact{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  overflow:hidden;
  border-radius:4px;
  border:1px solid rgba(169,124,67,.2);
  box-shadow:0 24px 60px rgba(58,33,16,.12);
  margin-top:clamp(40px,4vw,64px);
}

/* ————— sol · bilgi paneli ————— */
.contact__info{
  position:relative;
  padding:clamp(36px,3.6vw,58px);
  color:var(--on-dark);
  background:
    radial-gradient(70% 50% at 88% 4%,rgba(212,127,97,.24),transparent 62%),
    linear-gradient(165deg,var(--surface-green) 0%,var(--surface-green-deep) 100%);
}
/* köşedeki soluk marka filigranı */
.contact__info::after{
  content:"";
  position:absolute;
  right:-40px;
  bottom:-30px;
  width:230px;
  height:150px;
  background:url("assets/img/logo-krem.png") center/contain no-repeat;
  opacity:.07;
  pointer-events:none;
}
.contact__label{
  margin:0 0 clamp(26px,2.6vw,38px);
  color:var(--gold-pale);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
}

.contact__row{
  display:flex;
  gap:16px;
  padding:clamp(18px,1.8vw,24px) 0;
  border-top:1px solid rgba(216,182,129,.18);
}
.contact__row:first-of-type{ border-top:0; padding-top:0; }

.contact__icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(216,182,129,.35);
  color:var(--gold-pale);
}
.contact__icon svg{ width:19px; height:19px; stroke-width:1.4; }

.contact__row h3{
  margin:0 0 6px;
  color:var(--on-dark);
  font-family:var(--font-display);
  font-size:19px;
  font-weight:400;
  line-height:1.2;                 /* Türkçe diakritik güvenliği */
}
.contact__row p,
.contact__row address{
  margin:0 0 4px;
  color:var(--on-dark-soft);
  font-size:14px;
  font-style:normal;
  line-height:1.7;
}
.contact__row a{ color:var(--gold-pale); }
.contact__row a:hover{ text-decoration:underline; }

.contact__ig{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:clamp(22px,2.2vw,32px);
  color:var(--gold-pale);
  font-size:13px;
  letter-spacing:.04em;
}
.contact__ig svg{ width:18px; height:18px; stroke-width:1.5; }
.contact__ig:hover{ text-decoration:underline; }

/* ————— sağ · form ————— */
.contact__form{
  padding:clamp(34px,3.6vw,56px);
  background:#FFFDF9;
}

.field-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px,1.8vw,26px);
}
.field{
  position:relative;
  display:flex;
  flex-direction:column;
  /* etiket ile alan arası: 9px fazla sıkışıktı */
  gap:14px;
  margin:0 0 clamp(22px,2.2vw,32px);
}
.field-grid .field{ margin-bottom:0; }
/* mesaj alanı ızgaranın hemen altında; araya biraz daha pay */
.field-grid + .field{ margin-top:clamp(22px,2.2vw,32px); }

.field label{
  color:var(--ink);
  font-size:13px;
  font-weight:500;
  letter-spacing:.02em;
}
.field label b{ color:var(--accent); font-weight:500; }

.field input,
.field select,
.field textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid rgba(169,124,67,.32);
  border-radius:4px;
  background:var(--sand-100);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.5;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field textarea{
  resize:vertical;
  min-height:170px;
  padding:18px 16px;
}
.field input::placeholder,
.field textarea::placeholder{ color:rgba(94,84,75,.55); }

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:0;
  border-color:var(--accent);
  background:#fff;
  box-shadow:0 0 0 3px var(--accent-soft);
}
/* doğrulama hatası */
.field.is-error input,
.field.is-error select,
.field.is-error textarea{
  border-color:#A33B2A;
  box-shadow:0 0 0 3px rgba(163,59,42,.1);
}

.field__counter{
  align-self:flex-end;
  color:var(--ink-soft);
  font-size:12px;
}

/* ————— onay kutusu ————— */
.field-check{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:clamp(6px,1vw,14px) 0 clamp(24px,2.4vw,34px);
  color:var(--ink-soft);
  font-size:14px;
  line-height:1.6;
  cursor:pointer;
}
.field-check input{
  flex:0 0 auto;
  width:19px;
  height:19px;
  margin-top:1px;
  accent-color:var(--accent);
  cursor:pointer;
}
.field-check.is-error span{ color:#A33B2A; }

/* ————— gönderim notu ————— */
.form-note{
  margin:18px 0 0;
  font-size:14px;
  line-height:1.7;
  min-height:1.2em;
}
.form-note.is-ok{ color:var(--accent); }
.form-note.is-error{ color:#A33B2A; }

@media (max-width:900px){
  .contact{ grid-template-columns:1fr; }
  .contact__info::after{ display:none; }
}
@media (max-width:560px){
  .field-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   BÖLÜM: reveal  (eski: css/reveal.css)
   ============================================================ */
/* ============================================================
   BOLÇİ · açılış efektleri
   ------------------------------------------------------------
   Öğeler görüş alanına girince yumuşakça belirir. Hedefler
   js/reveal.js tarafından işaretlenir — HTML'de data-reveal
   yazmak gerekmez, düzen dosyaları temiz kalır.

   .reveal-ready sınıfı <head>'deki minik satır içi script ile
   HTML kök öğesine eklenir: JS kapalıysa hiçbir şey gizlenmez,
   sayfa olduğu gibi görünür (progressive enhancement).
   ============================================================ */

html.reveal-ready [data-reveal]{
  opacity:0;
  transform:translateY(30px);
  transition:
    opacity .85s var(--ease-soft),
    transform 1s var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform;
}

/* yön çeşitleri */
html.reveal-ready [data-reveal="left"] { transform:translateX(-36px); }
html.reveal-ready [data-reveal="right"]{ transform:translateX(36px); }
html.reveal-ready [data-reveal="zoom"] { transform:scale(.96); }
html.reveal-ready [data-reveal="fade"] { transform:none; }

/* görünür duruma geçiş */
html.reveal-ready [data-reveal].is-in{
  opacity:1;
  transform:none;
}

/* efekt bittikten sonra will-change bırakılır (bellek) */
html.reveal-ready [data-reveal].is-done{ will-change:auto; }

/* ————— görsel şeritlerde hafif yaklaşma ————— */
html.reveal-ready .media-band img,
html.reveal-ready .page-hero__media img{
  transform:scale(1.07);
  transition:transform 1.8s var(--ease-out);
}
html.reveal-ready .media-band.is-in img,
html.reveal-ready .page-hero--media.is-in img{ transform:scale(1); }

@media (prefers-reduced-motion:reduce){
  html.reveal-ready [data-reveal],
  html.reveal-ready .media-band img,
  html.reveal-ready .page-hero__media img{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* ============================================================
   BÖLÜM: ui  (eski: css/ui.css)
   ============================================================ */
/* ============================================================
   BOLÇİ · ORTAK ARAYÜZ KATMANI
   ------------------------------------------------------------
   Sitede 13 ayrı buton kuralı vardı; hepsi kendi ölçüsünü,
   rengini ve hover davranışını taşıyordu. Sonuç: aynı görünen
   ama aynı olmayan butonlar.

   Burada tek bir sistem tanımlanır ve mevcut sınıflara toplu
   olarak uygulanır — HTML'e dokunmadan. Bu dosya EN SON yüklenir,
   bu yüzden bileşen dosyalarındaki eski kuralları ezer.

   İki biçim vardır:
     · dolu   → birincil eylem (yeşil zemin)
     · kontur → ikincil eylem (çerçeve, hover'da dolar)
   Koyu zeminlerde ikisi de açık tonda çalışır.
   ============================================================ */

/* ————— ortak taban ————— */
.hero-cta,
.bolu__cta,
.gift-band__cta,
.social__follow,
.collection-card__link,
.nav-cta,
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-width:0;
  padding:16px 30px;
  border:1px solid transparent;
  border-radius:999px;
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:500;
  letter-spacing:.06em;
  line-height:1;
  white-space:nowrap;
  text-align:center;
  overflow:visible;
  background-image:none;
  background-size:auto;
  box-shadow:none;
  outline:0;
  /* Hover HIZLI olmalı: --ease-out (cubic-bezier(.16,1,.3,1))
     uzun kuyruklu bir eğri; giriş animasyonlarında doğru ama
     imleç etkileşiminde gecikmiş hissettiriyordu. Kısa süre +
     düz çıkış eğrisi. */
  transition:
    background-color .16s ease-out,
    border-color .16s ease-out,
    color .16s ease-out,
    transform .16s ease-out,
    box-shadow .2s ease-out;
}

/* Bileşen dosyalarındaki eski geçiş tanımlarını kesin olarak
   ezmek için eleman + sınıf seçicisi (özgüllük bir tık yüksek). */
a.hero-cta,
a.bolu__cta,
a.gift-band__cta,
a.social__follow,
a.collection-card__link,
a.nav-cta{
  transition:
    background-color .16s ease-out,
    border-color .16s ease-out,
    color .16s ease-out,
    transform .16s ease-out,
    box-shadow .2s ease-out;
}

/* eski kuralların bıraktığı dolgu/kaydırma efektlerini kapat */
.hero-cta::before,
.bolu__cta::before,
.gift-band__cta::before,
.collection-card__link::before{
  content:none !important;
}

/* Bütün butonlar aynı mercan marka rengini kullanır. */
.hero-cta,
.hero-cta--ghost,
.bolu__cta,
.gift-band__cta,
.social__follow,
.collection-card__link,
.nav-cta,
.btn,
.btn--primary{
  background-color:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
}

/* Hover'da paletin ikinci rengi olan koyu çikolataya döner. */
.hero-cta:hover,
.hero-cta--ghost:hover,
.bolu__cta:hover,
.gift-band__cta:hover,
.social__follow:hover,
.collection-card__link:hover,
.nav-cta:hover,
.btn:hover,
.hero-cta:focus-visible,
.hero-cta--ghost:focus-visible,
.bolu__cta:focus-visible,
.gift-band__cta:focus-visible,
.social__follow:focus-visible,
.collection-card__link:focus-visible,
.btn:focus-visible{
  background-color:var(--brand-brown);
  border-color:var(--brand-brown);
  color:var(--on-accent);
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(43,26,20,.28);
}

/* Buton içindeki ok ve ikonlar — TEK KURAL.
   Seçiciyi tek tek saymak yerine ortak buton listesinin
   içindeki svg'ler hedeflenir; yeni buton eklenince de
   otomatik kapsanır. */
.hero-cta svg,
.hero-cta--ghost svg,
.bolu__cta svg,
.gift-band__cta svg,
.social__follow svg,
.collection-card__link svg,
.nav-cta svg,
.btn svg{
  width:22px;
  height:auto;
  flex:0 0 auto;
  stroke-width:1.4;
  transition:transform .18s ease-out;
}
/* Instagram logosu kare — ok değil, kaydırma uygulanmaz */
.social__follow svg{ width:17px; }

.hero-cta:hover svg,
.hero-cta--ghost:hover svg,
.bolu__cta:hover svg,
.gift-band__cta:hover svg,
.collection-card__link:hover svg,
.btn:hover svg{ transform:translateX(4px); }

/* koleksiyon kartındaki link eski çizgisini bırakır */
.collection-card__link i{ display:none; }
.collection-card__link span{ position:static; }

/* klavye odağı — her butonda aynı */
.hero-cta:focus-visible,
.bolu__cta:focus-visible,
.gift-band__cta:focus-visible,
.social__follow:focus-visible,
.collection-card__link:focus-visible,
.btn:focus-visible{
  box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--accent);
}


/* ════════════════════════════════════════════════════════════
   AÇIK ZEMİNLERDE YEŞİLE DÖNEN YAZILAR
   Hepsi değil — yalnızca "etiket / sınıflandırma" işi gören
   küçük yazılar. Başlıklar, gövde metni, rakamlar ve bölüm
   eyebrow'ları kahve ailesinde kalır; yoksa ikincil renk
   vurgu olmaktan çıkıp yeni bir tekdüzeliğe dönüşür.
   ════════════════════════════════════════════════════════════ */
.page-hero__eyebrow,
.card__index,
.store__tag,
.news__source,
.qa__label{
  color:var(--accent);
}
.page-hero__eyebrow::before{ background:var(--accent); opacity:.5; }
.store__tag{ border-color:rgba(212,127,97,.34); }

/* koyu zeminde yeşil okunmuyor — orada altın kalır */
.page-hero--media .page-hero__eyebrow{ color:var(--gold-pale); }
.page-hero--media .page-hero__eyebrow::before{ background:var(--gold-pale); opacity:.6; }
.qa__card.is-current .qa__label{ color:var(--gold-pale); }

/* ————— GİRİŞ GECİKMESİ HOVER'I BEKLETMESİN —————
   Bölümlerin açılış animasyonu öğelere transition-delay veriyor
   (ör. .gift-band__cta için .44s). Bu değer hover'da da geçerli
   kaldığı için buton yarım saniye gecikmeyle tepki veriyordu.
   Hover/odak durumunda gecikme sıfırlanır — giriş sırası korunur. */
.hero-cta:hover,      .hero-cta:focus-visible,
.hero-cta--ghost:hover,.hero-cta--ghost:focus-visible,
.bolu__cta:hover,     .bolu__cta:focus-visible,
.gift-band__cta:hover,.gift-band__cta:focus-visible,
.social__follow:hover,.social__follow:focus-visible,
.collection-card__link:hover,.collection-card__link:focus-visible,
.btn:hover,           .btn:focus-visible{
  transition-delay:0s;
}
/* .gift-band.is-visible ... seçicisi (0,2,0) olduğu için hover
   kuralı da en az o kadar güçlü olmalı */
.gift-band.is-visible .gift-band__cta:hover,
.gift-band.is-visible .gift-band__cta:focus-visible{
  transition-delay:0s;
}

/* ============================================================
   BÖLÜM: mobil-duzeltmeler  (2026-08)
   ============================================================ */
@media (max-width:767px){
  /* Menü paneli 70svh ile sınırlıydı ve kaydırılamıyordu; alt
     menüler mobilde hep açık olduğu için liste sığmıyor, son
     maddeler kesiliyordu. Panel artık ekrana sığar ve içi kayar. */
  .bolci-nav.is-open{
    max-height:calc(100dvh - var(--header-h, 64px));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  /* Menü açıkken şeffaf header'ın altında okunaklı kalsın diye
     panel kendi zeminini zaten taşıyor; iOS eski sürümleri için
     dvh yedeği: */
  @supports not (height:100dvh){
    .bolci-nav.is-open{ max-height:calc(100vh - var(--header-h, 64px)); }
  }

  /* Koleksiyon kartı paneli masaüstü kuralından kalan 420px
     min-width ile dar ekranda taşabiliyordu. */
  .collection-card__panel{ min-width:0; }
}

/* Mobil menü paneli tam opak — altta sayfa içeriği hayalet gibi
   görünmesin. */
@media (max-width:767px){
  .bolci-nav{ background:#FAF7F1; }
}

/* Footer ızgarası mobilde sabit minimum genişlikleri (240px+170px)
   yüzünden 460px'e taşıyor, tarayıcı tüm sayfayı uzaklaştırıyordu
   (sitenin mobilde küçük görünmesinin asıl nedeni). Markalı ilk
   sütun tam satır, link sütunları ikişerli dizilir. */
@media (max-width:767px){
  .site-footer__grid{
    grid-template-columns:1fr 1fr;
    gap:36px 22px;
  }
  .site-footer__grid > :first-child{ grid-column:1 / -1; }
}

/* Tarihçe kartları: metin alta mutlak konumlandığı için kart
   yüksekliğine katılmıyor, uzun metin 620px'lik kartta
   kesiliyordu ("BUGÜN / 43 ülkede" kartı). Metin akışa alındı;
   kart artık içeriği kadar uzar, görsel arkada tam kaplar. */
@media (max-width:900px){
  .history-scene{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    height:auto;
    min-height:560px;
  }
  .history-scene img,
  .history-scene video{ position:absolute; inset:0; }
  .history-scene__copy{
    position:static;
    width:auto;
    max-width:560px;
    padding:120px 22px 36px;
    transform:none !important;
  }
}

/* Dedicated history photography: keep only one heading visible during crossfades. */
@media(min-width:901px){
  .history-scene:not(.is-active) .history-scene__copy{visibility:hidden}
}
@media(max-width:900px){
  .history-scene img,.history-scene:nth-child(2) img{object-position:78% center}
  .history-scene__veil{background:linear-gradient(0deg,rgba(13,6,3,.94) 0%,rgba(13,6,3,.72) 38%,rgba(13,6,3,.1) 78%)}
}

/* Shared search and interaction states. */
body.search-open,body.menu-open{overflow:hidden}
[id]{scroll-margin-top:calc(var(--header-h,80px) + 28px)}
.site-search{
  box-sizing:border-box;width:min(760px,calc(100vw - 32px));max-height:85dvh;
  padding:32px;border:1px solid #d9c5af;border-radius:16px;background:#faf5ed;color:#442c1f;
  box-shadow:0 30px 100px rgba(15,6,2,.3);overflow:auto;
}
.site-search::backdrop{background:rgba(22,11,6,.72);backdrop-filter:blur(7px)}
.site-search__head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.site-search__head p{margin:0 0 10px;font:500 10px/1.4 var(--font-ui);letter-spacing:.2em;color:#98633e}
.site-search__head h2{margin:0 0 25px;font:400 clamp(26px,4vw,38px)/1.15 var(--font-ui);letter-spacing:-.035em}
.site-search__close{flex:none;width:40px;height:40px;border:1px solid #ddcbb6;border-radius:50%;background:transparent;color:#442c1f;font-size:28px;cursor:pointer}
.site-search__form label{display:block;margin-bottom:10px;font-size:13px}
.site-search__field{display:flex;border:1px solid #c9ae91;border-radius:8px;background:white;overflow:hidden}
.site-search__field:focus-within{outline:2px solid #865839;outline-offset:3px}
.site-search__field input{min-width:0;flex:1;padding:16px;border:0;outline:0;background:transparent;color:#442c1f;font:400 16px/1.3 var(--font-ui)}
.site-search__field button{padding:12px 22px;border:0;background:#69432e;color:#fff7e9;font:500 14px var(--font-ui);cursor:pointer}
.site-search__suggestions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.site-search__suggestions button{border:1px solid #decdbb;border-radius:24px;padding:9px 13px;background:transparent;color:#69432e;font-size:12px;cursor:pointer}
.site-search__suggestions button:hover{background:#eddfcf}
.site-search__status{margin:24px 0 14px;color:#795e4e;font-size:13px;line-height:1.5}
.site-search__results{list-style:none;margin:0;padding:0}
.site-search__results li+li{border-top:1px solid #e4d5c4}
.site-search__results a{display:grid;gap:6px;padding:18px 12px;border-radius:6px;color:#442c1f;text-decoration:none}
.site-search__results a:hover,.site-search__results a:focus-visible{background:#efe2d2;outline:2px solid #b28a64;outline-offset:-2px}
.site-search__category{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#98633e}
.site-search__results strong{font-size:18px;font-weight:500}
.site-search__description{font-size:13px;line-height:1.6;color:#725948}
.site-search button:focus-visible,.social__grab:focus-visible{outline:2px solid #b88a50;outline-offset:3px}
.social__fallback{display:grid;place-items:center;min-height:250px;padding:32px;text-align:center;color:#71523b;font:500 14px/1.7 var(--font-ui);background:#f5ede3}
.social__grab:focus-visible{outline-offset:-5px}
@media(max-width:767px){
  .site-search{padding:22px 18px;max-height:90dvh}
  .site-search__field button{padding:12px 16px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}
.contact-form__delivery{margin:16px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}
.form-note a{display:inline-block;text-decoration:underline;text-underline-offset:4px}

.hero-scroll-cue::after{content:"";position:absolute;inset:-5px;}
.hero-scroll-cue:focus-visible{outline:3px solid #f7d6a0;outline-offset:6px;}

/* Katalog, kaynak belgeleri ve tamamlanan iletişim bağlantıları. */
.skip-link{position:fixed;top:12px;left:16px;z-index:99999;padding:14px 20px;border-radius:8px;background:#fff4e5;color:#2b1a14;transform:translateY(-180%);font-weight:600;}
.skip-link:focus{transform:translateY(0);outline:3px solid #d47f61;}
#mainContent:focus{outline:none;}
.detail-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;line-height:1.45;text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere;}
.detail-link:focus-visible,.certificate-preview:focus-visible{outline:3px solid #d47f61;outline-offset:4px;border-radius:3px;}
.page-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px;margin:24px 0 36px;}
.page-actions .btn{white-space:normal;text-align:center;}
.product-card__media{background:#fff;}
.product-card__media img{object-fit:contain;padding:12px;}
.product-card__body .detail-link{color:#f1c4a8;font-size:14px;font-weight:500;margin-top:12px;}
.product-card:focus-within{outline:2px solid #d47f61;outline-offset:4px;}
.certificate-preview{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:5px;overflow:hidden;margin-bottom:24px;padding:12px;}
.certificate-preview img{display:block;width:100%;height:240px;object-fit:contain;}
.certificate-preview > span{display:none;}
.card .detail-link{margin-top:16px;}
.news .detail-link{display:flex;width:fit-content;font-size:14px;margin-top:12px;}
.news-feature{max-width:780px;margin:0 0 42px;}
.news-feature img{width:100%;height:auto;display:block;border-radius:12px;}
.news-feature figcaption{font-size:12px;margin-top:12px;opacity:.7;}
.archive-link,.corporate-contact{padding-bottom:56px;}
.store .detail-link{margin-top:16px;}
.store__tag{line-height:1.6;}
.contact__row>div{min-width:0;}
.contact__row a{overflow-wrap:anywhere;}
.field-check .detail-link{display:inline;min-height:0;}
.footer-legal{display:flex;flex-wrap:wrap;gap:6px 28px;border-top:1px solid rgba(248,243,233,.16);padding:20px 0;font-size:12px;}
.footer-legal .detail-link{color:var(--on-dark);}
.site-footer .detail-link{min-height:32px;text-decoration:none;}
@media(max-width:600px){.page-actions{align-items:stretch;flex-direction:column;gap:8px;}.certificate-preview img{height:220px;}.news-feature{margin-bottom:28px;}.footer-legal{gap:4px 20px;}}