/* Gaya tingkat halaman: header, navigasi, breadcrumb, kartu, form, tabel */
.site-head{position:sticky;top:0;z-index:80;background:var(--card);box-shadow:0 2px 10px rgba(31,45,61,.08)}
.head-in{max-width:1180px;margin:0 auto;padding:0 20px;min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);min-width:0;flex:none}
.brand-mark{width:42px;height:42px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font:800 20px/1 var(--font-judul);flex:none}
.brand-name{display:block;font-family:var(--font-judul);font-weight:800;font-size:22px;line-height:1.1}
.brand-sub{display:block;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:6px 14px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;color:var(--muted);white-space:nowrap}
.nav a:hover{background:var(--primary-soft);color:var(--primary-dark)}
.nav a.active,.nav a[aria-current="page"]{background:var(--primary);color:#fff}   /* penanda bagian aktif */
.nav-toggle{display:none;width:48px;height:48px;border:0;border-radius:14px;background:var(--primary-soft);cursor:pointer;place-items:center}
.nav-toggle span{display:block;width:22px;height:3px;border-radius:2px;background:var(--primary-dark);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:22px;height:3px;border-radius:2px;background:var(--primary-dark)}
.nav-toggle span::before{top:-7px}.nav-toggle span::after{top:7px}
@media(max-width:1100px){
  .nav{position:fixed;inset:68px 0 auto 0;background:var(--card);box-shadow:0 10px 20px rgba(31,45,61,.12);flex-direction:column;align-items:stretch;padding:12px 20px 20px;display:none;max-height:calc(100vh - 68px);overflow-y:auto}
  .nav a{border-radius:12px;min-height:48px;padding:10px 14px}
  .nav-open .nav{display:flex}
  .nav-toggle{display:grid}
}
@media(max-width:420px){.brand-sub{display:none}}

.page{padding:clamp(24px,4vw,48px) 0 64px}
.wrap-narrow{max-width:940px;margin:0 auto;padding:0 20px}
.breadcrumb{font-size:15px;color:var(--muted);margin-bottom:12px}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--primary-dark);text-decoration:underline}
.page h1{font-size:clamp(32px,5vw,48px);margin-bottom:8px}
.page .lede{font-size:18px;color:var(--muted);max-width:60ch}

.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px;margin-top:20px}
.card + .card{margin-top:20px}
.card h2{font-size:22px;color:var(--primary-dark);margin-bottom:10px}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.card-title{font-family:var(--font-judul);font-weight:700;font-size:clamp(22px,2.8vw,28px);line-height:1.2}
.badge{display:inline-block;font-size:14px;font-weight:800;padding:4px 12px;border-radius:999px;background:var(--primary-soft);color:var(--primary-dark);flex:none}
.badge--belum{background:#EEF2F6;color:var(--muted)}
.badge--draf{background:var(--sun);color:var(--text)}
.badge--terkirim{background:var(--ok);color:#fff}
.badge--warn{background:var(--bad);color:#fff}
.field{margin-top:16px}
.field label{display:block;font-weight:800;font-size:16px;color:var(--primary-dark);margin-bottom:6px}
.field input[type=text],.field input:not([type]),.field textarea,.field select{width:100%;min-height:48px;border:2px solid var(--line);border-radius:12px;background:var(--card);padding:10px 14px;font-size:16px}
.field textarea{min-height:90px;resize:vertical}
.field input:focus,.field textarea:focus{outline:3px solid rgba(47,128,237,.25);border-color:var(--primary)}
.field-hint{font-size:15px;color:var(--muted);margin-top:6px}
.field-hint.ok{color:#237A50}
.field-hint.err{color:var(--bad)}
.checklist{margin:14px 0 0;padding:0;list-style:none}
.checklist li{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.checklist li:last-child{border-bottom:0}
.checklist input{margin-top:4px;width:22px;height:22px;accent-color:var(--primary)}
.status-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.status-row button{min-height:48px;font-size:16px;font-weight:700;padding:8px 18px;border:2px solid var(--primary);border-radius:12px;background:var(--card);color:var(--primary-dark);cursor:pointer}
.status-row button[aria-pressed="true"]{background:var(--primary);color:#fff}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
table.rekap{width:100%;border-collapse:collapse;margin-top:16px}
table.rekap th,table.rekap td{border:1px solid var(--line);padding:10px 12px;vertical-align:top;text-align:left}
table.rekap th{background:var(--primary-soft);font-weight:800;color:var(--primary-dark)}
table.rekap td.tautan{max-width:280px;word-break:break-all}
.act-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);background:var(--text);color:#fff;padding:14px 22px;border-radius:14px;font-size:16px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:120;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.panduan{background:var(--sun-soft);border-radius:14px;padding:14px 16px;margin-top:10px}
.panduan strong{display:block;font-weight:800;color:#8A5A00;margin-bottom:4px}
.panduan p{margin:0}

.id-grid{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--line);border-radius:14px;overflow:hidden;margin:16px 0}
.id-grid > div{display:grid;grid-template-columns:120px 1fr;border-bottom:1px solid var(--line)}
.id-grid > div:nth-child(odd){border-right:1px solid var(--line)}
.id-grid > div:nth-last-child(-n+2){border-bottom:0}
.id-grid dt{padding:10px 12px;background:var(--primary-soft);font-weight:800;color:var(--primary-dark);font-size:15px}
.id-grid dd{margin:0;padding:10px 12px;min-height:44px;word-break:break-word}
@media(max-width:620px){.id-grid{grid-template-columns:1fr}.id-grid > div{grid-template-columns:110px 1fr}.id-grid > div:nth-child(odd){border-right:0}.id-grid > div:nth-last-child(-n+2){border-bottom:1px solid var(--line)}.id-grid > div:last-child{border-bottom:0}}

@media print{
  .site-head,.breadcrumb,.act-row,.no-print,.toast{display:none!important}
  body{background:#fff}
  .card{box-shadow:none;border:1px solid #999;break-inside:avoid}
  .page{padding:0}
}