/* Blok kütüphanesi — templates/_bloklar/*.html için ortak yapısal CSS.
   Renk/tipografi buraya YAZILMAZ; hepsi varyant token'larından gelir.
   Sektör style.css'i bu dosyanın üstüne biner (sonra yükleniyor). */

/* ------------------------------------------------------------ blok ritmi */
/* Sabit iskelette bolum araliklari elle ayarliydi. Bloklar serbest siralanmaya
   baslayinca her blok kendi ust+alt payini getirdi ve aralar iki katina cikti:
   ekranda kocaman bos siyah alanlar olusuyordu. Cozum: blok bolumlerinde tek
   pay - ardisik bolumun ust payi sifir. */
:root { --blok-y: clamp(4.5rem, 8vw, 9.5rem); }
.bolum { padding-block: var(--blok-y); }
.bolum + .bolum { padding-top: 0; }
.bolum + .blok-cta, .blok-tamfoto + .bolum { padding-top: var(--blok-y); }
.bolum--sikisik { padding-block: calc(var(--blok-y) * 0.6); }

/* ------------------------------------------------------- hikaye-sticky (hs) */
.hs-kap { display: grid; grid-template-columns: 12rem 1fr; gap: var(--sp-7); }
.hs-sol { position: sticky; top: 14vh; align-self: start; }
.hs-yer { display: block; margin-top: var(--sp-3); color: var(--muted); }
.hs-buyuk {
  font-size: var(--step-2);
  line-height: 1.35;
  max-width: 30ch;
  margin: 0 0 var(--sp-6);
}
.hs-kucuk { max-width: var(--olcu); color: var(--muted); }
.hs-gorsel { margin-top: var(--sp-7); aspect-ratio: 4 / 3; }
@media (max-width: 780px) { .hs-kap { grid-template-columns: 1fr; } .hs-sol { position: static; } }

/* --------------------------------------------------------------- sahne (G9) */
.sahne-metin { display: flex; flex-direction: column; gap: 42vh; padding-block: 18vh; }
.sahne-adim { max-width: 34ch; }
.sahne-liste { list-style: none; margin: 0; padding: 0; }
.sahne-liste li { padding-block: var(--sp-3); border-bottom: 1px solid var(--rule); }
@media (max-width: 780px) { .sahne-metin { gap: var(--sp-8); padding-block: var(--sp-7); } }

/* ---------------------------------------------------------- liste-sade (ls) */
.ls-ust { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-7); }
.ls-liste { max-width: 62rem; }

/* ---------------------------------------------------------- akordiyon (ak) */
.ak-kap { display: grid; grid-template-columns: 22rem 1fr; gap: var(--sp-7); }
.ak-sol { position: sticky; top: 14vh; align-self: start; display: grid; gap: var(--sp-5); justify-items: start; }
.ak-oge { border-top: 1px solid var(--rule); }
.ak-oge:last-child { border-bottom: 1px solid var(--rule); }
.ak-oge summary {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding-block: var(--sp-5); cursor: pointer; list-style: none;
  font-size: var(--step-1);
}
.ak-oge summary::-webkit-details-marker { display: none; }
.ak-ad { flex: 1 1 auto; }
.ak-fiyat { color: var(--muted); }
.ak-isaret { width: 12px; height: 12px; position: relative; flex: 0 0 auto; }
.ak-isaret::before, .ak-isaret::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1px; background: currentColor;
  transition: transform .35s var(--ease-out);
}
.ak-isaret::after { transform: rotate(90deg); }
.ak-oge[open] .ak-isaret::after { transform: rotate(0deg); }
.ak-govde { padding-bottom: var(--sp-5); max-width: 46ch; color: var(--muted); }
@media (max-width: 780px) { .ak-kap { grid-template-columns: 1fr; } .ak-sol { position: static; } }

/* --------------------------------------------------------- surec ek alanlar */
.surec-ad { display: block; font-size: var(--step-1); }
.surec-aciklama { display: block; color: var(--muted); max-width: 34ch; margin-top: var(--sp-2); }

/* ------------------------------------------------------------ kolaj genişi */
/* Sektör style.css'indeki .kolaj iki kolonlu; galeri bloğunda üç kolon. */
.kolaj--genis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.kolaj--genis .kolaj-oge:nth-child(3n+1) { margin-top: var(--sp-7); }
.kolaj--genis .kolaj-oge:nth-child(3n+2) { margin-top: 0; }
.kolaj--genis .kolaj-oge:nth-child(3n)   { margin-top: var(--sp-8); }
@media (max-width: 780px) {
  .kolaj--genis { grid-template-columns: 1fr 1fr; }
  .kolaj--genis .kolaj-oge { margin-top: 0 !important; }
}

/* ----------------------------------------------------------------- bento */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 15vw;
  gap: var(--sp-4);
}
.bento-oge { margin: 0; overflow: hidden; grid-column: span 1; grid-row: span 1; }
.bento-oge:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.bento-oge:nth-child(4) { grid-column: span 2; }
.bento-oge img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 780px) {
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 34vw; }
  .bento-oge:nth-child(1) { grid-column: span 2; }
  .bento-oge:nth-child(4) { grid-column: span 1; }
}

/* --------------------------------------------------------------- yelpaze */
.yelpaze-kap { display: grid; justify-items: center; gap: var(--sp-6); }
.yelpaze { width: min(100%, 70rem); }
.yelpaze-oge { margin: 0; width: 30%; aspect-ratio: 3 / 4; overflow: hidden; margin-inline: -6%; }
.yelpaze-oge img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 780px) { .yelpaze-oge { width: 30%; } }

/* ------------------------------------------------------ görsel akordiyon */
.gak-serit { margin: 0; }

/* --------------------------------------------------------- yatay şerit */
.blok-yatay { padding-block: 0; overflow: hidden; }
.yatay-ic { height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-5); }
.yatay-etiket { padding-inline: var(--kenar); }
.yatay-ray { display: flex; gap: var(--sp-5); padding-inline: var(--kenar); width: max-content; }
.yatay-oge { margin: 0; width: 34vw; aspect-ratio: 4 / 3; overflow: hidden; }
.yatay-oge:nth-child(even) { width: 24vw; aspect-ratio: 3 / 4; align-self: flex-end; }
.yatay-oge img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 780px) {
  .yatay-ic { height: auto; padding-block: var(--sp-8); }
  .yatay-ray { overflow-x: auto; width: auto; scroll-snap-type: x mandatory; }
  .yatay-oge, .yatay-oge:nth-child(even) { width: 74vw; scroll-snap-align: center; }
}

/* ------------------------------------------------------------- sürükle */
.surukle { padding-inline: var(--kenar); margin-top: var(--sp-6); }
.surukle-oge { margin: 0; width: 26vw; aspect-ratio: 4 / 5; overflow: hidden; flex: 0 0 auto; }
.surukle-oge img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }
@media (max-width: 780px) { .surukle-oge { width: 68vw; } }

/* --------------------------------------------------------- yığın kartlar */
.yigin-kart { border-radius: 0; overflow: hidden; margin-bottom: var(--sp-6); background: var(--paper); }
.yigin-gorsel { margin: 0; aspect-ratio: 16 / 10; }
.yigin-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------------------------------------- tam foto */
.blok-tamfoto { padding: 0; }
.tamfoto { width: 100%; aspect-ratio: 21 / 9; }
.tamfoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 780px) { .tamfoto { aspect-ratio: 3 / 2; } }

/* ----------------------------------------------------------- yorum · tek */
.yt-kap { max-width: 54rem; }
.yt-alinti {
  margin: var(--sp-6) 0 var(--sp-5);
  font-size: var(--step-3);
  line-height: 1.28;
  text-wrap: balance;
}
.yt-kim { color: var(--muted); }

/* ------------------------------------------------------ yorum · kademeli */
.yk-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); align-items: start; }
.yk-izgara > *:nth-child(2) { margin-top: var(--sp-8); }
.yk-izgara > *:nth-child(3) { margin-top: var(--sp-6); }
@media (max-width: 780px) {
  .yk-izgara { grid-template-columns: 1fr; }
  .yk-izgara > * { margin-top: 0 !important; }
}

/* ------------------------------------------------------- yorum · marquee */
.ym-serit { overflow: hidden; margin-top: var(--sp-6); }
.ym-ic { display: flex; gap: var(--sp-5); width: max-content; }
.ym-kart { width: 26rem; flex: 0 0 auto; border: 1px solid var(--rule); padding: var(--sp-5); }
.ym-kart blockquote { margin: var(--sp-3) 0; }

/* ------------------------------------------------------------ saat bloğu */
.saat-kap { display: grid; grid-template-columns: 12rem 1fr; gap: var(--sp-6); align-items: start; }
@media (max-width: 780px) { .saat-kap { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- CTA bandı */
.blok-cta { padding-block: var(--sp-9); background: var(--ink); color: var(--paper); }
.cta-bandi { display: grid; gap: var(--sp-6); justify-items: start; }
.blok-cta .baslik-2 { max-width: 18ch; }
.cta--buyuk { padding: var(--sp-4) var(--sp-6); font-size: var(--step-1); background: var(--paper); color: var(--ink); }

/* ------------------------------------------------------------- WhatsApp */
/* Satis akisinin tamami WhatsApp'tan yuruyor. Yesil baloncuk kullanmiyoruz -
   her sablonda ayni jenerik eklenti gorunumu veriyor; bunun yerine sitenin
   kendi murekkep rengi + yalnizca ikonda WhatsApp yesili. */
.wa-yuzen {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  box-shadow: 0 6px 24px rgb(0 0 0 / 18%);
  transition: transform .4s var(--ease-out), opacity .3s ease;
}
.wa-yuzen .wa-ikon { width: 20px; height: 20px; color: #25D366; flex: 0 0 auto; }
@media (hover: hover) { .wa-yuzen:hover { transform: translateY(-2px); } }

/* Mobilde alt bar zaten WhatsApp iceriyor; iki buton ust uste binmesin. */
@media (max-width: 780px) { .wa-yuzen { display: none; } }

/* CTA bandinda: birincil eylem arama, WhatsApp ikincil metin linki.
   Iki esit buton koyunca eylem boluyor (bkz. design-dna/kompozisyon.md). */
.cta-ikili { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.cta-wa { color: currentColor; opacity: .78; font-size: var(--step--1); }
.cta-wa:hover { opacity: 1; }

/* ------------------------------------------------------ kayan şerit stilleri */
/* Sektör style.css'i `.marquee` tabanını (kural çizgisi, yazı boyutu) veriyor;
   buradaki değiştiriciler onun üstüne biniyor. Stil kompozisyondan geliyor
   (`server/services/kompozisyon.js` → SERITLER), her sitede aynı şerit olmasın. */

/* dolu · mürekkep zeminde ters renk — sayfayı ikiye bölen bant */
.marquee--dolu {
  background: var(--ink);
  color: var(--paper);
  border-color: transparent;
  padding-block: var(--sp-4);
}
.marquee--dolu .marquee-ayrac { color: var(--paper); opacity: .45; }

/* egik · −3° yatık, taşan genişlik. Yatık bant kenarda beyaz üçgen bırakmasın
   diye genişlik %108 ve negatif kenar boşluğu şart. */
.marquee--egik {
  transform: rotate(-3deg);
  width: 108%;
  margin-left: -4%;
  background: var(--accent);
  color: var(--paper);
  border: 0;
  padding-block: var(--sp-3);
  position: relative;
  z-index: 1;
}
.marquee--egik .marquee-ayrac { color: var(--paper); opacity: .5; }

/* dev · display boyutunda kayan kelimeler; kendi başına bir bölüm gibi durur */
.marquee--dev {
  border: 0;
  padding-block: var(--sp-6);
}
.marquee--dev .marquee-ic > span {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 9vw, 8rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: none;
}
.marquee--dev .marquee-ayrac {
  color: var(--accent);
  font-size: clamp(1.5rem, 4vw, 3rem);
  align-self: center;
}

/* ince · taban stilin kendisi (sektör style.css'inden). Burada yalnızca
   harflerin fazla sıkışmaması için küçük bir düzeltme. */
.marquee--ince .marquee-ic > span { letter-spacing: 0.14em; }

/* Panel önizlemesi bölüm çapasına atlıyor (#serit, #hizmetler…). Çapa tam
   üste yaslanınca ince şerit ekranın kenarında kalıyor ve kart boş görünüyor;
   üstte biraz nefes bırakıyoruz. */
#serit { scroll-margin-top: 22vh; }
#hizmetler, #galeri, #hikaye, #surec, #yorumlar { scroll-margin-top: 8vh; }

/* ==========================================================================
   PAYLAŞILAN HERO ARKETİPLERİ
   Şablon (`templates/_hero/*.html`) sektörden bağımsız; stili de burada,
   çünkü dört sektör style.css'ine dört kez yazılırsa biri güncellenip
   diğerleri unutuluyor.
   Şartname: design-dna/kompozisyon.md · H1, H3, H8, H9
   ========================================================================== */

/* --- H1 · tipografi-önce -------------------------------------------------
   İlk ekranda hiç görsel yok. Ortalanmış display, üstünde nokta çerçeveli
   künye. Fotoğraf hemen ALTTA tam genişlikte, üzerinde yazı olmadan.
   Görseli esirgemek onu güçlendiriyor. */

.hero--tipografi-once {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0;
  padding: calc(var(--sp-9) + 3rem) var(--kenar) var(--sp-8);
  --hero-pay: 0.66;
}

.hero--tipografi-once .hero-ic { max-width: 62rem; }

@media (max-width: 780px) {
  /* Telefonda başlığın yanında hiçbir şey yok; masaüstündeki dar payı
     korumak başlığı gereksiz küçültüyor. */
  .hero--tipografi-once { --hero-pay: 0.92; }
  .hero--tipografi-once { padding-top: calc(var(--sp-8) + 2rem); }
}

/* Ortalanmış hero'da başlık TEK EKRANA sığmalı: altındaki fotoğraf bandı
   hemen görünmezse "görseli esirgeme" jesti anlaşılmıyor, sayfa sadece
   dev harflerle başlamış gibi duruyor.
   `--hero-ch` en uzun SATIRIN harf sayısı; "yapmıyor." gibi kısa bir son satır
   onu küçültüp fontu tavana çıkarıyordu (dört ekran boyu başlık). Bu yüzden
   burada ayrı ve daha sert bir tavan var. */
.hero--tipografi-once .display {
  font-size: min(
    6.5rem,
    var(--display),
    calc((100vw - 2 * var(--kenar)) * var(--hero-pay) / (var(--hero-ch, 18) * 0.52))
  );
  /* Türkçe çengelleri (ş, ğ, ç) 0.92'de bir alt satıra değiyordu. */
  line-height: 1.02;
}

.hero-kunye {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3, 12px);
  margin: 0 0 var(--sp-6);
  color: var(--muted);
}

.hero-nokta { color: var(--accent); font-size: 0.7em; }

.hero--tipografi-once .hero-alt { margin: var(--sp-5) auto 0; }
.hero--tipografi-once .hero-cta { justify-content: center; }
.hero--tipografi-once .hero-puan { margin-top: var(--sp-5); color: var(--muted); }

/* Fotoğraf bandı: hero'nun devamı, ayrı bir bölüm değil — üstten boşluk yok. */
.hero-band {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.hero-band img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 700px) {
  .hero-band { aspect-ratio: 4 / 3; }
}

/* --- H3 · tek renk zemin -------------------------------------------------
   Bütün ekran tek düz marka rengi. Gradyan YOK, fotoğraf YOK, doku YOK —
   "cesur ama ucuz değil" çizgisini tutan şey tam olarak bu kısıtlama. */

.hero--tek-renk {
  display: grid;
  align-content: end;
  gap: var(--sp-6);
  min-height: 92svh;
  padding: calc(var(--sp-9) + 2rem) var(--kenar) var(--sp-7);
  background: var(--accent);
  color: var(--paper);
  --hero-pay: 0.94;
}

/* Zemin vurgu rengi olunca metin ve çizgiler de ters dönmeli; aksi halde
   mürekkep renginde bir başlık vurgu zemininde okunmuyor. */
.hero--tek-renk .hero-meta,
.hero--tek-renk .hero-alt { color: color-mix(in oklab, var(--paper) 78%, var(--accent)); }
.hero--tek-renk .display { color: var(--paper); }

.hero--tek-renk .cta {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.hero--tek-renk .cta--cizgi {
  background: transparent;
  color: var(--paper);
  border-color: color-mix(in oklab, var(--paper) 55%, transparent);
}

.hero-kaydir {
  justify-self: start;
  color: color-mix(in oklab, var(--paper) 65%, var(--accent));
}

/* Sıkışık display: tek renk zeminde tipografi tek başına taşıyor. */
.hero--tek-renk .display { letter-spacing: -0.045em; line-height: 0.88; }

/* --- H8 · künye / indeks -------------------------------------------------
   Başlık küçük, altında hemen VERİ: adres, bugünün saati, telefon, puan.
   Fotoğrafı zayıf ama bilgisi net işletmeler için. */

.hero--kunye {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-areas:
    'ic     tablo'
    'cta    tablo'
    'gorsel gorsel';
  align-items: start;
  gap: var(--sp-6) var(--sp-7);
  padding: calc(var(--sp-9) + 1rem) var(--kenar) var(--bolum-y);
  --hero-pay: 0.56;
}

.hero--kunye .hero-ic { grid-area: ic; }
.hero--kunye .hero-cta { grid-area: cta; margin-top: 0; }
.hero--kunye .hero-gorsel { grid-area: gorsel; aspect-ratio: 21 / 9; margin-top: var(--sp-5); }
.hero--kunye .hero-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-kunye-etiket { margin: 0 0 var(--sp-4); color: var(--muted); }

.hero-tablo {
  grid-area: tablo;
  margin: 0;
  border-top: 1px solid var(--rule);
}

.hero-tablo-satir {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--rule);
}

.hero-tablo dt { margin: 0; color: var(--muted); }
.hero-tablo dd { margin: 0; line-height: 1.45; }

@media (max-width: 900px) {
  .hero--kunye {
    grid-template-columns: 1fr;
    grid-template-areas: 'ic' 'tablo' 'cta' 'gorsel';
    --hero-pay: 0.92;
  }
  .hero-tablo-satir { grid-template-columns: 5.5rem minmax(0, 1fr); }
}

/* --- H9 · tipografi özneyi sarar ----------------------------------------
   Başlık ikiye bölünür: ilk yarısı görselin üstünde, ikinci yarısı altında,
   özne tam ortada durur. Dikey fotoğraf sorununa doğrudan çözüm: hero bandını
   yatay kırpmak yerine dikey kareyi ortada bırakıp tipografiyi etrafına
   diziyor. Elimizdeki kuaför fotoğraflarının çoğu tam olarak bu biçimde. */

.hero--saran {
  display: grid;
  justify-items: center;
  gap: var(--sp-6);
  padding: calc(var(--sp-7) + 3rem) var(--kenar) var(--bolum-y);
  /* Başlık burada tek başına ekranı doldurmuyor: özneyi SARMASI gerekiyor.
     --hero-pay yüksek bırakılınca satırlar ekran genişliğinde çıkıp
     görselin üstüne biniyordu. */
  --hero-pay: 0.5;
}

.hero-saran-baslik {
  display: grid;
  justify-items: center;
  gap: var(--sp-4, 16px);
  margin: 0;
  text-align: center;
  width: 100%;
  /* Satır yüksekliği 1'e yakın: iki yarı özneyi sıkı sarsın. Üstteki genel
     kural (0.88-0.92) burada satırları birbirine geçiriyordu. */
  line-height: 0.98;
}

.hero-saran-ust, .hero-saran-alt { display: block; }

/* Özne: dikey kare, tipografinin iki yarısı arasında. Genişliği bilerek
   dar — başlık onu SARMALI, yanında ezilmemeli. */
.hero-saran-ozne {
  display: block;
  width: min(24vw, 15rem);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 2px;
  /* Negatif pay YOK: başlığın alt satırı görselin üstüne biniyordu
     (Türkçe'de "ç/ş/ğ" çengelleri zaten satır kutusunun dışına taşıyor). */
}
.hero-saran-ozne img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sarma jesti ancak iki yarı ve özne AYNI EKRANDA görünürse okunuyor;
   yoksa sayfa "başlık, sonra fotoğraf, sonra başlık" gibi duruyor. */
.hero--saran .display {
  font-size: min(
    4.6rem,
    var(--display),
    calc((100vw - 2 * var(--kenar)) * var(--hero-pay) / (var(--hero-ch, 18) * 0.52))
  );
  line-height: 1.02;
}

.hero--saran .hero-ic { max-width: 52rem; text-align: center; }
.hero--saran .hero-meta { justify-content: center; }
.hero--saran .hero-alt { margin-inline: auto; }
.hero--saran .hero-cta { justify-content: center; }

/* Görsel yoksa iki yarı birleşir; tek satır aralığı kalmasın. */
.hero--saran-tek .hero-saran-ozne { display: none; }

@media (max-width: 780px) {
  /* Telefonda özne başlığın YANINDA değil, altında/üstünde duruyor; yani
     başlığın kullanabileceği genişlik masaüstündekinin iki katı.
     0.5 payı burada da uygulanınca başlık 21px'e düşüyordu — sayfanın gövde
     metninden (19.5px) bile küçük, yani hero olmaktan çıkıyordu.
     Ölçüldü: diğer hero'lar aynı ekranda 37-52px. */
  .hero--saran { --hero-pay: 0.92; }
  .hero-saran-ozne { width: min(58vw, 15rem); }
}

/* --- karsilastir · kıyas sürgüsü ---------------------------------------- */

.kiyas {
  position: relative;
  margin-top: var(--sp-6);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  touch-action: pan-y;      /* dikey kaydırma sürgüye takılmasın */
  user-select: none;
  cursor: ew-resize;
}

.kiyas img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kiyas-alt { position: absolute; inset: 0; }

.kiyas-ust {
  position: absolute;
  inset: 0;
  clip-path: inset(0 50% 0 0);   /* JS yoksa da yarı yarıya görünür */
}

.kiyas-kol {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--paper);
  cursor: ew-resize;
}

.kiyas-kol:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.kiyas-tutamak {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--paper);
  border-radius: 999rem;
  background: color-mix(in oklab, var(--paper) 22%, transparent);
  backdrop-filter: blur(4px);
}

/* Tutamağın içindeki iki ok: ayrı elemana gerek yok. */
.kiyas-tutamak::before {
  content: '‹ ›';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--paper);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
}

@media (max-width: 700px) { .kiyas { aspect-ratio: 4 / 5; } }

/* --- dairesel · dairesel galeri ----------------------------------------- */

.dairesel {
  position: relative;
  display: grid;
  place-items: center;
  height: min(92vh, 56rem);
  margin-top: var(--sp-6);
  overflow: hidden;
}

.dairesel-cember {
  position: relative;
  width: min(80vmin, 44rem);
  height: min(80vmin, 44rem);
  transform-origin: 50% 50%;
}

/* Kareler çemberin merkezine yerleşip JS ile açıya taşınıyor
   (motion.js -> [data-dairesel]). JS yoksa merkezde üst üste duruyorlar;
   bu yüzden blok yalnızca 6+ fotoğrafı olan işletmede seçiliyor. */
.dairesel-kare {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(6rem, 13vmin, 10rem);
  aspect-ratio: 3 / 4;
  margin: 0 0 0 clamp(-5rem, -6.5vmin, -3rem);
  margin-top: clamp(-6.6rem, -8.6vmin, -4rem);
  overflow: hidden;
  border-radius: 2px;
}

.dairesel-kare img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dairesel-orta {
  position: absolute;
  max-width: 46%;
  margin: 0;
  text-align: center;
  font-size: clamp(1.6rem, 4.4vw, 4rem);
  line-height: 0.95;
  pointer-events: none;
}
#kiyas { scroll-margin-top: 8vh; }

/* ==========================================================================
   NAV — kaydırılınca zemin
   Nav tamamen şeffaftı: sayfa kaydıkça başlıklar ve CTA hapları nav yazısının
   ARKASINDAN geçip ikisini birden okunmaz yapıyordu. Telefonda çok daha
   belirgin — ekran dar olduğu için içerik nav'ın altından sürekli geçiyor
   (ölçüldü: 390px'te hero CTA'sı marka adının tam üstüne biniyor).
   Sayfanın en üstünde (`data-ust='1'`) zemin YOK: hero'nun kendi rengi/görseli
   nav'a kadar uzanmaya devam ediyor, arketiplerin ilk ekranı bozulmuyor.
   ========================================================================== */

.nav[data-ust='0'] {
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  border-bottom: 1px solid var(--rule);
}

/* Blur destekleniyorsa zemin biraz daha saydam kalabiliyor. */
@supports (backdrop-filter: blur(8px)) {
  .nav[data-ust='0'] {
    background: color-mix(in oklab, var(--paper) 72%, transparent);
    backdrop-filter: blur(10px);
  }
}

/* Tam-kesim/bölünmüş hero'larda nav ilk ekranda BEYAZ yazıyor. Kaydırınca
   zemin kâğıt rengine dönüyor; yazı da mürekkebe dönmezse beyaz üstüne beyaz
   kalıyor. `data-ust='0'` bunu geri alıyor. */
.nav[data-ust='0'],
.nav[data-ust='0'] .nav-linkler { color: var(--ink); }
.nav[data-ust='0'] .cta--cizgi { border-color: var(--rule); }

@media (prefers-reduced-transparency: reduce) {
  .nav[data-ust='0'] { background: var(--paper); backdrop-filter: none; }
}