:root{
  /* WhatsApp green dominant */
  --g:#25D366;
  --g-dark:#075E54;
  --g-deep:#128C7E;

  /* white + granite system */
  --w:#ffffff;
  --bg:#F3F4F6;
  --txt:#0f172a;
  --muted:#6b7280;
  --border:#E5E7EB;

  /* premium feel */
  --r:16px;
  --r2:20px;
  --shadow: 0 10px 28px rgba(2,6,23,.10);
  --shadow2: 0 6px 18px rgba(2,6,23,.08);

  --container: 1240px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--txt);
  background:var(--bg);
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 18px}

/* Topbar */
.topbar{
  background: var(--g-dark);
  color: var(--w);
}
.topbar__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;gap:12px;
}
.topbar__right{display:flex;align-items:center;gap:12px}
.topbar__link{opacity:.9}
.topbar__link:hover{opacity:1;text-decoration:underline}

/* Header */
.header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(243,244,246,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(229,231,235,.75);
}
.header__inner{
  display:flex;align-items:center;gap:16px;
  padding:14px 0;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-weight:800;letter-spacing:.2px;
}
.brand__mark{
  width:14px;height:14px;border-radius:999px;
  background: var(--g);
  box-shadow: 0 0 0 6px rgba(37,211,102,.18);
}
.brand__text{font-size:18px}
.brand--footer .brand__mark{box-shadow:none}

.search{
  flex:1;
  display:flex;align-items:center;
  background: var(--w);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 8px 6px 14px;
  box-shadow: var(--shadow2);
}
.search__input{
  width:100%;
  border:0;outline:0;
  font-size:14px;background:transparent;
}
.search__btn{
  border:0;cursor:pointer;
  width:36px;height:36px;border-radius:999px;
  background: rgba(37,211,102,.14);
}
.search__btn:hover{background: rgba(37,211,102,.22)}

.header__actions{display:flex;align-items:center;gap:10px}

/* Category nav */
.catnav{
  border-top: 1px solid rgba(229,231,235,.8);
  background: rgba(243,244,246,.92);
}
.catnav__inner{
  display:flex;gap:10px;flex-wrap:wrap;
  padding:10px 0;
}
.catnav__link{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(229,231,235,.9);
  background: var(--w);
  font-weight:650;
  font-size:13px;
}
.catnav__link:hover{
  border-color: rgba(37,211,102,.45);
  box-shadow: 0 6px 16px rgba(2,6,23,.06);
}
.catnav__link.is-active{
  background: rgba(37,211,102,.12);
  border-color: rgba(37,211,102,.55);
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  font-weight:750;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
}
.btn--sm{padding:8px 12px;font-size:13px}
.btn--primary{
  background: var(--g);
  color: #052b1a;
  box-shadow: 0 12px 22px rgba(37,211,102,.22);
}
.btn--primary:hover{background:#1fb85b}
.btn--ghost{
  background: transparent;
  border-color: rgba(7,94,84,.22);
}
.btn--ghost:hover{
  border-color: rgba(37,211,102,.45);
  background: rgba(37,211,102,.08);
}
.btn--block{display:flex;width:100%}

/* Main grid (A style) */
.main{padding:22px 0 38px}
.grid{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:18px;
  align-items:start;
}

/* Cards */
.card{
  background: var(--w);
  border: 1px solid rgba(229,231,235,.9);
  border-radius: var(--r2);
  box-shadow: var(--shadow);
}

/* Featured */
.featured{
  overflow:hidden;
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  min-height: 320px;
}
.featured__media{
  background:
    radial-gradient(1200px 380px at 10% 10%, rgba(37,211,102,.20), transparent 55%),
    linear-gradient(135deg, rgba(7,94,84,.55), rgba(37,211,102,.25));
}
.featured__body{padding:18px}
.featured__title{
  margin-top:10px;
  font-size:26px;
  line-height:1.15;
  letter-spacing:.1px;
}
.featured__excerpt{margin-top:10px;color:var(--muted)}
.featured__actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}

/* Meta + badges */
.meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.meta__dot{opacity:.45}
.meta__text{font-size:13px;color:var(--muted)}

.badge{
  display:inline-flex;align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  border:1px solid rgba(37,211,102,.35);
  background: rgba(37,211,102,.12);
  color: var(--g-deep);
}
.badge--news{
  border-color: rgba(7,94,84,.25);
  background: rgba(7,94,84,.10);
  color: var(--g-dark);
}
.badge--guide{
  border-color: rgba(17,24,39,.15);
  background: rgba(17,24,39,.06);
  color: #111827;
}

/* Section head */
.section-head{
  margin-top:14px;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:12px;
}
.section-title{font-size:18px}
.section-link{color:var(--g-dark);font-weight:800}
.section-link:hover{text-decoration:underline}

/* Post list */
.list{margin-top:12px;display:flex;flex-direction:column;gap:12px}
.post--row{
  display:grid;
  grid-template-columns: 170px 1fr;
  overflow:hidden;
}
.post__thumb{
  background:
    radial-gradient(420px 200px at 20% 20%, rgba(37,211,102,.22), transparent 60%),
    linear-gradient(135deg, rgba(2,6,23,.08), rgba(2,6,23,.02));
  min-height: 130px;
}
.post__body{padding:14px}
.post__title{
  margin-top:8px;
  font-size:16px;
  line-height:1.25;
}
.post__title a:hover{color: var(--g-dark)}
.post__excerpt{margin-top:8px;color:var(--muted);font-size:14px}
.post__footer{
  margin-top:10px;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
}
.byline{font-size:13px;color:var(--muted)}
.post__more{font-weight:850;color:var(--g-dark)}
.post__more:hover{text-decoration:underline}

/* Sidebar */
.sidebar{display:flex;flex-direction:column;gap:12px}
.side-card{padding:14px}
.side-card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.side-title{font-size:15px}
.side-link{font-weight:850;color:var(--g-dark)}
.side-link:hover{text-decoration:underline}

.mini-list{display:flex;flex-direction:column;gap:8px}
.mini{
  display:flex;gap:10px;align-items:flex-start;
  padding:10px 10px;
  border-radius: var(--r);
  border:1px solid rgba(229,231,235,.9);
}
.mini:hover{
  border-color: rgba(37,211,102,.45);
  background: rgba(37,211,102,.06);
}
.mini__idx{
  font-weight:950;
  color: var(--g-dark);
}
.mini__text{font-weight:650}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(229,231,235,.9);
  background: var(--w);
  font-weight:750;
  font-size:13px;
}
.chip:hover{
  border-color: rgba(37,211,102,.45);
  background: rgba(37,211,102,.08);
}

.side-card--cta{
  background:
    radial-gradient(700px 260px at 10% 10%, rgba(37,211,102,.20), transparent 60%),
    var(--w);
}
.muted{color:var(--muted);margin-top:6px;margin-bottom:10px}

/* Footer */
.footer{
  background: var(--g-dark);
  color: var(--w);
  margin-top: 18px;
}
.footer__inner{
  display:flex;gap:18px;flex-wrap:wrap;
  align-items:flex-start;justify-content:space-between;
  padding:22px 0;
}
.footer__text{opacity:.9;margin-top:10px;max-width:420px}
.footer__links{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.footer__links a{opacity:.9}
.footer__links a:hover{opacity:1;text-decoration:underline}
.footer__copy{opacity:.85}

/* Responsive */
@media (max-width: 1060px){
  .grid{grid-template-columns: 1fr; }
  .featured{grid-template-columns: 1fr; }
  .header__actions{display:none}
}
@media (max-width: 640px){
  .search{display:none}
  .post--row{grid-template-columns: 1fr}
  .post__thumb{min-height:160px}
}