:root{
  --accent:#22c55e;
  --accent2:#38bdf8;

  --text:#e5e7eb;
  --muted:#cbd5e1;
}

/* =====================================================
   FOOTER
===================================================== */

.footer.dark-background{
    position:relative;
    overflow:hidden;
    color:var(--text);
    padding-top:0px;

     background-image:url("<?= base_url('uploads/home/danau-toba.jpg'); ?>");
    /* atau gunakan:
    background-image:url("<?= base_url('uploads/home/footer-bg.jpg'); ?>");
    */

    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
}

/* Overlay agar tulisan jelas */

.footer.dark-background::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(8,37,92,.82);
    z-index:1;
}

/* Efek gradasi */

.footer.dark-background::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        rgba(0,0,0,.15),
        rgba(255,255,255,.03)
    );
    z-index:1;
}

/* seluruh isi footer */

.footer.dark-background .container{
    position:relative;
    z-index:2;
}

/* =====================================================
   TYPOGRAPHY
===================================================== */

.footer-about .sitename{
    font-size:24px;
    font-weight:700;
    color:#fff;
    display:block;
    margin-bottom:15px;
}

.footer-contact p{
    margin-bottom:8px;
    color:rgba(255,255,255,.90);
}

.footer h4{
    color:#fff;
    font-size:18px;
    font-weight:700;
    margin-bottom:18px;
    text-transform:uppercase;
}

.footer a{
    color:var(--muted);
    transition:.3s;
    text-decoration:none;
}

.footer a:hover{
    color:#fff;
    padding-left:5px;
}

/* =====================================================
   LIST
===================================================== */

.footer-links ul{
    margin:0;
    padding:0;
    list-style:none;
}

.footer-links li{
    padding:6px 0;
}

/* =====================================================
   SOCIAL
===================================================== */

.social-links{
    display:flex;
    align-items:center;
    gap:10px;
}

.social-links a{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.15);
    backdrop-filter:blur(10px);
    transition:.3s;
}

.social-links a:hover{
    transform:translateY(-4px);
    background:#ffffff;
    color:#0b2f66;
}

.facebook{color:#1877F2;}
.instagram{color:#E4405F;}
.youtube{color:#FF0000;}
.twitter{color:#93C5FD;}

/* =====================================================
   VISITOR
===================================================== */

.visitor-statistik{
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.15);
    border-radius:14px;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    padding:10px;
}

.visitor-title{
    color:#fff;
    font-size:18px;
    font-weight:700;
    margin-bottom:15px;
    padding-bottom:0px;
    border-bottom:1px solid rgba(255,255,255,.15);
}

.visitor-title i{
    color:#ffc107;
    margin-right:8px;
}

.visitor-table{
    width:100%;
    border-collapse:collapse;
}

.visitor-table td{
    padding:8px 5px;
    border-bottom:1px solid rgba(255,255,255,.08);
    color:#fff;
    font-size:14px;
}

.visitor-table tr:last-child td{
    border-bottom:none;
    font-weight:700;
}

.visitor-table td:last-child{
    text-align:right;
    color:#ffc107;
    font-weight:700;
}

/* =====================================================
   COPYRIGHT
===================================================== */

.footer .copyright{
    margin-top:30px;
    padding:20px 0;
    border-top:1px solid rgba(255,255,255,.10);
    color:rgba(255,255,255,.85);
}

/* =====================================================
   FLOATING SOCIAL
===================================================== */

.floating-social{
    position:fixed;
    right:20px;
    bottom:90px;
    display:flex;
    flex-direction:column;
    gap:12px;
    z-index:9999;
}

.floating-social a{
    width:46px;
    height:46px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:18px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.15);
    backdrop-filter:blur(12px);
    transition:.3s;
}

.floating-social a:hover{
    transform:scale(1.1);
    background:var(--accent);
}

/* =====================================================
   WHATSAPP
===================================================== */

.whatsapp-float{
    position:fixed;
    bottom:20px;
    right:20px;
    width:58px;
    height:58px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:28px;
    z-index:99999;
    text-decoration:none;
    background:linear-gradient(135deg,#25D366,#16a34a);
    box-shadow:0 10px 25px rgba(0,0,0,.35);
    transition:.3s;
}

.whatsapp-float:hover{
    transform:scale(1.08);
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:768px){

.footer{
    text-align:center;
}

.footer-contact,
.footer-links{
    margin-top:25px;
}

.social-links{
    justify-content:center;
}

.floating-social{
    display:none;
}

}