/* Surat Penerimaan Magang — gaya dashboard & halaman publik. Brand magenta mengikuti kop surat. */
:root{
  --brand:#a2286e; --brand-dark:#7a1d54; --brand-soft:#fbf3f7; --brand-line:#efd9e6; --accent:#f2b705;
  --ink:#1f2937; --text:#374151; --muted:#6b7280; --line:#e5e7eb; --bg:#f7f7f9; --ok:#15803d; --ok-soft:#e7f6ec; --bad:#b91c1c; --bad-soft:#fdecec; --warn:#92400e; --warn-soft:#fef3c7; --r:8px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--text); background:var(--bg); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a{ color:var(--brand); text-decoration:none; } a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ color:var(--ink); margin:0; line-height:1.25; letter-spacing:normal; }
h1{ font-size:26px; font-weight:700; } h2{ font-size:18px; font-weight:700; } h3{ font-size:15px; font-weight:600; }
.muted{ color:var(--muted); } .small{ font-size:13px; } .mono{ font-family:ui-monospace,Menlo,Consolas,monospace; }

/* ---- Topbar admin ---- */
.topbar{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.topbar-in{ max-width:1180px; margin:0 auto; padding:0 20px; height:60px; display:flex; align-items:center; gap:28px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink); white-space:nowrap; }
.brand svg,.brand .logo-img{ width:32px; height:32px; object-fit:contain; }
.brand small{ display:block; font-size:11px; font-weight:500; color:var(--muted); line-height:1.1; }
.nav{ display:flex; gap:4px; flex:1; }
.nav a{ padding:8px 12px; border-radius:6px; color:var(--text); font-weight:500; font-size:14px; }
.nav a:hover{ background:var(--brand-soft); text-decoration:none; color:var(--brand-dark); }
.nav a.active{ background:var(--brand-soft); color:var(--brand-dark); font-weight:600; }
.userbox{ font-size:13px; color:var(--muted); display:flex; align-items:center; gap:12px; white-space:nowrap; }
.wrap{ max-width:1180px; margin:0 auto; padding:28px 20px 60px; }
.pagehead{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.pagehead p{ margin:4px 0 0; color:var(--muted); }

/* ---- Komponen ---- */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:6px; border:1px solid var(--line); background:#fff; color:var(--ink); font-weight:600; font-size:14px; cursor:pointer; font-family:inherit; line-height:1.3; }
.btn:hover{ text-decoration:none; border-color:var(--brand); color:var(--brand-dark); }
.btn-primary{ background:var(--brand); border-color:var(--brand); color:#fff; } .btn-primary:hover{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }
.btn-danger{ color:var(--bad); border-color:#f3c2c2; } .btn-danger:hover{ background:var(--bad-soft); border-color:var(--bad); color:var(--bad); }
.btn-sm{ padding:6px 11px; font-size:13px; }
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; }
.card + .card{ margin-top:18px; }
.card-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.grid{ display:grid; gap:18px; } .grid-2{ grid-template-columns:1fr 1fr; } .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); }
.stat{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; border-top:3px solid var(--brand); }
.stat .v{ font-size:30px; font-weight:800; color:var(--ink); line-height:1; } .stat .l{ font-size:13px; color:var(--muted); margin-top:8px; }
.stat.ok{ border-top-color:var(--ok); } .stat.bad{ border-top-color:var(--bad); } .stat.gold{ border-top-color:var(--accent); }
.badge{ display:inline-block; font-size:12px; font-weight:600; padding:3px 9px; border-radius:4px; white-space:nowrap; }
.badge-ok{ background:var(--ok-soft); color:var(--ok); } .badge-bad{ background:var(--bad-soft); color:var(--bad); } .badge-warn{ background:var(--warn-soft); color:var(--warn); } .badge-muted{ background:#eef0f3; color:var(--muted); }
.flash{ padding:12px 16px; border-radius:6px; margin-bottom:18px; font-size:14px; border:1px solid; }
.flash-ok{ background:var(--ok-soft); border-color:#bfe3cb; color:var(--ok); } .flash-warn{ background:var(--warn-soft); border-color:#f6dd9a; color:var(--warn); }
table{ width:100%; border-collapse:collapse; font-size:14px; }
th{ text-align:left; font-size:12px; font-weight:600; color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); background:#fafafb; }
td{ padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
tr:last-child td{ border-bottom:0; } tr:hover td{ background:#fcfcfd; }
.table-wrap{ overflow-x:auto; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
.field{ display:flex; flex-direction:column; gap:6px; } .field.full{ grid-column:1 / -1; }
label{ font-size:13px; font-weight:600; color:var(--ink); }
input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{ font-family:inherit; font-size:14px; padding:9px 12px; border:1px solid #d6d9df; border-radius:6px; background:#fff; color:var(--ink); width:100%; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(162,40,110,.12); }
.err{ color:var(--bad); font-size:12px; } .has-err input{ border-color:var(--bad); }
.hint{ font-size:12px; color:var(--muted); }
.fs-title{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); margin:6px 0 4px; grid-column:1 / -1; }
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.toolbar input[type=text]{ width:280px; } .toolbar select{ width:auto; }
.pager{ display:flex; gap:6px; margin-top:16px; } .pager a,.pager span{ padding:6px 11px; border:1px solid var(--line); border-radius:6px; font-size:13px; background:#fff; } .pager span.cur{ background:var(--brand); border-color:var(--brand); color:#fff; }
.dl{ display:grid; grid-template-columns:190px 1fr; gap:8px 14px; font-size:14px; } .dl dt{ color:var(--muted); } .dl dd{ margin:0; color:var(--ink); }
.actions{ display:flex; gap:10px; flex-wrap:wrap; }
.bars{ display:flex; align-items:flex-end; gap:8px; height:110px; padding-top:8px; }
.bar{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; font-size:11px; color:var(--muted); }
.bar i{ display:block; width:100%; background:var(--brand); border-radius:4px 4px 0 0; min-height:3px; }
.bar b{ color:var(--ink); font-weight:600; }
.qr-box{ display:flex; gap:16px; align-items:center; }
.qr-box img{ width:120px; height:120px; border:1px solid var(--line); border-radius:6px; padding:6px; background:#fff; }

/* ---- Login ---- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:var(--brand-soft); }
.login-card{ width:100%; max-width:400px; background:#fff; border:1px solid var(--brand-line); border-radius:12px; padding:32px; }
.login-card .brand{ margin-bottom:22px; }

/* ---- Publik / verifikasi ---- */
.pub-top{ background:var(--brand-dark); color:#fff; }
.pub-top .in{ max-width:760px; margin:0 auto; padding:18px 20px; display:flex; align-items:center; gap:12px; }
.pub-top .brand,.pub-top .brand small{ color:#fff; } .pub-top .brand small{ color:rgba(255,255,255,.75); }
.pub-wrap{ max-width:760px; margin:0 auto; padding:36px 20px 60px; }
.verdict{ border-radius:12px; padding:28px 28px 24px; border:1px solid; margin-bottom:20px; }
.verdict.ok{ background:var(--ok-soft); border-color:#bfe3cb; } .verdict.bad{ background:var(--bad-soft); border-color:#f3c2c2; } .verdict.none{ background:var(--warn-soft); border-color:#f6dd9a; }
.verdict .t{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; }
.verdict.ok .t{ color:var(--ok); } .verdict.bad .t{ color:var(--bad); } .verdict.none .t{ color:var(--warn); }
.verdict h1{ font-size:30px; display:flex; align-items:center; gap:12px; }
.verdict h1 .ico{ width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:20px; color:#fff; }
.verdict.ok .ico{ background:var(--ok); } .verdict.bad .ico{ background:var(--bad); } .verdict.none .ico{ background:#d97706; }
.verdict p{ margin:10px 0 0; }
.search-form{ display:flex; gap:10px; } .search-form input{ flex:1; font-size:16px; padding:12px 14px; }
.pub-foot{ max-width:760px; margin:0 auto; padding:0 20px 40px; font-size:13px; color:var(--muted); }

@media(max-width:900px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr 1fr; } .form-row{ grid-template-columns:1fr; } .dl{ grid-template-columns:1fr; gap:2px 0; } .dl dt{ margin-top:8px; }
  .nav{ overflow-x:auto; } .topbar-in{ gap:14px; } .userbox span{ display:none; }
}
@media(max-width:560px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } .toolbar input[type=text]{ width:100%; } .verdict h1{ font-size:24px; } }