/* ===================================================================
   actvisit — Gaya Tampilan Publik (CNN-style)
   Dipakai bersama oleh index.php (beranda) & artikel.php (baca berita)
   =================================================================== */
:root{
  --paper:#FFFFFF; --wash:#F6F3EC; --raise:#FBFAF5;
  --ink:#1C1B19; --ink-soft:#574F45; --ink-faint:#8A8073;
  --accent:#CC0000;        /* merah CNN */
  --accent-deep:#A30000;
  --rule:#E4DED2; --rule-strong:#CFC7B7;
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Newsreader',Georgia,serif;
  --font-ui:'Archivo',system-ui,sans-serif;
  --s-2:1rem; --s-3:1.5rem; --s-4:2rem; --s-5:3rem; --s-6:4rem;
  --container:1200px; --read:720px; --hero:940px;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:1.1875rem; line-height:1.65; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--s-3); }
.wrap-read{ width:100%; max-width:var(--read); margin-inline:auto; padding-inline:var(--s-3); }
.wrap-hero{ width:100%; max-width:var(--hero); margin-inline:auto; padding-inline:var(--s-3); }

/* Foto & placeholder */
.imgwrap{ background:var(--rule); overflow:hidden; }
.imgwrap img{ width:100%; height:100%; object-fit:cover; }
.imgwrap.empty{ background:linear-gradient(135deg,#C9BCA7,#CC0000); position:relative; }
.imgwrap.empty::after{ content:"actvisit"; position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-display); font-weight:900; font-size:1.5rem; color:rgba(255,255,255,.55); letter-spacing:.04em; }

/* Avatar (img atau inisial) */
.avatar{ border-radius:999px; display:inline-grid; place-items:center; background:var(--accent); color:#fff; font-family:var(--font-display); font-weight:700; overflow:hidden; flex:none; }
img.avatar{ object-fit:cover; }
.avatar-sm{ width:38px; height:38px; font-size:.9rem; }
.avatar-md{ width:46px; height:46px; font-size:1.05rem; }
.avatar-lg{ width:60px; height:60px; font-size:1.4rem; }

/* Kicker / eyebrow */
.kicker{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-ui); font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.kicker::before{ content:""; width:7px; height:7px; background:var(--accent); border-radius:1px; }

/* ===== Header ===== */
.topbar{ border-bottom:1px solid var(--rule); font-family:var(--font-ui); font-size:.74rem; letter-spacing:.04em; color:var(--ink-faint); }
.topbar .container{ display:flex; align-items:center; justify-content:space-between; min-height:38px; }
.topbar .date{ text-transform:uppercase; }
.topbar a{ color:var(--ink-soft); } .topbar a:hover{ color:var(--accent); }
.masthead{ border-bottom:3px solid var(--accent); }
.masthead .container{ display:flex; align-items:center; justify-content:space-between; padding-block:var(--s-3); gap:var(--s-2); }
.brandmark{ font-family:var(--font-display); font-weight:900; font-size:clamp(1.7rem,4.5vw,2.4rem); letter-spacing:-.02em; line-height:1; color:var(--ink); }
.brandmark span{ color:var(--accent); }
.brandmark small{ display:block; font-family:var(--font-ui); font-weight:500; font-size:.6rem; letter-spacing:.14em; line-height:1.55; text-transform:uppercase; color:var(--ink-faint); margin-top:.4rem; }
.mainnav ul{ list-style:none; display:flex; gap:var(--s-3); }
.mainnav a{ font-family:var(--font-ui); font-weight:600; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); padding-block:.4rem; position:relative; }
.mainnav a::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--accent); transition:width .2s; }
.mainnav a:hover{ color:var(--accent); } .mainnav a:hover::after{ width:100%; }
.header-actions{ display:flex; align-items:center; gap:.75rem; }
.adminlink{ font-family:var(--font-ui); font-weight:600; font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--rule-strong); border-radius:999px; padding:.45rem .9rem; }
.adminlink:hover{ border-color:var(--accent); color:var(--accent); }

/* ===== Section header ===== */
.section-head{ display:flex; align-items:baseline; gap:var(--s-2); border-bottom:2px solid var(--ink); padding-bottom:.6rem; margin-bottom:var(--s-3); }
.section-head h2{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; letter-spacing:-.01em; }
.block{ padding-block:var(--s-5); }
.block + .block{ border-top:1px solid var(--rule); }

/* ===== Beranda: lead + grid ===== */
.lead-grid{ display:grid; gap:var(--s-4); }
.lead-main .imgwrap{ aspect-ratio:16/9; margin-bottom:var(--s-2); border-radius:3px; }
.lead-main .kicker{ margin-bottom:.7rem; }
.lead-main .headline{ font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,5.2vw,3.2rem); line-height:1.07; letter-spacing:-.015em; margin-bottom:.7rem; }
.lead-main .headline a:hover{ color:var(--accent); }
.lead-main .dek{ font-family:var(--font-body); color:var(--ink-soft); font-size:1.1875rem; line-height:1.5; max-width:36em; margin-bottom:.7rem; }
.lead-main .meta{ font-family:var(--font-ui); font-size:.8rem; color:var(--ink-faint); }
.lead-secondary{ display:grid; gap:var(--s-3); align-content:start; }
.mini{ display:grid; gap:.45rem; padding-bottom:var(--s-3); border-bottom:1px solid var(--rule); }
.mini:last-child{ border-bottom:none; padding-bottom:0; }
.mini .imgwrap{ aspect-ratio:16/9; border-radius:3px; margin-bottom:.3rem; }
.mini .kicker{ font-size:.68rem; }
.mini .headline{ font-family:var(--font-display); font-weight:700; font-size:1.2rem; line-height:1.15; }
.mini .headline a:hover{ color:var(--accent); }

.cards{ display:grid; gap:var(--s-4) var(--s-3); grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.card{ display:grid; gap:.6rem; align-content:start; }
.card .imgwrap{ aspect-ratio:3/2; border-radius:3px; }
.card .kicker{ font-size:.68rem; }
.card .headline{ font-family:var(--font-display); font-weight:700; font-size:1.18rem; line-height:1.13; }
.card .headline a:hover{ color:var(--accent); }
.card .dek{ font-family:var(--font-body); font-size:.92rem; color:var(--ink-soft); line-height:1.45; }
.card .meta{ font-family:var(--font-ui); font-size:.76rem; color:var(--ink-faint); }

.empty-state{ text-align:center; padding:var(--s-6) var(--s-3); color:var(--ink-faint); font-family:var(--font-ui); }

/* ===== Artikel ===== */
.progress-track{ position:fixed; top:0; left:0; right:0; height:3px; z-index:60; }
.progress-bar{ height:100%; width:0; background:var(--accent); }
.breadcrumb{ font-family:var(--font-ui); font-size:.76rem; color:var(--ink-faint); padding-top:var(--s-3); }
.breadcrumb a{ color:var(--ink-soft); } .breadcrumb span{ margin-inline:.45rem; opacity:.5; }
.article-title{ font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,5.4vw,3.2rem); line-height:1.07; letter-spacing:-.015em; margin:.8rem 0; }
.standfirst{ font-family:var(--font-body); font-size:1.25rem; line-height:1.5; color:var(--ink-soft); }
.byline{ display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; padding-block:var(--s-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin-block:var(--s-3); }
.byline .names{ font-family:var(--font-ui); font-weight:700; font-size:.92rem; color:var(--ink); }
.byline .role{ font-family:var(--font-ui); font-size:.78rem; color:var(--ink-faint); }
.byline .when{ margin-left:auto; font-family:var(--font-ui); font-size:.78rem; color:var(--ink-faint); display:flex; align-items:center; gap:.4rem; }
.byline .when svg{ width:14px; height:14px; }
figure.hero{ margin-block:var(--s-3) var(--s-4); }
figure.hero .imgwrap{ aspect-ratio:16/9; border-radius:3px; }
figure.hero figcaption{ font-family:var(--font-ui); font-size:.78rem; color:var(--ink-faint); margin-top:.65rem; line-height:1.45; }
figure.hero figcaption .credit{ display:block; opacity:.85; margin-top:.1rem; }
.article-body{ font-size:1.1875rem; line-height:1.78; }
.article-body p{ margin-bottom:1.45rem; }
.article-body > p:first-of-type::first-letter{ float:left; font-family:var(--font-display); font-weight:800; font-size:4em; line-height:.8; padding:.05em .12em 0 0; color:var(--accent); }
.article-body h2{ font-family:var(--font-display); font-weight:700; font-size:1.6rem; line-height:1.2; margin:2.4rem 0 1rem; }
.article-body ul{ margin:0 0 1.45rem 1.3rem; } .article-body li{ margin-bottom:.6rem; }
.article-body strong{ font-weight:600; }
.pull{ margin:2.2rem 0; padding:1.4rem 0; border-top:3px solid var(--accent); border-bottom:3px solid var(--accent); }
.pull p{ font-family:var(--font-display); font-weight:600; font-size:1.55rem; line-height:1.3; margin:0 0 .6rem; }
.pull cite{ font-family:var(--font-ui); font-style:normal; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); }
.tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-block:var(--s-3); }
.tags a{ font-family:var(--font-ui); font-size:.78rem; padding:.4rem .85rem; border:1px solid var(--rule-strong); border-radius:999px; color:var(--ink-soft); }
.tags a:hover{ border-color:var(--accent); color:var(--accent); }
.author-box{ display:flex; gap:var(--s-2); align-items:flex-start; padding:var(--s-3); border:1px solid var(--rule); border-radius:6px; margin-block:var(--s-4); background:var(--raise); }
.author-box h4{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; }
.author-box .role{ font-family:var(--font-ui); font-size:.76rem; color:var(--ink-faint); margin-top:.15rem; }
.related{ border-top:1px solid var(--rule); margin-top:var(--s-5); padding-top:var(--s-5); padding-bottom:var(--s-6); }

/* ===== Footer ===== */
.site-footer{ background:var(--ink); color:var(--paper); margin-top:var(--s-5); }
.footer-top{ display:grid; gap:var(--s-3); padding-block:var(--s-5); grid-template-columns:1fr; }
.footer-top .brandmark{ color:var(--paper); }
.footer-top p{ font-family:var(--font-body); font-size:.95rem; line-height:1.55; opacity:.7; margin-top:var(--s-2); max-width:34em; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-block:var(--s-3); }
.footer-bottom .container{ display:flex; flex-wrap:wrap; gap:var(--s-2); align-items:center; justify-content:space-between; }
.footer-bottom p{ font-family:var(--font-ui); font-size:.78rem; opacity:.6; }
.footer-bottom nav{ display:flex; gap:var(--s-3); flex-wrap:wrap; }
.footer-bottom nav a{ font-family:var(--font-ui); font-size:.78rem; opacity:.7; }
.footer-bottom nav a:hover{ opacity:1; color:var(--accent); }

/* ===== Responsif ===== */
@media (min-width:760px){ .lead-grid{ grid-template-columns:1.7fr 1fr; } }
@media (max-width:759px){ .mainnav{ display:none; } }

/* ===================================================================
   TAMBAHAN: Pencarian, Band Keyword, Layout 3 Kolom, Arsip, Trending
   =================================================================== */

/* Kotak pencarian di masthead */
.masthead-tools{ display:flex; align-items:center; gap:var(--s-3); }
.search-form{ display:flex; align-items:center; border:1px solid var(--rule-strong); border-radius:999px; overflow:hidden; background:var(--paper); }
.search-form input{ border:none; outline:none; font-family:var(--font-ui); font-size:.85rem; padding:.5rem .9rem; width:170px; background:transparent; color:var(--ink); }
.search-form button{ border:none; background:var(--accent); color:#fff; padding:.5rem .7rem; cursor:pointer; display:grid; place-items:center; }
.search-form button:hover{ background:var(--accent-deep); }
.search-form button svg{ width:16px; height:16px; }

/* Band keyword trending */
.kw-band{ background:var(--ink); }
.kw-band .container{ display:flex; align-items:center; gap:var(--s-2); min-height:46px; overflow-x:auto; }
.kw-label{ flex:none; font-family:var(--font-ui); font-weight:700; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--accent); padding:.3rem .7rem; border-radius:4px; }
.kw-list{ display:flex; gap:.5rem; align-items:center; }
.kw-chip{ flex:none; display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-ui); font-size:.8rem; font-weight:600; color:#ECE6DB; padding:.35rem .75rem; border:1px solid rgba(255,255,255,.18); border-radius:999px; white-space:nowrap; }
.kw-chip:hover{ border-color:var(--accent); color:#fff; }
.kw-num{ font-size:.66rem; font-weight:700; color:var(--accent2, #E7A6AF); }
.kw-empty{ color:var(--ink-faint); font-family:var(--font-ui); font-size:.8rem; }

/* Layout 3 kolom */
.home-wrap{ display:grid; gap:var(--s-4); padding-block:var(--s-4); grid-template-columns:minmax(0,1fr) 300px; grid-template-areas:"center right"; }
.home-center{ grid-area:center; min-width:0; } .home-right{ grid-area:right; }

/* Kotak sidebar */
.side-box{ border:1px solid var(--rule); border-radius:6px; overflow:hidden; margin-bottom:var(--s-3); }
.side-head{ font-family:var(--font-display); font-weight:700; font-size:1rem; padding:.7rem .9rem; border-bottom:2px solid var(--ink); background:var(--wash); }
.side-head.trending{ background:var(--accent); color:#fff; border-bottom-color:var(--accent-deep); }
.side-empty{ padding:.9rem; color:var(--ink-faint); font-family:var(--font-ui); font-size:.82rem; }

/* Pohon arsip */
.archive-tree{ padding:.5rem .3rem; font-family:var(--font-ui); }
.archive-tree details{ margin:0; }
.archive-tree > details{ border-bottom:1px solid var(--rule); }
.archive-tree > details:last-child{ border-bottom:none; }
.archive-tree summary{ cursor:pointer; padding:.45rem .6rem; font-size:.85rem; font-weight:600; color:var(--ink); list-style:none; display:flex; align-items:center; gap:.4rem; }
.archive-tree summary::before{ content:"▸"; font-size:.7rem; color:var(--ink-faint); transition:transform .15s; }
.archive-tree details[open] > summary::before{ transform:rotate(90deg); }
.archive-tree summary::-webkit-details-marker{ display:none; }
.archive-tree summary a{ color:inherit; } .archive-tree summary a:hover{ color:var(--accent); }
.archive-tree details details summary{ padding-left:1.4rem; font-weight:500; font-size:.82rem; color:var(--ink-soft); }
.arch-days{ list-style:none; margin:0; padding:0 0 .3rem 0; }
.arch-days li a{ display:flex; align-items:center; justify-content:space-between; padding:.32rem .6rem .32rem 2.2rem; font-size:.8rem; color:var(--ink-soft); }
.arch-days li a:hover{ background:var(--wash); color:var(--accent); }
.arch-days .cnt{ font-size:.68rem; color:#fff; background:var(--ink-faint); border-radius:999px; padding:.05rem .4rem; min-width:18px; text-align:center; }

/* Daftar trending */
.trending-list{ list-style:none; margin:0; padding:.3rem 0; counter-reset:tr; }
.trending-list li{ display:flex; gap:.7rem; align-items:flex-start; padding:.7rem .9rem; border-bottom:1px solid var(--rule); }
.trending-list li:last-child{ border-bottom:none; }
.t-rank{ flex:none; font-family:var(--font-display); font-weight:800; font-size:1.3rem; line-height:1; color:var(--accent); width:1.4rem; }
.trending-list a{ display:block; }
.t-title{ display:block; font-family:var(--font-display); font-weight:600; font-size:.98rem; line-height:1.2; color:var(--ink); }
.trending-list a:hover .t-title{ color:var(--accent); }
.t-cat{ display:block; font-family:var(--font-ui); font-size:.72rem; color:var(--ink-faint); margin-top:.25rem; }

/* Header hasil filter */
.section-head.sub{ margin-top:var(--s-4); }
.result-count{ font-family:var(--font-ui); font-size:.8rem; color:var(--ink-faint); margin-top:-.6rem; margin-bottom:var(--s-3); }

/* Lead di kolom tengah yang lebih sempit */
.home-center .lead-main .imgwrap{ aspect-ratio:16/9; margin-bottom:var(--s-2); border-radius:3px; }
.home-center .cards{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }

/* Responsif */
@media (max-width:1000px){
  .home-wrap{ grid-template-columns:1fr; grid-template-areas:"center" "right"; }
  .home-right{ max-width:560px; }
}
@media (max-width:560px){
  .search-form input{ width:120px; }
}

/* ===================================================================
   TAMBAHAN v2: Akan Tayang (countdown), Baca Juga, Footer kontak/sosial
   =================================================================== */

/* Akan Tayang */
.section-head.accent{ border-bottom-color:var(--accent); }
.section-head.accent h2{ color:var(--accent); }
.upcoming{ margin-bottom:var(--s-4); }
.upcoming-grid{ display:grid; gap:var(--s-3); grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.up-card{ display:grid; gap:.5rem; align-content:start; border:1px solid var(--rule); border-radius:6px; overflow:hidden; padding-bottom:.8rem; }
.up-thumb{ position:relative; display:block; }
.up-thumb .imgwrap{ aspect-ratio:16/9; }
.up-badge{ position:absolute; top:.5rem; left:.5rem; font-family:var(--font-ui); font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.72); padding:.2rem .5rem; border-radius:3px; }
.up-card .kicker{ padding:0 .8rem; }
.up-card .headline{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; line-height:1.15; padding:0 .8rem; }
.up-card .headline a:hover{ color:var(--accent); }
.countdown-wrap{ display:flex; flex-direction:column; gap:.1rem; margin:.2rem .8rem 0; padding-top:.5rem; border-top:1px dashed var(--rule-strong); }
.cd-label{ font-family:var(--font-ui); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.countdown{ font-family:var(--font-ui); font-weight:700; font-size:.95rem; color:var(--accent); font-variant-numeric:tabular-nums; }

/* Baca juga (di dalam artikel) */
.baca-juga{ border:1px solid var(--rule-strong); border-left:4px solid var(--accent); border-radius:4px; background:var(--raise); padding:1rem 1.2rem; margin:2rem 0; }
.baca-juga .bj-label{ font-family:var(--font-ui); font-weight:700; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:.6rem; }
.baca-juga ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.baca-juga li{ display:flex; gap:.6rem; align-items:baseline; }
.baca-juga li::before{ content:"›"; color:var(--accent); font-weight:700; flex:none; }
.baca-juga a{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; line-height:1.25; color:var(--ink); }
.baca-juga a:hover{ color:var(--accent); }
.baca-juga .bj-cat{ font-family:var(--font-ui); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-left:.3rem; }

/* Halaman berita terjadwal (hitung mundur besar) */
.sched-hero{ text-align:center; padding:var(--s-4) 0 var(--s-5); }
.sched-note{ font-family:var(--font-ui); font-size:.92rem; color:var(--ink-soft); margin:var(--s-2) 0; }
.sched-countdown{ display:inline-flex; gap:.7rem; margin-top:var(--s-3); flex-wrap:wrap; justify-content:center; }
.sched-countdown .unit{ background:var(--ink); color:var(--paper); border-radius:6px; padding:.7rem 1rem; min-width:66px; }
.sched-countdown .num{ display:block; font-family:var(--font-display); font-weight:800; font-size:1.9rem; line-height:1; font-variant-numeric:tabular-nums; }
.sched-countdown .lbl{ display:block; font-family:var(--font-ui); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; opacity:.7; margin-top:.3rem; }

/* Footer: slogan, kontak, sosial */
.footer-top{ grid-template-columns:1fr auto; gap:var(--s-5); align-items:start; }
.footer-slogan{ font-family:var(--font-display); font-weight:600; font-style:italic; font-size:1.05rem; color:var(--paper); opacity:.95; margin-top:var(--s-2); }
.footer-desc{ font-family:var(--font-body); font-size:.92rem; line-height:1.55; opacity:.6; margin-top:.6rem; max-width:34em; }
.footer-contact{ text-align:right; }
.footer-contact h4{ font-family:var(--font-ui); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.6; margin-bottom:.7rem; }
.contact-phone{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-ui); font-weight:600; font-size:.95rem; color:var(--paper); }
.contact-phone:hover{ color:var(--accent2,#E7A6AF); }
.contact-phone svg{ width:17px; height:17px; }
.social{ display:flex; gap:.6rem; justify-content:flex-end; margin-top:var(--s-2); }
.social a{ width:36px; height:36px; border-radius:999px; border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; color:var(--paper); }
.social a:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.social svg{ width:17px; height:17px; }
@media (max-width:680px){
  .footer-top{ grid-template-columns:1fr; }
  .footer-contact{ text-align:left; }
  .social{ justify-content:flex-start; }
}