/* ============================================================
   TEMA: PET - sıcak, neşeli, sevimli pati teması
   Bal-amber gök + süzülen pati izleri + yumuşak yuvarlak kartlar
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }

:root {
    --sky-1: #fdf3ea;   /* gök üst - sıcak krem */
    --sky-2: #fbeee4;   /* orta */
    --sky-3: #f7e3da;   /* alt - sıcak gül-krem */
    --cream: #fffaf2;

    --honey:   #c9544a;   /* accent - sıcak/kalpten kızıl-terracotta */
    --honey-l: #e2887b;
    --honey-d: #9e3a32;
    --paw:     #9a4a3c;   /* koyu sıcak kahve-kızıl */
    --mint:    #d8685a;   /* sıcak kızıl coral vurgu */

    --ink:     #5a4632;   /* sıcak kahve metin */
    --ink-2:   #7c6347;
    --ink-3:   #a08a6e;
    --muted:   #c2ad92;

    /* özelleştirilebilir (Ayarlar → Tema Renkleri) - override <style> bunları body.kas-tpl'de ezer */
    --kas-bg:    #fbeee4;
    --kas-title: #c9544a;  --kas-title-rgb: 201,84,74;
    --kas-text:  #5a4632;  --kas-text-rgb:  90,70,50;
    --kas-card:  #fff6ea;  --kas-card-rgb:  255,246,234;

    --card-bg:   rgba(var(--kas-card-rgb), 0.74);
    --card-bg-2: rgba(var(--kas-card-rgb), 0.62);
    --line:      rgba(var(--kas-title-rgb), 0.30);
    --line-soft: rgba(var(--kas-title-rgb), 0.16);

    --font-h:     'Baloo 2', 'Trebuchet MS', sans-serif;
    --font-b:     'Nunito', 'Trebuchet MS', sans-serif;
    --font-caps:  'Baloo 2', sans-serif;
    --font-script:'Caveat', cursive;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Özelleştirme - bg/başlık/metin değişir; türev tonlar SABİT (color-mix yok → her cihazda çalışır) */
body.kas-tpl-kedi {
    --sky-2: var(--kas-bg);
    --honey: var(--kas-title);
    --ink:   var(--kas-text);
}
body {
    font-family: var(--font-b); color: var(--ink); line-height: 1.7;
    background:
        radial-gradient(120% 80% at 16% 2%, rgba(var(--kas-title-rgb),0.26), transparent 56%),
        radial-gradient(120% 78% at 88% 8%, rgba(206,90,80,0.24), transparent 58%),
        radial-gradient(110% 75% at 50% 110%, rgba(168,52,46,0.18), transparent 62%),
        linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 48%, var(--sky-3) 100%);
    background-attachment: fixed;
    min-height: 100vh; -webkit-font-smoothing: antialiased;
    overflow: hidden;
}
body.is-reading { overflow-x: hidden; overflow-y: auto; }

img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; color: inherit; background: 0; border: 0; padding: 0; }
::selection { background: var(--honey); color: #fff; }

/* ═══════════════════════════════════════════════════════════
   SAHNE - yumuşak bokeh + süzülen pati izleri
   ═══════════════════════════════════════════════════════════ */
.yard { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; }
.glow.g1 { width: 46vw; height: 46vw; left: -8vw; top: -6vh;  background: radial-gradient(circle, rgba(226,136,123,0.55), transparent 65%); animation: glow-float 30s ease-in-out infinite; }
.glow.g2 { width: 40vw; height: 40vw; right: -10vw; top: 30vh; background: radial-gradient(circle, rgba(206,90,80,0.48), transparent 65%); animation: glow-float 38s ease-in-out infinite -8s; }
.glow.g3 { width: 50vw; height: 40vw; left: 22vw; bottom: -16vh; background: radial-gradient(circle, rgba(228,140,120,0.5), transparent 65%); animation: glow-float 34s ease-in-out infinite -16s; }
@keyframes glow-float { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(2vw,-2vh) scale(1.1); } }

/* süzülen pati izleri (defter/içerik için, JS) */
.paws { position: absolute; inset: 0; overflow: hidden; }
.pawf { position: absolute; top: -8%; will-change: transform; animation: paw-fall linear infinite; color: var(--honey); }
@keyframes paw-fall { from { transform: translateY(-8vh); } to { transform: translateY(114vh); } }
.pawf-i { display: block; animation: paw-sway ease-in-out infinite alternate; }
@keyframes paw-sway { from { transform: translateX(-20px) rotate(-22deg); } to { transform: translateX(20px) rotate(22deg); } }
.pawf svg { display: block; }
.paw-mark { display: block; }

/* ── KOŞAN KEDİ (sprite-sheet) ──
   Görsel değişince SADECE şu 4 değişkeni güncelle: --fw (kare en), --fh (kare boy),
   --frames (kare sayısı), --sheet (toplam görsel yüksekliği = fh*frames). Sprite dikey olmalı. */
.cat-sprite {
    --fw: 497px; --fh: 373px; --frames: 8; --sheet: 2984px;
    --sc: .55; --walk: .62s; --cross: 15s; --dir: 1;
    position: absolute; bottom: 4%; left: 0; width: var(--fw); height: var(--fh);
    overflow: hidden; pointer-events: none; transform-origin: bottom center; will-change: transform;
    animation: cat-cross var(--cross) linear infinite;
}
.cat-sprite img { position: absolute; top: 0; left: 0; width: var(--fw); max-width: none; height: auto; display: block;
    image-rendering: auto; animation: cat-walk var(--walk) steps(var(--frames)) infinite; }
@keyframes cat-walk { from { top: 0; } to { top: calc(var(--sheet) * -1); } }
/* sağa bakıyor → soldan sağa koşar (--dir:-1 yaparsan aynalanır) */
@keyframes cat-cross { from { transform: translateX(-34vw) scale(var(--sc)) scaleX(var(--dir)); } to { transform: translateX(118vw) scale(var(--sc)) scaleX(var(--dir)); } }
.cat-sprite.r1 { --sc: .58; --cross: 15s; --walk: .62s; bottom: 3%;  opacity: .95; }
.cat-sprite.r2 { --sc: .36; --cross: 25s; --walk: .72s; bottom: 13%; opacity: .55; animation-delay: -9s; }
.cat-sprite.r3 { --sc: .46; --cross: 19s; --walk: .66s; bottom: 1%;  opacity: .8;  animation-delay: -5s; }
@media (max-width: 600px) { .cat-sprite.r1 { --sc: .4; } .cat-sprite.r3 { --sc: .32; } .cat-sprite.r2 { display: none; } }
@media (prefers-reduced-motion: reduce) { .cat-sprite img { animation: none; } .cat-sprite { animation-duration: 80s; } }

/* ── KÖŞE KEDİSİ: el sallayıp kalp gönderir (sol-alt) ── 48 kare, 200x200 ── */
/* rotate(90°) kareyi döndürür ama kutu boyu sabit kalır; scale ortadan olduğu için
   sol kenara yapışması: left = -(100 * (1 - scale))px. scale .62 → -38px (her ekranda aynı). */
.cat-heart { position: fixed; left: -38px; top: 8%; bottom: auto; z-index: 7; width: 200px; height: 200px;
    overflow: hidden; pointer-events: none; transform: rotate(90deg) scale(.62); transform-origin: center center;
    opacity: 0; transition: opacity .7s var(--ease) 1.2s; }
body.is-reading .cat-heart { opacity: 1; }
.cat-heart img { position: absolute; top: 0; left: 0; width: 200px; max-width: none; height: auto; display: block;
    animation: heart-cat 2s steps(48) infinite; }
@keyframes heart-cat { from { top: 0; } to { top: -9600px; } }
@media (max-width: 600px) { .cat-heart { transform: rotate(90deg) scale(.48); left: -52px; top: 6%; } }
@media (prefers-reduced-motion: reduce) { .cat-heart img { animation: none; } }

/* ═══════════════════════════════════════════════
   1. ENTRY - sevimli yuvarlak kart
   ═══════════════════════════════════════════════ */
.entry { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: hidden; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.entry.is-leaving { opacity: 0; transform: scale(1.05); pointer-events: none; }
.entry-card {
    position: relative; z-index: 5; width: 100%; max-width: 450px; padding: 52px 36px 40px;
    background:
        radial-gradient(ellipse at 30% 16%, rgba(255,213,150,0.5), transparent 60%),
        linear-gradient(160deg, rgba(255,255,255,0.9) 0%, rgba(255,248,238,0.86) 100%);
    backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border: 2px solid rgba(var(--kas-title-rgb), 0.34); border-radius: 28px;
    text-align: center; color: var(--ink);
    box-shadow: 0 30px 70px -28px rgba(181,106,53,0.4), inset 0 1px 0 rgba(255,255,255,0.85);
    animation: entry-rise 1s var(--bounce) .3s both;
}
@keyframes entry-rise { from { opacity: 0; transform: translateY(28px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
.entry-ribbon { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; }
.entry-ribbon-line { width: 34px; height: 2px; border-radius: 2px; background: var(--honey-l); opacity: 0.8; }
.entry-ribbon-drop { color: var(--honey); }
.entry-ribbon-drop svg { width: 20px; height: 20px; display: block; }
.entry-eyebrow { font-family: var(--font-caps); font-size: 12px; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--honey-d); margin-bottom: 18px; padding-left: 0.34em; }
.entry-shell { margin: 0 auto 18px; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #ffe6c4, var(--honey-l) 55%, var(--honey-d)); color: #fff; box-shadow: 0 16px 30px -10px rgba(181,106,53,0.5), inset 0 -8px 16px rgba(140,80,30,0.25), inset 0 3px 8px rgba(255,255,255,0.5); }
.entry-shell svg { width: 52px; height: 52px; }
.entry-couple { font-family: var(--font-h); font-weight: 600; font-size: clamp(34px, 6vw, 46px); color: var(--ink); line-height: 1.05; margin: 0 0 8px; letter-spacing: -0.01em; }
.entry-amp { font-family: var(--font-script); font-weight: 700; color: var(--honey); margin: 0 6px; font-size: 1.05em; }
.entry-sub { font-family: var(--font-script); font-weight: 600; font-size: clamp(20px, 3.2vw, 26px); color: var(--ink-2); margin: 0 0 32px; }
.entry-btn { min-height: 54px; padding: 0 30px 0 calc(30px + 0.2em); background: linear-gradient(180deg, var(--honey-l), var(--honey-d)); color: #fff; border: 0; border-radius: 30px; font-family: var(--font-caps); font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 12px; box-shadow: 0 14px 28px -10px rgba(181,106,53,0.6); transition: transform .25s var(--bounce), box-shadow .25s var(--ease); }
.entry-btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 22px 40px -12px rgba(181,106,53,0.7); }
.entry-btn svg { width: 16px; height: 16px; }
.entry-foot { margin-top: 24px; font-family: var(--font-caps); font-size: 11px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); padding-left: 0.28em; }
.entry-brand { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 6; font-family: var(--font-caps); font-size: 11px; font-weight: 500; letter-spacing: 0.34em; color: rgba(90,70,50,0.45); }

/* ═══════════════════════════════════════════════
   2. OPENING - sıcak ışık patlaması
   ═══════════════════════════════════════════════ */
.opening { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; background: transparent; opacity: 0; transition: opacity .5s ease; overflow: hidden; pointer-events: none; }
.opening.is-active { opacity: 1; }
.opening.is-done   { opacity: 0; pointer-events: none; }
.bloom { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(246,183,107,0.5) 40%, transparent 70%); opacity: 0; }
.opening.is-active .bloom { animation: bloom 2.1s var(--ease) forwards; }
@keyframes bloom { 0% { opacity: 0; width: 20px; height: 20px; } 35% { opacity: 0.9; } 100% { opacity: 0; width: 180vw; height: 180vw; } }
/* koşan pati izi açılış */
.opening-paws { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; gap: 14px; }
.opening-paws span { color: var(--honey); opacity: 0; transform: scale(0.4); }
.opening-paws span svg { width: 30px; height: 30px; }
.opening.is-active .opening-paws span { animation: paw-pop .5s var(--bounce) forwards; }
.opening.is-active .opening-paws span:nth-child(1) { animation-delay: .15s; }
.opening.is-active .opening-paws span:nth-child(2) { animation-delay: .35s; }
.opening.is-active .opening-paws span:nth-child(3) { animation-delay: .55s; }
.opening.is-active .opening-paws span:nth-child(4) { animation-delay: .75s; }
@keyframes paw-pop { 0% { opacity: 0; transform: scale(0.4) translateY(8px); } 60% { opacity: 1; } 100% { opacity: 0.0; transform: scale(1) translateY(-6px); } }

/* ═══════════════════════════════════════════════
   3. MEMORY PAGE
   ═══════════════════════════════════════════════ */
.memory { position: relative; z-index: 5; padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); opacity: 0; transition: opacity .9s var(--ease); }
.memory.is-visible { opacity: 1; }
.block { position: relative; max-width: 760px; margin: 0 auto; padding: 56px 24px; z-index: 5; }
@media (min-width: 768px) { .block { padding: 80px 32px; } }
.block-head { text-align: center; margin-bottom: 36px; }
.block-eyebrow { font-family: var(--font-caps); font-size: 12px; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--honey-d); margin-bottom: 12px; padding-left: 0.34em; }
.block-title { font-family: var(--font-h); font-weight: 600; font-size: clamp(30px, 5.5vw, 44px); line-height: 1.15; color: var(--ink); margin: 0; letter-spacing: -0.015em; }
.block-ornament { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 240px; margin: 16px auto 0; }
.block-ornament-line { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--honey-l), transparent); }
.block-ornament svg { width: 20px; height: 20px; color: var(--honey); flex-shrink: 0; }

.frame { position: relative; padding: 10px; background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,243,228,0.88)); border-radius: 22px; border: 2px solid rgba(var(--kas-title-rgb),0.32); box-shadow: 0 20px 44px -22px rgba(181,106,53,0.32); transition: transform .4s var(--bounce), box-shadow .4s var(--ease); overflow: hidden; }
.frame img { border-radius: 14px; width: 100%; display: block; aspect-ratio: 4/5; object-fit: cover; }
.frame:hover { transform: translateY(-4px) rotate(-0.6deg); box-shadow: 0 28px 54px -22px rgba(181,106,53,0.45); }
.frame.frame-sm { padding: 6px; border-radius: 16px; }
.frame.frame-sm img { aspect-ratio: 4/3; border-radius: 11px; }

/* ─── HERO ─── */
.hero { position: relative; z-index: 5; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 110px 24px 60px; overflow: hidden; }
.hero::before { content: ''; position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%); width: min(88vw, 660px); height: min(88vw, 660px); border-radius: 50%; background: radial-gradient(circle, rgba(201,84,74,0.20), rgba(201,84,74,0.07) 46%, transparent 68%); pointer-events: none; z-index: -1; }
.hero-eyebrow { font-family: var(--font-caps); font-size: 12px; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--honey-d); margin-bottom: 14px; padding-left: 0.34em; animation: fade-up .9s var(--ease) .2s both; }
.hero-divider { width: 60px; height: 3px; border-radius: 3px; background: var(--honey-l); margin: 0 auto 28px; animation: scale-x .8s var(--ease) .3s both; }
@keyframes scale-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-couple { font-family: var(--font-script); font-weight: 700; font-size: clamp(54px, 11vw, 88px); color: var(--honey); line-height: 1; margin: 0 0 12px; animation: fade-up .9s var(--ease) .4s both; }
.hero-title { font-family: var(--font-h); font-weight: 500; margin: 0 0 24px; line-height: 1.06; color: var(--ink); letter-spacing: -0.02em; animation: fade-up .9s var(--ease) .5s both; }
.hero-title em { display: block; font-style: normal; font-weight: 600; font-size: clamp(28px, 5.2vw, 42px); color: var(--ink); }
.hero-since { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-caps); font-size: 12px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 38px; padding-left: 0.26em; animation: fade-up .9s var(--ease) .6s both; }
.hero-since-line { width: 28px; height: 2px; border-radius: 2px; background: var(--honey-l); }
.hero-photo { max-width: 340px; width: 80%; animation: fade-up 1.1s var(--bounce) .7s both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.hero-scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); font-family: var(--font-caps); font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); opacity: 0.9; padding-left: 0.26em; }
.hero-scroll::before { content: ''; display: block; width: 2px; height: 24px; margin: 0 auto 8px; border-radius: 2px; background: linear-gradient(180deg, transparent, var(--honey)); animation: pulse-line 2.4s ease-in-out infinite; }
@keyframes pulse-line { 0%, 100% { transform: scaleY(1); opacity: 0.6; } 50% { transform: scaleY(0.4); opacity: 0.2; } }

/* ─── DAY COUNTER ─── */
.day-counter { text-align: center; }
.day-counter-card { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 44px 56px; background: var(--card-bg); backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); border: 2px solid var(--line); border-radius: 28px; box-shadow: 0 26px 50px -26px rgba(181,106,53,0.3); position: relative; }
.day-counter-star { color: var(--honey); margin-bottom: 6px; }
.day-counter-star svg { width: 32px; height: 32px; }
.day-counter-eyebrow { font-family: var(--font-caps); font-size: 11px; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--honey-d); margin-bottom: 4px; padding-left: 0.34em; }
.day-counter-num { font-family: var(--font-h); font-weight: 700; font-size: clamp(64px, 14vw, 120px); line-height: 1; color: var(--honey); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin: 6px 0; }
.day-counter-label { font-family: var(--font-script); font-weight: 600; font-size: clamp(22px, 3.4vw, 28px); color: var(--ink); line-height: 1.3; }
.day-counter-foot { margin-top: 16px; font-family: var(--font-caps); font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-3); padding-left: 0.26em; }

/* ─── MESSAGE ─── */
.message-card { position: relative; padding: 46px 32px; background: var(--card-bg); backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); border: 2px solid var(--line); border-radius: 28px; box-shadow: 0 26px 50px -26px rgba(181,106,53,0.3); }
@media (min-width: 768px) { .message-card { padding: 60px 48px; } }
.message-icon { display: flex; justify-content: center; margin-bottom: 16px; color: var(--honey); }
.message-icon svg { width: 38px; height: 38px; }
.message-text { font-family: var(--font-script); font-weight: 600; font-size: clamp(22px, 4.6vw, 30px); line-height: 1.6; color: var(--ink); text-align: center; margin: 0; }

/* ─── GALLERY ─── */
.slider { position: relative; max-width: 560px; margin: 0 auto; }
.slider-track { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: 24px; }
.slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.02); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.slide.is-active { opacity: 1; transform: scale(1); z-index: 2; }
.slide .frame { width: 100%; height: 100%; padding: 12px; }
.slide .frame img { height: 100%; aspect-ratio: auto; }
.slide-cap { position: absolute; left: 30px; bottom: 30px; font-family: var(--font-script); font-weight: 700; font-size: 32px; color: #fff; text-shadow: 0 2px 12px rgba(120,70,30,0.7); z-index: 3; }
.slider-nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 26px; }
.slider-arrow { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.85); border: 2px solid var(--line); color: var(--honey-d); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px -8px rgba(181,106,53,0.45); transition: all .2s var(--bounce); }
.slider-arrow:hover { background: var(--honey); color: #fff; border-color: var(--honey); transform: scale(1.08); }
.slider-arrow svg { width: 15px; height: 15px; }
.slider-dots { display: flex; gap: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(var(--kas-title-rgb), 0.32); cursor: pointer; transition: all .3s var(--ease); }
.dot.is-active { width: 30px; border-radius: 6px; background: var(--honey); }

/* ─── NOTE ─── */
.note { max-width: 520px; text-align: center; }
.note-text { font-family: var(--font-script); font-weight: 600; font-size: clamp(26px, 5vw, 38px); line-height: 1.45; color: var(--honey-d); }
.note-text::before, .note-text::after { display: inline-block; font-family: var(--font-h); color: var(--honey-l); opacity: 0.7; font-size: 1.2em; line-height: 0; vertical-align: -0.2em; margin: 0 0.08em; }
.note-text::before { content: '“'; }
.note-text::after  { content: '”'; }

/* ─── LETTER ─── */
.letter { max-width: 640px; }
.letter-paper { position: relative; padding: 44px 34px 38px; background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,249,240,0.9)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 2px solid var(--line); border-radius: 26px; box-shadow: 0 26px 50px -26px rgba(181,106,53,0.32); }
@media (min-width: 768px) { .letter-paper { padding: 60px 52px 50px; } }
.letter-mark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-caps); font-size: 11px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--honey-d); margin-bottom: 24px; padding-left: 0.3em; }
.letter-mark::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--honey-l); }
.letter-to { font-family: var(--font-script); font-weight: 700; font-size: clamp(36px, 5.8vw, 48px); color: var(--honey-d); margin-bottom: 18px; line-height: 1.05; }
.letter-body { font-family: var(--font-b); font-size: 16px; line-height: 1.95; color: var(--ink-2); }
.letter-body p { margin: 0 0 14px; }
.letter-body p:last-child { margin-bottom: 0; }
.letter-from { margin-top: 28px; text-align: right; }
.letter-from-name { font-family: var(--font-script); font-weight: 700; font-size: 36px; color: var(--honey-d); }

/* ─── TIMELINE ─── */
.timeline-list { list-style: none; margin: 0; padding: 0 0 0 38px; position: relative; }
.timeline-list::before { content: ''; position: absolute; left: 15px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--honey) 0%, var(--honey-l) 50%, var(--mint) 100%); opacity: 0.55; }
.tl-item { position: relative; padding: 0 0 40px 24px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: -38px; top: 4px; width: 32px; height: 32px; border-radius: 50%; background: var(--cream); border: 2.5px solid var(--honey); display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 4px 12px -4px rgba(181,106,53,0.45); }
.tl-dot svg { width: 15px; height: 15px; color: var(--honey); }
.tl-card { display: flex; gap: 18px; flex-wrap: wrap; padding: 18px; background: var(--card-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 2px solid var(--line); border-radius: 22px; box-shadow: 0 18px 38px -22px rgba(181,106,53,0.28); }
.tl-photo { width: 130px; flex-shrink: 0; }
.tl-text { flex: 1; min-width: 200px; }
.tl-date { display: inline-block; font-family: var(--font-caps); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--honey-d); margin-bottom: 10px; padding: 3px 13px 3px calc(13px + 0.18em); background: rgba(var(--kas-title-rgb), 0.12); border: 1.5px solid rgba(var(--kas-title-rgb), 0.26); border-radius: 20px; }
.tl-title { font-family: var(--font-h); font-weight: 600; font-size: clamp(20px, 4vw, 24px); line-height: 1.25; color: var(--ink); margin: 0 0 6px; }
.tl-desc { font-family: var(--font-b); font-size: 15px; line-height: 1.7; color: var(--ink-2); margin: 0; }

/* ─── SURPRISE (pati orb) ─── */
.surprise { text-align: center; padding: 50px 24px; }
.surprise-orb-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 24px; padding: 44px; cursor: pointer; }
.surprise-orb-wrap::before { content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 196px; height: 196px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--kas-title-rgb),0.20) 0%, transparent 66%); pointer-events: none; }
.surprise-ring { position: absolute; top: 27px; left: 50%; transform: translateX(-50%); width: 150px; height: 150px; border: 3px dashed rgba(var(--kas-title-rgb),0.5); border-radius: 50%; animation: ring-spin 28s linear infinite; pointer-events: none; }
.surprise-ring.r2 { top: 44px; width: 116px; height: 116px; border: 2px solid rgba(var(--kas-title-rgb),0.45); animation: ring-pulse 2.8s ease-out infinite; }
@keyframes ring-spin { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes ring-pulse { 0% { transform: translateX(-50%) scale(0.78); opacity: 0.75; } 100% { transform: translateX(-50%) scale(1.5); opacity: 0; } }
.surprise-orb { position: relative; z-index: 1; width: 116px; height: 116px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #ffe6c4 0%, var(--honey-l) 42%, var(--honey-d) 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 22px 44px -12px rgba(181,106,53,0.55), inset 0 2px 10px rgba(255,255,255,0.6), inset 0 -12px 22px rgba(140,80,30,0.28); transition: transform .4s var(--bounce); color: #fff; }
.surprise-orb-wrap:hover .surprise-orb { transform: scale(1.08) rotate(-4deg); }
.surprise-orb svg { width: 52px; height: 52px; }
.surprise-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-script); font-weight: 700; font-size: 30px; color: var(--honey-d); }
.surprise-label svg { width: 22px; height: 22px; opacity: .8; }
.surprise-card { margin: 16px auto 0; max-width: 480px; display: none; animation: reveal-up .7s var(--bounce) both; }
.surprise-card.is-open { display: block; }
@keyframes reveal-up { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
.surprise-text { font-family: var(--font-script); font-weight: 600; font-size: clamp(22px, 4.6vw, 28px); line-height: 1.6; color: var(--ink); text-align: center; margin: 0; }

/* ─── GUESTBOOK ─── */
.guestbook { max-width: 640px; }
.gb-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.gb-entry { padding: 20px 24px; background: var(--card-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 2px solid var(--line); border-radius: 22px; box-shadow: 0 14px 32px -20px rgba(181,106,53,0.26); }
.gb-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.gb-head strong { font-family: var(--font-h); font-weight: 600; font-size: 18px; color: var(--honey-d); }
.gb-head time { font-family: var(--font-caps); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-left: 0.14em; }
.gb-entry p { font-family: var(--font-b); font-size: 15px; line-height: 1.7; color: var(--ink-2); margin: 0; }
.gb-form { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: rgba(255,243,228,0.65); border: 2px solid var(--line-soft); border-radius: 22px; }
.gb-form input, .gb-form textarea { width: 100%; padding: 12px 16px; background: rgba(255,255,255,0.9); color: var(--ink); border: 2px solid var(--line-soft); border-radius: 14px; font-family: var(--font-b); font-size: 15px; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.gb-form input::placeholder, .gb-form textarea::placeholder { color: var(--muted); }
.gb-form textarea { resize: vertical; min-height: 72px; }
.gb-form input:focus, .gb-form textarea:focus { border-color: var(--honey); box-shadow: 0 0 0 4px rgba(var(--kas-title-rgb),0.14); }
.gb-form button { align-self: flex-end; min-height: 46px; padding: 0 26px 0 calc(26px + 0.16em); background: linear-gradient(180deg, var(--honey-l), var(--honey-d)); color: #fff; border: 0; border-radius: 24px; font-family: var(--font-caps); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; box-shadow: 0 8px 20px -8px rgba(181,106,53,0.55); transition: transform .2s var(--bounce); }
.gb-form button:hover { transform: translateY(-2px) scale(1.03); }

/* ─── FOOTER ─── */
.footer { text-align: center; padding: 60px 24px 40px; }
.footer-star { color: var(--honey); margin-bottom: 12px; }
.footer-star svg { width: 38px; height: 38px; }
.footer-couple { font-family: var(--font-script); font-weight: 700; font-size: clamp(44px, 9vw, 60px); color: var(--honey); margin: 0 0 8px; line-height: 1; }
.footer-since { font-family: var(--font-caps); font-size: 12px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 22px; padding-left: 0.28em; }
.footer-counter { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px 9px calc(18px + 0.12em); background: rgba(255,255,255,0.75); border: 2px solid var(--line); border-radius: 24px; font-family: var(--font-caps); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.footer-counter-num { color: var(--honey-d); font-weight: 700; font-variant-numeric: tabular-nums; }
.footer-brand { margin-top: 30px; font-family: var(--font-caps); font-size: 11px; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted); opacity: 0.85; padding-left: 0.34em; }

/* ═══ STICKY MÜZİK PLAYER ═══ */
/* ortalı, yuvarlak yüzen pill (full-width değil) - diğer temalarla aynı düzen */
.player { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 50; width: min(360px, calc(100% - 32px)); display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 100px; overflow: hidden; background: rgba(255,250,243,0.96); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border: 2px solid var(--line); box-shadow: 0 18px 40px -14px rgba(181,106,53,0.45); transform: translate(-50%, 180%); transition: transform .6s var(--ease) .3s; }
body.is-reading .player { transform: translate(-50%, 0); }
.player-progress { position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 3px; background: rgba(var(--kas-title-rgb),0.14); }
.player-progress-fill { height: 100%; width: 42%; background: linear-gradient(90deg, var(--honey-d), var(--honey-l)); }
.player-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.player-btn { width: 30px; height: 30px; border-radius: 50%; color: var(--honey-d); display: flex; align-items: center; justify-content: center; transition: background .15s ease; }
.player-btn:hover { background: rgba(var(--kas-title-rgb),0.12); }
.player-btn svg { width: 16px; height: 16px; }
.player-btn.player-play { width: 34px; height: 34px; background: linear-gradient(180deg, var(--honey-l), var(--honey-d)); color: #fff; }
.player-btn.player-play svg { width: 15px; height: 15px; }
.player-info { flex: 1; min-width: 0; }
.player-title { font-family: var(--font-h); font-weight: 500; font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-meta { display: flex; align-items: center; gap: 8px; font-family: var(--font-caps); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-3); margin-top: 1px; padding-left: 0.12em; font-variant-numeric: tabular-nums; }
.player-note { flex-shrink: 0; color: var(--honey); opacity: 0.85; }
.player-note svg { width: 20px; height: 20px; }
@media (max-width: 480px) { .player-note { display: none; } }

/* ═══ SICAKLIK KATMANLARI - güneş ışınları + doku + vinyet ═══ */
.scene-rays { position: absolute; top: -30%; right: -12%; width: 86vw; height: 130vh; transform: rotate(17deg); transform-origin: top right; background: repeating-linear-gradient(90deg, rgba(255,221,160,0) 0px, rgba(255,221,160,0.14) 2px, rgba(255,221,160,0) 28px, rgba(255,221,160,0) 76px); filter: blur(7px); opacity: 0.55; mix-blend-mode: screen; animation: ray-sway 20s ease-in-out infinite; }
@keyframes ray-sway { 0%, 100% { transform: rotate(15deg) translateX(0); opacity: 0.5; } 50% { transform: rotate(19deg) translateX(2vw); opacity: 0.7; } }
.grain { position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.vignette { position: absolute; inset: 0; background: radial-gradient(125% 100% at 50% 26%, transparent 54%, rgba(120,78,38,0.12) 100%); }

/* ═══ SCROLL-REVEAL - bloklar süzülerek belirir ═══ */
.kas-rise { opacity: 0; transform: translateY(32px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.kas-rise.is-in { opacity: 1; transform: none; }

/* ═══ OKUMA İLERLEME ÇUBUĞU ═══ */
.kas-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 120; background: linear-gradient(90deg, var(--honey-l), var(--honey-d)); box-shadow: 0 0 10px rgba(232,148,63,0.5); border-radius: 0 3px 3px 0; transition: width .12s linear; opacity: 0; }
body.is-reading .kas-progress { opacity: 1; }

/* ═══ MİKRO-ETKİLEŞİMLER - pati kuyruk sallar ═══ */
@keyframes paw-wag { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.entry-shell svg { transform-origin: 50% 72%; animation: paw-wag 3.6s ease-in-out infinite; }
.surprise-orb-wrap:hover .surprise-orb svg { animation: paw-wag .5s ease-in-out 2; }

/* ─── KÜNYE / KİŞİLİK ─── */
.facts { max-width: 700px; }
.facts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 560px) { .facts-grid { grid-template-columns: 1fr; } }
.fact { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--card-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 2px solid var(--line); border-radius: 20px; box-shadow: 0 14px 32px -22px rgba(181,106,53,0.26); transition: transform .3s var(--bounce), box-shadow .3s var(--ease); }
.fact:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -22px rgba(181,106,53,0.36); }
.fact-ic { width: 48px; height: 48px; flex-shrink: 0; border-radius: 15px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(160deg, var(--honey-l), var(--honey-d)); box-shadow: inset 0 2px 6px rgba(255,255,255,0.42), inset 0 -6px 12px rgba(140,80,30,0.25); }
.fact-ic svg { width: 24px; height: 24px; }
.fact-k { font-family: var(--font-caps); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--honey-d); margin-bottom: 2px; }
.fact-v { font-family: var(--font-h); font-weight: 600; font-size: 18px; color: var(--ink); line-height: 1.2; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }