/* ============ Sayfalar arası geçiş ============
   Aynı site içindeki sayfa geçişlerinde beyaz bir çakma yerine kısa bir
   çapraz geçiş. Tarayıcı tarafından yürütülür (JavaScript yok, ek istek
   yok); desteklemeyen tarayıcılar bu bloğu tamamen yok sayar ve sayfa
   eskisi gibi anında açılır — yani hiçbir tarayıcıda bir şey bozulmaz.
   Süre bilerek kısa: geçiş fark edilsin ama gezinmeyi yavaşlatmasın. */
@view-transition{navigation:auto;}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.26s;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion: reduce){
  @view-transition{navigation:none;}
}

/* ============ Reset ============ */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}
img,video,canvas,svg{display:block;max-width:100%;height:auto;}
/* <picture> görünür bir kutu DEĞİLDİR; tek işi tarayıcıya hangi dosyayı
   (webp mi jpg mi) seçeceğini söylemektir. Ne var ki varsayılan olarak
   kendi kutusunu oluşturur ve yüksekliği AUTO'dur. Bu durumda içindeki
   <img>'e yazılan `height:100%`, <picture>'ın auto yüksekliğine karşı
   çözülemez ve auto'ya düşer: fotoğraf kutuyu doldurmak yerine kendi
   en-boy oranında durur ve altında boşluk bırakır. Üretim bölümündeki
   büyük fotoğrafın altında krem bir şerit kalmasının sebebi tam olarak
   buydu (kutu 733px, fotoğraf 694px).

   display:contents ile <picture> yerleşimden tamamen çıkar; <img> doğrudan
   üst kutunun çocuğu gibi davranır, yüzdeler doğru çözülür ve
   object-fit:cover beklendiği gibi çalışır.

   İSTİSNA: konumlandırılmış (position:absolute) bir <picture> varsa
   display:contents onu konumlandırılamaz hale getirir; böyle bir öğe
   kendi display değerini AÇIKÇA yazmalıdır — bkz. products.css
   → .product-card__img{display:block}. Sınıf seçicisi burada eleman
   seçicisini ezdiği için sıralamadan bağımsız çalışır. */
picture{display:contents;}
input,button,textarea,select{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:none;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;padding:0;}
table{border-collapse:collapse;}
:focus-visible{outline:2px solid var(--color-taupe-dark);outline-offset:3px;}

/* ============ Kök ============ */
body{
  background:var(--bg-primary);
  color:var(--color-ink);
  font-family:var(--font-body);
  font-size:17px;
  font-weight:400;
  line-height:1.68;
  overflow-x:hidden;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
body.no-scroll{overflow:hidden;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.005em;
  color:var(--color-ink);
}
/* Cormorant Garamond, aynı punto değerinde çoğu sans'tan gözle görülür
   biçimde KÜÇÜK görünür (x-yüksekliği düşük). Ölçek bu yüzden referans
   sitedekinden bilerek bir tık yukarı alındı; yoksa başlıklar gövde
   metninin yanında cılız kalıyordu. */
h1{font-size:clamp(2.9rem,6vw,5.2rem);}
h2{font-size:clamp(2.3rem,4.2vw,3.6rem);}
h3{font-size:clamp(1.5rem,2.4vw,2.1rem);}
h4{font-size:1.3rem;}
p{max-width:64ch;}
strong{font-weight:600;}
em{font-style:italic;}

.eyebrow{
  font-family:var(--font-accent);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.72rem;
  font-weight:500;
  color:var(--color-taupe-dark);
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.eyebrow::before{
  content:'';
  width:1.8em;height:1px;
  background:currentColor;
  display:inline-block;
  opacity:.55;
}
.eyebrow--plain::before{display:none;}

/* ============ Header ile içeriğin zemin sürekliliği ============
   Header, sayfanın ÜSTÜNDE ayrı bir şerit olarak durmaz; içerik onun
   ARKASINDAN başlar.

   NEDEN: Daha önce header kendi satırında duruyordu ve arkasında gövdenin
   zemini (--bg-primary) görünüyordu; hemen altındaki bölüm ise kendi
   gradyanının en sıcak tonuyla (--bg-tertiary) başlıyordu. İki ton
   birbirine yakın ama aynı değildi, dolayısıyla header'ın bittiği yerde
   ekranı boydan boya kesen ince bir renk basamağı oluşuyordu.

   Şimdi `main` tam header yüksekliği kadar yukarı çekiliyor ve ilk bölüm
   aynı miktarı üst dolgu olarak geri veriyor. İkisi birbirini götürdüğü
   için içerik yerinden oynamaz; kazanç şu: header'ın arkasında artık
   bölümün KENDİ zemini akıyor, yani ortada iki ayrı renk kalmıyor. */
main{margin-top:calc(-1 * var(--header-h));}

/* Çapa (#id) bağlantılarında hedef bölüm, sabit header'ın altında
   kalmasın. */
[id]{scroll-margin-top:calc(var(--header-h) + 1rem);}

/* ============ Layout yardımcıları ============ */
.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}
/* ============ Işık katmanı standardı ============
   Fotoğraf ve kart arkalarındaki ambiyans ışıkları, bölümün ZEMİN RENGİ
   ile İÇERİĞİ arasında, kendi katmanında durur. Kural iki parçadan oluşur
   ve ikisi birlikte çalışır:

     1) Işığı barındıran bölüm bir yığın bağlamı (stacking context) açar
        → `isolation:isolate`
     2) Işığın kendisi o bağlamda negatif katmana alınır
        → `z-index:-1`

   Bu ikili tam olarak istenen sırayı verir: tarayıcı önce bölümün
   zeminini, sonra negatif katmandaki ışıkları, en son da normal akıştaki
   TÜM içeriği (başlık, paragraf, kutu, buton, fotoğraf) boyar.

   NEDEN GEREKLİ: Işıklar konumlandırılmış (position:absolute) öğeler.
   Konumlandırılmış öğeler, boyama sırasında normal akıştaki öğelerden
   SONRA gelir — yani z-index verilmediğinde metnin ÜZERİNE çizilirler.
   Kurumsal bölümünde, üstteki paragrafın ikinci satırının soluk
   görünmesinin sebebi tam olarak buydu: ışık kutusundan yukarı taşıp
   yazının üstünü örtüyordu.

   `isolation:isolate` olmadan tek başına `z-index:-1` İŞE YARAMAZ:
   negatif katman en yakın yığın bağlamına kadar çıkar ve bölümün kendi
   arka planının da ALTINA düşer — renkli zeminli bölümlerde
   (.section--tinted) ışık tamamen görünmez olurdu.

   Işığı saran kutu (ör. .production-stage) kendisi bir yığın bağlamı
   AÇMAMALIDIR; açarsa ışık o kutunun içine hapsolur ve kutunun dışına
   taşan kısmı yine üstteki metnin önüne geçer. Bu yüzden scroll-reveal
   (transform + opacity, ki ikisi de yığın bağlamı açar) sarmalayıcıya
   değil, İÇİNDEKİ içerik kutusuna verilir. */
.section,
.hero,
.page-intro{isolation:isolate;}

.section{
  position:relative;
  padding-block:clamp(3.5rem,8vw,7.5rem);
}
.section--tinted{background:var(--bg-secondary);}
.section--cream{background:var(--bg-tertiary);}
.section-head{
  display:flex;
  flex-direction:column;
  gap:.9rem;
  max-width:48rem;
  margin-bottom:clamp(2rem,4vw,3.5rem);
}
.section-head.center{align-items:center;text-align:center;margin-inline:auto;}
.section-head p{color:var(--color-anthracite);}
.section-head-row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3.5rem);
}
.section-head-row .section-head{margin-bottom:0;}
@media (max-width:720px){
  .section-head-row{flex-direction:column;align-items:center;text-align:center;}
  .section-head-row .section-head{align-items:center;text-align:center;}
}

.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* ============ Scroll reveal ============ */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s var(--ease-premium), transform .85s var(--ease-premium);
  will-change:opacity, transform;
}
[data-reveal].is-visible{opacity:1;transform:none;}
[data-reveal="fade"]{transform:none;}
[data-reveal="scale"]{transform:scale(.95);}
[data-reveal="scale"].is-visible{transform:scale(1);}
/* Yatay kaydırmalı reveal yalnızca geniş ekranlarda: dar ekranda tüm
   bloklar tek sütuna indiği için hem gereksizdir hem de transform
   sırasında yatay taşmaya yol açabilir. */
@media (min-width:961px){
  [data-reveal="left"]{transform:translateX(-34px);}
  [data-reveal="left"].is-visible{transform:none;}
  [data-reveal="right"]{transform:translateX(34px);}
  [data-reveal="right"].is-visible{transform:none;}
}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none;}
}
[data-reveal-group]>*{transition-delay:calc(var(--stagger-i, 0) * 70ms);}

::selection{background:var(--color-taupe);color:var(--color-paper);}