:root{
 --bg:#ffffff;
 --card:#f6f6f6;
 --gold:#b89b2f;
 --text:#222;
 --muted:#555;
 --border:#e3e3e3;
}

body{
 margin:0;
 background:var(--bg);
 color:var(--text);
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
 font-size:15px;
 line-height:1.7;
}

.container{
 max-width:960px;
 margin:auto;
 padding:0;
}

header img{
 width:100%;
 border-radius:0;
 border:1px solid var(--border);
}

nav{
 margin:15px 0;
 background:#d40000;
 border-radius:0;
 border:1px solid var(--border);
}

nav ul{
 list-style:none;
 padding:0;
 margin:0;
 display:flex;
}

nav li{flex:1}

nav a{
 display:block;
 padding:14px;
 text-align:center;
 color:var(--gold);
 font-weight:600;
}

nav a:hover{
 background:red;
}

main{
 background:var(--card);
 padding:22px;
 border-radius:0;
 border:1px solid var(--border);
}

h1,h2,h3{
 font-family:'Libre Baskerville',serif;
 color:var(--gold);
 text-align:center;
 margin-top:30px;
}

p{
 color:var(--muted);
 text-align:justify;
}

strong{
 color:#111;
}

iframe{
 width:100%;
 border-radius:10px;
 border:1px solid var(--border);
 background:#fff;
}

.iframe-wrap{
 position:relative;
 height:700px;
 margin:20px 0;
}

.iframe-wrap iframe{
 position:absolute;
 inset:0;
}

footer{
 margin-top:30px;
 background:#d40000;
 padding:15px;
 text-align:center;
 font-size:13px;
 color:#fff;
 border-radius:0;
 border:1px solid var(--border);
}
.header-banner{
  display:flex;
  flex-direction:column;   
  align-items:center;      
  gap:1px;
  margin:16px 0;
}

.header-banner a{
  display:block;
  text-align:center;
}

.header-banner img{
  display:block;
  width:auto;
  max-width:100%;          
  height:auto;
  margin:0 auto;           
}
.floating-top,
.floating-bottom{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 728px;
  max-width: 728px;
  z-index: 2147483647;
}

.floating-top{ top: 0; }
.floating-bottom{ bottom: 0; }

.floating-top a,
.floating-bottom a{
  display:block;
}

.floating-top img,
.floating-bottom img{
  width: 728px;
  height: 90px;
  display: block;
}
 
.nav-wrapper {
    max-width: 550px;
    margin: 30px auto;
    text-align: center;
    font-family: 'Inter', sans-serif;
}

.nav-title {
    font-size: 20px;
    font-weight: 700;
    color: #f4c542; /* gold */
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}
.nav-item {
    background: #d40000;
    border: 1px solid rgba(244, 197, 66, 0.25); /* lebih tipis */
    padding: 12px;
    border-radius: 6px; /* sebelumnya 10px */
    transition: 0.25s ease-in-out;
    box-shadow: 0 0 5px rgba(244, 197, 66, 0.10); /* glow lebih kecil */
}

.nav-item:hover {
    background: #1a1a1a;
    border-color: #f4c542;
    box-shadow: 0 0 8px rgba(244, 197, 66, 0.25);
    transform: translateY(-2px);
}

.nav-item a {
    color: #f9d76f; /* gold bright */
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
}

.nav-item a:hover {
    color: #fff;
}

@media(max-width:768px){
 nav ul{flex-direction:column}
 main{padding:15px}
 h1{font-size:22px}
 h2{font-size:18px}
 .iframe-wrap{height:600px}
}
.floating-top,
  .floating-bottom{
    width: 100%;
    padding: 0 6px;
  }

  .floating-top img,
  .floating-bottom img{
    width: 100%;
    height: auto;
  }