/* Survey Pelatihan FTTH
   Identitas visual: kode warna 12 core fiber optik (TIA-598).
   Tiap bagian form = satu "tube" berwarna; bintang = kuning patch cord single-mode. */

:root {
  color-scheme: light;
  --bg: #E8EDEC;
  --surface: #FFFFFF;
  --ink: #13232C;
  --muted: #55656D;
  --line: #D3DBDA;
  --line-strong: #AEBBBA;
  --blue: #1D63C6;
  --blue-dark: #154E9E;
  --blue-soft: #DCE7F7;
  --yellow: #F2B81B;
  --star-off: #C9D2D1;
  --green: #1D8452;
  --green-soft: #DFF1E6;
  --red: #B9332A;
  --red-soft: #FBE6E3;
  --amber-soft: #FFF2CF;

  /* 12 warna core fiber */
  --f1: #1F6FD1;  /* biru */
  --f2: #EE8318;  /* oranye */
  --f3: #2C9A55;  /* hijau */
  --f4: #8A5A3A;  /* coklat */
  --f5: #7C8A92;  /* abu-abu (slate) */
  --f6: #F4F4F2;  /* putih */
  --f7: #D23B2F;  /* merah */
  --f8: #1E1E1E;  /* hitam */
  --f9: #F2C21C;  /* kuning */
  --f10: #7A4AB5; /* ungu */
  --f11: #EC8DB0; /* merah muda */
  --f12: #32BFC6; /* tosca */

  --radius: 12px;
  --radius-sm: 8px;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-underline-offset: 2px; }
a:hover { color: var(--blue-dark); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1rem; font-weight: 700; margin-top: 1.25em; }
p { margin: 0 0 1em; }
code { font-size: .9em; background: var(--bg); padding: 1px 5px; border-radius: 4px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }

/* ---------- Strip 12 core ---------- */
.fiber { display: flex; height: 8px; }
.fiber i { flex: 1; }
.fiber i:nth-child(1) { background: var(--f1); }
.fiber i:nth-child(2) { background: var(--f2); }
.fiber i:nth-child(3) { background: var(--f3); }
.fiber i:nth-child(4) { background: var(--f4); }
.fiber i:nth-child(5) { background: var(--f5); }
.fiber i:nth-child(6) { background: var(--f6); }
.fiber i:nth-child(7) { background: var(--f7); }
.fiber i:nth-child(8) { background: var(--f8); }
.fiber i:nth-child(9) { background: var(--f9); }
.fiber i:nth-child(10) { background: var(--f10); }
.fiber i:nth-child(11) { background: var(--f11); }
.fiber i:nth-child(12) { background: var(--f12); }

/* ---------- Halaman publik ---------- */
.wrap { max-width: 640px; margin: 0 auto; padding: 0 16px; }
.wrap-wide { max-width: 1120px; }
.wrap-narrow { max-width: 420px; }

.hero { padding: 36px 0 20px; }
.hero .org { font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.hero h1 { margin-bottom: 12px; }
.lead { font-size: 1.0625rem; color: #33444C; max-width: 60ch; }

.batch-tag {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--ink); color: #fff;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-top: 4px;
}
.batch-tag strong { font-size: 1.0625rem; }
.batch-tag span { color: #C3CFD3; font-size: .9375rem; }

/* Bagian form sebagai tube berwarna */
.sec {
  --c: var(--f1);
  background: var(--surface);
  border-radius: var(--radius);
  border-left: 8px solid var(--c);
  padding: 20px 18px 8px;
  margin: 0 0 16px;
}
.sec-head { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; margin-bottom: 16px; }
.core {
  flex: none;
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--c); color: #fff;
  font-size: .9375rem; font-weight: 800;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.35);
}
.sec-note { color: var(--muted); font-size: .9375rem; margin: -8px 0 8px; padding: 0; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

.field { margin-bottom: 18px; }
.field > label, .field > .label { display: block; font-weight: 700; margin-bottom: 6px; }
.opt { font-weight: 500; color: var(--muted); font-size: .875rem; margin-left: 4px; }
.hint { color: var(--muted); font-size: .875rem; margin: -2px 0 8px; }

input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=search], input[type=date], input[type=number], select, textarea {
  width: 100%;
  font: inherit; font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  min-height: 46px;
  transition: border-color .15s;
}
textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2355656D' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 36px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
[aria-invalid="true"] { border-color: var(--red) !important; }
.field-error { color: var(--red); font-size: .875rem; font-weight: 600; margin: 6px 0 0; }
.counter { color: var(--muted); font-size: .8125rem; margin: 4px 0 0; text-align: right; min-height: 1.2em; }

.grid-2 { display: grid; gap: 0 14px; }
@media (min-width: 560px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* Bintang */
.rate { padding: 14px 0 12px; border-top: 1px dashed var(--line); }
.rate:first-of-type { border-top: 0; padding-top: 4px; }
.rate legend, .nps-wrap legend { float: left; width: 100%; font-weight: 700; }
.rate legend + *, .nps-wrap legend + * { clear: both; }
.rate legend small { display: block; font-weight: 500; color: var(--muted); font-size: .875rem; }
.rate-row { display: flex; align-items: center; gap: 10px; padding-top: 6px; }
.stars-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.stars-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars-input label {
  font-size: 2rem; line-height: 1;
  color: var(--star-off);
  padding: 3px 3px;
  cursor: pointer;
  transition: color .12s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.stars-input input:checked ~ label { color: var(--yellow); }
@media (hover: hover) {
  .stars-input:hover input ~ label { color: var(--star-off); }
  .stars-input input + label:hover, .stars-input input + label:hover ~ label { color: var(--yellow); }
}
.stars-input input:focus-visible + label { outline: 3px solid var(--blue); outline-offset: 0; border-radius: 6px; }
.stars-input input:checked + label { transform: scale(1.08); }
.rate-val { font-weight: 700; color: var(--muted); font-size: .9375rem; flex: 1; min-width: 0; line-height: 1.25; }
.rate.has-error .rate-val { color: var(--red); }
.rate.has-error .stars-input label { color: #E8B4AE; }
.rate.has-error input:checked ~ label { color: var(--yellow); }

/* NPS 0-10 */
.nps-wrap legend { margin-bottom: 10px; }
.nps { display: grid; grid-template-columns: repeat(11, 1fr); gap: 5px; }
.nps input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nps label {
  display: grid; place-items: center;
  height: 46px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
  background: #fff;
  -webkit-tap-highlight-color: transparent;
}
.nps input:checked + label { background: var(--blue); border-color: var(--blue); color: #fff; }
.nps input:focus-visible + label { outline: 3px solid var(--blue); outline-offset: 2px; }
.nps-wrap.has-error .nps label { border-color: #E8B4AE; }
.nps-ends { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .8125rem; margin: 6px 0 16px; }
@media (max-width: 459px) {
  .nps { grid-template-columns: repeat(6, 1fr); }
}

/* Pilihan materi */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  font-size: .9375rem; font-weight: 600;
  cursor: pointer; line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
}
.chips input:checked + label { background: var(--green-soft); border-color: var(--green); color: #0F4D2E; }
.chips input:checked + label::before { content: "✓"; font-weight: 800; color: var(--green); }
.chips input:focus-visible + label { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Foto */
.photo-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.field > .photo-pick {
  display: flex; font-weight: 500; margin: 0; align-items: center; gap: 14px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 14px;
  color: var(--muted); font-size: .9375rem;
  cursor: pointer;
  background: #FAFBFB;
}
.photo-pick:hover { border-color: var(--blue); }
.photo-input:focus-visible + .photo-pick { outline: 3px solid var(--blue); outline-offset: 2px; }
.photo-preview { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }

/* Checkbox */
.check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--blue); }

/* Tombol */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 700; font-size: .9375rem;
  padding: 10px 16px; min-height: 42px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line-strong);
  background: #fff; color: var(--ink);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.btn:hover { border-color: var(--ink); color: var(--ink); }
.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.btn-danger { color: var(--red); border-color: #E3B3AD; }
.btn-danger:hover { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.btn-sm { padding: 6px 12px; min-height: 36px; font-size: .875rem; }
.btn-block { width: 100%; padding: 15px; font-size: 1.0625rem; border-radius: var(--radius); }
.btn-link { background: none; border: 0; color: var(--blue); font: inherit; font-weight: 600; cursor: pointer; padding: 6px 4px; }
.privacy { color: var(--muted); font-size: .8125rem; text-align: center; margin: 12px 0 40px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Pesan */
.alert { border-radius: var(--radius-sm); padding: 12px 14px; margin: 0 0 16px; font-weight: 600; font-size: .9375rem; }
.alert-error { background: var(--red-soft); color: #7D1F18; border-left: 5px solid var(--red); }
.alert-success { background: var(--green-soft); color: #0F4D2E; border-left: 5px solid var(--green); }
.alert-info { background: var(--amber-soft); color: #5C4300; border-left: 5px solid var(--yellow); }
.alert a { color: inherit; }

.notice { background: var(--surface); border-radius: var(--radius); padding: 22px 20px; margin-bottom: 40px; }

.site-foot { color: var(--muted); font-size: .8125rem; padding: 8px 0 32px; text-align: center; }

/* ---------- Terima kasih ---------- */
.thanks { text-align: center; padding: 56px 0 32px; }
.thanks .lead { margin-left: auto; margin-right: auto; }
.ring {
  width: 132px; height: 132px; margin: 0 auto 28px;
  border-radius: 50%;
  background: conic-gradient(var(--f1) 0 30deg, var(--f2) 0 60deg, var(--f3) 0 90deg, var(--f4) 0 120deg,
    var(--f5) 0 150deg, var(--f6) 0 180deg, var(--f7) 0 210deg, var(--f8) 0 240deg,
    var(--f9) 0 270deg, var(--f10) 0 300deg, var(--f11) 0 330deg, var(--f12) 0 360deg);
  display: grid; place-items: center;
  animation: ring-in .9s cubic-bezier(.2, .8, .2, 1) both;
}
.ring span {
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--bg);
  display: grid; place-items: center;
  font-size: 2.6rem; font-weight: 800; color: var(--green);
}
@keyframes ring-in { from { transform: rotate(-200deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }

/* ---------- Dinding testimoni ---------- */
.is-wall .hero { padding-bottom: 8px; }
.filter-note { color: var(--muted); }
.wall-score { display: flex; align-items: center; gap: 14px; margin: 8px 0 24px; color: var(--muted); font-size: .9375rem; line-height: 1.35; }
.wall-score .big { font-size: 2.75rem; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; }
.wall { columns: 1; column-gap: 16px; }
@media (min-width: 640px) { .wall { columns: 2; } }
@media (min-width: 980px) { .wall { columns: 3; } }
.t-card {
  break-inside: avoid;
  margin: 0 0 16px;
  background: var(--surface);
  border-radius: var(--radius);
  border-top: 6px solid var(--f1);
  padding: 18px 20px 18px;
}
.t-card:nth-child(12n+2) { border-top-color: var(--f2); }
.t-card:nth-child(12n+3) { border-top-color: var(--f3); }
.t-card:nth-child(12n+4) { border-top-color: var(--f4); }
.t-card:nth-child(12n+5) { border-top-color: var(--f5); }
.t-card:nth-child(12n+6) { border-top-color: var(--line-strong); }
.t-card:nth-child(12n+7) { border-top-color: var(--f7); }
.t-card:nth-child(12n+8) { border-top-color: var(--f8); }
.t-card:nth-child(12n+9) { border-top-color: var(--f9); }
.t-card:nth-child(12n+10) { border-top-color: var(--f10); }
.t-card:nth-child(12n+11) { border-top-color: var(--f11); }
.t-card:nth-child(12n+12) { border-top-color: var(--f12); }
.t-card blockquote { margin: 8px 0 16px; font-size: 1.0625rem; line-height: 1.6; }
.t-card blockquote p { margin: 0; }
.t-card.is-featured blockquote { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.005em; }
.t-card figcaption { display: flex; align-items: center; gap: 12px; font-size: .875rem; line-height: 1.35; }
.t-card figcaption b { display: block; font-size: .9375rem; }
.t-card .who, .t-card .when { display: block; color: var(--muted); }
.avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.avatar-txt { display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 800; font-size: .9375rem; }

.stars { color: var(--yellow); letter-spacing: 1px; white-space: nowrap; }
.stars .off { color: var(--star-off); }

.pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 32px; }
.pager a { min-width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface); text-decoration: none; font-weight: 700; color: var(--ink); }
.pager a[aria-current] { background: var(--ink); color: #fff; }

.is-embed { background: transparent; }
.is-embed .wrap { padding-top: 8px; }

/* ---------- Installer ---------- */
.checks { list-style: none; padding: 0; margin: 0 0 16px; }
.checks li { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.checks li span { font-weight: 800; width: 1.2em; }
.checks .ok span { color: var(--green); }
.checks .bad span { color: var(--red); }
.checks .warn span { color: #B07C00; }

/* ---------- Admin ---------- */
.is-admin { background: #EEF2F1; }
.admin-bar { background: var(--ink); color: #fff; }
.admin-bar .fiber { height: 5px; }
.admin-bar-in { max-width: 1120px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 20px; min-height: 58px; flex-wrap: wrap; }
.brand { color: #fff; text-decoration: none; font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.01em; }
.brand span { color: var(--f9); }
.brand:hover { color: #fff; }
.admin-nav { display: flex; gap: 2px; overflow-x: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.admin-nav a { color: #C9D4D8; text-decoration: none; font-weight: 600; font-size: .9375rem; padding: 18px 10px 16px; border-bottom: 3px solid transparent; white-space: nowrap; }
.admin-nav a:hover { color: #fff; }
.admin-nav a[aria-current] { color: #fff; border-bottom-color: var(--f9); }
.admin-nav a:nth-last-child(2) { margin-left: auto; }
@media (max-width: 699px) {
  .admin-bar-in { gap: 0; padding-top: 12px; }
  .admin-nav { flex: 1 1 100%; margin: 0 -6px; }
  .admin-nav a { padding: 12px 8px 10px; }
  .tile b { font-size: 1.6rem; }
}
.count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--f2); color: #fff; font-size: .75rem; line-height: 20px; text-align: center; }

.container { max-width: 1120px; margin: 0 auto; padding: 24px 16px 48px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; }
.page-head h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 4px; }
.page-head p { margin: 0; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-form select { width: auto; min-width: 200px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--surface); border-radius: var(--radius); padding: 16px 18px; border-left: 6px solid var(--f1); }
.tile:nth-child(2) { border-left-color: var(--f9); }
.tile:nth-child(3) { border-left-color: var(--f3); }
.tile:nth-child(4) { border-left-color: var(--f2); }
.tile b { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.tile span { display: block; color: var(--muted); font-size: .875rem; line-height: 1.35; margin-top: 4px; }

.grid-panels { display: grid; gap: 16px; margin-bottom: 16px; }
@media (min-width: 900px) { .grid-panels { grid-template-columns: 1fr 1fr; align-items: start; } }
@media (min-width: 900px) { .grid-settings { grid-template-columns: 3fr 2fr; } }
.panel { background: var(--surface); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.grid-panels > .panel, .grid-panels > div > .panel:last-child { margin-bottom: 0; }
.grid-panels > div > .panel { margin-bottom: 16px; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.panel.empty { text-align: center; padding: 40px 20px; }

.bar-row { display: grid; grid-template-columns: minmax(110px, 38%) 1fr 44px; gap: 10px; align-items: center; padding: 6px 0; font-size: .9375rem; }
.bar-row-wide { grid-template-columns: minmax(140px, 52%) 1fr 36px; }
.bar { height: 12px; background: #E9EEEE; border-radius: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--blue); border-radius: 6px; }
.bar-yellow i { background: var(--yellow); }
.bar-green i { background: var(--green); }
.bar-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.nps-split { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: #E9EEEE; margin: 8px 0; }
.nps-split i, .legend i { display: block; }
.prom { background: var(--green); }
.pass { background: var(--line-strong); }
.det { background: var(--red); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .875rem; color: var(--muted); margin: 0; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }

.quote-list { list-style: none; margin: 0; padding: 0; }
.quote-list li { padding: 12px 0; border-top: 1px solid var(--line); }
.quote-list li:first-child { border-top: 0; padding-top: 4px; }
.quote-list p { margin: 4px 0; }
.quote-list small { color: var(--muted); }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table th { text-align: left; font-weight: 600; color: var(--muted); font-size: .8125rem; padding: 8px 10px; border-bottom: 1.5px solid var(--line); }
.table td { padding: 10px; border-bottom: 1px solid var(--line); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: center; }
.filters select, .filters input { width: auto; flex: 1 1 180px; min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
.filters input[type=search] { flex: 2 1 240px; }

.resp-list { display: grid; gap: 10px; margin-bottom: 16px; }
.resp { background: var(--surface); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 12px; }
@media (min-width: 800px) { .resp { grid-template-columns: 1fr auto; align-items: start; } }
.resp-top { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.resp-name { font-weight: 800; font-size: 1.0625rem; color: var(--ink); text-decoration: none; }
.resp-name:hover { text-decoration: underline; }
.resp-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: .875rem; margin: 4px 0 6px; align-items: center; }
.resp-text { margin: 0; color: #2A3A42; }
.resp-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
@media (min-width: 800px) { .resp-list .resp-actions { justify-content: flex-end; max-width: 300px; } }

.badge { display: inline-block; font-size: .75rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; line-height: 1.6; vertical-align: middle; }
.badge-pending { background: var(--amber-soft); color: #6B4E00; }
.badge-approved { background: var(--green-soft); color: #0F4D2E; }
.badge-hidden, .badge-muted { background: #E7ECEC; color: var(--muted); }
.badge-feat { background: var(--ink); color: #fff; }

.status-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--muted); font-size: .9375rem; }
.big-quote { margin: 8px 0 20px; padding: 14px 16px; border-left: 5px solid var(--f9); background: #FBFAF4; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 1.0625rem; }
.ratings, .kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; align-items: center; }
.ratings dt, .kv dt { color: var(--muted); font-size: .9375rem; }
.ratings dd, .kv dd { margin: 0; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.tag-list li { background: var(--green-soft); color: #0F4D2E; border-radius: 999px; padding: 3px 12px; font-size: .875rem; font-weight: 600; }
.detail-photo { width: 160px; height: 160px; object-fit: cover; border-radius: var(--radius); }

.form-grid { display: grid; gap: 0 16px; }
@media (min-width: 700px) { .form-grid { grid-template-columns: 1fr 1fr; } .span-2 { grid-column: span 2; } }
.form-actions { display: flex; gap: 12px; align-items: center; }

.batch-list { display: grid; gap: 10px; }
.batch { background: var(--surface); border-radius: var(--radius); padding: 16px 18px; border-left: 6px solid var(--f3); display: grid; gap: 12px; }
.batch.is-closed { border-left-color: var(--line-strong); }
@media (min-width: 800px) { .batch { grid-template-columns: 1fr auto; } }
.batch h3 { margin: 0 0 4px; font-size: 1.0625rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.batch p { margin: 0 0 6px; font-size: .9375rem; }
.batch-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.batch-actions form { display: flex; gap: 6px; flex-wrap: wrap; }
.copy-line { display: flex; gap: 6px; margin-top: 6px; max-width: 560px; }
.copy-line input { min-height: 36px; padding: 6px 10px; font-size: .875rem; color: var(--muted); }

/* ---------- Poster QR ---------- */
.is-poster { background: #fff; }
.poster { max-width: 560px; margin: 0 auto; padding: 32px 20px 40px; text-align: center; }
.poster .org { font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.poster h1 { font-size: clamp(1.75rem, 6vw, 2.4rem); }
.poster-batch { font-size: 1.25rem; font-weight: 700; }
.poster-batch span { font-size: 1rem; font-weight: 500; color: var(--muted); }
.qr { width: min(360px, 80vw); margin: 16px auto 20px; padding: 14px; border: 8px solid var(--ink); border-radius: 20px; }
.qr svg { width: 100%; height: auto; display: block; }
.poster-step { font-size: 1.0625rem; max-width: 34ch; margin: 0 auto 8px; }
.poster-link { font-weight: 700; font-size: 1.0625rem; word-break: break-all; color: var(--blue-dark); }
.poster-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 20px; }
#code::placeholder { text-transform: none; }

/* ---------- Cetak ---------- */
@media print {
  .no-print, .site-foot { display: none !important; }
  body, .is-admin { background: #fff; }
  .container { padding: 0; max-width: none; }
  .panel, .tile { border: 1px solid #ccc; break-inside: avoid; }
  .grid-panels { grid-template-columns: 1fr 1fr; }
  a { color: inherit; text-decoration: none; }
  .is-poster .fiber { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bar i, .nps-split i, .tile, .fiber i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}