/* =====================================================================
   Masal Bahçesi — "Keçe & Kil" teması
   styles.css'ten SONRA yüklenir; temel bileşenleri dokunsal, çocuksu ve
   kompakt bir görünüme çevirir (kalın yuvarlak köşeler, kil gölgeleri,
   keçe dikişleri, basınca "ezilen" düğmeler, seçince zıplayan parçalar).
   ===================================================================== */

:root {
  --clay-bg: #fff3e4;
  --clay-cream: #fffaf2;
  --clay-ink: #3a2c52;
  --clay-ink-soft: #6f6286;
  --clay-purple: #8f6bff;
  --clay-purple-dk: #5c3ed6;
  --clay-pink: #ff7fb0;
  --clay-pink-dk: #d84f86;
  --clay-mint: #6fd9b4;
  --clay-mint-dk: #2fa883;
  --clay-sun: #ffc85c;
  --clay-sun-dk: #e09a16;
  --clay-sky: #7cc9ff;
  --clay-sky-dk: #3b8fd0;
  --clay-shadow: #e3d3f2;
  --clay-shadow-dk: #cdb9e6;
  --stitch: rgba(58,44,82,.28);
  --r-xl: 30px;
  --r-lg: 22px;
  --r-md: 16px;
}

body {
  color: var(--clay-ink);
  background-color: var(--clay-bg);
  background-image:
    radial-gradient(1200px 700px at 10% -10%, #ffe1ee, transparent 60%),
    radial-gradient(1000px 600px at 100% 10%, #e3efff, transparent 55%),
    radial-gradient(900px 700px at 50% 110%, #eadcff, transparent 60%),
    /* keçe dokusu: minik noktalar */
    radial-gradient(rgba(58,44,82,.06) 1px, transparent 1.4px);
  background-size: auto, auto, auto, 9px 9px;
}

/* ---------- Üst bar ---------- */
.site-header { padding: 14px 24px 6px; }
.brand-mark {
  border-radius: 24px;
  border: 3px solid #fff;
  box-shadow: 0 6px 0 var(--clay-shadow), 0 14px 26px rgba(80,40,120,.14);
  transform: rotate(-4deg);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.brand-mark:hover { transform: rotate(4deg) scale(1.05); }
.brand h1 { font-size: 36px; }
.tagline { font-weight: 700; }

/* ---------- Kil düğmeler ---------- */
.ghost-btn,
.lang-switch {
  border: 2.5px solid #fff;
  background: var(--clay-cream);
  color: var(--clay-ink);
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--clay-shadow), 0 10px 18px rgba(80,40,120,.08);
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.ghost-btn { padding: 10px 16px; font-weight: 800; }
.ghost-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--clay-shadow), 0 14px 22px rgba(80,40,120,.12); }
.ghost-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--clay-shadow); }
.ghost-btn .badge { background: var(--clay-pink); box-shadow: 0 2px 0 var(--clay-pink-dk); }
.premium-btn {
  background: linear-gradient(180deg, #4b3e8a, #352a66);
  color: #ffe7b0; border-color: #6a5bb0;
  box-shadow: 0 5px 0 #231a4a, 0 10px 18px rgba(35,26,74,.25);
}
.premium-btn:hover { box-shadow: 0 7px 0 #231a4a, 0 14px 22px rgba(35,26,74,.3); }
.premium-btn:active { box-shadow: 0 1px 0 #231a4a; }
.premium-btn.is-premium {
  background: linear-gradient(180deg, #ffd27a, #ffb547);
  color: #3a2c52; border-color: #fff;
  box-shadow: 0 5px 0 var(--clay-sun-dk), 0 10px 18px rgba(224,154,22,.25);
}
.premium-btn.is-premium:hover { box-shadow: 0 7px 0 var(--clay-sun-dk), 0 14px 22px rgba(224,154,22,.3); }
.premium-btn.is-premium:active { box-shadow: 0 1px 0 var(--clay-sun-dk); }
.lang-btn.active { background: var(--clay-ink); }

.primary-btn {
  margin-top: 0;
  padding: 15px 22px;
  border-radius: 999px;
  border: 3px solid #fff;
  background: linear-gradient(180deg, #a68bff 0%, var(--clay-purple) 60%, #7f5bf5 100%);
  color: #fff;
  font-weight: 900; font-size: 17px;
  box-shadow:
    0 7px 0 var(--clay-purple-dk),
    0 16px 26px rgba(92,62,214,.28),
    inset 0 3px 0 rgba(255,255,255,.4);
  transition: transform .12s ease, box-shadow .12s ease, filter .15s ease;
}
.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 0 var(--clay-purple-dk), 0 20px 30px rgba(92,62,214,.32), inset 0 3px 0 rgba(255,255,255,.4);
}
.primary-btn:active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 var(--clay-purple-dk), 0 6px 12px rgba(92,62,214,.2), inset 0 3px 0 rgba(255,255,255,.4);
}
.primary-btn[disabled] { filter: grayscale(.35) opacity(.75); transform: none; }
.generate-btn { width: 100%; font-size: 18px; padding: 17px 24px; }
.generate-btn .btn-icon { font-size: 22px; animation: wand-wiggle 2.4s ease-in-out infinite; }
@keyframes wand-wiggle {
  0%, 70%, 100% { transform: rotate(0); }
  78% { transform: rotate(-16deg) scale(1.1); }
  86% { transform: rotate(14deg) scale(1.1); }
  94% { transform: rotate(-6deg); }
}

.icon-btn { border-radius: 999px; }

/* ---------- Yerleşim ve kartlar ---------- */
.layout {
  margin: 6px auto 28px;
  padding: 0 24px;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 960px) { .layout { grid-template-columns: 1fr; } }

.card {
  background: var(--clay-cream);
  border: 3px solid #fff;
  border-radius: var(--r-xl);
  padding: 22px;
  box-shadow:
    0 10px 0 var(--clay-shadow),
    0 24px 40px rgba(80,40,120,.12),
    inset 0 2px 0 rgba(255,255,255,.9);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  position: relative;
}
/* keçe dikişi */
.card::before {
  content: ""; position: absolute; inset: 9px;
  border: 2px dashed rgba(143,107,255,.22);
  border-radius: calc(var(--r-xl) - 9px);
  pointer-events: none;
}
.card h2 { font-family: "Baloo 2", "Fraunces", serif; font-size: 24px; font-weight: 800; }
.muted { color: var(--clay-ink-soft); font-weight: 600; }

/* ---------- Sihirbaz başlığı & adım izi ---------- */
.wizard-head { display: grid; gap: 12px; }
.wizard-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px; position: relative;
}
.wizard-steps::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 21px;
  border-top: 3px dashed var(--stitch);
  z-index: 0;
}
.ws {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: 6px;
  cursor: pointer; user-select: none;
}
.ws-dot {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 20px;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 4px 0 var(--clay-shadow), 0 8px 14px rgba(80,40,120,.1);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s, box-shadow .2s;
  filter: grayscale(.6) opacity(.7);
}
.ws-label { font-size: 12px; font-weight: 800; color: var(--clay-ink-soft); }
.ws:hover .ws-dot { transform: translateY(-2px) scale(1.05); }
.ws.active .ws-dot {
  filter: none;
  background: linear-gradient(180deg, #fff1a8, var(--clay-sun));
  box-shadow: 0 5px 0 var(--clay-sun-dk), 0 10px 18px rgba(224,154,22,.28);
  transform: scale(1.12);
  animation: dot-bounce 1.6s ease-in-out infinite;
}
.ws.active .ws-label { color: var(--clay-ink); }
.ws.done .ws-dot {
  filter: none;
  background: linear-gradient(180deg, #b6f0d8, var(--clay-mint));
  box-shadow: 0 4px 0 var(--clay-mint-dk), 0 8px 14px rgba(47,168,131,.22);
}
.ws.done .ws-label { color: var(--clay-mint-dk); }
@keyframes dot-bounce {
  0%, 100% { transform: scale(1.12) translateY(0); }
  50% { transform: scale(1.12) translateY(-4px); }
}

/* ---------- Adımlar ---------- */
form { margin-top: 14px; gap: 12px; }
.wizard-track { position: relative; min-height: 320px; }
.wizard-step { display: none; gap: 12px; }
.wizard-step.active { display: grid; }
.wizard-step.enter-right { animation: step-in-right .4s cubic-bezier(.22,1,.36,1); }
.wizard-step.enter-left  { animation: step-in-left  .4s cubic-bezier(.22,1,.36,1); }
@keyframes step-in-right { from { opacity: 0; transform: translateX(28px) rotate(.6deg); } to { opacity: 1; transform: none; } }
@keyframes step-in-left  { from { opacity: 0; transform: translateX(-28px) rotate(-.6deg); } to { opacity: 1; transform: none; } }
.wizard-lead {
  margin: 0; font-weight: 800; font-size: 15px; color: var(--clay-ink);
  background: #fff; border-radius: var(--r-md);
  padding: 10px 14px;
  border: 2px solid #fff;
  box-shadow: 0 3px 0 var(--clay-shadow);
  display: flex; align-items: center; gap: 8px;
}
.wizard-lead::before { content: "💬"; }

.wizard-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; }
.wiz-btn { font-size: 15px; }
.wiz-btn.is-hidden { visibility: hidden; pointer-events: none; }
.wiz-next { width: auto; margin-left: auto; padding: 12px 22px; font-size: 16px; }
.wiz-next:not(.is-hidden) { animation: nudge 2.8s ease-in-out infinite; }
@keyframes nudge {
  0%, 80%, 100% { transform: translateX(0); }
  88% { transform: translateX(5px); }
  94% { transform: translateX(-2px); }
}
.wiz-next:hover, .wiz-next:active { animation: none; }

/* 1. adım: fotoğraf + ad/yaş yan yana */
.photo-optional {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 2.5px solid #fff;
  background: linear-gradient(180deg, #fff7dc, #ffe08a);
  color: #5a3d08;
  font-weight: 900;
  font-size: 15px;
  line-height: 1.35;
  box-shadow: 0 4px 0 var(--clay-sun-dk), 0 10px 18px rgba(224,154,22,.22);
  animation: photo-note 2.4s ease-in-out infinite;
}
.photo-optional::before {
  content: "📸";
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 3px 0 var(--clay-sun-dk);
  font-size: 18px;
}
@keyframes photo-note {
  0%, 100% { box-shadow: 0 4px 0 var(--clay-sun-dk), 0 10px 18px rgba(224,154,22,.22); }
  50% { box-shadow: 0 4px 0 var(--clay-sun-dk), 0 0 0 6px rgba(255,200,92,.45); }
}
.hero-row { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: stretch; }
@media (max-width: 520px) { .hero-row { grid-template-columns: 1fr; } }
.hero-fields { display: grid; gap: 10px; align-content: center; }
.gender-field legend {
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 900;
  color: var(--clay-ink);
}
.opt-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #8a5a12;
  background: #fff4d2;
  border-radius: 999px;
  padding: 2px 8px;
}
.gender-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gender-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  border-radius: 18px;
  border: 2.5px solid #fff;
  background: #fff;
  color: var(--clay-ink);
  font: inherit;
  font-weight: 900;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--clay-shadow);
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s, background .15s;
}
.gender-emoji { font-size: 22px; line-height: 1; }
.gender-btn:hover { transform: translateY(-2px); }
.gender-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--clay-shadow); }
.gender-btn.active {
  background: linear-gradient(180deg, #fff7dc, #ffe08a);
  border-color: var(--clay-sun);
  box-shadow: 0 4px 0 var(--clay-sun-dk), 0 10px 16px rgba(224,154,22,.22);
  transform: translateY(-2px);
}
.gender-btn.boing { animation: boing .5s cubic-bezier(.34,1.56,.64,1); }
.photo-drop {
  aspect-ratio: 1/1;
  border: 3px dashed rgba(143,107,255,.45);
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.9), transparent 55%),
    linear-gradient(160deg, #f1e9ff, #ffe6f1);
  box-shadow: inset 0 4px 10px rgba(80,40,120,.08), 0 4px 0 var(--clay-shadow);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), border-color .15s, background .15s;
}
@media (max-width: 520px) { .photo-drop { aspect-ratio: 16/9; } }
.photo-drop:hover { transform: scale(1.02) rotate(-1deg); border-color: var(--clay-purple); }
.photo-drop.drag { transform: scale(1.04); border-color: var(--clay-pink); }
.photo-empty { gap: 4px; font-size: 13px; color: var(--clay-ink-soft); }
.photo-emoji { font-size: 34px; line-height: 1; animation: bob 3.2s ease-in-out infinite; }
.photo-clear { border: 2px solid #fff; }

/* Alanlar */
.field { gap: 5px; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field > legend { margin-bottom: 6px; }
.field > span, .field > legend { font-size: 12.5px; font-weight: 900; color: var(--clay-ink-soft); letter-spacing: .02em; text-transform: uppercase; }
.field input[type="text"], .field input[type="number"], .field input[type="email"], .field input[type="password"], .field textarea, select {
  border: 2.5px solid #fff;
  border-radius: var(--r-md);
  background: #fff;
  padding: 11px 14px;
  font-weight: 700;
  box-shadow: inset 0 3px 6px rgba(80,40,120,.08), 0 3px 0 var(--clay-shadow);
  transition: box-shadow .15s, transform .15s;
}
.field input:focus, .field textarea:focus, select:focus {
  border-color: var(--clay-sun);
  box-shadow: inset 0 3px 6px rgba(80,40,120,.06), 0 3px 0 var(--clay-sun-dk), 0 0 0 4px rgba(255,200,92,.3);
}
.field textarea { min-height: 64px; }
.counter { bottom: -16px; font-weight: 800; }

/* Keçe yamalar (tema / tarz) */
.chips { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 9px; }
.chip {
  border: 2.5px solid #fff;
  border-radius: 18px;
  background: #fff;
  padding: 9px 10px;
  gap: 9px;
  box-shadow: 0 4px 0 var(--clay-shadow), 0 8px 14px rgba(80,40,120,.06);
  position: relative;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .15s, background .15s;
}
.chip::after {
  content: ""; position: absolute; inset: 5px;
  border: 1.5px dashed transparent; border-radius: 12px;
  transition: border-color .15s;
  pointer-events: none;
}
.chip:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 7px 0 var(--clay-shadow), 0 14px 20px rgba(80,40,120,.1); }
.chip:active { transform: translateY(2px) scale(.98); box-shadow: 0 1px 0 var(--clay-shadow); }
.chip.active {
  background: linear-gradient(180deg, #fff7dc, #ffeab0);
  border-color: var(--clay-sun);
  box-shadow: 0 5px 0 var(--clay-sun-dk), 0 12px 18px rgba(224,154,22,.22);
  transform: translateY(-2px);
}
.chip.active::after { border-color: rgba(224,154,22,.5); }
.chip .chip-ico {
  width: 36px; height: 36px; border-radius: 12px;
  border: 2px solid #fff;
  box-shadow: 0 3px 0 rgba(58,44,82,.18);
}
.chip .chip-label { font-weight: 800; font-size: 13.5px; }
.chip.boing, .pill.boing { animation: boing .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes boing {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.12) rotate(-3deg); }
  60%  { transform: scale(.96) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}
.chip.active.boing .chip-ico { animation: ico-spin .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes ico-spin { from { transform: rotate(-20deg) scale(.8); } to { transform: rotate(0) scale(1); } }

/* Kil boncuklar (sayfa sayısı) */
.pills {
  padding: 8px; gap: 8px; width: 100%;
  border: 2.5px solid #fff; border-radius: 20px;
  background: #fff;
  box-shadow: inset 0 3px 6px rgba(80,40,120,.08), 0 3px 0 var(--clay-shadow);
  justify-content: center;
}
.pill {
  padding: 10px 16px; font-weight: 900; font-size: 14px;
  background: var(--clay-cream);
  border: 2px solid #fff;
  box-shadow: 0 4px 0 var(--clay-shadow);
  color: var(--clay-ink-soft);
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s, background .15s, color .15s;
}
.pill:hover { transform: translateY(-2px); }
.pill:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--clay-shadow); }
.pill.active {
  background: linear-gradient(180deg, #ffa0c8, var(--clay-pink));
  color: #fff;
  box-shadow: 0 4px 0 var(--clay-pink-dk), 0 8px 14px rgba(216,79,134,.28);
  transform: translateY(-2px) scale(1.06);
}
.pill-pro { color: #a6791a; }
.pill-pro.active { background: linear-gradient(180deg, #4b3e8a, #352a66); box-shadow: 0 4px 0 #231a4a; color: #ffe7b0; }

/* Özet kartı */
.summary-card {
  background: linear-gradient(180deg, #fff, #f5efff);
  border: 2.5px solid #fff; border-radius: var(--r-md);
  padding: 10px 14px 10px 44px; font-weight: 800; font-size: 14px;
  color: var(--clay-ink);
  box-shadow: 0 3px 0 var(--clay-shadow);
  position: relative; min-height: 44px;
}
.summary-card::before { content: "🧸"; position: absolute; left: 12px; top: 8px; font-size: 20px; }
.generate-hint { margin: 0; font-size: 13px; }

/* Gizlilik notu — kompakt */
.photo-privacy { margin: 2px 0 0; padding: 10px 12px; font-size: 12.5px; border-radius: var(--r-md); border-width: 2px; }
.photo-privacy-icon { width: 30px; height: 30px; }

/* ---------- Sağ kart: masal ---------- */
.story-card { min-height: 0; }
.story-empty { padding: 14px 10px 6px; gap: 6px; }
.illustration {
  width: min(100%, 300px);
  border-radius: var(--r-lg);
  border: 3px solid #fff;
  box-shadow: 0 8px 0 var(--clay-shadow), 0 18px 30px rgba(80,40,120,.14);
  transform: rotate(-2deg);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.illustration:hover { transform: rotate(2deg) scale(1.03); }
.story-empty h3 { font-family: "Baloo 2", "Fraunces", serif; font-size: 22px; }
.story-generating h3, .ready-meta h3 { font-family: "Baloo 2", "Fraunces", serif; }
.gen-illustration { border-radius: 36px; border: 3px solid #fff; box-shadow: 0 8px 0 var(--clay-shadow), 0 18px 30px rgba(80,40,120,.14); }
.gen-progress { height: 14px; border: 2px solid #fff; box-shadow: inset 0 2px 4px rgba(80,40,120,.12); background: #f3ecfb; }
.gen-steps li { border: 2px solid #fff; box-shadow: 0 2px 0 var(--clay-shadow); font-weight: 800; }
.ready-cover { border: 4px solid #fff; border-radius: var(--r-lg); box-shadow: 0 10px 0 var(--clay-shadow), 0 26px 44px rgba(80,40,120,.22); }
.ready-badge { border: 2px solid #fff; box-shadow: 0 3px 0 rgba(47,168,131,.35); background: #d8f7ea; color: var(--clay-mint-dk); }
.ready-actions .primary-btn { width: auto; }

/* Hikâye paylaşımı: kapalıyken küçük düğme, tıklanınca metin açılır */
.story-promo {
  position: relative; z-index: 1;
  width: fit-content;
  max-width: min(380px, calc(100% - 32px));
  margin: 10px auto 6px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.story-promo.is-open { width: min(380px, calc(100% - 32px)); }
@media (min-width: 961px) {
  .story-promo {
    width: min(1200px, calc(100% - 56px));
    max-width: 1200px;
    margin: 0 auto 10px;
    align-items: flex-end;
  }
  .story-promo.is-open {
    width: min(1200px, calc(100% - 56px));
    align-items: flex-end;
  }
  .story-promo-row { justify-content: flex-end; }
}
.story-promo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.story-promo-cue {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #3a2c52;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 #fff, 0 0 8px #fff;
}
.story-promo-cue-arrow {
  display: inline-flex;
  color: #3a2c52;
  animation: story-nudge 1.15s ease-in-out infinite;
}
.story-promo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--clay-purple);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--clay-purple-dk);
}
.story-promo-ig { flex: 0 0 auto; }
.story-promo-handle { font-weight: 800; letter-spacing: .01em; }
.story-promo-toggle:hover { transform: translateY(-1px); }
.story-promo-toggle:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--clay-purple-dk); }
@keyframes story-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}
.story-promo-panel {
  margin-top: 10px;
  padding: 14px 14px 12px;
  border-radius: 18px;
  border: 3px solid #fff;
  background: var(--clay-cream);
  box-shadow: 0 6px 0 var(--clay-shadow);
  display: grid;
  width: 100%;
  box-sizing: border-box;
  gap: 8px;
  transform-origin: top center;
  animation: story-pop .28s cubic-bezier(.34,1.56,.64,1);
}
.story-promo-panel[hidden] { display: none; }
@media (min-width: 961px) {
  .story-promo-panel { width: min(380px, 100%); align-self: flex-end; }
}
.story-promo-panel p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--clay-ink); }
.story-promo-lead { font-weight: 800; font-size: 16px; }
.story-promo-required { font-weight: 800; color: var(--clay-pink-dk); }
.story-promo-form,
.story-promo-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}
.story-promo-form {
  background: var(--clay-pink-dk);
  box-shadow: 0 4px 0 #a83266;
}
.story-promo-send {
  background: var(--clay-purple);
  box-shadow: 0 4px 0 var(--clay-purple-dk);
}
.story-promo-form:active,
.story-promo-send:active { transform: translateY(2px); }
.story-promo-status { font-weight: 700; color: var(--clay-ink-soft); }
.story-promo-status:empty { display: none; }
@keyframes story-pop {
  from { opacity: 0; transform: translateY(-8px) scale(.96); }
  to { opacity: 1; transform: none; }
}

/* Geri bildirim kartı */
.feedback-card { width: calc(100% - 48px); }

/* ---------- Kitap görüntüleyici: görsel üstte, metin ayrı panelde ---------- */
.book-shell { width: min(960px, 96vw); padding: 14px; }
.book-stage {
  aspect-ratio: 5/4;
  width: min(100%, calc(78vh * 5 / 4));
  margin: 0 auto;
  position: relative;
}
.turn-alert { display: none; }
.page {
  display: flex; flex-direction: column;
  background: var(--clay-cream);
  border-radius: 26px;
  border: 3px solid #fff;
  box-shadow: 0 30px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.page::after { width: 28px; background: linear-gradient(90deg, rgba(0,0,0,.18), transparent); }
.page .page-img {
  position: relative; inset: auto;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16/9;
  background-color: #efe6fa;
  border-bottom: 3px solid #fff;
}
.page .page-img::before { display: none; }
.page .page-number {
  top: 12px; right: 14px;
  background: rgba(20,10,30,.45);
  border: 1.5px solid rgba(255,255,255,.5);
}
.page-body {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 22px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Kaydırılabilir metinde üst/alt "daha var" gölgeleri */
  background:
    linear-gradient(var(--clay-cream) 30%, rgba(255,250,242,0)) center top / 100% 36px local,
    linear-gradient(rgba(255,250,242,0), var(--clay-cream) 70%) center bottom / 100% 36px local,
    radial-gradient(farthest-side at 50% 0, rgba(58,44,82,.16), transparent) center top / 100% 12px scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(58,44,82,.16), transparent) center bottom / 100% 12px scroll,
    var(--clay-cream);
  background-repeat: no-repeat;
}
.page-body .page-title {
  position: static; max-width: none;
  color: var(--clay-purple-dk);
  text-shadow: none;
  font-family: "Baloo 2", "Fraunces", serif; font-weight: 800;
  font-size: clamp(12px, 1.3vw, 14px);
  letter-spacing: .02em; text-transform: uppercase; opacity: .8;
}
.page-body .page-text {
  position: static;
  color: var(--clay-ink);
  text-shadow: none;
  font-family: "Fraunces", serif;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.5;
}
.page-body.txt-m  .page-text { font-size: clamp(15px, 1.75vw, 20px); line-height: 1.48; }
.page-body.txt-l  .page-text { font-size: clamp(14px, 1.55vw, 18px); line-height: 1.46; }
.page-body.txt-xl .page-text { font-size: clamp(13px, 1.4vw, 16.5px); line-height: 1.45; }
.page.page-locked { background: var(--clay-cream); }
.page-gate {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 28px 26px;
}
.page-gate h2 {
  margin: 0;
  max-width: 16ch;
  font-family: "Baloo 2", "Fraunces", serif;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--clay-ink);
}
.page-gate p {
  margin: 0;
  max-width: 34ch;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--clay-ink-soft);
}
.page-gate-btn {
  margin-top: 8px;
  border: 2.5px solid #fff;
  border-radius: 999px;
  padding: 12px 22px;
  background: linear-gradient(180deg, #a68bff 0%, var(--clay-purple) 60%, #7f5bf5 100%);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 5px 0 var(--clay-purple-dk);
  cursor: pointer;
}
.page-gate-btn:hover { transform: translateY(-1px); }
.page-gate-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--clay-purple-dk); }
/* Telefon dik: kitap yüksekliği açıkça verilir (Safari'de auto yükseklik
   sayfayı küçültüyordu). Üstte "yan çevirin" uyarısı durur. */
.book-modal.phone-read {
  padding: 8px;
  box-sizing: border-box;
  place-items: stretch;
}
.book-modal.phone-read .book-shell {
  width: min(520px, 100%);
  height: 100%;
  max-height: none;
  justify-self: center;
  padding: 48px 0 6px;
  box-sizing: border-box;
  grid-template-rows: 1fr auto;
  gap: 8px;
}
.book-modal.phone-read .book-stage,
.book-modal.wide-read .book-stage {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.book-modal.phone-read .page:not(.cover) .page-img {
  flex: 0 0 28%;
  height: 28%;
  max-height: 190px;
  aspect-ratio: auto;
}
.book-modal.phone-read .page-body { padding: 14px 18px 18px; }
.book-modal.phone-read .page-body .page-text,
.book-modal.phone-read .page-body.txt-m .page-text,
.book-modal.phone-read .page-body.txt-l .page-text { font-size: 22px; line-height: 1.5; }
.book-modal.phone-read .page-body.txt-xl .page-text { font-size: 18px; line-height: 1.45; }

/* Uyarı kitap sahnesinin DIŞINDA ve yüksek z-index ile durur.
   Sayfa katmanları (z-index 10+) yoksa uyarının üstünü kapatıyordu.
   Telefonda genişlik dar olduğu için JS sınıfına bağlı değil. */
@media (max-width: 560px) {
  .book-modal[aria-hidden="false"]:not(.turn-dismissed) .turn-alert {
    display: flex;
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: 46px;
    bottom: 58px;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(28, 16, 48, .42);
    border-radius: 26px;
  }
}
.turn-alert-card {
  width: min(300px, 100%);
  background: var(--clay-cream);
  border: 3px solid #fff;
  border-radius: 26px;
  box-shadow: 0 8px 0 var(--clay-shadow), 0 18px 36px rgba(40, 20, 60, .28);
  padding: 18px 16px 16px;
  text-align: center;
}
.turn-phone {
  width: 46px;
  height: 76px;
  margin: 2px auto 8px;
  border: 3px solid var(--clay-ink);
  border-radius: 12px;
  background: #fff;
  position: relative;
  animation: turn-phone 1.8s ease-in-out infinite;
}
.turn-phone span {
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--clay-purple);
}
@keyframes turn-phone {
  0%, 18% { transform: rotate(0deg); }
  48%, 100% { transform: rotate(-90deg); }
}
.turn-alert-title {
  margin: 0;
  font-family: "Baloo 2", "Fraunces", serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--clay-ink);
  line-height: 1.15;
}
.turn-alert-sub {
  margin: 6px 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--clay-ink-soft);
  line-height: 1.35;
}
.turn-stay {
  border: 2.5px solid #fff;
  border-radius: 999px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #fff7dc, #ffe08a);
  color: var(--clay-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 4px 0 #e0b15a;
  cursor: pointer;
}

/* Telefon yatay: görsel solda, yazı sağda, sayfa ekranı doldurur */
.book-modal.wide-read {
  padding: 6px;
  box-sizing: border-box;
  place-items: stretch;
}
.book-modal.wide-read .book-shell {
  width: 100%;
  height: 100%;
  max-height: none;
  padding: 42px 4px 4px;
  box-sizing: border-box;
  grid-template-rows: 1fr auto;
  gap: 6px;
}
.book-modal.wide-read .page:not(.cover) { flex-direction: row; }
.book-modal.wide-read .page:not(.cover) .page-img {
  flex: 0 0 42%;
  width: 42%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border-bottom: 0;
  border-right: 3px solid #fff;
}
.book-modal.wide-read .page:not(.cover) .page-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 14px 16px 16px;
}
.book-modal.wide-read .page-body .page-text,
.book-modal.wide-read .page-body.txt-m .page-text,
.book-modal.wide-read .page-body.txt-l .page-text { font-size: 22px; line-height: 1.45; }
.book-modal.wide-read .page-body.txt-xl .page-text { font-size: 18px; line-height: 1.4; }
.book-modal.wide-read .nav-btn { width: 40px; height: 40px; }
/* Kapak: tam sayfa görsel */
.page.cover { display: block; }
.page.cover .page-img { position: absolute; inset: 0; width: auto; aspect-ratio: auto; border-bottom: 0; }
.page.cover .page-img::before { display: block; }
.page.cover .cover-title h1 { font-family: "Baloo 2", "Fraunces", serif; }
.page.cover .cover-title p {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: rgba(20,10,30,.4); border: 1.5px solid rgba(255,255,255,.5);
  font-weight: 800;
}
.nav-btn, .page-indicator {
  border: 2px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.14);
}
.nav-btn:hover { background: rgba(255,255,255,.28); }

/* ---------- Modallar / çekmece ---------- */
.drawer-inner { border-radius: var(--r-xl) 0 0 var(--r-xl); }
.library-item { border: 2.5px solid #fff; border-radius: 18px; box-shadow: 0 4px 0 var(--clay-shadow); }
.library-item:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--clay-shadow), 0 12px 20px rgba(80,40,120,.1); }
.gift-card { border: 3px solid #fff; box-shadow: 0 10px 0 var(--clay-shadow), 0 30px 60px rgba(80,40,120,.3); }

.profile-until { margin: 0 0 12px; font-size: 14px; }
.profile-grant {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.55);
}
.profile-grant.hidden { display: none; }
.profile-grant p { margin: 0; font-size: 14px; line-height: 1.4; }
.profile-grant-status:empty { display: none; }
.profile-grant-status { font-size: 14px; font-weight: 700; }

/* ---------- Küçük ekranlar ---------- */
.ghost-btn, .primary-btn, .pill { white-space: nowrap; }
.layout > *, .card, .wizard-track, .wizard-step { min-width: 0; }
@media (max-width: 720px) {
  .site-header { flex-wrap: wrap; padding: 12px 14px 4px; gap: 10px; }
  .header-actions { flex-wrap: wrap; width: 100%; gap: 8px; }
  .header-actions .ghost-btn { padding: 8px 12px; font-size: 13px; }
  .brand h1 { font-size: 28px; }
  .brand-mark { width: 50px; height: 50px; }
  .layout { padding: 0 12px; gap: 14px; }
  .card { padding: 18px 14px; }
  .feedback-card { width: calc(100% - 24px); }
  .story-promo { max-width: calc(100% - 24px); }
  .wizard-steps::before { left: 14%; right: 14%; }
  .ws-dot { width: 40px; height: 40px; font-size: 18px; }
  .ws-label { font-size: 11px; }
  .wizard-lead { font-size: 14px; }
  .chips { grid-template-columns: repeat(2, 1fr); }
  .pill { padding: 9px 12px; font-size: 13px; }
}

/* ---------- Hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
  .ws.active .ws-dot, .wiz-next, .generate-btn .btn-icon, .photo-emoji, .photo-optional,
  .chip.boing, .pill.boing, .wizard-step.enter-right, .wizard-step.enter-left,
  .turn-phone, .story-promo-cue-arrow, .story-promo-panel { animation: none !important; }
}