/* ============================================================
   SEKOLAH TERBAIK INDONESIA — U.S. News inspired design system
   Palette: Navy #14284B · Red #B31942 · Link Blue #1A6DBA
   Type: Georgia (headlines) · Helvetica/Arial (UI & body)
   ============================================================ */

:root {
  --navy: #14284b;
  --navy-dark: #0d1b33;
  --navy-soft: #1e3a6d;
  --red: #b31942;
  --red-dark: #8e1235;
  --link: #1a6dba;
  --link-dark: #10508d;
  --gold: #c9a227;
  --ink: #222222;
  --gray-1: #555f6d;
  --gray-2: #667080;  /* kontras 5.0:1 pada putih (WCAG AA) */
  --gray-3: #d4d9df;
  --gray-4: #eceff2;
  --gray-5: #f7f8fa;
  --white: #ffffff;
  --green: #1d7a4d;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --shadow: 0 1px 3px rgba(13, 27, 51, 0.12);
  --shadow-lg: 0 6px 24px rgba(13, 27, 51, 0.16);
  --maxw: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* ---------- Aksesibilitas ---------- */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 0 0 5px 5px;
  font-size: 14px; font-weight: 700; transition: top .15s;
}
.skip-link:focus { top: 0; text-decoration: none; outline: 3px solid var(--gold); }
:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 2px;
}
.mainnav a:focus-visible, .subnav a:focus-visible { outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--white);
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--link-dark); }

img { max-width: 100%; display: block; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------- Utility top bar ---------- */
.topbar {
  background: var(--navy-dark);
  color: #aebacd;
  font-size: 12px;
}
.topbar .container {
  display: flex; justify-content: space-between; align-items: center;
  height: 32px;
}
.topbar a { color: #aebacd; margin-left: 16px; }
.topbar a:hover { color: #fff; text-decoration: none; }
.topbar .tagline { letter-spacing: .04em; text-transform: uppercase; font-size: 11px; }

/* ---------- Masthead ---------- */
.masthead { background: var(--white); border-bottom: 1px solid var(--gray-3); }
.masthead .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 18px; padding-bottom: 18px; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand .logo-mark {
  font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1;
  color: var(--navy); letter-spacing: -0.5px;
}
.brand .logo-mark .amp { color: var(--red); }
.brand .logo-sub {
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--gray-1); font-weight: 700;
}
.brand:hover { text-decoration: none; }

.mast-search { flex: 1; max-width: 420px; display: flex; }
.mast-search input {
  flex: 1; border: 1px solid var(--gray-3); border-right: 0;
  padding: 9px 14px; font-size: 14px; font-family: var(--sans);
  border-radius: 3px 0 0 3px; outline: none; color: var(--ink);
}
.mast-search input:focus { border-color: var(--link); }
.mast-search button {
  background: var(--red); color: #fff; border: 0; padding: 0 18px;
  font-size: 14px; cursor: pointer; border-radius: 0 3px 3px 0; font-weight: 700;
}
.mast-search button:hover { background: var(--red-dark); }

/* ---------- Main nav ---------- */
.mainnav { background: var(--navy); position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow); }
.mainnav .container { display: flex; align-items: stretch; overflow-x: auto; }
.mainnav a {
  color: #dbe3ee; font-size: 13.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: 14px 18px; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.mainnav a:hover { color: #fff; background: var(--navy-soft); text-decoration: none; }
.mainnav a.active { color: #fff; border-bottom-color: var(--red); }
.mainnav .spacer { flex: 1; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { font-size: 12.5px; color: var(--gray-1); padding: 14px 0 0; }
.breadcrumbs a { color: var(--gray-1); }
.breadcrumbs a:hover { color: var(--link); }
.breadcrumbs .sep { margin: 0 6px; color: var(--gray-2); }

/* ---------- Hero (homepage) ---------- */
.hero {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 55%, #1c3f78 100%);
  color: #fff; padding: 56px 0 64px; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -120px; top: -80px; width: 420px; height: 420px;
  border-radius: 50%; background: radial-gradient(circle, rgba(179,25,66,.25), transparent 70%);
}
.hero .kicker {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: #9db3d6; font-weight: 700; margin-bottom: 14px;
}
.hero h1 {
  font-family: var(--serif); font-size: 42px; line-height: 1.15; font-weight: 700;
  max-width: 720px; margin-bottom: 14px;
}
.hero p.lede { font-size: 17px; color: #c3d0e4; max-width: 640px; margin-bottom: 28px; }
.hero-search { display: flex; max-width: 640px; box-shadow: var(--shadow-lg); border-radius: 4px; overflow: hidden; }
.hero-search input {
  flex: 1; border: 0; padding: 16px 18px; font-size: 16px; outline: none; font-family: var(--sans);
}
.hero-search button {
  background: var(--red); color: #fff; border: 0; padding: 0 28px; font-size: 15px;
  font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: .05em;
}
.hero-search button:hover { background: var(--red-dark); }
.hero-stats { display: flex; gap: 40px; margin-top: 34px; flex-wrap: wrap; }
.hero-flex { display: flex; align-items: center; gap: 44px; }
.hero-text { flex: 1; min-width: 0; }
.hero-art {
  width: 380px; max-width: 38%; flex-shrink: 0; position: relative; z-index: 1;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.35));
  animation: heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .hero-art { animation: none; } }
.hero-stats .stat .num { font-family: var(--serif); font-size: 28px; font-weight: 700; }
.hero-stats .stat .lbl { font-size: 12px; color: #9db3d6; text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Section headers ---------- */
.section { padding: 44px 0; }
.section.alt { background: var(--gray-5); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 3px solid var(--navy); padding-bottom: 10px; margin-bottom: 24px;
}
.section-head h2 {
  font-family: var(--serif); font-size: 26px; color: var(--navy); font-weight: 700;
}
.section-head .more { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Jenjang cards ---------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.jenjang-card {
  background: var(--white); border: 1px solid var(--gray-3); border-top: 4px solid var(--red);
  border-radius: 4px; padding: 22px 20px; transition: box-shadow .15s, transform .15s;
  display: block; color: var(--ink);
}
.jenjang-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); text-decoration: none; }
.jenjang-card .abbr {
  font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--navy); line-height: 1;
}
.jenjang-card .full { font-size: 12.5px; color: var(--gray-1); margin: 6px 0 12px; min-height: 34px; }
.jenjang-card .count { font-size: 13px; font-weight: 700; color: var(--link); }
.jenjang-card .count::after { content: " ›"; }

/* ---------- Ranking list (U.S. News style rows) ---------- */
.rank-list { list-style: none; }
.rank-card {
  display: flex; gap: 20px; background: var(--white); border: 1px solid var(--gray-3);
  border-radius: 4px; padding: 22px 24px; margin-bottom: 14px; position: relative;
  transition: box-shadow .15s;
}
.rank-card:hover { box-shadow: var(--shadow-lg); }
.rank-card.featured {
  border: 2px solid var(--gold);
  background: linear-gradient(135deg, #fffdf5 0%, var(--white) 45%);
  box-shadow: var(--shadow-lg);
}
.rank-card.featured .rank-num .n { font-size: 44px; color: var(--red); }
.rank-card.featured .rank-num .medal { font-size: 26px; }
.rank-card.featured h3 { font-size: 23px; }
.rank-num {
  min-width: 56px; text-align: center; flex-shrink: 0;
}
.rank-num .hash { font-size: 13px; color: var(--gray-2); font-weight: 700; }
.rank-num .n {
  font-family: var(--serif); font-size: 34px; font-weight: 700; color: var(--navy); line-height: 1;
}
.rank-num .medal { font-size: 20px; margin-top: 4px; }
.rank-body { flex: 1; min-width: 0; }
.rank-body h3 { font-family: var(--serif); font-size: 20px; line-height: 1.25; margin-bottom: 3px; }
.rank-body h3 a { color: var(--navy); }
.rank-body h3 a:hover { color: var(--link); }
.rank-body .loc { font-size: 13px; color: var(--gray-1); margin-bottom: 10px; }
.rank-body .desc { font-size: 13.5px; color: var(--gray-1); margin-bottom: 12px; max-width: 640px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 3px; border: 1px solid var(--gray-3); color: var(--gray-1); background: var(--gray-5);
}
.badge.akred-a { background: var(--navy); color: #fff; border-color: var(--navy); }
.badge.akred-b { background: var(--navy-soft); color: #fff; border-color: var(--navy-soft); }
.badge.negeri { background: #eaf3ea; color: var(--green); border-color: #cfe4d4; }
.badge.swasta { background: #fdf1e7; color: #b05c12; border-color: #f3dcc4; }
.badge.unggulan { background: var(--red); color: #fff; border-color: var(--red); }

.rank-side {
  flex-shrink: 0; width: 170px; border-left: 1px solid var(--gray-4); padding-left: 20px;
  display: flex; flex-direction: column; gap: 10px; justify-content: center;
}
.rank-side .metric .val { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--navy); }
.rank-side .metric .lbl { font-size: 11px; color: var(--gray-2); text-transform: uppercase; letter-spacing: .06em; }
.stars { color: var(--gold); font-size: 14px; letter-spacing: 1px; }
.stars .rating-num { color: var(--ink); font-weight: 700; font-family: var(--sans); margin-left: 4px; font-size: 13px; }

.compare-check {
  display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--gray-1);
  cursor: pointer; user-select: none; margin-top: 4px;
}
.compare-check input { accent-color: var(--red); width: 15px; height: 15px; cursor: pointer; }

/* ---------- Two-column layout (list + sidebar) ---------- */
.layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; padding: 28px 0 56px; align-items: start; }

.filters { position: sticky; top: 64px; }
.filter-box { background: var(--white); border: 1px solid var(--gray-3); border-radius: 4px; margin-bottom: 16px; }
.filter-box h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--navy);
  padding: 12px 16px; border-bottom: 1px solid var(--gray-4); background: var(--gray-5);
}
.filter-box .opts { padding: 12px 16px; display: flex; flex-direction: column; gap: 9px; }
.filter-box label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.filter-box input { accent-color: var(--red); }
.filter-box select {
  width: 100%; padding: 8px 10px; font-size: 13.5px; border: 1px solid var(--gray-3);
  border-radius: 3px; font-family: var(--sans); color: var(--ink); background: #fff;
}
.btn-reset {
  display: block; width: 100%; text-align: center; background: none; border: 1px solid var(--gray-3);
  color: var(--gray-1); font-size: 12.5px; font-weight: 700; padding: 9px; border-radius: 3px;
  cursor: pointer; text-transform: uppercase; letter-spacing: .05em;
}
.btn-reset:hover { border-color: var(--gray-1); color: var(--ink); }

.list-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
.list-head .count-info { font-size: 13.5px; color: var(--gray-1); }
.list-head .count-info b { color: var(--ink); }
.sort-wrap { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-1); }
.sort-wrap select { padding: 7px 10px; border: 1px solid var(--gray-3); border-radius: 3px; font-size: 13px; font-family: var(--sans); }

/* Page title block */
.page-title { padding: 22px 0 8px; }
.page-title h1 { font-family: var(--serif); font-size: 32px; color: var(--navy); line-height: 1.2; margin-bottom: 8px; }
.page-title p.sub { font-size: 14.5px; color: var(--gray-1); max-width: 760px; }
.title-rule { height: 4px; width: 64px; background: var(--red); margin-top: 14px; border-radius: 2px; }

/* Jenjang tabs (sub nav) */
.subnav { border-bottom: 1px solid var(--gray-3); margin-top: 18px; }
.subnav .tabs { display: flex; gap: 4px; overflow-x: auto; }
.subnav a {
  padding: 11px 18px; font-size: 13.5px; font-weight: 700; color: var(--gray-1);
  border-bottom: 3px solid transparent; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
.subnav a:hover { color: var(--navy); text-decoration: none; }
.subnav a.active { color: var(--navy); border-bottom-color: var(--red); }

/* ---------- Compare tray ---------- */
.compare-tray {
  position: fixed; bottom: 0; left: 0; right: 0; background: var(--navy-dark); color: #fff;
  padding: 14px 0; z-index: 100; transform: translateY(110%); transition: transform .25s; box-shadow: 0 -4px 20px rgba(0,0,0,.3);
}
.compare-tray.show { transform: translateY(0); }
.compare-tray .container { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.compare-tray .items { flex: 1; display: flex; gap: 10px; flex-wrap: wrap; }
.compare-tray .chip {
  background: var(--navy-soft); padding: 7px 12px; border-radius: 3px; font-size: 13px;
  display: flex; align-items: center; gap: 8px;
}
.compare-tray .chip button { background: none; border: 0; color: #9db3d6; cursor: pointer; font-size: 15px; line-height: 1; }
.compare-tray .chip button:hover { color: #fff; }
.btn-compare {
  background: var(--red); color: #fff; border: 0; padding: 11px 26px; font-size: 14px;
  font-weight: 700; border-radius: 3px; cursor: pointer; text-transform: uppercase; letter-spacing: .05em;
}
.btn-compare:hover { background: var(--red-dark); }
.btn-compare:disabled { background: var(--gray-2); cursor: not-allowed; }

/* ---------- School profile ---------- */
.profile-hero { background: var(--navy); color: #fff; padding: 36px 0; }
.profile-hero .wrap { display: flex; gap: 28px; align-items: flex-start; }
.profile-medal {
  flex-shrink: 0; width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #2a4d8f, var(--navy-dark));
  border: 3px solid var(--gold); display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.profile-medal .hash { font-size: 13px; color: var(--gold); font-weight: 700; }
.profile-medal .n { font-family: var(--serif); font-size: 40px; font-weight: 700; line-height: 1; }
.profile-medal .of { font-size: 9.5px; color: #9db3d6; text-transform: uppercase; margin-top: 3px; letter-spacing: .05em; text-align: center; padding: 0 6px; }
.profile-hero h1 { font-family: var(--serif); font-size: 34px; line-height: 1.15; margin-bottom: 8px; }
.profile-hero .loc { color: #c3d0e4; font-size: 14.5px; margin-bottom: 14px; }
.profile-hero .badges .badge { border: 0; }

.profile-stats-band { background: var(--white); border-bottom: 1px solid var(--gray-3); box-shadow: var(--shadow); }
.profile-stats-band .container { display: grid; grid-template-columns: repeat(5, 1fr); }
.pstat { padding: 18px 16px; text-align: center; border-right: 1px solid var(--gray-4); }
.pstat:last-child { border-right: 0; }
.pstat .val { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--navy); }
.pstat .lbl { font-size: 11px; color: var(--gray-2); text-transform: uppercase; letter-spacing: .07em; margin-top: 2px; }

.profile-layout { display: grid; grid-template-columns: 1fr 320px; gap: 36px; padding: 36px 0 60px; align-items: start; }
.pcard { background: var(--white); border: 1px solid var(--gray-3); border-radius: 4px; margin-bottom: 22px; overflow: hidden; }
.pcard h3,
.pcard .pcard-h {
  font-family: var(--serif); font-size: 19px; color: var(--navy);
  padding: 15px 20px; border-bottom: 2px solid var(--red); background: var(--gray-5);
}
.pcard .pad { padding: 20px; }
.info-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.info-table th, .info-table td { text-align: left; padding: 11px 20px; border-bottom: 1px solid var(--gray-4); vertical-align: top; }
.info-table th { color: var(--gray-1); font-weight: 400; width: 42%; }
.info-table td { font-weight: 600; }
.info-table tr:last-child th, .info-table tr:last-child td { border-bottom: 0; }

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { background: var(--gray-4); color: var(--navy); font-size: 12.5px; padding: 5px 12px; border-radius: 999px; font-weight: 600; }

.rating-rows { display: flex; flex-direction: column; gap: 13px; }
.rating-row { display: grid; grid-template-columns: 130px 1fr 42px; gap: 12px; align-items: center; font-size: 13px; }
.rating-row .bar { height: 8px; background: var(--gray-4); border-radius: 4px; overflow: hidden; }
.rating-row .bar span { display: block; height: 100%; background: var(--link); border-radius: 4px; }
.rating-row .score { font-weight: 700; color: var(--navy); text-align: right; }

.map-placeholder {
  height: 220px; background: linear-gradient(135deg, #dfe7f0, #c9d6e6);
  display: flex; align-items: center; justify-content: center; color: var(--gray-1);
  font-size: 13px; flex-direction: column; gap: 6px;
}
.map-placeholder .pin { font-size: 30px; }

.side-cta { background: var(--navy); color: #fff; border-radius: 4px; padding: 22px; margin-bottom: 22px; }
.side-cta h4,
.side-cta h3 { font-family: var(--serif); font-size: 18px; margin-bottom: 8px; }
.side-cta p { font-size: 13px; color: #c3d0e4; margin-bottom: 14px; }
.side-cta .btn-compare { width: 100%; }

/* ---------- Compare page ---------- */
.compare-table-wrap { overflow-x: auto; border: 1px solid var(--gray-3); border-radius: 4px; margin: 24px 0 56px; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.compare-table th, .compare-table td { padding: 13px 18px; border-bottom: 1px solid var(--gray-4); text-align: left; }
.compare-table thead th { background: var(--navy); color: #fff; font-family: var(--serif); font-size: 16px; vertical-align: top; }
.compare-table thead th .loc { display: block; font-family: var(--sans); font-size: 12px; font-weight: 400; color: #c3d0e4; margin-top: 4px; }
.compare-table tbody th { background: var(--gray-5); color: var(--gray-1); font-weight: 600; width: 190px; font-size: 13px; }
.compare-table td.best { color: var(--green); font-weight: 700; }

/* ---------- Articles ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.article-card { background: var(--white); border: 1px solid var(--gray-3); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s; }
.article-card:hover { box-shadow: var(--shadow-lg); }
.article-card .thumb { height: 150px; display: flex; align-items: center; justify-content: center; font-size: 42px; color: #fff; }
.article-card .thumb-img { width: 100%; height: 150px; object-fit: cover; display: block; }
.school-logo { display: block; }
.article-card .body { padding: 16px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.article-card .cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--red); margin-bottom: 7px; }
.article-card h3 { font-family: var(--serif); font-size: 17px; line-height: 1.3; margin-bottom: 8px; }
.article-card h3 a { color: var(--navy); }
.article-card p { font-size: 13px; color: var(--gray-1); flex: 1; }
.article-card .meta { font-size: 12px; color: var(--gray-2); margin-top: 12px; }

/* ---------- Province link grid ---------- */
.prov-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.prov-link {
  background: var(--white); border: 1px solid var(--gray-3); border-radius: 4px;
  padding: 14px 16px; font-size: 13.5px; font-weight: 700; color: var(--navy); display: block;
}
.prov-link .cnt { display: block; font-size: 12px; color: var(--gray-2); font-weight: 400; margin-top: 2px; }
.prov-link:hover { border-color: var(--link); text-decoration: none; box-shadow: var(--shadow); }

/* ---------- FAQ ---------- */
.faq details { border: 1px solid var(--gray-3); border-radius: 4px; margin-bottom: 10px; background: var(--white); }
.faq summary { padding: 14px 18px; font-weight: 700; font-size: 14.5px; color: var(--navy); cursor: pointer; list-style: none; position: relative; }
.faq summary::after { content: "+"; position: absolute; right: 18px; font-size: 18px; color: var(--red); }
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding: 0 18px 16px; font-size: 14px; color: var(--gray-1); }

/* ---------- Newsletter band ---------- */
.newsletter { background: var(--red); color: #fff; padding: 36px 0; }
.newsletter .container { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.newsletter h3 { font-family: var(--serif); font-size: 24px; }
.newsletter p { font-size: 13.5px; opacity: .9; }
.newsletter form { display: flex; flex: 1; min-width: 280px; max-width: 440px; margin-left: auto; }
.newsletter input { flex: 1; border: 0; padding: 13px 16px; font-size: 14px; border-radius: 3px 0 0 3px; outline: none; }
.newsletter button { background: var(--navy-dark); color: #fff; border: 0; padding: 0 22px; font-weight: 700; font-size: 13px; text-transform: uppercase; border-radius: 0 3px 3px 0; cursor: pointer; }

/* ---------- Footer ---------- */
footer { background: var(--navy-dark); color: #93a3ba; font-size: 13px; }
.footer-main { padding: 44px 0 30px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer-main .logo-mark { font-family: var(--serif); font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.footer-main .logo-mark .amp { color: var(--red); }
.footer-main h5 { color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.footer-main ul { list-style: none; }
.footer-main li { margin-bottom: 9px; }
.footer-main a { color: #93a3ba; }
.footer-main a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid #24344f; padding: 18px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12px; }
.footer-bottom a { color: #93a3ba; margin-left: 18px; }

.disclaimer { font-size: 11.5px; color: #6d7f99; margin-top: 14px; line-height: 1.6; max-width: 420px; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 60px 20px; color: var(--gray-1); }
.empty .big { font-size: 40px; margin-bottom: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .prov-grid { grid-template-columns: repeat(3, 1fr); }
  .layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .profile-layout { grid-template-columns: 1fr; }
  .profile-stats-band .container { grid-template-columns: repeat(3, 1fr); }
  .pstat:nth-child(3) { border-right: 0; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .mast-search { display: none; }
}
@media (max-width: 960px) {
  .hero-art { display: none; }
}
@media (max-width: 620px) {
  .hero h1 { font-size: 30px; }
  .grid-4, .grid-3, .prov-grid { grid-template-columns: 1fr; }
  .rank-card { flex-direction: column; gap: 12px; }
  .rank-side { width: 100%; border-left: 0; padding-left: 0; border-top: 1px solid var(--gray-4); padding-top: 14px; flex-direction: row; flex-wrap: wrap; }
  .rank-num { display: flex; align-items: baseline; gap: 8px; text-align: left; }
  .profile-hero .wrap { flex-direction: column; }
  .profile-stats-band .container { grid-template-columns: repeat(2, 1fr); }
  .topbar .tagline { display: none; }
  .section { padding: 30px 0; }
  .section-head h2 { font-size: 21px; }
  .page-title h1 { font-size: 25px; }
  .profile-hero h1 { font-size: 26px; }
}
/* Layar HP kecil: cegah brand/masthead overflow */
@media (max-width: 460px) {
  .masthead .container { gap: 10px; padding-top: 12px; padding-bottom: 12px; }
  .brand { gap: 7px; }
  .brand img { width: 34px; height: 34px; }
  .brand .logo-mark { font-size: 22px; }
  .brand .logo-sub { display: none; }
  .topbar .container { justify-content: flex-end; }
  .hero { padding: 40px 0 46px; }
  .hero-search { flex-direction: column; border-radius: 6px; }
  .hero-search input { border-radius: 6px 6px 0 0; }
  .hero-search button { padding: 14px; border-radius: 0 0 6px 6px; }
  .hero-stats { gap: 22px; }
  .newsletter form { margin-left: 0; }
}


/* ============================================================
   LAPISAN MOBILE-FIRST — domain provinsi
   ------------------------------------------------------------
   Ditambahkan build_prov.py SETELAH styles.css, jadi menang di cascade
   tanpa mengubah styles.css milik hub. Menutup temuan audit:
     K13  search & navigasi hilang di HP (<=960px)
     K11  FOUC/CLS karena header & footer disuntik JS tanpa tinggi cadangan
     K12  target skip-link
   Aturan: semua yang di sini ditulis mobile-first — perilaku dasar untuk
   layar kecil, penyesuaian layar besar lewat min-width.
   ============================================================ */

/* ---------- 1. Cadangan tinggi: hentikan loncatan layout (K11) ----------
   #site-header & #site-footer kosong sampai renderChrome() jalan. Tanpa
   tinggi cadangan, konten melompat saat chrome muncul (CLS besar di HP). */
#site-header { min-height: 176px; display: block; }
#site-footer { min-height: 420px; display: block; }
@media (min-width: 700px) { #site-header { min-height: 158px; } }
@media (min-width: 900px) { #site-header { min-height: 150px; } #site-footer { min-height: 360px; } }

/* ---------- 2. Masthead mobile-first ---------- */
.masthead .container {
  display: block;                      /* HP: tumpuk brand lalu search */
  padding-top: 12px; padding-bottom: 12px;
}
.mast-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* K13: search TIDAK BOLEH hilang di HP — ini fitur utama sebuah direktori.
   Aturan hub `.mast-search{display:none}` di <=960px dibatalkan di sini. */
.mast-search {
  display: flex !important;
  max-width: none; width: 100%; margin-top: 10px;
}
.mast-search input {
  min-width: 0;                        /* cegah input memaksa lebar > viewport */
  font-size: 16px;                     /* >=16px: iOS tidak auto-zoom saat fokus */
  padding: 11px 14px;
}
.mast-search button { padding: 0 16px; min-height: 44px; }  /* target sentuh 44px */

@media (min-width: 900px) {
  .masthead .container { display: flex; align-items: center; gap: 24px; }
  .mast-top { flex: 0 0 auto; }
  .mast-search { max-width: 420px; margin-top: 0; }
  .mast-search input { font-size: 14px; padding: 9px 14px; }
}

/* ---------- 3. Tombol hamburger (hanya HP) ---------- */
.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px;      /* target sentuh 44x44 */
  background: transparent; border: 1px solid var(--gray-3); border-radius: 4px;
  cursor: pointer; flex-shrink: 0;
}
.nav-toggle .bar { display: block; height: 2px; width: 100%; background: var(--navy); border-radius: 2px; }
.nav-toggle:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
@media (min-width: 900px) { .nav-toggle { display: none; } }

/* ---------- 4. Nav utama: tersembunyi & vertikal di HP, bar di desktop ----------
   Hub memakai scroll horizontal tanpa tombol — link paling kanan (PPDB) praktis
   tak pernah ditemukan di HP. */
.mainnav .container { display: none; }
.mainnav.open .container { display: block; overflow-x: visible; padding-bottom: 6px; }
.mainnav a {
  display: block; padding: 13px 4px; border-bottom: 1px solid rgba(255,255,255,.12);
  border-left: 3px solid transparent; min-height: 44px; box-sizing: border-box;
}
.mainnav a.active { border-bottom-color: rgba(255,255,255,.12); border-left-color: var(--red); }
.mainnav .spacer { display: none; }

@media (min-width: 900px) {
  .mainnav .container { display: flex; align-items: stretch; overflow-x: auto; }
  .mainnav a {
    display: inline-block; padding: 14px 18px; min-height: 0;
    border-bottom: 3px solid transparent; border-left: 0;
  }
  .mainnav a.active { border-bottom-color: var(--red); border-left-color: transparent; }
  .mainnav .spacer { display: block; flex: 1; }
}

/* ---------- 5. Skip-link terlihat saat difokus (K12) ---------- */
.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  background: #fff; color: var(--navy); padding: 10px 16px;
  border: 2px solid var(--red); border-radius: 4px; width: auto; height: auto;
}
#konten:focus { outline: none; }

/* ---------- 6. Perbaikan mobile lain ---------- */
html, body { overflow-x: hidden; }        /* jaring pengaman anti scroll samping */
.subnav .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pagination a, .pagination .cur {
  min-width: 44px; min-height: 44px;      /* paginasi bisa ditekan jari */
  display: inline-flex; align-items: center; justify-content: center; padding: 0 10px;
}
.newsletter .nl-fallback { margin: 0; font-size: 14px; }
.footer-main { grid-template-columns: 1fr; }
@media (min-width: 700px) { .footer-main { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-main { grid-template-columns: 2fr 1fr 1fr 1fr; } }

/* Tabel info profil: cegah nilai panjang (alamat) merusak lebar di HP */
.info-table th, .info-table td { word-break: break-word; }
.profile-layout .col-main { min-width: 0; }

/* Kontras: --gray-2 di teks kecil hanya 5.01:1 pada 11px (temuan RINGAN audit).
   Untuk teks <=12px dipakai warna lebih gelap agar tetap terbaca di layar HP. */
.rank-card .loc, .badges .badge { color: var(--gray-1); }

/* ---------- 7. Kalkulator biaya: 1 kolom di HP, 2 kolom sejak tablet ---------- */
.kalk-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .kalk-grid { grid-template-columns: 1fr 1fr; gap: 16px 20px; } }
.kalk-grid input, .kalk-grid select { min-height: 44px; }   /* target sentuh */

/* Tabel lebar (peta sekolah negeri) menggulir di dalam wadahnya sendiri,
   bukan memaksa seluruh halaman menggulir ke samping. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 520px; }

/* ============================================================
   8. PENSKALAAN LAYAR BESAR (tablet & desktop)
   ------------------------------------------------------------
   Situs ini ditulis mobile-first, jadi ukuran dasarnya dipilih untuk
   layar 375px. Di layar besar hasilnya terasa kecil dan tenggelam di
   ruang kosong. Bagian ini membesarkan skalanya secara MENGALIR.

   Dua aturan yang dipegang:
   1. SELURUH blok ini berada di dalam @media (min-width: 768px) —
      tampilan ponsel tidak tersentuh sama sekali.
   2. Nilai clamp() dihitung agar PERSIS SAMA dengan nilai lama tepat di
      768px, lalu tumbuh perlahan. Tidak ada loncatan ukuran di ambang
      breakpoint, dan tidak ada halaman yang tiba-tiba berubah rupa.
   ============================================================ */
@media (min-width: 768px) {
  /* Lebar isi ikut tumbuh, tapi tetap dibatasi agar baris teks tidak
     terlalu panjang untuk dibaca. */
  :root { --maxw: clamp(1180px, 90vw, 1560px); }
  .container { padding-left: clamp(20px, 1.2vw + 11px, 32px);
               padding-right: clamp(20px, 1.2vw + 11px, 32px); }

  /* Teks dasar: 15px @768 → 17,5px @1920 */
  body { font-size: clamp(15px, 13.3px + 0.22vw, 17.5px); }

  /* Judul halaman: 32px @768 → 46px @1920 */
  .page-title h1 { font-size: clamp(32px, 22.7px + 1.21vw, 46px); }
  .page-title p.sub { font-size: clamp(14.5px, 12.5px + 0.26vw, 18px); max-width: 78ch; }

  /* Judul bagian: 26px @768 → 34px @1920 */
  .section-head h2 { font-size: clamp(26px, 20.7px + 0.69vw, 34px); }

  /* Kartu peringkat: angka besar dan nama sekolah ikut tumbuh */
  .rank-num .n { font-size: clamp(34px, 26px + 1.04vw, 46px); }
  /* generator menulis font-size inline pada h3 baris peringkat (17px), jadi
     nilai dasarnya 17px — bukan 20px seperti CSS kelasnya — dan perlu !important */
  .rank-body h3 { font-size: clamp(17px, 13.67px + 0.434vw, 22px) !important; }
  .rank-card .loc { font-size: clamp(13.5px, 12.2px + 0.17vw, 15.5px); }
  /* padding kartu ditulis inline oleh generator, jadi perlu dipaksa di sini */
  .rank-card { padding: clamp(16px, 12px + 0.52vw, 22px) clamp(20px, 14px + 0.78vw, 29px) !important; }

  /* Profil sekolah: kolom samping ikut melebar di layar sangat lebar */
  .profile-hero h1 { font-size: clamp(34px, 24px + 1.3vw, 49px); }
  /* template artikel menulis font-size inline (16px) → perlu !important.
     max-width memakai satuan ch, jadi lebar kolom ikut tumbuh bersama fontnya
     dan panjang barisnya tetap ~74 karakter. */
  .artikel-body { font-size: clamp(16px, 14px + 0.26vw, 19px) !important; }
  .info-table th, .info-table td { font-size: clamp(14px, 12.7px + 0.17vw, 16px); }
}

@media (min-width: 1024px) {
  /* Tablet lanskap ke atas: kembalikan kepadatan grid seperti desktop */
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .prov-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1400px) {
  /* Layar lebar: manfaatkan ruang, jangan dibiarkan kosong */
  .prov-grid { grid-template-columns: repeat(5, 1fr); }
  .profile-layout { grid-template-columns: 1fr 360px; gap: 44px; }
}

@media (min-width: 1700px) {
  .prov-grid { grid-template-columns: repeat(6, 1fr); }
  .grid-3 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 9. Target sentuh & font input di HP (C5) ----------
   Ditemukan pada gate F4 di viewport 375px:
   - #fCari (filter direktori) berukuran 13,3px. iOS meng-auto-zoom setiap input
     ber-font < 16px yang difokus, lalu TIDAK mengembalikan zoomnya — halaman
     tertinggal dalam keadaan melebar. Kolom pencarian di masthead sudah 16px
     sejak F0b; yang ini terlewat karena berada di dalam panel filter.
   - Tombol paginasi (33px), Reset Filter (34px), dan CTA bandingkan (39px) di
     bawah ambang 44x44 WCAG 2.5.5. Di layar sentuh ini berarti salah pencet,
     dan paginasi justru kontrol yang paling sering ditekan di halaman daftar.
   Hanya berlaku sampai 767px; tampilan desktop tidak berubah sama sekali.     */
@media (max-width: 767px) {
  .filters input,
  .filters select,
  .cmp-controls input,
  .cmp-controls select,
  input[type="search"],
  input[type="text"],
  select,
  textarea {
    font-size: 16px;
  }

  .pagination a,
  .pagination span,
  .pager button,
  .pager a,
  .kat-chips a,
  .btn-reset,
  .btn-compare,
  .side-cta .btn-compare {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .pagination a,
  .pagination span,
  .pager button,
  .pager a {
    min-width: 44px;
    padding-left: 10px;
    padding-right: 10px;
  }
}


/* ---------- 8. Warna aksen khas Sekolah Terbaik Jakarta ---------- */
:root {
  --red: #0f766e;
  --red-dark: #0b5c55;
}