/* ============================================================
   hfzml.my — Public Site v5 "Badge System" (Sep 2026)
   ------------------------------------------------------------
   Design system yang SAMA dengan admin/login.php "Access Badge":
   kad putih radius 18, strip teal/coral/amber, label mono uppercase,
   chip status PASS/WIP/TODO, tag pill, garis putus, barcode Code 128.

   Fail ni BERDIRI SENDIRI — SEMUA public page (index, about, lab,
   lab-detail, log, resume, 404) guna badge.css sahaja; style.css kini
   khusus admin. public.css + includes/header.php + footer.php lama dah
   dipadam (Sep 2026) selepas semua page migrate.

   Struktur fail:
     1. Token & reset
     2. Primitif kongsi (kicker, chip, tag, card, btn, avatar, barcode)
     3. Header (includes/header-badge.php)
     4. Boot chip
     5. Footer (includes/footer-badge.php)
     6. Visitor stub (renderViewCounter())
     7. Homepage — hero badge (Lanyard)
     8. Homepage — panel lab / log
     9. Responsive (homepage/header/footer)
    10. Inner pages — shell kongsi (trail, page-head, intro, term, prose, sec)
    11. About
    12. Lab listing — accordion (Alpine)
    13. Log listing — rows dalam 1 kad
    14. Report card — log entry & lab detail
    15. Work — resume
    16. 404
    17. Responsive (inner pages)
    18. Feed — timeline & kad post (feed.php, includes/feed.php)
    19. Feed — composer, FAB "Quick post", sheet, flash/toast, viewer imej
    20. Feed — hero homepage "LATEST · /feed"
    21. Responsive (feed)

   Lebar content: SEMUA page guna var(--wrap) — sama dengan header,
   footer dan homepage (keputusan Hafiz, Sep 2026).
   ============================================================ */

/* ============ 1. Token & reset ============ */
:root {
    --bg: #f7f7f3;
    --panel: #ffffff;
    --panel-2: #fbfbf8;
    --ink: #1d2a30;
    --muted: #617178;
    --muted-2: #8a969b;
    --line: #d6dfdb;
    --line-strong: #b9c5c0;
    --teal: #167a70;
    --teal-2: #258d83;
    --teal-soft: #dff3eb;
    --teal-softer: #eef7f4;
    --coral: #f0644a;
    --coral-soft: #fde8e3;
    --coral-ink: #9a2f1b;
    --amber: #f5a524;
    --amber-soft: #fdf1dc;
    --amber-ink: #9a5b00;
    --green: #22b07d;
    --term: #0f171b;
    --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    --sans: 'IBM Plex Sans', Inter, system-ui, -apple-system, sans-serif;
    --shadow: 0 18px 40px rgba(29, 42, 48, .10), 0 2px 6px rgba(29, 42, 48, .06);
    --shadow-sm: 0 6px 18px rgba(29, 42, 48, .07), 0 1px 3px rgba(29, 42, 48, .05);
    --r: 18px;
    --r-sm: 12px;
    --wrap: 980px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.badge-body {
    margin: 0;
    color: var(--ink);
    font: 15px/1.55 var(--sans);
    background: var(--bg) radial-gradient(circle, #dfe6e2 1.3px, transparent 1.3px);
    background-size: 24px 24px;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
img, svg { display: block; }
:focus-visible { outline: 3px solid rgba(45, 184, 168, .35); outline-offset: 2px; border-radius: 6px; }

/* ============ 2. Primitif kongsi ============ */
.kicker {
    font: 600 10px var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--teal);
}
.kicker-muted { color: var(--muted); }

.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px; border-radius: 6px;
    font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
    background: var(--teal-soft); color: var(--teal);
}
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-plain::before { display: none; }
.chip-pass { background: var(--teal-soft); color: var(--teal); }
.chip-wip  { background: var(--amber-soft); color: var(--amber-ink); }
.chip-todo { background: var(--coral-soft); color: var(--coral-ink); }
.chip-published { background: var(--teal-soft); color: var(--teal); }
.chip-draft { background: var(--amber-soft); color: var(--amber-ink); }

.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
    font: 500 10px var(--mono); padding: 3px 7px; border-radius: 5px;
    border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}

.card {
    position: relative; overflow: hidden;
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--shadow-sm);
}
.card-strip::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
    background: linear-gradient(90deg, var(--teal) 0 55%, var(--coral) 55% 75%, var(--amber) 75%);
}
.sep-dashed { border-top: 2px dashed var(--line); }

.btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 16px; border: 0; border-radius: 10px; cursor: pointer;
    background: var(--teal); color: #fff; text-decoration: none;
    font: 600 13px var(--sans); letter-spacing: .01em;
    transition: background .15s, transform .08s, border-color .15s, color .15s;
}
.btn:hover { background: #125f58; }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.btn-ghost:hover { background: var(--teal-softer); border-color: var(--teal-2); color: var(--teal); }

.link-mono {
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
    font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal);
}
.link-mono:hover { text-decoration: underline; }

.avatar {
    display: grid; place-items: center; flex-shrink: 0;
    border-radius: 16px; background: var(--teal-softer); border: 1px solid var(--line);
}
.avatar svg { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.avatar .av-moon, .avatar .av-star { fill: var(--amber); stroke: none; }
.avatar .av-coffee { stroke: var(--coral); }

/* renderBarcodeSvg() — path guna fill:currentColor, warna ikut `color` */
.barcode { width: 100%; height: 28px; color: var(--ink); opacity: .85; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============ 3. Header ============ */
.hdr {
    position: sticky; top: 0; z-index: 40;
    background: rgba(247, 247, 243, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.hdr-in {
    max-width: var(--wrap); margin: 0 auto; padding: 0 24px; height: 66px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark {
    width: 32px; height: 32px; border-radius: 10px; display: block; object-fit: cover;
}
.brand-name { font: 700 16px var(--mono); letter-spacing: -.02em; display: block; line-height: 1.1; }
.brand-name .dot { color: var(--green); }
.brand-sub { display: block; font: 500 9px var(--mono); letter-spacing: .14em; color: var(--muted); margin-top: 2px; }

.nav { display: flex; gap: 4px; }
.nav a {
    padding: 8px 12px; border-radius: 8px; border: 1px solid transparent; text-decoration: none;
    font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.nav a:hover { color: var(--ink); background: #fff; border-color: var(--line); }
.nav a.is-active { color: var(--teal); background: var(--teal-soft); }
/* Elemen khusus dropdown mobile (icon/divider/footer/backdrop) — default
   disorok supaya langsung tak nampak di desktop; "dihidupkan" semula
   dalam §9 @media(max-width:760px). Rujuk docblock di §9 untuk kontrak
   penuh markup. */
.nav a i { display: none; }
.nav-divider, .nav-foot, .nav-backdrop { display: none; }

.hdr-right { display: flex; align-items: center; gap: 12px; }
.status-dot {
    display: inline-flex; align-items: center; gap: 7px;
    font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.status-dot::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--green); box-shadow: 0 0 0 4px rgba(34, 176, 125, .18);
}
.status-dot.st-broken::before { background: var(--coral); box-shadow: 0 0 0 4px rgba(240, 100, 74, .18); }
.status-dot.st-onfire::before { background: var(--amber); box-shadow: 0 0 0 4px rgba(245, 165, 36, .18); }
.cups-chip { height: 36px; padding: 0 12px; font-size: 12px; }

.hamburger {
    display: none; width: 40px; height: 40px; border-radius: 10px;
    border: 1px solid var(--line-strong); background: #fff; color: var(--ink); font-size: 20px; cursor: pointer;
    align-items: center; justify-content: center;
}

/* ============ 4. Boot chip ============ */
.boot { max-width: var(--wrap); margin: 18px auto 0; padding: 0 24px; }
.boot-in {
    display: inline-flex; align-items: center; gap: 8px; min-height: 34px;
    padding: 0 12px; border-radius: 999px; background: var(--term); color: #c8d3d8;
    font: 12px var(--mono); white-space: nowrap; overflow: hidden; max-width: 100%;
}
.boot-in .p, .boot-in .ok { color: var(--green); }
.boot-cur {
    display: inline-block; width: 8px; height: 13px; background: var(--green); vertical-align: -2px;
    animation: boot-blink 1s steps(1) infinite;
}
.boot-in.is-done .boot-cur { display: none; }
@keyframes boot-blink { 50% { opacity: 0; } }

/* ============ 5. Footer ============ */
.ftr { max-width: var(--wrap); margin: 56px auto 40px; padding: 0 24px; }
.ftr-in {
    background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r);
    padding: 18px 24px; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
}
.ftr-copy { font: 500 13px var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.ftr-copy .status-brewing { color: var(--amber-ink); background: var(--amber-soft); padding: 2px 7px; border-radius: 5px; }
.ftr-copy .status-stable  { color: var(--teal); background: var(--teal-soft); padding: 2px 7px; border-radius: 5px; }
.ftr-copy .status-onfire  { color: var(--amber-ink); background: var(--amber-soft); padding: 2px 7px; border-radius: 5px; }
.ftr-copy .status-broken  { color: var(--coral-ink); background: var(--coral-soft); padding: 2px 7px; border-radius: 5px; }
.ftr-tagline { font: 12px var(--sans); color: var(--muted); margin-top: 4px; }
.ftr-right { text-align: right; }
.ftr-right a { font: 600 11px var(--mono); letter-spacing: .1em; color: var(--teal); text-decoration: none; }
.ftr-right a:hover { text-decoration: underline; }
.ftr-bar {
    grid-column: 1 / -1; border-top: 1px dashed var(--line); padding-top: 12px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ftr-bar .barcode { max-width: 520px; }
.ftr-bar small { font: 500 10px var(--mono); letter-spacing: .14em; color: var(--muted-2); text-align: center; }

/* ============ 6. Visitor stub — renderViewCounter() ============ */
.view-counter-badge {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 8px 12px; border-radius: 10px;
    background: var(--panel); border: 1px dashed var(--line-strong);
    font: 500 10px var(--mono); letter-spacing: .1em; color: var(--muted); text-transform: uppercase;
}
.view-counter-count { font: 700 16px var(--sans); color: var(--ink); letter-spacing: 0; }
.view-counter-note {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px; border-radius: 5px;
    background: var(--teal-soft); color: var(--teal); font: 600 9px var(--mono); letter-spacing: .1em;
}
.view-counter-note::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ============ 7. Homepage — hero badge (Lanyard) ============ */
.home-wrap { max-width: var(--wrap); margin: 22px auto 0; padding: 0 24px; }

.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.hero-l { position: relative; padding: 30px 30px 28px; }
.hero-clip {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    width: 52px; height: 14px; border-radius: 999px; background: #e6ece9; border: 1px solid var(--line-strong);
}
.hero-id { display: flex; gap: 18px; align-items: center; margin-top: 18px; }
.hero-id .avatar { width: 84px; height: 84px; border-radius: 20px; }
.hero-id .avatar svg { width: 64px; height: 64px; }
.hero-kicker { display: flex; flex-wrap: wrap; gap: 0 6px; }
.hero-name { font: 700 34px/1 var(--sans); letter-spacing: -.03em; margin-top: 6px; }
.hero-role { margin-top: 6px; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.hero-id .tags { margin-top: 10px; }
.hero-copy { margin-top: 22px; font-size: 16px; color: var(--muted); max-width: 520px; }
.hero-copy b { color: var(--ink); font-weight: 600; }
.hero-cta { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

.hero-r {
    border-left: 2px dashed var(--line); background: var(--panel-2);
    padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 14px;
}
.pulse { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pulse-item { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.pulse-item b { display: block; font: 700 26px/1 var(--sans); letter-spacing: -.02em; }
.pulse-item span { display: block; margin-top: 6px; font: 600 9px var(--mono); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.pulse-item.is-coffee b { color: var(--coral); }
.pulse-item.is-amber b { color: var(--amber-ink); }

/* Kad "Now building" (.now*) dibuang Sep 2026 — diganti .hero-feed (seksyen 20) */

.hero-foot {
    grid-column: 1 / -1; border-top: 1px solid var(--line); background: var(--panel-2);
    padding: 12px 30px 16px; display: flex; align-items: center; gap: 18px;
}
.hero-foot .barcode { height: 22px; flex: 0 0 260px; max-width: 60%; }
.hero-foot small { font: 500 10px var(--mono); letter-spacing: .14em; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============ 8. Homepage — panel lab / log ============ */
.panels { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 18px; margin-top: 22px; }
.panel-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
    padding: 20px 22px 14px; border-bottom: 1px solid var(--line);
}
.panel-head h2 { font: 700 18px/1.2 var(--sans); letter-spacing: -.02em; margin-top: 5px; }
.panel-head > i { color: var(--teal); font-size: 20px; }
.panel { display: flex; flex-direction: column; }
.panel-foot {
    margin-top: auto; /* pin ke bawah bila panel sebelah lebih tinggi (grid stretch) */
    padding: 12px 22px; border-top: 1px solid var(--line); background: var(--panel-2);
    display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.panel-empty { padding: 26px 22px; color: var(--muted); font: 13px var(--mono); }

.item {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center;
    padding: 14px 22px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
    transition: background .12s;
}
.item:last-of-type { border-bottom: 0; }
.item:hover { background: var(--teal-softer); }
.item-ic {
    width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center;
    background: var(--teal-softer); color: var(--teal); font-size: 20px; border: 1px solid var(--line);
}
.item h3 { font: 600 15px/1.3 var(--sans); }
.item p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.item .tags { margin-top: 6px; }
.item-end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.item-end small { font: 500 10px var(--mono); letter-spacing: .06em; color: var(--muted-2); text-transform: uppercase; }
.item-arrow { color: var(--muted-2); font-size: 18px; }

.panel-log .item { grid-template-columns: minmax(0, 1fr) auto; }
.item-date { display: block; margin-bottom: 4px; font: 500 10px var(--mono); letter-spacing: .08em; color: var(--muted-2); text-transform: uppercase; }

/* ============ 9. Responsive (homepage/header/footer) ============ */
@media (max-width: 820px) {
    .hero { grid-template-columns: 1fr; }
    .hero-r { border-left: 0; border-top: 2px dashed var(--line); }
    .panels { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    /* Redesign dropdown (3 Oct 2026, feedback Hafiz — mockup
       hfzml-mobile-nav-mockup.html Konsep A v3): dulu panel stretch
       hampir full-width (left:0;right:0) dengan background 98%
       transparent — tukar jadi kad SOLID, compact width (ikut
       kandungan teks sahaja, ~150-196px), anchor KANAN (right:16px)
       betul-betul bawah hamburger button (.hdr-right), + icon per item
       + active state teal + footer status/cups chip (dipindah dari
       header sebab .hdr-right punya disorok di mobile — rujuk rule
       di bawah). Markup baru: <i> icon + <span> label dalam .nav a,
       .nav-divider, .nav-foot/.nav-foot-status/.nav-foot-cups,
       .nav-backdrop — semua declare default display:none di §3 Header
       supaya tak terkesan langsung di desktop; media query ni yang
       "hidupkan" bila skrin ≤760px DAN .nav/.nav-backdrop ada class
       is-open (toggle oleh script includes/header-badge.php). */
    .nav {
        display: none; position: absolute; top: 66px; right: 16px; z-index: 50;
        width: max-content; min-width: 152px; max-width: 196px;
        flex-direction: column; gap: 2px; padding: 6px;
        background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
    }
    .nav.is-open { display: flex; }
    .nav a {
        display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 10px;
        font: 600 12.5px var(--sans); letter-spacing: normal; text-transform: none; color: var(--ink);
        white-space: nowrap; border-color: transparent;
    }
    .nav a:hover { background: var(--panel-2); border-color: transparent; color: var(--ink); }
    .nav a.is-active { background: var(--teal-soft); color: var(--teal); }
    .nav a i { display: inline-block; font-size: 16px; color: var(--muted); width: 18px; text-align: center; flex: none; }
    .nav a.is-active i { color: var(--teal); }
    .nav-divider { display: block; height: 1px; background: var(--line); margin: 4px 8px; }
    .nav-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 4px; }
    .nav-foot-status {
        font: 500 8.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
        display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    }
    .nav-foot-status::before {
        content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none;
        background: var(--green); box-shadow: 0 0 0 3px rgba(34, 176, 125, .18);
    }
    .nav-foot-status.st-broken::before { background: var(--coral); box-shadow: 0 0 0 3px rgba(240, 100, 74, .18); }
    .nav-foot-status.st-onfire::before { background: var(--amber); box-shadow: 0 0 0 3px rgba(245, 165, 36, .18); }
    .nav-foot-cups { font: 600 11px var(--mono); color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
    .nav-backdrop.is-open {
        display: block; position: fixed; inset: 66px 0 0; z-index: 45;
        background: rgba(29, 42, 48, .28);
    }
    .hdr-right .status-dot, .hdr-right .cups-chip { display: none; }
    .hamburger { display: inline-flex; }
}
@media (max-width: 600px) {
    .hdr-in, .home-wrap, .boot, .ftr { padding-left: 16px; padding-right: 16px; }
    .hero-l { padding: 26px 20px 24px; }
    .hero-r { padding: 20px; }
    .hero-id { gap: 14px; }
    .hero-id .avatar { width: 68px; height: 68px; }
    .hero-id .avatar svg { width: 52px; height: 52px; }
    .hero-name { font-size: 28px; }
    .hero-foot { padding: 12px 20px 14px; flex-direction: column; align-items: stretch; gap: 8px; }
    .hero-foot .barcode { flex: none; max-width: none; }
    .hero-foot small { white-space: normal; text-align: center; }
    .item { padding: 14px 18px; grid-template-columns: 40px minmax(0, 1fr); }
    .item-ic { width: 40px; height: 40px; }
    .item-end { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
    .panel-log .item { grid-template-columns: minmax(0, 1fr) auto; }
    .panel-head, .panel-foot { padding-left: 18px; padding-right: 18px; }
    .ftr-in { grid-template-columns: 1fr; }
    .ftr-right { text-align: left; }
}

/* ============ 10. Inner pages — shell kongsi ============ */
/* Lebar SAMA dengan header/footer/homepage (var(--wrap)) */
.page-wrap { max-width: var(--wrap); margin: 22px auto 0; padding: 0 24px; }

/* Page trail — KEKAL dari versi lama (garis putus atas/bawah, butang ← kiri, route kanan) */
.trail {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin: 0 0 22px; padding: 10px 0;
    border-top: 1px dashed var(--line-strong); border-bottom: 1px dashed var(--line-strong);
}
.trail-back {
    display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 8px;
    background: var(--ink); color: #fff; text-decoration: none;
    font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase;
    transition: background .15s, transform .15s;
}
.trail-back:hover { background: var(--teal); transform: translateX(-3px); }
.trail-route {
    font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); text-align: right; overflow-wrap: anywhere;
}
.trail-route b { color: var(--teal); font-weight: 500; padding: 0 5px; }

/* Page head — KEKAL label "// lab.log" (jadi kicker fail), tajuk besar IBM Plex */
.page-head { margin: 0 0 22px; }
.page-file { font: 600 12px var(--mono); letter-spacing: .06em; color: var(--teal); }
.page-title { font: 700 clamp(30px, 4.2vw, 42px)/1.05 var(--sans); letter-spacing: -.03em; margin-top: 6px; }
.page-title small {
    display: block; margin-top: 8px;
    font: 500 12px var(--mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase;
}

/* Intro text — KEKAL (editable admin/settings), kad putih + strip kiri teal */
.intro {
    position: relative; margin: 18px 0 0; padding: 16px 20px 16px 22px;
    background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 12px;
    color: var(--muted); font-size: 15.5px; line-height: 1.6;
}
.intro p { margin: 0 0 10px; }
.intro p:last-child { margin: 0; }
.intro strong { color: var(--ink); }
.intro a { color: var(--teal); }

/* Terminal strip — kepala kad gaya terminal (about / log entry / 404) */
.term {
    display: flex; flex-direction: column; gap: 3px; padding: 14px 20px;
    background: var(--term); color: #c8d3d8; font: 12.5px/1.6 var(--mono); overflow-wrap: anywhere;
}
.term .p { color: var(--green); }
.term .c { color: #7f8f96; }
.term .warn { color: var(--amber); }

/* Prose — content Tiptap (about, log entry) */
.prose { font-size: 16px; line-height: 1.7; color: var(--ink); overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 14px; }
.prose h1, .prose h2, .prose h3 { font-family: var(--sans); letter-spacing: -.02em; line-height: 1.25; margin: 24px 0 10px; }
.prose h1 { font-size: 24px; }
.prose h2 { font-size: 20px; }
.prose h3 { font-size: 17px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 40px; }
.prose li { margin: 2px 0; }
.prose li p { margin: 0; }
.prose a { color: var(--teal); text-decoration: underline; text-decoration-color: var(--teal-2); text-underline-offset: 2px; }
.prose strong { font-weight: 600; }
.prose u { text-decoration-color: var(--amber); }
.prose img { max-width: 100%; height: auto; border-radius: 10px; }
.prose blockquote { margin: 0 0 14px; padding: 4px 0 4px 16px; border-left: 3px solid var(--line-strong); color: var(--muted); }
.prose pre, .prose code { font-family: var(--mono); font-size: 13px; }
.prose pre { padding: 14px 16px; border-radius: 10px; background: var(--term); color: #c8d3d8; overflow-x: auto; }

/* Section heading — KEKAL "WORK EXPERIENCE — /experience" */
.sec { margin-top: 30px; }
.sec-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.sec-head h2 { font: 700 18px/1.2 var(--sans); letter-spacing: -.02em; }
.sec-head h2 span { font: 500 11px var(--mono); letter-spacing: .06em; color: var(--teal); margin-left: 8px; }

/* Visitor stub di hujung page */
.page-foot { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

.empty-state { padding: 26px 22px; color: var(--muted); font: 13px var(--mono); }

/* ============ 11. About ============ */
.about-card .prose { padding: 24px 26px 26px; }
.about-meta {
    display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 10px 26px; border-top: 1px dashed var(--line); background: var(--panel-2);
    font: 500 10px var(--mono); letter-spacing: .1em; color: var(--muted-2); text-transform: uppercase;
}

/* ============ 12. Lab listing — accordion (Alpine, 1 buka pada satu masa) ============ */
[x-cloak] { display: none !important; }
.acc { display: grid; gap: 12px; }
.acc-item { overflow: visible; }
.acc-trigger {
    width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center;
    padding: 16px 20px; background: transparent; border: 0; cursor: pointer; text-align: left; color: inherit; font: inherit;
    border-radius: var(--r);
}
.acc-trigger:hover { background: var(--teal-softer); }
.acc-title { font: 600 16px/1.3 var(--sans); }
.acc-tech { margin-top: 5px; }
.acc-right { display: flex; align-items: center; gap: 10px; }
.acc-chev { color: var(--muted-2); font-size: 18px; transition: transform .2s; }
.acc-item.is-open .acc-chev { transform: rotate(180deg); }
.acc-item.is-open .acc-trigger { border-radius: var(--r) var(--r) 0 0; }
.acc-panel { padding: 0 20px 18px 78px; border-top: 1px dashed var(--line); }
.acc-eyebrow { padding-top: 14px; font: 600 10px var(--mono); letter-spacing: .12em; color: var(--teal); text-transform: uppercase; }
.acc-desc { margin-top: 8px; font-size: 14.5px; color: var(--muted); overflow-wrap: anywhere; }
.acc-meta { margin-top: 10px; font: 500 10px var(--mono); letter-spacing: .08em; color: var(--muted-2); text-transform: uppercase; }
.acc-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 12px; }
.btn-disabled { background: var(--line); color: var(--muted); cursor: not-allowed; pointer-events: none; }

/* ============ 13. Log listing — rows dalam 1 kad ============ */
.log-list .item { grid-template-columns: 110px minmax(0, 1fr) auto; }
.log-date { font: 500 11px var(--mono); letter-spacing: .06em; color: var(--muted-2); text-transform: uppercase; }
.log-list .item p { margin-top: 3px; }

/* ============ 14. Report card — log entry & lab detail (bahasa test-report KEKAL) ============ */
.report-body { padding: 24px 26px 26px; }
.report-titlerow { display: flex; align-items: flex-start; gap: 12px; }
.report-titlerow .chip { flex-shrink: 0; margin-top: 8px; }
.report-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 13px; }
.report-dot.pass { background: var(--teal); box-shadow: 0 0 0 4px var(--teal-soft); }
.report-dot.wip { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.report-dot.todo { background: var(--coral); box-shadow: 0 0 0 4px var(--coral-soft); }
.report-dot.published { background: var(--teal); box-shadow: 0 0 0 4px var(--teal-soft); }
.report-dot.draft { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.report-title { font: 700 clamp(24px, 3.4vw, 34px)/1.15 var(--sans); letter-spacing: -.03em; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.report-meta { margin-top: 10px; font: 500 12px var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.report-meta b { color: var(--teal); font-weight: 500; }
.assert {
    margin-top: 20px; padding: 14px 16px;
    border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 10px; background: var(--panel-2);
}
.assert-label { font: 500 12px var(--mono); color: var(--muted); }
.assert .tags { margin-top: 10px; }
.assert .tag { font-size: 11px; padding: 4px 9px; background: #fff; }
.docstring { margin-top: 18px; padding: 0 0 0 16px; border-left: 2px solid var(--line-strong); }
.docstring .q { font: 500 13px var(--mono); color: var(--amber-ink); display: block; }
.docstring p { margin: 4px 0; font-size: 15.5px; font-style: italic; color: var(--muted); overflow-wrap: anywhere; }
.divider {
    display: flex; align-items: center; gap: 12px; margin: 24px 0 16px;
    font: 600 10px var(--mono); letter-spacing: .14em; color: var(--muted); text-transform: uppercase;
}
.divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.stdout { padding: 20px 22px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.stdout-empty { font: 13px var(--mono); color: var(--muted); }
.report-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 26px; border-top: 1px solid var(--line); background: var(--panel-2);
}
.case-head {
    display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 26px; border-bottom: 1px solid var(--line); background: var(--panel-2);
    font: 600 10px var(--mono); letter-spacing: .12em; color: var(--muted); text-transform: uppercase;
}
.report-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

/* ============ 15. Work — resume ============ */
.rlist { display: grid; gap: 12px; }
.ritem { padding: 18px 20px; }
.ritem-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ritem-title { font: 600 16px/1.3 var(--sans); }
.ritem-sub { color: var(--muted); font-weight: 400; }
.ritem-sub::before { content: ' · '; color: var(--muted-2); }
.ritem-date { font: 500 11px var(--mono); letter-spacing: .06em; color: var(--muted-2); white-space: nowrap; }
.ritem-status { margin-top: 8px; }
.ritem-desc { margin-top: 10px; font-size: 14.5px; color: var(--muted); overflow-wrap: anywhere; }
.ritem-desc a { color: var(--teal); }
/* Skill cloud — KEKAL group "// subtitle-slug", "general" paling bawah */
.skill-group { margin-top: 14px; }
.skill-group-label { font: 600 11px var(--mono); letter-spacing: .06em; color: var(--teal); }
.skill-group-label::before { content: '// '; color: var(--muted-2); }
.skill-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.skill-pill {
    padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
    font: 500 13px var(--sans); color: var(--ink);
}
.skill-pill:hover { border-color: var(--teal-2); color: var(--teal); }

/* ============ 16. 404 ============ */
.nf-wrap { max-width: 560px; margin: 40px auto 0; padding: 0 24px; }
.nf-body { padding: 26px 26px 28px; text-align: center; }
.nf-code { font: 600 12px var(--mono); letter-spacing: .12em; color: var(--coral); }
.nf-title { font: 700 30px/1.1 var(--sans); letter-spacing: -.03em; margin-top: 8px; }
.nf-text { color: var(--muted); margin-top: 8px; }
.nf-actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* ============ 17. Responsive (inner pages) ============ */
@media (max-width: 600px) {
    .page-wrap, .nf-wrap { padding-left: 16px; padding-right: 16px; }
    .trail { flex-direction: column; align-items: flex-start; gap: 8px; }
    .trail-route { text-align: left; }
    .acc-trigger { grid-template-columns: 40px minmax(0, 1fr); padding: 14px 16px; }
    .acc-right { grid-column: 2; }
    .acc-panel { padding: 0 16px 16px 16px; }
    .log-list .item { grid-template-columns: minmax(0, 1fr) auto; }
    .log-list .log-date { grid-column: 1 / -1; }
    .report-body, .about-card .prose { padding: 20px 18px; }
    .report-foot, .case-head, .about-meta { padding-left: 18px; padding-right: 18px; }
    .report-titlerow { flex-wrap: wrap; }
    .report-title { flex: 1 1 calc(100% - 24px); }
    .report-titlerow .chip { margin: 0 0 0 24px; }
}

/* ============ 18. Feed — timeline & kad post ============ */
.feed-list .post { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 22px; border-bottom: 1px dashed var(--line); }
.feed-list .post:last-of-type { border-bottom: 0; }
.post:target { background: var(--teal-softer); }
.post-av { width: 44px; height: 44px; border-radius: 12px; }
.post-av svg { width: 32px; height: 32px; }
.post-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.post-name { font: 600 14px var(--sans); }
.post-handle, .post-time, .post-id { font: 500 11px var(--mono); color: var(--muted-2); letter-spacing: .02em; }
.post-time { margin-left: auto; white-space: nowrap; }
.post-time a { color: inherit; text-decoration: none; }
.post-time a:hover { color: var(--teal); }
.post-body { margin-top: 6px; font-size: 15.5px; line-height: 1.6; overflow-wrap: anywhere; }
.post-body a { color: var(--teal); text-decoration: underline; text-decoration-color: var(--teal-2); text-underline-offset: 2px; }
.post-body .hash { color: var(--teal); }
/* Format inline (Sep 2026) — marker **bold** / *italic* / __underline__ → tag */
.post-body b { font-weight: 700; }
.post-body i { font-style: italic; }
.post-body u { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.post-media {
    margin-top: 12px; display: grid; gap: 6px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
    aspect-ratio: 16 / 9; max-height: 380px; grid-auto-rows: minmax(0, 1fr); background: var(--panel-2);
}
.post-media.n1 { grid-template-columns: 1fr; }
.post-media.n2 { grid-template-columns: 1fr 1fr; }
.post-media.n3 { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.post-media.n3 > :first-child { grid-row: 1 / 3; }
.post-media.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.post-media a { display: block; min-height: 0; }
.post-media img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.post-link {
    margin-top: 12px; display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; background: var(--panel-2);
}
.post-link:hover { border-color: var(--teal-2); }
.post-link i { color: var(--teal); font-size: 18px; flex-shrink: 0; }
.post-link b { display: block; font: 600 13px var(--sans); overflow-wrap: anywhere; }
.post-link small { display: block; font: 500 10px var(--mono); letter-spacing: .06em; color: var(--muted-2); text-transform: uppercase; margin-top: 2px; overflow-wrap: anywhere; }
.post-foot {
    margin-top: 12px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
    font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2);
}
.post-foot a, .post-foot button { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.post-foot a:hover, .post-foot button:hover { color: var(--teal); }
.post-admin { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.post-del-form { display: inline-flex; margin: 0; }
.post-admin .del:hover { color: var(--coral-ink); }
.feed-list .panel-foot .pagination-nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
/* Pagination feed — selaras dengan admin (Sep 2026): kotak 32px radius 8, active teal penuh */
.feed-list .panel-foot .pagination-link, .feed-list .panel-foot .pagination-ellipsis {
    display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 9px; border-radius: 8px;
    border: 1px solid var(--line-strong); background: #fff; color: var(--muted); text-decoration: none; font: 600 12px var(--mono);
}
.feed-list .panel-foot .pagination-link-nav { font-size: 16px; }
.feed-list .panel-foot .pagination-link:hover { border-color: var(--teal-2); color: var(--teal); }
.feed-list .panel-foot .pagination-link-active { background: var(--teal); border-color: var(--teal); color: #fff; }
.feed-list .panel-foot .pagination-link-disabled { opacity: .4; pointer-events: none; }
.feed-list .panel-foot .pagination-ellipsis { border: 0; background: transparent; }
.feed-list .panel-foot .pagination-meta { display: none; }

/* ============ 19. Feed — composer, FAB, sheet, flash ============ */
.composer-card { margin-bottom: 16px; }
.composer { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 22px; margin: 0; }
.composer-editing { margin: 6px 0 2px; }
.composer-editing a { color: var(--coral-ink); text-decoration: none; }
.composer textarea {
    width: 100%; border: 0; resize: none; outline: none; background: transparent; padding: 8px 0 0;
    min-height: 72px; font: 15.5px/1.6 var(--sans); color: var(--ink); overflow: hidden;
}
.composer textarea::placeholder { color: var(--muted-2); }
.composer-previews { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.composer-previews:empty { display: none; }
.composer-previews figure { position: relative; margin: 0; width: 92px; height: 92px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); }
.composer-previews img { width: 100%; height: 100%; object-fit: cover; display: block; }
.composer-previews figure.is-removed img { opacity: .25; filter: grayscale(1); }
.composer-previews figure.is-new::after { content: 'BARU'; position: absolute; left: 5px; bottom: 5px; padding: 2px 5px; border-radius: 4px; background: var(--teal); color: #fff; font: 600 8px var(--mono); letter-spacing: .1em; }
.composer-rm {
    position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(29, 42, 48, .85); color: #fff; cursor: pointer; font-size: 12px; display: grid; place-items: center;
}
.composer-rm input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.composer-rm:has(input:checked) { background: var(--coral); }
.composer-link { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.composer-link[hidden] { display: none; }
.composer-link input {
    width: 100%; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-strong); background: #fff;
    font: 13px var(--sans); color: var(--ink); outline: none;
}
.composer-link input:focus { border-color: var(--teal-2); box-shadow: 0 0 0 3px var(--teal-soft); }
.composer-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); flex-wrap: wrap; }
.composer-tool {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 8px;
    border: 1px solid var(--line-strong); background: #fff; color: var(--muted); cursor: pointer;
    font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.composer-tool i { font-size: 16px; color: var(--teal); }
.composer-tool:hover { border-color: var(--teal-2); color: var(--teal); }
.composer-tool[aria-pressed="true"] { background: var(--teal-soft); border-color: var(--teal-soft); color: var(--teal); }
/* Butang format B/I/U — icon sahaja, digabung jadi satu kumpulan */
.composer-fmt { display: inline-flex; }
.composer-fmt-btn { width: 34px; padding: 0; justify-content: center; border-radius: 0; margin-left: -1px; }
.composer-fmt-btn:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.composer-fmt-btn:last-child { border-radius: 0 8px 8px 0; }
.composer-fmt-btn:hover { position: relative; z-index: 1; }
.composer-fmt-btn i { color: var(--muted); }
.composer-fmt-btn:hover i { color: var(--teal); }
.composer-imgcount { color: var(--muted-2); }
.composer-imgcount.is-over { color: var(--coral-ink); }
.composer-count { margin-left: auto; font: 500 11px var(--mono); color: var(--muted-2); }
.composer-count.is-warn { color: var(--amber-ink); }
.composer-count.is-over { color: var(--coral-ink); font-weight: 600; }
.composer-submit { height: 36px; padding: 0 16px; font-size: 12px; }
.composer-submit:disabled { opacity: .45; cursor: not-allowed; }
.composer-hint { margin-top: 8px; font: 500 10px var(--mono); letter-spacing: .06em; color: var(--muted-2); text-transform: uppercase; }

.feed-flash {
    display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px 14px; border-radius: 10px;
    background: var(--teal-soft); color: var(--teal); font: 500 13px var(--sans); border: 1px solid transparent;
}
.feed-flash.is-error { background: var(--coral-soft); color: var(--coral-ink); }

/* FAB — hanya dirender bila session admin sah */
.fab {
    position: fixed; right: 22px; bottom: 22px; z-index: 60; height: 52px; padding: 0 18px 0 14px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--ink); color: #fff; display: inline-flex; align-items: center; gap: 10px; box-shadow: var(--shadow);
    font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: transform .12s, background .15s;
}
.fab i { font-size: 20px; color: var(--green); }
.fab:hover { background: var(--teal); transform: translateY(-2px); }
.fab .fab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(34, 176, 125, .25); }
body.sheet-open { overflow: hidden; }

.sheet-bg[hidden] { display: none; }
.sheet-bg {
    position: fixed; inset: 0; z-index: 70; background: rgba(29, 42, 48, .42);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    display: grid; place-items: center; padding: 20px;
}
.sheet { width: min(640px, 100%); max-height: calc(100vh - 40px); overflow: auto; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 22px 12px; border-bottom: 1px solid var(--line); }
.sheet-head .kicker { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sheet-head .kicker .adm { padding: 2px 6px; border-radius: 5px; background: var(--teal-soft); color: var(--teal); }
.sheet-close { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); cursor: pointer; font-size: 16px; display: grid; place-items: center; }
.sheet-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 22px;
    border-top: 1px solid var(--line); background: var(--panel-2);
    font: 500 10px var(--mono); letter-spacing: .08em; color: var(--muted-2); text-transform: uppercase;
}
.sheet-foot a { color: var(--teal); text-decoration: none; }
.sheet .composer { padding: 14px 22px 16px; }

/* Toast — flash selepas submit dari sheet (page selain /feed) */
.feed-toast {
    position: fixed; left: 22px; bottom: 22px; z-index: 65; max-width: min(420px, calc(100vw - 44px));
    display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px;
    background: var(--ink); color: #fff; font: 500 13px var(--sans); box-shadow: var(--shadow);
    animation: toast-out .4s ease 6s forwards;
}
.feed-toast i { color: var(--green); font-size: 16px; }
.feed-toast.is-error i { color: var(--coral); }
.feed-toast a { color: var(--green); text-decoration: none; font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-left: 6px; }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); visibility: hidden; } }

/* Viewer imej (gallery) — dicipta JS (renderFeedScript) bila imej post diklik.
   Struktur: .vw (flex column) → .vw-top (meta + aksi) / .vw-stage (imej, flex:1) / .vw-bottom (caption + filmstrip) */
.vw[hidden] { display: none; }
.vw {
    position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column;
    background: rgba(15, 23, 27, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #dfe8ed; font-family: var(--sans);
}
.vw.is-in { animation: vw-in .22s ease-out; }
@keyframes vw-in { from { opacity: 0; } to { opacity: 1; } }
body.vw-open { overflow: hidden; }

.vw-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; padding: 0 16px 0 20px; flex-shrink: 0; }
.vw-meta { display: flex; align-items: center; gap: 10px; min-width: 0; font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(223, 232, 237, .6); }
.vw-kicker { color: var(--green); }
.vw-kicker::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 8px; box-shadow: 0 0 0 3px rgba(34, 176, 125, .25); vertical-align: 1px; }
.vw-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-count { color: #fff; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, .1); }
.vw-count:empty { display: none; }
.vw-actions { display: flex; gap: 8px; flex-shrink: 0; }
.vw-btn {
    width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06);
    color: #fff; font-size: 18px; cursor: pointer; display: grid; place-items: center; text-decoration: none; transition: background .15s, border-color .15s, transform .1s;
}
.vw-btn:hover { background: var(--teal); border-color: var(--teal); }
.vw-btn:active { transform: scale(.96); }
.vw-close:hover { background: var(--coral); border-color: var(--coral); }

.vw-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px 72px; overflow: hidden; }
.vw-stage img {
    display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
    border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); cursor: zoom-in; user-select: none;
    transition: opacity .15s;
}
.vw-stage img.slide-l { animation: vw-slide-l .28s cubic-bezier(.2, .7, .2, 1); }
.vw-stage img.slide-r { animation: vw-slide-r .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes vw-slide-l { from { opacity: 0; transform: translateX(28px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes vw-slide-r { from { opacity: 0; transform: translateX(-28px) scale(.98); } to { opacity: 1; transform: none; } }
/* Zoom 1:1 — stage jadi scrollable, imej saiz asal */
.vw.is-zoomed .vw-stage { overflow: auto; align-items: flex-start; justify-content: flex-start; padding: 8px; scrollbar-width: thin; }
.vw.is-zoomed .vw-stage img { max-width: none; max-height: none; border-radius: 4px; cursor: zoom-out; margin: auto; }
.vw.is-zoomed .vw-nav { display: none; }
.vw-nav {
    position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .14); background: rgba(15, 23, 27, .6); color: #fff; font-size: 22px; cursor: pointer;
    display: grid; place-items: center; transition: background .15s, opacity .15s; z-index: 2;
}
.vw-nav:hover { background: var(--teal); border-color: var(--teal); }
.vw-prev { left: 14px; } .vw-next { right: 14px; }
.vw.is-single .vw-nav, .vw.is-single .vw-strip { display: none; }
/* Loading spinner (fail penuh sedang dimuat — thumb dipapar dulu) */
.vw-spin { position: absolute; right: 18px; bottom: 14px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .2); border-top-color: var(--green); opacity: 0; animation: vw-spin .8s linear infinite; pointer-events: none; }
.vw.is-loading .vw-spin { opacity: 1; }
@keyframes vw-spin { to { transform: rotate(360deg); } }

.vw-bottom { flex-shrink: 0; padding: 10px 20px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vw-caption { max-width: 720px; text-align: center; font-size: 13.5px; line-height: 1.5; color: rgba(223, 232, 237, .85); overflow-wrap: anywhere; }
.vw-caption[hidden] { display: none; }
.vw-strip { display: flex; gap: 8px; justify-content: center; max-width: 100%; overflow-x: auto; padding: 4px; scrollbar-width: none; }
.vw-strip::-webkit-scrollbar { display: none; }
.vw-strip button {
    flex: 0 0 auto; width: 56px; height: 56px; padding: 0; border-radius: 9px; overflow: hidden; cursor: pointer;
    border: 2px solid transparent; background: rgba(255, 255, 255, .06); opacity: .55; transition: opacity .15s, border-color .15s, transform .15s;
}
.vw-strip button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vw-strip button:hover { opacity: .9; }
.vw-strip button.is-active { opacity: 1; border-color: var(--green); transform: translateY(-2px); box-shadow: 0 0 0 3px rgba(34, 176, 125, .25); }

@media (prefers-reduced-motion: reduce) { .vw, .vw-stage img, .vw-strip button { animation: none !important; transition: none !important; } }

/* ============ 20. Feed — hero homepage "LATEST · /feed" ============ */
.hero-feed {
    display: block; padding: 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: #fff;
    text-decoration: none; color: inherit; transition: border-color .15s;
}
.hero-feed:hover { border-color: var(--teal-2); }
.hero-feed-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hero-feed-head .kicker { display: inline-flex; align-items: center; gap: 7px; }
.hero-feed-head .kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(34, 176, 125, .22); }
.hero-feed-body { margin-top: 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.hero-feed-text { font-size: 14px; line-height: 1.5; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.hero-feed-text.is-empty { color: var(--muted); font: 13px var(--mono); }
.hero-feed-thumb { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); }
.hero-feed-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-feed-more { margin-top: 10px; font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }

/* ============ 21. Responsive (feed) ============ */
@media (max-width: 600px) {
    .feed-list .post, .composer { padding: 14px 16px; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }
    .post-av { width: 36px; height: 36px; border-radius: 10px; }
    .post-av svg { width: 26px; height: 26px; }
    .post-admin { margin-left: 0; width: 100%; }
    .composer-link { grid-template-columns: 1fr; }
    .composer-hint { display: none; }
    .fab { right: 14px; bottom: 14px; height: 48px; padding: 0 14px 0 12px; }
    .fab > span:last-child { display: none; }
    .sheet-bg { padding: 0; align-items: end; }
    .sheet { border-radius: var(--r) var(--r) 0 0; max-height: 92vh; }
    .sheet-head, .sheet-foot, .sheet .composer { padding-left: 16px; padding-right: 16px; }
    .feed-toast { left: 14px; bottom: 74px; }
    .vw-top { height: 52px; padding: 0 10px 0 14px; }
    .vw-label { display: none; }
    .vw-btn { width: 36px; height: 36px; font-size: 16px; }
    .vw-stage { padding: 4px 8px; }
    .vw-stage img { border-radius: 8px; }
    .vw-nav { display: none; } /* mobile: swipe + filmstrip */
    .vw-bottom { padding: 8px 12px 14px; gap: 10px; }
    .vw-caption { font-size: 12.5px; }
    .vw-strip button { width: 46px; height: 46px; }
}

/* ============ 22. Promo — papan iklan, kad detail, strip homepage (Sep 2026) ============ */
/* Poster: nisbah 2:3 (1080×1620). object-fit cover → poster bukan-2:3 dicrop (admin dapat amaran). */
.poster { position: relative; display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); aspect-ratio: 2 / 3; box-shadow: var(--shadow-sm); }
.poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster .zoom {
    position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 7px;
    background: rgba(15, 23, 27, .78); color: #fff; font: 600 9.5px var(--mono); letter-spacing: .08em; pointer-events: none;
}
/* renderPromoPoster(zoomable) bungkus .post-media supaya viewer .vw feed intercept — reset grid/aspect 16:9 feed */
.post-media.poster { display: block; grid-template-columns: none; max-height: none; margin-top: 0; aspect-ratio: 2 / 3; }
.post-media.poster a { display: block; height: 100%; }
.poster-empty { display: grid; place-items: center; align-content: center; gap: 6px; padding: 20px; text-align: center; color: var(--muted); font: 600 14px var(--sans); background: repeating-linear-gradient(45deg, var(--panel-2) 0 10px, #f1f3f1 10px 20px); }
.poster-empty small { font: 600 9px var(--mono); letter-spacing: .12em; color: var(--muted-2); }

.price { display: inline-flex; align-items: baseline; gap: 4px; font: 700 28px/1 var(--sans); letter-spacing: -.02em; }
.price small { font: 500 10.5px var(--mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.price .cur { font: 600 14px var(--mono); color: var(--muted); letter-spacing: 0; }
.price.price-sm { font-size: 20px; }
.price.price-sm .cur { font-size: 12px; }
.btn-wa { background: #1f9d55; }
.btn-wa:hover { background: #187a42; }
.btn-disabled { opacity: .6; cursor: default; pointer-events: none; }
.promo-kicker { color: var(--coral-ink); }
.chip-ended { background: #eceeed; color: var(--muted); }
.checks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.checks li { display: flex; gap: 8px; align-items: flex-start; }
.checks li i { color: var(--teal); font-size: 15px; margin-top: 2px; flex: none; }
.checks a { color: var(--teal); }
.terms {
    padding: 9px 11px; border-radius: 9px; background: var(--panel-2); border: 1px dashed var(--line-strong);
    font: 500 10px/1.6 var(--mono); letter-spacing: .04em; color: var(--muted); text-transform: uppercase;
}
.terms b { color: var(--coral-ink); }
.clicks { font: 500 10px var(--mono); letter-spacing: .08em; color: var(--muted-2); text-transform: uppercase; }

/* Papan iklan */
.board { padding: 28px 26px 22px; background: var(--panel-2) repeating-linear-gradient(0deg, transparent 0 23px, rgba(29, 42, 48, .045) 23px 24px); border-style: dashed; overflow: visible; }
.board-others { margin-top: 22px; }
.board-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.board-head h2 { font: 700 18px var(--sans); letter-spacing: -.02em; margin-top: 4px; }
.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; align-items: start; }
.pin { position: relative; text-decoration: none; color: inherit; display: block; transition: transform .15s; }
.pin:nth-child(3n+1) { transform: rotate(-1.4deg); }
.pin:nth-child(3n+2) { transform: rotate(.8deg); }
.pin:nth-child(3n)   { transform: rotate(-.6deg); }
.pin:hover { transform: translateY(-4px) rotate(0); z-index: 2; }
.pin .poster { box-shadow: 0 14px 30px rgba(29, 42, 48, .16), 0 2px 6px rgba(29, 42, 48, .08); border-radius: 6px; }
.pin .tape { position: absolute; top: -9px; left: 50%; width: 76px; height: 20px; transform: translateX(-50%) rotate(-3deg); background: rgba(245, 165, 36, .72); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); z-index: 3; }
.pin:nth-child(3n+2) .tape { background: rgba(240, 100, 74, .62); transform: translateX(-50%) rotate(2deg); }
.pin:nth-child(3n) .tape { background: rgba(34, 176, 125, .6); }
.pin-cap { margin-top: 10px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.pin-cap b { font: 600 13px var(--sans); overflow-wrap: anywhere; }
.pin-cap small { font: 500 10px var(--mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; white-space: nowrap; }
.pin .price-tag { position: absolute; right: -8px; top: 18px; z-index: 3; padding: 6px 10px; border-radius: 8px 8px 8px 2px; background: var(--ink); color: #fff; font: 700 13px var(--mono); box-shadow: var(--shadow-sm); }
.pin .price-tag small { display: block; font: 500 8.5px var(--mono); letter-spacing: .1em; opacity: .7; }
.pin.is-soon .poster img, .pin.is-ended .poster img { filter: saturate(.35) brightness(1.04); }
.pin.is-ended .poster img { filter: grayscale(1) opacity(.7); }
.pin.is-soon .poster::after, .pin.is-ended .poster::after, .pin.is-draft .poster::after {
    content: 'COMING SOON'; position: absolute; inset: auto 0 40% 0; text-align: center; padding: 10px 0; transform: rotate(-8deg);
    font: 700 13px var(--mono); letter-spacing: .2em; color: var(--amber-ink); background: rgba(253, 241, 220, .92);
}
.pin.is-ended .poster::after { content: 'TAMAT'; color: var(--muted); background: rgba(236, 238, 237, .92); }
.pin.is-draft .poster::after { content: 'DRAFT'; color: var(--coral-ink); background: rgba(253, 232, 227, .92); }

/* Kad detail */
.promo-detail { display: grid; grid-template-columns: 300px minmax(0, 1fr); margin-bottom: 0; overflow: hidden; }
.promo-detail .post-media.poster, .promo-detail .poster { border-radius: 0; border: 0; border-right: 1px solid var(--line); box-shadow: none; }
.promo-detail-body { padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.promo-detail-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.promo-detail-title { font: 700 clamp(22px, 3vw, 26px)/1.15 var(--sans); letter-spacing: -.02em; }
.promo-detail-sub { font-size: 14px; color: var(--muted); margin-top: -6px; }
.promo-detail-cta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }

/* Strip homepage (bawah hero) */
.deal-strip { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 16px 12px 12px; }
.deal-strip-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; text-decoration: none; color: inherit; min-width: 0; }
.deal-strip .thumb { width: 54px; height: 72px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); display: grid; place-items: center; color: var(--coral-ink); font-size: 22px; flex: none; }
.deal-strip .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deal-strip-txt { min-width: 0; }
.deal-strip h3 { font: 600 15px/1.25 var(--sans); margin-top: 2px; overflow-wrap: anywhere; }
.deal-strip p { font-size: 12.5px; color: var(--muted); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.deal-strip-acts { display: flex; gap: 10px; align-items: center; flex: none; }
.deal-strip .btn-sm { height: 36px; font-size: 12px; padding: 0 12px; }

/* Responsive promo */
@media (max-width: 820px) {
    .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
    .promo-detail { grid-template-columns: 1fr; }
    .promo-detail .post-media.poster, .promo-detail .poster { border-right: 0; border-bottom: 1px solid var(--line); max-width: 420px; margin: 0 auto; width: 100%; }
}
@media (max-width: 600px) {
    .board { padding: 22px 16px 18px; }
    .wall { gap: 22px 14px; }
    .pin .price-tag { right: -4px; top: 12px; font-size: 12px; padding: 5px 8px; }
    .pin-cap { flex-direction: column; align-items: flex-start; gap: 2px; }
    .promo-detail-body { padding: 18px 16px; }
    .promo-detail-cta .btn { flex: 1 1 auto; justify-content: center; }
    .deal-strip { grid-template-columns: 1fr; gap: 12px; }
    .deal-strip-acts { justify-content: space-between; width: 100%; }
    .deal-strip-acts .link-mono { display: none; }
}
@media (max-width: 400px) {
    .wall { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; }
}

/* ============ 23. Promo — sticker pin homepage hero (3 Oct 2026) ============ */
/* Touchpoint TAMBAHAN promo di penjuru hero — wujud SERENTAK dengan
   .deal-strip (keputusan Hafiz: dua-dua). Markup/kontrak penuh: rujuk
   renderPromoSticker() dalam includes/promo.php.

   .hero-shell TIADA overflow:hidden (lain dari .card base class) — ini
   sengaja, supaya .pin-sticker boleh "poke" keluar atas tepi kad .hero
   tanpa kena potong. Mockup awal letak sticker sebagai anak terus dalam
   .hero dan ia kena clip oleh .card{overflow:hidden} — fix: sticker jadi
   SIBLING .hero di dalam .hero-shell, bukan anak. */
.hero-shell { position: relative; }
.pin-sticker {
    position: absolute; top: -14px; right: 36px; width: 168px; z-index: 5;
    transform: rotate(-3deg); transition: transform .15s ease;
}
.pin-sticker:hover { transform: rotate(-1deg) translateY(-2px); }
.pin-sticker.is-dismissed { display: none; }
.pin-sticker-tape {
    position: absolute; top: -8px; left: 50%; width: 54px; height: 16px;
    transform: translateX(-50%) rotate(-4deg); background: rgba(245, 165, 36, .75);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1); z-index: 3;
}
.pin-sticker-card {
    position: relative; display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center;
    background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
    padding: 8px; text-decoration: none; color: inherit;
}
.pin-sticker-card::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; border-radius: 10px 0 0 10px;
    background: linear-gradient(180deg, var(--teal), var(--coral));
}
.pin-sticker .thumb {
    width: 32px; height: 42px; border-radius: 6px; overflow: hidden; flex: none;
    border: 1px solid var(--line); background: var(--panel-2); display: grid; place-items: center; color: var(--coral-ink);
}
.pin-sticker .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pin-sticker-kicker {
    font: 700 8.5px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--teal);
    display: flex; align-items: center; gap: 4px;
}
.pin-sticker-kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px var(--coral-soft); flex: none; }
.pin-sticker-title { font: 600 12px/1.25 var(--sans); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pin-sticker-close {
    position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%; padding: 0; border: 0;
    background: rgba(29, 42, 48, .08); color: var(--muted); font: 700 10px/16px var(--sans); text-align: center; cursor: pointer; z-index: 4;
}
.pin-sticker-close:hover { background: rgba(29, 42, 48, .16); }

@media (max-width: 820px) {
    .pin-sticker { display: none; } /* overlap dgn stat pulse terlalu riskan di skrin sempit/mobile; .deal-strip tetap nampak */
}

/* ============================================================
   §24. Module /links (Linktree-style, 15 Oct 2026) — layout "A3 Grouped
   Panels": item dikumpul 3 panel ikut type (Guna Sendiri/Servis/Affiliate).
   Reuse token sedia ada (--teal*, --amber*, --line, --muted*) — tiada
   warna baru. Asal dari mockup-pilihan-v2.html (konsep A, pusingan ke-2).
   ============================================================ */
.links-profile { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
.links-profile .avatar { width: 64px; height: 64px; flex-shrink: 0; border-radius: 16px; overflow: hidden; }
.links-profile .avatar svg { width: 100%; height: 100%; display: block; }
.links-profile h2 { font: 700 20px var(--sans); letter-spacing: -.01em; }
.links-profile p { color: var(--muted); font-size: 13px; margin-top: 2px; }
.links-divider { height: 1px; background: var(--line); margin: 16px 0 0; }

.ba-item {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.ba-item:last-child { border-bottom: 0; }
.ba-icon {
    width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--teal-soft); color: var(--teal); font-size: 19px;
    overflow: hidden;
}
.ba-icon-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-body { flex: 1; min-width: 0; }
.ba-body h3 { font: 600 14.5px var(--sans); }
.ba-body p { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.ba-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ba-price { font: 700 12px var(--mono); color: var(--teal); white-space: nowrap; }
.ba-cta {
    display: inline-flex; align-items: center; gap: 5px;
    height: 34px; padding: 0 12px; border-radius: 8px;
    background: var(--teal); color: #fff; text-decoration: none;
    font: 600 12px var(--sans); white-space: nowrap;
}
.ba-cta:hover { background: #125f58; }

.tag-type {
    display: inline-flex; align-items: center; gap: 4px;
    font: 600 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 5px; white-space: nowrap; margin-top: 4px;
}
.tag-own { background: var(--teal-soft); color: var(--teal); }
.tag-service { background: var(--line); color: var(--muted); }
.tag-affiliate { background: var(--amber-soft); color: var(--amber-ink); }

.panel { margin: 18px 0 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 18px; border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.panel-head-lead { display: flex; align-items: center; gap: 7px; }
.panel-ico {
    width: 18px; height: 18px; border-radius: 5px; display: flex; align-items: center;
    justify-content: center; font-size: 10px;
}
.panel-own .panel-ico { background: var(--teal-soft); color: var(--teal); }
.panel-service .panel-ico { background: var(--line); color: var(--muted); }
.panel-affiliate .panel-ico { background: var(--amber-soft); color: var(--amber-ink); }
.panel-head h4 { font: 700 13.5px var(--sans); }
.panel-cnt { font: 500 11px var(--mono); color: var(--muted-2); }
.panel-foot {
    padding: 8px 18px; font: 500 10.5px var(--sans); color: var(--muted);
    border-top: 1px dashed var(--line); font-style: italic; background: var(--panel-2);
}

@media (max-width: 560px) {
    .ba-item { flex-wrap: wrap; }
    .ba-right { width: 100%; justify-content: space-between; padding-left: 56px; margin-top: -4px; }
}


/* ============ 21. Blog — Komen (17 Oct 2026) ============
   Reuse .card/.term/.divider/.empty-state/.feed-flash sedia ada untuk
   struktur; set baru ni cuma untuk avatar/senarai komen + borang (nama,
   email, komen, status Google sign-in). */
.comments-section { margin-top: 20px; }
.comments-body { padding: 20px 22px 22px; }
.comment-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 4px; }
.comment-item { display: flex; gap: 12px; }
.comment-avatar {
    width: 36px; height: 36px; border-radius: 50%; background: var(--teal); color: #fff;
    display: flex; align-items: center; justify-content: center; font: 700 13px var(--sans); flex-shrink: 0;
}
.comment-avatar.guest { background: var(--muted-2); }
.comment-body-wrap { flex: 1; min-width: 0; }
.comment-head-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; margin-bottom: 3px; }
.comment-name { font-weight: 600; }
.comment-google-chip {
    font: 600 9px var(--mono); letter-spacing: .06em; text-transform: uppercase;
    background: var(--teal-soft); color: var(--teal); padding: 2px 6px; border-radius: 5px;
}
.comment-time { color: var(--muted-2); font: 500 11px var(--mono); }
.comment-text { font-size: 14px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }

.comment-form label {
    display: block; font: 600 11px var(--mono); letter-spacing: .04em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 5px;
}
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea {
    width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; padding: 9px 12px;
    font: 13.5px var(--sans); color: var(--ink); background: #fff; outline: none; margin-bottom: 12px;
}
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--teal-2); box-shadow: 0 0 0 3px var(--teal-soft); }
.comment-form textarea { resize: vertical; min-height: 90px; }
.comment-form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.comment-guest-note { font-size: 11px; color: var(--muted-2); margin: -6px 0 12px; }
/* Honeypot — disorok dari manusia, bot auto-fill nampak ia macam field biasa. */
.comment-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* .comment-google-box/.comment-google-status/.or-row DIBUANG (17 Oct 2026,
   round 5 cleanup) -- borang Google Sign-In dah tiada dalam blog.php sejak
   round 4, 3 class ni zero rujukan. .comment-google-chip DIKEKALKAN (masih
   dipapar untuk komen lama auth_type='google', rujuk blog.php). */

@media (max-width: 600px) {
    .comment-form-row2 { grid-template-columns: 1fr; }
}


/* ============ Komen -- reply admin/owner (17 Oct 2026) ============ */
.comment-avatar.admin { background: var(--ink); }
.comment-admin-chip {
    font: 600 9px var(--mono); letter-spacing: .06em; text-transform: uppercase;
    background: var(--coral-soft); color: var(--coral-ink); padding: 2px 6px; border-radius: 5px;
}
.comment-admin-replyas {
    font-size: 13px; color: var(--muted); margin: 0 0 12px;
}
.comment-admin-replyas b { color: var(--ink); }

/* ============ Komen -- reply/thread (17 Oct 2026) ============
   Satu aras indent sahaja (rujuk docblock includes/comments.php) -- balasan
   diletak dalam .comment-replies dengan garis menegak kiri (border-left),
   avatar lebih kecil. Borang reply dikongsi SATU per thread (blog.php
   renderCommentReplyForm()), toggle .is-open via JS. Reka bentuk sepadan
   mockup yang dihantar dalam chat 17 Oct 2026. */
.comment-actions { display: flex; gap: 14px; margin-top: 2px; }
.comment-reply-btn {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: 600 11px var(--mono); letter-spacing: .04em; text-transform: uppercase;
    color: var(--muted); display: inline-flex; align-items: center; gap: 5px;
}
.comment-reply-btn:hover { color: var(--teal); }

.comment-replies {
    margin-top: 14px; margin-left: 18px; padding-left: 26px;
    border-left: 2px solid var(--line);
    display: flex; flex-direction: column; gap: 14px;
}
.comment-replies .comment-avatar { width: 30px; height: 30px; font-size: 11px; }
.comment-replies .comment-item { gap: 10px; }

.comment-replies-toggle {
    margin-top: 14px; margin-left: 18px; background: none; border: 0; padding: 0; cursor: pointer;
    font: 600 11px var(--mono); letter-spacing: .04em; color: var(--teal); display: flex; align-items: center; gap: 5px;
}
.comment-replies-toggle:hover { text-decoration: underline; }

.comment-reply-form {
    margin-top: 14px; margin-left: 18px; padding: 14px 16px;
    background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
    display: none;
}
.comment-reply-form.is-open { display: block; }
.comment-reply-form textarea {
    width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; padding: 9px 12px;
    font: 13.5px var(--sans); color: var(--ink); background: #fff; outline: none; resize: vertical;
    min-height: 64px; margin-bottom: 8px;
}
.comment-reply-form textarea:focus { border-color: var(--teal-2); box-shadow: 0 0 0 3px var(--teal-soft); }
.comment-reply-form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.comment-reply-form input[type="text"], .comment-reply-form input[type="email"] {
    width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 10px;
    font: 13px var(--sans); color: var(--ink); background: #fff; outline: none;
}
.comment-reply-form-actions { display: flex; gap: 8px; align-items: center; }

@media (max-width: 600px) {
    .comment-reply-form-row2 { grid-template-columns: 1fr; }
    .comment-replies, .comment-reply-form, .comment-replies-toggle { margin-left: 8px; padding-left: 14px; }
}

/* ============ Komen -- emoji picker (17 Oct 2026) ============
   SATU popover dikongsi (blog.php #emoji-popover), posisi fixed ikut butang
   diklik (JS). Grid ringkas, tiada library luar. */
.comment-field-head {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px;
}
.comment-field-head label { margin-bottom: 0; }
.comment-field-head-sm { justify-content: flex-end; margin-bottom: 6px; }
.comment-emoji-btn {
    background: none; border: 1px solid var(--line-strong); border-radius: 7px; cursor: pointer;
    width: 28px; height: 28px; font-size: 15px; line-height: 1; display: inline-flex;
    align-items: center; justify-content: center; padding: 0; color: var(--ink);
}
.comment-emoji-btn:hover { background: var(--teal-softer); border-color: var(--teal-2); }

.emoji-popover {
    display: none; position: fixed; z-index: 60; width: 236px;
    background: #fff; border: 1px solid var(--line-strong); border-radius: 12px;
    box-shadow: var(--shadow-sm, 0 6px 18px rgba(29,42,48,.12)); padding: 8px;
}
.emoji-popover.is-open { display: block; }
.emoji-popover-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 220px; overflow-y: auto; }
.emoji-popover-item {
    background: none; border: 0; border-radius: 6px; cursor: pointer; font-size: 18px;
    line-height: 1; padding: 6px 0; display: flex; align-items: center; justify-content: center;
}
.emoji-popover-item:hover { background: var(--teal-softer); }