/* ============================================================
   SUPERCUT — SITE2 · BROŞÜR MARKA KİMLİĞİ
   Palet: krem kağıt zemin + broşür siyahı + Karamel (#BE7D36).
   Font: Montserrat (Gotham'ın ücretsiz web karşılığı) — tek aile.
   İmza: TR-kalın / EN-kalın-italik ikili başlık + hücreli
         SUPERCUT wordmark + pop-up "tek çekiş" hareketi.
   ============================================================ */

/* ---------- 0. DEĞİŞKENLER ---------- */
:root {
  /* Renkler — broşürden örneklendi */
  --celik:        #F7F3EC;  /* zemin — krem kağıt (broşür) */
  --celik-koyu:   #EFE7D9;  /* ikincil yüzey */
  --antrasit:     #0F0F10;  /* broşür siyahı — koyu bantlar, hero, footer */
  --antrasit-2:   #1A1A1C;  /* koyu yüzey üstü alan (form alanları) */
  --antrasit-cizgi:#2C2C2F; /* koyu yüzeyde hairline */
  --metin:        #1C1714;  /* ana metin (broşür #231F20) */
  --metin-soluk:  #6E6357;  /* ikincil metin (sıcak gri) */
  --koyu-metin:   #D9CFC0;  /* koyu zeminde gövde metni (kremimsi) */
  --kor:          #BE7D36;  /* birincil vurgu — KARAMEL (marka rengi) */
  --kor-koyu:     #A0692A;  /* karamel koyu — hover/derinlik */
  --sari:         #D9A961;  /* karamel açığı — ikincil vurgu/klips */
  --ray:          #C3B8A6;  /* çizgi / ray (sıcak gri) */
  --ray-acik:     #E1D8C8;  /* ray parlaması */
  --parlak:       #FFFFFF;  /* koyu üstü başlık/highlight */
  --beyaz:        #FFFFFF;

  /* Hareket */
  --gecis: cubic-bezier(.2, .8, .2, 1);   /* tek çekiş eğrisi */
  --ease-cik: cubic-bezier(.16, 1, .3, 1); /* zarif doğuş — reveal/hero/hover */
  --kaydirma: 0%;                          /* JS: sayfa ilerlemesi (ray üstü karamel çizgi) */

  /* Tipografi — tek aile (Gotham → Montserrat) */
  --font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-govde:   'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Montserrat', 'Segoe UI', system-ui, sans-serif;
}

/* ---------- 1. SIFIRLAMA + TEMEL ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-govde);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--metin);
  background: var(--celik);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }
p a { color: var(--kor); text-decoration-thickness: 1px; text-underline-offset: 3px; }
p a:hover { text-decoration-thickness: 2px; }

ul { list-style: none; }

::selection { background: var(--kor); color: var(--beyaz); }

:focus-visible { outline: 2px solid var(--kor); outline-offset: 2px; }

/* Ekran okuyucu için atlama bağlantısı */
.atla {
  position: absolute; left: -9999px; top: 0;
  background: var(--kor); color: var(--beyaz);
  padding: .6rem 1rem; z-index: 100; font-weight: 700;
}
.atla:focus-visible { left: 0; }

/* ---------- 2. TİPOGRAFİ ROLLERİ ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: .98;
}

h1 { font-size: clamp(2.9rem, 6.6vw, 5rem); font-weight: 900; }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2.1vw, 1.6rem); }

/* İMZA — İKİLİ DİL BAŞLIK (broşür: TR kalın üst / EN kalın-italik alt) */
.baslik-ikili { display: block; }
.baslik-ikili .tr { display: block; }
.baslik-ikili .en {
  display: block;
  font-style: italic;
  font-weight: 800;
  color: var(--kor);          /* EN satırı karamel — broşür ritmi */
}
/* Koyu zeminde EN satırı karamel kalır, TR beyaz olur (sınıf yerinde ayarlanır) */

/* Genişletilmiş gövde paragrafı */
.govde-genis {
  font-size: 1.06rem;
  line-height: 1.7;
  max-width: 60ch;
  color: var(--metin);
}

/* Mono göz satırı (bölüm üstü küçük etiket) */
.goz {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kor);
}
/* Göz satırında POP UP vurgusu: aynı renk, belirgin büyük */
.goz-buyuk {
  font-size: 1.6em;
  font-weight: 800;
  letter-spacing: .14em;
}

/* Mono dipnot */
.mono-not {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--metin-soluk);
  margin-top: .9rem;
}

/* ---------- 3. YERLEŞİM YARDIMCILARI ---------- */
.kap {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.bolum { padding-block: clamp(3.5rem, 7vw, 5.5rem); }

.bolum-bas { margin-bottom: clamp(2rem, 4vw, 3rem); }
.bolum-bas .plaka { margin-bottom: 1.1rem; }
.bolum-bas .goz   { display: block; margin-bottom: 1rem; }
.bolum-bas h2 { margin-bottom: 1rem; }

/* ---------- 4. İMZA 1/3 — PASS RAYI ---------- */
/* 6px metal ray: fırçalanmış doku + üst highlight + alt gölge.
   Üzerindeki 2px kor çizgi sayfa kaydırma ilerlemesini gösterir. */
.ray {
  position: relative;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--ray) 0, var(--ray-acik) 2px, var(--ray) 4px);
  border-top: 1px solid var(--parlak);
  box-shadow: 0 1px 0 rgba(35, 40, 44, .30);
}
.ray__kor {
  position: absolute;
  top: 2px; left: 0;
  height: 2px;
  width: var(--kaydirma);
  background: var(--kor);
  box-shadow: 0 0 8px rgba(190, 125, 54, .55);
  pointer-events: none;
}

/* ---------- 5. İMZA 2/3 — İSTASYON PLAKASI ---------- */
/* Antrasit plaka; bulunduğu istasyon görünümdeyken Kor Turuncu'ya yanar. */
.plaka {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--antrasit);
  color: #C9BEAD;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .42rem .95rem .36rem;
  border-radius: 2px;
  transition: color .35s, box-shadow .35s;
}
.plaka::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #8A7E6E;
  flex: none;
  transition: background .35s, box-shadow .35s;
}
.plaka--aktif,
.plaka--sabit {
  color: var(--beyaz);
  box-shadow: inset 0 0 0 1px rgba(190, 125, 54, .55), 0 0 14px rgba(190, 125, 54, .25);
}
.plaka--aktif::before,
.plaka--sabit::before {
  background: var(--kor);
  box-shadow: 0 0 8px rgba(190, 125, 54, .8);
}

/* ---------- 6. İMZA 3/3 — FİŞ KARTI (sadeleştirilmiş) ---------- */
/* Temiz servis kartı: üstte ince karamel çizgi, mono fiş dili.
   (Eski asılı-fiş çentiği ve mikro rotasyon kaldırıldı — daha net.) */
.fis {
  position: relative;
  background: var(--beyaz);
  color: var(--metin);
  font-family: var(--font-mono);
  padding: 1.45rem 1.2rem 1.05rem;
  border: 1px solid var(--ray);
  border-radius: 3px;
  box-shadow: 0 14px 30px rgba(15, 15, 16, .08), inset 0 3px 0 var(--kor);
}

.fis__ust {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--metin-soluk);
  margin-bottom: .35rem;
}
.fis__deger {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.55rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: .5rem;
}
.fis__metin {
  font-family: var(--font-govde);
  font-size: .88rem;
  line-height: 1.5;
  color: var(--metin);
}
.fis__dip {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--kor);
  border-top: 1px dashed var(--ray-acik);
  margin-top: .7rem;
  padding-top: .55rem;
}

/* Fiş dizisi: raya asılı sıra. Üst kenar rayın 1px altına oturur. */
.fis-dizi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.9rem, 2.4vw, 1.8rem);
  align-items: start;
  margin-top: -1px;
  position: relative;
  z-index: 2;
}

/* Askı: ray + fiş dizisi birlikte (hero ve İstasyon 02'de kullanılır) */
.aski { position: relative; }
.aski .fis-dizi { padding-top: 0; }

/* ---------- 7. HAREKET — ZARİF DOĞUŞ KALIBI ---------- */
/* Her öğe yerinden hafifçe yükselerek belirir: translateY(26px) -> 0,
   850ms, zarif çıkış eğrisi. Sıralı gecikmeyi JS toplu atar (90ms adım). */
.gizli {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(8px);
  transition: opacity .85s var(--ease-cik), transform .85s var(--ease-cik), filter .85s var(--ease-cik);
}
.gorunur-yap {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------- 8. ÜST BAR (HEADER + NAV) ---------- */
.ust {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--antrasit);
  border-bottom: 1px solid var(--antrasit-cizgi);
}
.ust__ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 64px;
}
.marka {
  display: inline-flex;
  align-items: center;
  color: var(--parlak);       /* SVG currentColor buradan gelir */
  text-decoration: none;
  line-height: 0;
}
.marka .sc-logo { height: 32px; width: auto; display: block; }
.marka__kor { color: var(--kor); }

/* Hücreli SUPERCUT wordmark — currentColor ile açık/koyu zemine uyar */
.sc-logo { display: block; width: auto; }

.ust nav {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.6rem);
}
.ust nav > a {
  font-size: .92rem;
  font-weight: 500;
  color: var(--koyu-metin);
  text-decoration: none;
  padding: .35rem 0;
  transition: color .2s;
}
.ust nav > a:hover { color: var(--beyaz); }
.ust nav > a.aktif {
  color: var(--beyaz);
  box-shadow: inset 0 -2px 0 var(--kor);
}
.ust nav .dugme { font-size: .95rem; padding: .55rem 1.1rem .48rem; }

.dil {
  display: flex;
  gap: .55rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .08em;
}
.dil span { color: var(--beyaz); font-weight: 600; }
.dil a { color: var(--metin-soluk); text-decoration: none; }
.dil a:hover { color: var(--koyu-metin); }

.menu-dugme {
  display: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .12em;
  background: transparent;
  color: var(--parlak);
  border: 1px solid var(--ray);
  padding: .45rem .9rem .38rem;
  cursor: pointer;
}

/* ---------- 9. DÜĞMELER ---------- */
.dugme {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: .8rem 1.65rem .7rem;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: box-shadow .25s, border-color .25s, background .25s;
}
/* Birincil: Kor Turuncu — hover'da ısınır */
.dugme--birincil {
  background: var(--kor);
  color: var(--beyaz);
}
.dugme--birincil:hover {
  box-shadow: 0 0 24px rgba(190, 125, 54, .4);
}
/* İkincil: çelik kontur — hover'da Fiş Sarısı kontur (numune CTA) */
.dugme--ikincil {
  background: transparent;
  border-color: var(--ray);
  color: inherit;
}
.dugme--ikincil:hover {
  border-color: var(--sari);
  box-shadow: 0 0 14px rgba(217, 169, 97, .25);
}

/* ---------- 10. GİRİŞ — TAM EKRAN SAHNE ---------- */
/* Tek görsel, tek cümle. Fotoğraf tüm sahneyi kaplar; metin sol-altta,
   çok duraklı bantsız scrim üzerinde oturur. Yüklenişte görsel yerine
   oturur (1.06 -> 1), metin satır satır doğar. */
.giris {
  position: relative;
  min-height: calc(100svh - 64px);
  display: flex;
  align-items: flex-end;
  background: var(--antrasit);
  color: var(--koyu-metin);
  overflow: hidden;
}
/* Parallax payı: sarmalayıcı yukarı %18 taşar, JS kaydırmada aşağı akıtır */
.giris__foto { position: absolute; inset: -18% 0 0 0; will-change: transform; }
.giris__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% center;
  filter: saturate(1.05) contrast(1.02);
}
@keyframes giris-yerlesme { from { transform: scale(1.06); } to { transform: none; } }
html.js .giris__foto img { animation: giris-yerlesme 3.2s var(--ease-cik) both; }
/* Scrim: üst (header ile kaynaşır) + alt + sol; küçük adımlı, bantsız */
.giris::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(15,15,16,.42) 0%, rgba(15,15,16,.12) 14%, rgba(15,15,16,0) 26%),
    linear-gradient(0deg, rgba(15,15,16,.88) 0%, rgba(15,15,16,.62) 14%, rgba(15,15,16,.34) 30%, rgba(15,15,16,.14) 46%, rgba(15,15,16,0) 62%),
    linear-gradient(90deg,
      rgba(15,15,16,.92)  0%,
      rgba(15,15,16,.88)  9%,
      rgba(15,15,16,.80) 17%,
      rgba(15,15,16,.68) 25%,
      rgba(15,15,16,.53) 33%,
      rgba(15,15,16,.38) 41%,
      rgba(15,15,16,.24) 49%,
      rgba(15,15,16,.13) 57%,
      rgba(15,15,16,.05) 65%,
      rgba(15,15,16,.01) 72%,
      rgba(15,15,16,0)   80%);
}
.giris .kap { position: relative; z-index: 2; width: 100%; }
.giris__ic {
  display: grid;
  gap: 1.35rem;
  justify-items: start;
  max-width: 56ch;
  padding-block: clamp(3rem, 9vh, 5.2rem);
}
.giris__ic h1 { color: var(--parlak); font-size: clamp(2.8rem, 6vw, 4.6rem); }
.giris__govde {
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 44ch;
  color: var(--koyu-metin);
}
.giris__cta { display: flex; flex-wrap: wrap; gap: .9rem; }
.giris__cta .dugme--ikincil { color: var(--parlak); }
/* Yükleniş sıralaması (JS body'ye .yuklendi ekler) */
html.js .giris__ic > * {
  opacity: 0; transform: translateY(24px);
  filter: blur(8px);
  transition: opacity .9s var(--ease-cik), transform .9s var(--ease-cik), filter .9s var(--ease-cik);
}
html.js .yuklendi .giris__ic > * { opacity: 1; transform: none; filter: none; }
.yuklendi .giris__ic > :nth-child(1) { transition-delay: .08s; }
.yuklendi .giris__ic > :nth-child(2) { transition-delay: .2s; }
.yuklendi .giris__ic > :nth-child(3) { transition-delay: .32s; }
.yuklendi .giris__ic > :nth-child(4) { transition-delay: .44s; }
.yuklendi .giris__ic > :nth-child(5) { transition-delay: .56s; }

/* ---------- 11. KIYAS (İSTASYON 01 — PROBLEM) ---------- */
.kiyas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--ray);
  border-radius: 2px;
  overflow: hidden;
}
.kiyas__yan { padding: clamp(1.3rem, 3vw, 2rem); }
.kiyas__yan h3 { margin-bottom: .4rem; }
.kiyas__yan--rulo {
  background: var(--celik-koyu);
  color: var(--metin-soluk);
}
.kiyas__yan--rulo h3 { color: var(--metin-soluk); }
.kiyas__yan--sc {
  background: var(--beyaz);
  border-left: 1px solid var(--ray);
  box-shadow: inset 0 3px 0 var(--kor);
}
.kiyas__rozet {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  vertical-align: .35em;
  padding: .18rem .5rem;
  border-radius: 2px;
}
.kiyas__rozet--eski { background: rgba(91, 100, 107, .16); color: var(--metin-soluk); }
.kiyas__rozet--yeni { background: rgba(190, 125, 54, .1); color: var(--kor); }

/* Veri satırı: etiket + mono değer */
.veri {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .72rem 0;
  border-top: 1px dashed var(--ray-acik);
  font-size: .95rem;
}
.veri:first-of-type { margin-top: 1rem; }
.veri b {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .88rem;
  text-align: right;
  white-space: nowrap;
}
.kiyas__yan--sc .veri b { color: var(--kor); }

/* ---------- 12. SPEC TABLOSU (İSTASYON 03 — ÜRÜN) ---------- */
.spec-sarici {
  overflow-x: auto;
  border: 1px solid var(--ray);
  border-radius: 2px;
  background: var(--beyaz);
}
.spec {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: .88rem;
}
.spec th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  background: var(--antrasit);
  color: var(--celik);
  padding: .7rem .95rem .6rem;
  white-space: nowrap;
}
.spec td {
  padding: .68rem .95rem;
  border-top: 1px solid var(--ray-acik);
  white-space: nowrap;
}
.spec tr.one-cikan td { background: rgba(190, 125, 54, .06); }
.spec tr.one-cikan td:first-child { box-shadow: inset 3px 0 0 var(--kor); font-weight: 600; }
.spec-not {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--metin-soluk);
  margin-top: .8rem;
}

/* ---------- 13. SEKTÖR KARTLARI ---------- */
.sektor-dizi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 1.8rem);
}
.sektor {
  background: var(--beyaz);
  border: 1px solid var(--ray);
  border-radius: 2px;
  overflow: hidden;
}
.sektor__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.sektor__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.06);
  transition: transform .6s var(--gecis);
}
.sektor:hover .sektor__foto img { transform: scale(1.035); }
/* Sıcak halo + okunurluk degradesi */
.sektor__foto::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(85% 60% at 50% 100%, rgba(190, 125, 54, .28), transparent 72%),
    linear-gradient(180deg, transparent 46%, rgba(15, 15, 16, .74) 100%);
}
.sektor__ad {
  position: absolute;
  left: 1.1rem; right: 1.1rem; bottom: .85rem;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--beyaz);
  line-height: 1;
}
.sektor__senaryo {
  font-size: .92rem;
  line-height: 1.55;
  padding: 1rem 1.1rem .6rem;
}
.sektor__oneri {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--kor);
  padding: 0 1.1rem 1.1rem;
}

/* ---------- 14. BELGE PLAKALARI (GÜVEN) ---------- */
.belge-dizi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.9rem, 2vw, 1.5rem);
  margin-bottom: 1.6rem;
}
.belge {
  background: var(--antrasit);
  color: var(--beyaz);
  border-radius: 2px;
  padding: 1.5rem 1.4rem 1.3rem;
  box-shadow: inset 0 2px 0 var(--kor);
}
.belge b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: .03em;
  line-height: 1;
  margin-bottom: .5rem;
}
.belge span {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ray);
}

/* ---------- 15. BANT (CTA / FORM) ---------- */
.bant {
  background: var(--antrasit);
  color: var(--koyu-metin);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.bant h2 { color: var(--parlak); margin: 1.1rem 0 1rem; }
.bant__izgara {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.bant__mono {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--ray);
  border-top: 1px dashed var(--antrasit-cizgi);
  margin-top: 1.4rem;
  padding-top: 1rem;
}

/* Form — koyu yüzey */
.form-koyu { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
.form-alan { display: flex; flex-direction: column; gap: .38rem; }
.form-alan--genis { grid-column: 1 / -1; }
.form-alan label {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ray);
}
.form-koyu input,
.form-koyu select,
.form-koyu textarea {
  width: 100%;
  font-family: var(--font-govde);
  font-size: .98rem;
  color: var(--parlak);
  background: var(--antrasit-2);
  border: 1px solid var(--antrasit-cizgi);
  border-radius: 2px;
  padding: .65rem .75rem;
}
.form-koyu textarea { min-height: 108px; resize: vertical; }
.form-koyu input:focus-visible,
.form-koyu select:focus-visible,
.form-koyu textarea:focus-visible {
  outline: none;
  border-color: var(--kor);
  box-shadow: 0 0 0 2px rgba(190, 125, 54, .3);
}
.form-dugmeler {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  align-items: center;
}
.form-dugmeler .dugme--ikincil { color: var(--parlak); }
/* Başarı mesajı: gönderimden sonra görünür (JS .gorunur-yap ekler) */
.form-mesaj {
  display: none;
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--sari);
  border: 1px dashed var(--sari);
  border-radius: 2px;
  padding: .8rem .95rem;
}
.form-mesaj.gorunur-yap { display: block; }

/* ---------- 16. FOOTER ---------- */
.alt {
  background: var(--antrasit);
  color: var(--koyu-metin);
  border-top: 1px solid var(--antrasit-cizgi);
  padding: clamp(2.5rem, 5vw, 4rem) 0 1.6rem;
}
.alt__izgara {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.4rem;
}
.alt .marka .sc-logo { height: 30px; }
.alt__slogan {
  font-size: .92rem;
  max-width: 30ch;
  margin-top: .8rem;
  color: var(--ray);
}
.alt h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--parlak);
  margin-bottom: .8rem;
}
.alt ul li { margin-bottom: .45rem; }
.alt ul a {
  font-size: .9rem;
  color: var(--koyu-metin);
  text-decoration: none;
}
.alt ul a:hover { color: var(--beyaz); text-decoration: underline; text-underline-offset: 3px; }
.alt__dip {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--ray);
  border-top: 1px solid var(--antrasit-cizgi);
  padding-top: 1.3rem;
}

/* ---------- 17. RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .giris__ic { max-width: 52ch; }
}

@media (max-width: 900px) {
  /* Giriş: aynı sahne; hafif genel karartma + alt-ağırlıklı yumuşak rampa */
  .giris { min-height: min(calc(100svh - 64px), 760px); }
  .giris__foto img { object-position: 58% center; }
  .giris::after {
    background: linear-gradient(180deg,
      rgba(15,15,16,.6)   0%,
      rgba(15,15,16,.5)  14%,
      rgba(15,15,16,.48) 30%,
      rgba(15,15,16,.54) 46%,
      rgba(15,15,16,.64) 60%,
      rgba(15,15,16,.76) 74%,
      rgba(15,15,16,.88) 87%,
      rgba(15,15,16,.95) 100%);
  }

  .fis-dizi { grid-template-columns: 1fr; max-width: 480px; }
  .kiyas { grid-template-columns: 1fr; }
  .kiyas__yan--sc { border-left: 0; border-top: 1px solid var(--ray); }
  .sektor-dizi { grid-template-columns: 1fr; max-width: 520px; }
  .belge-dizi { grid-template-columns: 1fr; max-width: 480px; }
  .bant__izgara { grid-template-columns: 1fr; }
  .alt__izgara { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  /* Mobil menü */
  .menu-dugme { display: block; }
  .ust nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
    background: var(--antrasit);
    border-bottom: 1px solid var(--antrasit-cizgi);
    padding: 1rem clamp(1rem, 4vw, 2.5rem) 1.4rem;
  }
  .ust nav.acik { display: flex; }
  .ust nav > a { font-size: 1.05rem; padding: .5rem 0; }
  .ust nav .dugme { margin-top: .6rem; }
  .dil { margin-top: .4rem; }
}

@media (max-width: 480px) {
  .form-koyu { grid-template-columns: 1fr; }
  .alt__izgara { grid-template-columns: 1fr; gap: 1.6rem; }
  .giris__cta .dugme { width: 100%; }
}

/* ---------- 18. HAREKET AZALTMA ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gizli, .gorunur-yap {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .giris__foto { inset: 0; will-change: auto; }
  .aile, .aile.gorunur-yap { transition: none; }
  .aile:hover, .aile:focus-visible { transform: none; box-shadow: none; }
  html.js .giris__foto img { animation: none; }
  html.js .giris__ic > * { opacity: 1; transform: none; transition: none; }
  .ray__kor { width: 34%; box-shadow: none; }   /* ilerleme statik */
  .plaka, .dugme, .sektor__foto img { transition: none; }
  .sektor:hover .sektor__foto img { transform: none; }
  .aile img, .aile .ok { transition: none; }
  .aile:hover img { transform: none; }
}

/* ---------- 19. BROŞÜR BİLEŞENLERİ ---------- */
/* Koyu zeminli bölümlerde ikili başlığın TR satırı beyaz olur */
.kahraman__panel .baslik-ikili .tr,
.bant .baslik-ikili .tr { color: var(--parlak); }

/* NEDEN SUPERCUT — avantaj kartları (broşür 9 madde → 6 öne çıkan) */
.avantaj-dizi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.2vw, 1.6rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.avantaj {
  background: var(--beyaz);
  border: 1px solid var(--ray);
  border-radius: 3px;
  padding: 1.3rem 1.25rem;
  box-shadow: inset 0 3px 0 var(--kor);
}
.avantaj b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: -.01em;
  margin-bottom: .4rem;
}
.avantaj span { font-size: .92rem; line-height: 1.5; color: var(--metin-soluk); }

/* TEKNİK BİLGİLER + ÜRÜN BOYUTLARI — iki tablo yan yana */
.teknik-izgara {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
.spec-en {
  display: block;
  font-style: italic;
  font-weight: 500;
  font-size: .74rem;
  color: var(--metin-soluk);
  letter-spacing: 0;
}
.spec td { vertical-align: middle; }
.spec--boyut { min-width: 0; }
.boyut-bas {
  margin-bottom: 1rem;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}
.boyut-bas .en { font-size: .82em; }

/* GÜVENLİK — metin + kabartma foto */
.guvenlik-izgara {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
}
.guvenlik-foto {
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--ray);
  aspect-ratio: 3 / 4;
  max-height: 460px;
}
.guvenlik-foto img { width: 100%; height: 100%; object-fit: cover; }
.guvenlik-izgara .belge-dizi { margin-top: 1.6rem; margin-bottom: 0; }

@media (max-width: 900px) {
  .avantaj-dizi { grid-template-columns: 1fr 1fr; }
  .teknik-izgara { grid-template-columns: 1fr; }
  .guvenlik-izgara { grid-template-columns: 1fr; }
  .guvenlik-foto { max-height: 340px; aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .avantaj-dizi { grid-template-columns: 1fr; max-width: 480px; }
}

/* Ürün sayfası — anatomi görseli */
.anatomi-foto {
  margin-top: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--ray);
  border-radius: 3px;
  overflow: hidden;
  max-height: 440px;
}
.anatomi-foto img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   20. GERÇEK ÇEKİM — VİDEO & FOTOĞRAF KATMANI
   (broşür fotoğraf/video seti: hero döngü · dispense · süreç · galeri)
   ============================================================ */

/* --- DİSPENSE GÖSTERİMİ (tek çekiş = tek yaprak) --- */
.gosterim {
  display: grid;
  grid-template-columns: minmax(0, 340px) 1fr;
  gap: clamp(1.4rem, 3.5vw, 3rem);
  align-items: center;
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
}
.gosterim__video {
  position: relative;
  border: 1px solid var(--ray);
  border-radius: 4px;
  overflow: hidden;
  background: var(--antrasit);
  box-shadow: inset 0 3px 0 var(--kor);
}
.gosterim__video video,
.gosterim__video > img { width: 100%; height: auto; display: block; }
/* Köşe rozet — "canlı gösterim" işareti */
.gosterim__video::after {
  content: "TEK ÇEKİŞ";
  position: absolute; left: .7rem; bottom: .7rem;
  font-family: var(--font-mono); font-size: .64rem; font-weight: 600;
  letter-spacing: .14em; color: var(--beyaz);
  background: rgba(190, 125, 54, .92);
  padding: .28rem .6rem; border-radius: 2px;
}
.gosterim__metin h3 { margin-bottom: .8rem; }
.gosterim__adim { display: flex; gap: 1rem; padding: .8rem 0; border-top: 1px dashed var(--ray-acik); }
.gosterim__adim:first-of-type { border-top: 0; padding-top: 0; }
.gosterim__no {
  font-family: var(--font-mono); font-weight: 700; color: var(--kor);
  font-size: 1rem; flex: none; width: 2rem;
}
.gosterim__adim div b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; margin-bottom: .15rem; }
.gosterim__adim div span { font-size: .92rem; line-height: 1.5; color: var(--metin-soluk); }

/* --- KULLANIM: SÜREÇ VİDEOSU (nasıl kullanılır) --- */
.kullanim { background: var(--celik-koyu); }
.kullanim__izgara {
  display: grid;
  grid-template-columns: minmax(0, 360px) 1fr;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center;
}
.kullanim__video {
  border: 1px solid var(--ray);
  border-radius: 5px;
  overflow: hidden;
  background: var(--antrasit);
  box-shadow: 0 18px 40px rgba(15, 15, 16, .18);
}
.kullanim__video video { width: 100%; height: auto; display: block; }
.kullanim__adimlar { display: grid; gap: 1rem; margin-top: 1.4rem; }
.kullanim__adim {
  background: var(--beyaz); border: 1px solid var(--ray); border-radius: 3px;
  padding: 1rem 1.15rem; box-shadow: inset 3px 0 0 var(--kor);
}
.kullanim__adim b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.04rem; margin-bottom: .2rem; }
.kullanim__adim span { font-size: .92rem; line-height: 1.5; color: var(--metin-soluk); }

/* --- ÜRÜN İSTASYONU: ürün hero fotoğrafı --- */
.urun-hero {
  border: 1px solid var(--ray);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
  max-height: 480px;
  position: relative;
}
.urun-hero img { width: 100%; height: 100%; object-fit: cover; }
.urun-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 100%, rgba(190, 125, 54, .18), transparent 70%);
}

/* --- GALERİ: gerçek çekim ızgarası --- */
.galeri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.7rem, 1.6vw, 1.1rem);
}
.galeri figure {
  position: relative;
  border: 1px solid var(--ray);
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin: 0;
}
/* Öne çıkan kare: 2 sütun × 2 satır (feature) */
.galeri figure.genis { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.galeri img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--gecis); }
.galeri figure:hover img { transform: scale(1.045); }
.galeri figcaption {
  position: absolute; left: .7rem; bottom: .6rem;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--beyaz);
  background: rgba(15, 15, 16, .6); padding: .24rem .55rem; border-radius: 2px;
  opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s;
}
.galeri figure:hover figcaption { opacity: 1; transform: none; }

/* --- İÇ SAYFA: fotoğraf şeridi (urun/kalite/uretim) --- */
.foto-serit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.8rem, 1.8vw, 1.3rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.foto-serit figure {
  margin: 0; border: 1px solid var(--ray); border-radius: 3px;
  overflow: hidden; aspect-ratio: 4 / 3; background: var(--antrasit);
}
.foto-serit img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--gecis); }
.foto-serit figure:hover img { transform: scale(1.04); }

@media (max-width: 900px) {
  .gosterim { grid-template-columns: 1fr; max-width: 480px; }
  .kullanim__izgara { grid-template-columns: 1fr; max-width: 520px; }
  .kullanim__video { max-width: 360px; }
  .galeri { grid-template-columns: repeat(2, 1fr); }
  .galeri figure.genis { grid-column: span 2; }
  .foto-serit { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .galeri { grid-template-columns: 1fr; }
  .galeri figure.genis { grid-column: span 1; }
  .foto-serit { grid-template-columns: 1fr; max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .galeri img, .foto-serit img { transition: none; }
  .galeri figure:hover img, .foto-serit figure:hover img { transform: none; }
}

/* ============================================================
   21. SADE GİRİŞ + İKİ AİLE (Gıda / Kuaför) KATMANI
   Giriş sayfası teona-ritmi: manifesto -> aile diptiği -> doku bandı
   -> CTA. Ürün sayfası: yapışkan bölüm nav'ı + iki segment.
   ============================================================ */

/* --- MANİFESTO — büyük, hafif, merkezli tek paragraf --- */
.manifesto {
  padding-block: clamp(4.5rem, 11vw, 8rem);
  text-align: center;
}
.manifesto .goz { display: block; margin-bottom: 1.6rem; }
.manifesto__metin {
  font-size: clamp(1.4rem, 2.7vw, 2.15rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.005em;
  max-width: 32ch;
  margin-inline: auto;
  color: var(--metin);
}
.manifesto__metin .vurgu { color: var(--kor); font-weight: 600; }
.manifesto__alt {
  margin-top: 2.2rem;
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--metin-soluk);
}

/* --- DİL SEÇİCİ — dünya ikonu + açılır liste --- */
.dil-sec { position: relative; }
.dil-sec__dugme {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: transparent;
  border: 1px solid var(--antrasit-cizgi);
  border-radius: 999px;
  color: var(--koyu-metin);
  font-family: var(--font-mono);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .1em;
  padding: .42rem .8rem .38rem;
  cursor: pointer;
  transition: color .25s, border-color .25s;
}
.dil-sec__dugme:hover { color: var(--beyaz); border-color: var(--ray); }
.dil-sec__dugme svg { width: 15px; height: 15px; flex: none; }
.dil-sec__ok { font-size: .6rem; transform: translateY(-1px); }
.dil-sec__liste {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  min-width: 160px;
  background: var(--antrasit-2);
  border: 1px solid var(--antrasit-cizgi);
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  padding: .35rem;
  z-index: 60;
}
.dil-sec__liste a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: .88rem;
  color: var(--koyu-metin);
  text-decoration: none;
  padding: .5rem .7rem;
  border-radius: 4px;
}
.dil-sec__liste a:hover { background: rgba(255, 255, 255, .06); color: var(--beyaz); }
.dil-sec__liste a[aria-current="true"] { color: var(--beyaz); }
.dil-sec__liste a[aria-current="true"]::after { content: "✓"; color: var(--kor); font-weight: 700; }
.dil-sec__liste a[aria-disabled="true"] { opacity: .45; pointer-events: none; }
@media (max-width: 820px) {
  .dil-sec__liste { right: auto; left: 0; }
}

/* --- AİLE DİPTİĞİ — Gıda | Kuaför (imza blok) --- */
.aile-dizi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.8rem, 1.6vw, 1.2rem);
}
.aile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  min-height: clamp(430px, 70vh, 640px);
  background: var(--antrasit);
  color: var(--beyaz);
  text-decoration: none;
}
.aile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-cik);
}
.aile::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 55% at 50% 108%, rgba(190, 125, 54, .3), transparent 68%),
    linear-gradient(0deg, rgba(15,15,16,.86) 0%, rgba(15,15,16,.55) 22%, rgba(15,15,16,.16) 46%, rgba(15,15,16,0) 62%);
}
.aile__ic {
  position: absolute;
  inset-inline: 0; bottom: 0;
  z-index: 2;
  padding: clamp(1.3rem, 2.6vw, 2rem);
  display: grid;
  gap: .55rem;
}
.aile__no {
  font-family: var(--font-mono);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--sari);
}
.aile .baslik-ikili {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.02;
}
.aile .baslik-ikili .tr { color: var(--beyaz); }
.aile .baslik-ikili .en { font-style: italic; font-weight: 800; color: var(--kor); }
.aile__cizgi {
  font-size: .95rem;
  line-height: 1.5;
  max-width: 34ch;
  color: var(--koyu-metin);
}
.aile__git {
  margin-top: .5rem;
  font-family: var(--font-mono);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--beyaz);
  display: inline-flex; align-items: center; gap: .5rem;
}
.aile .ok { display: inline-block; transition: transform .45s var(--ease-cik); color: var(--kor); }
/* Hover: kart hafif yükselir + gölge; reveal geçişiyle çakışmasın diye
   geçiş listesi gorunur-yap sonrasında genişletilir */
.aile.gorunur-yap {
  transition: opacity .85s var(--ease-cik), filter .85s var(--ease-cik),
              transform .55s var(--ease-cik), box-shadow .55s var(--ease-cik);
}
.aile:hover, .aile:focus-visible {
  transform: translateY(-8px);
  box-shadow: 0 26px 48px -20px rgba(15,15,16,.5);
}
.aile:hover img, .aile:focus-visible img { transform: scale(1.045); }
.aile:hover .ok, .aile:focus-visible .ok { transform: translateX(7px); }
.aile:focus-visible { outline: 2px solid var(--kor); outline-offset: 3px; }

/* --- DOKU BANDI — tam genişlik sahne + tek cümle --- */
.doku {
  position: relative;
  min-height: clamp(420px, 64vh, 600px);
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background: var(--antrasit);
  color: var(--koyu-metin);
}
.doku > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.doku::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,15,16,.58), rgba(15,15,16,.5) 45%, rgba(15,15,16,.66));
}
.doku__ic {
  position: relative; z-index: 2;
  display: grid; gap: 1.1rem;
  justify-items: center;
  max-width: 50ch;
  padding: clamp(2.5rem, 7vw, 4rem) clamp(1rem, 4vw, 2.5rem);
}
.doku .baslik-ikili { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.doku .baslik-ikili .tr { color: var(--parlak); }
.doku__govde { font-size: 1.02rem; line-height: 1.65; color: var(--koyu-metin); }
.doku .dugme--ikincil { color: var(--parlak); }

/* --- CTA BANDI — merkezli, formsuz --- */
.bant--tek .bant__ic {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
  display: grid;
  gap: 1.05rem;
  justify-items: center;
}
.bant--tek .bant__ic h2 { margin: 0; }
.bant--tek .bant__mono { border-top: 0; margin-top: .4rem; padding-top: 0; }

/* --- ÜRÜN SAYFASI: YAPIŞKAN BÖLÜM NAV'I (Gıda | Kuaför) --- */
.bolum-nav {
  position: sticky;
  top: 64px;
  z-index: 40;
  display: flex;
  justify-content: center;
  gap: .5rem;
  padding: .6rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(247, 243, 236, .88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ray-acik);
}
.bolum-nav a {
  font-family: var(--font-mono);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  color: var(--metin-soluk);
  padding: .5rem 1.15rem .42rem;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color .3s, border-color .3s, background .3s;
}
.bolum-nav a:hover { color: var(--metin); }
.bolum-nav a.aktif {
  color: var(--kor);
  border-color: var(--kor);
  background: rgba(190, 125, 54, .07);
}
.segment { scroll-margin-top: 128px; }
.segment--koyu-zemin { background: var(--celik-koyu); }
.segment .kullanim__izgara { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.segment__ara {
  margin-top: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1rem;
}
.segment__ara h3 { margin-bottom: .35rem; }
.segment__not {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--metin-soluk);
  margin-top: 1.4rem;
}

/* --- SAYFA ÜSTÜ BANT — iç sayfaların sinematik açılışı --- */
.sayfa-bant {
  position: relative;
  min-height: clamp(300px, 46vh, 460px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--antrasit);
  color: var(--koyu-metin);
}
.sayfa-bant > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.sayfa-bant::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(15,15,16,.44) 0%, rgba(15,15,16,.1) 22%, rgba(15,15,16,0) 38%),
    linear-gradient(0deg,
      rgba(15,15,16,.86)  0%,
      rgba(15,15,16,.72) 14%,
      rgba(15,15,16,.52) 28%,
      rgba(15,15,16,.32) 42%,
      rgba(15,15,16,.16) 56%,
      rgba(15,15,16,.05) 70%,
      rgba(15,15,16,0)   84%);
}
.sayfa-bant .kap { position: relative; z-index: 2; width: 100%; }
.sayfa-bant__ic {
  display: grid;
  gap: .9rem;
  justify-items: start;
  max-width: 64ch;
  padding-block: clamp(2rem, 5.5vh, 3.2rem);
}
.sayfa-bant h1 { color: var(--parlak); font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.sayfa-bant__govde { font-size: 1.02rem; line-height: 1.6; max-width: 52ch; color: var(--koyu-metin); }

/* --- VİDEO IZGARASI — ürün sayfası ek çekimler --- */
.video-izgara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.8rem, 1.8vw, 1.3rem);
  margin-top: clamp(1.4rem, 3vw, 2rem);
}
.video-izgara figure {
  margin: 0;
  border: 1px solid var(--ray);
  border-radius: 4px;
  overflow: hidden;
  background: var(--beyaz);
}
.video-izgara video {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  background: var(--antrasit);
}
.video-izgara figcaption {
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--metin-soluk);
  padding: .65rem .8rem .6rem;
  border-top: 1px solid var(--ray-acik);
}
/* Karşılaştırma varyantı: eski usul | SuperCut */
.video-izgara--kiyas {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 880px;
  margin-inline: auto;
}
.video-etiket {
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .6rem .8rem .52rem;
  border-bottom: 1px solid var(--ray-acik);
}
.video-etiket--eski { background: var(--celik-koyu); color: var(--metin-soluk); }
.video-etiket--sc   { background: var(--kor); color: var(--beyaz); }

/* --- Yeni bölümler: responsive --- */
@media (max-width: 900px) {
  .aile-dizi { grid-template-columns: 1fr; }
  .aile { min-height: clamp(340px, 58vw, 480px); }
  .bolum-nav { top: 64px; }
  .video-izgara { grid-template-columns: 1fr; max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .bolum-nav a { transition: none; }
}

/* ---------- 21. ÜRÜN SAYFASI KOYU TEMA (body.tema-koyu) ----------
   Zemin simsiyahtan bir tık açık; metinler beyaza çekilir.
   Bileşen zeminleri değişkenlerden döndüğü için büyük kısmı otomatik. */
body.tema-koyu {
  --celik:       #1B1C1E;   /* zemin */
  --celik-koyu:  #242528;   /* ikincil yüzey (kullanım, kuaför segmenti) */
  --metin:       #F2EDE4;   /* ana metin — beyaza yakın */
  --metin-soluk: #B5ACA1;   /* ikincil metin */
  --ray:         #3B3C40;   /* çizgi/çerçeve */
  --ray-acik:    #2F3033;   /* tablo iç çizgileri */
}
/* Açık zeminli kartlar koyu yüzeye döner */
body.tema-koyu .fis,
body.tema-koyu .kiyas__yan--sc,
body.tema-koyu .spec-sarici,
body.tema-koyu .sektor,
body.tema-koyu .avantaj,
body.tema-koyu .kullanim__adim,
body.tema-koyu .video-izgara { background: #232427; }
/* Tablo başlığı: --celik koyulaşınca yazı kaybolmasın */
body.tema-koyu .spec th { color: #F2EDE4; }
/* Yapışkan bölüm nav'ı: krem cam yerine koyu cam */
body.tema-koyu .bolum-nav { background: rgba(23, 24, 26, .88); }
/* İstasyon plakası zeminle kaynaşmasın */
body.tema-koyu .plaka { border: 1px solid var(--antrasit-cizgi); }
/* Ürün sayfası: "Ürünler" sayfa başı kalktı; gıda başlığı h1 (tek H1/SEO)
   ama kuaför segment başlığıyla dengeli ölçüde kalır */
#gida h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); font-weight: 800; }
/* Gösterim yanındaki teknik+boyut tabloları: video ile aynı boyda
   kalması için kompakt ölçü (EN etiketi yana alınır, dolgu daralır) */
.gosterim .spec { font-size: .82rem; }
.gosterim .spec td { padding: .45rem .8rem; }
.gosterim .spec th { padding: .5rem .8rem .42rem; font-size: .76rem; }
.gosterim .spec-en { display: inline; margin-left: .4rem; }
.gosterim .spec-not { margin-top: .55rem; }
/* Koyu temada belge kartları zeminle kaynaşmasın */
body.tema-koyu .belge { border: 1px solid var(--antrasit-cizgi); }
/* Koyu temada --ray artık koyu gri çizgi rengi; onu METİN rengi olarak
   kullanan yerler okunmaz oluyordu — eski sıcak griye sabitlenir */
body.tema-koyu .belge span,
body.tema-koyu .form-alan label,
body.tema-koyu .alt__slogan,
body.tema-koyu .alt__dip,
body.tema-koyu .bant__mono { color: #C3B8A6; }
/* --- Mobil düzeltmeler (2026-07-28 gözden geçirme) --- */
@media (max-width: 560px) {
  /* Tablolarda uzun değerler sağdan kesilmesin — dar ekranda sarsın.
     Grid öğesi min-content ile genişlemesin (klasik grid taşma fix'i). */
  .gosterim__metin, .gosterim__video { min-width: 0; max-width: 100%; }
  .spec { width: 100%; min-width: 0; table-layout: fixed; }
  .spec td, .spec th { white-space: normal; }
  .gosterim .spec td:first-child { width: 38%; }
  /* Uzun tek kelimeli band başlıkları (SÜRDÜRÜLEBİLİRLİK) taşmasın */
  .sayfa-bant h1 { font-size: clamp(1.7rem, 7.4vw, 2.6rem); overflow-wrap: anywhere; }
}

/* ============ MÜŞTERİ REVİZYONU 2026-08-31 — DİZGİ DÜZELTMELERİ ============ */
/* İfade bütünlüğü: işaretlenen kelimeler satır sonunda bölünmesin.
   Dar ekranda serbest bırakılır ki taşma olmasın. */
.bir-arada { white-space: nowrap; }
@media (max-width: 760px) { .bir-arada { white-space: normal; } }

/* Başlık ile gövde metni arasındaki boşluk artırıldı (Gıda Grubu / Teklif Alın) */
.bolum-bas h1 { margin-bottom: 1.35rem; }

/* İki satırlık büyük başlıklarda satır arası açıldı */
.doku .baslik-ikili,
.sayfa-bant h1 { line-height: 1.3; }

/* "Rulo mu, yaprak mı?" bölümünde üst/alt boşluklar dengelendi */
.kap > .segment__ara:first-child { margin-top: 0; }
.segment__ara { margin-bottom: clamp(2rem, 3.4vw, 2.9rem); }

/* Son satırda tek kelime kalmasın (destekleyen tarayıcılarda) */
.avantaj span, .govde-genis, .giris__govde, .doku__govde,
.sayfa-bant__govde, .fis__metin, .aile__cizgi, .belge span {
  text-wrap: pretty;
}

/* text-wrap kısayolu text-wrap-mode'u da yazdığı için, birleşik kalması gereken
   ifadeleri en sonda yeniden sabitliyoruz (span.bir-arada = daha yüksek özgüllük). */
span.bir-arada { white-space: nowrap; }
@media (max-width: 760px) { span.bir-arada { white-space: normal; } }

/* Kanal kartlari esit yukseklikte dursun (uretim kartinin metni kaldirildi) */
.fis-dizi { align-items: stretch; }

/* ==========================================================================
   SITE 9 — FIRÇALANMIŞ GÜMÜŞ ZEMİN
   Broşür arka kapağındaki metalik dokudan örneklendi (#B5B5B5–#CFCFCF,
   45° ince dokuma + geniş fırça parlaması).
   ========================================================================== */

:root {
  --celik:       #C3C5C7;   /* zemin — fırçalanmış gümüş */
  --celik-koyu:  #B5B8BA;   /* ikincil yüzey */
  --metin:       #16191B;   /* ana metin — soğuk siyah */
  --metin-soluk: #555C61;   /* ikincil metin — soğuk gri */
  --ray:         #94999D;   /* çizgi / çerçeve */
  --ray-acik:    #B6BABD;   /* ray parlaması */
}

/* Metal yüzey: taban renk + 45° dokuma.
   NOT: Geniş "fırça parlaması" bandı kaldırıldı — zeminde #A1–#C9 arası
   açık/koyu dikey şeritler oluşturup "renk tutmamış" izlenimi veriyordu.
   Yerine tek yönlü, çok hafif bir derinlik geçişi kullanılıyor. */
body {
  background-color: var(--celik);
  background-image:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.40) 0 1px,
      rgba(92,98,103,.15)   1px 3px),
    linear-gradient(180deg,
      rgba(255,255,255,.09) 0%,
      rgba(255,255,255,0)   40%,
      rgba(92,98,103,.05)   100%);
  background-attachment: scroll, scroll;
}

/* İkincil metal yüzeyler de dokulu olsun (kozmetik segmenti, kullanım bandı) */
.segment--koyu-zemin,
.kullanim {
  background-color: var(--celik-koyu);
  background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,.30) 0 1px,
    rgba(92,98,103,.13)   1px 3px);
}

/* --- İç sayfalar da metalik: koyu tema nötrlendi --- */
body.tema-koyu {
  --celik:       #C3C5C7;
  --celik-koyu:  #B5B8BA;
  --metin:       #16191B;
  --metin-soluk: #555C61;
  --ray:         #94999D;
  --ray-acik:    #B6BABD;
  --koyu-metin:  #E8E4DC;   /* koyu bantların içindeki metin (CTA, footer) */
}
/* Koyu kart yüzeyleri → açık metal kart */
body.tema-koyu .fis,
body.tema-koyu .kiyas__yan--sc,
body.tema-koyu .spec-sarici,
body.tema-koyu .sektor,
body.tema-koyu .avantaj,
body.tema-koyu .kullanim__adim,
body.tema-koyu .video-izgara,
.avantaj, .spec-sarici {
  background: rgba(255,255,255,.46);
  backdrop-filter: saturate(1.05);
}
body.tema-koyu .spec th { color: var(--parlak); }
body.tema-koyu .bolum-nav { background: rgba(195,197,199,.88); }
body.tema-koyu .plaka { border: 1px solid var(--antrasit-cizgi); }

/* Tablo başlığı antrasit kalır, gövde metalik kartta okunur */
.spec th { background: var(--antrasit); color: var(--parlak); }
.spec td { border-color: var(--ray-acik); }

/* Form alanları: koyu bant içinde kaldıkları için kendi rengini korur */
.bant .form-alan input,
.bant .form-alan select,
.bant .form-alan textarea { background: var(--antrasit-2); color: #F2EDE4; }

/* Metalik zeminde okunurluk: acik kart uzerindeki kucuk yazilar koyu olsun
   (koyu tema icin ayarlanmis acik gri tonlar burada kayboluyordu) */
.belge span,
body.tema-koyu .belge span { color: #B6BABD; }
/* Koyu bantlarin icindekiler acik kalir */
body.tema-koyu .form-alan label,
body.tema-koyu .alt__slogan,
body.tema-koyu .alt__dip,
body.tema-koyu .bant__mono { color: #C3B8A6; }

/* Bolum sekmeleri: mobilde etiketler iki satira kiriliyor, kaydirinca ust
   satir baslik cubugunun altinda kaliyordu. Tek satira sabitlendi. */
.bolum-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.bolum-nav::-webkit-scrollbar { display: none; }
.bolum-nav a { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 620px) {
  .bolum-nav { gap: .28rem; padding-inline: .7rem; justify-content: flex-start; }
  .bolum-nav a { font-size: .63rem; letter-spacing: .07em; padding: .4rem .62rem .34rem; }
}

/* Sekme seridi de metal olsun (duz gri panel zeminden kopuk duruyordu) */
.bolum-nav,
body.tema-koyu .bolum-nav {
  background-color: #C3C5C7;
  background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,.40) 0 1px,
    rgba(92,98,103,.15)   1px 3px);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Iletisim: sayfa basligi kaldirildi, form basligi H1 oldu — gorsel boyut
   H2 ile ayni kalsin (global h1 clamp cok buyuk). */
.bant h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); }

/* "Kimler icin?" satirlari gri zeminde kayboluyordu — marka turuncusuna alindi
   ve okunurluk icin biraz kalinlastirildi (turuncu, gri uzerinde acik kaliyor). */
.mono-not {
  color: var(--kor);
  font-weight: 600;
  letter-spacing: .04em;
}
.mono-not a { color: var(--kor); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Hakkimizda — cati marka (Packtory) blogu */
.marka-blok {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
}
.marka-blok__metin .goz { display: block; margin-bottom: .9rem; }
.marka-blok__metin h2 { margin-bottom: 1rem; }
.marka-blok__logo {
  flex: none;
  display: grid;
  place-items: center;
  padding: clamp(1.2rem, 3vw, 2rem);
  background: rgba(255,255,255,.46);
  border: 1px solid var(--ray);
  border-radius: 4px;
}
.marka-blok__logo img { width: clamp(120px, 16vw, 180px); height: auto; }
@media (max-width: 820px) {
  .marka-blok { grid-template-columns: 1fr; }
  .marka-blok__logo { justify-self: start; }
}