:root{
  --mm-primary:#1a4d8e;
  --mm-primary-2:#2563eb;

  --bg:#f4f7ff;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border: rgba(15,23,42,.10);

  --shadow: 0 18px 52px rgba(2,8,23,.10);
  --shadow2: 0 22px 70px rgba(2,8,23,.14);

  --r-xl: 34px;
  --r-lg: 26px;
  --r-md: 18px;

  --ring: 0 0 0 4px rgba(37,99,235,.14);
}

/* ====== PAGE BG ====== */
.subpage-wrap{
  background:
    radial-gradient(1200px 520px at 15% 10%, rgba(37,99,235,.12), transparent 55%),
    radial-gradient(900px 420px at 85% 20%, rgba(26,77,142,.10), transparent 60%),
    linear-gradient(180deg, #f7f9ff 0%, #eef4ff 100%);
  padding: 28px 0 54px;
  position: relative;
}

/* ====== HERO ====== */
.hero{
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  padding: clamp(22px, 4vw, 46px);
  background:
    radial-gradient(1200px 500px at 20% 25%, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(900px 420px at 85% 25%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #4f7df5 0%, #2563eb 40%, #144fb6 100%);
  box-shadow: 0 22px 70px rgba(2,8,23,.16);
  border: 1px solid rgba(255,255,255,.18);
}

.hero::before{
  content:"";
  position:absolute; inset:-2px;
  background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity:.22;
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  right:-160px; top:-160px;
  width:560px; height:560px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);
  pointer-events:none;
}

.hero-grid{
  position: relative;
  z-index: 2;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 18px;
  align-items: center;
}

.hero-title{
  margin:0;
  color:#fff;
  font-weight: 900;
  letter-spacing: -.02em;
  font-size: clamp(1.55rem, 3.2vw, 2.4rem);
  text-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.hero-desc{
  margin:.55rem 0 0;
  color: rgba(255,255,255,.92);
  font-weight: 700;
  line-height: 1.45;
}

/* ===== HERO SEARCH ===== */
.hero-search{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}

.searchbar{
  flex: 1 1 420px;
  min-width: 240px;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
}

.searchbar input{
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 6px 2px;
  min-width: 0; /* penting biar gak ngedorong layout di mobile */
}

.btn-search{
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  transition: .18s ease;
  cursor: pointer;
  user-select:none;
  white-space: nowrap;
}

/* FORCE OVERRIDE: biar ga ketimpa home.css */
.hero .hero-search .searchbar{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  box-shadow: 0 14px 28px rgba(2,8,23,.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

.hero .hero-search .searchbar i{
  color: #1d4ed8 !important;
  opacity: 1 !important;
}

.hero .hero-search .searchbar input{
  color: #0f172a !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
}

.hero .hero-search .searchbar input::placeholder{
  color: #64748b !important;
  font-weight: 700 !important;
}

.hero .hero-search .btn-search{
  background: linear-gradient(135deg, #60a5fa, #2563eb, #1a4d8e) !important;
  color: #fff !important;
  box-shadow: 0 16px 38px rgba(2,8,23,.18) !important;
}

.hero .hero-search .btn-search:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 22px 55px rgba(2,8,23,.22) !important;
}

.hero .hero-search .btn-search:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,255,255,.22), 0 16px 38px rgba(2,8,23,.18) !important;
}

/* ===== HERO SIDE ===== */
.hero-side{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 26px;
  padding: 16px 16px;
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}

.hero-side .mini-title{
  margin:0;
  color:#fff;
  font-weight: 900;
  display:flex;
  align-items:center;
  gap: 10px;
}

.hero-side .mini-sub{
  margin:.4rem 0 0;
  color: rgba(255,255,255,.92);
  font-weight: 700;
  line-height: 1.45;
}

.hero-side .mini-stats{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stat{
  border-radius: 18px;
  padding: 10px 12px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
}
.stat b{ display:block; color:#fff; font-weight: 900; font-size: 1.05rem; }
.stat span{ display:block; color: rgba(255,255,255,.92); font-weight: 700; font-size: .85rem; }

/* ====== WRAPPER CARD ====== */
.info-wrap{
  margin-top: 20px;
  background: var(--card);
  border: 1px solid rgba(37,99,235,.18);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.info-wrap::before{
  content:"";
  position:absolute;
  left:-120px; top:-140px;
  width:360px; height:360px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(37,99,235,.12), transparent 62%);
  pointer-events:none;
}

.info-head{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 14px;
  padding: 10px 10px 14px;
  border-bottom: 1px solid rgba(15,23,42,.07);
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
}

.info-title{
  font-weight: 900;
  color: var(--text);
  margin: 0;
  font-size: 1.55rem;
  letter-spacing: -.01em;
}
.info-sub{
  margin:.25rem 0 0;
  color: var(--muted);
  font-weight: 700;
}

.info-badge{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.65rem .95rem;
  border-radius: 999px;
  border: 1px solid rgba(37,99,235,.26);
  background: rgba(37,99,235,.08);
  color: #1d4ed8;
  font-weight: 900;
  white-space: nowrap;
}

/* ====== BREAKING ====== */
.breaking{
  display:flex;
  align-items:flex-start;
  gap: 14px;
  padding: 14px 14px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(37,99,235,.18);
  background:
    radial-gradient(800px 220px at 15% 20%, rgba(37,99,235,.14), transparent 55%),
    linear-gradient(180deg, rgba(37,99,235,.10) 0%, rgba(37,99,235,.05) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  margin: 10px 10px 16px;
  position: relative;
  z-index: 2;
}
.breaking .dot{
  width: 46px; height: 46px;
  border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  border: 1px solid rgba(37,99,235,.20);
  color: #1d4ed8;
  flex: 0 0 auto;
  box-shadow: 0 10px 24px rgba(2,8,23,.08);
}
.breaking h6{ margin:0; font-weight: 900; color: var(--text); }
.breaking p{ margin:.25rem 0 0; color: var(--muted); font-weight: 700; line-height: 1.45; }

/* ====== LAYOUT ====== */
.news-layout{ margin-top: 6px; position: relative; z-index: 2; }
.news-layout .row{ --bs-gutter-x: 18px; --bs-gutter-y: 18px; }

.card-mm{
  background:#fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 34px rgba(2,8,23,.08);
  overflow:hidden;
  transition: .18s ease;
}
.card-mm:hover{
  border-color: rgba(37,99,235,.28);
  box-shadow: var(--shadow2);
  transform: translateY(-3px);
}

.sec-head{
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(15,23,42,.07);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.sec-head h5{ margin:0; font-weight: 900; color: var(--text); }

.pill-mm{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: .42rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(37,99,235,.18);
  background: rgba(37,99,235,.06);
  color: #1d4ed8;
  font-weight: 900;
  white-space: nowrap;
  font-size: .9rem;
}

/* ====== NEWS LIST ====== */
.news-list{ padding: 12px 12px 14px; }

.news-item{
  display:flex;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(246,248,252,.85), rgba(246,248,252,.60));
  transition: .18s ease;
  text-decoration:none !important;
  position: relative;
  overflow: hidden;
}

.news-item::before{
  content:"";
  position:absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 4px;
  border-radius: 99px;
  background: linear-gradient(180deg, #60a5fa, #2563eb, #1a4d8e);
  opacity:.85;
}

.news-item + .news-item{ margin-top: 10px; }

.news-item:hover{
  background:#fff;
  border-color: rgba(37,99,235,.26);
  box-shadow: 0 16px 40px rgba(2,8,23,.10);
  transform: translateY(-2px);
}

.news-thumb{
  width: 92px; height: 72px;
  border-radius: 16px;
  flex: 0 0 auto;
  overflow:hidden;
  border: 1px solid rgba(37,99,235,.16);
  background:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,.65), transparent 55%),
    linear-gradient(135deg, rgba(37,99,235,.25), rgba(26,77,142,.10));
  position: relative;
  box-shadow: 0 12px 26px rgba(2,8,23,.10);
}

.news-thumb::after{
  content:"";
  position:absolute; inset:-20px;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.38) 50%, transparent 65%);
  transform: translateX(-60%);
  opacity:.55;
}
.news-item:hover .news-thumb::after{
  transform: translateX(40%);
  transition: transform .55s ease;
}

.news-body{ min-width: 0; } /* penting mobile */
.news-meta{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: .28rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background:#fff;
  color: var(--text);
  font-weight: 900;
  font-size: .82rem;
}
.tag.blue{
  border-color: rgba(37,99,235,.18);
  background: rgba(37,99,235,.06);
  color: #1d4ed8;
}

.news-item h6{
  margin: 0;
  font-weight: 900;
  color: var(--text);
  line-height: 1.25;
  word-break: break-word;
}
.news-item p{
  margin: .35rem 0 0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.45;
  word-break: break-word;
}

/* ====== SIDEBAR CHIPS ====== */
.chip-wrap{ padding: 14px 16px 16px; }
.chip-grid{ display:flex; flex-wrap: wrap; gap: 10px; }

.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: .55rem .75rem;
  border-radius: 999px;
  border: 1.5px solid rgba(37,99,235,.18);
  background:
    radial-gradient(500px 160px at 20% 20%, rgba(37,99,235,.12), transparent 60%),
    rgba(37,99,235,.06);
  color: #1d4ed8;
  font-weight: 900;
  text-decoration:none !important;
  transition: .18s ease;
}
.chip:hover{
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.40);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(2,8,23,.10);
}

/* ====== RESPONSIVE ====== */

/* Tablet kebawah */
@media (max-width: 991.98px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero{ border-radius: 28px; }
  .info-head{ flex-direction: column; align-items:flex-start; }
  .news-thumb{ width: 84px; height: 66px; }
}

/* HP */
@media (max-width: 576px){
  .subpage-wrap{ padding: 18px 0 40px; }

  .hero{
    padding: 18px 16px;
    border-radius: 24px;
  }

  .hero-title{ font-size: 1.45rem; }
  .hero-desc{ font-size: .95rem; }

  .hero-side{
    padding: 14px 14px;
    border-radius: 20px;
  }

  .hero-search{
    gap: 10px;
  }

  .searchbar{
    flex: 1 1 100%;
    min-width: 0;
    padding: 10px 12px;
  }

  .btn-search{
    width: 100%;
    height: 44px;
  }

  .info-wrap{
    padding: 14px;
    border-radius: 24px;
  }

  .breaking{
    margin: 10px 0 14px;
    padding: 12px 12px;
    border-radius: 20px;
  }

  .card-mm{ border-radius: 20px; }
  .sec-head{ padding: 12px 12px; }

  .news-list{ padding: 10px 10px 12px; }

  /* ini kunci: list berita jadi rapih di HP */
  .news-item{
    padding: 12px 10px;
    border-radius: 16px;
  }

  .news-thumb{
    width: 74px;
    height: 62px;
    border-radius: 14px;
  }

  .tag{ font-size: .78rem; }
  .news-item h6{ font-size: .98rem; }
  .news-item p{ font-size: .9rem; }

  .chip-wrap{ padding: 12px 12px 14px; }
}

/* =========================================================
MOBILE ONLY FIX (ADD AT BOTTOM) — TIDAK NGARUH PC
========================================================= */
@media (max-width: 576px){
  .subpage-wrap .container,
  .subpage-wrap .container-fluid{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* hero: rapihin spacing & cegah overflow */
  .hero{
    overflow: hidden;
  }
  .hero-grid{
    gap: 14px;
  }

  /* hero side stats: kalau kepenuhan jadi 1 kolom */
  .hero-side .mini-stats{
    grid-template-columns: 1fr;
  }

  /* searchbar: input jangan bikin melebar */
  .searchbar input{
    font-size: 14px;
  }

  /* info header: biar badge ga kepotong */
  .info-head{
    padding-left: 6px;
    padding-right: 6px;
  }
  .info-badge{
    width: 100%;
    justify-content: center;
  }

  /* breaking: icon ga kegedean */
  .breaking{
    gap: 12px;
  }
  .breaking .dot{
    width: 42px;
    height: 42px;
    border-radius: 16px;
  }

  /* news item: kalau teks panjang, pastikan turun rapi */
  .news-body{
    min-width: 0;
  }
  .news-item h6,
  .news-item p{
    overflow-wrap: anywhere;
  }

  /* kalau di HP terasa “tinggi”, rapihin sedikit */
  .news-item{
    align-items: flex-start;
  }

  /* chip: biar ga kepanjangan */
  .chip{
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}