/* IQ Grow Up website: one column, made for phones first. Colours from the video brand (navy, cyan) and the logo (logo.png: cream "IQ", orange "Grow Up", also the gold of the Dukung buttons). */
:root {
  --bg: #02040a;
  --panel: #0a1428;
  --panel2: #0f1d38;
  --line: rgba(79, 216, 255, 0.18);
  --text: #f7faff;
  --muted: #a9b5c8;
  --cyan: #4fd8ff;
  --gold: #f2a93b;
  --cream: #f6f1e4;
  --top: 64px; /* header height: the header stays at the top while scrolling (user, 2026-11-14) */
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top) + 8px); }
body {
  margin: 0;
  background: var(--bg) radial-gradient(120% 60% at 50% -10%, #0c2148 0%, var(--bg) 60%) no-repeat;
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--cyan); }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wrap { max-width: 640px; margin: 0 auto; padding: 0 16px; }
h1, h2, .btn, .pill { font-family: Montserrat, system-ui, sans-serif; font-weight: 800; }
h1 { font-size: clamp(28px, 8vw, 40px); line-height: 1.15; margin: 0 0 12px; }
h2 { font-size: 22px; line-height: 1.25; margin: 40px 0 14px; }
.lead { color: var(--muted); font-size: 17px; margin: 0 0 20px; }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--top); }
/* brand = logo mark + wordmark in Ubuntu Bold, the logo's typeface (only these letters are downloaded) */
.brand { display: flex; align-items: center; gap: 9px; min-height: 44px; color: var(--cream); text-decoration: none; font: 700 21px/1 Ubuntu, system-ui, sans-serif; }
.mark { width: 32px; height: 40px; flex: none; }
/* logo luxury touch (user, 2026-11-14). Pointer coming near (header script in build.mjs: --near 0..1 within 160 px, .near): a gold aura
   and the atom turning. Pointer on it: the mark lifts in a gold glow, a light glides over the gilt wordmark, two sparkles twinkle.
   The wordmark is painted by its background (cream "IQ ", gold "Grow Up": the colour split sits in the space, 1.2em) under the glint. */
.brand { position: relative; isolation: isolate; }
.brand::before { content: ""; position: absolute; inset: -12px -24px; z-index: -1; border-radius: 999px; background: radial-gradient(closest-side, rgba(242, 169, 59, 0.26), rgba(242, 169, 59, 0.07) 55%, transparent); opacity: var(--near, 0); transition: opacity 0.4s; pointer-events: none; }
.brand .mark { transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s; }
.brand .atom { animation-duration: 9s; animation-play-state: paused; }
.brand span { position: relative; color: transparent; background: linear-gradient(105deg, transparent 40%, rgba(255, 246, 220, 0.95) 50%, transparent 60%) 110% 0 / 250% 100% no-repeat, linear-gradient(90deg, var(--cream) 1.2em, var(--gold) 0); -webkit-background-clip: text; background-clip: text; transition: filter 0.6s; }
.brand b { color: transparent; }
.brand::after, .brand span::after { content: "✦"; position: absolute; left: 24px; top: 0; color: #ffe2a0; font-size: 10px; line-height: 1; text-shadow: 0 0 6px rgba(242, 169, 59, 0.9); opacity: 0; pointer-events: none; }
.brand span::after { left: auto; right: -11px; top: -6px; font-size: 8px; }
.brand:is(.near, :hover, :focus-visible) .atom { animation-play-state: running; }
.brand:is(:hover, :focus-visible)::before { opacity: 1; }
.brand:is(:hover, :focus-visible) .mark { transform: translateY(-1px) scale(1.07); filter: drop-shadow(0 0 5px rgba(242, 169, 59, 0.75)) drop-shadow(0 0 14px rgba(92, 208, 214, 0.35)); }
.brand:is(:hover, :focus-visible) span { filter: drop-shadow(0 0 8px rgba(242, 169, 59, 0.45)); animation: glint 3.2s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
.brand:is(:hover, :focus-visible)::after, .brand:is(:hover, :focus-visible) span::after { animation: twinkle 1.6s ease-in-out infinite; }
.brand:is(:hover, :focus-visible) span::after { animation-delay: 0.7s; }
@keyframes glint { from { background-position: 110% 0, 0 0; } 45%, to { background-position: -10% 0, 0 0; } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }
.pill { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--gold); border-radius: 999px; color: var(--gold); text-decoration: none; font-size: 14px; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 20px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel2); color: var(--text); text-decoration: none; font-size: 16px;
}
.btn.gold { background: var(--gold); border-color: transparent; color: #1a1204; }
.btn.big { width: 100%; font-size: 17px; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; }
.cta .btn { flex: 1 1 140px; }

/* episode cards */
.cards { display: grid; gap: 12px; }
.card { display: flex; gap: 14px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--text); text-decoration: none; }
.card:hover, .card:active { border-color: var(--cyan); }
.card img { width: 84px; height: 112px; flex: none; object-fit: cover; border-radius: 10px; background: var(--panel2); }
.card span { min-width: 0; }
.card small { color: var(--cyan); font-size: 13px; font-weight: 700; }
.card strong { display: block; margin: 2px 0 4px; line-height: 1.3; }
.card em { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 14px; font-style: normal; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-weight: 700; text-decoration: none; }

/* support (every page): the logo's atom turning beside the ask, a light circling the border, a shine crossing the button */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.support {
  display: grid; grid-template-columns: 1fr auto; column-gap: 14px; align-items: start;
  margin: 40px 0; padding: 22px 18px; border: 1.5px solid transparent; border-radius: 22px;
  background: linear-gradient(160deg, #22190a, #0b1428 70%) padding-box,
    conic-gradient(from var(--ang), rgba(242, 169, 59, 0.15), var(--gold) 10%, rgba(92, 208, 214, 0.75) 22%, rgba(242, 169, 59, 0.15) 36%) border-box;
  box-shadow: 0 18px 50px rgba(242, 169, 59, 0.12);
  animation: border-turn 6s linear infinite;
}
.support > * { grid-column: 1; }
.support .support-art { grid-column: 2; grid-row: 1 / span 2; width: 58px; height: auto; filter: drop-shadow(0 0 12px rgba(92, 208, 214, 0.45)); }
.support h2 { margin-top: 0; }
.support p { margin: 0 0 18px; }
.support .btn, .support small { grid-column: 1 / -1; }
.support small { display: block; margin-top: 10px; color: var(--muted); font-size: 13px; text-align: center; }
@keyframes border-turn { to { --ang: 360deg; } }
.atom { transform-box: fill-box; transform-origin: center; animation: atom-turn 24s linear infinite; }
@keyframes atom-turn { to { transform: rotate(360deg); } }
.btn.gold { position: relative; overflow: hidden; box-shadow: 0 8px 24px rgba(242, 169, 59, 0.22); }
.btn.gold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%); transform: translateX(-120%); animation: shine 4s ease-in-out infinite; }
@keyframes shine { 55%, 100% { transform: translateX(120%); } }

/* episode page */
.back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; }
.ep-head { display: flex; align-items: flex-end; gap: 16px; margin: 8px 0 18px; }
.ep-head img { width: 38%; max-width: 200px; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--line); border-radius: 14px; }
.ep-head div { min-width: 0; }
.ep-head small { color: var(--cyan); font-size: 13px; font-weight: 700; }
.ep-head h1 { font-size: clamp(21px, 6vw, 32px); margin: 4px 0 0; overflow-wrap: anywhere; }
.ep-label { margin: 8px 0 14px; }
.ep-label small { color: var(--cyan); font-size: 13px; font-weight: 700; }
.ep-label h1 { margin: 4px 0 0; font-size: clamp(21px, 6vw, 32px); overflow-wrap: anywhere; }
/* YouTube Short: our cover with a play button, swapped for the YouTube player on tap */
.yt { position: relative; display: block; width: 100%; max-width: 340px; height: auto; aspect-ratio: 9 / 16; margin: 0 auto 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #000; }
.yt img { width: 100%; height: 100%; object-fit: cover; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(229, 57, 53, 0.92); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
.yt-play::after { content: ""; position: absolute; left: 28px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #fff; }
iframe.yt { border: 0; }
.watch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; color: var(--muted); font-size: 15px; }
.watch .btn { min-height: 44px; padding: 8px 16px; font-size: 15px; }
article p { margin: 0 0 14px; }
.note { padding: 12px 14px; border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; background: var(--panel); color: var(--muted); font-size: 15px; }
.sources { padding-left: 22px; font-size: 15px; }
.sources li { margin-bottom: 8px; overflow-wrap: anywhere; }
details { margin-top: 18px; color: var(--muted); font-size: 14px; }
summary { display: flex; align-items: center; min-height: 44px; color: var(--text); font-weight: 600; cursor: pointer; }
details li { margin-bottom: 6px; overflow-wrap: anywhere; }

/* about + FAQ (landing, /socials): questions as <details>, open without JS */
.faq { margin: 8px 0 18px; }
.faq > p { color: var(--muted); }
.faq details { margin: 0 0 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); font-size: 15px; }
.faq summary { justify-content: space-between; gap: 12px; padding: 8px 18px; min-height: 56px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--cyan); font-size: 22px; font-weight: 400; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 18px 16px; }
/* privacy page and 404 */
.doc h2 { font-size: 19px; margin-top: 30px; }
.doc li { margin-bottom: 8px; }
.doc .updated { color: var(--muted); font-size: 14px; }
/* /socials (link-in-bio page): profile with the logo in a turning gold/cyan ring, then big account cards (.fl, below) */
.bio { position: relative; padding: 18px 0 6px; text-align: center; }
.bio::before { content: ""; position: absolute; left: 50%; top: -40px; z-index: -1; width: 420px; height: 300px; max-width: 100%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(242, 169, 59, 0.14), rgba(79, 216, 255, 0.06) 60%, transparent); pointer-events: none; }
@property --ring { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.bio-ava { width: 136px; height: 136px; margin: 8px auto 18px; padding: 3px; border-radius: 36px; background: conic-gradient(from var(--ring), var(--gold), var(--cyan), #9b7bff, var(--gold)); box-shadow: 0 0 40px rgba(242, 169, 59, 0.22), 0 0 90px rgba(79, 216, 255, 0.12); animation: ring 8s linear infinite; }
@keyframes ring { to { --ring: 360deg; } }
.bio-ava img { width: 100%; height: 100%; border: 3px solid var(--bg); border-radius: 33px; }
.bio-eyebrow { margin: 0 0 4px; color: var(--cyan); font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
.bio-name { margin: 0; color: var(--cream); font: 700 clamp(34px, 9vw, 44px)/1.1 Ubuntu, system-ui, sans-serif; }
.bio-name b { color: var(--gold); }
.bio-tag { margin: 6px 0 14px; font: 800 17px/1.3 Montserrat, system-ui, sans-serif; }
.bio .lead { max-width: 54ch; margin: 0 auto 18px; font-size: 16px; }
.bio-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.bio-facts li { display: flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); font-size: 14px; }
.bio-facts b { margin-right: 5px; color: var(--text); }
.bio-facts li:has(a) { padding: 0; }
.bio-facts a { display: flex; align-items: center; align-self: stretch; padding: 0 14px; color: var(--cyan); font-weight: 700; text-decoration: none; }
.acc { display: grid; gap: 12px; margin-bottom: 18px; }
.acc .fl { min-height: 76px; padding: 12px 14px 12px 12px; border-radius: 20px; background: linear-gradient(110deg, color-mix(in srgb, var(--c) 9%, var(--panel)), var(--panel) 60%); animation: rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(var(--i) * 90ms); }
.acc .fl svg { width: 50px; height: 50px; padding: 9px; border-radius: 15px; background: color-mix(in srgb, var(--c) 14%, #050b18); }
.acc .fl b { font-size: 17px; }
.acc .fl small { font-size: 14px; }
.acc .fl i { padding: 7px 14px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); border-radius: 999px; font-size: 13px; white-space: nowrap; }
.acc .fl:hover, .acc .fl:focus-visible { box-shadow: 0 12px 34px color-mix(in srgb, var(--c) 22%, transparent); }
.acc .fl:hover i { background: var(--c); color: #050b18; }
.acc .fl[data-p="Saweria"] { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }

/* header menu (user, 2026-11-14: the bar looked empty), all <details> dropdowns that work without JS. Phones: "Menu" only, holding the
   categories and the links; from 480px "Kategori Video" + "Menu"; from 1080px the links sit in the bar and "Menu" goes away.
   The header is 1120px wide on every page. On phones a panel spans the header width (.drop stays static so .top is its containing block). */
/* sticky: the bar spans the full screen width through border-image-outset (no overflow, does not clip the dropdown), with a hairline under it */
.top { position: sticky; top: 0; z-index: 30; border-image: linear-gradient(var(--panel) calc(100% - 1px), var(--line) 0) fill 0 / 0 / 0 100vmax; }
.menu { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.menu > a, .menu .wide { display: none; }
.menu a, .drop summary { color: var(--text); font-size: 15px; font-weight: 600; text-decoration: none; }
.menu a:hover, .drop summary:hover { color: var(--cyan); }
.drop { margin: 0; }
.drop summary { gap: 7px; list-style: none; white-space: nowrap; }
.drop summary::-webkit-details-marker { display: none; }
.drop summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.drop[open] summary { color: var(--cyan); }
.drop[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.drop-panel { position: absolute; left: 16px; right: 16px; top: calc(100% - 4px); padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); }
.drop-panel a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 10px; }
.drop-panel a:first-child { border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.drop-panel a:hover, .drop-panel a:focus-visible { background: var(--panel2); }
.drop-panel span { color: var(--muted); font-size: 13px; font-weight: 700; }
.brand, .pill { white-space: nowrap; }
@media (min-width: 480px) { .menu .wide { display: inline; } }
/* phones (360–479 px): brand + "Kategori" + Dukung must fit on one line */
@media (max-width: 479px) {
  .top { gap: 8px; }
  .brand { gap: 7px; font-size: 18px; }
  .mark { width: 27px; height: 34px; }
  .drop summary { font-size: 14px; }
  .pill { padding: 0 11px; font-size: 13px; }
}
@media (min-width: 720px) {
  .drop { position: relative; }
  .drop-panel { left: auto; right: -12px; top: calc(100% + 6px); width: 300px; }
}

/* landing below the portal (.lp): the portal's night sky goes on (star layers, teal / orange / violet nebulae) */
.landing .wrap { max-width: 1120px; }
.lp { padding-bottom: 8px; }
.lp, .sky {
  background:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(247, 250, 255, 0.8) 50%, transparent 51%) 0 0 / 260px 260px,
    radial-gradient(1px 1px at 63% 72%, rgba(247, 250, 255, 0.55) 50%, transparent 51%) 0 0 / 260px 260px,
    radial-gradient(1.4px 1.4px at 38% 44%, rgba(92, 208, 214, 0.8) 50%, transparent 51%) 0 0 / 410px 410px,
    radial-gradient(1px 1px at 85% 10%, rgba(247, 250, 255, 0.7) 50%, transparent 51%) 0 0 / 330px 330px,
    radial-gradient(1.2px 1.2px at 22% 88%, rgba(242, 169, 59, 0.75) 50%, transparent 51%) 0 0 / 370px 370px,
    radial-gradient(60% 30% at 92% 6%, rgba(92, 208, 214, 0.13), transparent 70%),
    radial-gradient(55% 25% at 4% 45%, rgba(242, 169, 59, 0.09), transparent 70%),
    radial-gradient(70% 30% at 80% 92%, rgba(90, 70, 210, 0.1), transparent 70%),
    #02040a;
}
/* /socials (body.sky): that sky over the whole page, plus two layers fixed to the screen (they stay while the page scrolls, so the
   sky has depth): coloured nebulae drifting slowly, and brighter stars twinkling (user: the page was too flat and dark, 2026-11-14) */
.sky::before, .sky::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.sky::before {
  background:
    radial-gradient(120% 55% at 50% -12%, rgba(20, 52, 110, 0.9), transparent 62%),
    radial-gradient(42vmax 30vmax at 6% 32%, rgba(79, 216, 255, 0.2), transparent 70%),
    radial-gradient(46vmax 34vmax at 96% 56%, rgba(140, 110, 255, 0.24), transparent 70%),
    radial-gradient(55vmax 26vmax at 35% 108%, rgba(242, 169, 59, 0.18), transparent 70%),
    linear-gradient(rgba(8, 20, 48, 0.6), rgba(4, 10, 26, 0.3) 55%, rgba(16, 10, 44, 0.55));
  animation: nebula 26s ease-in-out infinite alternate;
}
.sky::after {
  background:
    radial-gradient(1.8px 1.8px at 18% 22%, #fff 50%, transparent 51%) 0 0 / 420px 420px,
    radial-gradient(1.6px 1.6px at 72% 64%, rgba(160, 235, 255, 0.95) 50%, transparent 51%) 0 0 / 520px 520px,
    radial-gradient(2px 2px at 46% 82%, rgba(255, 226, 160, 0.95) 50%, transparent 51%) 0 0 / 610px 610px,
    radial-gradient(1.4px 1.4px at 88% 12%, #fff 50%, transparent 51%) 0 0 / 350px 350px;
  animation: twinkle-sky 4.5s ease-in-out infinite alternate;
}
@keyframes nebula { to { transform: translate3d(0, -3%, 0) scale(1.08); } }
@keyframes twinkle-sky { from { opacity: 0.25; } }
.lp-hero { display: grid; gap: 24px; align-items: center; padding-top: 44px; }
.lp-hero h1 { font-size: clamp(32px, 9vw, 56px); letter-spacing: -0.01em; }
.grad { background: linear-gradient(90deg, var(--gold), #ffe0a3 45%, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-hero .lead { max-width: 58ch; }
.stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.stats li { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(15, 29, 56, 0.6); color: var(--muted); font-size: 14px; }
.stats b { color: var(--text); font: 800 18px Montserrat, system-ui, sans-serif; }
@media (max-width: 400px) { .stats { gap: 6px; } .stats li { padding: 6px 11px; font-size: 13px; } .stats b { font-size: 16px; } }
.lp .cta .btn { flex: 1 1 auto; white-space: nowrap; }
.btn.glow { border-color: rgba(92, 208, 214, 0.55); background: linear-gradient(180deg, rgba(92, 208, 214, 0.16), rgba(15, 29, 56, 0.9)); box-shadow: 0 0 24px rgba(92, 208, 214, 0.18), inset 0 0 12px rgba(92, 208, 214, 0.12); }
.btn.glow:hover { box-shadow: 0 0 34px rgba(92, 208, 214, 0.35), inset 0 0 12px rgba(92, 208, 214, 0.2); }
.hero-art { display: none; }
@media (min-width: 900px) {
  .lp-hero { grid-template-columns: 1fr 300px; gap: 48px; padding-top: 64px; }
  .lp .cta { max-width: 520px; }
  .hero-art { display: block; width: 250px; height: auto; justify-self: center; filter: drop-shadow(0 0 26px rgba(92, 208, 214, 0.35)) drop-shadow(0 0 60px rgba(242, 169, 59, 0.18)); animation: float 6s ease-in-out infinite; }
}
@keyframes float { 50% { transform: translateY(-10px); } }
/* category cards: the newest (non-victim) episode cover of each niche */
.lp-cats h2 { margin-top: 52px; }
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cat { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(160deg, var(--panel2), var(--panel)); color: var(--text); text-decoration: none; transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; }
.cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(2, 4, 10, 0.95) 10%, rgba(2, 4, 10, 0.5) 42%, transparent 70%); }
.cat-body { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; display: grid; gap: 6px; }
.cat-body b { font: 800 15px/1.25 Montserrat, system-ui, sans-serif; }
.cat-body small { justify-self: start; padding: 3px 9px; border-radius: 999px; background: rgba(92, 208, 214, 0.16); color: var(--cyan); font-size: 12px; font-weight: 700; }
.cat:hover, .cat:focus-visible { transform: translateY(-4px); border-color: var(--cyan); box-shadow: 0 12px 30px rgba(92, 208, 214, 0.18); }
.cat:hover img { transform: scale(1.06); }
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .cat-grid { grid-template-columns: repeat(6, 1fr); } }
/* official accounts */
.follow-box { margin-bottom: 8px; }
.follow { display: grid; gap: 10px; margin-bottom: 6px; }
.fl { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(10, 20, 40, 0.75); color: var(--text); text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.fl svg { width: 34px; height: 34px; flex: none; }
.fl span { display: grid; flex: 1; min-width: 0; }
.fl small { color: var(--muted); font-size: 13px; }
.fl i { color: var(--c); font-style: normal; font-weight: 700; }
.fl:hover, .fl:focus-visible { border-color: var(--c); transform: translateY(-2px); }
/* platform accents (data-p from build.mjs fl()) */
.fl { --c: var(--cyan); }
.fl[data-p="YouTube"] { --c: #ff3b4e; }
.fl[data-p="TikTok"] { --c: #25f4ee; }
.fl[data-p="Instagram"] { --c: #f0568f; }
.fl[data-p="Facebook"] { --c: #4b8ff5; }
.fl[data-p="Saweria"] { --c: var(--gold); }
@media (min-width: 640px) { .follow { grid-template-columns: repeat(2, minmax(0, 320px)); } }
@media (min-width: 1000px) { .follow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 720px) {
  .landing .support { padding: 32px 36px; }
  .landing .support .support-art { width: 120px; grid-row: 1 / span 4; align-self: center; }
  .landing .support .btn.big, .landing .support small { grid-column: 1; }
  .landing .support .btn.big { width: auto; justify-self: start; padding: 14px 32px; }
  .landing .support small { text-align: left; }
}
/* sections rise in as they scroll into view (browsers with scroll-driven animations; elsewhere they simply show) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(32px); } }
@media (prefers-reduced-motion: reduce) { .atom, .hero-art, .support, .btn.gold::after, .bio-ava, .acc .fl, .sky::before, .sky::after { animation: none; } }
/* !important: the logo's hover rules are more specific */
@media (prefers-reduced-motion: reduce) { .brand span, .brand::after, .brand span::after { animation: none !important; } }

/* ---- landing portal (.pt, portal.js): sticky full-screen stage; the WebGL canvas covers it and is transparent where the portal is
   open, over the trailer <video>. portal.js sets --w and --h (the 9:16 trailer window) and --cy (its centre from the top). */
.pt { position: relative; background: #02040a; } /* height: inline from build.mjs (PORTAL_SCROLL) */
.pt.pt-still { height: calc(100vh - var(--top)); height: calc(100svh - var(--top)); }
/* sticks under the sticky header; portal.js reads this top for the scroll progress */
.pt-stage { --w: 280px; --h: 498px; --cy: 47%; position: sticky; top: var(--top); height: calc(100vh - var(--top)); height: calc(100svh - var(--top)); overflow: hidden; background: #02040a; }
.pt-vid { position: absolute; left: calc(50% - var(--w) / 2); top: calc(var(--cy) - var(--h) / 2); width: var(--w); height: var(--h); max-width: none; object-fit: cover; background: #000; }
.pt-gl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pt-hud { position: absolute; left: 16px; right: 16px; top: 14px; display: flex; justify-content: space-between; gap: 12px; margin: 0; font: 700 12px/1.4 system-ui, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(247, 250, 255, 0.72); }
.pt-hud b { color: var(--cyan); font-variant-numeric: tabular-nums; }
.pt-hint { position: absolute; left: 0; right: 0; bottom: calc(5vh + env(safe-area-inset-bottom)); margin: 0; color: var(--cream); font-size: 15px; font-weight: 600; text-align: center; }
.pt-cta { position: absolute; left: 16px; right: 16px; bottom: calc(5vh + 72px + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 10px; }
.pt-cta .btn { min-height: 46px; padding: 0 20px; font-size: 15px; white-space: nowrap; }
.pt-hint span { display: block; margin-top: 4px; font-size: 20px; animation: pt-bob 1.6s ease-in-out infinite; }
@keyframes pt-bob { 50% { transform: translateY(6px); } }
.pt-now { position: absolute; left: 16px; right: 16px; text-shadow: 0 1px 10px rgba(2, 4, 10, 0.9); top: calc(var(--cy) + var(--h) / 2 + 16px); max-width: 560px; margin: 0 auto; text-align: center; visibility: hidden; opacity: 0; }
.pt-now small { color: var(--muted); font-size: 13px; font-weight: 700; }
.pt-link { display: block; padding: 4px 0; color: var(--text); font: 800 clamp(18px, 4.8vw, 24px)/1.25 Montserrat, system-ui, sans-serif; text-decoration: none; }
.pt-link b { color: var(--gold); white-space: nowrap; }
/* landscape: the window is nearly full height, the caption sits to its right */
.pt-wide .pt-now { left: calc(50% + var(--w) / 2 + 32px); right: 24px; top: var(--cy); max-width: 340px; margin: 0; transform: translateY(-50%); text-align: left; }
.pt-wide .pt-link { font-size: clamp(18px, 2vw, 26px); }
.pt-play { position: absolute; left: 50%; top: var(--cy); transform: translate(-50%, -50%); min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--gold); color: #1a1204; font: 800 16px Montserrat, system-ui, sans-serif; cursor: pointer; }
.pt-play[hidden] { display: none; }
/* no WebGL: the trailer window alone, framed in the portal colours */
.pt-nogl .pt-gl { display: none; }
.pt-nogl .pt-stage { background: radial-gradient(60% 50% at 50% 46%, #0c2148, #02040a); }
.pt-nogl .pt-vid { border-radius: 20px; box-shadow: 0 0 0 2px var(--cyan), 0 0 48px rgba(92, 208, 214, 0.55); }
.pt-still .pt-vid { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .pt-hint span { animation: none; } }

/* ---- category pages (/kategori/<niche>/, build.mjs): each niche has its colours (--t1 main, --t2 second, --tb dark tint) and an
   animated art (kategori-art.mjs) in the hero; the page is wider than the reading pages so the episode list can run in two columns */
.wide .wrap { max-width: 920px; }
.kat { --t1: var(--cyan); --t2: var(--gold); --tb: #0b1830; }
.kat[data-k="alam"] { --t1: #5be38b; --t2: #5cd0d6; --tb: #0b2a22; }
.kat[data-k="antariksa"] { --t1: #a58bff; --t2: #5cd0d6; --tb: #170f3a; }
.kat[data-k="kesehatan"] { --t1: #ff6b7d; --t2: #ff9eb0; --tb: #2e0d18; }
.kat[data-k="sejarah"] { --t1: #e8b04a; --t2: #c98b4b; --tb: #2a1c08; }
.kat[data-k="teknologi"] { --t1: #4fd8ff; --t2: #ffd34d; --tb: #06213a; }
.kat[data-k="eksperimen"] { --t1: #b6f35c; --t2: #b07cff; --tb: #1c1236; }
.kat-hero {
  display: grid; gap: 6px; margin: 4px 0 26px; padding: 16px 18px 22px; overflow: hidden;
  border: 1px solid var(--line); border-color: color-mix(in srgb, var(--t1) 38%, transparent); border-radius: 24px;
  background: radial-gradient(110% 80% at 85% 0%, color-mix(in srgb, var(--t1) 20%, transparent), transparent 60%), linear-gradient(160deg, var(--tb), var(--panel) 80%);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--t1) 12%, transparent);
}
.kat-hero .ka { order: -1; justify-self: center; width: 100%; max-width: 280px; height: auto; }
.kat-eyebrow { color: var(--t1); font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.kat-hero h1 { margin: 4px 0 8px; font-size: clamp(28px, 7.5vw, 44px); background: linear-gradient(90deg, #fff 30%, var(--t1)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kat-hero p { margin: 0 0 14px; color: #c9d3e2; font-size: 16px; }
.kat-count { display: inline-flex; padding: 5px 12px; border: 1px solid var(--t1); border-radius: 999px; color: var(--t1); font-size: 13px; font-weight: 800; }
.kat .back { color: var(--t1); }
.kat h2 { margin-top: 34px; }
.kat .card small { color: var(--t1); }
.kat .card:hover, .kat .card:active { border-color: var(--t1); }
.kat-feat { display: grid; grid-template-columns: 38% 1fr; gap: 16px; align-items: center; padding: 12px; border: 1px solid var(--line); border-color: color-mix(in srgb, var(--t1) 45%, transparent); border-radius: 20px; background: linear-gradient(120deg, color-mix(in srgb, var(--t1) 10%, var(--panel)), var(--panel)); color: var(--text); text-decoration: none; transition: transform 0.25s, box-shadow 0.25s; }
.kat-feat img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; }
.kat-feat span { display: grid; gap: 6px; min-width: 0; }
.kat-feat small { color: var(--t1); font-size: 13px; font-weight: 800; }
.kat-feat strong { font: 800 clamp(17px, 4.6vw, 24px)/1.25 Montserrat, system-ui, sans-serif; }
.kat-feat em { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 14px; font-style: normal; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.kat-feat b { justify-self: start; margin-top: 4px; padding: 8px 16px; border-radius: 999px; background: var(--t1); color: #06101a; font-size: 14px; }
.kat-feat:hover { transform: translateY(-3px); box-shadow: 0 14px 40px color-mix(in srgb, var(--t1) 22%, transparent); }
.kat .cat-grid { margin-bottom: 8px; }
@media (min-width: 720px) {
  .kat-hero { grid-template-columns: 1fr 300px; align-items: center; gap: 24px; padding: 28px 32px; }
  .kat-hero .ka { order: 0; max-width: 300px; }
  .kat .cards { grid-template-columns: repeat(2, 1fr); }
  .kat-feat { grid-template-columns: 220px 1fr; gap: 24px; padding: 16px; }
  .kat-feat em { -webkit-line-clamp: 4; }
}
@media (min-width: 1000px) { .kat .cat-grid { grid-template-columns: repeat(5, 1fr); } }
/* the art's motion */
.ka .spin, .ka .spin-r, .ka .beat, .ka .bob, .ka .drift, .ka .rise { transform-box: fill-box; transform-origin: center; }
.ka .orbit, .ka .swing { transform-box: view-box; }
.ka .spin, .ka .orbit { animation: ka-spin var(--d, 20s) linear infinite; }
.ka .spin-r { animation: ka-spin var(--d, 20s) linear infinite reverse; }
.ka .twinkle { animation: ka-twinkle 2.4s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.ka .glow { animation: ka-glow 2.2s ease-in-out infinite; }
.ka .beat { animation: ka-beat 1.3s ease-in-out infinite; }
.ka .ecg { stroke-dasharray: 160 480; animation: ka-ecg 2.6s linear infinite; }
.ka .route { stroke-dasharray: 46 254; animation: ka-route 3.2s linear infinite; }
.ka .pulse-line { stroke-dasharray: 14 220; animation: ka-pulse 2.4s linear infinite; animation-delay: var(--dl, 0s); }
.ka .flow { stroke-dasharray: 30 90; animation: ka-flow 3s linear infinite; }
.ka .rise { animation: ka-rise 2.8s ease-in infinite; animation-delay: var(--dl, 0s); }
.ka .bob { animation: ka-bob 3.2s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.ka .swing { animation: ka-swing 4s ease-in-out infinite; }
.ka .drift { animation: ka-drift 6s ease-in-out infinite; }
.ka .shoot { opacity: 0; animation: ka-shoot 5s ease-in infinite 1s; }
.ka .wave { animation: ka-wave 2.4s linear infinite; }
@keyframes ka-spin { to { transform: rotate(360deg); } }
@keyframes ka-twinkle { 50% { opacity: 0.2; } }
@keyframes ka-glow { 50% { opacity: 0.55; } }
@keyframes ka-beat { 0%, 45%, 100% { transform: scale(1); } 12% { transform: scale(1.14); } 28% { transform: scale(1.06); } }
@keyframes ka-ecg { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -640; } }
@keyframes ka-route { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
@keyframes ka-pulse { from { stroke-dashoffset: 234; } to { stroke-dashoffset: 0; } }
@keyframes ka-flow { to { stroke-dashoffset: -120; } }
@keyframes ka-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-110px); opacity: 0; } }
@keyframes ka-bob { 50% { transform: translateY(-8px) rotate(8deg); } }
@keyframes ka-swing { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(18deg); } }
@keyframes ka-drift { 50% { transform: translate(10px, -9px) rotate(18deg); } }
@keyframes ka-shoot { 0% { transform: translate(0, 0); opacity: 0; } 4% { opacity: 1; } 22% { transform: translate(150px, 75px); opacity: 0; } 100% { transform: translate(150px, 75px); opacity: 0; } }
@keyframes ka-wave { to { transform: translateX(-40px); } }
@media (prefers-reduced-motion: reduce) { .ka * { animation: none !important; } .ka .shoot { opacity: 0; } }

/* footer */
.foot { margin-top: 48px; padding-top: 20px; padding-bottom: 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 18px; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; }

/* episode "Bagikan" (a <button> styled as .btn) */
.share { cursor: pointer; }

/* plain boxes: "Usul topik" (USUL_TOPIK) and "Kerja sama" (EMAIL_BISNIS) in build.mjs */
.box { margin: 32px 0; padding: 22px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.box h2 { margin-top: 0; }
.box p { margin: 0 0 16px; color: var(--muted); }
.box p:last-child { margin-bottom: 0; }
.box small { display: block; margin-top: 10px; color: var(--muted); font-size: 13px; }

/* landing "Keliling Bumi" (globe.js). Without WebGL: a plain list of the episode cards. With it (.on): the globe sticks under the
   header while the cards scroll past, one screen each; phones have the globe on top and the card under it, wide screens side by side */
.geo h2 { margin-top: 52px; }
.geo-lead { color: var(--muted); }
.geo-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.geo-place { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 5px 12px; border: 1px solid rgba(242, 169, 59, 0.4); border-radius: 999px; background: rgba(5, 11, 24, 0.85); color: var(--gold); font-size: 13px; font-weight: 700; }
.geo-place::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.25); }
.geo-credit { margin-top: 12px; color: var(--muted); font-size: 12px; }
.geo-stick { display: none; }
.geo.on .geo-stick { position: sticky; top: var(--top); display: grid; place-items: start center; height: calc(100vh - var(--top)); height: calc(100svh - var(--top)); padding-top: 2svh; pointer-events: none; }
.geo-gl { display: block; width: min(100%, 56svh, 600px); aspect-ratio: 1; }
.geo.on .geo-steps { position: relative; gap: 0; margin-top: calc(var(--top) - 100vh); margin-top: calc(var(--top) - 100svh); }
.geo.on .geo-step { display: flex; align-items: flex-end; min-height: 85vh; min-height: 85svh; padding-bottom: 4svh; }
.geo.on .geo-card { width: 100%; opacity: 0.45; transition: opacity 0.3s; }
.geo.on .geo-step.now .geo-card { opacity: 1; }
@media (min-width: 900px) {
  .geo.on .geo-stick { place-items: center start; padding: 0; }
  .geo-gl { width: min(56%, 82svh, 620px); }
  .geo.on .geo-step { align-items: center; justify-content: flex-end; padding: 0; }
  .geo.on .geo-card { width: min(420px, 40%); }
}
@media (prefers-reduced-motion: reduce) { .geo.on .geo-card { transition: none; } }
/* tour drag (globe.js): the cards' empty step area lets the pointer through to the globe; on phones only sideways drags turn it */
.geo-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; }
.geo-cta small { color: var(--muted); font-size: 13px; }
.geo:not(.on) .geo-cta { display: none; }
.geo-play { cursor: pointer; }
.geo.on .geo-steps { pointer-events: none; }
.geo.on .geo-card { pointer-events: auto; }
.geo.on .geo-gl { pointer-events: auto; touch-action: pan-y; cursor: grab; }
.geo.on .geo-gl:active { cursor: grabbing; }

/* "Lab Bumi" (globe.js): a full-screen dialog; the globe's canvas moves in while it is open and the page behind stops scrolling */
html.lab-open { overflow: hidden; }
.lab { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; background: radial-gradient(120% 70% at 50% 40%, #0c2148, var(--bg) 70%); color: var(--text); }
.lab[hidden] { display: none; }
.lab-top { display: flex; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 16px 6px; }
.lab-top b { flex: 1; font-family: Montserrat, system-ui, sans-serif; font-size: 18px; font-weight: 800; }
.lab-top button, .lab-tools button { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel2); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.lab-top .lab-x { justify-content: center; width: 44px; padding: 0; font-size: 18px; }
.lab [aria-pressed="true"] { border-color: var(--gold); background: rgba(242, 169, 59, 0.16); color: var(--gold); }
.lab-stage { position: relative; min-height: 0; }
.lab .geo-gl { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; touch-action: none; cursor: grab; }
.lab .geo-gl:active { cursor: grabbing; }
.lab .geo-gl:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.lab-info { width: 100%; max-width: 680px; min-height: 84px; margin: 0 auto; padding: 4px 16px 0; }
.lab-msg { margin: 0 0 4px; font-weight: 700; }
.lab-live { margin: 0 0 4px; color: var(--cyan); font-size: 14px; font-variant-numeric: tabular-nums; }
.lab-fact { margin: 0 0 4px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.lab-note { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; font-style: italic; }
.lab-live:empty, .lab-fact:empty, .lab-note:empty, .lab-act:empty { display: none; }
.lab-act { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.lab-act .btn { min-height: 40px; padding: 6px 14px; font-size: 14px; cursor: pointer; }
.lab-tools { display: flex; gap: 8px; padding: 8px 16px max(10px, env(safe-area-inset-bottom)); overflow-x: auto; scrollbar-width: none; }
@media (min-width: 900px) { .lab-tools { flex-wrap: wrap; justify-content: center; } }
@media (max-height: 640px) { .lab-fact { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } }

/* header links and "Menu" (see the header menu notes above) */
.top.wrap { max-width: 1120px; }
.drop-cat { display: none; }
.drop-panel { max-height: calc(100vh - var(--top) - 16px); max-height: calc(100svh - var(--top) - 16px); overflow-y: auto; }
.drop-h { margin: 8px 12px 2px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
@media (min-width: 480px) { .drop-cat { display: block; } .drop-more .phone { display: none; } }
@media (min-width: 1080px) {
  .menu > a { display: inline-flex; align-items: center; min-height: 44px; }
  .drop-more { display: none; }
}

/* Lab Bumi damage line and a panel that scrolls on short screens instead of squeezing the globe */
.lab-harm { margin: 0 0 4px; color: #f1c9b8; font-size: 14px; line-height: 1.5; }
.lab-harm::before { content: "Dampak: "; color: var(--gold); font-weight: 700; }
.lab-harm:empty { display: none; }
.lab-info { max-height: 40vh; max-height: 40svh; overflow-y: auto; }