/* ========== GLOBAL ========== */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #000;
  color: #fff;
  text-align: center;
}

/* Wrapper Utama */
.main-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px;
  background: #000;
  color: #fff;
}

/* Konten dengan border */
.content-wrapper {
  max-width: 1200px;
  margin: 20px auto;
  padding: 8px;
  border: 1px solid orange;
  border-radius:0px;
  background: #000;
}

/* ========== HEADER ========== */
.header {
  background: black;
  padding: 10px;
  border: 1px solid orange;
}

.logo {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Banner Atas */
.floating-banner,
.floating-bottom {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 728px;
  z-index: 9999;
  text-align: center;
}

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

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

/* Banner di Header */
.headerbanner {
  text-align: center;
  background: #2d2d2d;
  padding: 10px 0;
}

.headerbanner img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* ========== NAVBAR ========== */
.navbar {
  background: orange;
  color: #fff;
  padding: 10px;
  font-weight: bold;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.navbar a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
}

.navbar a:hover {
  text-decoration: underline;
}

/* ========== KONTEN ========== */
.content {
  padding: 10px;
  background: #000;
}

.content p {
  text-align: justify;
  line-height: 1.8;
  margin-bottom: 15px;
}

/* Judul Section */
.table-section h2 {
  color: orange;
  margin-bottom: 20px;
  text-align: center;
}

/* Tabel */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  color: #fff;
}

table th, table td {
  border: 1px solid orange;
  padding: 8px;
  text-align: center;
}

table th {
  background: orange;
}

table td {
  background: #000;
}

/* ========== FOOTER ========== */
footer h3 a {
  color: #fff;
  text-decoration: none;
}

footer h3 a:hover {
  color: orange;
  text-decoration: underline;
}

/* ========== RESPONSIVE ========== */
/* Tablet */
@media (max-width: 1024px) {
  .main-wrapper {
    max-width: 95%;
  }
}

/* Mobile */
@media (max-width: 900px) {
  .main-wrapper,
  .content-wrapper {
    max-width: 100%;
    padding: 15px;
  }

  .navbar {
    flex-direction: column;
    align-items: center;
  }

  .navbar a {
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid #fff;
  }

  .navbar a:last-child {
    border-bottom: none;
  }

  .logo {
    max-height: 80px;
  }
}

/* HP kecil banget */
@media (max-width: 480px) {
  .logo {
    max-height: 60px;
  }

  body {
    font-size: 16px; /* biar lebih gede di HP */
  }

  .content-wrapper {
    padding: 20px;
  }
}

/* ========== RESPONSIVE FIX untuk iframe & tabel ========== */

/* Pastikan iframe tidak memaksa layout melebar */
.table-section iframe {
  width: 100%;
  max-width: 100%;
  display: block;
  border: none;
}

/* Bungkus tabel / iframe agar bisa di-scroll horizontal di HP */
.table-section {
  overflow-x: auto;
}

/* Perbaiki padding & teks saat layar kecil */
@media (max-width: 600px) {
  .content-wrapper {
    padding: 10px;
  }

  h1, h2, h3, p {
    font-size: 90%;
  }
}

/* Perbaiki penggunaan center di mobile */
@media (max-width: 900px) {
  center {
    display: block;
    text-align: center;
  }
}