/* =========================================================
   SPHERE — Multi-layout skills visualizer
   Layout  : helix · orbit · grid · wave · spiral ·
             cube · ring · globe · tunnel
   Shape   : pill · round · ribbon · soft · cut · hex
   Interact: drag · wheel · pinch · zoom buttons
   ========================================================= */
:root{
  --link-color: #a8e6ff;
  --link-color-hot: #ffffff;
  --link-neon: #00ffd5;
  --link-accent: #ff2e88;
  --link-glow-1: rgba(120,215,255,1);
  --link-glow-2: rgba(79,140,255,.95);
  --link-glow-3: rgba(124,92,255,.8);

  --link-flow-speed: .85s;
  --link-base-speed: 2.6s;

  --grid-color: rgba(120,180,255,.07);
  --grid-size: 32px;

  --scan-speed: 6s;
  --scan-color: rgba(140,220,255,.05);
}

/* =========================================================
   MODE PICKER
   ========================================================= */
.sphere-mode-picker{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 14px;
  padding:5px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(120,160,255,.14);
  width:max-content;
}
.sphere-mode-picker button{
  border:0;
  background:transparent;
  color:var(--muted, #93a4c6);
  padding:8px 13px;
  border-radius:8px;
  font-family:inherit;
  font-size:12.6px;
  font-weight:600;
  cursor:pointer;
  letter-spacing:.25px;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.sphere-mode-picker button:hover{
  color:#e9eefb;
  background:rgba(90,140,255,.16);
}
.sphere-mode-picker button.active{
  color:#fff;
  background:linear-gradient(135deg, #4f8cff, #7c5cff);
  box-shadow:0 8px 20px -8px rgba(79,140,255,.9);
}
.sphere-mode-picker button:focus-visible{
  outline:2px solid rgba(140,200,255,.9);
  outline-offset:2px;
}

/* =========================================================
   STAGE
   ========================================================= */
.sphere-stage{
  position:relative;
  height:380px;
  margin-bottom:30px;
  display:grid;
  place-items:center;
  perspective:1000px;
  border-radius:24px;
  border:1px solid rgba(120,160,255,.10);
  background:
    radial-gradient(circle at 50% 50%, rgba(79,140,255,.12), transparent 65%),
    radial-gradient(circle at 50% 50%, rgba(124,92,255,.06), transparent 80%);
  overflow:hidden;
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  transition:box-shadow .25s ease, border-color .25s ease;
}
.sphere-stage:hover{
  border-color:rgba(120,170,255,.28);
  box-shadow:inset 0 0 40px -18px rgba(79,140,255,.55);
}
.sphere-stage.dragging{
  cursor:grabbing;
  border-color:rgba(180,220,255,.65);
  box-shadow:
    inset 0 0 60px -12px rgba(79,140,255,.85),
    0 0 40px -8px rgba(140,220,255,.55);
}
.sphere-stage.zooming{
  cursor:zoom-in;
  border-color:rgba(200,240,255,.85);
  box-shadow:
    inset 0 0 60px -12px rgba(140,220,255,.9),
    0 0 50px -8px rgba(140,220,255,.7);
}

/* Hex-grid pattern */
.sphere-stage::before{
  content:"";
  position:absolute;
  inset:-10%;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size:var(--grid-size) var(--grid-size);
  pointer-events:none;
  z-index:0;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 20%, transparent 75%);
          mask-image:radial-gradient(circle at 50% 50%, #000 20%, transparent 75%);
  animation:gridDrift 12s linear infinite;
}
@keyframes gridDrift{
  to { background-position: var(--grid-size) var(--grid-size); }
}

/* Scanlines CRT */
.sphere-stage::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    180deg,
    var(--scan-color) 0 1px,
    transparent 1px 3px
  );
  pointer-events:none;
  z-index:5;
  animation:scanMove var(--scan-speed) linear infinite;
  mix-blend-mode:screen;
}
@keyframes scanMove{
  to { background-position: 0 300px; }
}

/* =========================================================
   ZOOM CONTROLS
   ========================================================= */
.sphere-zoom-controls{
  position:absolute;
  top:12px;
  right:12px;
  z-index:8;
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(20,34,70,.82), rgba(8,15,34,.9));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(140,200,255,.32);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.95);
  pointer-events:auto;
}
.sphere-zoom-controls button{
  width:28px;
  height:28px;
  padding:0;
  border-radius:8px;
  border:0;
  background:transparent;
  color:#cfe0ff;
  font-size:16px;
  font-weight:700;
  font-family:inherit;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.sphere-zoom-controls button:hover{
  background:rgba(90,140,255,.28);
  color:#ffffff;
  transform:scale(1.08);
}
.sphere-zoom-controls button:focus-visible{
  outline:2px solid rgba(200,240,255,.9);
  outline-offset:2px;
}
.sphere-zoom-label{
  min-width:44px;
  padding:0 6px;
  text-align:center;
  font-size:11.5px;
  font-weight:700;
  color:#cfe0ff;
  letter-spacing:.3px;
  font-variant-numeric:tabular-nums;
  user-select:none;
}

/* =========================================================
   HINT
   ========================================================= */
.sphere-hint{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 13px;
  border-radius:999px;
  border:1px solid rgba(140,200,255,.28);
  background:linear-gradient(180deg, rgba(20,34,70,.7), rgba(8,15,34,.78));
  backdrop-filter:blur(8px);
  color:#bcd2f7;
  font-size:11.4px;
  font-weight:600;
  letter-spacing:.35px;
  z-index:6;
  pointer-events:none;
  opacity:.72;
  transition:opacity .3s ease, transform .3s ease, border-color .3s ease;
}
.sphere-hint-icon{
  font-size:13px;
  filter:drop-shadow(0 0 6px rgba(140,220,255,.65));
}
.sphere-stage:hover .sphere-hint{
  opacity:1;
  border-color:rgba(180,220,255,.55);
}
.sphere-stage.dragging .sphere-hint,
.sphere-stage.zooming .sphere-hint{
  opacity:0;
  transform:translateX(-50%) translateY(6px);
}

/* =========================================================
   SPHERE WRAPPER
   ========================================================= */
.sphere{
  position:relative;
  width:0;height:0;
  transform-style:preserve-3d;
  z-index:2;
  pointer-events:none;
}
.sphere > .tag3d{ pointer-events:auto; }

/* ---------- SVG link layer ---------- */
.sphere-links{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  pointer-events:none;
  overflow:visible;
  z-index:1;
}
.link-base{
  stroke:rgba(140,190,255,.35);
  stroke-width:.9;
  stroke-dasharray:3 5;
  fill:none;
  animation:linkDash var(--link-base-speed) linear infinite;
}
@keyframes linkDash{ to { stroke-dashoffset:-32; } }

.link-pulse{
  stroke:var(--link-color);
  stroke-width:2.2;
  stroke-linecap:round;
  fill:none;
  stroke-dasharray:8 32;
  animation:
    electricFlow var(--link-flow-speed) linear infinite,
    electricFlicker .18s steps(2, end) infinite;
  filter:
    drop-shadow(0 0 2px var(--link-color-hot))
    drop-shadow(0 0 6px var(--link-glow-1))
    drop-shadow(0 0 12px var(--link-glow-2));
  opacity:.9;
  will-change:stroke-dashoffset, opacity;
}
@keyframes electricFlow{ to { stroke-dashoffset:-40; } }
@keyframes electricFlicker{
  0%,100% { filter:brightness(1); }
  50%     { filter:brightness(1.45); }
}

/* ---------- Canvas FX overlay ---------- */
.sphere-fx{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:4;
  mix-blend-mode:screen;
}

/* =========================================================
   TAG NODE
   ========================================================= */
.tag3d{
  position:absolute;
  left:0;top:0;
  white-space:nowrap;
  padding:8px 15px;
  border-radius:999px;
  border:1px solid rgba(130,175,255,.42);
  background:linear-gradient(180deg, rgba(45,85,175,.75), rgba(18,34,76,.8));
  font-size:12.8px;
  font-weight:700;
  color:#dbe8ff;
  box-shadow:
    0 10px 26px -14px rgba(0,0,0,.9),
    0 0 18px -6px rgba(120,215,255,.45);
  will-change:transform,opacity;
  pointer-events:auto;
  cursor:pointer;
  user-select:none;
  transition:
    box-shadow .3s ease,
    border-color .3s ease,
    background .3s ease,
    color .3s ease,
    border-radius .4s ease,
    padding .4s ease;
  transform-origin:center center;
}
.tag3d:hover{
  border-color:rgba(180,220,255,.8);
  box-shadow:
    0 10px 26px -14px rgba(0,0,0,.9),
    0 0 24px -4px rgba(140,220,255,.8);
}

/* ---------- Variasi bentuk ---------- */
.tag3d.shape-pill{
  border-radius:999px;
  padding:8px 15px;
}
.tag3d.shape-round{
  border-radius:16px;
  padding:9px 16px;
}
.tag3d.shape-ribbon{
  border-radius:22px 4px 22px 4px;
  padding:8px 16px;
}
.tag3d.shape-soft{
  border-radius:6px;
  padding:9px 16px;
}
.tag3d.shape-cut{
  border-radius:4px 22px 4px 22px;
  padding:8px 16px;
}
.tag3d.shape-hex{
  border-radius:10px;
  padding:9px 18px;
  clip-path:polygon(
    12% 0,
    88% 0,
    100% 50%,
    88% 100%,
    12% 100%,
    0 50%
  );
  border-color:transparent;
  box-shadow:
    0 10px 26px -14px rgba(0,0,0,.9),
    0 0 18px -6px rgba(120,215,255,.45),
    inset 0 0 0 1px rgba(130,175,255,.55);
}
.tag3d.shape-hex:hover{
  box-shadow:
    0 10px 26px -14px rgba(0,0,0,.9),
    0 0 24px -4px rgba(140,220,255,.8),
    inset 0 0 0 1px rgba(180,220,255,.9);
}

/* ---------- Popout ---------- */
.tag3d.holo-on{
  border-color:rgba(220,245,255,1);
  background:linear-gradient(180deg,
    rgba(90,150,255,.95),
    rgba(50,80,180,.95));
  color:#ffffff;
  box-shadow:
    0 0 0 2px rgba(220,245,255,.85),
    0 0 35px rgba(140,220,255,1),
    0 0 80px rgba(124,92,255,.95),
    0 0 140px rgba(79,140,255,.75);
  text-shadow:
    0 0 8px rgba(255,255,255,.9),
    0 0 20px rgba(140,220,255,.65);
}

.tag3d.ping{
  animation:tagPing .55s ease-out;
}
@keyframes tagPing{
  0%{
    box-shadow:
      0 10px 26px -14px rgba(0,0,0,.9),
      0 0 0 0 rgba(140,220,255,.9),
      0 0 0 0 rgba(0,255,213,.6);
  }
  100%{
    box-shadow:
      0 10px 26px -14px rgba(0,0,0,.9),
      0 0 0 22px rgba(140,220,255,0),
      0 0 0 40px rgba(0,255,213,0);
  }
}

.tag3d.glitch{
  animation:tagGlitch .28s steps(3, end);
}
@keyframes tagGlitch{
  0%   { text-shadow: 2px 0 var(--link-accent), -2px 0 var(--link-neon); filter:hue-rotate(0deg); }
  33%  { text-shadow: -2px 0 var(--link-accent), 2px 0 var(--link-neon); filter:hue-rotate(50deg); }
  66%  { text-shadow: 2px 1px var(--link-accent), -2px -1px var(--link-neon); filter:hue-rotate(-25deg); }
  100% { text-shadow: none; filter:none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .sphere-stage{ height:320px; }
  :root{
    --link-flow-speed:1.05s;
    --link-base-speed:3.2s;
    --grid-size:26px;
  }
  .tag3d{ font-size:12px; padding:7px 13px; }
  .sphere-mode-picker button{ padding:7px 10px; font-size:12px; }
}

@media (max-width:520px){
  .sphere-stage{ height:280px; }
  .tag3d{ font-size:11.2px; padding:6px 11px; }
  .sphere-mode-picker{
    width:100%;
    justify-content:space-between;
  }
  .sphere-mode-picker button{
    flex:1 1 auto;
    padding:7px 4px;
    font-size:10.8px;
  }
  .sphere-hint{ font-size:10.4px; padding:5px 10px; }
  .sphere-zoom-controls{ top:8px; right:8px; padding:3px; }
  .sphere-zoom-controls button{ width:26px; height:26px; font-size:14px; }
  .sphere-zoom-label{ min-width:38px; font-size:10.6px; }
}

/* =========================================================
   SKILLS & LANGUAGES — blok dua kolom
   ========================================================= */
.block-head-actions{
  display:flex;
  gap:8px;
  margin-left:auto;
}
.block-head-actions .btn{ margin-left:0; }

.skills-dual{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  align-items:start;
}

.skills-col{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(120,160,255,.14);
  background:
    linear-gradient(160deg, rgba(24,38,74,.5), rgba(12,20,42,.45));
  position:relative;
}

/* Header kecil di atas tiap kolom */
.skills-col-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(120,160,255,.14);
}
.skills-col-icon{
  width:32px;height:32px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:15px;
  background:linear-gradient(135deg, rgba(79,140,255,.22), rgba(124,92,255,.16));
  border:1px solid rgba(120,170,255,.28);
  flex-shrink:0;
}
.skills-col-title{
  margin:0;
  font-size:15.5px;
  font-weight:800;
  letter-spacing:-.2px;
  color:#e9eefb;
  flex:1;
}
.skills-col-count{
  font-size:11.5px;
  font-weight:700;
  padding:3px 10px;
  border-radius:999px;
  background:rgba(79,140,255,.14);
  border:1px solid rgba(120,170,255,.32);
  color:#b8ccff;
  letter-spacing:.3px;
  white-space:nowrap;
}

/* Stage lebih pendek di dalam kolom dua-kolom */
.skills-dual .sphere-stage{
  height:300px;
  margin-bottom:0;
}

/* Chip list di bawah visual */
.skills-col-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  perspective:1400px;
  margin-top:2px;
}
.skills-col-chips .chip{
  font-size:12.4px;
  padding:7px 7px 7px 13px;
}
.skills-col-chips .chip .icon-btn{
  width:22px;height:22px;font-size:10.5px;
}

.chips-empty{
  margin:0;
  font-size:12.6px;
  color:var(--muted, #93a4c6);
  font-style:italic;
  padding:6px 0;
}

/* Zoom control disesuaikan sedikit untuk kolom sempit */
.skills-dual .sphere-zoom-controls{
  top:8px;
  right:8px;
  padding:3px;
}
.skills-dual .sphere-zoom-controls button{
  width:24px;
  height:24px;
  font-size:14px;
}
.skills-dual .sphere-zoom-label{
  min-width:38px;
  font-size:10.6px;
}

/* Mode picker sedikit lebih compact */
.skills-dual .sphere-mode-picker{
  width:100%;
  flex-wrap:wrap;
  justify-content:center;
  margin:0;
}
.skills-dual .sphere-mode-picker button{
  padding:6px 9px;
  font-size:11.4px;
  border-radius:7px;
}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .skills-dual{
    grid-template-columns:1fr;
    gap:18px;
  }
  .skills-dual .sphere-stage{
    height:280px;
  }
}

@media (max-width:520px){
  .skills-col{
    padding:14px;
  }
  .skills-col-title{
    font-size:14.5px;
  }
  .skills-dual .sphere-mode-picker button{
    padding:5px 7px;
    font-size:10.6px;
  }
  .skills-dual .sphere-stage{
    height:240px;
  }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .link-base, .link-pulse,
  .sphere-stage::before, .sphere-stage::after,
  .tag3d.ping, .tag3d.glitch{
    animation:none !important;
  }
}