@font-face {
  font-family: "Baloo 2";
  src: url(/assets/fonts/baloo2-tr.woff2) format("woff2");
  font-weight: 500 800;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url(/assets/fonts/nunito-tr.woff2) format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --murekkep: #0E1030;
  --gece: #141733;
  --gece-2: #1E2247;
  --gece-3: #272C58;
  --gece-4: #3E3A7E;
  --krem: #FFF4D6;
  --altin: #FFD66B;
  --pembe: #F3B0C3;
  --pembe-koyu: #A0305A;
  --lavanta: #8E86F0;
  --lavanta-acik: #DCD7FB;
  --lavanta-soluk: #EDE8FF;
  --mor: #5E56C8;
  --metin: #EFEAFB;
  --metin-soluk: #C9C7E4;
  --koyu: #26244A;
  --koyu-soluk: #4A4775;
  --odak: #FFD66B;
  --yay: cubic-bezier(.34, 1.56, .64, 1);
  --baslik: "Baloo 2", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
  --govde: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ust-h: 4.25rem;
  /* Heights of the edges that overlap the bottom of the section above; its padding must clear them. */
  --kenar-h: clamp(2.4rem, 5vw, 4.5rem);
  --bulut-h: clamp(4.5rem, 9vw, 8rem);
  --koy-h: clamp(4.5rem, 11.8vw, 13rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ust-h) + .5rem); }
body {
  margin: 0;
  background: var(--gece);
  color: var(--metin);
  font: 400 1.0625rem/1.6 var(--govde);
  overflow-x: clip;
}
img, svg { display: block; }
h1, h2, h3 { font-family: var(--baslik); font-weight: 800; line-height: 1.1; margin: 0; }
p { margin: 0 0 1rem; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: .08em; }
:focus-visible { outline: 3px solid var(--odak); outline-offset: 3px; border-radius: 6px; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.kap { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.kap--dar { width: min(100% - 2rem, 48rem); }
.g1 { --gecikme: .08s; }
.g2 { --gecikme: .16s; }
.g3 { --gecikme: .24s; }

.atla {
  position: absolute; left: 1rem; top: -5rem; z-index: 50;
  background: var(--altin); color: var(--murekkep); font-weight: 800;
  padding: .6rem 1rem; border-radius: 12px; border: 3px solid var(--murekkep);
}
.atla:focus { top: 1rem; }

/* ---------- header ---------- */
.ust {
  position: sticky; top: 0; z-index: 20;
  height: var(--ust-h);
  background: rgba(20, 23, 51, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid var(--murekkep);
}
.ust-ic { height: 100%; display: flex; align-items: center; gap: 1rem; }
.logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--krem); border-radius: 14px; }
.logo-ikon { width: 2.6rem; height: 2.6rem; transition: transform .5s var(--yay); }
.logo:hover .logo-ikon { transform: rotate(-12deg) scale(1.1); }
.logo-yazi { font: 800 1.45rem/1 var(--baslik); letter-spacing: .01em; text-shadow: 0 3px 0 var(--murekkep); padding-top: .2rem; }
.ust-nav { margin-left: auto; display: none; }
.ust-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .35rem; }
.ust-nav a {
  display: block; padding: .45rem .85rem; border-radius: 999px; white-space: nowrap;
  font: 700 1.02rem/1.2 var(--baslik); text-decoration: none; color: var(--metin);
  transition: background .2s, transform .3s var(--yay);
}
.ust-nav a:hover { background: var(--gece-4); transform: translateY(-2px) rotate(-2deg); }
@media (min-width: 48rem) {
  .ust-nav { display: block; }
}

/* ---------- shared bits ---------- */
.dugme {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 3.25rem; padding: .7rem 1.35rem;
  border: 3px solid var(--murekkep); border-radius: 999px;
  font: 800 1.12rem/1.1 var(--baslik); text-decoration: none;
  box-shadow: 0 6px 0 var(--murekkep);
  transition: transform .15s, box-shadow .15s;
}
.dugme svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dugme--altin { background: var(--altin); color: var(--murekkep); }
.dugme--krem { background: var(--krem); color: var(--murekkep); }
.dugme:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--murekkep); }
@media (hover: hover) {
  .dugme:hover { animation: jole .6s ease-out; }
  .dugme:hover svg { animation: asagi 1s ease-in-out infinite; }
}

.magazalar { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.3rem 0 1.1rem; }
.magazalar--orta { justify-content: center; }
.magaza {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 3.4rem; padding: .5rem .85rem .5rem .6rem;
  background: var(--krem); color: var(--koyu);
  border: 3px solid var(--murekkep); border-radius: 18px;
  box-shadow: 0 6px 0 var(--murekkep);
  font: 800 1.02rem/1.05 var(--baslik);
  text-decoration: none;
}
@media (min-width: 30rem) {
  .magaza { gap: .65rem; min-height: 3.6rem; padding: .55rem 1.2rem .55rem .9rem; font-size: 1.15rem; }
}
.magaza svg { width: 1.5rem; height: 1.5rem; flex: none; fill: var(--lavanta-acik); stroke: var(--murekkep); stroke-width: 2; stroke-linecap: round; }
.magaza small { display: block; font: 800 .74rem/1.2 var(--govde); letter-spacing: .09em; text-transform: uppercase; color: var(--pembe-koyu); }
.magaza--yakinda { border-style: dashed; cursor: default; }
.magaza--yakinda::after {
  content: ""; position: absolute; top: -.55rem; right: -.55rem; width: 1.3rem; height: 1.3rem;
  background: var(--altin); border: 3px solid var(--murekkep); border-radius: 50%;
  animation: pirilti 2.4s ease-in-out infinite;
}
@media (hover: hover) { .magaza:hover { animation: kipir .5s ease-in-out; } }

.bolum-bas { text-align: center; max-width: 44rem; margin: 0 auto 2.6rem; }
.ust-yazi {
  display: inline-block; margin: 0 0 .8rem; padding: .25rem .9rem;
  font: 800 .88rem/1.4 var(--govde); letter-spacing: .08em; text-transform: uppercase;
  border: 3px solid var(--murekkep); border-radius: 999px;
  background: var(--altin); color: var(--murekkep);
  transform: rotate(-2deg);
}
.bolum-bas h2 { font-size: clamp(2.1rem, 4.6vw + .6rem, 3.5rem); letter-spacing: -.01em; margin-bottom: .9rem; }
.bolum-giris { font-size: 1.15rem; }

/* A section label with a character peeking from behind it. */
.etiket-sahne { position: relative; display: inline-block; margin: 0 0 .8rem; }
.etiket-sahne .ust-yazi { position: relative; z-index: 1; margin: 0; }
.etiket-ejder {
  position: absolute; left: 50%; bottom: 1.1rem; z-index: 0;
  width: 4.2rem; margin-left: -2.1rem; height: auto;
  transform-origin: 50% 100%;
  animation: ejder-bak 6.5s var(--yay) 1s infinite;
}
.etiket-penguen { position: absolute; left: calc(100% + .35rem); bottom: -.3rem; width: 3.3rem; }
.etiket-penguen svg { width: 100%; height: auto; transform-origin: 50% 100%; animation: nefes 3.6s ease-in-out infinite; }
.uyku-z { position: absolute; left: 72%; top: -.2rem; width: 1rem; height: 1rem; }
.uyku-z span {
  position: absolute; left: 0; bottom: 0;
  font: 800 1rem/1 var(--baslik); color: var(--mor);
  opacity: 0;
  animation: z-uc 4.2s ease-out infinite;
}
.uyku-z span:nth-child(2) { animation-delay: 1.4s; font-size: 1.25rem; }
.uyku-z span:nth-child(3) { animation-delay: 2.8s; font-size: 1.5rem; }

section { position: relative; }
.kenar {
  position: absolute; left: 0; bottom: calc(100% - 2px);
  width: 100%; height: var(--kenar-h);
  pointer-events: none;
}
.kenar--bulut { height: var(--bulut-h); }
.kenar--koy { height: var(--koy-h); }
.kenar-dolgu { fill: var(--zemin); }
.kenar-cizgi { fill: none; stroke: var(--murekkep); stroke-width: 5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

/* ---------- hero ---------- */
.kahraman {
  overflow: hidden;
  padding: 1.2rem 0 clamp(6rem, 12vw, 9rem);
  background:
    radial-gradient(ellipse 70% 45% at 72% 100%, rgba(142, 134, 240, .55), transparent 70%),
    linear-gradient(180deg, #0F1230 0%, var(--gece) 35%, var(--gece-3) 75%, #3A3680 100%);
}
.gok { position: absolute; inset: 0; pointer-events: none; }
.gok-katman {
  position: absolute; inset: -10% 0 0; width: 100%; height: 110%;
  color: var(--krem); fill: var(--krem);
  will-change: opacity;
}
/* Stars behind the headline stay faint, so no dot reads as a smudge on a letter. */
.kahraman .gok-katman {
  will-change: transform, opacity;
  -webkit-mask-image: linear-gradient(180deg, #000 0 32%, rgba(0, 0, 0, .3) 44%);
  mask-image: linear-gradient(180deg, #000 0 32%, rgba(0, 0, 0, .3) 44%);
}
@media (min-width: 60rem) {
  .kahraman .gok-katman {
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .3) 0 44%, #000 58%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .3) 0 44%, #000 58%);
  }
}
.gok-1 { animation: goz-kirp-gok 4.2s ease-in-out infinite; }
.gok-2 { animation: goz-kirp-gok 5.6s ease-in-out -1.8s infinite; }
.gok-3 { animation: goz-kirp-gok 3.4s ease-in-out -2.6s infinite; }
.kayan-yildiz {
  position: absolute; top: 9%; left: 62%;
  width: 9rem; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #FFF4D6, rgba(255, 244, 214, 0));
  opacity: 0;
  transform: rotate(-24deg);
  animation: kayan 11s ease-in 3s infinite;
}
.kayan-yildiz::before {
  content: ""; position: absolute; left: -4px; top: -4px; width: 11px; height: 11px;
  background: #FFF4D6; border-radius: 50%; box-shadow: 0 0 12px 4px rgba(255, 231, 166, .7);
}
.bulut { position: absolute; color: #2F3570; width: 13rem; height: auto; transform: translate3d(var(--x), 0, 0); will-change: transform; }
.bulut-1 { --x: 8vw; top: 4%; width: 11rem; animation: bulut-git 90s linear -30s infinite; }
.bulut-2 { --x: 55vw; top: 58%; width: 15rem; color: #363D7C; animation: bulut-git 120s linear -80s infinite; }
.bulut-3 { --x: 80vw; top: 26%; width: 8rem; color: #2A2F66; animation: bulut-git 75s linear -10s infinite; }

.kahraman-ic { position: relative; display: grid; gap: 1rem; align-items: center; }
.kahraman-metin { position: relative; z-index: 2; }
.rozet {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1rem;
  padding: .35rem 1rem .35rem .7rem;
  background: var(--gece-4); color: var(--krem);
  border: 3px solid var(--murekkep); border-radius: 999px;
  font: 800 .98rem/1.3 var(--govde);
  box-shadow: 0 4px 0 var(--murekkep);
}
.rozet svg { width: 1.2rem; height: 1.2rem; color: var(--altin); animation: don 6s linear infinite; }
.kahraman-baslik {
  font-size: clamp(2.6rem, 6vw + .6rem, 4.5rem);
  line-height: 1.02;
  color: var(--krem);
  letter-spacing: -.015em;
  text-shadow: 0 4px 0 var(--murekkep), 0 7px 0 rgba(14, 16, 48, .35);
  margin-bottom: 1.1rem;
}
.vurgu { position: relative; display: inline-block; white-space: nowrap; }
.harfler { color: var(--altin); }
.harf { display: inline-block; animation: harf-dalga 7s ease-in-out calc(var(--i, 0) * 70ms + 3s) infinite; }
.harf:nth-child(2) { --i: 1; }
.harf:nth-child(3) { --i: 2; }
.harf:nth-child(4) { --i: 3; }
.harf:nth-child(5) { --i: 4; }
.harf:nth-child(6) { --i: 5; }
.harf:nth-child(7) { --i: 6; }
.harf:nth-child(8) { --i: 7; }
.harf:nth-child(9) { --i: 8; }
.harf:nth-child(10) { --i: 9; }
.kivrim { position: absolute; left: 0; right: 0; bottom: -.12em; width: 100%; height: .3em; overflow: visible; }
.kivrim path { fill: none; stroke: var(--pembe); stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 420; stroke-dashoffset: 0; }
.giris { font-size: clamp(1.1rem, .8vw + .95rem, 1.4rem); max-width: 34rem; color: var(--metin); }
.kahraman-alt { margin: 0 0 1rem; }
.kucuk { font-size: .98rem; color: var(--metin); margin: 0; }
.gir-1 { --gd: .1s; }
.gir-2 { --gd: .55s; }
.gir-3 { --gd: .61s; }
.gir-4 { --gd: .67s; }
.gir-5 { --gd: .73s; }

.sahne { position: relative; width: min(100%, 26rem); aspect-ratio: 600 / 560; margin: 0 auto; order: -1; }
/* Short phones: the scene gives up height so the headline and the store badges fit the first screen. */
@media (max-height: 50rem) and (max-width: 59.99rem) {
  .sahne { width: min(100%, 26rem, calc(32vh * 600 / 560)); width: min(100%, 26rem, calc(32svh * 600 / 560)); }
}
.sahne > * { position: absolute; }
.sahne svg { overflow: visible; }
.sahne-hale {
  left: 8%; top: 0; width: 84%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 231, 166, .5) 0%, rgba(255, 231, 166, .18) 42%, rgba(255, 231, 166, 0) 68%);
  animation: nabiz 5s ease-in-out infinite;
}
.parilti { height: auto; color: #FFE7A6; animation: parla 3s ease-in-out infinite; }
.p1 { left: 1%; top: 2%; width: 7%; }
.p2 { left: 37%; top: -3%; width: 5%; color: var(--krem); animation-duration: 2.4s; animation-delay: -.8s; }
.p3 { left: 94%; top: 25%; width: 6%; animation-duration: 3.6s; animation-delay: -1.9s; }
.p4 { left: -3%; top: 43%; width: 5%; color: var(--pembe); animation-duration: 2.8s; animation-delay: -1.2s; }
.p5 { left: 97%; top: 45%; width: 4.5%; color: var(--krem); animation-duration: 3.2s; animation-delay: -.4s; }
.p6 { left: 27%; top: 5%; width: 3.5%; animation-duration: 2.2s; animation-delay: -1.5s; }
.sahne-ay { left: 18.33%; top: 10.7%; width: 63.33%; height: auto; transform-origin: 50% 80%; animation: ay-sallan 6s ease-in-out 1.2s infinite; }
.ay-acik { opacity: 0; animation: ay-bak 9s steps(1) infinite; }
.ay-kapali { animation: ay-kapa 9s steps(1) infinite; }
.sahne-tavsan { left: 5.5%; top: 50.5%; width: 21.7%; animation: bak 7s var(--yay) 1.3s infinite; }
.sahne-ejder { left: 72%; top: 52.5%; width: 23.3%; animation: bak 7s var(--yay) 4.8s infinite; }
.sahne-yorgan { left: 3.33%; top: 58.9%; width: 93.33%; height: auto; transform-origin: 50% 100%; animation: nefes 4s ease-in-out .6s infinite; }
.sahne-yildiz { left: 77%; top: 0; width: 18%; animation: yildiz-oyna 5s ease-in-out 1.7s infinite; }
.sahne-yildiz::before {
  content: ""; position: absolute; inset: -18%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255, 214, 107, .45), rgba(255, 214, 107, 0) 68%);
  animation: nabiz 2.6s ease-in-out infinite;
}
.sahne-baykus { left: 0; top: 8%; width: 24%; }
.baykus-kus { position: relative; width: 74%; margin: 0 auto; transform-origin: 50% 90%; animation: egil 4.5s ease-in-out infinite; }
.baykus-bulut { width: 100%; margin-top: -30%; color: #C9C2FF; position: relative; animation: suzul 5s ease-in-out infinite; }
.sahne-zzz { left: 60%; top: 0; width: 12%; height: 12%; }
.sahne-zzz span {
  position: absolute; left: 0; bottom: 0;
  font: 800 1.6rem/1 var(--baslik); color: var(--krem);
  text-shadow: 0 3px 0 var(--murekkep);
  opacity: 0;
  animation: z-uc 4.5s ease-out infinite;
}
.sahne-zzz span:nth-child(2) { animation-delay: 1.5s; font-size: 2rem; }
.sahne-zzz span:nth-child(3) { animation-delay: 3s; font-size: 2.4rem; }

/*
 * Opening act, played once. The loop that follows keeps the same delay in both lists so that when
 * site.js adds .sakin and the entrance drops out of the list, the running loop is not restarted.
 */
.js:not(.sakin) .harf { animation: harf-gel .9s var(--yay) calc(var(--i, 0) * 55ms + .25s) both, harf-dalga 7s ease-in-out calc(var(--i, 0) * 70ms + 3s) infinite; }
.js:not(.sakin) .kivrim path { animation: ciz 1.2s ease-out 1s both; }
.js:not(.sakin) .gir { animation: zipla-gel .8s var(--yay) var(--gd, 0s) both; }
.js:not(.sakin) .sahne-yorgan { animation: yorgan-gel .6s var(--yay) both, nefes 4s ease-in-out .6s infinite; }
.js:not(.sakin) .sahne-ay { animation: ay-dogus 1.1s var(--yay) .1s both, ay-sallan 6s ease-in-out 1.2s infinite; }
.js:not(.sakin) .sahne-tavsan { animation: hop-gel .8s var(--yay) .35s both, bak 7s var(--yay) 1.3s infinite; }
.js:not(.sakin) .sahne-ejder { animation: hop-gel .8s var(--yay) .47s both, bak 7s var(--yay) 4.8s infinite; }
.js:not(.sakin) .sahne-baykus { animation: patla .8s var(--yay) .59s both; }
.js:not(.sakin) .sahne-yildiz { animation: yildiz-dus .9s var(--yay) .75s both, yildiz-oyna 5s ease-in-out 1.7s infinite; }

[data-tik] { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.js .sahne-ay.uyan { animation: jole .9s ease-out; }
.sahne-ay.uyan .ay-acik { animation: none; opacity: 1; }
.sahne-ay.uyan .ay-kapali { animation: none; opacity: 0; }
.js .sahne-yildiz.zipla { animation: yildiz-zipla .9s var(--yay); }
.js .sahne-tavsan.cik, .js .sahne-ejder.cik { animation: cik .9s var(--yay); }
.sahne-baykus.don .baykus-kus { animation: kafa-don .9s ease-in-out; }
.kivilcim {
  position: absolute; width: 1.1rem; height: 1.1rem; pointer-events: none; color: var(--altin);
  animation: kivilcim .8s ease-out forwards;
}

@media (min-width: 60rem) {
  .kahraman { padding-top: 3rem; }
  .kahraman-ic { grid-template-columns: 1.05fr 1fr; min-height: min(78vh, 44rem); gap: 2rem; }
  .sahne { order: 0; width: 100%; max-width: 36rem; }
  .sahne-zzz span { font-size: 2.2rem; }
  .sahne-zzz span:nth-child(2) { font-size: 2.8rem; }
  .sahne-zzz span:nth-child(3) { font-size: 3.4rem; }
}
/* Phones on their side: headline beside the scene, or the first screen is all moon. */
@media (orientation: landscape) and (max-height: 30rem) and (max-width: 59.99rem) {
  .kahraman-ic { grid-template-columns: 1.2fr .8fr; gap: 1.2rem; }
  .sahne { order: 0; width: min(100%, calc(72vh * 600 / 560)); width: min(100%, calc(72svh * 600 / 560)); }
  .kahraman-baslik { font-size: clamp(2rem, 4.6vw, 2.8rem); }
  .giris { font-size: 1.05rem; }
}

/* ---------- personalised page demo ---------- */
.ornek {
  --zemin: var(--lavanta);
  --odak: var(--murekkep);
  background: var(--zemin); color: var(--murekkep);
  padding: 1.5rem 0 calc(var(--kenar-h) + 2.5rem);
  overflow-x: clip;
}
.ornek .kenar-dolgu { fill: var(--lavanta); }
.ornek .bolum-bas h2 { text-shadow: 0 3px 0 var(--krem); }
.ornek .bolum-giris { color: var(--murekkep); }

.kitap {
  position: relative;
  display: grid;
  max-width: 62rem; margin: 0 auto;
  background: #FFFBEF;
  border: 4px solid var(--murekkep); border-radius: 28px;
  box-shadow: 0 12px 0 var(--murekkep), 0 26px 40px rgba(14, 16, 48, .25);
  color: var(--koyu);
  perspective: 2600px;
}
.kitap-sol {
  display: grid; justify-items: center; align-content: center; gap: .6rem;
  padding: 1.6rem 1rem 1rem;
  background:
    radial-gradient(circle at 18% 22%, #F3B0C3 0 5px, transparent 6px),
    radial-gradient(circle at 84% 16%, #FFD66B 0 6px, transparent 7px),
    radial-gradient(circle at 86% 58%, #A69EF5 0 5px, transparent 6px),
    radial-gradient(circle at 12% 62%, #8FE3B5 0 6px, transparent 7px);
  border-radius: 24px 24px 0 0;
}
.kitap-resim {
  width: min(58%, 13rem); aspect-ratio: 1;
  display: grid; place-items: center;
  background: var(--lavanta-soluk); border: 4px solid var(--murekkep); border-radius: 50%;
  box-shadow: inset 0 -10px 0 rgba(94, 86, 200, .15);
}
.kitap-hayvan { width: 78%; height: auto; animation: suzul 3.2s ease-in-out infinite; }
.kitap-hayvan.yeni { animation: patla .7s var(--yay), suzul 3.2s ease-in-out .7s infinite; }
.kitap-arkadas { margin: 0; font-weight: 700; color: var(--koyu-soluk); }
.kitap-arkadas b { color: var(--koyu); font-family: var(--baslik); font-size: 1.15em; }
.kitap-sag { position: relative; padding: .6rem 1.4rem 1.8rem; }
.kitap-etiket {
  font: 800 .8rem/1.3 var(--govde); letter-spacing: .1em; text-transform: uppercase;
  color: var(--koyu-soluk); margin: 0 0 .8rem;
}
/* Every hero's text shares one grid cell (site.js adds hidden copies), so the book is as tall as the longest. */
.kitap-metin { display: grid; font-size: clamp(1.08rem, .7vw + .95rem, 1.32rem); line-height: 1.7; }
.kitap-metin > * { grid-area: 1 / 1; }
.kitap-metin-olcu { visibility: hidden; }
.kitap-metin p { margin: 0 0 .55rem; }
.kitap-metin p:first-child::first-letter {
  float: left; font: 800 3.2em/.8 var(--baslik); color: var(--mor);
  margin: .12em .1em 0 0; text-shadow: 0 3px 0 #F2DFA8;
}
.k-ad {
  display: inline-block; padding: 0 .14em;
  background: #D4E9FF; border-radius: .4em;
  box-shadow: inset 0 -.15em 0 rgba(47, 94, 158, .18);
  font-weight: 800; color: var(--koyu);
}
.k-ek { color: #2F5E9E; }
.k-hayvan { display: inline-block; padding: 0 .14em; background: #D8F5E4; border-radius: .4em; font-weight: 800; color: #1F4F37; }
/* The highlights are inline-blocks, so a line may break right after one and start with a lone "!". */
.k-bag { white-space: nowrap; }
.kitap-metin .yeni { animation: kelime-gel .6s var(--yay) both; animation-delay: calc(var(--s, 0) * 90ms); }

/* The cover is a two-faced leaf hinged at the spine: it swings over, shows its paper side, fades. */
.kitap-kapak { display: none; }
.hazir .kitap-kapak {
  display: block;
  position: absolute; inset: -4px; z-index: 3;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
}
.kapak-on, .kapak-arka {
  position: absolute; inset: 0;
  border: 4px solid var(--murekkep); border-radius: 28px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.kapak-on {
  display: grid; place-content: center; justify-items: center; gap: .3rem;
  background:
    radial-gradient(circle at 20% 25%, rgba(255, 244, 214, .9) 0 3px, transparent 4px),
    radial-gradient(circle at 80% 70%, rgba(255, 244, 214, .9) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 20%, rgba(255, 244, 214, .7) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 80%, rgba(255, 244, 214, .7) 0 2px, transparent 3px),
    linear-gradient(160deg, var(--mor), var(--gece-4));
  color: var(--krem); text-align: center;
}
.kapak-arka {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle, rgba(94, 86, 200, .14) 0 2px, transparent 3px) 0 0 / 26px 26px,
    #F6EFDC;
}
.kitap-kapak-yildiz { width: 5rem; height: 5rem; animation: yildiz-oyna 3s ease-in-out infinite; }
.kitap-kapak-ad { margin: 0; font: 800 clamp(1.8rem, 4vw, 2.6rem)/1 var(--baslik); text-shadow: 0 4px 0 var(--murekkep); }
.kitap-kapak-alt { margin: 0; font-weight: 700; }
.kitap.gorundu .kitap-kapak { animation: kapak-ac 1.5s cubic-bezier(.55, -0.1, .35, 1.1) .7s forwards; }
.kitap.gorundu .kapak-on, .kitap.gorundu .kapak-arka { animation: kapak-sol 1.5s linear .7s forwards; }

.secici { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 2.6rem; }
html:not(.hazir) .secici { display: none; }
.cip, .oto {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 3.1rem; padding: .3rem 1rem .3rem .35rem;
  background: #FFFFFF; color: var(--koyu);
  border: 3px solid var(--murekkep); border-radius: 999px;
  font: 800 1.1rem/1 var(--baslik);
  box-shadow: 0 4px 0 var(--murekkep);
  cursor: pointer;
  transition: transform .3s var(--yay), background .2s, box-shadow .15s;
}
.cip svg { width: 2.3rem; height: 2.3rem; background: var(--lavanta-soluk); border-radius: 50%; padding: .12rem; }
.cip[aria-pressed="true"] { background: var(--altin); transform: translateY(-4px) rotate(-3deg); box-shadow: 0 7px 0 var(--murekkep); }
.cip:active, .oto:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--murekkep); }
@media (hover: hover) { .cip:hover { transform: translateY(-4px) rotate(2deg); } }
.oto { padding: .3rem; width: 3.1rem; justify-content: center; }
.oto svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.oto .oto-oynat { display: none; fill: currentColor; }
.oto[aria-pressed="true"] { background: var(--lavanta-acik); }
.oto[aria-pressed="true"] .oto-dur { display: none; }
.oto[aria-pressed="true"] .oto-oynat { display: inline; }
.oto[hidden] { display: none; }

@media (min-width: 48rem) {
  .kitap { grid-template-columns: .85fr 1.15fr; perspective: 3200px; }
  .kitap::after {
    content: ""; position: absolute; top: 10px; bottom: 10px; left: 42.5%; width: 30px; transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(14, 16, 48, 0), rgba(14, 16, 48, .16) 40%, rgba(14, 16, 48, .3) 50%, rgba(14, 16, 48, .16) 60%, rgba(14, 16, 48, 0));
    pointer-events: none;
  }
  .kitap-sol { border-radius: 24px 0 0 24px; padding: 2rem 1.4rem; }
  .kitap-sag { padding: 2.2rem 2.4rem 2.2rem 2.8rem; }
  /* On the open spread the cover lies on the right page only and turns over onto the left one. */
  .hazir .kitap-kapak { left: 42.5%; --kapak-son: -180deg; }
  .kapak-on { border-radius: 0 28px 28px 0; }
  .kapak-arka { border-radius: 28px 0 0 28px; }
}

/* ---------- how it works ---------- */
.nasil {
  --zemin: var(--krem);
  --odak: var(--murekkep);
  background: var(--zemin); color: var(--koyu);
  padding: 3.5rem 0 calc(var(--koy-h) + 1.5rem);
  overflow-x: clip;
}
.nasil .bolum-bas h2 { color: var(--murekkep); }
.adimlar { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.2rem; position: relative; z-index: 1; }
.adim {
  position: relative;
  display: grid; grid-template-columns: 4.5rem 1fr; column-gap: 1rem; align-items: start;
  background: #FFFFFF;
  border: 4px solid var(--murekkep); border-radius: 28px;
  box-shadow: 0 9px 0 var(--murekkep);
  padding: 1.6rem 1.2rem 1.3rem 1.1rem;
  text-align: left;
  transform: rotate(-1.2deg);
  transition: transform .4s var(--yay);
}
.adim:nth-child(2) { transform: rotate(1deg); }
.adim:nth-child(3) { transform: rotate(-.6deg); }
@media (hover: hover) { .adim:hover { transform: rotate(0) translateY(-6px) scale(1.02); } }
.adim-no {
  position: absolute; top: -1.4rem; left: -.7rem;
  width: 3rem; height: 3rem; display: grid; place-items: center;
  background: var(--altin); border: 4px solid var(--murekkep); border-radius: 50%;
  box-shadow: 0 5px 0 var(--murekkep);
  font: 800 1.5rem/1 var(--baslik); color: var(--murekkep);
  animation: suzul 3.4s ease-in-out infinite;
}
.adim-no b { padding-top: .2rem; }
.adim:nth-child(2) .adim-no { background: var(--pembe); animation-delay: -1.1s; }
.adim:nth-child(3) .adim-no { background: #8FE3B5; animation-delay: -2.2s; }
.adim-resim { grid-column: 1; grid-row: 1 / span 2; width: 4.5rem; height: 4.5rem; margin: .2rem 0 0; }
.adim h3 { grid-column: 2; font-size: 1.35rem; margin: 0 0 .35rem; color: var(--murekkep); }
.adim p { grid-column: 2; margin: 0; color: var(--koyu-soluk); }
.adim-ok { display: none; }
@media (min-width: 40rem) {
  .adim { grid-template-columns: 6rem 1fr; column-gap: 1.4rem; align-items: center; padding: 1.8rem 1.6rem 1.6rem; }
  .adim-resim { width: 6rem; height: 5.6rem; }
}
@media (min-width: 56rem) {
  .adimlar { grid-template-columns: repeat(3, 1fr); gap: 3.4rem; }
  .adim { display: block; text-align: center; padding: 2.4rem 1.5rem 1.6rem; }
  .adim-no { top: -1.9rem; left: 50%; margin-left: -1.9rem; width: 3.8rem; height: 3.8rem; font-size: 1.9rem; }
  .adim-resim { width: 7.5rem; height: 7rem; margin: .4rem auto 1rem; }
  .adim h3 { font-size: 1.55rem; margin-bottom: .5rem; }
  .adim-ok {
    display: block; position: absolute; top: 32%; right: -3.45rem; z-index: 2;
    width: 3.4rem; height: auto; overflow: visible;
    animation: ok-it 1.8s ease-in-out infinite;
  }
  .adim-ok path { fill: none; stroke: var(--mor); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
  .adim-ok .adim-ok-yol { stroke-dasharray: .5 9; }
}

/* ---------- features ---------- */
.ozellikler {
  --zemin: var(--gece);
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255, 244, 214, .9) 50%, transparent 55%),
    radial-gradient(1.5px 1.5px at 72% 12%, rgba(255, 244, 214, .8) 50%, transparent 55%),
    radial-gradient(2px 2px at 88% 64%, rgba(255, 244, 214, .7) 50%, transparent 55%),
    radial-gradient(1.5px 1.5px at 32% 78%, rgba(255, 244, 214, .7) 50%, transparent 55%),
    radial-gradient(2px 2px at 52% 42%, rgba(255, 244, 214, .6) 50%, transparent 55%),
    var(--gece);
  background-size: 520px 420px, 520px 420px, 520px 420px, 520px 420px, 520px 420px, auto;
  padding: 3.5rem 0 calc(var(--kenar-h) + 2rem);
  overflow-x: clip;
}
.ozellikler > .kap { position: relative; z-index: 1; }
.ozellikler .bolum-giris { color: var(--metin-soluk); }
.ozellikler .bolum-bas h2 { text-shadow: 0 4px 0 var(--murekkep); color: var(--krem); }
.koy-tepe { fill: var(--gece-3); }
.pencere { fill: #FFD66B; animation: pencere 9s steps(1) infinite; }
.pencere--2 { animation-duration: 11s; animation-delay: -3s; }
.pencere--3 { animation-duration: 13s; animation-delay: -6.5s; }
/* Only where the page has side margins: on narrower screens a drifting sparkle lands on the heading. */
.ozellik-gok { display: none; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
@media (min-width: 64rem) { .ozellik-gok { display: block; } }
.suzen { position: absolute; width: 1.4rem; height: auto; color: #FFE7A6; animation: suz 14s ease-in-out infinite; }
.s1 { left: 4%; top: 7%; }
.s2 { left: 91%; top: 12%; width: 1rem; color: var(--pembe); animation-duration: 17s; animation-delay: -5s; }
.s3 { left: 2%; top: 38%; width: 1.1rem; animation-duration: 12s; animation-delay: -3s; }
.s4 { left: 95%; top: 45%; animation-duration: 16s; animation-delay: -9s; }
.s5 { left: 6%; top: 76%; width: 1.1rem; color: var(--krem); animation-duration: 15s; animation-delay: -11s; }
.s6 { left: 89%; top: 82%; width: 1rem; animation-duration: 13s; animation-delay: -2s; }
.s7 { left: 30%; top: 3%; width: 1rem; color: var(--krem); animation-duration: 18s; animation-delay: -7s; }
.kartlar { list-style: none; margin: 0; padding: 0; display: grid; gap: 3rem 1.6rem; }
.kart {
  position: relative;
  background: var(--kart); color: var(--koyu);
  border: 4px solid var(--murekkep); border-radius: 28px;
  box-shadow: 0 9px 0 var(--gece-4), 0 9px 0 3px var(--murekkep);
  padding: 2.8rem 1.5rem 1.6rem;
  transition: transform .4s var(--yay);
}
.kart--pembe { --kart: #FBD7E1; }
.kart--yesil { --kart: #CDF3DD; }
.kart--krem { --kart: #FFF4D6; }
.kart--lavanta { --kart: #DCD7FB; }
.kart--seftali { --kart: #FFE3CC; }
.kart--mavi { --kart: #D4E9FF; }
.kart h3 { font-size: 1.5rem; color: var(--murekkep); margin-bottom: .45rem; }
.kart p { margin: 0; color: var(--koyu-soluk); }
.kart-ikon {
  position: absolute; top: -2.3rem; left: 1.3rem;
  width: 4.6rem; height: 4.6rem; display: grid; place-items: center;
  background: #FFFFFF;
  border: 4px solid var(--murekkep);
  border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
  box-shadow: 0 5px 0 var(--murekkep);
}
.kart-ikon svg { width: 3rem; height: 3rem; }
.kart--gunduz .kart-ikon svg { animation: gece-gunduz 10s ease-in-out infinite; transition: transform .8s var(--yay); }
@media (hover: hover) {
  .kart:hover { transform: translateY(-8px) rotate(-1.2deg); }
  .kart:nth-child(even):hover { transform: translateY(-8px) rotate(1.2deg); }
  .kart:hover .kart-ikon svg { animation: kipir .6s ease-in-out; }
  .kart--gunduz:hover .kart-ikon svg { animation: none; transform: rotate(180deg); }
}
@media (min-width: 40rem) { .kartlar { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .kartlar { grid-template-columns: repeat(3, 1fr); } }

/* ---------- story shelf ---------- */
.raf {
  --zemin: var(--pembe);
  --odak: var(--murekkep);
  background: var(--zemin); color: var(--murekkep);
  padding: 3rem 0 calc(var(--kenar-h) + 1.2rem);
  overflow-x: clip;
}
.raf .bolum-bas { margin-bottom: 2rem; }
.raf .bolum-bas h2 { text-shadow: 0 3px 0 #FFF4F7; }
.serit {
  overflow: hidden; padding: .6rem 0 1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.serit-ic { display: flex; width: max-content; animation: serit-kay 55s linear infinite; }
.serit--ters .serit-ic { animation-duration: 70s; animation-direction: reverse; }
.serit:hover .serit-ic { animation-play-state: paused; }
.temalar, .degerler { list-style: none; margin: 0; padding: 0 .5rem; display: flex; gap: .9rem; }
.temalar li {
  background: var(--r); color: #FFFFFF;
  border: 3px solid var(--murekkep); border-radius: 999px;
  padding: .45rem 1.2rem; white-space: nowrap;
  font: 800 1.2rem/1.3 var(--baslik);
  box-shadow: 0 5px 0 var(--murekkep);
}
/* Theme tints from src/ui/storyThemes.ts. */
.temalar li:nth-child(1) { --r: #3E7C59; }
.temalar li:nth-child(2) { --r: #5B4B8A; }
.temalar li:nth-child(3) { --r: #6A5E9E; }
.temalar li:nth-child(4) { --r: #A85A78; }
.temalar li:nth-child(5) { --r: #A8604A; }
.temalar li:nth-child(6) { --r: #5A5470; }
.temalar li:nth-child(7) { --r: #7486B0; }
.temalar li:nth-child(8) { --r: #5D8FA8; }
.temalar li:nth-child(9) { --r: #3B7EA1; }
.temalar li:nth-child(10) { --r: #8C5E5E; }
.temalar li:nth-child(odd) { transform: rotate(-2deg); }
.temalar li:nth-child(even) { transform: rotate(2deg); }
.degerler li {
  background: #FFFFFF; color: var(--koyu);
  border: 3px solid var(--murekkep); border-radius: 999px;
  padding: .3rem 1rem; white-space: nowrap;
  font: 700 1.02rem/1.4 var(--govde);
  box-shadow: 0 4px 0 var(--murekkep);
}
.gecit { display: flex; justify-content: center; gap: clamp(.6rem, 3vw, 2.4rem); margin-top: 1.4rem; padding: 0 1rem; }
.gecit svg { width: clamp(3.4rem, 9vw, 5.5rem); height: auto; animation: hop 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
.gecit svg:nth-child(2) { animation-delay: .2s; }
.gecit svg:nth-child(3) { animation-delay: .4s; }
.gecit svg:nth-child(4) { animation-delay: .6s; }
.gecit svg:nth-child(5) { animation-delay: .8s; }

/* ---------- trust ---------- */
.guven {
  --zemin: var(--lavanta-soluk);
  --odak: var(--murekkep);
  background: var(--zemin); color: var(--koyu);
  padding: 3.5rem 0 calc(var(--bulut-h) + 1.5rem);
  overflow-x: clip;
}
.guven .bolum-bas { margin-bottom: 3.9rem; }
.guven .bolum-bas h2 { color: var(--murekkep); }
.guven .bolum-giris { color: var(--koyu-soluk); }
.guven-izgara { position: relative; }
.guven-baykus { position: absolute; right: 9%; top: -3.4rem; width: 4.4rem; z-index: 0; }
.guven-baykus svg { width: 100%; height: auto; transform-origin: 50% 100%; animation: bak 8s var(--yay) 1.5s infinite; }
.guvenler { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; position: relative; z-index: 1; }
.guven-kart {
  display: flex; gap: 1rem; align-items: flex-start;
  background: #FFFFFF; border: 4px solid var(--murekkep); border-radius: 24px;
  box-shadow: 0 7px 0 var(--murekkep);
  padding: 1.2rem 1.2rem 1.3rem;
  transition: transform .4s var(--yay);
}
.guven-kart svg { flex: none; width: 3.6rem; height: 3.6rem; }
.guven-kart h3 { font-size: 1.35rem; color: var(--murekkep); margin: .15rem 0 .3rem; }
.guven-kart p { margin: 0; color: var(--koyu-soluk); }
.guven-kart a, .guven-not a, .cevap a { color: #4A40B0; font-weight: 800; }
@media (hover: hover) { .guven-kart:hover { transform: translateY(-5px) rotate(-.8deg); } .guven-kart:hover svg { animation: kipir .6s ease-in-out; } }
.guven-not {
  max-width: 50rem; margin: 2.4rem auto 0; padding: 1rem 1.3rem;
  background: var(--lavanta-acik); border: 3px dashed var(--mor); border-radius: 18px;
  color: var(--koyu); font-size: 1rem;
}
@media (min-width: 44rem) { .guvenler { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .guvenler { grid-template-columns: repeat(3, 1fr); } }

/* ---------- faq ---------- */
.sss {
  --zemin: var(--krem);
  --odak: var(--murekkep);
  background: var(--zemin); color: var(--koyu);
  padding: 3.5rem 0 calc(var(--kenar-h) + 2.5rem);
  overflow-x: clip;
}
.sss .bulut-arka { fill: #FFFFFF; }
.sss .bolum-bas h2 { color: var(--murekkep); }
.sorular { display: grid; gap: 1rem; }
.soru {
  background: #FFFFFF; border: 4px solid var(--murekkep); border-radius: 22px;
  box-shadow: 0 6px 0 var(--murekkep);
  transition: transform .3s var(--yay);
}
.soru summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.2rem; min-height: 3.5rem;
  font: 800 1.25rem/1.25 var(--baslik); color: var(--murekkep);
  border-radius: 18px;
}
/* The card's own ink border would swallow the default outline; ring the inside instead. */
.soru summary:focus-visible { outline: 3px solid var(--mor); outline-offset: -7px; background: var(--lavanta-soluk); }
.soru summary::-webkit-details-marker { display: none; }
.soru summary::after {
  content: ""; flex: none; width: 2.2rem; height: 2.2rem;
  background:
    linear-gradient(var(--murekkep), var(--murekkep)) center / 55% 4px no-repeat,
    linear-gradient(var(--murekkep), var(--murekkep)) center / 4px 55% no-repeat,
    var(--altin);
  border: 3px solid var(--murekkep); border-radius: 50%;
  transition: transform .45s var(--yay);
}
.soru[open] summary::after { transform: rotate(135deg); background-color: var(--pembe); }
.soru[open] { transform: rotate(-.4deg); }
.cevap { padding: 0 1.2rem 1.1rem; color: var(--koyu-soluk); }
.cevap p { margin: 0; }
.cevap p + p { margin-top: .6rem; }
.soru[open] .cevap { animation: cevap-ac .45s var(--yay); }

/* ---------- closing call ---------- */
.son {
  --zemin: var(--gece-3);
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255, 244, 214, .9) 50%, transparent 55%),
    radial-gradient(1.5px 1.5px at 72% 12%, rgba(255, 244, 214, .8) 50%, transparent 55%),
    radial-gradient(2px 2px at 88% 64%, rgba(255, 244, 214, .7) 50%, transparent 55%),
    radial-gradient(1.5px 1.5px at 32% 78%, rgba(255, 244, 214, .7) 50%, transparent 55%),
    linear-gradient(180deg, var(--gece-3), var(--gece) 90%);
  background-size: 460px 360px, 460px 360px, 460px 360px, 460px 360px, auto;
  padding: 3rem 0 5rem;
  text-align: center;
  overflow-x: clip;
}
.son-ic { position: relative; z-index: 1; }
.son-ay { width: 7rem; height: 7rem; margin: 0 auto 1rem; animation: ay-sallan 5s ease-in-out infinite; }
.son h2 { font-size: clamp(2.2rem, 5vw + .5rem, 3.8rem); color: var(--krem); text-shadow: 0 4px 0 var(--murekkep); margin-bottom: .7rem; }
.son p { font-size: 1.15rem; }
.son-balon { position: absolute; left: 4%; top: 18%; width: clamp(3.5rem, 7vw, 6rem); animation: balon 9s ease-in-out infinite; }
.son-balon--iki { left: auto; right: 5%; top: 40%; width: clamp(2.6rem, 5vw, 4.4rem); animation-duration: 12s; animation-delay: -4s; }
.son-balon svg { width: 100%; height: auto; }
/* Narrow screens: the balloons float beside the moon, where there is no text to cover. */
@media (max-width: 47.99rem) {
  .son-balon { top: 3%; }
  .son-balon--iki { top: 5%; }
}

/* ---------- footer ---------- */
.alt { background: var(--murekkep); color: var(--metin-soluk); padding: 3rem 0 2rem; border-top: 4px solid #07081C; }
.alt-ic { display: grid; gap: 2rem; }
.alt .logo-yazi { font-size: 1.35rem; }
.alt-marka p { margin: .6rem 0 0; }
.alt-baslik { font: 800 1.1rem/1.3 var(--baslik); color: var(--krem); margin: 0 0 .6rem; }
.alt-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.alt a:not(.logo) { color: #FFE38F; }
.alt address { font-style: normal; line-height: 1.7; overflow-wrap: anywhere; }
.alt address strong { color: var(--metin); }
.telif { margin-top: 2.2rem; font-size: .9rem; color: #A9A7C8; }
.alt--kisa { padding: 1.4rem 0; }
.alt--kisa .telif { margin-block: 0; }
@media (min-width: 52rem) { .alt-ic { grid-template-columns: 1.1fr 1fr 1.2fr; } }

/* ---------- scroll reveal ---------- */
.js .belir { opacity: 0; }
/* If site.js never runs (blocked, failed to load), nothing would reveal these; show them anyway. */
.js:not(.hazir) .belir { animation: soluk .4s ease-out 2s both; }
.js .belir.gorundu { animation: zipla-gel .85s var(--yay) both; animation-delay: var(--gecikme, 0s); }
.js .belir.gorundu.bitti { opacity: 1; animation: none; }
.js .adim.belir.gorundu:not(.bitti), .js .kart.belir.gorundu:not(.bitti), .js .guven-kart.belir.gorundu:not(.bitti) { animation-name: zipla-gel-don; }

/* ---------- keyframes ---------- */
@keyframes zipla-gel {
  0% { opacity: 0; transform: translateY(40px) scale(.9); }
  55% { opacity: 1; transform: translateY(-8px) scale(1.02, .97); }
  75% { transform: translateY(3px) scale(.99, 1.01); }
  100% { opacity: 1; }
}
@keyframes zipla-gel-don {
  0% { opacity: 0; transform: translateY(46px) scale(.88) rotate(-4deg); }
  55% { opacity: 1; transform: translateY(-8px) scale(1.03, .97) rotate(1.5deg); }
  100% { opacity: 1; }
}
@keyframes soluk { from { opacity: 0; } to { opacity: 1; } }
@keyframes jole {
  0% { transform: scale(1); }
  30% { transform: scale(1.08, .92); }
  50% { transform: scale(.95, 1.06); }
  70% { transform: scale(1.03, .98); }
  100% { transform: scale(1); }
}
@keyframes kipir { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg) scale(1.08); } 50% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } }
@keyframes asagi { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes pirilti { 0%, 100% { transform: scale(.85) rotate(0); } 50% { transform: scale(1.15) rotate(45deg); } }
@keyframes parla {
  0%, 100% { transform: scale(.45) rotate(0); opacity: .35; }
  50% { transform: scale(1.1) rotate(45deg); opacity: 1; }
}
@keyframes suz {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0) scale(.8); opacity: .35; }
  25% { opacity: 1; }
  50% { transform: translate3d(1.4rem, -2.6rem, 0) rotate(90deg) scale(1.1); opacity: .9; }
  75% { opacity: .45; }
}
@keyframes don { to { transform: rotate(360deg); } }
@keyframes goz-kirp-gok { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes kayan {
  0%, 86% { opacity: 0; transform: rotate(-24deg) translateX(0); }
  88% { opacity: 1; }
  96% { opacity: 0; transform: rotate(-24deg) translateX(-24rem); }
  100% { opacity: 0; transform: rotate(-24deg) translateX(-24rem); }
}
@keyframes bulut-git { from { transform: translate3d(-30vw, 0, 0); } to { transform: translate3d(115vw, 0, 0); } }
@keyframes harf-gel { 0% { opacity: 0; transform: translateY(70%) scale(.3) rotate(-15deg); } 100% { opacity: 1; transform: none; } }
@keyframes harf-dalga {
  0%, 14%, 100% { transform: none; }
  4% { transform: translateY(-22%) rotate(-7deg) scale(1.1); }
  8% { transform: translateY(0) scale(1.12, .86); }
  11% { transform: translateY(-4%) scale(.97, 1.04); }
}
@keyframes ciz { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }
@keyframes nabiz { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.07); opacity: 1; } }
@keyframes ay-sallan { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-3%) rotate(1.5deg); } }
@keyframes ay-dogus {
  0% { transform: translateY(28%) scale(.94); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translateY(0) rotate(-1.5deg); opacity: 1; }
}
@keyframes ay-bak { 0%, 80% { opacity: 0; } 82%, 94% { opacity: 1; } 96% { opacity: 0; } }
@keyframes ay-kapa { 0%, 80% { opacity: 1; } 82%, 94% { opacity: 0; } 96% { opacity: 1; } }
@keyframes bak {
  0%, 18%, 100% { transform: translateY(0); }
  30% { transform: translateY(0) rotate(-6deg); }
  40% { transform: translateY(0) rotate(4deg); }
  52% { transform: translateY(0) rotate(0); }
  64% { transform: translateY(34%) scale(1.04, .94); }
  86% { transform: translateY(34%); }
  92% { transform: translateY(-6%) scale(.96, 1.06); }
}
@keyframes hop-gel {
  0% { transform: translateY(70%) scale(.8, 1.1); }
  60% { transform: translateY(-16%) scale(.94, 1.08); }
  80% { transform: translateY(3%) scale(1.06, .95); }
  100% { transform: translateY(0); }
}
@keyframes ejder-bak {
  0%, 20%, 100% { transform: translateY(0); }
  30% { transform: translateY(0) rotate(-9deg); }
  40% { transform: translateY(0) rotate(7deg); }
  50% { transform: translateY(0) rotate(0); }
  60% { transform: translateY(62%) scale(1.05, .92); }
  80% { transform: translateY(62%); }
  88% { transform: translateY(-10%) scale(.95, 1.06); }
  94% { transform: translateY(0); }
}
@keyframes nefes { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.04); } }
@keyframes yorgan-gel { 0% { transform: scaleY(.55); } 60% { transform: scaleY(1.08); } 100% { transform: scaleY(1); } }
@keyframes yildiz-oyna {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  25% { transform: translateY(-9%) rotate(6deg) scale(1.05, .95); }
  50% { transform: translateY(0) rotate(-3deg) scale(.96, 1.04); }
  75% { transform: translateY(-5%) rotate(9deg); }
}
@keyframes yildiz-dus {
  0% { transform: translate(60%, -160%) rotate(-120deg) scale(.6); opacity: 0; }
  20% { opacity: 1; }
  65% { transform: translate(0, 6%) rotate(4deg) scale(1.2, .82); }
  82% { transform: translate(0, -8%) rotate(-10deg) scale(.94, 1.08); }
  100% { transform: translateY(0) rotate(-8deg); opacity: 1; }
}
@keyframes yildiz-zipla {
  0% { transform: translateY(0) scale(1); }
  20% { transform: translateY(8%) scale(1.2, .8); }
  55% { transform: translateY(-45%) rotate(200deg) scale(.95, 1.1); }
  80% { transform: translateY(4%) rotate(360deg) scale(1.1, .9); }
  100% { transform: translateY(0) rotate(360deg) scale(1); }
}
@keyframes egil { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes kafa-don { 0% { transform: rotate(0); } 40% { transform: rotate(-25deg) scale(1.1); } 70% { transform: rotate(18deg); } 100% { transform: rotate(0); } }
@keyframes z-uc {
  0% { opacity: 0; transform: translate(0, 0) scale(.5) rotate(-10deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(70%, -260%) scale(1.1) rotate(14deg); }
}
@keyframes cik {
  0% { transform: translateY(0); }
  35% { transform: translateY(-38%) scale(.94, 1.08); }
  65% { transform: translateY(4%) scale(1.08, .92); }
  100% { transform: translateY(0); }
}
@keyframes kivilcim {
  0% { opacity: 1; transform: translate(0, 0) scale(.4) rotate(0); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.2) rotate(120deg); }
}
@keyframes suzul { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6%) rotate(3deg); } }
@keyframes patla { 0% { transform: scale(.2) rotate(-30deg); opacity: 0; } 60% { transform: scale(1.15, .9); opacity: 1; } 100% { transform: scale(1); } }
@keyframes kelime-gel { 0% { opacity: 0; transform: translateY(.6em) scale(.6) rotate(-6deg); } 100% { opacity: 1; transform: none; } }
@keyframes kapak-ac {
  0% { transform: rotateY(0); }
  14% { transform: rotateY(8deg); }
  100% { transform: rotateY(var(--kapak-son, -115deg)); visibility: hidden; }
}
@keyframes kapak-sol { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ok-it { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(4px); } }
@keyframes pencere { 0%, 70% { opacity: 1; } 72% { opacity: .15; } 90% { opacity: 1; } }
@keyframes gece-gunduz { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
@keyframes serit-kay { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hop {
  0%, 100% { transform: translateY(0) scale(1); }
  15% { transform: translateY(0) scale(1.08, .9); }
  45% { transform: translateY(-28%) scale(.95, 1.06); }
  75% { transform: translateY(0) scale(1.06, .93); }
}
@keyframes cevap-ac { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes balon { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-22%) rotate(4deg); } }

/* ---------- motion preferences ---------- */
.uyku *, .uyku *::before, .uyku *::after { animation-play-state: paused !important; }
/* Without JS nothing moves on its own: the script is what pauses scenes scrolled out of view (.uyku). */
html:not(.js) *, html:not(.js) *::before, html:not(.js) *::after { animation: none !important; }
html:not(.js) .kayan-yildiz { display: none; }
/* A cloud that no longer drifts rests at its base spot; bulut-2's would be behind the headline on phones. */
html:not(.js) .bulut-2 { top: 1%; }
html:not(.js) .serit-ic { flex-wrap: wrap; width: auto; justify-content: center; }
html:not(.js) .serit ul[aria-hidden="true"] { display: none; }
html:not(.js) .serit { -webkit-mask-image: none; mask-image: none; }
html:not(.js) .temalar, html:not(.js) .degerler { flex-wrap: wrap; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .belir { transform: none; }
  .js .belir.gorundu { animation: soluk .5s ease-out both !important; }
  .js:not(.hazir) .belir { animation: soluk .4s ease-out 2s both !important; }
  .hazir .kitap-kapak { display: none; }
  .ay-acik { opacity: 0; }
  .kayan-yildiz { display: none; }
  .bulut-2 { top: 1%; }
  .serit-ic { flex-wrap: wrap; width: auto; justify-content: center; }
  .serit ul[aria-hidden="true"] { display: none; }
  .serit { -webkit-mask-image: none; mask-image: none; }
  .temalar, .degerler { flex-wrap: wrap; justify-content: center; }
}

/* ---------- 404 page ---------- */
.kayip {
  position: relative;
  min-height: calc(100vh - var(--ust-h));
  min-height: calc(100svh - var(--ust-h));
  display: grid; place-items: center;
  overflow: hidden;
  padding: 2.5rem 0 7.5rem;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 45% at 50% 100%, rgba(142, 134, 240, .5), transparent 70%),
    linear-gradient(180deg, #0F1230 0%, var(--gece) 40%, var(--gece-3) 100%);
}
.kayip-ic { position: relative; z-index: 1; }
.kayip-sayi { display: flex; justify-content: center; align-items: center; gap: .2em; font: 800 clamp(6rem, 22vw, 11rem)/1 var(--baslik); color: var(--altin); text-shadow: 0 6px 0 var(--murekkep); }
.kayip-sayi > span { display: inline-block; animation: harf-dalga 5s ease-in-out infinite; }
.kayip-sayi > span:last-child { animation-delay: .3s; }
.kayip-ay { width: .95em; height: .95em; animation: ay-sallan 5s ease-in-out infinite; }
.kayip h1 { font-size: clamp(2rem, 5vw + .5rem, 3.2rem); color: var(--krem); text-shadow: 0 4px 0 var(--murekkep); margin: 1rem 0 .8rem; }
.kayip p { max-width: 34rem; margin-inline: auto; font-size: 1.15rem; }
.kayip-dugmeler { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 1.8rem 0 1.6rem; }
.kayip-baglantilar { font-size: 1rem; color: var(--metin-soluk); }
.kayip-baglantilar a { color: #FFE38F; font-weight: 700; }
/* Narrow screens: the animals sit in the band the bottom padding keeps free below the links. */
.kayip-baykus { position: absolute; right: 6%; bottom: 1.2rem; width: 4.2rem; animation: egil 4s ease-in-out infinite; transform-origin: 50% 90%; }
.kayip-tavsan { position: absolute; left: 5%; bottom: 1.2rem; width: 3.9rem; animation: hop 2.2s ease-in-out infinite; transform-origin: 50% 100%; }
@media (min-width: 48rem) {
  .kayip { padding: 3rem 0 4rem; }
  .kayip-baykus { bottom: 8%; width: clamp(4.5rem, 10vw, 7rem); }
  .kayip-tavsan { bottom: 10%; width: clamp(4rem, 9vw, 6.5rem); }
}