/* =====================================================================
   Kopdit Obormas — Modul Berita (CMS-driven)
   Dipakai bersama css/styles.css + css/page.css.

   Mendukung dua halaman:
   1. berita.html        — daftar artikel + filter kategori & tanggal (FR-14)
   2. berita-detail.html — template artikel tunggal (FR-13)

   Tata letak: dua kolom (konten + sidebar), bukan grid kartu di tengah.
   - berita.html        : sidebar filter (kiri) + daftar artikel gaya list (kanan)
   - berita-detail.html : konten artikel (kiri) + sidebar kategori & berita
                          terkait (kanan)

   Acuan blueprint §22.2, FR-13 (admin terbitkan berita berkategori +
   gambar), FR-14 (pengguna cari & filter berdasarkan kategori/tanggal).

   Catatan integrasi SilverStripe:
   - Daftar berita = loop $News (ArticlePage children) → .nitem
   - Filter kategori = $Categories (Taxonomy/relasi) → .side-cats a
   - Filter tanggal  = arsip per bulan/tahun → .side-field select
   - Isi artikel     = $Content (HtmlEditorField) di dalam .rte
   ===================================================================== */

/* =====================================================================
   TATA LETAK DUA KOLOM (dipakai daftar & detail)
   ===================================================================== */
/* Sidebar SELALU di kanan (konsisten dengan halaman detail). Kolom utama
   di kiri sejajar dengan logo & judul. DOM tetap (filter dulu) — posisi
   diatur via order agar di layar sempit filter bisa naik ke atas. */
.news-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:42px;align-items:start}
.news-layout .news-main{order:1}
.news-layout .news-aside{order:2}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:46px;align-items:start}

/* sidebar yang menempel saat scroll */
.side-sticky{position:sticky;top:96px}

/* kartu/widget di dalam sidebar */
.side-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:22px 22px;margin-bottom:22px}
.side-card:last-child{margin-bottom:0}
.side-title{font-family:"Sora",sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-700);margin-bottom:16px;display:flex;align-items:center;gap:9px}
.side-title svg{width:16px;height:16px;color:var(--gold-700)}

/* =====================================================================
   SIDEBAR FILTER (berita.html)
   ===================================================================== */
/* daftar kategori vertikal */
.side-cats{display:flex;flex-direction:column;gap:4px}
.side-cats a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--ink);border:1px solid transparent;transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease)}
.side-cats a:hover{background:var(--gold-50);transform:translateX(3px)}
.side-cats a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.side-cats a .n{font-family:"Sora",sans-serif;font-size:11.5px;font-weight:700;color:var(--slate);background:var(--soft);border-radius:999px;padding:2px 9px;transition:background .2s,color .2s}
.side-cats a[aria-current="true"]{background:var(--gold-50);border-color:var(--gold);color:var(--gold-700)}
.side-cats a[aria-current="true"] .n{background:var(--gold);color:var(--ink)}

/* field tanggal & pencarian (stacked di sidebar) */
.side-field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.side-field:last-of-type{margin-bottom:18px}
.side-field label{font-size:12.5px;font-weight:600;color:var(--slate)}
.side-field .ctrl{position:relative;display:flex;align-items:center}
.side-field .ctrl svg{position:absolute;left:13px;width:17px;height:17px;color:var(--gold-700);pointer-events:none}
.side-field select,
.side-field input{width:100%;font:inherit;font-size:14.5px;color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:11px 14px 11px 40px;transition:border-color .2s,box-shadow .2s,background .2s;-webkit-appearance:none;appearance:none}
.side-field select{cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M6 9l6 6 6-6' stroke='%23b07c08' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 13px center;background-size:18px;padding-right:38px}
.side-field select:focus,
.side-field input:focus{outline:none;background:#fff;border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-50)}
.side-field input::placeholder{color:var(--slate)}
.side-actions{display:flex;flex-direction:column;gap:10px}
.side-actions .btn{width:100%;justify-content:center}
.side-actions .reset{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--slate);padding:6px}
.side-actions .reset:hover{color:var(--gold-700)}
.side-actions .reset svg{width:14px;height:14px}

/* =====================================================================
   KOLOM UTAMA DAFTAR ARTIKEL (gaya list, bukan grid)
   ===================================================================== */
.news-main{min-width:0}

/* ringkasan hasil filter */
.news-result{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.news-result .count{font-size:14px;color:var(--slate)}
.news-result .count b{color:var(--ink);font-weight:700}
.news-result .sortby{font-size:13.5px;color:var(--slate)}
.news-result .sortby b{color:var(--ink);font-weight:600}

/* artikel unggulan (item terbaru) — banner lebar di atas list */
.news-feat{position:relative;display:block;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md);margin-bottom:30px;min-height:340px}
.news-feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.news-feat:hover img{transform:scale(1.05)}
.news-feat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,32,43,.05) 0%,rgba(20,32,43,.55) 55%,rgba(20,32,43,.86) 100%)}
.news-feat .fcontent{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 36px;color:#fff}
.news-feat .cat{display:inline-flex;background:var(--gold);color:var(--ink);font-family:"Sora",sans-serif;font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:7px;margin-bottom:14px}
.news-feat time{display:block;font-size:13px;color:rgba(255,255,255,.82);font-weight:600;margin-bottom:8px}
.news-feat h2{font-size:clamp(22px,2.8vw,30px);line-height:1.2;color:#fff;margin:0 0 10px;max-width:640px}
.news-feat p{font-size:15px;color:rgba(255,255,255,.9);line-height:1.6;max-width:600px;margin:0}
.news-feat .more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:"Sora",sans-serif;font-size:14px;font-weight:700;color:var(--gold)}
.news-feat .more svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.news-feat:hover .more svg{transform:translateX(4px)}

/* daftar artikel — baris horizontal (thumb kiri + isi kanan) */
.nlist{display:flex;flex-direction:column}
.nitem{display:grid;grid-template-columns:240px 1fr;gap:26px;padding:26px 0;border-bottom:1px solid var(--line)}
.nitem:first-child{padding-top:0}
.nitem:last-child{border-bottom:0;padding-bottom:0}
.nitem .th{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden}
.nitem .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.nitem:hover .th img{transform:scale(1.06)}
.nitem .th .cat{position:absolute;top:10px;left:10px;background:var(--gold);color:var(--ink);font-family:"Sora",sans-serif;font-size:11px;font-weight:700;padding:5px 11px;border-radius:6px;z-index:2}
.nitem .body{display:flex;flex-direction:column;justify-content:center;min-width:0}
.nitem time{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--slate);font-weight:600}
.nitem time svg{width:14px;height:14px;color:var(--gold-700)}
.nitem h3{font-size:20px;line-height:1.28;margin:9px 0 9px}
.nitem h3 a{color:inherit;transition:color .2s}
.nitem h3 a:hover{color:var(--gold-700)}
.nitem p{font-size:14.5px;color:var(--slate);line-height:1.65;margin:0 0 14px}
.nitem .more{display:inline-flex;align-items:center;gap:7px;font-family:"Sora",sans-serif;font-size:13.5px;font-weight:700;color:var(--gold-700)}
.nitem .more svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.nitem:hover .more svg{transform:translateX(4px)}

/* kondisi kosong (tidak ada hasil filter) */
.news-empty{text-align:center;padding:64px 24px;border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--soft)}
.news-empty svg{width:46px;height:46px;color:var(--gold-700);margin-bottom:14px}
.news-empty h3{font-size:20px;margin-bottom:8px}
.news-empty p{font-size:15px;color:var(--slate);max-width:420px;margin:0 auto 18px}

/* pagination */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:42px;flex-wrap:wrap}
.pagination a,.pagination span{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:#fff;font-family:"Sora",sans-serif;font-size:14px;font-weight:600;color:var(--ink);transition:transform .2s var(--ease),background .2s,border-color .2s,box-shadow .2s}
.pagination a:hover{transform:translateY(-2px);background:var(--gold-50);border-color:var(--gold);box-shadow:var(--shadow-sm)}
.pagination a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.pagination [aria-current="page"]{background:var(--gold);border-color:var(--gold);color:var(--ink);box-shadow:0 6px 16px rgba(245,180,0,.3)}
.pagination .gap{border:0;background:transparent;color:var(--slate)}
.pagination .nav svg{width:17px;height:17px}
.pagination .nav[aria-disabled="true"]{opacity:.4;pointer-events:none}

/* =====================================================================
   HALAMAN DETAIL ARTIKEL (berita-detail.html)
   ===================================================================== */
.article-main{min-width:0}

/* meta di header artikel: kategori, tanggal, penulis, lama baca */
.cat-tag{display:inline-flex;align-items:center;background:var(--gold);color:var(--ink);font-family:"Sora",sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.04em;padding:6px 13px;border-radius:7px}
.article-meta{display:flex;flex-wrap:wrap;gap:9px 20px;margin-top:13px;font-size:13px;color:var(--slate)}
.article-meta span{display:inline-flex;align-items:center;gap:8px}
.article-meta svg{width:16px;height:16px;color:var(--gold-700)}
.article-meta b{color:var(--ink);font-weight:600}

/* gambar sampul artikel (di kolom utama, rata kiri) */
.article-cover{margin:0 0 34px;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md)}
.article-cover img{display:block;width:100%;height:auto;aspect-ratio:16/8;object-fit:cover}
.article-cover figcaption{font-size:13px;color:var(--slate);text-align:left;padding:12px 18px;background:var(--soft)}

/* di halaman detail, area .rte mengisi penuh kolom (tak lagi 760px tengah) */
.article-main .rte{max-width:none;margin-inline:0}
.article-main .rte blockquote{max-width:none}

/* tag artikel (di bawah konten) */
.article-tags{margin:34px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.article-tags .lbl{font-family:"Sora",sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-700);margin-right:4px}
.article-tags a{background:var(--soft);border:1px solid var(--line);padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink);transition:background .2s,border-color .2s,transform .2s var(--ease)}
.article-tags a:hover{background:var(--gold-50);border-color:var(--gold);transform:translateY(-2px)}

/* kembali ke daftar */
.article-foot{margin:28px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.back-link{display:inline-flex;align-items:center;gap:8px;font-family:"Sora",sans-serif;font-size:14px;font-weight:700;color:var(--gold-700)}
.back-link svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.back-link:hover svg{transform:translateX(-4px)}

/* sidebar artikel: kategori, berita terkait, bagikan */
.article-aside{min-width:0}

/* daftar kategori di sidebar detail (sama gaya dengan side-cats) */
.aside-cats{display:flex;flex-direction:column;gap:4px}
.aside-cats a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:10px;font-size:14px;font-weight:600;color:var(--ink);transition:background .2s,color .2s,transform .2s var(--ease)}
.aside-cats a:hover{background:var(--gold-50);color:var(--gold-700);transform:translateX(3px)}
.aside-cats a .n{font-family:"Sora",sans-serif;font-size:11.5px;font-weight:700;color:var(--slate);background:var(--soft);border-radius:999px;padding:2px 9px}

/* berita terkait — daftar ringkas (thumb kecil + judul) */
.rel-list{display:flex;flex-direction:column;gap:6px}
.rel-item{display:grid;grid-template-columns:78px 1fr;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.rel-item:first-child{padding-top:0}
.rel-item:last-child{border-bottom:0;padding-bottom:0}
.rel-item .th{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden}
.rel-item .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.rel-item:hover .th img{transform:scale(1.08)}
.rel-item .rmeta{min-width:0}
.rel-item time{font-size:11.5px;color:var(--slate);font-weight:600}
.rel-item h4{font-family:"Sora",sans-serif;font-size:14px;font-weight:600;line-height:1.35;margin-top:3px;color:var(--ink);transition:color .2s}
.rel-item:hover h4{color:var(--gold-700)}

/* bagikan artikel */
.share{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.share a{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);transition:background .2s,border-color .2s,transform .2s var(--ease),color .2s}
.share a:hover{background:var(--gold-50);border-color:var(--gold);color:var(--gold-700);transform:translateY(-2px)}
.share a svg{width:19px;height:19px}

/* ---------- Responsif ---------- */
@media (max-width:980px){
  .news-layout{grid-template-columns:1fr;gap:30px}
  .news-layout .news-aside{order:-1}/* saat ditumpuk, filter naik ke atas */
  .article-layout{grid-template-columns:1fr;gap:36px}
  .side-sticky{position:static}
  /* di layar sempit, kategori jadi baris pill horizontal yang bisa di-scroll */
  .side-cats{flex-direction:row;flex-wrap:wrap}
  .side-cats a{border:1px solid var(--line);background:var(--soft)}
  .side-cats a[aria-current="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
  .side-cats a[aria-current="true"] .n{background:rgba(20,32,43,.12)}
}
@media (max-width:600px){
  .nitem{grid-template-columns:1fr;gap:14px}
  .nitem .th{aspect-ratio:16/10}
  .news-feat{min-height:280px}
  .news-feat .fcontent{padding:24px 22px}
  .aside-cats{flex-direction:column}
}