/* Nana V3.1 — visual rhythm, conversion visibility and geometry hardening. */

:root {
  --nana-v31-ease: cubic-bezier(.22, .72, .2, 1);
  --nana-v31-progress: 0;
  --nana-v31-hero-word-y: 0px;
  --nana-v31-hero-card-1-y: 0px;
  --nana-v31-hero-card-2-y: 0px;
  --nana-v31-hero-card-3-y: 0px;
}

html.nana-v31-ready {
  scroll-padding-top: 104px;
}

/* A thin, honest progress cue: no countdown or fake urgency. */
.nana-v31-scroll-progress {
  position: fixed;
  z-index: 1600;
  inset: 0 0 auto;
  block-size: 4px;
  pointer-events: none;
  background: transparent;
}

.nana-v31-scroll-progress::after {
  content: "";
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background: linear-gradient(90deg, #f37d68 0%, #f4d86b 52%, #8fcfc1 100%);
  transform: scaleX(var(--nana-v31-progress));
  transform-origin: left center;
  box-shadow: 0 1px 12px rgba(243, 125, 104, .28);
  transition: transform .08s linear;
}

/* Scroll staging activates only when JS has explicitly marked the document ready. */
html.nana-v31-motion-ready body.home .nana-v31-scroll-section {
  opacity: 0;
  translate: 0 34px;
  transition:
    opacity .72s ease,
    translate .9s var(--nana-v31-ease);
  will-change: opacity, translate;
}

html.nana-v31-motion-ready body.home .nana-v31-scroll-section.is-inview {
  opacity: 1;
  translate: 0 0;
}

html.nana-v31-motion-ready body.home [data-nana-v31-stagger] {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity .62s ease var(--nana-v31-delay, 0ms),
    translate .78s var(--nana-v31-ease) var(--nana-v31-delay, 0ms);
}

html.nana-v31-motion-ready body.home .nana-v31-scroll-section.is-inview [data-nana-v31-stagger] {
  opacity: 1;
  translate: 0 0;
}

@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  body.nana-v3-1-conversion-polish .nana-os3-hero__word {
    translate: 0 var(--nana-v31-hero-word-y);
    transition: translate .1s linear;
    will-change: translate;
  }

  body.nana-v3-1-conversion-polish .nana-os3-hero-product--1 {
    translate: 0 var(--nana-v31-hero-card-1-y);
    transition: translate .1s linear;
    will-change: translate;
  }

  body.nana-v3-1-conversion-polish .nana-os3-hero-product--2 {
    translate: 0 var(--nana-v31-hero-card-2-y);
    transition: translate .1s linear;
    will-change: translate;
  }

  body.nana-v3-1-conversion-polish .nana-os3-hero-product--3 {
    translate: 0 var(--nana-v31-hero-card-3-y);
    transition: translate .1s linear;
    will-change: translate;
  }

  body.nana-v3-1-conversion-polish .nana-v31-scroll-section.is-inview .nana-os3-section-head h2,
  body.nana-v3-1-conversion-polish .nana-v31-scroll-section.is-inview .nana-growth-home__intro h2,
  body.nana-v3-1-conversion-polish .nana-v31-scroll-section.is-inview .nana-growth-section-head h3 {
    text-shadow: 0 18px 42px rgba(22, 21, 19, .08);
  }
}

/* Exact icon geometry. Native button baselines must never move the heart or X. */
body.nana-v3-1-conversion-polish :is(
  .nana-v3-icon-button,
  [data-nana-v3-remove],
  [data-nana-v3-shortlist-close],
  .nana-growth-consent__close
) {
  display: inline-grid !important;
  place-items: center !important;
  inline-size: 44px;
  block-size: 44px;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
  vertical-align: middle;
  overflow: visible;
}

body.nana-v3-1-conversion-polish :is(
  .nana-v3-icon-button,
  [data-nana-v3-remove],
  [data-nana-v3-shortlist-close],
  .nana-growth-consent__close
) > svg {
  position: static !important;
  display: block !important;
  inline-size: 19px !important;
  block-size: 19px !important;
  margin: 0 !important;
  translate: none !important;
  transform: none !important;
  transform-origin: 50% 50% !important;
  pointer-events: none;
}

body.nana-v3-1-conversion-polish .nana-v3-save {
  display: grid !important;
  place-items: center !important;
}

/* Keep dark surfaces readable under every global link/button hover rule. */
body.nana-v3-1-conversion-polish :is(
  .nana-v2-runway-card,
  .nana-os3-editorial__main,
  .nana-v31-dark-surface
) :is(a, button):is(:hover, :focus-visible, :active) {
  color: inherit !important;
}

body.nana-v3-1-conversion-polish :is(
  .nana-os3-button--dark,
  .nana-v3-shortlist-dock,
  .nana-v3-search-all,
  .nana-v3-decision-bar__action,
  .nana-growth-finder__actions button:not([data-growth-prev]),
  .nana-growth-bundle-card button,
  .nana-growth-product-card button,
  .nana-growth-recovery button,
  .nana-growth-club button
),
body.nana-v3-1-conversion-polish :is(
  .nana-os3-button--dark,
  .nana-v3-shortlist-dock,
  .nana-v3-search-all,
  .nana-v3-decision-bar__action,
  .nana-growth-finder__actions button:not([data-growth-prev]),
  .nana-growth-bundle-card button,
  .nana-growth-product-card button,
  .nana-growth-recovery button,
  .nana-growth-club button
):is(:hover, :focus-visible, :active) {
  color: #fff !important;
}

body.nana-v3-1-conversion-polish :is(
  .nana-os3-button--dark,
  .nana-v3-shortlist-dock,
  .nana-v3-search-all,
  .nana-v3-decision-bar__action,
  .nana-growth-finder__actions button:not([data-growth-prev]),
  .nana-growth-bundle-card button,
  .nana-growth-product-card button,
  .nana-growth-recovery button,
  .nana-growth-club button
) > * {
  color: inherit !important;
}

body.nana-v3-1-conversion-polish .nana-v2-runway-card:is(:hover, :focus-within) :is(h3, p, a, span, strong, small, b, em),
body.nana-v3-1-conversion-polish .nana-os3-editorial__main:is(:hover, :focus-visible) :is(h2, p, a, span, strong, small, b, em) {
  color: inherit !important;
}

/* Server-rendered Growth stage: visible before JavaScript enhancement. */
#nana-smart-shop {
  position: relative;
  scroll-margin-top: 108px;
}

#nana-smart-shop::before {
  content: "AKILLI ALIŞVERİŞ AKIŞI";
  position: absolute;
  z-index: 3;
  inset-block-start: 28px;
  inset-inline-start: max(20px, calc((100vw - 1240px) / 2));
  padding: 9px 13px;
  border: 1px solid rgba(22, 21, 19, .14);
  border-radius: 999px;
  color: #4d4942;
  background: rgba(255, 253, 249, .88);
  box-shadow: 0 10px 28px rgba(22, 21, 19, .08);
  backdrop-filter: blur(12px);
  font: 800 10px/1 "Plus Jakarta Sans", sans-serif;
  letter-spacing: .11em;
}

#nana-smart-shop .nana-growth-home {
  border-block: 1px solid rgba(22, 21, 19, .08);
}

/* Persistent desktop funnel dock: useful navigation, never fake urgency. */
.nana-v31-funnel-dock {
  position: fixed;
  z-index: 82;
  inset-inline-start: clamp(18px, 2.2vw, 30px);
  inset-block-end: clamp(18px, 2.2vw, 30px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  inline-size: min(410px, calc(100vw - 36px));
  padding: 12px 13px 12px 17px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  color: #fff;
  background: rgba(22, 21, 19, .94);
  box-shadow: 0 24px 70px rgba(22, 21, 19, .24);
  backdrop-filter: blur(18px) saturate(135%);
  opacity: 0;
  translate: 0 24px;
  pointer-events: none;
  transition: opacity .28s ease, translate .42s var(--nana-v31-ease);
}

.nana-v31-funnel-dock.is-visible {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.nana-v31-funnel-dock__copy {
  min-inline-size: 0;
}

.nana-v31-funnel-dock__copy strong,
.nana-v31-funnel-dock__copy span {
  display: block;
}

.nana-v31-funnel-dock__copy strong {
  margin-bottom: 3px;
  color: #fff;
  font: 800 14px/1.15 "Plus Jakarta Sans", sans-serif;
}

.nana-v31-funnel-dock__copy span {
  color: rgba(255, 255, 255, .68);
  font-size: 11px;
  line-height: 1.3;
}

.nana-v31-funnel-dock__actions {
  display: flex;
  gap: 7px;
}

.nana-v31-funnel-dock a {
  display: inline-flex;
  min-block-size: 40px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 13px;
  color: #fff !important;
  background: rgba(255,255,255,.08);
  font: 800 11px/1 "Plus Jakarta Sans", sans-serif;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}

.nana-v31-funnel-dock a:first-child {
  border-color: #f37d68;
  background: #f37d68;
}

.nana-v31-funnel-dock a:is(:hover, :focus-visible) {
  color: #fff !important;
  border-color: rgba(255,255,255,.52);
  background: rgba(255,255,255,.16);
  transform: translateY(-2px);
}

.nana-v31-funnel-dock a:first-child:is(:hover, :focus-visible) {
  border-color: #ff9b89;
  background: #e86551;
}

html.nana-v3-shortlist-open .nana-v31-funnel-dock,
html:has(.nana-growth-consent:not([hidden])) .nana-v31-funnel-dock,
body.woocommerce-cart .nana-v31-funnel-dock,
body.woocommerce-checkout .nana-v31-funnel-dock {
  opacity: 0 !important;
  translate: 0 24px !important;
  pointer-events: none !important;
}

@media (max-width: 980px) {
  .nana-v31-funnel-dock,
  .nana-v31-scroll-progress {
    display: none !important;
  }

  #nana-smart-shop::before {
    inset-block-start: 18px;
    inset-inline-start: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nana-v31-scroll-progress::after,
  html.nana-v31-motion-ready body.home .nana-v31-scroll-section,
  html.nana-v31-motion-ready body.home [data-nana-v31-stagger],
  body.nana-v3-1-conversion-polish .nana-os3-hero__word,
  body.nana-v3-1-conversion-polish .nana-os3-hero-product--1,
  body.nana-v3-1-conversion-polish .nana-os3-hero-product--2,
  body.nana-v3-1-conversion-polish .nana-os3-hero-product--3,
  .nana-v31-funnel-dock {
    opacity: 1 !important;
    translate: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}