/* ============================================================
   LOGIN – TEMA & DASAR
   ============================================================ */
*:not(i):not([class*="bi-"]):not([class*="glyphicon"]) {
    font-family: 'Poppins', 'Nunito', sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    line-height: 19px;
   text-decoration: none;
}

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Mencegah scroll ganda di body */
    font-family: 'Inter', sans-serif;
    line-height: 0.9;
}

h2, p { color: white; }
.container { text-align: center; }

/* Menyatukan animasi swal */
* { animation: swal2-show .3s; }
.anim-swal-show { animation: swal2-show .8s; }

/* ============================================================
   KARTU & WRAPPER LAYOUT (Glassmorphism)
   ============================================================ */
.pic-wrapper { position: absolute; width: 100%; height: 100%; top: 0; right: 0; overflow: hidden; z-index: -1; }
figure { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; margin: 0; }

.card-container.card {
    width: 350px;
    margin-top: 2%;
    margin-right: 2%;
    padding: 2px 16px;
    position: relative;
    z-index: 10;
}

.card {
    padding: 20px 25px 30px;
    margin: 12% auto 25px;
    border-radius: 12px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

#logpage123 {
    backdrop-filter: blur(1em);
    -webkit-backdrop-filter: blur(1em);
    background: rgba(50, 56, 62, 0.42); /* Semi transparan untuk glassmorphism */
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* ============================================================
   LOGO & PROFIL
   ============================================================ */
.profile-img-card, .profile-img-card-bulat {
    width: 96px;
    height: 96px;
    padding: 1px;
    margin: 12px auto 25px;
    display: block;
}
.profile-img-card { border-radius: 12%; }
.profile-img-card-bulat { border-radius: 49%; }

#namaperus {
    font-family: 'Poppins', sans-serif;
    margin: 1em;
    color: honeydew;
	margin-bottom: 0.9em;
}

/* ============================================================
   INPUT FORM: CONSOLIDATED GLASSMORPHISM FIX
   (Membuang tumpang tindih customleogainput & form-control)
   ============================================================ */

/* 1. Autofill Fix untuk Tema Gelap/Glassmorphism */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active { 
    -webkit-box-shadow: 0 0 0 30px #2a2a3c inset !important; /* Jangan gunakan putih, gunakan warna solid gelap */
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* 2. Style Dasar Input */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
.form-control,
.customleogainput {
   /* background: rgba(255, 255, 255, 0.08) !important; */
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 12px !important;
   /* padding: 11px 16px !important; */
    
    color: #ffffff !important;
    margin-bottom: 10px !important;
    transition: all 0.25s ease;
    box-shadow: none !important;
    text-align: left !important;
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    color-scheme: dark; /* Force dark mode context agar native UI sesuai */
}

/* 3. State Saat Fokus (Diklik) */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
.form-control:focus,
.customleogainput:focus {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: #5cb85c !important;
    box-shadow: 0 0 0 3px rgba(92, 184, 92, 0.2) !important;
    outline: none !important;
}

/* 4. Placeholder */
input::placeholder,
.form-control::placeholder,
.customleogainput::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
    font-weight: 400;
    opacity: 1 !important;
}

/* ============================================================
   GROUP PASSWORD (EYE ICON FIX)
   ============================================================ */
#s1 .input-group {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .25s;
    margin-bottom: 10px;
    width: 100%;
}
#s1 .input-group:focus-within {
    border-color: #5cb85c;
    box-shadow: 0 0 0 3px rgba(92, 184, 92, 0.2);
}
#s1 .input-group input.form-control,
#s1 .input-group .customleogainput {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: 1;
    margin-bottom: 0 !important; /* Timpa margin bottom khusus di dalam group */
}
#eye-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 0 16px !important;
    font-size: 16px !important;
    cursor: pointer;
    transition: color .2s;
}
#eye-btn:hover { color: #5cb85c !important; }

/* ============================================================
   SELECT SHIFT (DROPDOWN)
   ============================================================ */
select.form-control#fshift12,
select.form-control {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 10px !important;
    padding-right: 30px !important;
}
select.form-control option {
    background: #2a2a3c;
    color: #fff;
}
.btn-smalll{
	background: #fafafa00;
    font-size: smaller;
    font-weight: 300;
    color: darkorange;
}
/* ============================================================
   TOMBOL (BUTTONS)
   ============================================================ */
.btn {
    display: inline;
    border-radius: 12px !important;
    transition: all 0.25s ease;
     
   
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 18px !important; /* Perbaiki padding agar tombol proporsional */
   
    border: none !important;
    cursor: pointer;
    height: auto !important; /* Hapus limit height lawas */
}

/* Tombol Hijau Utama */
.btn-success,
.customeleoga,
#btn-u,
#btn-p,
#btn-o {
    background: linear-gradient(135deg, #5cb85c, #4cae4c) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(92, 184, 92, 0.3) !important;
}
.btn-success:hover,
.customeleoga:hover,
#btn-u:hover,
#btn-p:hover,
#btn-o:hover {
    background: linear-gradient(135deg, #4cae4c, #449d44) !important;
    box-shadow: 0 6px 16px rgba(92, 184, 92, 0.4) !important;
    transform: translateY(-1px);
}

/* Khusus Lebar Tombol Lanjut */
#btn-u { width: 100% !important; margin-top: 4px; }
#btn-p, #btn-o { flex: 1 !important; margin-left: 8px !important; }

/* Tombol Kembali (Transparan) */
#btn-back1, #btn-back2, .btn-warning {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 12px !important;
    width: 48px !important;
    min-width: 48px !important;
   
    box-shadow: none !important;
    flex-shrink: 0;
}
#btn-back1:hover, #btn-back2:hover, .btn-warning:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

/* Tombol Light (Daftar / Lupa Password) */
.btn-light {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.btn-light:hover { background: rgba(255, 255, 255, 0.18) !important; color: #fff !important; }

/* ============================================================
   OTP CANVAS & INPUT
   ============================================================ */
.canvasOtp { text-align: center; margin-bottom: 12px; }
#canvasOtp { background: ivory; border-radius: 1em; }
.div_kodetoken { display: flex; gap: 6px; margin-bottom: 16px; justify-content: center; }

.otp-inp {
    width: 45px !important;
    height: 50px !important;
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 700 !important; 
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
.otp-inp:focus {
    border-color: #5cb85c !important;
    box-shadow: 0 0 0 3px rgba(92, 184, 92, 0.2) !important;
    background: rgba(255, 255, 255, 0.14) !important;
}

/* ============================================================
   STEP & NAVIGASI DOT
   ============================================================ */
#s0, #s1, #s2 { transition: opacity .32s ease, transform .32s ease; }
.step-indicator-wrapper { display: flex; gap: 8px; margin-bottom: 16px; justify-content: center; }
.step-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #e0e0e0;
    transition: all .35s ease !important;
    display: inline-block;
}
.step-dot-active { background: #5cb85c; transform: scale(1.2) !important; box-shadow: 0 0 8px rgba(92,184,92,0.6); }
.step-dot-inactive { background: rgba(255, 255, 255, 0.3); }

/* ============================================================
   MODAL, TAB, & LAINNYA
   ============================================================ */
   .nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
   .nav > li > a:hover { background:blalck;
}
  .modal{color: #bfbdba;}
.modal-fade {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center;
    z-index: 9999; backdrop-filter: blur(1em);
}
.modal-content { line-height: 2em !important;line-height: 2em !important;
    backdrop-filter: blur(1em);
    -webkit-backdrop-filter: blur(1em);
    background: rgb(29 22 45 / 28%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 1em; }
.tab-content { position: relative; background: #d5d2d236 !important; backdrop-filter: blur(1em); border-radius: 10px; padding: 1em; }
.nav-tabs { border-bottom: unset !important;  }
.nav-tabs > li.active > a { background: #a7a0a04a !important; color: #fafafa !important; border-bottom: 3.2px #666 solid !important; }

/* Alert Notifikasi */
.alert-warning {
background: rgb(173 41 255 / 45%) !important;
    border: none !important;
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    margin-bottom: 14px !important;
}

/* Chat Bawah */
.floating-shortcut1111 {
    position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px;
    background-color: #28a745; color: white; font-size: 28px; border-radius: 50%;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center;
    cursor: pointer; z-index: 9999; animation: floaty 2s ease-in-out infinite; transition: all 0.3s ease;
}
.floating-shortcut1111:hover { transform: scale(1.1); background-color: #218838; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Utility */
.d-none-custom, #varkotacap { display: none !important; }
.text-danger { font-size: 12px !important; color: #ff6b6b !important; font-weight: 600 !important; margin: 4px 0 10px; min-height: 16px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 750px) {
    .card-container.card { width: 95%; margin-top: 5em; margin-left: 2%; }
}



.dgnrl{display:flex;gap:6px;margin-bottom:1rem;justify-content:center}
.dgnrl_i{ width:10px;height:10px;border-radius:50%;}
#canvasid{width:95%; height: 24em; object-fit: cover;}
.customdiv{padding: 1em;}
.alert-info{color: #939799  !important;
    background-color: #ffe7e70d  !important;
border-color: #f3f3f340  !important;}
.custom_leogatab{  background: #97cbcb21;
    padding: 4px 11px 5px 11px;
    border-top-right-radius: 0.2em;
    border-top-left-radius: 0.2em;
    color: grey;
    text-decoration: none !important; }
.custom_leogatab:active{    background: #666  }
.bo-tab-pane{padding:2em;}
.input-group-btn{display: ruby;}