/* ============================================================
   TEST-PMB PORTAL — Redesign 2026
   Tema warna mengikuti halaman login admin (navy & emas).
   Semua kelas ber-awalan tp- agar tidak bertabrakan dengan
   Bootstrap 2 yang masih dipakai halaman Mata Pelajaran/Soal.
   ============================================================ */
:root{
	--navy-950:#061737;
	--navy-900:#081F49;
	--navy-800:#0A2A63;
	--blue-700:#0F47A8;
	--blue-600:#1156C6;
	--blue-500:#2B6FE3;
	--gold:#F2B21B;
	--gold-light:#FFE29A;
	--gold-deep:#D69A0D;
	--ink:#12264F;
	--muted:#5A6B8C;
	--line:#DEE7F7;
	--soft:#F4F8FF;
	--danger-bg:#FDF1F1;
	--danger-line:#F3C1C1;
	--danger-text:#8C2F39;
}
*,*::before,*::after{box-sizing:border-box;}

/* ---------- Reset margin & padding browser default ---------- */
html,body{margin:0;padding:0;}

/* ---------- Dasar halaman (berlaku untuk seluruh modul portal) ---------- */
body{
	padding-top:0;
	background:var(--soft);
	color:var(--ink);
	font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
	-webkit-font-smoothing:antialiased;
}
/* halaman dengan top bar (Mata Pelajaran / Soal) butuh ruang untuk bar fixed */
body.tp-has-bar{padding-top:76px;}

/* ---------- TOP BAR ---------- */
.tp-bar{
	position:fixed;
	top:0;left:0;right:0;
	z-index:1030;
	background:linear-gradient(90deg,var(--navy-950) 0%,var(--navy-900) 55%,var(--navy-800) 100%);
	border-bottom:1px solid rgba(242,178,27,.28);
	box-shadow:0 6px 24px rgba(6,23,55,.35);
}
.tp-bar::after{
	content:"";
	display:block;
	height:3px;
	background:linear-gradient(90deg,var(--blue-600),var(--gold));
}
.tp-inner{
	max-width:1200px;
	margin:0 auto;
	padding:0 22px;
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:6px 18px;
	min-height:60px;
}
.tp-brand{
	display:flex;
	align-items:center;
	gap:12px;
	text-decoration:none;
	padding:8px 0;
	margin-right:6px;
}
.tp-logo{
	width:40px;height:40px;
	object-fit:contain;
	background:#fff;
	border-radius:50%;
	padding:4px;
	box-shadow:0 0 0 2px rgba(242,178,27,.85),0 4px 12px rgba(0,0,0,.25);
	flex:0 0 auto;
}
.tp-brand-name{
	color:#fff;
	font-size:13.5px;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
	line-height:1.25;
}
.tp-brand-sub{
	display:block;
	color:rgba(255,255,255,.62);
	font-size:10px;
	font-weight:600;
	letter-spacing:.18em;
	text-transform:uppercase;
	margin-top:2px;
}
.tp-nav{
	display:flex;
	align-items:center;
	gap:4px;
	flex-wrap:wrap;
}
.tp-link{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:9px 14px;
	border-radius:10px;
	color:rgba(255,255,255,.78);
	font-size:13.5px;
	font-weight:600;
	letter-spacing:.02em;
	text-decoration:none;
	border:1px solid transparent;
	transition:color .15s,background .15s;
}
.tp-link svg{width:15px;height:15px;flex:0 0 auto;}
.tp-link:hover{color:#fff;background:rgba(255,255,255,.08);}
.tp-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.tp-link.is-active{
	color:var(--gold-light);
	background:rgba(242,178,27,.12);
	border-color:rgba(242,178,27,.35);
}
.tp-spacer{flex:1 1 auto;}
.tp-user{
	display:inline-flex;
	align-items:center;
	gap:9px;
	max-width:260px;
	padding:8px 16px;
	border-radius:999px;
	background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.18);
	color:#fff;
	font-size:13px;
	font-weight:600;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.tp-user svg{width:15px;height:15px;color:var(--gold);flex:0 0 auto;}
.tp-cta{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:9px 18px;
	border-radius:10px;
	text-decoration:none;
	font-size:13.5px;
	font-weight:700;
	letter-spacing:.02em;
	color:#132A57;
	background:linear-gradient(135deg,#F9CD4C 0%,var(--gold) 55%,#E09E0F 100%);
	box-shadow:0 6px 16px rgba(232,163,23,.35),inset 0 1px 0 rgba(255,255,255,.5);
	transition:transform .15s,box-shadow .15s,filter .15s;
}
.tp-cta svg{width:15px;height:15px;}
.tp-cta:hover{
	color:#132A57;
	transform:translateY(-1px);
	box-shadow:0 10px 20px rgba(232,163,23,.45),inset 0 1px 0 rgba(255,255,255,.5);
	filter:brightness(1.03);
}
.tp-cta:focus-visible{outline:3px solid rgba(242,178,27,.55);outline-offset:2px;}
.tp-timerbox{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:8px 12px;
	border-radius:10px;
	background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.18);
	margin:auto 0;
}
.tp-timerbox svg{width:15px;height:15px;color:var(--gold);}
input.tp-timerinput,
.tp-timerbox input.tp-timerinput{
	width:88px;
	height:24px; /* 24 + padding kotak (12) + border (2) = 38px — sama dengan tinggi .tp-user */
	margin:0;
	padding:0 6px;
	border:1px solid rgba(242,178,27,.45);
	border-radius:8px;
	background:rgba(6,23,55,.55);
	color:var(--gold-light);
	font-family:inherit;
	font-size:15px;
	font-weight:700;
	letter-spacing:.08em;
	text-align:center;
	box-shadow:none;
	cursor:default;
}

/* ---------- LAYOUT UTAMA 70:30 (HOME) ---------- */
.tp-wrap{
	display:flex;
	min-height:100vh;
	width:100%;
}

/* ---------- HERO KIRI 70% ---------- */
.tp-hero{
	flex:70 1 0;
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	gap:30px;
	overflow:hidden;
	padding:clamp(26px,4.5vw,58px);
	background:linear-gradient(135deg,var(--navy-950) 0%,var(--navy-800) 46%,var(--blue-700) 100%);
	color:#fff;
	isolation:isolate;
}
.tp-hero::before{
	content:"";
	position:absolute;
	inset:0;
	background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
	background-size:22px 22px;
	z-index:-2;
}
.tp-orb{
	position:absolute;
	border-radius:50%;
	filter:blur(85px);
	z-index:-1;
	pointer-events:none;
}
.tp-orb-gold{
	width:420px;height:420px;right:-130px;top:-140px;
	background:radial-gradient(circle,rgba(242,178,27,.45),transparent 65%);
}
.tp-orb-blue{
	width:500px;height:500px;left:-180px;bottom:-220px;
	background:radial-gradient(circle,rgba(59,131,255,.40),transparent 65%);
}
.tp-hero-brand{
	display:flex;
	align-items:center;
	gap:13px;
	animation:tpFadeDown .55s ease both;
}
.tp-hero-brand img{
	width:50px;height:50px;
	object-fit:contain;
	background:#fff;
	border-radius:50%;
	padding:6px;
	box-shadow:0 0 0 3px rgba(242,178,27,.85),0 6px 18px rgba(0,0,0,.25);
	flex:0 0 auto;
}
.tp-hero-brand-name{
	font-size:14px;
	font-weight:700;
	letter-spacing:.10em;
	text-transform:uppercase;
	line-height:1.3;
}
.tp-hero-brand-sub{
	display:block;
	font-size:11px;
	font-weight:500;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:rgba(255,255,255,.72);
	margin-top:3px;
}
.tp-hero-body{
	max-width:620px;
	animation:tpFadeUp .6s ease .08s both;
}
.tp-tagline{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:11.5px;
	font-weight:700;
	letter-spacing:.2em;
	text-transform:uppercase;
	color:var(--gold-light);
	border:1px solid rgba(242,178,27,.55);
	background:rgba(242,178,27,.10);
	padding:7px 14px;
	border-radius:999px;
	margin-bottom:20px;
}
.tp-tagline svg{width:12px;height:12px;}
.tp-title{
	margin:0 0 16px;
	font-size:clamp(1.5rem,1.1rem + 2vw,2.45rem);
	line-height:1.2;
	font-weight:800;
	letter-spacing:-.015em;
	text-wrap:balance;
}
.tp-title .tp-gold{
	background:linear-gradient(92deg,var(--gold-light) 0%,var(--gold) 58%,#E09E0F 100%);
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
}
.tp-divider{
	width:88px;height:5px;border-radius:999px;border:0;margin:0 0 16px;
	background:linear-gradient(90deg,var(--gold),rgba(242,178,27,.15));
}
.tp-desc{
	margin:0 0 22px;
	font-size:clamp(.92rem,.87rem + .3vw,1.02rem);
	line-height:1.75;
	color:rgba(255,255,255,.82);
	max-width:56ch;
}
.tp-chips{
	list-style:none;
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin:0 0 28px;
	padding:0;
}
.tp-chips li{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:12.5px;
	font-weight:600;
	letter-spacing:.02em;
	color:#fff;
	background:rgba(255,255,255,.09);
	border:1px solid rgba(255,255,255,.18);
	padding:8px 14px;
	border-radius:999px;
}
.tp-chips svg{width:15px;height:15px;color:var(--gold);flex:0 0 auto;}
.tp-steps{
	list-style:none;
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:12px;
	margin:0;
	padding:0;
	counter-reset:tpstep;
}
.tp-steps li{
	counter-increment:tpstep;
	position:relative;
	padding:14px 16px 12px 14px;
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.13);
	border-radius:14px;
	font-size:12.5px;
	font-weight:600;
	line-height:1.45;
	color:rgba(255,255,255,.9);
}
.tp-steps li::before{
	content:"0" counter(tpstep);
	display:block;
	font-size:11px;
	font-weight:800;
	letter-spacing:.18em;
	color:var(--gold);
	margin-bottom:6px;
}
.tp-copy{
	font-size:12px;
	color:rgba(255,255,255,.55);
	letter-spacing:.02em;
	animation:tpFadeUp .6s ease .16s both;
}
.tp-copy strong{color:rgba(255,255,255,.78);}

/* ---------- PANEL KANAN 30% ---------- */
.tp-panel{
	flex:30 1 0;
	min-width:330px;
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:14px;
	padding:18px clamp(16px,2.2vw,28px);
	background:linear-gradient(180deg,#FFFFFF 0%,var(--soft) 100%);
	border-left:1px solid #E6EDFA;
	overflow:hidden;
}
.tp-panel::before{
	content:"";
	position:absolute;top:0;left:0;right:0;height:4px;
	background:linear-gradient(90deg,var(--blue-600),var(--gold));
}
.tp-card{
	width:min(430px,100%);
	align-self:center;
	background:#fff;
	border:1px solid #E3ECFB;
	border-radius:22px;
	padding:clamp(24px,3vw,34px);
	box-shadow:0 18px 48px rgba(10,42,99,.14),0 3px 9px rgba(10,42,99,.07);
	animation:tpFadeUp .55s ease .1s both;
}
#masuk.tp-card{scroll-margin-top:24px;}
.tp-badge{
	width:40px;height:40px;
	border-radius:10px;
	display:flex;align-items:center;justify-content:center;
	background:linear-gradient(135deg,var(--navy-800),var(--blue-600));
	box-shadow:0 8px 18px rgba(17,86,198,.35);
	margin-bottom:10px;
	flex:0 0 auto;
}
.tp-badge svg{width:20px;height:20px;color:var(--gold-light);}
.tp-card h1,
.tp-card h2{
	margin:0 0 4px;
	font-size:1.12rem;
	font-weight:800;
	letter-spacing:-.01em;
	color:var(--ink);
	line-height:1.3;
}
.tp-card-sub{
	margin:0 0 12px;
	font-size:12.5px;
	line-height:1.55;
	color:var(--muted);
}
.tp-field{margin-bottom:12px;}
.tp-label{
	display:block;
	font-size:11.5px;
	font-weight:700;
	letter-spacing:.09em;
	text-transform:uppercase;
	color:#33456B;
	margin-bottom:7px;
}
.tp-control{position:relative;}
input.tp-input,
.tp-control input.tp-input,
input.tp-input[type="text"]{
	display:block;
	box-sizing:border-box;
	width:100%;
	height:46px;
	margin:0;
	padding:0 16px 0 44px;
	border:1px solid var(--line);
	border-radius:12px;
	background:#FBFDFF;
	box-shadow:none;
	color:var(--ink);
	font-family:inherit;
	font-size:15px;
	font-weight:400;
	line-height:44px;
	transition:border-color .18s,box-shadow .18s,background .18s;
}
input.tp-input::placeholder,
.tp-control input.tp-input::placeholder{color:#9FB0CE;opacity:1;}
input.tp-input:focus,
.tp-control input.tp-input:focus,
.tp-control input.tp-input:focus:invalid{
	outline:none;
	border-color:var(--blue-500);
	background:#fff;
	box-shadow:0 0 0 4px rgba(43,111,227,.14);
	color:var(--ink);
}
.tp-ico{
	position:absolute;
	left:14px;top:50%;
	transform:translateY(-50%);
	width:18px;height:18px;
	color:#93A6C9;
	pointer-events:none;
}
.tp-hint{
	margin:8px 0 0;
	font-size:11.5px;
	line-height:1.45;
	color:var(--muted);
}
.tp-hint code{
	font-family:inherit;
	font-weight:700;
	color:var(--gold-deep);
	background:rgba(242,178,27,.12);
	border:1px solid rgba(242,178,27,.3);
	border-radius:6px;
	padding:1px 7px;
	font-size:11.5px;
}
.tp-btn{
	width:100%;
	height:46px;
	margin-top:2px;
	border:0;
	border-radius:12px;
	cursor:pointer;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:9px;
	font-family:inherit;
	font-size:14.5px;
	font-weight:700;
	letter-spacing:.02em;
	color:#132A57;
	background:linear-gradient(135deg,#F9CD4C 0%,var(--gold) 55%,#E09E0F 100%);
	box-shadow:0 8px 18px rgba(232,163,23,.38),inset 0 1px 0 rgba(255,255,255,.5);
	transition:transform .18s,box-shadow .18s,filter .18s;
	text-decoration:none;
}
.tp-btn:hover{
	transform:translateY(-1px);
	box-shadow:0 14px 28px rgba(232,163,23,.46),inset 0 1px 0 rgba(255,255,255,.5);
	filter:brightness(1.03);
	color:#132A57;
}
.tp-btn:active{transform:translateY(0);}
.tp-btn:focus-visible{outline:3px solid rgba(242,178,27,.55);outline-offset:2px;}
.tp-btn svg{width:16px;height:16px;transition:transform .18s;}
.tp-btn:hover svg{transform:translateX(3px);}
.tp-btn-ghost{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	width:100%;
	height:42px;
	margin-top:8px;
	border:1px solid var(--line);
	border-radius:12px;
	background:#fff;
	color:var(--blue-700);
	font-family:inherit;
	font-size:13.5px;
	font-weight:700;
	text-decoration:none;
	cursor:pointer;
	transition:border-color .15s,background .15s,color .15s;
}
.tp-btn-ghost:hover{
	border-color:var(--danger-line);
	color:var(--danger-text);
	background:var(--danger-bg);
}
.tp-btn-ghost:focus-visible{outline:3px solid rgba(17,86,198,.35);outline-offset:2px;}
.tp-btn-ghost svg{width:15px;height:15px;}
.tp-secured{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	margin-top:10px;
	padding-top:10px;
	border-top:1px dashed var(--line);
	font-size:11px;
	letter-spacing:.03em;
	color:var(--muted);
}
.tp-secured svg{width:13px;height:13px;color:var(--gold-deep);flex:0 0 auto;}
.tp-status-ok{
	display:flex;
	align-items:center;
	gap:10px;
	margin:0 0 12px;
	padding:11px 13px;
	background:#F1F7EF;
	border:1px solid #CDE3C8;
	border-radius:12px;
	color:#2F5D33;
	font-size:13px;
	line-height:1.45;
}
.tp-status-ok svg{width:18px;height:18px;flex:0 0 auto;color:#4C8A50;}
.tp-status-ok strong{display:block;font-size:14px;}
.tp-alert{
	position:relative;
	flex:0 0 auto;
	display:flex;
	align-items:flex-start;
	gap:10px;
	margin-bottom:16px;
	padding:12px 38px 12px 13px;
	background:var(--danger-bg);
	border:1px solid var(--danger-line);
	border-radius:12px;
	color:var(--danger-text);
	font-size:13.5px;
	line-height:1.5;
	animation:tpShake .4s ease both;
}
.tp-alert svg{flex:0 0 auto;width:18px;height:18px;color:#C25057;}
.tp-alert strong{font-weight:700;}
.tp-alert .close{
	position:absolute;right:8px;top:8px;
	border:0;background:none;
	font-size:18px;line-height:1;
	color:inherit;cursor:pointer;
	padding:4px 6px;
	text-shadow:none;
	opacity:.8;
}
.tp-alert .close:hover{opacity:1;}

/* ---------- HOME DESKTOP ----------
   The base min-height:100vh keeps the panels full-height while allowing
   the page to grow on short screens. Never hide the password help text. */
@media (min-width:1025px){
	.tp-card{width:min(400px,100%);padding:16px 20px;flex:0 0 auto;}
}
@media (min-width:1025px) and (max-height:840px){
	.tp-badge{display:none;}
}
@media (min-width:1025px) and (max-height:760px){
	.tp-steps{display:none;}
}
@media (min-width:1025px) and (max-height:680px){
	.tp-chips{display:none;}
	.tp-desc{margin-bottom:14px;}
}

/* ---------- ANIMASI ---------- */
@keyframes tpFadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes tpFadeDown{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
@keyframes tpShake{
	0%,100%{transform:translateX(0);}
	25%{transform:translateX(-5px);}
	75%{transform:translateX(5px);}
}
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation:none!important;transition:none!important;}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
	.tp-wrap{flex-direction:column;height:auto;min-height:0;overflow:visible;}
	.tp-hero{flex:0 0 auto;padding:30px 26px 34px;gap:22px;}
	.tp-hero-body{max-width:none;}
	.tp-steps{display:none;}
	.tp-divider{margin-bottom:12px;}
	.tp-desc{margin-bottom:18px;}
	.tp-panel{
		flex:0 0 auto;
		overflow:visible;
		border-left:0;
		border-top:1px solid #E6EDFA;
		padding:26px 14px 34px;
	}
}
@media (max-width:760px){
	body.tp-has-bar{padding-top:118px;}
	.tp-inner{padding:6px 14px;gap:2px 12px;}
	.tp-nav{order:3;width:100%;justify-content:flex-start;padding-bottom:8px;}
	.tp-spacer{display:none;}
	.tp-panel{padding:26px 14px 34px;}
}
@media (max-width:560px){
	.tp-brand-name{font-size:12px;}
	.tp-brand-sub{display:none;}
	.tp-user{max-width:170px;}
	.tp-card{padding:22px 18px;border-radius:18px;}
	.tp-chips{gap:8px;}
	.tp-chips li{font-size:11.5px;padding:7px 11px;}
}
@media print{
	body{padding-top:0!important;background:#fff!important;}
	.tp-bar,.tp-hero,.tp-orb{display:none!important;}
}

/* ============================================================
   DASHBOARD UPLOAD BERKAS (kelas up-*) — minimalis modern,
   tema navy & emas, responsive.
   ============================================================ */
body.up-page{padding-top:76px;}

.up-wrap{
	/*seluruh tahap kini memakai kartu tunggal (up-grid-one) — lebar wrapper kembali 1150px*/
	max-width:1150px;
	margin:0 auto;
	padding:28px 22px 40px;
}
.up-head{margin-bottom:28px;}
.up-title{
	margin:0 0 8px;
	font-size:clamp(1.25rem,1rem + 1.2vw,1.7rem);
	font-weight:800;
	color:var(--navy-900);
	letter-spacing:-.01em;
}
.up-desc{
	margin:0 0 6px;
	max-width:72ch;
	font-size:14px;
	line-height:1.7;
	color:var(--muted);
}
.up-desc strong{color:var(--ink);}
.up-updated{
	margin:0;
	font-size:12px;
	font-weight:600;
	color:var(--gold-deep);
}

.up-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:18px;
}
/* ---------- Tahap 1: kartu tabel daftar berkas ---------- */
/*Tahap 1 kini satu kartu (up-grid-one — lebar sama dengan Tahap 2 & 3) berisi tabel;
  tinggi kartu mengikuti jumlah baris tabel, tidak ada elemen dengan tinggi tetap*/
.up-table-wrap{
	border:1px solid var(--line);
	border-radius:14px;
	background:#fff;
	overflow-x:auto; /*layar kecil: tabel digulir horizontal, tinggi tetap mengikuti baris*/
}
.up-table{
	width:100%;
	min-width:600px;
	border-collapse:collapse;
	font-size:13px;
	color:var(--ink);
}
.up-table thead th{
	padding:12px 16px;
	background:linear-gradient(135deg,var(--navy-800),var(--blue-600));
	color:#fff;
	font-size:10.5px;
	font-weight:800;
	letter-spacing:.07em;
	text-transform:uppercase;
	text-align:center; /*seluruh teks header kolom rata tengah*/
	white-space:nowrap;
}
.up-table thead th.col-no{width:56px;}
.up-table tbody td{
	padding:13px 16px;
	border-top:1px solid var(--line);
	vertical-align:middle;
}
.up-table tbody tr:first-child td{border-top:0;}
.up-table tbody tr:hover td{background:#FBFDFF;}
.up-table .col-no{text-align:center;font-weight:800;color:var(--muted);}
.up-table .col-nama{font-weight:700;line-height:1.35;}
.up-table .col-nama small{display:block;margin-top:2px;font-size:11px;font-weight:500;color:var(--muted);}
.up-table td.col-status{text-align:center;} /*badge status (Belum/Sudah Upload, Terverifikasi) rata tengah*/
.up-table td.col-aksi{text-align:center;}
/*pembungkus aksi: flex agar tombol rata tengah & rapi (td tetap table-cell)*/
.up-aksi{
	display:flex;
	align-items:center;
	justify-content:center; /*tombol aksi (Upload, Lihat Berkas) rata tengah*/
	gap:8px;
	flex-wrap:wrap;
}
/*tombol kecil kolom Aksi — turunan .tp-btn agar tema emas tetap konsisten*/
.tp-btn-sm{
	width:auto;
	height:34px;
	margin-top:0;
	padding:0 14px;
	border-radius:10px;
	gap:6px;
	font-size:12px;
}
.tp-btn-sm svg{width:14px;height:14px;}
.tp-btn-sm[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none;}
/*tombol lihat berkas — outline navy/biru selaras tema kartu*/
.up-btn-view{
	display:inline-flex;
	align-items:center;
	gap:6px;
	height:34px;
	padding:0 14px;
	border:1px solid var(--line);
	border-radius:10px;
	background:#fff;
	color:var(--navy-800);
	font-size:12px;
	font-weight:700;
	text-decoration:none;
	transition:border-color .15s,background .15s,color .15s;
}
.up-btn-view:hover{border-color:var(--blue-500);color:var(--blue-700);background:#FBFDFF;}
.up-btn-view:focus-visible{outline:3px solid rgba(17,86,198,.35);outline-offset:2px;}
.up-btn-view svg{width:14px;height:14px;}
@media (max-width:640px){
	.up-table thead th{padding:10px 12px;}
	.up-table tbody td{padding:11px 12px;}
}
/*Tahap 2 & 3: kartu tunggal — lebar tetap seperti sebelumnya (isi .up-wrap lama 1150px),
  tetap di tengah pada layar lebar*/
.up-grid-one{
	grid-template-columns:1fr;
	max-width:1106px;
	margin:0 auto;
}
/*alur tahapan vertikal: badge nomor + "Tahap N" berada di ATAS kartunya, rata tengah horizontal
  (Tahap 1 -> kartu berkas -> Tahap 2 -> Test PMB -> Tahap 3 -> Bukti Daftar Ulang)*/
.up-stage{
	display:flex;
	flex-direction:column;
	align-items:stretch;
	gap:14px; /*jarak badge tahap ke kartu di bawahnya*/
}
.up-stage + .up-stage{margin-top:34px;} /*jarak antar-tahap: kartu tahap sebelumnya -> badge tahap berikutnya*/
.up-stage-body{flex:1 1 auto;min-width:0;}
.up-stage-rail{
	flex:0 0 auto;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center; /*badge angka + teks tahap di tengah horizontal*/
	gap:8px;
}
.up-stage-num{
	width:36px;height:36px;
	flex:0 0 auto;
	border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	font-size:15px;
	font-weight:800;
	color:var(--gold-light);
	background:linear-gradient(135deg,var(--navy-800),var(--blue-600));
	box-shadow:0 8px 18px rgba(17,86,198,.30);
}
.up-stage-name{
	font-size:10.5px;
	font-weight:800;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--muted);
	white-space:nowrap;
}
.up-card{
	display:flex;
	flex-direction:column;
	background:#fff;
	border:1px solid var(--line);
	border-radius:18px;
	padding:18px 18px 20px;
	box-shadow:0 10px 28px rgba(10,42,99,.08);
	animation:tpFadeUp .5s ease both;
}
.up-card:nth-child(2){animation-delay:.06s;}
.up-card:nth-child(3){animation-delay:.12s;}
.up-card:nth-child(4){animation-delay:.18s;}
.up-card:nth-child(5){animation-delay:.24s;}

.up-card-head{
	display:flex;
	align-items:flex-start;
	gap:12px;
	margin-bottom:14px;
}
.up-ico{
	width:42px;height:42px;
	flex:0 0 auto;
	border-radius:12px;
	display:flex;align-items:center;justify-content:center;
	background:linear-gradient(135deg,var(--navy-800),var(--blue-600));
	box-shadow:0 8px 18px rgba(17,86,198,.30);
}
.up-ico svg{width:20px;height:20px;color:var(--gold-light);}
.up-card-title{flex:1 1 auto;min-width:0;}
.up-card-title h2{
	margin:0 0 2px;
	font-size:15px;
	font-weight:800;
	color:var(--ink);
	line-height:1.3;
}
.up-card-title p{
	margin:0;
	font-size:11.5px;
	color:var(--muted);
	line-height:1.45;
}
.up-payment-info{
	dis:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:3px 6px;
	width:fit-content;
	max-width:100%;
	margin:-2px auto 20px;
	padding:9px 11px;
	border:1px solid rgba(17,86,198,.22);
	border-left:4px solid var(--blue-600);
	border-radius:8px;
	background:#F4F8FF;
	color:var(--navy-800);
	font-size:15px;
	font-weight:600;
	line-height:1.5;
	text-align:center;
}
.up-payment-info strong{
	color:var(--blue-700);
	font-size:inherit;
	letter-spacing:.025em;
}
.up-payment-info span{font-weight:700;}
.up-badge{
	flex:0 0 auto;
	align-self:flex-start;
	font-size:10.5px;
	font-weight:800;
	letter-spacing:.06em;
	text-transform:uppercase;
	padding:5px 10px;
	border-radius:999px;
	white-space:nowrap;
}
.up-badge.ok{
	color:#2F5D33;
	background:#F1F7EF;
	border:1px solid #CDE3C8;
}
.up-badge.warn{
	color:#8C5A0F;
	background:#FDF6E7;
	border:1px solid rgba(242,178,27,.45);
}
.up-pdf{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:9px 16px;
	border-radius:10px;
	background:linear-gradient(135deg,#F9CD4C 0%,var(--gold) 55%,#E09E0F 100%);
	color:#132A57;
	font-size:12.5px;
	font-weight:700;
	text-decoration:none;
	box-shadow:0 6px 14px rgba(232,163,23,.35);
	transition:transform .15s,filter .15s;
}
.up-pdf:hover{transform:translateY(-1px);filter:brightness(1.04);color:#132A57;}
.up-pdf svg{width:15px;height:15px;}
.up-form{margin-top:auto;}
.up-drop{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:4px;
	padding:16px 12px;
	border:1.5px dashed rgba(17,86,198,.35);
	border-radius:14px;
	background:#FBFDFF;
	cursor:pointer;
	text-align:center;
	transition:border-color .15s,background .15s;
}
.up-drop:hover,.up-drop:focus-within{
	border-color:var(--blue-500);
	background:#fff;
}
.up-drop.chosen{
	border-color:var(--gold);
	background:rgba(242,178,27,.07);
}
.up-drop input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}
.up-drop svg{width:20px;height:20px;color:var(--blue-600);margin-bottom:2px;}
.up-drop-main{font-size:12.5px;font-weight:700;color:var(--ink);}
.up-drop-sub{font-size:11px;color:var(--muted);}
.up-filename{
	margin:8px 0 10px;
	font-size:11.5px;
	color:var(--muted);
	min-height:16px;
	word-break:break-all;
	text-align:center;
}
.up-filename.filled{color:var(--blue-700);font-weight:700;}
.up-form .tp-btn{margin-top:0;}

.up-foot{
	margin-top:26px;
	text-align:center;
	font-size:12px;
	color:var(--muted);
}
.up-foot strong{color:var(--ink);}

@media (max-width:980px){
	.up-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
	body.up-page{padding-top:96px;}
	.up-grid{grid-template-columns:1fr;}
	.up-wrap{padding:22px 14px 32px;}
	.up-stage{gap:12px;}
	.up-stage + .up-stage{margin-top:26px;}
	.up-stage-rail{justify-content:center;} /*badge tahap tetap di tengah pada layar kecil*/
	/*badge status lengkap panjang: pindah ke baris baru & teks boleh melipat agar tidak meluber*/
	.up-card-head{flex-wrap:wrap;}
	.up-badge{white-space:normal;}
}

/* ---------- Tahap 3: keterangan bukti daftar ulang ---------- */
.up-note{
	margin-top:12px;
	/* PATCH TAHAP-3 (2026-09-16): jarak antara kotak keterangan dan tabel bukti DU di bawahnya */
	margin-bottom:14px;
	padding:12px 14px;
	border:1px solid #CDEBD3;
	background:#F0FAF2;
	border-radius:10px;
	color:#1E6B33;
	font-size:13px;
	line-height:1.55;
}
.up-payment-info + .up-note{margin-top:0;}
.up-note strong{color:#15632A;}
.up-note-meta{display:block;margin-top:6px;color:#3D7C4D;font-size:12px;}

/* ---------- Tahap 3: pop up form upload bukti pembayaran ---------- */
.up-modal-overlay{
	position:fixed;
	inset:0;
	z-index:9999;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:20px;
	background:rgba(6,23,55,.62);
	backdrop-filter:blur(2px);
	overflow-y:auto;
}
.up-modal-overlay[hidden]{display:none;}
.up-modal{
	width:100%;
	max-width:460px;
	background:#fff;
	border-radius:14px;
	box-shadow:0 24px 60px rgba(6,23,55,.35);
	overflow:hidden;
}
.up-modal-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:16px 20px;
	background:var(--navy-900);
	color:#fff;
}
.up-modal-head h3{margin:0;font-size:16px;font-weight:800;letter-spacing:.01em;}
.up-modal-close{
	background:none;
	border:0;
	color:#fff;
	font-size:26px;
	line-height:1;
	cursor:pointer;
	padding:0 4px;
	border-radius:6px;
}
.up-modal-close:hover{color:var(--gold);}
.up-modal form{padding:20px;display:flex;flex-direction:column;gap:14px;}
.up-field{display:flex;flex-direction:column;gap:6px;}
.up-field-title{font-size:13px;font-weight:700;color:var(--ink);}
.up-field input[type="text"]{
	padding:10px 12px;
	border:1px solid var(--line);
	border-radius:10px;
	font-size:14px;
	color:var(--ink);
	background:var(--soft);
}
.up-field input[type="text"]:focus{
	outline:none;
	border-color:var(--blue-500);
	box-shadow:0 0 0 3px rgba(43,111,227,.18);
	background:#fff;
}
.up-field-hint{font-size:11px;color:var(--muted);}
/* ---------- Animasi progress bar upload (Tahap 1 & Tahap 3) ---------- */
.up-progress{display:none;flex-direction:column;gap:7px;margin-top:2px;}
.up-progress.aktif{display:flex;}
.up-progress-track{position:relative;height:8px;border-radius:999px;background:var(--line);overflow:hidden;}
.up-progress-fill{
	position:relative;
	height:100%;
	width:0%;
	border-radius:999px;
	background:linear-gradient(90deg,var(--blue-700),var(--blue-600),var(--blue-500));
	transition:width .25s ease;
}
/* efek garis/stripes berjalan agar progress terasa hidup walau transfer lambat */
.up-progress-fill::after{
	content:'';
	position:absolute;
	inset:0;
	background-image:linear-gradient(135deg,rgba(255,255,255,.28) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 75%,transparent 75%);
	background-size:16px 16px;
	animation:upProgressStripes .8s linear infinite;
}
@keyframes upProgressStripes{from{background-position:0 0;}to{background-position:16px 0;}}
.up-progress-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--muted);}
.up-progress-meta strong{color:var(--blue-700);font-weight:800;min-width:36px;text-align:right;}
/*toast hasil upload (XHR progress bar) harus tampil DI ATAS overlay modal (z-index 9999)*/
.swal2-container{z-index:10000 !important;}
.up-field .up-drop{padding:14px;text-align:center;}
.up-modal-actions{
	display:flex;
	justify-content:flex-end;
	gap:10px;
	margin-top:4px;
}
.up-modal-actions .tp-btn{margin-top:0;}
@media (max-width:520px){
	.up-modal form{padding:16px;}
	.up-modal-actions{flex-direction:column-reverse;}
	.up-modal-actions .tp-btn{width:100%;justify-content:center;}
}