/* ==========================================================================
   DKM DIGITAL (DKMD) - MASTER CSS
   Tema: Islami Modern (Emerald Green, Gold & Glassmorphism)
   ========================================================================== */

/* --- 1. CSS VARIABLES (PALET WARNA UTAMA) --- */
:root {
    /* Gradasi Hijau Islami */
    --green-100: #1f8a5b;
    --green-200: #157347;
    --green-300: #0f5f46;
    --green-400: #0b3d2e;
    --green-900: #12442d;
    
    /* Aksen Emas (Gold) */
    --gold-light: #FFE082;
    --gold-main: #FFD54F;
    --gold-dark: #F4B400;
    
    /* Teks & Latar Belakang */
    --text-white: #ffffff;
    --text-soft: #edf7ef;
    --text-muted: #dfeee5;
    
    /* Efek Transparansi Kaca (Glass) */
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-blur: blur(16px);
}

/* --- 2. BASE RESET & TYPOGRAPHY --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, var(--green-400) 0%, var(--green-300) 35%, var(--green-200) 70%, var(--green-100) 100%);
    background-attachment: fixed;
    color: var(--text-white);
    overflow-x: hidden;
    min-height: 100vh;
}

/* --- 3. UTILITY CLASSES (BISA DIPAKAI BERULANG) --- */

/* Teks Spesial */
.text-gold {
    color: var(--gold-main);
}
.text-soft {
    color: var(--text-soft);
}

/* Card Kaca (Glassmorphism) */
.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 25px;
    padding: 35px;
    transition: all 0.4s ease;
}
.glass-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

/* Tombol Emas (Primary) */
.btn-gold {
    background: linear-gradient(90deg, var(--gold-main), var(--gold-dark));
    color: var(--green-900);
    padding: 16px 34px;
    border-radius: 60px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    border: none;
    transition: 0.35s ease;
}
.btn-gold:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
    color: var(--green-900);
}

/* Tombol Garis (Outline) */
.btn-outline-glass {
    border: 2px solid rgba(255, 255, 255, 0.35);
    color: var(--text-white);
    padding: 14px 32px;
    border-radius: 60px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: 0.35s ease;
}
.btn-outline-glass:hover {
    background: var(--text-white);
    color: var(--green-200);
}

/* Label / Badge */
.badge-gold {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 50px;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.35);
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--gold-light);
}

/* Blockquote Spesial */
.quote-islamic {
    margin-top: 15px;
    padding-left: 20px;
    border-left: 4px solid var(--gold-main);
    font-style: italic;
    line-height: 1.9;
    color: #fff7d4;
}

/* --- 4. BACKGROUND EFFECTS & ANIMATIONS --- */

/* Pattern Titik-Titik Background */
.bg-pattern {
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 35px 35px;
    opacity: 0.25;
    z-index: -4;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* Efek Cahaya Bergerak */
.bg-glow-effect {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -5;
    overflow: hidden;
    pointer-events: none;
}
.bg-glow-effect::before {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    background: rgba(255, 215, 0, 0.10);
    filter: blur(120px);
    border-radius: 50%;
    top: -250px;
    right: -180px;
    animation: float1 12s infinite alternate;
}
.bg-glow-effect::after {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    background: rgba(255, 255, 255, 0.05);
    filter: blur(140px);
    border-radius: 50%;
    left: -220px;
    bottom: -250px;
    animation: float2 14s infinite alternate;
}

/* Animasi Melayang Element (Logo dll) */
.anim-floating {
    animation: floating 4s ease-in-out infinite;
}

/* Keyframes */
@keyframes float1 {
    from { transform: translateY(0); }
    to { transform: translateY(70px); }
}
@keyframes float2 {
    from { transform: translateY(0); }
    to { transform: translateY(-60px); }
}
@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-18px); }
    100% { transform: translateY(0px); }
}