/* ==========================================================================
   Homepage skin "Mading" (majalah dinding) — 2026-11-12. Was "Krayon".
   A second LOOK for the same homepage markup (pages/home.php, body.hb).
   Nothing here changes content or DOM, so crawlers, no-JS users and SEO see
   exactly one page; the skin is a per-visitor preference.

   Direction — a school wall board (mading): posters, comics, notices,
   infographics and crayon drawings pinned side by side. Six source
   posters, one vocabulary each:
     - crayon doodle poster  → paper grain, hand lettering, tilted cards, doodles
     - job-fair poster       → royal blue + glossy gold, red pill kicker, slanted
                               gold banner buttons, merah-putih ribbon
     - B&W infographic       → black pill headers sitting on thick-ruled boxes,
                               black check circles
     - utility notice (ABH)  → white rows with blue icon chip + vertical divider,
                               megaphone badge, blue bottom bar
     - comic strip           → red masthead with outlined yellow lettering,
                               speech bubbles, offset ink shadows
     - job vacancy (Batam)   → yellow "hati-hati" warning box, city skyline
   Spend: the masthead (H1) and hero title are the loud pieces; everything else
   is ink + paper with blue/gold accents.

   Activation: DEFAULT skin. header.php renders <html class="hc"> on the
   homepage; its inline <head> script removes it before first paint when
   localStorage 'lk21_home_skin' === 'bento'. The switch lives in
   the homepage intro (.hb-skin). Accessibility mode (html.a11y-on) always
   wins: every rule is scoped `html.hc:not(.a11y-on) body.hb`, so a11y users
   get the plain bento skin that home-bento.css already adapts for them.

   SOURCE FILE: write rules with the html.hc:not(.a11y-on) body.hb placeholder; build home-crayon.css with
     sed 's/html.hc:not(.a11y-on) body.hb/html.hc:not(.a11y-on) body.hb/g' home-mading.src.css > home-mading.css
   Fonts (OFL) are self-hosted and only downloaded when a rule here uses them,
   i.e. only for visitors who picked this skin.
   ========================================================================== */

@font-face { font-family: 'Bangers'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/bangers/latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Patrick Hand'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/patrick-hand/latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }

html.hc:not(.a11y-on) body.hb {
  /* legacy tokens → notice-board paper (dropdowns, suggest, ads, bottom nav) */
  --primary: #1546b8; --primary-dark: #0e3591;
  --bg-dark: #fdfaf1; --bg-card: #ffffff; --bg-hover: #eef3ff;
  --text: #1c1c1c; --text-muted: #55534b; --border: #e2dccb;

  --hb-bg: #fdfaf1; --hb-paper: #ffffff; --hb-ink: #1c1c1c; --hb-muted: #55534b; --hb-line: #e2dccb;
  --hb-orange: #d7262e; --hb-orange-ink: #d7262e; --hb-blue: #1546b8; --hb-navy: #0b2a6f;

  /* named after where each came from, so the next edit knows why it exists */
  --hc-ink: #1c1c1c;          /* B&W infographic rules + pills */
  --hc-royal: #1546b8;        /* job-fair / Batam blue */
  --hc-navy: #0b2a6f;         /* poster night-sky */
  --hc-gold: #f5b400;         /* job-fair gold, flat */
  --hc-gold-hi: #ffe58a;
  --hc-gold-lo: #b97900;
  --hc-red: #d7262e;          /* comic masthead + merah-putih */
  --hc-green: #2f8a3c;        /* crayon green (status ok, meta) */
  --hc-sky: #e8f0ff;          /* ABH row tint */
  --hc-warn: #ffd84a;         /* Batam warning box */
  --hc-gold-grad: linear-gradient(180deg, #fff3b8 0%, #ffd23f 38%, #f5a800 62%, #ffcf3a 100%);
  --hc-hand: 'Patrick Hand', 'Comic Sans MS', 'Segoe Print', cursive;
  --hc-display: 'Bangers', 'Impact', 'Arial Black', sans-serif;
  /* the classic hand-drawn border: no filter, costs nothing to paint */
  --hc-wob: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --hc-wob2: 18px 225px 18px 255px / 255px 18px 225px 18px;

  background-color: #fdfaf1;
  /* paper grain (one tiny cached SVG tile) + a faint crayon sky wash at the top */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .32 0 0 0 0 .4 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #dfe9ff 0, #fdfaf1 520px);
  background-repeat: repeat, no-repeat;
  color: var(--hb-ink);
}
html.hc:not(.a11y-on) body.hb a:focus-visible, html.hc:not(.a11y-on) body.hb button:focus-visible, html.hc:not(.a11y-on) body.hb summary:focus-visible, html.hc:not(.a11y-on) body.hb input:focus-visible { outline: 3px dashed var(--hc-royal); outline-offset: 4px; border-radius: 10px; }

/* ---------- Header: white strip, ink rule, blue/gold wordmark ---------- */
html.hc:not(.a11y-on) body.hb .header { background: rgba(255,255,255,.97); border: 3px solid var(--hc-ink); border-radius: var(--hc-wob); box-shadow: 4px 5px 0 var(--hc-royal); }
html.hc:not(.a11y-on) body.hb .header .logo { font-family: var(--hc-display); font-size: 2.1rem; letter-spacing: 1px; color: var(--hc-royal); -webkit-text-fill-color: var(--hc-royal); text-shadow: 2px 2px 0 var(--hc-gold); }
html.hc:not(.a11y-on) body.hb .header .logo::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='4' y='13' width='32' height='22' rx='3' fill='%23f5b400' stroke='%231c1c1c' stroke-width='3'/%3E%3Cpath d='M4 13l6-8M14 13l6-8M24 13l6-8M4 13h32' stroke='%231c1c1c' stroke-width='3'/%3E%3Cpath d='M17 19l8 5-8 5z' fill='%23d7262e' stroke='%23d7262e' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; border-radius: 0; transform: rotate(-6deg); }
html.hc:not(.a11y-on) body.hb .nav-links > a, html.hc:not(.a11y-on) body.hb .nav-links .dropdown-toggle { font-family: var(--hc-hand); font-size: 1.08rem; font-weight: 400; color: var(--hb-ink); }
html.hc:not(.a11y-on) body.hb .nav-links > a:hover, html.hc:not(.a11y-on) body.hb .nav-links > a.active, html.hc:not(.a11y-on) body.hb .dropdown:hover .dropdown-toggle { color: var(--hc-royal); background: transparent; box-shadow: inset 0 -4px 0 var(--hc-gold); border-radius: 4px; }
html.hc:not(.a11y-on) body.hb .dropdown-menu { background: #fff; border: 2.5px solid var(--hb-ink); border-radius: var(--hc-wob2); box-shadow: 5px 6px 0 var(--hc-royal); }
html.hc:not(.a11y-on) body.hb .dropdown-menu a { font-family: var(--hc-hand); font-size: 1rem; }
html.hc:not(.a11y-on) body.hb .dropdown-menu a:hover { background: var(--hc-sky); color: var(--hc-royal); }
html.hc:not(.a11y-on) body.hb .header-search { background: #fff; border: 2.5px solid var(--hb-ink); border-radius: 40px 34px 38px 30px / 30px 38px 34px 40px; }
html.hc:not(.a11y-on) body.hb .header-search:focus-within { border-color: var(--hc-royal); }
html.hc:not(.a11y-on) body.hb .header-search input { font-family: var(--hc-hand); font-size: 1.02rem; }
html.hc:not(.a11y-on) body.hb .search-submit { background: var(--hc-gold) !important; color: var(--hb-ink) !important; border-radius: 14px 10px 16px 9px !important; }
html.hc:not(.a11y-on) body.hb .search-suggest { background: #fff !important; border: 2.5px solid var(--hb-ink) !important; border-radius: 16px !important; }
html.hc:not(.a11y-on) body.hb .search-suggest .ss-row:hover { background: var(--hc-sky) !important; }
html.hc:not(.a11y-on) body.hb .bottom-nav { background: rgba(255,255,255,.98) !important; border-top: 3px solid var(--hb-ink); }
html.hc:not(.a11y-on) body.hb .bottom-nav-item { font-family: var(--hc-hand); color: var(--hb-ink) !important; }
html.hc:not(.a11y-on) body.hb .bottom-nav-item.active, html.hc:not(.a11y-on) body.hb .bottom-nav-item:hover { color: var(--hc-royal) !important; }

/* ---------- Shared: section heads are B&W infographic pills ---------- */
html.hc:not(.a11y-on) body.hb .hb-title { display: inline-flex; font: 400 1.85rem/1 var(--hc-display); letter-spacing: 1px; color: #fff; background: var(--hc-ink); padding: 9px 22px 7px 18px; border-radius: 999px; box-shadow: 4px 4px 0 var(--hc-gold); }
html.hc:not(.a11y-on) body.hb .hb-title .hb-ic { color: var(--hc-gold); width: 24px; height: 24px; stroke-width: 2.6; }
html.hc:not(.a11y-on) body.hb .hb-head { margin-bottom: 20px; }
html.hc:not(.a11y-on) body.hb .hb-sub { font-family: var(--hc-hand); font-size: 1.1rem; color: var(--hc-royal); margin-top: 8px; }
html.hc:not(.a11y-on) body.hb .hb-more { font-family: var(--hc-hand); font-size: 1.08rem; font-weight: 400; color: var(--hc-royal); }
html.hc:not(.a11y-on) body.hb .hb-more:hover { color: var(--hc-red); }
html.hc:not(.a11y-on) body.hb .hb-tabs { background: transparent; gap: 8px; padding: 0; }
html.hc:not(.a11y-on) body.hb .hb-tab, html.hc:not(.a11y-on) body.hb .hb-gtab, html.hc:not(.a11y-on) body.hb .hb-filter button { font-family: var(--hc-hand); font-size: 1.04rem; font-weight: 400; color: var(--hb-ink); background: #fff; border: 2.5px solid var(--hb-ink); border-radius: 999px; box-shadow: none; }
html.hc:not(.a11y-on) body.hb .hb-tab[aria-selected="true"], html.hc:not(.a11y-on) body.hb .hb-gtab[aria-selected="true"], html.hc:not(.a11y-on) body.hb .hb-filter button[aria-pressed="true"] { background: var(--hc-royal); color: #fff; border-color: var(--hb-ink); box-shadow: 3px 3px 0 var(--hc-gold); }
html.hc:not(.a11y-on) body.hb .hb-pill { font-family: var(--hc-hand); font-size: .98rem; font-weight: 400; }

/* ---------- Intro: comic masthead + speech-bubble lead ---------- */
html.hc:not(.a11y-on) body.hb .hb-intro { position: relative; padding: 18px 120px 0 0; margin-top: 14px; }
/* merah-putih ribbon falling across the top-left corner (job-fair poster) */
html.hc:not(.a11y-on) body.hb .hb-intro::before { content: ''; position: absolute; left: -10px; top: -14px; width: 150px; height: 46px; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, var(--hc-red) 0 50%, #fff 50% 100%); border: 2px solid var(--hc-ink); border-radius: 4px 14px 4px 14px; transform: rotate(-9deg); box-shadow: 2px 3px 0 rgba(0,0,0,.18); }
html.hc:not(.a11y-on) body.hb .hb-intro h1 { position: relative; display: inline-block; margin-bottom: 18px; padding: 14px 24px 10px; max-width: none;
  font: 400 clamp(32px, 4.2vw, 56px)/1 var(--hc-display); letter-spacing: 1.5px; color: var(--hc-gold);
  background: var(--hc-red); border: 4px solid var(--hc-ink); border-radius: 6px; box-shadow: 6px 6px 0 var(--hc-ink);
  -webkit-text-stroke: 1.5px var(--hc-ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--hc-ink); transform: rotate(-1deg); transform-origin: left; }
html.hc:not(.a11y-on) body.hb .hb-intro h1 .hb-star { color: #fff; }
html.hc:not(.a11y-on) body.hb .hb-lead { position: relative; max-width: 72ch; font-family: var(--hc-hand); font-size: 1.12rem; line-height: 1.45; background: #fff; border: 3px solid var(--hc-ink); border-radius: 26px 30px 24px 32px / 30px 24px 32px 26px; padding: 14px 20px; }
/* bubble tail pointing up at the masthead */
html.hc:not(.a11y-on) body.hb .hb-lead::before { content: ''; position: absolute; left: 46px; top: -17px; width: 24px; height: 17px; background: var(--hc-ink); clip-path: polygon(0 100%, 30% 0, 100% 100%); }
html.hc:not(.a11y-on) body.hb .hb-lead::after { content: ''; position: absolute; left: 50px; top: -11px; width: 17px; height: 12px; background: #fff; clip-path: polygon(0 100%, 30% 0, 100% 100%); }
html.hc:not(.a11y-on) body.hb .hb-lead strong { color: var(--hc-royal); }
/* megaphone badge (utility-notice "UPDATE" chip) */
html.hc:not(.a11y-on) body.hb .hb-intro::after { content: ''; position: absolute; right: 4px; top: 6px; width: 104px; height: 104px; pointer-events: none; transform: rotate(6deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='6' y='8' width='84' height='74' rx='18' fill='%231546b8' stroke='%231c1c1c' stroke-width='4'/%3E%3Cpath d='M40 82 28 96l22-14' fill='%231546b8' stroke='%231c1c1c' stroke-width='4' stroke-linejoin='round'/%3E%3Cg fill='%23fff' stroke='%23fff' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M22 38h10l26-14v42L32 52H22z' stroke-width='3'/%3E%3Cpath d='M28 52l4 14h8l-3-14' stroke-width='3'/%3E%3C/g%3E%3Cg fill='none' stroke='%23f5b400' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M66 34q6 11 0 22'/%3E%3Cpath d='M74 27q11 18 0 36'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; }
html.hc:not(.a11y-on) body.hb .hb-note { display: none; }

/* Skin switch — visible in both skins (base styles live in home-bento.css) */
html.hc:not(.a11y-on) body.hb .hb-skin { border: 2.5px solid var(--hb-ink); border-radius: 999px; background: #fff; }
html.hc:not(.a11y-on) body.hb .hb-skin button { font-family: var(--hc-hand); font-size: 1rem; font-weight: 400; border-radius: 999px; }
html.hc:not(.a11y-on) body.hb .hb-skin button[aria-pressed="true"] { background: var(--hc-royal); color: #fff; }

/* ---------- Hero: job-fair poster — night blue, gold frame, glossy title ---------- */
html.hc:not(.a11y-on) body.hb .hb-hero { background: var(--hc-navy); border: 4px solid var(--hc-ink); border-radius: 18px; box-shadow: inset 0 0 0 4px var(--hc-gold), 8px 9px 0 var(--hc-royal); overflow: hidden; }
html.hc:not(.a11y-on) body.hb .hb-hero > .hb-hero-img { border-radius: inherit; }
html.hc:not(.a11y-on) body.hb .hb-hero::after { border-radius: inherit; background:
    radial-gradient(120% 90% at 0% 100%, rgba(255,210,63,.22) 0, rgba(255,210,63,0) 45%),
    linear-gradient(90deg, rgba(8,28,82,.94) 0%, rgba(11,42,111,.72) 46%, rgba(21,70,184,.08) 82%),
    linear-gradient(0deg, rgba(8,28,82,.8) 0%, rgba(8,28,82,0) 48%); }
html.hc:not(.a11y-on) body.hb .hb-hero-kicker { font-family: var(--hc-hand); font-size: 1.02rem; background: var(--hc-red); color: #fff; border: 2.5px solid var(--hc-gold); border-radius: 999px; box-shadow: 0 2px 0 rgba(0,0,0,.35); }
html.hc:not(.a11y-on) body.hb .hb-hero-kicker .hb-ic { color: var(--hc-gold-hi); }
html.hc:not(.a11y-on) body.hb .hb-hero h2 { font: 400 clamp(40px, 5.2vw, 70px)/.92 var(--hc-display); letter-spacing: 1.5px; filter: drop-shadow(3px 4px 0 #061a4d); }
html.hc:not(.a11y-on) body.hb .hb-hero h2, html.hc:not(.a11y-on) body.hb .hb-hero h2 a { background: var(--hc-gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px #7a4b00; }
html.hc:not(.a11y-on) body.hb .hb-hero p { font-size: 1rem; color: #e6edff; }
html.hc:not(.a11y-on) body.hb .hb-meta span { font-family: var(--hc-hand); font-size: .98rem; font-weight: 400; background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,229,138,.55); }
html.hc:not(.a11y-on) body.hb .hb-meta .hb-rt { background: var(--hc-gold); color: var(--hb-ink); border-color: var(--hc-gold); }
html.hc:not(.a11y-on) body.hb .hb-btn { font-family: var(--hc-display); font-size: 1.35rem; letter-spacing: 1px; min-height: 50px; border-radius: 6px; }
/* gold slanted banner ("Wujudkan Karier") — skew the box, un-skew nothing: text stays legible at -8deg */
html.hc:not(.a11y-on) body.hb .hb-btn-primary { background: var(--hc-gold-grad); color: var(--hc-navy); border: 2.5px solid var(--hc-ink); box-shadow: 4px 4px 0 var(--hc-ink); transform: skewX(-8deg); }
html.hc:not(.a11y-on) body.hb .hb-btn-primary:hover { background: var(--hc-gold-grad); color: var(--hc-navy); transform: skewX(-8deg) translate(2px, 2px); box-shadow: 2px 2px 0 var(--hc-ink); }
html.hc:not(.a11y-on) body.hb .hb-btn-ghost { border: 2.5px solid #fff; box-shadow: none; transform: skewX(-8deg); }
html.hc:not(.a11y-on) body.hb .hb-btn-dark { background: var(--hc-red); color: #fff; border: 2.5px solid var(--hc-ink); box-shadow: 4px 4px 0 var(--hc-ink); transform: skewX(-8deg); }

/* ---------- Live: utility-notice card — black pill, ABH rows ---------- */
html.hc:not(.a11y-on) body.hb .hb-live { background: #fff; border: 3px solid var(--hc-ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--hc-royal); }
html.hc:not(.a11y-on) body.hb .hb-live-head h2 { display: inline-flex; align-items: center; gap: 8px; font: 400 1.5rem/1 var(--hc-display); letter-spacing: 1px; color: #fff; background: var(--hc-ink); padding: 7px 16px 5px 12px; border-radius: 999px; }
html.hc:not(.a11y-on) body.hb .hb-live-head h2 .hb-ic { color: var(--hc-gold); }
html.hc:not(.a11y-on) body.hb .hb-live-dot { font-family: var(--hc-display); font-size: 1.15rem; letter-spacing: 1px; color: var(--hc-red); }
html.hc:not(.a11y-on) body.hb .hb-live > p { font-family: var(--hc-hand); font-size: 1.02rem; }
html.hc:not(.a11y-on) body.hb .hb-screen { border: 3px solid var(--hc-ink); border-radius: 12px; box-shadow: inset 0 0 0 3px var(--hc-gold); }
html.hc:not(.a11y-on) body.hb .hb-screen::after { border-radius: inherit; }
html.hc:not(.a11y-on) body.hb .hb-screen small { font-family: var(--hc-hand); font-size: .92rem; color: var(--hc-gold-hi); }
html.hc:not(.a11y-on) body.hb .hb-screen strong { font: 400 1.45rem/1.02 var(--hc-display); letter-spacing: .8px; }
/* each mode = blue chip + vertical divider + text, like the notice rows */
html.hc:not(.a11y-on) body.hb .hb-mode { background: var(--hc-sky); border: 0; border-left: 5px solid var(--hc-royal); border-radius: 4px 12px 12px 4px; }
html.hc:not(.a11y-on) body.hb .hb-mode b { font-family: var(--hc-display); font-size: 1.02rem; letter-spacing: .6px; font-weight: 400; color: var(--hc-royal); }
html.hc:not(.a11y-on) body.hb .hb-mode span { font-family: var(--hc-hand); font-size: .88rem; color: var(--hb-ink); }
html.hc:not(.a11y-on) body.hb .hb-mode:hover { background: #fff6cf; border-left-color: var(--hc-gold); }

/* ---------- Mood: comic speech bubble ---------- */
html.hc:not(.a11y-on) body.hb .hb-mood { overflow: visible; background: #fff; border: 3.5px solid var(--hc-ink); border-radius: 46% 54% 42% 58% / 22% 26% 24% 20%; padding: 24px 26px 26px; box-shadow: 5px 6px 0 var(--hc-gold); }
html.hc:not(.a11y-on) body.hb .hb-mood::after { content: ''; position: absolute; left: 22%; bottom: -26px; width: 34px; height: 30px; background: var(--hc-ink); clip-path: polygon(0 0, 100% 0, 10% 100%); }
html.hc:not(.a11y-on) body.hb .hb-mood .hb-pill { background: var(--hc-warn); color: var(--hb-ink); border: 2px solid var(--hc-ink); transform: rotate(-3deg); }
html.hc:not(.a11y-on) body.hb .hb-mood h3 { font: 400 2rem/.95 var(--hc-display); letter-spacing: 1px; color: var(--hc-royal); }
html.hc:not(.a11y-on) body.hb .hb-mood p { font-family: var(--hc-hand); font-size: 1.04rem; color: #3b3a35; }
html.hc:not(.a11y-on) body.hb .hb-mood .hb-more { color: var(--hc-red); }

/* ---------- Quick nav chips: Batam-blue pills, hot one in gold ---------- */
html.hc:not(.a11y-on) body.hb .hb-quick > span { font-family: var(--hc-hand); font-size: 1rem; }
html.hc:not(.a11y-on) body.hb .hb-chip { font-family: var(--hc-hand); font-size: 1.04rem; font-weight: 400; background: #fff; border: 2.5px solid var(--hc-ink); color: var(--hb-ink); border-radius: 999px; box-shadow: 2px 3px 0 var(--hc-royal); }
html.hc:not(.a11y-on) body.hb .hb-chip:hover { background: var(--hc-sky); color: var(--hc-royal); }
html.hc:not(.a11y-on) body.hb .hb-chip.is-hot { background: var(--hc-gold-grad); border-color: var(--hc-ink); color: var(--hc-navy); box-shadow: 2px 3px 0 var(--hc-ink); }
html.hc:not(.a11y-on) body.hb .hb-chip .hb-ic { color: currentColor; }

/* ---------- Poster cards: crayon tilt, ink frame, poster-colour shadow ---------- */
html.hc:not(.a11y-on) body.hb .hb-poster { border: 3px solid var(--hb-ink); border-radius: 10px 14px 9px 13px / 13px 9px 14px 10px; background: #e3e9f6; box-shadow: 4px 4px 0 var(--pc, var(--hc-royal)); }
html.hc:not(.a11y-on) body.hb .hb-card:nth-child(4n+1) { --pc: var(--hc-royal); --tilt: -1.1deg; }
html.hc:not(.a11y-on) body.hb .hb-card:nth-child(4n+2) { --pc: var(--hc-gold); --tilt: .9deg; }
html.hc:not(.a11y-on) body.hb .hb-card:nth-child(4n+3) { --pc: var(--hc-red); --tilt: -.6deg; }
html.hc:not(.a11y-on) body.hb .hb-card:nth-child(4n)   { --pc: var(--hc-ink); --tilt: 1.2deg; }
html.hc:not(.a11y-on) body.hb .hb-card a { transform: rotate(var(--tilt, 0deg)); transition: transform .2s ease; }
html.hc:not(.a11y-on) body.hb .hb-card a:hover { transform: rotate(0deg) translateY(-3px); }
html.hc:not(.a11y-on) body.hb .hb-card a:hover .hb-poster img { transform: none; }
html.hc:not(.a11y-on) body.hb .hb-badge { font-family: var(--hc-display); font-size: .98rem; letter-spacing: .5px; background: var(--hc-gold-grad); color: var(--hc-navy); border: 2px solid var(--hc-ink); border-radius: 6px; transform: rotate(-4deg); }
html.hc:not(.a11y-on) body.hb .hb-badge-r { background: #fff; }
html.hc:not(.a11y-on) body.hb .hb-flag { transform: rotate(3deg); font-family: var(--hb-body); font-size: .72rem; border: 2px solid var(--hb-ink); top: auto; left: auto; right: 6px; bottom: 6px; }
html.hc:not(.a11y-on) body.hb .hb-card-t { font: 400 1.08rem/1.15 var(--hc-hand); }
html.hc:not(.a11y-on) body.hb .hb-card-m { font-family: var(--hc-hand); font-size: .92rem; color: var(--hc-royal); }
html.hc:not(.a11y-on) body.hb .hb-card a:hover .hb-card-t { color: var(--hc-red); }
/* Top-20 numerals: glossy gold poster lettering, ink outline */
html.hc:not(.a11y-on) body.hb .hb-rank-n { font-family: var(--hc-display); font-size: 84px; letter-spacing: 0; color: #fff; -webkit-text-stroke: 3px var(--hb-ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--hc-royal); }
html.hc:not(.a11y-on) body.hb .hb-rank:nth-child(-n+3) .hb-rank-n { color: var(--hc-gold); text-shadow: 4px 4px 0 var(--hc-red); }

/* ---------- Monthly duo: infographic two-box layout, pill on the top rule ---------- */
html.hc:not(.a11y-on) body.hb .hb-month { background: #fff; border: 3.5px solid var(--hc-ink); border-radius: 22px; padding-top: 0; box-shadow: 6px 6px 0 var(--hc-royal); }
html.hc:not(.a11y-on) body.hb .hb-month.is-drama { box-shadow: 6px 6px 0 var(--hc-red); }
html.hc:not(.a11y-on) body.hb .hb-month .hb-head { margin-top: -21px; }
html.hc:not(.a11y-on) body.hb .hb-month .hb-title { font-size: 1.45rem; }
html.hc:not(.a11y-on) body.hb .hb-month.is-drama .hb-title { box-shadow: 4px 4px 0 var(--hc-red); }
html.hc:not(.a11y-on) body.hb .hb-mini b { font: 400 1rem/1.15 var(--hc-hand); }
html.hc:not(.a11y-on) body.hb .hb-mini span { font-family: var(--hc-hand); font-size: .88rem; }
html.hc:not(.a11y-on) body.hb .hb-mini .hb-badge { background: var(--hc-red); color: #fff; }

/* ---------- Dated list: notice rows — blue calendar chip | divider | text ---------- */
html.hc:not(.a11y-on) body.hb .hb-drow { background: #fff; border: 2.5px solid var(--hc-ink); border-radius: 16px; box-shadow: 3px 3px 0 rgba(21,70,184,.35); }
html.hc:not(.a11y-on) body.hb .hb-drow:hover { border-color: var(--hc-royal); box-shadow: 3px 3px 0 var(--hc-gold); }
html.hc:not(.a11y-on) body.hb .hb-date { position: relative; background: var(--hc-royal); color: #fff; border: 2px solid var(--hc-ink); border-radius: 12px; overflow: hidden; padding-top: 8px; }
html.hc:not(.a11y-on) body.hb .hb-date::before { content: ''; position: absolute; inset: 0 0 auto; height: 9px; background: var(--hc-gold); border-bottom: 2px solid var(--hc-ink); }
html.hc:not(.a11y-on) body.hb .hb-date b { font: 400 1.75rem/1 var(--hc-display); letter-spacing: .5px; }
html.hc:not(.a11y-on) body.hb .hb-date span { font-family: var(--hc-hand); font-size: .88rem; font-weight: 400; color: #dfe8ff; }
html.hc:not(.a11y-on) body.hb .hb-drow img { border: 2px solid var(--hb-ink); }
html.hc:not(.a11y-on) body.hb .hb-drow > div { border-left: 3px solid var(--hc-royal); padding-left: 12px; }
html.hc:not(.a11y-on) body.hb .hb-drow h3 { font: 400 1.06rem/1.15 var(--hc-hand); }
html.hc:not(.a11y-on) body.hb .hb-drow p { font-family: var(--hc-hand); font-size: .92rem; color: var(--hc-royal); }

/* ---------- Rekomendasi: comic panel + infographic tiles ---------- */
html.hc:not(.a11y-on) body.hb .hb-feature { border: 4px solid var(--hb-ink); border-radius: 8px; box-shadow: 7px 7px 0 var(--hc-ink); }
html.hc:not(.a11y-on) body.hb .hb-feature::after { border-radius: inherit; }
html.hc:not(.a11y-on) body.hb .hb-feature img { border-radius: inherit; }
html.hc:not(.a11y-on) body.hb .hb-feature .hb-pill { background: var(--hc-warn); color: var(--hb-ink); border: 2px solid var(--hc-ink); transform: rotate(-2deg); }
html.hc:not(.a11y-on) body.hb .hb-feature h3 { font: 400 2.6rem/.95 var(--hc-display); letter-spacing: 1px; color: #fff; -webkit-text-stroke: 1px var(--hc-ink); text-shadow: 3px 3px 0 var(--hc-ink); }
html.hc:not(.a11y-on) body.hb .hb-tile { background: #fff; border: 3px solid var(--hb-ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--hc-gold); }
html.hc:not(.a11y-on) body.hb .hb-tile h3 { font: 400 1.4rem/1 var(--hc-display); letter-spacing: .6px; }
html.hc:not(.a11y-on) body.hb .hb-tile:hover h3 { color: var(--hc-royal); }

/* ---------- Keluarga: the job-fair poster itself — blue night, gold, ribbon ---------- */
html.hc:not(.a11y-on) body.hb .hb-family { color: #fff; background:
    radial-gradient(90% 120% at 100% 0%, rgba(120,170,255,.35) 0, rgba(120,170,255,0) 55%),
    linear-gradient(160deg, #1d5ad8 0%, #1546b8 40%, #0b2a6f 100%);
  border: 4px solid var(--hc-ink); border-radius: 22px; box-shadow: inset 0 0 0 4px var(--hc-gold), 8px 9px 0 var(--hc-ink); }
/* merah-putih ribbon across the top-right corner */
html.hc:not(.a11y-on) body.hb .hb-family::before { border: 0; box-shadow: 0 2px 0 rgba(0,0,0,.25); width: 260px; height: 44px; right: -62px; top: 30px; border-radius: 0; opacity: 1;
  background: linear-gradient(180deg, var(--hc-red) 0 50%, #fff 50% 100%); transform: rotate(38deg); }
html.hc:not(.a11y-on) body.hb .hb-family .hb-pill { background: var(--hc-red); color: #fff; border: 2px solid var(--hc-gold); border-radius: 999px; }
html.hc:not(.a11y-on) body.hb .hb-family h2 { font: 400 3.2rem/.92 var(--hc-display); letter-spacing: 1.5px; color: #fff; text-shadow: 3px 3px 0 #061a4d; }
html.hc:not(.a11y-on) body.hb .hb-family h2 em { font-style: normal; background: var(--hc-gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
html.hc:not(.a11y-on) body.hb .hb-family p { color: #dfe8ff; font-family: var(--hc-hand); font-size: 1.1rem; }
html.hc:not(.a11y-on) body.hb .hb-stack a { border: 4px solid #fff; outline: 3px solid var(--hc-ink); border-radius: 8px; }

/* ---------- Bottom discovery: infographic boxes ---------- */
html.hc:not(.a11y-on) body.hb .hb-box { background: #fff; border: 3px solid var(--hc-ink); border-radius: 20px; box-shadow: 5px 5px 0 var(--hc-royal); }
html.hc:not(.a11y-on) body.hb .hb-box + .hb-box { box-shadow: 5px 5px 0 var(--hc-gold); }
html.hc:not(.a11y-on) body.hb .hb-box h2 { display: inline-block; font: 400 1.6rem/1 var(--hc-display); letter-spacing: 1px; color: #fff; background: var(--hc-ink); padding: 7px 18px 5px; border-radius: 999px; }
html.hc:not(.a11y-on) body.hb .hb-box > p { font-family: var(--hc-hand); font-size: 1.02rem; margin-top: 8px; }
html.hc:not(.a11y-on) body.hb .hb-added { border-top: 2px dashed #c9cfdc; }
html.hc:not(.a11y-on) body.hb .hb-added img { border: 2px solid var(--hb-ink); }
html.hc:not(.a11y-on) body.hb .hb-added b { font: 400 1.04rem var(--hc-hand); }
html.hc:not(.a11y-on) body.hb .hb-added span { font-family: var(--hc-hand); font-size: .9rem; color: var(--hc-royal); }
html.hc:not(.a11y-on) body.hb .hb-tags a { font-family: var(--hc-hand); font-size: 1rem; font-weight: 400; background: #fff; border: 2px solid var(--hb-ink); border-radius: 999px; }
html.hc:not(.a11y-on) body.hb .hb-tags a:first-child { background: var(--hc-gold-grad); border-color: var(--hb-ink); color: var(--hc-navy); }
html.hc:not(.a11y-on) body.hb .hb-tags a:hover { background: var(--hc-sky); color: var(--hc-royal); }

/* ---------- FAQ + about: "Catatan Penting" — long text stays in the body face ---------- */
html.hc:not(.a11y-on) body.hb .hb-info { border-top: 0; position: relative; }
html.hc:not(.a11y-on) body.hb .hb-info::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: repeating-linear-gradient(90deg, var(--hc-ink) 0 18px, transparent 18px 28px); }
html.hc:not(.a11y-on) body.hb .hb-info h2 { display: inline-block; font: 400 1.9rem/1 var(--hc-display); letter-spacing: 1px; color: #fff; background: var(--hc-ink); padding: 8px 20px 6px; border-radius: 999px; }
html.hc:not(.a11y-on) body.hb .hb-faq details { border-bottom: 2px dashed #c9cfdc; }
html.hc:not(.a11y-on) body.hb .hb-faq summary h3 { font: 400 1.16rem/1.3 var(--hc-hand); }
/* the infographic's black check circle */
html.hc:not(.a11y-on) body.hb .hb-faq summary .hb-ic { color: #fff; background: var(--hc-ink); border-radius: 50%; padding: 3px; box-sizing: content-box; }
html.hc:not(.a11y-on) body.hb .hb-faq details[open] summary .hb-ic { background: var(--hc-royal); }
html.hc:not(.a11y-on) body.hb .hb-faq details > div a, html.hc:not(.a11y-on) body.hb .hb-about a { color: var(--hc-royal); }
html.hc:not(.a11y-on) body.hb .hb-stats div { background: #fff; border: 2.5px solid var(--hb-ink); border-radius: 16px; }
html.hc:not(.a11y-on) body.hb .hb-stats div:nth-child(1) { box-shadow: 4px 4px 0 var(--hc-royal); }
html.hc:not(.a11y-on) body.hb .hb-stats div:nth-child(2) { box-shadow: 4px 4px 0 var(--hc-gold); }
html.hc:not(.a11y-on) body.hb .hb-stats div:nth-child(3) { box-shadow: 4px 4px 0 var(--hc-red); }
html.hc:not(.a11y-on) body.hb .hb-stats b { font: 400 2rem/1 var(--hc-display); letter-spacing: 1px; color: var(--hc-royal); }
html.hc:not(.a11y-on) body.hb .hb-stats span { font-family: var(--hc-hand); font-size: .94rem; }

/* ---------- Footer: notice bottom bar + skyline + "hati-hati" warning box ---------- */
html.hc:not(.a11y-on) body.hb .footer { position: relative; background: #fff; border: 3px solid var(--hb-ink); border-radius: 20px; border-top: 10px solid var(--hc-royal); box-shadow: 6px 6px 0 var(--hc-ink); overflow: hidden; padding-bottom: 54px; }
/* city skyline silhouette along the bottom edge (job-vacancy poster) */
html.hc:not(.a11y-on) body.hb .footer::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; pointer-events: none; opacity: .9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='46' viewBox='0 0 320 46'%3E%3Cpath fill='%231546b8' d='M0 46V30h14V18h10v12h8V8h4V4h4v4h4v22h10V22h18v24h6V14l8-6 8 6v32h8V26h14v20h10V12h6V6h2v6h6v34h8V28h20v18h6V20h4l10-10 10 10h4v26h8V30h10v-8h6v8h12v16h8V16h12v30h8V24h18v22z'/%3E%3C/svg%3E") left bottom/320px 46px repeat-x; }
html.hc:not(.a11y-on) body.hb .footer-brand .logo { font-family: var(--hc-display); color: var(--hc-royal); -webkit-text-fill-color: var(--hc-royal); letter-spacing: 1px; text-shadow: 2px 2px 0 var(--hc-gold); }
html.hc:not(.a11y-on) body.hb .footer-col h4 { font: 400 1.35rem var(--hc-display); letter-spacing: 1px; }
html.hc:not(.a11y-on) body.hb .footer-disclaimer { background: var(--hc-warn) !important; border: 3px solid var(--hc-ink) !important; border-radius: 14px !important; box-shadow: 4px 4px 0 var(--hc-ink); color: var(--hc-ink) !important; }
html.hc:not(.a11y-on) body.hb .footer-disclaimer .fd-badge { background: var(--hc-ink) !important; color: var(--hc-warn) !important; }
html.hc:not(.a11y-on) body.hb .footer-disclaimer .fd-text, html.hc:not(.a11y-on) body.hb .footer-disclaimer .fd-text * { color: var(--hc-ink); }
html.hc:not(.a11y-on) body.hb .footer-disclaimer .fd-text a { color: var(--hc-ink); background: #fff; border-color: var(--hc-ink); }
html.hc:not(.a11y-on) body.hb .tf-trailer-modal-box { border: 4px solid var(--hc-gold); border-radius: 14px; }
html.hc:not(.a11y-on) body.hb .tf-trailer-modal-title { font-family: var(--hc-display); font-size: 1.5rem; letter-spacing: 1px; }

/* ---------- Top 20 hover-expand panel ---------- */
html.hc:not(.a11y-on) body.hb .hb-pop { border: 3px solid var(--hb-ink); border-radius: 16px; box-shadow: inset 0 0 0 3px var(--hc-gold), 6px 7px 0 var(--hc-royal); background: var(--hc-navy); }
html.hc:not(.a11y-on) body.hb .hb-pop-poster { border: 2px solid #fff; }
html.hc:not(.a11y-on) body.hb .hb-pop-t { font: 400 1.7rem/1 var(--hc-display); letter-spacing: 1px; color: var(--hc-gold-hi); }
html.hc:not(.a11y-on) body.hb .hb-pop-m { font-family: var(--hc-hand); font-size: .98rem; color: #dfe8ff; }
html.hc:not(.a11y-on) body.hb .hb-pop-tr { font-family: var(--hc-display); font-size: 1.15rem; letter-spacing: 1px; background: var(--hc-gold-grad); color: var(--hc-navy); border: 2.5px solid var(--hb-ink); box-shadow: 3px 3px 0 var(--hb-ink); border-radius: 6px; }

/* ---------- Hover (pointer devices only) ---------- */
@media (hover: hover) {
  html.hc:not(.a11y-on) body.hb .hb-tab:not([aria-selected="true"]):hover, html.hc:not(.a11y-on) body.hb .hb-gtab:not([aria-selected="true"]):hover, html.hc:not(.a11y-on) body.hb .hb-filter button:not([aria-pressed="true"]):hover { background: var(--hc-sky); transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--hb-ink); }
  html.hc:not(.a11y-on) body.hb .hb-skin button:not([aria-pressed="true"]):hover { background: var(--hc-sky); }
  html.hc:not(.a11y-on) body.hb .hb-btn-dark:hover { filter: none; transform: skewX(-8deg) translate(2px, 2px); box-shadow: 2px 2px 0 var(--hb-ink); }
  html.hc:not(.a11y-on) body.hb .hb-btn-ghost:hover { background: rgba(255,255,255,.12); }
  html.hc:not(.a11y-on) body.hb .hb-chip.is-hot:hover { filter: brightness(1.05); }
  html.hc:not(.a11y-on) body.hb .footer-disclaimer .fd-text a:hover { background: var(--hc-sky); }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  html.hc:not(.a11y-on) body.hb .hb-intro { padding-right: 0; padding-top: 22px; }
  html.hc:not(.a11y-on) body.hb .hb-intro::before { width: 104px; height: 34px; left: -6px; top: -8px; }
  html.hc:not(.a11y-on) body.hb .hb-intro::after { width: 64px; height: 64px; top: -16px; right: 0; }
  html.hc:not(.a11y-on) body.hb .hb-intro h1 { font-size: 32px; padding: 11px 16px 8px; margin-right: 58px; box-shadow: 4px 4px 0 var(--hc-ink); }
  html.hc:not(.a11y-on) body.hb .hb-lead { font-size: 1.04rem; padding: 12px 14px; }
  html.hc:not(.a11y-on) body.hb .hb-dated-more { background: #fff; border: 2.5px solid var(--hb-ink); box-shadow: 3px 4px 0 var(--hc-gold); }
  html.hc:not(.a11y-on) body.hb .hb-tile h3 { font-size: 1.2rem; }
  html.hc:not(.a11y-on) body.hb .hb-stats { gap: 8px; }
  html.hc:not(.a11y-on) body.hb .hb-stats div { padding: 12px 10px; min-width: 0; }
  html.hc:not(.a11y-on) body.hb .hb-stats b { font-size: 1.4rem; overflow-wrap: anywhere; }
  html.hc:not(.a11y-on) body.hb .header .logo { font-size: 1.8rem; }
  html.hc:not(.a11y-on) body.hb .hb-title { font-size: 1.45rem; padding: 7px 16px 5px 13px; }
  html.hc:not(.a11y-on) body.hb .hb-rank-n { font-size: 64px; }
  html.hc:not(.a11y-on) body.hb .hb-family h2 { font-size: 2.4rem; }
  html.hc:not(.a11y-on) body.hb .hb-family::before { width: 150px; height: 28px; right: -42px; top: 16px; }
  html.hc:not(.a11y-on) body.hb .hb-mood { border-radius: 26px 30px 24px 32px / 30px 24px 32px 26px; }
  html.hc:not(.a11y-on) body.hb .hb-card a, html.hc:not(.a11y-on) body.hb .hb-intro h1 { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.hc:not(.a11y-on) body.hb .hb-card a { transition: none; }
}


/* ==========================================================================
   v3 layer — the wall. Each section is pinned up as a DIFFERENT poster from
   the six sources, so scrolling reads like walking past a mading:
     #top-bulan     comic masthead (red band, yellow outlined lettering, halftone)
     #film-terbaru  lowongan banner (blue skewed slab, yellow strip sub-line)
     #rilis-terbaru notice "UPDATE" (blue megaphone chip, rule-and-dot underline)
     #rekomendasi   infographic (black pill + pointing-hand doodle)
     #genre         crayon (hand lettering on a yellow crayon scribble + star)
     #you-may-like  comic speech bubble
   Doodles are SVG data URIs with a feTurbulence wobble baked in — the crayon
   edge costs one cached image, never a live filter on page content.
   ========================================================================== */

/* sky band: soft light rays from the top centre + crayon clouds and birds */
html.hc:not(.a11y-on) body.hb {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .32 0 0 0 0 .4 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 56'%3E%3Cdefs%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='3.2'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23r)'%3E %3Cpath d='M18 46h92a15 15 0 0 0-8-28 19 19 0 0 0-34-7 15 15 0 0 0-26 8 13 13 0 0 0-24 27z' fill='%23fff' stroke='%234f7fe0' stroke-width='3' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 56'%3E%3Cdefs%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='3.2'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23r)'%3E %3Cpath d='M18 46h92a15 15 0 0 0-8-28 19 19 0 0 0-34-7 15 15 0 0 0-26 8 13 13 0 0 0-24 27z' fill='%23fff' stroke='%234f7fe0' stroke-width='3' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cdefs%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='3.2'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23r)' fill='none' stroke='%231c1c1c' stroke-width='2.6' stroke-linecap='round'%3E %3Cpath d='M4 14q6-9 12 0q6-9 12 0'/%3E%3Cpath d='M32 24q5-7 10 0q5-7 10 0'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-conic-gradient(from 0deg at 50% -120px, rgba(255,255,255,.34) 0deg 5deg, rgba(255,255,255,0) 5deg 14deg),
    linear-gradient(180deg, #cfdfff 0, #e6eeff 300px, #fdfaf1 640px);
  background-size: 180px 180px, 150px 64px, 104px 45px, 64px 32px, 100% 640px, 100% 640px;
  background-position: 0 0, 46% 112px, 74% 196px, 58% 150px, 0 0, 0 0;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

/* textured black pills: wax-crayon grain over flat ink */
html.hc:not(.a11y-on) body.hb .hb-title, html.hc:not(.a11y-on) body.hb .hb-live-head h2, html.hc:not(.a11y-on) body.hb .hb-box h2, html.hc:not(.a11y-on) body.hb .hb-info h2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 120px 120px; }

/* intro: the megaphone moves to the UPDATE poster below; a crayon sun takes its place */
html.hc:not(.a11y-on) body.hb .hb-intro::after { width: 128px; height: 128px; top: -14px; right: 0; transform: rotate(-8deg); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='3.2'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23r)' stroke-linecap='round' stroke-linejoin='round'%3E %3Cg stroke='%23f5b400' stroke-width='5'%3E%3Cpath d='M60 5v16M60 99v16M5 60h16M99 60h16M21 21l11 11M88 88l11 11M99 21 88 32M21 99l11-11'/%3E%3C/g%3E %3Ccircle cx='60' cy='60' r='31' fill='%23ffd84a' stroke='%23e98b00' stroke-width='4'/%3E %3Cpath d='M34 51h52' stroke='%231c1c1c' stroke-width='4'/%3E %3Cpath d='M37 51h18v6a9 9 0 0 1-18 0zM65 51h18v6a9 9 0 0 1-18 0z' fill='%231c1c1c' stroke='%231c1c1c' stroke-width='2'/%3E %3Cpath d='M45 73q15 11 30 0' fill='none' stroke='%23d7262e' stroke-width='4.5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------- Hero: poster lighting ---------- */
html.hc:not(.a11y-on) body.hb .hb-hero::after { background:
    radial-gradient(rgba(255,255,255,.13) 1.1px, rgba(255,255,255,0) 1.7px) 0 0/9px 9px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E %3Cpath d='M0 120V78C110 30 250 26 400 64v56z' fill='%231546b8'/%3E %3Cpath d='M0 84C120 40 250 36 400 72' fill='none' stroke='%23ffd23f' stroke-width='9'/%3E %3Cpath d='M0 100C130 58 260 54 400 88' fill='none' stroke='%23fff' stroke-width='4' opacity='.7'/%3E%3C/svg%3E") right -2px bottom -2px/62% 92px no-repeat,
    radial-gradient(120% 90% at 0% 100%, rgba(255,210,63,.24) 0, rgba(255,210,63,0) 45%),
    linear-gradient(90deg, rgba(8,28,82,.94) 0%, rgba(11,42,111,.74) 46%, rgba(21,70,184,.1) 82%),
    linear-gradient(0deg, rgba(8,28,82,.8) 0%, rgba(8,28,82,0) 48%); }
/* starburst sticker, comic-shop style */
html.hc:not(.a11y-on) body.hb .hb-hero::before { content: "TAYANG\AHARI INI!"; content: "TAYANG\AHARI INI!" / ""; white-space: pre; position: absolute; z-index: 2; top: 18px; right: 18px; width: 124px; height: 124px;
  display: grid; place-items: center; text-align: center; font: 400 1.32rem/.95 var(--hc-display); letter-spacing: 1px; color: var(--hc-red);
  background: var(--hc-gold-grad); clip-path: polygon(50.0% 0.0%, 57.6% 11.7%, 69.1% 3.8%, 71.7% 17.6%, 85.4% 14.6%, 82.4% 28.3%, 96.2% 30.9%, 88.3% 42.4%, 100.0% 50.0%, 88.3% 57.6%, 96.2% 69.1%, 82.4% 71.7%, 85.4% 85.4%, 71.7% 82.4%, 69.1% 96.2%, 57.6% 88.3%, 50.0% 100.0%, 42.4% 88.3%, 30.9% 96.2%, 28.3% 82.4%, 14.6% 85.4%, 17.6% 71.7%, 3.8% 69.1%, 11.7% 57.6%, 0.0% 50.0%, 11.7% 42.4%, 3.8% 30.9%, 17.6% 28.3%, 14.6% 14.6%, 28.3% 17.6%, 30.9% 3.8%, 42.4% 11.7%); transform: rotate(12deg); filter: drop-shadow(3px 3px 0 var(--hc-ink)); pointer-events: none; }
/* logo art gets the poster treatment: navy extrusion + gold glow */
html.hc:not(.a11y-on) body.hb .hb-hero-logo { filter: drop-shadow(0 0 1px #061a4d) drop-shadow(3px 4px 0 #061a4d) drop-shadow(0 0 22px rgba(255,210,63,.5)); }
/* text title: extruded glossy gold, like the "JOB FAIR" lettering */
html.hc:not(.a11y-on) body.hb .hb-hero h2 { filter: drop-shadow(0 2px 0 #b97900) drop-shadow(0 2px 0 #8a5a00) drop-shadow(0 2px 0 #6b4500) drop-shadow(4px 5px 0 #061a4d); }

/* ---------- #top-bulan: comic masthead ---------- */
html.hc:not(.a11y-on) body.hb #top-bulan .hb-title { color: var(--hc-gold); background: radial-gradient(rgba(0,0,0,.18) 1.2px, transparent 1.7px) 0 0/7px 7px, var(--hc-red);
  border: 3.5px solid var(--hc-ink); border-radius: 4px; padding: 10px 22px 8px; font-size: 2.1rem; -webkit-text-stroke: 1.2px var(--hc-ink); paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--hc-ink); box-shadow: 6px 6px 0 var(--hc-ink); transform: rotate(-1.2deg); }
html.hc:not(.a11y-on) body.hb #top-bulan .hb-title .hb-ic { color: #fff; }

/* ---------- #film-terbaru: lowongan banner ---------- */
html.hc:not(.a11y-on) body.hb #film-terbaru .hb-title { position: relative; color: #fff; background: linear-gradient(180deg, #2a63de, #1546b8 60%, #0e3591); border: 3px solid var(--hc-ink);
  border-radius: 6px; padding: 10px 28px 8px; font-size: 2.3rem; transform: skewX(-9deg); box-shadow: 5px 5px 0 var(--hc-gold); text-shadow: 2px 2px 0 #061a4d; }
html.hc:not(.a11y-on) body.hb #film-terbaru .hb-title::after { content: ''; position: absolute; right: -30px; top: -14px; width: 26px; height: 34px;
  background: linear-gradient(115deg, transparent 0 30%, var(--hc-gold) 30% 46%, transparent 46% 58%, var(--hc-gold) 58% 74%, transparent 74%); }
html.hc:not(.a11y-on) body.hb #film-terbaru .hb-sub { display: inline-block; background: var(--hc-warn); color: var(--hc-ink); border: 2px solid var(--hc-ink); padding: 3px 14px; border-radius: 4px; transform: skewX(-9deg); margin: 12px 0 0 10px; }

/* ---------- #rilis-terbaru: notice "UPDATE" ---------- */
html.hc:not(.a11y-on) body.hb #rilis-terbaru .hb-title { background: none; color: var(--hc-royal); box-shadow: none; padding: 0 0 14px; font-size: 2.6rem; letter-spacing: 1.5px; border-radius: 0;
  background: linear-gradient(var(--hc-royal), var(--hc-royal)) 0 100%/calc(100% - 22px) 5px no-repeat, radial-gradient(circle, var(--hc-royal) 6px, transparent 6.5px) 100% 100%/14px 14px no-repeat; background-position: 0 calc(100% - 4px), 100% 100%; }
html.hc:not(.a11y-on) body.hb #rilis-terbaru .hb-title .hb-ic { width: 30px; height: 30px; padding: 9px; box-sizing: content-box; color: #fff; background: var(--hc-royal); border: 3px solid var(--hc-ink); border-radius: 14px 14px 14px 3px; box-shadow: 3px 3px 0 var(--hc-gold); }

/* ---------- #rekomendasi: infographic + pointing hand ---------- */
html.hc:not(.a11y-on) body.hb #rekomendasi .hb-head { position: relative; }
html.hc:not(.a11y-on) body.hb #rekomendasi .hb-head::after { content: ''; position: absolute; right: 8px; top: 0; width: 104px; height: 60px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 64'%3E%3Cdefs%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='3.2'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23r)' stroke='%231c1c1c' stroke-width='3.4' stroke-linejoin='round' stroke-linecap='round' fill='%23fff'%3E %3Crect x='3' y='16' width='14' height='38' rx='3'/%3E %3Cpath d='M17 20c10-6 18-8 26-6h56a7 7 0 0 1 0 14H58'/%3E %3Cpath d='M17 20v34h28c5 0 8-3 8-7s-3-6-6-6h4c4 0 7-3 7-6s-3-6-6-6h3c4 0 7-3 7-6s-3-6-6-6H44'/%3E %3Cpath d='M44 33h6M46 41h5' fill='none'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; transform: scaleX(-1) rotate(4deg); pointer-events: none; }
html.hc:not(.a11y-on) body.hb #rekomendasi .hb-title { font-size: 2rem; }

/* ---------- #genre: crayon ---------- */
html.hc:not(.a11y-on) body.hb #genre .hb-title { position: relative; color: var(--hc-ink); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08' numOctaves='2' seed='9'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='4'/%3E%3C/filter%3E%3C/defs%3E %3Cpath filter='url(%23r)' d='M4 32 30 8 18 38 60 7 46 39 92 8 78 40 124 9 110 40 156 10 142 40 196 12' fill='none' stroke='%23ffd84a' stroke-width='12' stroke-linecap='round' stroke-linejoin='round' opacity='.9'/%3E%3C/svg%3E") 0 62%/100% 70% no-repeat; box-shadow: none; padding: 4px 34px 4px 6px; border-radius: 0;
  font: 400 2.6rem/1 var(--hc-hand); letter-spacing: 0; transform: rotate(-1.5deg); }
html.hc:not(.a11y-on) body.hb #genre .hb-title::after { content: ''; position: absolute; right: 0; top: -8px; width: 30px; height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cdefs%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='3.2'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23r)' stroke-linejoin='round'%3E %3Cpath d='m30 4 7 17 18 1-14 12 5 18-16-10-16 10 5-18L5 22l18-1z' fill='%23ffd84a' stroke='%231c1c1c' stroke-width='2.8'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; transform: rotate(14deg); }
html.hc:not(.a11y-on) body.hb #genre .hb-sub { color: var(--hc-green); font-size: 1.16rem; }

/* ---------- #you-may-like: speech bubble ---------- */
html.hc:not(.a11y-on) body.hb #you-may-like .hb-title { position: relative; color: var(--hc-ink); background: #fff; border: 3px solid var(--hc-ink); border-radius: 30px 34px 28px 36px / 34px 28px 36px 30px; padding: 12px 24px 9px; box-shadow: 4px 4px 0 var(--hc-gold); }
html.hc:not(.a11y-on) body.hb #you-may-like .hb-title::after { content: ''; position: absolute; left: 34px; bottom: -18px; width: 22px; height: 18px; background: var(--hc-ink); clip-path: polygon(0 0, 100% 0, 15% 100%); }
html.hc:not(.a11y-on) body.hb #you-may-like .hb-title .hb-ic { color: var(--hc-red); }
html.hc:not(.a11y-on) body.hb #you-may-like .hb-head { margin-bottom: 28px; }

/* ---------- Footer sign-off (the vacancy poster's "Semoga Berhasil!") ---------- */
html.hc:not(.a11y-on) body.hb .footer-copyright::before { content: "Selamat menonton!"; content: "Selamat menonton!" / ""; display: block; margin-bottom: 6px; font: 400 2.4rem/1 var(--hc-display); letter-spacing: 1.5px;
  color: var(--hc-royal); transform: rotate(-3deg); text-shadow: 3px 3px 0 var(--hc-gold); }

@media (max-width: 640px) {
  html.hc:not(.a11y-on) body.hb { background-position: 0 0, 70% 96px, 104% 230px, 8% 250px, 0 0, 0 0; background-size: 180px 180px, 110px 47px, 80px 35px, 48px 24px, 100% 560px, 100% 560px; }
  html.hc:not(.a11y-on) body.hb .hb-intro::after { width: 76px; height: 76px; top: -22px; right: -4px; }
  html.hc:not(.a11y-on) body.hb .hb-hero::before { width: 86px; height: 86px; font-size: .95rem; top: 10px; right: 10px; }
  html.hc:not(.a11y-on) body.hb #top-bulan .hb-title { font-size: 1.55rem; }
  html.hc:not(.a11y-on) body.hb #film-terbaru .hb-title { font-size: 1.75rem; }
  html.hc:not(.a11y-on) body.hb #rilis-terbaru .hb-title { font-size: 1.9rem; }
  html.hc:not(.a11y-on) body.hb #rilis-terbaru .hb-title .hb-ic { width: 22px; height: 22px; padding: 7px; }
  html.hc:not(.a11y-on) body.hb #rekomendasi .hb-head::after { display: none; }
  html.hc:not(.a11y-on) body.hb #genre .hb-title { font-size: 2rem; }
  html.hc:not(.a11y-on) body.hb .footer-copyright::before { font-size: 1.9rem; }
}