/* vitap.id — kartu publik.
   Tata letak: satu kartu (rail + konten) dan panel samping. Lanskap di desktop, potret di HP.
   Warna datang dari [data-color] (palet), bentuk & tekstur dari [data-theme]. */

:root {
  /* palet (ditimpa [data-color]) */
  --p1: #1f6fa8; --p1-deep: #144d77; --p2: #f1ece2; --acc: #ff7a59; --wall: #0d2235;
  --on-p1: #fff; --on-p2: #1f2a33; --on-acc: #fff;

  /* token komponen (ditimpa [data-theme]) — nilai default = tema Klasik */
  --bg: color-mix(in srgb, var(--p1) 16%, #e9e6df);
  --card: #fff; --card-deep: #f6f5f1; --ink: #1d2024; --ink-dim: #5f666e;
  --card-border: 1px solid rgba(0, 0, 0, .06);
  --card-shadow: 0 40px 80px -40px rgba(0, 0, 0, .35), 0 20px 40px -30px rgba(0, 0, 0, .2);
  --panel: var(--p1); --panel-ink: var(--on-p1);
  --tile: color-mix(in srgb, var(--on-p1) 18%, transparent); --tile-ink: var(--on-p1);
  --tile-hover: var(--on-p1); --tile-hover-ink: var(--p1-deep);
  --detail: color-mix(in srgb, #fff 90%, var(--p1)); --detail-ink: #1d2024;
  --accent: var(--acc); --accent-ink: var(--on-acc);
  --rail-ink: #8a9097; --rail-bg: rgba(255, 255, 255, .88);
  --chip: color-mix(in srgb, var(--ink) 6%, transparent); --chip-hover: color-mix(in srgb, var(--ink) 11%, transparent); --chip-on: color-mix(in srgb, var(--ink) 15%, transparent);
  --solid: var(--p1); --solid-ink: var(--on-p1);
  --pill: var(--p1); --pill-ink: var(--on-p1);
  --line: var(--ink);
  --radius: 30px;
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --title-size: clamp(56px, 8.5vw, 124px);
  --title-weight: 600; --title-style: italic; --title-tracking: -.02em; --title-transform: none;
  --av: 132px; --av-radius: 50%;
  --blob: 0;

  --stage-w: min(1120px, 94vw);
  --stage-h: min(620px, 80svh);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-micro: .1s; --dur-short: .22s; --dur-long: .42s;
}

/* ---------- palet ---------- */
[data-color="ocean"]    { --p1: #1f6fa8; --p1-deep: #144d77; --p2: #f1ece2; --acc: #ff7a59; --wall: #0d2235; --on-p1: #fff; --on-p2: #1f2a33; --on-acc: #fff; }
[data-color="forest"]   { --p1: #2e6b4f; --p1-deep: #1f4a37; --p2: #ebe6d6; --acc: #e0a93f; --wall: #142019; --on-p1: #fff; --on-p2: #22302a; --on-acc: #2a2110; }
[data-color="sunset"]   { --p1: #d2553a; --p1-deep: #9e3a26; --p2: #fbe3cf; --acc: #7a4bb5; --wall: #2a1620; --on-p1: #fff; --on-p2: #3b2419; --on-acc: #fff; }
[data-color="grape"]    { --p1: #5b40c9; --p1-deep: #3d2a8f; --p2: #efeaff; --acc: #ff6fae; --wall: #170f30; --on-p1: #fff; --on-p2: #2a2250; --on-acc: #fff; }
[data-color="rose"]     { --p1: #d44a7a; --p1-deep: #9c2f57; --p2: #ffe4ec; --acc: #1e8a6e; --wall: #32141f; --on-p1: #fff; --on-p2: #3f1f2a; --on-acc: #fff; }
[data-color="slate"]    { --p1: #2e3542; --p1-deep: #1d2230; --p2: #e6e8ec; --acc: #f0a020; --wall: #121419; --on-p1: #fff; --on-p2: #22262e; --on-acc: #241a05; }
[data-color="sand"]     { --p1: #c9a265; --p1-deep: #a07c43; --p2: #fff7ea; --acc: #2f6b8f; --wall: #3b2d20; --on-p1: #2a2010; --on-p2: #3a3022; --on-acc: #fff; }
[data-color="midnight"] { --p1: #141b2d; --p1-deep: #0b1020; --p2: #1e2742; --acc: #6fd3ff; --wall: #05070e; --on-p1: #e8edf7; --on-p2: #e8edf7; --on-acc: #06263a; }

/* ---------- tema: Klasik (default di :root) ---------- */
[data-theme="classic"] .title { font-style: italic; }

/* ---------- tema: Kertas ---------- */
[data-theme="paper"] {
  --bg: color-mix(in srgb, var(--p2) 55%, #d8d1c2);
  --card: #fbf7ee; --card-deep: #f3ecdd; --ink: #2b2622; --ink-dim: #6d655b;
  --card-border: 1px solid rgba(60, 40, 20, .12);
  --card-shadow: 0 30px 60px -36px rgba(60, 40, 20, .5), 0 2px 0 rgba(255, 255, 255, .6) inset;
  --detail: rgba(255, 255, 255, .78); --detail-ink: #2b2622;
  --rail-ink: #9a8f80; --rail-bg: rgba(251, 247, 238, .92);
  --radius: 16px;
  --font-display: Lora, Georgia, serif; --font-body: Nunito, system-ui, sans-serif;
  --title-weight: 500; --title-style: italic; --title-tracking: -.01em;
  --av-radius: 10px;
}
[data-theme="paper"] body::after { opacity: .12; }
[data-theme="paper"] .card::after, [data-theme="paper"] .panel::after {
  content: ""; position: absolute; inset: 10px; border: 1px dashed color-mix(in srgb, currentColor 28%, transparent); border-radius: calc(var(--radius) - 8px); pointer-events: none;
}
[data-theme="paper"] .avatar { padding: 6px; background: #fff; box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .45); rotate: -3deg; }
[data-theme="paper"] .avatar img { border-radius: 6px; }
[data-theme="paper"] .avatar .tape { display: block; }
[data-theme="paper"] .rule { background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 10px); height: 2px; opacity: .5; }

/* ---------- tema: Pop ---------- */
[data-theme="pop"] {
  --bg: var(--p2);
  --card: var(--p1); --card-deep: var(--p1); --ink: var(--on-p1); --ink-dim: color-mix(in srgb, var(--on-p1) 78%, transparent);
  --line: var(--on-p2);
  --card-border: 3px solid var(--line);
  --card-shadow: 10px 10px 0 var(--line);
  --panel: var(--acc); --panel-ink: var(--on-acc);
  --tile: var(--p2); --tile-ink: var(--on-p2); --tile-hover: var(--line); --tile-hover-ink: var(--p2);
  --detail: var(--p2); --detail-ink: var(--on-p2);
  --accent: var(--line); --accent-ink: var(--p2);
  --rail-ink: color-mix(in srgb, var(--on-p1) 60%, transparent); --rail-bg: var(--p2);
  --chip: color-mix(in srgb, var(--on-p1) 14%, transparent); --chip-hover: color-mix(in srgb, var(--on-p1) 24%, transparent); --chip-on: color-mix(in srgb, var(--on-p1) 30%, transparent);
  --solid: var(--line); --solid-ink: var(--p2); --pill: var(--p2); --pill-ink: var(--on-p2);
  --radius: 22px;
  --font-display: "Bricolage Grotesque", Inter, system-ui, sans-serif; --font-body: Inter, system-ui, sans-serif;
  --title-weight: 800; --title-style: normal; --title-tracking: -.04em; --title-transform: uppercase; --title-size: clamp(52px, 7.6vw, 112px);
  --av-radius: 18px;
}
[data-theme="pop"] body::before { background: radial-gradient(color-mix(in srgb, var(--line) 18%, transparent) 1.2px, transparent 1.3px) 0 0 / 18px 18px; }
[data-theme="pop"] .panel { border: 3px solid var(--line); border-left: 0; box-shadow: 10px 10px 0 var(--line); }
[data-theme="pop"] .card { border-right: 0; }
[data-theme="pop"] .avatar { padding: 0; border: 3px solid var(--line); background: var(--p2); box-shadow: 6px 6px 0 var(--line); rotate: -2deg; }
[data-theme="pop"] .avatar img { border-radius: 14px; }
[data-theme="pop"] .tile, [data-theme="pop"] .fcard, [data-theme="pop"] .pf-detail, [data-theme="pop"] .mailrow, [data-theme="pop"] .pill.solid { border: 2px solid var(--line); box-shadow: 4px 4px 0 var(--line); }
[data-theme="pop"] .rail-pill { box-shadow: none; }
[data-theme="pop"] .rule { height: 6px; background: var(--acc); border: 2px solid var(--line); width: 120px; }
[data-theme="pop"] .pf-tabs { border: 2px solid var(--line); background: transparent; }
@media (max-width: 880px) {
  [data-theme="pop"] .card { border-right: 3px solid var(--line); border-bottom: 0; box-shadow: none; }
  [data-theme="pop"] .panel { border-left: 3px solid var(--line); box-shadow: 8px 8px 0 var(--line); }
  [data-theme="pop"] .rail { border: 3px solid var(--line); box-shadow: 4px 4px 0 var(--line); }
}

/* ---------- tema: Kaca ---------- */
[data-theme="glass"] {
  --bg: linear-gradient(135deg, var(--p1-deep), var(--wall) 60%, color-mix(in srgb, var(--acc) 35%, var(--wall)));
  --card: rgba(255, 255, 255, .13); --card-deep: rgba(255, 255, 255, .07); --ink: #fff; --ink-dim: rgba(255, 255, 255, .74);
  --card-border: 1px solid rgba(255, 255, 255, .26);
  --card-shadow: 0 40px 90px -40px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
  --panel: rgba(255, 255, 255, .2); --panel-ink: #fff;
  --tile: rgba(255, 255, 255, .22); --tile-ink: #fff; --tile-hover: rgba(255, 255, 255, .55); --tile-hover-ink: var(--p1-deep);
  --detail: rgba(255, 255, 255, .18); --detail-ink: #fff;
  --accent: var(--acc); --accent-ink: var(--on-acc);
  --rail-ink: rgba(255, 255, 255, .6); --rail-bg: rgba(20, 24, 40, .55);
  --chip: rgba(255, 255, 255, .14); --chip-hover: rgba(255, 255, 255, .24); --chip-on: rgba(255, 255, 255, .3);
  --solid: #fff; --solid-ink: var(--p1-deep); --pill: #fff; --pill-ink: var(--p1-deep);
  --radius: 34px; --blob: 1;
  --font-display: Sora, system-ui, sans-serif; --font-body: Sora, system-ui, sans-serif;
  --title-weight: 700; --title-style: normal; --title-tracking: -.035em; --title-size: clamp(52px, 7.8vw, 112px);
}
/* blur dipasang di pseudo-elemen, bukan di .card: backdrop-filter pada .card akan menjadikan rail bawah (position: fixed) terkunci ke kartu di HP */
[data-theme="glass"] .card::before, [data-theme="glass"] .panel::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); }
/* tanpa isolation/stacking context di .card: rail bawah (fixed, z-index 20) harus tetap di atas panel */
[data-theme="glass"] .panel { border: 1px solid rgba(255, 255, 255, .26); border-left: 0; }
[data-theme="glass"] .avatar { padding: 4px; background: rgba(255, 255, 255, .35); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .4); }
[data-theme="glass"] .rule { background: linear-gradient(90deg, #fff, transparent); }
[data-theme="glass"] .mailrow { box-shadow: 0 20px 30px -18px rgba(0, 0, 0, .6); }

/* ---------- tema: Neon ---------- */
[data-theme="neon"] {
  --bg: color-mix(in srgb, var(--wall) 45%, #05070b);
  --card: #0c1018; --card-deep: #0a0d14; --ink: #e9eef5; --ink-dim: #93a0b1;
  --card-border: 1px solid color-mix(in srgb, var(--acc) 65%, transparent);
  --card-shadow: 0 0 0 1px rgba(255, 255, 255, .03), 0 0 46px -12px var(--acc), 0 50px 90px -40px #000;
  --panel: #10151f; --panel-ink: #e9eef5;
  --tile: #171d2a; --tile-ink: var(--acc); --tile-hover: var(--acc); --tile-hover-ink: var(--on-acc);
  --detail: #171d2a; --detail-ink: #e9eef5;
  --accent: var(--acc); --accent-ink: var(--on-acc);
  --rail-ink: #5c6a7d; --rail-bg: rgba(12, 16, 24, .85);
  --chip: rgba(255, 255, 255, .06); --chip-hover: rgba(255, 255, 255, .11); --chip-on: color-mix(in srgb, var(--acc) 22%, transparent);
  --solid: var(--acc); --solid-ink: var(--on-acc); --pill: var(--acc); --pill-ink: var(--on-acc);
  --radius: 20px;
  --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "Space Grotesk", system-ui, sans-serif;
  --title-weight: 700; --title-style: normal; --title-tracking: -.03em; --title-size: clamp(52px, 7.8vw, 112px);
}
[data-theme="neon"] .card { background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 28px 28px; }
[data-theme="neon"] .panel { border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); border-left: 0; }
[data-theme="neon"] .title { color: #fff; text-shadow: 0 0 22px color-mix(in srgb, var(--acc) 75%, transparent), 0 0 2px var(--acc); }
[data-theme="neon"] .avatar { padding: 3px; background: var(--card); box-shadow: 0 0 0 2px var(--acc), 0 0 30px -4px var(--acc); }
[data-theme="neon"] .rule { background: var(--acc); box-shadow: 0 0 14px var(--acc); }
[data-theme="neon"] .lede small, [data-theme="neon"] .facts small, [data-theme="neon"] .pf-t small, [data-theme="neon"] .fcard small, [data-theme="neon"] .pf-cred h3 { font-family: "JetBrains Mono", ui-monospace, monospace; }
[data-theme="neon"] .rail-pill { box-shadow: 0 0 22px -4px var(--acc); }

/* ---------- tema: Aurora ---------- */
[data-theme="aurora"] {
  --bg: var(--wall);
  --card: var(--p1); --card-deep: color-mix(in srgb, var(--p1) 55%, var(--acc)); --ink: var(--on-p1); --ink-dim: color-mix(in srgb, var(--on-p1) 78%, transparent);
  --card-border: 0 solid transparent;
  --card-shadow: 0 50px 100px -40px color-mix(in srgb, var(--p1) 60%, #000), 0 20px 40px -30px rgba(0, 0, 0, .4);
  --panel: var(--p1-deep); --panel-ink: #fff;
  --tile: rgba(255, 255, 255, .16); --tile-ink: #fff; --tile-hover: #fff; --tile-hover-ink: var(--p1-deep);
  --detail: rgba(255, 255, 255, .16); --detail-ink: #fff;
  --accent: #fff; --accent-ink: var(--p1-deep);
  --rail-ink: color-mix(in srgb, var(--on-p1) 60%, transparent); --rail-bg: color-mix(in srgb, var(--p1-deep) 85%, transparent);
  --chip: rgba(255, 255, 255, .15); --chip-hover: rgba(255, 255, 255, .25); --chip-on: rgba(255, 255, 255, .32);
  --solid: #fff; --solid-ink: var(--p1-deep); --pill: #fff; --pill-ink: var(--p1-deep);
  --radius: 42px; --blob: 1;
  --font-display: Outfit, system-ui, sans-serif; --font-body: Outfit, system-ui, sans-serif;
  --title-weight: 800; --title-style: normal; --title-tracking: -.04em;
}
[data-theme="aurora"] .card { background: linear-gradient(135deg, var(--p1) 0%, color-mix(in srgb, var(--p1) 60%, var(--acc)) 70%, var(--acc) 130%); }
[data-theme="aurora"] .avatar { padding: 4px; background: linear-gradient(135deg, #fff, var(--acc)); box-shadow: 0 24px 44px -18px rgba(0, 0, 0, .5); }
[data-theme="aurora"] .rule { background: linear-gradient(90deg, #fff, var(--acc)); height: 4px; }
[data-theme="aurora"] .bg .blob { filter: blur(70px); opacity: .55; }

/* ---------- dasar ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); -webkit-font-smoothing: antialiased; overflow: hidden;
}
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, .08), transparent 60%), linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .14)); }
body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 14px; }
svg.sprite { display: none; }
img { display: block; }

.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: var(--blob); transition: opacity .6s; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; animation: drift 18s ease-in-out infinite alternate; }
.blob.b1 { width: 48vw; height: 48vw; left: -10vw; top: -14vw; background: var(--acc); }
.blob.b2 { width: 40vw; height: 40vw; right: -8vw; top: 10vh; background: var(--p2); animation-delay: -6s; animation-duration: 22s; }
.blob.b3 { width: 36vw; height: 36vw; left: 30vw; bottom: -18vw; background: var(--p1); animation-delay: -12s; }
@keyframes drift { from { translate: 0 0; } to { translate: 4vw 3vh; } }

/* ---------- panggung ---------- */
.stage {
  position: relative; z-index: 2;
  width: var(--stage-w); height: var(--stage-h);
  display: flex; margin: calc((100svh - var(--stage-h)) / 2) auto 0;
  transform: rotateX(calc(var(--my, 0) * -1.2deg)) rotateY(calc(var(--mx, 0) * 1.6deg));
  transition: transform .6s var(--ease-out);
}
.card {
  flex: 1; min-width: 0; position: relative;
  display: grid; grid-template-columns: 88px 1fr;
  background: linear-gradient(160deg, var(--card), var(--card-deep));
  color: var(--ink);
  border: var(--card-border); border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: var(--card-shadow);
}
.panel {
  width: 250px; flex: none; position: relative;
  background: var(--panel); color: var(--panel-ink);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 36px 26px 30px;
  display: flex; flex-direction: column; gap: 24px;
  box-shadow: var(--card-shadow);
}

/* ---------- rail ---------- */
.rail { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 0 26px; }
.rail-pill {
  position: absolute; left: 50%; top: 0; width: 48px; height: 48px; margin-left: -24px;
  border-radius: 15px; background: var(--accent);
  transform: translate(0, var(--y, 32px)); transition: transform .3s var(--ease-out);
  box-shadow: 0 14px 26px -12px color-mix(in srgb, var(--accent) 80%, #000); z-index: 0;
}
.rail-btn, .rail-down {
  position: relative; z-index: 1; width: 48px; height: 48px; border: 0; background: transparent;
  border-radius: 15px; color: var(--rail-ink); display: grid; place-items: center; cursor: pointer;
  transition: color var(--dur-short) var(--ease-in-out), transform var(--dur-short) var(--ease-out);
}
@media (hover: hover) { .rail-btn:hover { transform: translateY(-2px); color: var(--ink); } }
.rail-btn.is-active { color: var(--accent-ink); }
.rail-btn svg, .rail-down svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rail-down { margin-top: auto; }

/* ---------- tengah ---------- */
.center { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 34px 40px 30px 30px; }
.topbar { position: absolute; top: 24px; right: 28px; display: flex; gap: 12px; z-index: 3; }
.icon-btn {
  width: 40px; height: 40px; border: 0; background: transparent; color: var(--ink);
  display: grid; place-items: center; cursor: pointer; border-radius: 12px;
  transition: transform var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-in-out);
}
@media (hover: hover) { .icon-btn:hover { transform: translateY(-2px); background: var(--chip); } }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.avatar {
  position: absolute; top: -44px; left: 112px; z-index: 5;
  width: var(--av); height: var(--av); border-radius: var(--av-radius); padding: 5px;
  background: #fff; box-shadow: 0 26px 44px -18px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .04);
  transition: transform .5s var(--spring);
}
.avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; background: color-mix(in srgb, var(--p1) 30%, #cfd8de); }
.avatar .tape { display: none; position: absolute; left: 50%; top: -12px; width: 86px; height: 24px; translate: -50%; rotate: -4deg;
  background: rgba(255, 236, 170, .75); box-shadow: 0 2px 4px rgba(0, 0, 0, .12); }
@media (hover: hover) { .avatar:hover { transform: scale(1.04) rotate(2deg); } }

.title {
  font-family: var(--font-display); font-weight: var(--title-weight); font-style: var(--title-style); text-transform: var(--title-transform);
  font-size: calc(var(--title-size) * var(--fit, 1)); letter-spacing: var(--title-tracking);
  line-height: 1.02; margin: auto 0 0; color: var(--ink); white-space: nowrap; min-height: 1.02em;
}
.title span { display: inline-block; }
.rule { display: block; width: 92px; height: 3px; border-radius: 3px; margin: 14px 0 0 4px; background: var(--accent); transform-origin: left; }
.content { margin-top: 20px; min-height: 198px; position: relative; }

.lede { margin: 0 0 14px .2em; font-size: 13.5px; color: var(--ink-dim); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.lede b { color: var(--ink); font-weight: 600; }
.lede.narrow-only { display: none; }
.lede i { font-style: normal; display: inline-flex; align-items: center; gap: 5px; }
.lede svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.intro { margin: 0 0 18px .2em; max-width: 540px; font-size: 15px; line-height: 1.6; color: var(--ink); opacity: .92; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-left: .2em; }

/* ---------- lencana logo ---------- */
.badge {
  width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--tint, var(--solid)); color: var(--solid-ink);
  display: grid; place-items: center; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 6px 14px -6px rgba(0, 0, 0, .35);
}
.badge img { width: 70%; height: 70%; object-fit: contain; }
.badge.is-dark { color: #fff; }
.badge.is-light { color: #1f3340; }
.badge.is-plain { background: var(--accent); color: var(--accent-ink); }
.badge svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.initials { font-size: 13px; font-weight: 700; letter-spacing: .02em; }

/* ---------- portofolio ---------- */
.pf { display: grid; gap: 12px; }
.pf-tabs { position: relative; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--chip); justify-self: start; }
.pf-pill { position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--w, 0px); transform: translateX(var(--x, 4px)); border-radius: 999px; background: var(--pill);
  box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .5); transition: transform .25s var(--ease-out), width .25s var(--ease-out); }
.pf-tab { position: relative; z-index: 1; border: 0; background: transparent; color: var(--ink-dim); cursor: pointer; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  transition: color var(--dur-short) var(--ease-in-out), background var(--dur-short) var(--ease-in-out), transform var(--dur-short) var(--ease-out); }
@media (hover: hover) { .pf-tab:hover { color: var(--ink); background: var(--chip); } }
.pf-tab.is-on { color: var(--pill-ink); }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 8px; }
.pf-card { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px 10px 10px; border: 0; border-radius: 16px; text-align: left; cursor: pointer;
  background: var(--chip); color: var(--ink); transition: background var(--dur-short) var(--ease-in-out), transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-in-out); }
@media (hover: hover) { .pf-card:hover { background: var(--chip-hover); transform: translateY(-2px); } }
.pf-card.is-on { background: var(--chip-on); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 60%, transparent); }
.pf-t { display: grid; gap: 1px; min-width: 0; }
.pf-t small { font-size: 11px; letter-spacing: .04em; color: var(--ink-dim); }
.pf-t b { font-size: 14px; font-weight: 600; line-height: 1.25; }
.pf-t i { font-style: normal; font-size: 12px; line-height: 1.3; color: var(--ink-dim); }
.pf-card em { position: absolute; top: 8px; right: 10px; font-style: normal; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--chip-on); color: var(--ink); }
.pf-cred { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.pf-cred h3 { margin: 0 0 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-dim); }
.pf-cred ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pf-cred li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 14px; background: var(--chip); }
.pf-cred li svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="aurora"] .pf-cred li svg, [data-theme="glass"] .pf-cred li svg { stroke: var(--ink); }
.pf-cred li span { display: grid; min-width: 0; }
.pf-cred li b { font-size: 13px; font-weight: 600; }
.pf-cred li small { font-size: 11.5px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-inline { display: none; }
@media (min-width: 881px) {
  .panel:has(.feature.is-portfolio) .tiles { grid-template-columns: repeat(3, 48px); gap: 10px 12px; }
  .panel:has(.feature.is-portfolio) .tile { width: 48px; height: 48px; border-radius: 15px; }
  .panel:has(.feature.is-portfolio) .tile svg { width: 20px; height: 20px; }
  .panel:has(.feature.is-portfolio) .tile svg.fill { width: 18px; height: 18px; }
  .panel:has(.feature.is-portfolio) .tip { bottom: -26px; }
}
.pf-detail { display: grid; gap: 10px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  background: var(--detail); color: var(--detail-ink); border-radius: 22px; padding: 14px 14px 12px; }
.pf-detail.more { -webkit-mask-image: linear-gradient(#000 calc(100% - 36px), transparent); mask-image: linear-gradient(#000 calc(100% - 36px), transparent); }
.pf-detail header { display: flex; align-items: center; gap: 10px; }
.pf-detail header .badge { width: 36px; height: 36px; border-radius: 11px; }
.pf-detail header span:last-child { display: grid; min-width: 0; }
.pf-detail header b { font-size: 15px; font-weight: 600; line-height: 1.25; }
.pf-detail header small { font-size: 11.5px; opacity: .72; }
.pf-detail p { margin: 0; font-size: 12.5px; line-height: 1.45; opacity: .85; }
.tl { list-style: none; margin: 0; padding: 0 0 0 14px; display: grid; gap: 7px; position: relative; }
.tl::before { content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 2px; border-radius: 1px; background: color-mix(in srgb, currentColor 22%, transparent); }
.tl li { position: relative; display: grid; }
.tl li::before { content: ""; position: absolute; left: -14px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--detail); box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 50%, transparent); }
.tl li.now::before { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.tl b { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.tl small { font-size: 11px; opacity: .7; }
.pf-skills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pf-skills li { font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, currentColor 10%, transparent); }
.pf-go { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--solid-ink); text-decoration: none;
  padding: 7px 12px; border-radius: 999px; background: var(--solid); transition: transform var(--dur-short) var(--ease-out); }
@media (hover: hover) { .pf-go:hover { transform: translateY(-2px); } }
.pf-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- panel ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, 64px); gap: 14px 20px; justify-content: center; }
.tile { width: 64px; height: 64px; border-radius: 20px; background: var(--tile); color: var(--tile-ink); display: grid; place-items: center; border: 0; cursor: pointer; text-decoration: none; position: relative;
  box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .35); transition: transform var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-in-out), color var(--dur-short) var(--ease-in-out); }
.tile:hover, .tile:focus-visible { z-index: 6; }
@media (hover: hover) { .tile:hover { transform: translateY(-2px); background: var(--tile-hover); color: var(--tile-hover-ink); } }
.tile svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tile svg.fill { fill: currentColor; stroke: none; width: 22px; height: 22px; }
.tile.ghost { background: transparent; box-shadow: none; }
@media (hover: hover) { .tile.ghost:hover { background: var(--tile); color: var(--tile-ink); } }
.tip { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%) translateY(4px); background: #1f2a30; color: #fff; font-size: 11px; padding: 4px 8px; border-radius: 8px;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s var(--ease-out), transform .15s var(--ease-out); z-index: 5; }
.tile:focus-visible .tip { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (hover: hover) { .tile:hover .tip { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: .8s; } }

.feature { margin-top: auto; min-height: 0; display: flex; flex-direction: column; }
.fcard { background: var(--detail); border-radius: 22px; padding: 16px 16px 14px; color: var(--detail-ink); display: grid; gap: 8px; text-decoration: none; border: 0; text-align: left; cursor: pointer;
  transition: background var(--dur-short) var(--ease-in-out), transform var(--dur-short) var(--ease-out); }
@media (hover: hover) { .fcard:hover { transform: translateY(-2px); } }
.fcard small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; font-weight: 600; }
.fcard b { font-size: 15px; font-weight: 600; line-height: 1.3; word-break: break-word; }
.fcard p { margin: 0; font-size: 12.5px; line-height: 1.45; opacity: .8; }
.fcard svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fcard svg.fill { fill: currentColor; stroke: none; }

/* ---------- tampilan ---------- */
.about { max-width: 600px; padding-left: .2em; }
.about p { margin: 0 0 10px; font-size: 15px; line-height: 1.65; color: var(--ink); opacity: .94; }
.facts { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.facts li { background: var(--chip); border-radius: 14px; padding: 8px 14px; font-size: 13px; display: grid; gap: 1px; }
.facts small { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.facts b { font-weight: 600; }

.linklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 6px 8px; }
.linklist a { display: grid; grid-template-columns: 34px 1fr 14px; align-items: center; gap: 10px; padding: 5px 10px 5px 5px; border-radius: 14px; background: var(--chip); color: var(--ink); text-decoration: none;
  transition: background var(--dur-short) var(--ease-in-out), transform var(--dur-short) var(--ease-out); }
@media (hover: hover) { .linklist a:hover { background: var(--chip-hover); transform: translateX(3px); } }
.li-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--tint, var(--solid)); color: var(--solid-ink); display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 4px 10px -3px rgba(0, 0, 0, .3); }
.li-ic.is-dark { color: #fff; } .li-ic.is-light { color: #1f3340; }
.li-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.li-ic svg.fill { fill: currentColor; stroke: none; width: 16px; height: 16px; }
.li-ic img { width: 72%; height: 72%; object-fit: contain; }
.li-t { min-width: 0; }
.li-t b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.li-t small { display: block; font-size: 11.5px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-out { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }

.contact { display: grid; gap: 14px; max-width: 640px; }
.mailrow { position: relative; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: 20px; background: var(--solid); color: var(--solid-ink); border: 0; cursor: pointer; text-align: left;
  box-shadow: 0 20px 30px -18px rgba(0, 0, 0, .5); transition: transform var(--dur-short) var(--ease-out); }
@media (hover: hover) { .mailrow:hover { transform: translateY(-2px); } }
.mailrow .ic { width: 48px; height: 48px; border-radius: 14px; background: var(--accent); display: grid; place-items: center; color: var(--accent-ink); }
.mailrow .ic svg, .mailrow .hint svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mailrow b { font-size: clamp(15px, 2vw, 21px); font-weight: 600; letter-spacing: -.01em; word-break: break-all; }
.mailrow .hint { font-size: 12px; opacity: .75; display: flex; align-items: center; }
.hint > span { display: inline-flex; align-items: center; gap: 6px; }
.hint .done, .fcard .done, .icon-btn .done { display: none; }
[data-state="copied"] .hint .idle, .fcard[data-state="copied"] .idle, .icon-btn[data-state="copied"] .idle { display: none; }
[data-state="copied"] .hint .done { display: inline-flex; }
.fcard[data-state="copied"] .done { display: inline; }
.icon-btn[data-state="copied"] .done { display: block; }
.mailrow .hint svg { width: 16px; height: 16px; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--chip); color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 500;
  transition: background var(--dur-short) var(--ease-in-out), transform var(--dur-short) var(--ease-out); }
@media (hover: hover) { .pill:hover { background: var(--chip-hover); transform: translateY(-2px); } }
button.pill { border: 0; cursor: pointer; }
.pill.solid { background: var(--solid); color: var(--solid-ink); font-weight: 600; box-shadow: 0 14px 24px -14px rgba(0, 0, 0, .5); }
@media (hover: hover) { .pill.solid:hover { background: var(--solid); } }
.pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pill svg.fill { fill: currentColor; stroke: none; }
.note { font-size: 13px; color: var(--ink-dim); margin: 0; }

.rail-btn:active, .icon-btn:active, .tile:active, .fcard:active, .pill:active, .pf-tab:active, .pf-card:active, .pf-go:active, .linklist a:active, .mailrow:active { transform: scale(.98); transition-duration: var(--dur-micro); }

/* ---------- lencana "dibuat dengan" ---------- */
.made { position: fixed; right: 16px; bottom: 14px; z-index: 30; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-decoration: none;
  color: var(--ink); background: var(--card); border: var(--card-border); padding: 6px 10px; border-radius: 999px; opacity: .85; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .4); }
.made::before { content: "Dibuat dengan "; font-weight: 400; opacity: .8; }
html[lang="en"] .made::before { content: "Made with "; }
[data-theme="glass"] .made, [data-theme="aurora"] .made { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (hover: hover) { .made:hover { opacity: 1; } }

/* ---------- loader & masuk ---------- */
.loader { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: grid; place-items: center; transition: opacity .5s var(--ease-in-out), visibility .5s; }
.loader .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); animation: pulse 1s ease-in-out infinite; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
.loader.lift { opacity: 0; visibility: hidden; }
@keyframes pulse { 0% { scale: .8; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); } 70% { scale: 1; box-shadow: 0 0 0 18px transparent; } 100% { scale: .8; } }
body:not(.ready) .stage { opacity: 0; }
.ready .card { animation: cardIn .6s var(--ease-out) backwards; }
.ready .panel { animation: panelIn .6s var(--ease-out) .08s backwards; }
.ready .rail-btn, .ready .rail-down { animation: fadeUp var(--dur-long) var(--ease-out) backwards; }
.ready .rail-btn:nth-child(2) { animation-delay: .2s; } .ready .rail-btn:nth-child(3) { animation-delay: .25s; } .ready .rail-btn:nth-child(4) { animation-delay: .3s; } .ready .rail-btn:nth-child(5) { animation-delay: .35s; } .ready .rail-btn:nth-child(6) { animation-delay: .4s; }
.ready .rail-down { animation-delay: .45s; }
.ready .rail-pill { animation: fadeIn .3s var(--ease-out) .25s backwards; }
.ready .topbar .icon-btn { animation: fadeUp var(--dur-long) var(--ease-out) .4s backwards; }
.ready .tile { animation: popIn var(--dur-long) var(--ease-out) backwards; }
.ready .tile:nth-child(1) { animation-delay: .28s; } .ready .tile:nth-child(2) { animation-delay: .33s; } .ready .tile:nth-child(3) { animation-delay: .38s; } .ready .tile:nth-child(4) { animation-delay: .43s; } .ready .tile:nth-child(5) { animation-delay: .48s; } .ready .tile:nth-child(6) { animation-delay: .53s; }
.ready .avatar { animation: avatarIn .9s var(--spring) .15s backwards; }
@keyframes cardIn { from { opacity: 0; transform: translateY(36px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes panelIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes avatarIn { from { opacity: 0; transform: translateY(-30px) scale(.8); } to { opacity: 1; transform: none; } }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 60; transform: translate(-50%, 20px); background: #15232b; color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 13.5px;
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- layar kecil: potret ---------- */
@media (max-width: 880px) {
  :root { --title-size: clamp(44px, 13vw, 72px); --av: 96px; --radius: 26px; }
  [data-theme="pop"] { --title-size: clamp(40px, 11.5vw, 64px); }
  html, body { height: auto; min-height: 100%; }
  body { overflow-x: hidden; overflow-y: auto; }
  body { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .stage { width: calc(100% - 28px); height: auto; margin: 72px auto 0; flex-direction: column; transform: none; }
  .card { border-radius: var(--radius) var(--radius) 0 0; grid-template-columns: 1fr; border-right: var(--card-border); border-bottom: 0; }
  .center { padding: 70px 18px 26px; }
  .topbar { top: 12px; right: 10px; }
  .avatar { left: 50%; translate: -50%; top: calc(var(--av) / -2); }
  .title { white-space: normal; line-height: 1.05; margin: 0; text-align: center; }
  .rule { margin: 12px auto 0; }
  .content { margin-top: 18px; min-height: 0; position: static; }
  .lede { justify-content: center; text-align: center; flex-direction: column; gap: 3px; margin: 0 0 14px; }
  .lede b { font-size: 16px; }
  .lede.narrow-only { display: flex; }
  .intro { text-align: center; margin-left: auto; margin-right: auto; }
  .cta { justify-content: center; margin-left: 0; }
  .about { padding-left: 0; }
  .about p { font-size: 14.5px; }
  .linklist { grid-template-columns: 1fr; gap: 8px; }
  .linklist a { grid-template-columns: 40px 1fr 18px; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 16px; }
  .li-ic { width: 40px; height: 40px; border-radius: 12px; }
  .li-t b { font-size: 14px; } .li-t small { font-size: 12px; }
  .mailrow { grid-template-columns: 44px 1fr auto; gap: 12px; padding: 8px 14px 8px 8px; }
  .mailrow .ic { width: 44px; height: 44px; }
  .panel { width: 100%; border-radius: 0 0 var(--radius) var(--radius); padding: 26px 18px 30px; gap: 22px; }
  [data-theme="glass"] .panel, [data-theme="neon"] .panel { border-left: var(--card-border); border-top: 0; }
  .tiles { grid-template-columns: repeat(3, 64px); gap: 14px 22px; }
  .feature { margin-top: 0; }
  .feature.is-portfolio { display: none; }
  .pf-inline { display: block; margin-top: 12px; }
  .pf-cred li small { white-space: normal; }
  .pf-inline .pf-detail { overflow: visible; }
  .pf-tabs { justify-self: stretch; }
  .pf-tab { flex: 1; padding: 8px 6px; min-height: 44px; }
  .pill, .pf-go { min-height: 44px; }
  .pf-grid { grid-template-columns: 1fr; }
  .pf-cred { grid-template-columns: 1fr; }
  .rail { position: fixed; left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 20; flex-direction: row; justify-content: space-around; gap: 0; padding: 8px;
    background: var(--rail-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 22px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5); }
  .rail-pill { top: 8px; left: 0; margin-left: 0; transform: translate(var(--x, 8px), 0); }
  .rail-down { display: none; }
  .made { position: static; display: table; margin: 16px auto 0; }   /* di HP ikut alur halaman, tidak menutupi isi */
  .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .ready .card, .ready .panel { animation: fadeIn .6s var(--ease-out) backwards; }
  .blob.b1 { width: 90vw; height: 90vw; } .blob.b2 { width: 70vw; height: 70vw; } .blob.b3 { width: 70vw; height: 70vw; }
}
@media (max-width: 880px) and (min-width: 560px) {
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-height: 640px) and (min-width: 881px) { :root { --stage-h: min(560px, 92svh); } }

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