/* ===== RESET ===== */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  background:#fafafa;
  color:#000;
  line-height:1.75;
}
img{max-width:100%;height:auto}

/* ===== LAYOUT ===== */
.container{max-width:1000px;margin:auto;padding:0 16px}

/* ===== HEADER ===== */
.header img{
  width:100%;
  aspect-ratio:5/1;
  object-fit:cover;
}
/* ===== HEADER, NAV, FOOTER MAX-WIDTH ===== */
.header,
.nav,
.footer {
  max-width: 800px;
  margin: 0 auto;
}


/* ===== NAV ===== */
.nav{
  background:#dc0000;
   
}
.nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
}
.nav a{
  display:block;
  padding:14px 18px;
  color:white;
  text-decoration:none;
  font-weight:500;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.nav a:hover{background:#b71c1c}

/* ===== MAIN ===== */
.main{
  max-width:800px;
  margin:24px auto;
  padding:24px;
  box-shadow: inset 0 0 0 1px rgba(255, 165, 0, 1);
  
}
h1,h2,h3{color:#c62828;text-align:center;}
h1{font-size:1.9rem}
h2{font-size:1.4rem;margin-top:40px}
p{margin-bottom:20px}

/* ===== IFRAME RESPONSIVE ===== */
.iframe-wrap{
  position: relative;
  width: 100%;
  height: 700px;      /* ⬅️ TINGGI NYATA */
  margin: 20px 0;
}

.iframe-wrap iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;       /* ⬅️ FULL, GAK DI-SCALE */
  border: 0;
}
/* ===== FOOTER ===== */
.footer{
  background:#c62828;
  color:#fff;
  text-align:center;
  padding:15px;
  font-size:.9rem;
}
.header-banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1px; /* jarak antar iklan */
    margin: 15px auto;
    max-width: 100%;
    overflow: hidden;
}

.header-banner a img {
    width: 728px;
    height: 90px;
    max-width: 100%;
    object-fit: cover;
    display: block;
}

.floating-top,
.floating-bottom{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 728px;
  max-width: 100%;
  z-index: 9999;

  display: flex;
  flex-direction: column;   
  align-items: center;
  gap: 1px;                
  pointer-events: auto;
}

/* posisi */
.floating-top{
  top: 10px;
}

.floating-bottom{
  bottom: 10px;
}


.floating-top a,
.floating-bottom a{
  display: block;
  width: 728px;
  max-width: 100%;
  line-height: 0;
}


.floating-top img,
.floating-bottom img{
  display: block;
  width: 728px;
  height: 90px;
  max-width: 100%;
  object-fit: contain;
}

 
/* ===== MOBILE ===== */
@media(max-width:768px){
  .header img {
    width: 800px;    /* lebar header */
    height: 200px;   /* tinggi header */
    object-fit: cover; /* menjaga proporsi gambar */
  }
  h1{font-size:1.6rem}
  .main{padding:16px}
  .nav ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    border: 1px white !important;
  }

  .nav li {
    width: 100% !important;
  }

  .nav a {
    width: 100% !important;
    text-align: center !important;
    padding: 14px 18px !important;
    font-size: 1rem !important;
    border-radius: 1px !important;
  }
  .header-banner a img,
    .floating-top a img,
    .floating-bottom a img {
        width: 100%;
        height: auto;
    }
     .iframe-wrap{
    min-height: 700px;
  }
}