/* =========================================================
   SOCIAL ICONS + FOOTER — optimized & themable
   ========================================================= */

/* speed token (fallback) */
:root{ --tr-fast:.25s ease; }

/* ==== SOCIAL ICONS ==== */
.social-icons{
  /* ukuran container & ukuran glyph di dalamnya */
  --size: 40px;
  --glyph: 56%;
}

.social-icons .si{
  position:relative;
  width:var(--size); height:var(--size);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  color:#fff; text-decoration:none; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  outline:0;
}
.social-icons .si:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.16);
}
.social-icons .si:focus-visible{
  box-shadow:0 0 0 3px rgba(255,255,255,.35), 0 2px 8px rgba(0,0,0,.18);
  transform:none;
}

/* glyph dari sprite SVG mengikuti currentColor */
.social-icons .si svg{
  width:var(--glyph); height:var(--glyph); display:block;
  fill:currentColor; stroke:currentColor;
}

/* Tooltip */
.social-icons .si::after{
  content:attr(data-tooltip);
  position:absolute; bottom:calc(100% + 6px); left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,.85); color:#fff;
  padding:3px 7px; border-radius:4px; font-size:12px;
  white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.social-icons .si:hover::after,
.social-icons .si.active::after{
  opacity:1; transform:translateX(-50%) translateY(-2px);
}

/* Brand colors (latar belakang button) */
.social-icons .si--fb{ background:#1877F2; }
.social-icons .si--ig{
  background:radial-gradient(80% 80% at 30% 110%,
    #fed373 0, #f15245 38%, #d92e7f 60%, #9b36b7 85%, #515ecf 100%);
}
.social-icons .si--tw{ background:#111; }         /* X/Twitter */
.social-icons .si--wa{ background:#25D366; }
.social-icons .si--tg{ background:#229ED9; }
.social-icons .si--lc{ background:#FF9800; }
.social-icons .si--yt{ background:#FF0000; }
.social-icons .si--sc{ background:#FF5500; }
.social-icons .si--tt{ background:#000; }         /* TikTok */
.social-icons .si--lt{ background:#43e55c; }      /* Linktree opsional */

/* List reset */
.social-icons .list-inline{ margin:0; padding:0; list-style:none; }
.social-icons .list-inline-item{ display:inline-block; margin-right:.5rem; }
.social-icons .list-inline-item:last-child{ margin-right:0; }

/* ==== ICON UTILS (inline icon di teks/link) ==== */
.icon{
  width:1em; height:1em; display:inline-block; vertical-align:middle;
  fill:currentColor; stroke:currentColor;
}
.icon-search{ color:#111; }

/* ==== NAV FORM (opsional) ==== */
.btn-search{ display:inline-flex; align-items:center; justify-content:center; }
.navbar .form-control{ height:38px; }
.navbar .btn-search{ width:40px; height:38px; padding:0; }

/* ==== LEGAL LINKS (daftar link alternatif) ==== */
.legal-links a{
  display:inline-flex; align-items:center; gap:.5rem;
  color:inherit; text-decoration:none;
  transition:text-decoration var(--tr-fast);
}
.legal-links a:hover{ text-decoration:underline; }
.legal-links .icon{
  width:20px; height:20px; flex:0 0 20px; display:inline-block;
  fill:currentColor; stroke:currentColor; vertical-align:-3px;
}

/* Warna merek untuk ikon kecil (ikuti currentColor) */
.icon-heylink { color:#16a34a; }   /* Heylink */
.icon-linklist{ color:#8b5cf6; }   /* Linklist.bio */
.icon-linkspace{ color:#0ea5e9; }  /* Link.space */
.icon-linkr   { color:#ec4899; }   /* Linkr.bio */
.icon-mezink  { color:#f59e0b; }   /* Mez.ink */
.icon-linktree{ color:#43e55c; }   /* Linktree */

/* ==== FOOTER (tema) ==== */
footer.site-footer{
  background:linear-gradient(180deg,
    var(--footer-from, rgba(110,65,22,.47)),
    var(--footer-to,   rgba(0,0,0,.95))
  );
  color:var(--footer-text, #ffffff);
  padding:20px 0; text-align:left;
}
footer.site-footer h5{
  color:var(--footer-heading, #ffffff);
  margin-bottom:.75rem;
}
footer.site-footer p{
  color:var(--footer-text, #ffffff);
  margin:0 0 .75rem;
}
footer.site-footer a{
  color:var(--footer-link, #ffd9a8);
  text-decoration:none;
  transition:text-decoration var(--tr-fast);
}
footer.site-footer a:hover{ text-decoration:underline; }

/* Utility gradient (opsional) */
.bg-red-black{
  background:linear-gradient(180deg,#14172e,#79552d);
  box-shadow:inset 0 -1px 3px rgba(0,0,0,.05);
}

/* ===== THEME PRESETS ===== */
.theme-orange{
  --footer-from:rgba(255,123,0,.6);
  --footer-to:rgba(226,107,9,.95);
  --footer-text:#fff;
  --footer-heading:#fff;
  --footer-link:#ffe9d1;
}
.theme-navy{
  --footer-from:rgba(12,18,44,.9);
  --footer-to:rgba(10,10,18,.98);
  --footer-text:#e9eefc;
  --footer-heading:#fff;
  --footer-link:#c3d4ff;
}
.theme-emerald{
  --footer-from:rgba(8,28,21,.9);
  --footer-to:rgba(0,0,0,.98);
  --footer-text:#e8fff7;
  --footer-heading:#fff;
  --footer-link:#8ff0c2;
}