/* Layout halaman News. CSS murni karena build Tailwind publik sudah dipurge,
   jadi class layout ini ditulis manual. */

/* Lebar & padding disamakan dengan footer (max-w-7xl + px-5 lg:px-8) agar
   tepi kanan sidebar sejajar dengan border footer. */
.news-shell { max-width: 80rem; margin: 0 auto; padding: 0 20px; }
@media (min-width: 1024px) { .news-shell { padding: 0 32px; } }

/* Jarak vertikal eksplisit (kelas pt-/pb- besar tidak tersedia di build purge). */
.news-section { padding-top: 28px; padding-bottom: 96px; }
.news-head-gap { padding-bottom: 28px; }

.news-layout { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 1024px) { .news-layout { grid-template-columns: minmax(0,1fr) 320px; gap: 48px; align-items: start; } }

/* CTA box gradient (from-blue-600 tidak tersedia di build purge). */
.news-cta { border:1px solid #bfdbfe; border-radius:16px; padding:24px; color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04); background:linear-gradient(135deg,#2563eb,#0891b2); }
.news-cta-btn { margin-top:16px; display:inline-flex; align-items:center; gap:8px; border-radius:9999px; background:#fff; padding:8px 16px; font-size:14px; font-weight:600; color:#1d4ed8; text-decoration:none; transition:background .2s; }
.news-cta-btn:hover { background:#eff6ff; }

/* Headline */
.news-hero { display:block; border:1px solid #e2e8f0; border-radius:24px; overflow:hidden; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04); transition: box-shadow .3s; text-decoration:none; }
.news-hero:hover { box-shadow:0 20px 40px -16px rgba(37,99,235,.25); }
.news-hero-media { position:relative; aspect-ratio:16/8; overflow:hidden; background:linear-gradient(135deg,#dbeafe,#cffafe); }
.news-hero-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.news-hero:hover .news-hero-media img { transform:scale(1.05); }
.news-hero-ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:72px; }

/* List card */
.news-card { display:grid; grid-template-columns:1fr; gap:20px; padding:16px; border:1px solid #e2e8f0; border-radius:20px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04); transition: box-shadow .3s, border-color .3s; }
.news-card:hover { border-color:#93c5fd; box-shadow:0 14px 30px -18px rgba(37,99,235,.35); }
@media (min-width: 560px) { .news-card { grid-template-columns:220px 1fr; } }
.news-thumb { position:relative; overflow:hidden; border-radius:14px; aspect-ratio:16/11; background:linear-gradient(135deg,#eff6ff,#cffafe); display:block; }
.news-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.news-card:hover .news-thumb img { transform:scale(1.06); }
.news-thumb-ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:42px; }
.news-card-body { display:flex; flex-direction:column; justify-content:center; }

/* Sidebar */
.news-side { display:flex; flex-direction:column; gap:24px; }
@media (min-width: 1024px) { .news-side { position:sticky; top:96px; } }
.news-box { border:1px solid #e2e8f0; border-radius:20px; background:#fff; padding:24px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.news-cat { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-radius:10px; font-size:14px; color:#475569; text-decoration:none; transition: background .2s, color .2s; }
.news-cat:hover { background:#f8fafc; color:#2563eb; }
.news-cat.is-active { background:#eff6ff; color:#2563eb; font-weight:600; }

.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Search field — ikon di KANAN, padding eksplisit agar teks tidak tertimpa ikon. */
.side-search { position: relative; }
.side-search input { width:100%; border-radius:9999px; border:1px solid #e2e8f0; background:#f8fafc; padding:11px 44px 11px 18px; font-size:14px; color:#334155; outline:none; transition:border-color .2s, background .2s; }
.side-search input:focus { border-color:#60a5fa; background:#fff; }
.side-search .side-search-icon { position:absolute; top:50%; right:16px; transform:translateY(-50%); color:#94a3b8; pointer-events:none; }