@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/baloo-2-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/baloo-2-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/caveat-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/caveat-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --desk: #ffcfe3;
  --paper: #fffafd;
  --under: #c9acf4;
  --dot: #f4e7f6;
  --plum: #46206e;
  --purple: #6f34ad;
  --lilac: #d8c4f8;
  --lilac-soft: #f3ebff;
  --butter: #ffe08a;
  --pink: #ff8cc1;
  --pink-soft: #ffe4f0;
  --muted: #6a5482;
  --alert: #b0125c;
  --scallop: 16px;
  --page-top: 44px;
  --page-bottom: 30px;
  --page-side: 18px;
  --sheet-top: 38px;
  --sheet-side: 22px;
  --sheet-bottom: 24px;
  --stitch: -9px;
  --seal: 62px;
  --sticker-scale: 1;
  --title: 62px;
  --title-small: 34px;
  --question: 26px;
  --option-height: 62px;
  --option-gap: 11px;
  --option-text: 19px;
  --bubble: 38px;
  --button-height: 58px;
  --button-text: 20px;
  --note-text: 25px;
  --rule-text: 17px;
  --section-gap: 20px;
  --link-height: 44px;
  --round: "Baloo 2", ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --pencil: "Caveat", "Bradley Hand", "Segoe Print", cursive;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--desk) url("desen.svg");
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html.quiet {
  background: var(--lilac-soft);
}

body {
  margin: 0;
  color: var(--plum);
  font: 500 18px/1.3 var(--round);
}

button {
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 2px;
}

[tabindex="-1"]:focus {
  outline: none;
}

.defs {
  position: absolute;
}

.page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding:
    var(--page-top)
    max(var(--page-side), env(safe-area-inset-right))
    calc(var(--page-bottom) + env(safe-area-inset-bottom))
    max(var(--page-side), env(safe-area-inset-left));
  overflow: hidden;
  overflow: clip;
}

.card {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
}

.decor {
  position: absolute;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

html.quiet .decor {
  display: none;
}

.decor use {
  stroke-linejoin: round;
}

.die {
  fill: var(--paper);
  stroke: var(--paper);
  stroke-width: 5;
}

.line {
  fill: var(--plum);
  stroke: var(--plum);
  stroke-width: 2.6;
}

.fill-pink,
.fill-lilac {
  stroke: var(--plum);
  stroke-width: 1.5;
}

.fill-pink {
  fill: var(--pink);
}

.fill-lilac {
  fill: var(--under);
}

.no-stroke {
  stroke: none;
}

.flower-eye {
  fill: var(--butter);
  stroke: var(--plum);
  stroke-width: 1.4;
}

.seal {
  top: calc(var(--seal) * -0.58);
  left: 50%;
  width: var(--seal);
  height: var(--seal);
  translate: -50% 0;
  rotate: -6deg;
}

.seal .seal-shine {
  fill: none;
  stroke: var(--paper);
  stroke-linecap: round;
  stroke-width: 1.6;
}

.sticker {
  width: 46px;
  height: 46px;
  scale: var(--sticker-scale);
}

.sticker-tl {
  top: -20px;
  left: -14px;
  rotate: -12deg;
}

.sticker-tr {
  top: -18px;
  right: -12px;
  width: 40px;
  height: 40px;
  rotate: 10deg;
}

.sticker-bl {
  bottom: -18px;
  left: -12px;
  width: 42px;
  height: 42px;
  rotate: -16deg;
}

.sticker-br {
  right: -14px;
  bottom: -18px;
  rotate: 14deg;
}

.sheet {
  position: relative;
  padding: var(--sheet-top) var(--sheet-side) var(--sheet-bottom);
  outline: 2px dashed var(--lilac);
  outline-offset: var(--stitch);
  background-color: var(--paper);
  background-image: radial-gradient(var(--dot) 1.4px, transparent 1.7px);
  background-size: 18px 18px;
}

/* Dantel kenar: dört kenar boyunca yan yana dizilen daireler */
.sheet::before,
.sheet::after {
  content: "";
  position: absolute;
  inset: calc(var(--scallop) / -2);
  z-index: -1;
  --edge-dot: radial-gradient(ellipse closest-side, var(--edge) 96%, transparent);
  background:
    var(--edge-dot) top / var(--scallop) var(--scallop) round no-repeat,
    var(--edge-dot) bottom / var(--scallop) var(--scallop) round no-repeat,
    var(--edge-dot) left / var(--scallop) var(--scallop) no-repeat round,
    var(--edge-dot) right / var(--scallop) var(--scallop) no-repeat round;
}

.sheet::before {
  --edge: var(--paper);
}

.sheet::after {
  --edge: var(--under);
  z-index: -2;
  translate: 0 6px;
}

.sheet > * {
  animation: rise 0.22s ease-out both;
}

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 8px;
  }
}

.heart {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
}

.heart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.heart path {
  fill: var(--pink);
  stroke: var(--plum);
  stroke-linejoin: round;
  stroke-width: 2;
}

.label {
  margin: 0;
  color: var(--purple);
  font: 700 12.5px/1.3 var(--round);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-head {
  text-align: center;
}

.form-head h1 {
  margin: 2px 0 0;
  color: var(--purple);
  font: 800 var(--title)/1.02 var(--round);
  text-shadow: 2px 2px 0 var(--pink);
}

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 2px;
  font-size: 17px;
}

.divider::before,
.divider::after {
  content: "";
  width: 72px;
  border-top: 2px dashed var(--lilac);
}

.form-fields {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.8fr;
  margin: 12px 0 0;
  border: 2px dashed var(--lilac);
  border-radius: 14px;
  background: var(--paper);
}

.form-fields div {
  padding: 6px 4px 3px;
  border-left: 2px dashed var(--lilac);
}

.form-fields div:first-child {
  border-left: 0;
}

.form-fields dt {
  color: var(--purple);
  font: 700 10px/1.2 var(--round);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.form-fields dd {
  margin: 0;
  font: 500 26px/1.1 var(--pencil);
}

.sticky {
  margin: var(--section-gap) 0 0;
  padding: 13px 15px 12px;
  border-radius: 3px 3px 18px 3px;
  background: var(--pink-soft);
  box-shadow: 3px 3px 0 var(--lilac);
  font: 500 var(--note-text)/1.16 var(--pencil);
  rotate: -1deg;
}

.rules {
  margin-top: var(--section-gap);
}

.rules ul {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.rules li {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  font-size: var(--rule-text);
  line-height: 1.25;
}

.rules .heart {
  margin-top: 0.15em;
  font-size: 0.9em;
}

.btn {
  display: block;
  width: 100%;
  min-height: var(--button-height);
  margin-top: var(--section-gap);
  padding: 10px 16px;
  border: 2px solid var(--plum);
  border-radius: 16px;
  background: var(--pink);
  box-shadow: 0 4px 0 var(--plum);
  font: 700 var(--button-text)/1.2 var(--round);
  transition: translate 0.08s, box-shadow 0.08s;
}

/* Sayfa ekrana sığmadığında ana buton altta görünür kalır */
.btn-sticky {
  position: sticky;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 2;
}

.btn:active {
  box-shadow: 0 1px 0 var(--plum);
  translate: 0 3px;
}

.btn:disabled {
  cursor: progress;
  opacity: 0.65;
}

.btn-outline {
  margin-top: 14px;
  background: var(--paper);
}

.text-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--link-height);
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--muted);
  font: 500 16px/1.2 var(--round);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Küçük ekranlarda satır kısalsa da dokunma alanı rahat kalır */
.text-btn::after {
  content: "";
  position: absolute;
  inset: -4px -8px;
}

.exit {
  margin: 6px 0 0;
  text-align: center;
}

.nav {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}

.progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tracker {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 3px;
  font-size: 18px;
}

.tracker .heart path {
  fill: var(--paper);
  stroke: var(--lilac);
}

.tracker .is-current path {
  fill: var(--lilac-soft);
  stroke: var(--purple);
}

.tracker .is-done path {
  fill: var(--pink);
  stroke: var(--plum);
}

.question {
  margin: calc(var(--section-gap) * 0.7) 0 2px;
  font: 700 var(--question)/1.16 var(--round);
  text-wrap: balance;
}

.talimat {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 2px;
  color: var(--purple);
  font: 500 calc(var(--note-text) * 0.92)/1.1 var(--pencil);
}

.talimat .heart {
  font-size: 0.72em;
}

.option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--option-height);
  margin-top: var(--option-gap);
  padding: 6px 12px;
  border: 2px solid var(--lilac);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--lilac);
  font: 600 var(--option-text)/1.15 var(--round);
  text-align: left;
  transition: translate 0.08s, box-shadow 0.08s, background-color 0.15s, border-color 0.15s;
}

.option:active {
  box-shadow: 0 1px 0 var(--lilac);
  translate: 0 2px;
}

.option[aria-pressed="true"] {
  border-color: var(--plum);
  background: var(--pink-soft);
  box-shadow: 0 3px 0 var(--plum);
}

.bubble {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--bubble);
  height: var(--bubble);
  overflow: hidden;
  border: 2px solid var(--purple);
  border-radius: 50%;
  background: var(--lilac-soft);
  color: var(--purple);
  font: 700 17px/1 var(--round);
}

.bubble svg {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
}

.scribble {
  fill: none;
  opacity: 0;
  stroke: var(--purple);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5.5;
}

.is-filled .scribble {
  opacity: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.4s ease-in;
}

.float {
  position: absolute;
  top: 12px;
  left: 22px;
  font-size: 18px;
  pointer-events: none;
  animation: float-up 0.6s ease-out both;
}

.float:nth-last-child(2) {
  --drift: -20px;
  animation-delay: 70ms;
  font-size: 14px;
}

.float:nth-last-child(3) {
  --drift: 24px;
  animation-delay: 140ms;
  font-size: 12px;
}

@keyframes float-up {
  from {
    opacity: 0;
    scale: 0.4;
  }

  35% {
    opacity: 1;
  }

  to {
    opacity: 0;
    scale: 1.1;
    translate: var(--drift, 4px) -44px;
  }
}

.gate {
  margin-top: var(--section-gap);
}

.gate .question {
  display: block;
  margin: 2px 0 12px;
}

.gate input {
  display: block;
  width: 100%;
  min-height: var(--button-height);
  padding: 10px 16px;
  border: 2px solid var(--lilac);
  border-radius: 16px;
  background: var(--pink-soft);
  color: var(--plum);
  font: 600 21px/1.2 var(--round);
}

.gate input::placeholder {
  color: var(--muted);
  font-weight: 500;
}

.gate-hint {
  margin: 10px 2px 0;
  color: var(--alert);
  font: 500 24px/1.1 var(--pencil);
}

.gate-hint:empty {
  display: none;
}

.shake {
  animation: shake 0.32s ease-in-out;
}

@keyframes shake {
  20%,
  60% {
    translate: -6px 0;
  }

  40%,
  80% {
    translate: 6px 0;
  }
}

.title {
  margin: 0;
  color: var(--purple);
  font: 800 var(--title-small)/1.1 var(--round);
  text-wrap: balance;
}

.note {
  margin: 20px 2px 0;
  font: 500 27px/1.16 var(--pencil);
  rotate: -0.5deg;
}

.fine {
  margin: 12px 0 0;
  font: 500 23px/1.1 var(--pencil);
  text-align: center;
}

.stamp {
  display: block;
  width: fit-content;
  margin: 34px auto 0;
  padding: 10px 16px 6px;
  border: 4px double var(--purple);
  border-radius: 10px;
  color: var(--purple);
  font: 800 31px/1 var(--round);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  rotate: -5deg;
  animation: stamp 0.26s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

.stamp small {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
}

@keyframes stamp {
  from {
    opacity: 0;
    scale: 1.5;
  }
}

.stamp + .note {
  margin-top: 30px;
}

.sign {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 4px 4px 0 0;
  font: 500 28px/1.1 var(--pencil);
}

.sign .heart {
  font-size: 20px;
}

.plain {
  margin: 12px 0 0;
  font-size: 20px;
  line-height: 1.3;
}

@media (max-width: 350px) {
  :root {
    --page-side: 13px;
    --sheet-side: 13px;
    --title: 52px;
    --question: 23px;
    --option-text: 17.5px;
    --note-text: 23px;
  }

  .form-fields dd {
    font-size: 22px;
  }

  .stamp {
    font-size: 26px;
  }
}

/* Instagram içi tarayıcıda kullanılabilir yükseklik ekranın çok altında kalır */
@media (max-width: 619px) and (max-height: 780px) {
  :root {
    --scallop: 14px;
    --page-top: 32px;
    --page-bottom: 20px;
    --page-side: 15px;
    --sheet-top: 25px;
    --sheet-side: 17px;
    --sheet-bottom: 13px;
    --stitch: -7px;
    --seal: 48px;
    --sticker-scale: 0.8;
    --title: 50px;
    --title-small: 29px;
    --question: 23px;
    --option-height: 54px;
    --option-gap: 9px;
    --option-text: 18px;
    --bubble: 34px;
    --button-height: 52px;
    --button-text: 19px;
    --note-text: 22px;
    --rule-text: 15.5px;
    --section-gap: 12px;
    --link-height: 38px;
  }

  .form-fields {
    margin-top: 7px;
  }

  .form-fields div {
    padding: 4px 4px 1px;
  }

  .form-fields dd {
    font-size: 22px;
  }

  .sticky {
    padding: 9px 12px 8px;
    line-height: 1.1;
  }

  .stamp {
    margin-top: 22px;
  }
}

@media (max-width: 619px) and (max-height: 650px) {
  :root {
    --page-top: 25px;
    --page-bottom: 15px;
    --sheet-top: 21px;
    --sheet-bottom: 11px;
    --seal: 42px;
    --sticker-scale: 0.7;
    --title: 42px;
    --title-small: 26px;
    --question: 20.5px;
    --option-height: 46px;
    --option-gap: 7px;
    --option-text: 16.5px;
    --bubble: 30px;
    --button-height: 47px;
    --button-text: 18px;
    --note-text: 20px;
    --rule-text: 14.5px;
    --section-gap: 9px;
    --link-height: 34px;
  }

  .form-fields dd {
    font-size: 20px;
  }

  .bubble {
    font-size: 15px;
  }

  .fine {
    margin-top: 8px;
    font-size: 20px;
  }
}

@media (min-width: 620px) {
  :root {
    --sheet-top: 44px;
    --sheet-side: 36px;
    --sheet-bottom: 28px;
    --stitch: -11px;
    --sticker-scale: 1.3;
  }
}

/* Yatay tutulan telefon */
@media (min-width: 620px) and (max-height: 480px) {
  :root {
    --page-top: 30px;
    --page-bottom: 16px;
    --sheet-top: 22px;
    --sheet-bottom: 12px;
    --stitch: -8px;
    --seal: 42px;
    --sticker-scale: 0.8;
    --title: 42px;
    --title-small: 26px;
    --question: 21px;
    --option-height: 46px;
    --option-gap: 7px;
    --option-text: 17px;
    --bubble: 30px;
    --button-height: 46px;
    --button-text: 18px;
    --note-text: 21px;
    --rule-text: 15px;
    --section-gap: 10px;
    --link-height: 34px;
  }

  .card {
    max-width: 660px;
  }

  .options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sheet > *,
  .stamp,
  .float,
  .shake {
    animation: none;
  }

  .is-filled .scribble {
    transition: none;
  }
}