/* pages.css - gaya halaman publik: beranda, profil (STEP 5) */

/* ---------- Hero ---------- */
.hero { padding-block: var(--sp-7); border-bottom: 1px solid var(--c-line); }
.hero__grid { display: grid; gap: var(--sp-6); align-items: center; }
.hero h1 { margin: 0 0 var(--sp-3); font-size: var(--fs-3xl); }
.hero__lead { margin: 0 0 var(--sp-5); max-width: 56ch; font-size: var(--fs-lg); color: var(--c-muted); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero__mark { /* bingkai tipis dengan sudut aksen di sekitar logo */
  position: relative; justify-self: center; display: grid; place-items: center;
  width: min(220px, 60vw); aspect-ratio: 1; background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
}
.hero__mark::before, .hero__mark::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--c-accent); }
.hero__mark::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.hero__mark::after { right: -6px; bottom: -6px; border-left: 0; border-top: 0; }
.hero__mark img { width: 72%; height: auto; }
@media (min-width: 800px) {
  .hero { padding-block: var(--sp-8); }
  .hero__grid { grid-template-columns: 1.4fr 1fr; }
  .hero__mark { justify-self: end; width: min(280px, 100%); }
}

/* ---------- Statistik ---------- */
.stats { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.stat { background: var(--c-surface); border: 1px solid var(--c-line); border-left: 3px solid var(--c-accent); border-radius: var(--r-sm); padding: var(--sp-4) var(--sp-5); }
.stat__value { display: block; font-size: var(--fs-3xl); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--c-navy-900); font-variant-numeric: tabular-nums; }
.stat__label { display: block; margin-top: var(--sp-2); font-weight: 600; }
.stat__note { display: block; font-size: var(--fs-sm); color: var(--c-muted); }

/* ---------- Judul bagian ---------- */
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.section-head h2 { margin: 0; }
.text-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; }

/* ---------- Sambutan ---------- */
.greeting { display: grid; gap: var(--sp-5); }
.greeting__who { text-align: center; }
.greeting__avatar { display: grid; place-items: center; width: 96px; height: 96px; margin: 0 auto var(--sp-3); border-radius: var(--r-lg); background: var(--c-navy-900); color: #fff; font-size: 2.5rem; font-weight: 700; }
.greeting__name { margin: 0; font-weight: 700; color: var(--c-navy-900); }
.greeting__role { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }
.greeting__text p { margin: 0 0 var(--sp-3); max-width: 68ch; }
@media (min-width: 800px) { .greeting { grid-template-columns: 220px 1fr; align-items: start; } }

/* ---------- Berita ---------- */
.news-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.news-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.news-card h3 { margin: 0; font-size: var(--fs-lg); }
.news-card p { margin: 0; color: var(--c-muted); }
.news-card__meta { font-size: var(--fs-sm); color: var(--c-muted); }

/* ---------- Tautan cepat ---------- */
.quick { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.quick a { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--c-navy-900); font-weight: 600; }
.quick .ds-icon { color: var(--c-accent-ink); }

/* ---------- Halaman profil ---------- */
.page-head { padding-block: var(--sp-6); border-bottom: 1px solid var(--c-line); }
.page-head h1 { margin: 0 0 var(--sp-2); }
.page-head p { margin: 0; max-width: 62ch; color: var(--c-muted); font-size: var(--fs-lg); }
.profile-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .profile-grid { grid-template-columns: 1fr 1fr; } .profile-grid .span-2 { grid-column: 1 / -1; } }
.profile-grid h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-xl); }
.dl { display: grid; gap: var(--sp-3); margin: 0; }
.dl div { display: grid; gap: 0.1rem; }
.dl dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.dl dd { margin: 0; overflow-wrap: anywhere; }
.is-missing { color: var(--c-warning); background: var(--c-warning-bg); padding: 0 0.4rem; border-radius: 4px; font-size: var(--fs-sm); font-weight: 600; }
.mission { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--sp-2); }
.vision { margin: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--c-navy-900); border-left: 3px solid var(--c-accent); padding-left: var(--sp-4); }
.history-card > h2 { margin-bottom: var(--sp-4); }
.history-card p { margin: 0 0 var(--sp-4); line-height: 1.8; color: var(--c-text, inherit); }
.history-card p:last-child { margin-bottom: 0; }
.history-card h3 { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-lg); line-height: 1.35; }
.history-card h3:first-child { margin-top: 0; }
.history-list { margin: 0 0 var(--sp-4); padding-left: 1.35rem; display: grid; gap: var(--sp-2); line-height: 1.7; }
.history-list li { padding-left: .2rem; }


/* ---------- Footer: blok kontak ---------- */
.ds-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.ds-footer__contact li { display: flex; gap: var(--sp-2); align-items: flex-start; }
.ds-footer__contact .ds-icon { width: 18px; height: 18px; margin-top: 3px; color: var(--c-accent); }

/* ---------- STEP 5b: filter, pagination, artikel, guru, error ---------- */
.ds-page { padding-block: var(--sp-5); }

.filters { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.filters .ds-field { margin: 0; }
@media (min-width: 720px) { .filters { grid-template-columns: 2fr 1fr auto; align-items: end; } }
.result-info { margin: 0 0 var(--sp-4); color: var(--c-muted); font-size: var(--fs-sm); }

.ds-pagination ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: var(--sp-6) 0 0; padding: 0; }
.ds-pagination a, .ds-pagination span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 0.8rem;
  border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-navy-900); text-decoration: none;
}
.ds-pagination a:hover { border-color: var(--c-navy-900); }
.ds-pagination .is-current { background: var(--c-navy-900); border-color: var(--c-navy-900); color: #fff; font-weight: 700; }
.ds-pagination .is-disabled { opacity: 0.5; }
.ds-pagination .is-gap { border-color: transparent; background: none; min-width: 24px; padding: 0; }

.news-card h3 a { color: var(--c-navy-900); text-decoration: none; }
.news-card h3 a:hover { color: var(--c-accent-ink); text-decoration: underline; }

.crumbs { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--c-muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--c-line-strong); }
.crumbs [aria-current] { color: var(--c-text); }

.article { max-width: 72ch; margin-inline: auto; }
.article h1 { font-size: var(--fs-2xl); margin: var(--sp-2) 0 var(--sp-3); }
.article__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-line); font-size: var(--fs-sm); color: var(--c-muted); }
.article__body p { margin: 0 0 var(--sp-4); font-size: var(--fs-lg); line-height: 1.75; overflow-wrap: anywhere; }
.related { margin-top: var(--sp-7); }

.people { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.person { text-align: center; }
.person__avatar { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto var(--sp-3); border-radius: 50%; background: var(--c-bg); border: 1px solid var(--c-line); color: var(--c-navy-900); font-size: 1.6rem; font-weight: 700; }
.person h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-base); }
.person p { margin: 0 0 var(--sp-2); color: var(--c-muted); font-size: var(--fs-sm); }

.error-page { text-align: center; padding-block: var(--sp-7); }
.error-page__code { margin: 0; font-size: clamp(4rem, 3rem + 8vw, 7rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--c-navy-900); }
.error-page__code::after { content: ""; display: block; width: 64px; height: 4px; margin: var(--sp-3) auto 0; background: var(--c-accent); }
.error-page h1 { font-size: var(--fs-xl); margin: var(--sp-4) 0 var(--sp-2); }
.error-page p { color: var(--c-muted); margin: 0 0 var(--sp-5); }

/* Gambar sampul berita (STEP 7) */
.news-card__img { display: block; margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-2); aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--c-bg); }
.news-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.article__cover { margin: 0 0 var(--sp-5); }
.article__cover img { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--c-line); }


/* ---------- STEP 9: Agenda sekolah ---------- */
.agenda-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.agenda-card { display: grid; grid-template-columns: 76px 1fr; gap: var(--sp-4); align-items: start; }
.agenda-card__date { display: grid; place-items: center; align-content: center; min-height: 76px; padding: var(--sp-2); border-radius: var(--r-md); background: var(--c-bg); border: 1px solid var(--c-line); text-align: center; }
.agenda-card__date strong { font-size: var(--fs-2xl); line-height: 1; color: var(--c-navy-900); }
.agenda-card__date span { margin-top: var(--sp-1); font-size: 0.7rem; color: var(--c-muted); }
.agenda-card__body { min-width: 0; }
.agenda-card h3 { margin: var(--sp-2) 0 var(--sp-2); font-size: var(--fs-lg); }
.agenda-card p { margin: 0 0 var(--sp-3); color: var(--c-muted); }
.agenda-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--c-muted); }
.agenda-card__meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.agenda-list { display: grid; gap: var(--sp-4); }
.agenda-public-card { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) { .agenda-public-card { grid-template-columns: 110px 1fr; } }
.agenda-public-card__date { text-align: center; padding: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-bg); }
.agenda-public-card__date strong { display: block; font-size: var(--fs-2xl); color: var(--c-navy-900); }
.agenda-public-card__date span { display: block; font-size: var(--fs-sm); color: var(--c-muted); }
.agenda-public-card h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-xl); }
.agenda-public-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); color: var(--c-muted); font-size: var(--fs-sm); }
.agenda-public-card__meta span { display: inline-flex; align-items: center; gap: 0.3rem; }

/* STEP 10 — Galeri */
.gallery-public-grid,.gallery-admin-grid,.gallery-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}
.gallery-public-card,.gallery-admin-card,.gallery-item-admin{overflow:hidden;border:1px solid var(--line,#dbe2ea);border-radius:var(--radius-lg,14px);background:#fff;box-shadow:0 4px 18px rgba(10,31,68,.06)}
.gallery-public-card{text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease}.gallery-public-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(10,31,68,.10)}
.gallery-public-card img,.gallery-admin-card>img,.gallery-item-admin img,.gallery-photo img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.gallery-public-card>div,.gallery-admin-card__body{padding:var(--sp-4)}.gallery-public-card h2,.gallery-admin-card h2{margin:0 0 var(--sp-2);font-size:1.05rem}.gallery-public-card p,.gallery-admin-card p{margin:0 0 var(--sp-2);color:var(--muted,#5d6878)}.gallery-admin-card__body .ds-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}.gallery-admin-card__body form{margin:0}.gallery-item-admin{padding-bottom:var(--sp-3)}.gallery-item-admin form{padding:var(--sp-3) var(--sp-3) 0}.gallery-placeholder{display:grid;place-items:center;aspect-ratio:16/9;background:#f3f5f8;color:#687386}.gallery-detail-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.gallery-photo{display:block;border-radius:var(--radius-md,10px);overflow:hidden;background:#f3f5f8}.gallery-photo:hover img{transform:scale(1.02)}.gallery-photo img{transition:transform .18s ease}
@media (max-width:900px){.gallery-public-grid,.gallery-admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-detail-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:600px){.gallery-public-grid,.gallery-admin-grid,.gallery-detail-grid{grid-template-columns:1fr}.gallery-admin-card__body .ds-actions{flex-direction:column}.gallery-admin-card__body .ds-actions .ds-btn,.gallery-admin-card__body .ds-actions form{width:100%}.gallery-admin-card__body .ds-actions form .ds-btn{width:100%}}

/* STEP 11 — Kontak & pesan */
.contact-grid { display:grid; gap:var(--sp-5); }
@media (min-width:900px) { .contact-grid { grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr); align-items:start; } }
.contact-grid h2 { margin-top:0; }
.contact-info { list-style:none; padding:0; margin:0; display:grid; gap:var(--sp-4); }
.contact-info li { display:flex; gap:var(--sp-3); align-items:flex-start; }
.contact-info .ds-icon { flex:0 0 auto; color:var(--c-accent-ink); margin-top:2px; }
.contact-info strong,.contact-info span { display:block; }
.contact-info strong { margin-bottom:2px; }
.contact-info span { color:var(--c-muted); overflow-wrap:anywhere; }
.contact-note { color:var(--c-muted); font-size:var(--fs-sm); }
.contact-form-two { grid-template-columns:1fr; padding:0; }
@media (min-width:720px) { .contact-form-two { grid-template-columns:1fr 1fr; } }
.contact-honeypot { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; }
.contact-filter { margin-bottom:var(--sp-5); }
.contact-message-meta { grid-template-columns:1fr; margin-bottom:var(--sp-5); }
@media (min-width:720px) { .contact-message-meta { grid-template-columns:repeat(2,1fr); } }
.contact-message-detail hr { border:0; border-top:1px solid var(--c-line); margin:var(--sp-5) 0; }
.contact-message-body { white-space:normal; overflow-wrap:anywhere; line-height:1.75; font-size:var(--fs-lg); }
.contact-message-detail .ds-form-actions { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-5); }
.contact-message-detail .ds-form-actions form { margin:0; }

/* =====================================================
   STEP 11 — CONTACT MODERN UI
===================================================== */
.contact-page--modern { padding-bottom: var(--sp-8); }
.contact-hero { display:flex; justify-content:space-between; align-items:center; gap:var(--sp-5); margin-bottom:var(--sp-6); padding:clamp(24px,5vw,48px); border-radius:24px; background:linear-gradient(135deg,#0a1f44,#173f78); color:#fff; overflow:hidden; position:relative; }
.contact-hero::after { content:""; position:absolute; width:220px; height:220px; right:-70px; top:-90px; border-radius:50%; background:rgba(255,255,255,.08); }
.contact-hero h1 { margin:6px 0 10px; color:#fff; font-size:clamp(28px,4vw,44px); line-height:1.1; max-width:720px; }
.contact-hero p { margin:0; color:rgba(255,255,255,.82); max-width:700px; font-size:var(--fs-lg); line-height:1.7; }
.contact-eyebrow,.contact-card-label { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.contact-eyebrow { color:#b9d7ff; }
.contact-hero-badge { position:relative; z-index:1; display:grid; place-items:center; width:74px; height:74px; flex:0 0 74px; border:1px solid rgba(255,255,255,.2); border-radius:22px; background:rgba(255,255,255,.1); font-size:32px; }
.contact-grid--modern { gap:24px; }
.contact-grid--modern .ds-card { border-radius:20px; padding:clamp(22px,3vw,32px); box-shadow:0 12px 35px rgba(15,23,42,.07); }
.contact-info-card { background:linear-gradient(180deg,#fff,#f8fbff); }
.contact-card-label { color:#1769d2; }
.contact-grid--modern h2 { margin:6px 0 8px; font-size:clamp(22px,3vw,30px); }
.contact-card-intro { color:var(--c-muted); line-height:1.65; margin-top:0; }
.contact-info--modern { margin-top:26px; gap:18px; }
.contact-info--modern li { padding:13px; border:1px solid #e8eef7; border-radius:14px; background:#fff; }
.contact-info--modern .ds-icon { width:22px; }
.contact-info--modern strong { font-size:13px; color:#475569; }
.contact-info--modern span { margin-top:3px; color:#172033; font-size:15px; line-height:1.5; }
.contact-info-tip { display:flex; gap:10px; margin-top:22px; padding:13px 14px; border-radius:13px; background:#eef6ff; color:#31506f; font-size:13px; line-height:1.5; }
.contact-form-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.contact-secure { white-space:nowrap; padding:7px 10px; border-radius:999px; background:#ecfdf3; color:#147a45; font-size:12px; font-weight:700; }
.contact-form--modern { margin-top:22px; gap:18px; }
.contact-form--modern label > span { display:block; margin-bottom:7px; font-size:13px; font-weight:700; color:#27364d; }
.contact-form--modern label b { color:#d14343; }
.contact-form--modern input,.contact-form--modern textarea { border:1px solid #d9e2ef; border-radius:13px; background:#fbfdff; transition:border-color .18s,box-shadow .18s,background .18s; }
.contact-form--modern input:focus,.contact-form--modern textarea:focus { border-color:#1769d2; background:#fff; box-shadow:0 0 0 4px rgba(23,105,210,.10); }
.contact-form--modern input::placeholder,.contact-form--modern textarea::placeholder { color:#94a3b8; }
.contact-form-bottom { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top:4px; }
.contact-form-bottom .contact-note { margin:0; max-width:560px; }
.contact-submit { min-width:145px; display:inline-flex; align-items:center; justify-content:center; gap:12px; border-radius:13px; padding:12px 18px; box-shadow:0 7px 18px rgba(23,105,210,.18); }
.contact-submit span:last-child { font-size:20px; line-height:1; transition:transform .18s; }
.contact-submit:hover span:last-child { transform:translateX(3px); }
.contact-alert { margin-bottom:var(--sp-5); }
@media (max-width:719px) { .contact-hero { align-items:flex-start; } .contact-hero-badge { display:none; } .contact-form-bottom { align-items:stretch; flex-direction:column; } .contact-submit { width:100%; } }

/* STEP 12 — Pelacakan laporan kontak */
.contact-tracker-card { margin: 0 0 var(--sp-6); padding: 22px clamp(20px,3vw,30px); border:1px solid #dbe7f5; border-radius:20px; background:linear-gradient(135deg,#f7fbff,#fff); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.contact-tracker-card h2 { margin:5px 0 5px; font-size:clamp(20px,3vw,27px); }
.contact-tracker-card p { margin:0; color:var(--c-muted); line-height:1.6; }
.contact-tracker-form { display:flex; gap:10px; align-items:center; flex:0 0 auto; }
.contact-tracker-form input { width:min(260px,100%); min-height:46px; border:1px solid #d5dfec; border-radius:12px; padding:10px 13px; letter-spacing:.08em; font-weight:700; }
.contact-tracker-form input:focus { outline:0; border-color:#1769d2; box-shadow:0 0 0 4px rgba(23,105,210,.10); }
.contact-report-success { margin:0 0 var(--sp-6); display:flex; gap:18px; padding:24px; border:1px solid #bfe7cf; border-radius:20px; background:linear-gradient(135deg,#f0fff6,#fff); }
.contact-report-success-icon { flex:0 0 46px; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:#dff7e8; color:#167344; font-weight:900; font-size:22px; }
.contact-report-success-body h2 { margin:5px 0 6px; font-size:clamp(22px,3vw,30px); }
.contact-report-success-body p { margin:0 0 15px; color:var(--c-muted); line-height:1.6; }
.contact-report-number { display:inline-flex; align-items:center; min-height:54px; padding:8px 16px; border-radius:13px; background:#0b1f3a; color:#fff; font-size:clamp(22px,4vw,30px); line-height:1; letter-spacing:.16em; font-weight:900; font-variant-numeric:tabular-nums; }
.contact-report-number--small { margin-top:6px; font-size:22px; min-height:44px; padding:7px 13px; }
.contact-report-actions { display:flex; flex-wrap:wrap; gap:9px; margin:16px 0 9px; }
.contact-report-success small { display:block; color:#66758a; line-height:1.5; }
.contact-report-code { font-variant-numeric:tabular-nums; letter-spacing:.08em; }
.contact-report-code-link { text-decoration:none; }
.report-lookup-card { margin-bottom:var(--sp-5); padding:24px; }
.report-lookup-form > label { display:block; font-weight:800; margin-bottom:8px; }
.report-lookup-row { display:flex; gap:10px; }
.report-lookup-row input { flex:1; min-height:48px; border:1px solid #d5dfec; border-radius:12px; padding:10px 14px; font-size:18px; letter-spacing:.12em; font-weight:800; font-variant-numeric:tabular-nums; }
.report-lookup-error { margin-top:14px; }
.report-detail-card { padding:clamp(22px,3vw,34px); }
.report-detail-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding-bottom:24px; border-bottom:1px solid var(--c-line); }
.report-original-message { padding:26px 0; border-bottom:1px solid var(--c-line); }
.report-section-label { color:#1769d2; font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; margin-bottom:7px; }
.report-original-message h2 { margin:0 0 5px; font-size:clamp(21px,3vw,28px); }
.report-meta { color:var(--c-muted); font-size:13px; margin-bottom:16px; }
.report-replies { padding-top:26px; }
.report-replies h2 { margin-top:0; }
.report-empty { margin:0; padding:16px; border-radius:13px; background:#f7f9fc; color:var(--c-muted); line-height:1.6; }
.report-timeline { display:grid; gap:16px; }
.report-reply { display:grid; grid-template-columns:14px minmax(0,1fr); gap:13px; }
.report-reply-dot { width:12px; height:12px; margin-top:5px; border-radius:50%; background:#1769d2; box-shadow:0 0 0 5px #e8f1ff; }
.report-reply-content { padding:15px 17px; border:1px solid #dfe7f1; border-radius:15px; background:#fbfdff; }
.report-reply-head { display:flex; justify-content:space-between; gap:15px; margin-bottom:9px; font-size:13px; }
.report-reply-head span { color:var(--c-muted); }
.report-reply-message { line-height:1.75; overflow-wrap:anywhere; }
.contact-hero--compact { margin-bottom:var(--sp-5); }
.admin-reply-section,.admin-reply-history { margin-top:28px; padding-top:26px; border-top:1px solid var(--c-line); }
.admin-reply-section-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:16px; }
.admin-reply-section-head h2 { margin:5px 0 0; font-size:22px; }
.admin-reply-form textarea { width:100%; resize:vertical; min-height:150px; border:1px solid #d5dfec; border-radius:13px; padding:12px 14px; line-height:1.65; }
.admin-reply-form textarea:focus { outline:0; border-color:#1769d2; box-shadow:0 0 0 4px rgba(23,105,210,.10); }
.admin-reply-form label > span { display:block; margin-bottom:7px; font-weight:700; }

@media (max-width:899px) {
    .contact-tracker-card { align-items:stretch; flex-direction:column; }
    .contact-tracker-form { width:100%; }
    .contact-tracker-form input { flex:1; width:auto; }
}
@media (max-width:719px) {
    .contact-report-success { flex-direction:column; }
    .contact-report-number { width:100%; justify-content:center; letter-spacing:.10em; }
    .contact-tracker-form,.report-lookup-row { flex-direction:column; align-items:stretch; }
    .contact-tracker-form input,.report-lookup-row input { width:100%; }
    .contact-tracker-form .ds-btn,.report-lookup-row .ds-btn { width:100%; }
    .report-detail-head,.admin-reply-section-head { flex-direction:column; }
}

.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }

/* STEP 20 — Pengaturan kontak & social links */
.site-footer-links { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.site-footer-links a { display:inline-flex; align-items:center; min-height:36px; padding:.45rem .75rem; border:1px solid rgba(255,255,255,.18); border-radius:999px; text-decoration:none; font-size:.86rem; }
.site-footer-links a:hover { text-decoration:none; transform:translateY(-1px); }

/* STEP 21 — Pencarian publik */
.search-page { padding-top:var(--sp-7); padding-bottom:var(--sp-8); }
.search-hero { padding:clamp(24px,5vw,52px); border-radius:24px; background:linear-gradient(135deg, #0a1f44, #173a70); color:#fff; margin-bottom:var(--sp-6); }
.search-hero h1 { margin:8px 0 8px; font-size:clamp(28px,4vw,44px); }
.search-hero p { margin:0 0 20px; opacity:.86; }
.search-hero-form { display:flex; gap:10px; max-width:760px; }
.search-hero-form input { flex:1; min-width:0; border:0; border-radius:12px; padding:13px 15px; font:inherit; }
.search-summary { margin-bottom:var(--sp-4); color:var(--muted, #667085); }
.search-results { display:grid; gap:14px; }
.search-result-card { padding:20px; }
.search-result-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.search-result-type { display:inline-flex; padding:4px 9px; border-radius:999px; background:rgba(10,31,68,.08); font-size:12px; font-weight:700; }
.search-result-meta { color:var(--muted, #667085); font-size:13px; }
.search-result-card h2 { margin:0 0 8px; font-size:20px; }
.search-result-card h2 a { color:inherit; text-decoration:none; }
.search-result-card h2 a:hover { text-decoration:underline; }
.search-result-card p { margin:0 0 8px; color:var(--muted, #667085); line-height:1.65; }
.search-result-card time { color:var(--muted, #667085); font-size:12px; }
.search-empty { padding:48px 24px; text-align:center; }
.search-empty-icon { font-size:38px; margin-bottom:8px; }
.search-empty h2 { margin:0 0 6px; }
.search-empty p { margin:0; color:var(--muted, #667085); }
@media (max-width: 900px) {
            .search-hero-form { flex-direction:column; }
}


/* STEP 23 - FAQ: tambahan ringan, tidak mengubah header/menu utama */
.faq-page .ds-page-head { margin-bottom: var(--sp-6); }
.faq-list { max-width: 900px; }
.faq-group { margin-bottom: var(--sp-7); }
.faq-group > h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-xl); }
.faq-items { display: grid; gap: var(--sp-2); }
.faq-item { background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 12px; overflow: hidden; }
.faq-item summary { cursor: pointer; list-style: none; padding: 16px 18px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary span { font-size: 22px; font-weight: 400; line-height: 1; }
.faq-item[open] summary span { transform: rotate(45deg); }
.faq-answer { padding: 0 18px 18px; line-height: 1.7; color: var(--text-muted, #5f6368); }
.faq-empty { max-width: 760px; }
.faq-admin-grid { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.4fr); gap: var(--sp-5); margin-bottom: var(--sp-5); }
.faq-admin-categories { display: grid; gap: 10px; }
.faq-admin-category { display: flex; gap: 8px; align-items: center; }
.faq-admin-category > form:first-child { display: grid; grid-template-columns: minmax(0,1fr) 90px auto; gap: 8px; flex: 1; }
.faq-sort { max-width: 90px; }
.faq-admin-form { margin-bottom: var(--sp-5); }
.faq-form-row { display: grid; grid-template-columns: minmax(0,2fr) minmax(150px,1fr) 100px; gap: var(--sp-3); }
.faq-admin-table-wrap { overflow-x: auto; }
.faq-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 230px; }
.faq-edit-form { margin-top: 10px; padding: 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; display: grid; gap: 8px; min-width: 320px; }
@media (max-width: 760px) {
  .faq-admin-grid, .faq-form-row { grid-template-columns: 1fr; }
  .faq-admin-category { align-items: stretch; flex-direction: column; }
  .faq-admin-category > form:first-child { grid-template-columns: 1fr; }
  .faq-sort { max-width: none; }
}