/* ============================================================
   Yakın — İzmir • Açık Ateş
   Tek sayfa site. Beş tema, tek düzen: temalar yalnızca renk,
   marka işareti ve doku değiştirir; iskelet aynı kalır.
   ============================================================ */

/* ---------- 1. Temalar ------------------------------------- */

:root {
  --marka-yatay: url("../brand/logo-script.png");
  --marka-buyuk: url("../brand/logo-script.png");
  --marka-isaret: url("../brand/mark-rosette.png");

  --olcek: clamp(1rem, 0.92rem + 0.4vw, 1.125rem);
  --sinir: 1240px;
  --bosluk-bolum: clamp(5rem, 4rem + 7vw, 9.5rem);
  --yumusak: cubic-bezier(0.22, 0.61, 0.36, 1);
  --yavas: cubic-bezier(0.16, 1, 0.3, 1);

  /* tema blokları geçersiz kılar; burada yalnızca güvenli varsayılan */
  --hata: #e5946a;
  --doku: #5a2a1e;

  /* buzlu cam çerçeve — okunması/vurgulanması gereken bloklar */
  --cam-bg: color-mix(in srgb, var(--zemin) 58%, transparent);
  --cam-brd: color-mix(in srgb, var(--marka-renk) 15%, transparent);
  --cam-blur: saturate(1.35) blur(16px);
  --cam-golge: 0 30px 70px -55px rgba(0, 0, 0, 0.6);
}

/* açık (Ege) temada cam koyu değil aydınlık olsun */
[data-tema="ege"] {
  --cam-bg: color-mix(in srgb, var(--kagit) 55%, transparent);
  --cam-brd: color-mix(in srgb, var(--kagit-murekkep) 12%, transparent);
}

/* Alternatif 01 — açık ateş: bordo-kahve zemin, terrakota kor */
[data-tema="ates"] {
  --zemin: #2a100e;
  --zemin-2: #371714;
  --murekkep: #e7dcc7;
  --murekkep-2: #b3a289;
  --marka-renk: #e0d2b8;
  --vurgu: #c97a4e;
  --vurgu-uzeri: var(--kagit);
  --cizgi: rgba(231, 220, 199, 0.16);
  --kagit: #e4dac6;
  --kagit-murekkep: #2a100e;
  --kor: rgba(201, 122, 78, 0.5);
  --hata: #e5946a;
  --doku: #5a2a1e;
  --marka-yatay: url("../brand/logo-script.png");
  --marka-buyuk: url("../brand/logo-script.png");
  --marka-isaret: url("../brand/mark-rosette.png");
}

/* Alternatif 02 — zarafet: sıcak kahve, gül külü vurgu, serif logotype */
[data-tema="zarafet"] {
  --zemin: #3a2922;
  --zemin-2: #48342b;
  --murekkep: #ecdfd2;
  --murekkep-2: #bda794;
  --marka-renk: #e5cfb4;
  --vurgu: #b1908f;
  --vurgu-uzeri: #2e211b;
  --cizgi: rgba(236, 223, 210, 0.18);
  --kagit: #efe6da;
  --kagit-murekkep: #3a2922;
  --kor: rgba(177, 144, 143, 0.45);
  --hata: #dc9384;
  --doku: #4a352b;
  --marka-yatay: url("../brand/logo-serif.png");
  --marka-buyuk: url("../brand/logo-serif.png");
  --marka-isaret: url("../brand/mark-oval.png");
}

/* Alternatif 03 — ege: kâğıt zemin, bordo mürekkep, el yazısı */
[data-tema="ege"] {
  --zemin: #ece2d0;
  --zemin-2: #e0d3bd;
  --murekkep: #4a1b1e;
  --murekkep-2: #6a4437;
  --marka-renk: #64201f;
  --vurgu: #8c3a31;
  --vurgu-uzeri: #fbf6ec;
  --cizgi: rgba(74, 27, 30, 0.2);
  --kagit: #fbf6ec;
  --kagit-murekkep: #4a1b1e;
  --kor: rgba(140, 58, 49, 0.28);
  --hata: #7a2f27;
  --doku: #7a5c46;
  --marka-yatay: url("../brand/logo-hand.png");
  --marka-buyuk: url("../brand/logo-hand.png");
  --marka-isaret: url("../brand/mark-y.png");
}

/* Alternatif 04 — ocak: pişmiş toprak zemin, kum rengi marka */
[data-tema="ocak"] {
  --zemin: #8c4830;
  --zemin-2: #783b27;
  --murekkep: #f2ddc5;
  --murekkep-2: #e6d0b5;
  --marka-renk: #eed6b7;
  --vurgu: #f0cfa4;
  --vurgu-uzeri: #5c281a;
  --cizgi: rgba(242, 221, 197, 0.24);
  --kagit: #f2e3cc;
  --kagit-murekkep: #5c281a;
  --kor: rgba(255, 214, 160, 0.35);
  --hata: #f6e6d0;
  --doku: #6e3420;
  --marka-yatay: url("../brand/logo-brush.png");
  --marka-buyuk: url("../brand/logo-brush.png");
  --marka-isaret: url("../brand/mark-brush.png");
}

/* Şarap yorumu — mahzen: neredeyse siyah, şarap kırmızısı, altın */
[data-tema="mahzen"] {
  --zemin: #130f0e;
  --zemin-2: #1d1413;
  --murekkep: #e9e0d3;
  --murekkep-2: #9d8c7f;
  --marka-renk: #d9c49b;
  --vurgu: #8d2434;
  --vurgu-uzeri: #f0e7d9;
  --cizgi: rgba(233, 224, 211, 0.14);
  --kagit: #ece2d3;
  --kagit-murekkep: #17100f;
  --kor: rgba(141, 36, 52, 0.55);
  --hata: #cf7360;
  --doku: #3a1c1c;
  --marka-yatay: url("../brand/logo-serif.png");
  --marka-buyuk: url("../brand/logo-serif.png");
  --marka-isaret: url("../brand/mark-y.png");
}

/* ---------- 2. Temel --------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--zemin);
  color: var(--murekkep);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-size: var(--olcek);
  line-height: 1.62;
  overflow-x: hidden;
  transition: background-color 0.7s var(--yumusak), color 0.7s var(--yumusak);
}

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

a { color: inherit; }

h1, h2, h3 {
  font-weight: 400;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.015em;
}

p { margin: 0 0 1.1em; }

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

.sinir {
  width: min(100% - 2.5rem, var(--sinir));
  margin-inline: auto;
}

.bolum { padding-block: var(--bosluk-bolum); }

.atla {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--kagit);
  color: var(--kagit-murekkep);
  padding: 0.75rem 1.25rem;
}
.atla:focus { left: 1rem; top: 1rem; }

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

.baslik {
  font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.9rem);
  max-width: 16ch;
}
.baslik--orta { max-width: 20ch; margin-inline: auto; text-align: center; }

.giris {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  color: var(--murekkep);
  max-width: 52ch;
  margin-top: 1.4rem;
}
.giris--orta { margin-inline: auto; text-align: center; }

.bolum p:not(.giris):not(.imza) { color: var(--murekkep-2); max-width: 58ch; }

/* ---------- 5c. Buzlu cam çerçeve -------------------------- */
/* Arka planda (Açık Ateş temasında) shader akarken metin blokları
   kendi kontrollü zeminini taşısın; diğer temalarda ince bir panel. */

.cam {
  position: relative;
  background: var(--cam-bg);
  -webkit-backdrop-filter: var(--cam-blur);
  backdrop-filter: var(--cam-blur);
  border: 1px solid var(--cam-brd);
  border-radius: 4px;
  box-shadow: var(--cam-golge);
  padding: clamp(1.5rem, 1rem + 2.6vw, 2.9rem);
}
.cam::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity 0.3s var(--yumusak);
  background: radial-gradient(260px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    color-mix(in srgb, var(--vurgu) 20%, transparent), transparent 72%);
}
.cam.spot-acik::before { opacity: 1; }
@media (hover: none) { .cam::before { display: none; } }

/* ---------- Tıklanabilirlerde hover/focus glow ------------- */
/* Sadece yuvarlak/pill şeklindeki öğelerde: köşeli (border-radius'suz)
   .ust__nav a, .alt__nav a, .baglanti, .tepe__inis glow dikdörtgen
   göründüğü için kapsam dışı bırakıldı. */
/* box-shadow kullanıyoruz: overflow:hidden olan .dugme gibi öğelerde
   bile kırpılmadan görünür (::after tabanlı bir glow kırpılırdı).
   .dugme/.kitap-ok kendi transition'ına box-shadow zaten eklendi
   (yukarıda) — burada tekrar tanımlamıyoruz. */
.tema, .temaSecici__dugme, .galeri-lightbox__kapat {
  transition: color 0.3s, border-color 0.3s, background-color 0.3s,
    box-shadow 0.3s var(--yumusak);
}
.dugme, .kitap-ok, .tema, .temaSecici__dugme, .galeri-lightbox__kapat { outline: none; }
.dugme:hover, .dugme:focus-visible,
.kitap-ok:hover:not(:disabled), .kitap-ok:focus-visible,
.tema:hover, .tema:focus-visible,
.temaSecici__dugme:hover, .temaSecici__dugme:focus-visible,
.galeri-lightbox__kapat:hover, .galeri-lightbox__kapat:focus-visible {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vurgu) 45%, transparent),
    0 0 16px 2px color-mix(in srgb, var(--vurgu) 40%, transparent);
}
.cam.baslik--orta,
.cam .baslik--orta { text-wrap: balance; }

/* merkezî bölüm girişleri: dar, ortalı bir levha */
.ates__ust.cam,
.menu__ust.cam,
.mekan__ust.cam {
  max-width: 46ch;
  margin-inline: auto;
  text-align: center;
}

.ates__ust.cam .giris,
.menu__ust.cam .giris,
.mekan__ust.cam .giris { margin-inline: auto; }

/* Ateş başlığı: main.js scroll ilerlemesine göre harf harf "acik"
   sınıfı ekler — daktilo gibi yazılarak açılır. */
.daktilo__kelime { display: inline-block; white-space: nowrap; }
.daktilo__harf {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s linear, transform 0.3s var(--yumusak);
}
.daktilo__harf.acik { opacity: 1; transform: none; }

/* Ateş girişi: kelime kelime yukarıdan beliren tek seferlik reveal
   (motion-primitives'in TextEffect'inin CSS/IntersectionObserver karşılığı). */
.tf-kelime { display: inline-block; overflow: hidden; vertical-align: top; }
.tf-kelime-ic {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.6s var(--yumusak);
  transition-delay: calc(var(--i) * 35ms);
}
.tf-acik .tf-kelime-ic { transform: none; }

/* Ateş başlığı: tıklayınca altındaki giriş metni açılır/kapanır. */
.ates__acilir {
  all: unset; display: flex; flex-direction: column; align-items: center;
  gap: 0.7rem; width: 100%; cursor: pointer;
}
.ates__ikon {
  width: 11px; height: 11px;
  border-right: 2px solid var(--murekkep-2);
  border-bottom: 2px solid var(--murekkep-2);
  transform: rotate(45deg);
  transition: transform 0.4s var(--yumusak), border-color 0.3s;
}
.ates__acilir:hover .ates__ikon { border-color: var(--vurgu); }
.ates__acilir[aria-expanded="true"] .ates__ikon { transform: rotate(-135deg); }
.ates__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--yumusak);
}
.ates__panel > div { overflow: hidden; }
.ates__acilir[aria-expanded="true"] + .ates__panel { grid-template-rows: 1fr; }
.ates__panel .giris { margin-top: 0.9rem; }

/* Mekân paneli: cam/backdrop-filter yerine düz bir gradient — scroll ile
   ölçeklendiği için (main.js) her karede arka planı yeniden örnekleyen
   backdrop-filter burada stutter'a yol açıyordu. */
.mekan__ust.cam {
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--zemin-2) 94%, var(--vurgu) 6%),
    color-mix(in srgb, var(--zemin) 97%, transparent));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  will-change: transform;
}
[data-tema="ege"] .mekan__ust.cam {
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--kagit) 94%, var(--vurgu) 6%),
    var(--kagit));
}

/* @supports yoksa (eski tarayıcı) yine okunur bir zemin kalsın */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cam { background: color-mix(in srgb, var(--zemin) 88%, transparent); }
}

/* ---------- 5d. Arka plan shader (yalnız Açık Ateş) -------- */

#fon {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: none;
  background: #140c08;
  pointer-events: none;
}

[data-tema="ates"] {
  /* shader çalışmasa da (hareket azaltma) sıcak bir zemin kalsın */
  background-color: #140c08;
  background-image:
    radial-gradient(120% 90% at 50% -12%, #40200f, transparent 60%),
    radial-gradient(90% 70% at 85% 110%, #34160c, transparent 55%);
  background-attachment: fixed;
}
[data-tema="ates"] body { background: transparent; }
/* içerik shader'ın üstünde */
[data-tema="ates"] main,
[data-tema="ates"] .alt { position: relative; z-index: 1; }
/* hero kendi fotoğraf sanat yönetimini korur, shader'ı göstermez */
[data-tema="ates"] .tepe { background: var(--zemin); }
[data-tema="ates"] .ates,
[data-tema="ates"] .sarap {
  background: color-mix(in srgb, var(--zemin-2) 55%, transparent);
}
[data-tema="ates"] .alt {
  background: color-mix(in srgb, var(--zemin) 62%, transparent);
}

.imza {
  font-style: italic;
  font-size: 1.15rem;
  margin-top: 2rem;
  color: var(--murekkep);
}

/* ---------- 3. Marka işaretleri (maskeli, tema rengini alır) --- */

.marka {
  display: block;
  background-color: var(--marka-renk);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.7s var(--yumusak);
}

.marka--yatay {
  width: clamp(108px, 12vw, 148px);
  height: 46px;
  -webkit-mask-image: var(--marka-yatay);
  mask-image: var(--marka-yatay);
  -webkit-mask-position: left center;
  mask-position: left center;
}

.marka--buyuk {
  width: min(78vw, 620px);
  height: clamp(132px, 23vw, 264px);
  -webkit-mask-image: var(--marka-buyuk);
  mask-image: var(--marka-buyuk);
  /* halka değil: gölge harf biçimini sarar, hero fotoğrafı açık kalır */
  filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--zemin) 68%, transparent))
          drop-shadow(0 6px 30px color-mix(in srgb, var(--zemin) 80%, transparent));
}
[data-tema="ege"] .marka--buyuk {
  filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--zemin) 45%, transparent))
          drop-shadow(0 4px 22px color-mix(in srgb, var(--kagit) 55%, transparent));
}

/* Açık Ateş ve Ege logotype'larında alt kavis ekran ortasına dar
   düşüyordu: bu iki temada marka bloğunu birkaç piksel yukarı al. */
[data-tema="ates"] .tepe__marka,
[data-tema="ege"] .tepe__marka { transform: translateY(-4px); }

.marka--isaret {
  width: clamp(56px, 8vw, 84px);
  height: clamp(56px, 8vw, 84px);
  -webkit-mask-image: var(--marka-isaret);
  mask-image: var(--marka-isaret);
}

.marka--soluk { opacity: 0.4; margin-bottom: 1.75rem; }

/* ---------- 4. Üst çubuk ----------------------------------- */

.ust {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.35rem clamp(1.25rem, 4vw, 3rem);
  transition: padding 0.4s var(--yumusak), background-color 0.4s var(--yumusak),
    backdrop-filter 0.4s var(--yumusak), border-color 0.4s var(--yumusak);
  border-bottom: 1px solid transparent;
}

.ust[data-kucuk="true"] {
  padding-block: 0.7rem;
  background: var(--zemin);
  background: color-mix(in srgb, var(--zemin) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--cizgi);
}

.ust__logo { display: block; }

.ust__nav {
  position: relative;
  margin-left: auto;
  display: flex;
  gap: clamp(0.3rem, 0.8vw, 0.7rem);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.ust__nav a {
  position: relative;
  z-index: 1;
  text-decoration: none;
  padding: 0.3rem 0.7rem 3px;
  background-image: linear-gradient(var(--vurgu), var(--vurgu));
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size 0.45s var(--yumusak), color 0.3s;
}
.ust__nav a:hover { background-size: 100% 1px; }

.ust__nav-pil {
  position: absolute; z-index: 0; top: 0; left: 0;
  height: 100%; border-radius: 999px;
  background: color-mix(in srgb, var(--vurgu) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--vurgu) 30%, transparent);
  opacity: 0; pointer-events: none;
}

/* ---------- 5. Düğmeler ------------------------------------ */

.dugme {
  --dugme-renk: var(--murekkep);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--dugme-renk);
  background: transparent;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  padding: 0.72rem 1.5rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  position: relative;
  overflow: hidden;
  isolation: isolate; /* ::after dolgusu düğmenin içinde kalsın */
  transition: color 0.4s var(--yumusak), border-color 0.4s var(--yumusak),
    transform 0.15s var(--yumusak), box-shadow 0.35s var(--yumusak);
}

.dugme:active { transform: translateY(1px); }

.dugme::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--vurgu);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s var(--yavas);
  z-index: -1;
}

.dugme:hover { border-color: var(--vurgu); color: var(--vurgu-uzeri); }
.dugme:hover::after { transform: scaleY(1); }

.dugme--kucuk { padding: 0.55rem 1.15rem; }

.dugme--dolu {
  background: var(--vurgu);
  border-color: var(--vurgu);
  color: var(--vurgu-uzeri);
  padding-inline: 2rem;
}
.dugme--dolu:hover { color: var(--vurgu-uzeri); }
.dugme--dolu::after { background: color-mix(in srgb, var(--vurgu) 70%, #000); }

/* Kaydırırken hep erişilebilir kalan rezervasyon çağrısı. Sağ alt zaten
   tema seçiciye ait (bkz. bölüm 13) — çakışmasın diye sol altta. */
.yuzen-cta {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 45;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.4s var(--yumusak), transform 0.4s var(--yavas);
}
.yuzen-cta.gorunur { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .yuzen-cta { transition: opacity 0.2s linear; transform: none; }
}

.baglanti {
  background: none;
  border: 0;
  padding: 0;
  color: var(--murekkep-2);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  border-bottom: 1px solid var(--cizgi);
}
.baglanti:hover { color: var(--murekkep); border-bottom-color: currentColor; }

/* ---------- 5b. Ortak fotoğraf tonlaması ------------------ */
/* Mekân görselleri render, ateş/yemek görselleri gerçek fotoğraf.
   Hepsi tek bir dünyada okunsun diye paylaşılan desatürasyon +
   tema tonuna doğru hafif renk yıkaması. */

.hikaye__gorsel,
.sarap__gorsel,
.ates__izgara .kutu,
.galeri__oge { position: relative; }

.hikaye__gorsel img,
.sarap__gorsel img,
.ates__izgara .kutu img,
.galeri__oge img {
  filter: saturate(0.72) contrast(1.05) brightness(0.95);
}

@media (hover: hover) and (pointer: fine) {
  /* main.js parallax koyar transform:translate3d (kayarken) + inline
     scale:1.12 (statik, taşma payı) doğrudan img üstüne — transform'a
     dokunmadan ayrı "scale" özelliğiyle büyütüyoruz, inline'ı ezmek için
     !important şart (aksi halde satır-içi stil her zaman kazanır). */
  .hikaye__gorsel img,
  .sarap__gorsel img,
  .ates__izgara .kutu img,
  .galeri__oge img {
    transition: scale 0.6s var(--yavas), filter 0.6s var(--yavas);
  }
  .hikaye__gorsel:hover img,
  .sarap__gorsel:hover img,
  .ates__izgara .kutu:hover img,
  .galeri__oge:hover img {
    scale: 1.18 !important;
    filter: saturate(0.85) contrast(1.05) brightness(1);
  }
}

.hikaye__gorsel::after,
.sarap__gorsel::after,
.ates__izgara .kutu::after,
.galeri__oge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--doku);
  mix-blend-mode: color;
  opacity: 0.3;
  pointer-events: none;
}

/* ---------- 6. Hero ---------------------------------------- */

.tepe {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.tepe__gorsel {
  position: absolute;
  inset: -8% 0 -8%;
  z-index: -2;
  will-change: transform;
}
.tepe__gorsel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: saturate(0.78) contrast(1.04);
  transition: opacity 1.8s var(--yavas);
}
/* animation class'a bağlı: her fotoğraf aktif olduğunda (rotasyonda
   yeniden class eklendiğinde de) sıfırdan zoom-out başlar — sayfa
   yüklenince bir kez çalışıp donan tek seferlik animasyon değil. */
.tepe__gorsel img.tepe__gorsel-aktif {
  opacity: 0.52;
  animation: yavasBuyume 7s ease-out forwards;
}
.tepe__gorsel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--doku);
  mix-blend-mode: color;
  opacity: 0.26;
  pointer-events: none;
}

[data-tema="ege"] .tepe__gorsel img.tepe__gorsel-aktif { opacity: 0.34; filter: saturate(0.62) contrast(0.95); }
[data-tema="mahzen"] .tepe__gorsel img.tepe__gorsel-aktif { opacity: 0.44; }

/* Ocağın koru: yavaşça nefes alan sıcak ışık.
   Sicak radyal parilti + yalnizca en altta zemine inis; fotograf
   ortada acik kalir. Logonun okunurlugu .marka--buyuk drop-shadow'u
   ile saglanir, ayri bir perde katmanina gerek kalmaz. */
.tepe__kor {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(58% 46% at 50% 64%, var(--kor), transparent 70%),
    linear-gradient(to bottom, color-mix(in srgb, var(--zemin) 38%, transparent) 0%, transparent 26%, transparent 58%, var(--zemin) 99%);
  animation: kor 7.5s ease-in-out infinite alternate;
}

.tepe__ic { text-align: center; padding-inline: 1.25rem; }

.tepe__marka {
  display: flex;
  justify-content: center;
  clip-path: inset(0 0 100% 0);
  animation: perdeAc 1.5s var(--yavas) 0.25s forwards;
}

.tepe__slogan {
  margin: 2.2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.5rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(0.82rem, 0.75rem + 0.3vw, 0.95rem);
  letter-spacing: 0.12em;
  color: var(--murekkep-2);
  text-shadow: 0 1px 2px color-mix(in srgb, var(--zemin) 65%, transparent),
    0 3px 14px color-mix(in srgb, var(--zemin) 55%, transparent);
}
.tepe__slogan span {
  opacity: 0;
  transform: translateY(12px);
  animation: yukselAc 0.9s var(--yavas) forwards;
}
.tepe__slogan span:nth-child(1) { animation-delay: 1.1s; }
.tepe__slogan span:nth-child(2) { animation-delay: 1.25s; }
.tepe__slogan span:nth-child(3) { animation-delay: 1.4s; }

.tepe__cta {
  margin-top: 2.1rem;
  opacity: 0;
  animation: yukselAc 0.9s var(--yavas) 1.65s forwards;
}

.tepe__inis {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  text-decoration: none;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--murekkep-2);
  opacity: 0;
  animation: yukselAc 1s var(--yavas) 1.8s forwards;
}

.tepe__cizgi {
  width: 1px;
  height: 46px;
  background: linear-gradient(var(--vurgu), transparent);
  transform-origin: top;
  animation: akanCizgi 2.6s ease-in-out infinite;
}

@keyframes perdeAc {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 -2% 0); }
}
@keyframes yukselAc {
  to { opacity: 1; transform: none; }
}
@keyframes yavasBuyume {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}
@keyframes kor {
  from { opacity: 0.72; }
  to { opacity: 1; }
}
@keyframes alevTitresim {
  0%, 100% { opacity: 0.24; }
  8% { opacity: 0.44; }
  17% { opacity: 0.2; }
  29% { opacity: 0.4; }
  41% { opacity: 0.22; }
  54% { opacity: 0.42; }
  66% { opacity: 0.18; }
  80% { opacity: 0.36; }
  91% { opacity: 0.22; }
}
@keyframes akanCizgi {
  0% { transform: scaleY(0); opacity: 0; }
  35% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(46px); opacity: 0; }
}

/* ---------- 7. Hikâye -------------------------------------- */

.hikaye__duzen {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.hikaye__gorsel { margin: 0; overflow: hidden; border-radius: 4px; }
.hikaye__gorsel img { width: 100%; will-change: transform; }

/* ---------- 8. Gravür şeridi ------------------------------- */

.serit {
  overflow: hidden;
  border-block: 1px solid var(--cizgi);
  opacity: 0.45;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.serit__ray {
  display: flex;
  width: max-content;
  animation: kayan 70s linear infinite;
}
.serit__ray img {
  height: clamp(120px, 16vw, 210px);
  width: auto;
  filter: saturate(0.4) contrast(1.05);
}
@keyframes kayan {
  to { transform: translateX(-50%); }
}

/* ---------- 9. Ateş ---------------------------------------- */

.ates { background: var(--zemin-2); transition: background-color 0.7s var(--yumusak); }

.ates__izgara {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}

/* Ocağın koru ızgara fotoğraflarının arkasında da nefes alır — ateş
   bölümünün metaforu (odun, alev, et) fotoğraf katmanına taşınır. */
.ates__izgara::before {
  content: "";
  position: absolute;
  inset: -12% -4%;
  z-index: 0;
  background: radial-gradient(65% 55% at 50% 68%, var(--kor), transparent 78%);
  opacity: 0.65;
  pointer-events: none;
  animation: kor 6.5s ease-in-out infinite alternate;
}

/* Alevin ışığı: yazısız iki fotoğrafta (et, ocak başı çalışan el)
   düzensiz bir titreşimle ışık oynatır — yazılı kutu (odun ateşi,
   figcaption'lı) okunurluk için hariç tutulur. */
.ates__izgara .kutu:not(:has(figcaption))::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, var(--kor) 0%, transparent 65%);
  mix-blend-mode: hard-light;
  opacity: 0.4;
  pointer-events: none;
  animation: alevTitresim 4.4s ease-in-out infinite;
}
.ates__izgara .kutu:nth-of-type(2)::before { animation-delay: -1.6s; }
.ates__izgara .kutu:nth-of-type(3)::before { animation-delay: -3.1s; }

/* Kıvılcım katmanı: main.js konumlandırır (fotoğrafların 4 kenarından
   dışa fırlayan közler). Fotoğrafın kendi kırpma/overlay'ine dokunmamak
   için ayrı, .kutu'ların ÜSTÜNE (sonradan DOM'a eklenen) bir katman. */
.kivilcim-katman {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
/* Dış span sadece konum + hareket (translate) taşır; iç span gerçek
   kıvılcımın görünümünü verir — sivri, uzamış, alevden fırlamış bir
   köz parçası, düz bir "glow topu" değil. İkisi ayrı çünkü translate
   (hareket) ile rotate (görünüş açısı) aynı elemanda çakışırsa hareket
   yönü bozulur. */
.kivilcim {
  position: absolute;
  top: var(--ky, 0%);
  left: var(--kx, 0%);
  width: 0;
  height: 0;
  opacity: 0;
  animation: kivilcimUc var(--sure, 2.6s) cubic-bezier(0.1, 0.6, 0.3, 1) infinite;
  animation-delay: var(--gecikme, 0s);
}
.kivilcim__parca {
  position: absolute;
  left: calc(var(--boyut, 1.5px) / -2);
  top: calc(var(--boyut, 1.5px) * -2.2);
  width: var(--boyut, 1.5px);
  height: calc(var(--boyut, 1.5px) * 2.2);
  border-radius: 40%;
  background: linear-gradient(to top, transparent 0%, var(--kor) 28%, #ffb35c 62%, #fff3d2 100%);
  transform: rotate(var(--aci, 0deg));
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 1px var(--kor));
  box-shadow: 0 0 5px 1px var(--kor);
}
.ates__izgara[data-kivilcim="beklemede"] .kivilcim { animation-play-state: paused; }

@keyframes kivilcimUc {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  10% { opacity: 0.6; }
  22% { opacity: 0.42; }
  30% { opacity: 0.6; }
  50% { transform: translate(calc(var(--dx, 0) * 0.55 + var(--sapma, 0px)), calc(var(--dy, -24px) * 0.55)) scale(1); }
  80% { opacity: 0.3; }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -24px)) scale(0.3); }
}

.kutu { margin: 0; overflow: hidden; position: relative; border-radius: 4px; }
.kutu img { width: 100%; height: 100%; will-change: transform; }
.ates__izgara .kutu { grid-column: span 1; }
.ates__izgara .kutu img,
.ates__izgara .kutu--uzun img { aspect-ratio: 4 / 5; object-fit: cover; }

.kutu figcaption {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.78rem;
  color: var(--murekkep-2);
  padding-top: 0.7rem;
}

.ates__yazi { grid-column: 1 / -1; order: -1; display: grid; gap: 1.6rem; }

.satir { border-top: 1px solid var(--cizgi); padding-top: 1.1rem; }
.satir h3 { font-size: 1.45rem; margin-bottom: 0.4rem; }
.satir p { margin: 0; }

/* ---------- 10. Menü kitabı ------------------------------- */
/* Kapalı: burgundy deri menü kabı, 3B eğik durur. "Menüyü aç"
   deyince ön kapak menteşeden açılır, sayfalar tek tek çevrilir. */

.menu__ust { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.kitap-sahne {
  --sayfa-w: clamp(288px, 78vw, 404px);
  --sayfa-h: calc(var(--sayfa-w) * 1.4);
  /* deri pebble gr(turbulence -> hafif aydınlık/karanlık kabartma) */
  --deri-pebble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.042 0.05' numOctaves='2' seed='8' result='t'/%3E%3CfeComponentTransfer in='t' result='a'%3E%3CfeFuncA type='linear' slope='0.7' intercept='-0.28'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix in='a' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23p)'/%3E%3C/svg%3E");
  /* iri, yumuşak leke */
  --deri-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.011' numOctaves='2' seed='19' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0.55 0.55 0 -0.55'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23m)'/%3E%3C/svg%3E");
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(1.6rem, 4vw, 2.6rem);
  perspective: 4400px;
  perspective-origin: 50% 24%;
}
/* zemine düşen yumuşak gölge — kitap boşlukta durur */
.kitap-sahne::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--sayfa-h) - 6px);
  width: calc(var(--sayfa-w) * 0.86);
  height: 40px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.45), transparent 78%);
  filter: blur(9px);
  pointer-events: none;
}

.kitap {
  position: relative;
  width: var(--sayfa-w);
  height: var(--sayfa-h);
  transform-style: preserve-3d;
  transform:
    rotateX(calc(1.5deg + var(--ty, 0deg)))
    rotateY(calc(-7deg + var(--tx, 0deg)))
    translateX(var(--kaydir, 0px));
  transition: transform 0.9s var(--yavas);
}
.kitap[data-acik="true"] {
  --tx: 0deg; --ty: 0deg;
  /* açıkken sağ sayfa; çevrilen yapraklar sola taşar -> yarım sayfa kaydır, açık kitap ortalansın */
  transform: rotateX(0.5deg) rotateY(0deg)
    translateX(calc(var(--sayfa-w) / 2)) translateX(var(--kaydir, 0px));
  touch-action: pan-y;               /* dikey kaydırma serbest, yatay bize ait */
  cursor: grab;
}
.kitap[data-acik="true"]:active { cursor: grabbing; }

/* altta duran sayfa bloğu — ince kalınlık + ana gölge */
.kitap__deste {
  position: absolute;
  inset: 0;
  transform: translateZ(-11px) translate(4px, 5px);
  background: color-mix(in srgb, var(--kagit-murekkep) 6%, var(--kagit));
  box-shadow:
    3px 0 0 color-mix(in srgb, var(--kagit-murekkep) 10%, var(--kagit)),
    0 55px 60px -34px rgba(0, 0, 0, 0.55),
    0 22px 26px -20px rgba(0, 0, 0, 0.4);
}
/* sırt — ince koyu şerit, sol kenarda */
.kitap__sirt {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 7px;
  transform: translateZ(1px);
  background: linear-gradient(
    color-mix(in srgb, var(--zemin-2) 82%, #000),
    color-mix(in srgb, var(--zemin-2) 58%, #000)
  );
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.35);
}

/* yapraklar */
.yaprak {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform 0.92s cubic-bezier(0.32, 0.02, 0.13, 1);
  z-index: var(--z, 1);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.yaprak[data-cevrik="true"] { transform: rotateY(-176deg); }
.yaprak.donuyor,
.yaprak--kapak:not([data-cevrik="true"]) { z-index: 60; }

/* çevrilirken sayfaya düşen yumuşak, geniş gölge — kağıt hissi */
.yaprak::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.24) 0%,
    rgba(0, 0, 0, 0.08) 26%,
    transparent 62%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.yaprak.donuyor::after { opacity: 1; }

.yuz {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* köşe kırılmasını engelle: kendi kompozisyon katmanı, keskin kenar */
  outline: 1px solid transparent;
  transform: translateZ(0);
}
.yuz--arka { transform: rotateY(180deg) translateZ(0); }

/* kâğıt yüz */
.kagit {
  background:
    radial-gradient(130% 90% at 12% 0%, color-mix(in srgb, #fff 10%, var(--kagit)), var(--kagit) 60%);
  color: var(--kagit-murekkep);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  /* cilt payı gölgesi — sırt kenarında koyu, içeri doğru açılır */
  box-shadow:
    inset 30px 0 30px -20px rgba(0, 0, 0, 0.42),
    inset 2px 0 0 rgba(0, 0, 0, 0.12);
}
.yuz--arka.kagit {
  box-shadow:
    inset -30px 0 30px -20px rgba(0, 0, 0, 0.42),
    inset -2px 0 0 rgba(0, 0, 0, 0.12);
}
/* iç kapak / bölüm arası — boş değil, mühürlü nefes sayfası */
.kagit--bos {
  display: grid;
  place-items: center;
}
.kagit--bos::before {
  content: "";
  position: absolute;
  inset: 7.5%;
  border: 1px solid color-mix(in srgb, var(--kagit-murekkep) 14%, transparent);
}
.kagit--bos::after {
  content: "";
  width: 40%;
  aspect-ratio: 1;
  -webkit-mask: var(--marka-isaret) center / contain no-repeat;
  mask: var(--marka-isaret) center / contain no-repeat;
  background: var(--kagit-murekkep);
  opacity: 0.14;
}

/* ön kapak — çok katmanlı deri: taban ışık + pebble grain + iri leke + sheen */
.kapak {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.85rem;
  text-align: center;
  isolation: isolate;
  background-color: var(--zemin-2);
  background-image:
    var(--deri-mottle),
    var(--deri-pebble),
    radial-gradient(115% 90% at 50% 32%,
      color-mix(in srgb, #fff 9%, var(--zemin-2)),
      var(--zemin-2) 55%,
      color-mix(in srgb, var(--zemin-2) 66%, #000) 100%);
  background-size: 420px 420px, 176px 176px, cover;
  background-blend-mode: soft-light, overlay, normal;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--marka-renk) 10%, transparent),
    inset 0 60px 90px -70px color-mix(in srgb, #fff 12%, transparent),
    inset 0 0 60px 8px rgba(0, 0, 0, 0.28),
    inset 0 -70px 80px -60px rgba(0, 0, 0, 0.4);
}
/* eğik, yumuşak parlama */
.kapak::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(124deg,
    color-mix(in srgb, #fff 12%, transparent) 0%,
    transparent 40%,
    transparent 76%,
    rgba(0, 0, 0, 0.18) 100%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
/* cilt çizgisi — körlemesine basılı ince çerçeve */
.kapak__motif {
  position: absolute;
  inset: 7.5%;
  border: 1px solid color-mix(in srgb, var(--marka-renk) 12%, transparent);
  box-shadow:
    inset 0 1px 1.5px rgba(0, 0, 0, 0.28),
    0 1px 0 color-mix(in srgb, #fff 7%, transparent);
  pointer-events: none;
  z-index: 1;
}
/* tasarım 1'in hero logosu — deriye altın yaldız baskı */
.kapak__marka {
  position: relative;
  z-index: 1;
  width: 74%;
  height: clamp(78px, 19vw, 132px);
  -webkit-mask-image: url("../brand/logo-script.png");
  mask-image: url("../brand/logo-script.png");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background:
    linear-gradient(158deg, #f0d69a 0%, #c79b52 40%, #a97f3d 55%, #e6c684 78%, #b98f45 100%);
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4))
    drop-shadow(0 -1px 0.5px rgba(0, 0, 0, 0.3));
}
.kapak__ad {
  font-size: 0.82rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #d9b877;
  opacity: 0.9;
  padding-left: 0.42em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.kapak__alt {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: color-mix(in srgb, #d9b877 65%, transparent);
}

/* sayfa içeriği */
.sayfa { height: 100%; }
.sayfa__ad {
  font-size: clamp(1.45rem, 1rem + 2vw, 2rem);
  margin-bottom: 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--kagit-murekkep) 22%, transparent);
}
.sayfa__liste { list-style: none; margin: 0; padding: 0; }
.sayfa__liste li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.1rem 0.35rem;
  padding-block: clamp(0.42rem, 1.4vw, 0.62rem);
}
.sayfa__liste .ad { font-size: clamp(0.98rem, 0.9rem + 0.4vw, 1.08rem); }
.sayfa__liste .ad::after {
  content: "";
  flex: 1;
  min-width: 1.2rem;
  align-self: center;
  border-bottom: 1px dotted color-mix(in srgb, var(--kagit-murekkep) 38%, transparent);
  transform: translateY(-0.18em);
}
.sayfa__liste .fiyat {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.86rem;
  color: color-mix(in srgb, var(--kagit-murekkep) 50%, transparent);
}
.sayfa__liste .tarif {
  flex-basis: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.76rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--kagit-murekkep) 60%, transparent);
}

/* kapanış sayfası */
.kagit--kapanis .sayfa {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 0.9rem;
}
.kapanis__mark {
  width: 3rem; height: 3rem;
  background-color: color-mix(in srgb, var(--kagit-murekkep) 55%, transparent);
  margin-bottom: 0.5rem;
}
.kapanis__satir { font-size: 1.1rem; margin: 0; }
.kapanis__not {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.8rem;
  line-height: 1.6;
  max-width: 26ch;
  color: color-mix(in srgb, var(--kagit-murekkep) 62%, transparent);
}
.kapanis__imza { font-style: italic; opacity: 0.7; margin: 0.4rem 0 0; }

/* kontroller */
.kitap-alt {
  display: grid;
  justify-items: center;
  gap: 1rem;
}
/* .dugme/.kitap-nav kendi display'ini kurduğu için [hidden] ezilmesin */
.kitap-ac[hidden],
.kitap-nav[hidden] { display: none !important; }
.kitap-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.kitap-ok {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  border: 1px solid var(--cizgi);
  background: none;
  color: var(--murekkep);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background-color 0.3s, box-shadow 0.35s var(--yumusak);
}
.kitap-ok:hover:not(:disabled) {
  border-color: var(--vurgu);
  color: var(--vurgu);
}
.kitap-ok:disabled { opacity: 0.28; cursor: default; }
.kitap-sayac {
  min-width: 5rem;
  text-align: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  color: var(--murekkep-2);
}
.kitap-kapat { margin-left: 0.4rem; }

@media (max-width: 620px) {
  .kitap-sahne {
    --sayfa-w: clamp(240px, 92vw, 330px);
    overflow: clip;                 /* çevrilen yaprakların taşması kırpılsın */
    perspective: 3600px;
  }
  .kitap { transform: rotateX(3deg) rotateY(-5deg); }
  /* mobil: iki sayfa yayılmıyor — tek geçerli sayfa ortada, iç kapak görünmez */
  .kitap[data-acik="true"] {
    transform: rotateX(0.5deg) rotateY(0deg) translateX(var(--kaydir, 0px));
  }
  /* sırt şeridi mobilde geçerli sayfanın kenarına biniyordu */
  .kitap__sirt { display: none; }
  /* tek sayfada sırt gölgesi yok — yumuşak çepeçevre vinyet, metin sıkışmasın */
  .kitap[data-acik="true"] .kagit,
  .kitap[data-acik="true"] .yuz--arka.kagit {
    box-shadow: inset 0 0 46px -26px rgba(0, 0, 0, 0.3);
  }
  .kitap-sahne::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kitap {
    width: min(100%, 540px);
    height: auto;
    transform: none !important;
    transform-style: flat;
  }
  .kitap__deste, .kitap__sirt, .yaprak--kapak, .yuz--arka { display: none; }
  .yaprak {
    position: relative;
    inset: auto;
    transform: none !important;
    margin-bottom: 1.1rem;
  }
  .yuz { position: relative; inset: auto; box-shadow: none; }
}

/* ---------- 11. Şarap -------------------------------------- */

.sarap { background: var(--zemin-2); transition: background-color 0.7s var(--yumusak); }

.sarap__duzen {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.sarap__gorsel { margin: 0; overflow: hidden; border-radius: 4px; }
.sarap__gorsel img { width: 100%; will-change: transform; }

.sarap__liste { margin: 2.6rem 0 0; display: grid; gap: 1.35rem; }
.sarap__liste > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  border-top: 1px solid var(--cizgi);
  padding-top: 1rem;
}
.sarap__liste dt { font-size: 1.1rem; }
.sarap__liste dd { margin: 0; color: var(--murekkep-2); font-size: 0.95rem; }

.sarap__liste > div:nth-child(1) { transition-delay: 0s; }
.sarap__liste > div:nth-child(2) { transition-delay: 0.09s; }
.sarap__liste > div:nth-child(3) { transition-delay: 0.18s; }
.sarap__liste > div:nth-child(4) { transition-delay: 0.27s; }

.uyari {
  margin-top: 2.2rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.78rem;
  color: var(--murekkep-2) !important;
}

/* ---------- 12. Galeri ------------------------------------- */

.mekan__ust { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.mekan__adres { margin: 1.1rem 0 0; color: var(--murekkep-2); font-size: 0.92rem; }
.mekan__adres + .dugme { margin-top: 0.9rem; }

/* Harita iğnesi + "buradasınız" nabzı — saf CSS, JS yok. */
.pin-nabiz {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.55em;
  border-radius: 50%;
  background: var(--vurgu);
  vertical-align: middle;
}
.pin-nabiz::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--vurgu);
  opacity: 0.55;
  animation: pinNabiz 2.2s ease-out infinite;
}
@keyframes pinNabiz {
  0% { transform: scale(0.5); opacity: 0.55; }
  100% { transform: scale(2.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pin-nabiz::after { animation: none; opacity: 0; }
}

.galeri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.5rem);
}
.galeri__oge,
.galeri__oge--genis { margin: 0; overflow: hidden; grid-column: auto; border-radius: 4px; }
.galeri__oge img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 5; object-fit: cover;
  will-change: transform;
  cursor: zoom-in;
}

/* ---------- 12b. Galeri lightbox --------------------------- */
/* Düz <div> — <dialog>/showModal() kasıtlı kullanılmıyor: top layer'a
   taşınması mobil WebKit'lerde içindeki position:fixed klonu yanlış
   konumluyordu. Tamamen kendi class'ımızla açıp kapatıyoruz. */
.galeri-lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  align-items: center; justify-content: center;
  background: rgba(10, 8, 6, 0.82);
}
.galeri-lightbox.acik { display: flex; }
.galeri-lightbox__cerceve { position: relative; display: inline-flex; max-width: 100%; max-height: 100%; }
.galeri-lightbox img {
  display: block; max-width: min(92vw, 1400px); max-height: 90vh;
  width: auto; height: auto; border-radius: 4px;
}
.galeri-lightbox__kapat {
  position: absolute; top: -0.4rem; right: -0.4rem; translate: 100% -100%;
  width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0;
  background: var(--zemin, #111); color: var(--yazi, #fff);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}

/* ---------- 13. Rezervasyon -------------------------------- */

.rezervasyon__duzen {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
  padding: clamp(1.75rem, 5vw, 4rem);
  border: 1px solid var(--cam-brd);
  border-radius: 4px;
  background: var(--cam-bg);
  -webkit-backdrop-filter: var(--cam-blur);
  backdrop-filter: var(--cam-blur);
  box-shadow: var(--cam-golge);
}

.bilgi { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.bilgi li {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1rem;
  border-top: 1px solid var(--cizgi);
  padding-top: 0.85rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.88rem;
}
.bilgi li > span:first-child { color: var(--murekkep-2); }

[data-yer-tutucu],
[data-yer-tutucu-baglanti] {
  border-bottom: 1px dashed var(--cizgi);
  color: var(--murekkep-2);
}

.form {
  display: grid;
  gap: 1.15rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.alan { display: grid; gap: 0.4rem; }
.alan--ikili { grid-template-columns: 1fr 1fr; gap: 1rem; }
.alan--ikili > div { display: grid; gap: 0.4rem; }

.form label { font-size: 0.82rem; color: var(--murekkep-2); }
.istege-bagli { opacity: 0.7; }

.form input,
.form select,
.form textarea {
  font: inherit;
  font-size: 0.95rem;
  color: var(--murekkep);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--cizgi);
  padding: 0.6rem 0.1rem;
  border-radius: 0;
  transition: border-color 0.35s var(--yumusak), box-shadow 0.35s var(--yumusak);
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  border-bottom-color: var(--vurgu);
  box-shadow: 0 1px 0 0 var(--vurgu);
}
.form textarea { resize: vertical; }
.form select option { color: var(--kagit-murekkep); }

.onay {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  margin-top: 0.6rem;
}
.onay input { width: 1.05rem; height: 1.05rem; margin-top: 0.28rem; accent-color: var(--vurgu); }
.onay label { font-size: 0.82rem; line-height: 1.55; }

.hata { font-size: 0.8rem; color: var(--hata); margin: 0; }

.form__durum { font-size: 0.85rem; margin: 0; min-height: 1.2em; }
.form__not { font-size: 0.76rem; color: var(--murekkep-2) !important; margin: 0; }

/* ---------- 14. Alt ---------------------------------------- */

.alt {
  border-top: 1px solid var(--cizgi);
  padding-block: 3.5rem 2.5rem;
}
.alt__duzen { display: grid; gap: 2rem; }
.alt__marka p {
  font-style: italic;
  margin: 0.9rem 0 0;
  color: var(--murekkep-2) !important;
}
.alt__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.7rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.85rem;
}
.alt__nav a { text-decoration: none; border-bottom: 1px solid transparent; }
.alt__nav a:hover { border-bottom-color: var(--vurgu); }
.alt__telif {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.76rem;
  color: var(--murekkep-2) !important;
  margin: 0;
}

/* ---------- 15. Tema seçici -------------------------------- */

.temaSecici {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 50;
  display: grid;
  justify-items: end;
  gap: 0.6rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.temaSecici__dugme {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--zemin);
  background: color-mix(in srgb, var(--zemin) 78%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  color: var(--murekkep);
  padding: 0.6rem 1.05rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.temaSecici__nokta {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--vurgu);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vurgu) 25%, transparent);
}

.temaSecici__liste[hidden] { display: none; }

.temaSecici__liste {
  background: var(--zemin);
  background: color-mix(in srgb, var(--zemin) 92%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  padding: 0.9rem;
  display: grid;
  gap: 0.15rem;
  min-width: 232px;
  transform-origin: bottom right;
  animation: listeAc 0.4s var(--yavas);
}
@keyframes listeAc {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
}

.temaSecici__baslik {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--murekkep-2) !important;
  margin: 0 0 0.5rem 0.55rem;
}

.tema {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.2rem 0.7rem;
  background: none;
  border: 0;
  border-radius: 9px;
  color: var(--murekkep);
  text-align: left;
  padding: 0.5rem 0.55rem;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background-color 0.3s;
}
.tema:hover { background: color-mix(in srgb, var(--murekkep) 9%, transparent); }
.tema[aria-pressed="true"] { background: color-mix(in srgb, var(--murekkep) 13%, transparent); }

.tema i {
  grid-row: span 2;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--cizgi);
}
.tema small {
  grid-column: 2;
  font-size: 0.7rem;
  color: var(--murekkep-2);
}

.tema i[data-t="ates"]    { background: linear-gradient(135deg, #2a100e 50%, #c97a4e 50%); }
.tema i[data-t="zarafet"] { background: linear-gradient(135deg, #3a2922 50%, #b1908f 50%); }
.tema i[data-t="ege"]     { background: linear-gradient(135deg, #ece2d0 50%, #64201f 50%); }
.tema i[data-t="ocak"]    { background: linear-gradient(135deg, #8c4830 50%, #f0cfa4 50%); }
.tema i[data-t="mahzen"]  { background: linear-gradient(135deg, #130f0e 50%, #8d2434 50%); }

/* ---------- 16. Görünürlük animasyonu ---------------------- */

[data-goster] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--yumusak), transform 1s var(--yavas);
}
[data-goster].gorunur { opacity: 1; transform: none; }

/* ---------- 16b. Özel imleç + magnetic CTA ------------------ */
/* Yalnızca fare + hassas işaretçi olan cihazlarda JS bu class'ı ekler;
   native imleç yalnızca gerçekten devrede olduğunda gizlenir. */
html.ozel-imlec, html.ozel-imlec * { cursor: none !important; }

.imlec {
  position: fixed; top: 0; left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--marka-renk);
  pointer-events: none;
  z-index: 999;
  opacity: 0;
  mix-blend-mode: difference;
  transition: opacity 0.3s, width 0.3s var(--yumusak), height 0.3s var(--yumusak);
}
.imlec.gorunur { opacity: 1; }
.imlec.genis { width: 40px; height: 40px; }

.dugme { will-change: transform; }

/* ---------- 17. Duyarlılık --------------------------------- */

@media (max-width: 900px) {
  .hikaye__duzen,
  .sarap__duzen,
  .rezervasyon__duzen { grid-template-columns: 1fr; }
  .sarap__gorsel { order: 2; }
}

@media (max-width: 620px) {
  .ust__nav { display: none; }
  .ust { gap: 1rem; justify-content: space-between; }
  .ates__izgara { grid-template-columns: repeat(2, 1fr); }
  .galeri { grid-template-columns: repeat(2, 1fr); }
  .alan--ikili { grid-template-columns: 1fr; }
  .liste li { grid-template-columns: 1fr auto; row-gap: 0.15rem; }
  .liste .ad { grid-column: 1; grid-row: 1; }
  .liste .fiyat { grid-column: 2; grid-row: 1; }
  .liste .tarif { grid-column: 1 / -1; grid-row: 2; }
  .kart__sekmeler {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 1.35rem;
  }
  .kart__sekmeler::-webkit-scrollbar { display: none; }
  .sekme { white-space: nowrap; }
  .bilgi li,
  .sarap__liste > div { grid-template-columns: 1fr; gap: 0.25rem; }
  .temaSecici__liste { min-width: 200px; }
}

/* ---------- 18. Hareket azaltma ---------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-goster] { opacity: 1; transform: none; }
  .tepe__marka { clip-path: none; }
  .tepe__slogan span,
  .tepe__cta,
  .tepe__inis { opacity: 1; transform: none; }
  .serit__ray { animation: none; }
  .kart[data-acik="true"] .kart__kapak { transform: none; }
  .kivilcim-katman { display: none; }
}

/* ---------- 14. Hukuki sayfalar (kvkk / gizlilik / cerez) ---- */

/* tema kuralları body'yi saydam bırakabiliyor; hukuk sayfalarında
   shader yok, o yüzden zemini burada kesin olarak veriyoruz */
html.hukuk-sayfa,
html.hukuk-sayfa body,
body.hukuk-sayfa { background: var(--zemin); }
.hukuk-sayfa #fon { display: none !important; }

.hukuk {
  padding-block: clamp(7rem, 5rem + 8vw, 10rem) var(--bosluk-bolum);
  max-width: 74ch;
}

.hukuk__ust { margin-bottom: 3.5rem; }

.hukuk__etiket {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--murekkep-2);
  margin-bottom: 1.1rem;
}

.hukuk h1 {
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.1rem);
  line-height: 1.12;
  margin: 0 0 1.25rem;
  color: var(--marka-renk);
}

.hukuk__tarih {
  font-size: 0.9rem;
  color: var(--murekkep-2);
  border-top: 1px solid var(--cizgi);
  padding-top: 1.1rem;
}

.hukuk h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  line-height: 1.25;
  margin: 3.25rem 0 1rem;
  color: var(--marka-renk);
  scroll-margin-top: 6rem;
}

.hukuk h3 {
  font-size: 1.05rem;
  margin: 2rem 0 0.6rem;
  color: var(--murekkep);
}

.hukuk p,
.hukuk li {
  color: var(--murekkep);
  line-height: 1.72;
}

.hukuk p { margin: 0 0 1.05rem; }

.hukuk ul,
.hukuk ol { margin: 0 0 1.4rem; padding-left: 1.35rem; }
.hukuk li { margin-bottom: 0.55rem; }
.hukuk li::marker { color: var(--vurgu); }

.hukuk a {
  color: var(--vurgu);
  text-underline-offset: 0.22em;
}

.hukuk__ozet {
  border: 1px solid var(--cizgi);
  border-left: 3px solid var(--vurgu);
  background: color-mix(in srgb, var(--zemin-2) 70%, transparent);
  padding: 1.4rem 1.6rem;
  margin: 0 0 2.5rem;
  border-radius: 3px;
}
.hukuk__ozet p:last-child { margin-bottom: 0; }
.hukuk__ozet strong { color: var(--marka-renk); }

.hukuk__yer {
  color: var(--vurgu);
  border-bottom: 1px dotted currentColor;
  font-style: normal;
  /* nowrap YOK: uzun işletme notları sayfayı yatay kaydırtıyordu */
  overflow-wrap: anywhere;
}

.hukuk__tablo {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.75rem;
  font-size: 0.94rem;
}
.hukuk__tablo th,
.hukuk__tablo td {
  border: 1px solid var(--cizgi);
  padding: 0.7rem 0.85rem;
  text-align: left;
  vertical-align: top;
  color: var(--murekkep);
}
.hukuk__tablo th {
  color: var(--marka-renk);
  font-weight: 400;
  background: color-mix(in srgb, var(--zemin-2) 60%, transparent);
}
.hukuk__sar { overflow-x: auto; }

.hukuk__geri {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--cizgi);
  color: var(--murekkep-2);
}

.hukuk__kardes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 1.25rem;
  font-size: 0.94rem;
}

@media (max-width: 620px) {
  .hukuk { padding-block: 6rem 4rem; }
  .hukuk h2 { margin-top: 2.5rem; }
}

/* ---------- 15. (kaldırıldı: logotype alt kesim yumuşatma) --- */
/* ates/ege temalarında logonun kaligrafi kuyruğunu yumuşatmak için
   ikinci bir gradient mask katmanı + mask-composite:intersect
   kullanılıyordu. Mobil Safari'de (ve daha az belirgin biçimde
   masaüstünde) intersect doğru kesişmiyor: "contain" ile sığdırılan
   logo PNG'sinin yanındaki boş kenarlarda gradient katmanı tek başına
   görünüp marka-renk dolgulu dikey barlar oluşturuyordu. Diğer
   temalar zaten tek maskeyle çalışıyor — ates/ege de artık öyle
   (base .marka--buyuk kuralı yeterli); kaligrafi ucu hafif künt
   kalır ama görünür bar hatasından çok daha ufak bir kusur. */

/* ---------- 16. Üst nav cam hapı --------------------------- */
/* Header sayfa tepesindeyken tamamen saydam; nav bağlantıları hero
   fotoğrafının üstünde doğrudan duruyor ve siliniyordu. Bağlantılara
   kendi buzlu cam zeminini veriyoruz — logo fotoğrafın üstünde serbest
   kalmaya devam etsin diye çubuğun tamamına değil, yalnızca nav'a.
   Renkler mevcut --cam-* token'larından türetiliyor, böylece beş temada
   da doğru zemine oturuyor (ege açık kâğıt zeminde kendi değerini alır). */

.ust__nav {
  padding: 0.55rem clamp(0.9rem, 1.6vw, 1.35rem);
  border-radius: 999px;
  background: color-mix(in srgb, var(--zemin) 68%, transparent);
  -webkit-backdrop-filter: var(--cam-blur);
  backdrop-filter: var(--cam-blur);
  border: 1px solid var(--cam-brd);
  box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.55);
  transition: background-color 0.4s var(--yumusak),
    -webkit-backdrop-filter 0.4s var(--yumusak),
    backdrop-filter 0.4s var(--yumusak),
    border-color 0.4s var(--yumusak), box-shadow 0.4s var(--yumusak);
}

[data-tema="ege"] .ust__nav {
  background: color-mix(in srgb, var(--kagit) 66%, transparent);
}

/* Kaydırınca header'ın kendi cam zemini devreye giriyor; üst üste iki
   cam katmanı çamur yapar, o yüzden hap burada çözülür. */
.ust[data-kucuk="true"] .ust__nav {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
}

/* backdrop-filter yoksa yine okunur bir zemin kalsın */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ust__nav { background: color-mix(in srgb, var(--zemin) 88%, transparent); }
  [data-tema="ege"] .ust__nav { background: color-mix(in srgb, var(--kagit) 88%, transparent); }
}

/* ---------- 17. Header CTA'sı: nav ile aynı cam ------------- */
/* Nav kendi cam zeminini kazanınca header'daki "Rezervasyon yap"
   saydam kalıp silik göründü ve hiyerarşi ters döndü: navigasyon,
   asıl eylemden güçlü okunuyordu. Butona aynı malzemeyi veriyoruz,
   ama kenarlığı --cizgi yerine vurgu renginden alıyor: aynı cam
   ailesi, farklı ağırlık. Dolu terrakota yapmadık; hero'daki
   "Masa ayır" zaten dolu, ikisi birden ekranda yarışırdı. */

.ust .dugme--kucuk {
  background: color-mix(in srgb, var(--zemin) 68%, transparent);
  -webkit-backdrop-filter: var(--cam-blur);
  backdrop-filter: var(--cam-blur);
  border-color: color-mix(in srgb, var(--vurgu) 55%, transparent);
  box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.55);
  transition: color 0.4s var(--yumusak), border-color 0.4s var(--yumusak),
    background-color 0.4s var(--yumusak),
    -webkit-backdrop-filter 0.4s var(--yumusak),
    backdrop-filter 0.4s var(--yumusak), box-shadow 0.4s var(--yumusak);
}

[data-tema="ege"] .ust .dugme--kucuk {
  background: color-mix(in srgb, var(--kagit) 66%, transparent);
}

.ust .dugme--kucuk:hover {
  border-color: var(--vurgu);
}

/* Kaydırınca header kendi camını kazanır: zemin ve blur çözülür,
   ama kenarlık KALIR — yoksa buton tamamen kaybolurdu. */
.ust[data-kucuk="true"] .dugme--kucuk {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ust .dugme--kucuk { background: color-mix(in srgb, var(--zemin) 88%, transparent); }
  [data-tema="ege"] .ust .dugme--kucuk { background: color-mix(in srgb, var(--kagit) 88%, transparent); }
}