/* ============================================================
   Alara & Osman — Düğün Davetiyesi
   Suluboya gökyüzü + bahçe teması
   ============================================================ */

/* ------------------------------------------------------------
   Davetiyedeki el yazısı: "Boho Script Line"
   Font dosyası:  fonts/FontsFree-Net-Boho2.ttf
   İstersen daha küçük boyut için aynı fontun .woff2 halini
   (https://transfonter.org) fonts/BohoScriptLine-Bold.woff2
   olarak ekle — otomatik olarak o tercih edilir.
   Dosya yoksa otomatik olarak 'Great Vibes' devreye girer.
   ------------------------------------------------------------ */
@font-face {
    font-family: 'Boho Script Line';
    src: url('fonts/BohoScriptLine-Bold.woff2') format('woff2'),
         url('fonts/FontsFree-Net-Boho2.ttf') format('truetype');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Gökyüzü */
    --sky-1: #A6BEE2;
    --sky-2: #BCCBE7;
    --sky-3: #D6D2E3;
    --sky-4: #EFD8DA;
    --sky-5: #FBE4D2;
    --sky-6: #FAEADC;

    /* Kağıt & metin */
    --paper: #FDFAF4;
    /* Kartlar arka plandaki yoğun çiçeklerin üstüne de geliyor;
       fazla saydam olunca metin okunmuyor. */
    --paper-veil: rgba(253, 250, 244, 0.93);
    --ink: #33402B;
    --ink-soft: #5C6B4E;
    --ink-faint: #6E7A5F;

    /* Yeşiller (davetiyedeki zeytin yeşili) */
    --olive: #6C7D3F;
    --olive-deep: #55642F;
    --olive-soft: #9AA96F;
    --olive-mist: #D9E0C6;

    /* Pembeler */
    --rose: #D8737F;
    --rose-soft: #EFB3B9;
    --rose-mist: #F7E1E2;

    --font-script: 'Boho Script Line', 'Great Vibes', cursive;
    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-sans: 'Jost', 'Inter', system-ui, sans-serif;

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-weight: 300;
    color: var(--ink);
    background: var(--sky-2);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.locked {
    overflow: hidden;
}

::selection {
    background: var(--olive-mist);
    color: var(--ink);
}

/* ============================================================
   LINE-ART İKONLAR (emoji yerine)
   ============================================================ */
.ico-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.ico {
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.22em;
    margin: 0 0.14em 0 0.32em;
    fill: none;
    stroke: var(--olive);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ico.rose {
    stroke: var(--rose);
}

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(120% 70% at 50% 42%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 62%),
        linear-gradient(175deg, var(--sky-2) 0%, var(--sky-4) 55%, var(--sky-6) 100%);
    transition: opacity 1.1s var(--ease), visibility 1.1s;
}

/* Perde açılırken içerik de hafifçe yaklaşsın */
.preloader.done {
    opacity: 0;
    visibility: hidden;
}

.preloader.done .loader-content {
    transform: scale(1.06);
    transition: transform 1.1s var(--ease);
}

.loader-content {
    text-align: center;
    padding: 0 24px;
}

.loader-wreath {
    width: clamp(142px, 38vw, 190px);
    height: auto;
    display: block;
    margin: 0 auto;
    overflow: visible;
}

/* --- İki dal çiziliyor (üstte ve altta bilerek açık bırakıldı) --- */
.stems {
    stroke: var(--olive-soft);
    stroke-width: 0.85;
    opacity: 0.85;
}

.stem {
    /* yay uzunluğu = r(40) x 150deg = ~105 */
    stroke-dasharray: 105;
    stroke-dashoffset: 105;
    animation: drawStem 1.15s var(--ease) forwards;
}

.stem-r { animation-delay: 0.08s; }
.stem-l { animation-delay: 0.2s; }

@keyframes drawStem {
    to { stroke-dashoffset: 0; }
}

/* --- Yapraklar dal boyunca tek tek açılıyor --- */
.lf {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: leafGrow 0.55s var(--ease) forwards;
}

.lf.a  { fill: var(--olive-soft); }
.lf.b  { fill: var(--olive); }
.lf.eu { fill: #C3D0A6; }

@keyframes leafGrow {
    from { opacity: 0;    transform: scale(0.2) rotate(-14deg); }
    60%  { opacity: 1;    transform: scale(1.06) rotate(3deg); }
    to   { opacity: 0.92; transform: scale(1) rotate(0); }
}

/* --- Çiçekler en son açılıyor --- */
.bloom {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: bloomIn 0.62s var(--ease) forwards;
}

.petals ellipse {
    fill: var(--rose-soft);
}

.blooms .core {
    fill: #F2D9A8;
}

@keyframes bloomIn {
    from { opacity: 0; transform: scale(0.15) rotate(-40deg); }
    70%  { opacity: 1; transform: scale(1.15) rotate(6deg); }
    to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* --- Ortadaki monogram --- */
.wreath-monogram {
    font-family: var(--font-serif);
    font-size: 14px;
    font-style: italic;
    letter-spacing: 0.12em;
    fill: var(--olive-deep);
    opacity: 0;
    animation: fadeUp 1s var(--ease) forwards 0.7s;
}

.loader-names {
    font-family: var(--font-script);
    font-size: clamp(2.2rem, 9vw, 3.1rem);
    line-height: 1.1;
    color: var(--olive-deep);
    margin-top: 22px;
    opacity: 0;
    animation: fadeUp 1.1s var(--ease) forwards 1.15s;
}

.loader-date {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.45em;
    color: var(--ink);
    margin-top: 10px;
    padding-left: 0.55em;
    opacity: 0;
    animation: fadeUp 1.1s var(--ease) forwards 1.45s;
}

/* --- İnce ilerleme çizgisi --- */
.loader-progress {
    width: min(190px, 56vw);
    height: 1px;
    margin: 28px auto 0;
    background: rgba(154, 169, 111, 0.28);
    overflow: hidden;
    opacity: 0;
    animation: fadeUp 0.8s var(--ease) forwards 1.5s;
}

.loader-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--olive-soft), var(--rose-soft));
    transform: scaleX(0);
    transform-origin: left;
    animation: loadBar 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards 1.5s;
}

@keyframes loadBar {
    to { transform: scaleX(1); }
}

/* Hareketi azalt tercihi açıksa sadece yumuşak bir geçiş kalsın */
@media (prefers-reduced-motion: reduce) {

    .stem,
    .lf,
    .bloom,
    .wreath-monogram,
    .loader-names,
    .loader-date,
    .loader-progress,
    .loader-progress span {
        animation: none;
        opacity: 1;
        stroke-dashoffset: 0;
        transform: none;
    }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SAHNE — GÖKYÜZÜ, BULUTLAR, ÇAYIR
   ============================================================ */
.scenery {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.sky {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            var(--sky-1) 0%,
            var(--sky-2) 20%,
            var(--sky-3) 40%,
            var(--sky-4) 57%,
            var(--sky-5) 74%,
            var(--sky-6) 100%);
}

/* Gerçek suluboya davetiye arka planı — bg.png (908 x 1280, DİKEY)
   Geniş ekranda tüm genişliğe "cover" ile yayılınca görsel 2x'ten fazla
   büyüyor, çiçekler devasa ve bulanık çıkıyordu. Bunun yerine görseli
   ekranın ortasında doğal oranına yakın bir panel olarak konumlayıp
   kenarlarından gökyüzü gradyanına eritiyoruz. */
.bg-photo-wrap {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(100vw, max(860px, 115svh));
    height: min(100%, 94svh);
    overflow: hidden;
    /* Sağ–sol kenarlar gökyüzüne erisin */
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 15%, #000 85%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 15%, #000 85%, rgba(0, 0, 0, 0) 100%);
}

.bg-photo {
    position: absolute;
    inset: 0;
    background-image: url('bg.png');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    /* Üst kenar gökyüzüne erisin */
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 34%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 34%);
    animation: slowBreath 46s ease-in-out infinite alternate;
    transform-origin: center bottom;
}

/* Dikey ekranlarda (telefon) görsel zaten ekranla aynı oranda —
   tam genişlik kullan, yan maskeye gerek yok. */
@media (max-aspect-ratio: 3/4) {
    .bg-photo-wrap {
        width: 100vw;
        height: 90svh;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .bg-photo {
        -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%);
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%);
    }
}

@keyframes slowBreath {
    from { transform: scale(1); }
    to   { transform: scale(1.04); }
}

/* Metinlerin okunurluğunu artıran çok ince perde */
.sky-veil {
    position: absolute;
    inset: 0;
    background: radial-gradient(78% 44% at 50% 36%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 72%);
}

/* Uçuşan yapraklar / taçyapraklar */
#petals {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.petal {
    position: absolute;
    top: -6vh;
    border-radius: 60% 20% 60% 20%;
    opacity: 0;
    animation: petalFall linear infinite;
}

@keyframes petalFall {
    0%   { transform: translate3d(0, -10vh, 0) rotate(0deg);   opacity: 0; }
    12%  { opacity: 0.75; }
    88%  { opacity: 0.55; }
    100% { transform: translate3d(14vw, 108vh, 0) rotate(520deg); opacity: 0; }
}

/* ============================================================
   YERLEŞİM
   ============================================================ */
.content-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 0 22px;
}

.reveal {
    opacity: 0;
    transform: translateY(38px);
    transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.panel-section {
    padding: 46px 0;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    /* Alt boşluk, metinlerin arka plandaki çiçek şeridine binmesini engeller */
    padding: 8vh 0 32vh;
}

@media (max-aspect-ratio: 3/4) {
    .hero { padding: 10vh 0 18vh; }
}

.hero-content > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
}

.hero.visible .pre-title  { opacity: 1; transform: none; transition-delay: 0.15s; }
.hero.visible .names      { opacity: 1; transform: none; transition-delay: 0.45s; }
.hero.visible .rule       { opacity: 1; transform: none; transition-delay: 0.8s; }
.hero.visible .hero-date  { opacity: 1; transform: none; transition-delay: 1.05s; }
.hero.visible .hero-time  { opacity: 1; transform: none; transition-delay: 1.25s; }
.hero.visible .hero-cta   { opacity: 1; transform: none; transition-delay: 1.5s; }

.pre-title {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--ink);
    padding-left: 0.34em;
    margin-bottom: 26px;
    text-shadow: 0 1px 10px rgba(253, 250, 244, 0.9);
}

.names {
    font-family: var(--font-script);
    font-weight: 700;
    color: var(--olive-deep);
    line-height: 1.05;
    font-size: clamp(2.7rem, 14vw, 6.2rem);
    letter-spacing: 0.01em;
    max-width: 100%;
    text-shadow: 0 3px 22px rgba(255, 255, 255, 0.6);
    animation: breathe 7s ease-in-out infinite alternate;
}

.names .amp {
    color: var(--olive-soft);
    font-size: 0.82em;
    margin: 0 0.06em;
    display: inline-block;
    transform: translateY(-0.04em);
}

@keyframes breathe {
    from { transform: translateY(0); }
    to   { transform: translateY(-9px); }
}

.rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 30px auto 34px;
    width: min(240px, 70%);
}

.rule-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--olive-soft), transparent);
}

.hero-date {
    font-family: var(--font-serif);
    font-size: clamp(1.55rem, 6.3vw, 2.5rem);
    font-weight: 400;
    letter-spacing: 0.12em;
    color: var(--olive-deep);
    text-shadow: 0 2px 16px rgba(253, 250, 244, 0.85);
}

.hero-time {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink);
    margin-top: 12px;
    padding-left: 0.3em;
    text-shadow: 0 1px 10px rgba(253, 250, 244, 0.95);
}

/* Sayfanın asıl işi anı yüklemek — hero'daki birincil çağrı */
.hero-cta {
    margin-top: 34px;
}

.btn-hero {
    font-size: 0.74rem;
    padding: 17px 30px;
    box-shadow: 0 16px 32px -14px rgba(85, 100, 47, 0.85);
}

.btn-hero i { font-size: 1rem; }

.scroll-cue {
    position: absolute;
    bottom: clamp(22px, 4.5vh, 46px);
    left: 50%;
    text-decoration: none;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transition: opacity 1.4s ease 1.9s;
}

.hero.visible .scroll-cue { opacity: 1; }

@media (max-aspect-ratio: 3/4) {
    .scroll-cue { bottom: 3.5vh; }
}

/* Çiçeklerin üzerine geldiği için ince bir buzlu cam rozeti üstünde durur */
.scroll-cue span:first-child {
    font-size: 0.64rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--olive-deep);
    padding: 7px 16px 7px calc(16px + 0.34em);
    border-radius: 999px;
    background: rgba(253, 250, 244, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 14px rgba(85, 100, 47, 0.1);
}

.cue-line {
    width: 1px;
    height: 30px;
    background: var(--olive-soft);
    transform-origin: top;
    animation: cueDrop 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes cueDrop {
    0%   { transform: scaleY(0);   opacity: 0; }
    45%  { transform: scaleY(1);   opacity: 1; }
    100% { transform: translateY(20px) scaleY(0); opacity: 0; }
}

/* ============================================================
   KAĞIT KART
   ============================================================ */
.paper {
    position: relative;
    background: var(--paper-veil);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    backdrop-filter: blur(10px) saturate(1.05);
    border: 1px solid rgba(154, 169, 111, 0.32);
    border-radius: 6px;
    padding: 52px 34px 46px;
    text-align: center;
    box-shadow: 0 28px 60px -30px rgba(51, 64, 43, 0.35);
}

.paper::after {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(154, 169, 111, 0.22);
    border-radius: 3px;
    pointer-events: none;
}

.paper.arch {
    border-radius: 220px 220px 6px 6px;
    padding-top: 74px;
}

.paper.arch::after {
    border-radius: 214px 214px 3px 3px;
}

.paper-crest {
    margin-bottom: 20px;
    line-height: 0;
}

.eyebrow {
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding-left: 0.4em;
    margin-bottom: 26px;
}

.eyebrow.center { text-align: center; }

/* El yazısı fontu küçük puntoda inceliyor — başlıklar biraz daha
   büyük ve koyu olmalı ki "Tarih / Mekân" süs değil, etiket gibi okunsun. */
.script-heading {
    font-family: var(--font-script);
    font-weight: 700;
    font-size: 2.5rem;
    color: var(--olive-deep);
    line-height: 1.2;
    margin-bottom: 12px;
}

.script-heading.big { font-size: 2.9rem; margin-bottom: 18px; }

/* Davet metnindeki elle konan satır sonu yalnızca geniş ekranda —
   dar ekranda "neşeye ve" tek başına satırda kalıyordu. */
.br-desktop { display: none; }

@media (min-width: 601px) {
    .br-desktop { display: inline; }
}

.invite-lead {
    font-family: var(--font-serif);
    font-size: clamp(1.12rem, 4.3vw, 1.4rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.85;
    color: var(--ink);
}

/* Aileler */
.families {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    margin-top: 38px;
}

.family {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.family-parents {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--ink);
    letter-spacing: 0.02em;
}

.family-surname {
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: 400;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--olive);
    padding-left: 0.32em;
}

.family-sep {
    width: 1px;
    align-self: stretch;
    min-height: 46px;
    background: linear-gradient(180deg, transparent, var(--olive-mist), transparent);
}

/* Detaylar */
.detail + .detail { margin-top: 4px; }

.detail-main {
    font-family: var(--font-serif);
    font-size: 1.32rem;
    color: var(--ink);
    line-height: 1.45;
}

.detail-main.soft { color: var(--ink-soft); font-size: 1.15rem; }

.detail-sub {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--ink-faint);
    margin-top: 8px;
}

.stem-divider {
    width: 1px;
    height: 44px;
    margin: 26px auto;
    background: linear-gradient(180deg, transparent, var(--olive-soft), transparent);
    position: relative;
}

.stem-divider::before,
.stem-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 12px;
    height: 6px;
    background: var(--olive-soft);
    border-radius: 60% 20% 60% 20%;
    opacity: 0.7;
}

.stem-divider::before { right: 2px; transform: rotate(-24deg); }
.stem-divider::after  { left: 2px;  transform: rotate(24deg) scaleX(-1); }

/* ============================================================
   BUTONLAR
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 26px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.4s var(--ease), color 0.4s var(--ease),
                border-color 0.4s var(--ease), transform 0.25s var(--ease);
    border: 1px solid var(--olive-soft);
    background: transparent;
    color: var(--olive-deep);
}

.btn i { font-size: 0.9rem; }

.btn-outline:hover {
    background: var(--olive);
    border-color: var(--olive);
    color: #fff;
}

.btn-solid {
    background: var(--olive);
    border-color: var(--olive);
    color: #fff;
    box-shadow: 0 12px 26px -12px rgba(85, 100, 47, 0.7);
}

.btn-solid:hover {
    background: var(--olive-deep);
    border-color: var(--olive-deep);
}

.btn:active { transform: scale(0.98); }

.btn-wide { width: 100%; padding: 17px 26px; }

.btn.disabled,
.btn:disabled {
    background: var(--olive-mist);
    border-color: var(--olive-mist);
    color: #fff;
    pointer-events: none;
    box-shadow: none;
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 40px;
}

.card-note {
    font-family: var(--font-sans);
    font-size: 0.64rem;
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding-left: 0.24em;
    margin-top: 26px;
}

/* ============================================================
   FORM ALANLARI
   ============================================================ */
.field { position: relative; }

.field input,
.field textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--olive-mist);
    padding: 14px 2px 9px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--ink);
    outline: none;
    resize: none;
    transition: border-color 0.35s ease;
}

.field textarea { line-height: 1.6; }

.field label {
    position: absolute;
    left: 2px;
    top: 14px;
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--ink-faint);
    pointer-events: none;
    transition: all 0.3s var(--ease);
}

.field input:focus,
.field textarea:focus { border-color: var(--olive); }

.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label {
    top: -8px;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--olive);
}

.field input.invalid,
.field textarea.invalid { border-color: var(--rose); }

.form-status {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-style: italic;
    text-align: center;
    color: var(--olive);
    min-height: 1.2em;
    margin-top: -6px;
}

.form-status.error { color: var(--rose); }

/* ============================================================
   ANILAR
   ============================================================ */
.memories-section {
    padding: 26px 0 44px;
    text-align: center;
}

/* Sayfanın birincil kartı — diğer kartlarla aynı genişlikte olmalı,
   daha dar olunca hiyerarşi ters dönüyordu. */
.memories-inner {
    background: var(--paper-veil);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(154, 169, 111, 0.4);
    border-radius: 26px;
    padding: 38px 30px 32px;
    margin: 0 auto;
    box-shadow: 0 24px 50px -30px rgba(85, 100, 47, 0.5);
}

/* Kart geniş, ama satırlar rahat okunacak uzunlukta kalsın */
.memories-text {
    font-family: var(--font-serif);
    font-size: 1.08rem;
    color: var(--ink-soft);
    line-height: 1.7;
    max-width: 40ch;
    margin: 0 auto 26px;
}

.memories-inner .btn-wide {
    max-width: 400px;
    margin: 0 auto;
}

.memories-note {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    margin-top: 15px;
}

/* ============================================================
   SON ÇAĞRI
   ============================================================ */
.closing-cta {
    text-align: center;
    padding: 10px 0 34px;
}

/* Sayfanın bu kısmı arka plandaki yoğun çiçeklerin üstüne geliyor —
   metin ve buton okunur bir yüzeyin üstünde durmalı. */
.closing-inner {
    display: inline-block;
    background: rgba(253, 250, 244, 0.84);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(154, 169, 111, 0.3);
    border-radius: 30px;
    padding: 26px 34px 28px;
    max-width: 100%;
    box-shadow: 0 20px 44px -28px rgba(51, 64, 43, 0.55);
}

.closing-text {
    font-family: var(--font-serif);
    font-size: 1.12rem;
    font-style: italic;
    color: var(--ink);
    margin-bottom: 18px;
}

/* ============================================================
   MÜHÜR BUTONU
   ============================================================ */
/* Etiketli yüzen buton — dairesel mühür ne işe yaradığını anlatmıyordu.
   Hero'da zaten büyük bir çağrı var, bu yüzden sadece aşağı kaydırınca çıkar. */
.seal-btn {
    position: fixed;
    right: 18px;
    bottom: 18px;
    border: none;
    border-radius: 999px;
    padding: 12px 19px 12px 16px;
    background: var(--olive);
    color: #fff;
    cursor: pointer;
    z-index: 120;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: 400;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 16px 34px -12px rgba(85, 100, 47, 0.75);
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease),
                visibility 0.5s, background 0.4s var(--ease);
}

body.scrolled .seal-btn {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.seal-btn:hover { background: var(--olive-deep); }
.seal-btn:active { transform: scale(0.97); }

.seal-icon { font-size: 1.05rem; line-height: 1; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(206, 214, 226, 0.55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s var(--ease), visibility 0.45s;
}

.modal-overlay.active { opacity: 1; visibility: visible; }

.modal-content {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 88vh;
    overflow-y: auto;
    background: var(--paper);
    border: 1px solid rgba(154, 169, 111, 0.35);
    border-radius: 200px 200px 12px 12px;
    padding: 62px 32px 38px;
    text-align: center;
    box-shadow: 0 40px 90px -40px rgba(51, 64, 43, 0.6);
    transform: translateY(28px) scale(0.985);
    transition: transform 0.55s var(--ease);
}

.modal-overlay.active .modal-content { transform: translateY(0) scale(1); }

.close-btn {
    position: absolute;
    top: 20px;
    right: 22px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(154, 169, 111, 0.14);
    color: var(--ink-soft);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    z-index: 3;
}

.close-btn:hover { background: var(--olive); color: #fff; }

.modal-desc {
    font-family: var(--font-serif);
    font-size: 1.02rem;
    color: var(--ink-soft);
    line-height: 1.7;
    margin-bottom: 28px;
}

.modal-content .field { text-align: left; margin-bottom: 26px; }

.upload-area {
    border: 1px dashed var(--olive-soft);
    border-radius: 18px;
    padding: 30px 16px;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
    color: var(--olive);
}

.upload-area:hover,
.upload-area.drag {
    background: rgba(154, 169, 111, 0.09);
    border-color: var(--olive);
}

.upload-area i { font-size: 1.35rem; }

.upload-prompt {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--olive-deep);
    margin-top: 12px;
}

.upload-hint {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--ink-faint);
    margin-top: 7px;
    letter-spacing: 0.04em;
}

.preview-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 18px;
}

.preview-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 2px;
    border-bottom: 1px solid rgba(154, 169, 111, 0.2);
    font-size: 0.82rem;
    font-weight: 300;
    color: var(--ink-soft);
    text-align: left;
}

.preview-chip .chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-chip .remove-file {
    color: var(--rose);
    cursor: pointer;
    font-size: 0.95rem;
    flex: none;
    padding: 4px;
}

/* Dosya satırı: ad · durum · kaldır + altında ince ilerleme çubuğu */
.preview-chip {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.preview-chip .chip-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.preview-chip .chip-name { flex: 1 1 auto; min-width: 0; }

.preview-chip .chip-state {
    flex: none;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    white-space: nowrap;
}

.preview-chip .chip-state.ok  { color: var(--olive); }
.preview-chip .chip-state.err { color: var(--rose); }

.chip-bar {
    height: 3px;
    margin-top: 8px;
    border-radius: 2px;
    background: rgba(154, 169, 111, 0.2);
    overflow: hidden;
}

.chip-bar > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 2px;
    background: var(--olive-soft);
    transition: width 0.3s ease;
}

.chip-bar.err > span { background: var(--rose); }

/* Toplam ilerleme */
.upload-progress { margin-top: 22px; }
.upload-progress[hidden] { display: none; }

.progress-track {
    height: 5px;
    border-radius: 3px;
    background: rgba(154, 169, 111, 0.2);
    overflow: hidden;
}

.progress-track > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--olive-soft), var(--olive));
    transition: width 0.35s ease;
}

.progress-label {
    margin-top: 9px;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--olive);
}

.progress-note {
    margin-top: 4px;
    text-align: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--ink-faint);
}

.modal-content .btn-wide { margin-top: 26px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
    padding: 20px 0 150px;
    text-align: center;
}

.footer-chip {
    display: inline-block;
    background: rgba(253, 250, 244, 0.78);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    padding: 26px 46px 28px;
    box-shadow: 0 20px 44px -28px rgba(51, 64, 43, 0.5);
}

.footer-monogram {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    letter-spacing: 0.34em;
    color: var(--ink);
    padding-left: 0.34em;
}

/* El yazısı '&' serif A/O ile aynı puntoda küçük kalıyor — büyütüp
   taban çizgisine oturtuyoruz. */
.footer-monogram .amp-small {
    font-family: var(--font-script);
    font-size: 1.2em;
    color: var(--olive);
    letter-spacing: 0;
    display: inline-block;
    transform: translateY(0.06em);
}

.footer-love {
    font-family: var(--font-script);
    font-weight: 700;
    font-size: 1.9rem;
    color: var(--olive-deep);
    margin-top: 10px;
}

.footer-date {
    font-size: 0.64rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-top: 8px;
    padding-left: 0.24em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
    .pre-title { font-size: 0.58rem; letter-spacing: 0.26em; padding-left: 0.26em; }
    .hero-time { font-size: 0.72rem; letter-spacing: 0.22em; }

    .paper { padding: 42px 22px 38px; }
    .paper.arch { border-radius: 160px 160px 6px 6px; padding-top: 62px; }
    .paper.arch::after { border-radius: 154px 154px 3px 3px; }

    .families { gap: 16px; }
    .family-parents { font-size: 0.94rem; }
    .family-surname { font-size: 0.6rem; letter-spacing: 0.24em; }

    .btn-row { flex-direction: column; }
    .btn-row .btn { width: 100%; }

    .seal-btn { right: 16px; bottom: 16px; padding: 11px 17px 11px 14px; }
    .seal-icon { font-size: 0.95rem; }

    .footer-chip { padding: 22px 30px 24px; border-radius: 40px; }
    footer { padding-bottom: 120px; }

    .modal-overlay { align-items: flex-end; padding: 0; }
    .modal-content {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 34px 34px 0 0;
        padding: 42px 22px 34px;
        transform: translateY(100%);
    }
    .modal-overlay.active .modal-content { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
    .hero-content > * { opacity: 1; transform: none; }
}

/* Yazdırma */
@media print {
    .seal-btn, .scroll-cue, .memories-section, .preloader, #petals { display: none !important; }
    body { background: #fff; }
    .paper { box-shadow: none; }
}