:root {
    /* ===== Palembang luxury palette ===== */
    --ink: #2e1216;
    --maroon-900: #3f0a14;
    --maroon-800: #5a0e1b;
    --maroon-700: #7a1228;
    --maroon-600: #93203a;
    --gold-700: #8a6d24;
    --gold-600: #a9842f;
    --gold-500: #c2a24c;
    --gold-400: #d9bc6a;
    --gold-300: #ecd79b;
    --ivory: #fbf6ee;
    --cream: #f3e7d2;
    --paper: #fffcf7;

    --primary-font-color: var(--ink);
    --bg-color: var(--ivory);

    /* ===== Typography ===== */
    --sacramento: Sacramento, cursive;
    --arabic: 'Noto Naskh Arabic', serif;
    --sans: 'Josefin Sans', sans-serif;

    --fontSize-heading-lg: 3rem;
    --fontSize-heading-base: 2.8rem;
    --fontSize-text-base: 1rem;

    /* ===== Surfaces & accents ===== */
    --gold-gradient: linear-gradient(135deg, #8a6d24 0%, #ecd79b 50%, #8a6d24 100%);
    --maroon-gradient: linear-gradient(135deg, #5a0e1b 0%, #7a1228 55%, #93203a 100%);
    --gold-border: 1px solid rgba(169, 132, 47, 0.38);
    --songket: url('../images/ornamen-songket.png');

    --shadow-md: 0 8px 24px rgba(63, 10, 20, 0.10);
    --shadow-soft: 0 4px 14px rgba(63, 10, 20, 0.07);
    --shadow-gold: 0 6px 18px rgba(169, 132, 47, 0.20);

    --transition-small: all .3s ease;
}

html {
    scroll-behavior: smooth;
    scrollbar-width: none !important;
}

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

body {
    font-family: var(--sans);
    color: var(--primary-font-color);
    background-color: var(--ivory);
    overflow-y: hidden;
}

body.active {
    overflow-y: auto;
}

body::-webkit-scrollbar {
    display: none;
}

p {
    line-height: 1.75rem;
}

/* ===== Audio toggle ===== */
.audio button {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid var(--gold-400);
    background: var(--maroon-gradient);
    color: var(--gold-300);
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    cursor: pointer;
    box-shadow: var(--shadow-gold);
    transform: translateX(200%);
    transition: 1.5s transform ease;
    z-index: 90;
}

.audio button.show {
    transform: translateX(0);
}

.audio button.active {
    animation: rotate 6s linear infinite;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes upAndDown {
    0%, 100% { transform: translateY(-0.8rem); }
    50% { transform: translateY(0.8rem); }
}