/* pliseevim fluid — müşteri yüzü motion + ferah yüzey */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.3, .64, 1);
  --fluid-pad: clamp(48px, 8vw, 88px);
  --surface: color-mix(in srgb, var(--card) 94%, transparent);
  --surface-lift: 0 20px 48px rgba(42, 53, 48, .08);
}

/* —— scroll progress on sticky header —— */
.shop-top {
  --scroll-p: 0%;
}
.shop-top::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: var(--scroll-p);
  background: linear-gradient(90deg, var(--terra), color-mix(in srgb, var(--terra) 40%, var(--forest)));
  border-radius: 0 2px 2px 0;
  pointer-events: none;
  transition: width .05s linear;
  z-index: 2;
}

/* —— page breathing room —— */
.shop-body .section {
  padding-block: var(--fluid-pad);
}
.shop-body .section-title {
  letter-spacing: -.035em;
  max-width: 18ch;
}
.shop-body .section-lead {
  max-width: 40ch;
  font-size: 1.05rem;
  line-height: 1.55;
}

/* —— softer surfaces (less boxed) —— */
.shop-body .fabric-card,
.shop-body .split-card,
.shop-body .review-card,
.shop-body .trust-pill,
.shop-body .mini-price,
.shop-body .how-stage,
.shop-body .flow-card,
.shop-body .faq details,
.shop-body .panel,
.order-page .measure,
.order-page .breakdown,
.account-shell .panel {
  border-color: transparent;
  box-shadow: var(--surface-lift);
  background: var(--surface);
  backdrop-filter: blur(8px);
}
.shop-body .fabric-card {
  transition:
    transform .45s var(--ease-out),
    box-shadow .45s ease;
}
.shop-body .fabric-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 28px 56px rgba(42, 53, 48, .14);
}
.shop-body .fabric-card .swatch,
.fabric-card .swatch {
  height: 110px;
  transition: transform .6s var(--ease-out);
}
.shop-body .fabric-card:hover .swatch {
  transform: scale(1.04);
}

.shop-body .split-card {
  transition:
    transform .4s var(--ease-out),
    box-shadow .4s ease,
    background .3s ease;
}
.shop-body .split-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 52px rgba(42, 53, 48, .12);
}
.shop-body .split-card em .icon {
  transition: transform .35s var(--ease-spring);
}
.shop-body .split-card:hover em .icon {
  transform: translateX(4px);
}

/* —— buttons —— */
.shop-body .btn {
  transition:
    transform .25s var(--ease-out),
    box-shadow .3s ease,
    background .25s ease,
    filter .25s ease;
}
@media (hover: hover) {
  .shop-body .btn.primary:hover,
  .shop-body .btn.terra:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(42, 53, 48, .22);
  }
  .shop-body .btn.soft:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
  }
}
.shop-body .btn:active {
  transform: scale(.97);
}

/* —— reveal variants (modifiers on .reveal) —— */
.reveal.reveal-left:not(.in) {
  transform: translateX(-26px);
}
.reveal.reveal-scale:not(.in) {
  transform: scale(.94);
}

/* —— hero cinematic —— */
.shop-hero {
  min-height: min(94vh, 820px);
}
.shop-hero::before {
  content: "";
  position: absolute;
  inset: -8% -4% auto -4%;
  height: 70%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 45% at 78% 30%, rgba(232, 164, 138, .28), transparent 70%),
    radial-gradient(ellipse 40% 35% at 18% 55%, rgba(42, 53, 48, .35), transparent 65%);
  filter: blur(28px);
  animation: heroGlow 14s ease-in-out infinite alternate;
}
@keyframes heroGlow {
  from { opacity: .75; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 1; transform: translate3d(-2%, 3%, 0) scale(1.04); }
}
.shop-hero-copy {
  z-index: 2;
}
.shop-hero-media {
  background:
    radial-gradient(ellipse 90% 70% at 72% 35%, rgba(232, 164, 138, .22), transparent 55%),
    radial-gradient(ellipse 60% 50% at 20% 70%, rgba(90, 120, 108, .35), transparent 50%),
    repeating-linear-gradient(
      180deg,
      rgba(197, 106, 74, .2) 0 9px,
      rgba(179, 90, 60, .05) 9px 18px
    );
  opacity: .7;
  animation: pleatDrift 22s ease-in-out infinite alternate;
  will-change: transform;
}
.shop-hero-media::before {
  height: 55%;
  background: linear-gradient(180deg, transparent, rgba(12, 16, 14, .92));
}
.shop-hero-media::after {
  width: min(42%, 340px);
  height: min(58%, 440px);
  border-radius: 6px;
  border-color: rgba(245, 243, 237, .45);
  box-shadow:
    0 40px 80px rgba(0, 0, 0, .4),
    inset 0 0 40px rgba(245, 243, 237, .06);
  animation: frameFloat 10s ease-in-out infinite alternate, pleatShimmer 7s ease-in-out infinite;
}
.shop-hero-copy {
  padding: 56px 0 64px;
}
.shop-hero h1 {
  font-size: clamp(2.35rem, 7.2vw, 3.75rem);
  line-height: 1.02;
  text-shadow: 0 8px 40px rgba(0, 0, 0, .35);
}
.shop-hero .lead {
  font-size: 1.12rem;
  max-width: 34ch;
  color: rgba(245, 243, 237, .88);
}
.shop-hero .cta {
  margin-top: 28px;
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font-size: .88rem;
  font-weight: 650;
  color: rgba(245, 243, 237, .82);
}
.hero-chips {
  display: none;
}
.hero-chip-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.hero-chip-bar a,
.hero-chip-bar span {
  font-size: .78rem;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(245, 243, 237, .9);
  backdrop-filter: blur(6px);
  transition: background .25s ease, transform .25s var(--ease-out);
}
.hero-chip-bar a:hover {
  background: rgba(255, 255, 255, .18);
  transform: translateY(-1px);
  color: #fff;
}

/* section rhythm: light divider only on odd sections */
.shop-body .section::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  width: min(64px, 18%);
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--terra) 50%, transparent), transparent);
  opacity: .32;
  pointer-events: none;
}
.shop-body .section:nth-of-type(even)::before,
.shop-body #guven::before {
  display: none;
}

/* trust / reviews less boxed */
.shop-body .trust-strip .trust-pill {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-left: 2px solid color-mix(in srgb, var(--terra) 55%, transparent);
  border-radius: 0;
  padding: 8px 4px 8px 14px;
}
.shop-body .review-band .review-card {
  background: color-mix(in srgb, var(--card) 88%, transparent);
}
.shop-body .trust-band {
  margin-top: clamp(40px, 6vw, 72px);
  padding: clamp(52px, 8vw, 88px) 0;
  border-radius: 0;
}
.shop-body .trust-band .section-title,
.shop-body .trust-band h2 {
  max-width: 16ch;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
}
.shop-body .trust-grid {
  display: grid;
  gap: 20px 28px;
  margin-top: 28px;
}
@media (min-width: 720px) {
  .shop-body .trust-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.shop-body .trust-grid > div {
  padding: 0;
  background: none;
  border: 0;
}
.shop-body .trust-grid strong {
  font-family: var(--display);
  font-size: 1.05rem;
  display: block;
  margin-bottom: 6px;
  color: #fff;
}
.shop-body .trust-grid p {
  color: rgba(245, 243, 237, .72);
  font-size: .9rem;
  line-height: 1.45;
}

/* FAQ softer */
.shop-body .faq details {
  margin-bottom: 8px;
  padding: 4px 16px;
  border-radius: 14px;
  transition: background .25s ease;
}
.shop-body .faq details[open] {
  background: color-mix(in srgb, var(--forest) 6%, var(--card));
}

/* —— order page —— */
.order-steps {
  position: relative;
  gap: 6px;
}
.order-steps li {
  position: relative;
  background: transparent;
  border: 0;
  padding: 8px 14px;
  border-radius: 10px;
  color: var(--muted);
  transition: color .3s ease, background .3s ease;
}
.order-steps li.on {
  background: color-mix(in srgb, var(--forest) 12%, transparent);
  color: var(--forest);
  border: 0;
}
.order-steps li.on::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  background: var(--terra);
  border-radius: 2px;
  animation: step-underline .4s var(--ease-out);
}
@keyframes step-underline {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

.order-page .measure {
  margin-bottom: 12px;
  border-radius: 18px;
  overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
}
.order-page .measure:focus-within {
  box-shadow: 0 16px 40px rgba(42, 53, 48, .12);
}
.order-page .breakdown {
  border-radius: 18px;
  padding: 16px 18px;
}
.order-page .seg button {
  transition: background .25s ease, color .25s ease, transform .2s ease;
}
.order-page .seg button:active {
  transform: scale(.98);
}
.order-page #btnAdd {
  border-style: dashed;
  border-width: 1.5px;
  transition: border-color .25s ease, background .25s ease, transform .25s var(--ease-out);
}
.order-page #btnAdd:hover {
  border-color: var(--terra);
  background: color-mix(in srgb, var(--terra) 8%, var(--card));
  transform: translateY(-1px);
}

.order-drawer {
  backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  box-shadow: 0 -12px 40px rgba(42, 53, 48, .14);
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  transition: transform .5s var(--ease-out);
}
.order-drawer.show {
  animation: drawer-in .5s var(--ease-out);
}
@keyframes drawer-in {
  from { opacity: .6; }
  to { opacity: 1; }
}

#skel {
  transition: opacity .35s ease;
}
#skel.is-hiding {
  opacity: 0;
  pointer-events: none;
}
#orderLive {
  animation: fade-rise .55s var(--ease-out);
}
@keyframes fade-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* —— account —— */
.acc-tabs {
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--cream) 80%, transparent);
  border: 0;
  box-shadow: none;
}
.acc-tabs button {
  border-radius: 10px;
  transition: background .25s ease, color .25s ease, transform .2s ease;
}
.acc-tabs button.on {
  background: var(--card);
  box-shadow: 0 6px 18px rgba(42, 53, 48, .08);
  color: var(--forest);
}
.account-shell .panel {
  border-radius: 20px;
  padding: 22px 20px;
}
.acc-panel {
  animation: fade-rise .4s var(--ease-out);
}

/* —— thanks —— */
.thanks-shell {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.thanks-hero {
  text-align: center;
  padding: 36px 0 8px;
}
.thanks-hero .check {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--ok), #1f5c40);
  display: grid;
  place-items: center;
  box-shadow: 0 16px 40px rgba(45, 106, 79, .35);
  animation: thanks-pop .65s var(--ease-spring);
}
@keyframes thanks-pop {
  from { transform: scale(.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.thanks-hero h1 {
  animation: fade-rise .55s var(--ease-out) .08s both;
}
#summaryBox {
  border-radius: 20px;
}
.thanks-steps {
  list-style: none;
  display: grid;
  gap: 12px;
}
.thanks-steps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--surface-lift);
}

/* —— olcu guides —— */
.guide-card {
  transition: transform .4s var(--ease-out), box-shadow .4s ease;
}
.guide-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 56px rgba(26, 36, 28, .32);
}
.guide-caption {
  transition: opacity .35s ease;
}

/* dark */
html[data-theme="dark"] {
  --surface: color-mix(in srgb, var(--card) 90%, transparent);
  --surface-lift: 0 20px 48px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .shop-body .trust-strip .trust-pill {
  border-left-color: color-mix(in srgb, var(--terra) 50%, transparent);
}
html[data-theme="dark"] .acc-tabs {
  background: color-mix(in srgb, var(--surface-2) 90%, transparent);
}
html[data-theme="dark"] .order-steps li.on {
  background: color-mix(in srgb, var(--forest) 18%, transparent);
}

/* —— Instagram band (işlev: sosyal kanıt / takip CTA) —— */
.ig-band {
  margin: clamp(32px, 5vw, 56px) 0 0;
  padding: clamp(48px, 8vw, 88px) 0;
  background:
    radial-gradient(ellipse 50% 60% at 10% 20%, rgba(197,106,74,.22), transparent 55%),
    radial-gradient(ellipse 45% 50% at 90% 80%, rgba(42,53,48,.45), transparent 50%),
    linear-gradient(160deg, #1A241C, #121816 55%, #1e1814);
  color: #fff;
  overflow: hidden;
}
.ig-inner {
  display: grid;
  gap: 28px;
  align-items: center;
}
@media (min-width: 860px) {
  .ig-inner { grid-template-columns: 1.1fr .9fr; gap: 40px; }
}
.ig-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #E8A48A;
  margin-bottom: 12px;
}
.ig-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, #f09433, #bc1888);
  animation: igpulse 2s ease-in-out infinite;
}
@keyframes igpulse {
  0%, 100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.35); opacity: 1; }
}
.ig-grad {
  background: linear-gradient(90deg, #E8A48A, #C56A4A 40%, #dd2a7b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ig-sub {
  margin: 12px 0 18px;
  max-width: 36ch;
  color: rgba(245,243,237,.72);
  line-height: 1.55;
}
.ig-perks {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ig-perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  color: rgba(245,243,237,.82);
  font-weight: 650;
}
.ig-perk-ico {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: #E8A48A;
  font-size: .75rem;
}
.ig-follow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(90deg, #f09433, #e6683c 40%, #dc2743 70%, #bc1888);
  color: #fff !important;
  font-weight: 750;
  text-decoration: none;
  box-shadow: 0 14px 36px rgba(188,24,136,.28);
}
.ig-follow:hover { filter: brightness(1.05); color: #fff !important; }

.ig-card {
  display: block;
  padding: 20px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,243,237,.1);
  text-decoration: none;
  color: #fff;
  box-shadow: 0 24px 50px rgba(0,0,0,.28);
  transition: transform .35s var(--ease-out), border-color .3s ease;
}
.ig-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232,164,138,.35);
  color: #fff;
}
.ig-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.ig-ring {
  width: 52px; height: 52px; border-radius: 50%;
  padding: 2px;
  background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);
  flex-shrink: 0;
}
.ig-ring-inner {
  width: 100%; height: 100%; border-radius: 50%;
  background: #1A241C;
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 800;
  color: #E8A48A;
}
.ig-handle { font-weight: 800; font-size: 1rem; }
.ig-name { font-size: .75rem; color: rgba(245,243,237,.5); margin-top: 2px; }
.ig-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 12px 0;
  margin-bottom: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align: center;
}
.ig-stats b {
  display: block;
  font-family: var(--display);
  font-size: .95rem;
}
.ig-stats span {
  font-size: .65rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(245,243,237,.45);
}
.ig-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
}
.ig-tiles i {
  aspect-ratio: 1;
  display: block;
  background:
    repeating-linear-gradient(180deg, var(--c) 0 6px, color-mix(in srgb, var(--c) 70%, #000) 6px 10px);
}
.ig-card-cta {
  display: block;
  text-align: center;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 11px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--terra) 85%, #fff);
  color: #1A241C;
}

/* —— sipariş: checkout tarzı sabit özet paneli (desktop) —— */
@media (min-width: 960px) {
  .checkout-flow {
    max-width: calc(100% - 340px);
  }
  .shop-body.has-drawer .order-drawer {
    display: block !important;
    left: auto;
    right: max(20px, calc((100vw - 1080px) / 2));
    bottom: auto;
    top: 96px;
    width: 300px;
    max-width: calc(100vw - 40px);
    transform: none !important;
    border-radius: 18px;
    border: 1px solid var(--line);
    box-shadow: 0 22px 50px rgba(42, 53, 48, .14);
    padding: 14px 16px;
  }
  .shop-body.has-drawer .order-drawer.show {
    animation: none;
  }
  .shop-body.has-drawer .order-drawer .row {
    flex-direction: column;
    align-items: stretch;
  }
  .shop-body.has-drawer .order-drawer .btn {
    width: 100%;
  }
  .shop-body.has-drawer {
    padding-bottom: 48px !important;
  }
  .shop-body.has-drawer .fab-stack {
    bottom: calc(24px + var(--safe-b)) !important;
    right: max(20px, calc((100vw - 1080px) / 2 + 320px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-hero::before,
  .shop-hero-media,
  .shop-hero-media::after,
  .hero-ambient,
  .thanks-hero .check,
  #orderLive,
  .acc-panel,
  .order-drawer.show,
  .ig-dot {
    animation: none !important;
  }
  .reveal-left,
  .reveal-scale {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .shop-top::after {
    transition: none;
  }
}