/* ===== Variables ===== */
:root{
  --green:#2196f3; --green-dark:#1976d2;
  --bg:#0d1b2a; --card:#0f2536; --text:#e9f5ff; --muted:#a6c3d9; --accent:#64b5f6;
  --topbar-h:36px;
}
@media (max-width:760px){ :root{ --topbar-h:32px } }

/* ===== Base ===== */
*{ box-sizing:border-box }
html,body{ margin:0; font-family:Inter,system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text) }
a{ color:inherit; text-decoration:none }
.container{ max-width:1100px; margin:auto; padding:0 16px }

/* ===== Topbar ===== */
.topbar{
  background:var(--green-dark); font-size:.9rem;
  position:sticky; top:0; z-index:1300; height:var(--topbar-h); display:flex; align-items:center;
}
.topbar .container{ display:flex; justify-content:space-between; align-items:center; padding:8px 16px }
.topbar .live{ margin-left:12px; padding:2px 8px; border:1px solid #fff3; border-radius:999px; font-weight:600 }

/* ===== Header/Nav ===== */
.header{
  background:var(--green); position:sticky; top:var(--topbar-h);
  z-index:1200; isolation:isolate;
}
.header .container{ display:flex; align-items:center; gap:16px; padding:10px 16px }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.5px }
.brand img{ height:58px }

.nav{ margin-left:auto; position:relative; z-index:1210 }
.menu{
  list-style:none; display:flex; gap:18px; align-items:center;
  margin:0; padding:0; position:relative; overflow:visible;
}
.menu a{ padding:10px 6px; border-radius:6px }
.menu a.active, .menu a:hover{ background:#ffffff20 }

/* Hamburger default hidden (desktop) */
.hamburger{ display:none; background:none; border:0; color:#fff; font-size:1.25rem }

/* Dropdown */
.has-dropdown{ position:relative }
.dropdown{
  display:none; position:absolute; top:100%; left:0;
  background:var(--card); border:1px solid #ffffff1f; border-radius:8px;
  min-width:220px; padding:8px; z-index:1230;
}
.has-dropdown:hover>.dropdown{ display:block }
.dropdown.show{ display:block }

/* ===== Ticker ===== */
.hero-ticker{ background:#0b2030; border-top:1px solid #ffffff10; border-bottom:1px solid #ffffff10; position:relative; z-index:20 }
.hero-ticker .container{ padding:8px 16px }

/* ===== Layout ===== */
.layout{ display:grid; grid-template-columns:2fr 1fr; gap:22px; margin:22px auto }
.grid-berita{ display:grid; grid-template-columns:2fr 1fr; grid-auto-rows:minmax(140px,auto); gap:16px }

.card-hero{ grid-row:span 2; position:relative; border-radius:14px; background:#103149; overflow:hidden; aspect-ratio:16/9 }
.card-hero img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.88 }
.badge{ position:absolute; top:12px; left:12px; background:var(--accent); color:#001728; padding:4px 10px; border-radius:999px; font-weight:800; font-size:.8rem }
.card-hero .content{ position:absolute; inset:auto 0 0 0; padding:16px; background:linear-gradient(180deg,transparent,rgba(0,0,0,.7)) }

.card{ background:var(--card); border:1px solid #ffffff14; border-radius:12px; padding:14px }
.card .thumb{ width:100%; height:150px; object-fit:cover; border-radius:10px; margin-bottom:10px; opacity:.95 }
.card h3 a:hover{ text-decoration:underline }
.sidebar .card+.card{ margin-top:16px }

.table{ width:100%; border-collapse:collapse; font-size:.95rem }
.table th,.table td{ padding:8px; border-bottom:1px solid #ffffff14; color:var(--muted) }
.table th{ color:#d7efff; text-align:left }

/* sponsors */
.sponsors .logos{ display:flex; gap:15px }
.sponsors img{ width:100px; height:50px; object-fit:cover; border-radius:8px; opacity:.9 }

/* ===== Footer ===== */
.footer{ margin-top:40px; background:#0b2030; border-top:1px solid #ffffff14 }
.footer .fgrid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:18px; padding:24px 16px }
.footer .copy{ text-align:center; font-size:.9rem; color:var(--muted); padding:12px; border-top:1px solid #ffffff10 }

/* ===== Responsive ===== */
@media (max-width:900px){
  .layout{ grid-template-columns:1fr }
  .grid-berita{ grid-template-columns:1fr }
  .dropdown{ position:static } /* dropdown ikut panel saat mobile */
}

@media (max-width:760px){
  .hamburger{
    display:inline-flex !important; align-items:center; justify-content:center;
    width:42px; height:38px; margin-left:auto; font-size:24px; line-height:1; cursor:pointer;
  }
  .nav{ position:relative; z-index:2147483200 }
  .nav .menu{
    display:none; flex-direction:column; align-items:stretch;
    position:absolute; right:0; top:44px;
    background:var(--card); padding:10px; border-radius:10px; border:1px solid #ffffff1f;
    width:min(84vw,320px); box-shadow:0 10px 30px #0007;
  }
  .nav .menu.show{ display:flex !important }
  .header .dropdown{ position:static; margin-top:6px }
  .dropdown.show{ display:block !important }
}

/* ===== Utilities ===== */
.btn{ display:inline-block; padding:8px 12px; border-radius:8px; border:1px solid #ffffff33; font-weight:600; text-decoration:none; transition:.15s }
.btn:hover{ background:#ffffff20 }
.btn-small{ font-size:.9rem; padding:6px 10px }
.excerpt{ color:var(--muted); margin:6px 0 10px; line-height:1.5 }
.table-wrap{ overflow:auto; -webkit-overflow-scrolling:touch }
@media (max-width:760px){ .table{ min-width:640px } }
@media (max-width:540px){ .container{ padding:0 12px } }
button, .btn, input, select, textarea{ touch-action:manipulation }

/* Default: header nempel ke atas */
.header{
  position: sticky;
  top: 0;                  /* << semula pakai var(--topbar-h) */
  z-index: 1200;
  isolation: isolate;
}

/* Kalau ADA .topbar tepat sebelum .header, baru geserkan setinggi topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 1300;
  height: var(--topbar-h); /* pastikan sesuai tinggi nyata topbar */
  display: flex;
  align-items: center;
}

/* Hanya aktif bila topbar ada di halaman dan berurutan */
.topbar + .header{
  top: var(--topbar-h);
}


@media (max-width:760px){
  .nav .menu{ z-index:2147483600 !important; }
}


.news-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
}

.news-thumb {
  position: relative !important;
  display: block !important;
}

.news-body {
  position: relative !important;
  background: var(--card, #0f2536);
  padding: 14px;
}

/* ==== Kartu Berita Baru ==== */
.news-card {
  background: var(--card, #0f2536);
  border: 1px solid #ffffff14;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column; /* gambar di atas, teks di bawah */
  margin-bottom: 16px;
}

.news-card .news-thumb {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  opacity: 1; /* full jelas */
}

.news-card .news-body {
  padding: 14px;
  background: var(--card, #0f2536);
  position: static; /* pastikan ikut flow normal, bukan absolute */
}

.news-card .news-title {
  font-weight: 700;
  margin: 0 0 8px;
  font-size: 1.1rem;
  line-height: 1.4;
}

.news-card .excerpt {
  color: var(--muted, #a6c3d9);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 10px;
}

.news-card .news-meta {
  color: var(--muted, #a6c3d9);
  font-size: 0.85rem;
}

.news-card .news-link {
  display: inline-block;
  margin-top: 12px;
  font-weight: 600;
  color: var(--accent, #64b5f6);
}

.news-card .news-link:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 600px) {
  .news-card .news-thumb { height: 140px; }
  .news-card .news-title { font-size: 1rem; }
  .news-card .excerpt { font-size: 0.9rem; }
}

/* ==== Card Berita Seragam ==== */
.news-card {
  background: var(--card, #0f2536);
  border: 1px solid #ffffff14;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

.news-card .news-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.news-card .news-content {
  flex: 1;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}

.news-card .news-title {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 8px;
}

.news-card .news-excerpt {
  color: var(--muted, #a6c3d9);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: auto;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-card .news-meta {
  font-size: 0.8rem;
  color: var(--muted, #a6c3d9);
  margin-top: 8px;
}

.news-card .news-link {
  margin-top: 10px;
  padding: 6px 10px;
  background: var(--green, #2196f3);
  color: #fff;
  font-weight: 600;
  border-radius: 6px;
  text-align: center;
  transition: background .2s ease;
}

.news-card .news-link:hover {
  background: var(--green-dark, #1976d2);
}

/* ===== Layout Berita Grid ===== */
.grid-berita {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* Hero card tetap bisa menonjol */
.news-card.hero {
  grid-column: span 2;       /* hero ambil 2 kolom kalau cukup space */
  height: 100%;
}

@media (max-width: 768px) {
  .news-card.hero {
    grid-column: span 1;     /* di mobile hero hanya 1 kolom */
  }
}

/* Grid berita rapi, semua card sama tinggi */
.grid-berita,
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  align-items: stretch; /* paksa card stretch penuh */
}

.news-card {
  display: flex;
  flex-direction: column;
  height: 100%; /* biar tinggi card ngikut grid */
}

.news-card .news-content {
  flex: 1; /* isi card fleksibel */
  display: flex;
  flex-direction: column;
}

.news-card .news-excerpt {
  flex-grow: 1; /* isi mengisi ruang, tombol tetap di bawah */
}