/* FONTS */
@font-face {
    font-family: 'IsepMisbah';
    src: url('../fonts/LPMQ-IsepMisbah.ttf') format('truetype');
    font-display: swap;
}
@font-face {
	font-family: 'Thuluth';
	src: url('../fonts/A-Thuluth-Regular.ttf') format('truetype');
	font-weight: 800;
	font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

/* DESIGN TOKENS (VARIABLES) */
:root {
    /* Light Mode Premium */
    --bg-body: linear-gradient(to right, #1b4332, #009000, #1b4332); /* hijau pekat - hijau nu - hijau pekat */
    --bg-page: #ffffff; /* putih */
    --text-primary: #1f2421; /* hijau gelap abu-abu & hitam */
    --text-secondary: #535855; /* abu-abu kehijauan */
    --text-heading: #1b4332; /* hijau pekat */
    --accent-color: #AA7C11; /* emas tua */
    
    /* Cetakan Masking Pattern Islami */
    --mask-pattern: url('../images/ornamen-yasin.svg');
    --pattern-opacity: 0.31; 

    /* Ayat Card Token (PENTING: Agar kartu tidak hilang) */
    --card-border: rgba(200, 168, 92, 0.15); /* emas transparan */
    --card-bg-normal: linear-gradient(135deg, #ffffff 0%, #fdfcf9 100%); /* gradien putih murni ke putih gading lembut */
    --card-bg-active: linear-gradient(135deg, #ffffff 0%, #fffdf0 100%); /* gradien putih bersih ke putih kekuningan terang */
    --card-shadow-base: 0 4px 20px rgba(0, 0, 0, 0.02), 0 10px 25px rgba(200, 168, 92, 0.04); /* bayangan berlapis abu-abu tua transparan ke emas/krem */
    
    /* Active State Tokens */
    --active-border: rgba(200, 168, 92, 0.5); /* emas semi-transparan */
    --active-shadow: 0 12px 30px rgba(200, 168, 92, 0.12); /* bayangan emas/perunggu transparan di arah bawah */
    --active-shadow-hover: 0 16px 40px rgba(200, 168, 92, 0.18); /* bayangan emas/perunggu transparan di arah bawah (lebih kuat)*/
}

[data-theme="dark"] {
    /* Dark Mode Premium */
    --bg-body: linear-gradient(to right, #AA7C11, #FFD700, #D4AF37); /* emas tua - emas menyala - emas metalik */
    --bg-page: #131a16; /* warna hijau yang sangat gelap, keabu-abuan, dan bernuansa sedikit kecokelatan (mendekati hitam) */
    --text-primary: #e3e8e5; /* abu-abu muda */
    --text-secondary: #adada3; /* abu-abu muda kebiruan */
    --text-heading: #ecdcb9; /* krem kekuningan */
    --accent-color: #AA7C11; /* emas tua */
    
    --pattern-opacity: 0.21; 

    /* Ayat Card Token Dark Mode */
    --card-border: rgba(255, 255, 255, 0.06); /* glassmorphism putih */
    --card-bg-normal: linear-gradient(135deg, #1b4332 0%, #131a16 100%); /* hijau ke hitam */
    --card-bg-active: linear-gradient(135deg, #222920 0%, #1b4332 100%); /* hitam ke hijau */
    --card-shadow-base: 0 4px 20px rgba(0, 0, 0, 0.3); /* soft drop shadow */
    
    /* Active State Tokens Dark Mode */
    --active-border: rgba(212, 175, 55, 0.5); /* emas metalik (metallic gold) transparansi 50% */
    --active-shadow: 0 12px 30px rgba(212, 175, 55, 0.1); /* bayangan emas lembut dibawah elemen */
    --active-shadow-hover: 0 16px 40px rgba(212, 175, 55, 0.15); /* bayangan emas lembut dibawah elemen lebih kuat */
}

/* =========================
   RESET & BASE
========================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: var(--bg-body);
    font-family: 'Montserrat', sans-serif;
    color: var(--text-primary);
    padding: 10px;
    transition: background-color 0.3s ease, color 0.4s ease;
    min-height: 100vh;
}
.page {
    margin: auto;
    background-color: var(--bg-page);
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    position: relative;
    overflow: hidden;
    transition: background-color 0.4s ease;
    z-index: 1;
	margin-bottom: 89px;
}

.svg-bintang {
    width: 30px;
    height: 30px;
    
    /* Warna Gradasi */
    background: linear-gradient(
        90deg, 
        #dfb76c 0%,    /* Champagne Gold */
        #e2978d 30%,   /* Soft Rose Gold */
        #635bc5 65%,   /* Deep Spiritual Indigo */
        #24a18e 100%   /* Imperial Emerald Teal */
    );
    background-size: 200% auto;

    /* Teknik Masking agar div berbentuk bintang */
    -webkit-mask-image: url('/svg/bintang.svg');
    mask-image: url('/svg/bintang.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;

    /* Animasi */
    animation: pildun-gimmick-bg 4s ease-in-out infinite alternate;
}