/* GLOBAL */
body { margin:0; background:#000; color:#fff; font-family:'Segoe UI',Arial; padding-top:65px; padding-bottom:70px; }
a { color:#00aaff; text-decoration:none; }
:root { --blue-main:#00aaff; --blue-dark:#005f87; }
.container { width:95%; margin:auto; }

/* HEADER */
.header { position:fixed; top:0; left:0; width:100%; z-index:999; background:#000; border-bottom:2px solid #222; display:flex; justify-content:center; padding:6px 0; }
.header img { height:38px; }

/* MENU */
.menu {
    background: #000;
    padding: 10px 0;
    display: flex;
    justify-content: center; /* posisi menu di tengah */
    gap: 10px;
}

.menu a {
    width:100%;
    text-align:center;
    padding:12px 0;
    font-size:14px;
    color:#000;
    font-weight:bold;
    border-radius:6px;
    background:linear-gradient(180deg, var(--blue-main), var(--blue-dark));
    box-shadow:0 0 8px var(--blue-main);
}
.menu a:hover {
    box-shadow:0 0 14px var(--blue-main);
}

/* BANNER */
.banner img { width:100%; border-radius:6px; }

/* BUTTONS */
.btn-group { display:flex; justify-content:space-between; margin:20px 0; }
.btn { width:48%; padding:14px; text-align:center; font-size:16px; border-radius:6px; font-weight:bold; background:linear-gradient(180deg, var(--blue-main), var(--blue-dark)); color:#000; box-shadow:0 0 8px var(--blue-main); }
.btn.login { background:linear-gradient(180deg, #00f1ff, #004c52); color:#fff; }

/* IFRAME */
.frame-center { width:100%; display:flex; justify-content:center; margin:20px 0; }
iframe { border-radius:6px; border:1px solid var(--blue-main); }

/* TABLE */
table { width:100%; border-collapse:collapse; margin-top:15px; background:#0b0b0b; border-radius:6px; overflow:hidden; }
table th { background:var(--blue-main); color:#000; padding:10px; font-size:15px; }
table td { border-bottom:1px solid var(--blue-main); padding:8px; font-size:13px; }

/* ARTICLE */
.article-box { background:#0b0b0b; padding:15px; margin-top:20px; border-radius:6px; border:1px solid var(--blue-main); }
.article-box h1 { font-size:20px; color:var(--blue-main); text-align:center; }
.article-box h2 { font-size:17px; margin-top:15px; color:var(--blue-main); }
.article-box h3 { font-size:15px; color:#11c8ff; margin-top:10px; }
.article-box p { font-size:13px; line-height:1.55; }

/* FOOTER FIXED */
.footer-fixed { position:fixed; bottom:0; left:0; width:100%; background:#000; border-top:2px solid #222; display:flex; justify-content:space-around; padding:8px 0; }

/* Floating Top */
#float-top { position:fixed; top:0; left:50%; transform:translateX(-50%); width:728px; height:90px; z-index:9999; text-align:center; }

/* Floating Bottom */
#float-bottom { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:728px; height:90px; z-index:9999; text-align:center; }

/* Margin anti ketutup */
body { padding-top:100px; padding-bottom:100px; }
.float-article {
    max-width: 800px;
    margin: 15px auto;
    background: #000; /* background hitam */
    color: #fff;      /* teks putih */
    padding: 15px 18px;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
    text-align: justify;
    font-size: 14px;
    line-height: 1.6;
}
h2 {
    margin-bottom: 10px !important;
}

p {
    margin-top: 10px !important;
    line-height: 1.6;
}


/* MOBILE RESPONSIVE */
@media (max-width:600px) {
    .menu { padding:8px 5px; gap:6px; }
    .menu a { width:24%; font-size:11px; padding:8px 0; border-radius:5px; box-shadow:0 0 5px var(--blue-main); }

    #float-top img,
    #float-bottom img { width:100% !important; height:90px !important; }
    #float-top, #float-bottom { width:100% !important; height: 90px !important; }
}
/* Responsive Mobile hingga 768px */
@media (max-width: 768px) {
    .menu a {
        font-size: 13px;
        padding: 10px 0;
        width: 100%;
    }

    #float-top,
    #float-bottom {
        width: 100%;
        height: auto;
    }
    /* HEADER BANNER DI BAWAH CONTAINER 728x90 */
.header-banner {
    width: 100%;
    text-align: center;
    margin: 15px 0;
}

.header-banner img {
    max-width: 100%;
    height: auto;
}
}