/* =========================================================================
   FILE: style.css
   FUNGSI: TEMA CUSTOM "GOALS MANAGEMENT" (Hijau Tosca, Kuning, Putih)
   ========================================================================= */

:root {
    --warna-hijau: #15958A;  /* Hijau Tosca dari Logo */
    --warna-kuning: #F2C312; /* Kuning Emas dari Logo */
    --warna-latar: #F9FBFB;  /* Putih bersih dengan sedikit rona sejuk */
}

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: var(--warna-latar); 
}

/* =========================================================================
   1. MENGGANTI WARNA BIRU BOOTSTRAP MENJADI HIJAU LOGO
   ========================================================================= */
.text-primary { color: var(--warna-hijau) !important; }
.bg-primary { background-color: var(--warna-hijau) !important; }
.border-primary { border-color: var(--warna-hijau) !important; }

/* Tombol Utama (Warna Hijau) */
.btn-primary { 
    background-color: var(--warna-hijau) !important; 
    border-color: var(--warna-hijau) !important; 
    color: #ffffff !important;
}
.btn-primary:hover { 
    background-color: #10786f !important; 
    border-color: #10786f !important; 
}

/* Tombol Garis Tepi (Warna Hijau) */
.btn-outline-primary { 
    color: var(--warna-hijau) !important; 
    border-color: var(--warna-hijau) !important; 
}
.btn-outline-primary:hover { 
    background-color: var(--warna-hijau) !important; 
    color: #ffffff !important; 
}

/* Efek Fokus saat mengetik di Form */
.form-select:focus, .form-control:focus {
    border-color: var(--warna-hijau) !important;
    box-shadow: 0 0 0 0.25rem rgba(21, 149, 138, 0.25) !important;
}

/* =========================================================================
   2. SENTUHAN WARNA KUNING LOGO UNTUK AKSEN
   ========================================================================= */
/* Tombol Sukses/Simpan diganti menjadi Kuning Emas agar mencolok */
.btn-success {
    background-color: var(--warna-kuning) !important;
    border-color: var(--warna-kuning) !important;
    color: #000000 !important; /* Teks hitam agar jelas terbaca di atas kuning */
    font-weight: bold;
}
.btn-success:hover {
    background-color: #d9ae0f !important;
    border-color: #d9ae0f !important;
}

/* Efek saat baris tabel disorot mouse (Warna kuning sangat tipis) */
.table-hover tbody tr:hover {
    background-color: rgba(242, 195, 18, 0.1) !important;
}

/* =========================================================================
   3. DESAIN HALAMAN PENDAFTARAN & LOGO
   ========================================================================= */
.form-section { 
    background: #ffffff; 
    padding: 2rem; 
    border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.04); 
    margin-bottom: 25px; 
}

/* Penunjuk Langkah (Step 1 & Step 2) */
.step-indicator { display: flex; justify-content: center; margin-bottom: 20px; font-weight: bold; }
.step-item { padding: 10px 20px; border-radius: 20px; background: #e9ecef; color: #6c757d; margin: 0 10px; }
.step-item.active { 
    background-color: var(--warna-hijau); 
    color: white; 
    box-shadow: 0 4px 10px rgba(21, 149, 138, 0.3); 
}

/* Logo Header Transparan Menyatu dengan Latar */
.header-logo {
    max-height: 65px; 
    mix-blend-mode: multiply; /* Ini yang membuat background putih logo hilang! */
    object-fit: contain;
}

/* =========================================================================
   4. DESAIN HALAMAN ADMIN
   ========================================================================= */
.waktu-box { 
    font-family: monospace; 
    letter-spacing: 2px; 
    font-weight: bold; 
}

/* Animasi mengambang saat kartu Login disorot */
.card { transition: transform 0.2s ease; }
.card:hover { transform: translateY(-5px); }