:root{
  --white:#FFFFFF;
  --max-width:420px;
  --n-space:min(max(12px,3.5vmin),30px);
  --n-space-s:min(max(8px,2vmin),20px);
  --n-space-xs:min(max(4px,1vmin),10px);
  --radius:14px;

  --base:#120205;
  --primary:#4a0c13;
  --secondary:#1b0609;
  --secondary-hover:#2a0a10;
  --tertiary:#e8dcc0;

  --gold:#D4AF37;
  --gold-2:#FFCC4D;
  --gold-3:#B8860B;
  --danger:#8a1b25;
}

*{
box-sizing:border-box
}

html,body{
--nav-h:72px;
margin:0;
padding:0;
min-height:100%;
background:#120205;
}

body{
padding-top:var(--nav-h);
display:flex;
justify-content:center;
align-items:flex-start;
min-height:100vh;
color:var(--white);
font-family:Prompt,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
background:#120205;
}

/* ========================= */

a{
color:#fff;
text-decoration:none
}

img{
max-width:100%;
height:auto;
vertical-align:middle
}

.n-container{
width:100%;
max-width:var(--max-width);
margin:0 auto;
padding:0 var(--n-space)
}

.n-columns-gap{
grid-gap:var(--n-space-s)
}

.n-columns-2{
display:grid;
grid-template-columns:1fr
}

.n-columns-1{
display:grid;
grid-template-columns:1fr
}

.center{
display:flex;
justify-content:center;
align-items:center
}

.middle{
display:flex;
flex-direction:column;
justify-content:center
}

.m-b-normal{
margin-bottom:var(--n-space)
}

.padding-s{
padding:var(--n-space-s)
}

.contain{
padding:var(--n-space)
}

/* ========================= NAVBAR ========================= */

.nav{
background:linear-gradient(180deg,rgba(74,12,19,.98)0%,rgba(27,6,9,.95)100%);
width:100%;
position:fixed;
top:0;
left:0;
z-index:9999;
display:flex;
align-items:center;
justify-content:space-between;
padding:var(--n-space-s) var(--n-space);
border-bottom:1px solid rgba(212,175,55,.18);
backdrop-filter:blur(10px);
}

.logo{
display:flex;
align-items:center;
gap:12px;
padding:10px 12px;
border-radius:14px;
background:rgba(0,0,0,.18);
border:1px solid rgba(212,175,55,.22);
}

.logo-inner{
display:flex;
align-items:center
}

.logo-inner img{
display:block;
max-width:240px;
height:auto
}

.button-wrapper{
display:flex;
align-items:center;
gap:var(--n-space-s)
}

/* ========================= BUTTON ========================= */

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 16px;
border-radius:var(--radius);
font-weight:800;
letter-spacing:.2px;
border:1px solid transparent;
transition:transform .15s ease,filter .15s ease,background .15s ease,border .15s ease;
cursor:pointer;
user-select:none;
}

.btn:hover{
transform:translateY(-1px);
filter:brightness(1.05)
}

.btn-primary{
background:linear-gradient(to bottom,var(--gold-2)0%,var(--gold)45%,var(--gold-3)100%);
color:#1a070a;
box-shadow:0 10px 30px rgba(212,175,55,.15);
}

.btn-secondary{
background:rgba(0,0,0,.18);
border:1px solid rgba(212,175,55,.45);
color:#fff;
}

/* ========================= HERO ========================= */

.hero{
padding-top:calc(var(--n-space) * 3.2)
}

.hero-img{
border-radius:18px;
overflow:hidden;
border:1px solid rgba(212,175,55,.18);
background:rgba(0,0,0,.15);
aspect-ratio:1/1
}

.hero-img img{
width:100%;
height:100%;
object-fit:cover;
display:block
}

/* ========================= MARQUEE ========================= */

.marquee-text{
line-height:30px;
overflow:hidden;
position:relative;
background:linear-gradient(90deg,rgba(74,12,19,.9),rgba(27,6,9,.8));
border:1px solid rgba(212,175,55,.25);
border-radius:10px;
margin-bottom:10px;
}

.marquee-text div{
line-height:22px;
font-size:13px;
white-space:nowrap;
color:#fff;
font-weight:700;
animation:18s linear infinite marquee;
padding:6px 10px;
}

.marquee-text:hover div{
animation-play-state:paused
}

@keyframes marquee{
0%{transform:translateX(100%)}
100%{transform:translateX(-100%)}
}

/* ========================= TABLE ========================= */

.table-wrap table{
width:100%;
background:linear-gradient(180deg,rgba(74,12,19,.55),rgba(27,6,9,.65));
border-radius:var(--radius);
border:1px solid rgba(212,175,55,.16);
overflow:hidden;
}

.table-wrap th{
padding:18px 16px;
font-size:18px;
letter-spacing:.2px;
text-align:center;
}

.table-wrap td{
background:rgba(0,0,0,.18);
padding:12px 14px;
border-top:1px solid rgba(255,255,255,.06);
color:#f2ead7;
}

.table-wrap td:first-child{
width:36%;
color:#fff;
font-weight:800;
}

/* ========================= ARTICLE ========================= */

.article{
border:1px solid rgba(255,255,255,.08);
padding:var(--n-space);
border-radius:var(--radius);
background:rgba(0,0,0,.18);
}

.article h1{
font-size:34px;
margin:0 0 10px 0
}

.article h2{
margin:18px 0 10px 0
}

.article p,
.article li{
color:#e9e2d4;
line-height:1.7
}

.article a{
color:var(--gold-2)
}

/* ========================= NOTE ========================= */

.note{
padding:12px 14px;
background:rgba(212,175,55,.10);
border:1px dashed rgba(212,175,55,.35);
border-radius:12px;
color:#fff;
font-weight:700;
}

/* ========================= FOOTER ========================= */

footer{
padding:20px 0;
color:#d8cfbf;
text-align:center
}

footer a{
color:var(--gold-2);
font-weight:800
}

/* ========================= MOBILE ========================= */

@media(max-width:640px){

.nav{
padding:10px 12px;
gap:10px;
}

.logo img{
width:140px;
}

.btn{
padding:8px 12px;
font-size:14px;
}

.hero{
padding-top:16px;
}

.marquee-text div{
font-size:12px;
}

}

@media(max-width:420px){

.logo img{
width:120px;
}

.btn{
padding:7px 10px;
font-size:13px;
}

}


/* ===== FORCE FLAT BACKGROUND (NO GRADIENT) ===== */
html, body{
  background:#120205 !important;
}

body{
  background:#120205 !important;
}

/* hilangkan semua gradient di komponen */
.nav{
  background:#2a0a10 !important; /* maroon flat */
  backdrop-filter:none !important;
}

.marquee-text{
  background:#2a0a10 !important;
}

.bg-container{
  background:#2a0a10 !important;
}

.table-wrap table{
  background:#2a0a10 !important;
}

.article{
  background:#2a0a10 !important;
}

/* kalau masih ada efek 'gradasi' karena transparansi, paksa solid */
.table-wrap td,
.btn-secondary,
.logo{
  background:#1b0609 !important;
}

/* opsional: hilangkan semua shadow biar makin flat */
.btn-primary{ box-shadow:none !important; }