:root{
/* ---- Base ramps ---------------------------------------------------- */
/* Onyx — brand ground, matching the black plate of the logo badge. Never pure #000. */
--onyx-950:#08080A;--onyx-900:#101013;--onyx-850:#16161A;--onyx-800:#1D1D22;--onyx-700:#2A2A31;--onyx-600:#3A3A42;--onyx-500:#4E4E58;--onyx-400:#6E6E78;
/* Emas — gold bevel from the logo. Ornament, hairlines on dark, the seam, active nav underline. */
--gold-600:#A87C2E;--gold-500:#D9A445;--gold-400:#E8BE6E;--gold-300:#F0D49B;--gold-200:#F6E4C2;--gold-100:#FBF2DF;
/* Merah — the logo red. The action colour and the live-state colour. */
--red-800:#8E0B12;--red-700:#A50D14;--red-600:#D2121C;--red-500:#E5121D;--red-400:#F23A44;--red-200:#F8B4B8;--red-100:#FCE4E6;
/* Legacy aliases — kept so older component code and consuming projects keep compiling.
   Prefer --onyx-*, --red-* in new work. */
--crimson-700:var(--red-800);--crimson-600:var(--red-700);--crimson-500:var(--red-500);--crimson-200:var(--red-200);--crimson-100:var(--red-100);
--navy-950:var(--onyx-950);--navy-900:var(--onyx-900);--navy-850:var(--onyx-850);--navy-800:var(--onyx-800);--navy-700:var(--onyx-700);--navy-600:var(--onyx-600);--navy-500:var(--onyx-500);--navy-400:var(--onyx-400);
--orange-700:var(--red-700);--orange-600:var(--red-600);--orange-500:var(--red-600);--orange-400:var(--red-400);--orange-200:var(--red-200);--orange-100:var(--red-100);
/* Semantic support */
--green-600:#1B7A4B;--green-500:#249A5F;--green-100:#DCF1E5;
/* Kertas — light content ground */
--paper-50:#FBFAF8;--paper-100:#F4F2EE;--paper-200:#E7E4DE;--paper-300:#D3CFC7;
/* Tinta — text on paper */
--ink-900:#111114;--ink-800:#1D1D21;--ink-700:#33333A;--ink-500:#5E5E67;--ink-400:#8C8C95;--ink-300:#B6B6BD;
--white:#FFFFFF;--black:#000000;

/* ---- Semantic aliases ---------------------------------------------- */
--surface-page:var(--paper-50);
--surface-card:var(--white);
--surface-sunken:var(--paper-100);
--surface-control:var(--white);
--fill-strong:var(--onyx-900);
--fill-strong-fg:var(--white);
--tint-info:var(--paper-100);
--tint-info-fg:var(--onyx-800);
--tint-info-bd:var(--border-strong);
--tint-success:var(--green-100);
--tint-success-fg:var(--green-600);
--tint-success-bd:#B9E0CA;
--tint-warning:var(--gold-100);
--tint-warning-fg:var(--gold-600);
--tint-warning-bd:var(--gold-200);
--tint-danger:var(--red-100);
--tint-danger-fg:var(--red-700);
--tint-danger-bd:var(--red-200);
/* Chrome / hero / footer — these flip with the theme too. */
--surface-chrome:var(--white);
--surface-inverse:var(--paper-100);
--surface-inverse-raised:var(--white);
--surface-on-chrome:rgba(17,17,20,.04);
--hero-field:var(--paper-200);
--hero-stripe:rgba(17,17,20,.05);

--text-strong:var(--ink-900);
--text-body:var(--ink-700);
--text-muted:var(--ink-500);
--text-faint:var(--ink-400);
--text-on-dark:var(--ink-900);
--text-on-dark-muted:var(--ink-500);
--text-brand:var(--gold-600);
--text-brand-on-dark:var(--gold-600);
--text-link:var(--red-600);
--text-link-hover:var(--red-700);

--border-hairline:var(--paper-200);
--border-strong:var(--paper-300);
--border-brand:var(--gold-500);
--border-on-dark:var(--paper-200);
--border-on-dark-strong:var(--paper-300);

--action-primary:var(--red-600);
--action-primary-hover:var(--red-500);
--action-primary-active:var(--red-700);
--action-primary-fg:var(--white);
--action-secondary-fg:var(--ink-900);
--action-danger:var(--red-800);
--action-disabled:var(--paper-200);
--action-disabled-fg:var(--ink-400);

--status-live:var(--red-500);
--status-open:var(--green-600);
--status-soon:var(--gold-600);
--status-closed:var(--ink-400);
--status-live-bg:var(--red-100);
--status-open-bg:var(--green-100);
--status-soon-bg:var(--gold-100);
--status-closed-bg:var(--paper-100);

--focus-ring:var(--gold-400);
--overlay-scrim:rgba(8,8,10,.72);

/* Gold seam — the bevel band of the logo badge, reduced to a divider */
--seam-gold:linear-gradient(90deg,transparent,var(--gold-500) 12%,var(--gold-300) 50%,var(--gold-500) 88%,transparent);
}

/* ---- Dark theme -----------------------------------------------------
   Only semantic aliases flip - the base ramps never change. Chrome, hero and
   footer flip too, so the whole above-the-fold changes. Applied via
   <html data-theme="dark">; also works on any subtree for side-by-side specimens. */
[data-theme="dark"]{
--surface-page:var(--onyx-900);
--surface-card:var(--onyx-850);
--surface-sunken:var(--onyx-800);
--surface-control:var(--onyx-800);
--surface-chrome:var(--onyx-950);
--surface-inverse:var(--onyx-900);
--surface-inverse-raised:var(--onyx-850);
--surface-on-chrome:rgba(255,255,255,.05);
--hero-field:var(--onyx-800);
--hero-stripe:rgba(255,255,255,.03);

--text-strong:#F4F2EE;
--text-body:#D0D0D8;
--text-muted:#9A9AA4;
--text-faint:#74747E;
--text-brand:var(--gold-400);
--text-on-dark:#F4F2EE;
--text-on-dark-muted:#A0A0A8;
--text-brand-on-dark:var(--gold-400);
--text-link:var(--red-400);
--text-link-hover:var(--red-200);

--border-hairline:rgba(255,255,255,.10);
--border-strong:rgba(255,255,255,.22);
--border-on-dark:rgba(217,164,69,.24);
--border-on-dark-strong:rgba(217,164,69,.48);

--fill-strong:var(--gold-500);
--fill-strong-fg:var(--onyx-950);
--action-secondary-fg:#F4F2EE;

--status-live:var(--red-400);
--status-open:#41BE83;
--status-soon:var(--gold-400);
--status-closed:var(--ink-400);
--status-live-bg:rgba(229,18,29,.16);
--status-open-bg:rgba(27,122,75,.22);
--status-soon-bg:rgba(217,164,69,.15);
--status-closed-bg:rgba(255,255,255,.07);

--tint-info:rgba(255,255,255,.06);
--tint-info-fg:#D0D0D8;
--tint-info-bd:rgba(255,255,255,.14);
--tint-success:rgba(27,122,75,.20);
--tint-success-fg:#41BE83;
--tint-success-bd:rgba(65,190,131,.36);
--tint-warning:rgba(217,164,69,.15);
--tint-warning-fg:var(--gold-400);
--tint-warning-bd:rgba(217,164,69,.34);
--tint-danger:rgba(229,18,29,.16);
--tint-danger-fg:var(--red-400);
--tint-danger-bd:rgba(242,58,68,.38);

--shadow-card:0 1px 2px rgba(0,0,0,.4);
--shadow-card-hover:0 8px 22px rgba(0,0,0,.5);
--overlay-scrim:rgba(0,0,0,.78);
}

:root{
--font-display:"Saira Condensed","Arial Narrow",Helvetica,sans-serif;
--font-body:"Figtree","Helvetica Neue",Helvetica,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
--font-serif:"Bitter",Georgia,"Times New Roman",serif;
--font-script:"MonteCarlo","Bitter",Georgia,cursive;

/* Ramp — 16px root */
--fs-2xs:11px; /* @kind font */
--fs-xs:12px; /* @kind font */
--fs-sm:13px; /* @kind font */
--fs-base:15px; /* @kind font */
--fs-md:17px; /* @kind font */
--fs-lg:20px; /* @kind font */
--fs-xl:24px; /* @kind font */
--fs-2xl:30px; /* @kind font */
--fs-3xl:38px; /* @kind font */
--fs-4xl:48px; /* @kind font */
--fs-5xl:62px; /* @kind font */
--fs-6xl:78px; /* @kind font */
--fs-display:clamp(44px,6.2vw,88px); /* @kind font */
--fs-headline:clamp(28px,3.4vw,46px); /* @kind font */
--fs-hero-script:clamp(38px,10vw,128px); /* @kind font */

--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */
--fw-black:800; /* @kind font */

--lh-tight:0.96; /* @kind font */
--lh-snug:1.12; /* @kind font */
--lh-heading:1.2; /* @kind font */
--lh-body:1.65; /* @kind font */
--lh-loose:1.8; /* @kind font */

--tr-display:-0.015em; /* @kind font */
--tr-normal:0; /* @kind font */
--tr-wide:0.04em; /* @kind font */
--tr-eyebrow:0.18em; /* @kind font */
--tr-tab:0.06em; /* @kind font */

/* Roles */
--type-display-family:var(--font-display); /* @kind font */
--type-display-weight:var(--fw-black); /* @kind font */
--type-headline-weight:var(--fw-bold); /* @kind font */
--type-title-family:var(--font-display); /* @kind font */
--type-body-family:var(--font-body); /* @kind font */
--type-eyebrow-size:var(--fs-2xs); /* @kind font */
--type-eyebrow-tracking:var(--tr-eyebrow); /* @kind font */
--type-data-family:var(--font-mono); /* @kind font */
--measure-body:66ch; /* @kind other */
--measure-lead:52ch; /* @kind other */
}

:root{
--sp-0:0px; /* @kind spacing */
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;
--sp-7:32px;--sp-8:40px;--sp-9:48px;--sp-10:64px;--sp-11:80px;--sp-12:96px;--sp-13:128px;

--container-max:1240px;
--container-narrow:760px;
--container-pad:clamp(16px,4vw,40px);
--grid-gutter:24px;
--section-y:var(--sp-11);
--section-y-tight:var(--sp-9);
--card-pad:var(--sp-6);
--card-pad-lg:var(--sp-7);
--control-h-sm:32px;--control-h-md:40px;--control-h-lg:48px;
--bp-sm:640px;--bp-md:900px;--bp-lg:1160px;
}

:root{
--r-none:0px; /* @kind radius */
--r-xs:2px;
--r-sm:3px;
--r-md:4px;
--r-lg:6px;
--r-pill:999px;
}

:root{
/* Hairline-first. Shadow only where an element genuinely floats. */
--shadow-none:none; /* @kind shadow */
--shadow-card:0 1px 2px rgba(17,17,20,.06); /* @kind shadow */
--shadow-card-hover:0 6px 18px rgba(17,17,20,.12); /* @kind shadow */
--shadow-raised:0 10px 28px rgba(8,8,10,.16); /* @kind shadow */
--shadow-dialog:0 28px 70px rgba(8,8,10,.46); /* @kind shadow */
--shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.06); /* @kind shadow */
--ring-focus:0 0 0 3px rgba(232,190,110,.45); /* @kind shadow */
--ring-brand:inset 0 0 0 1px var(--gold-500); /* @kind shadow */
/* Protection gradients for text over photography — they follow the theme so
   the type stays legible whichever ground the hero is on. */
--scrim-bottom:linear-gradient(180deg,rgba(244,242,238,0) 0%,rgba(244,242,238,.6) 55%,rgba(244,242,238,.95) 100%); /* @kind other */
--scrim-left:linear-gradient(90deg,rgba(244,242,238,.95) 0%,rgba(244,242,238,.6) 50%,rgba(244,242,238,0) 100%); /* @kind other */
}
[data-theme="dark"]{
--scrim-bottom:linear-gradient(180deg,rgba(8,8,10,0) 0%,rgba(8,8,10,.55) 55%,rgba(8,8,10,.93) 100%); /* @kind other */
--scrim-left:linear-gradient(90deg,rgba(8,8,10,.93) 0%,rgba(8,8,10,.55) 50%,rgba(8,8,10,0) 100%); /* @kind other */
--shadow-card:0 1px 2px rgba(0,0,0,.4); /* @kind shadow */
--shadow-card-hover:0 8px 22px rgba(0,0,0,.5); /* @kind shadow */
}

:root{
--ease-standard:cubic-bezier(.2,.7,.2,1); /* @kind other */
--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
--ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:180ms; /* @kind other */
--dur-slow:280ms; /* @kind other */
--dur-page:420ms; /* @kind other */
--transition-control:color var(--dur-base) var(--ease-standard),background-color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard); /* @kind other */
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light}html[data-theme="dark"]{color-scheme:dark}
body{margin:0;transition:background-color var(--dur-slow) var(--ease-standard),color var(--dur-slow) var(--ease-standard);font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--fw-bold);line-height:var(--lh-heading);letter-spacing:var(--tr-display);color:var(--text-strong);margin:0}
p{margin:0}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
img{max-width:100%;display:block}

/* TurnamenDomino — site styles. Built on the design-system tokens in /tokens. */

.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}
.narrow{max-width:860px}
.seam{height:2px;background:var(--seam-gold)}
.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}
.skip{position:absolute;left:-9999px;top:0;background:var(--surface-card);color:var(--text-strong);padding:var(--sp-3) var(--sp-5);z-index:100}
.skip:focus{left:var(--sp-4);top:var(--sp-4)}

/* ---------- chrome ---------- */
.topnotice{background:var(--surface-sunken);border-bottom:1px solid var(--border-hairline)}
.topnotice .container{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;justify-content:space-between;padding-top:7px;padding-bottom:7px}
.topnotice p{font-size:var(--fs-2xs);letter-spacing:var(--tr-wide);color:var(--text-muted);margin:0}
.topnotice a{color:var(--text-muted);text-decoration:underline;text-underline-offset:2px}
.topnotice a:hover{color:var(--text-link)}
/* Versi pendek untuk layar sempit; teks lengkap tetap ada di footer,
   halaman disclaimer, dan di dalam markup untuk perayap. */
.dc-short{display:none}
@media(max-width:760px){.dc-short{display:inline}.dc-full{display:none}}

header.site{position:sticky;top:0;z-index:30;background:var(--surface-chrome)}
header.site .bar{display:flex;align-items:center;gap:var(--sp-5);min-height:74px}
.crest{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;flex:none}
.crest:hover{text-decoration:none}
.crest svg,.crest img{width:44px;height:auto;flex:none}
.crest .wm{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-xl);line-height:1;letter-spacing:var(--tr-display);color:var(--text-strong);white-space:nowrap}
.crest .wm em{font-style:normal;color:var(--red-600)}
.crest .tg{display:block;font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:10px;letter-spacing:.06em;color:var(--text-muted);margin-top:3px;white-space:nowrap}
nav.main{display:flex;gap:var(--sp-6);margin-left:auto;flex-wrap:wrap}
nav.main a{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-sm);letter-spacing:var(--tr-tab);text-transform:uppercase;color:var(--text-body);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
nav.main a:hover{color:var(--text-strong);text-decoration:none;border-bottom-color:var(--border-strong)}
nav.main a[aria-current="page"]{color:var(--text-strong);border-bottom-color:var(--gold-500)}


/* ---------- generic blocks ---------- */
main{display:block;padding-bottom:var(--sp-11)}
section.band{padding-top:var(--sp-9)}
.eyebrow{font-size:var(--type-eyebrow-size);font-weight:var(--fw-bold);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--text-brand);margin:0 0 var(--sp-3)}
h1.page{font-size:var(--fs-headline);margin:0 0 var(--sp-4);text-wrap:balance}
h2.sec{font-size:var(--fs-2xl);margin:0 0 var(--sp-2)}
h3{font-size:var(--fs-md)}
.lede{font-size:var(--fs-md);color:var(--text-muted);max-width:var(--measure-lead);margin:0 0 var(--sp-6)}
.prose p{margin:0 0 var(--sp-4);max-width:var(--measure-body)}
.prose h2{font-size:var(--fs-lg);margin:var(--sp-7) 0 var(--sp-3)}
.prose ul{margin:0 0 var(--sp-4) var(--sp-5);padding:0;max-width:var(--measure-body)}
.prose li{margin-bottom:var(--sp-2)}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.sechead .more{font-size:var(--fs-sm);font-weight:var(--fw-semibold);white-space:nowrap}

/* ---------- hero ---------- */
.hero{background:var(--surface-inverse);border-bottom:1px solid var(--border-hairline)}
.hero .container{padding-top:var(--sp-9);padding-bottom:var(--sp-9)}
.hero h1{font-size:var(--fs-headline);margin:0 0 var(--sp-4);text-wrap:balance}
.hero p.sub{font-size:var(--fs-md);color:var(--text-muted);max-width:var(--measure-lead);margin:0}
.next{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-6);margin-top:var(--sp-7);background:var(--surface-card);border:1px solid var(--border-hairline);border-left:3px solid var(--red-600);border-radius:var(--r-md);padding:var(--sp-5) var(--sp-6);box-shadow:var(--shadow-card)}
.next .cd{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-4xl);line-height:1;color:var(--red-600);font-variant-numeric:tabular-nums}
.next .cd span{display:block;font-family:var(--font-body);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--text-muted);margin-top:var(--sp-2)}
.next .who{flex:1;min-width:240px}
.next .who a{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-lg);color:var(--text-strong);text-decoration:none;line-height:var(--lh-snug);display:block}
.next .who a:hover{color:var(--text-link)}
.next .who p{font-size:var(--fs-sm);color:var(--text-muted);margin:var(--sp-2) 0 0}

/* ---------- pills ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-wide);text-transform:uppercase;padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap}
.pill.berlangsung{background:var(--status-live-bg);color:var(--status-live)}
.pill.akan-datang{background:var(--status-open-bg);color:var(--status-open)}
.pill.rencana{background:var(--status-soon-bg);color:var(--status-soon)}
.pill.selesai{background:var(--status-closed-bg);color:var(--status-closed)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto;background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--r-md)}
table.jadwal{width:100%;border-collapse:collapse;font-size:var(--fs-base);min-width:660px}
table.jadwal th{font-family:var(--font-body);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--text-faint);text-align:left;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border-strong);white-space:nowrap}
table.jadwal td{padding:var(--sp-4);border-bottom:1px solid var(--border-hairline);vertical-align:top}
table.jadwal tr:last-child td{border-bottom:0}
table.jadwal td.tgl{font-family:var(--font-mono);font-size:var(--fs-sm);white-space:nowrap;color:var(--text-body);font-variant-numeric:tabular-nums}
table.jadwal td.nm a{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-md);color:var(--text-strong);text-decoration:none;line-height:var(--lh-snug)}
table.jadwal td.nm a:hover{color:var(--text-link)}
table.jadwal td.nm .meta{font-size:var(--fs-sm);color:var(--text-muted);margin-top:3px}

/* Di layar sempit tabel jadwal berubah jadi kartu bertumpuk supaya tidak
   perlu digeser ke kanan-kiri. Label kolom diambil dari atribut data-l. */
@media(max-width:760px){
  .tablewrap{overflow-x:visible;border:0;background:none;border-radius:0}
  table.jadwal{min-width:0;display:block}
  table.jadwal thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  table.jadwal tbody,table.jadwal tr,table.jadwal td{display:block;width:auto}
  table.jadwal tr{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--r-md);padding:var(--sp-4);margin-bottom:var(--sp-3);box-shadow:var(--shadow-card)}
  table.jadwal tr{display:flex;flex-direction:column}
  table.jadwal td{border:0;padding:0;display:flex;gap:var(--sp-3);align-items:baseline}
  table.jadwal td + td{margin-top:var(--sp-2)}
  table.jadwal td::before{content:attr(data-l);flex:none;min-width:70px;font-size:10px;font-weight:var(--fw-bold);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--text-faint)}
  table.jadwal td.nm{order:-1;display:block;margin-bottom:var(--sp-3)}
  table.jadwal td.nm::before{display:none}
  table.jadwal td.nm a{font-size:var(--fs-md)}
  table.jadwal td.tgl{font-size:var(--fs-sm);white-space:normal}
  table.jadwal td.nm .meta{display:block;margin:4px 0 0}
  table.jadwal td:not(.nm) .meta{display:inline;margin:0 0 0 6px}
}

/* ---------- cards ---------- */
.grid{display:grid;gap:var(--sp-4)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--r-md);padding:var(--sp-5);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:var(--sp-2)}
.card h3{margin:0;font-size:var(--fs-md);line-height:var(--lh-snug)}
.card h3 a{color:var(--text-strong);text-decoration:none}
.card h3 a:hover{color:var(--text-link)}
.card .meta{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted);font-variant-numeric:tabular-nums}
.card p{font-size:var(--fs-sm);color:var(--text-muted);margin:0}
.card .win{font-size:var(--fs-sm);color:var(--text-body)}
.card .win b{font-weight:var(--fw-semibold);color:var(--text-strong)}

.tile{display:block;background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);text-decoration:none;box-shadow:var(--shadow-card)}
.tile:hover{text-decoration:none;border-color:var(--border-brand)}
.tile .nm{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-base);color:var(--text-strong);display:block}
.tile .ct{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted);display:block;margin-top:3px}

/* ---------- fact box / verification ---------- */
.facts{width:100%;border-collapse:collapse;background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--r-md);overflow:hidden;font-size:var(--fs-base)}
.facts th{width:34%;text-align:left;font-family:var(--font-body);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--text-faint);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border-hairline);vertical-align:top}
.facts td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border-hairline);color:var(--text-strong)}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:0}
@media(max-width:560px){.facts th{width:42%;font-size:10px}.facts td{font-size:var(--fs-sm)}}

.verif{border-radius:var(--r-md);padding:var(--sp-5);margin-top:var(--sp-5);border:1px solid}
.verif.ok{background:var(--tint-success);border-color:var(--tint-success-bd)}
.verif.warn{background:var(--tint-warning);border-color:var(--tint-warning-bd)}
.verif .hd{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-md);margin-bottom:var(--sp-2)}
.verif.ok .hd{color:var(--tint-success-fg)}
.verif.warn .hd{color:var(--tint-warning-fg)}
.verif p{font-size:var(--fs-sm);color:var(--text-body);margin:0;max-width:var(--measure-body)}
.verif .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-3)}
.verif .chips span{font-family:var(--font-mono);font-size:var(--fs-2xs);padding:3px 8px;border-radius:var(--r-sm);background:var(--surface-card);border:1px solid var(--border-hairline);color:var(--text-muted)}

ol.sumber{margin:0;padding-left:var(--sp-5);font-size:var(--fs-sm);color:var(--text-muted)}
ol.sumber li{margin-bottom:var(--sp-3);line-height:var(--lh-body)}
ol.sumber .md{font-weight:var(--fw-semibold);color:var(--text-body)}
ol.sumber .dt{font-family:var(--font-mono);font-size:var(--fs-xs)}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--border-hairline)}
.faq details{border-bottom:1px solid var(--border-hairline)}
.faq summary{cursor:pointer;list-style:none;padding:var(--sp-4) 0;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-md);color:var(--text-strong);display:flex;justify-content:space-between;gap:var(--sp-4);align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:var(--fs-lg);color:var(--text-brand);flex:none;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{font-size:var(--fs-base);color:var(--text-body);margin:0 0 var(--sp-4);max-width:var(--measure-body)}

/* ---------- breadcrumb ---------- */
.crumb{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-faint);padding-top:var(--sp-5);margin-bottom:var(--sp-4)}
.crumb a{color:var(--text-muted);text-decoration:none}
.crumb a:hover{color:var(--text-link)}
.crumb span{margin:0 6px}

/* ---------- footer ---------- */
footer.site{background:var(--surface-chrome);margin-top:var(--sp-10)}
footer.site .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--sp-8);padding-top:var(--sp-9);padding-bottom:var(--sp-7)}
@media(max-width:820px){footer.site .cols{grid-template-columns:1fr;gap:var(--sp-6)}}
footer.site h4{font-family:var(--font-body);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--text-brand);margin:0 0 var(--sp-4)}
footer.site p{font-size:var(--fs-sm);color:var(--text-muted);margin:0 0 var(--sp-3);max-width:46ch;line-height:var(--lh-body)}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
footer.site ul a{font-size:var(--fs-sm);color:var(--text-muted);text-decoration:none}
footer.site ul a:hover{color:var(--text-link)}
footer.site .legal{border-top:1px solid var(--border-hairline)}
footer.site .legal .container{display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;padding-top:var(--sp-4);padding-bottom:var(--sp-5);font-size:var(--fs-xs);color:var(--text-faint)}
.disclaimer{background:var(--tint-info);border:1px solid var(--tint-info-bd);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);font-size:var(--fs-sm);color:var(--text-body);max-width:var(--measure-body)}

/* ---------- chip navigasi kategori ---------- */
.chipnav{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-sm);letter-spacing:var(--tr-tab);text-transform:uppercase;padding:5px 12px;border:1px solid var(--border-hairline);border-radius:var(--r-pill);background:var(--surface-card);color:var(--text-body);text-decoration:none}
.chipnav:hover{border-color:var(--border-brand);color:var(--text-strong);text-decoration:none}
.chipnav span{font-family:var(--font-mono);font-weight:var(--fw-regular);font-size:var(--fs-2xs);color:var(--text-faint)}
.disclaimer a{text-decoration:underline;text-underline-offset:2px}
.verif.info{background:var(--tint-info);border-color:var(--tint-info-bd)}
.verif.info .hd{color:var(--text-body)}

/* ---------- chip navigasi kategori ---------- */
.chipnav{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-sm);letter-spacing:var(--tr-tab);text-transform:uppercase;padding:5px 12px;border:1px solid var(--border-hairline);border-radius:var(--r-pill);background:var(--surface-card);color:var(--text-body);text-decoration:none}
.chipnav:hover{border-color:var(--border-brand);color:var(--text-strong);text-decoration:none}
.chipnav span{font-family:var(--font-mono);font-weight:var(--fw-regular);font-size:var(--fs-2xs);color:var(--text-faint)}
.disclaimer a{text-decoration:underline;text-underline-offset:2px}
.verif.info{background:var(--tint-info);border-color:var(--tint-info-bd)}
.verif.info .hd{color:var(--text-body)}

/* ---------- gambar ----------
   Semua aturan di bawah hanya aktif kalau file gambarnya ada (kelas .has-img
   ditambahkan oleh build). Tanpa gambar, tampilan kembali ke versi teks. */

/* Hero dengan latar gambar. Teks tetap HTML asli, bukan bagian dari gambar,
   supaya terbaca perayap dan tetap jelas di layar kecil. */
.hero.has-img{position:relative;overflow:hidden;border-bottom:0;background:var(--onyx-900)}
.hero.has-img > .bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center;
  z-index:0;
}
.hero.has-img::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(8,8,10,.93) 0%,rgba(8,8,10,.80) 45%,rgba(8,8,10,.45) 75%,rgba(8,8,10,.30) 100%);
}
.hero.has-img > .container{position:relative;z-index:2}
.hero.has-img .eyebrow{color:var(--gold-400)}
.hero.has-img h1{color:#F4F2EE}
.hero.has-img p.sub{color:#C8C8D0}
.hero.has-img .next{background:rgba(22,22,26,.82);border-color:rgba(217,164,69,.28);backdrop-filter:blur(3px)}
.hero.has-img .next .who a{color:#F4F2EE}
.hero.has-img .next .who p,.hero.has-img .next .cd span{color:#A8A8B2}
.hero.has-img > .container > p:last-child{color:#A8A8B2}
.hero.has-img > .container > p:last-child a{color:var(--gold-400)}
@media(max-width:760px){
  /* Di ponsel latar terlalu ramai di belakang teks — pakai gelap rata. */
  .hero.has-img > .bg{object-position:center;opacity:.4}
  .hero.has-img::after{background:linear-gradient(180deg,rgba(8,8,10,.88),rgba(8,8,10,.94))}
}

/* Spanduk judul halaman bagian dalam */
.pagehead{padding-top:var(--sp-7);padding-bottom:var(--sp-6)}
.pagehead.has-img{position:relative;overflow:hidden;background:var(--onyx-900);padding-top:var(--sp-9);padding-bottom:var(--sp-8);margin-bottom:var(--sp-7)}
.pagehead.has-img > .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.pagehead.has-img::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,8,10,.92),rgba(8,8,10,.6))}
.pagehead.has-img > .container{position:relative;z-index:2}
.pagehead.has-img .eyebrow{color:var(--gold-400)}
.pagehead.has-img h1{color:#F4F2EE}
.pagehead.has-img .lede{color:#C8C8D0}

/* Kartu artikel bergambar */
.card.has-img{padding:0;overflow:hidden}
.card.has-img .thumb{display:block;line-height:0;background:var(--surface-sunken)}
.card.has-img .thumb img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;transition:transform var(--dur-slow) var(--ease-standard)}
.card.has-img:hover .thumb img{transform:scale(1.03)}
.card.has-img > :not(.thumb){padding-left:var(--sp-5);padding-right:var(--sp-5)}
.card.has-img > .meta{padding-top:var(--sp-4)}
.card.has-img > :last-child{padding-bottom:var(--sp-5)}
@media(prefers-reduced-motion:reduce){.card.has-img .thumb img{transition:none}.card.has-img:hover .thumb img{transform:none}}

/* ---------- spanduk ----------
   Gambar ditampilkan UTUH: lebar penuh, tinggi mengikuti rasio aslinya.
   Tidak ada object-fit:cover, jadi tidak ada bagian gambar yang terpotong.
   Teks halaman berada di bawah gambar, bukan menumpuk di atasnya. */
.banner{width:100%;background:var(--surface-sunken);line-height:0;border-bottom:1px solid var(--border-hairline)}
.banner img{display:block;width:100%;height:auto}
/* Di layar sangat lebar spanduk jadi terlalu tinggi — batasi lebarnya. */
@media(min-width:1500px){
  .banner{display:flex;justify-content:center}
  .banner img{max-width:1500px}
}

.pagehead{padding-top:var(--sp-8);padding-bottom:var(--sp-2)}

/* ---------- kartu artikel bergambar ---------- */
.card.has-img{padding:0;overflow:hidden}
.card.has-img .thumb{display:block;line-height:0;background:var(--surface-sunken)}
.card.has-img .thumb img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform var(--dur-slow) var(--ease-standard)}
.card.has-img:hover .thumb img{transform:scale(1.03)}
.card.has-img > :not(.thumb){padding-left:var(--sp-5);padding-right:var(--sp-5)}
.card.has-img > .meta{padding-top:var(--sp-4)}
.card.has-img > :last-child{padding-bottom:var(--sp-5)}
@media(prefers-reduced-motion:reduce){.card.has-img .thumb img{transition:none}.card.has-img:hover .thumb img{transform:none}}

/* ---------- gambar di halaman artikel ---------- */
.artikel-gambar{margin:0 0 var(--sp-7);border-radius:var(--r-md);overflow:hidden;background:var(--surface-sunken);border:1px solid var(--border-hairline)}
.artikel-gambar img{display:block;width:100%;height:auto}
.artikel-gambar figcaption{font-size:var(--fs-xs);color:var(--text-faint);padding:var(--sp-2) var(--sp-4);background:var(--surface-card);border-top:1px solid var(--border-hairline)}

/* Teras berita — paragraf pembuka artikel bergaya berita, sedikit lebih besar. */
.prose p.teras{font-size:var(--fs-md);color:var(--text-strong);font-weight:var(--fw-medium);line-height:1.6}

/* ---------- tombol hamburger ----------
   Peningkatan bertahap: tanpa JS, atribut data-nav tidak pernah dipasang,
   sehingga menu tetap tampil seperti biasa dan tombol disembunyikan. */
.hamb{display:none;flex:none;width:44px;height:44px;padding:10px;margin-left:auto;
  background:none;border:1px solid var(--border-hairline);border-radius:var(--r-md);
  cursor:pointer;flex-direction:column;justify-content:space-between}
.hamb span{display:block;height:2px;width:100%;background:var(--text-strong);border-radius:2px;
  transition:transform var(--dur-base) var(--ease-standard),opacity var(--dur-fast) linear}
header.site[data-nav] .hamb{display:flex}
header.site[data-nav="buka"] .hamb span:nth-child(1){transform:translateY(9px) rotate(45deg)}
header.site[data-nav="buka"] .hamb span:nth-child(2){opacity:0}
header.site[data-nav="buka"] .hamb span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.hamb span{transition:none}}

@media(min-width:901px){ .hamb{display:none !important} }

@media(max-width:900px){
  /* Logo dan navigasi tetap menempel di atas saat halaman digulir. */
  header.site{position:sticky;top:0}
  header.site .bar{flex-wrap:wrap;min-height:0;padding-top:var(--sp-3);padding-bottom:var(--sp-3)}
  .crest svg,.crest img{width:38px}
  .crest .wm{font-size:var(--fs-lg)}
  .crest .tg{display:none}
  nav.main{margin-left:0;width:100%;flex-direction:column;gap:0;
    border-top:1px solid var(--border-hairline);margin-top:var(--sp-3)}
  nav.main a{padding:var(--sp-3) 0;border-bottom:1px solid var(--border-hairline);border-left:2px solid transparent;
    font-size:var(--fs-md);padding-left:var(--sp-2)}
  nav.main a:hover{border-bottom-color:var(--border-hairline)}
  nav.main a[aria-current="page"]{border-bottom-color:var(--border-hairline);border-left-color:var(--gold-500);
    background:var(--surface-sunken)}
  /* Disembunyikan hanya bila JS aktif dan menu sedang tertutup. */
  header.site[data-nav="tutup"] nav.main{display:none}
}

/* ---------- kliping media ----------
   Hanya judul dan tautan. Tidak ada isi maupun foto media lain di sini. */
ul.kliping{list-style:none;margin:0;padding:0;border-top:1px solid var(--border-hairline)}
li.klip{padding:var(--sp-4) 0;border-bottom:1px solid var(--border-hairline)}
li.klip > a{display:block;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-md);
  line-height:var(--lh-snug);color:var(--text-strong);text-decoration:none}
li.klip > a:hover{color:var(--text-link);text-decoration:underline;text-underline-offset:3px}
li.klip .asal{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:5px;
  font-size:var(--fs-sm);color:var(--text-muted)}
li.klip .asal time{font-family:var(--font-mono);font-size:var(--fs-xs)}
li.klip .sep{color:var(--text-faint)}
li.klip .keluar{color:var(--text-brand);font-size:var(--fs-sm)}

/* ---------- tab pemilih berita ----------
   Tanpa JS tombol tidak berfungsi, tetapi kedua panel tetap tampil berurutan
   sehingga isinya selalu terbaca — termasuk oleh perayap. */
.tabs{display:flex;gap:var(--sp-2);flex-wrap:wrap;border-bottom:1px solid var(--border-hairline);
  margin-bottom:var(--sp-6)}
.tab{display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-md);
  letter-spacing:var(--tr-tab);text-transform:uppercase;color:var(--text-muted);
  padding:var(--sp-3) var(--sp-4);margin-bottom:-1px;border-bottom:3px solid transparent;
  transition:color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.tab span{font-family:var(--font-mono);font-weight:var(--fw-regular);font-size:var(--fs-xs);
  color:var(--text-faint);background:var(--surface-sunken);border-radius:var(--r-pill);padding:2px 8px}
.tab:hover{color:var(--text-strong)}
.tab[aria-selected="true"]{color:var(--text-strong);border-bottom-color:var(--gold-500)}
.tab[aria-selected="true"] span{background:var(--tint-warning);color:var(--gold-600)}
.panel[hidden]{display:none}
/* Tanpa JS: beri jarak antar panel supaya tidak menempel. */
.panel + .panel{margin-top:var(--sp-9)}
[data-tab="aktif"] .panel + .panel{margin-top:0}
@media(max-width:560px){
  .tab{font-size:var(--fs-sm);padding:var(--sp-3) var(--sp-2);flex:1;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.tab{transition:none}}