/* ══════════════════════════════════════════════
   style.css  |  Jojo Portfolio
   ══════════════════════════════════════════════ */

/* ─── Variables ──────────────────────────────── */
:root {
  --bg:        #07050f;
  --surface:   rgba(255,255,255,0.05);
  --border:    rgba(255,255,255,0.08);
  --purple:    #9b5de5;
  --purple-l:  #c77dff;
  --purple-d:  #6a00f4;
  --pink:      #f72585;
  --text:      #f0ecff;
  --muted:     #7a7295;
  --nav-h:     68px;
  --px:        60px;
}

/* ─── Reset ─────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
}
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(155,93,229,0.4); border-radius: 4px; }

/* ─── Cursor ─────────────────────────────────── */
#cursor {
  position: fixed; width:10px; height:10px;
  background: var(--purple-l); border-radius:50%;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition: width .3s, height .3s;
  mix-blend-mode: screen;
}
#cursor-ring {
  position: fixed; width:36px; height:36px;
  border:1px solid rgba(155,93,229,0.45); border-radius:50%;
  pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  transition: width .3s, height .3s, border-color .3s;
}
#cursor.big  { width:18px; height:18px; }
#cursor-ring.big { width:54px; height:54px; border-color:rgba(199,125,255,0.6); }

/* ─── Progress ───────────────────────────────── */
#progress {
  position:fixed; top:0; left:0; height:2px; width:0;
  background: linear-gradient(90deg, var(--purple-d), var(--purple-l), var(--pink));
  z-index:1000;
  transition: width .1s linear;
}

/* ─── Noise overlay ──────────────────────────── */
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity:.2;
}

/* ══════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════ */
nav {
  position: fixed; top:0; left:0; right:0; z-index:500;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 var(--px);
  height: var(--nav-h);
  transition: background .4s, backdrop-filter .4s;
}
nav.scrolled {
  background: rgba(7,5,15,0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  display: flex; align-items:center; gap:10px;
  text-decoration: none; color: var(--text);
  font-family:'Syne',sans-serif; font-size:17px; font-weight:700;
}
.logo-icon {
  width:34px; height:34px; border-radius:10px;
  background: linear-gradient(135deg,var(--purple-d),var(--pink));
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:800; color:#fff;
}

.nav-center {
  display: flex; align-items:center; gap:4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 6px 8px;
  backdrop-filter: blur(12px);
}
.nav-link {
  color: var(--muted); text-decoration:none;
  font-size:14px; font-weight:400; letter-spacing:.3px;
  padding: 7px 18px; border-radius:100px;
  transition: color .3s, background .3s;
}
.nav-link:hover  { color: var(--text); }
.nav-link.active {
  color: var(--purple-l);
  background: rgba(155,93,229,0.15);
}

.nav-right {
  display: flex; align-items:center; gap:4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 6px 10px;
  backdrop-filter: blur(12px);
}
.nav-icon {
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  color: var(--muted); text-decoration:none;
  transition: color .3s, background .3s;
}
.nav-icon svg { width:16px; height:16px; }
.nav-icon:hover { color: var(--purple-l); background: rgba(155,93,229,0.15); }

.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer;
  padding:6px; z-index:600; position:relative;
}
.hamburger span {
  display:block; width:22px; height:2px;
  background:var(--text); border-radius:2px;
  transition: transform .35s, opacity .35s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-drawer {
  position:fixed; top:0; right:0; bottom:0; width:260px;
  background: rgba(10,8,20,0.97);
  backdrop-filter: blur(24px);
  border-left: 1px solid var(--border);
  display:flex; flex-direction:column; justify-content:center;
  padding:40px 32px; gap:4px;
  transform:translateX(100%);
  transition: transform .4s cubic-bezier(.77,0,.175,1);
  z-index:550;
}
.mobile-drawer.open { transform:translateX(0); }
.mobile-link {
  display:block; padding:14px 0;
  font-family:'Syne',sans-serif; font-size:20px; font-weight:700;
  color:var(--muted); text-decoration:none;
  border-bottom:1px solid var(--border);
  transition: color .3s, padding-left .3s;
}
.mobile-link:hover { color:var(--purple-l); padding-left:8px; }
.mobile-socials { display:flex; gap:8px; margin-top:28px; }
.mobile-backdrop {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.6); backdrop-filter:blur(4px);
  z-index:490;
}
.mobile-backdrop.show { display:block; }

/* ══════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════ */
#hero {
  position:relative; height:100vh; min-height:560px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
#bg-canvas { position:absolute; inset:0; z-index:0; opacity:.35; }
.hero-glow {
  position:absolute; border-radius:50%;
  filter:blur(100px); pointer-events:none; z-index:1;
}
.hero-glow-l { width:480px; height:480px; background:rgba(106,0,244,.22); top:5%; left:-8%; }
.hero-glow-r { width:360px; height:360px; background:rgba(247,37,133,.15); top:20%; right:5%; }

.hero-content {
  position:relative; z-index:2;
  text-align:center; padding:0 20px;
}
.hero-small {
  font-family:'DM Sans',sans-serif; font-size:13px; font-weight:400;
  letter-spacing:4px; color:var(--muted); margin-bottom:20px;
  text-transform:uppercase;
}
.hero-big {
  font-family:'Syne',sans-serif;
  font-size:clamp(80px,16vw,200px);
  font-weight:800; line-height:1;
  letter-spacing:-4px;
  background: linear-gradient(160deg,#fff 0%,rgba(255,255,255,.55) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-role {
  font-family:'Syne',sans-serif;
  font-size:clamp(18px,3.5vw,36px);
  font-weight:700; letter-spacing:6px; margin-top:12px;
}
.rh {
  background:linear-gradient(135deg,var(--purple-l),var(--pink));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.rd { color:rgba(255,255,255,.35); }

.scroll-indicator {
  position:absolute; bottom:32px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  z-index:2;
}
.scroll-line {
  width:1px; height:40px;
  background:linear-gradient(to bottom,transparent,var(--purple-l));
  animation: scrollPulse 2s ease-in-out infinite;
}
.scroll-indicator span {
  font-size:10px; letter-spacing:3px; color:var(--muted);
  text-transform:uppercase;
}

.anim-up { opacity:0; animation: fadeUp .9s forwards; }
.d1 { animation-delay:.1s; }
.d2 { animation-delay:.3s; }
.d3 { animation-delay:.5s; }

.reveal { opacity:0; transform:translateY(30px); transition: opacity .75s ease, transform .75s ease; }
.reveal.in { opacity:1; transform:none; }

/* ══════════════════════════════════════════════
   SECTION LABEL
   ══════════════════════════════════════════════ */
.sec-label {
  text-align:center;
  padding: 100px var(--px) 0;
}
.sec-label h2 {
  font-family:'Syne',sans-serif;
  font-size:clamp(40px,8vw,100px);
  font-weight:800; letter-spacing:-3px;
  background:linear-gradient(160deg,#fff 0%,rgba(255,255,255,.3) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ══════════════════════════════════════════════
   PROJECTS
   ══════════════════════════════════════════════ */
#projects { padding-bottom: 80px; }

.proj-card {
  position: relative; overflow:hidden;
  display: grid;
  grid-template-columns: 340px 1fr;
  min-height: 460px;
  margin: 40px var(--px);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.07);
  transition: border-color .4s, box-shadow .4s, transform .4s;
}
.proj-card:hover {
  border-color: rgba(155,93,229,0.35);
  box-shadow: 0 0 80px rgba(106,0,244,0.18), 0 20px 60px rgba(0,0,0,0.5);
}

/* background layer */
.proj-bg {
  position:absolute; inset:0; z-index:0;
  transition: transform .6s ease;
}
.proj-card:hover .proj-bg { transform: scale(1.04); }
.proj-bg-dots {
  position:absolute; inset:0; z-index:1;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
}
/* Shimmer sweep on hover */
.proj-shimmer {
  position:absolute; inset:0; z-index:2;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.04) 50%, transparent 60%);
  background-size: 200% 100%;
  background-position: 200% 0;
  transition: background-position 0s;
}
.proj-card:hover .proj-shimmer {
  background-position: -200% 0;
  transition: background-position 0.8s ease;
}

/* project number badge */
.proj-num {
  font-family:'Syne',sans-serif; font-size:11px; font-weight:800;
  letter-spacing:3px; color:var(--purple-l); opacity:0.5;
  text-transform:uppercase;
}

/* info panel */
.proj-info {
  position:relative; z-index:2;
  padding: 48px 40px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-right: 1px solid rgba(255,255,255,0.07);
  display:flex; flex-direction:column; gap:14px;
}
.proj-info h3 {
  font-family:'Syne',sans-serif; font-size:22px; font-weight:700;
  line-height:1.2; color:#fff;
}
.proj-year { font-size:13px; color:var(--muted); margin-top:-8px; }
.proj-desc { font-size:14px; color:rgba(255,255,255,.6); line-height:1.75; }
.proj-stack { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.proj-stack span {
  font-size:12px; padding:3px 12px; border-radius:100px;
  background:rgba(155,93,229,0.15);
  border:1px solid rgba(155,93,229,0.25);
  color:var(--purple-l);
}
.proj-link {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 22px; border-radius:100px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  color:var(--text); text-decoration:none; font-size:14px;
  transition: background .3s, border-color .3s, color .3s, gap .3s;
  margin-top:auto; width:fit-content;
}
.proj-link:hover {
  background:rgba(155,93,229,0.2); border-color:var(--purple);
  color:var(--purple-l); gap:12px;
}

/* preview area */
.proj-preview {
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding: 40px 48px;
}

/* browser mockup */
.browser {
  width:100%; max-width:520px;
  background:#0d0b1a;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px; overflow:hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(155,93,229,0.08);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s;
}
.proj-card:hover .browser {
  transform: translateY(-8px) rotate(-0.5deg);
  box-shadow: 0 36px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(155,93,229,0.2);
}
.browser-top {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:rgba(255,255,255,0.04);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.b-dots { display:flex; gap:5px; }
.b-dots i { width:9px; height:9px; border-radius:50%; display:block; }
.b-dots i:nth-child(1) { background:#ff5f57; }
.b-dots i:nth-child(2) { background:#ffbd2e; }
.b-dots i:nth-child(3) { background:#28c840; }
.b-bar {
  flex:1; background:rgba(255,255,255,0.06); border-radius:4px;
  height:20px; font-size:10px; color:var(--muted);
  display:flex; align-items:center; padding:0 8px;
}
.browser-body {
  height:220px; padding:14px; overflow:hidden;
  position: relative;
}

/* ── Screenshot support ──
   Ketika memakai gambar nyata, browser-body tidak perlu class "no-img"
   dan tidak perlu padding karena img akan mengisi penuh.
   Tambah class "no-img" ke browser-body jika masih pakai placeholder mock.
────────────────────────── */
.browser-body:not(.no-img) {
  padding: 0;
}
.proj-screenshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: 0;
  transition: transform .6s ease;
}
.proj-card:hover .proj-screenshot {
  transform: translateY(-4%);
}
/* screenshot overlay gradient untuk seamless fade ke bawah */
.browser-body:not(.no-img)::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0;
  height:40px;
  background: linear-gradient(to top, rgba(13,11,26,0.8), transparent);
  pointer-events:none;
}

/* placeholder mock (dipakai kalau belum ada screenshot) */
.browser-body.no-img { padding: 14px; }
.bm-nav { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.bm-logo { width:32px; height:10px; background:rgba(255,255,255,.15); border-radius:3px; }
.bm-links { display:flex; gap:6px; }
.bm-links i { width:22px; height:6px; background:rgba(255,255,255,.08); border-radius:2px; display:block; }
.bm-content { display:flex; flex-direction:column; gap:7px; }
.bm-h1 { height:14px; width:65%; background:rgba(255,255,255,.18); border-radius:3px; animation: skelPulse 2s ease-in-out infinite; }
.bm-h2 { height:10px; width:45%; background:rgba(155,93,229,.3); border-radius:3px; animation: skelPulse 2s ease-in-out infinite .2s; }
.bm-p  { height:7px; width:80%; background:rgba(255,255,255,.07); border-radius:2px; animation: skelPulse 2s ease-in-out infinite .4s; }
.bm-p.short { width:55%; }
.bm-btn { width:60px; height:18px; background:rgba(155,93,229,.4); border-radius:4px; margin-top:4px; animation: skelPulse 2s ease-in-out infinite .6s; }
.bm-products { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:4px; }
.bm-prod { height:70px; background:rgba(255,255,255,.05); border-radius:6px; border:1px solid rgba(255,255,255,.06); }

@keyframes skelPulse {
  0%,100% { opacity:1; }
  50% { opacity:0.5; }
}

/* ══════════════════════════════════════════════
   PROFILE
   ══════════════════════════════════════════════ */
#profile { padding: 0 var(--px) 100px; }

.profile-wrap {
  display:grid; grid-template-columns:260px 1fr;
  gap:60px; align-items:start;
  margin-top:60px;
}
.profile-photo-col { display:flex; justify-content:center; }
.profile-img {
  position:relative; width:220px; height:300px;
  border-radius:20px; overflow:visible;
}
.profile-img-glow {
  position:absolute; inset:-20px; z-index:-1;
  background:radial-gradient(ellipse,rgba(155,93,229,.25),transparent 70%);
  filter:blur(20px);
  animation: profileGlowPulse 4s ease-in-out infinite;
}
.profile-img-ring {
  position:absolute; inset:-2px;
  border-radius:22px;
  border: 1px solid rgba(155,93,229,0.2);
  pointer-events:none;
}
@keyframes profileGlowPulse {
  0%,100% { opacity:0.7; transform:scale(1); }
  50% { opacity:1; transform:scale(1.05); }
}

.bio-hi { font-family:'Syne',sans-serif; font-size:18px; font-weight:700; margin-bottom:6px; }
.bio-who { font-family:'Syne',sans-serif; font-size:16px; font-weight:600; color:var(--purple-l); margin-bottom:18px; }
.bio-body { font-size:15px; color:rgba(255,255,255,.6); line-height:1.85; }
.bio-body em {
  font-style:normal; color:var(--purple-l);
  background:linear-gradient(135deg,var(--purple-l),var(--pink));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ══════════════════════════════════════════════
   ICON BUBBLES — FIXED & ENHANCED
   ══════════════════════════════════════════════ */
.icon-group { margin-top:60px; }
.icon-label {
  font-family:'Syne',sans-serif; font-size:clamp(20px,4vw,36px);
  font-weight:800; letter-spacing:2px; text-align:center;
  margin-bottom:40px; color:rgba(255,255,255,.7);
}
.icon-row {
  display:flex; flex-wrap:wrap; justify-content:center; gap:20px;
}

/* Outer bubble shell */
.icon-bubble {
  position:relative;
  width:76px; height:76px; border-radius:50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  display:flex; align-items:center; justify-content:center;
  cursor:none;
  /* Float animation — stagger via nth-child */
  animation: floatBubble 4s ease-in-out infinite;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .3s;
}
.icon-bubble:nth-child(1)  { animation-delay:0s; }
.icon-bubble:nth-child(2)  { animation-delay:.35s; }
.icon-bubble:nth-child(3)  { animation-delay:.7s; }
.icon-bubble:nth-child(4)  { animation-delay:1.05s; }
.icon-bubble:nth-child(5)  { animation-delay:1.4s; }
.icon-bubble:nth-child(6)  { animation-delay:1.75s; }

.icon-bubble:hover {
  transform: translateY(-10px) scale(1.08);
  box-shadow: 0 16px 40px rgba(155,93,229,.45), 0 0 0 1px rgba(155,93,229,0.35);
  border-color: rgba(155,93,229,0.4);
  animation-play-state: paused;
}

/* Pulse ring on hover */
.icon-bubble::before {
  content:'';
  position:absolute; inset:-5px; border-radius:50%;
  border: 1px solid rgba(155,93,229,0.5);
  opacity:0; transform:scale(0.85);
  transition: opacity .35s, transform .35s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.icon-bubble:hover::before {
  opacity:1; transform:scale(1);
}

/* Tooltip */
.icon-bubble::after {
  content: attr(data-tip);
  position:absolute; bottom:-30px; left:50%; transform:translateX(-50%);
  font-size:11px; color:var(--purple-l); white-space:nowrap;
  opacity:0; transition: opacity .3s, transform .3s;
  transform: translateX(-50%) translateY(4px);
  background: rgba(7,5,15,0.9);
  padding: 3px 8px; border-radius:6px;
  border: 1px solid rgba(155,93,229,0.2);
  pointer-events:none;
}
.icon-bubble:hover::after {
  opacity:1;
  transform: translateX(-50%) translateY(0);
}

/* Inner circle — text/SVG based */
.ib-inner {
  width:52px; height:52px; border-radius:50%;
  background: var(--c, #333);
  display:flex; align-items:center; justify-content:center;
  font-family:'Syne',sans-serif; font-size:13px; font-weight:800;
  color:white;
  overflow: hidden;
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────
   FIX UTAMA: ib-img — inner bubble dengan gambar
   Kelas ini membuat <img> di dalam .ib-inner
   tampil bulat & pas secara otomatis.
   ──────────────────────────────────────────────── */
.ib-inner.ib-img {
  background: transparent;
  padding: 0;
  overflow: hidden;
}
.ib-inner.ib-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Float keyframes */
@keyframes floatBubble {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}

/* ══════════════════════════════════════════════
   ACTIVITY
   ══════════════════════════════════════════════ */
#activity { padding: 0 var(--px) 100px; }

.timeline-wrap { margin-top:60px; display:flex; flex-direction:column; gap:0; }

.tl-item {
  display:grid; grid-template-columns:180px 1fr;
  gap:0; padding: 40px 0;
  border-bottom:1px solid var(--border);
  position:relative;
}
.tl-item:first-child { border-top:1px solid var(--border); }
.tl-year { font-size:14px; color:var(--muted); font-weight:400; padding-top:4px; flex-shrink:0; }
.tl-card { padding-left:40px; border-left:1px solid rgba(155,93,229,0.3); }
.tl-card h4 { font-family:'Syne',sans-serif; font-size:17px; font-weight:700; margin-bottom:10px; line-height:1.35; }
.tl-card h4 span { color:var(--purple-l); }
.tl-card p { font-size:14px; color:rgba(255,255,255,.55); line-height:1.8; margin-bottom:16px; }
.tl-tags { display:flex; flex-wrap:wrap; gap:8px; }
.tl-tags span {
  font-size:12px; padding:3px 12px; border-radius:100px;
  background:rgba(155,93,229,0.1);
  border:1px solid rgba(155,93,229,0.2);
  color:var(--purple-l);
  transition: background .3s, border-color .3s;
}
.tl-tags span:hover { background:rgba(155,93,229,0.25); border-color:var(--purple); }

/* ══════════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════════ */
#contact { padding: 0 var(--px) 140px; position:relative; overflow:hidden; }
.contact-glow-blob {
  position:absolute; width:500px; height:500px;
  background:radial-gradient(circle,rgba(155,93,229,.15),transparent 70%);
  top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none;
  animation: contactGlow 6s ease-in-out infinite;
}
@keyframes contactGlow {
  0%,100% { transform:translate(-50%,-50%) scale(1); opacity:0.7; }
  50% { transform:translate(-50%,-50%) scale(1.15); opacity:1; }
}
.contact-buttons {
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:14px; margin-top:50px;
}
.cta-btn {
  display:flex; align-items:center; gap:14px;
  padding:18px 24px; border-radius:100px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  color:var(--text); text-decoration:none; font-size:15px; font-weight:400;
  transition: background .3s, border-color .3s, transform .3s, box-shadow .3s;
  cursor:none;
}
.cta-btn svg { width:20px; height:20px; flex-shrink:0; }
.cta-btn:hover {
  background:rgba(155,93,229,0.15);
  border-color:rgba(155,93,229,0.4);
  color:var(--purple-l);
  transform:translateY(-3px);
  box-shadow: 0 8px 24px rgba(155,93,229,0.2);
}

/* ─── Footer ─────────────────────────────────── */
footer {
  text-align:center; padding:20px var(--px);
  border-top:1px solid var(--border);
  font-size:13px; color:var(--muted); position:relative; z-index:2;
}
footer span { color:var(--purple-l); }

/* ══════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:none; }
}
@keyframes scrollPulse {
  0%,100% { opacity:1; transform:scaleY(1); }
  50% { opacity:.4; transform:scaleY(.6); }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 960px)
   ══════════════════════════════════════════════ */
@media (max-width:960px) {
  :root { --px:28px; }

  .nav-center { display:none; }
  .nav-right   { display:none; }
  .hamburger   { display:flex; }

  .proj-card {
    grid-template-columns: 1fr;
    margin: 28px var(--px);
    min-height:auto;
  }
  .proj-info { border-right:none; border-bottom:1px solid rgba(255,255,255,0.07); }
  .proj-preview { padding:28px; }
  .browser-body { height:180px; }

  .profile-wrap { grid-template-columns:1fr; gap:36px; text-align:center; }
  .profile-photo-col { justify-content:center; }
  .bio-body { text-align:left; }

  .tl-item { grid-template-columns:1fr; gap:12px; }
  .tl-card  { padding-left:20px; }

  .contact-buttons { grid-template-columns:repeat(2,1fr); }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 540px)
   ══════════════════════════════════════════════ */
@media (max-width:540px) {
  :root { --px:18px; }

  #cursor, #cursor-ring { display:none; }
  body { cursor:auto; }
  a, button { cursor:pointer; }

  nav { height:58px; padding:0 var(--px); }
  .logo-icon { width:28px; height:28px; font-size:13px; }
  .nav-logo > span { font-size:15px; }

  .hero-big { letter-spacing:-2px; }
  .hero-role { letter-spacing:3px; }
  .hero-glow-l { width:260px; height:260px; }
  .hero-glow-r { width:200px; height:200px; }

  .sec-label { padding:70px var(--px) 0; }

  .proj-card { margin:20px var(--px); border-radius:16px; }
  .proj-info  { padding:28px 24px; }
  .proj-info h3 { font-size:18px; }
  .proj-preview { padding:20px; }
  .browser-body { height:140px; }

  .profile-img { width:160px; height:220px; }
  .icon-bubble { width:62px; height:62px; }
  .ib-inner   { width:44px; height:44px; font-size:11px; }
  .icon-row   { gap:14px; }

  .tl-year  { font-size:12px; }
  .tl-card  { padding-left:14px; }
  .tl-card h4 { font-size:15px; }
  .tl-item  { padding:28px 0; }

  .contact-buttons { grid-template-columns:1fr; gap:10px; }
  .cta-btn { padding:15px 20px; font-size:14px; border-radius:14px; }

  /* Kurangi animasi float di mobile biar ringan */
  .icon-bubble { animation-duration: 5s; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}