/* Shared look for both clients: index.html (venue display, opened on a computer)
   and guest.html (the phone form the QR opens).

   The palette and type are taken from the couple's printed invitation: ivory
   paper, antique-gold line art and lettering, warm charcoal text, a formal
   script for display headings and a classic serif for everything else. Colours
   below were sampled from the invitation scan, not eyeballed. */

/* Self-hosted so the venue screen and guests' phones render correctly even on a
   network without internet access (the app may be served from a laptop on site).
   Allura & Cormorant Garamond, SIL Open Font License 1.1. */
@font-face {
    font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('fonts/CormorantGaramond-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('fonts/CormorantGaramond-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('fonts/CormorantGaramond-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('fonts/CormorantGaramond-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Allura'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('fonts/Allura-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Allura'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('fonts/Allura-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --bg: #f5f4ee;          /* invitation paper */
    --card: #fbfaf6;        /* a shade lighter, so cards lift off the page */
    --line: #e2ddcd;        /* hairline borders, like the invitation's rules */
    --accent: #a08d55;      /* antique gold: the invitation's lettering & florals */
    --accent-deep: #8a7038; /* darker gold for text that must stay readable */
    --text: #4a4844;        /* warm charcoal */
    --text-soft: #6f6c65;   /* secondary copy */
    --script: 'Allura', 'Snell Roundhand', cursive;   /* closest match to the invitation's hand */
    --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--serif);
    font-size: 17px;
    background: var(--bg);
    color: var(--text);
}

header { text-align: center; padding: 28px 16px 12px; }
header h1 {
    /* Breathing room under the eyebrow line, as on the invitation, where the
       couple's names sit well below "MUTLULUĞUMUZA DAVETLİSİNİZ". */
    margin: 22px 0 0;
    font-family: var(--script);
    font-weight: 400;
    font-size: 46px;
    line-height: 1.15;
    color: var(--text);
}
header p { margin: 6px 0 0; color: var(--text-soft); }

/* The invitation's eyebrow line: small, uppercase, widely tracked gold. */
.eyebrow {
    font-size: 13px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 4px;            /* printed stationery, not app chrome */
    padding: 24px;
    margin-bottom: 24px;
}
.card h2 {
    margin: 0 0 6px;
    font-family: var(--script);
    font-weight: 400;
    font-size: 30px;
    color: var(--text);
}
.card p.hint { margin: 0 0 8px; font-size: 15px; color: var(--text-soft); }

label {
    display: block;
    margin: 14px 0 6px;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent-deep);
}
input, textarea {
    width: 100%;
    padding: 12px;
    border-radius: 3px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    font-family: var(--serif);
    font-size: 17px;
}
input:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { min-height: 90px; resize: vertical; }

button {
    margin-top: 18px;
    width: 100%;
    padding: 14px;
    border: 1px solid var(--accent);
    border-radius: 3px;
    background: var(--accent);
    color: #fffdf8;
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
}
button:disabled { opacity: .55; cursor: default; }

a { color: var(--accent-deep); }

.status { text-align: center; margin-top: 12px; min-height: 20px; font-size: 15px; color: var(--text-soft); }
.empty { color: var(--text-soft); }

/* Utility class the pages toggle from JS. !important on purpose: page-level
   rules like `.tabs { display: flex }` or `.memory .photo-wrap { display: flex }`
   would otherwise win — the first by source order (same specificity, defined
   later), the second by specificity — and leave "hidden" sections on screen. */
.hidden { display: none !important; }

/* Join gate: type the 6-digit code instead of scanning */
.code-input {
    text-align: center; letter-spacing: 10px; font-size: 30px;
    font-variant-numeric: tabular-nums; color: var(--accent-deep);
}

/* Slideshow (display page): a mounted photograph rather than a black screen. */
.slideshow {
    position: relative; aspect-ratio: 16/9; background: var(--card);
    border: 1px solid var(--line); border-radius: 4px;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.slide {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 14px; padding: 28px; text-align: center;
    opacity: 0; transition: opacity 1s ease;
}
.slide.active { opacity: 1; }
.slide img { max-width: 70%; max-height: 60%; border-radius: 2px; object-fit: contain;
    box-shadow: 0 6px 24px rgba(74, 72, 68, .18); }
.slide .name { font-family: var(--script); font-size: 34px; color: var(--accent-deep); }
.slide .msg { font-size: 20px; color: var(--text); }

/* Invite block: QR + join code */
.invite { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: center; }
.invite img.qr { width: 180px; height: 180px; background: #fff; padding: 8px;
    border: 1px solid var(--line); border-radius: 3px; }
.invite .code-block { text-align: center; }
.invite .code-block .label { font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--text-soft); }
.invite .code-block .code { font-size: 40px; letter-spacing: 8px; color: var(--accent-deep);
    font-variant-numeric: tabular-nums; }

/* The invitation's own corner florals, lifted from the printed card: the line
   art was keyed off the paper and recoloured to a single gold, so it drops onto
   any of our surfaces cleanly. Purely decorative — fixed, behind everything and
   click-through, so it never interferes with the form or the photos.
   Markup: <div class="florals"><span class="f-top"></span><span class="f-bottom"></span></div> */
.florals { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.florals span { position: absolute; display: block; background-repeat: no-repeat;
    background-size: contain; opacity: .42; }
.florals .f-top {
    top: -3vh; left: -4vw;
    width: clamp(140px, 26vw, 380px); aspect-ratio: 542 / 298;
    background-image: url('img/cicek-ust.png');
}
.florals .f-bottom {
    right: -4vw; bottom: -3vh;
    width: clamp(105px, 17vw, 250px); aspect-ratio: 376 / 574;
    background-image: url('img/cicek-alt.png');
}
/* On a phone the florals share the screen with the form, so they step back. */
@media (max-width: 600px) {
    .florals span { opacity: .3; }
}
/* Content sits above the florals. */
header, main { position: relative; z-index: 1; }

/* A hairline gold rule under the headings, echoing the invitation's dividers. */
.rule {
    border: 0; height: 1px; margin: 18px auto; max-width: 180px;
    background: linear-gradient(to right, transparent, var(--accent), transparent);
}