/* =====================================================
   REGISTER CALON RPL — FINAL ENTERPRISE UI
   GLASSMORPHISM VERSION
===================================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',sans-serif;
}

html,
body{
min-height:100%;
scroll-behavior:smooth;
}

body{
position:relative;
padding:38px 16px;
overflow-x:hidden;
color:#fff;
}

/* ================= BACKGROUND ================= */

body::before{
content:"";
position:fixed;
inset:0;

background:
linear-gradient(rgba(0,27,66,.62),rgba(0,27,66,.62)),
url("../img/kampus.jpg") center/cover no-repeat fixed;

filter:blur(6px);
z-index:-2;
}

body::after{
content:"";
position:fixed;
inset:0;
background:
linear-gradient(
135deg,
rgba(255,215,0,.04),
rgba(255,255,255,.02)
);
z-index:-1;
}

/* ================= CONTAINER ================= */

.overlay{
width:100%;
max-width:560px;
margin:auto;

background:rgba(255,255,255,.08);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.16);

border-radius:26px;

padding:34px 30px;

box-shadow:
0 20px 50px rgba(0,0,0,.35);

animation:fadeUp .7s ease;
}

/* ================= HEADER ================= */

.form-header{
text-align:center;
margin-bottom:28px;
}

.form-header h2{
font-size:2.1rem;
font-weight:800;
color:#FFD700;

text-shadow:
0 2px 8px rgba(0,0,0,.35);

margin-bottom:8px;
}

.form-header p{
font-size:.98rem;
opacity:.9;
}

/* ================= ALERT ================= */

.notif,
.success{
padding:14px 16px;
border-radius:14px;
margin-bottom:18px;
font-size:.94rem;
line-height:1.5;
}

.notif{
background:rgba(255,80,80,.16);
border:1px solid rgba(255,80,80,.35);
color:#ffd4d4;
}

.success{
background:rgba(0,255,140,.14);
border:1px solid rgba(0,255,140,.35);
color:#d7ffe8;
}

/* ================= FORM ================= */

form{
display:flex;
flex-direction:column;
gap:15px;
}

/* ================= LABEL ================= */

label{
font-size:.95rem;
font-weight:600;
margin-bottom:-4px;
color:#fff;
}

/* ================= INPUT ================= */

input,
textarea,
select{
width:100%;

padding:13px 14px;

border-radius:14px;

border:1px solid rgba(255,255,255,.18);

background:rgba(255,255,255,.07);

color:#fff;

font-size:.95rem;

transition:.25s;
}

/* ================= PLACEHOLDER ================= */

input::placeholder,
textarea::placeholder{
color:rgba(255,255,255,.62);
}

/* ================= FOCUS ================= */

input:focus,
textarea:focus,
select:focus{
outline:none;

border-color:#FFD700;

background:rgba(255,255,255,.11);

box-shadow:
0 0 0 3px rgba(255,215,0,.12);
}

/* ================= TEXTAREA ================= */

textarea{
resize:vertical;
min-height:110px;
}

/* ================= SELECT ================= */

select{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;

cursor:pointer;

background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='white' viewBox='0 0 24 24'>\
<path d='M7 10l5 5 5-5z'/>\
</svg>");

background-repeat:no-repeat;
background-position:right 14px center;
padding-right:44px;
}

/* ================= OPTION ================= */

select option{
background:#10284b;
color:#fff;
}

optgroup{
background:#17355f;
color:#FFD700;
font-weight:bold;
}

/* ================= BUTTON GROUP ================= */

.button-group{
margin-top:12px;

display:flex;
flex-direction:column;
gap:12px;
}

/* ================= BUTTON ================= */

.btn{
display:flex;
align-items:center;
justify-content:center;

width:100%;

padding:13px 16px;

border:none;
border-radius:14px;

font-weight:700;
font-size:.95rem;

text-decoration:none;

cursor:pointer;

transition:.25s;

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.15);

color:#fff;
}

/* ================= PRIMARY BUTTON ================= */

button.btn,
.btn:first-child{
background:
linear-gradient(
135deg,
#FFD700,
#ffb300
);

color:#002855;

border:none;
}

/* ================= HOVER ================= */

.btn:hover{
transform:translateY(-2px);

box-shadow:
0 12px 24px rgba(0,0,0,.25);
}

/* ================= SUCCESS CARD ================= */

.success h3{
margin-bottom:10px;
color:#7dffb1;
}

/* ================= SCROLLBAR ================= */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#10284b;
}

::-webkit-scrollbar-thumb{
background:#FFD700;
border-radius:20px;
}

/* ================= ANIMATION ================= */

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(30px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* ================= RESPONSIVE ================= */

@media(max-width:768px){

.overlay{
padding:28px 22px;
border-radius:22px;
}

.form-header h2{
font-size:1.8rem;
}

input,
textarea,
select{
padding:12px 13px;
font-size:.92rem;
}

.btn{
padding:12px;
}

}