/* ============================================================
   Websiteks atolye-demo — HAREKET / WOW KATMANI  (Websiteks · R3 cila)
   GSAP + ScrollTrigger + Lenis hareket katmanının başlangıç durumları.
   R3 PERF: tek-seferlik reveal/stagger/hero öğelerinde will-change KALICI değil
   (JS animasyon anında ekler, bitince temizler) → boşta onlarca katman tutulmaz.
   ----------------------------------------------------------------
   SÖZLEŞME: bu dosya yalnız 1'in kancalarını giydirir, markup'ı DEĞİŞTİRMEZ.
   Kancalar: .hero-title · [data-reveal] · [data-stagger] · [data-parallax] · .magnetic
   ----------------------------------------------------------------
   KIRILMAZLIK İLKESİ:
   - Gizli başlangıç durumları YALNIZCA  html.hrk-on  (JS çalışıyor) altında.
     JS yoksa / çökerse hiçbir şey gizlenmez → içerik her zaman görünür.
   - html.hrk-azalt  (reduced-motion · ?kanit · hata)  her şeyi anında gösterir.
   ============================================================ */

/* ---- R2 token: Apple §9 "yay" easing (easeOutBack — premium overshoot).
   Literal §9 değeri 2.16 çok zıplak; canlı mıknatıs-takip için 1.56'ya kalibre
   edildi (takip sıkı kalır, bırakışta yaylanır). Namespace'li (--hrk-) → 1'in
   token'larıyla çakışmaz. ---- */
:root { --hrk-yay: cubic-bezier(.34, 1.56, .64, 1); }

/* ---- 0. Erişim/tercih: hareketi azalt → tüm gizlemeleri iptal et ---- */
@media (prefers-reduced-motion: reduce) {
  html.hrk-on [data-reveal],
  html.hrk-on [data-stagger] > *,
  html.hrk-on .hero-title .hrk-harf { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ============================================================
   1. SCROLL-REVEAL  ([data-reveal])  + STAGGER ([data-stagger] çocukları)
   ============================================================ */
html.hrk-on:not(.hrk-azalt) [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  /* R3: will-change KALICI değil — JS reveal anında ekler, bitince temizler. */
}
/* Yön çeşitleri — markup'ta data-reveal="left|right|scale" (varsayılan: up) */
html.hrk-on:not(.hrk-azalt) [data-reveal="left"]  { transform: translateX(-42px); }
html.hrk-on:not(.hrk-azalt) [data-reveal="right"] { transform: translateX(42px); }
html.hrk-on:not(.hrk-azalt) [data-reveal="scale"] { transform: translateY(22px) scale(.94); }

/* Stagger grubunun çocukları (data-reveal taşımıyorsa direkt çocuklar) */
html.hrk-on:not(.hrk-azalt) [data-stagger] > * {
  opacity: 0;
  transform: translateY(26px);
  /* R3: will-change KALICI değil — JS stagger anında ekler, bitince temizler. */
}
/* Grup data-reveal çocuk içeriyorsa, çift gizlemeyi önle: reveal kuralı yeter */
html.hrk-on:not(.hrk-azalt) [data-stagger] > [data-reveal] { transform: translateY(34px); }

/* JS bittiğinde / azalt modunda kesin görünürlük (inline gsap.set'i de ezer) */
html.hrk-azalt [data-reveal],
html.hrk-azalt [data-stagger] > * { opacity: 1 !important; transform: none !important; }

/* ============================================================
   2. HERO — KİNETİK TİPOGRAFİ  (.hero-title)
   1'in markup'ı: .hero-title > .satir > span (metin). JS, span içini
   .hrk-harf'lere böler; satır maskesi harfleri alttan getirir.
   ============================================================ */
html.hrk-on .hero-title .satir > span {
  display: inline-block;
  overflow: hidden;
  /* iniş çıkıntıları (ç ş ğ y) maske içinde kırpılmasın */
  padding: .18em .05em;
  margin: -.18em -.05em;
}
html.hrk-on:not(.hrk-azalt) .hero-title .hrk-harf {
  display: inline-block;
  transform: translateY(112%);
  /* R3: will-change'i heroOynat() yalnız oynarken ekler, bitince temizler. */
}
html.hrk-on:not(.hrk-azalt) .hero-title { filter: blur(6px); }
html.hrk-azalt .hero-title { filter: none !important; }
html.hrk-azalt .hero-title .hrk-harf { transform: none !important; }

/* ============================================================
   3. PARALLAX  ([data-parallax])  — derinlik katmanı
   1'in arka-plan katmanları (.hero__bg / .surec__bg). GSAP scrub sürer;
   ölçek GSAP tarafından sabit tutulur (kenar boşluğu oluşmasın).
   ============================================================ */
html.hrk-on:not(.hrk-azalt) [data-parallax] { will-change: transform; }
/* KİOSK ATTRACT SÖZLEŞMESİ (fabrika 5): boştayken ağır parallax DURUR */
html[data-attract="1"] [data-parallax] { transform: none !important; }

/* ============================================================
   4. MIKNATIS BUTON  (.magnetic)  + ÖZEL CURSOR
   ============================================================ */
html.hrk-on .magnetic,
html.hrk-on [data-magnetic] {
  will-change: transform;
  /* §9 yay settle: takipte sıkı, bırakışta hafif overshoot */
  transition: transform .4s var(--hrk-yay);
}

/* Özel cursor (yalnız ince işaretçi · dokunmatik değil — JS açar) */
html.hrk-cursor-acik,
html.hrk-cursor-acik a,
html.hrk-cursor-acik button,
html.hrk-cursor-acik .magnetic,
html.hrk-cursor-acik label[for],
html.hrk-cursor-acik [data-cursor] { cursor: none; }

.hrk-cursor-halka,
.hrk-cursor-nokta {
  position: fixed; top: 0; left: 0; z-index: 9999;
  pointer-events: none; border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;       /* her zemin üstünde okunur */
}
.hrk-cursor-halka {
  width: 38px; height: 38px;
  border: 1.5px solid rgba(255,255,255,.85);
  margin: -19px 0 0 -19px;
  transition: width .28s ease, height .28s ease, margin .28s ease,
              background-color .28s ease, border-color .28s ease, opacity .3s ease;
}
.hrk-cursor-nokta {
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  background: #fff;
}
.hrk-cursor-halka.buyu {            /* etkileşimli eleman üstünde büyür */
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.5);
}
.hrk-cursor-halka.bas { width: 30px; height: 30px; margin: -15px 0 0 -15px; }

/* dokunmatik / kaba-işaretçi / dar ekran → özel cursor YOK (R6: mobilde gereksiz daire).
   magnetikKur dokunmatik'te zaten erken döner; bu, JS işaretçiyi yanlışlıkla "ince"
   sandığı dar-viewport durumunda (ör. mobil-genişlik ekran görüntüsü) daireyi kesin
   gizleyen CSS güvencesidir. cursor:auto ile native işaretçi geri gelir → "görünmez
   cursor" tuzağı yok. Yalnız hrk-cursor-acik (JS açtıysa) varken cursor sıfırlanır. */
@media (hover: none), (pointer: coarse), (max-width: 760px) {
  .hrk-cursor-halka, .hrk-cursor-nokta { display: none !important; }
  html.hrk-cursor-acik, html.hrk-cursor-acik * { cursor: auto !important; }
}

/* ============================================================
   5. KEYNOTE / DARK SHOWROOM ÇERÇEVESİ  (R2 — sinematik dim/spot)
   #vitrin'e girince "ışıklar kısılır": tiyatro vinyeti sayfa kenarlarını
   karartır, ŞEFFAF çekirdeği soketi (.vitrin__sahne) takip eder → spot ışık.
   • z-index:5 → içeriğin (z:2) ÜSTÜNDE karartır AMA başlık (z:60) üstte kalır.
   • pointer-events:none + şeffaf çekirdek → soketin drag/zoom kontrolü bozulmaz.
   • opacity'yi GSAP scrub sürer (CSS transition YOK → rampada lag/çift-yumuşatma olmaz).
   • Çekirdek geniş ve eliptik: hem soket hem yan bilgi metni AYDINLIK kalır;
     yalnız üst/alt (komşu sıcak bölümler) kararır.
   --hrk-kx/--hrk-ky: JS sahne-merkezini yazar (varsayılan 50%/50%).
   ============================================================ */
.hrk-keynote-vinyet {
  position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  will-change: opacity;
  background:
    radial-gradient(118% 80% at var(--hrk-kx, 50%) var(--hrk-ky, 50%),
      transparent 48%, rgba(8,7,5,.42) 78%, rgba(6,5,4,.72) 100%);
}

/* ============================================================
   6. İLERLEME ÇUBUĞU  (R2) — ince üst şerit; dolgu scaleX'i JS scrub sürer.
   Enjekte overlay (pointer-events:none). Başlığın (z:60) üstünde (z:70) ince çizgi.
   ============================================================ */
.hrk-ilerleme {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70;
  pointer-events: none; background: transparent;
  transition: opacity .4s ease;
}
.hrk-ilerleme > i {
  display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--mese, #b07c5e), var(--terra, #bc6a4b) 60%, var(--soket-aksan, #c9a24b));
  box-shadow: 0 0 8px -1px rgba(176,124,74,.5);
}
/* attract: kiosk kendi arayüzünü sürer → çubuk görünmez */
html[data-attract="1"] .hrk-ilerleme { opacity: 0; }

/* ============================================================
   7. SCROLL-SPY localnav  (R2) — 1'in nav linkine .hrk-aktif (markup değişmeden).
   Görünür bölümün linki vurgulanır. 1'in MEVCUT mekanizmasını yeniden kullanır
   (`.nav__liste a::after` --mese alt-çizgisi + --komur renk) → hover ile birebir
   tutarlı, ÇİFT çizgi/çakışma yok (kendi underline'ımı icat etmiyorum).
   ============================================================ */
html.hrk-on .nav__liste a.hrk-aktif { color: var(--komur, #1d1b18); }
html.hrk-on .nav__liste a.hrk-aktif::after { width: 100%; }

/* ============================================================
   8. GENEL — akıcı kaydırma kökü (Lenis aktifken JS ekler)
   ============================================================ */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* reduced-motion: hiçbir koşulda gizli kalma (son emniyet) */
@media (prefers-reduced-motion: reduce) {
  .hrk-cursor-halka, .hrk-cursor-nokta { display: none !important; }
  html.hrk-cursor-acik, html.hrk-cursor-acik * { cursor: auto !important; }
  /* keynote vinyeti + ilerleme çubuğu JS'te hiç oluşturulmaz; yine de garanti gizle */
  .hrk-keynote-vinyet, .hrk-ilerleme { display: none !important; }
}

/* ============================================================
   9. BRUTALİST ATÖLYE override (VARYASYON · Websiteks)
   Bu varyasyonun tarzına uyarlama — kancalar/JS davranışı AYNI, yalnız görünüm.
   En sonda → eşit özgüllükte kazanır. Kaynak değişkenler site.css :root'tan.
   ============================================================ */

/* (a) özel cursor: yuvarlak halka → KESKİN KARE (brutalist). difference-blend korunur. */
.hrk-cursor-halka, .hrk-cursor-nokta { border-radius: 0; }
.hrk-cursor-halka.buyu { border-radius: 0; }

/* (b) ilerleme çubuğu: sıcak gradyan (tanımsız değişkenler) → düz elektrik turuncu blok. */
.hrk-ilerleme > i {
  background: var(--aksan, #ff4101);
  box-shadow: 0 0 0 0 transparent;   /* brutalist: yumuşak parıltı yok */
}

/* (c) scroll-spy aktif link: sıcak --komur yerine bu varyasyonun aksan rengi. */
html.hrk-on .nav__liste a.hrk-aktif { color: var(--aksan-koyu, #d83400); }

/* (d) KEYNOTE DİM KAPALI: yumuşak radyal vinyet anti-brutalist; #vitrin zaten
   sert "ters/siyah" blok. Sahne giriş transform'u (tek-seferlik) JS'te kalır,
   yalnız dim overlay'i gizlenir → düz, sert showroom geçişi. */
.hrk-keynote-vinyet { display: none !important; }