/*
Theme Name: Skorweb
Theme URI: https://skorweb.id
Author: Skorweb
Author URI: https://skorweb.id
Description: Theme audit & transparansi website untuk skorweb.id — ringan, responsif penuh, dan mendukung mode terang/gelap. Dibangun untuk CPT "website_skor" dari plugin Skorweb Core.
Version: 2.10.3
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: skorweb
*/

/* ==========================================================
   0. FONT (satu file, dipakai hanya untuk judul & angka skor)
   ========================================================== */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/spacegrotesk/v21/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj7oUXskPMBBSSJLm2E.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================
   1. DESIGN TOKENS
   ========================================================== */
:root{
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --container: 1240px;

  --shadow-sm: 0 1px 2px rgba(15, 30, 24, .06);
  --shadow-md: 0 10px 30px -12px rgba(15, 30, 24, .18);
  --shadow-lg: 0 24px 48px -20px rgba(15, 30, 24, .28);

  /* Light mode (default) */
  --bg: #F4F6F3;
  --bg-soft: #EBEFE9;
  --surface: #FFFFFF;
  --surface-2: #F0F3EF;
  --ink: #101A15;
  --ink-muted: #56645C;
  --ink-faint: #8B968E;
  --border: #DCE3DA;
  --border-strong: #C4CFC0;

  --brand: #0F5C52;
  --brand-strong: #0B4038;
  --brand-soft: #E3F0EC;
  --on-brand: #F2FAF7;

  --signal: #C9821F;
  --signal-soft: #FBEDD6;

  --good: #16815A;
  --good-soft: #E1F3EA;
  --warn: #C9821F;
  --warn-soft: #FBEDD6;
  --bad: #C4402F;
  --bad-soft: #FBE4E0;

  --focus: #2FBFA0;
  color-scheme: light;
}

:root[data-theme="dark"]{
  --bg: #0C1613;
  --bg-soft: #0A1210;
  --surface: #12201B;
  --surface-2: #17271F;
  --ink: #EAF2ED;
  --ink-muted: #9DB1A5;
  --ink-faint: #6C8378;
  --border: #21332B;
  --border-strong: #2C4137;

  --brand: #35C9A8;
  --brand-strong: #BFF1E3;
  --brand-soft: #16332C;
  --on-brand: #04211B;

  --signal: #EAB05B;
  --signal-soft: #2E2417;

  --good: #34C98F;
  --good-soft: #143026;
  --warn: #EAB05B;
  --warn-soft: #2E2417;
  --bad: #EC7E6A;
  --bad-soft: #331C18;

  --focus: #35C9A8;
  color-scheme: dark;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, .5);
  --shadow-lg: 0 24px 48px -20px rgba(0, 0, 0, .6);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #0C1613;
    --bg-soft: #0A1210;
    --surface: #12201B;
    --surface-2: #17271F;
    --ink: #EAF2ED;
    --ink-muted: #9DB1A5;
    --ink-faint: #6C8378;
    --border: #21332B;
    --border-strong: #2C4137;
    --brand: #35C9A8;
    --brand-strong: #BFF1E3;
    --brand-soft: #16332C;
    --on-brand: #04211B;
    --signal: #EAB05B;
    --signal-soft: #2E2417;
    --good: #34C98F;
    --good-soft: #143026;
    --warn: #EAB05B;
    --warn-soft: #2E2417;
    --bad: #EC7E6A;
    --bad-soft: #331C18;
    --focus: #35C9A8;
    color-scheme: dark;
  }
}

/* ==========================================================
   2. RESET & BASE
   ========================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s ease, color .2s ease;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1em; color: var(--ink-muted); }
:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
::selection{ background: var(--brand); color: var(--on-brand); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.container{ max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.skip-link{ position: absolute; left: -9999px; top: 0; background: var(--brand); color: var(--on-brand); padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 2000; }
.skip-link:focus{ left: 0; }

.section{ padding: 64px 0; }
.section--tight{ padding: 40px 0; }
.section-head{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 32px; flex-wrap: wrap;
}
.section-head h2{ font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); margin-bottom: 6px; }
.section-head p{ margin: 0; font-size: .95rem; }
.section-link{
  font-weight: 600; font-size: .9rem; color: var(--brand);
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.section-link svg{ width: 16px; height: 16px; transition: transform .18s ease; }
.section-link:hover svg{ transform: translateX(3px); }

.eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand-soft); color: var(--brand-strong);
  font-size: .8rem; font-weight: 600; padding: 6px 14px;
  border-radius: 999px; border: 1px solid var(--border);
}
.eyebrow .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }

/* ==========================================================
   3. GRID / LAYOUT HELPERS
   ========================================================== */
.grid{ display: grid; gap: 24px; }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-stats{ grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1080px){
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .grid-4, .grid-3, .grid-2, .grid-stats{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 480px){
  .grid-4, .grid-3, .grid-2{ grid-template-columns: 1fr; }
  .grid-stats{ grid-template-columns: repeat(2, 1fr); }
}

.flex{ display: flex; }
.items-center{ align-items: center; }
.justify-between{ justify-content: space-between; }
.gap-8{ gap: 8px; }
.gap-12{ gap: 12px; }

/* ==========================================================
   4. BUTTONS
   ========================================================== */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: .92rem;
  border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  line-height: 1.2;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background: var(--brand-strong); color: var(--on-brand); box-shadow: var(--shadow-md); }
.btn-ghost{ background: transparent; border-color: var(--border-strong); color: var(--ink); }
.btn-ghost:hover{ border-color: var(--brand); color: var(--brand); }
.btn-sm{ padding: 8px 16px; font-size: .82rem; }
.btn-block{ width: 100%; }
.btn[disabled]{ opacity: .6; cursor: not-allowed; }

/* ==========================================================
   5. HEADER
   ========================================================== */
.site-header{
  position: sticky; top: 0; z-index: 1000;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.header-inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 72px;
}
.site-branding{ display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.brand{ display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.brand-mark{
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(145deg, var(--brand), var(--brand-strong));
  display: flex; align-items: center; justify-content: center;
  color: var(--on-brand); font-weight: 700; font-size: .8rem;
  font-family: var(--font-display);
}
.brand small{ color: var(--brand); }
.brand-logo{ display: flex; align-items: center; line-height: 0; }
.brand-logo img{ max-height: 44px; width: auto; display: block; }
.brand-tagline{ font-size: .68rem; font-weight: 500; color: var(--ink-faint); line-height: 1.2; }

.main-navigation .nav-menu{
  display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0;
}
.main-navigation .nav-menu li a{
  color: var(--ink-muted); font-weight: 500; font-size: .93rem; transition: color .15s ease;
}
.main-navigation .nav-menu li a:hover,
.main-navigation .nav-menu li.current-menu-item > a{ color: var(--brand); }

.header-actions{ display: flex; align-items: center; gap: 10px; }
.icon-btn{
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.icon-btn:hover{ border-color: var(--brand); color: var(--brand); }
.icon-btn svg{ width: 18px; height: 18px; }
.theme-toggle .icon-moon{ display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun{ display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display: block; }

.mobile-menu-toggle{
  display: none; background: none; border: 1px solid var(--border); border-radius: 10px;
  width: 40px; height: 40px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.mobile-menu-toggle span{ width: 18px; height: 2px; background: var(--ink); transition: all .25s ease; }

/* --- Search overlay (dipicu oleh tombol kaca pembesar di header) --- */
.search-overlay{
  position: fixed; inset: 0; z-index: 1500;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 14vh 20px 20px;
}
.search-overlay.hidden{ display: none; }
.search-overlay__close{
  position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  font-size: 1rem; cursor: pointer;
}
.search-overlay__close:hover{ border-color: var(--brand); color: var(--brand); }
.search-overlay__inner{ width: 100%; max-width: 560px; }
.search-overlay__form{
  display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 8px 8px 8px 20px; box-shadow: var(--shadow-lg);
}
.search-overlay__form svg{ width: 20px; height: 20px; color: var(--ink-faint); flex: none; }
.search-overlay__form input{ flex: 1; border: none; background: transparent; font-size: 1.05rem; padding: 10px 0; color: var(--ink); }
.search-overlay__form input:focus{ outline: none; }
.search-overlay__form input::-webkit-search-cancel-button{ display: none; }
.search-overlay__hint{ text-align: center; margin: 16px 0 0; font-size: .78rem; color: var(--ink-faint); }
.search-overlay__hint kbd{
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px;
  padding: 1px 6px; font-family: var(--font-body); font-size: .75rem;
}

@media (max-width: 860px){
  .mobile-menu-toggle{ display: flex; }
  .main-navigation{
    display: none; position: absolute; top: 72px; left: 0; width: 100%;
    background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md);
    padding: 20px;
  }
  .site-header.nav-open .main-navigation{ display: block; }
  .main-navigation .nav-menu{ flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ==========================================================
   6. HERO + BROWSER MOCKUP (elemen khas — dipakai berulang)
   ========================================================== */
.hero{ padding: 64px 0 20px; overflow: hidden; }
.hero-grid{ display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
@media (max-width: 960px){ .hero-grid{ grid-template-columns: 1fr; } }

.hero-title{ font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); margin: 18px 0 16px; }
.hero-desc{ font-size: 1.05rem; max-width: 52ch; margin-bottom: 28px; }
.hero-cta{ display: flex; gap: 12px; flex-wrap: wrap; }

.hero-search{
  margin-top: 28px; display: flex; gap: 10px; background: var(--surface); border: 1px solid var(--border);
  padding: 6px; border-radius: 999px; box-shadow: var(--shadow-sm); max-width: 460px;
}
.hero-search input{
  flex: 1; border: none; background: transparent; padding: 10px 14px; font-size: .92rem; color: var(--ink);
}
.hero-search input:focus{ outline: none; }
.hero-search button{ border-radius: 999px; }

/* Bingkai browser (dipakai untuk mockup hero & kartu website) */
.browser-frame{
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; position: relative;
}
.browser-frame__bar{
  display: flex; align-items: center; gap: 6px; padding: 10px 12px;
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.browser-frame__bar span{ width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.browser-frame__url{
  margin-left: 8px; font-size: .72rem; color: var(--ink-faint); background: var(--bg-soft);
  padding: 3px 10px; border-radius: 999px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.browser-frame__body{ aspect-ratio: 16/10.5; overflow: hidden; background: var(--bg-soft); }
.browser-frame__body img{ width: 100%; height: 100%; object-fit: cover; object-position: top; }

.hero-mock{ position: relative; }
.hero-mock .browser-frame{ box-shadow: var(--shadow-lg); animation: mock-in .6s cubic-bezier(.2,.8,.2,1) both; }
.hero-mock__chips{ display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.hero-chip{
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 12px; font-size: .78rem; font-weight: 600; color: var(--ink-muted);
  display: flex; align-items: center; gap: 6px; box-shadow: var(--shadow-sm);
}
.hero-chip b{ color: var(--good); font-family: var(--font-display); }

@keyframes mock-in{ from{ opacity: 0; transform: translateY(14px) scale(.98);} to{ opacity: 1; transform: none; } }

/* ==========================================================
   7. SCORE SEAL (elemen khas berulang: badge skor bundar bertakik)
   ========================================================== */
.score-seal{
  --seal-color: var(--good);
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--seal-color);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  font-family: var(--font-display); font-weight: 700; color: var(--seal-color);
  box-shadow: var(--shadow-md);
  font-variant-numeric: tabular-nums;
}
.score-seal span{ font-size: 1.15rem; line-height: 1; }
.score-seal small{ font-size: .5rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-faint); }
.score-seal--sm{ width: 44px; height: 44px; border-width: 2.5px; }
.score-seal--sm span{ font-size: .92rem; }
.score-seal--lg{ width: 92px; height: 92px; border-width: 5px; }
.score-seal--lg span{ font-size: 2rem; }

.score-good{ --seal-color: var(--good); }
.score-warn{ --seal-color: var(--warn); }
.score-bad{ --seal-color: var(--bad); }

/* ==========================================================
   8. STAT CARDS
   ========================================================== */
.stat-card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 22px; position: relative; overflow: hidden;
}
.stat-card::before{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent, var(--brand));
}
.stat-card .stat-label{ font-size: .78rem; font-weight: 600; color: var(--ink-muted); }
.stat-card .stat-value{ font-family: var(--font-display); font-size: 2rem; font-weight: 700; margin-top: 10px; font-variant-numeric: tabular-nums; }
.stat-card .stat-value small{ font-size: 1rem; color: var(--ink-faint); font-weight: 600; }

/* ==========================================================
   9. WEBSITE CARD (kartu utama: latest / top / archive)
   ========================================================== */
.web-card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: visible; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex; flex-direction: column; height: 100%;
}
.web-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.web-card .browser-frame{ border-radius: var(--radius-md) var(--radius-md) 0 0; border-bottom: none; }
.web-card__frame-wrap{ position: relative; }
.web-card__seal{ position: absolute; right: 14px; bottom: -22px; }
.web-card__category{
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: color-mix(in srgb, var(--ink) 78%, transparent); color: #fff;
  font-size: .68rem; font-weight: 600; padding: 4px 10px; border-radius: 999px;
}
.web-card__body{ padding: 28px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.web-card__title{ font-size: 1.02rem; margin-bottom: 2px; }
.web-card__title a{ display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.web-card__title a:hover{ color: var(--brand); }
.web-card__url{ font-size: .78rem; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 14px; }
.web-card__foot{
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; font-size: .78rem;
}
.verified-badge{ display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--good); }
.verified-badge.is-pending{ color: var(--ink-faint); }
.verified-badge svg{ width: 14px; height: 14px; }
.web-card__link{ font-weight: 600; color: var(--brand); display: inline-flex; align-items: center; gap: 4px; }

/* ==========================================================
   10. CATEGORY CHIPS
   ========================================================== */
.chip-row{ display: flex; gap: 10px; flex-wrap: wrap; }
.chip-row[data-chip-collapse]{ flex-wrap: wrap; overflow: hidden; }
.chip--hidden{ display: none !important; }
.chip-toggle{
  border: 1px dashed var(--border-strong); background: transparent; color: var(--brand);
  cursor: pointer; font-family: inherit;
}
.chip-toggle:hover{ background: var(--brand-soft); }
.chip{
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-muted);
  padding: 8px 16px; border-radius: 999px; font-size: .85rem; font-weight: 500; transition: all .15s ease;
}
.chip:hover, .chip.is-active{ border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

/* ==========================================================
   11. FILTER BAR (archive)
   ========================================================== */
.filter-bar{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 18px; display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 14px; align-items: center;
  margin-bottom: 32px;
}
@media (max-width: 720px){ .filter-bar{ grid-template-columns: 1fr; } }
.field{
  position: relative; display: flex; align-items: center;
}
.field svg{ position: absolute; left: 14px; width: 16px; height: 16px; color: var(--ink-faint); }
.field input, .field select{
  width: 100%; border: 1px solid var(--border); background: var(--bg-soft); color: var(--ink);
  border-radius: 12px; padding: 11px 14px 11px 38px; font-size: .9rem;
}
.field select{ padding-left: 14px; appearance: none; }
.field input:focus, .field select:focus{ outline: none; border-color: var(--brand); background: var(--surface); }

/* ==========================================================
   12. PAGE HEADER (archive/single/search generik)
   ========================================================== */
.page-header-banner{ padding: 48px 0 8px; }
.page-header-banner h1{ font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); }

/* Halaman /ulasan saat judul/banner disembunyikan: beri sedikit ruang napas di
   atas filter bar (langsung di bawah header situs) karena page-header-banner
   tidak dirender. */
.section--flush{ padding-top: 32px; }
@media (max-width: 720px){ .section--flush{ padding-top: 40px; } }
.page-header-banner p{ max-width: 60ch; }

/* ==========================================================
   13. BLOG / GENERIC CONTENT CARDS
   ========================================================== */
.post-card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .18s ease, transform .18s ease;
}
.post-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-3px); }
.post-card__thumb{ aspect-ratio: 16/10; overflow: hidden; background: var(--bg-soft); }
.post-card__thumb img{ width: 100%; height: 100%; object-fit: cover; }
.post-card__body{ padding: 20px; flex: 1; display: flex; flex-direction: column; }
.post-card__meta{ font-size: .72rem; font-weight: 600; color: var(--brand); text-transform: none; }
.post-card__title{ font-size: 1.1rem; margin: 8px 0; }
.post-card__title a:hover{ color: var(--brand); }
.post-card__excerpt{ font-size: .88rem; flex: 1; }
.post-card__foot{ margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--ink-faint); }

.content-card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(20px, 4vw, 48px); }
.article-col{ max-width: 74ch; margin-left: auto; margin-right: auto; }
.post-featured-image{ margin: 28px 0; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-soft); }
.post-featured-image img{ width: 100%; height: auto; }
.prose{ color: var(--ink); line-height: 1.8; max-width: 74ch; margin-left: auto; margin-right: auto; }
.prose h2{ font-size: 1.4rem; margin-top: 1.6em; }
.prose h3{ font-size: 1.15rem; margin-top: 1.4em; }
.prose p{ color: var(--ink); }
.prose ul, .prose ol{ padding-left: 1.3em; color: var(--ink); }
.prose img{ border-radius: var(--radius-sm); }
/* Dipakai di page.php & single.php agar konten artikel/page memenuhi lebar box,
   tanpa mengubah .prose yang masih dipakai di tempat lain (mis. Rangkuman Evaluasi audit). */
.prose.prose--full{ max-width: none; }

/* PENTING: .prose.prose--full di atas hanya membatalkan max-width pada DIV PEMBUNGKUS-nya
   sendiri. Kalau konten di dalamnya berasal dari the_content() yang diisi lewat Block Editor
   (Gutenberg), WordPress kerap menyuntikkan style="max-width:...px" inline ATAU class layout
   (mis. is-layout-constrained, wp-block-group, wp-block-post-content) langsung ke elemen-elemen
   DI DALAM konten — itu tidak ikut kebatalkan oleh aturan di atas karena aturan itu cuma
   menyasar div terluarnya. Ini penyebab paling umum kenapa box "Rangkuman Evaluasi" masih
   terlihat sempit walau div pembungkusnya sendiri sudah full width. Aturan di bawah ini
   menembus ke SEMUA elemen turunan supaya benar-benar sejajar penuh dengan card lain
   (Pemeriksaan Teknis Tambahan / Ulasan & Rating) di atas dan bawahnya.
*/
.prose.prose--full > *,
.prose.prose--full.is-layout-constrained > *,
.prose.prose--full .is-layout-constrained > * {
  max-width: none !important;
}
.prose.prose--full [style*="max-width"],
.prose.prose--full .wp-block-group,
.prose.prose--full .wp-block-post-content {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.search-grid{ display: flex; flex-direction: column; gap: 14px; }
.search-item-card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px; }
.search-item-type{ display: inline-block; background: var(--brand-soft); color: var(--brand-strong); font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; }
.search-item-title{ font-size: 1.15rem; margin: 0 0 6px; }
.search-item-link{ color: var(--brand); font-weight: 600; font-size: .85rem; }

/* ==========================================================
   14. PAGINATION
   ========================================================== */
.pagination-wrapper{ margin-top: 44px; display: flex; justify-content: center; }
.pagination-wrapper .page-numbers,
.pager-pill{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 10px; margin: 0 3px;
  border-radius: 12px; color: var(--ink-muted); font-weight: 600; font-size: .85rem;
  border: 1px solid transparent; background: var(--surface);
}
.pagination-wrapper .page-numbers:hover{ border-color: var(--border-strong); }
.pagination-wrapper .page-numbers.current{ background: var(--brand); color: var(--on-brand); }
.pagination-nav{ display: inline-flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--border); padding: 6px; border-radius: 16px; }

/* ==========================================================
   15. SINGLE WEBSITE_SKOR — LAPORAN AUDIT
   ========================================================== */
.report-hero{ position: relative; }
.report-hero .browser-frame{ box-shadow: var(--shadow-md); }
.report-summary{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(20px,3vw,32px); margin-top: -34px; position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}
.report-summary h1{ font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin: 6px 0 4px; }
.report-summary__link{ font-size: .88rem; color: var(--ink-muted); }
.report-summary__score{ display: flex; align-items: center; gap: 16px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 20px; }
.report-summary__score .label{ text-align: right; }
.report-summary__score .label b{ display: block; font-size: .78rem; color: var(--ink-muted); }
.report-summary__score .label small{ font-size: .7rem; color: var(--ink-faint); }
.claim-btn{ font-size: .75rem; font-weight: 700; background: var(--signal-soft); color: var(--signal); border: 1px solid var(--warn); padding: 4px 12px; border-radius: 999px; cursor: pointer; }

.grid-report{ display: grid; grid-template-columns: 2fr 1fr; gap: 32px; }
@media (max-width: 860px){ .grid-report{ grid-template-columns: 1fr; } }

.metric-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 32px 0; }
@media (max-width: 720px){ .metric-grid{ grid-template-columns: repeat(2, 1fr); } }
.metric-card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; text-align: center; }
.metric-card .metric-label{ font-size: .78rem; color: var(--ink-muted); font-weight: 600; }
.metric-card .metric-value{ font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
.metric-card .metric-bar{ height: 6px; border-radius: 999px; background: var(--bg-soft); margin-top: 10px; overflow: hidden; }
.metric-card .metric-bar > span{ display: block; height: 100%; border-radius: 999px; }
.metric-card .metric-note{ font-size: .68rem; color: var(--ink-faint); margin-top: 6px; }

/* Panel "Pemeriksaan Teknis Tambahan" (Security Headers, Domain Age, Blacklist, dst) */
.ext-check-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
@media (max-width: 780px){ .ext-check-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .ext-check-grid{ grid-template-columns: 1fr; } }
.ext-check-item{ background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.ext-check-item__label{ font-size: .72rem; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .02em; }
.ext-check-item__value{ font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.ext-check-item__note{ font-size: .72rem; color: var(--ink-faint); }

.reviews-box{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(18px,3vw,28px); margin-bottom: 32px; }
.review-item{ padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-soft); }
.review-item + .review-item{ margin-top: 12px; }
.review-item__head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 8px; flex-wrap: wrap; }
.review-item__name{ font-weight: 700; font-size: .88rem; }
.review-item__email{ font-size: .72rem; color: var(--ink-faint); margin-left: 6px; }
.stars{ color: var(--warn); font-size: .82rem; letter-spacing: 1px; }
.review-item__text{ font-size: .88rem; color: var(--ink-muted); }
.review-item__date{ font-size: .68rem; color: var(--ink-faint); margin-top: 8px; display: block; }

.review-form{ background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; }
.review-form label{ display: block; font-size: .78rem; font-weight: 700; color: var(--ink-muted); margin-bottom: 5px; }
.review-form input[type=text], .review-form input[type=email], .review-form input[type=tel], .review-form textarea{
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--ink); font-size: .88rem; margin-bottom: 14px;
}
.review-form input:focus, .review-form textarea:focus{ outline: none; border-color: var(--brand); }
.star-input{ display: flex; gap: 4px; font-size: 1.5rem; color: var(--warn); cursor: pointer; user-select: none; margin-bottom: 14px; }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px){ .field-row{ grid-template-columns: 1fr; } }
.alert{ padding: 12px 16px; border-radius: 12px; font-size: .85rem; font-weight: 500; margin-bottom: 14px; }
.alert-success{ background: var(--good-soft); color: var(--good); border: 1px solid var(--good); }
.alert-error{ background: var(--bad-soft); color: var(--bad); border: 1px solid var(--bad); }
.hidden{ display: none !important; }
.honeypot{ position: absolute; left: -9999px; }

/* ==========================================================
   HALAMAN KONTAK (/kontak)
   ========================================================== */
.contact-map-full{ width: 100%; line-height: 0; }
.contact-info-list{ list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.contact-info-list li{ display: flex; align-items: flex-start; gap: 12px; font-size: .9rem; color: var(--ink-muted); }
.contact-info-list a{ color: var(--ink-muted); }
.contact-info-list a:hover{ color: var(--brand); }
.contact-info-icon{
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
}
.contact-info-icon svg{ width: 18px; height: 18px; }
.contact-social-row{ display: flex; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.contact-social-link{
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border);
  color: var(--ink-muted); display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s ease;
}
.contact-social-link svg{ width: 18px; height: 18px; }
.contact-social-link:hover{ border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }


/* ==========================================================
   16. MODAL
   ========================================================== */
.modal-overlay{
  position: fixed; inset: 0; background: color-mix(in srgb, black 55%, transparent);
  backdrop-filter: blur(3px); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-box{
  background: var(--surface); border-radius: var(--radius-lg); max-width: 440px; width: 100%;
  padding: 28px; position: relative; box-shadow: var(--shadow-lg); border: 1px solid var(--border);
}
.modal-close{ position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 1.1rem; color: var(--ink-faint); cursor: pointer; }
.modal-close:hover{ color: var(--ink); }

/* ==========================================================
   17. CTA BAND
   ========================================================== */
.cta-band{
  background: linear-gradient(135deg, var(--brand-strong), var(--brand));
  border-radius: var(--radius-lg); padding: clamp(28px,5vw,52px); color: var(--on-brand);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cta-band h1{ color: var(--on-brand); margin-bottom: 6px; } /* judul di halaman Laporan Pengelola */
.cta-band h2{ color: var(--on-brand); margin-bottom: 6px; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.cta-band p{ color: color-mix(in srgb, var(--on-brand) 80%, transparent); margin: 0; max-width: 46ch; }
.cta-band .btn-primary{ background: var(--on-brand); color: var(--brand-strong); }
.cta-band .btn-primary:hover{ background: color-mix(in srgb, var(--on-brand) 90%, var(--brand-strong)); }

/* ==========================================================
   18. EMPTY STATE
   ========================================================== */
.empty-state{ background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 56px 20px; text-align: center; }
.empty-state svg{ width: 44px; height: 44px; color: var(--ink-faint); margin-bottom: 12px; }
.empty-state h3{ font-size: 1.1rem; }
.empty-state p{ margin-bottom: 18px; }

/* ==========================================================
   18b. LAST-UPDATED NOTE + SHARE ROW + "CARI WEBSITE LAIN" BOX
   (halaman single laporan audit website_skor)
   ========================================================== */
.report-updated-note{
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; line-height: 1.4; color: var(--ink-faint); margin-top: 8px;
}
.report-updated-note svg{ width: 14px; height: 14px; max-width: 14px; max-height: 14px; flex: none; }

/* Baris share: diletakkan di bawah "Rangkuman Evaluasi", di atas kotak Ulasan & Rating */
.share-row{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 32px;
  padding: 14px clamp(18px, 3vw, 28px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.share-row__label{ font-size: .82rem; font-weight: 600; color: var(--ink-muted); margin-right: 4px; }
@media (max-width: 480px){ .share-row__label{ flex: 0 0 100%; margin-right: 0; } }
.share-btn{ text-decoration: none; flex: none; }
.share-btn svg{ width: 17px; height: 17px; max-width: 17px; max-height: 17px; }
.share-btn--whatsapp:hover{ border-color: #25D366; color: #25D366; }
.share-btn--threads:hover{ border-color: var(--ink); color: var(--ink); }
.share-btn--x:hover{ border-color: var(--ink); color: var(--ink); }
.share-btn--linkedin:hover{ border-color: #0A66C2; color: #0A66C2; }

/* Share di single artikel: beri jarak dari kartu artikel di atasnya */
.share-row--post{ margin: 24px 0 0; }

/* Navigasi artikel sebelumnya / selanjutnya (paling bawah single artikel) */
.post-nav{
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin: 24px 0 0;
}
.post-nav__item{
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px clamp(18px, 3vw, 24px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  color: var(--ink); text-decoration: none; min-width: 0;
  transition: border-color .15s ease, box-shadow .18s ease, transform .18s ease;
}
.post-nav__item:hover{ border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.post-nav__item--next{ grid-column: 2; text-align: right; align-items: flex-end; }
.post-nav__label{ font-size: .74rem; font-weight: 700; color: var(--brand); letter-spacing: .01em; }
.post-nav__title{
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-nav__item:hover .post-nav__title{ color: var(--brand); }
.post-nav__date{ font-size: .72rem; color: var(--ink-faint); }
@media (max-width: 640px){
  .post-nav{ grid-template-columns: 1fr; }
  .post-nav__item--next{ grid-column: auto; text-align: left; align-items: flex-start; }
}

.search-more-box{ text-align: center; padding: clamp(28px, 4vw, 40px) clamp(20px, 4vw, 32px); }
.search-more-box h3{ margin-bottom: 20px; }
.search-more-box p{ margin: 0 auto 20px; max-width: 46ch; }
.search-more-box .hero-search{ margin: 0 auto; max-width: 460px; }

/* ==========================================================
   19. FOOTER
   ========================================================== */
.site-footer{ border-top: 1px solid var(--border); background: var(--surface); padding: 40px 0 28px; margin-top: 60px; }
.footer-top{ display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.footer-brand p{ max-width: 40ch; margin-top: 10px; font-size: .88rem; }
.footer-navigation .footer-menu{ display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.footer-navigation .footer-menu li a{ font-size: .85rem; color: var(--ink-muted); }
.footer-navigation .footer-menu li a:hover{ color: var(--brand); }
.footer-bottom{ display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; font-size: .78rem; color: var(--ink-faint); }

/* ==========================================================
   20. BACK TO TOP
   ========================================================== */
#skorweb-back-to-top{
  position: fixed; bottom: 24px; right: 24px; z-index: 900; width: 44px; height: 44px;
  background: var(--ink); color: var(--bg); border: 1px solid var(--border-strong); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(15px);
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
#skorweb-back-to-top.show{ opacity: 1; visibility: visible; transform: translateY(0); }
#skorweb-back-to-top:hover{ background: var(--brand); color: var(--on-brand); }

/* ==========================================================
   21. UTILITAS KECIL
   ========================================================== */
.mt-0{ margin-top: 0; }
.text-center{ text-align: center; }
.muted{ color: var(--ink-muted); }
.sr-only{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }


/* ==========================================================================
   19. PERINGKAT WEBSITE (page-peringkat.php + template-parts/ranking-row.php)
   Tampilan daftar bergaya tabel: Peringkat | Website (thumbnail, URL, kategori) |
   Skor | Rincian (4 bar mini) | Rating | Diperbarui. Di layar sempit tiap baris
   berubah menjadi kartu bertumpuk.
   ========================================================================== */
.rank-intro{ max-width: 720px; }
.rank-intro p{ margin: 0 0 .6em; }
.rank-cats{ margin-bottom: 18px; }
.rank-summary{
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 4px 24px; margin-bottom: 14px; font-size: .85rem;
}
.rank-legend-wrap{ position: relative; display: inline-flex; }
.rank-legend-btn{
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink-muted); font: 700 .72rem/1 var(--font-body);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.rank-legend-btn:hover, .rank-legend-btn[aria-expanded="true"]{
  color: var(--brand); border-color: var(--brand);
}
.rank-legend-pop{
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  width: 260px; font-size: .78rem; line-height: 1.45; color: var(--ink-muted);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  padding: 10px 12px;
}
@media (max-width: 480px){
  .rank-legend-pop{ right: auto; left: 0; width: 220px; }
}

/* Kolom dipakai bersama oleh header & baris supaya selalu sejajar */
.rank-head,
.rank-row{
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 72px 232px 118px 104px;
  gap: 16px; align-items: center;
  padding: 14px 22px;
}
.rank-head{
  background: var(--surface-2);
  border: 1px solid var(--border); border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font-family: var(--font-display); font-size: .74rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted);
}
.rank-head span:nth-child(1),
.rank-head span:nth-child(3){ text-align: center; }

.rank-list{
  list-style: none; margin: 0; padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
}
.rank-row{ border-top: 1px solid var(--border); transition: background .15s ease; }
.rank-row:first-child{ border-top: 0; }
.rank-row:hover{ background: var(--surface-2); }
.rank-cell{ min-width: 0; }

/* -- Nomor peringkat (top 3 berwarna medali) -- */
.rank-cell--rank{ display: flex; justify-content: center; }
.rank-num{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 6px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; color: var(--ink-muted);
}
.rank-num--1{ background: #F6E3A1; color: #6E5000; }
.rank-num--2{ background: #E2E8E4; color: #44514A; }
.rank-num--3{ background: #F1D3BB; color: #74401B; }

/* -- Website: thumbnail + judul + URL + tag -- */
.rank-cell--site{ display: flex; align-items: center; gap: 14px; }
.rank-thumb{
  flex: none; display: block; width: 112px; height: 84px;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--surface-2);
}
.rank-thumb img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.rank-site{ min-width: 0; }
.rank-site__title{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.3;
  color: var(--ink); text-decoration: none;
}
.rank-site__title:hover{ color: var(--brand); }
.rank-site__url{
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  margin-top: 2px; font-size: .8rem; color: var(--ink-muted); text-decoration: none;
  overflow-wrap: anywhere;
}
.rank-site__url:hover{ color: var(--brand); text-decoration: underline; }
.rank-site__url svg{ flex: none; opacity: .7; }
.rank-site__tags{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; }
.rank-cat{
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
}
.rank-site__tags .verified-badge{ font-size: .72rem; }

/* -- Skor total -- */
.rank-cell--score{ display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* -- Rincian: 4 bar mini (2 x 2) -- */
.rank-cell--metrics{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.rank-metric{
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 22px;
  align-items: center; gap: 6px; font-size: .72rem;
}
.rank-metric__label{ color: var(--ink-faint); font-weight: 600; }
.rank-metric__bar{ height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.rank-metric__bar i{ display: block; height: 100%; border-radius: inherit; background: var(--seal-color, var(--border-strong)); }
.rank-metric b{ text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.rank-metric.is-empty b{ color: var(--ink-faint); }

/* -- Rating & tanggal -- */
.rank-rating{ display: inline-flex; align-items: baseline; gap: 5px; font-size: .88rem; }
.rank-rating__star{ color: var(--signal); }
.rank-rating small{ color: var(--ink-faint); font-size: .74rem; }
.rank-muted{ font-size: .78rem; color: var(--ink-faint); }
.rank-cell--updated{ font-size: .8rem; color: var(--ink-muted); }
.rank-cell--updated time{ display: block; }
.rank-detail{ display: inline-block; margin-top: 4px; font-size: .78rem; font-weight: 600; color: var(--brand); text-decoration: none; }
.rank-detail:hover{ text-decoration: underline; }

/* -- Layar menengah: sembunyikan kolom "Diperbarui" -- */
@media (max-width: 1100px){
  .rank-head,
  .rank-row{ grid-template-columns: 56px minmax(0, 1fr) 68px 204px 104px; padding-left: 18px; padding-right: 18px; }
  .rank-head span:nth-child(6),
  .rank-cell--updated{ display: none; }
}

/* -- Layar sempit: tiap baris jadi kartu bertumpuk -- */
@media (max-width: 860px){
  .rank-head{ display: none; }
  .rank-list{ border-radius: var(--radius-lg); }
  .rank-row{
    grid-template-columns: 40px minmax(0, 1fr) 52px;
    grid-template-areas:
      "rank    site    score"
      ".       metrics metrics"
      ".       rating  updated";
    gap: 12px 12px; padding: 16px;
  }
  .rank-cell--rank{ grid-area: rank; align-self: start; padding-top: 2px; }
  .rank-cell--site{ grid-area: site; }
  .rank-cell--score{ grid-area: score; align-self: start; }
  .rank-cell--metrics{ grid-area: metrics; }
  .rank-cell--rating{ grid-area: rating; align-self: center; }
  .rank-cell--updated{
    grid-area: updated; display: flex; align-items: center; justify-content: flex-end; gap: 12px; text-align: right;
  }
  .rank-cell--updated time{ display: inline; }
  .rank-detail{ margin-top: 0; }
  .rank-num{ min-width: 32px; height: 32px; font-size: .95rem; }
  .rank-cell--score .trend{ padding: 2px 6px; font-size: .68rem; }
}
/* -- Ponsel: nomor peringkat jadi lencana di sudut thumbnail supaya kolom judul lebih lebar -- */
@media (max-width: 560px){
  .rank-row{
    position: relative;
    grid-template-columns: minmax(0, 1fr) 52px;
    grid-template-areas:
      "site    score"
      "metrics metrics"
      "rating  updated";
    padding: 16px 14px;
  }
  .rank-cell--rank{ position: absolute; top: 8px; left: 8px; z-index: 2; padding: 0; }
  .rank-num{ min-width: 26px; height: 26px; padding: 0 4px; font-size: .78rem; box-shadow: 0 0 0 3px var(--surface); }
  .rank-num:not(.rank-num--1):not(.rank-num--2):not(.rank-num--3){ background: var(--surface-2); color: var(--ink); }
  .rank-thumb{ width: 76px; height: 57px; }
  .rank-cell--site{ gap: 12px; }
  .rank-site__title{ font-size: .96rem; }
  .rank-cat{ white-space: nowrap; }
  .rank-cell--updated time{ display: none; }
}


/* ==========================================================================
   20. TREN & RIWAYAT SKOR (lencana ▲▼＝, kartu grafik di halaman ulasan)
   Data dari plugin Skorweb Core: includes/score-history.php
   ========================================================================== */
.trend{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-family: var(--font-display); font-size: .72rem; font-weight: 700; line-height: 1.4;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.trend__icon{ flex: none; }
.trend--up{ color: var(--good); background: var(--good-soft); }
.trend--down{ color: var(--bad); background: var(--bad-soft); }
.trend--same{ color: var(--ink-muted); background: var(--surface-2); }
.trend--new{ color: var(--ink-faint); background: transparent; border: 1px solid var(--border); font-weight: 600; }

/* Di kotak "Skor Keseluruhan" halaman ulasan */
.trend-wrap{ display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-top: 8px; }
.trend-wrap:empty{ display: none; }
.trend-note{ font-size: .66rem; color: var(--ink-faint); font-weight: 400; }

/* Kartu Riwayat Skor */
.history-card{ margin-bottom: 32px; }
.history-card__sub{ margin: 4px 0 18px; font-size: .85rem; }
.hist-chart{ display: block; width: 100%; height: auto; max-height: 170px; }
.hist-chart__grid{ stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 4 4; }
.hist-chart__line{ fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.hist-chart__dot{ fill: var(--surface); stroke: var(--brand); stroke-width: 2; }
.hist-chart__dot.is-last{ fill: var(--brand); }
.hist-chart__val{ font-family: var(--font-display); font-size: 12.5px; font-weight: 700; fill: var(--ink-muted); }
.hist-caption{ margin: 4px 0 18px; font-size: .72rem; color: var(--ink-faint); }
.hist-table-wrap{ overflow-x: auto; }
.hist-table{ width: 100%; min-width: 460px; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.hist-table th{
  padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-display); font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-muted);
}
.hist-table td{ padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--border); color: var(--ink); }
.hist-table th:first-child,
.hist-table td:first-child{ text-align: left; white-space: nowrap; }
.hist-table tbody tr:last-child td{ border-bottom: 0; }
.hist-delta{ font-weight: 700; }
.hist-delta.is-up{ color: var(--good); }
.hist-delta.is-down{ color: var(--bad); }
.hist-delta.is-same,
.hist-delta.is-none{ color: var(--ink-faint); font-weight: 600; }


/* ==========================================================================
   22. BANNER PERSETUJUAN COOKIE (template-parts/cookie-banner.php)
   Bar mengambang di bawah layar. Memakai token tema, jadi otomatis ikut mode
   terang/gelap. Perilakunya diatur di js/theme.js.
   ========================================================================== */
.cookie-banner{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
  padding: 12px; pointer-events: none;
  animation: cookie-in .35s cubic-bezier(.2,.8,.2,1) both;
}
.cookie-banner[hidden]{ display: none; }
.cookie-banner:focus{ outline: none; }
.cookie-banner__inner{
  pointer-events: auto; max-width: 960px; margin: 0 auto;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 14px 18px;
  display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap;
  max-height: calc(100vh - 24px); overflow-y: auto;
}
.cookie-banner__text{ flex: 1 1 340px; min-width: 0; }
.cookie-banner__title{ display: block; font-family: var(--font-display); font-size: .98rem; margin-bottom: 2px; }
.cookie-banner__text p{ margin: 0; font-size: .82rem; line-height: 1.5; color: var(--ink-muted); }
.cookie-banner__text a{ color: var(--brand); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.cookie-banner__actions{ display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
.cookie-banner__actions .btn{ white-space: nowrap; }

.cookie-banner__prefs{
  flex: 1 1 100%; display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border);
}
.cookie-banner__prefs[hidden]{ display: none; }
.cookie-opt{ display: flex; align-items: flex-start; gap: 10px; font-size: .82rem; line-height: 1.45; color: var(--ink-muted); cursor: pointer; }
.cookie-opt input{ margin-top: 3px; width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--brand); }
.cookie-opt b{ color: var(--ink); }
.cookie-opt em{ font-style: normal; color: var(--ink-faint); }

.footer-cookie-btn{
  background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.footer-cookie-btn:hover{ color: var(--brand); }

/* Geser tombol "kembali ke atas" di atas banner selama banner tampil (--cookie-h diisi JS) */
#skorweb-back-to-top{ bottom: calc(24px + var(--cookie-h, 0px)); }

@keyframes cookie-in{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: translateY(0); } }

@media (max-width: 560px){
  .cookie-banner{ padding: 8px; }
  .cookie-banner__inner{ padding: 12px 14px; }
  .cookie-banner__actions{ display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .cookie-banner__actions .btn[data-cookie-action="accept"]{ grid-column: 1 / -1; }
}
@media print{ .cookie-banner{ display: none !important; } }


/* ==========================================================================
   23. HALAMAN 404 (404.php)
   Angka 404 besar bergradasi, peringatan singkat di bawahnya, lalu tombol ke
   beranda. Memakai token tema, jadi otomatis ikut mode terang/gelap.
   ========================================================================== */
.error-404{
  position: relative; overflow: hidden;
  min-height: min(68vh, 640px); display: flex; align-items: center;
  padding: 56px 0;
}
/* Cahaya lembut di belakang angka */
.error-404::before{
  content: ""; position: absolute; left: 50%; top: 42%; width: min(720px, 90vw); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--brand-soft), transparent);
  opacity: .9;
}
.error-404 .container{ position: relative; width: 100%; }
.error-404__inner{
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px;
  animation: error-404-in .5s cubic-bezier(.2,.8,.2,1) both;
}
.error-404__code{
  margin: 0; font-family: var(--font-display); font-weight: 700; line-height: .9; letter-spacing: -.04em;
  font-size: clamp(6.5rem, 3rem + 20vw, 15rem);
  color: var(--brand); /* cadangan bila background-clip:text tak didukung */
}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .error-404__code{
    background: linear-gradient(135deg, var(--brand) 25%, var(--signal) 115%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
.error-404__notice{
  display: inline-flex; align-items: center; gap: 10px; margin: 0; max-width: 44em; text-wrap: balance;
  padding: 12px 20px; border-radius: var(--radius-md); text-align: left;
  background: var(--warn-soft); color: var(--ink); border: 1px solid var(--border-strong);
  font-size: 1rem; line-height: 1.45;
}
.error-404__notice svg{ flex: 0 0 auto; color: var(--warn); }
.error-404 .btn{ margin-top: 4px; padding: 13px 26px; }

@keyframes error-404-in{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: translateY(0); } }

@media (max-width: 480px){
  .error-404{ padding: 40px 0; }
  .error-404__notice{ font-size: .95rem; padding: 11px 16px; }
}