:root{
  --footer-bg-1:#0b1220;
  --footer-bg-2:#0f1b2d;
  --footer-bg-3:#0a0f1a;

  --accent:#22c55e;   /* hijau modern */
  --accent2:#38bdf8;  /* biru soft */

  --text:#e5e7eb;
  --muted:#94a3b8;
}

/* FOOTER UTAMA */
.footer.dark-background {
  background: linear-gradient(135deg,
    var(--footer-bg-3),
    var(--footer-bg-1),
    var(--footer-bg-2)
  );
  color: var(--text);
  padding-top: 70px;
  position: relative;
  overflow: hidden;
}

/* SOFT GLOW LEBIH HALUS */
.footer.dark-background::before,
.footer.dark-background::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  filter: blur(120px);
  border-radius: 50%;
  opacity: 0.4;
}

.footer.dark-background::before {
  top: -150px;
  left: -120px;
  background: radial-gradient(circle, var(--accent2), transparent 70%);
}

.footer.dark-background::after {
  bottom: -180px;
  right: -140px;
  background: radial-gradient(circle, var(--accent), transparent 70%);
}

/* TYPO */
.footer a {
  color: var(--muted);
  transition: 0.3s;
}
.footer a:hover {
  color: #fff;
  transform: translateX(4px);
}

.footer-about .sitename{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #fff;
}

/* CARD STYLE AREA FOOTER */
.footer-links ul li{
  padding: 6px 0;
}

/* SOCIAL ICON (UNIFIED STYLE) */
.social-links a {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin: 0 5px;
  color: #fff;
  transition: 0.3s;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
}

.social-links a:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.15);
}

/* ICON COLOR FIX (lebih soft, tidak terlalu “ngejreng”) */
.facebook { color:#60a5fa; }
.instagram { color:#f472b6; }
.youtube { color:#f87171; }
.twitter { color:#93c5fd; }

/* 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;
  transition:0.3s;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
}

.floating-social a:hover{
  transform: scale(1.12);
  background: rgba(34,197,94,0.25);
}

/* WHATSAPP BUTTON (lebih soft green gradient) */
.whatsapp-float{
  position:fixed;
  bottom:20px;
  right:20px;
  width:56px;
  height:56px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:26px;
  z-index:99999;

  background: linear-gradient(135deg, #25D366, #16a34a);
  box-shadow:0 10px 25px rgba(0,0,0,0.3);
  transition:0.3s;
}

.whatsapp-float:hover{
  transform: scale(1.1) rotate(3deg);
}
/* ==============================
   Transparan Visitor Table
================================= */

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

.visitor-title{
    color:#ffffff;
    font-size:18px;
    font-weight:600;
    margin-bottom:12px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(255,255,255,.10);
}

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

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

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

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

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