/* ═══════════════════════════════════════════════════════════
   DEFNE'YE — "Seninle"
   Sevgiliye özel dijital doğum günü hediyesi.
   Dokundukça ilerleyen sinematik fotoğraf hikâyesi + pasta finali.
   Yazı: Cormorant Garamond (söz) · Parisienne (imza) · Jost (etiket)
   ═══════════════════════════════════════════════════════════ */

:root {
    --ink:        #0B0908;   /* gece siyahı, hafif sıcak */
    --ink-2:      #14110E;
    --ink-3:      #1D1813;
    --ivory:      #F6EFE4;
    --ivory-dim:  rgba(246, 239, 228, .72);
    --ivory-mute: rgba(246, 239, 228, .42);
    --gold:       #E8C48A;
    --gold-deep:  #C29A5C;
    --gold-hi:    #FFF0CE;
    --rose:       #E7A69E;
    --flame:      #FFB25A;

    --f-serif:  "Cormorant Garamond", Georgia, serif;
    --f-script: "Parisienne", "Great Vibes", cursive;
    --f-sans:   "Jost", -apple-system, "Segoe UI", sans-serif;

    --safe-t: env(safe-area-inset-top);
    --safe-b: env(safe-area-inset-bottom);
    --safe-l: env(safe-area-inset-left);
    --safe-r: env(safe-area-inset-right);

    --ease-cine: cubic-bezier(.22, .61, .28, 1);
}

*, *::before, *::after {
    margin: 0; padding: 0; box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html { -webkit-text-size-adjust: 100%; }

body {
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--f-sans);
    font-weight: 300;
    color: var(--ivory);
    background: var(--ink);
    overflow: hidden;                 /* hikâye boyunca sayfa kaymaz */
    overscroll-behavior: none;
    -webkit-font-smoothing: antialiased;
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
}

/* kutlama başlayınca alt metinler için kaydırma serbest */
body.is-free { overflow: auto; overscroll-behavior: auto; }

[hidden] { display: none !important; }

::selection { background: rgba(232, 196, 138, .3); }

/* ═══════════════ FİLM GRENİ & KÖŞE KARARTMASI ═══════════════ */

.grain {
    position: fixed; inset: -120px;
    z-index: 200;
    pointer-events: none;
    opacity: .075;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain 1.1s steps(5) infinite;
    will-change: transform;
}
@keyframes grain {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-14px, 8px); }
    40%  { transform: translate(10px, -12px); }
    60%  { transform: translate(-8px, -6px); }
    80%  { transform: translate(12px, 10px); }
    100% { transform: translate(0, 0); }
}

.vignette {
    position: fixed; inset: 0;
    z-index: 199;
    pointer-events: none;
    background:
        radial-gradient(130% 90% at 50% 45%, transparent 42%, rgba(0, 0, 0, .5) 82%, rgba(0, 0, 0, .78) 100%);
}

/* ═══════════════ YÜKLEME ═══════════════ */

.loader {
    position: fixed; inset: 0;
    z-index: 180;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 20px;
    background: var(--ink);
    transition: opacity .8s ease, visibility .8s;
}
body:not(.is-loading) .loader { opacity: 0; visibility: hidden; }

.loader-heart {
    width: 30px; height: 28px;
    fill: var(--gold-deep);
    animation: beat 1.9s ease-in-out infinite;
}
@keyframes beat {
    0%, 100% { transform: scale(1);    opacity: .55; }
    14%      { transform: scale(1.16); opacity: .95; }
    28%      { transform: scale(1);    opacity: .7; }
    42%      { transform: scale(1.1);  opacity: .9; }
}

.loader-bar {
    display: block;
    width: 132px; height: 1px;
    background: rgba(246, 239, 228, .16);
    overflow: hidden;
}
.loader-bar i {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-hi));
    transition: width .45s ease;
}

.loader-txt {
    font-size: .58rem;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--ivory-mute);
    padding-left: .42em;
}

/* ═══════════════ MÜZİK BUTONU ═══════════════ */

.music-btn {
    position: fixed;
    top: calc(14px + var(--safe-t));
    right: calc(14px + var(--safe-r));
    z-index: 150;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border: 1px solid rgba(232, 196, 138, .3);
    border-radius: 50%;
    background: rgba(11, 9, 8, .42);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--gold);
    cursor: pointer;
    opacity: 0;
    transition: opacity .8s ease .3s, border-color .3s, background .3s;
}
body:not(.is-loading) .music-btn { opacity: 1; }
.music-btn:hover { border-color: rgba(232, 196, 138, .6); }
.music-btn svg { width: 16px; height: 16px; fill: currentColor; }

.music-waves {
    position: absolute; inset: -1px;
    border-radius: 50%;
    pointer-events: none;
}
.music-waves i {
    position: absolute; inset: 0;
    border: 1px solid rgba(232, 196, 138, .5);
    border-radius: 50%;
    opacity: 0;
}
body.music-on .music-waves i { animation: pulse 2.6s ease-out infinite; }
body.music-on .music-waves i:nth-child(2) { animation-delay: .85s; }
body.music-on .music-waves i:nth-child(3) { animation-delay: 1.7s; }
@keyframes pulse {
    0%   { opacity: .55; transform: scale(1); }
    100% { opacity: 0;   transform: scale(1.85); }
}

/* ═══════════════ HİKÂYE SAHNESİ ═══════════════ */

.story {
    position: fixed; inset: 0;
    z-index: 10;
    overflow: hidden;
    cursor: pointer;
}
.story.out { opacity: 0; transition: opacity 1.1s ease; pointer-events: none; }

/* ── fotoğraf katmanları ── */
.stage { position: absolute; inset: 0; }

.layer {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 1.15s var(--ease-cine);
    will-change: opacity;
}
.layer.on { opacity: 1; }

.layer-img {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    /* siyah-beyaz sinema tonu */
    filter: grayscale(1) contrast(1.1) brightness(.74);
    transform: scale(1.1);
    will-change: transform;
}
/* yavaş Ken Burns: her sahne nefes alır gibi yaklaşır */
.layer.on .layer-img  { animation: kb-in  17s linear forwards; }
.layer.on.alt .layer-img { animation: kb-out 17s linear forwards; }
@keyframes kb-in {
    from { transform: scale(1.1)  translate3d(1.4%, .9%, 0); }
    to   { transform: scale(1.005) translate3d(-.9%, -.5%, 0); }
}
@keyframes kb-out {
    from { transform: scale(1.01) translate3d(-1.2%, -.7%, 0); }
    to   { transform: scale(1.11) translate3d(1%, .7%, 0); }
}

/* sıcak duotone: gri fotoğrafa film sıcaklığı verir */
.tone {
    position: absolute; inset: 0;
    mix-blend-mode: soft-light;
    pointer-events: none;
    background: linear-gradient(168deg, #F0C489 0%, #6E5B4A 46%, #1B2A3A 100%);
    opacity: .62;
}

/* yazının okunması için orta karartma */
.scrim {
    position: absolute; inset: 0;
    pointer-events: none;
    background:
        radial-gradient(88% 58% at 50% 50%, rgba(6, 5, 4, .62) 0%, rgba(6, 5, 4, .22) 58%, transparent 78%),
        linear-gradient(180deg, rgba(6, 5, 4, .58) 0%, transparent 26%, transparent 66%, rgba(6, 5, 4, .74) 100%);
}

/* geçişte soldan geçen ışık sızıntısı */
.leak {
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(104deg, transparent 32%, rgba(255, 214, 150, .3) 48%, rgba(255, 236, 200, .1) 56%, transparent 70%);
    mix-blend-mode: screen;
}
.leak.sweep { animation: leak 1.15s ease-out; }
@keyframes leak {
    0%   { opacity: 0;   transform: translateX(-24%); }
    35%  { opacity: .85; }
    100% { opacity: 0;   transform: translateX(24%); }
}

/* ── üstteki bölüm çubukları ── */
.segments {
    position: absolute;
    top: calc(12px + var(--safe-t));
    left: calc(16px + var(--safe-l));
    right: calc(66px + var(--safe-r));
    z-index: 30;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .9s ease .4s;
}
body:not(.is-loading) .segments { opacity: 1; }

.segments i {
    flex: 1;
    height: 1.5px;
    border-radius: 2px;
    background: rgba(246, 239, 228, .2);
    overflow: hidden;
}
.segments i::after {
    content: "";
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-hi));
    transition: width .55s var(--ease-cine);
}
.segments i.seen::after { width: 100%; }

/* ── ortadaki söz ── */
.caption {
    position: absolute;
    inset: 0;
    z-index: 25;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 clamp(1.6rem, 8vw, 4rem);
    text-align: center;
    pointer-events: none;
}

.cap-kicker {
    font-size: clamp(.52rem, 2.4vw, .62rem);
    font-weight: 300;
    letter-spacing: .52em;
    text-transform: uppercase;
    color: var(--gold);
    padding-left: .52em;
    opacity: 0;
}

.cap-script {
    font-family: var(--f-script);
    font-size: clamp(3.4rem, 17vw, 6.2rem);
    line-height: 1;
    color: var(--ivory);
    text-shadow: 0 4px 30px rgba(0, 0, 0, .7), 0 0 70px rgba(255, 200, 130, .22);
    opacity: 0;
}

.cap-line {
    font-family: var(--f-serif);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.62rem, 7.1vw, 2.9rem);
    line-height: 1.42;
    letter-spacing: .012em;
    max-width: 19ch;
    color: var(--ivory);
    text-shadow: 0 3px 26px rgba(0, 0, 0, .72), 0 1px 3px rgba(0, 0, 0, .5);
    opacity: 0;
}

/* sözün belirişi: puslu bir hatıradan netleşir gibi */
.caption .in {
    animation: cap-in 1.25s var(--ease-cine) forwards;
}
@keyframes cap-in {
    0%   { opacity: 0; filter: blur(9px);   transform: translateY(16px) scale(1.03); letter-spacing: .09em; }
    100% { opacity: 1; filter: blur(0);     transform: none;                          }
}
.caption .out { animation: cap-out .52s ease forwards; }
@keyframes cap-out {
    to { opacity: 0; filter: blur(6px); transform: translateY(-12px); }
}
.cap-kicker.in { animation-duration: 1.5s; }

/* ── ilk ekran: BÜYÜK "EKRANA DOKUNUN" ── */
.touch-cue {
    position: absolute;
    left: 0; right: 0;
    bottom: calc(11vh + var(--safe-b));
    z-index: 28;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .7s ease;
}
.touch-cue.show { opacity: 1; }
.touch-cue.hide { opacity: 0; }

.ripple {
    position: relative;
    width: 74px; height: 74px;
    display: grid; place-items: center;
}
.ripple i {
    position: absolute; inset: 0;
    border: 1px solid rgba(232, 196, 138, .55);
    border-radius: 50%;
    opacity: 0;
    animation: ripple 2.9s cubic-bezier(.2, .7, .3, 1) infinite;
}
.ripple i:nth-child(2) { animation-delay: .95s; }
.ripple i:nth-child(3) { animation-delay: 1.9s; }
@keyframes ripple {
    0%   { opacity: 0;   transform: scale(.42); }
    18%  { opacity: .85; }
    100% { opacity: 0;   transform: scale(1.25); }
}

.touch-cue .hand {
    position: absolute;
    width: 26px; height: 32px;
    fill: var(--gold-hi);
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .6));
    animation: tap 2.9s ease-in-out infinite;
}
@keyframes tap {
    0%, 100% { transform: translateY(0)    scale(1); }
    12%      { transform: translateY(6px)  scale(.92); }
    24%      { transform: translateY(0)    scale(1); }
}

.touch-cue p {
    font-size: clamp(.66rem, 3.1vw, .78rem);
    font-weight: 300;
    letter-spacing: .38em;
    text-transform: uppercase;
    color: var(--ivory);
    padding-left: .38em;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .8);
}

/* ── sonraki ekranlarda küçük hatırlatma ── */
.tap-mini {
    position: absolute;
    left: 0; right: 0;
    bottom: calc(26px + var(--safe-b));
    z-index: 28;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: .58rem;
    font-weight: 300;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ivory-mute);
    pointer-events: none;
    opacity: 0;
    transition: opacity .8s ease;
}
.tap-mini.show { opacity: 1; }
.tap-mini .dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 0 rgba(232, 196, 138, .5);
    animation: dot 2.4s ease-out infinite;
}
@keyframes dot {
    0%   { box-shadow: 0 0 0 0 rgba(232, 196, 138, .45); }
    70%  { box-shadow: 0 0 0 11px rgba(232, 196, 138, 0); }
    100% { box-shadow: 0 0 0 0 rgba(232, 196, 138, 0); }
}

/* ── geri butonu ── */
.back-btn {
    position: absolute;
    left: calc(10px + var(--safe-l));
    bottom: calc(16px + var(--safe-b));
    z-index: 32;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 0;
    background: none;
    color: var(--ivory-mute);
    cursor: pointer;
    opacity: .5;
    transition: opacity .3s;
}
.back-btn:hover { opacity: 1; }
.back-btn svg { width: 19px; height: 19px; }

/* ═══════════════ FİNAL: PASTA & HAVAİ FİŞEK ═══════════════ */

.finale {
    position: fixed; inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(18px + var(--safe-t)) clamp(1.1rem, 5vw, 2rem) calc(18px + var(--safe-b));
    text-align: center;
    background:
        radial-gradient(120% 74% at 50% 118%, rgba(255, 172, 78, .13) 0%, transparent 58%),
        radial-gradient(90% 60% at 50% -14%, rgba(90, 110, 168, .16) 0%, transparent 62%),
        linear-gradient(180deg, #07060A 0%, var(--ink-2) 52%, #0A0806 100%);
    opacity: 0;
    transition: opacity 1.3s ease;
}
.finale.show { opacity: 1; }

/* kutlamadan sonra alt metinlere kaydırılabilsin */
.finale.celebrated {
    position: relative;
    inset: auto;
    min-height: 100dvh;
    height: auto;
    justify-content: flex-start;
    padding-top: calc(6vh + var(--safe-t));
}

#fxSky, #fxConfetti {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
#fxSky      { z-index: 1;  mix-blend-mode: screen; }
#fxConfetti { z-index: 40; }

.sky-glow {
    position: fixed; inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(70% 44% at 50% 24%, rgba(255, 206, 150, .22) 0%, transparent 70%);
    transition: opacity 1.4s ease;
}
.sky-glow.on { opacity: 1; }

/* ── başlık ── */
.finale-head {
    position: relative;
    z-index: 8;
    margin-bottom: clamp(.5rem, 2.4vh, 1.4rem);
}

.fin-kicker {
    font-size: clamp(.5rem, 2.4vw, .6rem);
    font-weight: 300;
    letter-spacing: .5em;
    text-transform: uppercase;
    color: var(--gold);
    padding-left: .5em;
    margin-bottom: 12px;
    opacity: 0;
}
.fin-kicker.in { animation: fin-up 1.1s var(--ease-cine) forwards; }

.fin-title {
    font-family: var(--f-serif);
    font-weight: 300;
    font-size: clamp(1.75rem, 7.4vw, 3.1rem);
    line-height: 1.22;
    letter-spacing: .01em;
    color: var(--ivory);
    text-shadow: 0 4px 34px rgba(0, 0, 0, .7);
    opacity: 0;
}
.fin-title.in { animation: fin-up 1.4s var(--ease-cine) forwards; }

@keyframes fin-up {
    from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
    to   { opacity: 1; transform: none;             filter: blur(0); }
}

.fin-title em {
    display: block;
    font-family: var(--f-script);
    font-style: normal;
    font-size: 1.5em;
    line-height: 1.05;
    margin-top: .12em;
    background: linear-gradient(104deg, var(--gold-deep) 0%, var(--gold-hi) 42%, var(--gold) 70%, var(--gold-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 3px 18px rgba(255, 190, 120, .25));
}

/* ── pasta ── */
.cake-wrap {
    position: relative;
    z-index: 6;
    width: min(84vw, 340px);
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translateY(26px) scale(.94);
    transition: opacity 1.1s var(--ease-cine), transform 1.1s var(--ease-cine);
}
.cake-wrap.show { opacity: 1; transform: none; }
.finale.celebrated .cake-wrap {
    transform: scale(.9);
    transition: transform 1.2s var(--ease-cine);
}

.cake-glow {
    position: absolute;
    left: 50%; top: 26%;
    width: 118%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 186, 106, .34) 0%, rgba(255, 150, 60, .12) 38%, transparent 68%);
    opacity: 0;
    transition: opacity 1.4s ease;
}
.cake-glow.on { opacity: 1; animation: glow-flicker 4.2s ease-in-out infinite; }
.cake-glow.off { opacity: 0; animation: none; }
@keyframes glow-flicker {
    0%, 100% { opacity: 1;   transform: translate(-50%, -50%) scale(1); }
    28%      { opacity: .84; transform: translate(-50%, -50%) scale(.97); }
    54%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.03); }
    76%      { opacity: .9;  transform: translate(-50%, -50%) scale(.99); }
}

.cake {
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .55));
}

/* mumların pastaya vurduğu ışık havuzu */
.light-pool {
    transform-origin: 200px 226px;
    animation: pool 3.4s ease-in-out infinite;
}
@keyframes pool {
    0%, 100% { opacity: .55; transform: scale(1); }
    35%      { opacity: .42; transform: scale(.96); }
    68%      { opacity: .6;  transform: scale(1.03); }
}
.light-pool.off { animation: none; opacity: 0; transition: opacity .7s ease; }

/* ── alev ── */
.flame {
    transform-box: fill-box;
    transform-origin: center bottom;
    opacity: 0;
    transition: opacity .5s ease;
}
.candle.lit .flame { opacity: 1; }

.candle.lit .flame  { animation: flicker 2.4s ease-in-out infinite; }
.candle.lit[data-i="1"] .flame { animation-duration: 2.9s; animation-delay: -.7s; }
.candle.lit[data-i="2"] .flame { animation-duration: 2.1s; animation-delay: -1.3s; }
@keyframes flicker {
    0%, 100% { transform: scale(1, 1)        rotate(0deg)  translateX(0); }
    16%      { transform: scale(.95, 1.08)   rotate(-2.4deg) translateX(-.6px); }
    34%      { transform: scale(1.05, .94)   rotate(1.8deg)  translateX(.7px); }
    52%      { transform: scale(.97, 1.11)   rotate(-1.2deg) translateX(-.4px); }
    72%      { transform: scale(1.03, .97)   rotate(2.2deg)  translateX(.5px); }
    88%      { transform: scale(.99, 1.04)   rotate(-.8deg)  translateX(-.2px); }
}
.fcore { animation: core 1.7s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }
@keyframes core {
    0%, 100% { opacity: .95; transform: scaleY(1); }
    45%      { opacity: .75; transform: scaleY(.9); }
}
.halo { animation: halo 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes halo {
    0%, 100% { opacity: 1;  transform: scale(1); }
    40%      { opacity: .7; transform: scale(.92); }
    70%      { opacity: .95; transform: scale(1.06); }
}

/* mumlar sönerken */
.candles.blown .flame {
    animation: blow-out .5s cubic-bezier(.4, 0, .8, .4) forwards;
}
.candles.blown .candle[data-i="1"] .flame { animation-delay: .1s; }
.candles.blown .candle[data-i="2"] .flame { animation-delay: .2s; }
@keyframes blow-out {
    0%   { opacity: 1; transform: scale(1, 1) rotate(0); }
    45%  { opacity: .9; transform: scale(.72, 1.25) rotate(24deg) translateX(9px); }
    100% { opacity: 0; transform: scale(.24, .18) rotate(46deg) translateX(15px); }
}

/* duman */
.smoke path {
    transform-box: fill-box;
    transform-origin: center bottom;
    stroke-dasharray: 84;
    stroke-dashoffset: 84;
    opacity: 0;
}
.candles.blown .smoke path {
    animation: smoke 2.9s ease-out forwards;
}
.candles.blown .candle[data-i="1"] .smoke path { animation-delay: .16s; }
.candles.blown .candle[data-i="2"] .smoke path { animation-delay: .3s; }
@keyframes smoke {
    0%   { opacity: 0;   stroke-dashoffset: 84; transform: translateY(6px)   scaleX(.6); }
    18%  { opacity: .5; }
    55%  { opacity: .34; }
    100% { opacity: 0;   stroke-dashoffset: 0;  transform: translateY(-42px) scaleX(1.5); }
}

/* ── üfleme yönergesi ── */
.blow {
    position: relative;
    z-index: 8;
    margin-top: clamp(1rem, 3.4vh, 1.9rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .8s ease, transform .8s var(--ease-cine);
}
.blow.show { opacity: 1; transform: none; }
.blow.done { opacity: 0; transform: translateY(-8px); }

.blow p {
    font-size: clamp(.72rem, 3.4vw, .88rem);
    font-weight: 300;
    letter-spacing: .16em;
    color: var(--ivory-dim);
}
.blow strong {
    font-weight: 400;
    color: var(--gold);
    letter-spacing: .14em;
}

.blow-puff {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 16px;
}
.blow-puff i {
    width: 16px; height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold));
    opacity: 0;
    animation: puff 2s ease-out infinite;
}
.blow-puff i:nth-child(2) { animation-delay: .22s; width: 22px; }
.blow-puff i:nth-child(3) { animation-delay: .44s; width: 13px; }
@keyframes puff {
    0%   { opacity: 0;  transform: translateX(-12px) scaleX(.4); }
    35%  { opacity: .9; }
    100% { opacity: 0;  transform: translateX(16px)  scaleX(1.3); }
}

.blow-bar {
    display: block;
    width: 108px; height: 1px;
    background: rgba(246, 239, 228, .14);
    overflow: hidden;
}
.blow-bar i {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-hi));
}
.blow.show .blow-bar i { animation: fill 2.6s linear forwards; }
@keyframes fill { to { width: 100%; } }

/* ── kutlama metni ── */
.cheer {
    position: relative;
    z-index: 8;
    margin-top: clamp(1.2rem, 4vh, 2.4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 34rem;
    padding: 0 .4rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s ease, transform 1.2s var(--ease-cine);
}
.cheer.show { opacity: 1; transform: none; }

.cheer-script {
    font-family: var(--f-script);
    font-size: clamp(2rem, 9.4vw, 3.4rem);
    line-height: 1.16;
    max-width: 100%;
    overflow-wrap: break-word;
    background: linear-gradient(104deg, var(--gold-deep) 0%, var(--gold-hi) 44%, var(--gold) 72%, var(--gold-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 3px 20px rgba(255, 190, 120, .28));
}

.cheer-text {
    margin-top: 18px;
    font-family: var(--f-serif);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1rem, 4.4vw, 1.28rem);
    line-height: 1.75;
    color: var(--ivory-dim);
    max-width: 26ch;
}

.cheer-sign {
    margin-top: 22px;
    font-size: .66rem;
    font-weight: 300;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ivory-mute);
}
.cheer-sign em {
    display: block;
    margin-top: 6px;
    font-family: var(--f-script);
    font-style: normal;
    font-size: 2.5rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gold);
}

/* ── butonlar ── */
.cheer-actions {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid rgba(232, 196, 138, .38);
    border-radius: 999px;
    background: rgba(232, 196, 138, .07);
    color: var(--gold);
    font-family: var(--f-sans);
    font-size: .68rem;
    font-weight: 300;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .3s, border-color .3s, transform .3s;
}
.btn:hover { background: rgba(232, 196, 138, .16); border-color: rgba(232, 196, 138, .7); transform: translateY(-2px); }
.btn svg { width: 14px; height: 14px; fill: currentColor; }
.btn-ghost { border-color: rgba(246, 239, 228, .18); color: var(--ivory-dim); }
.btn-ghost svg { fill: currentColor; }

/* ── demo notu & künye ── */
.demo-note {
    margin-top: 40px;
    max-width: 30rem;
    padding: 18px 20px;
    border: 1px solid rgba(246, 239, 228, .11);
    border-radius: 14px;
    background: rgba(246, 239, 228, .035);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.demo-badge {
    display: inline-block;
    margin-bottom: 9px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(232, 196, 138, .14);
    color: var(--gold);
    font-size: .52rem;
    letter-spacing: .26em;
}
.demo-note p {
    font-size: .74rem;
    font-weight: 300;
    line-height: 1.8;
    color: var(--ivory-mute);
}
.demo-note strong { color: var(--ivory-dim); font-weight: 400; }

.site-footer {
    margin-top: 34px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.site-footer a {
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-deep);
    text-decoration: none;
    transition: color .3s;
}
.site-footer a:hover { color: var(--gold); }
.site-footer small {
    font-size: .56rem;
    letter-spacing: .06em;
    color: rgba(246, 239, 228, .22);
    line-height: 1.7;
}

/* ═══════════════ BİLDİRİM ═══════════════ */

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(28px + var(--safe-b));
    transform: translate(-50%, 14px);
    z-index: 210;
    padding: 11px 20px;
    border: 1px solid rgba(232, 196, 138, .3);
    border-radius: 999px;
    background: rgba(11, 9, 8, .9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--gold);
    font-size: .7rem;
    letter-spacing: .12em;
    opacity: 0;
    transition: opacity .35s ease, transform .35s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ═══════════════ GENİŞ EKRAN ═══════════════ */

@media (min-width: 760px) {
    .cap-line { max-width: 24ch; }
    .caption { gap: 20px; }
    .touch-cue { bottom: calc(9vh + var(--safe-b)); }
    .cake-wrap { width: min(52vw, 400px); }
}

/* çok geniş ekranda sinema çerçevesi hissi: fotoğraf ortada odaklanır */
@media (min-width: 1180px) {
    .layer-img { background-position: center 42%; }
    .cap-line  { font-size: clamp(2.1rem, 2.6vw, 3.1rem); max-width: 26ch; }
    .cake-wrap { width: 380px; }
}

/* alçak ve geniş ekranlarda (yatay telefon) final sığsın */
@media (max-height: 640px) {
    .cake-wrap { width: min(56vw, 250px); }
    .fin-title { font-size: clamp(1.4rem, 5vw, 2.1rem); }
    .blow { margin-top: .7rem; }
}

/* ═══════════════ HAREKET AZALTMA ═══════════════ */

@media (prefers-reduced-motion: reduce) {
    .grain { animation: none; }
    .layer.on .layer-img,
    .layer.on.alt .layer-img { animation: none; transform: scale(1.02); }
    .caption .in { animation-duration: .5s; }
    .candle.lit .flame,
    .fcore, .halo, .cake-glow.on { animation: none; }
    .ripple i, .touch-cue .hand, .blow-puff i { animation-duration: 4s; }
}