/* pub.css — gaya halaman publik (beranda, artikel, kanal, cari).
   Terpisah dari gaya admin di layout.ejs supaya tidak saling bocor. */

:root{
  --merah:#e11d2e; --merah-tua:#b3121f;
  --tinta:#12151b; --teks:#22262e; --abu:#6b7280; --garis:#e5e7eb;
  --latar:#f7f7f8; --putih:#fff;
  --radius:10px;
  --shadow:0 1px 3px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.05);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--latar);color:var(--teks);
  font:15px/1.65 var(--font);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--merah)}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.3;color:var(--tinta)}
h1{font-size:clamp(22px,3.2vw,34px);letter-spacing:-.4px}
h3{font-size:16px}
p{margin:0 0 .8em}
ul{margin:0;padding-left:1.1em}
.muted{color:var(--abu)}
.small{font-size:13px}
.container{max-width:1140px;margin:0 auto;padding:0 18px}

/* ---------- topbar ---------- */
.topbar{background:var(--putih);border-bottom:1px solid var(--garis);position:sticky;top:0;z-index:50}
.topbar-in{display:flex;align-items:center;gap:18px;min-height:60px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.logo{font-size:22px;font-weight:800;letter-spacing:-.6px;color:var(--tinta);flex:0 0 auto}
.logo b{color:var(--merah)}
.logo span{font-weight:400;color:var(--abu);font-size:15px;margin-left:2px}
.nav{display:flex;gap:16px;flex:1 1 auto;flex-wrap:wrap;font-size:14px;font-weight:600}
.nav a{color:#333;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--merah);border-bottom-color:var(--merah)}
.cari{display:flex;gap:0;flex:0 0 auto}
.cari input{
  border:1px solid var(--garis);border-right:0;border-radius:6px 0 0 6px;
  padding:8px 11px;font:inherit;font-size:14px;min-width:170px;background:#fbfbfc;
}
.cari input:focus{outline:2px solid rgba(225,29,46,.25);outline-offset:-1px}
.cari button{
  border:0;background:var(--merah);color:#fff;font:inherit;font-weight:600;font-size:14px;
  padding:8px 15px;border-radius:0 6px 6px 0;cursor:pointer;
}
.cari button:hover{background:var(--merah-tua)}

/* ---------- ticker ---------- */
.tickerbar{display:flex;align-items:center;gap:10px;margin:14px 0 20px;background:var(--putih);
  border:1px solid var(--garis);border-radius:var(--radius);padding:8px 12px;overflow:hidden}
.ttag{background:var(--merah);color:#fff;font-size:11px;font-weight:800;letter-spacing:.7px;
  padding:3px 8px;border-radius:4px;flex:0 0 auto}
.ticker{display:flex;gap:22px;overflow-x:auto;white-space:nowrap;font-size:14px;scrollbar-width:none}
.ticker::-webkit-scrollbar{display:none}
.ticker a{color:#333;flex:0 0 auto}
.ticker a:hover{color:var(--merah)}

/* ---------- hero / headline ---------- */
.hero{display:grid;grid-template-columns:2fr 1fr;gap:22px;margin-bottom:26px}
.hero .lead{background:var(--putih);border:1px solid var(--garis);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow)}
.hero .lead img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#e9eaee}
.hero .lead .thumb{width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  background:#e9eaee;color:var(--abu);font-size:13px}
.hero .lead > :not(img):not(.thumb){margin-left:18px;margin-right:18px}
.hero .lead .kicker{margin-top:14px}
.hero .lead h1{margin-top:2px}
.hero .lead p{color:#42474f}
.hero .lead .meta:last-child{margin-bottom:16px}
.hero .side{display:flex;flex-direction:column;gap:12px}

.kicker{font-size:11.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--merah)}
.meta{color:var(--abu);font-size:12.5px}

.card{background:var(--putih);border:1px solid var(--garis);border-radius:var(--radius);
  padding:14px;box-shadow:var(--shadow)}
.card h3{font-size:15.5px;margin:4px 0 6px}
.card h3 a:hover{color:var(--merah)}
/* kartu ber-thumbnail (beranda) */
.card img{width:100%;border-radius:8px;display:block;background:#f1f3f5;object-fit:cover}
.card.row{display:flex;gap:11px;align-items:flex-start}
.card.row>div{min-width:0;flex:1}
.card.row img{width:92px;min-width:92px;height:64px;border-radius:6px}
.card.row h3{font-size:14.5px;line-height:1.35;margin:3px 0 4px}
.thumb{background:linear-gradient(135deg,#e9ecef,#f5f6f8);border:1px solid var(--garis);border-radius:8px;
  min-height:170px;display:flex;align-items:center;justify-content:center;color:#98a2b3;font-size:12px}
.thumb.sm{width:92px;min-width:92px;height:64px;min-height:64px;border-radius:6px}

/* ---------- tata letak utama ---------- */
.grid3{display:grid;gap:22px}
.grid3[style*="2fr 1fr"]{grid-template-columns:2fr 1fr}
.grid3 > aside{display:flex;flex-direction:column;gap:12px}
.grid3 > div > h2.section-title + .card{margin-bottom:12px}
.grid3 > div > .card{margin-bottom:12px}

.section-title{font-size:14px;text-transform:uppercase;letter-spacing:.9px;font-weight:800;
  color:var(--tinta);margin:26px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--tinta)}
.section-title:first-child{margin-top:0}

.box{background:var(--putih);border:1px solid var(--garis);border-radius:var(--radius);
  padding:14px;box-shadow:var(--shadow)}

/* polling */
.poll-opt{display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:9px 11px;border:1px solid var(--garis);border-radius:7px;margin-bottom:7px;
  font-size:14px;background:#fbfbfc;transition:.15s}
.poll-opt:hover{border-color:var(--merah);background:#fff5f6;color:inherit}
.poll-opt .meta{float:none !important}

/* daftar artikel (kanal / cari) */
.daftar{display:grid;gap:14px}
.daftar .item{display:grid;grid-template-columns:190px 1fr;gap:14px;background:var(--putih);
  border:1px solid var(--garis);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.daftar .item img,.daftar .item .thumb{width:100%;height:100%;min-height:118px;object-fit:cover;background:#e9eaee}
.daftar .item .thumb{display:flex;align-items:center;justify-content:center;color:var(--abu);font-size:12px}
.daftar .item .isi{padding:13px 15px 13px 0}
.daftar .item.change .isi{padding-left:15px}

/* ---------- artikel ---------- */
.artikel{background:var(--putih);border:1px solid var(--garis);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);max-width:820px;margin:0 auto}
.artikel h1{margin-bottom:10px}
.artikel .sub{font-size:17px;color:#4b5058;margin-bottom:14px}
.artikel .cover{width:100%;border-radius:8px;margin:16px 0;background:#e9eaee}
.artikel .body{font-size:16.5px;line-height:1.8}
.artikel .body p{margin:0 0 1.1em}
.artikel .body img{border-radius:8px;margin:1em 0}
.artikel .credit{font-size:12.5px;color:var(--abu);margin-top:-6px}
.artikel .tagbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--garis)}
.artikel .tagbar a{font-size:12.5px;background:#f2f3f5;border-radius:99px;padding:4px 11px;color:#454a52}
.artikel .tagbar a:hover{background:#ffe9ec;color:var(--merah)}
.artikel .kicker{margin-bottom:6px}

/* ---------- pesan / kosong ---------- */
.kosong{background:var(--putih);border:1px dashed var(--garis);border-radius:var(--radius);
  padding:30px;text-align:center;color:var(--abu)}

/* ---------- footer ---------- */
.foot{background:var(--tinta);color:#c7ccd4;margin-top:40px;padding:32px 0 20px;font-size:14px}
.foot h4{color:#fff;font-size:12.5px;text-transform:uppercase;letter-spacing:.9px;margin-bottom:10px}
.foot a{color:#c7ccd4}
.foot a:hover{color:#fff}
.foot ul{list-style:none;padding:0}
.foot li{margin-bottom:5px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px;padding-bottom:20px;border-bottom:1px solid #2a2f3a}
.foot-brand{font-size:20px;font-weight:800;color:#fff;margin-bottom:8px;letter-spacing:-.5px}
.foot-brand b{color:var(--merah)}
.foot-brand span{font-weight:400;color:#8b929c;font-size:14px}
.foot-bot{padding-top:16px}

/* ---------- responsif ---------- */
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .grid3[style*="2fr 1fr"]{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .nav{order:3;width:100%;gap:13px;font-size:13.5px}
  .cari{margin-left:auto}
  .cari input{min-width:130px}
  .artikel{padding:18px}
}
@media(max-width:560px){
  .daftar .item{grid-template-columns:1fr}
  .daftar .item img,.daftar .item .thumb{min-height:170px}
  .daftar .item .isi{padding:13px 15px}
  .container{padding:0 14px}
}