/* ============================================================
   TEMA: GÖKYÜZÜ - yumuşak gündüz göğü (bespoke)
   Mavi-krem gök (SABİT) + süzülen bulutlar + 3D kelebekler
   Özelleştirilebilir: başlık/vurgu, metin, kart renkleri. Arka plan sabit.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }

:root {
    --sky-1: #a7d8ef;
    --sky-2: #cdeaf4;
    --sky-3: #fdeede;
    --cream: #fffdf9;

    --acc:    #ef8e7a;
    --acc-l:  #ffb4a2;
    --acc-d:  #d56b57;
    --sky:    #5fa9d0;

    --ink:    #42566a;
    --ink-2:  #5e7286;
    --ink-3:  #8aa0b2;
    --muted:  #a9b8c6;

    --kas-title-rgb: 239,142,122;
    --kas-text-rgb:  66,86,106;
    --kas-card-rgb:  255,255,255;

    --card-bg:   rgba(var(--kas-card-rgb), 0.70);
    --card-bg-2: rgba(var(--kas-card-rgb), 0.58);
    --line:      rgba(var(--kas-title-rgb), 0.26);
    --line-soft: rgba(var(--kas-title-rgb), 0.15);

    --font-h:     'Cormorant Garamond', Georgia, serif;
    --font-b:     'Lora', Georgia, serif;
    --font-caps:  'Cinzel', Georgia, serif;
    --font-script:'Great Vibes', cursive;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body {
    font-family: var(--font-b); color: var(--ink); line-height: 1.7;
    background:
        radial-gradient(90% 60% at 84% 6%, rgba(255,244,214,0.75), transparent 55%),
        linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 52%, 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(--acc); color: #fff; }

/* ═══ GÖK SAHNESİ - güneş + süzülen bulutlar + kelebekler ═══ */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sun { position: absolute; top: -8vh; right: -4vw; width: 44vw; height: 44vw; border-radius: 50%; background: radial-gradient(circle, rgba(255,248,224,0.9), rgba(255,240,200,0.35) 38%, transparent 68%); animation: sun-breathe 14s ease-in-out infinite; }
@keyframes sun-breathe { 0%,100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }

.cloud { position: absolute; left: 0; will-change: transform; animation: cloud-drift linear infinite; }
.cloud img { width: 100%; height: auto; display: block; filter: blur(2.5px) brightness(1.07) contrast(0.96); }
.cloud.cg img, .cloud.cg2 img { filter: blur(6px) brightness(1.08) contrast(0.94); }
@keyframes cloud-drift { from { transform: translateX(-36vw); } to { transform: translateX(124vw); } }
.c1 { top:  8%; width: clamp(220px, 34vw, 460px); opacity: .95; animation-duration: 88s;  animation-delay: -18s; }
.c2 { top: 24%; width: clamp(180px, 28vw, 360px); opacity: .8;  animation-duration: 116s; animation-delay: -64s; }
.c3 { top: 44%; width: clamp(150px, 22vw, 280px); opacity: .7;  animation-duration: 74s;  animation-delay: -40s; }
.c4 { top: 64%; width: clamp(260px, 40vw, 540px); opacity: .9;  animation-duration: 134s; animation-delay: -96s; }
.c5 { top: 18%; width: clamp(160px, 24vw, 300px); opacity: .5;  animation-duration: 104s; animation-delay: -8s;  }
.c6 { top: 52%; width: clamp(130px, 18vw, 220px); opacity: .6;  animation-duration: 68s;  animation-delay: -52s; }
.c7 { top: 36%; width: clamp(200px, 30vw, 400px); opacity: .85; animation-duration: 98s;  animation-delay: -30s; }
.c8 { top: 78%; width: clamp(150px, 22vw, 300px); opacity: .65; animation-duration: 82s;  animation-delay: -70s; }
.cloud.cg { top: -4%; left: -6%; width: clamp(420px, 56vw, 820px); opacity: .97; animation: cloud-bob 30s ease-in-out infinite; }
.cloud.cg2 { top: 4%; right: -8%; left: auto; width: clamp(320px, 44vw, 640px); opacity: .8; animation: cloud-bob 38s ease-in-out infinite -10s; }
@keyframes cloud-bob { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3.5%); } }

/* 3D kelebekler - gerçek suluboya kanat görselleri */
.bfly { position: absolute; top: 0; left: 0; transform-style: preserve-3d; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: backwards; }
.bfly-i { position: relative; display: block; transform-style: preserve-3d; animation: bfly-bob ease-in-out infinite; }
.bfly .wing { position: absolute; top: 0; height: var(--bh, 60px); width: calc(var(--bh, 60px) * 0.5); background-size: 100% 100%; background-repeat: no-repeat; backface-visibility: visible; filter: drop-shadow(0 8px 8px rgba(60,90,110,0.18)); }
.bfly .left  { right: 50%; transform-origin: 100% 50%; background-image: url('/gorseller/themes/gokyuzu/bfly-left.webp');  animation: flap-l .26s ease-in-out infinite alternate; }
.bfly .right { left: 50%;  transform-origin: 0% 50%;   background-image: url('/gorseller/themes/gokyuzu/bfly-right.webp'); animation: flap-r .26s ease-in-out infinite alternate; }
.bfly.green  .left  { background-image: url('/gorseller/themes/gokyuzu/bfly-green-left.webp'); }
.bfly.green  .right { background-image: url('/gorseller/themes/gokyuzu/bfly-green-right.webp'); }
.bfly.yellow .left  { background-image: url('/gorseller/themes/gokyuzu/bfly-yellow-left.webp'); }
.bfly.yellow .right { background-image: url('/gorseller/themes/gokyuzu/bfly-yellow-right.webp'); }
@keyframes flap-l { from { transform: perspective(360px) rotateY(12deg); } to { transform: perspective(360px) rotateY(76deg); } }
@keyframes flap-r { from { transform: perspective(360px) rotateY(-12deg); } to { transform: perspective(360px) rotateY(-76deg); } }
@keyframes bfly-bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-22px) rotate(6deg); } }
@keyframes bfly-p1 { 0% { transform: translate(-12vw,13vh); opacity:0; } 6% { opacity:1; } 35% { transform: translate(30vw,8vh); } 65% { transform: translate(66vw,18vh); } 94% { opacity:1; } 100% { transform: translate(118vw,11vh); opacity:0; } }
@keyframes bfly-p2 { 0% { transform: translate(118vw,67vh); opacity:0; } 6% { opacity:1; } 38% { transform: translate(66vw,74vh); } 70% { transform: translate(24vw,61vh); } 94% { opacity:1; } 100% { transform: translate(-14vw,69vh); opacity:0; } }
@keyframes bfly-p3 { 0% { transform: translate(-12vw,41vh); opacity:0; } 6% { opacity:1; } 36% { transform: translate(32vw,34vh); } 66% { transform: translate(68vw,47vh); } 94% { opacity:1; } 100% { transform: translate(118vw,38vh); opacity:0; } }
@keyframes bfly-p4 { 0% { transform: translate(118vw,27vh); opacity:0; } 6% { opacity:1; } 34% { transform: translate(70vw,34vh); } 68% { transform: translate(28vw,23vh); } 94% { opacity:1; } 100% { transform: translate(-14vw,30vh); opacity:0; } }
@keyframes bfly-p5 { 0% { transform: translate(-12vw,55vh); opacity:0; } 6% { opacity:1; } 35% { transform: translate(34vw,49vh); } 67% { transform: translate(70vw,60vh); } 94% { opacity:1; } 100% { transform: translate(118vw,52vh); opacity:0; } }
@keyframes bfly-p6 { 0% { transform: translate(118vw,9vh); opacity:0; } 6% { opacity:1; } 36% { transform: translate(66vw,20vh); } 70% { transform: translate(26vw,12vh); } 94% { opacity:1; } 100% { transform: translate(-14vw,16vh); opacity:0; } }
.bfly.f1 { --bh: 84px; animation-name: bfly-p1; animation-duration: 22s; animation-delay: 0.1s; }
.bfly.f1 .bfly-i { animation-duration: 3.7s; } .bfly.f1 .wing { animation-duration: .24s; }
.bfly.f2 { --bh: 50px; animation-name: bfly-p3; animation-duration: 18s; animation-delay: 0.7s; }
.bfly.f2 .bfly-i { animation-duration: 4.5s; } .bfly.f2 .wing { animation-duration: .30s; }
.bfly.f3 { --bh: 36px; animation-name: bfly-p2; animation-duration: 16s; animation-delay: 0.3s; }
.bfly.f3 .bfly-i { animation-duration: 3.1s; } .bfly.f3 .wing { animation-duration: .22s; }
.bfly.f4 { --bh: 44px; animation-name: bfly-p4; animation-duration: 21s; animation-delay: 1s; }
.bfly.f4 .bfly-i { animation-duration: 3.4s; } .bfly.f4 .wing { animation-duration: .28s; }
.bfly.f5 { --bh: 64px; animation-name: bfly-p6; animation-duration: 26s; animation-delay: 0.5s; }
.bfly.f5 .bfly-i { animation-duration: 4.1s; } .bfly.f5 .wing { animation-duration: .26s; }
.bfly.f6 { --bh: 54px; animation-name: bfly-p5; animation-duration: 20s; animation-delay: 1.3s; }
.bfly.f6 .bfly-i { animation-duration: 3.9s; } .bfly.f6 .wing { animation-duration: .33s; }

/* ═══ 1. ENTRY ═══ */
.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: 54px 36px 42px;
    background:
        radial-gradient(ellipse at 30% 18%, rgba(255,228,214,0.5), transparent 60%),
        linear-gradient(160deg, rgba(255,255,255,0.86) 0%, rgba(245,251,255,0.82) 100%);
    backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid rgba(var(--kas-title-rgb), 0.28); border-radius: 8px;
    text-align: center; color: var(--ink);
    box-shadow: 0 30px 70px -28px rgba(70,110,150,0.4), inset 0 1px 0 rgba(255,255,255,0.85);
    animation: entry-rise 1s var(--ease) .3s both;
}
.entry-card::before { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(var(--kas-title-rgb), 0.22); border-radius: 5px; pointer-events: none; }
.entry-card::after { content: ''; position: absolute; inset: 18px; border-top: 1px solid rgba(var(--kas-title-rgb), 0.13); border-bottom: 1px solid rgba(var(--kas-title-rgb), 0.13); pointer-events: none; }
@keyframes entry-rise { from { opacity: 0; transform: translateY(28px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.entry-ribbon { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; }
.entry-ribbon-line { width: 38px; height: 1px; background: var(--acc-l); opacity: 0.85; }
.entry-ribbon-drop { color: var(--acc); }
.entry-ribbon-drop svg { width: 18px; height: 18px; display: block; }
.entry-eyebrow { font-family: var(--font-caps); font-size: 11px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--acc); font-weight: 500; margin-bottom: 22px; padding-left: 0.5em; }
.entry-shell { margin: 0 auto 22px; width: 92px; height: 70px; display: block; color: var(--acc); }
.entry-couple { font-family: var(--font-h); font-style: italic; font-weight: 500; font-size: clamp(34px, 6vw, 46px); color: var(--ink); line-height: 1.05; margin: 0 0 8px; letter-spacing: -0.005em; }
.entry-amp { font-family: var(--font-script); font-style: normal; color: var(--acc); margin: 0 4px; font-size: 1.1em; }
.entry-sub { font-family: var(--font-h); font-style: italic; font-size: clamp(15px, 2.4vw, 18px); color: var(--ink-2); margin: 0 0 34px; }
.entry-btn { min-height: 52px; padding: 0 32px 0 calc(32px + 0.4em); background: linear-gradient(180deg, var(--acc), var(--acc-d)); color: #fff; border: 1px solid var(--acc-d); border-radius: 4px; font-family: var(--font-caps); font-size: 11px; font-weight: 500; letter-spacing: 0.4em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 12px; box-shadow: 0 12px 28px -10px rgba(213,107,87,0.5); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.entry-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -12px rgba(213,107,87,0.65); }
.entry-btn svg { width: 13px; height: 13px; }
.entry-foot { margin-top: 26px; font-family: var(--font-caps); font-size: 9.5px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--muted); padding-left: 0.5em; }
.entry-brand { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 6; font-family: var(--font-caps); font-size: 9.5px; letter-spacing: 0.5em; color: rgba(66,86,106,0.45); }

/* açılış kelebeği - kartın üst köşesine konar, basınca uçar */
.bfly.eb-fly { --bh: 110px; position: fixed; left: calc(63% - 20px); top: 16vh; z-index: 200; cursor: pointer; opacity: 0; animation: eb-in 3.2s cubic-bezier(0.16,0.72,0.3,1) 0.5s forwards; }
.bfly.eb-fly .bfly-i { animation: bfly-bob 3.4s ease-in-out infinite; }
.bfly.eb-fly .wing { animation-duration: .26s; filter: drop-shadow(0 9px 9px rgba(60,90,110,0.22)); }
.bfly.eb-fly.is-flyaway { animation: eb-away 1.5s cubic-bezier(0.4,0,0.7,1) forwards; cursor: default; }
@media (max-width: 560px) { .bfly.eb-fly { --bh: 84px; left: auto; right: 50px; top: 11vh; } }
@keyframes eb-in {
    0%   { transform: translate(34vw, 48vh) scale(0.46); opacity: 0; }
    18%  { opacity: 1; }
    100% { transform: translate(0, 0) scale(1); opacity: 1; }
}
@keyframes eb-away {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    55%  { transform: translate(7vw, -34vh) scale(0.84); opacity: 1; }
    100% { transform: translate(17vw, -90vh) scale(0.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .bfly.eb-fly { animation: none; opacity: 1; } }
/* sahne kelebekleri yalnızca AÇILDIKTAN sonra görünür */
.sky .bfly { display: none; }
body.is-reading .sky .bfly { display: block; }
@media (max-width: 560px) {
    body.is-reading .sky .bfly.f2,
    body.is-reading .sky .bfly.f4,
    body.is-reading .sky .bfly.f6 { display: none; }
    .sky .bfly.f1 { --bh: 54px; animation-delay: 0.5s; }
    .sky .bfly.f3 { --bh: 44px; animation-delay: 2.6s; }
    .sky .bfly.f5 { --bh: 50px; animation-delay: 4.8s; }
}

/* ═══ 2. OPENING ═══ */
.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(255,236,210,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; } }

/* ═══ 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: 11px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--acc); margin-bottom: 14px; padding-left: 0.5em; font-weight: 500; }
.block-title { font-family: var(--font-h); font-style: italic; font-weight: 500; 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: 18px auto 0; }
.block-ornament-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--acc-l), transparent); }
.block-ornament svg { width: 20px; height: 20px; color: var(--acc); flex-shrink: 0; }

/* GALERİ - gökyüzünde süzülen fotoğraf */
.frame {
    position: relative; padding: 9px; background: rgba(255,255,255,0.82); border-radius: 16px;
    box-shadow: 0 40px 70px -26px rgba(86,128,166,0.48), 0 16px 34px -16px rgba(86,128,166,0.30), inset 0 0 0 1px rgba(255,255,255,0.75);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); overflow: hidden;
}
.frame img { width: 100%; display: block; border-radius: 9px; aspect-ratio: 4/5; object-fit: cover; }
.frame.frame-sm { padding: 6px; border-radius: 11px; }
.frame.frame-sm img { aspect-ratio: 4/3; border-radius: 6px; }
.hero-photo .frame, .slide.is-active .frame { animation: kas-float 6.5s ease-in-out infinite; }
@keyframes kas-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .hero-photo .frame, .slide.is-active .frame { animation: none; } }

/* ─── 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-eyebrow { font-family: var(--font-caps); font-size: 11px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--acc); font-weight: 500; margin-bottom: 16px; padding-left: 0.5em; animation: fade-up .9s var(--ease) .2s both; }
.hero-divider { width: 60px; height: 1px; background: var(--acc-l); margin: 0 auto 30px; 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-size: clamp(48px, 10vw, 80px); color: var(--acc); line-height: 1; margin: 0 0 16px; text-shadow: 0 4px 30px rgba(255,255,255,0.6); animation: fade-up .9s var(--ease) .4s both; }
.hero-title { font-family: var(--font-h); font-weight: 500; margin: 0 0 26px; line-height: 1.04; color: var(--ink); letter-spacing: -0.025em; animation: fade-up .9s var(--ease) .5s both; }
.hero-title em { display: block; font-style: italic; font-weight: 500; font-size: clamp(30px, 5.5vw, 46px); color: var(--ink); }
.hero-since { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-caps); font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; margin-bottom: 38px; padding-left: 0.4em; animation: fade-up .9s var(--ease) .6s both; }
.hero-since-line { width: 30px; height: 1px; background: var(--acc-l); }
.hero-photo { position: relative; max-width: 370px; width: 85%; animation: fade-up 1.1s var(--ease) .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: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--muted); opacity: 0.9; padding-left: 0.4em; }
.hero-scroll::before { content: ''; display: block; width: 1px; height: 24px; margin: 0 auto 8px; background: linear-gradient(180deg, transparent, var(--acc)); 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: 6px; padding: 44px 56px; background: var(--card-bg); backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 26px 50px -26px rgba(70,110,150,0.3); position: relative; }
.day-counter-card::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(var(--kas-title-rgb),0.18); border-radius: 4px; pointer-events: none; }
.day-counter-star { color: var(--acc); margin-bottom: 8px; }
.day-counter-star svg { width: 30px; height: 30px; }
.day-counter-eyebrow { font-family: var(--font-caps); font-size: 10px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--acc); margin-bottom: 4px; padding-left: 0.5em; font-weight: 500; }
.day-counter-num { font-family: var(--font-h); font-style: italic; font-weight: 500; font-size: clamp(64px, 14vw, 120px); line-height: 1; color: var(--acc); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin: 6px 0; }
.day-counter-label { font-family: var(--font-h); font-style: italic; font-size: clamp(18px, 3vw, 22px); color: var(--ink); line-height: 1.3; }
.day-counter-foot { margin-top: 18px; font-family: var(--font-caps); font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ink-3); padding-left: 0.4em; }

/* ─── 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: 1px solid var(--line); border-radius: 6px; box-shadow: 0 26px 50px -26px rgba(70,110,150,0.3); }
@media (min-width: 768px) { .message-card { padding: 60px 48px; } }
.message-card::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(var(--kas-title-rgb),0.18); border-radius: 4px; pointer-events: none; }
.message-icon { display: flex; justify-content: center; margin-bottom: 18px; color: var(--acc); }
.message-icon svg { width: 34px; height: 34px; }
.message-text { font-family: var(--font-h); font-style: italic; font-size: clamp(18px, 4vw, 22px); line-height: 1.7; 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: visible; }
.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: 14px; }
.slide .frame img { height: 100%; aspect-ratio: auto; }
.slide-cap { position: absolute; left: 36px; bottom: 36px; font-family: var(--font-script); font-size: 28px; color: #fff; text-shadow: 0 2px 12px rgba(40,70,100,0.6); z-index: 3; }
.slider-nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 28px; }
.slider-arrow { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.82); border: 1px solid var(--line); color: var(--acc); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px -8px rgba(70,110,150,0.4); transition: all .2s var(--ease); }
.slider-arrow:hover { background: var(--acc); color: #fff; }
.slider-arrow svg { width: 14px; height: 14px; }
.slider-dots { display: flex; gap: 8px; }
.dot { width: 8px; height: 8px; background: rgba(var(--kas-title-rgb), 0.3); cursor: pointer; transition: all .3s var(--ease); }
.dot.is-active { width: 30px; background: var(--acc); }

/* ─── NOTE ─── */
.note { max-width: 520px; text-align: center; }
.note-text { font-family: var(--font-h); font-style: italic; font-size: clamp(22px, 4.5vw, 32px); line-height: 1.5; color: var(--acc); }
.note-text::before, .note-text::after { display: inline-block; font-family: var(--font-h); font-style: italic; color: var(--acc-l); opacity: 0.8; font-size: 1.4em; line-height: 0; vertical-align: -0.2em; margin: 0 0.1em; }
.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.92), rgba(247,251,255,0.9)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 26px 50px -26px rgba(70,110,150,0.32); }
@media (min-width: 768px) { .letter-paper { padding: 64px 56px 52px; } }
.letter-mark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-caps); font-size: 10px; letter-spacing: 0.45em; text-transform: uppercase; color: var(--acc); font-weight: 500; margin-bottom: 28px; padding-left: 0.45em; }
.letter-mark::before { content: ''; width: 24px; height: 1px; background: var(--acc-l); }
.letter-to { font-family: var(--font-script); font-size: clamp(34px, 5.5vw, 44px); color: var(--acc); margin-bottom: 22px; line-height: 1.05; }
.letter-body { font-family: var(--font-b); font-style: italic; font-size: 15.5px; line-height: 2; color: var(--ink-2); }
.letter-body p { margin: 0 0 14px; }
.letter-body p:last-child { margin-bottom: 0; }
.letter-from { margin-top: 30px; text-align: right; }
.letter-from-name { font-family: var(--font-script); font-size: 32px; color: var(--acc); }

/* ─── TIMELINE ─── */
.timeline-list { list-style: none; margin: 0; padding: 0 0 0 36px; position: relative; }
.timeline-list::before { content: ''; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(180deg, var(--acc) 0%, var(--acc-l) 50%, var(--sky) 100%); opacity: 0.6; }
.tl-item { position: relative; padding: 0 0 40px 24px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: -36px; top: 6px; width: 28px; height: 28px; border-radius: 50%; background: var(--cream); border: 1.5px solid var(--acc); display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 4px 12px -4px rgba(70,110,150,0.4); }
.tl-dot svg { width: 15px; height: 15px; color: var(--acc); }
.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: 1px solid var(--line); border-radius: 6px; box-shadow: 0 18px 38px -22px rgba(70,110,150,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: 10px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--acc); font-weight: 500; margin-bottom: 10px; padding: 3px 12px 3px calc(12px + 0.35em); background: rgba(var(--kas-title-rgb), 0.1); border: 1px solid rgba(var(--kas-title-rgb), 0.22); border-radius: 3px; }
.tl-title { font-family: var(--font-h); font-style: italic; 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-style: italic; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); margin: 0; }

/* ─── SURPRISE (kelebek 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: 2px 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: 1.5px 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%, #ffd6cb 0%, var(--acc-l) 42%, var(--acc-d) 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 22px 44px -12px rgba(213,107,87,0.5), inset 0 2px 10px rgba(255,255,255,0.6), inset 0 -12px 22px rgba(150,60,40,0.22); transition: transform .4s var(--ease); color: #fff; }
.surprise-orb-wrap:hover .surprise-orb { transform: scale(1.08); }
.surprise-orb svg { width: 50px; height: 50px; }
/* sürpriz orb içinde minik gerçek kelebek (kanat görselleriyle, hafif çırpan) */
.surprise-orb .bfly.mini { position: relative; top: auto; left: auto; --bh: 56px; transform: translateY(calc(var(--bh) * -0.5)); }
.surprise-orb .bfly.mini .bfly-i { animation: none; }
.surprise-orb .bfly.mini .wing { animation-duration: .5s; filter: drop-shadow(0 3px 3px rgba(0,0,0,0.22)); }
.surprise-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-script); font-size: 26px; color: var(--acc); }
.surprise-label svg { width: 19px; height: 19px; opacity: .8; }
.surprise-card { margin: 16px auto 0; max-width: 480px; display: none; animation: reveal-up .7s cubic-bezier(0.34, 1.4, 0.5, 1) 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-h); font-style: italic; font-size: clamp(18px, 4vw, 21px); line-height: 1.7; color: var(--ink); text-align: center; margin: 0; }

/* ─── İMZA SÜRPRİZ: UÇAN KALP BALON ─── */
.hbln-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; background: none; border: 0; padding: 8px 6px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hbln-stage { position: relative; width: 120px; height: 200px; overflow: visible; }
.hbln-svg { display: block; width: 100%; height: 100%; transform-origin: 60px 240px; animation: hbln-sway 4.2s ease-in-out infinite; filter: drop-shadow(0 14px 16px rgba(70,110,150,0.28)); }
.hbln-heart { transform-origin: 60px 90px; animation: hbln-breathe 3.6s ease-in-out infinite; }
.hbln-glow { animation: hbln-shine 3.6s ease-in-out infinite; }
.hbln-string { stroke-dasharray: 2 5; animation: hbln-string-wave 4.2s ease-in-out infinite; }

@keyframes hbln-sway {
  0%, 100% { transform: rotate(-3.5deg); }
  50% { transform: rotate(3.5deg); }
}
@keyframes hbln-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@keyframes hbln-shine {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}
@keyframes hbln-string-wave {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

/* dokununca: balon gökyüzüne süzülür, ip arkasından */
.hbln-wrap.is-gone { pointer-events: none; }
.hbln-wrap.is-gone .hbln-svg { animation: hbln-launch 1.15s cubic-bezier(0.32, 0, 0.4, 1) forwards; }
.hbln-wrap.is-gone .surprise-label { animation: hbln-label-fade .32s ease forwards; }

@keyframes hbln-launch {
  0% { transform: translateY(0) translateX(0) rotate(0deg) scale(1); opacity: 1; }
  18% { transform: translateY(8px) rotate(-4deg) scale(1.04); opacity: 1; }
  100% { transform: translateY(-440px) translateX(48px) rotate(10deg) scale(0.42); opacity: 0; }
}
@keyframes hbln-label-fade {
  to { opacity: 0; transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .hbln-svg, .hbln-heart, .hbln-glow, .hbln-string { animation: none !important; }
  .hbln-wrap.is-gone .hbln-svg { animation: hbln-label-fade .35s ease forwards; }
}

/* ─── 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: 1px solid var(--line); border-radius: 6px; box-shadow: 0 14px 32px -20px rgba(70,110,150,0.26); }
.gb-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.gb-head strong { font-family: var(--font-h); font-style: italic; font-size: 17px; color: var(--acc); font-weight: 600; }
.gb-head time { font-family: var(--font-caps); font-size: 9.5px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); padding-left: 0.25em; }
.gb-entry p { font-family: var(--font-b); font-style: italic; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); margin: 0; }
.gb-form { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: rgba(238,247,252,0.6); border: 1px solid var(--line-soft); border-radius: 6px; }
.gb-form input, .gb-form textarea { width: 100%; padding: 11px 14px; background: rgba(255,255,255,0.85); color: var(--ink); border: 1px solid var(--line-soft); border-radius: 4px; font-family: var(--font-b); font-size: 14px; 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: 70px; }
.gb-form input:focus, .gb-form textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(var(--kas-title-rgb),0.12); }
.gb-form button { align-self: flex-end; min-height: 44px; padding: 0 24px 0 calc(24px + 0.32em); background: linear-gradient(180deg, var(--acc), var(--acc-d)); color: #fff; border: 1px solid var(--acc-d); border-radius: 4px; font-family: var(--font-caps); font-size: 11px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; box-shadow: 0 8px 20px -8px rgba(213,107,87,0.5); transition: transform .2s ease; }
.gb-form button:hover { transform: translateY(-1px); }

/* ─── FOOTER ─── */
.footer { text-align: center; padding: 60px 24px 40px; }
.footer-star { color: var(--acc); margin-bottom: 14px; }
.footer-star svg { width: 34px; height: 34px; }
.footer-couple { font-family: var(--font-script); font-size: clamp(40px, 8vw, 56px); color: var(--acc); margin: 0 0 8px; line-height: 1; }
.footer-since { font-family: var(--font-caps); font-size: 10.5px; letter-spacing: 0.45em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 24px; padding-left: 0.45em; font-weight: 500; }
.footer-counter { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px calc(16px + 0.22em); background: rgba(255,255,255,0.72); border: 1px solid var(--line); border-radius: 4px; font-family: var(--font-caps); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
.footer-counter-num { color: var(--acc); font-weight: 600; font-variant-numeric: tabular-nums; }
.footer-brand { margin-top: 32px; font-family: var(--font-caps); font-size: 9.5px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--muted); opacity: 0.8; padding-left: 0.5em; }

/* ═══ 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(340px, calc(100% - 32px));
    display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    border-radius: 100px; overflow: hidden;
    background: rgba(252,253,255,0.94); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid var(--line); box-shadow: 0 18px 40px -16px rgba(70,110,150,0.5);
    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.16); }
.player-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--acc-d), var(--acc-l)); transition: width .2s linear; }
.player-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.player-btn { width: 30px; height: 30px; border-radius: 50%; color: var(--acc); display: flex; align-items: center; justify-content: center; transition: background .15s ease; }
.player-btn:hover { background: rgba(var(--kas-title-rgb),0.1); }
.player-btn svg { width: 16px; height: 16px; }
.player-btn.player-play { width: 34px; height: 34px; background: linear-gradient(180deg, var(--acc), var(--acc-d)); color: #fff; border: 1px solid var(--acc-d); }
.player-btn.player-play svg { width: 14px; height: 14px; }
.player-info { flex: 1; min-width: 0; }
.player-title { font-family: var(--font-h); font-style: italic; font-size: 14px; font-weight: 500; 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: 10px; letter-spacing: 0.22em; color: var(--ink-3); margin-top: 2px; padding-left: 0.22em; font-variant-numeric: tabular-nums; }
.player-note { flex-shrink: 0; color: var(--acc); opacity: 0.8; }
.player-note svg { width: 18px; height: 18px; }

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

/* === Düzenlenebilir renkler: arka plan (gök), başlık/vurgu, metin, kart === */
body.kas-tpl-gokyuzu {
    --kas-bg:    #a7d8ef;
    --kas-title: #ef8e7a; --kas-title-rgb: 239,142,122;
    --kas-text:  #42566a; --kas-text-rgb:  66,86,106;
    --kas-card-rgb: 255,255,255;
    /* gök gradyanı seçilen renkten ufuktaki kreme doğru türetilir */
    --sky-1: var(--kas-bg);
    --sky-2: color-mix(in srgb, var(--kas-bg) 58%, #fdeede);
    --sky-3: color-mix(in srgb, var(--kas-bg) 22%, #fdeede);
    --acc: var(--kas-title); --acc-l: var(--kas-title); --acc-d: var(--kas-title);
    --ink: var(--kas-text); --ink-2: var(--kas-text);
    --card-bg: rgba(var(--kas-card-rgb), 0.70);
    --card-bg-2: rgba(var(--kas-card-rgb), 0.58);
}