/* Page sections below the hero, in page order. */

/* ── Sample spread ("Tanıdık yüzler") ───────────────────────── */
.intro { padding-top: 38px; }
.sample-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 680px;
  height: 315px;
  margin: 43px auto 0;
  overflow: hidden;
  border-radius: 5px;
  background: var(--paper);
  box-shadow: var(--spread-shadow);
  transform: rotate(-2deg);
}
.sample-picture { overflow: hidden; }
.sample-picture img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 65%; }
/* The story text stays a flat, opaque paper surface in both themes. */
.sample-text { position: relative; padding: 42px 32px 20px; background: var(--paper); color: var(--paper-ink); box-shadow: inset 12px 0 14px -12px var(--paper-fold); }
.sample-text small { color: var(--paper-muted); font-size: var(--text-50); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); }
.sample-text > p { margin-top: 24px; font-size: var(--text-400); line-height: var(--leading-body); }
.page-num { position: absolute; bottom: 16px; right: 50%; font-size: var(--text-75); }
.sample-controls { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 28px; }
.sample-controls button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  transition: transform .2s, box-shadow .2s;
}
.sample-controls button:hover { transform: translateY(-2px); box-shadow: var(--glass-hover-shadow); }
.sample-controls span { color: var(--color-muted); font-size: var(--text-200); }

/* ── Steps ("Bir masala üç küçük adım") ─────────────────────── */
.steps { padding-top: 60px; }
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 45px; }
.step-grid article { position: relative; padding: 20px 8px; text-align: center; }
.step-number { position: absolute; left: 20px; top: 0; font-family: var(--font-sans); font-size: var(--text-350); color: var(--color-muted); opacity: .8; }
.step-icon {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: auto auto 20px;
  border-radius: var(--radius-box);
  background: var(--step-1-fill);
  color: var(--step-1-ink);
  font-size: 38px;
  transform: rotate(-8deg);
}
.step-grid article:nth-child(2) .step-icon { background: var(--step-2-fill); color: var(--step-2-ink); transform: rotate(6deg); }
.step-grid article:nth-child(3) .step-icon { background: var(--step-3-fill); color: var(--step-3-ink); transform: rotate(-5deg); }
.step-grid p { margin-top: 12px; font-size: var(--text-300); line-height: var(--leading-body); color: var(--color-muted); }

/* ── Theme cards ("Her aileye bir masal var") ───────────────── */
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.story-card {
  padding: 10px 10px 0;
  border: 1px solid var(--card-edge);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--card-shadow);
  text-align: left;
  transition: transform .3s;
}
.story-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-5px); }
.story-scene { position: relative; height: 245px; overflow: hidden; border-radius: var(--radius-scene); background: var(--scene-family); }
.story-scene > span { position: absolute; top: 25px; left: 0; right: 0; z-index: 1; text-align: center; font-size: var(--text-50); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); }
.family > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 63%; }
.family > span { top: auto; bottom: 15px; left: 42px; right: 42px; padding: 7px; border: 1px solid var(--scene-label-edge); border-radius: 20px; background: var(--scene-label-bg); color: var(--paper-ink); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.winter { background: var(--scene-winter); color: var(--scene-winter-ink); }
.winter > img { position: absolute; bottom: 18px; left: 50%; width: 140px; transform: translateX(-50%); }
.snow { position: absolute; top: 70px; width: 100%; text-align: center; word-spacing: 60px; color: var(--scene-snow); font-size: var(--text-600); }
.snow i { position: relative; top: -12px; font-size: var(--text-350); }
.sharing { background: var(--scene-sharing); color: var(--scene-sharing-ink); }
.share-art { position: absolute; inset: 85px 15px 25px; display: flex; justify-content: center; align-items: center; }
.share-art img { width: 105px; transform: rotate(-10deg); }
.share-art img:last-child { transform: rotate(10deg); }
.share-art i { margin-top: -35px; color: var(--scene-heart); font-size: 28px; }
.story-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 21px 10px 24px; }
.story-label h3 { font-size: var(--text-550); }
.story-label p { margin-top: 7px; font-size: var(--text-200); line-height: var(--leading-snug); color: var(--color-muted); }

/* ── Trust panel ("Özenle hazırlanır") ──────────────────────── */
.trust {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  align-items: center;
  gap: 65px;
  margin-top: 50px;
  margin-bottom: 0;
  padding: 65px 55px;
  border-radius: var(--radius-panel);
  background: var(--panel);
}
.trust-mascot {
  display: grid;
  place-items: center;
  width: 250px;
  height: 220px;
  margin: auto;
  border: 1px solid var(--mascot-edge);
  border-radius: 50% 45% 48% 39%;
  background: var(--mascot-fill);
  box-shadow: var(--mascot-shadow);
  transform: rotate(-7deg);
}
.trust-mascot img { width: 185px; transform: rotate(7deg); }
.trust-points { margin-top: 25px; }
.trust-points p { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: var(--text-300); color: var(--color-muted); }
.trust-points span { display: grid; place-items: center; flex: 0 0 23px; height: 23px; border-radius: 50%; background: var(--check-fill); color: var(--check-ink); font-size: var(--text-200); }

/* ── FAQ ("Merak ettikleriniz") — a narrower, centred column ── */
.faq { max-width: calc(850px + 2 * var(--gutter)); padding-top: 100px; }
.faq-list { margin-top: 35px; padding: 0 28px; border: 1px solid var(--color-line); border-radius: var(--radius-box); background: var(--color-surface); }
details { border-bottom: 1px solid var(--color-line); }
.faq-list details:last-child { border-bottom: 0; }
summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 60px; padding: 24px 0; list-style: none; cursor: pointer; font-size: var(--text-350); font-weight: var(--weight-bold); }
summary::-webkit-details-marker { display: none; }
summary span { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--color-soft); color: var(--color-accent); font-size: var(--text-600); font-weight: 400; }
details[open] summary span { transform: rotate(45deg); }
details p { padding: 0 30px 24px 0; font-size: var(--text-300); line-height: 1.9; color: var(--color-muted); }

/* ── Closing call to action ─────────────────────────────────── */
/* The glow reaches 5% past the section; clip it so it never widens the page on screens narrower than ~1450px. */
.closing { isolation: isolate; overflow-x: clip; padding-top: 70px; padding-bottom: 100px; text-align: center; }
.closing::before { content: ''; position: absolute; inset: 40px -5% 0; z-index: -1; pointer-events: none; background: var(--closing-glow); filter: blur(24px); opacity: var(--closing-glow-opacity); }
.closing > img { width: 86px; margin-bottom: 24px; }
.closing h2 { font-size: var(--text-h2-lg); }
.closing > p { margin: 22px 0; font-size: var(--text-350); color: var(--color-muted); }
.closing .offer { justify-content: center; }

@media (max-width: 1100px) {
  .step-grid { gap: 25px; }
  .story-label { padding-inline: 5px; }
  .story-label h3 { font-size: var(--text-500); }
}
@media (max-width: 1000px) {
  .story-label p { font-size: var(--text-150); }
}
@media (max-width: 700px) {
  .intro { padding-top: 30px; }
  .sample-spread { height: 240px; margin-top: 30px; transform: rotate(-1.5deg); }
  .sample-picture img { object-position: 50% 68%; }
  .sample-text { padding: 23px 16px 20px; }
  .sample-text small { font-size: var(--text-25); letter-spacing: .05em; }
  .sample-text > p { margin-top: 18px; font-size: var(--text-200); }

  .steps { padding-top: var(--section-space); }
  .step-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 30px; }
  .step-grid article { padding: 12px 0; }
  .step-number { left: 16%; top: 15px; }
  .step-icon { margin-bottom: 17px; }

  .story-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 30px; }
  .story-card { width: 100%; max-width: 360px; margin: auto; padding: 9px 9px 0; border-radius: 27px; }
  .story-scene { border-radius: 20px; }
  .story-label { padding: 21px 10px 24px; }
  .story-label h3 { font-size: var(--text-600); }
  .story-label p { font-size: var(--text-250); }

  .trust { grid-template-columns: 1fr; gap: 27px; margin-top: 30px; padding: 38px 25px; border-radius: var(--radius-card); text-align: center; }
  .trust .eyebrow { line-height: 1.7; }
  .trust-mascot { width: 190px; height: 170px; }
  .trust-mascot img { width: 145px; }
  .trust-points p { justify-content: flex-start; align-items: flex-start; font-size: var(--text-200); line-height: 1.65; text-align: left; }

  .faq { padding-top: 65px; }
  .faq-list { padding-inline: 18px; }
  summary { padding: 20px 0; font-size: var(--text-250); line-height: var(--leading-snug); }
  details p { padding-right: 0; font-size: var(--text-250); }

  .closing { padding-top: 45px; padding-bottom: 65px; }
  .closing::before { inset: 30px 0 0; }
  .closing > img { width: 75px; }
  .closing > p { font-size: var(--text-250); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sample-controls button { background: var(--glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .sample-controls button { background: var(--glass-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (forced-colors: active) {
  .story-card, .sample-controls button, .step-icon { border: 1px solid ButtonText; }
  .closing::before { display: none; }
}