/* ALBA — 3D katman (webgl3d.js ile birlikte) */

/* body'nin overflow-x:hidden'ı sticky'yi bozuyor → clip (kaydırma kabı oluşturmaz) */
body:not(.menu-open) { overflow-x: clip; overflow-y: visible; }

/* ---------- Hero WebGL sahnesi ---------- */
.has-3d .hero {
  background:
    radial-gradient(60% 70% at 72% 45%, #4a2a6a 0%, #2a1a35 45%, #1b1222 100%);
  isolation: isolate;
}
.has-3d .hero picture { display: none; }
.hero-3d {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.has-3d .hero-overlay {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, #1b1222cc 0%, #1b122266 38%, transparent 62%),
    linear-gradient(0deg, #1b1222b3 0%, transparent 30%);
}
.has-3d .hero-copy,
.has-3d .scroll-cue { z-index: 2; }

@media (max-width: 759px) {
  .has-3d .hero {
    background: radial-gradient(90% 60% at 50% 72%, #4a2a6a 0%, #2a1a35 55%, #1b1222 100%);
  }
  .has-3d .hero-overlay {
    background: linear-gradient(180deg, #1b1222e6 0%, #1b122299 42%, transparent 70%);
  }
  .has-3d .hero { place-items: start start; }
}

/* Hero metni scroll ile derinliğe çekilir */
.has-depth .hero-copy {
  --d3-hero: 0;
  opacity: calc(1 - var(--d3-hero) * 1.35);
  translate: 0 calc(var(--d3-hero) * -90px);
  scale: calc(1 - var(--d3-hero) * .06);
}

/* ---------- Scroll'a bağlı 3D paneller ---------- */
.has-depth .showroom-gallery,
.has-depth .cafe-section,
.has-depth .about,
.has-depth .store-tour-stage,
.has-depth .catalog-grid,
.has-depth .cafe-gallery,
.has-depth .review-grid {
  perspective: 1400px;
}

.has-depth :is(.showroom-photo, .cafe-hero, .about-photo, .store-tour-card, .catalog-card, .cafe-photo, .review-card) {
  rotate: x var(--d3-rx, 0deg);
  translate: 0 0 var(--d3-z, 0px);
  transform-origin: 50% 50%;
  will-change: rotate, translate;
}

/* Fotoğraflar kendi çerçevesinde parallax */
.has-depth :is(.showroom-photo, .cafe-hero, .about-photo, .cafe-photo) { overflow: hidden; }
.has-depth :is(.showroom-photo img, .cafe-hero > img, .about-photo img, .cafe-photo img) {
  scale: 1.16;
  translate: 0 var(--d3-py, 0%);
  will-change: translate;
}

/* Başlıklar aşağıdan 3D olarak doğrulur */
.has-depth :is(.section-heading, .testimonials-heading) > div,
.has-depth .about-copy,
.has-depth .footer-main > div:first-child {
  perspective: 900px;
}
.has-depth :is(.section-heading h2, .testimonials-heading h2, .about-copy h2, footer h2) {
  rotate: x var(--d3-hx, 0deg);
  translate: 0 var(--d3-hy, 0px);
  transform-origin: 50% 100%;
}

/* Reveal: düz kayma yerine 3D açılış (tilt kartları hariç) */
.has-depth .reveal:not(.tilt-card):not(.hero-copy):not(.is-visible) {
  transform: perspective(1200px) translateY(60px) rotateX(16deg);
  transform-origin: 50% 0%;
}

/* ---------- Özel imleç ---------- */
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid #a7eedc;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: difference;
  transition: width .3s cubic-bezier(.2,.7,.2,1), height .3s cubic-bezier(.2,.7,.2,1), margin .3s cubic-bezier(.2,.7,.2,1), background-color .3s, opacity .3s;
}
.cursor-ring.is-active {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  background: #a7eedc;
}
.cursor-ring.is-hero {
  width: 90px;
  height: 90px;
  margin: -45px 0 0 -45px;
  border-color: #ffffff80;
}
.cursor-ring.is-down { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.cursor-ring.is-hidden { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .cursor-ring { display: none; }
}

/* ================================================= Preloader (Lusion) */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: #0c0810;
  color: #f5f0e6;
  transition: clip-path 1s cubic-bezier(.76,0,.24,1), visibility 0s linear 1s;
  clip-path: inset(0 0 0 0);
}
.preloader-logo { width: 54px; height: 54px; border-radius: 50%; animation: preloaderPulse 1.4s ease-in-out infinite; }
.preloader-count {
  position: absolute;
  left: max(4vw, 20px);
  bottom: 18px;
  font-size: clamp(4rem, 12vw, 10rem);
  font-weight: 300;
  line-height: .8;
  letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
}
.preloader-label {
  position: absolute;
  right: max(4vw, 20px);
  bottom: 28px;
  font-size: .62rem;
  letter-spacing: .24em;
  color: #ffffff80;
}
html:not(.is-loading) .preloader { clip-path: inset(0 0 100% 0); visibility: hidden; pointer-events: none; }
html.is-loading body { overflow: hidden; }
@keyframes preloaderPulse { 50% { transform: scale(.86); opacity: .7; } }

/* Hero metni preloader sonrası yukarı kayarak gelir */
html.is-loading .hero-copy > * { opacity: 0; transform: translateY(40px); }
.hero-copy > * { transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.hero-copy > :nth-child(2) { transition-delay: .08s; }
.hero-copy > :nth-child(3) { transition-delay: .16s; }
.hero-copy > :nth-child(4) { transition-delay: .24s; }

/* ======================================= Parçacık sinematiği (Lusion About) */
.manifesto {
  position: relative;
  height: 420vh;
  background: radial-gradient(80% 60% at 50% 30%, #2a1838 0%, #120b17 55%, #0a070d 100%);
  color: #f5f0e6;
}
.manifesto-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.manifesto-stage, .manifesto-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.manifesto-marks {
  position: absolute;
  left: max(4vw, 20px);
  right: max(4vw, 20px);
  top: 50%;
  display: flex;
  justify-content: space-between;
  color: #ffffff59;
  font-size: 1.1rem;
  font-weight: 300;
  pointer-events: none;
}
.manifesto-marks i { font-style: normal; }
.manifesto-progress {
  position: absolute;
  left: max(4vw, 20px);
  right: max(4vw, 20px);
  top: 112px;
  height: 1px;
  background: #ffffff1f;
}
.manifesto-progress span {
  display: block;
  height: 100%;
  background: #a7eedc;
  transform: scaleX(0);
  transform-origin: left;
}
.manifesto-cap {
  position: absolute;
  left: max(4vw, 20px);
  right: max(4vw, 20px);
  bottom: max(4vh, 24px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  pointer-events: none;
}
.manifesto-cap p { margin: 0; font-size: clamp(1.25rem, 2.6vw, 2.4rem); line-height: 1.05; letter-spacing: -.02em; font-weight: 400; }
.manifesto-cap em { font-family: Georgia, "Times New Roman", serif; font-style: italic; color: #a7eedc; }
.manifesto-cap .cap-right { text-align: right; }
.manifesto-giant {
  font-size: clamp(6rem, 27vw, 26rem) !important;
  line-height: .74 !important;
  font-weight: 500 !important;
  letter-spacing: -.07em !important;
  margin-left: -.04em !important;
}
.manifesto-hint { font-size: .66rem; letter-spacing: .24em; color: #ffffffb3; white-space: nowrap; }

.manifesto.is-live .manifesto-cap > * {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .6s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.manifesto.is-live .manifesto-cap.is-on > * { opacity: 1; transform: none; }
.manifesto.is-live .manifesto-cap.is-on > :nth-child(2) { transition-delay: .08s; }

/* WebGL / JS yoksa: statik, okunabilir blok */
.manifesto:not(.is-live) { height: auto; }
.manifesto:not(.is-live) .manifesto-sticky { position: relative; height: auto; display: grid; gap: 48px; padding: 120px max(4vw,20px) 80px; }
.manifesto:not(.is-live) .manifesto-cap { position: static; }
.manifesto:not(.is-live) .manifesto-marks,
.manifesto:not(.is-live) .manifesto-progress { display: none; }

@media (max-width: 759px) {
  .manifesto { height: 380vh; }
  .manifesto-cap { flex-direction: column; align-items: flex-start; gap: 10px; }
  .manifesto-cap .cap-right { text-align: left; }
  .manifesto-progress { top: 100px; }
}

/* ======================================== Marka marquee + Bento (Spline) */
.flow-section {
  position: relative;
  background: #0c0810;
  color: #f5f0e6;
  padding: 0 0 110px;
  overflow: hidden;
}
.brand-marquee {
  border-block: 1px solid #ffffff14;
  padding: 26px 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.brand-marquee-track {
  display: flex;
  width: max-content;
  gap: 56px;
  animation: brandMarquee 46s linear infinite;
}
.brand-marquee-track span {
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  font-weight: 600;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1px #ffffff59;
  white-space: nowrap;
  transition: color .3s, -webkit-text-stroke-color .3s;
}
.brand-marquee-track span:hover { color: #a7eedc; -webkit-text-stroke-color: #a7eedc; }
.brand-marquee:hover .brand-marquee-track { animation-play-state: paused; }
@keyframes brandMarquee { to { transform: translateX(-50%); } }

.flow-inner { width: min(1240px, calc(100% - 2 * max(4vw, 20px))); margin: 0 auto; padding-top: 100px; }
.flow-kicker { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .7rem; letter-spacing: .14em; color: #ffffff80; margin: 0 0 22px; }
.flow-heading h2 {
  margin: 0 0 56px;
  font-size: clamp(2.6rem, 5.6vw, 5.4rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.06em;
}
.flow-heading h2 em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; color: #a7eedc; }

.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 460px;
  border: 1px solid #ffffff14;
  border-radius: 22px;
  background: radial-gradient(70% 60% at 50% 35%, #2a1838 0%, #17111c 70%);
  overflow: hidden;
  transition: border-color .35s, transform .5s cubic-bezier(.2,.7,.2,1);
}
.bento-card:hover { border-color: #a7eedc66; transform: translateY(-4px); }
.bento-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
  pointer-events: none;
}
.bento-scene { position: relative; flex: 1; min-height: 300px; }
.bento-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bento-copy { position: relative; padding: 0 28px 28px; }
.bento-copy small { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .68rem; letter-spacing: .12em; color: #ffffff73; }
.bento-copy h3 { margin: 10px 0 8px; font-size: 1.6rem; font-weight: 500; letter-spacing: -.03em; }
.bento-copy p { margin: 0; max-width: 380px; color: #ffffffa6; font-size: .92rem; line-height: 1.6; }

@media (max-width: 759px) {
  .bento { grid-template-columns: 1fr; }
  .bento-card { min-height: 400px; }
  .bento-scene { min-height: 250px; }
  .flow-inner { padding-top: 70px; }
  .flow-heading h2 { margin-bottom: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  .preloader { display: none; }
}

/* ================================= Hero koleksiyon halkası etiketi */
.ring-label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #f5f0e6;
  color: #2b1838;
  pointer-events: none;
  opacity: 0;
  scale: .85;
  transition: opacity .25s, scale .3s cubic-bezier(.2,.7,.2,1);
}
.ring-label strong { font-size: .95rem; letter-spacing: -.01em; }
.ring-label small { font-size: .58rem; letter-spacing: .18em; color: #6b3fa0; font-weight: 700; }
.hero.ring-hover .ring-label { opacity: 1; scale: 1; }
.hero.ring-hover { cursor: pointer; }
@media (hover: none) { .ring-label { display: none; } }