/* ============================================================
   SC MERMER — MOTION LAYER
   ------------------------------------------------------------
   Harici kütüphane YOK. Eskiden GSAP + ScrollTrigger + Lenis
   CDN'den yükleniyordu: ~150 KB, üç ek bağlantı ve CDN
   engellenirse sessizce ölen bir katman. Artık her şey CSS ile,
   mümkün olduğunca compositor üzerinde çalışıyor.

   Yöntem:
     • Modern tarayıcı  → CSS scroll-driven animations
                          (animation-timeline: scroll() / view())
     • Eski tarayıcı    → motion.js'teki IntersectionObserver yedeği
                          aynı sınıfları ekler
     • Reduced motion   → hepsi kapanır, içerik tam görünür kalır

   styles.css ve script.js'e dokunmaz, yalnızca üstlerine katman ekler.
   ============================================================ */

/* ============================================================
   0. SAYFA GEÇİŞLERİ (View Transitions)
   Aynı origin'deki sayfalar arasında native, uygulama hissi veren
   geçiş. Desteklemeyen tarayıcı normal şekilde gezinir.
   ============================================================ */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: scFadeOut .26s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: scRise .42s cubic-bezier(.16,1,.3,1) both; }

/* Header ve WhatsApp butonu geçiş boyunca yerinde kalsın:
   sayfa değil, yalnızca içerik değişiyormuş hissi verir. */
.nav      { view-transition-name: sc-header; }
.wa-float { view-transition-name: sc-wa; }

@keyframes scFadeOut { to { opacity: 0; } }
@keyframes scRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   1. ALTIN DAMAR — okuma ilerlemesi
   Tamamen CSS: scroll(root) zaman çizelgesiyle sürülür.
   ============================================================ */
.sc-vein {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 1100;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(208,169,79,.14), rgba(208,169,79,.05));
}
.sc-vein__fill {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--sc-p, 0));   /* JS yedeği bu değişkeni yazar */
  background: linear-gradient(90deg, #B8923A, #F6E3AC 38%, #D0A94F 62%, #EDD592);
  box-shadow: 0 0 12px rgba(208,169,79,.55);
}
@supports (animation-timeline: scroll()) {
  .sc-vein__fill {
    animation: scVeinGrow linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes scVeinGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ============================================================
   2. TAŞ İSİMLERİ ŞERİDİ (marquee)
   ============================================================ */
.sc-marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid rgba(208,169,79,.18);
  background:
    radial-gradient(80% 120% at 50% 50%, rgba(208,169,79,.07), transparent 70%),
    #121016;
  padding: .9rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.sc-marquee__track {
  display: flex;
  width: max-content;
  animation: scMarquee 46s linear infinite;
}
.sc-marquee:hover .sc-marquee__track { animation-play-state: paused; }
.sc-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  padding: 0 1.6rem;
  font-family: 'Jost', sans-serif;
  font-size: .78rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(239,235,225,.7);
  white-space: nowrap;
}
.sc-marquee__item b {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: none;
  font-size: 1.05rem;
  background: linear-gradient(135deg, #B8923A, #F6E3AC 45%, #D0A94F);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.sc-marquee__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #D0A94F;
  box-shadow: 0 0 10px rgba(208,169,79,.55);
}
@keyframes scMarquee { to { transform: translate3d(-50%, 0, 0); } }

/* ============================================================
   3. PLAKA AÇILIMI (slab reveal)
   Taş plakası kesilip yerine oturuyormuş hissi.
   ============================================================ */
@supports (animation-timeline: view()) {
  .sc-slab__media {
    animation: scSlabIn linear both;
    animation-timeline: view();
    animation-range: entry 6% cover 32%;
  }
  .g-item.sc-slab img {
    animation: scSlabSoft linear both;
    animation-timeline: view();
    animation-range: entry 2% cover 26%;
  }
}
@supports not (animation-timeline: view()) {
  .sc-slab__media,
  .g-item.sc-slab img {
    clip-path: inset(14%);
    transform: scale(1.1);
    filter: brightness(.9);
    transition: clip-path 1.1s cubic-bezier(.16,1,.3,1),
                transform 1.25s cubic-bezier(.16,1,.3,1),
                filter .8s ease;
  }
  .sc-slab.is-in .sc-slab__media,
  .g-item.sc-slab.is-in img {
    clip-path: inset(0%);
    transform: scale(1);
    filter: none;
  }
}
@keyframes scSlabIn {
  from { clip-path: inset(14%); transform: scale(1.1); filter: brightness(.88) saturate(.92); }
  to   { clip-path: inset(0%);  transform: scale(1);   filter: none; }
}
@keyframes scSlabSoft {
  from { clip-path: inset(16% 9%); transform: scale(1.12); filter: brightness(.9); }
  to   { clip-path: inset(0%);     transform: scale(1);    filter: none; }
}

/* ============================================================
   4. CİLA PARLAMASI — galeri hover
   ============================================================ */
.g-item::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255,244,210,.22) 48%, transparent 64%);
  transform: translateX(-130%) skewX(-16deg);
}
@media (hover: hover) {
  .g-item:hover::after { animation: scPolish 1s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes scPolish {
  from { opacity: 1; transform: translateX(-130%) skewX(-16deg); }
  to   { opacity: 0; transform: translateX(130%)  skewX(-16deg); }
}

/* ============================================================
   5. 3B EĞİM (tilt) — kategori kartları
   motion.js yalnızca --rx / --ry yazar; böylece kartın kendi
   hover yükselmesiyle çakışmaz.
   ============================================================ */
.sc-tilt {
  transform:
    perspective(900px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translateY(var(--ty, 0px));
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s, border-color .5s;
  transform-style: preserve-3d;
}
.sc-tilt:hover { --ty: -6px; }
.sc-tilt.is-tilting { transition: transform .12s linear, box-shadow .5s, border-color .5s; }
.sc-tilt .cat__body { transform: translateZ(20px); }
.sc-tilt:hover .cat__img { transform: scale(1.05) translateZ(22px); }

/* ============================================================
   6. MIKNATIS BUTONLAR
   Kendi hover dönüşümünü ezmemek için değişkenle birleşir.
   ============================================================ */
.sc-magnetic { --mx: 0px; --my: 0px; }
.btn.sc-magnetic,
.nav__cta.sc-magnetic       { transform: translate(var(--mx), var(--my)); }
.btn--gold.sc-magnetic:hover{ transform: translate(var(--mx), calc(var(--my) - 3px)); }
.wa-float.sc-magnetic       { transform: translate(var(--mx), var(--my)); }
.wa-float.sc-magnetic:hover { transform: translate(var(--mx), var(--my)) scale(1.1); }
.sc-magnetic.is-pulling     { transition: transform .1s linear; }
.btn--gold.sc-magnetic:hover {
  box-shadow: 0 18px 40px -12px rgba(201,162,75,.75),
              0 0 40px -8px rgba(246,227,172,.45);
}

/* ============================================================
   7. İMLEÇ HALKASI (yalnızca fare kullananlarda)
   Sistem imleci GİZLENMEZ — gizlemek kullanılabilirliği bozar.
   Bu yalnızca üzerine eklenen ince bir altın halka.
   ============================================================ */
.sc-ring {
  position: fixed;
  top: 0; left: 0;
  width: 32px; height: 32px;
  margin: -16px 0 0 -16px;
  border: 1px solid rgba(208,169,79,.55);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1400;
  opacity: 0;
  transform: translate3d(var(--cx, -120px), var(--cy, -120px), 0);
  transition: opacity .3s ease, width .3s cubic-bezier(.16,1,.3,1),
              height .3s cubic-bezier(.16,1,.3,1), margin .3s cubic-bezier(.16,1,.3,1),
              border-color .3s ease, background-color .3s ease;
  will-change: transform;
}
.sc-ring.is-on { opacity: 1; }
.sc-ring.is-hot {
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-color: rgba(237,213,146,.9);
  background: rgba(208,169,79,.10);
}

/* ============================================================
   8. BÖLÜM NUMARALARI (filigran)
   ============================================================ */
.section[data-sc-num] { position: relative; }
.section[data-sc-num]::after {
  content: attr(data-sc-num);
  position: absolute;
  top: 1.2rem;
  right: clamp(1rem, 4vw, 2.4rem);
  font-family: 'Playfair Display', serif;
  font-size: clamp(3.2rem, 8vw, 6.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(208,169,79,.14);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
@supports (animation-timeline: view()) {
  .section[data-sc-num]::after {
    animation: scNumIn linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 65%;
  }
}
@supports not (animation-timeline: view()) {
  .section[data-sc-num]::after {
    opacity: 0; transform: translateY(24px);
    transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
  }
  .section[data-sc-num].is-num-in::after { opacity: 1; transform: none; }
}
@keyframes scNumIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   9. HERO — damar dokusu, parallax ve giriş
   ============================================================ */
.sc-grain {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .22;
  overflow: hidden;
  mix-blend-mode: soft-light;
}
.sc-grain svg {
  position: absolute; top: -20%; left: -20%;
  width: 140%; height: 140%;
  animation: scGrainDrift 32s ease-in-out infinite alternate;
}
@keyframes scGrainDrift { to { transform: translate3d(-4%, 3%, 0) rotate(1.5deg); } }

/* Parallax: scroll timeline ile, JS'siz.
   styles.css'teki sonsuz heroZoom animasyonunun yerini alır. */
/* ÖNEMLİ — aralık "exit" olmalı, "cover" değil.
   Hero sayfanın en üstünde ve ekranı kaplıyor; "cover" aralığı daha
   sayfa açılırken %50 ilerlemiş sayılıyordu. Sonuç: kullanıcı hiç
   kaydırmadan başlık ~%54 opaklıkta, yani soluk açılıyordu.
   "exit" aralığı ise tam kaydırma 0'da başlar: hero ekranı terk
   etmeye başlayana kadar hiçbir şey olmaz.                        */
@supports (animation-timeline: view()) {
  body.sc-motion-on .hero__video {
    animation: scHeroVideo linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }
  body.sc-motion-on .hero__content {
    animation: scHeroContent linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 90%;
  }
}
@keyframes scHeroVideo {
  from { transform: scale(1.02); }
  to   { transform: scale(1.14) translate3d(0, 46px, 0); }
}
@keyframes scHeroContent {
  from { transform: none; opacity: 1; }
  to   { transform: translate3d(0, 78px, 0); opacity: .18; }
}

/* Hero girişi: preloader bitene kadar bekle, sonra kademeli aç */
body.sc-motion-on .hero__content .reveal { opacity: 0; transform: translateY(26px); }
body.sc-entered .hero__content .reveal {
  opacity: 1;
  transform: none;
  transition: opacity .9s cubic-bezier(.16,1,.3,1) var(--d, 0s),
              transform .9s cubic-bezier(.16,1,.3,1) var(--d, 0s);
}

/* Başlık satır satır maskeden yükselir.
   (Karakter karakter bölmek .gold-text gradyanını parçalıyordu.) */
.sc-line {
  display: block;
  overflow: hidden;
  /* Alt uzantılar (ğ, ş, y) maskeye takılmasın */
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.sc-line__in { display: block; }
/* Başlangıçtaki gizleme yalnızca motion açıkken uygulanır. */
body.sc-motion-on .sc-line__in { transform: translateY(105%); }
/* Son durum güvenli: animasyon hiç çalışmasa bile başlık görünür kalır.
   Hareketi animasyon verir (fill-mode: both). */
body.sc-entered .sc-line__in {
  transform: none;
  animation: scLineUp .95s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--i, 0) * 95ms + 160ms);
}
@keyframes scLineUp {
  from { transform: translateY(105%); }
  to   { transform: none; }
}

/* will-change yalnızca etkileşim anında — kalıcı GPU katmanı bırakmaz */
.sc-tilt:hover, .sc-magnetic:hover { will-change: transform; }

/* ============================================================
   10. ERİŞİLEBİLİRLİK / DÜŞÜK GÜÇ
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }

  .sc-marquee__track,
  .sc-grain svg { animation: none !important; }

  .sc-line { overflow: visible; padding-bottom: 0; margin-bottom: 0; }
  .sc-line__in { transform: none !important; animation: none !important; }

  .sc-slab__media,
  .g-item.sc-slab img,
  body.sc-motion-on .hero__video,
  body.sc-motion-on .hero__content,
  .section[data-sc-num]::after {
    animation: none !important;
    clip-path: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  .sc-ring { display: none !important; }
  body.sc-motion-on .hero__content .reveal { opacity: 1; transform: none; }
  .g-item:hover::after { animation: none; }
}

/* Küçük ekranlar: ağır süslemeleri kapat */
@media (max-width: 900px) {
  .sc-ring { display: none; }
  .section[data-sc-num]::after { font-size: 3rem; opacity: .5; }
  .sc-grain { opacity: .15; }
  .sc-tilt { transform: none; }          /* dokunmatikte eğim anlamsız */
  .sc-marquee__item { font-size: .72rem; letter-spacing: .2em; }
}