/* Görsel derinlik — retention / atmosphere (müşteri yüzü) */
.shop-body {
  position: relative;
  overflow-x: clip;
}
.shop-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
  background:
    radial-gradient(ellipse 70% 45% at 12% 18%, color-mix(in srgb, var(--terra) 14%, transparent), transparent 60%),
    radial-gradient(ellipse 55% 40% at 88% 8%, color-mix(in srgb, var(--forest) 12%, transparent), transparent 55%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
html[data-theme="dark"] .shop-body::before {
  opacity: .35;
  mix-blend-mode: soft-light;
}
/* Sadece içerik katmanı — fixed FAB / drawer / CTA’yı bozma */
.shop-body > .site-live,
.shop-body > .ticker,
.shop-body > .shop-top,
.shop-body > header,
.shop-body > main,
.shop-body > footer,
.shop-body > .account-shell,
.shop-body > .order-page {
  position: relative;
  z-index: 1;
}

.shop-hero {
  min-height: min(94vh, 820px);
}
.shop-hero-media {
  background:
    radial-gradient(ellipse 85% 65% at 75% 30%, rgba(232,164,138,.2), transparent 58%),
    repeating-linear-gradient(180deg, rgba(197,106,74,.16) 0 10px, rgba(179,90,60,.05) 10px 18px),
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(245,243,237,.1), transparent 55%);
  animation: pleatDrift 22s ease-in-out infinite alternate;
}
@keyframes pleatDrift {
  from { transform: scale(1) translate3d(0,0,0); opacity: .5; }
  to { transform: scale(1.04) translate3d(-1.5%, 1%, 0); opacity: .65; }
}
.shop-hero-media::after {
  box-shadow:
    0 28px 60px rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(245,243,237,.15);
  animation: frameFloat 9s ease-in-out infinite alternate, pleatShimmer 6s ease-in-out infinite;
}
@keyframes pleatShimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}
.shop-hero-copy .shop-eyebrow {
  display: inline-block;
  padding: 6px 0;
  border-bottom: 2px solid color-mix(in srgb, #E8A48A 70%, transparent);
  letter-spacing: .18em;
}
.hero-ambient {
  position: absolute;
  inset: auto -10% -20% -10%;
  height: 55%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 30% 80%, rgba(197,106,74,.25), transparent 50%),
    radial-gradient(ellipse at 70% 90%, rgba(42,53,48,.35), transparent 45%);
  filter: blur(40px);
  animation: ambientPulse 10s ease-in-out infinite alternate;
}
@keyframes ambientPulse {
  from { opacity: .7; transform: translateY(0); }
  to { opacity: 1; transform: translateY(-12px); }
}

.section {
  position: relative;
}
/* section dividers → fluid.css (every other section only) */
.section::before { display: none; }

.fabric-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.fabric-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 0;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  box-shadow: 0 10px 28px rgba(42,53,48,.06);
}
.fabric-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 18px 40px rgba(42,53,48,.12);
}
.fabric-card .swatch {
  height: 88px;
  background:
    repeating-linear-gradient(180deg, var(--sw, #c4b49a) 0 7px, color-mix(in srgb, var(--sw, #c4b49a) 70%, #fff) 7px 12px);
  position: relative;
}
.fabric-card .swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(26,36,28,.35));
}
.fabric-card .body { padding: 12px 14px 16px; }
.fabric-card strong {
  font-family: var(--display);
  font-size: 1.05rem;
  display: block;
}
.fabric-card span {
  font-size: .8rem;
  color: var(--muted);
}

.mini-price {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--card) 92%, var(--terra)), var(--card));
  box-shadow: 0 20px 50px rgba(42,53,48,.08);
  align-items: end;
}
.mini-price .amount {
  font-family: var(--display);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 800;
  color: var(--forest);
  letter-spacing: -.03em;
  line-height: 1;
}
@media (max-width: 640px) {
  .mini-price { grid-template-columns: 1fr; }
}

.how-stage {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 24px 60px rgba(42,53,48,.08);
}
.how-canvas {
  position: relative;
  min-height: 220px;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--forest) 10%, transparent), transparent 60%),
    linear-gradient(180deg, var(--cream), var(--card));
  padding: 24px 20px 28px;
}
.ba-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.ba-rail > * { scroll-snap-align: start; flex: 0 0 min(86vw, 340px); }

.trust-band {
  position: relative;
  overflow: hidden;
  margin: 48px 0 0;
  padding: 48px 0;
  background:
    linear-gradient(135deg, #24302B 0%, #1A241C 45%, #2A3530 100%);
  color: #fff;
}
.trust-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(180deg, rgba(245,243,237,.05) 0 8px, transparent 8px 16px);
  opacity: .4;
  pointer-events: none;
  animation: pleatDrift 22s ease-in-out infinite alternate-reverse;
}
.trust-band .wrap { position: relative; z-index: 1; }

.review-band {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.review-card {
  flex: 0 0 min(78vw, 320px);
  scroll-snap-align: start;
  padding: 20px 22px;
  border-radius: 20px;
  border: 0;
  background: var(--card);
  box-shadow: 0 16px 40px rgba(42,53,48,.07);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.review-card:hover { transform: translateY(-3px); }
@media (min-width: 900px) {
  .review-band {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
  }
  .review-card { flex: none; }
}

.guide-card {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #1A241C;
  color: #F5F3ED;
  box-shadow: 0 22px 50px rgba(26,36,28,.25);
}
.guide-card-head { padding: 16px 18px 8px; }
.guide-card-head h3 { color: #fff; }
.guide-card-head p { color: rgba(245,243,237,.7); font-size: .85rem; }
.guide-stage { padding: 0 8px 8px; }
.guide-caption {
  padding: 12px 18px 16px;
  font-size: .85rem;
  color: rgba(245,243,237,.85);
  border-top: 1px solid rgba(245,243,237,.1);
}

.split-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .split-cta { grid-template-columns: 1fr; } }
.split-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--card);
  color: inherit;
  text-decoration: none;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  box-shadow: 0 12px 28px rgba(42,53,48,.05);
}
.split-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--terra) 40%, var(--line));
  box-shadow: 0 18px 40px rgba(42,53,48,.1);
}
.split-card .n {
  font-family: var(--display);
  font-weight: 800;
  font-size: .85rem;
  color: var(--terra);
  letter-spacing: .08em;
}
.split-card strong { font-family: var(--display); font-size: 1.15rem; color: var(--ink); }
.split-card span { font-size: .88rem; color: var(--muted); }
.split-card em {
  margin-top: 8px;
  font-style: normal;
  font-weight: 750;
  color: var(--terra);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.split-card.alt {
  background: linear-gradient(160deg, color-mix(in srgb, var(--forest) 8%, var(--card)), var(--card));
}

.ticker {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--cream) 80%, transparent);
  backdrop-filter: blur(8px);
}
.shop-top {
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--topbar) 92%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .shop-hero-media,
  .shop-hero-media::after,
  .hero-ambient,
  .trust-band::before { animation: none !important; }
}