/* ========================================= */
/* BAGIAN 1: Global Setup & Background */
/* ========================================= */
body {
    font-family: 'Poppins', sans-serif;
    /* Gradasi Biru Lembut (Malibu Beach) */
    background: #89f7fe;
    background-image: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* ========================================= */
/* BAGIAN 2: Container Utama */
/* ========================================= */
.main-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    padding: 50px;
    width: 100%;
    max-width: 1000px;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/* ========================================= */
/* BAGIAN 3: Header & Logo */
/* ========================================= */
.company-logo {
    max-height: 90px;
    margin-bottom: 15px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

.header-title {
    font-size: 1.5rem; /* Ukuran font judul */
    color: #000000;    /* Warna Hitam Pekat */
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 30px;
    text-transform: uppercase;
    line-height: 1.4;
}

/* ========================================= */
/* BAGIAN 4: Card Styles (Global) */
/* ========================================= */
.custom-card {
    border: none;
    border-radius: 20px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px 20px;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.custom-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* ========================================= */
/* BAGIAN 5: Warna Spesifik Kartu (Tone-on-Tone) */
/* ========================================= */

/* --- KARTU 1: WARM (Merah Muda) --- */
.card-warm {
    /* Background Pastel Lembut */
    background: linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%);
}
/* Warna Teks & Icon: Merah Marun Gelap */
.card-warm .card-title { color: #881c1c; }
.card-warm .card-subtitle { color: #a63838; }
.card-warm .icon-wrapper { 
    background: rgba(255, 255, 255, 0.6); /* Lingkaran putih transparan */
    color: #881c1c;
    border: 1px solid rgba(255,255,255,0.8);
}

/* --- KARTU 2: COOL (Ungu) --- */
.card-cool {
    /* Background Pastel Lembut */
    background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%); /* Override ke Ungu di bawah */
    background: linear-gradient(135deg, #e0c3fc 0%, #c2e9fb 100%);
}
/* Warna Teks & Icon: Ungu Tua / Indigo */
.card-cool .card-title { color: #4a148c; }
.card-cool .card-subtitle { color: #6a349f; }
.card-cool .icon-wrapper { 
    background: rgba(255, 255, 255, 0.6);
    color: #4a148c;
    border: 1px solid rgba(255,255,255,0.8);
}

/* --- KARTU 3: FRESH (Hijau Tosca) --- */
.card-fresh {
    /* Background Pastel Lembut */
    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
}
/* Warna Teks & Icon: Hijau Teal Gelap */
.card-fresh .card-title { color: #006064; }
.card-fresh .card-subtitle { color: #00838f; }
.card-fresh .icon-wrapper { 
    background: rgba(255, 255, 255, 0.6);
    color: #006064;
    border: 1px solid rgba(255,255,255,0.8);
}

/* ========================================= */
/* BAGIAN 6: Typography Kartu (Umum) */
/* ========================================= */
.card-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 5px;
    /* Shadow dihapus agar teks gelap terlihat tajam & bersih */
    text-shadow: none; 
}

.card-subtitle {
    font-size: 0.9rem;
    font-weight: 600; /* Sedikit ditebalkan agar terbaca */
}

/* ========================================= */
/* BAGIAN 7: Icon Animation */
/* ========================================= */
.icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 20px;
    transition: transform 0.5s ease, background 0.3s;
}

.custom-card:hover .icon-wrapper {
    transform: scale(1.15) rotate(10deg);
    background: #ffffff; /* Saat hover, lingkaran jadi putih solid */
}

/* ========================================= */
/* BAGIAN 8: Footer & Responsive */
/* ========================================= */
.footer-container {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.1);
}
.footer-text {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 500;
}

/* ========================================= */
/* BAGIAN 9: Mobile Responsive (Update)      */
/* ========================================= */
@media (max-width: 768px) {
    
    /* 1. Reset padding body agar kotak putih bisa melebar ke samping */
    body {
        padding: 10px; /* Jarak dari pinggir layar diperkecil (tadinya 20px) */
    }

    /* 2. Besarkan Container Utama */
    .main-container {
        padding: 30px 15px; /* Padding dalam dikurangi sedikit agar muat banyak */
        margin-top: 5px;
        width: 100%;       /* Pastikan lebar memenuhi layar */
        max-width: 100%;   /* Hapus batasan lebar maksimal di HP */
        border-radius: 15px; /* Radius sudut sedikit diperkecil agar pas */
    }

    /* 3. Sesuaikan Ukuran Font Judul */
	.header-title {
        font-size: 0.9rem; /* Diperkecil (sebelumnya 1.1rem) */
        margin-bottom: 15px; /* Jarak bawah juga sedikit dikurangi */
        line-height: 1.3;
    }

    /* 4. Sesuaikan Jarak Kartu */
    .custom-card {
        margin-bottom: 10px;
        padding: 25px 15px; /* Isi kartu sedikit dipadatkan */
    }
    
    /* 5. Ikon sedikit diperkecil agar proporsional */
    .icon-wrapper {
        width: 65px;
        height: 65px;
        font-size: 26px;
        margin-bottom: 15px;
    }
}