/* ===== RESET ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#fff;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* ===== THEME ===== */
:root{
  --w: 600px;
  --r: 26px;
  --gap: 14px;

  --black: #07060b;
  --black2:#0c0a12;

  --pink: #ff3db8;
  --pink2:#ff6adf;

  /* ✅ Accent biru untuk tombol telegram (tetap nyatu) */
  --blue: #2aa8ff;
  --blue2:#67d2ff;

  --ink: #ffffff;
  --muted: rgba(255,255,255,.74);

  --glass: rgba(255,255,255,.10);
  --glass2: rgba(255,255,255,.14);
  --stroke: rgba(255,255,255,.18);

  --shadow: 0 30px 80px rgba(0,0,0,.55);
  --soft: 0 12px 30px rgba(0,0,0,.35);
}

/* ===== BACKGROUND (animated black + pink blend) ===== */
.bg{
  position:fixed; inset:0; z-index:-3;
  background: radial-gradient(1200px 700px at 50% 0%, rgba(255,61,184,.22), transparent 58%),
              radial-gradient(900px 700px at 85% 30%, rgba(255,106,223,.20), transparent 55%),
              radial-gradient(900px 700px at 10% 75%, rgba(255,61,184,.12), transparent 55%),
              linear-gradient(180deg, var(--black), var(--black2));
}
.bg::before{
  content:"";
  position:absolute; inset:-40%;
  background: conic-gradient(from 180deg at 50% 50%,
            rgba(255,61,184,.22),
            rgba(0,0,0,0),
            rgba(255,106,223,.18),
            rgba(0,0,0,0),
            rgba(255,61,184,.22));
  filter: blur(80px);
  animation: swirl 18s linear infinite;
  opacity:.9;
}
.bg::after{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity:.08;
  pointer-events:none;
}

@keyframes swirl{
  0%{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(180deg) scale(1.05)}
  100%{transform:rotate(360deg) scale(1)}
}

/* ===== DESKTOP BACKDROP (like linktree frame) ===== */
.desktop-backdrop{
  display:none;
  position:fixed; inset:0; z-index:-2;
  background: rgba(0,0,0,.55);
}

/* ===== CENTER FRAME ===== */
.shell{
  min-height:100svh;
  display:flex;
  justify-content:center;
  padding: 14px;
}
.frame{
  width:100%;
  max-width: var(--w);
  min-height:100svh;
  position:relative;
  overflow:hidden;
  border-radius: 0;
}

/* Inner card look (glass) */
.frame-inner{
  min-height:100svh;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--soft);
}

/* Desktop: floating phone card */
@media (min-width: 576px){
  .desktop-backdrop{display:block}
  .shell{padding: 38px 14px}
  .frame{
    min-height: calc(100svh - 38px);
    border-radius: var(--r) var(--r) 0 0;
    box-shadow: var(--shadow);
  }
  .frame-inner{border-radius: inherit}
}

/* ===== TOPBAR ===== */
.topbar{
  position:fixed; left:0; right:0;
  z-index:50;
  padding: 14px;
}
@media (min-width: 576px){
  .topbar{position:absolute}
}
.topbar-inner{
  max-width: var(--w);
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.topbar-right{display:flex; gap:10px}

.icon-btn{
  width:44px; height:44px;
  border-radius:999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display:grid; place-items:center;
  cursor:pointer;
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.icon-btn:hover{
  background: rgba(255,255,255,.14);
  box-shadow: 0 14px 38px rgba(0,0,0,.35), 0 0 0 3px rgba(255,61,184,.10);
}
.icon-btn:active{transform: scale(.96)}
.icon-btn svg{opacity:.95}

/* ===== CONTENT ===== */
.content{
  padding: 92px 14px 26px;
}
@media (min-width: 576px){
  .content{padding: 98px calc(var(--gap)*2) 28px}
}

/* ===== PROFILE ===== */
.avatar{
  width: 96px; height: 96px;
  border-radius: 999px;
  display:block;
  margin: 0 auto 14px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 45px rgba(0,0,0,.45), 0 0 0 6px rgba(255,61,184,.08);
  background: rgba(255,255,255,.06);
}
h1{
  margin:0;
  text-align:center;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.15;
  padding: 0 10px;
}
.sub{
  margin: 10px auto 0;
  max-width: 520px;
  text-align:center;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  padding: 0 18px;
  text-wrap: balance;
}

/* badge / small pill */
.pill{
  display:flex;
  justify-content:center;
  margin-top: 12px;
  margin-bottom: 18px; /* ✅ jarak ke tombol/link dibawahnya, tanpa <br> */
}
.pill span{
  font-size: 12px;
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding: 7px 12px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

/* ===== LINKS ===== */
.section-title{
  margin: 18px 0 8px;
  text-align:center;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .2px;
  opacity: .95;
}
.links{
  display:flex;
  flex-direction:column;
  gap: var(--gap);
}

/* === Animasi "idle" + shimmer === */
@keyframes shimmerSweep{
  0%{transform: translateX(-70%) rotate(12deg)}
  100%{transform: translateX(70%) rotate(12deg)}
}
@keyframes idleFloat{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(-2px)}
}
@keyframes idleGlow{
  0%,100%{filter: blur(0px); opacity:.30}
  50%{filter: blur(2px); opacity:.55}
}

.link-card{
  position:relative;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .16s ease, border-color .2s ease, box-shadow .2s ease;
  isolation:isolate; /* ✅ shimmer lebih aman */
}

/* ✅ glow dasar, dibuat "bernapas" walau belum di klik */
.link-card::before{
  content:"";
  position:absolute; inset:-2px;
  opacity:.55;
  pointer-events:none;
  background: radial-gradient(600px 160px at 20% 0%, rgba(255,61,184,.22), transparent 60%),
              radial-gradient(600px 160px at 80% 100%, rgba(255,106,223,.14), transparent 60%);
  animation: idleGlow 3.2s ease-in-out infinite;
}

/* ✅ shimmer layer */
.link-card::after{
  content:"";
  position:absolute;
  inset:-45% -65%;
  transform: translateX(-70%) rotate(12deg);
  pointer-events:none;
  opacity:.70;                 /* ✅ terlihat walau idle */
  mix-blend-mode: screen;
  animation: shimmerSweep 3.6s ease-in-out infinite; /* ✅ idle shimmer */
}

/* ✅ idle float untuk tombol (halus) */
.links .link-card{
  animation: idleFloat 3.8s ease-in-out infinite;
}
.links .link-card:nth-child(2){
  animation-delay: .35s; /* beda fase supaya gak barengan */
}

/* Saat hover/fokus: dibuat lebih cepat & lebih "pop" */
.link-card:hover,
.link-card:focus-within{
  transform: translateY(-3px);
  border-color: rgba(255,61,184,.30);
  box-shadow: 0 26px 60px rgba(0,0,0,.48), 0 0 0 3px rgba(255,61,184,.10);
}
.link-card:hover::after,
.link-card:focus-within::after{
  animation-duration: 1.1s;
  opacity: 1;
}

/* ✅ SHIMMER warna beda antar tombol (tapi tetap nyatu) */
/* tombol 1: pink neon */
.links .link-card:nth-child(1)::after{
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,61,184,0) 26%,
    rgba(255,61,184,.32) 50%,
    rgba(255,106,223,.18) 62%,
    rgba(255,61,184,0) 74%,
    transparent 100%
  );
}
/* tombol 2: tema biru (telegram) tapi masih ada hint pink biar nyatu */
.links .link-card:nth-child(2){
  border-color: rgba(255,255,255,.14);
}
.links .link-card:nth-child(2)::before{
  background: radial-gradient(650px 180px at 18% 10%, rgba(42,168,255,.22), transparent 62%),
              radial-gradient(650px 180px at 85% 95%, rgba(103,210,255,.16), transparent 62%),
              radial-gradient(520px 160px at 60% 25%, rgba(255,61,184,.08), transparent 62%); /* hint pink */
}
.links .link-card:nth-child(2)::after{
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(42,168,255,0) 24%,
    rgba(42,168,255,.30) 48%,
    rgba(103,210,255,.18) 60%,
    rgba(255,61,184,.14) 70%, /* hint pink */
    transparent 100%
  );
}

/* klik */
.link-card:active{
  transform: translateY(-1px) scale(.995);
}

.link-row{
  position:relative;
  min-height: 66px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px 56px 12px 56px;
  gap: 10px;
}

.thumb{
  position:absolute;
  left: 10px;
  width: 46px; height: 46px;
  border-radius: 12px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}

.link-title{
  text-align:center;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  padding: 0 8px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-wrap: balance;
}
.link-subtitle{
  display:block;
  text-align:center;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
}

.kebab{
  position:absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.10);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .12s ease;
}
.kebab:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,61,184,.28);
}
.kebab:active{transform: translateY(-50%) scale(.96)}

/* ===== MAIN CTA (optional button) ===== */
.big-cta{
  margin-top: 18px;
  display:flex;
  justify-content:center;
}
.big-cta a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,61,184,.35);
  background: linear-gradient(135deg, rgba(255,61,184,.22), rgba(255,255,255,.06));
  box-shadow: 0 18px 45px rgba(0,0,0,.35), 0 0 35px rgba(255,61,184,.22);
  font-weight: 800;
  transition: transform .16s ease, box-shadow .2s ease;
}
.big-cta a:hover{transform: translateY(-2px)}
.big-cta a:active{transform: translateY(0) scale(.99)}

/* ===== FOOTER ===== */
.footer{
  padding: 22px 0 30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 12px;
  color: rgba(255,255,255,.78);
}
.footer-links{
  font-size: 11px;
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  gap: 8px;
  opacity: .9;
}
.footer-links a,.footer-links button{
  font-size: 11px;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  cursor: pointer;
}
.footer-links a:hover,.footer-links button:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== Small entrance animation ===== */
.fade-up{
  animation: fadeUp .55s ease both;
}
@keyframes fadeUp{
  from{opacity:0; transform: translateY(10px)}
  to{opacity:1; transform: translateY(0)}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .bg::before{animation:none}
  .fade-up{animation:none}
  .link-card,.icon-btn,.big-cta a{transition:none}
  .links .link-card{animation:none}
  .link-card::before{animation:none}
  .link-card::after{animation:none !important; opacity:0 !important;}
}