:root{
  --bg:#0A0A0B; --panel:#101013; --muted:#15161A;
  --text:#EDEDF2; --sub:#B7B8C6;
  --brand:#FF7A00; --brand2:#FFAE4D; --line:#FFFFFF14;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 Inter,ui-sans-serif,system-ui}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;padding:10px 16px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel),#0f0f12);transition:.2s ease;box-shadow:0 0 0 0 transparent}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px #00000040}
.btn.primary{border:none;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#111;font-weight:700}
.badge{padding:6px 10px;border-radius:999px;border:1px solid var(--line);color:var(--sub);display:inline-flex;gap:8px;align-items:center;font-size:12px}

/* NAV */
.site-top{position:sticky;top:0;z-index:50;background:#0b0b0cb0;border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.site-top .row{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{font-weight:900;letter-spacing:.5px}
.brand span{color:var(--brand)}
.nav a{padding:8px 10px;border-radius:12px}
.nav a:hover{background:#ffffff10}

/* HERO */
.hero{position:relative;overflow:hidden}
.hero .inner{padding:72px 0 40px}
.hero h1{font-size:44px;line-height:1.15;margin:14px 0 8px}
.hero p{color:var(--sub);max-width:720px}
.hero .cta{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.hero::before{
  content:"";position:absolute;inset:-20% -10% auto -10%;height:560px;
  background:radial-gradient(800px 380px at 85% 10%, #FF7A0026, transparent 60%),
             radial-gradient(600px 260px at 10% 0%, #9b5400a8, transparent 60%);
  pointer-events:none;z-index:-1
}

/* SECTIONS */
.section{padding:34px 0 10px}
.section h2{font-size:22px;margin:0 0 14px}

/* CARDS (posts) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.card .thumb{width:100%;height:170px;object-fit:cover;display:block}
.card .pad{padding:14px}
.card h3{margin:0 0 6px;font-size:18px}
.card p{color:var(--sub);margin:0 0 10px;font-size:14px}

/* GALLERY */
.gallery{columns:4 220px;column-gap:12px}
.gallery a{display:inline-block;margin:0 0 12px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.gallery img{width:100%;display:block}

/* VIDEO GRID */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.video-wrap{position:relative;width:100%;padding-top:56.25%;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#000}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* BOX */
.audio-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px}

/* CTA BAR */
.cta-bar{margin:24px 0;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#111;border-radius:18px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cta-bar .txt{font-weight:800}

/* FOOTER */
.site-foot{padding:18px 0;border-top:1px solid var(--line);color:var(--sub);margin-top:30px}

/* LOGO HOVER */
.brand img{transition:transform .3s ease,opacity .3s ease}
.brand:hover img{transform:scale(1.08);opacity:.9}

/* RESPONSIVE */
@media (max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}.video-grid{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:36px}}
@media (max-width:640px){.cards,.video-grid{grid-template-columns:1fr}}

/* Saiz gambar dalam halaman post */
.post-cover{
  max-width: 900px;     /* had lebar maksimum */
  width: 100%;          /* responsive ikut skrin */
  height: auto;
  display: block;
  margin: 0 auto 16px;  /* center + jarak bawah */
  border-radius: 10px;
  object-fit: contain;
}

/* Kalau ada image dalam body post, jangan pecah layout */
.post-body img{
  max-width: 100%;
  height: auto;
}
/* Gaya khas untuk butang biasa (bukan primary) */
.btn {
  background: #ffffff;         /* putih */
  color: #000000;              /* tulisan hitam */
  border: 1px solid #ffffff;   /* bingkai putih */
  transition: 0.3s;
}

.btn:hover {
  background: #ff8c00;         /* oren bila hover */
  color: #ffffff;              /* tulisan putih bila hover */
  border-color: #ff8c00;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.02); /* 2% shadow */
  backdrop-filter: saturate(120%) contrast(102%);
  pointer-events:none;
  z-index:-1;
}

body{
  background: radial-gradient(circle at 50% -25%,
    rgba(255,200,40,0.38) 0%,
    rgba(0,0,0,1) 72%
  );
  background-attachment: fixed;
}

.video-slider{
  position:relative;
  width:100%;
  max-width:900px;
  margin:auto;
  overflow:hidden;
}

.video-item{
  display:none;
  text-align:center;
}

.video-item.active{
  display:block;
}

.video-item iframe{
  width:100%;
  height:400px;
  border-radius:12px;
  border:0;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}

.v-title{
  margin-top:10px;
  font-size:18px;
}
.v-nav{
  text-align:center;
  margin-top:10px;
}