:root {
  --blue: #b91c1c;
  --blue-dark: #173eae;
  --ink: #14213d;
  --muted: #64748b;
  --line: #e5e7eb;
  --paper: #fff;
  --soft: #f5f7fb;
  --red: #ef4444;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

.utility-bar { background: #f7f8fb; color: #718096; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.utility-bar__inner { display: flex; align-items: center; min-height: 33px; gap: 22px; }
.utility-bar__tagline { color: var(--blue); font-weight: 700; }
.utility-bar__links { margin-left: auto; display: flex; gap: 18px; }
.utility-bar__links a:hover { color: var(--blue); }

.site-header { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.96); box-shadow: 0 2px 12px rgba(15,23,42,.07); }
.header-main { display: flex; align-items: center; min-height: 86px; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand__mark { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 8px; background: var(--blue); color: white; font-size: 13px; font-weight: 800; letter-spacing: -.04em; }
.brand__text { color: var(--blue); font-family: Newsreader, Georgia, serif; font-size: 29px; font-weight: 700; letter-spacing: -.055em; }
.brand__text span { color: #ef4444; font-style: italic; }
.search-form { display: flex; flex: 1; max-width: 480px; margin: 0 auto; border: 1px solid #d8dee9; border-radius: 999px; overflow: hidden; background: white; }
.search-form input { flex: 1; min-width: 0; height: 40px; padding: 0 17px; border: 0; outline: 0; font: inherit; color: var(--ink); }
.search-form button { width: 52px; border: 0; background: var(--blue); color: white; font-size: 25px; cursor: pointer; }
.editor-link { color: #475569; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.editor-link span { color: var(--blue); font-size: 18px; margin-left: 4px; }
.menu-button { display: none; border: 0; padding: 5px; background: transparent; }
.menu-button span { display: block; width: 21px; height: 2px; margin: 4px 0; background: var(--ink); }
.category-nav { border-top: 1px solid var(--line); }
.category-nav__inner { display: flex; overflow-x: auto; }
.category-nav a { padding: 14px 18px 13px; color: #4b5563; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; border-bottom: 3px solid transparent; }
.category-nav a:first-child { padding-left: 0; }
.category-nav a:hover, .category-nav a.active { color: var(--blue); border-color: var(--blue); }

.page { padding-top: 24px; padding-bottom: 68px; }
.breaking { display: flex; align-items: stretch; gap: 0; padding: 0; border-bottom: 1px solid var(--line); font-size: 12px; white-space: nowrap; overflow: hidden; min-height: 38px; }
.breaking strong { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.breaking-track { flex: 1 1 auto; display: flex; align-items: center; gap: 34px; min-width: 0; overflow: hidden; background: #dc2626; padding: 0 16px; }
.breaking a,.breaking span { color: #fff; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.breaking a:hover { color: #fff; text-decoration: underline; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(310px, .85fr); gap: 28px; margin-top: 26px; }
.hero-story { min-height: 500px; position: relative; overflow: hidden; border-radius: 8px; background: #cbd5e1; }
.hero-story > a, .hero-story img { width: 100%; height: 100%; }
.hero-story img { object-fit: cover; transition: transform .4s ease; }
.hero-story:hover img { transform: scale(1.03); }
.hero-story::after { position: absolute; inset: 35% 0 0; content: ""; background: linear-gradient(transparent, rgba(9,25,64,.94)); pointer-events: none; }
.hero-story__overlay { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; padding: 32px; color: white; }
.hero-story h1 { max-width: 700px; margin: 12px 0 10px; font-family: Newsreader, Georgia, serif; font-size: clamp(34px, 4vw, 58px); line-height: .98; letter-spacing: -.045em; }
.hero-story h1 a:hover { color: #fecaca; }
.hero-story p { max-width: 600px; margin: 0; color: #fee2e2; font-size: 14px; line-height: 1.65; }
.eyebrow, .section-kicker { display: inline-block; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow--light, .section-kicker--light { color: #fca5a5; }
.eyebrow--light span { color: #cbd5e1; }
.hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 24px; }
.news-card { min-width: 0; }
.news-card__image { display: block; overflow: hidden; border-radius: 7px; background: #e2e8f0; }
.news-card__image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .35s ease; }
.news-card:hover .news-card__image img { transform: scale(1.04); }
.news-card__body { padding-top: 13px; }
.news-card h3 { margin: 7px 0 8px; font-family: Newsreader, Georgia, serif; font-size: 23px; line-height: 1.05; letter-spacing: -.025em; }
.news-card h3 a:hover { color: var(--blue); }
.news-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.meta { margin-top: 13px; color: #94a3b8; font-size: 10px; letter-spacing: .03em; }
.meta span { margin: 0 4px; color: #cbd5e1; }
.news-card--compact { border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.news-card--compact:last-child { border-bottom: 0; }
.news-card--compact h3 { font-size: 25px; }

.content-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, .85fr); gap: 28px; margin-top: 52px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 17px; margin-bottom: 22px; border-bottom: 2px solid var(--ink); }
.section-heading h1, .section-heading h2 { margin: 5px 0 0; font-family: Newsreader, Georgia, serif; font-size: 42px; line-height: .95; letter-spacing: -.04em; }
.section-heading h2 { font-size: 31px; }
.section-heading p { max-width: 340px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: right; }
.section-heading--compact a { color: var(--blue); font-size: 12px; font-weight: 700; }
.section-heading--compact a span { font-size: 18px; margin-left: 5px; }
.news-grid { display: grid; gap: 28px; }
.news-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.news-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trending { padding-left: 24px; border-left: 1px solid var(--line); }
.sidebar-title { display: flex; justify-content: space-between; padding-bottom: 17px; border-bottom: 2px solid var(--ink); color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sidebar-title span { color: var(--blue); font-size: 18px; }
.popular-item { display: grid; grid-template-columns: 37px 1fr; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.popular-item > span { color: var(--blue); font-family: Newsreader, Georgia, serif; font-size: 25px; font-weight: 700; }
.popular-item strong { font-family: Newsreader, Georgia, serif; font-size: 17px; line-height: 1.12; }
.popular-item:hover strong { color: var(--blue); }

.newsletter { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 58px; padding: 35px 40px; border-radius: 8px; background: linear-gradient(118deg, var(--blue-dark), var(--blue)); color: white; }
.newsletter h2 { margin: 7px 0 6px; font-family: Newsreader, Georgia, serif; font-size: 32px; letter-spacing: -.03em; }
.newsletter p { margin: 0; color: #fee2e2; font-size: 13px; }
.newsletter form { display: flex; width: min(420px, 100%); border-radius: 4px; overflow: hidden; background: white; }
.newsletter input { flex: 1; min-width: 0; border: 0; padding: 14px; outline: 0; font: inherit; }
.newsletter button, .button { border: 0; padding: 0 18px; background: #f59e0b; color: #172554; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }

.breadcrumb { display: flex; gap: 10px; margin: 10px 0 24px; color: #94a3b8; font-size: 12px; }
.breadcrumb a:hover { color: var(--blue); }
.article-page { max-width: 970px; margin: 0 auto; }
.article-page__category { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.article-page h1 { max-width: 900px; margin: 12px 0; font-family: Newsreader, Georgia, serif; font-size: clamp(42px, 6vw, 76px); line-height: .95; letter-spacing: -.055em; }
.article-page__excerpt { max-width: 700px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.5; }
.article-page__byline { display: flex; align-items: center; gap: 18px; margin: 24px 0; color: #94a3b8; font-size: 12px; }
.article-page__byline strong { color: var(--ink); }
.article-page__hero { width: 100%; aspect-ratio: 16 / 9; height: auto; max-height: 560px; object-fit: cover; object-position: center; border-radius: 8px; display: block; }
.article-page__layout { display: grid; grid-template-columns: minmax(0, 1fr) 275px; gap: 54px; margin-top: 35px; }
.article-page__body { max-width: 670px; font-family: Newsreader, Georgia, serif; font-size: 21px; line-height: 1.52; }
.article-page__body p { margin: 0 0 24px; }
.article-actions { display: flex; gap: 10px; padding-top: 14px; font-family: Inter, Arial, sans-serif; }
.article-actions button { border: 1px solid var(--line); border-radius: 5px; padding: 11px 14px; background: white; color: var(--blue); cursor: pointer; font-size: 12px; font-weight: 700; }
.article-actions button:hover { background: var(--soft); }
.article-sidebar { align-self: start; }
.editor-notice, .empty-state { max-width: 740px; margin: 70px auto; padding: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.editor-notice h1, .empty-state h1, .empty-state h2 { margin: 8px 0 12px; font-family: Newsreader, Georgia, serif; font-size: 42px; letter-spacing: -.04em; }
.editor-notice p, .empty-state p { color: var(--muted); line-height: 1.6; }
.editor-notice code { padding: 3px 6px; border-radius: 4px; background: #e2e8f0; color: var(--ink); }
.button { display: inline-flex; align-items: center; min-height: 42px; margin-top: 14px; border-radius: 4px; text-decoration: none; }
.notice { margin: 16px 0; padding: 14px 18px; border-left: 4px solid #22c55e; background: #f0fdf4; color: #166534; font-size: 13px; }

.site-footer { background: #0f1d3a; color: white; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 50px; padding: 52px 0 42px; }
.brand--footer .brand__text { color: white; }
.brand--footer .brand__text span { color: #fca5a5; }
.footer-grid p { max-width: 260px; color: #a8b5d1; font-size: 13px; line-height: 1.6; }
.footer-grid strong { display: block; margin-bottom: 16px; color: #fca5a5; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.footer-grid > div:not(:first-child) a { display: block; margin: 10px 0; color: #d4dced; font-size: 13px; }
.footer-grid > div:not(:first-child) a:hover { color: white; }
.footer-bottom { display: flex; justify-content: space-between; padding: 18px 0; border-top: 1px solid rgba(148,163,184,.2); color: #94a3b8; font-size: 11px; }

@media (max-width: 820px) {
  .container { width: min(100% - 30px, 680px); }
  .utility-bar__tagline, .utility-bar__links { display: none; }
  .header-main { min-height: 70px; gap: 12px; }
  .menu-button { display: block; }
  .brand__text { font-size: 24px; }
  .brand__mark { width: 33px; height: 33px; }
  .editor-link { display: none; }
  .search-form { max-width: 190px; margin-left: auto; }
  .search-form input { height: 36px; font-size: 12px; }
  .search-form button { width: 42px; }
  .category-nav { display: none; }
  .category-nav.is-open { display: block; }
  .category-nav__inner { flex-wrap: wrap; overflow: visible; padding-bottom: 8px; }
  .category-nav a { padding: 10px 12px; }
  .category-nav a:first-child { padding-left: 12px; }
  .hero-grid, .content-layout, .article-page__layout { grid-template-columns: 1fr; }
  .hero-side { grid-template-columns: 1fr 1fr; grid-template-rows: none; margin-top: 4px; }
  .hero-story { min-height: 420px; }
  .content-layout { gap: 40px; }
  .trending { padding-left: 0; border-left: 0; }
  .section-heading { align-items: start; flex-direction: column; }
  .section-heading p { text-align: left; }
  .newsletter { align-items: start; flex-direction: column; padding: 28px 24px; }
  .newsletter form { width: 100%; min-height: 44px; }
  .article-page h1 { font-size: 49px; }
  .article-page__byline { flex-wrap: wrap; gap: 9px 14px; }
  .article-sidebar { border-top: 1px solid var(--line); padding-top: 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-grid > div:first-child { grid-column: span 2; }
}

@media (max-width: 520px) {
  .page { padding-top: 15px; }
  .breaking { gap: 8px; font-size: 11px; }
  .breaking a:nth-of-type(2), .breaking span:nth-of-type(2) { display: none; }
  .hero-grid { margin-top: 17px; }
  .hero-story { min-height: 350px; }
  .hero-story__overlay { padding: 22px; }
  .hero-story h1 { font-size: 37px; }
  .hero-story p { font-size: 12px; }
  .hero-side { gap: 14px; }
  .news-card--compact h3 { font-size: 19px; }
  .news-card--compact p { display: none; }
  .news-grid--two, .news-grid--three { grid-template-columns: 1fr; }
  .section-heading h1 { font-size: 36px; }
  .section-heading h2 { font-size: 28px; }
  .article-page h1 { font-size: 42px; }
  .article-page__excerpt { font-size: 16px; }
  .article-page__body { font-size: 19px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 7px; }
}

@media print {
  .utility-bar, .site-header, .article-sidebar, .site-footer { display: none; }
  .article-page__layout { display: block; }
}

/* Admin workspace */
.admin-body { background: #f7f8fb; }
.admin-topbar { background: white; border-bottom: 1px solid var(--line); }
.admin-topbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.admin-topbar__right { display: flex; align-items: center; gap: 18px; color: #64748b; font-size: 12px; font-weight: 700; }
.admin-topbar__right a:hover { color: var(--blue); }
.admin-page { padding-top: 38px; }
.admin-page__heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.admin-page__heading h1 { margin: 6px 0; font-family: Newsreader, Georgia, serif; font-size: 44px; letter-spacing: -.045em; }
.admin-page__heading p { margin: 0; color: var(--muted); font-size: 13px; }
.stat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.stat-card { min-height: 126px; padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: white; }
.stat-card:hover { border-color: #fca5a5; box-shadow: 0 8px 24px rgba(29,78,216,.08); }
.stat-card span, .stat-card small { display: block; color: #64748b; font-size: 11px; }
.stat-card strong { display: block; margin: 11px 0 10px; color: var(--ink); font-family: Newsreader, Georgia, serif; font-size: 35px; line-height: .9; }
.stat-card small { color: var(--blue); font-weight: 700; }
.admin-module-group { margin-top: 42px; }
.admin-module-group h2 { margin: 0 0 16px; font-family: Newsreader, Georgia, serif; font-size: 28px; }
.admin-module-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.admin-module-card { position: relative; min-height: 128px; padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: white; }
.admin-module-card:hover { border-color: #fca5a5; transform: translateY(-2px); transition: .2s ease; }
.admin-module-card strong, .admin-module-card span { display: block; padding-right: 18px; }
.admin-module-card strong { margin-bottom: 10px; color: var(--ink); font-size: 13px; }
.admin-module-card span { color: #64748b; font-size: 12px; line-height: 1.45; }
.admin-module-card b { position: absolute; right: 16px; bottom: 13px; color: var(--blue); font-size: 18px; }
.admin-form { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; margin-bottom: 30px; }
.admin-form--single { display: block; max-width: 700px; padding: 24px; border: 1px solid var(--line); border-radius: 7px; background: white; }
.admin-form__main, .admin-form__side { display: grid; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: 7px; background: white; }
.admin-form label, .install-form label { display: grid; gap: 7px; color: #475569; font-size: 12px; font-weight: 700; }
.admin-form input, .admin-form textarea, .admin-form select, .install-form input { width: 100%; border: 1px solid #d8dee9; border-radius: 4px; padding: 11px 12px; outline: 0; background: white; color: var(--ink); font: inherit; font-size: 13px; }
.admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus, .install-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(185,28,28,.1); }
.admin-cancel { display: inline-block; margin-left: 12px; color: var(--muted); font-size: 12px; font-weight: 700; }
.admin-filter { display: flex; gap: 10px; margin-bottom: 18px; }
.admin-filter input, .admin-filter select { min-height: 42px; border: 1px solid #d8dee9; border-radius: 4px; padding: 0 12px; background: white; font: inherit; }
.admin-filter input { flex: 1; }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 7px; background: white; }
.admin-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
.admin-table th { padding: 13px 16px; background: #f8fafc; color: #64748b; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.admin-table td { padding: 15px 16px; border-top: 1px solid var(--line); vertical-align: top; color: #475569; }
.admin-table td strong, .admin-table td small { display: block; }
.admin-table td strong { max-width: 320px; color: var(--ink); font-size: 13px; }
.admin-table td small { margin-top: 5px; color: #94a3b8; line-height: 1.4; }
.table-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.table-actions a, .table-actions button, .admin-table button { padding: 0; border: 0; background: transparent; color: var(--blue); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.table-actions button { color: var(--red); }
.inline-form { display: flex; gap: 6px; }
.inline-form select { border: 1px solid var(--line); padding: 5px; font-size: 11px; }
.status { display: inline-block; padding: 4px 8px; border-radius: 999px; background: #e2e8f0; color: #475569; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.status--published { background: #dcfce7; color: #166534; }
.status--review { background: #fef3c7; color: #92400e; }
.status--archived { background: #fee2e2; color: #991b1b; }
.admin-login { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.admin-login > .brand { position: absolute; top: 34px; }
.admin-login__card { width: min(100%, 430px); padding: 35px; border: 1px solid var(--line); border-radius: 8px; background: white; box-shadow: 0 18px 60px rgba(15,23,42,.08); }
.admin-login__card h1 { margin: 8px 0 22px; font-family: Newsreader, Georgia, serif; font-size: 39px; letter-spacing: -.04em; }
.install-card { max-width: 690px; margin: 40px auto; }
.install-form { display: grid; gap: 15px; margin-top: 22px; }
.install-form .button { width: fit-content; min-height: 42px; }

@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .admin-topbar__inner { min-height: 64px; }
  .admin-topbar__right { gap: 8px; font-size: 10px; }
  .admin-topbar__right span { display: none; }
  .admin-page__heading { align-items: start; flex-direction: column; gap: 15px; }
  .admin-page__heading h1 { font-size: 38px; }
  .stat-grid, .admin-module-grid { grid-template-columns: 1fr 1fr; }
  .admin-form { grid-template-columns: 1fr; }
  .admin-form__main, .admin-form__side { padding: 18px; }
  .admin-filter { flex-wrap: wrap; }
  .admin-filter input { flex-basis: 100%; }
  .admin-login__card { padding: 26px 20px; }
}

/* Feedback widget */
.feedback-widget { position: fixed; right: 20px; bottom: 20px; z-index: 1000; font-family: Inter, sans-serif; }
.feedback-widget__trigger { display:flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border:0; border-radius:999px; background:var(--blue); color:#fff; box-shadow:0 10px 28px rgba(15,23,42,.22); cursor:pointer; font:700 12px Inter,sans-serif; }
.feedback-widget__trigger:hover { transform:translateY(-1px); }
.feedback-panel { position:absolute; right:0; bottom:56px; width:min(390px, calc(100vw - 28px)); border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 20px 60px rgba(15,23,42,.18); overflow:hidden; }
.feedback-panel__head { display:flex; justify-content:space-between; gap:14px; padding:18px; border-bottom:1px solid var(--line); }
.feedback-panel__head strong,.feedback-panel__head span { display:block; }
.feedback-panel__head strong { color:var(--ink); font-size:14px; }
.feedback-panel__head span { margin-top:5px; color:var(--muted); font-size:11px; line-height:1.45; }
.feedback-panel__close { width:30px; height:30px; border:0; background:#f1f5f9; border-radius:50%; color:#475569; font-size:20px; cursor:pointer; }
.feedback-form { display:grid; gap:12px; padding:18px; }
.feedback-form label { display:grid; gap:6px; color:#475569; font-size:11px; font-weight:700; }
.feedback-form textarea,.feedback-form input { width:100%; box-sizing:border-box; border:1px solid #d8dee9; border-radius:6px; padding:10px; outline:0; background:#fff; color:var(--ink); font:inherit; font-size:12px; }
.feedback-form textarea:focus,.feedback-form input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(185,28,28,.1); }
.feedback-rating { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#64748b; font-size:11px; }
.feedback-rating > div { display:flex; gap:2px; direction:rtl; }
.feedback-rating label { display:block; cursor:pointer; }
.feedback-rating input { position:absolute; opacity:0; pointer-events:none; }
.feedback-rating label span { display:block; padding:3px; color:#cbd5e1; font-size:23px; line-height:1; }
.feedback-rating label:hover span,.feedback-rating label:hover ~ label span,.feedback-rating input:checked + span,.feedback-rating input:checked ~ span { color:#f59e0b; }
.feedback-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.feedback-form .button { width:100%; min-height:42px; }
.feedback-result { min-height:16px; margin:0; color:var(--muted); font-size:11px; line-height:1.4; }
.feedback-hp { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
@media (max-width:520px) { .feedback-widget { right:12px; bottom:12px; } .feedback-widget__trigger { min-height:42px; padding:0 14px; } .feedback-fields { grid-template-columns:1fr; } }

/* Final CMS controls */
.required { color: #b91c1c; font-size: 10px; font-weight: 800; }
.optional { color: #94a3b8; font-size: 10px; font-weight: 600; }
.heading-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.button--light { background:#fff; color:var(--ink); border:1px solid var(--line); }
.button--secondary { background:#475569; }
.help { color:#64748b; font-size:12px; line-height:1.6; }
.permission-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 0 18px; }
.check-row { display:flex !important; grid-template-columns:none !important; align-items:center; gap:9px !important; padding:11px 12px; border:1px solid var(--line); border-radius:6px; background:#f8fafc; }
.check-row input { width:auto !important; margin:0; }
.field-note { display:grid; gap:4px; padding:12px; border:1px solid var(--line); border-radius:6px; background:#f8fafc; color:#475569; font-size:11px; }
.field-note strong { color:var(--ink); }
.auto-info { padding:12px 14px; border-left:3px solid var(--blue); background:#fef2f2; color:#475569; font-size:12px; line-height:1.55; }
details { border-top:1px solid var(--line); padding-top:12px; }
details summary { cursor:pointer; color:var(--blue); font-size:12px; font-weight:800; }
.details-grid { display:grid; gap:14px; margin-top:14px; }
.breaking { overflow:hidden; }
.breaking-track a,.breaking-track span { flex:0 0 auto; }
@keyframes tickerMove { from { transform:translateX(100%); } to { transform:translateX(-100%); } }
.breaking-track { animation:tickerMove var(--ticker-speed,35s) linear infinite; width:max-content; }
.breaking:hover .breaking-track { animation-play-state:paused; }
.public-ad { margin:18px 0; text-align:center; }
.public-ad img,.public-ad video { max-width:100%; height:auto; border-radius:var(--radius); display:block; margin:auto; }
.public-widget { margin:18px 0; padding:16px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.public-widget > strong { display:block; margin-bottom:10px; }
.public-widget a { display:block; padding:8px 0; border-top:1px solid var(--line); font-size:13px; }
.header-custom,.footer-custom { max-width:var(--container); margin:0 auto; }
.content-layout--full { grid-template-columns:1fr !important; }
@media(max-width:620px){.permission-grid{grid-template-columns:1fr}.heading-actions{width:100%}.heading-actions .button{flex:1;text-align:center}}
.site-logo{display:block;max-width:var(--logo-width,180px);max-height:58px;object-fit:contain}

/* Analisis trafik: perbandingan jam ini dengan jam yang sama kemarin. */
.analytics-trend-card{overflow:hidden}
.analytics-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:12px}
.analytics-heading h3{margin:4px 0 5px}
.analytics-heading p{margin:0;color:var(--muted);max-width:720px}
.trend-summary{min-width:145px;padding:12px 14px;border-radius:12px;border:1px solid var(--border);text-align:right}
.trend-summary strong{display:block;font-size:24px;line-height:1.1}.trend-summary span{font-size:12px;color:var(--muted)}
.trend-up{background:#ecfdf3;border-color:#86efac!important;color:#166534}.trend-same{background:#f8fafc;color:#475569}.trend-down{background:#fffbeb;border-color:#fde68a!important;color:#92400e}.trend-down-strong{background:#fef2f2;border-color:#fca5a5!important;color:#b91c1c}
.trend-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin:10px 0 16px}.trend-legend span{display:inline-flex;align-items:center;gap:6px}.trend-dot{width:9px;height:9px;border-radius:50%;display:inline-block}.trend-dot--up{background:#16a34a}.trend-dot--same{background:#64748b}.trend-dot--down{background:#eab308}.trend-dot--strong{background:#dc2626}
.hourly-chart{height:280px;display:grid;grid-template-columns:repeat(24,minmax(24px,1fr));gap:5px;align-items:end;border-bottom:1px solid var(--border);padding:8px 4px 0;overflow-x:auto}
.hour-point{min-width:24px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px}.hour-point strong{font-size:10px;color:var(--muted)}.hour-point small{font-size:10px;font-weight:700}.hour-point em{font-size:9px;font-style:normal;white-space:nowrap}
.hour-bars{height:205px;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px}.hour-bar{display:block;width:45%;min-height:2px;border-radius:5px 5px 0 0}.hour-bar--yesterday{background:#cbd5e1}.hour-bar--today{background:#64748b}.hour-point.trend-up .hour-bar--today{background:#16a34a}.hour-point.trend-down .hour-bar--today{background:#eab308}.hour-point.trend-down-strong .hour-bar--today{background:#dc2626}.hour-point.trend-same .hour-bar--today{background:#64748b}
.analytics-note{font-size:12px;color:var(--muted);margin-top:12px}
@media (max-width:700px){.analytics-heading{flex-direction:column}.trend-summary{width:100%;box-sizing:border-box;text-align:left}.hourly-chart{height:250px;grid-template-columns:repeat(24,28px);gap:5px}.hour-bars{height:180px}}

/* V10: indikator proses global */
.loading-overlay{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.48);backdrop-filter:blur(3px);padding:20px}.loading-box{width:min(92vw,360px);background:#fff;border-radius:16px;padding:24px;text-align:center;box-shadow:0 18px 60px rgba(0,0,0,.2)}.loading-spinner{width:42px;height:42px;margin:0 auto 14px;border:4px solid #e5e7eb;border-top-color:#dc2626;border-radius:50%;animation:lnspin .8s linear infinite}.loading-title{font-weight:700;font-size:16px}.loading-detail{margin-top:6px;color:#64748b;font-size:13px}.loading-result{font-size:34px;margin-bottom:10px}.loading-result--success{color:#16a34a}.loading-result--error{color:#dc2626}@keyframes lnspin{to{transform:rotate(360deg)}}

/* Admin navigation drawer */
.admin-topbar__left { display:flex; align-items:center; gap:14px; }
.admin-menu-button { position:fixed; top:16px; left:16px; z-index:1101; width:44px; height:44px; display:grid; place-content:center; gap:4px; border:1px solid #dbe2ec; border-radius:8px; background:#fff; box-shadow:0 5px 18px rgba(15,23,42,.08); cursor:pointer; }
.admin-menu-button span { display:block; width:21px; height:2px; border-radius:2px; background:var(--ink); }
.admin-menu-button--top { position:relative; top:auto; left:auto; z-index:2; box-shadow:none; width:40px; height:40px; }
.admin-drawer-backdrop { position:fixed; inset:0; z-index:1090; background:rgba(15,23,42,.34); opacity:0; visibility:hidden; transition:.2s ease; }
.admin-drawer { position:fixed; inset:0 auto 0 0; z-index:1100; width:min(360px,88vw); display:flex; flex-direction:column; background:#fff; box-shadow:16px 0 45px rgba(15,23,42,.18); transform:translateX(-105%); transition:transform .22s ease; }
.admin-drawer.is-open { transform:translateX(0); }
.admin-drawer-backdrop.is-open { opacity:1; visibility:visible; }
.admin-drawer__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 20px 16px; border-bottom:1px solid var(--line); }
.admin-drawer__head strong { display:block; font-size:16px; }
.admin-drawer__head small { display:block; margin-top:4px; color:var(--muted); font-size:11px; }
.admin-drawer__close { width:34px; height:34px; border:1px solid var(--line); border-radius:7px; background:#fff; font-size:23px; color:var(--muted); cursor:pointer; }
.admin-drawer__nav { overflow-y:auto; padding:8px 12px 18px; }
.admin-drawer__group { padding:9px 0; border-bottom:1px solid #f1f5f9; }
.admin-drawer__group-title { padding:7px 9px 6px; color:#94a3b8; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.admin-drawer__link { display:block; padding:10px 10px; border-radius:7px; }
.admin-drawer__link:hover, .admin-drawer__link.is-active { background:#fef2f2; }
.admin-drawer__link span { display:block; color:var(--ink); font-size:12px; font-weight:800; }
.admin-drawer__link.is-active span { color:var(--blue); }
.admin-drawer__link small { display:block; margin-top:3px; color:#94a3b8; font-size:10px; line-height:1.35; }
.admin-drawer__foot { display:flex; gap:18px; padding:15px 20px; border-top:1px solid var(--line); margin-top:auto; }
.admin-drawer__foot a { color:var(--blue); font-size:11px; font-weight:800; }
.admin-topbar { position:sticky; top:0; z-index:100; }
.admin-page { min-height:calc(100vh - 72px); }
@media (min-width:821px) { .admin-menu-button:not(.admin-menu-button--top) { display:none; } }
@media (max-width:620px) { .admin-menu-button--top { width:36px; height:36px; } .admin-topbar__inner { padding-left:0; } .admin-topbar__right span { display:none; } }

/* Brand mode */
.site-brand-icon{width:38px;height:38px;object-fit:contain;display:block;flex:0 0 auto}.brand .site-brand-icon + .brand__text{margin-left:10px}.form-help{margin:-4px 0 14px;color:#64748b;font-size:.92rem;line-height:1.5}

/* V14 Admin Professional UI */
.admin-body{background:#f3f6fa;color:#172033;min-height:100vh}
.admin-body .admin-topbar{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(15,23,42,.06)}
.admin-topbar__inner{max-width:none;width:100%;padding:0 26px;min-height:68px}
.admin-topbar__left{display:flex;align-items:center;gap:14px}
.admin-topbar .brand{font-size:16px;font-weight:800}
.admin-topbar .brand__mark{width:36px;height:36px;font-size:12px}
.admin-menu-button.admin-menu-button--top{position:relative;display:flex;width:40px;height:40px;align-items:center;justify-content:center;flex-direction:column;gap:4px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.05)}
.admin-menu-button span{display:block;width:17px;height:2px;border-radius:2px;background:#172033}
.admin-page{width:min(1440px,calc(100% - 52px));padding:34px 0 60px}
.admin-page__heading{align-items:center;padding:26px 28px;margin-bottom:22px;border:1px solid #e5eaf1;border-radius:16px;background:linear-gradient(135deg,#fff,#f8fbff);box-shadow:0 10px 35px rgba(15,23,42,.05)}
.admin-page__heading .section-kicker{display:inline-flex;padding:5px 9px;border-radius:999px;background:#eaf2ff;color:#dc2626;font-size:10px;font-weight:800;letter-spacing:.12em}
.admin-page__heading h1{font-family:Inter,Arial,sans-serif;font-size:30px;letter-spacing:-.035em;font-weight:800}
.admin-page__heading p{font-size:13px}
.admin-page__heading .button{margin:0;border-radius:10px;background:#dc2626;color:#fff;box-shadow:0 7px 18px rgba(37,99,235,.22)}
.stat-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}
.stat-card{min-height:132px;padding:18px;border:1px solid #e4e9f0;border-radius:14px;box-shadow:0 5px 18px rgba(15,23,42,.035);transition:.18s ease}
.stat-card:hover{transform:translateY(-2px);border-color:#fecaca;box-shadow:0 12px 28px rgba(15,23,42,.08)}
.stat-card span{font-weight:700}
.stat-card strong{font-family:Inter,Arial,sans-serif;font-size:32px;font-weight:800;letter-spacing:-.04em}
.admin-module-group{margin-top:30px;padding:24px;border:1px solid #e5eaf1;border-radius:16px;background:#fff;box-shadow:0 5px 20px rgba(15,23,42,.035)}
.admin-module-group h2{font-family:Inter,Arial,sans-serif;font-size:17px;font-weight:800;margin-bottom:17px;letter-spacing:-.01em}
.admin-module-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.admin-module-card{min-height:116px;padding:17px;border:1px solid #e7ebf0;border-radius:12px;background:#fbfcfe;transition:.18s ease}
.admin-module-card:hover{background:#fff;border-color:#fecaca;transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.07)}
.admin-module-card strong{font-weight:750}
.admin-module-card span{line-height:1.5}
.admin-drawer{width:min(360px,88vw);background:#fff;box-shadow:18px 0 50px rgba(15,23,42,.18);border-right:1px solid #e5eaf1}
.admin-drawer__head{padding:20px;border-bottom:1px solid #eef1f5}
.admin-drawer__head strong{font-size:16px}
.admin-drawer__nav{padding:12px}
.admin-drawer__group{margin-bottom:12px}
.admin-drawer__group-title{padding:8px 10px;color:#94a3b8;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.admin-drawer__link{display:block;padding:11px 12px;border-radius:9px;color:#475569}
.admin-drawer__link:hover{background:#f4f7fb;color:#172033}
.admin-drawer__link.is-active{background:#eaf2ff;color:#b91c1c;box-shadow:inset 3px 0 #dc2626}
.admin-drawer__link span{font-size:12px;font-weight:750}
.admin-drawer__link small{display:block;margin-top:3px;color:#94a3b8;font-size:10px;line-height:1.35}
.admin-drawer__foot{padding:14px 18px;border-top:1px solid #eef1f5;display:flex;justify-content:space-between;gap:10px}
.admin-drawer__foot a{font-size:11px;font-weight:750;color:#475569}
.admin-drawer__foot a:hover{color:#dc2626}

@media(max-width:1100px){.stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.admin-module-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.admin-page{width:min(100% - 24px,680px);padding-top:20px}.admin-topbar__inner{padding:0 12px}.admin-page__heading{padding:20px;align-items:flex-start;flex-direction:column}.admin-page__heading h1{font-size:25px}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-module-grid{grid-template-columns:1fr}.admin-module-group{padding:18px}.stat-card{min-height:112px}.stat-card strong{font-size:28px}}
/* V15: indikator upload yang konsisten */
.upload-progress-note{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:13px;color:#64748b}
.upload-progress-note::before{content:'⟳';display:inline-block;animation:lnspin .8s linear infinite}
.notice--error{border-left-color:#dc2626;background:#fef2f2;color:#991b1b}.admin-form--single h2{margin-top:0}

/* V19 - Breaking News: container and label stay fixed; ONLY headline text moves */
.breaking {
  display:flex !important;
  align-items:stretch !important;
  position:relative !important;
  overflow:hidden !important;
  min-height:38px !important;
  width:100% !important;
  transform:none !important;
}
.breaking > strong {
  flex:0 0 auto !important;
  position:relative !important;
  z-index:5 !important;
  background:#dc2626 !important;
  color:#fff !important;
  transform:none !important;
}
.breaking-track {
  flex:1 1 auto !important;
  min-width:0 !important;
  position:relative !important;
  overflow:hidden !important;
  background:#dc2626 !important;
  padding:0 !important;
  display:block !important;
  transform:none !important;
}
.breaking-marquee {
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  height:100% !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:34px !important;
  width:max-content !important;
  max-width:none !important;
  white-space:nowrap !important;
  padding-left:100% !important;
  box-sizing:content-box !important;
  animation:tickerMoveV19 var(--ticker-speed,35s) linear infinite !important;
  will-change:transform !important;
  transform:none !important;
}
.breaking-marquee a,.breaking-marquee span {
  flex:0 0 auto !important;
  display:inline-block !important;
  color:#fff !important;
  text-decoration:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
}
@keyframes tickerMoveV19 {
  from { transform:translate3d(0,0,0); }
  to { transform:translate3d(-100%,0,0); }
}
.breaking:hover .breaking-marquee { animation-play-state:paused !important; }
/* Login logo sizing: keep the desktop admin login branding compact. */
.admin-login > .brand .admin-brand__image,
.admin-brand__image { display:block; width:auto; max-width:220px; max-height:72px; object-fit:contain; }
@media (max-width: 620px) {
  .admin-login > .brand .admin-brand__image,
  .admin-brand__image { max-width:180px; max-height:58px; }
}

/* Navigasi kategori utama: header biru dengan scroll horizontal di layar kecil. */
.hero-category-nav { grid-column: 1 / -1; overflow: hidden; background: var(--blue); }
.hero-category-nav__inner { display: flex; min-width: max-content; overflow-x: auto; scrollbar-width: none; }
.hero-category-nav__inner::-webkit-scrollbar { display: none; }
.hero-category-nav a { display: block; padding: 12px 18px; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.hero-category-nav a:hover, .hero-category-nav a.active { background: var(--blue-dark); color: #fff; }
@media (max-width: 520px) {
  .hero-category-nav a { padding: 11px 14px; font-size: 11px; }
}

/* Keduanya adalah baris penuh di dalam grid hero; kartu hero tetap di kolomnya. */
.hero-grid > .hero-category-nav,
.hero-grid > .breaking { grid-column: 1 / -1; }

/* Kompatibilitas markup ticker publik: HTML memakai breaking-scroll, admin memakai breaking-marquee. */
.breaking-scroll {
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  height:100% !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:34px !important;
  width:max-content !important;
  max-width:none !important;
  white-space:nowrap !important;
  padding-left:100% !important;
  box-sizing:content-box !important;
  animation:tickerMoveV19 var(--ticker-speed,35s) linear infinite !important;
  will-change:transform !important;
  
}
.breaking-scroll a,
.breaking-scroll span {
  flex:0 0 auto !important;
  display:inline-block !important;
  color:#fff !important;
  text-decoration:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
}
.breaking:hover .breaking-scroll { animation-play-state:paused !important; }

/* Ticker aman: headline masuk dari tepi kanan area biru dan bergerak melintasi track. */
.breaking-track { position:relative !important; display:block !important; overflow:hidden !important; }
.breaking-scroll {
  left:100% !important;
  top:0 !important;
  height:100% !important;
  width:max-content !important;
  padding-left:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  animation:tickerMoveSafe var(--ticker-speed,35s) linear infinite !important;
}
@keyframes tickerMoveSafe {
  from { transform:translateX(0); }
  to { transform:translateX(-100%); }
}

/* Tampilkan headline sejak awal; setelah itu tetap bergerak ke kiri sesuai durasi admin. */
.breaking-scroll { left:0 !important; padding-left:0 !important; animation-name:tickerMoveVisible !important; }
@keyframes tickerMoveVisible {
  from { transform:translateX(0); }
  to { transform:translateX(-100%); }
}

/* Menu kategori mobile: satu baris, scroll horizontal, tidak tertimpa ticker. */
.hero-category-nav {
  position:relative !important;
  z-index:20 !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
.hero-category-nav__inner {
  display:flex !important;
  flex-wrap:nowrap !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
  touch-action:pan-x !important;
}
.hero-category-nav__inner::-webkit-scrollbar { display:none !important; }
.hero-category-nav a {
  flex:0 0 auto !important;
  position:relative !important;
  z-index:21 !important;
  white-space:nowrap !important;
}
@media (max-width:820px) {
  .hero-category-nav { grid-column:1 / -1 !important; }
  .hero-category-nav__inner { gap:0 !important; }
}

/* Header kategori, Breaking News, dan hero harus tersusun rapat tanpa celah putih. */
.hero-grid { row-gap:0 !important; }
.hero-grid > .hero-category-nav,
.hero-grid > .breaking { margin:0 !important; }

/* Tidak ada celah antar blok utama pada halaman depan. */
.hero-grid {
  gap:0 !important;
  row-gap:0 !important;
  column-gap:0 !important;
  margin-top:0 !important;
}
.hero-grid > .hero-category-nav,
.hero-grid > .breaking,
.hero-grid > .hero-story {
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* Mobile: susun tiga blok utama sebagai alur blok murni tanpa track/grid gap. */
@media (max-width: 820px) {
  .hero-grid {
    display:block !important;
    margin-top:0 !important;
    padding-top:0 !important;
  }
  .hero-grid > .hero-category-nav,
  .hero-grid > .breaking,
  .hero-grid > .hero-story {
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding-top:0 !important;
  }
  .hero-grid > .hero-story { margin-top:0 !important; }
}

/* Breaking News tetap satu baris: label merah di kiri, ticker biru di kanan. */
@media (max-width:820px) {
  .hero-grid > .breaking {
    display:flex !important;
    flex-direction:row !important;
    align-items:stretch !important;
    width:100% !important;
    min-height:38px !important;
  }
  .hero-grid > .breaking > .breaking-label,
  .hero-grid > .breaking > strong {
    display:inline-flex !important;
    flex:0 0 auto !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .hero-grid > .breaking > .breaking-track {
    display:block !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    overflow:hidden !important;
  }
}

/* Rapatkan header biru + ticker ke hero tanpa mengubah ukuran hero. */
@media (max-width:820px) {
  .hero-grid > .hero-category-nav,
  .hero-grid > .breaking,
  .hero-grid > .hero-story {
    border-radius:0 !important;
    border-top:0 !important;
    border-bottom:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
  }
  .hero-grid > .hero-story { position:relative !important; top:-1px !important; }
}

/* Kembalikan posisi hero; kerapatan header tetap dipertahankan. */
@media (max-width:820px) {
  .hero-grid > .hero-story { top:0 !important; }
}


/* =========================================================
   V20 - Breaking News sync dengan menu admin + ticker mulus
   ========================================================= */
.breaking-track {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.breaking-scroll {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 34px !important;
  width: max-content !important;
  max-width: none !important;
  padding: 0 !important;
  white-space: nowrap !important;
  animation: breakingTickerV20 var(--ticker-speed, 35s) linear infinite !important;
  will-change: transform !important;
}

.breaking-scroll a,
.breaking-scroll span {
  flex: 0 0 auto !important;
  display: inline-block !important;
  color: #fff !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

@keyframes breakingTickerV20 {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.breaking:hover .breaking-scroll {
  animation-play-state: paused !important;
}

/* Jika hanya satu teks manual, tetap bergerak dan mengulang tanpa jeda. */
.breaking-scroll span + span {
  margin-left: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .breaking-scroll {
    animation: none !important;
    transform: none !important;
  }
}


/* =========================================================
   V22 - Breaking News benar-benar terpisah dari Hero
   ========================================================= */
.breaking.breaking--spaced {
  margin-bottom: 18px !important;
  position: relative !important;
  z-index: 20 !important;
}

/* Spacer nyata setelah ticker. Margin pada elemen berikutnya
   dipakai agar tidak mungkin tertutup oleh hero/overlay. */
.hero-grid > .breaking.breaking--spaced + .hero-story {
  margin-top: 18px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Hero tidak boleh merayap ke area ticker. */
.hero-grid > .hero-story {
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

@media (max-width: 820px) {
  .hero-grid > .breaking.breaking--spaced + .hero-story {
    margin-top: 16px !important;
  }
  .breaking.breaking--spaced {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 520px) {
  /* Judul panjang harus tetap berada di dalam kartu hero,
     bukan naik ke belakang Breaking News. */
  .hero-grid > .hero-story {
    min-height: 540px !important;
  }
  .hero-grid > .breaking.breaking--spaced + .hero-story {
    margin-top: 16px !important;
  }
  .hero-story__overlay {
    padding: 24px !important;
  }
  .hero-story h1 {
    font-size: 34px !important;
    line-height: 1.02 !important;
    margin-top: 10px !important;
  }
  .hero-story p {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
}


/* Mobile hero headline fix */
@media (max-width: 520px) { .hero-story__overlay { padding: 16px 16px 15px; justify-content: flex-end; background: linear-gradient(180deg, rgba(15,29,58,.02) 0%, rgba(15,29,58,.82) 62%, rgba(15,29,58,.96) 100%); } .hero-story h1 { max-width: 100%; margin: 7px 0 5px; font-size: clamp(22px, 6.5vw, 28px); line-height: 1.08; letter-spacing: -.02em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .hero-story p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; line-height: 1.35; } .hero-story .eyebrow { font-size: 9px; } } @media (max-width: 380px) { .hero-story__overlay { padding: 13px; } .hero-story h1 { font-size: 22px; } .hero-story p { font-size: 11px; } }


/* Final mobile hero readability fix */
@media (max-width: 520px) {
  .hero-grid > .hero-story { min-height: 0 !important; aspect-ratio: 4 / 3 !important; }
  .hero-story__overlay { padding: 14px !important; background: linear-gradient(180deg, rgba(15,29,58,0) 32%, rgba(15,29,58,.76) 68%, rgba(15,29,58,.96) 100%) !important; }
  .hero-story h1 { margin: 6px 0 4px !important; font-size: clamp(21px, 6vw, 26px) !important; line-height: 1.08 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; }
  .hero-story p { margin: 0 !important; font-size: 11px !important; line-height: 1.3 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 1 !important; overflow: hidden !important; }
}
@media (max-width: 380px) { .hero-grid > .hero-story { aspect-ratio: 1 / 1 !important; } .hero-story__overlay { padding: 12px !important; } .hero-story h1 { font-size: 20px !important; } }


/* Final Breaking News ticker fix */
.breaking-track { position: relative !important; display: block !important; overflow: hidden !important; }
.breaking-scroll { position: absolute !important; left: 0 !important; top: 0 !important; height: 100% !important; width: max-content !important; display: inline-flex !important; align-items: center !important; gap: 34px !important; padding: 0 !important; white-space: nowrap !important; animation: breakingTickerFinal var(--ticker-speed, 35s) linear infinite !important;  will-change: transform !important; }
.breaking-scroll a, .breaking-scroll span { flex: 0 0 auto !important; white-space: nowrap !important; }
@keyframes breakingTickerFinal { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }


/* Professional article sharing buttons */
.article-share { display:flex !important; align-items:center !important; gap:18px !important; flex-wrap:wrap !important; margin:28px 0 10px !important; padding:16px 0 !important; border-top:1px solid #e5e7eb !important; border-bottom:1px solid #e5e7eb !important; font-family:Inter,Arial,sans-serif !important; }
.article-share > strong { flex:0 0 100% !important; margin:0 !important; color:#64748b !important; font-size:11px !important; font-weight:800 !important; letter-spacing:.12em !important; text-transform:uppercase !important; }
.article-share__buttons { display:flex !important; align-items:center !important; gap:12px !important; flex-wrap:wrap !important; }
.article-share__button { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:44px !important; height:44px !important; min-width:44px !important; padding:0 !important; border:1px solid #e5e7eb !important; border-radius:12px !important; background:#f8fafc !important; color:#334155 !important; box-shadow:0 2px 6px rgba(15,23,42,.08) !important; text-decoration:none !important; cursor:pointer !important; transition:transform .18s ease,box-shadow .18s ease,background .18s ease !important; }
.article-share__button svg { width:21px !important; height:21px !important; display:block !important; fill:currentColor !important; stroke:currentColor !important; }
.article-share__button:hover,.article-share__button:focus-visible { transform:translateY(-2px) !important; box-shadow:0 5px 12px rgba(15,23,42,.16) !important; outline:none !important; }
.article-share__button--wa { color:#16a34a !important; background:#f0fdf4 !important; border-color:#bbf7d0 !important; }
.article-share__button--fb { color:#1877f2 !important; background:#fef2f2 !important; border-color:#fecaca !important; }
.article-share__button--tg { color:#159bd7 !important; background:#effaff !important; border-color:#bae6fd !important; }
.article-share__button--ig { color:#d62976 !important; background:#fff1f7 !important; border-color:#fbcfe8 !important; }
.article-share__button--copy { color:#475569 !important; background:#f1f5f9 !important; }
@media (max-width:520px) { .article-share { gap:12px !important; margin:22px 0 8px !important; padding:14px 0 !important; } .article-share__buttons { gap:10px !important; } .article-share__button { width:42px !important; height:42px !important; min-width:42px !important; border-radius:11px !important; } }


/* Share icon labels: accessible but visually hidden */
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.article-share__button { position:relative !important; font-size:0 !important; line-height:0 !important; }


/* Compact desktop admin login logo */
.admin-login > a.admin-brand img.admin-brand__image { width:180px !important; max-width:180px !important; height:auto !important; max-height:58px !important; object-fit:contain !important; }
@media (max-width:520px) { .admin-login > a.admin-brand img.admin-brand__image { width:150px !important; max-width:150px !important; max-height:50px !important; } }


/* AdSense-safe in-flow responsive slots */
.public-ad { position:relative !important; display:block !important; width:100% !important; min-height:0 !important; margin:20px auto !important; padding:0 !important; overflow:visible !important; text-align:center !important; clear:both !important; }
.public-ad__label { margin:0 0 6px !important; font-size:10px !important; line-height:1.3 !important; color:#94a3b8 !important; letter-spacing:.08em !important; text-transform:uppercase !important; }
.public-ad__slot { display:block !important; width:100% !important; max-width:100% !important; min-height:0 !important; overflow:hidden !important; }
.public-ad__slot ins.adsbygoogle { display:block !important; width:100% !important; max-width:100% !important; min-height:100px !important; }
.public-ad a { display:inline-block !important; max-width:100% !important; }
@media (max-width:620px) { .public-ad { margin:16px auto !important; } .public-ad__slot ins.adsbygoogle { min-height:90px !important; } }


/* Read-also cards: clear blue headlines, no stray boxes */
.read-also { display:block !important; margin:28px 0 !important; padding:16px 0 !important; border-top:2px solid #dc2626 !important; border-bottom:1px solid #fee2e2 !important; font-family:Inter,Arial,sans-serif !important; }
.read-also__heading { display:flex !important; align-items:baseline !important; gap:10px !important; margin:0 0 12px !important; }
.read-also__heading .section-kicker { color:#dc2626 !important; font-size:11px !important; font-weight:800 !important; letter-spacing:.12em !important; }
.read-also__heading strong { color:#dc2626 !important; font-size:18px !important; font-weight:800 !important; }
.read-also__item { display:flex !important; align-items:center !important; gap:10px !important; padding:12px 0 !important; border-top:1px solid #e5e7eb !important; color:#dc2626 !important; text-decoration:none !important; }
.read-also__item strong { flex:1 !important; color:#dc2626 !important; font-family:Inter,Arial,sans-serif !important; font-size:16px !important; line-height:1.35 !important; }
.read-also__category { color:#64748b !important; font-size:11px !important; font-weight:700 !important; text-transform:uppercase !important; }
.read-also__arrow { color:#dc2626 !important; font-size:20px !important; }
@media(max-width:620px){.read-also{margin:22px 0 !important;padding:14px 0 !important}.read-also__heading strong{font-size:16px !important}.read-also__item strong{font-size:15px !important}}


/* Published pages menu: hidden until clicked; five rows per column */
.footer-page-menu { position:relative !important; display:block !important; margin:14px 0 0 !important; z-index:50 !important; }
.page-menu__toggle { border:1px solid #fecaca !important; border-radius:8px !important; padding:10px 14px !important; background:#fef2f2 !important; color:#b91c1c !important; font:700 12px Inter,Arial,sans-serif !important; cursor:pointer !important; }
.footer-page-menu .page-menu__toggle { width:auto !important; min-width:120px !important; text-align:left !important; }
.page-menu__panel { position:absolute !important; bottom:calc(100% + 8px) !important; left:0 !important; display:grid !important; grid-auto-flow:column !important; grid-template-rows:repeat(5,minmax(34px,auto)) !important; grid-auto-columns:minmax(180px,1fr) !important; gap:0 18px !important; width:max-content !important; min-width:220px !important; max-width:min(90vw,760px) !important; padding:12px !important; border:1px solid #fee2e2 !important; border-radius:10px !important; background:#fff !important; box-shadow:0 14px 35px rgba(15,23,42,.16) !important; }
.page-menu__panel[hidden] { display:none !important; }
.page-menu__panel:not([hidden]) { display:grid !important; }
.page-menu__panel a { display:flex !important; align-items:center !important; padding:8px 10px !important; color:#1e3a8a !important; font:600 13px/1.3 Inter,Arial,sans-serif !important; text-decoration:none !important; white-space:normal !important; }
.page-menu__panel a:hover { border-radius:6px !important; background:#fef2f2 !important; color:#b91c1c !important; }
@media(max-width:620px){.footer-page-menu{margin:12px 0 0 !important}.page-menu__panel{position:absolute !important; bottom:calc(100% + 8px) !important; top:auto !important; width:min(92vw,620px) !important; max-width:92vw !important; overflow-x:auto !important; grid-template-rows:repeat(5,minmax(36px,auto)) !important; grid-auto-columns:minmax(170px,1fr) !important; gap:0 14px !important}.footer-page-menu .page-menu__toggle{width:auto !important}}

/* Keep the footer page panel inside the mobile viewport when the Redaksi column is on the right. */
@media(max-width:620px){.footer-page-menu .page-menu__panel{left:auto !important;right:0 !important}}

/* Breaking News must remain readable and moving even when the device requests reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .breaking-scroll {
    animation: breakingTickerFinal var(--ticker-speed, 35s) linear infinite !important;

  }
}

/* Keep Breaking News continuously moving; hovering must not stop the ticker. */
.breaking:hover .breaking-track,
.breaking:hover .breaking-scroll,
.breaking:hover .breaking-marquee { animation-play-state: running !important; }

/* Admin: always show the three-line settings button; open the full menu only on click. */
.admin-menu-button:not(.admin-menu-button--top) { display:grid !important; position:fixed !important; top:16px !important; left:16px !important; }
.admin-drawer:not(.is-open) { transform:translateX(-105%) !important; visibility:hidden !important; }
.admin-drawer.is-open { transform:translateX(0) !important; visibility:visible !important; }

/* News editor category picker */
.category-picker { position:relative; }
.category-picker__toggle { width:100%; min-height:42px; display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border:1px solid #d8dee9; border-radius:4px; background:#fff; color:var(--ink); font:inherit; font-size:13px; cursor:pointer; }
.category-picker__toggle:hover,.category-picker__toggle:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(185,28,28,.1); outline:0; }
.category-picker__panel { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:120; max-height:250px; overflow:auto; padding:8px; border:1px solid #d8dee9; border-radius:8px; background:#fff; box-shadow:0 12px 28px rgba(15,23,42,.16); }
.category-picker__panel[hidden] { display:none; }
.category-picker__option { display:flex !important; grid-template-columns:none !important; align-items:center; gap:9px; padding:9px 8px; border-radius:5px; color:var(--ink) !important; font-size:13px !important; font-weight:600 !important; cursor:pointer; }
.category-picker__option:hover { background:#fef2f2; }
.category-picker__option input { width:16px !important; height:16px; margin:0; accent-color:var(--blue); }

/* Category picker: blue trigger and upward floating panel without layout shift. */
.category-picker__toggle { border-color:#dc2626 !important; background:#dc2626 !important; color:#fff !important; font-weight:800 !important; }
.category-picker__toggle:hover,.category-picker__toggle:focus { border-color:#b91c1c !important; background:#b91c1c !important; box-shadow:0 0 0 3px rgba(37,99,235,.2) !important; }
.category-picker__panel { top:auto !important; bottom:calc(100% + 7px) !important; margin:0 !important; }
.category-picker__option input:checked + span { color:#dc2626 !important; font-weight:800 !important; }

/* Category picker popup: appear below the blue button, floating over the form. */
.category-picker__panel { top:calc(100% + 7px) !important; bottom:auto !important; left:0 !important; right:0 !important; z-index:9999 !important; }

/* Import form: keep the category label and checkbox picker aligned like the news editor. */
.import-category-field { margin: 0 0 16px; }
.import-category-label { display: block !important; color: #475569; font-size: 12px; font-weight: 700; }
.import-category-field .category-picker { margin-top: 7px; }

/* Category choices: one aligned row per checkbox and category name, including mobile. */
.admin-form .category-picker__panel label.category-picker__option,
.category-picker__panel label.category-picker__option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  white-space: normal !important;
}
.admin-form .category-picker__panel label.category-picker__option input[type="checkbox"],
.category-picker__panel label.category-picker__option input[type="checkbox"] {
  display: block !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.category-picker__panel label.category-picker__option span {
  display: block !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

/* Import category picker: compact, readable, and consistent before saving a draft. */
.import-category-field { position: relative; max-width: 100%; padding: 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }
.import-category-label { margin-bottom: 0 !important; font-size: 12px !important; letter-spacing: .02em; text-transform: uppercase; }
.import-category-field .category-picker { margin-top: 8px !important; }
.import-category-field .category-picker__toggle { min-height: 44px; border-radius: 8px !important; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.import-category-field .category-picker__panel { max-height: 220px !important; padding: 6px !important; border-radius: 8px !important; }
.import-category-field .category-picker__option { min-height: 40px !important; border-bottom: 1px solid #f1f5f9; }
.import-category-field .category-picker__option:last-child { border-bottom: 0; }
.import-category-field > small { display: block; margin-top: 7px; color: #64748b; line-height: 1.45; }
@media (max-width: 620px) { .import-category-field { padding: 12px; } .import-category-field .category-picker__panel { max-height: 190px !important; } }
/* News list actions */
.table-actions { display:flex !important; align-items:center; flex-wrap:wrap; gap:6px !important; }
.table-actions a.table-action--edit { display:inline-flex !important; align-items:center; justify-content:center; min-width:54px; padding:7px 11px !important; border:1px solid #dc2626 !important; border-radius:7px !important; background:#dc2626 !important; color:#fff !important; font-size:11px !important; font-weight:800 !important; text-decoration:none !important; }
.table-actions a.table-action--edit:hover { background:#b91c1c !important; border-color:#b91c1c !important; }
.table-actions a:not(.table-action--edit), .table-actions button { display:inline-flex !important; align-items:center; justify-content:center; min-width:54px; padding:7px 10px !important; border:1px solid #d8dee9 !important; border-radius:7px !important; background:#fff !important; color:#1e3a8a !important; font-size:11px !important; font-weight:700 !important; }


/* Image optimization layout: hero utama ringkas dan konsisten di semua layar. */
.hero-grid > .hero-story {
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  max-height: 520px !important;
}
.hero-story > a,
.hero-story > a > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.hero-story > a > img {
  object-fit: cover !important;
}
.article-page__hero {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 620px !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
}
@media (max-width: 820px) {
  .hero-grid > .hero-story {
    aspect-ratio: 4 / 3 !important;
    max-height: none !important;
  }
  .article-page__hero {
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
  }
}
@media (max-width: 520px) {
  .hero-grid > .hero-story { aspect-ratio: 4 / 3 !important; }
  .hero-story__overlay { padding: 14px !important; }
  .hero-story h1 { font-size: clamp(21px, 6vw, 27px) !important; line-height: 1.08 !important; }
}
@media (max-width: 380px) {
  .hero-grid > .hero-story { aspect-ratio: 4 / 3 !important; }
}


/* Final hero spacing fix: setiap kolom mengikuti kontennya, bukan tinggi kolom sebelah. */
.hero-grid {
  align-items: start !important;
}
.hero-grid > .hero-story,
.hero-grid > .hero-side {
  align-self: start !important;
}
.hero-side {
  align-content: start !important;
  grid-auto-rows: max-content !important;
}
@media (max-width: 820px) {
  .hero-grid { align-items: stretch !important; }
  .hero-grid > .hero-story { align-self: stretch !important; }
}


/* Desktop: alirkan kartu berita ke ruang kosong di bawah hero utama. */
@media (min-width: 821px) {
  .hero-grid > .hero-side {
    display: contents !important;
  }
  .hero-grid > .hero-side > .news-card {
    align-self: start !important;
    min-width: 0 !important;
  }
  .hero-grid > .hero-story {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .hero-grid > .hero-side > .news-card:nth-child(1) {
    grid-column: 2 !important;
    grid-row: auto !important;
  }
  .hero-grid > .hero-side > .news-card:nth-child(2) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .hero-grid > .hero-side > .news-card:nth-child(3) {
    grid-column: 2 !important;
    grid-row: auto !important;
  }
}
@media (max-width: 820px) {
  .hero-grid > .hero-side {
    display: grid !important;
  }
}


/* Hero desktop final: dua kolom independen, tanpa ruang kosong akibat tinggi kolom kanan. */
@media (min-width: 821px) {
  .hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.7fr) minmax(310px, .85fr) !important;
    grid-auto-rows: max-content !important;
    align-items: start !important;
    row-gap: 22px !important;
    column-gap: 28px !important;
  }
  .hero-grid > .hero-story {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .hero-grid > .hero-side--top {
    display: block !important;
    grid-column: 2 !important;
    grid-row: auto !important;
  }
  .hero-grid > .hero-below-left {
    display: block !important;
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .hero-grid > .hero-side--bottom {
    display: block !important;
    grid-column: 2 !important;
    grid-row: auto !important;
  }
  .hero-grid > .hero-side--top,
  .hero-grid > .hero-below-left,
  .hero-grid > .hero-side--bottom {
    align-self: start !important;
    min-width: 0 !important;
  }
  .hero-grid > .hero-side--top .news-card,
  .hero-grid > .hero-below-left .news-card,
  .hero-grid > .hero-side--bottom .news-card {
    margin: 0 !important;
  }
}
@media (max-width: 820px) {
  .hero-grid > .hero-below-left { display: block !important; width: 100% !important; }
  .hero-grid > .hero-side--top,
  .hero-grid > .hero-side--bottom { display: block !important; width: 100% !important; }
}

/* Desktop v50: kolom hero benar-benar independen, tidak berbagi tinggi baris grid. */
@media (min-width: 821px) {
  .hero-grid { display: grid !important; grid-template-columns: minmax(0, 1.7fr) minmax(310px, .85fr) !important; grid-template-rows: auto !important; align-items: start !important; }
  .hero-grid > .hero-column { display: flex !important; flex-direction: column !important; align-self: start !important; min-width: 0 !important; gap: 22px !important; }
  .hero-grid > .hero-column--left { grid-column: 1 !important; grid-row: auto !important; }
  .hero-grid > .hero-column--right { grid-column: 2 !important; grid-row: auto !important; }
  .hero-grid > .hero-column .news-card { margin: 0 !important; align-self: stretch !important; }
}
@media (max-width: 820px) {
  .hero-grid > .hero-column { display: flex !important; flex-direction: column !important; gap: 22px !important; width: 100% !important; }
}

/* Desktop v52: dua berita lanjutan berdampingan di bawah berita utama. */
.hero-under-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.hero-under-grid .news-card { min-width: 0; }
@media (max-width: 520px) {
  .hero-under-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* Desktop v53: hero utama penuh dari kiri ke kanan, berita berikutnya 2 per baris. */
@media (min-width: 821px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: max-content !important;
    align-items: start !important;
    row-gap: 22px !important;
  }
  .hero-grid > .hero-story--full,
  .hero-grid > .hero-news-grid {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  .hero-grid > .hero-story--full {
    aspect-ratio: 16 / 7 !important;
    max-height: 560px !important;
  }
  .hero-news-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 28px !important;
  }
  .hero-news-grid .news-card { min-width: 0 !important; }
}
@media (max-width: 820px) {
  .hero-grid > .hero-story--full,
  .hero-grid > .hero-news-grid { width: 100% !important; }
  .hero-news-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 22px !important; }
}

/* Progressive loading: berita tambahan dimuat saat diminta, tanpa reload halaman. */
.load-more-wrap { display: flex; justify-content: center; margin: 28px 0 8px; }
.load-more-wrap .button { min-width: 190px; text-align: center; }
.load-more-wrap .button:disabled { opacity: .65; cursor: wait; }


/* Load-more button: teks lebih jelas dan area sentuh nyaman di desktop maupun HP. */
.load-more-wrap { margin: 30px 0 12px !important; }
.load-more-wrap .button {
  min-width: 250px !important;
  min-height: 48px !important;
  padding: 0 24px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
}
@media (max-width: 520px) {
  .load-more-wrap .button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    font-size: 15px !important;
  }
}
CSS


/* Penyelarasan heading sidebar dengan bagian Berita Terbaru. */
@media (min-width: 821px) {
  .content-layout > .trending { padding-top: 10px !important; }
}


/* Thumbnail populer diperbesar agar foto tetap jelas di sidebar. */
.popular-item {
  grid-template-columns: 84px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
}
.popular-item__image {
  width: 84px !important;
  height: 60px !important;
  object-fit: cover !important;
  border-radius: 5px !important;
}
@media (max-width: 820px) {
  .popular-item {
    grid-template-columns: 88px minmax(0, 1fr) !important;
  }
  .popular-item__image {
    width: 88px !important;
    height: 62px !important;
  }
}


/* Thumbnail populer v58: ukuran lebih besar untuk keterbacaan visual. */
.popular-item {
  grid-template-columns: 120px minmax(0, 1fr) !important;
  gap: 14px !important;
}
.popular-item__image {
  width: 120px !important;
  height: 82px !important;
  border-radius: 6px !important;
}
@media (max-width: 820px) {
  .popular-item { grid-template-columns: 120px minmax(0, 1fr) !important; }
  .popular-item__image { width: 120px !important; height: 82px !important; }
}


/* Thumbnail populer v59: sedikit lebih besar sesuai permintaan. */
.popular-item {
  grid-template-columns: 150px minmax(0, 1fr) !important;
  gap: 14px !important;
}
.popular-item__image {
  width: 150px !important;
  height: 100px !important;
}
@media (max-width: 820px) {
  .popular-item { grid-template-columns: 150px minmax(0, 1fr) !important; }
  .popular-item__image { width: 150px !important; height: 100px !important; }
}


/* Admin desktop: tombol hamburger dashboard harus terlihat jelas di atas topbar. */
.admin-menu-button:not(.admin-menu-button--top) {
  display: flex !important;
  width: 44px !important;
  height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding: 0 !important;
  border: 1px solid #dbe3ef !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 14px rgba(15,23,42,.14) !important;
  z-index: 1005 !important;
  cursor: pointer !important;
}
.admin-menu-button:not(.admin-menu-button--top) span {
  display: block !important;
  width: 20px !important;
  height: 3px !important;
  border-radius: 3px !important;
  background: #172033 !important;
}


/* Load-more v60: sedikit digeser ke kanan agar lebih seimbang dengan sidebar. */
@media (min-width: 821px) {
  .content-layout .load-more-wrap { transform: translateX(70px); }
}
@media (max-width: 820px) {
  .content-layout .load-more-wrap { transform: none; }
}


/* Mobile v61: foto berita utama lebih besar daripada kartu berita lanjutan. */
@media (max-width: 820px) {
  .hero-grid > .hero-story--full {
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .hero-grid > .hero-story--full > a,
  .hero-grid > .hero-story--full > a > img {
    height: 100% !important;
  }
  .hero-news-grid .news-card__image img {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }
}
@media (max-width: 380px) {
  .hero-grid > .hero-story--full { aspect-ratio: 4 / 3 !important; }
}


/* Baca Juga v62: hanya judul dan panah UTF-8 yang bersih. */
.read-also__item { justify-content: space-between !important; }
.read-also__item strong { margin: 0 !important; }
.read-also__arrow {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  color: #dc2626 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-family: Arial, sans-serif !important;
}


/* Halaman publik: pertahankan jarak dan baris kosong seperti saat diedit. */
.article-page--static > .article-page__body {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  line-height: 1.8 !important;
  color: var(--ink) !important;
}
.article-page--static > .article-page__body p {
  margin: 0 0 1.15em !important;
}
@media (max-width: 620px) {
  .article-page--static > .article-page__body {
    line-height: 1.7 !important;
  }
}


/* Video artikel: ukuran dan perilaku disamakan dengan foto berita. */
.article-page__body video,
.article-page__body iframe {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 280px !important;
  margin: 24px 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #0f172a !important;
}
.article-page__body video {
  object-fit: contain !important;
}
@media (max-width: 620px) {
  .article-page__body video,
  .article-page__body iframe {
    min-height: 0 !important;
    margin: 18px 0 !important;
    border-radius: 6px !important;
  }
}


/* Video utama berita dari kolom URL video. */
.article-video {
  max-width: 100%;
  margin: 24px 0 0;
}
.article-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 8px;
  background: #0f172a;
  object-fit: contain;
}
.article-video figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
@media (max-width: 620px) {
  .article-video { margin-top: 18px; }
  .article-video video { border-radius: 6px; }
}


/* Navigasi global pada mode baca dan halaman statis. */
.reading-navigation { margin-top: 18px; }
.reading-navigation__categories {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  background: #b91c1c;
  scrollbar-width: none;
}
.reading-navigation__categories::-webkit-scrollbar { display: none; }
.reading-navigation__categories a {
  flex: 0 0 auto;
  padding: 11px 16px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.reading-navigation__categories a:hover,
.reading-navigation__categories a.active { background: #0f3ca8; }
.reading-navigation__breaking {
  display: flex;
  align-items: stretch;
  min-height: 34px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-top: 0;
}
.reading-navigation__breaking strong {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 14px;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  letter-spacing: .08em;
}
.reading-navigation__breaking > div { min-width: 0; overflow: hidden; }
.reading-navigation__breaking > div > div {
  display: flex;
  gap: 30px;
  width: max-content;
  padding: 9px 16px;
  animation: readingTickerMove 35s linear infinite;
}
.reading-navigation__breaking a,
.reading-navigation__breaking span {
  color: #475569;
  font-size: 11px;
  white-space: nowrap;
  text-decoration: none;
}
@keyframes readingTickerMove { from { transform: translateX(0); } to { transform: translateX(-45%); } }
@media (max-width: 620px) {
  .reading-navigation { margin-top: 12px; }
  .reading-navigation__categories a { padding: 10px 13px; font-size: 10px; }
  .reading-navigation__breaking strong { padding: 0 10px; font-size: 9px; }
  .reading-navigation__breaking > div > div { gap: 20px; padding: 9px 12px; }
}


/* Hide AdSense slot before Google confirms it is filled. */
.public-ad:has(ins.adsbygoogle) {
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Auto-collapse empty AdSense slots */
.public-ad.ad-pending {
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.public-ad.ad-ready {
  visibility: visible !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Evidence-safe images: never crop uploaded news photos. Preserve the full frame
   in article hero images and fixed-size cards by using contain with a neutral matte. */
.article-page__hero {
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #eef2f7 !important;
}
.hero-story img,
.news-card__image img,
.popular-item__image {
  object-fit: contain !important;
  object-position: center !important;
  background: #eef2f7 !important;
}

/* Beri ruang visual yang jelas antara foto berita utama dan berita kedua. */
.hero-grid > .hero-story--full {
  margin-bottom: 28px !important;
}
.hero-grid > .hero-news-grid {
  row-gap: 28px !important;
}
@media (max-width: 820px) {
  .hero-grid > .hero-story--full { margin-bottom: 22px !important; }
}

/* Admin responsive containment: prevent page-wide horizontal wobble on mobile. */
html:has(.admin-body),
body.admin-body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.admin-body *,
.admin-body *::before,
.admin-body *::after { box-sizing: border-box; }
.admin-body .admin-topbar__inner,
.admin-body .admin-page,
.admin-body .admin-page__heading,
.admin-body .admin-form,
.admin-body .admin-filter,
.admin-body .bulk-actions { min-width: 0; max-width: 100%; }
.admin-body .admin-page { overflow: hidden; }
.admin-body .admin-page__heading { display: flex; gap: 18px; }
.admin-body .admin-page__heading > div:first-child { min-width: 0; max-width: 100%; }
.admin-body .heading-actions { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.admin-body .heading-actions .button { white-space: normal; max-width: 100%; }
.admin-body .admin-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.admin-body .admin-table { min-width: 680px; }
.admin-body .admin-form input,
.admin-body .admin-form select,
.admin-body .admin-form textarea,
.admin-body .admin-filter input,
.admin-body .admin-filter select { max-width: 100%; }
@media (max-width: 760px) {
  .admin-body .admin-page { width: calc(100% - 24px); max-width: calc(100% - 24px); margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
  .admin-body .admin-page__heading { width: 100%; padding: 16px; gap: 14px; }
  .admin-body .admin-page__heading h1 { overflow-wrap: anywhere; }
  .admin-body .heading-actions { width: 100%; }
  .admin-body .heading-actions .button { flex: 1 1 140px; text-align: center; }
  .admin-body .bulk-actions { align-items: stretch !important; }
  .admin-body .bulk-actions > * { max-width: 100%; }
  .admin-body .bulk-actions select { width: 100%; min-width: 0 !important; }
  .admin-body .bulk-actions button { width: 100%; }
  .admin-body .admin-filter { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; }
  .admin-body .admin-filter > * { width: 100%; min-width: 0; }
}




/* Manus: smaller public article title v2 */
.article-page h1 { font-size: clamp(34px, 4.8vw, 62px) !important; }
@media (max-width: 620px) { .article-page h1 { font-size: 34px !important; line-height: 1.05 !important; } }


/* Manus: full image on white background v3 */
.article-page__hero { width:100% !important; height:auto !important; max-height:none !important; aspect-ratio:auto !important; object-fit:contain !important; object-position:center !important; background:#fff !important; }


/* Manus: author profile photo v1 */
.article-page__byline { display:flex !important; align-items:center !important; gap:10px !important; flex-wrap:wrap !important; }
.article-page__byline .article-author-photo { width:40px !important; height:40px !important; flex:0 0 40px !important; border-radius:50% !important; object-fit:cover !important; object-position:center !important; border:2px solid #fff !important; box-shadow:0 1px 5px rgba(15,23,42,.18) !important; }


/* Manus: compact author avatar v2 */
.article-page__byline .article-author-photo { width:28px !important; height:28px !important; flex:0 0 28px !important; border-width:1px !important; }

/* Final ticker color alignment: Home and reading mode */
.reading-navigation__breaking {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}
.reading-navigation__breaking > div > div {
  background: #dc2626 !important;
}
.reading-navigation__breaking a,
.reading-navigation__breaking span {
  color: #fff !important;
}

/* Header merah agar logo transparan terlihat jelas. */
.site-header { background: #b91c1c; }
.site-header .brand__text, .site-header .brand__text span, .site-header a, .site-header .menu-button span { color: #fff; }
.site-header .menu-button span { background: #fff; }
.site-header .search-form input { background: #fff; }
.site-header .category-nav { border-top-color: rgba(255,255,255,.25); }
.site-header .category-nav a { color: #fff; }
.site-header .category-nav a:hover, .site-header .category-nav a.active { color: #fecaca; border-color: #fecaca; }

/* Header dan kategori dirapatkan tanpa mengubah bentuk. */
.site-header .header-main { min-height: 70px; gap: 18px; }
.site-header .site-logo { max-height: 52px; }
.site-header .category-nav__inner { align-items: center; }
.site-header .category-nav a { padding: 10px 14px 9px; line-height: 1.1; }
.site-header .category-nav a:first-child { padding-left: 0; }
@media (max-width: 820px) { .site-header .header-main { min-height: 62px; gap: 12px; } .site-header .site-logo { max-height: 46px; } .site-header .category-nav a { padding: 8px 11px 7px; } .site-header .category-nav a:first-child { padding-left: 11px; } }

/* Header dipadatkan vertikal: konten utama tetap naik, bukan bergeser turun. */
.utility-bar { min-height: 24px; }
.utility-bar__inner { min-height: 24px; }
.site-header .header-main { min-height: 56px; gap: 14px; }
.site-header .site-logo { max-height: 44px; }
.site-header .category-nav a { padding-top: 7px; padding-bottom: 6px; }
.site-header .category-nav { min-height: 32px; }
.breaking { min-height: 32px; }
.breaking strong { padding-left: 10px; padding-right: 10px; }
.breaking-track { padding-left: 12px; padding-right: 12px; }
@media (max-width: 820px) { .utility-bar { min-height: 20px; } .utility-bar__inner { min-height: 20px; } .site-header .header-main { min-height: 52px; gap: 10px; } .site-header .site-logo { max-height: 40px; } .site-header .category-nav a { padding-top: 6px; padding-bottom: 5px; } .breaking { min-height: 30px; } }

/* Header dan navigasi menyatu tanpa celah putih. */
.page { padding-top: 0; }
.hero-category-nav { background: #b91c1c; margin-top: 0; }
.hero-category-nav a.active, .hero-category-nav a:hover { background: #991b1b; }


/* Panel Halaman dipusatkan terhadap tombol, tanpa menggeser footer. */
.footer-page-menu .page-menu__panel { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; max-width: min(720px, calc(100vw - 48px)) !important; box-sizing: border-box !important; }
@media (max-width: 620px) { .footer-page-menu .page-menu__panel { left: auto !important; right: 0 !important; transform: none !important; max-width: 92vw !important; } }


/* Keep the lead/hero image styling unchanged; natural ratios apply only to story cards. */
.news-card__image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  background: transparent !important;
}
.news-card__image img,
.hero-news-grid .news-card__image img,
.news-grid .news-card__image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: initial !important;
  object-position: center !important;
  background: transparent !important;
  transform: none !important;
}
.news-card:hover .news-card__image img { transform: none !important; }
.popular-item__image {
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: initial !important;
  object-position: center !important;
  background: transparent !important;
}