/*
Theme Name: Empowerment Pro
Theme URI: https://example.com
Author: Your Company
Author URI: https://example.com
Description: Empowerment Pro adalah tema WordPress profesional untuk bimbingan belajar (bimbel), lembaga pendidikan, dan kursus. Sepenuhnya dapat dikustomisasi melalui Customizer - ubah nama, logo, warna, font, teks, dan layout sesuka hati. Dilengkapi 6 Custom Post Types, WhatsApp integration, security hardening, export/import settings, dan quick setup wizard. Siap untuk dijual ke klien.
Version: 5.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bimbel-empowerment
Tags: education, business, responsive, custom-menu, featured-images, custom-colors, custom-logo, full-width-template, theme-options
*/

/* ============================================
   Hallmark · genre: playful · macrostructure: Stat-Led / Long Document / Catalogue
   theme: custom vibrant · design-system: design.md · designed-as-app
   Hallmark · pre-emit critique: P5 H4 E5 S4 R5 V5
   ============================================ */

/* ============================================
   DESIGN TOKENS
   (--color-primary/--color-accent/--font-heading/
   --font-body di-override inline oleh Customizer)
   ============================================ */
:root {
    /* Brand — Customizer overridable */
    --color-primary: #0f3057;
    --color-primary-light: #1a4d7a;
    --color-primary-dark: #0a1f3a;
    --color-accent: #c2602e;
    --color-accent-dark: #a34d21;
    --color-accent-light: #d37345;
    --color-whatsapp: #25d366;
    --color-whatsapp-dark: #1da851;

    /* Surfaces (warm) */
    --color-paper: #fdfbf7;
    --color-paper-2: #f7f1e9;
    --color-paper-3: #efe8da;

    /* Ink */
    --color-ink: var(--color-primary, #0f3057);
    --color-ink-2: #3e4d63;
    --color-muted: #64748b;
    --color-rule: #e7e0d2;

    /* Vibrant accents (roles) */
    --color-blue: #2563eb;
    --color-teal: #0d9488;
    --color-purple: #7c3aed;
    --color-pink: #db2777;
    --color-yellow: #eab308;

    /* Band tints (color-mix with paper) */
    --color-band-blue: color-mix(in oklch, var(--color-blue) 10%, var(--color-paper));
    --color-band-teal: color-mix(in oklch, var(--color-teal) 10%, var(--color-paper));
    --color-band-purple: color-mix(in oklch, var(--color-purple) 10%, var(--color-paper));
    --color-band-pink: color-mix(in oklch, var(--color-pink) 10%, var(--color-paper));
    --color-band-orange: color-mix(in oklch, var(--color-accent) 10%, var(--color-paper));
    --color-band-yellow: color-mix(in oklch, var(--color-yellow) 16%, var(--color-paper));
    --color-band-ink: color-mix(in oklch, var(--color-ink) 94%, var(--color-paper));

    /* Text on surfaces */
    --color-on-ink: #fdfbf7;
    --color-on-ink-muted: rgba(253, 251, 247, 0.78);
    --color-on-accent: #fdfbf7;
    --color-focus: #b4551f;

    /* Typography */
    --font-display: var(--font-heading, 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif);
    --font-body: var(--font-body, 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif);
    --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', monospace;

    --display-weight: 700;

    /* Spacing — 4pt scale */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4.5rem;
    --space-3xl: 7rem;

    /* Type scale — major third 1.25 */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.25rem;
    --text-lg: 1.5625rem;
    --text-xl: 1.9531rem;
    --text-2xl: 2.4414rem;
    --text-3xl: 3.0518rem;
    --text-display: clamp(2.5rem, 5vw + 0.5rem, 4.75rem);
    --text-display-s: clamp(2rem, 4vw + 0.5rem, 3.4rem);

    /* Radius (playful) */
    --radius-card: 18px;
    --radius-input: 12px;
    --radius-pill: 999px;

    /* Shadows (warm-tinted) */
    --shadow-sm: 0 1px 2px rgba(38, 30, 18, 0.05);
    --shadow-md: 0 10px 28px rgba(38, 30, 18, 0.08);
    --shadow-lg: 0 20px 48px rgba(38, 30, 18, 0.12);

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-micro: 120ms;
    --dur-short: 220ms;
    --dur-med: 320ms;
    --dur-long: 520ms;
    --marquee-dur: 38s;
    --reveal-y: 18px;

    /* Z scale */
    --z-sticky-nav: 300;
    --z-modal: 400;
    --z-toast: 500;
}

/* ============================================
   BASE
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    overflow-x: clip;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-ink-2);
    background: var(--color-paper);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--color-blue);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--dur-short) var(--ease-out);
}

a:hover {
    color: var(--color-purple);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-style: normal;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--color-ink);
    margin: 0 0 0.5em;
    text-wrap: balance;
    overflow-wrap: anywhere;
    min-width: 0;
}

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection {
    background: color-mix(in oklch, var(--color-accent) 28%, var(--color-paper));
    color: var(--color-ink);
}

.site-content {
    min-height: 60vh;
}

/* ============================================
   LOADER
   ============================================ */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: var(--z-toast);
    display: grid;
    place-content: center;
    gap: var(--space-md);
    background: var(--color-paper);
    transition: opacity var(--dur-med) var(--ease-out), visibility var(--dur-med) var(--ease-out);
}

.page-loader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-spinner {
    width: 52px;
    height: 52px;
    margin-inline: auto;
    border-radius: 50%;
    border: 4px solid var(--color-paper-3);
    border-top-color: var(--color-accent);
    animation: spinner-rotate 0.9s linear infinite;
}

@keyframes spinner-rotate {
    to { transform: rotate(360deg); }
}

.loader-text {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-muted);
    text-align: center;
}

/* ============================================
   READING PROGRESS (artikel)
   ============================================ */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: var(--z-sticky-nav);
    pointer-events: none;
}

.reading-progress span {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--color-accent);
    transform-origin: 0 50%;
    transform: scaleX(0);
    will-change: transform;
}

/* ============================================
   HEADER (frost morph pada scroll)
   ============================================ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky-nav);
    background: transparent;
    border-bottom: 1px solid transparent;
    transition:
        background-color var(--dur-med) var(--ease-out),
        border-color var(--dur-med) var(--ease-out),
        box-shadow var(--dur-med) var(--ease-out);
}

.site-header.scrolled {
    background: color-mix(in oklch, var(--color-paper) 84%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    border-bottom-color: var(--color-rule);
    box-shadow: var(--shadow-sm);
}

.header-inner {
    max-width: 1200px;
    margin-inline: auto;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-inline: clamp(1rem, 4vw, 1.5rem);
}

/* Logo */
.site-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    text-decoration: none;
    color: var(--color-ink);
    flex-shrink: 0;
}

.logo-image {
    max-height: 44px;
    width: auto;
}

.logo-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--color-ink);
    color: var(--color-on-ink);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-lg);
    line-height: 1;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.logo-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
    color: var(--color-ink);
}

.logo-tag {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Nav */
.main-nav ul {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav a {
    position: relative;
    display: inline-block;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-pill);
    color: var(--color-ink-2);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}

.main-nav a::after {
    content: "";
    position: absolute;
    left: var(--space-sm);
    right: var(--space-sm);
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-short) var(--ease-out);
}

.main-nav a:hover {
    color: var(--color-ink);
}

.main-nav a:hover::after {
    transform: scaleX(1);
}

.main-nav .current-menu-item > a,
.main-nav .current_page_item > a {
    color: var(--color-ink);
}

.main-nav .current-menu-item > a::after,
.main-nav .current_page_item > a::after {
    transform: scaleX(1);
}

/* Header CTA dihapus — tombol WhatsApp di header tidak lagi ditampilkan
   (floating button mengarah ke form kontak). */

/* Menu toggle (mobile) */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: var(--space-2xs);
    border: 0;
    border-radius: var(--radius-input);
    background: var(--color-paper-2);
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--color-ink);
    transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}

.menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary-custom,
.btn-outline-custom,
.btn-wa,
.btn-blue,
.btn-teal,
.btn-purple {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-height: 46px;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 2px solid transparent;
    transition:
        background-color var(--dur-short) var(--ease-out),
        color var(--dur-short) var(--ease-out),
        border-color var(--dur-short) var(--ease-out),
        transform var(--dur-micro) var(--ease-out);
}

.btn-primary-custom {
    background: var(--color-ink);
    color: var(--color-on-ink);
}

.btn-primary-custom:hover {
    background: var(--color-accent);
    color: var(--color-on-accent);
    transform: translateY(-1px);
}

.btn-primary-custom:active {
    transform: translateY(1px);
}

.btn-outline-custom {
    background: transparent;
    color: var(--color-ink);
    border-color: var(--color-ink);
}

.btn-outline-custom:hover {
    background: var(--color-ink);
    color: var(--color-on-ink);
    transform: translateY(-1px);
}

.btn-outline-custom:active {
    transform: translateY(1px);
}

.btn-wa {
    background: var(--color-whatsapp);
    color: #fff;
}

.btn-wa:hover {
    background: var(--color-whatsapp-dark);
    color: #fff;
    transform: translateY(-1px);
}

.btn-wa:active {
    transform: translateY(1px);
}

.btn-blue {
    background: var(--color-blue);
    color: var(--color-on-accent);
}

.btn-blue:hover {
    background: color-mix(in oklch, var(--color-blue) 82%, var(--color-ink));
    color: var(--color-on-accent);
    transform: translateY(-1px);
}

.btn-blue:active { transform: translateY(1px); }

.btn-teal {
    background: var(--color-teal);
    color: var(--color-on-accent);
}

.btn-teal:hover {
    background: color-mix(in oklch, var(--color-teal) 80%, var(--color-ink));
    color: var(--color-on-accent);
    transform: translateY(-1px);
}

.btn-teal:active { transform: translateY(1px); }

.btn-purple {
    background: var(--color-purple);
    color: var(--color-on-accent);
}

.btn-purple:hover {
    background: color-mix(in oklch, var(--color-purple) 82%, var(--color-ink));
    color: var(--color-on-accent);
    transform: translateY(-1px);
}

.btn-purple:active { transform: translateY(1px); }

.btn-primary-custom:disabled,
.btn-outline-custom:disabled,
.btn-wa:disabled,
.btn-blue:disabled,
.btn-teal:disabled,
.btn-purple:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* ============================================
   SECTION CHROME + BANDS
   ============================================ */
.section {
    padding: var(--space-3xl) 0;
}

.section-light {
    background: var(--color-paper-2);
}

.section-head {
    max-width: 720px;
    margin-bottom: var(--space-xl);
}

.section-kicker {
    display: block;
    margin-bottom: var(--space-2xs);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.section-title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-xs);
    line-height: 1.1;
}

.section-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin-top: var(--space-sm);
    border-radius: 4px;
    background: var(--color-accent);
}

.section-subtitle {
    font-size: var(--text-md);
    color: var(--color-muted);
    max-width: 60ch;
    margin: 0;
}

/* Color bands */
.band-blue { background: var(--color-band-blue); }
.band-teal { background: var(--color-band-teal); }
.band-purple { background: var(--color-band-purple); }
.band-pink { background: var(--color-band-pink); }
.band-orange { background: var(--color-band-orange); }
.band-yellow { background: var(--color-band-yellow); }

.band-ink {
    background: var(--color-band-ink);
    color: var(--color-on-ink);
}

.band-ink .section-kicker { color: var(--color-accent-light); }
.band-ink .section-title { color: var(--color-on-ink); }
.band-ink .section-subtitle { color: var(--color-on-ink-muted); }

/* ============================================
   HERO (Stat-Led, colorful)
   ============================================ */
.hero {
    position: relative;
    isolation: isolate;
    padding: calc(76px + var(--space-2xl)) clamp(1rem, 4vw, 1.5rem) var(--space-3xl);
    overflow: hidden;
    background:
        radial-gradient(1200px 520px at 88% -10%, var(--color-band-blue), transparent 62%),
        radial-gradient(900px 480px at -12% 40%, var(--color-band-purple), transparent 60%),
        var(--color-paper);
}

.hero-content {
    max-width: 1200px;
    margin-inline: auto;
    position: relative;
    z-index: 1;
}

.hero-main {
    max-width: 640px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-band-orange);
    color: var(--color-ink);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}

.hero h1 {
    font-size: var(--text-display);
    line-height: 1.04;
    letter-spacing: -0.035em;
    margin-bottom: var(--space-md);
}

.hero h1 .highlight {
    color: var(--color-blue);
}

.hero-aside {
    max-width: 480px;
    margin-top: var(--space-lg);
}

.hero-aside p {
    font-size: var(--text-md);
    color: var(--color-ink-2);
    margin: 0 0 var(--space-lg);
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-2xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-rule);
}

.hero-stat--blue .stat-number { color: var(--color-blue); }
.hero-stat--teal .stat-number { color: var(--color-teal); }
.hero-stat--purple .stat-number { color: var(--color-purple); }

.hero-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.stat-number {
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.stat-label {
    margin-top: var(--space-2xs);
    font-size: var(--text-sm);
    color: var(--color-muted);
}

/* Decorative blobs */
.hero-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.blob {
    position: absolute;
    border-radius: 42% 58% 63% 37% / 44% 42% 58% 56%;
    opacity: 0.5;
    filter: blur(2px);
}

.blob--blue { width: 220px; height: 220px; background: var(--color-band-blue); top: 18%; right: 6%; }
.blob--purple { width: 150px; height: 150px; background: var(--color-band-purple); top: 52%; right: 24%; }
.blob--pink { width: 110px; height: 110px; background: var(--color-band-pink); top: 12%; right: 30%; }
.blob--teal { width: 90px; height: 90px; background: var(--color-band-teal); bottom: 18%; right: 44%; }

body.animations-on .blob {
    animation: blob-float 14s ease-in-out infinite alternate;
}

body.animations-on .blob--purple { animation-duration: 18s; animation-delay: -4s; }
body.animations-on .blob--pink { animation-duration: 12s; animation-delay: -7s; }
body.animations-on .blob--teal { animation-duration: 20s; animation-delay: -2s; }

@keyframes blob-float {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to { transform: translate3d(-18px, 14px, 0) rotate(12deg); }
}

/* ============================================
   MARQUEE
   ============================================ */
.marquee {
    overflow: hidden;
    padding-block: var(--space-sm);
    background: var(--color-band-yellow);
    border-block: 1px solid color-mix(in oklch, var(--color-yellow) 30%, var(--color-rule));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track {
    display: flex;
    width: max-content;
    will-change: transform;
}

body.animations-on .marquee-track {
    animation: marquee-scroll var(--marquee-dur) linear infinite;
}

.marquee:hover .marquee-track {
    animation-play-state: paused;
}

@keyframes marquee-scroll {
    to { transform: translateX(-50%); }
}

.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xl);
    margin-inline-end: var(--space-xl);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink);
    white-space: nowrap;
}

.marquee-item::after {
    content: "✦";
    color: var(--color-accent);
    font-size: 0.875rem;
}

.marquee--ink {
    background: var(--color-band-ink);
    border-block-color: color-mix(in oklch, var(--color-ink) 40%, transparent);
}

.marquee--ink .marquee-item { color: var(--color-on-ink); }
.marquee--ink .marquee-item::after { color: var(--color-accent-light); }

/* ============================================
   CARDS
   ============================================ */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.card-custom {
    --card-accent: var(--color-blue);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}

.card-custom--teal { --card-accent: var(--color-teal); }
.card-custom--purple { --card-accent: var(--color-purple); }
.card-custom--pink { --card-accent: var(--color-pink); }
.card-custom--orange { --card-accent: var(--color-accent); }

.card-custom:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in oklch, var(--card-accent) 40%, var(--color-rule));
}

.card-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: color-mix(in oklch, var(--card-accent) 14%, var(--color-paper));
    font-size: 1.5rem;
    line-height: 1;
}

.card-content h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2xs);
}

.card-content p {
    font-size: var(--text-base);
    color: var(--color-ink-2);
    margin: 0 0 var(--space-sm);
}

.card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--card-accent);
    font-weight: 600;
    text-decoration: none;
}

.card-link:hover {
    color: var(--color-ink);
}

/* Feature items */
.feature-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}

.feature-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.feature-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--color-band-purple);
    font-size: 1.25rem;
}

.feature-item h3 {
    font-size: var(--text-md);
    margin-bottom: var(--space-2xs);
}

.feature-item p {
    margin: 0;
    color: var(--color-ink-2);
}

/* Alumni */
.alumni-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}

.alumni-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.alumni-photo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
}

.alumni-placeholder {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color-band-pink);
    color: var(--color-pink);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-xl);
}

.alumni-badge {
    display: inline-block;
    align-self: flex-start;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-band-teal);
    color: var(--color-teal);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.alumni-body h3 {
    font-size: var(--text-md);
    margin-bottom: var(--space-2xs);
}

.alumni-accepted {
    color: var(--color-teal);
    font-weight: 600;
    margin: 0 0 var(--space-2xs);
}

.alumni-testimoni {
    font-size: var(--text-sm);
    color: var(--color-muted);
    font-style: italic;
    margin: 0;
}

/* Promo */
.promo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    overflow: hidden;
    transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}

.promo-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.promo-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-card);
}

.promo-badge {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.promo-body h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2xs);
}

.promo-body p {
    color: var(--color-ink-2);
    margin: 0 0 var(--space-sm);
}

/* Blog */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-lg);
}

.blog-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}

.blog-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in oklch, var(--color-blue) 35%, var(--color-rule));
}

.blog-thumb-wrap {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.blog-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-med) var(--ease-out);
}

.blog-card:hover .blog-thumb {
    transform: scale(1.05);
}

.blog-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    flex: 1;
    padding: var(--space-md) var(--space-md) var(--space-lg);
}

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--color-muted);
}

.blog-cat {
    padding: 0.125rem 0.625rem;
    border-radius: var(--radius-pill);
    background: var(--color-band-blue);
    color: var(--color-blue);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.blog-date::after {
    content: " · ";
    color: var(--color-rule);
}

.blog-time {
    color: var(--color-muted);
}

.blog-body h3 {
    font-size: var(--text-md);
    margin: var(--space-2xs) 0 0;
}

.blog-body h3 a {
    color: var(--color-ink);
    text-decoration: none;
}

.blog-body h3 a:hover {
    color: var(--color-blue);
}

.blog-body p {
    color: var(--color-ink-2);
    margin: 0;
    flex: 1;
}

.blog-read {
    align-self: flex-start;
    margin-top: var(--space-sm);
    color: var(--color-blue);
    font-weight: 600;
    text-decoration: none;
}

.blog-read:hover {
    color: var(--color-ink);
}

/* Jobs */
.job-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-lg);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}

.job-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.job-tag {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-band-purple);
    color: var(--color-purple);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.job-card h3 {
    font-size: var(--text-lg);
    margin-bottom: 0;
}

.job-card p {
    color: var(--color-ink-2);
    margin: 0;
}

.job-deadline {
    font-size: var(--text-sm);
    color: var(--color-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
}

/* Cabang */
.cabang-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-lg);
}

.cabang-card {
    overflow: hidden;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}

.cabang-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.cabang-map {
    width: 100%;
    height: 200px;
    border: 0;
    display: block;
}

.cabang-info {
    padding: var(--space-md);
}

.cabang-info h3 {
    font-size: var(--text-md);
    margin-bottom: var(--space-xs);
}

.cabang-info p {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xs);
    margin: 0 0 var(--space-2xs);
    font-size: var(--text-sm);
    color: var(--color-ink-2);
}

.cabang-info svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-teal);
}

/* ============================================
   CTA BAND
   ============================================ */
.cta-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--space-3xl) 0;
    background:
        radial-gradient(900px 420px at 90% 110%, var(--color-band-blue), transparent 60%),
        radial-gradient(700px 380px at 6% -20%, var(--color-band-purple), transparent 55%),
        var(--color-band-ink);
    color: var(--color-on-ink);
}

.cta-section .container-lg {
    position: relative;
    z-index: 1;
    max-width: 760px;
    text-align: center;
}

.cta-section h2 {
    color: var(--color-on-ink);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-sm);
}

.cta-section p {
    color: var(--color-on-ink-muted);
    font-size: var(--text-md);
    margin: 0 auto var(--space-lg);
    max-width: 52ch;
}

/* ============================================
   PAGE HEADER (per-halaman berwarna)
   ============================================ */
.page-header {
    padding: calc(76px + var(--space-2xl)) clamp(1rem, 4vw, 1.5rem) var(--space-2xl);
    background: var(--color-band-blue);
}

.page-tentang .page-header { background: var(--color-band-purple); }
.page-program .page-header { background: var(--color-band-orange); }
.page-blog .page-header { background: var(--color-band-teal); }
.page-kontak .page-header { background: var(--color-band-pink); }
.page-alumni .page-header { background: var(--color-band-purple); }
.page-lowongan .page-header { background: var(--color-band-teal); }
.page-promo .page-header { background: var(--color-band-orange); }
.page-kebijakan-privasi .page-header { background: var(--color-band-teal); }
.page-syarat-ketentuan .page-header { background: var(--color-band-purple); }

.page-header .container-lg {
    max-width: 1200px;
    margin-inline: auto;
}

.page-header h1 {
    font-size: var(--text-3xl);
    line-height: 1.08;
    margin-bottom: var(--space-xs);
}

.page-header p {
    font-size: var(--text-md);
    color: var(--color-ink-2);
    max-width: 60ch;
    margin: 0 0 var(--space-md);
}

.breadcrumb {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--color-muted);
}

.breadcrumb a {
    color: var(--color-muted);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--color-ink);
}

/* Intro polos di bawah page-header (tanpa band) — mencegah double-band
   dengan section section-light di bawahnya. */
.page-intro {
    padding-bottom: var(--space-lg);
}

.page-intro .page-content {
    max-width: 68ch;
}

/* ============================================
   CONTENT / LEGAL / PAGE CONTENT
   ============================================ */
.page-content,
.legal-content,
.entry-content {
    max-width: 68ch;
}

.page-content h2,
.legal-content h2,
.entry-content h2 {
    font-size: var(--text-xl);
    margin-top: var(--space-xl);
}

.page-content h3,
.legal-content h3,
.entry-content h3 {
    font-size: var(--text-lg);
    margin-top: var(--space-lg);
}

.page-content p,
.legal-content p,
.entry-content p {
    margin: 0 0 var(--space-md);
}

.page-content ul,
.legal-content ul,
.entry-content ul {
    padding-left: var(--space-lg);
    margin: 0 0 var(--space-md);
}

.page-content li,
.legal-content li,
.entry-content li {
    margin-bottom: var(--space-2xs);
}

.page-content blockquote,
.legal-content blockquote,
.entry-content blockquote {
    margin: var(--space-lg) 0;
    padding: var(--space-sm) var(--space-md);
    border-inline-start: 4px solid var(--color-accent);
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    background: var(--color-paper-2);
    color: var(--color-ink);
}

.page-content img,
.legal-content img,
.entry-content img {
    border-radius: var(--radius-card);
}

.page-content a,
.legal-content a,
.entry-content a {
    text-decoration: underline;
}

.page-content table,
.legal-content table,
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-md) 0;
    font-variant-numeric: tabular-nums;
}

.page-content th,
.page-content td,
.legal-content th,
.legal-content td,
.entry-content th,
.entry-content td {
    border: 1px solid var(--color-rule);
    padding: var(--space-2xs) var(--space-sm);
    text-align: left;
}

.page-content th,
.legal-content th,
.entry-content th {
    background: var(--color-paper-2);
    color: var(--color-ink);
}

.legal-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
}

.legal-meta {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper-2);
    font-size: var(--text-sm);
    color: var(--color-muted);
}

/* ============================================
   CONTACT PAGE
   ============================================ */
#contact-form {
    scroll-margin-top: 96px;
}

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--space-xl);
    align-items: start;
}

.contact-info-card {
    padding: var(--space-lg);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    box-shadow: var(--shadow-sm);
}

.contact-info-card h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-md);
}

.contact-info-item {
    display: flex;
    gap: var(--space-sm);
    padding-block: var(--space-sm);
    border-bottom: 1px solid var(--color-rule);
}

.contact-info-item:last-child {
    border-bottom: 0;
}

.contact-info-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--color-band-blue);
    color: var(--color-blue);
}

.contact-info-item h4 {
    font-size: var(--text-sm);
    margin: 0 0 2px;
}

.contact-info-item p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-ink-2);
}

.contact-form-wrapper {
    padding: var(--space-lg);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    box-shadow: var(--shadow-sm);
}

.contact-form-wrapper h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2xs);
}

.form-group {
    margin-bottom: var(--space-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--space-2xs);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    min-height: 46px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-input);
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    outline: 2px solid transparent;
    outline-offset: 1px;
    transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    background: var(--color-paper-2);
    border-color: var(--color-rule);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: 2px solid var(--color-focus);
    outline-offset: 1px;
    border-color: var(--color-ink-2);
    background: var(--color-paper);
}

.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.form-group input[aria-invalid="true"],
.form-group textarea[aria-invalid="true"] {
    border-color: #c0392b;
}

.map-wrapper {
    margin-top: var(--space-2xl);
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--color-rule);
}

.map-wrapper iframe {
    display: block;
    width: 100%;
    height: 380px;
    border: 0;
}

/* ============================================
   SINGLE POST
   ============================================ */
.post-header {
    padding: calc(76px + var(--space-2xl)) clamp(1rem, 4vw, 1.5rem) var(--space-2xl);
    background: var(--color-band-blue);
}

.post-header .container-lg {
    max-width: 1200px;
    margin-inline: auto;
}

.post-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: var(--space-sm);
}

.post-kicker a {
    color: var(--color-blue);
    text-decoration: none;
    font-weight: 600;
}

.post-kicker a:hover { color: var(--color-ink); }

.post-kicker-sep { color: var(--color-rule); }

.post-title {
    font-size: var(--text-3xl);
    line-height: 1.08;
    max-width: 24ch;
}

.post-lede {
    font-size: var(--text-lg);
    color: var(--color-ink-2);
    max-width: 56ch;
    margin: var(--space-sm) 0 var(--space-md);
}

.post-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--text-sm);
}

.post-meta-label { color: var(--color-muted); }
.post-meta-author { font-weight: 600; color: var(--color-ink); }

.post-layout-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: var(--space-2xl);
    align-items: start;
    padding-block: var(--space-2xl);
}

.post-thumb {
    margin: 0 0 var(--space-lg);
}

.post-thumb-img {
    width: 100%;
    border-radius: var(--radius-card);
}

.post-thumb-caption {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin-top: var(--space-2xs);
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-top: var(--space-lg);
}

.post-tag {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-paper-2);
    border: 1px solid var(--color-rule);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    text-decoration: none;
}

.post-tag:hover {
    border-color: var(--color-accent);
    color: var(--color-ink);
}

.post-share {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-rule);
}

.post-share-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-inline-end: var(--space-xs);
}

.post-share-link {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-paper-2);
    color: var(--color-ink-2);
    transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}

.post-share-link:hover {
    background: var(--color-accent);
    color: var(--color-on-accent);
    transform: translateY(-2px);
}

.post-author {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-xl);
    padding: var(--space-md);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper-2);
}

.post-author-avatar img {
    border-radius: 50%;
}

.post-author-label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 2px;
}

.post-author-name { font-size: var(--text-md); color: var(--color-ink); }

.post-author-bio {
    margin: var(--space-2xs) 0 var(--space-sm);
    color: var(--color-ink-2);
}

.post-body {
    max-width: 720px;
}

.post-content {
    max-width: 68ch;
}

.post-author-body {
    min-width: 0;
}

.post-nav-prev {
    align-items: flex-start;
}

/* Post rail */
.post-rail {
    position: sticky;
    top: 96px;
    display: grid;
    gap: var(--space-sm);
}

.post-rail-card {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
}

.post-rail-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 2px;
}

.post-rail-value {
    font-size: var(--text-sm);
    color: var(--color-ink);
}

.post-rail-link {
    color: var(--color-blue);
    text-decoration: none;
}

/* Related */
.post-related {
    padding: var(--space-3xl) 0;
    background: var(--color-paper-2);
}

/* Post nav */
.post-nav {
    border-top: 1px solid var(--color-rule);
}

.post-nav-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
    padding-block: var(--space-lg);
}

.post-nav-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.post-nav-next {
    text-align: right;
    align-items: flex-end;
}

.post-nav-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.post-nav-title {
    font-weight: 600;
    color: var(--color-ink);
    text-decoration: none;
}

.post-nav-title:hover { color: var(--color-blue); }

/* ============================================
   ARTICLE BODY (blok artikel — sama dengan blok
   yang disisipkan Modul Bantuan Menulis)
   ============================================ */
.post-content {
    font-size: var(--text-base);
    line-height: 1.7;
}

.post-content h2 {
    font-size: var(--text-xl);
    margin-top: var(--space-2xl);
}

.post-content h3 {
    font-size: var(--text-lg);
    margin-top: var(--space-xl);
}

.post-content h4 {
    font-size: var(--text-md);
    margin-top: var(--space-lg);
}

.post-content blockquote {
    margin: var(--space-xl) 0;
    padding: var(--space-sm) var(--space-lg);
    border-inline-start: 4px solid var(--color-accent);
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    background: var(--color-paper-2);
    color: var(--color-ink);
    font-size: var(--text-md);
}

.article-pullquote {
    margin: var(--space-2xl) 0;
    padding: var(--space-lg) var(--space-xl);
    border: 0;
    border-radius: var(--radius-card);
    background: var(--color-band-purple);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-ink);
}

.article-pullquote::before {
    content: "\201C";
    display: block;
    font-size: var(--text-3xl);
    line-height: 0.6;
    color: var(--color-purple);
    margin-bottom: var(--space-sm);
}

.article-callout {
    margin: var(--space-lg) 0;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-card);
    border-inline-start: 4px solid var(--color-blue);
    background: var(--color-band-blue);
}

.article-callout--tip {
    border-inline-start-color: var(--color-teal);
    background: var(--color-band-teal);
}

.article-callout--warning {
    border-inline-start-color: var(--color-accent);
    background: var(--color-band-orange);
}

.article-callout h4 {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-blue);
    margin: 0 0 var(--space-2xs);
}

.article-callout--tip h4 { color: var(--color-teal); }
.article-callout--warning h4 { color: var(--color-accent); }

.article-callout p:last-child {
    margin-bottom: 0;
}

.article-steps {
    list-style: none;
    counter-reset: astep;
    margin: var(--space-lg) 0;
    padding: 0;
    display: grid;
    gap: var(--space-sm);
}

.article-steps li {
    counter-increment: astep;
    position: relative;
    padding: var(--space-sm) var(--space-md) var(--space-sm) 3rem;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
}

.article-steps li::before {
    content: counter(astep);
    position: absolute;
    left: var(--space-sm);
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-purple);
    color: var(--color-on-accent);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
}

.article-faq {
    margin: var(--space-sm) 0;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    background: var(--color-paper);
    overflow: hidden;
}

.article-faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    font-weight: 600;
    color: var(--color-ink);
    list-style: none;
}

.article-faq summary::-webkit-details-marker {
    display: none;
}

.article-faq summary::after {
    content: "+";
    font-family: var(--font-mono);
    font-weight: 400;
    color: var(--color-purple);
    transition: transform var(--dur-short) var(--ease-out);
}

.article-faq[open] summary::after {
    transform: rotate(45deg);
}

.article-faq > *:not(summary) {
    padding: 0 var(--space-md) var(--space-sm);
}

.article-faq p:last-child {
    margin-bottom: 0;
}

.article-cta {
    margin: var(--space-2xl) 0;
    padding: var(--space-xl);
    border-radius: var(--radius-card);
    background: var(--color-band-ink);
    color: var(--color-on-ink);
    text-align: center;
}

.article-cta h3 {
    color: var(--color-on-ink);
    margin-bottom: var(--space-2xs);
}

.article-cta p {
    color: var(--color-on-ink-muted);
    margin: 0 auto var(--space-md);
    max-width: 48ch;
}

.article-divider {
    border: 0;
    border-top: 1px solid var(--color-rule);
    margin: var(--space-2xl) auto;
    max-width: 480px;
}

.post-content pre {
    padding: var(--space-md);
    border-radius: var(--radius-card);
    background: var(--color-ink);
    color: var(--color-on-ink);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.post-content code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    background: var(--color-paper-2);
    color: var(--color-ink);
}

.post-content pre code {
    padding: 0;
    background: none;
    color: inherit;
}

.post-content figure {
    margin: var(--space-lg) 0;
}

.post-content figure img {
    width: 100%;
    border-radius: var(--radius-card);
}

.post-content figcaption {
    margin-top: var(--space-2xs);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-muted);
    text-align: center;
}

.post-content img.aligncenter {
    display: block;
    margin-inline: auto;
}

.post-content img.alignleft {
    float: left;
    margin: var(--space-2xs) var(--space-md) var(--space-sm) 0;
}

.post-content img.alignright {
    float: right;
    margin: var(--space-2xs) 0 var(--space-sm) var(--space-md);
}

.post-content ul,
.post-content ol {
    padding-left: var(--space-lg);
    margin-bottom: var(--space-md);
}

.post-content li {
    margin-bottom: var(--space-2xs);
}

.post-content ul li::marker {
    color: var(--color-purple);
}

.post-content a {
    text-decoration: underline;
}

/* ============================================
   PAGINATION
   ============================================ */
.nav-links,
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2xs);
    margin-top: var(--space-xl);
}

.page-numbers {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding-inline: var(--space-sm);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-rule);
    background: var(--color-paper);
    color: var(--color-ink-2);
    text-decoration: none;
    font-weight: 600;
    transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}

.page-numbers:hover {
    border-color: var(--color-accent);
    color: var(--color-ink);
}

.page-numbers.current {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-on-ink);
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background: var(--color-paper-2);
    border-top: 1px solid var(--color-rule);
}

.footer-band {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr);
    gap: var(--space-2xl);
    padding-block: var(--space-2xl);
}

.footer-brand p {
    color: var(--color-ink-2);
    max-width: 42ch;
    margin: var(--space-sm) 0 var(--space-md);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.footer-logo .logo-name {
    font-size: var(--text-lg);
}

.footer-social {
    display: flex;
    gap: var(--space-2xs);
}

.footer-social a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-paper);
    border: 1px solid var(--color-rule);
    color: var(--color-ink-2);
    transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}

.footer-social a:hover {
    background: var(--color-ink);
    color: var(--color-on-ink);
    transform: translateY(-2px);
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
}

.footer-col h4 {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2xs);
}

.footer-col a {
    color: var(--color-ink-2);
    text-decoration: none;
    font-size: var(--text-sm);
}

.footer-col a:hover {
    color: var(--color-blue);
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xs);
    font-size: var(--text-sm);
    color: var(--color-ink-2);
    margin-bottom: var(--space-xs);
}

.footer-contact-item svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--color-teal);
}

.footer-contact-item a {
    color: var(--color-ink-2);
    text-decoration: none;
}

.footer-contact-item a:hover {
    color: var(--color-blue);
}

.footer-bottom {
    border-top: 1px solid var(--color-rule);
    padding-block: var(--space-md);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.footer-bottom a {
    color: var(--color-muted);
}

.footer-bottom a:hover {
    color: var(--color-ink);
}

/* ============================================
   WHATSAPP FLOAT
   ============================================ */
.whatsapp-float {
    position: fixed;
    right: var(--space-md);
    bottom: var(--space-md);
    z-index: var(--z-toast);
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: var(--color-whatsapp);
    color: #fff;
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.35);
    transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}

.whatsapp-float:hover {
    background: var(--color-whatsapp-dark);
    transform: translateY(-3px);
}

body.animations-on .whatsapp-float {
    animation: wa-pulse 2.4s ease-in-out infinite;
}

@keyframes wa-pulse {
    0%, 100% { box-shadow: 0 10px 24px rgba(37, 211, 102, 0.35); }
    50% { box-shadow: 0 10px 30px rgba(37, 211, 102, 0.55); }
}

/* ============================================
   REVEAL ANIMATIONS
   (hanya aktif bila JS berjalan — kelas `js` di <html>)
   ============================================ */
html.js [data-reveal] {
    opacity: 0;
    transform: translateY(var(--reveal-y, 18px));
    transition:
        opacity var(--dur-long) var(--ease-out) var(--reveal-delay, 0ms),
        transform var(--dur-long) var(--ease-out) var(--reveal-delay, 0ms);
}

html.js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

html.js body:not(.animations-on) [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 60rem) {
    .section {
        padding: var(--space-2xl) 0;
    }

    .hero {
        padding-bottom: var(--space-2xl);
    }

    .hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-sm);
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .post-layout-inner {
        grid-template-columns: 1fr;
    }

    .post-rail {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-band {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
}

@media (max-width: 40rem) {
    .header-inner {
        min-height: 64px;
    }

    .main-nav {
        position: absolute;
        top: calc(100% + 8px);
        left: clamp(1rem, 4vw, 1.5rem);
        right: clamp(1rem, 4vw, 1.5rem);
        display: none;
        padding: var(--space-sm);
        border: 1px solid var(--color-rule);
        border-radius: var(--radius-card);
        background: var(--color-paper);
        box-shadow: var(--shadow-lg);
        max-height: calc(100dvh - 96px);
        overflow-y: auto;
    }

    .main-nav.active {
        display: block;
    }

    .main-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2xs);
    }

    .main-nav a {
        display: block;
        padding: var(--space-xs) var(--space-sm);
    }

    .main-nav a::after {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .hero {
        padding-top: calc(64px + var(--space-xl));
    }

    .hero h1 {
        font-size: var(--text-2xl);
    }

    .hero-aside p {
        font-size: var(--text-base);
    }

    .hero-stats {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        margin-top: var(--space-xl);
    }

    .stat-number {
        font-size: var(--text-xl);
    }

    .section-title {
        font-size: var(--text-xl);
    }

    .page-header {
        padding-top: calc(64px + var(--space-xl));
    }

    .page-header h1 {
        font-size: var(--text-2xl);
    }

    .post-title {
        font-size: var(--text-2xl);
    }

    .post-nav-inner {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .post-nav-next {
        text-align: left;
        align-items: flex-start;
    }

    .footer-links {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .post-rail {
        grid-template-columns: 1fr;
    }

    .blog-grid,
    .cards-grid,
    .cabang-grid {
        grid-template-columns: 1fr;
    }

    .blob--purple { display: none; }
    .blob--teal { display: none; }
}

@media (max-width: 25rem) {
    .hero-buttons .btn-primary-custom,
    .hero-buttons .btn-outline-custom {
        width: 100%;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 150ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 150ms !important;
    }

    .loader-spinner {
        animation: none;
        border-top-color: var(--color-paper-3);
    }

    .marquee-track {
        animation: none !important;
        transform: none !important;
    }

    .blob {
        animation: none !important;
    }

    .whatsapp-float {
        animation: none !important;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    html.js [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .site-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}