/* =================================================================
   Kokoreç Alkan · style.css
   Tasarım sistemi. Tüm sayfalar bu dosyayı kullanır.

   İçindekiler
   01 Token'lar
   02 Sıfırlama ve taban
   03 Tipografi
   04 Yerleşim yardımcıları
   05 Doku (grain) ve reveal
   06 Butonlar ve bağlantılar
   07 Header, nav, mobil panel
   08 Hero
   09 Tezgah künyesi
   10 Ürün kartları
   11 Bölünmüş bölüm (İzmir usulü)
   12 Kor bandı
   13 Mutfak adımları
   14 Yanında iyi gider
   15 Konum ve iletişim
   16 Menü ve SSS (diğer sayfalar)
   17 Footer
   18 Mobil alt aksiyon çubuğu
   19 İletişim sayfası
   20 Mutfağımız sayfası
   21 Hareket tercihi ve baskı
   22 Premium hareket katmanı (22.1 · 22.8)
   ================================================================= */


/* == 01 Token'lar ================================================= */

:root {
  /* Palet · kilitli */
  --bg: #12100E;
  --bg2: #1B1815;
  --krem: #F2E7D5;
  --kul: #A79E90;
  --bakir: #C4703A;
  --kor: #E2542A;

  /* Türetilmiş yüzeyler (saf siyah/beyaz yok) */
  --cizgi: rgba(242, 231, 213, 0.12);
  --cizgi-guclu: rgba(242, 231, 213, 0.22);
  --bakir-sis: rgba(196, 112, 58, 0.14);
  --golge: 0 24px 60px -28px rgba(0, 0, 0, 0.85);

  /* Tipografi */
  --f-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --f-govde: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-govde: clamp(1.0625rem, 0.25vw + 1rem, 1.1875rem);   /* 17 · 19 px */
  --t-kucuk: 0.9375rem;
  --t-ust: 0.75rem;                                         /* üst başlık */
  --t-h1: clamp(3rem, 8.4vw, 7rem);
  --t-h2: clamp(2.5rem, 5vw, 3.75rem);                      /* Anton: buyuk basliklar */
  --t-h3: clamp(1.1875rem, 1vw + 0.9rem, 1.4375rem);        /* Archivo */

  /* Ritim */
  --bolum-y: clamp(72px, 11vw, 176px);
  --bolum-y-dar: clamp(56px, 7vw, 104px);
  --kenar: clamp(20px, 5vw, 64px);
  --en: 1280px;
  --olcu: 34em;

  /* Hareket */
  --egri: cubic-bezier(.16, 1, .3, 1);
  --sure: 280ms;

  --header-y: 76px;
}

@media (min-width: 900px) {
  :root { --header-y: 92px; }
}


/* == 02 Sıfırlama ve taban ======================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--krem);
  font-family: var(--f-govde);
  font-size: var(--t-govde);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: 0.002em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-acik { overflow: hidden; }

section, header, footer { overflow-x: clip; }

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

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
figure { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }

::selection { background: var(--bakir); color: var(--bg); }

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

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

.atlama-linki {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--bg2);
  color: var(--krem);
  border: 1px solid var(--cizgi-guclu);
  transform: translateY(-160%);
  transition: transform 200ms var(--egri);
}
.atlama-linki:focus { transform: translateY(0); }


/* == 03 Tipografi ================================================= */

.baslik-xl,
.baslik-l {
  font-family: var(--f-display);
  /* Anton tek agirliklidir; 400 disi deger sahte kalinlik uretir. */
  font-weight: 400;
  /* Anton uzun bir yuz; Turkce Ş, Ç, Ğ kuyruklari ile alt satirin İ, Ş
     noktalari 1.04'te ust uste biniyordu. 1.14 carpismayi bitiren en dar
     deger (olculdu: 112px puntoda kuyruk ~24px, bosluk artik 30px). */
  line-height: 1.14;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* padding-bottom: Anton'un Ş, Ç, Ğ alt uzantilari alttaki metne yapismasin. */
.baslik-xl { font-size: var(--t-h1); line-height: 1.13; padding-bottom: 0.06em; }
.baslik-l  { font-size: var(--t-h2); line-height: 1.15; padding-bottom: 0.05em; }

/* Anton yalniz buyuk basliklarda. Alt basliklar govde fontuyla. */
.baslik-s {
  font-family: var(--f-govde);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.008em;
}

.ust-baslik {
  display: block;
  font-size: var(--t-ust);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bakir);
}

.ust-baslik--cizgili {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ust-baslik--cizgili::after {
  content: '';
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: var(--bakir);
  opacity: 0.45;
}

.gerekce {          /* bölüm altı açıklama metni */
  color: var(--kul);
  max-width: var(--olcu);
}

.metin { max-width: var(--olcu); }
.metin + .metin { margin-top: 1.1em; }

.kul { color: var(--kul); }

/* Tek kelimede bakır · kor gradyanı. Sayfada bir kez. */
.alev {
  background: linear-gradient(102deg, var(--bakir) 8%, var(--kor) 78%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-right: 0.04em;
}

.rakam, .fiyat { font-variant-numeric: tabular-nums; }


/* == 04 Yerleşim yardımcıları ===================================== */

.sarmal {
  width: 100%;
  max-width: var(--en);
  margin-inline: auto;
  padding-inline: var(--kenar);
}

.bolum { padding-block: var(--bolum-y); position: relative; }
.bolum--dar { padding-block: var(--bolum-y-dar); }
.bolum--yuzey { background: var(--bg2); }

.bolum__ust {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.bolum__ust--genis { max-width: 46em; }

.ayrac {
  height: 1px;
  background: var(--cizgi);
  border: 0;
  margin: 0;
}


/* == 05 Doku (grain) ve reveal ==================================== */

.doku {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23d)'/%3E%3C/svg%3E");
  background-size: 260px 260px;
}

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--sure) var(--egri),
    transform var(--sure) var(--egri);
  transition-delay: var(--gecikme, 0ms);
  will-change: opacity, transform;
}
.js .reveal.is-gorunur {
  opacity: 1;
  transform: none;
}


/* == 06 Butonlar ve bağlantılar =================================== */

.buton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border-radius: 2px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: center;
  transition: background-color 200ms var(--egri), color 200ms var(--egri),
              border-color 200ms var(--egri), transform 200ms var(--egri);
}
.buton:active { transform: translateY(1px); }

/* --kor sadece birincil aksiyonda */
.buton--kor {
  background: var(--kor);
  color: #1A0D07;
}
.buton--kor:hover { background: #EF6136; }

.buton--cerceve {
  border: 1px solid var(--cizgi-guclu);
  color: var(--krem);
}
.buton--cerceve:hover {
  border-color: var(--bakir);
  color: var(--bakir);
}

.buton--sade {
  padding: 0;
  min-height: 44px;
  color: var(--bakir);
  letter-spacing: 0.04em;
}
.buton--sade:hover { color: var(--krem); }

.buton--tam { width: 100%; }

.buton-grubu {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.metin-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  color: var(--bakir);
  font-weight: 500;
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--egri), border-color 200ms var(--egri);
}
.metin-link:hover {
  color: var(--krem);
  border-color: var(--cizgi-guclu);
}

.ikon { width: 22px; height: 22px; flex: none; }
.ikon--kucuk { width: 18px; height: 18px; }

.medya {
  position: relative;
  overflow: hidden;
  background: var(--bg2);
}
.medya img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04) brightness(0.92);
  transition: transform 700ms var(--egri);
}


/* == 07 Header, nav, mobil panel ================================== */

.ust-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color 260ms var(--egri), border-color 260ms var(--egri);
}
.ust-bar.is-yapisik {
  background: var(--bg);       /* opak · backdrop-filter yok */
  border-bottom-color: var(--cizgi);
}

.ust-bar__ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-y);
}

.marka {
  display: inline-flex;
  align-items: baseline;
  /* Metin 24px; dokunma hedefi 44px'e cikarilir (taban hizasi bozulmasin
     diye min-height degil dikey ic bosluk kullanildi). */
  padding-block: 10px;
  gap: 9px;
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.marka__nokta {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bakir);
  transform: translateY(-2px);
}
.marka__alt {
  font-family: var(--f-govde);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--kul);
}

.nav { display: none; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 2px;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--krem);
  transition: color 200ms var(--egri);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 9px;
  height: 1px;
  background: var(--bakir);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--egri);
}
.nav__link:hover { color: var(--bakir); }
.nav__link:hover::after,
.nav__link.is-aktif::after { transform: scaleX(1); }
.nav__link.is-aktif { color: var(--bakir); }

.ust-bar__sag { display: flex; align-items: center; gap: 12px; }
.ust-bar__cta { display: none; }

.hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 48px; height: 48px;
  padding: 0 11px;
  border: 1px solid var(--cizgi);
  border-radius: 2px;
}
.hamburger span {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--krem);
  transition: transform 240ms var(--egri), opacity 200ms var(--egri);
}
body.menu-acik .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-acik .hamburger span:nth-child(2) { opacity: 0; }
body.menu-acik .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobil panel · OPAK, backdrop-filter YOK */
.mobil-panel {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: calc(var(--header-y) + 24px) var(--kenar) 40px;
  background: #12100E;
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms var(--egri), visibility 260ms var(--egri);
  overflow-y: auto;
}
.mobil-panel.is-acik {
  opacity: 1;
  visibility: visible;
}

.mobil-panel__link {
  display: flex;
  align-items: center;
  min-height: 60px;
  font-family: var(--f-display);
  font-size: clamp(2rem, 9vw, 2.75rem);
  line-height: 1.1;
  border-bottom: 1px solid var(--cizgi);
  color: var(--krem);
}
.mobil-panel__link.is-aktif { color: var(--bakir); }

.mobil-panel__alt {
  margin-top: 32px;
  display: grid;
  gap: 14px;
  color: var(--kul);
  font-size: var(--t-kucuk);
}
.mobil-panel__alt a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; }

@media (min-width: 900px) {
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.4vw, 40px);
  }
  .ust-bar__cta {
    display: inline-flex;
    min-height: 46px;
    padding: 0 20px;
    font-size: 0.875rem;
  }
  .hamburger { display: none; }
  .mobil-panel { display: none; }
}


/* == 08 Hero ====================================================== */

.hero {
  position: relative;
  min-height: min(94svh, 900px);
  margin-top: calc(var(--header-y) * -1);
  padding-top: var(--header-y);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}

.hero__medya {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--bg2);
  /* Bolum 20'deki yavas yaklasma gorseli buyutur; hero sinirinda kesilmezse
     alttaki bolume ham foto olarak tasar. */
  overflow: hidden;
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(0.9) contrast(1.06) brightness(0.72);
}
.hero__perde {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(18, 16, 14, 0.86) 0%, rgba(18, 16, 14, 0.34) 34%, rgba(18, 16, 14, 0.9) 82%, var(--bg) 100%),
    radial-gradient(120% 80% at 18% 100%, rgba(18, 16, 14, 0.8) 0%, rgba(18, 16, 14, 0) 60%);
}

.hero__ic {
  width: 100%;
  padding-block: clamp(56px, 9vw, 120px);
  display: grid;
  gap: clamp(22px, 3vw, 34px);
}

.hero__konum {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-ust);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--krem);
}
.hero__konum .ikon { color: var(--bakir); }

.hero__baslik { max-width: 14ch; }
.hero__baslik .satir { display: block; }

.hero__alt {
  max-width: 32em;
  color: var(--krem);
  opacity: 0.86;
}

@media (max-width: 520px) {
  .hero .buton-grubu { flex-direction: column; align-items: stretch; }
}

.hero__saat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-kucuk);
  color: var(--kul);
  letter-spacing: 0.04em;
}
.hero__saat::before {
  content: '';
  width: 22px; height: 1px;
  background: var(--bakir);
}

@media (min-width: 900px) {
  .hero__baslik { max-width: 15ch; }
}


/* == 09 Tezgah künyesi ============================================ */
/* Hero ile ürünler arasindaki dikis. Kutu degil, kunye satiri:
   ikon yok, aciklama cumlesi yok, cerceve yok. Aciklamalar baglamli
   olduklari bolumlere (mutfak adimlari, urunler, iletisim) tasindi. */

/* Yuzey .bolum--yuzey'den gelir; buradaki tek is, dikis satiri icin
   bolum ritmini (--bolum-y) daha dara cekmek. */
.kunye { padding-block: clamp(32px, 3.6vw, 46px); }

.kunye__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  column-gap: clamp(22px, 5vw, 52px);
  row-gap: 15px;
}

.kunye__oge {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
  font-size: clamp(var(--t-ust), 0.3vw + 0.68rem, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.17em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--krem);
}

/* Logodaki bakir nokta burada ritim isaretine donusur (.marka__nokta ile
   ayni 5px). Ayrac maddenin basinda durdugu icin satir sarinca oksuz
   ayrac olusmaz. */
.kunye__oge::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 0.42em;
  border-radius: 50%;
  background: var(--bakir);
}

@media (min-width: 900px) {
  /* Bosluklar tabandan devrolur; burada yalniz yerlesim degisir.
     align-items: center 1px'lik cizgiyi satirin ortasina oturtur. */
  .kunye__liste {
    display: flex;
    flex-wrap: wrap;            /* madde eklenirse tasma degil, alt satir */
    align-items: center;
  }
  .kunye__oge { align-items: center; white-space: nowrap; }
  .kunye__oge::before { margin-top: 0; }

  /* Satiri sayfa izgarasinin sag kenarina baglayan bakir cizgi. */
  .kunye__liste::after {
    content: '';
    flex: 1 1 40px;
    min-width: 24px;
    height: 1px;
    background: var(--bakir);
    opacity: 0.45;
  }
}


/* == 10 Ürün kartları ============================================= */

.kartlar {
  display: grid;
  gap: clamp(28px, 3vw, 40px);
}

.kart {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.kart__medya {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg2);
}
/* Farklı kaynaklardan gelen fotoğrafları tek tona çeken kat */
.kart__medya::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 16, 14, 0) 42%, rgba(18, 16, 14, 0.58) 100%);
}
.kart__img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.86) contrast(1.06) brightness(0.8);
  transition: transform 800ms var(--egri), filter 500ms var(--egri);
}
.kart:hover .kart__img {
  transform: scale(1.04);
  filter: saturate(1) contrast(1.06) brightness(0.95);
}

/* 1fr satiri metne verilir: aciklama kac satir olursa olsun fiyat notu ve
   siparis baglantisi uc kartta da ayni hizada oturur. */
.kart__govde {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 10px;
  flex: 1;
}

.kart__baslik {
  font-family: var(--f-govde);
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.kart__metin { color: var(--kul); font-size: var(--t-kucuk); }

.kart__fiyat {
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bakir);
  font-variant-numeric: tabular-nums;
}

.kart__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 2px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--krem);
  border-top: 1px solid var(--cizgi);
  transition: color 200ms var(--egri);
}
.kart__link .ikon { transition: transform 260ms var(--egri); }
.kart__link:hover { color: var(--bakir); }
.kart__link:hover .ikon { transform: translateX(5px); }

.not-satiri {
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 22px;
  border-top: 1px solid var(--cizgi);
  color: var(--kul);
  font-size: var(--t-kucuk);
  max-width: var(--olcu);
}

@media (min-width: 720px) {
  .kartlar { grid-template-columns: repeat(3, 1fr); }
}


/* == 11 Bölünmüş bölüm ============================================ */

.bolunmus {
  display: grid;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

/* Oran fotoğrafın kendisinden gelir (build.js --oran verir); yatay bir kare
   dikey kutuya sikistirilmaz. Asiri uzun/basik karelerde min/max devreye
   girer ve object-fit kirpar. */
.bolunmus__medya { background: var(--bg2); }
.bolunmus__img {
  width: 100%;
  aspect-ratio: var(--oran, 4 / 5);
  min-height: 320px;
  max-height: 620px;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.06) brightness(0.85);
}

.bolunmus__govde { display: grid; gap: 22px; }

.vurgu-kutu {
  padding: 20px 24px;
  border-left: 2px solid var(--bakir);
  background: var(--bakir-sis);
  color: var(--krem);
  font-size: var(--t-kucuk);
  max-width: var(--olcu);
}

@media (min-width: 900px) {
  .bolunmus { grid-template-columns: 0.85fr 1fr; }
  .bolunmus--ters .bolunmus__medya { order: 2; }
}


/* == 12 Kor bandı ================================================= */

.band {
  position: relative;
  isolation: isolate;
  min-height: clamp(280px, 42vw, 460px);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.band__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.5) contrast(1.1);
}
.band__perde {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(18, 16, 14, 0.55) 30%, rgba(18, 16, 14, 0.6) 70%, var(--bg) 100%);
}
.band__soz {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.2;
  /* Anton'un italigi yoktur; font-style verilirse tarayici sahte egim uydurur. */
  text-align: center;
  max-width: 20ch;
  text-wrap: balance;
}
/* Uzun alinti kucuk ekranda govde fontuna duser, okumasi kolay olsun */
@media (max-width: 520px) {
  .band__soz {
    font-family: var(--f-govde);
    font-style: normal;
    font-weight: 500;
    font-size: 1.375rem;
    letter-spacing: -0.01em;
  }
}


/* == 13 Mutfak adımları =========================================== */

.adimlar {
  display: grid;
  gap: clamp(30px, 3.4vw, 44px);
  counter-reset: adim;
}

.adim { display: grid; gap: 14px; align-content: start; }

.adim__medya {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--bg2);
  margin-bottom: 6px;
}
.adim__img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05) brightness(0.82);
  transition: transform 800ms var(--egri);
}
.adim:hover .adim__img { transform: scale(1.03); }

.adim__no {
  font-family: var(--f-display);
  font-size: 1.375rem;
  color: var(--bakir);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
.adim__baslik {
  font-size: 1.0625rem;
  font-weight: 600;
}
.adim__metin { color: var(--kul); font-size: var(--t-kucuk); }

@media (min-width: 760px) {
  .adimlar { grid-template-columns: repeat(3, 1fr); }
}


/* == 14 Yanında iyi gider ========================================= */

.yan {
  display: grid;
  gap: clamp(34px, 4vw, 64px);
  align-items: stretch;
}

.yan__medya {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg2);
}
.yan__img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05) brightness(0.8);
}

.yan__liste {
  display: grid;
  align-content: center;
  border-top: 1px solid var(--cizgi);
}
.yan__oge {
  padding: clamp(20px, 2.6vw, 30px) 0;
  border-bottom: 1px solid var(--cizgi);
  display: grid;
  gap: 6px;
}
.yan__ad {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.yan__ad::before {
  content: '';
  display: inline-block;
  width: 14px; height: 1px;
  margin-right: 12px;
  background: var(--bakir);
  transform: translateY(-5px);
}
.yan__metin { color: var(--kul); font-size: var(--t-kucuk); }

@media (min-width: 900px) {
  .yan { grid-template-columns: 0.8fr 1fr; }
  /* Sabit oran + satiri doldur birlikte verilince tarayici genisligi
     orandan hesaplayip sutunu tasiriyor ve gorsel metnin ustune biniyor.
     Satiri dolduran kutuda oran serbest birakilir. */
  .yan__medya { aspect-ratio: auto; min-height: 480px; }
}


/* == 15 Konum ve iletişim ========================================= */

/* stretch: gorsel sutunu metin sutunuyla ayni yuksekligi alir, ortada
   asili kalmaz. Bosluk birakmak yerine kolonu doldurur. */
.iletisim { display: grid; gap: clamp(34px, 4vw, 64px); align-items: stretch; }

.iletisim__medya {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg2);
}
.iletisim__img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Dar ekranda kutu orani fotoğraftan genis kalir; kirpma ustten degil
     alttan yapilsin ki tabela her zaman gorunsun. */
  object-position: center top;
  filter: saturate(0.85) contrast(1.06) brightness(0.72);
}

.iletisim__govde { display: grid; gap: 26px; }

.bilgi-liste {
  display: grid;
  border-top: 1px solid var(--cizgi);
}
.bilgi-satir {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--cizgi);
  min-height: 48px;
}
.bilgi-satir .ikon { color: var(--bakir); margin-top: 3px; }
.bilgi-satir__etiket {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kul);
  margin-bottom: 3px;
}
.bilgi-satir__deger {
  color: var(--krem);
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
}
a.bilgi-satir:hover .bilgi-satir__deger { color: var(--bakir); }

@media (min-width: 900px) {
  .iletisim { grid-template-columns: 1fr 0.9fr; }
  /* Oran serbest birakilir: sutun, metin sutunu ne kadarsa o kadar uzar. */
  .iletisim__medya { aspect-ratio: auto; min-height: 520px; }
}


/* == 16 Menü ve SSS (diğer sayfalar) ============================== */

.sayfa-hero {
  padding-top: calc(var(--header-y) + clamp(48px, 7vw, 96px));
  padding-bottom: clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--cizgi);
}
.sayfa-hero__ic { display: grid; gap: 20px; }
/* Buyuk puntoda satir uzunlugu elle sinirlanir */
.sayfa-hero__baslik { max-width: 18ch; }

.menu-blok + .menu-blok { margin-top: clamp(48px, 6vw, 88px); }

.menu-blok__ust {
  display: grid;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--cizgi-guclu);
  margin-bottom: 8px;
}
.menu-blok__baslik {
  font-family: var(--f-govde);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.menu-blok__metin { color: var(--kul); font-size: var(--t-kucuk); max-width: var(--olcu); }

.menu-satir {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--cizgi);
}
.menu-satir__sol { display: grid; gap: 6px; max-width: 46ch; }
.menu-satir__ad { font-size: 1.0625rem; font-weight: 600; }
.menu-satir__metin { color: var(--kul); font-size: 0.9375rem; }
.menu-satir__fiyat {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--bakir);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.menu-satir__wa {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kul);
  border-bottom: 1px solid var(--cizgi);
  white-space: nowrap;
}
.menu-satir__wa:hover { color: var(--bakir); border-color: var(--bakir); }

.rozet {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  font-family: var(--f-govde);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bakir);
  border: 1px solid var(--bakir);
  border-radius: 2px;
  vertical-align: middle;
}

/* Esit sutunlu bilgi dizisi · menu sayfasindaki "nasil istersin" ve ekmek olcegi */
.dizi {
  display: grid;
  gap: clamp(22px, 2.6vw, 38px);
}
.dizi__oge {
  display: grid;
  gap: 8px;
  align-content: start;
  padding-top: 18px;
  border-top: 1px solid var(--cizgi-guclu);
}
.dizi__ad {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.dizi__ad--buyuk {
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.dizi__metin { color: var(--kul); font-size: var(--t-kucuk); }

@media (min-width: 620px) {
  .dizi { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .dizi--uc { grid-template-columns: repeat(3, 1fr); }
  .dizi--bes { grid-template-columns: repeat(5, 1fr); }
}

/* Gercek fotograf gelene kadar korunan alan */
.yer-tutucu {
  margin-top: clamp(32px, 4vw, 56px);
  min-height: clamp(150px, 20vw, 240px);
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--cizgi);
  color: var(--kul);
  font-size: var(--t-kucuk);
  text-align: center;
}

.sss { display: grid; max-width: 48em; border-top: 1px solid var(--cizgi); }
.sss__oge { border-bottom: 1px solid var(--cizgi); }
.sss__soru {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 16px 0;
  font-size: 1.0625rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.sss__soru::-webkit-details-marker { display: none; }
.sss__soru::after {
  content: '';
  flex: none;
  width: 12px; height: 12px;
  border-right: 1px solid var(--bakir);
  border-bottom: 1px solid var(--bakir);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 240ms var(--egri);
}
.sss__oge[open] .sss__soru::after { transform: rotate(-135deg) translateY(-3px); }
.sss__cevap { padding-bottom: 22px; color: var(--kul); max-width: var(--olcu); }


/* == 17 Footer ==================================================== */

.alt-bar {
  background: var(--bg2);
  border-top: 1px solid var(--cizgi);
  padding-top: clamp(56px, 6vw, 88px);
  padding-bottom: clamp(40px, 5vw, 64px);
}

/* Mobil alt çubuk footer'ın son satırını örtmesin */
@media (max-width: 899px) {
  .alt-bar { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

.alt-bar__grid {
  display: grid;
  gap: clamp(36px, 4vw, 56px);
}

.alt-bar__marka { display: grid; gap: 16px; align-content: start; }
.alt-bar__tanitim { color: var(--kul); font-size: var(--t-kucuk); max-width: 30em; }

.alt-bar__baslik {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bakir);
  margin-bottom: 14px;
}

.footer__link,
.alt-bar__liste a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--kul);
  font-size: var(--t-kucuk);
  transition: color 200ms var(--egri);
}
.footer__link:hover,
.alt-bar__liste a:hover { color: var(--krem); }
.footer__link.is-aktif { color: var(--krem); }

.alt-bar__liste { display: grid; }

.alt-bar__son {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--cizgi);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: space-between;
  color: var(--kul);
  font-size: 0.8125rem;
}
@media (min-width: 760px) {
  /* Marka + Sayfalar + Iletisim = 3 sutun.
     Yasal sutunu geri gelirse (4. cocuk) 4 sutuna kendiliginden gecer. */
  .alt-bar__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .alt-bar__grid:has(> :nth-child(4)) { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}


/* == 18 Mobil alt aksiyon çubuğu ================================== */

.mobil-cubuk {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #1B1815;              /* OPAK · backdrop-filter yok */
  border-top: 1px solid var(--cizgi);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobil-cubuk__oge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 60px;
  padding: 8px 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--krem);
}
.mobil-cubuk__oge + .mobil-cubuk__oge { border-left: 1px solid var(--cizgi); }
.mobil-cubuk__oge .ikon { color: var(--bakir); }
.mobil-cubuk__oge--birincil { color: var(--kor); }
.mobil-cubuk__oge--birincil .ikon { color: var(--kor); }

body.menu-acik .mobil-cubuk { display: none; }

@media (min-width: 900px) {
  .mobil-cubuk { display: none; }
}


/* == 18.5 Blog: liste ve yazı ===================================== *
   Dizin sayfasindaki kartlar ve yazi govdesi. Yeni tasarim dili yok:
   ayni 1px cizgi, bakir aksan ve bosluk hiyerarsisi.
   ================================================================= */

.yazi-liste { display: grid; border-top: 1px solid var(--cizgi); }

.yazi-kart { border-bottom: 1px solid var(--cizgi); }

.yazi-kart__link {
  display: grid;
  gap: 10px;
  padding: clamp(26px, 3vw, 40px) 0;
  transition: color 220ms var(--egri);
}
.yazi-kart__link:hover { color: var(--bakir); }

.yazi-kart__baslik {
  font-family: var(--f-govde);
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.008em;
  max-width: 28ch;
}
.yazi-kart__ozet {
  color: var(--kul);
  font-size: var(--t-kucuk);
  max-width: var(--olcu);
}
.yazi-kart__alt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bakir);
}
.yazi-kart__link:hover .yazi-kart__alt .ikon { transform: translateX(5px); }
.yazi-kart__alt .ikon { transition: transform 260ms var(--egri); }

/* --- yazi govdesi --- */
/* Sabit sayfa basliklarindaki 18ch siniri yazi basliklarina dar geliyor:
   blog basliklari degisken uzunlukta ve daha uzun. */
.yazi__baslik { max-width: 24ch; }

.yazi__kunye {
  color: var(--kul);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kirinti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--kul);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Dokunma hedefi 44px'e cikarilir; cizgi metnin altinda kalsin diye
   alt bosluk degil ic bosluk ve inline-flex kullanildi. */
.kirinti a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--cizgi);
}
.kirinti a:hover { color: var(--bakir); border-color: var(--bakir); }

.yazi__govde { max-width: 40em; }

.yazi__bolum + .yazi__bolum { margin-top: clamp(36px, 4vw, 56px); }

.yazi__bolum h2 { margin-bottom: 16px; }

.yazi__bolum p + p { margin-top: 1.05em; }

.yazi__liste {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-left: 0;
}
.yazi__liste li {
  position: relative;
  padding-left: 26px;
  color: var(--kul);
  font-size: var(--t-kucuk);
}
.yazi__liste li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 12px; height: 1px;
  background: var(--bakir);
}

.yazi__cta {
  display: grid;
  gap: 16px;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--cizgi);
  background: var(--bg2);
  max-width: 46em;
}

.yazi__diger { margin-top: clamp(40px, 5vw, 64px); }
.yazi__diger-liste {
  display: grid;
  margin-top: 14px;
  border-top: 1px solid var(--cizgi);
}
.yazi__diger-liste li { border-bottom: 1px solid var(--cizgi); }
.yazi__diger-liste a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 56px;
  padding: 12px 0;
  transition: color 200ms var(--egri);
}
.yazi__diger-liste a:hover { color: var(--bakir); }
.yazi__diger-liste .ikon { flex: none; transition: transform 260ms var(--egri); }
.yazi__diger-liste a:hover .ikon { transform: translateX(5px); }


/* == 19 İletişim sayfası ========================================== *
   Yeni tasarım dili yok: aynı token, aynı 1px çizgi, aynı boşluk ritmi.
   Sadece kanal kartı ve harita çerçevesi için iki küçük blok eklendi. */

.kanal-liste {
  display: grid;
  gap: clamp(20px, 2.4vw, 28px);
}

.kanal {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: clamp(26px, 3vw, 38px);
  background: var(--bg2);
  border: 1px solid var(--cizgi);
  transition: border-color 200ms var(--egri);
}
.kanal:hover { border-color: var(--cizgi-guclu); }

.kanal__ikon { color: var(--bakir); }
.kanal__baslik { font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.01em; }
.kanal__metin { color: var(--kul); font-size: var(--t-kucuk); }
.kanal__buton { margin-top: 10px; justify-self: start; }

@media (min-width: 820px) {
  .kanal-liste { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) {
  .kanal__buton { justify-self: stretch; width: 100%; }
}

/* Ucтan uca harita seridi. Kolon icinde asili duran kucuk bir kutu yerine
   sayfanin altini kapatan bir bant: koyu sayfada yamalik durmaz.
   invert + hue-rotate, Google'in acik temali gomme haritasini koyu temaya
   cevirir (gomme iframe'e stil veremiyoruz, tek yol filtre). */
.harita-serit {
  height: clamp(260px, 32vw, 420px);
  background: var(--bg2);
  border-top: 1px solid var(--cizgi);
  overflow: hidden;
}
/* Iletisim sayfasindaki kutu hali; sadece cerceve ve oran farkli,
   koyu tema filtresi asagida ikisi icin ortak tanimli. */
.harita {
  aspect-ratio: 4 / 3;
  background: var(--bg2);
  border: 1px solid var(--cizgi);
  overflow: hidden;
}
.harita iframe,
.harita-serit iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: invert(0.92) hue-rotate(180deg) saturate(0.62) brightness(0.96) contrast(0.92);
  transition: filter 400ms var(--egri);
}
.harita:hover iframe,
.harita:focus-within iframe,
.harita-serit:hover iframe,
.harita-serit:focus-within iframe { filter: none; }


/* == 20 Mutfağımız sayfası ======================================== *
   Dikey zaman çizgisi, temizlik düzeni kutusu ve belge bloğu.
   Yeni tasarım dili yok: 1px çizgi, bakır aksan, boşlukla hiyerarşi.
   ================================================================= */

.zaman {
  --zaman-bosluk: clamp(44px, 5vw, 76px);
  display: grid;
  gap: var(--zaman-bosluk);
}

.zaman__oge {
  position: relative;
  display: grid;
  gap: 20px;
  align-content: start;
  padding-left: clamp(48px, 5vw, 64px);
}

/* Adımları birbirine bağlayan dikey çizgi. Son adımda kesilir. */
.zaman__oge::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 42px;
  bottom: calc(var(--zaman-bosluk) * -1);
  width: 1px;
  background: var(--cizgi);
}
.zaman__oge:last-child::before { display: none; }

.zaman__no {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--bakir);
  border-radius: 2px;
  background: var(--bg);
  color: var(--bakir);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.zaman__govde {
  display: grid;
  gap: 10px;
  max-width: var(--olcu);
}
.zaman__baslik {
  font-family: var(--f-govde);
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.zaman__metin { color: var(--kul); }

/* Görsel isteğe bağlı: site.json'da boş bırakılan adım tek sütun akar. */
.zaman__medya {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--bg2);
}
.zaman__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05) brightness(0.8);
}

@media (min-width: 880px) {
  .zaman__oge--gorselli {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
    gap: clamp(32px, 4vw, 56px);
    align-items: start;
  }
  .zaman__oge--gorselli .zaman__govde { grid-column: 1; grid-row: 1; }
  .zaman__oge--gorselli .zaman__medya { grid-column: 2; grid-row: 1; }
}

/* --- Temizlik düzeni kutusu -------------------------------------- */

.duzen {
  display: grid;
  border: 1px solid var(--cizgi);
  background: var(--bg2);
}
.duzen__oge {
  display: grid;
  gap: 8px;
  padding: clamp(22px, 2.6vw, 34px);
  border-bottom: 1px solid var(--cizgi);
}
.duzen__oge:last-child { border-bottom: 0; }

.duzen__ad {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.duzen__ad::before {
  content: '';
  flex: none;
  width: 14px;
  height: 1px;
  background: var(--bakir);
  transform: translateY(-5px);
}
.duzen__metin {
  color: var(--kul);
  font-size: var(--t-kucuk);
  max-width: var(--olcu);
}

@media (min-width: 820px) {
  .duzen { grid-template-columns: repeat(2, 1fr); }
  .duzen__oge:nth-child(2n) { border-left: 1px solid var(--cizgi); }
  .duzen__oge:nth-last-child(-n + 2) { border-bottom: 0; }
}

/* --- Belge ve sertifika bloğu ------------------------------------ *
   HAZIR AMA KULLANILMIYOR. Ustadan belge bilgisi gelmeden sayfaya
   belge bölümü konmaz. Bilgi gelince site.json'daki "belgeler" dizisi
   doldurulacak ve bu sınıflar kullanılacak. Uydurma belge yazılmaz.   */

.belge-liste {
  display: grid;
  gap: 1px;
  background: var(--cizgi);
  border: 1px solid var(--cizgi);
}
.belge {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: clamp(22px, 2.6vw, 32px);
  background: var(--bg);
}
.belge__ad { font-size: 1.0625rem; font-weight: 600; }
.belge__metin { color: var(--kul); font-size: var(--t-kucuk); }
.belge__veren {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bakir);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 760px) {
  .belge-liste { grid-template-columns: repeat(3, 1fr); }
}


/* == 21 Hareket tercihi ve baskı ================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .kart:hover .kart__img,
  .adim:hover .adim__img { transform: none; }
}

@media print {
  .doku, .mobil-cubuk, .mobil-panel, .ust-bar__sag { display: none; }
  body { background: #fff; color: #000; }
}


/* == 22 Premium hareket katmani ===================================
   Sinematik his. Kural: tek hareket dili, abartisiz, hizli.
   Hepsi transform/opacity (kompozit), layout tetiklemez.
   NOT: kartlarin kademeli belirisi build.js'te inline --gecikme ile
   zaten kuruluyor, burada tekrarlanmaz.
   ================================================================= */

/* --- 22.1 Hero girisi: yukleme aninda kademeli beliris --- */
.js .hero__konum,
.js .hero__baslik,
.js .hero__alt,
.js .hero .buton-grubu,
.js .hero__saat {
  opacity: 0;
  transform: translateY(18px);
}

.js.is-yuklendi .hero__konum,
.js.is-yuklendi .hero__baslik,
.js.is-yuklendi .hero__alt,
.js.is-yuklendi .hero .buton-grubu,
.js.is-yuklendi .hero__saat {
  opacity: 1;
  transform: none;
  transition: opacity 900ms var(--egri), transform 900ms var(--egri);
}

.js.is-yuklendi .hero__konum       { transition-delay: 120ms; }
.js.is-yuklendi .hero__baslik      { transition-delay: 220ms; }
.js.is-yuklendi .hero__alt         { transition-delay: 420ms; }
.js.is-yuklendi .hero .buton-grubu { transition-delay: 560ms; }
.js.is-yuklendi .hero__saat        { transition-delay: 700ms; }

/* --- 22.2 Hero gorseli: cok yavas yaklasma --- */
.hero__medya img {
  will-change: transform;
  animation: kor-yaklas 28s var(--egri) forwards;
}

@keyframes kor-yaklas {
  from { transform: scale(1.005); }
  to   { transform: scale(1.075); }
}

/* --- 22.3 "Kor" kelimesi: ates nefesi --- */
.alev { animation: kor-nefes 4.5s ease-in-out infinite; }

@keyframes kor-nefes {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.13); }
}

/* --- 22.4 Bakir cizgiler: reveal aninda uzar (tek hareket dili) --- */
.js .reveal .ust-baslik--cizgili::after,
.js .kunye__liste.reveal::after {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 700ms var(--egri) 220ms;
}

.js .reveal.is-gorunur .ust-baslik--cizgili::after,
.js .kunye__liste.reveal.is-gorunur::after { transform: scaleX(1); }

/* --- 22.5 Parallax (data-parallax'i app.js atar) --- */
[data-parallax] { will-change: transform; }

/* --- 22.6 Kor butonunda ic isik (olcek degil, isik) --- */
.buton--kor { position: relative; overflow: hidden; isolation: isolate; }

.buton--kor::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 180% at 50% 120%, rgba(255, 214, 170, 0.45), transparent 62%);
  opacity: 0;
  transition: opacity 320ms var(--egri);
}

.buton--kor:hover::after,
.buton--kor:focus-visible::after { opacity: 1; }

/* --- 22.7 Kart uzerine gelince karartma acilir
   (kat zaten 10. bolumde tanimli, burada yalniz davranis eklenir) --- */
.kart__medya::after { transition: opacity 500ms var(--egri); }
.kart:hover .kart__medya::after { opacity: 0.45; }

/* --- 22.8 Hareket tercihi: bu bolumdekileri kapat.
   (Gecis sureleri zaten 21. bolumdeki global reset ile kapaniyor,
   burada yalniz baslangic donusumleri sifirlanir.) --- */
@media (prefers-reduced-motion: reduce) {
  .js .hero__konum,
  .js .hero__baslik,
  .js .hero__alt,
  .js .hero .buton-grubu,
  .js .hero__saat { opacity: 1; transform: none; transition: none; }

  .hero__medya img { animation: none; transform: none; }
  .alev { animation: none; }
  .js .reveal .ust-baslik--cizgili::after,
  .js .kunye__liste.reveal::after { transform: none; }
}