/* 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{
  --bl-bg:#0d3a2c; --bl-bg2:#082a20; --bl-line:rgba(255,255,255,.12); --bl-line2:rgba(255,255,255,.18);
  --bl-cyan:#f2b01e; --bl-gold:#ffcf5c; --bl-tx:#eaf6ef; --bl-mut:#a9cdbb; --bl-dim:#7fa896;
  --bl-naik:#34d399; --bl-turun:#f87171;
}
.bl-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(10px,auto);gap:16px;grid-auto-flow:dense;margin-top:26px}
.bl-diperbarui{text-align:center;color:var(--bl-mut);font:500 12px "Segoe UI",system-ui,Roboto,sans-serif;margin-top:14px}

/* dasar kartu */
.bl-kartu,.bl-utama,.bl-daftar,.bl-box{background:linear-gradient(180deg,var(--bl-bg),var(--bl-bg2));border:1px solid var(--bl-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}
.bl-kartu:hover,.bl-utama:hover,.bl-box:hover{border-color:rgba(242,176,30,.6);transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(23,166,115,.5)}
.bl-daftar:hover{border-color:rgba(242,176,30,.4)}

/* kartu UTAMA — 2 kolom × 2 baris, judul overlay */
.bl-utama{position:relative;grid-column:span 2;grid-row:span 2;min-height:340px}
.bl-utama .foto{position:absolute;inset:0;background:#06281e center/cover no-repeat}
.bl-utama .veil{position:absolute;inset:0;background:linear-gradient(to top,#04201a 6%,rgba(4,32,26,.55) 45%,transparent 78%)}
.bl-utama .isi{position:relative;margin-top:auto;padding:22px 24px;display:flex;flex-direction:column;gap:10px}
.bl-utama h3{font:800 clamp(20px,2.1vw,28px)/1.22 "Segoe UI",system-ui,Roboto,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)}
.bl-utama:hover h3{color:var(--bl-gold)}
.bl-utama .baris{display:flex;align-items:center;justify-content:space-between;gap:10px}

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

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

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

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

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

.bl-cuaca .strip{grid-template-columns:repeat(3,1fr)}
.bl-grid>*{min-width:0}
.bl-utama .foto,.bl-kartu .foto{transition:transform .6s ease}
.bl-utama:hover .foto{transform:scale(1.04)}
.bl-kartu .foto{overflow:hidden}
.bl-sumber{font:700 10.5px "Segoe UI",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--bl-cyan)}
.bl-ringkas{margin:0;color:#d3e9dd;font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-kartu .foto.gen,.bl-utama .foto.gen{background:radial-gradient(500px 240px at 80% 10%,#17a673 0%,transparent 60%),linear-gradient(150deg,#04201a,#0f6b4b)}
.bl-kartu .foto.gen:after,.bl-utama .foto.gen:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:28px 28px}
.bl-diperbarui{color:var(--bl-mut)}
@media(prefers-reduced-motion:reduce){.bl-utama .foto,.bl-kartu .foto{transition:none}.bl-utama:hover .foto{transform:none}.bl-kartu:hover,.bl-utama:hover,.bl-box:hover{transform:none}}
.bl-grid{margin-top:0}.bl-pesan{color:#a9cdbb;grid-column:1/-1}
.bl-meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;color:var(--bl-mut)}
.bl-diperbarui{text-align:center;font-size:12px}
.bl-utama h3,.bl-kartu h3,.bl-daftar p{overflow-wrap:anywhere}