/* Mozaik Berita Konstruksi gaya "MSN" untuk beranda segitigatambora.com (28/08/2026).
   Grid 4 kolom: kartu UTAMA 2×2 (judul overlay) + kartu standar + "Berita Teratas" (daftar)
   + kotak IHSG mini + kotak Cuaca. Tema gelap cyan/emas senada situs. Klik → situs sumber. */
:root{
  --bm-bg:#0F1621; --bm-bg2:#0C111A; --bm-line:#1C2836; --bm-line2:#22303f;
  --bm-cyan:#38BDF8; --bm-gold:#FFC64B; --bm-tx:#EAF2FB; --bm-mut:#8FA3B8; --bm-dim:#5D7183;
  --bm-naik:#34d399; --bm-turun:#f87171;
}
.bm-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(10px,auto);gap:16px;grid-auto-flow:dense;margin-top:26px}
.bm-diperbarui{text-align:center;color:var(--bm-mut);font:500 12px Inter,system-ui,sans-serif;margin-top:14px}

/* dasar kartu */
.bm-kartu,.bm-utama,.bm-daftar,.bm-box{background:linear-gradient(180deg,var(--bm-bg),var(--bm-bg2));border:1px solid var(--bm-line);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.bm-kartu:hover,.bm-utama:hover,.bm-box:hover{border-color:rgba(56,189,248,.5);transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(34,211,238,.45)}
.bm-daftar:hover{border-color:rgba(56,189,248,.4)}

/* kartu UTAMA — 2 kolom × 2 baris, judul overlay */
.bm-utama{position:relative;grid-column:span 2;grid-row:span 2;min-height:340px}
.bm-utama .foto{position:absolute;inset:0;background:#0b1018 center/cover no-repeat}
.bm-utama .veil{position:absolute;inset:0;background:linear-gradient(to top,#070b12 6%,rgba(7,11,18,.55) 45%,transparent 78%)}
.bm-utama .isi{position:relative;margin-top:auto;padding:22px 24px;display:flex;flex-direction:column;gap:10px}
.bm-utama h3{font:800 clamp(20px,2.1vw,28px)/1.22 "Archivo",system-ui,sans-serif;margin:0;color:#fff;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.bm-utama:hover h3{color:var(--bm-gold)}
.bm-utama .baris{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* kartu standar */
.bm-kartu .foto{aspect-ratio:16/10;background:#0b1018 center/cover no-repeat;position:relative}
.bm-kartu .isi{padding:13px 15px 15px;display:flex;flex-direction:column;gap:8px;flex:1}
.bm-kartu h3{font:700 14.5px/1.32 "Archivo",system-ui,sans-serif;margin:0;color:var(--bm-tx);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bm-kartu:hover h3{color:var(--bm-gold)}

/* meta (waktu) + baca */
.bm-meta{font:600 11px "Chakra Petch",system-ui,sans-serif;letter-spacing:.03em;color:var(--bm-mut);display:inline-flex;align-items:center;gap:6px}
.bm-baca{margin-top:auto;font:700 12px "Chakra Petch",system-ui,sans-serif;letter-spacing:.05em;color:var(--bm-cyan)}
.bm-utama .bm-baca{color:var(--bm-gold)}

/* daftar "Berita Teratas" — 1 kolom × 2 baris */
.bm-daftar{grid-row:span 2}
.bm-daftar .kepala{display:flex;align-items:center;gap:8px;padding:12px 15px;border-bottom:1px solid var(--bm-line)}
.bm-daftar .kepala h4{margin:0;font:800 14px "Archivo",system-ui,sans-serif;color:#fff}
.bm-daftar ul{list-style:none;margin:0;padding:0;flex:1}
.bm-daftar li{border-top:1px solid rgba(28,40,54,.7)}
.bm-daftar li:first-child{border-top:0}
.bm-daftar a{display:flex;flex-direction:column;gap:3px;padding:9px 15px;text-decoration:none;color:inherit;transition:background .2s}
.bm-daftar a:hover{background:rgba(28,40,54,.5)}
.bm-daftar p{margin:0;font:600 13px/1.34 "Archivo",system-ui,sans-serif;color:var(--bm-tx);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bm-daftar a:hover p{color:var(--bm-gold)}
.bm-daftar .kaki{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--bm-line);padding:10px 15px;font:600 11px "Chakra Petch",system-ui,sans-serif}
.bm-daftar .kaki .a{color:var(--bm-dim)}
.bm-daftar .kaki .b{color:var(--bm-cyan)}

/* kotak IHSG mini */
.bm-box{padding:0}
.bm-ihsg .top{display:flex;align-items:flex-start;justify-content:space-between;padding:14px 15px 0}
.bm-ihsg .eyebrow{font:700 10.5px "Chakra Petch",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--bm-gold);margin:0}
.bm-ihsg .nm{font:700 13px "Archivo",system-ui,sans-serif;color:#fff;margin:2px 0 0}
.bm-ihsg .pil{font:800 12px "Chakra Petch",system-ui,sans-serif;padding:3px 8px;border-radius:7px}
.bm-ihsg .nilai{font:800 30px/1 "Archivo",system-ui,sans-serif;color:#fff;padding:10px 15px 2px;font-variant-numeric:tabular-nums}
.bm-ihsg .sub{font:500 11.5px Inter,system-ui,sans-serif;color:var(--bm-mut);padding:0 15px}
.bm-ihsg svg{width:100%;height:52px;margin-top:6px;display:block}
.bm-ihsg .kaki{margin-top:auto;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--bm-line);padding:9px 15px;font:600 11px "Chakra Petch",system-ui,sans-serif}
.bm-ihsg .kaki .a{color:var(--bm-dim)}
.bm-ihsg .kaki .b{color:var(--bm-gold)}

/* kotak Cuaca */
.bm-cuaca{padding:0}
.bm-cuaca .top{display:flex;align-items:center;justify-content:space-between;padding:13px 15px 0}
.bm-cuaca select{appearance:none;background:transparent;border:0;color:#fff;font:700 14px "Archivo",system-ui,sans-serif;cursor:pointer;padding:2px 16px 2px 0;max-width:150px}
.bm-cuaca select:focus{outline:none}
.bm-cuaca select option{background:var(--bm-bg);color:var(--bm-tx)}
.bm-cuaca .lokasi{display:flex;align-items:center;gap:5px}
.bm-cuaca .tag{font:700 10px "Chakra Petch",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--bm-gold)}
.bm-cuaca .utama{display:flex;align-items:center;gap:12px;padding:10px 15px 4px}
.bm-cuaca .ikon{font-size:46px;line-height:1}
.bm-cuaca .suhu{font:800 42px/1 "Archivo",system-ui,sans-serif;color:#fff}
.bm-cuaca .suhu sup{font-size:17px;color:var(--bm-mut);font-weight:700}
.bm-cuaca .teks{font:600 13px Inter,system-ui,sans-serif;color:var(--bm-mut);padding:0 15px 4px}
.bm-cuaca .strip{margin:8px 12px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.bm-cuaca .kota{background:rgba(28,40,54,.45);border-radius:9px;padding:7px 3px;text-align:center}
.bm-cuaca .kota b{display:block;font:600 9.5px "Chakra Petch",system-ui,sans-serif;color:var(--bm-mut);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-cuaca .kota i{display:block;font-size:17px;font-style:normal;margin:2px 0}
.bm-cuaca .kota span{font:700 12px "Archivo",system-ui,sans-serif;color:#fff}
.bm-cuaca .kaki{margin-top:auto;border-top:1px solid var(--bm-line);padding:9px 15px;font:500 10.5px Inter,system-ui,sans-serif;color:var(--bm-dim);text-align:center}

/* Tablet: 2 kolom — utama & daftar melebar penuh, tak span baris */
@media(max-width:1080px){
  .bm-grid{grid-template-columns:repeat(2,1fr)}
  .bm-utama{grid-column:span 2;grid-row:auto;min-height:300px}
  .bm-daftar{grid-column:span 2;grid-row:auto}
  .bm-daftar ul{display:grid;grid-template-columns:1fr 1fr}
  .bm-daftar li:nth-child(2){border-top:0}
}
/* HP: 1 kolom */
@media(max-width:620px){
  .bm-grid{grid-template-columns:1fr;gap:14px}
  .bm-utama,.bm-daftar{grid-column:auto}
  .bm-utama{min-height:260px}
  .bm-daftar ul{grid-template-columns:1fr}
  .bm-daftar li:nth-child(2){border-top:1px solid rgba(28,40,54,.7)}
}
@media(prefers-reduced-motion:reduce){.bm-kartu,.bm-utama,.bm-box{transition:none}}