/* --- 1. GLOBAL STYLES --- */
:root {
    --bg-dark: #040914;
    --accent-blue: #3b82f6;
    --police-blue: #1e3a8a;
    --glass-white: rgba(255, 255, 255, 0.05);
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: 'Outfit', sans-serif;
    background-image: 
        url(image/BG_Form.png);
    color: #ffffff;
    overflow-x: hidden;
    background-size: cover;
    background-position: center;   
    background-repeat: no-repeat;  
    background-attachment: fixed;
}


.konten {
    position: relative;
    z-index: 1;
    padding: 20px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* --- 2. LAYOUT KOTAK FORM --- */
.kotak {
    width: 100%;
    max-width: 700px;
    background-color: rgba(255, 255, 255, 0.484);
    backdrop-filter: blur(1px);
    border-radius: 25px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.228);
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
}

.judul {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 15px 10px;
    color: black;
  	
}

.judul h2 {
    margin-top: 10px;
}

.logo-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.logo1 { width: 50px; height: auto; }
.logo2, .logo3 { width: 40px; height: auto; }

/* --- 3. FORM ELEMENTS --- */
.isi {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 30px;
    width: 100%;
    margin-bottom: 0;
}

/*@media (min-width: 600px) {
    .isi { grid-template-columns: repeat(2, 1fr); gap: 20px 30px; }
}*/

.field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

label {
    margin-bottom: 5px;
    font-size: 14px;
    color: #333;
    font-weight: bold;
  	font-family: "Lora", serif;
}

.input-box {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.16);
    background-color: rgba(255, 255, 255, 0.715);
    color: #333;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
}

.input-box::placeholder { color: grey; }

/* Dropdown & Date Style */
.select-style, select.input-box {
    appearance: none;
    -webkit-appearance: none;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="grey" viewBox="0 0 16 16"><path d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>') no-repeat right 15px center;
    background-color: rgba(255, 255, 255, 0.715);
    color: grey;
}

.dual-input, .quad-input {
    display: flex;
    gap: 10px;
    width: 100%;
}

#pendidikan { flex: 3; }
#kode_pendidikan { flex: 1; background-color: rgba(200, 200, 200, 0.3); cursor: not-allowed; }

/* --- 4. BUTTONS --- */
.field-buttons.full-width {
    grid-column: span 2;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 0;
}

.button {
    flex: 1;
    padding: 15px 0;
    border: none;
    border-radius: 30px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
    text-align: center;
}

.btn-next { 
    background: linear-gradient(to right, #1a73e8, #1b97ad); color: white; }
.btn-back { background-color: #e0e0e0; color: #555; }

.button:hover { transform: scale(1.02); filter: brightness(0.9); }

input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  display: none;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button {
  display: none;
}

input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
}


/* --- 5. MODAL --- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    padding: 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    animation: muncul 0.3s ease;
}

@keyframes muncul {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* --- 6. RESPONSIVE HERO & NAVBAR --- */
@media (max-width: 768px) {
    .hero-centered::before {
        background-size: 80% !important;
        background-position: center 30% !important;
        opacity: 0.2;
    }

    .outline-text { font-size: 3rem !important; letter-spacing: 5px; }
    .hero-title { font-size: 2.2rem !important; }
    
    .field-buttons.full-width {
        flex-direction: column;
    }

    .navbar-collapse {
        background: var(--bg-dark);
        padding: 20px;
        border-radius: 15px;
    }

.kotak {
    width: 95%; /* Mengambil 95% lebar layar pada mobile */
    max-width: 1100px; /* Ditambah dari 900px agar lebih lebar di desktop */
    min-height: auto; 
    background-color: rgba(255, 255, 255, 0.484);
    border-radius: 25px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(1px);
    /* Padding: Atas 40px, Kanan-Kiri 40px, Bawah 70px */
    padding: 40px 40px 40px 40px; 
    box-sizing: border-box;
    margin: 20px auto; /* Memastikan kotak di tengah */

}

.isi {
    display: flex;
  	flex-direction: column;
    /* Jarak antar baris diperlebar agar tidak sesak 
    grid-template-columns: 1fr 1fr; 
    gap: 35px 40px; */
    width: 100%;
    margin-bottom: 50px;
}
  
  .judul {
        text-align: center;
    }
  
@media (max-width: 768px) {
    /* 1. Navbar & Logo (Sangat Mepet & Kecil) */
    .navbar {
        padding: 5px 0 !important;
    }
    .brand-main {
        font-size: 1rem !important; /* Ukuran SIREGOL mengecil */
    }
    .brand-sub {
        font-size: 0.45rem !important; /* Ukuran BINMAS POLRI mengecil */
        letter-spacing: 1px !important;
    }
    .brand-sub-wrapper {
        padding-left: 8px !important;
        gap: 0 !important;
    }

    /* 2. Hero Section (Portal Pusdik Binmas) */
    .hero-centered {
        padding-top: 80px !important; /* Biar gak terlalu turun */
    }
    .outline-text {
        font-size: 2rem !important; /* Teks PORTAL sangat kecil */
        letter-spacing: 2px !important;
    }
    .hero-title {
        font-size: 1.4rem !important; /* Teks PUSDIK BINMAS */
        margin-top: -5px !important;
    }
    .hero-desc {
        font-size: 0.75rem !important; /* Deskripsi kecil */
        margin-bottom: 20px !important;
        padding: 0 20px !important;
    }

    /* 3. Tombol (Ramping & Tidak Lebar) */
    .btn-gradient, .btn-outline-light {
        width: 75% !important; /* Tombol tidak memenuhi lebar layar */
        padding: 8px 15px !important;
        font-size: 0.8rem !important;
        border-radius: 20px !important;
    }
    .d-flex.gap-3 {
        gap: 8px !important;
    }

    /* 4. Kotak Form (Jika di halaman registrasi) */
    .kotak {
        width: 92% !important;
        padding: 15px !important; /* Ruang dalam kotak dikecilkan */
    }
    .isi {
        gap: 15px !important; /* Jarak antar input mepet */
    }
    label {
        font-size: 12px !important; /* Label input kecil */
    }
    .input-box {
        padding: 8px !important;
        font-size: 12px !important;
    }
}
  @media (max-width: 768px) {
    .hero-centered::before {
        background-size: 100% !important;
        background-position: center 10% !important;
        opacity: 0.2;
    }
        
    .outline-text { font-size: 3rem !important; letter-spacing: 5px; }
    .hero-title { font-size: 2.2rem !important; padding: 10px; }
    .hero-desc { font-size: 0.9rem !important; }

    /* MENGATUR UKURAN TOMBOL LOGIN DI NAVBAR MOBILE */
    .navbar .btn { 
        width: auto !important; /* Agar border tidak selebar layar */
        padding: 5px 20px !important; /* Memperkecil padding atas-bawah */
        font-size: 0.8rem !important; /* Memperkecil ukuran teks */
        margin-top: 10px; /* Memberi jarak dari menu atasnya */
        display: inline-block; /* Memastikan border membungkus teks saja */
        align-items: right;
    }

    /* Memperbaiki container tombol di Hero agar tidak berantakan */
    .d-flex.gap-3 { 
        flex-direction: column; /* Tombol bertumpuk di mobile */
        align-items: center;
        gap: 10px !important;
    }
    
    .btn-gradient, .btn-outline-light {
        width: 80% !important; /* Ukuran tombol registrasi di mobile */
    }
}
  @media (max-width: 768px) {
    /* ... kode media query yang lain ... */

    /* Mengetengahkan seluruh list menu di mobile */
    .navbar-collapse .navbar-nav {
        text-align: center;
        padding-bottom: 20px; /* Jarak bawah agar tidak mepet */
    }

    /* Mengatur tombol login agar tidak melebar & berada di tengah */
    .navbar .nav-item .btn {
        display: inline-block; /* Sangat penting agar tombol tidak full-width */
        width: 100% !important;
        margin: 10px auto;
        padding: 6px 30px !important; /* Membuat border terlihat lebih proporsional */
        font-size: 0.9rem;
    }
}
  /* --- HEADER NAV POJOK KANAN --- */
.top-nav-profile {
    position: absolute;
    top: 20px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 15px; /* Jarak antara foto dan tombol */
    z-index: 1001;
}

.admin-photo {
    width: 45px;
    height: 45px;
    border-radius: 50%; /* Membuat foto bulat */
    border: 2px solid var(--accent-blue);
    object-fit: cover;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

.btn-logout-header {
    background: #ef4444; /* Warna merah solid */
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2);
}

.btn-logout-header:hover {
    background: #dc2626;
    transform: translateY(-2px);
    color: white;
}

/* Sembunyikan logout lama di sidebar agar tidak double */
.btn-logout-sidebar {
    display: none !important;
}
  /* --- LAYOUT HEADER MONITORING --- */
.header-monitoring {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Membagi menjadi 3 kolom */
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
}

/* Memastikan Search Box tepat di tengah */
.search-container {
    display: flex;
    justify-content: center;
}

.search-box {
    background: #1a2a4d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 20px;
    color: white;
    width: 100%;
    max-width: 450px; /* Lebar box search */
    font-size: 14px;
    transition: 0.3s;
}

.search-box:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}

/* Profil di pojok kanan (tanpa absolute agar tidak tabrakan) */
.right-profile-area {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
}
  /* --- CONTAINER PROFIL & LOGOUT DENGAN BORDER LUAR --- */
.auth-user-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03); /* Latar belakang tipis */
    padding: 6px 8px 6px 6px; /* Padding kiri lebih kecil agar avatar mepet */
    border-radius: 50px; /* Border luar melengkung sempurna */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Garis border luar */
    backdrop-filter: blur(5px);
}

.admin-avatar-circle {
    width: 38px;
    height: 38px;
    background: #3b82f6; /* Warna biru sesuai gambar */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.btn-logout-pill {
    background: #ef4444;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.btn-logout-pill:hover {
    background: #dc2626;
    transform: scale(1.02);
    color: white;
}
  .header-top-bar {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    margin-bottom: 30px;
}

.right-profile-area {
    display: flex;
    justify-content: flex-end; /* Mendorong ke pojok kanan */
}