/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    /* Gradasi linear dari sudut kiri atas ke kanan bawah */
    background: linear-gradient(135deg, #7dd3fc 0%, #1e3a8a 50%, #15803d 100%);
    
    /* Ukuran background diperbesar untuk efek animasi halus jika diinginkan */
    background-size: 200% 200%;
    animation: gradientMove 10s ease infinite;
    
    color: #f8fafc;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

.container {
    text-align: center;
    padding: 2rem;
    max-width: 600px;
    width: 100%;
}

/* --- ANIMASI TEKNIK & ARSITEK --- */
.animation-container {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 2rem auto;
}

/* Roda Gigi Utama */
.gear {
    position: absolute;
    border: 4px dashed #38bdf8; /* Warna cyan khas blueprint */
    border-radius: 50%;
    animation: rotate 8s linear infinite;
}

.gear-large {
    width: 100px;
    height: 100px;
    top: 10px;
    left: 20px;
}

.gear-small {
    width: 60px;
    height: 60px;
    top: 75px;
    left: 105px;
    border-color: #0ea5e9;
    animation: rotate-reverse 6s linear infinite;
}

/* Kertas Blueprint */
.blueprint {
    position: absolute;
    bottom: 20px;
    left: 40px;
    width: 120px;
    height: 90px;
    background-color: rgba(14, 165, 233, 0.1);
    border: 2px solid #38bdf8;
    border-radius: 4px;
    padding: 10px;
    overflow: hidden;
}

/* Efek Garis Sketsa Arsitek */
.drawing-line {
    background-color: rgba(56, 189, 248, 0.6);
    position: absolute;
    height: 2px;
    transform-origin: left;
    animation: draw 3s ease-in-out infinite alternate;
}

.line-1 { width: 80%; top: 20px; left: 10px; }
.line-2 { width: 60%; top: 45px; left: 20px; animation-delay: 0.5s; }
.line-3 { width: 70%; top: 65px; left: 10px; animation-delay: 1s; }

/* Simbol Jangka / Alat Ukur */
.compass {
    position: absolute;
    width: 4px;
    height: 40px;
    background-color: #fbbf24; /* Warna kuning alat proyek */
    top: 10px;
    right: 20px;
    transform-origin: top center;
    animation: swing 2s ease-in-out infinite alternate;
}

/* --- TEXT & PROGRESS BAR --- */
h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #f1f5f9;
}

p {
    font-size: 1rem;
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.progress-bar-container {
    background-color: #334155;
    border-radius: 10px;
    height: 8px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-bar {
    background: linear-gradient(90deg, #38bdf8, #0ea5e9);
    height: 100%;
    width: 75%; /* Sesuaikan tingkat progres di sini */
    border-radius: 10px;
    position: relative;
    animation: progress-glow 2s ease-in-out infinite;
}

.progress-text {
    font-size: 0.85rem;
    color: #38bdf8;
    font-weight: 600;
    margin-bottom: 2rem;
}

/* --- KEYFRAMES ANIMASI --- */
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

@keyframes draw {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

@keyframes swing {
    0% { transform: rotate(-20deg); }
    100% { transform: rotate(40deg); }
}

@keyframes progress-glow {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Tambahkan animasi ini di bagian paling bawah file style.css Anda */
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- BUTTON GROUP STYLES --- */

/* Bungkus tombol menggunakan Flexbox agar sejajar dan stabil */
.button-group {
    display: flex;
    gap: 16px; /* Jarak antar tombol */
    margin-top: 3.5rem; /* Jarak aman dari teks progres */
}

.btn {
    flex: 1; /* Membuat kedua tombol memiliki lebar yang sama seimbang */
    padding: 14px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #ffffff;
    text-align: center;
    
    /* Memastikan transisi hanya terjadi pada properti yang diinginkan agar tidak memicu pergeseran layout */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* Tombol Email (Glassmorphism Transparan) */
.btn-email {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(5px);
}

/* Tombol Database (Warna Oranye Proyek) */
.btn-database {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Gaya Icon */
.btn-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    margin-top: -2px;
}

/* --- EFEK MELAYANG HALUS (HOVER & ACTIVE) --- */

/* Saat Kursor di Atas Tombol (Tombol Terangkat) */
.btn:hover {
    transform: translateY(-4px); 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25); 
}

.btn-email:hover {
    background: rgba(255, 255, 255, 0.25);
}

.btn-database:hover {
    background: linear-gradient(135deg, #fbbf24, #ea580c);
}

/* Saat Tombol Diklik (Perbaikan selector dari :add menjadi :active saja) */
.btn:active {
    transform: translateY(-1px); 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); 
}

/* --- RESPONSIVE MOBILE (Tampilan HP) --- */
@media (max-width: 480px) {
    .button-group {
        flex-direction: column; /* Tombol otomatis menumpuk vertikal di HP */
        gap: 12px;
    }
}

/* Tombol Instagram (Gradasi Warna Khas Instagram) */
.btn-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

/* Efek Hover Instagram saat kursor di atasnya */
.btn-instagram:hover {
    background: linear-gradient(45deg, #ee861a 0%, #e45421 25%, #d41331 50%, #bc1756 75%, #a81077 100%);
}