/* ===============================
   GLOBAL
================================ */
body {
  font-family: 'Inter', sans-serif;
  margin: 0;
}

/* ===============================
   RAMADHAN RUNNING TEXT
================================ */

/* Header kamu sudah sticky top-0 */
/* Maka bar ini kita tempel tepat di bawah header */

.ramadhan-bar {
    width: 100%;
    background: #0d6efd;
    color: #ffffff;
    height: 40px;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
}


/* Running text */
.ramadhan-text {
    display: inline-block;
    padding-left: 100%;
    animation: ramadhanScroll 20s linear infinite;
    font-weight: 500;
}

@keyframes ramadhanScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Pastikan tidak ada padding aneh */
main {
    padding-top: 0;
}

/* PREMIUM MOBILE NAV */

.mobile-bottom-menu{
position:fixed;
bottom:12px;
left:50%;
transform:translateX(-50%);
width:95%;
max-width:500px;
background:rgba(255,255,255,0.9);
backdrop-filter:blur(12px);
border-radius:20px;
display:none;
justify-content:space-around;
align-items:center;
padding:10px 5px;
z-index:999;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

/* ITEM */

.nav-item{
display:flex;
flex-direction:column;
align-items:center;
text-decoration:none;
font-size:11px;
color:#666;
transition:all .25s ease;
position:relative;
}

/* ICON */

.nav-item svg{
width:22px;
height:22px;
fill:#777;
margin-bottom:4px;
transition:all .25s ease;
}

/* ACTIVE MENU */

.nav-item.active svg,
.nav-item.active span{
color:#16a34a;
fill:#16a34a;
font-weight:600;
}

/* INDICATOR DOT */

.nav-item.active::after{
content:"";
position:absolute;
bottom:-6px;
width:5px;
height:5px;
background:#16a34a;
border-radius:50%;
}

/* HOVER / TAP EFFECT */

.nav-item:active{
transform:scale(0.88);
}

/* TELPON WARNA */

.tel-btn svg{
fill:#3b82f6;
}

.tel-btn span{
color:#3b82f6;
}

/* WHATSAPP WARNA */

.wa-btn svg{
fill:#25D366;
}

.wa-btn span{
color:#25D366;
}

/* ANIMASI HALUS */

.nav-item:hover svg{
transform:translateY(-2px);
}

/* MOBILE ONLY */

@media(max-width:1024px){

.mobile-bottom-menu{
display:flex;
}

body{
padding-bottom:90px;
}

}

.wa-btn svg{
fill:#25D366;
}

.wa-btn:active{
transform:scale(0.85);
}

.wa-btn svg{
filter: drop-shadow(0 2px 6px rgba(37,211,102,0.4));
}

@media(min-width:768px) and (max-width:1024px){

.mobile-bottom-menu{
max-width:600px;
padding:14px 10px;
}

.nav-item{
font-size:12px;
}

.nav-item svg{
width:24px;
height:24px;
}

}

/* DEFAULT: tampil */
.floating-wa{
display:block;
}

/* HILANG di HP & TABLET */
@media(max-width:1024px){
.floating-wa{
display:none !important;
}
}

.wa-float-circle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;

    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    transition: 0.3s;
}

.wa-float-circle:hover {
    transform: scale(1.1);
}

/* HIDE DI HP */
@media (max-width: 992px) {
    .wa-float-circle {
        display: none !important;
    }
}