/* =========================================================================
   Buminkart — çatı sayfa. Bölünmüş dünya.

   TEK SAYI: `--dikis` (0..1). İki dünyanın kırpması, binanın iki katmanı,
   yer adı, künye — hepsi bu sayıdan türer. İmleç sola giderse şifa büyür,
   sağa giderse mürekkep. JS yoksa `:has(:hover)` aynı işi kabaca yapar.

   Taraflar binanın KENDİ tabelasına göre: HEALING solda, TATTOO ART sağda.
   ========================================================================= */

@property --dikis { syntax: '<number>'; inherits: true; initial-value: 0.5; }

:root {
  --dikis: 0.5;
  /* Kapı seçilince `--dikis` satır içi 1.6'ya (veya -0.6'ya) sürülür;
     geçiş burada tanımlı olduğu için dünya yumuşakça büyür. */
  transition: --dikis 0.85s var(--yumusak);
  --egim: 2.2vw;                  /* dikiş dik değil, hafif eğik */
  --u: clamp(0.82rem, 0.62rem + 0.6vw, 1.05rem);
  --kunye-h: calc(var(--u) * 3.6);

  /* Şifa dünyası: şifa ana sayfasının kendi zemini (#f2e9d9) — saf beyaz
     değil, siteye vardığında renk değişmesin. */
  --s-zemin: #f2e9d9;
  --s-metin: #14100c;
  --s-soluk: #6b6259;
  --s-vurgu: #4f6f66;
  --s-eylem: #b8501f;

  /* Mürekkep dünyası: dövme sitesinin zemini + arcade kabinin kahvesi.
     Saf siyah değil, sıcak antrasit-kahve. */
  --m-zemin: #14100c;
  --m-metin: #f4ece0;
  --m-soluk: #948877;
  --m-vurgu: #d2b781;

  --yumusak: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Markanın kendi rengi — iki dünyada da aynı. */
  --marka-altin: #c19a55;

  /* dikişin üst ve alt uçtaki yatay yeri — bütün kırpmalar bunu kullanır */
  --dx-ust: calc(var(--dikis) * 100% + var(--egim));
  --dx-alt: calc(var(--dikis) * 100% - var(--egim));
}

* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  margin: 0;
  background: var(--m-zemin);
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  font-size: var(--u);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* --- iki dünya ---------------------------------------------------------- */

.dunya {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  transition: clip-path 0.55s var(--yumusak);
}
.dunya--sifa {
  background: linear-gradient(180deg, #f7f0e2 0%, #f2e9d9 62%, #e9dcc4 100%);
  clip-path: polygon(0 0, var(--dx-ust) 0, var(--dx-alt) 100%, 0 100%);
}
.dunya--murekkep {
  background: linear-gradient(180deg, #1b1510 0%, #14100c 58%, #0a0704 100%);
  clip-path: polygon(var(--dx-ust) 0, 100% 0, 100% 100%, var(--dx-alt) 100%);
}
/* her dünyanın kendi ışığı: şifada yükselen gündoğumu, mürekkepte tek lamba */
.dunya__isik { position: absolute; inset: 0; pointer-events: none; }
.dunya--sifa .dunya__isik { background: radial-gradient(56% 42% at 32% 98%, rgba(0, 0, 0, 0.045), transparent 72%); }
.dunya--murekkep .dunya__isik { background: radial-gradient(50% 38% at 70% 96%, rgba(210, 183, 129, 0.10), transparent 74%); }

/* dikiş çizgisi — iki dünyanın değdiği yer */
.dikis-cizgi {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent 0, transparent 100%);
}

/* --- marka: baykuş + kelime, tek renk, en üstte -------------------------
   Dikişe göre boyanmıyor: logo kendi rengiyle durur, dünyalardan bağımsız.
   Altın hem beyazda hem siyahta okunacak tonda seçildi. */

.marka {
  position: fixed; top: calc(var(--u) * 2); left: 50%; z-index: 12;
  translate: -50% 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.7);
  color: var(--marka-altin);
  animation: markaGel 1.1s var(--yumusak) 0.2s backwards;
}
@keyframes markaGel { from { opacity: 0; translate: -50% -10px } to { opacity: 1; translate: -50% 0 } }

.marka__baykus { position: relative; display: block; width: clamp(76px, 7.4vw, 120px); aspect-ratio: 420 / 437; }
.marka__cember, .marka__goz {
  position: absolute; inset: 0;
  background-color: currentColor;
  -webkit-mask: var(--im) no-repeat center / contain;
  mask: var(--im) no-repeat center / contain;
}
.marka__cember { --im: url(/assets/brand/owl-circle.png); }
/* Gözler kutunun içinde birkaç piksel kayar — bakış imleci takip eder. */
.marka__goz {
  --im: url(/assets/brand/owl-eyes.png);
  translate: calc(var(--gx, 0) * 5px) calc(var(--gy, 0) * 3.5px);
  transition: translate 0.12s linear;
}
.marka__kelime {
  display: block; width: clamp(168px, 16.8vw, 270px); aspect-ratio: 760 / 154;
  background-color: currentColor;
  -webkit-mask: url(/assets/brand/wordmark.png) no-repeat center / contain;
  mask: url(/assets/brand/wordmark.png) no-repeat center / contain;
}

/* --- yer adı: dikişin üstünden geçer, iki kez boyanır ------------------- */

.yer {
  position: fixed; top: calc(var(--u) * 16.4); left: 0; right: 0; z-index: 4;
  margin: 0; text-align: center; pointer-events: none;
  font-size: calc(var(--u) * 0.72);
  letter-spacing: 0.34em; text-transform: uppercase;
  /* İki katman da mutlak konumlu: kabın kendi yüksekliği olmazsa satır
     hiç görünmüyordu. */
  height: 1.5em; line-height: 1.5em;
}
.yer__kat { position: absolute; inset: 0; transition: clip-path 0.55s var(--yumusak); }
.yer__kat--sifa { color: var(--s-soluk); clip-path: polygon(0 0, var(--dx-ust) 0, var(--dx-alt) 100%, 0 100%); }
.yer__kat--murekkep { color: var(--m-soluk); clip-path: polygon(var(--dx-ust) 0, 100% 0, 100% 100%, var(--dx-alt) 100%); }

/* --- bina: dikişin üstünde, iki katman ---------------------------------- */

.bina {
  position: fixed; z-index: 2; pointer-events: none;
  left: 50%; bottom: calc(var(--kunye-h) - 1.5vh);
  width: min(82vw, 70rem);
  /* Görselin ORTA bloğu (baykuş + Bumink Art) 0.525'inde; sayfanın ortasına
     o gelsin diye kaydırılıyor — dikiş baykuşun üstünden geçiyor. */
  translate: -52.5% 0;
  animation: binaGel 1.5s var(--yumusak) 0.15s backwards;
}
.bina__kat { position: relative; transition: clip-path 0.55s var(--yumusak); }
.bina__kat--murekkep { position: absolute; inset: 0; }
.bina__kat img {
  width: 100%;
  /* Zemin şeridi düz kesilmesin: alt kenar sönerek dünyaya karışır. */
  /* Zemin şeridi düz bir kesikle bitiyordu. İki eksenli maske: alt kenar ve
     iki yan sönerek dünyaya karışır, bina kesilmiş fotoğraf gibi durmaz. */
  --mask:
    linear-gradient(180deg, #000 0%, #000 58%, transparent 97%),
    /* Yanlar daha erken sönüyor: uçlardaki ağaçlar iki yandaki metnin
       üstüne biniyordu. Bina büyük kalsın, kenarları dünyaya karışsın. */
    linear-gradient(90deg, transparent 1%, #000 15%, #000 85%, transparent 99%);
  mask-composite: intersect; -webkit-mask-composite: source-in;
  mask-image: var(--mask); -webkit-mask-image: var(--mask);
}
.bina__kat--sifa {
  clip-path: polygon(0 0, var(--dx-ust) 0, var(--dx-alt) 100%, 0 100%);
  /* Şifa yarısı gündüz tarafında: aynı gece render'ı ısınıp açılır. */
  filter: brightness(1.5) saturate(0.92) contrast(0.9);
}
.bina__kat--murekkep {
  clip-path: polygon(var(--dx-ust) 0, 100% 0, 100% 100%, var(--dx-alt) 100%);
  filter: brightness(0.92) contrast(1.06);
}
@keyframes binaGel {
  from { opacity: 0; translate: -52.5% 30px }
  to   { opacity: 1; translate: -52.5% 0 }
}


/* --- kapılar: yarının tamamı -------------------------------------------- */

.kapi { position: fixed; top: 0; bottom: 0; width: 52%; z-index: 5; cursor: pointer; }
.kapi--sifa { left: 0; }
.kapi--murekkep { right: 0; }
.kapi:focus-visible { outline: 2px solid var(--s-eylem); outline-offset: -6px; }

/* --- iki yan ------------------------------------------------------------ */

.yanlar {
  position: fixed; inset: 0 0 var(--kunye-h) 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(1.2rem, 2.6vw, 2.6rem);
  pointer-events: none;
}
.yan {
  display: flex; flex-direction: column; gap: calc(var(--u) * 0.3);
  max-width: 15.5rem;
  animation: yanGel 1s var(--yumusak) 0.5s backwards;
}
.yan--murekkep { align-items: flex-end; text-align: right; }
@keyframes yanGel { from { opacity: 0; translate: 0 14px } to { opacity: 1; translate: 0 0 } }

.yan__no {
  margin: 0 0 calc(var(--u) * 0.6);
  font-size: calc(var(--u) * 0.78); letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums;
}
.yan__ad { margin: 0; line-height: 0; }
/* Ad yazıyla değil, markanın kendi kilidiyle. Maske olarak basılıyor ki
   bulunduğu dünyanın rengini alsın. */
.yan__logo {
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--im) no-repeat left center / contain;
  mask: var(--im) no-repeat left center / contain;
}
.yan__logo {
  /* Yaklaşılan taraf hafifçe büyür — hangi kapının önünde olduğun belli olsun.
     Ölçek maskeyi bozmasın diye `transform` değil `width` üstünden değil,
     transform-origin ile: maske contain olduğu için oran korunuyor. */
  transition: scale 0.45s var(--yumusak), opacity 0.45s var(--yumusak);
}
.yan--sifa .yan__logo { transform-origin: left center; }
.yan--murekkep .yan__logo { transform-origin: right center; }
.yakin-sifa .yan--sifa .yan__logo,
.yakin-murekkep .yan--murekkep .yan__logo { scale: 1.07; }
/* Karşı taraf bir tık geri çekilir: fark daha okunur olur. */
.yakin-sifa .yan--murekkep .yan__logo,
.yakin-murekkep .yan--sifa .yan__logo { opacity: 0.62; }

.yan__logo--sifa {
  --im: url(/assets/brand/logo-healing.png);
  width: clamp(11rem, 17vw, 15.5rem); aspect-ratio: 480 / 203;
}
.yan__logo--murekkep {
  --im: url(/assets/brand/logo-tattoo.png);
  width: clamp(12rem, 19vw, 17rem); aspect-ratio: 834 / 192;
  -webkit-mask-position: right center; mask-position: right center;
}
.yan__is {
  margin: calc(var(--u) * 0.9) 0 calc(var(--u) * 1.2);
  font-size: calc(var(--u) * 0.76); letter-spacing: 0.14em; text-transform: uppercase;
}

.iletisim { display: flex; flex-direction: column; gap: calc(var(--u) * 0.42); }
.iletisim a {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 0.6);
  font-size: calc(var(--u) * 0.84); pointer-events: auto;
  transition: color 0.25s var(--yumusak), translate 0.25s var(--yumusak);
}
.yan--murekkep .iletisim a { flex-direction: row-reverse; }
/* Numarası olmayan satır: bağlantı değil, düz metin — ölü `tel:` verilmiyor. */
.iletisim__bos { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.6); font-size: calc(var(--u) * 0.84); }
.yan--murekkep .iletisim__bos { flex-direction: row-reverse; }
.iletisim a:hover { translate: 3px 0; }
.yan--murekkep .iletisim a:hover { translate: -3px 0; }
.ikon { width: calc(var(--u) * 1.05); height: calc(var(--u) * 1.05); flex: none;
        fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ikon--ok { width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); }


/* renkler: her yan kendi dünyasından */
.yan--sifa { color: var(--s-metin); }
.yan--sifa .yan__no, .yan--sifa .yan__is { color: var(--s-soluk); }
.yan--sifa .yan__ad { color: var(--s-vurgu); }
.yan--sifa .iletisim a { color: var(--s-soluk); }
.yan--sifa .iletisim a:hover { color: var(--s-eylem); }

.yan--murekkep { color: var(--m-metin); }
.yan--murekkep .yan__no, .yan--murekkep .yan__is { color: var(--m-soluk); }
.yan--murekkep .yan__ad { color: var(--m-vurgu); }
.yan--murekkep .iletisim a { color: var(--m-soluk); }
.yan--murekkep .iletisim a:hover { color: var(--m-vurgu); }

/* --- künye: o da dikişten geçer ---------------------------------------- */

.kunye {
  position: fixed; inset: auto 0 0 0; height: var(--kunye-h); z-index: 6;
}
.kunye__kat {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--u) * 2); padding-inline: clamp(1.4rem, 4vw, 4rem);
  transition: clip-path 0.55s var(--yumusak);
}
.kunye__kat--sifa { color: var(--s-soluk); clip-path: polygon(0 0, var(--dx-ust) 0, var(--dx-alt) 100%, 0 100%); }
.kunye__kat--murekkep { color: var(--m-soluk); clip-path: polygon(var(--dx-ust) 0, 100% 0, 100% 100%, var(--dx-alt) 100%); }
.kunye__adres {
  font-size: calc(var(--u) * 0.86); letter-spacing: 0.02em;
  transition: color 0.25s var(--yumusak);
}
.kunye__ig {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 0.55);
  font-size: calc(var(--u) * 0.86); letter-spacing: 0.04em;
  transition: color 0.25s var(--yumusak);
}
.kunye__kat--sifa .kunye__adres:hover, .kunye__kat--sifa .kunye__ig:hover { color: var(--s-eylem); }
/* İki renkli katman yalnız boyama: `clip-path` vuruş testini de kırptığı için
   dikişin öbür yanına düşen bağlantı tıklanamıyordu. Gerçek bağlantılar
   kırpılmayan, görünmez üçüncü katmanda duruyor. */
.kunye__kat--sifa, .kunye__kat--murekkep { pointer-events: none; }
.kunye__tik { clip-path: none; color: transparent; }
.kunye__tik .ikon { visibility: hidden; }
.kunye__tik a { pointer-events: auto; }
/* Odak halkası görünür kalsın: klavyeyle gezen kaybolmasın. */
.kunye__tik a:focus-visible { outline: 2px solid var(--marka-altin); outline-offset: 3px; border-radius: 3px; }

/* --- kapıdan geçiş: seçilen dünya ekranı tamamen kaplar ---------------- */

.ortu {
  position: fixed; inset: 0; z-index: 20; pointer-events: none;
  opacity: 0; transition: opacity 0.5s var(--yumusak) 0.42s;
}
.ortu--sifa { background: #f2e9d9; }
.ortu--murekkep { background: #0a0503; }
.giriliyor--sifa .ortu--sifa,
.giriliyor--murekkep .ortu--murekkep { opacity: 1; }

/* Önce seçilen dünya bütün ekranı yer (dikiş sonuna kadar sürülür), yazılar
   söner, en sonda örtü kapanıp devri tamamlar. Sıra önemli: örtü erken
   kapanırsa büyüme hiç görünmüyor. */
.giriliyor .yanlar, .giriliyor .yer, .giriliyor .kunye, .giriliyor .marka {
  opacity: 0; transition: opacity 0.34s var(--yumusak);
}
.giriliyor .bina { opacity: 0; scale: 1.06; transition: opacity 0.62s var(--yumusak) 0.1s, scale 0.8s var(--yumusak); }
.giriliyor--sifa { --dikis: 1.6; }
.giriliyor--murekkep { --dikis: -0.6; }
.giriliyor .dunya, .giriliyor .bina__kat, .giriliyor .kunye__kat, .giriliyor .yer__kat {
  transition: clip-path 0.72s var(--yumusak);
}

/* --- JS yoksa: hover kabaca aynı işi görür ------------------------------ */

:root:not(.js) body:has(.kapi--sifa:hover) { --dikis: 0.62; }
:root:not(.js) body:has(.kapi--murekkep:hover) { --dikis: 0.38; }

/* --- telefon ------------------------------------------------------------ */

@media (max-width: 860px) {
  /* MOBİLDE DE AYNI SAHNE. Önceden akışa dökülüyordu ve site bambaşka bir
     yer gibi duruyordu; artık aynı bölünmüş dünya, aynı bina, aynı marka —
     yalnız ölçüler küçülüyor ve iletişim satırları ikona iniyor. */
  :root { --u: clamp(0.72rem, 0.56rem + 1.1vw, 0.92rem); --egim: 3.4vw; --kunye-h: calc(var(--u) * 4.6); }

  .marka { top: calc(var(--u) * 1.6); }
  .marka__baykus { width: clamp(52px, 15vw, 72px); }
  .marka__kelime { width: clamp(116px, 34vw, 158px); }
  .yer { top: calc(var(--u) * 13.5); font-size: calc(var(--u) * 0.66); letter-spacing: 0.24em; }

  /* Bina dikeyde kısa ekrana sığsın: genişlik değil YÜKSEKLİK sınırlanıyor. */
  /* 150vw'de bina solda 91px sağda 63px taşıyor, çerçeveye oturmamış gibi
     duruyordu. Daha dar: taşma iki yanda da küçük ve dengeli. */
  .bina { width: min(114vw, 34rem); bottom: calc(var(--kunye-h) + 10svh); }

  /* İki yan alt köşelere: ortada bina var, metin onunla yarışmıyor. */
  .yanlar { align-items: flex-end; padding: 0 var(--u) calc(var(--u) * 1.4); }
  .yan { max-width: 42vw; gap: calc(var(--u) * 0.2); }
  .yan__no { margin-bottom: calc(var(--u) * 0.3); font-size: calc(var(--u) * 0.66); }
  .yan__logo--sifa { width: min(38vw, 9.5rem); }
  .yan__logo--murekkep { width: min(40vw, 10.5rem); }
  .yan__is { margin: calc(var(--u) * 0.6) 0 calc(var(--u) * 0.7); font-size: calc(var(--u) * 0.62); letter-spacing: 0.1em; }

  /* İletişim satırları ikona iner: telefon zaten yok, iki ikon yeter. */
  .iletisim { flex-direction: row; gap: calc(var(--u) * 0.9); }
  .yan--murekkep .iletisim { justify-content: flex-end; }
  .iletisim a span, .iletisim__bos { display: none; }
  .iletisim a { padding: calc(var(--u) * 0.3); }
  .ikon { width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); }

  /* İki katman BİREBİR aynı hizada olmalı: farklı hizalarsan dikişin
     geçtiği yerde iki kopya üst üste görünüp metin çiftleniyor. */
  .kunye__kat { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--u); padding-inline: var(--u); }
  .kunye__adres, .kunye__ig { font-size: calc(var(--u) * 0.7); }
  .kunye__ig .ikon { width: calc(var(--u) * 0.95); height: calc(var(--u) * 0.95); }
}

/* Çok dar ve alçak ekranlarda bina daha da geri çekilir. */
@media (max-width: 400px) {
  .bina { width: min(126vw, 30rem); bottom: calc(var(--kunye-h) + 13svh); }
  .yan__is { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}