/* ==========================================================================
   Kar-Tek Narenciye — tasarım sistemi. Tek dosya, build adımı yok.
   ========================================================================== */

/* --- Tokenlar ----------------------------------------------------------- */
/* Palet "Yaprak". Renk değiştirmek isteyen sadece bu bloğa dokunsun:
   aşağıdaki her kural ya bir token ya da bir kanal tokeni kullanıyor.
   Tek istisna `#fff` — o palete bağlı değil, koyu turuncu üzerindeki
   düğme metni. */
:root {
  /* Yeşiller: bahçe yeşili */
  --bahce:      #2C6B4F;
  --bahce-2:    #35805E;
  --yaprak:     #3E9370;
  --yaprak-acik:#52B489;

  /* Metin mürekkebi — zeminden daha koyu, okumak için */
  --murekkep:   #1B4030;

  /* Kâğıt: kasa kartonu */
  --kasa:       #FBF8F0;
  --kasa-2:     #F0EADC;
  --kasa-3:     #FFFDF9;

  /* Meyve */
  --finike:     #E8632A;
  --finike-koyu:#C24A17;
  --kabuk:      #F5B942;

  /* Soğuk hava deposu */
  --buzhane:    #97C0CC;
  /* .soguk bölümlerinin zemini. Kahramandaki "hallederiz" ile aynı olsun
     diye --kabuk'a bağlandı; --kabuk değişirse bu da onunla değişir. */
  --buzhane-koyu: var(--kabuk);

  /* Kanal kopyaları — yarı saydam ayraç/kenarlık için.
     Yukarıdaki hex'ler değişirse bunlar da elle eşitlenmeli. */
  --kasa-rgb:     251 248 240;   /* --kasa */
  --murekkep-rgb:  27  64  48;   /* --murekkep */
  --finike-rgb:   232  99  42;   /* --finike */
  --kabuk-rgb:    245 185  66;   /* --kabuk */

  /* Tipografi */
  --display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --metin:   "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Ölçü */
  --en:      76rem;
  --en-dar:  56rem;
  --bosluk:  clamp(4rem, 9vw, 7.5rem);
  --kenar:   clamp(1.25rem, 5vw, 3.5rem);

  /* Sayfa sütunu ve kenar ağaç katmanı — ayrıntı dosyanın sonunda.
     DİKKAT: --en-sayfa değişirse oradaki 84rem eşiği de değişmeli,
     yoksa kenar boşluğu daralıp ağaçlar eziliyor. */
  --en-sayfa:   70rem;
  --agac-tavan: .55;                            /* katmanın en yüksek opaklığı */
  --agac-tint:  rgb(var(--murekkep-rgb) / .07); /* kenar boşluğunu kâğıttan ayırır */
  --agac-blur:  blur(10px);                     /* kenar fotoğraflarının bulanıklığı */

  --gecis: 220ms cubic-bezier(.2,.6,.3,1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--kasa);
  color: var(--murekkep);
  font-family: var(--metin);
  font-size: clamp(1.0625rem, .3vw + 1rem, 1.1875rem);
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

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

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

.atla {
  position: absolute; top: -100%; left: var(--kenar); z-index: 100;
  background: var(--finike-koyu); color: #fff; padding: .75rem 1.25rem;
  font-family: var(--display); font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
}
.atla:focus { top: 1rem; }

/* --- Tipografi ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

.dev {
  display: block;
  font-variation-settings: "wdth" 118;
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  text-transform: uppercase;
  letter-spacing: -0.03em;
}
.buyuk {
  font-variation-settings: "wdth" 112;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.orta {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.etiket {
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--finike);
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.etiket::after {
  content: ""; flex: 1; height: 1px;
  background: currentColor; opacity: .35;
}
.etiket--tek::after { display: none; }

.giris {
  font-size: clamp(1.15rem, 1.4vw, 1.375rem);
  line-height: 1.55;
  max-width: 46ch;
}

p { margin: 0 0 1.15rem; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

/* --- Yerleşim ----------------------------------------------------------- */
.kap {
  width: 100%;
  max-width: var(--en);
  margin-inline: auto;
  padding-inline: var(--kenar);
}
.kap--dar { max-width: var(--en-dar); }

.bolum { padding-block: var(--bosluk); }
.bolum--sik { padding-block: clamp(3rem, 6vw, 4.5rem); }

.koyu { background: var(--bahce); color: var(--kasa-3); }
.koyu .etiket { color: var(--kabuk); }

.sicak { background: var(--kasa-2); }

/* --buzhane-koyu açık bir mavi olduğu için metin koyu mürekkep.
   Zemini tekrar koyulaştırırsanız bu iki satır da geri dönmeli. */
.soguk { background: var(--buzhane-koyu); color: var(--murekkep); }
.soguk .etiket { color: var(--finike-koyu); }

/* --- Üst bar ------------------------------------------------------------ */
.ust {
  position: sticky; top: 0; z-index: 50;
  /* Kahramandan bir tık koyu — bar, altındaki bölümden ayrışsın.
     Tokene bağlı: --bahce değişirse bu da onunla birlikte kayar. */
  background: color-mix(in srgb, var(--bahce) 86%, #000);
  color: var(--kasa-3);
  border-bottom: 1px solid rgb(var(--kasa-rgb) / .16);
}
.ust__ic {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; min-height: 4.5rem;
}

/* Logo. assets/img/logo.svg koyu zemin için hazırlanmış açık renkli sürüm;
   orijinali logo-orijinal.svg olarak duruyor (açık zeminde onu kullanın). */
.marka {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
/* Logonun alt şeridindeki "NARENCİYE" küçük olduğu için yükseklik cömert
   tutuluyor; üst barın 4.5rem'lik yüksekliğine yaslanıyor. */
.marka img {
  height: clamp(2.6rem, 3.4vw, 3.3rem);
  width: auto;
  display: block;
}
/* Alt bilgide menü baskısı yok, biraz daha büyük durabilir */
.marka--alt img { height: clamp(3rem, 3.8vw, 3.8rem); }

.menu { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.menu a {
  font-family: var(--display);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
  transition: border-color var(--gecis), color var(--gecis);
  white-space: nowrap;
}
.menu a:hover { border-bottom-color: var(--finike); }
.menu a[aria-current="page"] { border-bottom-color: var(--finike); color: #fff; }

.menu-dugme {
  display: none;
  background: none;
  border: 1px solid rgb(var(--kasa-rgb) / .32);
  color: inherit;
  font-family: var(--display);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .6rem .9rem; cursor: pointer;
}

@media (max-width: 62rem) {
  .menu-dugme { display: block; }
  .menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bahce-2);
    border-bottom: 1px solid rgb(var(--kasa-rgb) / .16);
    padding: .5rem var(--kenar) 1.25rem;
  }
  .menu[data-acik="true"] { display: flex; }
  .menu a { padding: .9rem 0; border-bottom: 1px solid rgb(var(--kasa-rgb) / .12); }
}

/* --- Kahraman ----------------------------------------------------------- */
/* overflow: görsel sağda ekran kenarına taşırılıyor; kaydırma çubuğu
   payından doğabilecek birkaç pikseli burada kırpıyoruz. */
/* position: görsel bölümün tamamını kaplayan mutlak bir katman; kuşatan
   kutu burası olmalı, yoksa sayfanın tamamına yayılıyor.
   overflow: bulanık kopya kenarlardan taşıyor, burada kırpılıyor. */
.kahraman {
  position: relative;
  overflow: hidden;
  background: var(--bahce);
  color: var(--kasa-3);
}
.kahraman__ic {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  /* Ortalı: alta hizalıyken metnin üstünde büyük bir boşluk kalıyordu */
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem);
  /* Görsel artık yükseklik üretmiyor (mutlak konumda); bölümün dolgun
     durması için taban yükseklik buradan geliyor. */
  min-height: clamp(26rem, 46vh, 38rem);
}
/* Izgara çocukları min-content genişliğine kilitlenmesin */
.kahraman__ic > * { min-width: 0; }

@media (max-width: 60rem) {
  .kahraman__ic { grid-template-columns: 1fr; align-items: start; }
  .kahraman__gorsel { max-height: 22rem; }
}

/* Kurulum cümlesi, vurucu cümleyle TAM AYNI kremde — soluk bir ton
   verilince gri görünüp temadan kopuyordu. Hiyerarşi sadece puntodan
   geliyor: bu satır vurucu cümlenin yaklaşık üçte biri. */
.kahraman__kurulum {
  display: block;
  font-family: var(--display);
  font-size: clamp(1rem, 1.9vw, 1.5rem);
  font-weight: 700;
  font-variation-settings: "wdth" 112;
  letter-spacing: .01em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--kasa-3);
  margin-bottom: clamp(.5rem, .9vw, .8rem);
}
/* Yer adı, vurucu cümlenin son satırıyla aynı amberde — iki vurgu
   birbirine bağlanıyor. Ağırlık miras alınıyor, <b> kalınlaştırmasın. */
.kahraman__kurulum b { color: var(--kabuk); font-weight: inherit; }
.kahraman__baslik em { font-style: normal; color: var(--kabuk); display: block; }
.kahraman__alt {
  margin-top: 1.75rem; padding-top: 1.75rem;
  border-top: 2px solid rgb(var(--kasa-rgb) / .24);
  max-width: 46ch;
  color: rgb(var(--kasa-rgb) / .9);
}
/* Yalnızca YATAYDA taşıyor: .kap dolgusu ve ortalama boşluğu negatif kenar
   boşluğuyla iptal edilip sağda ekran kenarına dayanıyor. Dikeyde taşma yok
   — bölümün yüksekliği eskisi gibi kalıyor.
   Sağ köşeler yuvarlanmıyor, orada ekranın dışına taşıyor. */
/* Görsel artık bir ızgara sütunu değil, bölümün tamamını kaplayan bir
   zemin katmanı: kenardan kenara, üstten alta. Sol tarafta maskeyle
   söndüğü için yazıların arkası düz yeşil kalıyor. */
.kahraman__gorsel {
  position: absolute;
  inset: 0 0 0 auto;          /* sağa yaslı */
  z-index: 0;
  overflow: hidden;
  /* ÖNEMLİ — netlik burada belirleniyor.
     Kaynak fotoğraf 768 px geniş. Kutuyu 52rem (832 px) ile sınırlayınca
     büyütme en fazla 1.08x kalıyor, yani fotoğraf neredeyse kendi
     piksel boyutunda çiziliyor ve net duruyor. Kutuyu genişletmek
     doğrudan bulanıklık demek.
     Daha büyük bir fotoğraf gelirse bu sınır da yükseltilebilir:
     kabaca (fotoğrafın genişliği / 16) rem kadar. */
  width: min(52rem, 60%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 46%);
          mask-image: linear-gradient(to right, transparent 0, #000 46%);
}
.kahraman__gorsel img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Dikey fotoğraf geniş bir alana yayılırken üst-alt kırpılıyor;
     ağaç sıralarının ve yolun kaldığı bant korunuyor. */
  object-position: center 40%;
  display: block;
}
/* Metin sütunu görselin üstünde kalsın */
.kahraman__ic > div:first-child { position: relative; z-index: 1; }
/* Solda bulanık, sağa gittikçe netleşiyor: aynı fotoğrafın bulanık bir
   kopyası üste bindirilip maskeyle sağa doğru söndürülüyor. Metne yakın
   olan sol kenar zemine karışıyor, ekran kenarına dayanan sağ taraf net.
   NOT: dosya yolu burada da geçiyor — fotoğrafı değiştirirken ikisini de
   güncelleyin (index.html'deki <picture> ve buradaki iki url). */
.kahraman__gorsel::after {
  content: "";
  position: absolute; inset: 0;
  background: url("../img/kahraman-nar.jpg") center 42% / cover no-repeat;
  /* WebP sürümü: <img> zaten .webp yüklüyor, aynı dosyayı işaret edince
     tarayıcı ikinci kez indirmiyor. Desteklemeyen tarayıcı üstteki satırda kalır. */
  background-image: image-set(url("../img/kahraman-nar.webp") type("image/webp"), url("../img/kahraman-nar.jpg") type("image/jpeg"));
  filter: blur(16px);
  transform: scale(1.08);          /* bulanık kenarın içeri sızmasını engeller */
  /* Bulanık kopya solda güçlü, sağa doğru siliniyor. Kabın kendi sönmesiyle
     birleşince sıra şu oluyor: yeşil → bulanık ve saydam → bulanık → net. */
  -webkit-mask-image: linear-gradient(to right, #000 0 22%, transparent 62%);
          mask-image: linear-gradient(to right, #000 0 22%, transparent 62%);
  pointer-events: none;
}

@media (max-width: 60rem) {
  /* Dar ekranda metnin arkasında fotoğraf olmaz — görsel akışa dönüp
     metnin altında normal bir blok olarak duruyor. */
  .kahraman__gorsel {
    position: static;
    height: 20rem;
    border-radius: 1.1rem;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .kahraman__gorsel::after { display: none; }
}

/* --- Butonlar ----------------------------------------------------------- */
.dugme {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--display);
  font-size: .82rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  text-decoration: none;
  padding: .95rem 1.6rem;
  /* Dolgu --finike değil --finike-koyu: beyaz metin --finike üzerinde
     3.4:1 kalıyor, koyusunda 4.9:1 ile AA'yı geçiyor. */
  border: 2px solid var(--finike-koyu);
  background: var(--finike-koyu); color: #fff;
  transition: background var(--gecis), color var(--gecis), transform var(--gecis);
}
.dugme:hover {
  background: color-mix(in srgb, var(--finike-koyu) 86%, #000);
  border-color: color-mix(in srgb, var(--finike-koyu) 86%, #000);
}
.dugme:active { transform: translateY(1px); }

.dugme--bos { background: transparent; color: var(--finike-koyu); border-color: var(--finike-koyu); }
/* Kahraman da koyu bir zemin — .koyu sınıfı taşımadığı için ayrıca yazılıyor */
.koyu .dugme--bos, .soguk .dugme--bos, .kahraman .dugme--bos {
  color: var(--kabuk); border-color: var(--kabuk);
}
.dugme--bos:hover { background: var(--finike-koyu); color: #fff; border-color: var(--finike-koyu); }
.koyu .dugme--bos:hover, .soguk .dugme--bos:hover, .kahraman .dugme--bos:hover {
  background: var(--kabuk); color: var(--bahce); border-color: var(--kabuk);
}

.dugme-sira { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* --- Zincir: ürünün izlediği yol ---------------------------------------- */
.zincir {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.zincir__adim {
  position: relative;
  padding: 2.4rem 1rem 0 0;
  font-family: var(--display);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.25;
}
.zincir__adim::before {
  content: ""; position: absolute; top: .6rem; left: 0; right: 0;
  height: 2px; background: currentColor; opacity: .22;
}
.zincir__adim:last-child::before { right: auto; width: 1rem; }
.zincir__adim::after {
  content: ""; position: absolute; top: 0; left: 0;
  width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--finike);
}
.koyu .zincir__adim::after { background: var(--kabuk); }
.zincir__not {
  display: block;
  font-family: var(--metin);
  font-size: .92rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: .72;
  margin-top: .5rem;
}

@media (max-width: 52rem) {
  .zincir { grid-template-columns: 1fr; gap: 0; }
  .zincir__adim { padding: 0 0 1.1rem 2rem; }
  .zincir__adim::before {
    top: 1rem; bottom: -.2rem; left: .45rem; right: auto;
    width: 2px; height: auto;
  }
  .zincir__adim:last-child::before { display: none; }
  .zincir__adim::after { top: .1rem; width: .95rem; height: .95rem; }
  .zincir__not { margin-top: .25rem; }
}

/* --- Kartlar ------------------------------------------------------------ */
.kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1px;
  background: rgb(var(--murekkep-rgb) / .18);
  border: 1px solid rgb(var(--murekkep-rgb) / .18);
  margin-top: 3rem;
}
.koyu .kartlar { background: rgb(var(--kasa-rgb) / .22); border-color: rgb(var(--kasa-rgb) / .22); }

/* Tam üç kart varsa asla 2+1 dizilmesin: ızgaranın zemini boş dördüncü
   hücrede göründüğü için orada gri bir kutu kalıyordu.
   Geniş ekranda üç sütun, dar ekranda tek sütun — ikisinde de boşluk yok. */
.kartlar:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; }
@media (min-width: 46rem) {
  .kartlar:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}

.kart {
  background: var(--kasa);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  display: flex; flex-direction: column; gap: .85rem;
  text-decoration: none;
  transition: background var(--gecis);
}
.sicak .kart { background: var(--kasa-2); }
.koyu .kart { background: var(--bahce); }
.kart:hover { background: var(--kasa-3); }
.sicak .kart:hover { background: var(--kasa-3); }
.koyu .kart:hover { background: var(--bahce-2); }

.kart__no {
  font-family: var(--display);
  font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  color: var(--finike);
}
.koyu .kart__no { color: var(--kabuk); }

.kart__baslik {
  font-family: var(--display);
  font-size: 1.3rem; font-weight: 800;
  line-height: 1.1; letter-spacing: -.01em;
  margin: 0;
}
.kart p { font-size: .98rem; margin: 0; }
.kart__ok {
  margin-top: auto; padding-top: .75rem;
  font-family: var(--display);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--finike);
}
.koyu .kart__ok { color: var(--kabuk); }
.kart:hover .kart__ok { text-decoration: underline; text-underline-offset: .3em; }

/* --- Süreç adımları ----------------------------------------------------- */
.adimlar { margin-top: 3rem; border-top: 2px solid rgb(var(--murekkep-rgb) / .24); }
.koyu .adimlar, .soguk .adimlar { border-top-color: rgb(var(--kasa-rgb) / .28); }

.adim {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid rgb(var(--murekkep-rgb) / .16);
}
.koyu .adim, .soguk .adim { border-bottom-color: rgb(var(--kasa-rgb) / .18); }
@media (max-width: 40rem) { .adim { grid-template-columns: 1fr; gap: .5rem; } }

.adim__no {
  font-family: var(--display);
  font-size: 1.6rem; font-weight: 800;
  font-variation-settings: "wdth" 110;
  line-height: 1; color: var(--finike);
}
.soguk .adim__no { color: var(--buzhane); }
.koyu .adim__no { color: var(--kabuk); }

.adim__baslik {
  font-family: var(--display);
  font-size: 1.2rem; font-weight: 800;
  letter-spacing: -.005em; margin: 0 0 .5rem;
}
.adim p { font-size: 1rem; margin: 0; }

/* --- İkili yerleşim ----------------------------------------------------- */
.ikili {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.ikili--metin-sag { grid-template-columns: .9fr 1.1fr; }
.ikili--metin-sol { grid-template-columns: 1.1fr .9fr; }
@media (max-width: 56rem) { .ikili, .ikili--metin-sag, .ikili--metin-sol { grid-template-columns: 1fr; } }

/* --- Görsel yuvası ------------------------------------------------------ */
.gorsel { position: relative; }
.gorsel img { width: 100%; border: 1px solid rgb(var(--murekkep-rgb) / .22); }
.koyu .gorsel img, .soguk .gorsel img { border-color: rgb(var(--kasa-rgb) / .22); }
.gorsel figcaption {
  margin-top: .7rem;
  font-family: var(--display);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  opacity: .6;
}

.gorsel-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.25rem; margin-top: 3rem;
}

/* --- Harita ------------------------------------------------------------- */
.harita {
  margin-top: 2.5rem;
  aspect-ratio: 16 / 9;
  border: 1px solid rgb(var(--murekkep-rgb) / .22);
  background: rgb(var(--murekkep-rgb) / .05);
}
.harita iframe { display: block; width: 100%; height: 100%; border: 0; }
.koyu .harita, .soguk .harita { border-color: rgb(var(--kasa-rgb) / .22); }

@media (max-width: 40rem) { .harita { aspect-ratio: 3 / 4; } }

/* --- Liste -------------------------------------------------------------- */
.liste { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.liste li {
  padding: .7rem 0 .7rem 1.75rem;
  border-bottom: 1px solid rgb(var(--murekkep-rgb) / .14);
  position: relative; max-width: 62ch;
}
.koyu .liste li, .soguk .liste li { border-bottom-color: rgb(var(--kasa-rgb) / .18); }
.liste li::before {
  content: ""; position: absolute; left: 0; top: 1.25rem;
  width: .6rem; height: .6rem; background: var(--finike);
}
.koyu .liste li::before, .soguk .liste li::before { background: var(--kabuk); }

/* --- Ekip --------------------------------------------------------------- */
/* İki kurucu üstte — alttaki ekip kartlarıyla aynı biçim, sadece daha
   büyük ve ortada. Sayfanın geri kalanına yayılmasınlar diye genişlik
   sınırlı.                                                                */
.ekip-one {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 19rem));
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  margin-top: 3rem;
}
@media (max-width: 40rem) {
  .ekip-one { grid-template-columns: minmax(0, 19rem); justify-content: center; }
}

.kisi-one {
  background: var(--kasa-2);
  border: 1px solid rgb(var(--murekkep-rgb) / .18);
  padding: 1rem 1rem 1.25rem;
  text-align: center;
}
.sicak .kisi-one { background: var(--kasa-3); }
.koyu .kisi-one { background: var(--bahce-2); border-color: rgb(var(--kasa-rgb) / .2); }

.kisi-one img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  margin-bottom: 1rem;
}

.kisi-one__ad {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 800; line-height: 1.05;
  letter-spacing: -.01em; margin: 0;
}
.kisi-one__unvan {
  font-family: var(--display);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--finike); margin: .5rem 0 0;
}
.koyu .kisi-one__unvan { color: var(--kabuk); }

/* Sütun sayısı kişi sayısına göre seçildi: 18 kişi 6'ya, 3'e ve 2'ye tam
   bölünüyor, dolayısıyla hiçbir ekran boyutunda son satır yarım kalmıyor.
   auto-fill kullanılırsa 7 sütun çıkıp son satırda 3 hücre boş kalıyordu.
   DİKKAT: kişi sayısı değişirse bu sayılar da gözden geçirilmeli —
   ızgara zemini boş hücrelerde göründüğü için eksik satır hemen belli oluyor. */
.ekip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: rgb(var(--murekkep-rgb) / .18);
  border: 1px solid rgb(var(--murekkep-rgb) / .18);
  margin-top: 2.5rem;
  list-style: none; padding: 0;
}
@media (max-width: 62rem) { .ekip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 34rem) { .ekip { grid-template-columns: repeat(2, 1fr); } }
.koyu .ekip { background: rgb(var(--kasa-rgb) / .22); border-color: rgb(var(--kasa-rgb) / .22); }

.kisi { background: var(--kasa); padding: .85rem .85rem 1rem; }
.sicak .kisi { background: var(--kasa-3); }
.koyu .kisi { background: var(--bahce); }
.kisi img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: .7rem; }
.kisi__ad {
  font-family: var(--display);
  font-size: .88rem; font-weight: 700;
  line-height: 1.15; margin: 0;
}
.kisi__unvan {
  font-family: var(--display);
  font-size: .66rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  opacity: .62; margin: .3rem 0 0; line-height: 1.3;
}

/* --- Sayfa başlığı ------------------------------------------------------ */
.sayfa-bas {
  background: var(--bahce); color: var(--kasa-3);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
}
.sayfa-bas--soguk { background: var(--buzhane-koyu); }
.sayfa-bas__baslik { max-width: 18ch; }
.sayfa-bas__giris {
  margin-top: 1.5rem;
  color: rgb(var(--kasa-rgb) / .88);
  max-width: 52ch;
  font-size: clamp(1.1rem, 1.3vw, 1.3rem);
}

/* --- İletişim ----------------------------------------------------------- */
/* Dört bilgi, eşit bölünmüş tek panel — kart ızgarasıyla aynı dil:
   1px'lik boşluklardan kabın zemini geçiyor, ayraç oradan çıkıyor. */
.bilgi-izgara {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgb(var(--murekkep-rgb) / .18);
  border: 1px solid rgb(var(--murekkep-rgb) / .18);
  margin-top: 3rem;
}
@media (max-width: 62rem) { .bilgi-izgara { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .bilgi-izgara { grid-template-columns: 1fr; } }

.bilgi {
  background: var(--kasa);
  padding: clamp(1.2rem, 2vw, 1.6rem);
  margin: 0;
}
.bilgi dt {
  font-family: var(--display);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--finike); margin-bottom: .65rem;
}
.koyu .bilgi dt { color: var(--kabuk); }
/* Telefon/e-posta gibi veriler için display yazı tipi daha temiz duruyor;
   tabular-nums rakamları eşit genişlikte dizip numarayı okunur kılıyor. */
.bilgi dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.bilgi dd a { text-decoration: none; }
.bilgi dd a:hover { text-decoration: underline; text-underline-offset: .25em; }

/* Doldurulmayı bekleyen alanlar. Görsel işaret (zemin + noktalı alt çizgi)
   kaldırıldı; sınıf kodda kalıyor ki eksikler aranabilsin:
   grep -rn 'class="yer-tutucu"' *.html */
.yer-tutucu { font-style: normal; }

/* --- Kapanış çağrısı ---------------------------------------------------- */
.cagri { text-align: center; }
.cagri .giris { margin-inline: auto; }
.cagri .dugme-sira { justify-content: center; }

/* --- Alt bilgi ---------------------------------------------------------- */
.alt {
  background: var(--bahce);
  color: rgb(var(--kasa-rgb) / .8);
  padding-block: clamp(3rem, 5vw, 4rem) 2rem;
  font-size: .95rem;
}
.alt__ic { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 48rem) { .alt__ic { grid-template-columns: 1fr; gap: 2rem; } }

.alt h3 {
  font-family: var(--display);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--kabuk); margin: 0 0 1rem;
}
.alt ul { list-style: none; margin: 0; padding: 0; }
.alt li { margin-bottom: .55rem; }
.alt a { text-decoration: none; }
.alt a:hover { color: var(--kabuk); text-decoration: underline; text-underline-offset: .25em; }

.alt__son {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgb(var(--kasa-rgb) / .18);
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 1rem; font-size: .82rem; opacity: .75;
}

/* ==========================================================================
   .soguk açık zeminli
   --------------------------------------------------------------------------
   Zemin amber. Yukarıdaki kuralların çoğu bu bölümü koyu zemin sanıp krem
   kenarlık ve amber vurgu veriyor; burada hepsi koyu mürekkebe dönüyor.
   Turuncu da kullanılmıyor: amber üzerinde turuncu 2.8:1'de kalıyor,
   küçük metin için okunmuyor. Bloğun konumu önemli — aynı özgüllükte
   oldukları için sonda olması gerekiyor.

   Zemini tekrar koyulaştırırsanız bu bloğun tamamını silin.
   ========================================================================== */

/* Amber üzerinde koyu yeşil dolgu: hem düğme zeminden ayrışıyor (3.6:1)
   hem beyaz metin rahat okunuyor (7:1). */
.soguk .dugme {
  background: var(--bahce); border-color: var(--bahce); color: #fff;
}
.soguk .dugme:hover {
  background: color-mix(in srgb, var(--bahce) 84%, #000);
  border-color: color-mix(in srgb, var(--bahce) 84%, #000);
}
.soguk .dugme--bos {
  background: transparent; color: var(--murekkep); border-color: var(--murekkep);
}
.soguk .dugme--bos:hover {
  background: var(--murekkep); color: var(--kabuk); border-color: var(--murekkep);
}
.soguk .etiket      { color: var(--murekkep); }
.soguk .adimlar     { border-top-color: rgb(var(--murekkep-rgb) / .3); }
.soguk .adim        { border-bottom-color: rgb(var(--murekkep-rgb) / .2); }
.soguk .adim__no    { color: var(--murekkep); }
.soguk .gorsel img  { border-color: rgb(var(--murekkep-rgb) / .28); }
.soguk .liste li    { border-bottom-color: rgb(var(--murekkep-rgb) / .18); }
.soguk .liste li::before { background: var(--murekkep); }

.sayfa-bas--soguk { color: var(--murekkep); }
.sayfa-bas--soguk .etiket { color: var(--murekkep); }
.sayfa-bas--soguk .sayfa-bas__giris { color: rgb(var(--murekkep-rgb) / .82); }
.sayfa-bas--soguk .serit { border-top-color: rgb(var(--murekkep-rgb) / .2); }

/* ==========================================================================
   Sayfa sütunu + kenar ağaç katmanı
   --------------------------------------------------------------------------
   Geniş ekranda içerik ortada dar bir "kâğıt" sütununa toplanır; iki yanda
   kalan boşlukta bulanık portakal ve nar panelleri kayar.

   Tamamı aşağıdaki @media bloğunun içinde. Bu bölümü silmek siteyi eski
   tam genişlik haline birebir döndürür.

   Kural: ilk bölüm (index'te kahraman, iç sayfalarda .sayfa-bas, 404'te tek
   bölüm) sütuna GİRMEZ, tam genişlikte kalır. Üst bar ve alt bilgi zaten
   main'in kardeşi olduğu için etkilenmez.
   ========================================================================== */

.agac { display: none; }

@media (min-width: 84rem) {

  /* --- Sütun ------------------------------------------------------------ */
  main { position: relative; z-index: 1; }

  main > section:not(:first-child) {
    max-width: var(--en-sayfa);
    margin-inline: auto;
  }
  /* Ortada tam genişlik bir bölüm gerekirse kaçış kapısı */
  main > section.tam-genislik { max-width: none; }

  /* Tek parça gölge + kâğıt zemin.
     Zemin şart: modifikatörsüz .bolum'ler şeffaf, onsuz ağaçlar
     metnin arkasından görünür. */
  main::before {
    content: "";
    position: absolute; z-index: -1;
    top: 0; bottom: 0; left: 50%;
    width: var(--en-sayfa);
    margin-left: calc(var(--en-sayfa) / -2);
    background: var(--kasa);
    box-shadow:  26px 0 48px -30px rgb(var(--murekkep-rgb) / .5),
                -26px 0 48px -30px rgb(var(--murekkep-rgb) / .5);
    pointer-events: none;
  }

  .alt { position: relative; z-index: 1; }

  /* --- Ağaç katmanı ----------------------------------------------------- */
  .agac {
    display: block;
    position: fixed; inset: 0; z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--agac-tint);
    opacity: calc(var(--gorunur, 0) * var(--agac-tavan));
    will-change: opacity;
  }

  .agac__yan {
    position: absolute;
    top: 0; height: 126vh;
    /* Kenar boşluğunun tamamı + sütunun altına giren küçük bir pay.
       Boşluğu tam doldurması gerekiyor, yoksa fotoğrafla sütun arasında
       açık renkli bir şerit kalıyor. Panelin ne kadar geniş göründüğünü
       --en-sayfa belirliyor: sütun genişledikçe boşluk daralır. */
    width: calc(50% - var(--en-sayfa) / 2 + 1.5rem);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* Bulanıklık artık burada: gerçek fotoğraflarda SVG filtresi yok.
       Katman sadece transform ile kaydığı için blur bir kez rasterleşiyor,
       kaydırma sırasında yeniden hesaplanmıyor. */
    filter: var(--agac-blur);
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }

  /* Sönme yalnızca son dilimde — orası zaten sütunun altında kalıyor.
     Böylece fotoğraf kenar boşluğunu baştan sona dolduruyor, arada açık
     renkli bir bant kalmıyor; sütunun kenarında da sert bir kesik olmuyor. */
  .agac__yan--sol {
    left: 0;
    background-image: url("../img/agac-portakal.jpg");
    /* WebP destekleyen tarayici asagidakini alir; desteklemeyen ustteki satirda kalir. */
    background-image: image-set(url("../img/agac-portakal.webp") type("image/webp"), url("../img/agac-portakal.jpg") type("image/jpeg"));
    -webkit-mask-image: linear-gradient(to right, #000 0 90%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0 90%, transparent 100%);
  }
  .agac__yan--sag {
    right: 0;
    background-image: url("../img/agac-nar.jpg");
    /* WebP destekleyen tarayici asagidakini alir; desteklemeyen ustteki satirda kalir. */
    background-image: image-set(url("../img/agac-nar.webp") type("image/webp"), url("../img/agac-nar.jpg") type("image/jpeg"));
    -webkit-mask-image: linear-gradient(to left, #000 0 90%, transparent 100%);
            mask-image: linear-gradient(to left, #000 0 90%, transparent 100%);
  }

  /* --- Sütuna sığması için ızgara ayarları ------------------------------ */
  /* İçerik genişliği 1104px'ten 816px'e düşüyor; 4'lü ızgaralar 3+1 öksüz
     kalmasın diye 2x2'ye çekiliyor. */
  .kartlar        { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
  .gorsel-izgara  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
  .zincir__adim   { font-size: .8rem; }
  .zincir__not    { font-size: .86rem; }
  .kisi-one       { grid-template-columns: minmax(6rem, 8.5rem) 1fr; }
}

/* --- Dörtlü görsel ızgarası (2x2) ----------------------------------------
   .gorsel-izgara auto-fit ile çalışır; bu 2 ve 3 görselli ızgaralarda doğru
   davranıyor ama 4 görselli olanlarda sütun sayısı genişliğe göre kayıyordu
   (1400px, 1000px ve 880px'te 3+1 öksüz satır ölçüldü). Bu modifikatör
   düzeni sabitler: 2x2 -> tek sütun. Kareler 4'lü satıra göre iki kat
   büyük çıkıyor.

   DİKKAT: Yukarıdaki (min-width: 84rem) bloğu .gorsel-izgara'yı yeniden
   tanımlıyor. Özgüllük eşit olduğu için bu kuralların kaynak sırasında ondan
   SONRA gelmesi zorunlu; bu bloğu yukarı taşımayın.
-------------------------------------------------------------------------- */
.gorsel-izgara--dort { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 34rem) { .gorsel-izgara--dort { grid-template-columns: 1fr; } }

/* --- Üçlü görsel ızgarası (2 üstte + 1 ortada altta) ----------------------
   3 görselli ızgarada auto-fit üçünü yan yana diziyor ve kareler küçük
   kalıyordu. Bu düzen ikisini üste alıp üçüncüyü tam ortada alta indiriyor.

   Nasıl: taban 4 sütun, her hücre 2 sütun kaplıyor. Böylece üç kare de
   birebir aynı genişlikte oluyor ((kap - boşluk) / 2) ve üçüncü hücre
   2. sütundan başlayınca matematiksel olarak tam ortaya oturuyor.

   DİKKAT: --dort ile aynı sebepten, (min-width: 84rem) bloğunun ALTINDA
   kalmak zorunda — orası .gorsel-izgara'yı yeniden tanımlıyor.
-------------------------------------------------------------------------- */
.gorsel-izgara--iki-bir { grid-template-columns: repeat(4, 1fr); }
.gorsel-izgara--iki-bir > *                { grid-column: span 2; }
.gorsel-izgara--iki-bir > :nth-child(3)    { grid-column: 2 / span 2; }

@media (max-width: 34rem) {
  .gorsel-izgara--iki-bir { grid-template-columns: 1fr; }
  .gorsel-izgara--iki-bir > *,
  .gorsel-izgara--iki-bir > :nth-child(3) { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .agac__yan { transform: none !important; will-change: auto; }
}

@media print {
  .agac { display: none !important; }
  main::before { display: none; }
  main > section { max-width: none; }
}

/* --- WhatsApp düğmesi ------------------------------------------------------
   Sabit konumlu, sağ altta. Hazır widget'ların yuvarlak parlak yeşil
   baloncuğu yerine sitenin kendi düğme dilinde: keskin köşe, display yazı
   tipi, büyük harf. Zemin --bahce, ikon --kabuk.

   z-index 60: üst bar 50'de, "içeriğe atla" 100'de. Arada duruyor ki
   bara binmesin, klavye kullanıcısının atlama bağlantısını da örtmesin.
   Dar ekranda yazı gizlenir, sadece ikon kalır.
--------------------------------------------------------------------------- */
.wa {
  position: fixed;
  right: clamp(1rem, 3vw, 2.25rem);
  bottom: clamp(1rem, 3vw, 2.25rem);
  z-index: 60;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.35rem;
  font-family: var(--display);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--bahce);
  background: var(--bahce); color: var(--kasa-3);
  /* Koyu bölümlerin üstünde de ayrışsın diye gölge */
  box-shadow: 0 .4rem 1.4rem rgb(var(--murekkep-rgb) / .32);
  transition: background var(--gecis), transform var(--gecis);
}
.wa:hover, .wa:focus-visible {
  background: color-mix(in srgb, var(--bahce) 88%, #000);
  transform: translateY(-2px);
}
.wa svg { width: 1.25rem; height: 1.25rem; flex: none; fill: var(--kabuk); }

/* Telefonda yazı düşer, ikon kalır — içeriğin üstünü az kaplasın. */
@media (max-width: 30rem) {
  .wa { padding: .95rem; }
  .wa__yazi {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .wa svg { width: 1.4rem; height: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wa { transition: none; }
  .wa:hover, .wa:focus-visible { transform: none; }
}

/* Yazdırırken kağıda basılmasın */
@media print { .wa { display: none; } }