/* Portal additions: type scale, account link, footer social icons, share dialog, comments,
   sign-in and registration, visitor panel, and admin filters. Loaded after every other stylesheet. */

/* ---------- Type scale for page titles ---------- */
:root { --accent-new:#3b82f6; --accent-new-strong:#2563eb; --title-hero:clamp(30px,3.7vw,48px); --title-page:clamp(26px,2.6vw,36px); --title-section:24px; }
.migrated-hero .hero-headline-large { font-size:var(--title-hero); line-height:1.12; }
.migrated-detail { --subtitle-size:15px; }
.migrated-detail .article-subtitle { font-size:var(--subtitle-size); line-height:1.55; }
.migrated-detail .article-title-lg { font-size:calc(var(--subtitle-size) * 3); line-height:1.15; max-width:none; }
@media(max-width:600px){ .migrated-detail { --subtitle-size:13px; } }
/* The breadcrumb sits right above the title. */
.migrated-detail .breadcrumb-trail { margin-bottom:6px; }
.migrated-detail .article-header { padding-top:0; margin:0 0 22px; }
.migrated-detail .article-title-lg { margin:0 0 14px; }
/* Every article cover is 16:9 on every screen. */
.article-cover > img { aspect-ratio:16/9; width:100%; height:auto; max-height:none; object-fit:cover; }
.community-content h1,.account-card h1 { font-size:var(--title-page); font-weight:400; line-height:1.2; letter-spacing:-.02em; margin:8px 0 0; }
.spotlight-lead h2 { font-size:clamp(24px,2.4vw,32px); }
.archive-heading h2,.community-content h2,.related-stories h2,.comments-section h2 { font-size:var(--title-section); }

:root[data-theme="light"] { --accent-new:#2563eb; --accent-new-strong:#1d4ed8; }

/* ---------- Header account link ---------- */
/* Header buttons share one size; the account menu matches them. */
.site-header .nav-actions > .btn-bone,.site-header .nav-actions > .nav-account-link,.site-header .nav-actions .account-trigger { display:inline-flex; align-items:center; justify-content:center; gap:8px; box-sizing:border-box; height:40px; min-height:40px; min-width:164px; padding:0 16px; font-size:13px; line-height:1; white-space:nowrap; text-decoration:none; border-radius:10px; }
.site-header .nav-actions > .nav-account-link[hidden] { display:none; }
.nav-account-item { display:none; }
.nav-logout { width:100%; text-align:left; background:none; border:0; cursor:pointer; }
.account-menu { position:relative; }
.account-trigger { color:var(--color-snow); background:var(--surface-soft-fill); border:var(--border-hairline); cursor:pointer; }
.account-trigger:hover { border:var(--border-hairline-hover); }
.account-avatar { display:grid; place-items:center; flex:0 0 auto; width:26px; height:26px; overflow:hidden; font-size:11px; color:var(--color-fog); background:var(--surface-charcoal); border-radius:50%; }
.account-avatar img { width:100%; height:100%; object-fit:cover; }
.account-name { max-width:130px; overflow:hidden; text-overflow:ellipsis; }
.account-caret { color:var(--color-fog); }
.account-dropdown { position:absolute; right:0; top:calc(100% + 8px); z-index:60; display:grid; min-width:190px; padding:6px; background:var(--surface-graphite); border:var(--border-hairline); border-radius:12px; box-shadow:var(--elevation-panel); }
.account-dropdown[hidden] { display:none; }
.account-dropdown a,.account-dropdown button { padding:10px 12px; color:var(--color-chalk); text-align:left; text-decoration:none; background:none; border:0; border-radius:8px; cursor:pointer; font-size:14px; }
.account-dropdown a:hover,.account-dropdown button:hover { color:var(--color-snow); background:var(--surface-charcoal); }
@media(max-width:960px){ .site-header .nav-actions > .nav-account-link,.site-header .nav-actions > .btn-bone,.account-menu { display:none; } .nav-account-item { display:block; } }

/* ---------- Footer social links ---------- */
/* Footer column headings are larger than the links under them. */
.site-footer .contact-footer-grid h3 { margin:0 0 12px; font-size:16px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--color-snow); }
.site-footer .contact-footer-grid a { font-size:13px; }
.footer-social { display:grid; gap:0; }
.footer-social .social-link { display:flex; align-items:center; gap:10px; margin:0; padding:2px 0; text-decoration:none; }
.footer-social .social-link svg { flex:0 0 auto; color:var(--color-fog); transition:color .15s; }
.footer-social .social-link:hover svg { color:var(--color-snow); }
.footer-legal-text a { color:inherit; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Share dialog ---------- */
.share-dialog { width:min(920px,calc(100% - 28px)); max-height:92dvh; margin:auto; padding:26px; color:var(--color-snow); background:var(--surface-graphite); border:var(--border-hairline); border-radius:16px; box-shadow:var(--elevation-panel); overflow:auto; }
.share-dialog::backdrop { background:#000c; }
.share-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
.share-head h2 { margin:6px 0 0; font-size:var(--title-page); }
.share-layout { display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:26px; align-items:start; }
.share-preview canvas { display:block; width:auto; height:auto; max-width:100%; max-height:60dvh; margin:0 auto; background:#101010; border:var(--border-hairline); border-radius:8px; }
.share-format { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:0 0 12px; padding:4px; background:var(--surface-charcoal); border-radius:10px; }
.share-format-btn { min-height:36px; color:var(--color-fog); background:none; border:0; border-radius:8px; cursor:pointer; font-size:13px; }
.share-format-btn.active { color:var(--color-snow); background:var(--surface-graphite); box-shadow:var(--shadow-sm); }
.share-preview small { display:block; margin-top:8px; color:var(--color-fog); }
.share-side { display:grid; gap:16px; min-width:0; }
.share-side label { display:grid; gap:8px; }
.share-side textarea { width:100%; padding:12px; color:var(--color-snow); background:var(--surface-charcoal); border:var(--border-hairline); border-radius:8px; resize:none; font-size:14px; line-height:1.5; }
.share-tools { display:flex; flex-wrap:wrap; gap:8px; }
.share-subhead { margin:4px 0 -6px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--color-steel); font-weight:500; }
.share-networks { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; }
.share-network { min-height:44px; padding:10px 12px; color:var(--color-snow); background:var(--surface-soft-fill); border:var(--border-hairline); border-radius:10px; cursor:pointer; font-size:14px; }
.share-network:hover { border:var(--border-hairline-hover); }
.share-status { margin:0; min-height:1.4em; color:var(--color-fog); font-size:14px; }
@media(max-width:760px){ .share-layout { grid-template-columns:1fr; } .share-preview { max-width:320px; } .share-dialog { padding:20px; } }

/* ---------- Comments ---------- */
.comments-section { margin:48px 0 8px; padding-top:32px; border-top:var(--border-hairline); }
.comment-list { display:grid; gap:0; margin:18px 0 24px; }
.comment-item { padding:16px 0; border-bottom:var(--border-hairline); }
.comment-meta { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; }
.comment-meta small { color:var(--color-steel); }
.comment-item p { margin:8px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--color-chalk); line-height:1.65; }
.comment-delete { margin-left:auto; padding:4px 8px; color:var(--color-fog); background:none; border:0; cursor:pointer; font-size:12px; }
.comment-delete:hover { color:var(--color-coral); }
.comment-empty,.comment-note,.comment-error { color:var(--color-fog); }
.comment-error,.comment-note { min-height:1.4em; }
.comment-form { display:grid; gap:12px; max-width:720px; }
.comment-form label { display:grid; gap:8px; }
.comment-form textarea { width:100%; padding:13px; color:var(--color-snow); background:var(--surface-graphite); border:var(--border-hairline); border-radius:8.77px; resize:vertical; font-size:15px; }
.comment-form .btn-bone { justify-self:start; }
.comment-gate .btn-bone,.comment-gate .btn-ghost { display:inline-flex; align-items:center; text-decoration:none; }
.comment-gate p { display:inline; margin:0 8px 0 0; color:var(--color-fog); }

/* ---------- Sign in and registration ---------- */
.account-card { max-width:560px; margin:0 auto; padding:32px; }
.account-card > p,.account-card [data-panel] > p { color:var(--color-fog); }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:20px 0 22px; padding:4px; background:var(--surface-charcoal); border-radius:10px; }
.auth-tabs button { min-height:40px; color:var(--color-fog); background:none; border:0; border-radius:8px; cursor:pointer; font-size:14px; }
.auth-tabs button[aria-selected="true"] { color:var(--color-snow); background:var(--surface-graphite); box-shadow:var(--shadow-sm); }
.form-pair { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-pair label,.account-card form label { display:grid; gap:7px; }
.account-switch,.account-footnote { font-size:14px; }
.account-card [data-panel="done"],.account-card [data-panel="member"] { display:grid; gap:14px; justify-items:start; }
.account-card [data-panel="done"] .btn-bone,.account-card [data-panel="done"] .btn-ghost,.account-card [data-panel="member"] a,.account-card [data-panel="member"] button { display:inline-flex; align-items:center; text-decoration:none; }
@media(max-width:600px){ .form-pair { grid-template-columns:1fr; } .account-card { padding:22px; } }

/* ---------- Status chips and action buttons (visitor and admin panels) ---------- */
.status-chip { display:inline-block; padding:3px 10px; font-size:12px; font-weight:500; border-radius:999px; background:var(--surface-soft-fill); color:var(--color-fog); }
.status-published { color:var(--color-fern); background:color-mix(in srgb,var(--color-fern) 16%,transparent); }
.status-pending { color:var(--color-ember); background:color-mix(in srgb,var(--color-ember) 16%,transparent); }
.status-changes { color:var(--color-coral); background:color-mix(in srgb,var(--color-coral) 16%,transparent); }
.status-draft { color:var(--color-fog); }
.btn-new,.btn-acc { display:inline-flex; align-items:center; justify-content:center; padding:8px 18px; color:#fff; border:0; border-radius:10px; cursor:pointer; font-size:14px; text-decoration:none; }
.btn-new { background:var(--accent-new); }
.btn-acc { background:var(--color-fern); }
.btn-new:hover,.btn-acc:hover { filter:brightness(1.1); }
.btn-new:disabled,.btn-acc:disabled { opacity:.5; cursor:not-allowed; }

/* ---------- Visitor panel ---------- */
.warga-nav { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 24px; padding:10px; background:var(--surface-graphite); border:var(--border-hairline); border-radius:12px; }
.warga-nav a { padding:10px 16px; color:var(--color-fog); text-decoration:none; border-radius:8px; font-size:14px; }
.warga-nav a:hover,.warga-nav a[aria-current="page"] { color:var(--color-snow); background:var(--surface-charcoal); }
.warga-nav a.warga-nav-new { color:#fff; background:var(--accent-new); font-weight:500; }
.warga-nav a.warga-nav-new:hover,.warga-nav a.warga-nav-new[aria-current="page"] { color:#fff; background:var(--accent-new-strong); }
.warga-nav [data-logout] { margin-left:auto; }
.warga-banner { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:0 0 20px; padding:16px 20px; color:var(--color-snow); background:color-mix(in srgb,var(--color-ember) 12%,var(--surface-graphite)); border:0.5px solid color-mix(in srgb,var(--color-ember) 45%,transparent); border-radius:12px; }
.warga-banner .btn-bone { text-decoration:none; }
.warga-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:8px 0 22px; }
.warga-stat { padding:20px; background:var(--surface-graphite); border:var(--border-hairline); border-radius:12px; }
.warga-stat strong { display:block; font-size:32px; font-weight:400; letter-spacing:-.02em; color:var(--color-snow); }
.warga-stat span { color:var(--color-fog); font-size:14px; }
.warga-cta { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 34px; padding:22px 26px; color:#fff; background:var(--accent-new); border-radius:14px; text-decoration:none; }
.warga-cta strong { display:block; font-size:20px; font-weight:500; }
.warga-cta small { display:block; margin-top:4px; opacity:.85; font-size:14px; }
.warga-cta > span:last-child { flex:0 0 auto; padding:10px 18px; background:#ffffff26; border-radius:10px; font-weight:500; }
.warga-cta:hover { background:var(--accent-new-strong); }
.warga-item { padding:22px 24px; margin:0 0 14px; background:var(--surface-graphite); border:var(--border-hairline); border-radius:12px; overflow-wrap:anywhere; }
.warga-item h3 { margin:12px 0 4px; font-size:20px; font-weight:400; line-height:1.3; }
.warga-item-head { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; }
.warga-item-head small { color:var(--color-steel); }
.warga-feedback { margin:10px 0 0; padding:10px 14px; color:var(--color-snow); background:color-mix(in srgb,var(--color-coral) 10%,transparent); border-radius:8px; }
.warga-toolbar { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.warga-toolbar .btn-ghost { display:inline-flex; align-items:center; text-decoration:none; }
.warga-empty,.warga-note { color:var(--color-fog); }
.warga-panel .archive-tools { margin:0 0 18px; }
.warga-form { display:grid; gap:18px; max-width:820px; }
.warga-form fieldset { display:grid; gap:18px; margin:0; padding:0; border:0; min-width:0; }
.warga-form label { display:grid; gap:7px; }
.warga-form-new { padding:28px; background:var(--surface-graphite); border:0.5px solid color-mix(in srgb,var(--accent-new) 55%,transparent); border-top:3px solid var(--accent-new); border-radius:12px; }
.warga-photo { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:end; }
.warga-photo img { grid-column:1 / -1; max-width:360px; border-radius:8px; }
.warga-photo .editor-image-button { display:inline-flex; align-items:center; justify-content:center; width:fit-content; padding:10px 16px; background:var(--surface-soft-fill); border:var(--border-hairline); border-radius:10px; cursor:pointer; }
.warga-profile { display:grid; grid-template-columns:260px minmax(0,1fr); gap:28px; align-items:start; }
.warga-card { display:grid; gap:14px; justify-items:start; padding:24px; background:var(--surface-graphite); border:var(--border-hairline); border-radius:12px; }
.warga-avatar { display:grid; place-items:center; width:120px; height:120px; overflow:hidden; font-size:36px; color:var(--color-fog); background:var(--surface-charcoal); border-radius:50%; }
.warga-avatar img { width:100%; height:100%; object-fit:cover; }
.warga-facts { display:grid; gap:2px; margin:0; font-size:14px; }
.warga-facts dt { margin-top:10px; color:var(--color-steel); }
.warga-facts dd { margin:0; overflow-wrap:anywhere; }
@media(max-width:820px){ .warga-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .warga-profile { grid-template-columns:1fr; } .warga-photo { grid-template-columns:1fr; } .warga-form-new { padding:20px; } .warga-cta { flex-direction:column; align-items:flex-start; } }

/* ---------- Admin additions ---------- */
.admin-filters { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:14px; margin:0 0 18px; }
.admin-filters label { display:grid; align-content:start; gap:7px; margin:0; }
.admin-post-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.admin-post-head small,.admin-preview-meta { color:var(--color-steel); }
.admin-post-note { color:var(--color-coral)!important; }
.admin-preview-image { display:block; max-width:100%; max-height:320px; margin:14px 0; border-radius:8px; }
.admin-alert { border-color:color-mix(in srgb,var(--color-ember) 50%,transparent)!important; }
.picks-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.picks-form { display:grid; gap:16px; max-width:820px; }
.picks-form label { display:grid; gap:7px; }
.category-manager { display:grid; gap:18px; }
.category-card { display:grid; gap:16px; }
.category-card-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.category-card-head h2 { margin:0; }
.category-card-head small { color:var(--color-steel); }
.category-chips { display:flex; flex-wrap:wrap; gap:8px; }
.category-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; font-size:14px; background:var(--surface-soft-fill); border:var(--border-hairline); border-radius:999px; }
.category-chip.custom { border-color:color-mix(in srgb,var(--accent-new) 55%,transparent); }
.category-chip-remove { padding:0 2px; color:var(--color-fog); background:none; border:0; cursor:pointer; font-size:16px; line-height:1; }
.category-chip-remove:hover { color:var(--color-coral); }
.community-content .category-add { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.community-content .category-add input { flex:1 1 220px; width:auto; }
.pending-accounts { margin:0 0 34px; padding:22px; background:color-mix(in srgb,var(--color-ember) 8%,var(--surface-graphite)); border:0.5px solid color-mix(in srgb,var(--color-ember) 40%,transparent); border-radius:14px; }
.pending-card { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.pending-card h3,.pending-card p { margin:0; }
.admin-author-item { display:flex; align-items:center; gap:10px; }
.admin-author-item .admin-author-row { flex:1 1 auto; }
@media(max-width:820px){ .admin-filters { grid-template-columns:1fr 1fr; } .admin-filters .admin-search { grid-column:1 / -1; } }

/* ---------- Photo caption (keterangan) and attribution, under every photo ---------- */
.article-cover { overflow:visible; background:none; }
.article-cover > img { border-radius:14px; }
.article-cover figcaption,.article-cover-credit,.migrated-body figcaption,.admin-preview-figure figcaption { position:static; display:block; max-width:none; padding:10px 2px 0; color:var(--color-fog); background:none; border-radius:0; font-size:13px; line-height:1.5; }
.cap-text,.fig-caption { display:block; color:var(--color-chalk); }
.cap-credit,.fig-credit { display:block; font-size:12px; color:var(--color-steel); }
.migrated-body figure { margin:1.6em 0; }
.migrated-body figure img { display:block; width:100%; height:auto; border-radius:10px; }
.migrated-body blockquote { margin:1.4em 0; padding:2px 0 2px 18px; }
.admin-preview-figure { margin:14px 0; }
.admin-preview-figure img { display:block; max-width:100%; max-height:320px; border-radius:8px; }

/* ---------- Rich text editor ---------- */
.rich-field { display:grid; gap:7px; min-width:0; }
.rich-label { font-size:14px; }
.rich-toolbar { display:flex; flex-wrap:wrap; gap:4px; padding:8px; background:var(--surface-charcoal); border:var(--border-hairline); border-radius:10px 10px 0 0; }
.rich-btn { min-width:36px; height:34px; padding:0 10px; color:var(--color-snow); background:var(--surface-graphite); border:var(--border-hairline); border-radius:6px; cursor:pointer; font-size:13px; }
.rich-btn:hover { border:var(--border-hairline-hover); }
.rich-btn:disabled { opacity:.45; cursor:not-allowed; }
.rich-btn[hidden] { display:none; }
.rich-figure { color:#fff; background:var(--accent-new); border-color:transparent; }
.rich-bold { font-weight:700; } .rich-italic { font-style:italic; } .rich-underline { text-decoration:underline; }
.rich-body { min-height:320px; max-height:70dvh; overflow:auto; padding:18px 20px; background:var(--surface-graphite); border:var(--border-hairline); border-top:0; border-radius:0 0 10px 10px; outline:none; font-size:16px; line-height:1.75; }
.rich-body:focus { box-shadow:var(--shadow-subtle-3); }
.rich-body:empty::before,.rich-body p:only-child:has(> br:only-child)::before { content:attr(data-placeholder); color:var(--color-steel); }
.rich-body figure.selected { outline:2px solid var(--accent-new); outline-offset:4px; border-radius:6px; }
.rich-body figure { cursor:pointer; }
.rich-body h2 { font-size:26px; } .rich-body h3 { font-size:21px; }
.rich-body p { margin:0 0 1em; }

/* ---------- Notifications, badge, crop and message dialogs ---------- */
.nav-badge { display:inline-grid; place-items:center; min-width:18px; height:18px; margin-left:4px; padding:0 5px; color:#fff; background:var(--accent-new); border-radius:999px; font-size:11px; font-weight:600; }
.nav-badge[hidden] { display:none; }
.notification.unread { border-color:var(--accent-new); }
.notification-body { margin:6px 0 0; color:var(--color-chalk); white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; }
.notify-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start; }
.notify-modes { display:flex; gap:18px; margin-bottom:8px; }
.notify-modes label { display:flex; align-items:center; gap:8px; }
.notify-modes input { width:auto; }
#notify-user { width:100%; margin-top:6px; }
@media(max-width:820px){ .notify-layout { grid-template-columns:1fr; } }
.crop-dialog { width:min(420px,calc(100% - 28px)); padding:24px; color:var(--color-snow); background:var(--surface-graphite); border:var(--border-hairline); border-radius:16px; box-shadow:var(--elevation-panel); }
.crop-dialog::backdrop { background:#000c; }
.crop-dialog h2 { margin:0 0 6px; font-size:22px; }
.crop-stage { position:relative; width:320px; max-width:100%; margin:14px auto; touch-action:none; }
.crop-stage canvas { display:block; cursor:grab; background:#111; border-radius:8px; }
.crop-guide { position:absolute; inset:0; pointer-events:none; border-radius:50%; box-shadow:0 0 0 999px #0009,inset 0 0 0 2px #fff; }
.crop-stage { overflow:hidden; border-radius:8px; }
.crop-dialog label { display:grid; gap:6px; margin-bottom:14px; }
.message-preview { width:100%; margin:8px 0 14px; padding:12px; color:var(--color-snow); background:var(--surface-charcoal); border:var(--border-hairline); border-radius:8px; font-size:14px; line-height:1.5; }
.pending-card.approved { border-color:var(--color-fern); }

/* ---------- Template forms (video, berita foto, rekomendasi) ---------- */
[data-kinds][hidden] { display:none !important; }
.form-stack { display:grid; gap:18px; }
.gallery-editor { display:grid; gap:12px; }
.gallery-list { display:grid; gap:12px; }
.gallery-item { position:relative; display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:14px; align-items:start; padding:12px; background:var(--surface-charcoal); border:var(--border-hairline); border-radius:10px; }
.gallery-item img { width:120px; aspect-ratio:16/9; object-fit:cover; border-radius:6px; background:#111; }
.gallery-fields { display:grid; gap:8px; min-width:0; }
.gallery-fields input { width:100%; }
.gallery-tools { display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start; }
.gallery-tools .btn-ghost { padding:6px 10px; font-size:13px; }
.gallery-badge { position:absolute; top:-9px; left:12px; padding:2px 8px; color:#fff; background:var(--accent-new); border-radius:999px; font-size:11px; }
.blocks-editor { display:grid; gap:16px; }
.blocks-list { display:grid; gap:16px; }
.block-card { display:grid; gap:12px; padding:18px; background:var(--surface-graphite); border:0.5px solid color-mix(in srgb,var(--accent-new) 45%,transparent); border-left:3px solid var(--accent-new); border-radius:12px; }
.block-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.block-buttons { display:grid; gap:8px; }
.block-button-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto; gap:8px; }
.check-row { display:flex; align-items:center; gap:8px; }
.check-row input { width:auto; }
@media(max-width:700px){ .gallery-item { grid-template-columns:1fr; } .gallery-item img { width:100%; } .block-button-row { grid-template-columns:1fr; } }

/* ---------- Photo slider, embeds and recommendation blocks (reader) ---------- */
.slider { position:relative; margin:0 0 28px; }
.slider-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; border-radius:14px; cursor:grab; }
.slider-track::-webkit-scrollbar { display:none; }
.slider-track.dragging { scroll-snap-type:none; cursor:grabbing; user-select:none; }
.slide { flex:0 0 100%; margin:0; scroll-snap-align:center; }
.slide img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:14px; background:var(--surface-charcoal); user-select:none; -webkit-user-drag:none; }
.slide figcaption { padding:10px 2px 0; font-size:13px; line-height:1.5; color:var(--color-fog); }
.slider-arrow { position:absolute; top:calc(50% - 44px); width:42px; height:42px; display:grid; place-items:center; color:#fff; background:#000a; border:0; border-radius:50%; cursor:pointer; font-size:26px; line-height:1; }
.slider-arrow:disabled { opacity:.3; cursor:default; }
.slider-prev { left:12px; } .slider-next { right:12px; }
.slider-dots { display:flex; justify-content:center; gap:8px; margin-top:10px; }
.slider-dot { width:9px; height:9px; padding:0; background:var(--color-smoke); border:0; border-radius:50%; cursor:pointer; }
.slider-dot.active { background:var(--color-snow); }
.slider-count { position:absolute; top:12px; right:12px; padding:3px 10px; color:#fff; background:#000a; border-radius:999px; font-size:12px; }
.article-slider-cover { margin-bottom:28px; }
.embed-wrap { margin:0 0 28px; }
.embed-frame { display:block; width:100%; border:0; border-radius:12px; background:var(--surface-charcoal); }
.embed-youtube { aspect-ratio:16/9; }
.embed-instagram { min-height:640px; max-width:540px; margin:0 auto; }
.embed-tiktok { min-height:740px; max-width:340px; margin:0 auto; }
.rec-block { margin:0 0 56px; padding-bottom:40px; border-bottom:var(--border-hairline); }
.rec-block:last-child { border-bottom:0; }
.rec-block h2 { margin:0 0 18px; font-size:28px; }
.rec-buttons { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.rec-button { display:inline-flex; align-items:center; text-decoration:none; }

/* ---------- Ads ---------- */
.ad-wrap { padding-top:8px; padding-bottom:8px; }
.ad-slot { margin:20px auto; max-width:1080px; }
.ad-slot[hidden] { display:none; }
.ad-frame { position:relative; display:block; overflow:hidden; text-decoration:none; background:var(--surface-charcoal); border:var(--border-hairline); border-radius:12px; }
.ad-banner .ad-frame { aspect-ratio:4/1; }
.ad-box { max-width:360px; }
.ad-box .ad-frame,.ad-popup .ad-frame { aspect-ratio:1/1; }
.ad-frame img { display:block; width:100%; height:100%; object-fit:cover; }
.ad-tag { position:absolute; top:8px; left:8px; padding:2px 7px; color:#fff; background:#000b; border-radius:4px; font-size:10px; letter-spacing:.04em; }
.ad-caption { margin:6px 2px 0; color:var(--color-steel); font-size:12px; line-height:1.5; }
.ad-fallback { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:12px; text-align:center; background:none; border:1.5px dashed var(--color-smoke); }
.ad-fallback:hover { border-color:var(--color-steel); }
.ad-fallback-title { color:var(--color-snow); font-size:16px; font-weight:500; }
.ad-fallback-text { color:var(--color-fog); font-size:13px; }
.ad-middle { margin:32px auto; }
.ad-popup { width:min(420px,calc(100% - 28px)); padding:16px; color:var(--color-snow); background:var(--surface-graphite); border:var(--border-hairline); border-radius:16px; box-shadow:var(--elevation-panel); }
.ad-popup::backdrop { background:#000a; }
.ad-popup-close { display:block; margin:0 0 10px auto; padding:6px 12px; color:var(--color-snow); background:var(--surface-charcoal); border:var(--border-hairline); border-radius:8px; cursor:pointer; font-size:13px; }
.ad-popup-close:disabled { color:var(--color-steel); cursor:not-allowed; }
.ads-manager { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.ad-card { display:grid; gap:14px; margin:0; }
.ad-preview { display:grid; place-items:center; overflow:hidden; background:var(--surface-charcoal); border:var(--border-hairline); border-radius:10px; }
.ad-preview-banner { aspect-ratio:4/1; } .ad-preview-box { aspect-ratio:1/1; max-width:260px; }
.ad-preview img { width:100%; height:100%; object-fit:cover; }
@media(max-width:900px){ .ads-manager { grid-template-columns:1fr; } .ad-fallback-title { font-size:14px; } }
.gallery-editor .editor-image-button { width:fit-content; }
.ad-popup { margin:auto; inset:0; }

/* ---------- Old-site comments shown in the same list; About page social links ---------- */
.comment-text { margin:8px 0 0; color:var(--color-chalk); line-height:1.65; overflow-wrap:anywhere; }
.comment-text p { margin:0 0 .6em; }
.about-social { display:flex; flex-wrap:wrap; gap:12px; margin:8px 0 24px; }
.about-social .social-link { display:inline-flex; align-items:center; gap:10px; padding:10px 16px; color:var(--color-snow); text-decoration:none; background:var(--surface-graphite); border:var(--border-hairline); border-radius:10px; }
.about-social .social-link:hover { border:var(--border-hairline-hover); }

/* ---------- Statistics, saved articles ---------- */
.stat-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin:8px 0 22px; }
.stats-range { display:grid; gap:6px; font-size:13px; }
.stats-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:26px 0; }
.stat-table { width:100%; border-collapse:collapse; font-size:14px; }
.stat-table th { text-align:left; padding:8px 10px; color:var(--color-steel); font-weight:500; border-bottom:var(--border-hairline); }
.stat-table td { padding:10px; border-bottom:var(--border-hairline); overflow-wrap:anywhere; }
.stat-table th:not(:first-child),.stat-table td:not(:first-child) { text-align:right; white-space:nowrap; }
.stat-table a { color:var(--color-snow); text-decoration:none; }
.stat-table a:hover { text-decoration:underline; }
.chart { display:block; width:100%; height:auto; color:var(--accent-new); }
.chart-bar { fill:currentColor; opacity:.85; }
.chart-bar:hover { opacity:1; }
.chart-label { fill:var(--color-steel); font-size:11px; }
.warga-card.wide { display:block; margin:0 0 22px; }
.ad-numbers { margin:0; color:var(--color-fog); font-size:13px; }
.article-actions { display:flex; flex-wrap:wrap; gap:8px; }
.save-article-btn.saved { color:var(--accent-new); border-color:var(--accent-new); }
@media(max-width:820px){ .stats-columns { grid-template-columns:1fr; } }

/* ---------- Tentang Kami landing page ---------- */
.about-page { overflow:hidden; }
.about-hero { position:relative; padding:clamp(64px,10vw,130px) 0 clamp(48px,7vw,90px); background:radial-gradient(900px 420px at 15% -10%,color-mix(in srgb,var(--accent-new) 26%,transparent),transparent 70%),radial-gradient(700px 380px at 95% 10%,color-mix(in srgb,var(--color-snow) 10%,transparent),transparent 70%); border-bottom:var(--border-hairline); }
.about-hero-inner > * { max-width:860px; }
.about-hero-inner > .about-tag { max-width:none; }
.about-tag { display:inline-block; padding:6px 14px; margin-bottom:22px; color:var(--color-snow); font-size:13px; letter-spacing:.02em; background:var(--surface-soft-fill); border:var(--border-hairline); border-radius:999px; }
.about-hero h1 { margin:0 0 22px; font-size:clamp(34px,6vw,68px); line-height:1.04; letter-spacing:-.03em; font-weight:400; }
.about-lead { max-width:700px; margin:0 0 30px; color:var(--color-chalk); font-size:clamp(16px,1.6vw,20px); line-height:1.6; }
.about-actions { display:flex; flex-wrap:wrap; gap:12px; }
.about-actions .btn-bone,.about-actions .btn-ghost { display:inline-flex; align-items:center; padding:12px 22px; font-size:15px; text-decoration:none; }
.about-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin-top:-38px; padding:0; width:min(calc(100% - 32px),1080px); position:relative; background:var(--color-smoke); border:var(--border-hairline); border-radius:16px; overflow:hidden; box-shadow:var(--elevation-card); }
.about-stat { display:grid; gap:6px; align-content:start; padding:26px 24px; background:var(--surface-graphite); }
.about-stat strong { font-size:clamp(22px,2.6vw,32px); font-weight:400; letter-spacing:-.02em; }
.about-stat span { color:var(--color-fog); font-size:14px; line-height:1.45; }
.about-split { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,5vw,72px); padding-top:clamp(56px,8vw,100px); padding-bottom:clamp(40px,6vw,72px); }
.about-split h2,.about-web h2,.about-follow h2,.about-company h2,.about-cta h2 { margin:8px 0 0; font-size:clamp(28px,4vw,46px); line-height:1.1; letter-spacing:-.025em; font-weight:400; }
.about-copy p { margin:0 0 1.2em; color:var(--color-chalk); font-size:17px; line-height:1.8; }
.about-web { padding:clamp(48px,7vw,88px) 0; background:var(--surface-charcoal); border-top:var(--border-hairline); border-bottom:var(--border-hairline); }
.about-web-copy { max-width:820px; margin:18px 0 34px; color:var(--color-chalk); font-size:17px; line-height:1.8; }
.about-topics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.about-topic { display:grid; align-content:start; gap:8px; padding:24px; color:var(--color-snow); text-decoration:none; background:var(--surface-graphite); border:var(--border-hairline); border-radius:14px; transition:transform .18s,border-color .18s; }
.about-topic:hover { transform:translateY(-3px); border:var(--border-hairline-hover); }
.about-topic-icon { display:grid; place-items:center; width:48px; height:48px; margin-bottom:8px; color:var(--accent-new); background:color-mix(in srgb,var(--accent-new) 14%,transparent); border-radius:12px; }
.about-topic h3 { margin:0; font-size:20px; font-weight:400; }
.about-topic p { margin:0; color:var(--color-fog); font-size:14px; line-height:1.55; }
.about-topic-more { margin-top:8px; color:var(--color-steel); font-size:13px; }
.about-company { padding-top:clamp(48px,7vw,88px); padding-bottom:clamp(24px,4vw,40px); }
.about-company-card { padding:clamp(28px,5vw,56px); background:linear-gradient(135deg,var(--surface-graphite),var(--surface-charcoal)); border:var(--border-hairline); border-radius:20px; }
.about-company-card p { max-width:760px; margin:18px 0 22px; color:var(--color-chalk); font-size:18px; line-height:1.7; }
.about-pills { display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.about-pills li { padding:8px 16px; font-size:14px; background:var(--surface-soft-fill); border:var(--border-hairline); border-radius:999px; }
.about-follow { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,5vw,72px); align-items:center; padding-top:clamp(40px,6vw,72px); padding-bottom:clamp(40px,6vw,72px); }
.about-page .about-social { margin:0; }
.about-cta { padding-bottom:clamp(56px,8vw,96px); }
.about-cta-card { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; padding:clamp(28px,5vw,52px); background:radial-gradient(600px 260px at 100% 0%,color-mix(in srgb,var(--accent-new) 30%,transparent),transparent 70%),var(--surface-graphite); border:var(--border-hairline); border-radius:20px; }
.about-cta-card p { margin:10px 0 0; color:var(--color-fog); }
@media(max-width:960px){ .about-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .about-topics { grid-template-columns:repeat(2,minmax(0,1fr)); } .about-split,.about-follow { grid-template-columns:1fr; } }
@media(max-width:560px){ .about-topics { grid-template-columns:1fr; } .about-stats { margin-top:-24px; } .about-stat { padding:20px 18px; } }

/* ---------- Sawer (QRIS) ---------- */
.sawer { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px); gap:32px; align-items:center; margin:48px 0 8px; padding:clamp(22px,4vw,36px); background:linear-gradient(135deg,var(--surface-graphite),var(--surface-charcoal)); border:var(--border-hairline); border-radius:18px; }
.sawer h2 { margin:6px 0 10px; font-size:26px; font-weight:400; }
.sawer p { margin:0 0 14px; color:var(--color-chalk); line-height:1.65; }
.sawer-download,.sawer-confirm .btn-new { display:inline-flex; align-items:center; text-decoration:none; }
.sawer-confirm { display:grid; gap:10px; margin:18px 0 12px; padding:16px; background:var(--surface-soft-fill); border:var(--border-hairline); border-radius:12px; }
.sawer-confirm label { display:grid; gap:6px; font-size:14px; }
.sawer-confirm input { width:100%; padding:11px 13px; color:var(--color-snow); background:var(--surface-graphite); border:var(--border-hairline); border-radius:8px; font-size:16px; }
.sawer-chips { display:flex; flex-wrap:wrap; gap:8px; }
.sawer-chip { padding:6px 12px; color:var(--color-snow); background:var(--surface-graphite); border:var(--border-hairline); border-radius:999px; cursor:pointer; font-size:13px; }
.sawer-chip:hover { border:var(--border-hairline-hover); }
.sawer .sawer-note { font-size:14px; color:var(--color-fog); }
.sawer .sawer-foot { margin:0; font-size:13px; color:var(--color-steel); font-style:italic; }
.sawer-qr { margin:0; }
.sawer-qr img { display:block; width:100%; height:auto; border-radius:14px; background:#f8f9fb; }
@media(max-width:760px){ .sawer { grid-template-columns:1fr; } .sawer-qr { order:-1; max-width:300px; margin:0 auto; } }
.edit-article-btn { text-decoration:none; }
/* Like button and the Trending page */
.like-article-btn.liked { color:#ef4444; border-color:#ef4444; }
.trend-fire { display:inline-block; margin-right:2px; }
.trend-hero { padding:clamp(48px,8vw,96px) 0 clamp(28px,4vw,48px); border-bottom:var(--border-hairline); background:radial-gradient(800px 380px at 10% -10%,color-mix(in srgb,#f97316 26%,transparent),transparent 70%); }
.trend-hero h1 { margin:0 0 12px; font-size:var(--title-hero); }
.trend-hero p { max-width:640px; margin:0; color:var(--color-fog); }
.trend-tag { display:inline-block; margin-bottom:18px; padding:6px 14px; font-size:13px; font-weight:600; color:var(--color-snow); background:var(--surface-soft-fill); border:var(--border-hairline); border-radius:999px; }
.trend-grid { display:grid; gap:28px; padding:clamp(28px,4vw,48px) 0 72px; }
.trend-head { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.trend-head h2 { margin:0; font-size:var(--title-section); }
.trend-head p { margin:2px 0 0; color:var(--color-fog); font-size:13px; }
.trend-icon { display:grid; place-items:center; width:44px; height:44px; font-size:20px; background:var(--surface-soft-fill); border:var(--border-hairline); border-radius:12px; }
.trend-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.trend-link { display:grid; grid-template-columns:36px 96px 1fr; align-items:center; gap:14px; padding:10px 14px 10px 10px; color:inherit; text-decoration:none; background:var(--color-graphite); border:var(--border-hairline); border-radius:14px; transition:border-color .15s,transform .15s; }
.trend-link:hover,.trend-link:focus-visible { border-color:var(--accent-new); transform:translateY(-1px); }
.trend-rank { font-size:24px; font-weight:700; text-align:center; color:var(--accent-new); }
.trend-item:first-child .trend-rank { color:#f97316; }
.trend-link img { width:96px; aspect-ratio:4/3; object-fit:cover; border-radius:8px; background:var(--color-charcoal); }
.trend-text { display:grid; gap:4px; min-width:0; }
.trend-topic { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--color-steel); }
.trend-title { line-height:1.3; }
.trend-meta { color:var(--color-fog); }
.trend-empty { padding:18px; color:var(--color-fog); border:var(--border-hairline); border-radius:14px; }
@media(min-width:1000px){ .trend-grid { grid-template-columns:repeat(3,1fr); align-items:start; } .trend-link { grid-template-columns:28px 1fr; } .trend-link img { display:none; } }
@media(max-width:520px){ .trend-link { grid-template-columns:28px 72px 1fr; gap:10px; } .trend-link img { width:72px; } }
/* Superadmin viewing another account, and the bank note */
.access-bar { position:sticky; top:0; z-index:200; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; padding:8px 16px; font-size:14px; color:#111; background:#f59e0b; }
.access-bar .btn-bone { padding:6px 14px; font-size:13px; }
.bank-note { margin:-4px 0 12px; }
.bank-banner { display:grid; gap:8px; margin:0 0 20px; padding:16px 18px; border:1px solid var(--accent-new); border-radius:14px; background:color-mix(in srgb,var(--accent-new) 10%,transparent); }
.bank-banner p { margin:0; }
.bank-form { display:flex; flex-wrap:wrap; gap:8px; }
.bank-form input { flex:1 1 180px; }
.notification-image { display:block; max-width:min(100%,420px); max-height:320px; margin:10px 0; border-radius:10px; object-fit:cover; }
.notify-image { display:grid; gap:8px; }
.notify-image .ad-preview, .notice-edit .ad-preview { max-width:260px; } .notify-image .ad-preview img, .notice-edit .ad-preview img { width:100%; }
.notice-edit { display:grid; gap:10px; }
.author-writings { margin-top:18px; padding-top:14px; border-top:var(--border-hairline); }
.author-writing-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; max-height:260px; overflow:auto; }
.author-writing-list li { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.author-writing-list li > a:first-child { flex:1 1 220px; }
.author-edit-link { font-weight:600; }
/* YouTube player on video posts: full width, 16:9, like the photo of other posts */
.article-video-cover { aspect-ratio:16/9; overflow:hidden; border-radius:14px; background:#000; }
.article-video-cover iframe { display:block; width:100%; height:100%; border:0; }
/* Features switched off by the superadmin (assets/js/features.js sets these classes on <html>) */
html.feat-off-login [data-account-link], html.feat-off-login .nav-account-link, html.feat-off-login .nav-account-item:has([data-account-link]) { display:none !important; }
html.feat-off-like [data-like-article], html.feat-off-like [data-trend="liked"] { display:none !important; }
html.feat-off-save [data-save-article], html.feat-off-save [data-trend="saved"] { display:none !important; }
html.feat-off-comments .comments-section, html.feat-off-comments [data-comments] { display:none !important; }
.feature-list { display:grid; gap:12px; margin:0 0 18px; padding:0; list-style:none; }
.feature-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; border:var(--border-hairline); border-radius:12px; background:var(--color-graphite); }
.feature-row small { display:block; margin-top:2px; color:var(--color-fog); }
.feature-switch { position:relative; flex:none; width:48px; height:28px; }
.feature-switch input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.feature-switch span { position:absolute; inset:0; border-radius:999px; background:var(--color-smoke); transition:background .15s; pointer-events:none; }
.feature-switch span::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .15s; }
.feature-switch input:checked + span { background:var(--accent-new); }
.feature-switch input:checked + span::after { transform:translateX(20px); }
.feature-switch input:focus-visible + span { outline:2px solid var(--accent-new); outline-offset:2px; }
/* Vercel deploy page */
.vercel-status { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:0 0 16px; }
.vercel-stale strong { color:#f59e0b; } .vercel-fresh strong { color:#22c55e; }
.vercel-code { margin:0 0 12px; padding:14px; overflow:auto; max-height:320px; font-size:12.5px; line-height:1.5; white-space:pre-wrap; word-break:break-word; background:var(--color-charcoal); border:var(--border-hairline); border-radius:10px; }
.vercel-files { display:grid; gap:2px; max-height:320px; overflow:auto; margin-top:8px; font-size:13px; }
.vercel-file { display:flex; justify-content:space-between; gap:12px; padding:3px 0; border-bottom:var(--border-hairline); word-break:break-all; }
/* 404 page */
.notfound { padding-top:clamp(40px,8vw,96px); padding-bottom:72px; }
.notfound-hero { max-width:720px; margin:0 auto 48px; text-align:center; }
.notfound-code { display:block; font-size:clamp(88px,20vw,168px); font-weight:700; line-height:1; letter-spacing:-.04em; background:linear-gradient(135deg,var(--accent-new),#f97316); -webkit-background-clip:text; background-clip:text; color:transparent; }
.notfound-hero h1 { margin:8px 0 12px; font-size:var(--title-hero); }
.notfound-hero p { margin:0 auto 24px; max-width:560px; color:var(--color-fog); }
.notfound-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.notfound-latest { max-width:720px; margin:0 auto; }
.notfound-latest h2 { margin:0 0 12px; font-size:var(--title-section); }
.notfound-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.notfound-list a { display:grid; gap:2px; padding:12px 14px; color:inherit; text-decoration:none; background:var(--color-graphite); border:var(--border-hairline); border-radius:12px; }
.notfound-list a:hover,.notfound-list a:focus-visible { border-color:var(--accent-new); }
.notfound-list small { color:var(--color-fog); }
/* Embedded form page (/kirimtulisan) */
.form-page { padding-top:clamp(32px,6vw,72px); padding-bottom:72px; max-width:820px; }
.form-page-head { margin-bottom:24px; }
.form-page-head h1 { margin:6px 0 10px; font-size:var(--title-hero); }
.form-page-head p { margin:0; color:var(--color-fog); max-width:640px; }
.form-embed { overflow:hidden; border:var(--border-hairline); border-radius:14px; background:#fff; }
.form-embed iframe { display:block; width:100%; min-height:1200px; height:1500px; border:0; }
.form-embed-note { margin:14px 0 0; color:var(--color-fog); font-size:14px; }
@media(max-width:600px){ .form-embed iframe { min-height:1400px; } }