/* ══════════════════════════════════════════════════════════
   GLOBAL — Kajian Wawasan Invitation
   Design: Islami Premium · Hijau Teal + Emas + Krem
   ══════════════════════════════════════════════════════════ */

:root {
    --primary:        #1a6b5a;
    --primary-light:  #2d9375;
    --primary-dark:   #0f4538;
    --primary-900:    #07271f;
    --gold:           #c9a84c;
    --gold-light:     #e8c87a;
    --gold-dark:      #a07832;
    --cream:          #fdf9f0;
    --cream-dark:     #f5e9d5;
    --cream-border:   rgba(201,168,76,0.2);
    --dark:           #111827;
    --text-main:      #1e2d2b;
    --text-muted:     #5a7066;
    --text-light:     rgba(255,255,255,0.75);
    --white:          #ffffff;

    /* Gradients */
    --grad-hero:    linear-gradient(160deg, #07271f 0%, #0f4538 45%, #1a6b5a 100%);
    --grad-primary: linear-gradient(160deg, #0f4538 0%, #1a6b5a 100%);
    --grad-gold:    linear-gradient(135deg, #a07832 0%, #e8c87a 50%, #c9a84c 100%);
    --grad-cream:   linear-gradient(180deg, #fdf9f0 0%, #f5e9d5 100%);
    --grad-card:    linear-gradient(145deg, rgba(255,255,255,0.9), rgba(253,249,240,0.95));

    /* Shadows */
    --shadow-sm:    0 2px 8px rgba(10,40,30,0.1);
    --shadow-md:    0 6px 24px rgba(10,40,30,0.15);
    --shadow-lg:    0 16px 48px rgba(10,40,30,0.2);
    --shadow-xl:    0 24px 80px rgba(10,40,30,0.28);
    --shadow-gold:  0 4px 20px rgba(201,168,76,0.4);

    /* Fonts */
    --font-body:    'Outfit', sans-serif;
    --font-display: 'Amiri', serif;
    --font-arabic:  'Noto Naskh Arabic', serif;

    /* Radius */
    --r-sm:   8px;
    --r-md:   14px;
    --r-lg:   22px;
    --r-xl:   32px;
    --r-pill: 9999px;

    /* Transitions */
    --ease:      all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Reset ────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-light) var(--cream-dark);
}

*, *::before, *::after {
    margin: 0; padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
}

body {
    font-family: var(--font-body);
    color: var(--text-main);
    background: var(--cream);
    overflow-y: hidden;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

body.active { overflow-y: auto; }
body::-webkit-scrollbar { width: 4px; }
body::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: 99px; }

p { line-height: 1.85; }

/* ── Audio button ─────────────────────────────────────────── */
.audio button {
    width: 3rem; height: 3rem;
    border-radius: 50%;
    border: 2px solid var(--gold);
    background: var(--grad-primary);
    color: var(--gold-light);
    font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 1.2rem; bottom: 5rem;
    cursor: pointer; z-index: 200;
    transform: translateX(200%);
    transition: 1.5s transform cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: var(--shadow-gold);
}
.audio button.show  { transform: translateX(0); }
.audio button.active { animation: spin 4s linear infinite; }
.audio button:hover  { background: var(--grad-gold); color: var(--primary-dark); }

/* ── Animasi Global ───────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }

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

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0);     }
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33%       { transform: translateY(-10px) rotate(4deg); }
    66%       { transform: translateY(5px) rotate(-3deg); }
}

@keyframes pulse-ring {
    0%   { transform: scale(1);   opacity: 0.5; }
    100% { transform: scale(1.8); opacity: 0;   }
}

@keyframes shimmer-line {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 10px rgba(201,168,76,0.4); }
    50%       { box-shadow: 0 0 30px rgba(201,168,76,0.8); }
}

@keyframes spin-slow {
    to { transform: translate(-50%,-50%) rotate(360deg); }
}

/* ── Shared decorative icons ──────────────────────────────── */
.bride i,
.hadist i,
.time a + p + i,
.galeri > i {
    font-size: 2.2rem;
    color: rgba(201,168,76,0.18);
    position: absolute;
    z-index: 0;
    animation: float 6s ease-in-out infinite;
    pointer-events: none;
}