/* =========================================================
   🌐 GLOBAL RESET & DASAR
========================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
  font-family: "Bodoni Moda", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  padding-bottom: 5px; /* ruang untuk bottom bar */
}

a {
  color: black;
  text-decoration: none;
}
a:hover {
  color: black;
}

img {
  display: block;
  margin: auto;
  max-width: 100%;
  height: auto;
}

.space-bottom { width: 100%; height: 10px; }

/* =========================================================
   🧱 STRUKTUR UTAMA
========================================================= */
.container {
  width: 70%;
  margin: auto;
}

.head {
  width: 100%;
  padding: 20px 0;
  background: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-image: #000000;
  overflow: hidden;
}

.head .logo img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* =========================================================
   📜 MENU
========================================================= */
.menu {
  width: 100%;
  text-align: center;
  background: #c40606;
}
.menu a {
  display: inline-block;
  padding: 10px 20px;
  font-size: 18px;
  color: #c29b5c;
  border-bottom: 1px solid #c40606;
}

/* =========================================================
   📰 KONTEN
========================================================= */
.content {
  width: 100%;
  border-radius: 2px;
  border: 1px solid #ccc;
}

.content p {
  font-size: 16px;
  color: black;
  margin: 5px;
}

/* =========================================================
   🔠 HEADING
========================================================= */
h1 { text-align: center; margin: 20px 0; color: black; }
h2, h3 { text-align: center; margin: 30px 0; font-size: 26px; color: black; }
h4 { text-align: center; margin: 25px 0; font-size: 20px; color: black; }
h1, h2, h3, h4 {
  font-family: "Bodoni Moda", serif;
}

.title-head { font-size: 24px; color: black; }
.title-footer { font-size: 26px; color: black; }

/* =========================================================
   📊 TABEL
========================================================= */
.lassres { width: 70%; margin: auto; }
.lassres table { width: 100%; border-collapse: collapse; }

.t1, .t2, .t3 {
  padding: 5px 10px;
  border: 1px solid #989898;
  background: white;
  font-size: 16px;
}

.t1 { width: 40%; }
.t2, .t3 { width: 30%; }

.table-container { width: 100%; overflow-x: auto; }
.kepala {
  text-align: center;
  font-size: 20px;
  background: #de0000;
  color: white;
}
.timestamp { font-size: 14px; color: #555; margin-bottom: 15px; } 
/* === IFRAME STYLE KHUSUS === */
#liveDrawFrame {
  display: block;
  margin: 20px auto;
  width: 100%;
  max-width: 700px;
  height: 230px;
  border: 2px solid #ff5252;
  border-radius: 10px;
  background: #fff;
}

#resultFrame {
  display: block;
  margin: 30px auto;
  width: 100%;
  max-width: 850px;
  height: 400px; 
  border: 1px solid #ccc;
  border-radius: 10px;
  background: #fafafa;
}

/* =========================================================
   📢 IKLAN
========================================================= */
.iklan { width: 100%; border: 2px solid #ff6600; }
.iklan img { width: 100%; border: 2px solid #ff6600; }

/* =========================================================
   ⚙️ FOOTER
========================================================= */
.footer_container { width: 100%; display: block; }
.inside_footer_container {
  width: 100%;
  display: flex;
  text-align: center;
}

.footer_button {
  width: 22%;
  display: inline-block;
  margin: 1% 0 0 0;
  padding: 10px 0;
  background-color: #d3d3d3;
  box-shadow: 0 0 10px 1px #141414;
  font-size: 15px;
  font-weight: bold;
  color: black;
  letter-spacing: 0.2px;
}

/* ================= BANNER ================= */
.banner, .banner1, .banner2, .banner-top, .headerbanner {
  text-align: center;
}
.banner img,
.banner1 img,
.banner2 img,
.headerbanner img,
.banner-top img { width: 49%; margin: 5px auto; }

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

/* ================= BANNER ================= */
.banner-float {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  z-index: 9999;
}
.banner-float img { width: 728px; }

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

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

.headerbanner { text-align: center; }
.headerbanner img { width: 100%; }

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


/* =========================================================
   📱 RESPONSIVE
========================================================= */
@media (max-width: 1000px) {
  .container { width: 100%; }
  .menu a {
    display: block;
    font-size: 16px;
    border: 1px solid #c40606;
  }

  .lassres { width: 100%; margin: auto; }
  .lassres img { width: 100%; height: auto; padding-top: 1px; }
}

@media (max-width: 768px) {
  .floating-top,
  .floating-bottom {
    left: 0;
    transform: none;
    width: 100%;
  }

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

  .tampil { border-width: 1px; }

  .headerbanner { background: #fff;
  width: 100%;
    max-width: 100%;
    height: auto;}

  .banner-float { bottom: 5px; }

  .space { height: 90px; }
}
  #liveDrawFrame, #resultFrame {
    max-width: 100%;
  }
@media (max-width:600px) {
  .head, .container { width: 100%; }
  .head { padding: 30px 0; }
  .head .logo img { max-width: 90%; }
}