/* ===============================
   VIRA TIERS LinkBio - main.css
   Clean + mobile-safe layout
================================= */

:root{
  --vt-bg: #0062ff;
  --vt-bg-dark: #0b1220;

  --vt-card: rgba(255,255,255,0.96);
  --vt-card-border: rgba(255,255,255,0.22);
  --vt-text: rgba(255,255,255,0.92);
  --vt-text-dark: rgba(20,24,35,0.92);

  --vt-card-dark: rgba(16, 22, 33, 0.92);
  --vt-card-border-dark: rgba(255,255,255,0.14);
  --vt-text-on-card-dark: rgba(255,255,255,0.92);

  --vt-radius: 18px;
  --vt-gap: 14px;
  --vt-icon: 22px;
  --vt-border: 1px;
  --vt-accent: #42c16e;
}

/* Base */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--vt-bg);
  color: var(--vt-text);
  overflow-x:hidden;
}

/* Dark mode */
html[data-bs-theme="dark"] body{
  background: var(--vt-bg-dark);
  color: rgba(255,255,255,0.92);
}

/* Particle canvas behind everything */
#vt-particles{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.vt-particle-overlay{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Page content above particles */
.site{ position:relative; z-index: 2; }

.vt-main{ padding: 18px 0 30px; }
.vt-section{ padding: 0 0 10px; }

.vt-container{
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
}

/* Header/Profile */
.vt-header{ padding-top: 18px; }
.vt-profile{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 12px;
  padding-top: 14px;
}
.vt-avatar{
  width: 110px;
  height: 110px;
  border-radius: 999px;
  overflow:hidden;
  border: 3px solid rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.14);
}
.vt-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.vt-avatar-fallback{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  font-size: 44px;
  color: #fff;
}
.vt-name{
  display:flex;
  gap: 8px;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.2px;
}
.vt-tagline{
  margin-top: 2px;
  font-size: 15px;
  opacity: 0.95;
}
.vt-subtitle{
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: 0.8px;
  opacity: 0.92;
}

/* Theme toggle (single button, not tight on mobile) */
.vt-theme-toggle{
  position:absolute;
  top: 14px;
  right: 16px;
}
.vt-theme-btn{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.14);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0;
  cursor:pointer;
}
html[data-bs-theme="dark"] .vt-theme-btn{
  border-color: rgba(255,255,255,0.20);
  background: rgba(16, 22, 33, 0.72);
  color: rgba(255,255,255,0.92);
}
.vt-theme-btn .vt-ico{ display:none; }
.vt-theme-btn .vt-ico-sun{ display:flex; }
.vt-theme-btn.is-dark .vt-ico-sun{ display:none; }
.vt-theme-btn.is-dark .vt-ico-moon{ display:flex; }

/* Social icon row */
.vt-icons{
  display:flex;
  justify-content:center;
  gap: 10px;
  margin: 16px 0 18px;
  flex-wrap: wrap;
  margin-bottom: 50px;
}
.vt-icon-btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.10);
  color: #fff;
  text-decoration:none;
  transition: transform .15s ease, background .15s ease;
}
.vt-icon-btn:active{ transform: scale(0.98); }
html[data-bs-theme="dark"] .vt-icon-btn{
  border-color: rgba(255,255,255,0.20);
  background: rgba(16, 22, 33, 0.55);
}

/* SVG base */
.i{
  width: var(--vt-icon);
  height: var(--vt-icon);
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
/* Filled icons override */
.i.i-x{
  fill: currentColor;
  stroke: none;
}

/* Link list */
.vt-links, .vt-sub-links{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: var(--vt-gap);
}
.vt-link{
  width: 100%;
  border-radius: var(--vt-radius);
  padding: 14px 16px;
  border: var(--vt-border) solid rgba(255,255,255,0.25);
  background: var(--vt-card);
  color: var(--vt-text-dark);
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.vt-link svg{ flex: 0 0 auto; }

.vt-link-title{
  flex: 1 1 auto;
  text-align:center;
  font-weight: 700;
  letter-spacing: 0.2px;
}

html[data-bs-theme="dark"] .vt-link{
  background: var(--vt-card-dark);
  border-color: var(--vt-card-border-dark);
  color: var(--vt-text-on-card-dark);
}

/* Top-level hover like linkbioss (support..x). Sub-links are excluded automatically. */
.vt-links > li > .vt-link:hover,
.vt-links > li > .vt-link:active,
.vt-links > li > .vt-link:focus-visible{
  background: rgba(0,0,0,0.10);
  border-color: rgba(0,0,0,0.10);
}

/* Light mode: make top-level highlight look "pressed" with blue */
html:not([data-bs-theme="dark"]) .vt-links > li > .vt-link:hover,
html:not([data-bs-theme="dark"]) .vt-links > li > .vt-link:active,
html:not([data-bs-theme="dark"]) .vt-links > li > .vt-link:focus-visible{
  background: #004ecc;
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
html:not([data-bs-theme="dark"]) .vt-links > li > .vt-link:hover .i,
html:not([data-bs-theme="dark"]) .vt-links > li > .vt-link:active .i,
html:not([data-bs-theme="dark"]) .vt-links > li > .vt-link:focus-visible .i{
  color: #fff;
}

/* Dark mode: top-level hover becomes WHITE */
html[data-bs-theme="dark"] .vt-links > li > .vt-link:hover,
html[data-bs-theme="dark"] .vt-links > li > .vt-link:active,
html[data-bs-theme="dark"] .vt-links > li > .vt-link:focus-visible{
  background: #fff;
  border-color: rgba(255,255,255,0.10);
  color: #111;
}
html[data-bs-theme="dark"] .vt-links > li > .vt-link:hover .i,
html[data-bs-theme="dark"] .vt-links > li > .vt-link:active .i,
html[data-bs-theme="dark"] .vt-links > li > .vt-link:focus-visible .i{
  color: #111;
}

/* Gmail special hover -> red (both modes) */
.vt-links > li > a.vt-link[data-icon="gmail"]:hover,
.vt-links > li > a.vt-link[data-icon="gmail"]:active,
.vt-links > li > a.vt-link[data-icon="gmail"]:focus-visible{
  background:#004ecc !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.18) !important;
}
.vt-links > li > a.vt-link[data-icon="gmail"]:hover .i,
.vt-links > li > a.vt-link[data-icon="gmail"]:active .i,
.vt-links > li > a.vt-link[data-icon="gmail"]:focus-visible .i{
  color: #fff !important;
}

/* Accordion */
.vt-accordion-toggle{ border: none; }
.vt-accordion{ }
.vt-accordion .vt-chevron{
  margin-left: 2px;
  transform: rotate(0deg);
  transition: transform .22s ease;
}
.vt-accordion.is-open .vt-chevron{ transform: rotate(180deg); }

.vt-accordion-panel{ margin-top: 12px; }

/* Sub-links (Saweria/Sosiabuzz) remain card style; no top-level hover rules apply */
.vt-sub-link{
  background: rgba(255,255,255,0.92);
}
html[data-bs-theme="dark"] .vt-sub-link{
  background: rgba(16, 22, 33, 0.92);
}

/* Article (if used) */
.vt-article{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 18px;
  padding: 16px;
  color: rgba(20,24,35,0.92);
}
html[data-bs-theme="dark"] .vt-article{
  background: rgba(16, 22, 33, 0.92);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
}
.vt-article-title{ margin: 0 0 10px; font-size: 20px; }
.vt-article-content{ line-height: 1.7; }

/* Footer */
footer.wrapper{
  padding: 18px 0 28px;
  text-align:center;
  opacity: 0.9;
}
footer.wrapper a{ color: inherit; text-decoration: none !important; }

/* Prevent focus outline ugliness */
:focus-visible{ outline: 3px solid rgba(255,255,255,0.35); outline-offset: 2px; }

/* Mobile: more inset so buttons aren't tight to edges */
@media (max-width: 576px){
  .vt-container{ padding-left: 18px; padding-right: 18px; }
  .vt-link{ padding-left: 18px; padding-right: 18px; }
}


/* Top-level hover/touch highlight (Support..X) */
.vt-links > li > a.vt-link:hover,
.vt-links > li > a.vt-link:active,
.vt-links > li > a.vt-link:focus-visible,
.vt-links > li > button.vt-link:hover,
.vt-links > li > button.vt-link:active,
.vt-links > li > button.vt-link:focus-visible{
  background: var(--vt-accent);
  border-color: var(--vt-accent);
  color: #fff;
  --color-svg: #fff;
}

html[data-bs-theme="dark"] .vt-links > li > a.vt-link:hover,
html[data-bs-theme="dark"] .vt-links > li > a.vt-link:active,
html[data-bs-theme="dark"] .vt-links > li > a.vt-link:focus-visible,
html[data-bs-theme="dark"] .vt-links > li > button.vt-link:hover,
html[data-bs-theme="dark"] .vt-links > li > button.vt-link:active,
html[data-bs-theme="dark"] .vt-links > li > button.vt-link:focus-visible{
  background: #fff;
  border-color: #fff;
  color: #111;
  --color-svg: #111;
}

/* Gmail: red highlight */
.vt-links > li > a.vt-link[data-icon="gmail"]:hover,
.vt-links > li > a.vt-link[data-icon="gmail"]:active,
.vt-links > li > a.vt-link[data-icon="gmail"]:focus-visible{
  background:#004ecc;
  border-color: transparent;
  color: #fff;
  --color-svg: #fff;
}

html[data-bs-theme="dark"] .vt-links > li > a.vt-link[data-icon="gmail"]:hover,
html[data-bs-theme="dark"] .vt-links > li > a.vt-link[data-icon="gmail"]:active,
html[data-bs-theme="dark"] .vt-links > li > a.vt-link[data-icon="gmail"]:focus-visible{
  background:#fff !important;
  color:#111 !important;
  border-color: transparent !important;
}

html[data-bs-theme="dark"] .vt-links > li > a.vt-link[data-icon="gmail"]:hover .i,
html[data-bs-theme="dark"] .vt-links > li > a.vt-link[data-icon="gmail"]:active .i,
html[data-bs-theme="dark"] .vt-links > li > a.vt-link[data-icon="gmail"]:focus-visible .i{
  color:#111 !important;
}




/* Gmail hover (same style as others) */
.social-link[data-icon="gmail"]:hover,
.social-link[data-icon="gmail"]:active,
.social-link[data-icon="gmail"]:focus-visible{
  background:#004ecc !important;
  color:#fff !important;
  border-color: transparent !important;
  --color-svg:#fff;
}
html[data-bs-theme="dark"] .social-link[data-icon="gmail"]:hover,
html[data-bs-theme="dark"] .social-link[data-icon="gmail"]:active,
html[data-bs-theme="dark"] .social-link[data-icon="gmail"]:focus-visible{
  background:#fff !important;
  color:#111 !important;
  --color-svg:#111;
}



/* ===== VT FINAL V7 PATCH ===== */
/* Avatar rainbow ring (target real markup: .vt-avatar) */
.vt-avatar{
  position: relative !important;
  display: inline-flex !important;
  align-items:center;
  justify-content:center;
  border-radius: 999px !important;
  overflow: visible !important;
}
.vt-avatar::before{
  content:"";
  position:absolute;
  inset:-6px; /* thickness */
  border-radius:999px;
  background: conic-gradient(
    #001a7a, /* biru tua */
    #00b0ff, /* biru muda */
    #7c3aed, /* ungu */
    #facc15, /* kuning */
    #ec4899, /* pink */
    #ffffff, /* putih */
    #9ca3af, /* abu-abu */
    #86efac, /* hijau muda */
    #166534, /* hijau tua */
    #a16207, /* coklat */
    #001a7a
  );
  animation: vtRainbowSpin 5s linear infinite;
  z-index:0;
  pointer-events:none;
}
.vt-avatar > img,
.vt-avatar > .vt-avatar-fallback{
  position: relative;
  z-index: 1;
  border-radius: 999px !important;
}
@keyframes vtRainbowSpin {
  to { transform: rotate(360deg); }
}

/* Support font size same as other menu items */
.vt-accordion-toggle,
.vt-accordion-toggle .vt-link-title{
  font: inherit;
  font-size: 1rem;
}

/* Saweria + Sociabuzz hover/touch like other menus */
.vt-accordion-panel .vt-sub-link:hover,
.vt-accordion-panel .vt-sub-link:active,
.vt-accordion-panel .vt-sub-link:focus-visible{
  background: #004ecc !important;
  color: #fff !important;
  border-color: transparent !important;
  --color-svg: #fff;
}
html[data-bs-theme="dark"] .vt-accordion-panel .vt-sub-link:hover,
html[data-bs-theme="dark"] .vt-accordion-panel .vt-sub-link:active,
html[data-bs-theme="dark"] .vt-accordion-panel .vt-sub-link:focus-visible{
  background: #fff !important;
  color: #111 !important;
  border-color: transparent !important;
  --color-svg: #111;
}

/* Bold khusus tombol Support */
.vt-accordion-toggle .vt-link-title{
  font-weight: 700 !important;
}

/* Fix: garis/border tombol Support di dark mode supaya sama seperti menu lain */
html[data-bs-theme="dark"] .vt-accordion-toggle{
  border: 1px solid rgba(255,255,255,0.14) !important;
}