/* Hareket katmanı: sakin, editoryal. Sadece transform/opacity animasyonu.
   Bu dosya style.css'ten SONRA yüklenir; davranış js/motion.js'te. */

:root {
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.2s;
  --dur: 0.45s;
  --dur-slow: 0.9s;
  --shadow-rest: 0 1px 2px rgba(27, 20, 32, 0.04);
  --shadow-lift: 0 18px 38px -14px rgba(27, 20, 32, 0.28);
}

/* ---------- sayfa geçişi (destekleyen tarayıcılarda) ---------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: fade-out 0.18s var(--ease-soft) both; }
::view-transition-new(root) { animation: fade-in 0.35s var(--ease-out) both; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- scroll ile beliriş ---------- */
.js-motion .reveal {
  opacity: 0;
  translate: 0 22px;
  transition: opacity var(--dur-slow) var(--ease-out), translate var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
  will-change: opacity, translate;
}
.js-motion .reveal.is-visible {
  opacity: 1;
  translate: 0 0;
  will-change: auto;
}

/* ---------- açılış: hero ---------- */
.landing-hero-copy > * { animation: rise var(--dur-slow) var(--ease-out) both; }
.landing-hero-copy > :nth-child(1) { animation-delay: 0.05s; }
.landing-hero-copy > :nth-child(2) { animation-delay: 0.15s; }
.landing-hero-copy > :nth-child(3) { animation-delay: 0.28s; }
.landing-hero-copy > :nth-child(4) { animation-delay: 0.4s; }
.landing-hero-copy > :nth-child(5) { animation-delay: 0.5s; }
@keyframes rise { from { opacity: 0; translate: 0 18px; } }

.landing-hero h1 .accent {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  animation: underline-draw 1.1s 0.9s var(--ease-out) forwards;
}
@keyframes underline-draw { to { background-size: 100% 1px; } }

/* Diğer sayfaların başlık bloğu (eyebrow → h1 → lead) aynı açılışı alır. */
main :is(.eyebrow, h1, .lead, .hero > p, .login-wrap > p):not(.landing-hero *) {
  animation: rise var(--dur-slow) var(--ease-out) both;
  animation-delay: 0.15s;
}
main .eyebrow:not(.landing-hero *) { animation-delay: 0.05s; }
main :is(.lead, .hero > p, .login-wrap > p):not(.landing-hero *) { animation-delay: 0.28s; }
main h1 .accent:not(.landing-hero *) {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  animation: underline-draw 1.1s 0.8s var(--ease-out) forwards;
}

/* Portrelerde dönüş transform'da kalıyordu; bağımsız özelliklere taşıyoruz ki
   translate (parallax) ve scale (hover/giriş) çakışmasın. */
.hero-portrait { transform: none; will-change: translate; }
.hero-portrait--1 { rotate: -4deg; }
.hero-portrait--2 { rotate: 3deg; }
.hero-portrait--3 { rotate: -1deg; }
.hero-portrait {
  translate: 0 var(--py, 0px);
  animation: portrait-in 1.1s var(--ease-out) both;
  transition: scale var(--dur) var(--ease-out), rotate var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.hero-portrait--1 { animation-delay: 0.2s; }
.hero-portrait--2 { animation-delay: 0.38s; }
.hero-portrait--3 { animation-delay: 0.56s; }
@keyframes portrait-in { from { opacity: 0; scale: 0.94; } }
.landing-hero-visual:hover .hero-portrait { box-shadow: 0 20px 48px rgba(27, 20, 32, 0.22); }
.hero-portrait:hover { scale: 1.035; rotate: 0deg; }

/* Tıklanan portre öne çıkar, diğerleri geri çekilir. */
.hero-portrait { cursor: pointer; transition: scale 0.6s var(--ease-out), rotate 0.6s var(--ease-out), opacity 0.5s var(--ease-soft), filter 0.5s var(--ease-soft), box-shadow var(--dur) var(--ease-out); }
.hero-portrait:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
.landing-hero-visual[data-front] .hero-portrait { scale: 0.92; opacity: 0.72; filter: saturate(0.85); }
.landing-hero-visual[data-front] .hero-portrait:hover { opacity: 0.9; }
.landing-hero-visual[data-front="1"] .hero-portrait--1,
.landing-hero-visual[data-front="2"] .hero-portrait--2,
.landing-hero-visual[data-front="3"] .hero-portrait--3 {
  z-index: 5; scale: 1.08; rotate: 0deg; opacity: 1; filter: none;
  box-shadow: 0 26px 56px rgba(27, 20, 32, 0.28);
}

/* ---------- header / nav ---------- */
.site-nav a:not(.nav-login) { position: relative; }
.site-nav a:not(.nav-login)::after {
  content: "";
  position: absolute;
  left: 1rem; right: 1rem; bottom: -0.3rem;
  height: 1px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a:not(.nav-login):hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.logo-mark { transition: rotate 0.8s var(--ease-out); }
.logo:hover .logo-mark { rotate: 18deg; }
.site-header { transition: box-shadow var(--dur) var(--ease-soft), background var(--dur) var(--ease-soft); }
.site-header.is-stuck { box-shadow: 0 8px 24px -16px rgba(27, 20, 32, 0.35); }

/* ---------- butonlar ---------- */
.landing-btn, .login-submit, .cookie-btn, .share-btn, .combo-tryon-btn, .account-char-btn {
  transition: background 0.25s var(--ease-soft), color 0.25s var(--ease-soft), border-color 0.25s var(--ease-soft),
    translate var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.landing-btn:hover, .login-submit:hover, .cookie-btn:hover, .share-btn:hover, .combo-tryon-btn:hover {
  translate: 0 -2px;
  box-shadow: 0 10px 22px -10px rgba(27, 20, 32, 0.4);
}
.landing-btn:active, .login-submit:active, .cookie-btn:active, .share-btn:active, .combo-tryon-btn:active {
  translate: 0 0;
  box-shadow: none;
  transition-duration: 0.08s;
}
.see-all { display: inline-block; transition: translate var(--dur) var(--ease-out); }
.see-all:hover { translate: 4px 0; text-decoration: none; }

/* ---------- kartlar ---------- */
.product-card, .combo-preview, .step-card, .model-chip, .size-card, .comparison-card, .store-chip {
  transition: translate var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
    background 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
}
.product-card:hover, .combo-preview:hover, .model-chip:hover, .size-card:hover, .comparison-card:hover {
  translate: 0 -5px;
}
.step-card:hover { translate: 0 -3px; box-shadow: var(--shadow-lift); }
.combo-preview:hover, .model-chip:hover { box-shadow: var(--shadow-lift); }

/* Kart görselleri: hover'da sadece gölge derinleşir (yuvarlak köşe taşması olmasın). */
.product-card img, .comparison-card img, .size-card img { transition: box-shadow var(--dur) var(--ease-out), scale var(--dur) var(--ease-out); }
.product-card:hover img, .comparison-card:hover img { box-shadow: var(--shadow-lift); }
.product-card-body h3 { transition: color 0.25s var(--ease-soft); }
.product-card:hover .product-card-body h3 { color: var(--coral); }

.combo-preview-thumbs img, .model-chip img { transition: scale 0.6s var(--ease-out); }
.combo-preview:hover .combo-preview-thumbs img { scale: 1.04; }
.model-chip:hover img { scale: 1.05; }

.step-num { display: inline-block; transition: scale var(--dur) var(--ease-out), rotate var(--dur) var(--ease-out); }
.step-card:hover .step-num { scale: 1.15; rotate: -6deg; }

.store-chip:hover { translate: 0 -2px; }
.style-badge { transition: scale var(--dur-fast) var(--ease-out); }
.style-badge:hover { scale: 1.06; }

/* ---------- sosyal aksiyonlar ---------- */
.social-action { transition: background 0.2s var(--ease-soft), color 0.2s var(--ease-soft), scale var(--dur-fast) var(--ease-out); }
.social-action:hover { scale: 1.05; }
.social-action:active { scale: 0.94; }
.favorite-toggle-btn, .favorite-remove-btn { transition: scale var(--dur-fast) var(--ease-out), background 0.2s; }
.favorite-toggle-btn:hover { scale: 1.12; }

/* ---------- lightbox / çerez bandı ---------- */
.lightbox.open { animation: fade-in 0.25s var(--ease-out); }
.lightbox.open img { animation: zoom-in 0.4s var(--ease-out); }
@keyframes zoom-in { from { opacity: 0; scale: 0.95; } }
[data-lightbox] { cursor: zoom-in; }
.cookie-banner:not([hidden]) { animation: slide-up 0.6s 0.4s var(--ease-out) both; }
@keyframes slide-up { from { opacity: 0; translate: 0 24px; } }

/* ---------- odak halkası yumuşak gelsin ---------- */
a:focus-visible, button:focus-visible { outline-offset: 3px; transition: outline-offset 0.15s var(--ease-out); }

/* ---------- hareketi azalt ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .js-motion .reveal { opacity: 1; translate: 0 0; }
  .hero-portrait { translate: 0 0; }
}

/* Dokunmatik cihazlarda hover'ı takılı bırakma */
@media (hover: none) {
  .product-card:hover, .combo-preview:hover, .model-chip:hover, .size-card:hover,
  .comparison-card:hover, .step-card:hover { translate: 0 0; }
  .product-card:active, .combo-preview:active, .model-chip:active { translate: 0 -2px; }
}