/* =========================================================================
   Yaprakzade — Cinematic Premium (Voldi-design)
   Light theme. 7-layer 3D refresh. Token-only.
   Yüklenme: bundle/tokens.css'den SONRA → override öncelikli.
   Opt-in: class ekleyerek aktif edilir, mevcut stilleri EZMEZ.
   ========================================================================= */

/* ---------- 0) Section padding util + scrollbar + noise ---------- */
.yz-section{
  padding-top: clamp(48px, 6vw, var(--yz-sp-20));
  padding-bottom: clamp(48px, 6vw, var(--yz-sp-20));
}

/* Premium scrollbar */
@supports (scrollbar-color: auto){
  html{
    scrollbar-color: var(--yz-gold) var(--yz-cream);
    scrollbar-width: thin;
  }
}
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--yz-cream); }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--yz-gold), var(--yz-gold-dark));
  border-radius: var(--yz-r-full);
  border: 2px solid var(--yz-cream);
}
::-webkit-scrollbar-thumb:hover{ background: var(--yz-gold-dark); }

/* Subtle noise overlay (opt-in: <section class="yz-noise">) */
.yz-noise{ position: relative; isolation: isolate; }
.yz-noise::before{
  content:'';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .035;
  z-index: 0;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.yz-noise > *{ position: relative; z-index: 1; }

/* ---------- 1) Pointer-aware 3D tilt card ---------- */
/* Opt-in: class="yz-tilt-card"
   JS data-attribute (--rx, --ry) ile derinleştirilebilir; saf CSS hover fallback. */
.yz-tilt-card{
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateX(0deg) rotateY(0deg) translateZ(0);
  transition:
    transform var(--yz-dur) var(--yz-ease-out),
    box-shadow var(--yz-dur) var(--yz-ease-out);
  will-change: transform;
}
.yz-tilt-card:hover{
  transform: perspective(1200px) rotateX(-3deg) rotateY(4deg) translateZ(6px);
  box-shadow: var(--yz-shadow-hover);
}
/* JS-driven (cinematic-reveal.js setProperty) */
.yz-tilt-card[data-tilt="on"]{
  transform: perspective(1200px)
             rotateX(var(--yz-rx, 0deg))
             rotateY(var(--yz-ry, 0deg))
             translateZ(0);
}
.yz-tilt-card > *{ transform: translateZ(0); }
.yz-tilt-card .yz-tilt-lift{
  transform: translateZ(28px);
  transition: transform var(--yz-dur) var(--yz-ease-out);
}

/* ---------- 2) Glow pulse (CTA) ---------- */
@keyframes yz-glow-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(199,154,58,.28), 0 14px 30px -16px rgba(31,77,34,.18); }
  100% { box-shadow: 0 0 0 12px rgba(199,154,58,0),  0 18px 36px -18px rgba(199,154,58,.42); }
}
.yz-glow-pulse{
  position: relative;
  animation: yz-glow-pulse 3.6s cubic-bezier(0.4,0,0.6,1) infinite alternate;
}

/* ---------- 3) Shimmer sweep (rozet) ---------- */
.yz-shimmer{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.yz-shimmer::after{
  content:'';
  position: absolute; inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255,255,255,.55) 50%,
    rgba(199,154,58,.32) 55%,
    transparent 75%
  );
  transform: translateX(-120%);
  animation: yz-shimmer-sweep 3.4s var(--yz-ease) infinite;
  pointer-events: none;
}
@keyframes yz-shimmer-sweep {
  0%   { transform: translateX(-120%); }
  60%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* ---------- 4) Reveal-on-scroll (IntersectionObserver) ---------- */
.yz-reveal-up,
.yz-reveal-fade,
.yz-reveal-scale{
  opacity: 0;
  transition:
    opacity 700ms var(--yz-ease-out),
    transform 700ms var(--yz-ease-out);
  will-change: opacity, transform;
}
.yz-reveal-up      { transform: translateY(28px); }
.yz-reveal-fade    { transform: none; }
.yz-reveal-scale   { transform: scale(.94); transform-origin: center bottom; }

.yz-reveal-up.is-visible,
.yz-reveal-fade.is-visible,
.yz-reveal-scale.is-visible{
  opacity: 1;
  transform: none;
}

/* Stagger helper: parent'a .yz-reveal-stagger ekleyince children 80ms artar */
.yz-reveal-stagger > .yz-reveal-up:nth-child(1),
.yz-reveal-stagger > .yz-reveal-fade:nth-child(1),
.yz-reveal-stagger > .yz-reveal-scale:nth-child(1){ transition-delay: 0ms; }
.yz-reveal-stagger > :nth-child(2){ transition-delay: 80ms; }
.yz-reveal-stagger > :nth-child(3){ transition-delay: 160ms; }
.yz-reveal-stagger > :nth-child(4){ transition-delay: 240ms; }
.yz-reveal-stagger > :nth-child(5){ transition-delay: 320ms; }
.yz-reveal-stagger > :nth-child(6){ transition-delay: 400ms; }
.yz-reveal-stagger > :nth-child(7){ transition-delay: 480ms; }
.yz-reveal-stagger > :nth-child(8){ transition-delay: 560ms; }

/* ---------- 5) Parallax background ---------- */
.yz-parallax-bg{
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: background-position;
}
/* JS data-speed override: translateY üzerinden (transform fallback) */
.yz-parallax-bg[data-yz-parallax]{
  background-attachment: scroll;
  transform: translate3d(0, var(--yz-py, 0px), 0);
  transition: transform 60ms linear;
}
@media (max-width: 768px){
  .yz-parallax-bg{ background-attachment: scroll; }
}

/* ---------- 6) Magnetic button (yz-mag-btn) ---------- */
.yz-mag-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--yz-r-full);
  background: linear-gradient(135deg, var(--yz-green), var(--yz-green-dark));
  color: #fff;
  font-weight: 700;
  font-family: var(--yz-font-sans);
  letter-spacing: .01em;
  border: 0;
  cursor: pointer;
  box-shadow: var(--yz-shadow-md);
  transition:
    transform 240ms var(--yz-ease-out),
    box-shadow 240ms var(--yz-ease-out),
    background 240ms var(--yz-ease-out);
  transform: translate3d(var(--yz-mx, 0px), var(--yz-my, 0px), 0);
  will-change: transform, box-shadow;
}
.yz-mag-btn::before{
  content:'';
  position: absolute; inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 60%);
  pointer-events: none;
}
.yz-mag-btn:hover{
  box-shadow: var(--yz-shadow-hover);
  background: linear-gradient(135deg, var(--yz-green-light), var(--yz-green));
}
.yz-mag-btn:active{
  transform: translate3d(var(--yz-mx, 0px), var(--yz-my, 0px), 0) scale(.97);
}
.yz-mag-btn.is-gold{
  background: linear-gradient(135deg, var(--yz-gold), var(--yz-gold-dark));
}

/* ---------- 7) 3D tab (Phase 388 card3d pattern) ---------- */
.yz-3d-tab{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px;
  border-radius: var(--yz-r-xl);
  background: linear-gradient(180deg, #ffffff, var(--yz-cream));
  border: 1px solid var(--yz-line);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -1px 0 rgba(0,0,0,.03) inset,
    var(--yz-shadow-3d);
  transition:
    transform var(--yz-dur) var(--yz-ease-out),
    box-shadow var(--yz-dur) var(--yz-ease-out),
    border-color var(--yz-dur) var(--yz-ease-out);
  isolation: isolate;
  overflow: hidden;
}
.yz-3d-tab::before{
  content:'';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.7), transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.yz-3d-tab::after{
  /* soft floor shadow */
  content:'';
  position: absolute;
  left: 12%; right: 12%;
  bottom: -10px; height: 18px;
  background: radial-gradient(ellipse at center, rgba(31,77,34,.18), transparent 70%);
  filter: blur(6px);
  z-index: -1;
  opacity: .7;
  transition: opacity var(--yz-dur) var(--yz-ease-out), transform var(--yz-dur) var(--yz-ease-out);
}
.yz-3d-tab:hover{
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(0,0,0,.04) inset,
    var(--yz-shadow-hover);
  border-color: var(--yz-line-strong);
}
.yz-3d-tab:hover::after{ opacity: 1; transform: translateY(2px) scale(1.05); }

/* City landing tab varyantları */
.yz-3d-tab.is-tedariki{
  background: linear-gradient(180deg, #f1f8f3, #ffffff);
  border-color: rgba(45,94,62,.22);
}
.yz-3d-tab.is-tedariki .yz-3d-tab__icon{ color: var(--yz-green); }

.yz-3d-tab.is-toptan{
  background: linear-gradient(180deg, #fbf3e1, #fffdf6);
  border-color: rgba(199,154,58,.32);
}
.yz-3d-tab.is-toptan .yz-3d-tab__icon{ color: var(--yz-gold-dark); }

.yz-3d-tab.is-satis{
  background: linear-gradient(180deg, var(--yz-cream), #ffffff);
  border-color: var(--yz-line-strong);
}
.yz-3d-tab.is-satis .yz-3d-tab__icon{ color: var(--yz-ink-soft); }

.yz-3d-tab__icon{
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--yz-r);
  background: rgba(255,255,255,.7);
  box-shadow: 0 4px 14px -8px rgba(0,0,0,.18);
  font-size: 22px;
}
.yz-3d-tab__title{
  font-family: var(--yz-font-display);
  font-size: var(--yz-fs-xl);
  color: var(--yz-ink);
  line-height: var(--yz-lh-tight);
}
.yz-3d-tab__body{
  color: var(--yz-muted);
  font-size: var(--yz-fs-sm);
  line-height: var(--yz-lh-normal);
}

/* ---------- Unified micro-interactions: button/btn/a.btn ---------- */
.btn, button.btn, a.btn{
  transition:
    transform 200ms var(--yz-ease-out),
    box-shadow 220ms var(--yz-ease-out),
    background-color 220ms var(--yz-ease-out),
    color 220ms var(--yz-ease-out);
  will-change: transform;
}
.btn:hover, button.btn:hover, a.btn:hover{
  transform: translateY(-2px) scale(1.015);
  box-shadow: var(--yz-shadow-md);
}
.btn:active, button.btn:active, a.btn:active{
  transform: translateY(0) scale(.98);
  box-shadow: var(--yz-shadow-sm);
}

/* ---------- Reduced motion: opt-in animasyonları tamamen kapat ---------- */
@media (prefers-reduced-motion: reduce){
  .yz-tilt-card,
  .yz-tilt-card:hover,
  .yz-tilt-card[data-tilt="on"]{ transform: none !important; }
  .yz-glow-pulse{ animation: none !important; }
  .yz-shimmer::after{ animation: none !important; transform: translateX(120%) !important; }
  .yz-reveal-up,
  .yz-reveal-fade,
  .yz-reveal-scale{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .yz-parallax-bg{ background-attachment: scroll !important; transform: none !important; }
  .yz-mag-btn{ transform: none !important; }
  .yz-3d-tab,
  .yz-3d-tab:hover{ transform: none !important; }
  .btn, button.btn, a.btn{ transition: none !important; }
}

/* ============================================================
   AUTO-BIND: opt-in olmadan tüm mevcut karta cinematic davranış
   ============================================================ */

/* Tüm kartlar 3D tilt + hover lift (mevcut class'lara JS-less) */
.product-card, .bundle-card, .blog-card, .feature-card,
.benefit-card, .review-card, .gallery-card, .partner-card,
.faq-item, .stage-card, .city-card {
  transition: transform var(--yz-dur) var(--yz-ease-out),
              box-shadow var(--yz-dur) var(--yz-ease-out);
  transform-style: preserve-3d;
  will-change: transform;
}
.product-card:hover, .bundle-card:hover, .blog-card:hover,
.feature-card:hover, .benefit-card:hover, .review-card:hover,
.gallery-card:hover, .partner-card:hover, .stage-card:hover,
.city-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: var(--yz-shadow-hover);
}

/* CTA buttonlar — auto magnetic feel + glow on hover */
.btn-primary, .btn-cta, .hero-cta, button.primary, a.primary,
.cta-button, .corp-cta {
  position: relative;
  transition: transform var(--yz-dur-fast) var(--yz-ease-out),
              box-shadow var(--yz-dur) var(--yz-ease-out),
              filter var(--yz-dur) var(--yz-ease-out);
}
.btn-primary:hover, .btn-cta:hover, .hero-cta:hover,
button.primary:hover, a.primary:hover, .cta-button:hover, .corp-cta:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 40px -12px rgba(199,154,58,.45);
  filter: brightness(1.05);
}

/* Section reveal — otomatik IntersectionObserver bind (JS tarafında) */
section, .section, .yz-section {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--yz-ease-out), transform .8s var(--yz-ease-out);
}
section.is-visible, .section.is-visible, .yz-section.is-visible,
/* fallback: JS yüklenmezse her şey görünsün */
.no-js section, .no-js .section, .no-js .yz-section {
  opacity: 1; transform: none;
}
/* Header & footer ASLA gizlenmesin */
header, footer, .site-header, .yz-footer, .nav, nav.main-nav {
  opacity: 1 !important; transform: none !important;
}

/* Pointer-aware 3D tilt — JS data-driven */
[data-yz-tilt-active] {
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
}

/* Hero — premium tilt-3D çerçeve hissi + parallax-ready */
.hero, .hero-slider, .hero-premium {
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(199,154,58,.08), transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* Image lift-on-hover (premium feel) */
.product-card img, .bundle-card img, .blog-card img, .gallery-card img {
  transition: transform .6s var(--yz-ease-out), filter .4s ease;
}
.product-card:hover img, .bundle-card:hover img,
.blog-card:hover img, .gallery-card:hover img {
  transform: scale(1.06);
  filter: saturate(1.1) brightness(1.02);
}

/* Section heading — gold underline animasyonu */
h1, h2, .section-title {
  position: relative;
}
.section-title::after, h2.with-underline::after {
  content: ""; display: block;
  width: 56px; height: 3px;
  background: linear-gradient(90deg, var(--yz-gold), var(--yz-gold-dark));
  border-radius: 3px;
  margin: 12px auto 0;
  transform-origin: center;
  animation: yz-underline-grow 1.4s var(--yz-ease-out) both;
}
@keyframes yz-underline-grow {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Reduced motion respekt */
@media (prefers-reduced-motion: reduce) {
  .product-card:hover, .bundle-card:hover, .blog-card:hover,
  .feature-card:hover, .benefit-card:hover, .review-card:hover,
  .gallery-card:hover, .partner-card:hover, .stage-card:hover,
  .city-card:hover, .btn-primary:hover, .btn-cta:hover {
    transform: none;
  }
  section, .section, .yz-section { opacity: 1; transform: none; }
}