:root{
  --bg: #0b0b0f;
  --text: #fff;
  --muted: #c8c8c8;
  --brand: #f7d6be;
  --brand-dark: #81634F;
  --panel: #1a1a23;
  --border: #2a2a34;
  --footer: #FBC096;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui, Arial, sans-serif; background:var(--bg); color:var(--text);}

.site-bg{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(800px 600px at 5% 50%, rgba(255,170,0,.15), transparent 60%),
    radial-gradient(800px 600px at 95% 50%, rgba(255,170,0,.15), transparent 60%);
}

.container{
  position:relative;
  z-index:1;
  max-width:1050px;
  margin:0 auto;
  padding:0 12px 96px;
  border-left: 1px solid #F7D6BE;
  border-right: 1px solid #F7D6BE;
  box-shadow: 0 0 15px #F7D6BE;
}

.top-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
}
.logo{height:42px; width:auto}
.livechat-btn{
  background:#222; color:#fff; border:1px solid var(--brand);
  padding:8px 14px; border-radius:8px; text-decoration:none; font-weight:700;
}
.livechat-btn:hover{ filter:brightness(1.1) }

.headline-bar{
  position:relative; display:flex; align-items:center; gap:10px;
  background:linear-gradient(135deg, #1f1f29, #14141b);
  border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; overflow:hidden; margin-bottom:14px;
}
.headline-right-skew{
  position:absolute; right:-40px; top:0; bottom:0; width:120px; transform:skewX(-20deg);
  background:#FBC096;
  z-index:2;
}
.headline-marquee{ flex:1; overflow:hidden; white-space:nowrap; }
.marquee {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  animation: marq 18s linear infinite;
  padding-left: 100%;
}
.marquee span{ color:#fff }
.marquee a{ color:var(--brand); text-decoration:none }

@keyframes marq {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.header-banner{
  position:relative; border-radius:12px; overflow:hidden;
  border:1px solid var(--border); margin-bottom:18px;
}
.header-banner img{ display:block; width:100%; height:auto }
.header-buttons{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  display:flex; gap:10px; z-index:2;
}
.btn-login,.btn-daftar{
  text-decoration:none; color:#111; font-weight:400;
  background:var(--brand); padding:10px 14px; border-radius:10px; border:2px solid #00000033;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-login{ background:#1bbf3b; color:#FFFFFF }
.btn-daftar{ background:#1b5abf; color:#FFFFFF; }
.btn-login:hover,.btn-daftar:hover{ filter:brightness(1.05) }

.main-content{
  display:grid; grid-template-columns: 1fr 320px; gap:18px; align-items:start;
}
.article-body{
  background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:18px;
}
.h1-des{ color:var(--muted); margin-top:-6px }
.article-body h1,.article-body h2,.article-body h3{ margin:12px 0 }
.article-body a{ color:var(--brand) }

.faq details{
  background:#13131a; border:1px solid var(--border); border-radius:8px;
  padding:10px 12px; margin:8px 0;
}
.faq summary{ cursor:pointer; font-weight:400 }

.article-sidebar .sidebar-banner,
.article-sidebar .sidebar-video{
  background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:10px; margin-bottom:14px;
}
.article-sidebar img{ width:100%; height:auto; border-radius:8px }
.sidebar-section{
  background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px; margin-bottom:14px;
}
.sidebar-title{ margin:0 0 10px 0 }
.sidebar-links{ list-style:none; padding:0; margin:0 }
.sidebar-links li{ display:flex; align-items:flex-start; gap:8px; margin:6px 0 }
.sidebar-links a{ color:#ddd; text-decoration:none }
.sidebar-links a:hover{ color:#fff }
.icon{ color:var(--brand) }

.copyright-info{
  text-align:center; color:#aaa; margin-top:18px;
}
.copyright-info a{ color:#ddd; text-decoration:none }

.floating-footer{
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  background:var(--footer); color:#111; border-top:3px solid #00000022;
}
.footer-container{
  max-width:1050px; margin:0 auto; display:flex; justify-content:space-around; gap:6px; padding:10px 12px;
}
.floating-footer a{ 
  color:#111; 
  text-decoration:none; 
  font-weight:400;
  display:flex; 
  flex-direction: column;
  gap:4px;
  align-items:center; 
  justify-content:center;
}

.back-to-top{
  position:fixed; right:16px; bottom:80px; width:42px; height:42px; border-radius:50%;
  background:#222; color:#fff; display:flex; align-items:center; justify-content:center;
  text-decoration:none; opacity:0; pointer-events:none; transition:.25s; border:1px solid var(--border); z-index:9;
}
.back-to-top.show{ opacity:1; pointer-events:auto }

@media (max-width: 1024px){
  .container{ padding-bottom:110px }
}
@media (max-width: 900px){
  .main-content{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .header-buttons{ flex-direction:column; bottom:10px }
  .footer-container{ font-size:14px }
}

:root{
  --footer-height: 60px;
}

body{ padding-bottom: var(--footer-height); }

.floating-footer a{
  flex: 1;
  justify-content: center;
  padding: 6px 0;
  border-right: 1px solid #c44;
}

.floating-footer a:last-child{
  border-right: none;
}

.header-banner{
  border: 1px solid var(--border);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  margin-bottom: 16px;
}

.header-buttons{
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.btn-login, .btn-daftar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 49%;
  min-height: 44px;
  font-weight: 400;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}

@media (max-width: 520px){
  .header-buttons{ flex-direction: column; gap: 8px; }
  .btn-login, .btn-daftar{ width: 100%; }
}

.article-body,
.article-sidebar .sidebar-section,
.article-sidebar .sidebar-banner,
.article-sidebar .sidebar-video{
  border-color: var(--border);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}