/* =========================================================
   MAIN — Reset, layout, komponen dasar
   ========================================================= */
*{box-sizing:border-box}

/* =========================================================
   TOKENS — Variabel global (warna, easing, popout, link)
   ========================================================= */
:root{
  --bg:#050a18;
  --line:rgba(120,160,255,.18);
  --accent:#4f8cff;
  --accent-2:#7c5cff;
  --text:#e9eefb;
  --muted:#93a4c6;

  /* ---------- Popout tokens ---------- */
  --pop-ease: cubic-bezier(.2,.9,.3,1.15);
  --pop-dur: .55s;
  --pop-lift: 24px;
  --pop-head: 60px;
  --pop-body: 30px;
  --pop-border: 24px;
  --pop-photo-z: 280px;
  --pop-photo-y: -110px;
  --pop-photo-scale: 3;

  /* ---------- Avatar popout ---------- */
  --avatar-z: 240px;
  --avatar-scale: 1.2;

  /* ---------- Holo animation ---------- */
  --holo-hue-speed: 3s;
  --holo-sweep-speed: .9s;

  /* ---------- Sync status colors ---------- */
  --sync-ok:   #7ee0a8;
  --sync-warn: #ffd166;
  --sync-err:  #ff8080;

  /* ---------- Project link tokens ---------- */
  --link-z: 60px;
  --link-border: rgba(120,170,255,.4);
  --link-border-hover: rgba(180,220,255,.9);
  --link-bg-from: rgba(45,85,175,.55);
  --link-bg-to: rgba(20,40,90,.6);
  --link-bg-from-hover: rgba(90,150,255,.75);
  --link-bg-to-hover: rgba(50,80,180,.8);
}

/* =========================================================
   BASE — Body, background canvas, vignette, wrap
   ========================================================= */
html{scroll-behavior:smooth}

body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 82% -12%, #10204a 0%, transparent 60%),
    radial-gradient(900px 700px at -5% 100%, #1a1240 0%, transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

#bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

.vignette{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(circle at 50% 45%, transparent 45%, rgba(3,6,15,.72) 100%);
}

.wrap{
  position:relative;
  z-index:2;
  max-width:1180px;
  margin:0 auto;
  padding:0 22px 90px;
}

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:18px;
  padding:14px 22px;
  backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(6,11,26,.85), rgba(6,11,26,.35));
  border-bottom:1px solid rgba(120,160,255,.10);
}
.brand{
  font-weight:800;
  letter-spacing:.5px;
  font-size:15px;
  display:flex;
  align-items:center;
  gap:9px;
}
.brand .dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 0 14px var(--accent);
}
.brand span{color:var(--muted);font-weight:600}

.topbar nav{
  display:flex;
  gap:4px;
  margin-left:auto;
}
.topbar nav a{
  color:var(--muted);
  text-decoration:none;
  font-size:13.5px;
  font-weight:600;
  padding:8px 12px;
  border-radius:10px;
  transition:.2s;
}
.topbar nav a:hover{
  color:var(--text);
  background:rgba(90,140,255,.14);
}
.topbar .actions{
  display:flex;
  gap:8px;
  align-items:center;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:10px 16px;
  border-radius:12px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:.2s;
  font-family:inherit;
  display:inline-flex;
  align-items:center;
  gap:7px;
  text-decoration:none;
  line-height:1;
}
.btn:hover{
  background:rgba(90,140,255,.18);
  border-color:rgba(120,170,255,.5);
  transform:translateY(-2px);
}
.btn.primary{
  background:linear-gradient(135deg,#4f8cff,#7c5cff);
  border-color:transparent;
  box-shadow:0 12px 32px -12px rgba(79,140,255,.9);
}
.btn.primary:hover{filter:brightness(1.1)}
.btn.tiny{
  padding:7px 12px;
  font-size:12.5px;
  border-radius:10px;
}
.btn.danger:hover{
  background:rgba(255,90,90,.18);
  border-color:rgba(255,120,120,.55);
}

/* Anchor yang memakai class .btn (Export PDF) */
a.btn{
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
}
a.btn:hover{color:var(--text)}

/* =========================================================
   HERO — Grid + card + inner + avatar
   ========================================================= */
.hero{
  display:grid;
  grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:56px;
  align-items:center;
  padding:70px 0 80px;
}
.hero-card{
  perspective:1100px;
  display:grid;
  place-items:center;
  min-height:400px;
}
.hc-inner{
  position:relative;
  width:300px;
  height:300px;
  transform-style:preserve-3d;
  transition:transform .12s linear;
}
.hc-glow{
  position:absolute;
  inset:-22%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(79,140,255,.42), rgba(124,92,255,.18) 45%, transparent 70%);
  filter:blur(14px);
  transform:translateZ(-70px);
  animation:pulse 5s ease-in-out infinite;
  transition:filter .4s ease, background .4s ease;
}
@keyframes pulse{
  0%,100%{opacity:.75;transform:translateZ(-70px) scale(1)}
  50%{opacity:1;transform:translateZ(-70px) scale(1.09)}
}
.hc-ring{
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:2px dashed rgba(120,170,255,.42);
  transform:translateZ(24px);
  animation:spin 24s linear infinite;
  transition:border-color .3s ease, box-shadow .3s ease;
}
@keyframes spin{to{transform:translateZ(24px) rotate(360deg)}}
.hc-avatar{
  position:absolute;
  inset:0;
  border-radius:50%;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(160deg,#1b2c58,#0d1730);
  border:3px solid rgba(140,180,255,.35);
  box-shadow:
    0 40px 80px -30px rgba(0,0,0,.95),
    inset 0 0 60px rgba(79,140,255,.18);
  transform:translateZ(62px);
  font-size:74px;
  font-weight:800;
  letter-spacing:2px;
  color:rgba(200,220,255,.9);
  cursor:pointer;
  transform-style:preserve-3d;
  transition:
    transform .55s var(--pop-ease),
    box-shadow .55s var(--pop-ease),
    border-color .35s ease,
    filter .4s ease;
}
.hc-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================================================
   BADGE DASAR — gaya visual pill (posisi diatur oleh orbit)
   ========================================================= */
.hc-badge{
  position:absolute;
  padding:8px 15px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:700;
  background:linear-gradient(180deg, rgba(45,85,175,.85), rgba(20,40,90,.85));
  border:1px solid rgba(130,175,255,.45);
  color:#dbe8ff;
  white-space:nowrap;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.9);
  backdrop-filter:blur(6px);
  transition:opacity .4s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
  cursor:pointer;
  font-family:inherit;
  line-height:1;
  z-index:5;
}
.hc-badge:hover{
  border-color:rgba(180,220,255,.9);
  background:linear-gradient(180deg, rgba(60,110,210,.95), rgba(30,55,120,.95));
  box-shadow:
    0 14px 30px -14px rgba(0,0,0,.9),
    0 0 30px -4px rgba(140,220,255,.85);
}
.hc-badge:focus-visible{
  outline:2px solid rgba(140,220,255,.9);
  outline-offset:2px;
}

/* =========================================================
   BADGE ORBIT — badge experience berputar mengelilingi foto
   seperti satelit pada roda gigi mesin.
   · Wrapper (.hc-badge-orbit) = anchor radius & periode.
   · Setiap badge (.b1/.b2/.b3) punya --badge-angle sendiri.
   · Rotasi 360° dengan counter-rotate agar teks tetap tegak.
   ========================================================= */
.hc-badge-orbit{
  --badge-radius: 175px;
  --badge-duration: 32s;

  position: absolute;
  inset: 0;
  pointer-events: none;          /* wrapper tidak menangkap klik */
  transform-style: preserve-3d;
  z-index: 6;                    /* di atas gear (z 3–4) & ring */
}

.hc-badge-orbit .hc-badge{
  top: 50%;
  left: 50%;
  width: max-content;
  pointer-events: auto;          /* badge sendiri tetap bisa diklik */
  will-change: transform;
  animation: badgeOrbitSpin var(--badge-duration) linear infinite;
}

/* Sudut awal tiap badge — 0° = kanan, 90° = bawah */
.hc-badge-orbit .hc-badge.b1{ --badge-angle: -90deg; }  /* atas        */
.hc-badge-orbit .hc-badge.b2{ --badge-angle:  30deg; }  /* kanan-bawah */
.hc-badge-orbit .hc-badge.b3{ --badge-angle: 150deg; }  /* kiri-bawah  */

/* Hover → jeda rotasi agar bisa dibaca & diklik */
.hc-badge-orbit .hc-badge:hover{
  animation-play-state: paused;
}

@keyframes badgeOrbitSpin{
  from{
    transform:
      translate(-50%, -50%)
      rotate(var(--badge-angle))
      translateX(var(--badge-radius))
      rotate(calc(-1 * var(--badge-angle)));
  }
  to{
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--badge-angle) + 360deg))
      translateX(var(--badge-radius))
      rotate(calc(-1 * var(--badge-angle) - 360deg));
  }
}

/* Saat avatar di-popout → rotasi dipercepat */
.hc-inner.holo-on .hc-badge-orbit .hc-badge{
  animation-duration: 12s;
}

/* =========================================================
   HERO TEXT — eyebrow, judul, role, bio, contact chips, CTA
   ========================================================= */
.eyebrow{
  font-size:12.5px;
  letter-spacing:2.6px;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:700;
  margin:0 0 14px;
}
.hero h1{
  font-size:clamp(30px,4.4vw,50px);
  line-height:1.06;
  margin:0 0 12px;
  letter-spacing:-1px;
  font-weight:800;
  background:linear-gradient(120deg,#ffffff,#a9c6ff 60%,#9d86ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.role{
  margin:0 0 18px;
  font-size:16px;
  font-weight:600;
  color:#9db6e8;
  letter-spacing:.4px;
}
.bio{
  margin:0 0 24px;
  color:var(--muted);
  line-height:1.75;
  font-size:14.7px;
  max-width:620px;
}
.contact-chips{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-bottom:28px;
}
.mini{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12.8px;
  font-weight:600;
  color:#c5d6f5;
  padding:8px 13px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  text-decoration:none;
  transition:.2s;
  max-width:100%;
}
.mini:hover{
  background:rgba(90,140,255,.16);
  transform:translateY(-2px);
}
.mini span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Ikon emoji di contact chip */
.mini .mini-icon{
  font-size:14px;
  line-height:1;
  display:inline-flex;
  align-items:center;
}

.cta{
  display:flex;
  gap:11px;
  flex-wrap:wrap;
}

/* =========================================================
   SECTIONS — block + heading + aksi ganda
   ========================================================= */
.block{
  padding:52px 0;
  scroll-margin-top:80px;
}
.block-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:26px;
}
.block-head h2{
  font-size:22px;
  margin:0;
  font-weight:800;
  letter-spacing:-.4px;
  display:flex;
  align-items:center;
  gap:11px;
}
.block-head h2 .ic{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:17px;
  background:linear-gradient(135deg, rgba(79,140,255,.22), rgba(124,92,255,.16));
  border:1px solid rgba(120,170,255,.28);
}
.block-head .btn{margin-left:auto}

/* Aksi ganda di header blok (mis. + Keahlian / + Bahasa) */
.block-head-actions{
  display:flex;
  gap:8px;
  margin-left:auto;
}
.block-head-actions .btn{margin-left:0}

/* =========================================================
   ITEMS — container grid & chips
   ========================================================= */
.items.cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:26px;
  perspective:2000px;
}
.items.chips{
  display:flex;
  flex-wrap:wrap;
  gap:11px;
  perspective:1400px;
}

/* =========================================================
   ITEM / CHIP — kartu & chip dasar
   ========================================================= */
.item,
.chip{
  position:relative;
  transform-style:preserve-3d;
  transition:
    transform var(--pop-dur) var(--pop-ease),
    box-shadow var(--pop-dur) var(--pop-ease),
    border-color .3s ease;
}
.item{
  background:linear-gradient(160deg, rgba(24,38,74,.72), rgba(12,20,42,.62));
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px 20px 18px;
  overflow:visible;
}
.item:hover{
  border-color:rgba(120,170,255,.5);
  box-shadow:0 30px 60px -30px rgba(79,140,255,.7);
}
.item-head{
  display:flex;
  gap:14px;
  align-items:flex-start;
  transform-style:preserve-3d;
  overflow:visible;
  transition:transform var(--pop-dur) var(--pop-ease);
}
.item-info{
  flex:1;
  min-width:0;
  transform-style:preserve-3d;
}
.item h3{
  font-size:15.6px;
  margin:0 0 5px;
  font-weight:700;
  line-height:1.35;
}
.item .sub{
  margin:0;
  font-size:12.6px;
  color:var(--accent);
  font-weight:600;
  letter-spacing:.3px;
}

.item-tools{
  display:flex;
  gap:5px;
  flex-shrink:0;
  opacity:0;
  transition:opacity .2s;
  position:relative;
  z-index:60;
}
.item:hover .item-tools{opacity:1}
.icon-btn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:#cfe0ff;
  width:29px;
  height:29px;
  border-radius:9px;
  cursor:pointer;
  font-size:12.5px;
  display:grid;
  place-items:center;
  transition:.18s;
  padding:0;
  position:relative;
  z-index:61;
  font-family:inherit;
  line-height:1;
}
.icon-btn:hover{
  background:rgba(90,140,255,.28);
  transform:scale(1.1);
}

.bullets{
  margin:14px 0 0;
  padding-left:17px;
  color:var(--muted);
  font-size:13.4px;
  line-height:1.72;
  transition:transform var(--pop-dur) var(--pop-ease);
  transform-style:preserve-3d;
}
.bullets li{margin-bottom:4px}
.bullets li::marker{color:var(--accent)}

.item-photo{
  flex-shrink:0;
  width:58px;
  height:58px;
  border-radius:14px;
  position:relative;
  background:linear-gradient(160deg, #1b2c58, #0d1730);
  border:1px solid rgba(130,175,255,.38);
  display:grid;
  place-items:center;
  font-size:26px;
  transform-style:preserve-3d;
  transition:
    transform var(--pop-dur) var(--pop-ease),
    box-shadow var(--pop-dur) var(--pop-ease),
    border-color .3s ease,
    filter .35s ease;
  z-index:3;
  pointer-events:none;
}
.item-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
  display:block;
}
.item-photo .ph-emoji{
  position:relative;
  z-index:1;
  filter:drop-shadow(0 0 8px rgba(120,180,255,.55));
}

/* ---------- CHIP ---------- */
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 9px 9px 16px;
  border-radius:999px;
  background:linear-gradient(160deg, rgba(34,56,110,.75), rgba(16,26,54,.65));
  border:1px solid var(--line);
  font-size:13.2px;
  font-weight:600;
  color:#d3e1ff;
}
.chip:hover{border-color:rgba(120,170,255,.55)}
.chip .chip-tools{
  display:flex;
  gap:3px;
  opacity:.35;
  transition:.2s;
  position:relative;
  z-index:60;
}
.chip:hover .chip-tools{opacity:1}
.chip .icon-btn{
  width:24px;
  height:24px;
  font-size:11px;
  border-radius:7px;
}
.empty{
  color:var(--muted);
  font-size:13.6px;
  font-style:italic;
  margin:0;
}

/* =========================================================
   PROJECT — tombol link pada kartu project
   Selalu berada DI ATAS .holo-layer dalam ruang 3D
   (translateZ) & eksplisit menerima pointer-events.
   ========================================================= */
.item-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  padding:8px 14px;
  border-radius:10px;
  font-size:12.6px;
  font-weight:700;
  letter-spacing:.3px;
  color:#dbe8ff;
  text-decoration:none;
  border:1px solid var(--link-border);
  background:linear-gradient(180deg,
    var(--link-bg-from),
    var(--link-bg-to));
  transition:
    transform .2s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease,
    color .25s ease;
  position:relative;
  z-index:60;

  /* Kunci utama: letakkan tombol selalu di depan layer holo */
  transform: translateZ(var(--link-z));
  transform-style: preserve-3d;

  /* Pastikan klik selalu diterima secara native */
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.item-link:hover{
  transform:translateZ(var(--link-z)) translateY(-2px);
  border-color:var(--link-border-hover);
  background:linear-gradient(180deg,
    var(--link-bg-from-hover),
    var(--link-bg-to-hover));
  color:#ffffff;
  box-shadow:
    0 10px 24px -12px rgba(79,140,255,.9),
    0 0 24px -4px rgba(140,220,255,.65);
}
.item-link:active{
  transform:translateZ(var(--link-z)) translateY(0) scale(.98);
}
.item-link:focus-visible{
  outline:2px solid rgba(200,240,255,.9);
  outline-offset:2px;
}
.item-link-icon{
  font-size:14px;
  filter:drop-shadow(0 0 6px rgba(140,220,255,.7));
}
.item-link-text{
  white-space:nowrap;
}

/* =========================================================
   FOOTER
   ========================================================= */
footer{
  margin-top:40px;
  padding-top:34px;
  border-top:1px solid rgba(120,160,255,.14);
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  color:var(--muted);
  font-size:13px;
}
footer .fl{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  align-items:center;
}

/* =========================================================
   SYNC STATUS
   ========================================================= */
.sync-status{
  font-weight:600;
  transition:color .3s ease;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.sync-status.sync-ok  { color:var(--sync-ok); }
.sync-status.sync-warn{ color:var(--sync-warn); }
.sync-status.sync-err { color:var(--sync-err); }

/* =========================================================
   MODAL — CRUD
   ========================================================= */
.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(3,6,15,.72);
  backdrop-filter:blur(7px);
  display:grid;
  place-items:center;
  padding:20px;
  animation:fade .18s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-backdrop[hidden]{display:none}
.modal{
  width:min(540px,100%);
  max-height:88vh;
  overflow-y:auto;
  background:linear-gradient(165deg,#111d3a,#0a1226);
  border:1px solid rgba(120,170,255,.25);
  border-radius:22px;
  padding:26px;
  box-shadow:0 50px 100px -40px rgba(0,0,0,1);
  animation:pop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pop{
  from{opacity:0;transform:translateY(18px) scale(.96)}
  to{opacity:1;transform:none}
}
.modal h3{
  margin:0 0 20px;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.3px;
}
.field{margin-bottom:15px}
.field label{
  display:block;
  font-size:12.3px;
  font-weight:700;
  color:var(--muted);
  margin-bottom:7px;
  letter-spacing:.4px;
  text-transform:uppercase;
}
.field input[type=text],
.field textarea{
  width:100%;
  padding:11px 13px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  color:var(--text);
  font-size:14px;
  font-family:inherit;
  outline:none;
  transition:.2s;
  resize:vertical;
}
.field input[type=text]:focus,
.field textarea:focus{
  border-color:rgba(120,170,255,.65);
  background:rgba(90,140,255,.10);
  box-shadow:0 0 0 4px rgba(79,140,255,.13);
}
.field .row{
  display:flex;
  gap:8px;
}
.field .row input{flex:1}
.file-btn{
  position:relative;
  overflow:hidden;
  flex-shrink:0;
  cursor:pointer;
}
.modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:24px;
}

/* =========================================================
   WHATSAPP — Chip kontak & tombol utama
   ========================================================= */

/* ---------- Chip nomor HP (hero contact) ---------- */
.mini.wa{
  border-color: rgba(37, 211, 102, .45);
  background: linear-gradient(180deg,
    rgba(37, 211, 102, .12),
    rgba(37, 211, 102, .04));
  color: #c9ffe0;
}
.mini.wa:hover{
  background: linear-gradient(180deg,
    rgba(37, 211, 102, .25),
    rgba(37, 211, 102, .10));
  border-color: rgba(37, 211, 102, .85);
  box-shadow: 0 8px 24px -10px rgba(37, 211, 102, .7);
  transform: translateY(-2px);
}
.mini.wa .mini-icon{
  filter: drop-shadow(0 0 6px rgba(37, 211, 102, .8));
}

/* ---------- Tombol WhatsApp utama (hero CTA) ---------- */
.btn.wa{
  background: linear-gradient(135deg, #25d366, #128c7e);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 12px 32px -12px rgba(37, 211, 102, .9);
}
.btn.wa:hover{
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -12px rgba(37, 211, 102, 1);
}
.btn.wa[hidden]{
  display: none;
}

/* =========================================================
   GALERI FOTO BADGE
   Catatan: lightbox 3D (.photo-lightbox, .lightbox-stage,
   .lightbox-card, .lightbox-nav, .lightbox-close,
   .lightbox-meta) didefinisikan di holo.css.
   ========================================================= */

/* ---------- Modal galeri ---------- */
.gallery-modal{
  width:min(680px,100%);
  display:flex;
  flex-direction:column;
  gap:20px;
}
.gallery-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.gallery-head h3{margin:0}
.gallery-count{
  font-size:12.5px;
  font-weight:700;
  color:var(--muted);
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  white-space:nowrap;
}

/* ---------- Grid foto ----------
   overflow:visible wajib — agar popout 3D (.gallery-item.holo-on)
   dari holo.css tidak terpotong oleh clipping container.
   img diberi border-radius sendiri sebagai kompensasi.
*/
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:10px;
  min-height:130px;
}
.gallery-item{
  position:relative;
  aspect-ratio:1;
  border-radius:12px;
  overflow:visible;
  border:1px solid var(--line);
  background:linear-gradient(160deg,#1b2c58,#0d1730);
  transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.gallery-item:hover{
  transform:translateY(-3px);
  border-color:rgba(140,200,255,.6);
  box-shadow:0 14px 30px -12px rgba(79,140,255,.8);
}
.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:12px;
  cursor:zoom-in;
}

/* ---------- Tombol hapus foto ---------- */
.gallery-del{
  position:absolute;
  top:6px;
  right:6px;
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid rgba(255,120,120,.6);
  background:rgba(20,10,15,.85);
  color:#ffb0b0;
  font-size:11px;
  display:grid;
  place-items:center;
  cursor:pointer;
  padding:0;
  font-family:inherit;
  line-height:1;
  opacity:0;
  transition:opacity .2s ease, background .2s ease, color .2s ease, transform .18s ease;
  z-index:2;
}
.gallery-item:hover .gallery-del{opacity:1}
.gallery-del:hover{
  background:rgba(255,90,90,.4);
  color:#fff;
  transform:scale(1.08);
}

/* ---------- Empty state ---------- */
.gallery-empty{
  grid-column:1 / -1;
  color:var(--muted);
  font-size:13.6px;
  font-style:italic;
  text-align:center;
  padding:28px 0;
  margin:0;
}

/* ---------- Aksi bawah modal ---------- */
.gallery-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.file-btn.disabled{
  opacity:.45;
  pointer-events:none;
  cursor:not-allowed;
}

/* =========================================================
   FIRE GEAR FRAME — dua gear mesin berputar berlawanan arah,
   memancarkan pijar api di sekeliling foto profil.
   ========================================================= */

/* ---------- Container 3D ---------- */
.hc-fire-frame{
  position: absolute;
  inset: -38px;
  pointer-events: none;
  z-index: 1;
  transform: translateZ(-2px);
  transform-style: preserve-3d;
  isolation: isolate;
}

/* ---------- Pijar api — glow radial di belakang gear ---------- */
.hc-fire-glow{
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 240, 140, .50) 0%,
      rgba(255, 150,  20, .45) 22%,
      rgba(255,  80,   0, .35) 42%,
      rgba(200,  30,   0, .18) 62%,
      rgba(120,   0,   0, .06) 78%,
      transparent 90%);
  filter: blur(20px) saturate(1.55);
  mix-blend-mode: screen;
  animation: firePulse 1.6s ease-in-out infinite;
  will-change: transform, opacity, filter;
  z-index: 1;
}

@keyframes firePulse{
  0%, 100%{
    transform: scale(1) translateZ(-20px);
    opacity: .85;
    filter: blur(20px) saturate(1.55) hue-rotate(0deg);
  }
  50%{
    transform: scale(1.08) translateZ(-20px);
    opacity: 1;
    filter: blur(26px) saturate(1.85) hue-rotate(-8deg);
  }
}

/* ---------- Lidah api — flicker halus di antara glow & gear ---------- */
.hc-fire-flames{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 22% 20%,
      rgba(255, 235,  90, .78) 0 5%, transparent 15%),
    radial-gradient(circle at 80% 26%,
      rgba(255, 175,  45, .70) 0 5%, transparent 14%),
    radial-gradient(circle at 62% 84%,
      rgba(255, 115,   0, .68) 0 5%, transparent 16%),
    radial-gradient(circle at 14% 72%,
      rgba(255,  65,   0, .62) 0 6%, transparent 18%),
    radial-gradient(circle at 46% 96%,
      rgba(255, 200,  70, .55) 0 5%, transparent 15%),
    radial-gradient(circle at 50% 50%,
      rgba(255, 200,  60, .35) 32%,
      rgba(255,  90,   0, .16) 55%,
      transparent 72%);
  filter: blur(11px) saturate(1.4);
  mix-blend-mode: screen;
  animation: fireFlames 2.4s ease-in-out infinite;
  will-change: transform, opacity;
  z-index: 2;
}

@keyframes fireFlames{
  0%, 100%{
    transform: scale(1) rotate(0deg) translateZ(-10px);
    opacity: .88;
  }
  33%{
    transform: scale(1.05) rotate(4deg) translateZ(-10px);
    opacity: 1;
  }
  66%{
    transform: scale(1.02) rotate(-3deg) translateZ(-10px);
    opacity: .82;
  }
}

/* ---------- Gear dasar — SVG ---------- */
.hc-gear{
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  will-change: transform;
  transform-origin: center center;
}

/* Gear luar — 12 gigi, searah jarum jam */
.hc-gear.gear-outer{
  inset: 0;
  z-index: 3;
  filter:
    drop-shadow(0 0 5px  rgba(255, 190,  60, 1))
    drop-shadow(0 0 18px rgba(255, 110,   0, .9))
    drop-shadow(0 0 42px rgba(200,  30,   0, .65))
    drop-shadow(0 0 80px rgba(140,  10,   0, .4));
  animation: gearSpinCW 22s linear infinite;
}

/* Gear dalam — 8 gigi, berlawanan arah */
.hc-gear.gear-inner{
  inset: 45px;
  z-index: 4;
  filter:
    drop-shadow(0 0 4px  rgba(255, 210,  90, 1))
    drop-shadow(0 0 14px rgba(255, 130,   0, .9))
    drop-shadow(0 0 32px rgba(180,  20,   0, .6));
  animation: gearSpinCCW 13s linear infinite;
}

@keyframes gearSpinCW{
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes gearSpinCCW{
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ---------- Interaksi — perkuat pijar saat hover / popout ---------- */
.hero-card:hover .hc-fire-glow{
  filter: blur(24px) saturate(1.9) brightness(1.1);
}
.hero-card:hover .hc-gear.gear-outer{
  filter:
    drop-shadow(0 0 7px  rgba(255, 210,  80, 1))
    drop-shadow(0 0 22px rgba(255, 130,   0, 1))
    drop-shadow(0 0 50px rgba(220,  40,   0, .7))
    drop-shadow(0 0 90px rgba(150,  15,   0, .45));
}

/* Saat avatar di-popout: percepat rotasi & pulse */
.hc-inner.holo-on .hc-gear.gear-outer{ animation-duration: 5s; }
.hc-inner.holo-on .hc-gear.gear-inner{ animation-duration: 3.2s; }
.hc-inner.holo-on .hc-fire-glow{
  animation-duration: .85s;
  filter: blur(28px) saturate(2.1) brightness(1.18);
}
.hc-inner.holo-on .hc-fire-flames{
  animation-duration: 1.1s;
}

/* =========================================================
   RESPONSIVE — Tablet & Mobile
   ========================================================= */
@media (max-width:900px){
  .hero{
    grid-template-columns:1fr;
    gap:34px;
    padding:44px 0 56px;
    text-align:center;
  }
  .hero-card{min-height:330px}
  .contact-chips,
  .cta{justify-content:center}
  .hc-inner{
    width:245px;
    height:245px;
  }
  .hc-avatar{font-size:58px}
  .topbar nav{display:none}
  .topbar{padding:12px 16px}
  .wrap{padding:0 16px 70px}
  .items.cards{
    grid-template-columns:1fr;
    perspective:1400px;
  }

  /* Orbit badge — radius menyesuaikan ukuran avatar */
  .hc-badge-orbit{ --badge-radius: 145px; }

  /* Fire gear — inset menyesuaikan */
  .hc-fire-frame{ inset: -32px; }
  .hc-gear.gear-inner{ inset: 38px; }

  :root{
    --pop-lift:14px;
    --pop-head:36px;
    --pop-body:20px;
    --pop-border:16px;
    --pop-photo-z:160px;
    --pop-photo-y:-70px;
    --pop-photo-scale:2.2;
    --avatar-z:160px;
    --avatar-scale:1.12;
  }
}

@media (max-width:640px){
  /* Diterapkan di holo.css — .lightbox-nav, .lightbox-close */
}

@media (max-width:520px){
  .hc-badge{
    font-size:11px;
    padding:6px 11px;
  }
  .block-head h2{font-size:18px}

  /* Orbit badge — radius lebih kecil & periode sedikit lebih lama */
  .hc-badge-orbit{
    --badge-radius: 122px;
    --badge-duration: 36s;
  }

  /* Fire gear — inset lebih kecil lagi */
  .hc-fire-frame{ inset: -26px; }
  .hc-gear.gear-inner{ inset: 32px; }
  .hc-fire-glow{ filter: blur(14px) saturate(1.4); }

  /* Galeri — grid lebih rapat */
  .gallery-grid{
    grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
  }
  .gallery-modal{padding:20px}
}

/* =========================================================
   TOUCH — selalu tampilkan tools pada device tanpa hover
   ========================================================= */
@media (hover: none){
  .item-tools,
  .chip .chip-tools{ opacity:1; }
}

/* =========================================================
   AKSESIBILITAS — hormati preferensi reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .hc-gear.gear-outer,
  .hc-gear.gear-inner,
  .hc-fire-glow,
  .hc-fire-flames{
    animation: none !important;
  }

  /* Fallback statis untuk badge orbit */
  .hc-badge-orbit .hc-badge{
    animation: none !important;
    transform:
      translate(-50%, -50%)
      rotate(var(--badge-angle))
      translateX(var(--badge-radius))
      rotate(calc(-1 * var(--badge-angle)));
  }
}