body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
   background:
    radial-gradient(circle at top, #3a3324 0%, #15120c 55%, #000 100%);
  color:#e6e6e6;
  line-height:1.6;
  font-size:14px;
  font-weight:300;
}


.container{
  max-width:800px;
  margin:auto;
  padding:10px
}
header img{
  width:100%;
  height:auto;
 border:1px solid rgba(212,175,55,0.25);
}
h1,h2,h3{
  color:red; /* emas tua */
  letter-spacing:0.6px;
  text-align: center;
}

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

a:hover{
  color:#f2e3b1;
}
strong{
  color:red; /* silver */
  font-weight:700;
}

nav ul{
  display:flex;
  list-style:none;
  padding:0;
  margin:10px 0;
  background:#b00000
}
nav li{
  flex:1
}
nav a{
  display:block;
  padding:12px;
  color:#fff;
  text-align:center;
  text-decoration:none;
  font-size:.9rem
}
nav a:hover{
  background:#700000
}
main, .content{
  background:
    linear-gradient(
      145deg,
      #2b2416,
      #1a150d
    );
    padding: 15px;
  border:1px solid rgba(212,175,55,0.25); /* emas matte */
  box-shadow:
    inset 0 1px 0 rgba(255,215,130,0.08),
    0 10px 30px rgba(0,0,0,0.7);
}


iframe{
  width:100%;
  height:800px;
  border:none
}
.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{
  background:#b00000;
  color:#fff;
  text-align:center;
  padding:15px;
  margin-top:20px
}
 
.tampil {
  width: 100%;
  border: 2px solid #ccc;
  margin: -1px;
  border-radius: 3px;
}

.tampil img {
  height: 110px;
  margin: auto;
}

.banner-float {
  position: fixed;
  width: 100%;
  text-align: center;
  bottom: 0px;
  z-index: 9999;
}

.banner-float img {
  width: 728px;
}

.banner1 img {
  display: inline-block;
  width: 100%;
}

.floating-top {
  background: transparent;
  top: 0;
  height: auto;
  left: 0;
  padding: 0px;
  position: fixed;
  text-align: center;
  width: 100%;
  z-index: 1001;
}

.floating-bottom {
  background: transparent;
  bottom: 0;
  height: auto;
  left: 0;
  padding: 0px;
  position: fixed;
  text-align: center;
  width: 100%;
  z-index: 1001;
}

.floating-top img,
.floating-bottom img {
  width: 50%;
}
.headerbanner {
  text-align: center;
  background: #f5f5f5;
  margin-top: 5px;
}

.headerbanner a {
  display: block;     
  margin: 0;           
  line-height: 0;     
}

.headerbanner img {
  display: block;      
  width: 100%;         
  height: auto;
  margin: 0;           
  border: 1px solid white;
}

.banner-top img {
  width: 728px;
}

.space {
  width: 100%;
  height: 150px; 
}
@media(max-width:768px){
    body{
    background:
      linear-gradient(
        to bottom,
        #2a2418,
        #0e0c08
      );
  }
  main, .content{
    background:#18130b;
    border-color:rgba(212,175,55,0.18);
  }

  h1, h2, h3{
    color: red;
  }
  iframe{height:800px}
   .iframe-wrap{
    min-height: 700px;
  }
  nav ul{flex-direction:column}
   .banner-float img,
  .banner-top img {
    width: 320px; 
  }

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

  .tampil img {
    height: auto; 
    width: 100%;
  }

  .tampil {
    border-width: 1px;
  }

  .headerbanner {
    background: #f5f5f5;
  }

  .banner-float {
    bottom: 5px;
  }
    .space {
    height: 90px; 
  }
}