/* Hallmark · genre: playful · macrostructure: Narrative Workflow · theme: marka (web-v3) · enrichment: Tier C üretilmiş sticker · nav: N9 · footer: Ft5
 * tone: playful, yüksek enerji · anchor hue: 5 (pembe) · display: Archivo Expanded 900 dik · body: Nunito
 * pre-emit critique: P4 H5 E4 S5 R4 V5
 */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-md)/1.5 var(--font-body); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, figure { margin: 0; }
h1, h2, .foot-line, .slogan, .match-word, .card h3 {
  font-family: var(--font-display); font-weight: 900; font-stretch: 125%; font-style: normal;
  overflow-wrap: anywhere; min-width: 0;
}
a:focus-visible, button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.hero a:focus-visible, .stage-sky button:focus-visible, .stage-violet a:focus-visible, .foot a:focus-visible, .hero button:focus-visible { outline-color: var(--color-focus-on-dark); }
.skip { position: absolute; left: var(--space-md); top: -4rem; z-index: 2; padding: var(--space-xs) var(--space-md); background: var(--color-paper); color: var(--color-ink); border-radius: var(--radius-sm); }
.skip:focus { top: var(--space-md); }

/* Düğmeler: uygulamadaki gibi tok, basınca içeri göçer */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3.5rem; padding: 0 var(--space-xl);
  border: 0; border-radius: var(--radius-md); font: 800 var(--text-md)/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.btn:active { transform: translateY(var(--rule-press)); box-shadow: 0 0 0 transparent; }
.btn-butter { background: var(--color-butter); color: var(--color-ink); box-shadow: 0 var(--rule-press) 0 var(--color-butter-deep); }
.btn-pink { background: var(--color-pink); color: var(--color-on-loud); box-shadow: 0 var(--rule-press) 0 var(--color-pink-deep); }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(var(--rule-press)); } }
.btn-text { background: none; border: 0; padding: var(--space-sm) var(--space-2xs); min-height: 2.75rem; color: inherit; font: 800 var(--text-md)/1.2 var(--font-body); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; white-space: nowrap; cursor: pointer; }
.btn-text-ink { color: var(--color-muted); }

/* Üst alan */
.hero { background: var(--color-pink); color: var(--color-on-loud); padding: 0 var(--gutter) var(--space-3xl); overflow: clip; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); max-width: var(--page); margin: 0 auto; padding-block: var(--space-md); }
.mark { display: inline-flex; align-items: center; gap: var(--space-xs); color: inherit; font: 800 1.5rem/1 var(--font-brand); text-decoration: none; }
.bar-cta { color: inherit; font-weight: 800; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; min-height: 2.75rem; display: inline-flex; align-items: center; }
.hero-grid { display: grid; gap: var(--space-2xl); max-width: var(--page); margin: 0 auto; padding-top: var(--space-xl); grid-template-columns: minmax(0, 1fr); }
.hero h1 { font-size: var(--text-display); line-height: 1.02; letter-spacing: -0.015em; }
.hero h1 span { color: var(--color-butter); display: block; }
.lede { font-size: var(--text-lg); font-weight: 700; line-height: 1.35; max-width: var(--measure); margin-top: var(--space-lg); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }
.note { font-size: var(--text-sm); margin-top: var(--space-md); }

.collage { position: relative; height: 19rem; }
.st { position: absolute; filter: drop-shadow(0 8px 10px var(--color-shade)); }
.st-simit { width: 34%; left: 0; top: 2%; transform: rotate(-9deg); }
.st-cay { width: 25%; left: 37%; top: 40%; transform: rotate(6deg); }
.st-atakule { width: 19%; right: 3%; top: 0; transform: rotate(5deg); }
.st-bilet { width: 32%; left: 2%; bottom: 0; transform: rotate(7deg); }
.st-maskot { width: 37%; right: 15%; bottom: -6%; transform: rotate(-6deg); }
@media (prefers-reduced-motion: no-preference) {
  .st { animation: pop var(--dur-major) var(--ease-out) backwards; }
  .st-simit { animation-delay: 80ms; } .st-cay { animation-delay: 160ms; } .st-atakule { animation-delay: 240ms; } .st-bilet { animation-delay: 320ms; } .st-maskot { animation-delay: 400ms; }
}
@keyframes pop { from { opacity: 0; scale: 0.7; } to { opacity: 1; scale: 1; } }

/* Üst alanla ilk aşama arasındaki bant */
.bant { background: var(--color-ink); color: var(--color-on-loud); padding: var(--space-2xl) var(--gutter); }
.slogan { font-size: min(8.2vw, var(--text-h2)); line-height: 1.05; text-align: center; text-wrap: balance; }
.slogan span { color: var(--color-butter); }
.bant-alt { display: grid; justify-items: center; gap: var(--space-sm); max-width: 36rem; margin: var(--space-md) auto 0; text-align: center; }
.bant-alt img { width: 8.5rem; transform: rotate(-4deg); filter: drop-shadow(0 8px 10px var(--color-shade)); }
.bant-laf { font-size: var(--text-sm); font-weight: 800; line-height: 1.3; }
.bant-kucuk { margin-top: var(--space-2xs); font-size: 0.75rem; }
@media (min-width: 40rem) {
  .bant-alt { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-lg); text-align: left; }
  .bant-alt img { width: 9rem; }
}

/* Aşamalar */
.stage { padding: var(--space-3xl) var(--gutter); }
.stage-butter { background: var(--color-butter); color: var(--color-ink); }
.stage-sky { background: var(--color-sky); color: var(--color-on-loud); }
.stage-violet { background: var(--color-violet); color: var(--color-on-loud); }
.stage-grid { display: grid; gap: var(--space-2xl); grid-template-columns: minmax(0, 1fr); align-items: center; max-width: var(--page); margin: 0 auto; }
.num { font: 900 clamp(5rem, 3rem + 10vw, 10rem)/0.85 var(--font-display); font-stretch: 125%; opacity: 0.28; }
.stage h2 { font-size: var(--text-h2); line-height: 1; margin: var(--space-xs) 0 var(--space-lg); }
.stage-copy p:not(.num) { max-width: var(--measure); font-size: var(--text-lg); line-height: 1.4; font-weight: 500; }
.stage-copy p:not(.num) + p { margin-top: var(--space-md); }

.shot { position: relative; width: min(19rem, 78%); margin-inline: auto; }
.shot > img:first-child { border-radius: var(--radius-lg); border: var(--rule-thin) solid var(--color-shade); transform: rotate(-2deg); box-shadow: 0 18px 40px -12px var(--color-shade); }
.st-side { position: absolute; width: 38%; right: -18%; top: -5%; transform: rotate(10deg); filter: drop-shadow(0 8px 10px var(--color-shade)); }

/* Deneme destesi */
.demo { width: min(24rem, 100%); margin-inline: auto; }
.deck { min-height: 27rem; display: grid; }
.card, .match { grid-area: 1 / 1; background: var(--color-paper); color: var(--color-ink); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: 0 var(--rule-press) 0 var(--color-rule); }
.card { display: flex; flex-direction: column; touch-action: pan-y; user-select: none; cursor: grab; transition: transform var(--dur-minor) var(--ease-out), opacity var(--dur-minor) var(--ease-out); }
.card.is-drag { transition: none; cursor: grabbing; }
.card > img { width: 6rem; pointer-events: none; }
.card-type { margin-top: auto; padding-top: var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); font-weight: 700; }
.card h3 { font-size: var(--text-card); line-height: 1.05; margin: var(--space-2xs) 0; }
.card-place { color: var(--color-muted); font-weight: 700; }
.card-note { margin-top: var(--space-sm); }
.card-who { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: var(--rule-thin) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); font-weight: 700; }
.match { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); text-align: center; }
.match[hidden] { display: none; }
.match-word { color: var(--color-pink); font-size: var(--text-card); line-height: 1; margin-top: var(--space-xs); }
.match-name { font-weight: 800; font-size: var(--text-lg); }
.match-sub { color: var(--color-muted); margin-bottom: var(--space-md); }
.match .btn { padding-inline: var(--space-lg); font-size: var(--text-md); }
.demo-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-lg); }
.demo-actions[hidden] { display: none; }
.round { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 4rem; border: 0; border-radius: var(--radius-md); font: 800 var(--text-md)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.round img { width: 2rem; }
.round:active { transform: translateY(var(--rule-press)); box-shadow: 0 0 0 transparent; }
.round-no { background: var(--color-paper); color: var(--color-ink); box-shadow: 0 var(--rule-press) 0 var(--color-rule); }
.round-yes { background: var(--color-pink); color: var(--color-on-loud); box-shadow: 0 var(--rule-press) 0 var(--color-pink-deep); }

/* Date: fısıltı */
.date { background: var(--color-pink); color: var(--color-on-loud); padding: var(--space-3xl) var(--gutter); overflow: clip; }
.date-grid { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); align-items: center; max-width: var(--page); margin: 0 auto; }
.date-art { display: block; width: min(20rem, 80%); height: auto; margin: 0 auto; filter: drop-shadow(0 0.75rem 1rem var(--color-shade)); }
.date h2 { font-size: var(--text-h2); line-height: 1.02; margin-bottom: var(--space-lg); overflow-wrap: anywhere; min-width: 0; }
.date h2 span { display: block; color: var(--color-butter); }
.date-big { font-size: var(--text-lg); font-weight: 800; }
.date-big + p { margin-top: var(--space-xs); max-width: var(--measure); font-size: var(--text-lg); line-height: 1.4; }
.date-small { margin-top: var(--space-md); font-size: var(--text-sm); font-weight: 700; }
.date-cta { margin-top: var(--space-xl); }
.date a:focus-visible { outline-color: var(--color-focus-on-dark); }
@media (min-width: 60rem) {
  .date-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); }
  .date-art { width: min(24rem, 100%); }
}

/* Yakında: indirim */
.soon { background: var(--color-ink); color: var(--color-on-loud); padding: var(--space-3xl) var(--gutter); scroll-margin-top: var(--space-md); }
.soon-grid { display: grid; gap: var(--space-2xl); grid-template-columns: minmax(0, 1fr); align-items: center; max-width: var(--page); margin: 0 auto; }
.soon-tag { display: inline-block; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-pink); color: var(--color-on-loud); font-size: var(--text-sm); font-weight: 800; transform: rotate(-2deg); }
.soon h2 { font-size: var(--text-h2); line-height: 1.02; margin: var(--space-md) 0 var(--space-lg); }
.soon h2 span { display: block; color: var(--color-butter); }
.soon-big { font-size: var(--text-lg); font-weight: 800; }
.soon-big + p { margin-top: var(--space-xs); max-width: var(--measure); }
.soon-cta { margin-top: var(--space-xl); }
.soon a:focus-visible, .soon button:focus-visible { outline-color: var(--color-focus-on-dark); }
.soon-side { display: grid; justify-items: center; gap: var(--space-sm); }
.soon-art { width: min(17rem, 72%); padding: 0; border: 0; background: none; cursor: pointer; transform: rotate(5deg); filter: drop-shadow(0 10px 14px var(--color-shade)); }
.soon-art img { width: 100%; }
.soon-hint { font-weight: 800; min-height: 1.6em; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .soon-art.is-wiggle { animation: wiggle var(--dur-major) var(--ease-in-out); }
}
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -7deg; } 75% { rotate: 7deg; } }
@media (min-width: 60rem) {
  .soon-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .soon-art { width: min(22rem, 100%); }
}

/* Neden */
.why { display: grid; gap: var(--space-2xl); grid-template-columns: minmax(0, 1fr); max-width: var(--page); margin: 0 auto; padding: var(--space-4xl) var(--gutter); }
.why h2 { font-size: var(--text-lg); color: var(--color-pink-deep); }
.why-big { font-size: clamp(1.625rem, 1.2rem + 2vw, 2.75rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.015em; margin-block: var(--space-md); max-width: 24em; }
.why-inner > p:last-child { max-width: var(--measure); font-size: var(--text-lg); line-height: 1.4; }
.why .calm { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); align-items: end; padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-lg); background: var(--color-butter); color: var(--color-ink); }
.why .calm h2 { font-size: var(--text-h2); line-height: 1.02; color: var(--color-ink); }
.calm-big { font-size: var(--text-lg); font-weight: 800; margin-top: var(--space-sm); }
.calm p:not(.calm-big) { font-size: var(--text-md); line-height: 1.45; max-width: var(--measure); }
.calm .calm-small { font-size: var(--text-sm); margin-top: var(--space-sm); }
.why h3 { font: 800 var(--text-lg)/1.2 var(--font-body); margin-bottom: var(--space-xs); }
.club { background: var(--color-paper-2); border-radius: var(--radius-lg); padding: var(--space-lg); }
.club img { width: 4.5rem; margin-bottom: var(--space-sm); }
.honest ul { padding-left: 1.2em; }
.honest li + li { margin-top: var(--space-xs); }

/* Son */
.foot { background: var(--color-ink); color: var(--color-on-loud); padding: var(--space-4xl) var(--gutter) var(--space-xl); }
.foot-line { font-size: var(--text-display); line-height: 1.02; max-width: var(--page); margin: 0 auto var(--space-xl); color: var(--color-butter); }
.foot > .btn { display: flex; width: fit-content; margin-inline: max(0px, calc((100% - var(--page)) / 2)); }
.foot-meta { display: grid; gap: var(--space-md); max-width: var(--page); margin: var(--space-3xl) auto 0; padding-top: var(--space-lg); border-top: var(--rule-thin) solid var(--color-muted); font-size: var(--text-sm); }
.foot-meta p { max-width: 42rem; }
.mark-small { font-size: 1.25rem; }

/* Telefonda altta sabit düğme: ekranda başka düğme yokken görünür */
.alt {
  position: fixed; inset: auto 0 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-sm) var(--gutter) calc(var(--space-sm) + env(safe-area-inset-bottom));
  background: var(--color-ink); color: var(--color-on-loud); border-top: var(--rule-thin) solid var(--color-butter);
  font-size: var(--text-sm); font-weight: 700; line-height: 1.25;
  visibility: hidden; transform: translateY(100%); transition: transform var(--dur-minor) var(--ease-out), visibility var(--dur-minor);
}
.alt.is-on { visibility: visible; transform: none; }
.alt a:focus-visible { outline-color: var(--color-focus-on-dark); }
@media (min-width: 60rem) { .alt { display: none; } }

@media (min-width: 40rem) {
  .collage { height: 26rem; }
  .why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-inner, .why .calm { grid-column: 1 / -1; }
  .foot-meta { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xl); }
}
@media (min-width: 60rem) {
  .why .calm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); padding: var(--space-2xl); }
  .hero { padding-bottom: var(--space-4xl); }
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; padding-top: var(--space-xl); }
  .hero h1 { font-size: var(--text-display-wide); }
  .st-simit { width: 46%; left: -6%; top: 0; }
  .st-cay { width: 31%; left: 39%; top: 31%; }
  .st-atakule { width: 25%; right: 2%; top: -4%; }
  .st-bilet { width: 43%; left: -4%; bottom: 3%; }
  .st-maskot { width: 50%; right: -2%; bottom: -5%; }
  .collage { height: 34rem; margin-right: calc(var(--gutter) * -0.5); }
  .stage { padding-block: var(--space-4xl); }
  .stage-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); }
  .stage-flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .stage-flip .stage-copy { order: 2; }
  .shot { width: min(21rem, 100%); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .btn, .round { transition: opacity 120ms linear; }
  .alt { transition: none; }
  .btn:hover, .btn:active, .round:active { transform: none; }
}

/* Sona kadar okuyana hediye: sticker paketi */
.btn-ink { background: var(--color-ink); color: var(--color-butter); box-shadow: 0 var(--rule-press) 0 var(--color-shade); margin-top: var(--space-lg); }
.hediye .note { max-width: var(--measure); }
.yelpaze { position: relative; height: 18rem; max-width: 24rem; width: 100%; margin-inline: auto; }
.yelpaze img { position: absolute; width: 52%; height: auto; filter: drop-shadow(0 8px 10px var(--color-shade)); transition: transform .2s; }
.yelpaze img:nth-child(1) { left: 0; top: 4%; transform: rotate(-12deg); }
.yelpaze img:nth-child(2) { right: 0; top: 0; transform: rotate(9deg); }
.yelpaze img:nth-child(3) { left: 6%; bottom: 0; transform: rotate(6deg); }
.yelpaze img:nth-child(4) { right: 4%; bottom: 2%; transform: rotate(-8deg); }
@media (prefers-reduced-motion: no-preference) { .yelpaze img:hover { transform: rotate(0) scale(1.05); } }
.yelpaze { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); height: auto; }
.yelpaze img { position: static; width: 100%; }
.yelpaze img:nth-child(1) { transform: rotate(-6deg); }
.yelpaze img:nth-child(2) { transform: rotate(5deg) translateY(10px); }
.yelpaze img:nth-child(3) { transform: rotate(4deg); }
.yelpaze img:nth-child(4) { transform: rotate(-5deg) translateY(10px); }
.hediye-ic { max-width: var(--page); margin: 0 auto; }
.hediye-ic > p:not(.note) { max-width: var(--measure); margin-top: var(--space-md); font-size: var(--text-lg); line-height: 1.4; font-weight: 500; }
.stkler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-xl); }
.stk { padding: 0; background: none; border: 0; cursor: pointer; transition: transform .15s; }
.stk img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 8px var(--color-shade)); }
.stk:nth-child(odd) { transform: rotate(-4deg); }
.stk:nth-child(even) { transform: rotate(4deg); }
.stk:active { transform: scale(.94); }
.stk:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 4px; border-radius: 12px; }
@media (min-width: 48rem) { .stkler { grid-template-columns: repeat(6, minmax(0, 1fr)); } }