/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Apr 25 2026 | 17:52:01 */
/* ===== WRAPPER ===== */
.my-social.neon {
  text-align: center;
  margin-top: 20px;
  --neon: #9676c1;            /* warna tema (border/hover bg) */
  color: var(--pctext-cl);    /* teks ikut theme */
}

/* ===== TITLE (NO NEON) ===== */
.my-social-title::before {
  content: "KEEP IN TOUCH";
  font-weight: 700;
  letter-spacing: 1.5px;
  font-size: 18px;
  color: var(--pctext-cl);    /* teks normal, bukan neon */
  text-shadow: none;          /* matikan glow */
}

.my-social-title {
  margin-bottom: 20px;
}

/* garis tetap halus, bukan glow */
.my-social-title::after {
  content: "";
  display: block;
  height: 1px;
  width: 60%;
  margin: 10px auto 0;
  background: currentColor;
  opacity: .25;
  box-shadow: none;
}

/* ===== ICON WRAP ===== */
.my-social-icons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* ===== ICON BUTTON ===== */
.my-social-icons a {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  color: var(--neon);               /* warna default (border/icon) */
  border: 1px solid var(--neon);
  box-shadow:
    0 0 6px rgba(150,118,193,.25),
    inset 0 0 6px rgba(150,118,193,.15);

  transition: all .3s ease;
}

/* ukuran icon */
.my-social-icons i {
  font-size: 18px;
  transition: color .3s ease;       /* penting: biar bisa dikunci */
}

/* ===== HOVER (BACKGROUND NYALA, ICON TETAP) ===== */
.my-social-icons a:nth-child(1):hover {
  box-shadow: 0 0 12px #1877f2;
	  text-decoration: none;
}

.my-social-icons a:nth-child(2):hover {
  box-shadow: 0 0 12px #000;
	  text-decoration: none;
}

.my-social-icons a:nth-child(3):hover {
  box-shadow: 0 0 12px #ff0000;
	  text-decoration: none;
}

.my-social-icons a:nth-child(4):hover {
  box-shadow: 0 0 12px #e1306c;
	  text-decoration: none;
}
/* KUNCI warna icon saat hover (tidak ikut jadi putih) */
/* ===== DEFAULT (warna brand) ===== */
.my-social-icons a:nth-child(1) i { color:#1877f2; } /* Facebook */
.my-social-icons a:nth-child(2) i { color:#000000; } /* X */
.my-social-icons a:nth-child(3) i { color:#ff0000; } /* YouTube */
.my-social-icons a:nth-child(4) i { color:#e1306c; } /* Instagram */

/* ===== HOVER → jadi netral ===== */
.my-social-icons a:hover i {
  color: var(--pctext-cl) !important; /* auto adapt light/dark */
}

/* ===== OPTIONAL: WARNA ICON PER BRAND ===== */
.my-social-icons a:nth-child(1) { color:#1877f2; border-color:#1877f2; } /* Facebook */
.my-social-icons a:nth-child(2) { color:#000000; border-color:#000000; } /* X */
.my-social-icons a:nth-child(3) { color:#ff0000; border-color:#ff0000; } /* YouTube */
.my-social-icons a:nth-child(4) { color:#e1306c; border-color:#e1306c; } /* Instagram */

/* hover tetap pakai warna masing-masing */
.my-social-icons a:nth-child(1):hover { background:#1877f2; }
.my-social-icons a:nth-child(2):hover { background:#000000; }
.my-social-icons a:nth-child(3):hover { background:#ff0000; }
.my-social-icons a:nth-child(4):hover { background:#e1306c; }

/* LIGHT/DARK TWEAK */
body.pclight-mode .my-social.neon { --neon:#7e5bb3; }
body.pcdark-df .my-social.neon   { --neon:#b89cff; }
/* LIGHT MODE */
body.pclight-mode .my-social-icons a:nth-child(2):hover i {
  color: #000 !important;
}

/* DARK MODE */
body.pcdark-df .my-social-icons a:nth-child(2):hover i {
  color: #fff !important;
}