/* VelardTools Premium Design System v5
   UI/UX Pro Max: Soft UI Evolution + Glassmorphism (dark)
   21st.dev patterns: bento cards, pill nav, mesh aurora, backdrop-blur
   Stack: Plus Jakarta Sans (display) + Inter (body) + JetBrains Mono (code)
   Tokens: primitive → semantic → component (3 layers)
================================================================== */

/* ---------- 1. Design Tokens HSL theming (snippet) + VelardTokens ---------- */
:root {
    --primary-h: 0;
    --primary-s: 0%;
    --primary-l: 88%;
    /* Monokrom hitam-putih editorial Swiss, 0% saturasi (tidak AI) */
    --md-sys-color-primary: hsl(0, 0%, 92%);
    --md-sys-color-on-primary: hsl(0, 0%, 7%);
    --md-sys-color-primary-container: hsl(0, 0%, 16%);
    --md-sys-color-on-primary-container: hsl(0, 0%, 88%);
    --md-sys-color-secondary: hsl(0, 0%, 68%);
    --md-sys-color-on-secondary: hsl(0, 0%, 10%);
    --md-sys-color-secondary-container: hsl(0, 0%, 16%);
    --md-sys-color-on-secondary-container: hsl(0, 0%, 86%);
    --md-sys-color-tertiary: hsl(0, 0%, 70%);
    --md-sys-color-on-tertiary: hsl(0, 0%, 10%);
    --md-sys-color-tertiary-container: hsl(0, 0%, 16%);
    --md-sys-color-on-tertiary-container: hsl(0, 0%, 88%);
    /* Background LOCKED keep #06080a, tidak ikut primary */
    --md-sys-color-surface: hsl(0, 0%, 7%);
    --md-sys-color-surface-dim: hsl(0, 0%, 5%);
    --md-sys-color-surface-bright: hsl(0, 0%, 11%);
    --md-sys-color-on-surface: hsl(0, 0%, 92%);
    --md-sys-color-surface-variant: hsl(0, 0%, 16%);
    --md-sys-color-on-surface-variant: hsl(0, 0%, 72%);
    --md-sys-color-surface-container-lowest: hsl(0, 0%, 4%);
    --md-sys-color-surface-container-low: hsl(0, 0%, 9%);
    --md-sys-color-surface-container: hsl(0, 0%, 12%);
    --md-sys-color-surface-container-high: hsl(0, 0%, 15%);
    --md-sys-color-surface-container-highest: hsl(0, 0%, 19%);
    --md-sys-color-outline: hsl(0, 0%, 42%);
    --md-sys-color-outline-variant: hsl(0, 0%, 22%);
    --md-sys-color-inverse-surface: hsl(0, 0%, 90%);
    --md-sys-color-inverse-primary: hsl(0, 0%, 20%);
    --md-sys-color-error: #ff5a5a;
    --md-sys-color-success: #4ade80;
    --md-sys-color-warning: #fbbf24;
    --md-sys-color-border: var(--md-sys-color-outline-variant);
    --md-sys-color-border-strong: var(--md-sys-color-outline);
    --radius-xs: 4px;
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 16px;
    --radius-xl: 28px;
    --radius-full: 9999px;
    --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --elevation-2: 0 4px 10px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.35);
    --elevation-3: 0 8px 20px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.4);
    --transition-standard: 240ms cubic-bezier(0.2, 0, 0, 1);
    --transition-decelerate: 300ms cubic-bezier(0.05, 0.7, 0.1, 1);
    --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --drawer-width: 270px;
    --rail-width: 76px;
  /* Velard aliases hero VELARD tetap #e0f28c lime, UI monokrom */
  --lime: #e0f28c;
  --lime-strong: hsl(0, 0%, 82%);
  --lime-soft: hsla(0, 0%, 92%, 0.10);
  --lime-glow: hsla(0, 0%, 100%, 0.14);
  --ink: hsl(0, 0%, 7%);
  --ink-2: hsl(0, 0%, 5%);
  --surface: var(--md-sys-color-surface-container);
  --surface-2: hsl(0, 0%, 10%);
  --surface-3: var(--md-sys-color-surface-container-high);
  --surface-4: var(--md-sys-color-surface-container-highest);
  --text: var(--md-sys-color-on-surface);
  --text-2: hsl(var(--primary-h), 12%, 82%);
  --text-3: var(--md-sys-color-on-surface-variant);
  --text-4: hsl(var(--primary-h), 8%, 56%);
  --line: var(--md-sys-color-outline-variant);
  --line-strong: var(--md-sys-color-outline);
  --line-highlight: hsla(var(--primary-h), 10%, 26%, 0.5);
  --success: var(--md-sys-color-success);
  --warning: var(--md-sys-color-warning);
  --danger: var(--md-sys-color-error);
  --md-font: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --display-font: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --md-radius: var(--radius-l);
  --md-radius-sm: var(--radius-m);
  --md-radius-xs: var(--radius-s);
  --radius-pill: var(--radius-full);
  --shadow-soft: var(--elevation-1);
  --shadow-lift: var(--elevation-3);
  --shadow-card: var(--elevation-2);
  --shadow-glow-lime: 0 8px 24px hsla(var(--primary-h), 65%, 74%, 0.16);
  --glass-bg: hsla(var(--primary-h), 14%, 12%, 0.72);
  --glass-border: var(--md-sys-color-outline-variant);
  --blur: 16px;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --dur-1: 180ms; --dur-2: 260ms; --dur-3: 420ms;
  /* Cube depth & easings (snippet) */
  --cube-depth: 420px;
  --cube-rot-y: 0deg;
  --ease-spring: cubic-bezier(0.34, 1.24, 0.5, 1);
  --ease-spring-soft: cubic-bezier(0.22, 1.04, 0.32, 1);
}
@supports (transition-timing-function: linear(0, 1)){
    :root {
        --ease-spring: linear(0, 4.17% 0.0933, 8.33% 0.2953, 12.5% 0.5206, 16.67% 0.7207, 20.83% 0.8735, 25% 0.9757, 29.17% 1.034, 33.33% 1.0592, 37.5% 1.0625, 41.67% 1.0538, 45.83% 1.0401, 50% 1.0262, 54.17% 1.0144, 58.33% 1.0057, 62.5% 1.0001, 66.67% 0.9972, 70.83% 0.9961, 75% 0.9962, 79.17% 0.9968, 83.33% 0.9977, 87.5% 0.9986, 91.67% 0.9993, 95.83% 0.9998, 100% 1);
        --ease-spring-soft: linear(0, 5% 0.089, 10% 0.2686, 15% 0.4598, 20% 0.6257, 25% 0.7555, 30% 0.8494, 35% 0.9131, 40% 0.9541, 45% 0.9788, 50% 0.9928, 55% 0.9999, 60% 1.003, 65% 1.0039, 70% 1.0036, 75% 1.003, 80% 1.0022, 85% 1.0016, 90% 1.001, 95% 1.0006, 100% 1);
    }
}
[data-theme="ocean"] { --primary-h: 210; }
[data-theme="amethyst"] { --primary-h: 275; }
[data-theme="amber"] { --primary-h: 38; }
[data-theme="rose"] { --primary-h: 345; }
.light-theme, :root.light-theme {
    --md-sys-color-primary: hsl(0, 0%, 12%);
    --md-sys-color-on-primary: hsl(0, 0%, 100%);
    --md-sys-color-primary-container: hsl(0, 0%, 80%);
    --md-sys-color-on-primary-container: hsl(0, 0%, 12%);
    --md-sys-color-secondary: hsl(0, 0%, 30%);
    --md-sys-color-on-secondary: hsl(0, 0%, 100%);
    --md-sys-color-secondary-container: hsl(0, 0%, 85%);
    --md-sys-color-on-secondary-container: hsl(0, 0%, 12%);
    --md-sys-color-tertiary: hsl(0, 0%, 28%);
    --md-sys-color-on-tertiary: hsl(0, 0%, 100%);
    --md-sys-color-tertiary-container: hsl(0, 0%, 83%);
    --md-sys-color-on-tertiary-container: hsl(0, 0%, 12%);
    --md-sys-color-surface: hsl(0, 0%, 92%);
    --md-sys-color-surface-dim: hsl(0, 0%, 86%);
    --md-sys-color-surface-bright: hsl(0, 0%, 96%);
    --md-sys-color-on-surface: hsl(0, 0%, 10%);
    --md-sys-color-surface-variant: hsl(0, 0%, 88%);
    --md-sys-color-on-surface-variant: hsl(0, 0%, 28%);
    --md-sys-color-surface-container-lowest: hsl(0, 0%, 96%);
    --md-sys-color-surface-container-low: hsl(0, 0%, 90%);
    --md-sys-color-surface-container: hsl(0, 0%, 86%);
    --md-sys-color-surface-container-high: hsl(0, 0%, 82%);
    --md-sys-color-surface-container-highest: hsl(0, 0%, 78%);
    --md-sys-color-outline: hsl(var(--primary-h), 18%, 46%);
    --md-sys-color-outline-variant: hsl(var(--primary-h), 20%, 70%);
    --md-sys-color-inverse-surface: hsl(var(--primary-h), 30%, 15%);
    --md-sys-color-inverse-primary: hsl(var(--primary-h), 65%, 82%);
    --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
    --elevation-2: 0 3px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --elevation-3: 0 6px 14px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.08);
}
.light-theme .floating-nav-bar { background-color: var(--md-sys-color-surface-container-high); border-color: var(--md-sys-color-outline-variant); }
.light-theme .floating-nav-indicator { background-color: var(--md-sys-color-primary); }
.light-theme .floating-nav-item.active { color: var(--md-sys-color-on-primary); }
.light-theme .floating-nav-item { color: var(--md-sys-color-on-surface-variant); }
.light-theme .floating-nav-item:hover { color: var(--md-sys-color-on-surface); }
.dark-theme, :root.dark-theme { --md-sys-color-primary: hsl(var(--primary-h), 65%, 74%); --md-sys-color-on-primary: hsl(var(--primary-h), 65%, 12%); }

/* ---------- 2. Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; scrollbar-width: none !important; -ms-overflow-style: none !important; }
[hidden] { display: none !important; }
*::-webkit-scrollbar, *::-webkit-scrollbar-thumb, *::-webkit-scrollbar-track { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
body {
  font-family: var(--md-font);
  background: var(--ink);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body::after {
  content: ''; position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.018; pointer-events: none; z-index: 9999; mix-blend-mode: soft-light;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- 3. Background System (INIYA.jpg static, performance keep slide only) ---------- */
.bg-static{
  position:fixed; inset:0;
  background:
    linear-gradient(rgba(6,8,14,0.62), rgba(6,8,14,0.78)),
    url('INIYA.jpg') center center / cover no-repeat fixed;
  background-color:#0b0e14;
  z-index:-1; pointer-events:none;
}
.bg-static::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse 900px 600px at 50% 0%, rgba(255,255,255,0.06), transparent 68%);
  pointer-events:none;
}
.bg-glow { display: none !important; }
.streak-bg { display:none !important; }
.streak-bg-dummy{ display:none; }
.streak-bg-old {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh;
  background: #04060a;
  /* 10x premium nebula — 6 lapisan aurora + depth */
  background-image:
    radial-gradient(ellipse 1400px 900px at 18% -8%, rgba(96,165,250,0.16) 0%, rgba(96,165,250,0.08) 28%, transparent 58%),
    radial-gradient(ellipse 1100px 780px at 88% 12%, rgba(168,85,247,0.13) 0%, rgba(168,85,247,0.06) 32%, transparent 62%),
    radial-gradient(ellipse 980px 640px at 48% 38%, rgba(34,211,238,0.10) 0%, transparent 66%),
    radial-gradient(ellipse 820px 560px at 72% 78%, rgba(236,72,153,0.08) 0%, transparent 64%),
    radial-gradient(ellipse 680px 480px at 22% 68%, rgba(59,130,246,0.09) 0%, transparent 68%),
    radial-gradient(ellipse 1200px 700px at 50% 100%, rgba(6,8,20,0.92) 0%, transparent 72%),
    linear-gradient(180deg, #05070a 0%, #070a14 32%, #06080a 68%, #04060a 100%);
  background-color: #04060a;
  z-index: -1; pointer-events: none; overflow: hidden;
}
.streak-bg::before{
  content:''; position:absolute; inset:-20% -10%; pointer-events:none; z-index:2;
  background:
    linear-gradient(112deg, transparent 28%, rgba(96,165,250,0.07) 42%, rgba(168,85,247,0.06) 54%, transparent 72%),
    linear-gradient(-12deg, transparent 22%, rgba(34,211,238,0.06) 38%, rgba(236,72,153,0.04) 52%, transparent 74%),
    radial-gradient(ellipse 700px 320px at 34% 18%, rgba(96,165,250,0.07) 0%, transparent 68%),
    radial-gradient(ellipse 520px 280px at 78% 32%, rgba(168,85,247,0.06) 0%, transparent 68%);
  filter: blur(18px) saturate(1.15);
  opacity:0.9;
  animation: auroraDrift 28s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes auroraDrift{
  0%,100%{ transform: translate3d(0,0,0) scale(1) rotate(0deg); opacity:0.88; }
  33%{ transform: translate3d(-14px,8px,0) scale(1.02) rotate(0.6deg); opacity:1; }
  66%{ transform: translate3d(10px,-10px,0) scale(1.03) rotate(-0.5deg); opacity:0.92; }
}
.streak-bg .bumi-img{
  position:absolute; left:50%; bottom:-5%; top:auto; transform:translateX(-50%);
  width:min(1380px, 140vw); height:min(560px, 54vh); object-fit:cover; object-position:center 28%;
  opacity:1; filter:brightness(1.22) saturate(1.28) contrast(1.12) drop-shadow(0 -8px 32px rgba(110,180,255,0.18));
  -webkit-mask-image:
    radial-gradient(ellipse 88% 74% at 50% 100%, black 44%, transparent 78%),
    linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image:
    radial-gradient(ellipse 88% 74% at 50% 100%, black 44%, transparent 78%),
    linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-composite:source-in, source-in; mask-composite:intersect, intersect;
  border-radius:50% 50% 0 0 / 18% 18% 0 0;
  pointer-events:none; z-index:1;
  animation:bumiBreathe 18s ease-in-out infinite;
  will-change:transform;
}
.streak-bg .bumi-glow{
  position:absolute; left:50%; bottom:2.5%; transform:translateX(-50%);
  width:min(1100px, 98vw); height:68px;
  background:radial-gradient(ellipse at 50% 0%, rgba(110,180,255,0.72) 0%, rgba(66,140,255,0.36) 28%, rgba(34,211,238,0.18) 48%, rgba(168,85,247,0.08) 62%, transparent 76%);
  filter:blur(16px); opacity:1; pointer-events:none; z-index:2;
  animation:glowPulse 4.2s ease-in-out infinite;
}
.streak-bg .blackhole-img{
  position:absolute; right:-1%; bottom:19%; left:auto; top:auto; transform:none;
  width:min(660px, 58vw); height:auto; aspect-ratio:1.82; object-fit:cover; object-position:center 44%;
  opacity:0.68; filter:brightness(1.06) saturate(1.12) contrast(1.08) drop-shadow(0 0 28px rgba(96,165,250,0.22));
  -webkit-mask-image:radial-gradient(ellipse 74% 66% at 58% 48%, black 46%, transparent 76%);
  mask-image:radial-gradient(ellipse 74% 66% at 58% 48%, black 46%, transparent 76%);
  pointer-events:none; z-index:2; transform-origin:62% 48%;
  animation:holeDrift 22s ease-in-out infinite 1.2s;
  will-change:transform;
}
.streak-bg .blackhole-glow{
  position:absolute; right:-1%; bottom:19%; left:auto; top:auto; transform:none;
  width:min(620px, 56vw); height:min(380px, 46vh);
  background:radial-gradient(ellipse at 52% 48%, rgba(110,180,255,0.18) 0%, rgba(80,120,255,0.10) 30%, rgba(168,85,247,0.08) 48%, transparent 70%);
  filter:blur(20px); opacity:0.95; pointer-events:none; z-index:2;
  animation:glowPulse 5.6s ease-in-out infinite 0.8s;
}
/* Cinematic image animations bumi breathe + blackhole drift */
@keyframes bumiBreathe{
  0%,100%{ transform:translateX(-50%) scale(1) translateY(0); filter:brightness(1.18) saturate(1.22) contrast(1.08); }
  50%{ transform:translateX(-50%) scale(1.015) translateY(-5px); filter:brightness(1.22) saturate(1.26) contrast(1.10); }
}
@keyframes holeDrift{
  0%,100%{ transform:translate3d(0,0,0) scale(1) rotate(0deg); }
  35%{ transform:translate3d(-7px,5px,0) scale(1.012) rotate(0.28deg); }
  68%{ transform:translate3d(4px,-4px,0) scale(1.016) rotate(-0.22deg); }
}
@keyframes bumiSpin{
  from{ transform:translateX(-50%) rotate(0deg); }
  to{ transform:translateX(-50%) rotate(360deg); }
}
@keyframes glowPulse{
  0%,100%{ opacity:0.92; filter:blur(14px) brightness(1); }
  50%{ opacity:1; filter:blur(16px) brightness(1.12); }
}
@media(prefers-reduced-motion:reduce){
  .streak-bg .bumi-img, .streak-bg .blackhole-img, .streak-bg .bumi-glow, .streak-bg .blackhole-glow{ animation:none !important; }
}
@media(max-width:900px){
  .streak-bg .bumi-img{ width:148vw; height:44vh; bottom:-2%; opacity:0.72; }
  .streak-bg .blackhole-img{ width:78vw; right:-6%; bottom:22%; opacity:0.52; }
  .streak-bg .blackhole-glow{ right:-6%; bottom:22%; }
}
.comets{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2;}
/* PC/laptop only — tablet/mobile/ipad gada komet biar tidak lag & tidak ganggu */
@media(max-width:1024px){
  .comets, .comet, .edge-flashes{ display:none !important; }
}
.comet{
  position:absolute; left:var(--x); top:var(--y);
  width:var(--len); height:1.9px;
  background:linear-gradient(90deg, rgba(34,211,238,0) 0%, rgba(59,130,246,0.42) 38%, rgba(96,165,250,0.68) 66%, rgba(140,190,255,0.94) 86%, #eef6ff 100%);
  border-radius:999px; opacity:0;
  box-shadow:0 0 9px rgba(59,130,246,0.52), 0 0 16px rgba(34,211,238,0.32), 0 0 22px rgba(96,165,250,0.14);
  transform:translate3d(0,0,0) rotate(14deg);
  animation:cometFly var(--d) linear infinite;
  animation-delay:var(--delay);
  will-change:transform,opacity;
}
.comet.comet-fast{
  height:1.9px;
  background:linear-gradient(90deg, rgba(34,211,238,0) 0%, rgba(96,165,250,0.52) 42%, rgba(120,180,255,0.78) 68%, #fff 100%);
  box-shadow:0 0 10px rgba(96,165,250,0.72), 0 0 18px rgba(59,130,246,0.42);
  filter:brightness(1.18);
}
.comet.comet-fast::after{ width:4px; height:4px; box-shadow:0 0 9px #fff, 0 0 16px rgba(96,165,250,0.92); }
.comet.comet-ultra{
  height:2.2px;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(96,165,250,0.0) 22%, rgba(96,165,250,0.58) 48%, rgba(170,200,255,0.88) 72%, #ffffff 94%, #e6f0ff 100%);
  box-shadow:0 0 12px rgba(96,165,250,0.72), 0 0 22px rgba(59,130,246,0.42), 0 0 28px rgba(34,211,238,0.22);
  filter:brightness(1.18) contrast(1.04);
  animation:cometFly var(--d) linear forwards !important;
}
.comet.comet-ultra::after{
  width:5px; height:5px; background:#fff; box-shadow:0 0 10px #fff, 0 0 18px rgba(96,165,250,1), 0 0 28px rgba(59,130,246,0.72);
}
.comet.comet-ultra::before{
  content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:28px; height:12px; border-radius:50%;
  background:radial-gradient(ellipse at 30% 50%, rgba(96,165,250,0.28) 0%, transparent 72%);
  filter:blur(3px);
}
.comet::after{
  content:''; position:absolute; right:-1px; top:50%; transform:translateY(-50%);
  width:3.4px; height:3.4px; background:#e0f0ff; border-radius:50%;
  box-shadow:0 0 7px rgba(255,255,255,0.96), 0 0 13px rgba(59,130,246,0.82), 0 0 18px rgba(34,211,238,0.62);
}
@keyframes cometFly{
  0%{ transform:translate3d(0,0,0) rotate(14deg); opacity:0; }
  8%{ opacity:0.88; }
  100%{ transform:translate3d(92vw, 24vh, 0) rotate(14deg); opacity:0; }
}
@media(prefers-reduced-motion:reduce){ .comet{ animation:none !important; opacity:0; } }
@media(prefers-reduced-motion:reduce){ .comet{ animation:none !important; opacity:0.18; } }
.edge-flashes{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1;}
.edge-flash{
  position:absolute; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(110,160,255,0.96) 0%, rgba(66,120,255,0.58) 22%, rgba(34,211,238,0.20) 44%, transparent 70%);
  filter:blur(22px); opacity:0;
  animation:edgeFlash var(--d) ease-in-out infinite;
  animation-delay:var(--delay);
  will-change:opacity,transform;
}
.edge-flash::after{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:10px; height:10px; background:#e6f0ff; border-radius:50%;
  box-shadow:0 0 14px rgba(255,255,255,0.96), 0 0 26px rgba(110,160,255,0.88), 0 0 42px rgba(34,211,238,0.56);
  opacity:0.96;
}
/* kilatan di KANAN semua di ujung lintasan komet turun */
.ef-tl{ right:-180px; top:6%; left:auto; }
.ef-tr{ right:-180px; top:18%; left:auto; }
.ef-bl{ right:-180px; top:32%; left:auto; bottom:auto; }
.ef-br{ right:-180px; top:48%; left:auto; bottom:auto; }
.ef-lm{ right:-180px; top:64%; left:auto; }
.ef-rm{ right:-180px; top:78%; left:auto; }
@keyframes edgeFlash{
  0%{ opacity:0; transform:scale(0.72); filter:brightness(1); }
  3%{ opacity:0; transform:scale(0.72); }
  4%{ opacity:0.96; transform:scale(1); filter:brightness(1.35); }
  6%{ opacity:0.18; transform:scale(1.02); }
  7%{ opacity:0.88; transform:scale(1.01); filter:brightness(1.22); }
  9%{ opacity:0.32; transform:scale(1.03); }
  12%{ opacity:0.72; transform:scale(1.02); }
  18%{ opacity:0; transform:scale(0.88); filter:brightness(1); }
  100%{ opacity:0; transform:scale(0.72); }
}
@media(max-width:640px){
  .edge-flash{ width:260px; height:260px; filter:blur(16px); }
  .ef-tl{ right:-130px; top:8%; left:auto; } .ef-tr{ right:-130px; top:20%; left:auto; }
  .ef-bl{ right:-130px; top:36%; left:auto; bottom:auto; } .ef-br{ right:-130px; top:52%; left:auto; bottom:auto; }
  .ef-lm{ right:-130px; top:68%; left:auto; } .ef-rm{ right:-130px; top:82%; left:auto; }
}
@media(prefers-reduced-motion:reduce){ .edge-flash{ animation:none !important; opacity:0.22; } }
/* partikel debu realistic floating dust */
.galaxy-particles{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1;}
.galaxy-particles .gp{
  position:absolute; border-radius:50%; background:#cdd6f4;
  opacity:0; box-shadow:0 0 4px rgba(180,190,255,0.52);
  animation:gpDrift var(--d) ease-in-out infinite;
  animation-delay:var(--delay);
  will-change:transform,opacity;
}
.galaxy-particles .gp::after{
  content:''; position:absolute; inset:-3px; border-radius:50%;
  background:radial-gradient(circle, rgba(180,190,255,0.18) 0%, transparent 68%);
  filter:blur(1.5px);
}
@keyframes gpDrift{
  0%{ transform:translate3d(0,0,0) scale(1); opacity:0; }
  12%{ opacity:var(--o); }
  50%{ transform:translate3d(var(--tx), var(--ty), 0) scale(1.06); opacity:var(--o); }
  88%{ opacity:var(--o); }
  100%{ transform:translate3d(calc(var(--tx) * 1.6), calc(var(--ty) * 1.6), 0) scale(0.92); opacity:0; }
}
@media(prefers-reduced-motion:reduce){ .galaxy-particles .gp{ animation:none !important; opacity:0.12; } }
.streak-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0.52; z-index:1; filter: drop-shadow(0 0 8px rgba(180,190,255,0.12)); }
.streak-bg .galaxy-stars,
.streak-bg .galaxy-stars2 {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index:1;
}
.streak-bg .galaxy-stars { opacity: 0.58; animation:starTwinkle 7.2s ease-in-out infinite; }
.streak-bg .galaxy-stars2 { opacity: 0.34; transform: scale(1.4); animation:starTwinkle 9.4s ease-in-out infinite reverse; }
@keyframes starTwinkle{ 0%,100%{opacity:0.48} 50%{opacity:0.72} }
.streak-bg::after {
  content: ''; position: absolute; inset: 0; z-index: 4;
  background-image:
    linear-gradient(rgba(255,255,255,0.008) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.008) 1px, transparent 1px),
    radial-gradient(ellipse 900px 500px at 50% 100%, rgba(6,10,28,0.72) 0%, transparent 70%),
    linear-gradient(180deg, transparent 0%, transparent 62%, rgba(4,6,14,0.58) 88%, rgba(2,4,10,0.82) 100%);
  background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;
  opacity: 0.42;
  pointer-events: none;
}
@media(max-width:640px){
  .streak-bg .bimasakti-img{ width:148vw; height:92vh; top:40%; opacity:0.32; }
  .streak-bg .blackhole-img{ width:112vw; right:-14%; bottom:-2%; left:auto; top:auto; opacity:0.36; }
  .streak-bg .blackhole-glow{ width:96vw; right:-8%; bottom:-2%; left:auto; top:auto; }
}

/* ---------- 4. Layout ---------- */
.app-container {
  display: flex; flex: 1; min-height: 0; width: 100%; max-width: 920px; margin: 0 auto;
  gap: 16px; align-items: flex-start; justify-content: center; padding: 20px 16px 118px;
}
.app-main {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 44px 16px 16px; width: 100%;
}
.dash-panels { width: 100%; max-width: 560px; }
.dash-panels.slide-container.cube-viewport{ max-width:100vw !important; width:100vw !important; }
html, body{ max-width:100% !important; overflow-x:hidden !important; }
.dash-panel { display: flex; flex-direction: column; gap: 18px; }
.dash-panel[hidden] { display: none !important; }
/* Tablet/iPad anti-zoom hitam — 100vw fix untuk 641-1024 */
@media(min-width:641px) and (max-width:1024px){
  .slide-container.cube-viewport{ width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; }
  .slide-panel.cube-face{ width:100% !important; max-width:100% !important; flex:0 0 100% !important; }
  .slide-track.cube-3d-box{ width:100% !important; }
}
/* Scroll system: HOME bebas scroll panjang, menu lain kunci / sedikit scroll (premium centered) */
html{ overscroll-behavior:auto; }
body{ overflow-y:auto; overflow-x:hidden; height:auto; overscroll-behavior:auto; }
.app-container{ height:auto !important; min-height:0 !important; overflow:visible !important; }
.app-main{ overflow:visible !important; }
.slide-container.cube-viewport{ overflow:hidden !important; min-height:0 !important; height:auto !important; max-height:none !important; }
.slide-track.cube-3d-box{ height:auto !important; }
.slide-panel.cube-face{ overflow:visible !important; height:auto !important; max-height:none !important; padding:0 16px 32px; }
/* ——— Non-HOME: 1 full layar visual, aman dari nav tengah-bawah, scroll natural sampai bawah keliatan ——— */
body:not([data-view="beranda"]){
  overflow-y:auto !important;
  overflow-x:hidden !important;
  height:auto !important;
  min-height:100dvh !important;
  overscroll-behavior:auto !important;
}
body:not([data-view="beranda"]) .app-container{
  height:auto !important;
  min-height:calc(100dvh - 20px) !important;
  max-height:none !important;
  overflow:visible !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding:10px 16px 120px !important;
}
body:not([data-view="beranda"]) .app-main{
  height:auto !important;
  min-height:calc(100dvh - 32px) !important;
  overflow:visible !important;
  justify-content:flex-start !important;
  align-items:center !important;
  padding:10px 0 0 !important;
  width:100% !important;
}
body:not([data-view="beranda"]) .slide-container.cube-viewport{
  height:auto !important;
  min-height:calc(100dvh - 110px) !important;
  max-height:none !important;
  overflow:visible !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding-top:0 !important;
}
body:not([data-view="beranda"]) .slide-track.cube-3d-box{
  height:auto !important;
  align-items:flex-start !important;
}
body:not([data-view="beranda"]) .slide-panel.cube-face{
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  overflow:visible !important;
  overflow-x:hidden !important;
  padding:6px 16px 40px !important;
  justify-content:flex-start !important;
  align-items:center !important;
  align-content:flex-start !important;
  gap:12px !important;
  box-sizing:border-box !important;
}
/* Atur ukuran agar muat 1 layar penuh tanpa scroll berlebihan — lebih compact untuk muat */
body:not([data-view="beranda"]) .panel-head-large{ margin-bottom:2px !important; padding-bottom:6px !important; }
body:not([data-view="beranda"]) .panel-head-large .panel-title-large{ font-size: clamp(1.35rem, 3.6vw, 1.75rem) !important; line-height:1.05 !important; }
body:not([data-view="beranda"]) .upload-card{ padding:12px !important; gap:8px !important; max-width:560px !important; }
body:not([data-view="beranda"]) .upload-area{ padding:16px 12px !important; }
body:not([data-view="beranda"]) .upload-icon{ font-size:28px !important; margin-bottom:3px !important; }
body:not([data-view="beranda"]) .upload-text{ font-size:13px !important; }
body:not([data-view="beranda"]) .toggle-row{ gap:8px !important; }
body:not([data-view="beranda"]) .tools-grid-new{ gap:8px !important; }
body:not([data-view="beranda"]) .tool-card-new{ padding:10px 11px !important; }
body:not([data-view="beranda"]) .tutorial-grid{ gap:10px !important; display:grid !important; grid-template-columns:1fr 1fr !important; align-items:start !important; }
body:not([data-view="beranda"]) .tutorial-card{ padding:9px 9px !important; }
body:not([data-view="beranda"]) .tutorial-card h3{ font-size:11.5px !important; }
body:not([data-view="beranda"]) .tutorial-card p{ font-size:10.5px !important; line-height:1.45 !important; }
body:not([data-view="beranda"]) .tutorial-step{ padding:4px 0 !important; gap:6px !important; }
body:not([data-view="beranda"]) .tutorial-step .step-num{ width:22px !important; height:22px !important; font-size:10px !important; }
body[data-view="tutorial"] .tutorial-card{ padding:8px 9px !important; }
body[data-view="tutorial"] .tutorial-grid{ gap:8px !important; }
body[data-view="tutorial"] .tut-section-title{ font-size:10px !important; margin-bottom:6px !important; padding-bottom:6px !important; }
body[data-view="tutorial"] .help-card-wide{ padding:8px 10px !important; min-height:0 !important; }
body[data-view="tutorial"] .app-container{ padding-bottom:90px !important; }
body[data-view="tutorial"] .slide-panel.cube-face{ padding-bottom:16px !important; }
body:not([data-view="beranda"]) .help-card-wide{ padding:10px 12px !important; gap:8px !important; }
body:not([data-view="beranda"]) .donate-card{ gap:10px !important; padding:12px !important; }
body:not([data-view="beranda"]) .qris-image{ width:164px !important; height:164px !important; }
body:not([data-view="beranda"]) .about-card{ gap:10px !important; padding:12px !important; }
body:not([data-view="beranda"]) .feature-item{ padding:9px 10px !important; }
body:not([data-view="beranda"]) .about-contact{ padding-top:10px !important; margin-bottom:4px !important; }
@media(max-width:860px){
  body:not([data-view="beranda"]) .tutorial-grid{ grid-template-columns:1fr 1fr !important; }
}
@media(max-width:640px){
  body:not([data-view="beranda"]) .app-container{ height:auto !important; min-height:0 !important; max-height:none !important; padding:10px 10px 110px !important; overflow:visible !important; }
  body:not([data-view="beranda"]) .slide-container.cube-viewport{ height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important; }
  body:not([data-view="beranda"]) .slide-panel.cube-face{ max-height:none !important; height:auto !important; overflow:visible !important; padding:6px 10px 40px !important; gap:8px !important; }
  body:not([data-view="beranda"]) .tutorial-grid{ grid-template-columns:1fr !important; gap:8px !important; }
  body:not([data-view="beranda"]) .panel-head-large .panel-title-large{ font-size: clamp(1.25rem, 5vw, 1.55rem) !important; }
  #panel-tentang{ padding-bottom: 24px !important; }
  #panel-tentang .about-card{ padding-bottom: 16px !important; }
  #panel-tentang .about-contact{ padding-bottom: 20px !important; margin-bottom: 16px !important; display:flex !important; }
}
/* Anti-flash MY VIDEOS: hanya tampil saat beranda aktif */
#panel-beranda:not(.active-panel) .tiktok-section{ display:none !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
.slide-container.cube-viewport:not(.is-ready){ opacity:1; }
.panel-head,
.panel-head-large{
  position: relative; top: auto; z-index: auto;
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding-top:12px; margin:0 -16px; padding-left:16px; padding-right:16px; padding-bottom:12px;
  border-bottom: none;
}

/* Top header (pill ID/EN) 21st.dev glass pill */
.top-header {
  position: fixed; top: 12px; right: 12px; z-index: 50;
  display: flex; align-items: center; justify-content: flex-end;
}
.top-header .lang-toggle {
  display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 3px; gap: 2px;
  background: rgba(18,20,25,0.72); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-pill); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 6px 20px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.06);
  min-height: 34px; box-sizing:border-box;
}
.lang-btn {
  background: transparent; border: none; color: var(--text-3);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 0 13px; border-radius: var(--radius-pill);
  transition: all var(--dur-1) var(--ease-out); min-height: 28px; min-width: 38px;
  display:inline-flex; align-items:center; justify-content:center; line-height:1; box-sizing:border-box;
}
.lang-btn:hover { color: var(--text); }
.lang-btn.active { background: linear-gradient(135deg, #f2f4f6 0%, #dfe6ec 100%); color: #0b0e12; font-weight: 800; box-shadow: 0 2px 10px rgba(255,255,255,0.18); }

/* ---------- 5. Hero Premium stacked kinetic ---------- */
.kinetic-hero {
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 0 10px; position: relative;
}
/* Hard-refresh fix: Beranda hero — desktop 1 layar, mobile compact agar tidak memenuhi layar */
#panel-beranda .kinetic-hero{
  min-height: calc(100dvh - 160px);
  justify-content: center;
  padding: 18px 0 12px;
}
body[data-view="beranda"] .slide-container.cube-viewport{
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
}
body[data-view="beranda"] .slide-panel.cube-face{
  overflow: visible !important;
}
/* Batasan scroll: ujung UI = ujung scroll */
.tiktok-section{
  padding-bottom: 40px !important;
  scroll-margin-bottom: 120px;
}
@media(max-width:640px){
  #panel-beranda .kinetic-hero{ min-height: auto; padding: 14px 0 12px; justify-content:flex-start; }
  #panel-beranda{ padding-top:6px; }
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px;
  background: hsla(0, 0%, 92%, 0.1); border: 1px solid hsla(0, 0%, 92%, 0.18);
  border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--md-sys-color-primary); width: fit-content;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px hsla(0, 0%, 92%, 0.1);
}
.hero-badge::before {
  content: ''; width: 7px; height: 7px; background: var(--md-sys-color-primary); border-radius: 50%;
  box-shadow: 0 0 10px hsla(0, 0%, 92%, 0.8); animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:0.72; transform:scale(0.9)} }
.kinetic-stacked-title { display: flex; flex-direction: column; gap: 2px; }
.kinetic-greeting-line {
  font-family: var(--display-font); font-size: clamp(1.45rem, 3.2vw, 1.85rem); font-weight: 900;
  line-height: 1.08; letter-spacing: -0.03em; color: #fff; min-height: 1.15em; white-space: nowrap;
  text-transform: uppercase; filter: drop-shadow(0 0 10px rgba(255,255,255,0.14)); opacity: 1;
}
.greeting-box .flip-char { color: #fff; font-weight: 900; text-shadow: 0 0 8px rgba(255,255,255,0.42), 0 0 16px rgba(255,255,255,0.18); }
.kinetic-name-line {
  font-family: var(--display-font); font-size: clamp(3rem, 9vw, 5.4rem); font-weight: 900;
  line-height: 0.9; letter-spacing: -0.045em; min-height: 1em; white-space: nowrap;
  color: #f0abfc;
  background: none;
  -webkit-text-fill-color: #f0abfc;
  filter: drop-shadow(0 0 18px rgba(168,85,247,0.52)) drop-shadow(0 0 36px rgba(236,72,153,0.32)) drop-shadow(0 2px 14px rgba(0,0,0,0.45));
  text-transform: uppercase;
}
.kinetic-flip-box { position: relative; display: inline-flex; align-items: baseline; flex-wrap: nowrap; white-space: nowrap; perspective: 900px; transform-style: preserve-3d; vertical-align: baseline; max-width: 100%; overflow: visible; }
.flip-layer { display: inline-flex; align-items: baseline; white-space: nowrap; transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-layer.layer-next { position: absolute; top: 0; left: 0; pointer-events: none; }
.flip-char { display: inline-block; will-change: transform, opacity; transition: transform 380ms cubic-bezier(0.25,0.8,0.25,1), opacity 260ms ease; transform-origin: 50% 80%; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; }
.name-box .flip-char {
  font-weight: 900;
  color: #f0abfc;
  -webkit-text-fill-color: #f0abfc;
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  text-shadow: 0 0 14px rgba(168,85,247,0.82), 0 0 28px rgba(236,72,153,0.52), 0 0 42px rgba(168,85,247,0.28);
  filter: drop-shadow(0 0 10px rgba(168,85,247,0.38));
}
.flip-space { display: inline-block; width: 0.28em; }
@keyframes charFlipOut { 0%{transform:rotateX(0deg) translateY(0);opacity:1} 100%{transform:rotateX(85deg) translateY(-35%);opacity:0} }
@keyframes charFlipIn { 0%{transform:rotateX(-85deg) translateY(35%);opacity:0} 100%{transform:rotateX(0deg) translateY(0);opacity:1} }
.char-flip-out { animation: charFlipOut 380ms cubic-bezier(0.25,0.8,0.25,1) both; }
.char-flip-in { animation: charFlipIn 380ms cubic-bezier(0.25,0.8,0.25,1) both; }
.cd-0{animation-delay:0ms}.cd-1{animation-delay:24ms}.cd-2{animation-delay:48ms}.cd-3{animation-delay:72ms}.cd-4{animation-delay:96ms}.cd-5{animation-delay:120ms}.cd-6{animation-delay:144ms}.cd-7{animation-delay:168ms}.cd-8{animation-delay:192ms}.cd-9{animation-delay:216ms}.cd-10{animation-delay:240ms}.cd-11{animation-delay:264ms}.cd-12{animation-delay:288ms}

#panel-beranda { position: relative; overflow: visible; padding: 8px 0 6px; }
#panel-beranda > * { position: relative; z-index: 1; }
.hero-bio-text { font-size: 12.2px; line-height: 1.65; color: var(--text-3); max-width: 560px; font-weight: 500; white-space: pre-line; }
.hero-action-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
#panel-beranda .hero-action-row .btn-main {
  background: var(--md-sys-color-primary); color: #0b0c0e; font-weight: 800; padding: 0 18px; min-height: 42px;
  box-shadow: var(--shadow-glow-lime); border-radius: var(--radius-pill);
}
#panel-beranda .hero-action-row .btn-main:hover { filter: brightness(1.04); transform: translateY(-1px); }
#panel-beranda .hero-action-row .btn-ghost {
  background: rgba(26,30,35,0.9); color: var(--text); border: 1px solid rgba(255,255,255,0.12); font-weight: 700;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#panel-beranda .hero-action-row .btn-ghost:hover { background: #232830; border-color: rgba(255,255,255,0.18); }
#panel-beranda .hero-action-row .btn-main, #panel-beranda .hero-action-row .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1; }
#panel-beranda .hero-action-row .material-symbols-rounded { display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-size: 18px; flex-shrink: 0; }

/* Staggered entrance (premium) */
@keyframes fadeInUp { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
.kinetic-hero .hero-badge { animation: fadeInUp 0.6s var(--ease-out) 0.08s both; }
.kinetic-hero .kinetic-stacked-title { animation: fadeInUp 0.6s var(--ease-out) 0.16s both; }
.kinetic-hero .hero-bio-text { animation: fadeInUp 0.6s var(--ease-out) 0.26s both; }
.kinetic-hero .hero-action-row { animation: fadeInUp 0.6s var(--ease-out) 0.36s both; }

/* MY VIDEOS — animasi muncul saat scroll kebawah (fade + stagger) */
.tiktok-section{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  margin-top:140px;
  padding:32px 16px 40px; display:flex; flex-direction:column; align-items:center; gap:28px;
  overflow:visible;
  opacity:0; transform:translateY(28px);
  transition: opacity 620ms ease, transform 720ms var(--ease-spring-soft);
  will-change: opacity, transform;
  background: transparent;
  border: none;
}
.tiktok-section.is-visible{
  opacity:1; transform:translateY(0);
}
.tiktok-title{
  font-family:var(--display-font); font-size:clamp(2rem,6vw,3.2rem); font-weight:900;
  color:#fff; text-align:center; letter-spacing:-0.04em; line-height:1;
  text-shadow:0 0 14px rgba(255,255,255,0.32), 0 0 28px rgba(255,255,255,0.14);
  margin-bottom:6px;
}
@media(max-width:640px){
  .tiktok-section{ margin-top:100px; padding:24px 12px 12px; gap:22px; }
}
.tiktok-grid{
  width:min(1100px,96vw); display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  justify-items:stretch;
}
.tiktok-card{
  background:linear-gradient(180deg, rgba(22,26,32,0.96) 0%, rgba(14,16,20,0.96) 100%);
  border:1px solid rgba(255,255,255,0.08); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  opacity:0; transform:translateY(18px) scale(0.96);
  transition:opacity 420ms ease, transform 560ms var(--ease-spring-soft), border-color 180ms ease, box-shadow 220ms ease;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 20px rgba(0,0,0,0.22);
  will-change: transform, opacity;
}
.tiktok-card:hover{ transform:translateY(-3px) scale(1); border-color:rgba(255,255,255,0.14); box-shadow:0 12px 28px rgba(0,0,0,0.32); }
.tiktok-section.is-visible .tiktok-card{
  opacity:1; transform:translateY(0) scale(1);
}
.tiktok-section.is-visible .tiktok-card:nth-child(1){ transition-delay: 80ms; }
.tiktok-section.is-visible .tiktok-card:nth-child(2){ transition-delay: 140ms; }
.tiktok-section.is-visible .tiktok-card:nth-child(3){ transition-delay: 200ms; }
.tiktok-section.is-visible .tiktok-card:nth-child(4){ transition-delay: 260ms; }
.tiktok-thumb{ aspect-ratio:1/1; overflow:hidden; background:#0f1117; display:grid; place-items:center; }
.tiktok-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.tiktok-like{
  display:flex; align-items:center; justify-content:space-around; gap:8px;
  padding:10px 8px; font-size:11.5px; font-weight:700; color:var(--text-3);
  border-top:1px solid var(--line); background:rgba(255,255,255,0.02);
}
.tiktok-stat{ display:inline-flex; align-items:center; gap:4px; }
.tiktok-stat .material-symbols-rounded{ font-size:14px; font-variation-settings:'FILL' 1; }
.tiktok-stat:nth-child(1) .material-symbols-rounded{ color:#e2e8f0; }
.tiktok-stat:nth-child(2) .material-symbols-rounded{ color:#ff3b6b; }
.tiktok-stat:nth-child(3) .material-symbols-rounded{ color:#60a5fa; }
.tiktok-like{ gap:6px; font-size:10.5px; }
.tiktok-stat{ gap:3px; }
@media(max-width:860px){ .tiktok-grid{ grid-template-columns:repeat(4,1fr); gap:10px; } .tiktok-title{ font-size:2.2rem; } .tiktok-card{ border-radius:14px; } .tiktok-like{ font-size:10px; gap:4px; } }
@media(max-width:640px){ .tiktok-section{ padding:20px 10px 10px; gap:14px; } .tiktok-grid{ grid-template-columns:repeat(2,1fr); gap:8px; } .tiktok-title{ font-size:1.9rem; } .tiktok-like{ padding:6px 3px; font-size:9.5px; gap:4px; } .tiktok-stat{ gap:2px; } .tiktok-stat .material-symbols-rounded{ font-size:11px; } .tiktok-thumb{ aspect-ratio:1/1; } }
@media(prefers-reduced-motion:reduce){ .tiktok-card{ transition:none; } }

/* ---------- 6. Panels & Cards (glass + soft UI) ---------- */
.panel-head { position: relative; padding-bottom: 10px; margin-bottom: -2px; }
.panel-head::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 28px; height: 2px;
  background: var(--md-sys-color-primary); border-radius: var(--radius-pill); opacity: 0.9;
}
.panel-head h1 { font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 750; color: var(--text-3); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.panel-by { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--lime); letter-spacing: 0; text-transform: none; }
.head-sub { font-size: 12.5px; font-weight: 500; color: var(--text-3); margin-top: 4px; }
/* Large titles tanpa ikon header ikon bawah tetap sesuai fungsi */
.panel-head-large { display: block; padding-bottom: 14px; margin-bottom: 2px; border-bottom: none; }
.panel-head-large::after { display: none; }
.panel-head-large .panel-title-large { font-size: clamp(1.8rem, 5.5vw, 2.4rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1.05; color: #ffffff !important; text-transform: uppercase; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; text-shadow: 0 0 14px rgba(255,255,255,0.55), 0 0 28px rgba(255,255,255,0.28); filter: drop-shadow(0 0 12px rgba(255,255,255,0.32)); opacity: 1; }
.panel-title-large .panel-by { font-size: clamp(12px, 2.8vw, 13.5px); font-weight: 700; color: var(--text-3); text-transform: none; letter-spacing: 0; }
.panel-head-large .head-sub { display: block; margin-top: 6px; }
/* hidden fix log & progress harus hidden default */
.progress-wrap[hidden], .log-head[hidden], .log-area[hidden] { display: none !important; }

.card {
  background: linear-gradient(180deg, rgba(22,26,32,0.92) 0%, rgba(14,16,20,0.92) 100%);
  border: 1px solid var(--glass-border); border-top: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--md-radius); padding: 16px;
  box-shadow: var(--shadow-card); backdrop-filter: blur(12px) saturate(1.08); -webkit-backdrop-filter: blur(12px) saturate(1.08);
  transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
  position: relative; overflow: hidden;
}
.card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 42%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--dur-2) ease; pointer-events: none;
}
.card:hover { border-color: rgba(255,255,255,0.12); box-shadow: var(--shadow-lift), inset 0 1px 0 rgba(255,255,255,0.06); }
.card:hover::before { opacity: 1; }

/* Built for Excellence PREMIUM WHITE TREE v6 smooth curves, white editorial, 1 layar */
.built-excellence{margin-top:22px;padding:28px 0 24px;border:none;border-radius:0;background:transparent;overflow:visible;overflow-x:clip;position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);min-height:96vh;min-height:96dvh;display:flex;flex-direction:column;align-items:center;gap:10px;}
.built-kicker{display:none !important;}
.built-title{font-size:clamp(22px,4.8vw,30px);font-weight:900;letter-spacing:-0.03em;line-height:1.08;text-align:center;color:#ffffff;margin-bottom:4px;text-shadow:0 1px 18px rgba(255,255,255,0.14),0 0 32px rgba(255,255,255,0.08);position:relative;padding-bottom:14px;}
.built-title::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:36px;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.95),transparent);box-shadow:0 0 10px rgba(255,255,255,0.45);}
.built-title .grad-text{background:none;-webkit-text-fill-color:#fff;color:#fff;}
.excellence-tree{position:relative;width:min(1100px,96vw);height:clamp(540px,70vh,720px);min-height:540px;margin-left:auto;margin-right:auto;}
.excellence-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
.excellence-lines path{stroke-linecap:round;stroke-linejoin:round;}
.ex-card{position:absolute;width:228px;background:linear-gradient(180deg,rgba(18,22,32,0.96) 0%,rgba(13,16,24,0.94) 100%);border:1px solid rgba(255,255,255,0.10);border-top:1px solid rgba(255,255,255,0.14);border-radius:14px;padding:15px;display:flex;gap:13px;backdrop-filter:blur(14px) saturate(1.12);-webkit-backdrop-filter:blur(14px) saturate(1.12);box-shadow:0 12px 32px rgba(0,0,0,0.38),0 2px 10px rgba(0,0,0,0.22),inset 0 1px 0 rgba(255,255,255,0.06);transition:transform 260ms var(--ease-out),border-color 200ms ease,box-shadow 260ms ease;}
.ex-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,0.16);box-shadow:0 16px 40px rgba(0,0,0,0.44),0 4px 14px rgba(0,0,0,0.28),inset 0 1px 0 rgba(255,255,255,0.08);}
.ex-card:focus-within{outline:2px solid rgba(255,255,255,0.18);outline-offset:2px;}
.ex-tl{left:1.8%;top:17%}.ex-tr{right:1.8%;top:17%}.ex-bl{left:1.8%;bottom:13%}.ex-br{right:1.8%;bottom:13%}
.ex-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;border:1px solid;box-shadow:0 0 14px currentColor;transition:transform 260ms var(--ease-out);}
.ex-card:hover .ex-icon{transform:scale(1.05);}
.ex-blue{background:rgba(96,165,250,0.14);border-color:rgba(96,165,250,0.32);color:#7ab4ff;box-shadow:0 0 18px rgba(96,165,250,0.22);}
.ex-purple{background:rgba(168,139,250,0.14);border-color:rgba(168,139,250,0.32);color:#b3a0ff;}
.ex-green{background:rgba(52,211,153,0.13);border-color:rgba(52,211,153,0.30);color:#5ee9b5;}
.ex-orange{background:rgba(251,146,60,0.13);border-color:rgba(251,146,60,0.30);color:#ffb86a;}
.ex-card h4{font-size:13px;font-weight:800;letter-spacing:-0.01em;line-height:1.22;color:#fff;margin-bottom:5px;}
.ex-card i{display:block;width:28px;height:2px;border-radius:999px;margin-bottom:7px;opacity:0.95;background:linear-gradient(90deg,rgba(255,255,255,0.95),rgba(255,255,255,0.22));box-shadow:0 0 8px rgba(255,255,255,0.28);}
.ex-card p{font-size:11.2px;line-height:1.62;color:rgba(255,255,255,0.72);font-weight:500;}
.ex-card .material-symbols-rounded{font-size:19px;}
/* stagger reveal premium entrance */
@keyframes exCardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.ex-card{animation:exCardIn 560ms var(--ease-out) both;}
.ex-tl{animation-delay:80ms}.ex-tr{animation-delay:160ms}.ex-bl{animation-delay:240ms}.ex-br{animation-delay:320ms}
@media(max-width:860px){.excellence-tree{width:96vw;max-width:860px;height:clamp(520px,74vh,680px)}.ex-card{width:210px;padding:13px}}
@media(max-width:640px){.built-excellence{padding:20px 10px 18px;min-height:92vh;min-height:92dvh;gap:8px}.built-title{font-size:clamp(18px,5.6vw,22px);padding-bottom:12px}.excellence-tree{height:84vh;min-height:620px;width:98vw}.ex-card{width:150px;padding:11px 10px;gap:9px;border-radius:12px}.ex-icon{width:34px;height:34px}.ex-card h4{font-size:11.2px}.ex-card p{font-size:10px;line-height:1.55}.ex-card i{width:22px}.ex-tl{left:1.2%;top:15%}.ex-tr{right:1.2%;top:15%}.ex-bl{left:1.2%;bottom:11%}.ex-br{right:1.2%;bottom:11%}}

/* ── Neural Network 6-card futuristic AI ecosystem ── */
:root{--nn-cyan:#22d3ee;--nn-blue:#3b82f6;--nn-purple:#a78bfa;--nn-glow:0 0 22px rgba(59,130,246,0.28);--nn-card-h:148px;--nn-gap:16px;}
.neural-wrap{position:relative;width:min(1180px,96vw);margin:10px auto 0;display:flex;flex-direction:column;align-items:center;gap:0;padding:18px 0 8px;overflow:visible;}
.nn-central{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:3;margin-bottom:6px;}
.nn-central-node{position:relative;width:22px;height:22px;display:grid;place-items:center;}
.nn-dot{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e0f2ff 0%,#7dd3fc 38%,#3b82f6 78%,#1d4ed8 100%);box-shadow:0 0 18px rgba(59,130,246,0.55),0 0 36px rgba(34,211,238,0.32),inset 0 1px 2px rgba(255,255,255,0.9);border:1px solid rgba(255,255,255,0.55);z-index:2;}
.nn-pulse{position:absolute;inset:-7px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,0.22) 0%,rgba(34,211,238,0.12) 45%,transparent 72%);border:1px solid rgba(125,211,252,0.22);animation:nnPulse 2.8s ease-in-out infinite;z-index:1;}
.nn-pulse2{inset:-13px;animation-delay:0.9s;opacity:0.55;}
@keyframes nnPulse{0%,100%{transform:scale(0.92);opacity:0.9}50%{transform:scale(1.08);opacity:0.55}}
.nn-central-label{font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,0.42);font-family:var(--mono);}
.nn-svg{position:absolute;top:28px;left:0;width:100%;height:360px;pointer-events:none;overflow:visible;z-index:1;}
.nn-path{transition:opacity 260ms ease,filter 260ms ease,stroke-width 260ms ease;}
.nn-path.is-hover{opacity:1 !important;stroke-width:2.2 !important;filter:url(#nnGlow) brightness(1.18);}
.nn-cards{position:relative;z-index:2;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--nn-gap);width:100%;margin-top:168px;padding:0 8px;}
.nn-card{height:var(--nn-card-h);border-radius:16px;background:linear-gradient(180deg,rgba(22,26,34,0.88) 0%,rgba(14,18,28,0.92) 100%);border:1px solid rgba(255,255,255,0.08);border-top:1px solid rgba(255,255,255,0.12);box-shadow:0 10px 28px rgba(0,0,0,0.36),0 2px 10px rgba(0,0,0,0.22),inset 0 1px 0 rgba(255,255,255,0.05);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);transition:transform 260ms var(--ease-out),border-color 200ms ease,box-shadow 260ms ease,background 200ms ease;position:relative;overflow:hidden;cursor:pointer;}
.nn-card::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(34,211,238,0.18),rgba(59,130,246,0.14) 42%,rgba(167,139,250,0.16));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity 260ms ease;pointer-events:none;}
.nn-card:hover,.nn-card:focus-visible{transform:translateY(-4px);border-color:rgba(125,211,252,0.22);box-shadow:0 16px 40px rgba(0,0,0,0.44),0 6px 18px rgba(59,130,246,0.18),inset 0 1px 0 rgba(255,255,255,0.08);outline:none;}
.nn-card:hover::before,.nn-card:focus-visible::before{opacity:1;}
.nn-card.is-hover{border-color:rgba(125,211,252,0.28);box-shadow:0 16px 40px rgba(0,0,0,0.44),0 0 24px rgba(59,130,246,0.22);}
@media(max-width:1100px){.neural-wrap{width:min(1100px,97vw)} .nn-cards{gap:12px} .nn-card{height:136px}}
@media(max-width:860px){.nn-svg{height:300px} .nn-cards{grid-template-columns:repeat(3,1fr);margin-top:138px} .nn-card{height:132px}}
@media(max-width:640px){.neural-wrap{width:98vw;padding:14px 0 6px} .nn-svg{height:420px;top:32px} .nn-cards{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:118px;padding:0 6px} .nn-card{height:124px;border-radius:14px} .nn-central-label{font-size:8.5px}}
@media(max-width:380px){.nn-cards{gap:10px} .nn-card{height:112px}}
@media(prefers-reduced-motion:reduce){.nn-pulse,.nn-lights circle{animation:none !important} .nn-card{transition:none}}

/* ── Eco Journey LONG vertical AI ecosystem (scroll storytelling) ── */
.eco-journey{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;padding:12px 0 24px;overflow:visible;}
.eco-top{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;z-index:3;margin:8px 0 0;}
.eco-top-node{position:relative;width:18px;height:18px;display:grid;place-items:center;}
.eco-top-dot{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f8fafc 0%,#e2e8f0 32%,#cbd5e1 68%,#94a3b8 100%);box-shadow:0 0 14px rgba(203,213,225,0.42),0 0 28px rgba(56,189,248,0.18),inset 0 1px 1px rgba(255,255,255,0.9);border:1px solid rgba(255,255,255,0.62);z-index:2;}
.eco-top-pulse{position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,0.16) 0%,rgba(59,130,246,0.08) 48%,transparent 72%);border:1px solid rgba(125,211,252,0.18);animation:ecoPulse 3.2s ease-in-out infinite;z-index:1;}
.eco-top-pulse2{inset:-14px;animation-delay:1s;opacity:0.52;}
@keyframes ecoPulse{0%,100%{transform:scale(0.92);opacity:0.85}50%{transform:scale(1.06);opacity:0.5}}
.eco-wrap{position:relative;width:min(1120px,94vw);margin:0 auto;padding:0 0 12px;overflow:visible;}
.eco-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1;}
.eco-spine{transition:stroke-dashoffset 120ms linear; will-change:stroke-dashoffset;}
.eco-branch{transition:opacity 280ms ease,filter 280ms ease,stroke-width 280ms ease;}
.eco-branch.is-hover{opacity:1 !important;stroke-width:1.95 !important;filter:url(#ecoBranchGlow) brightness(1.16);}
.eco-cards{position:relative;z-index:2;display:flex;flex-direction:column;gap:92px;padding:36px 0 28px;}
.eco-card{position:relative;width:min(44%, 460px);min-height:148px;height:148px;border-radius:16px;background:linear-gradient(180deg,rgba(22,26,34,0.86) 0%,rgba(14,18,28,0.90) 100%);border:1px solid rgba(255,255,255,0.07);border-top:1px solid rgba(255,255,255,0.11);box-shadow:0 10px 28px rgba(0,0,0,0.34),0 2px 10px rgba(0,0,0,0.20),inset 0 1px 0 rgba(255,255,255,0.04);backdrop-filter:blur(14px) saturate(1.14);-webkit-backdrop-filter:blur(14px) saturate(1.14);transition:transform 520ms cubic-bezier(0.16,1,0.3,1),opacity 520ms ease,border-color 260ms ease,box-shadow 260ms ease;opacity:0;transform:translateY(28px);cursor:pointer;overflow:hidden;}
.eco-card::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(34,211,238,0.14),rgba(59,130,246,0.10) 46%,rgba(167,139,250,0.13));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity 260ms ease;pointer-events:none;}
.eco-card.is-visible{opacity:1;transform:translateY(0);}
.eco-card.is-active{border-color:rgba(125,211,252,0.20);box-shadow:0 14px 36px rgba(0,0,0,0.38),0 0 22px rgba(56,189,248,0.16),inset 0 1px 0 rgba(255,255,255,0.06);}
.eco-card:hover,.eco-card:focus-visible{transform:translateY(-3px);border-color:rgba(125,211,252,0.24);box-shadow:0 16px 40px rgba(0,0,0,0.44),0 6px 18px rgba(56,189,248,0.14),inset 0 1px 0 rgba(255,255,255,0.06);outline:none;}
.eco-card:hover::before,.eco-card:focus-visible::before{opacity:1;}
.eco-card.is-hover{border-color:rgba(125,211,252,0.26);}
.eco-card.eco-left{align-self:flex-start;margin-left:2.5%;}
.eco-card.eco-right{align-self:flex-end;margin-right:2.5%;}
.eco-card-num{position:absolute;top:10px;right:12px;font-family:var(--mono);font-size:10px;letter-spacing:0.14em;font-weight:700;color:rgba(255,255,255,0.28);}
.eco-card-ph{position:absolute;inset:14px;top:28px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));border:1px dashed rgba(255,255,255,0.06);}
.eco-end{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 0 18px;z-index:2;}
.eco-end-line{width:1.5px;height:28px;background:linear-gradient(180deg,rgba(203,213,225,0.32),transparent);opacity:0.7;}
.eco-end-dot{position:relative;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f1f5f9 0%,#cbd5e1 55%,#94a3b8 100%);box-shadow:0 0 12px rgba(203,213,225,0.32);border:1px solid rgba(255,255,255,0.5);}
.eco-end-pulse{position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(203,213,225,0.16);background:radial-gradient(circle,rgba(203,213,225,0.10),transparent 68%);animation:ecoPulse 3.4s ease-in-out infinite;}
.eco-end-label{font-size:9px;letter-spacing:0.18em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,0.32);font-family:var(--mono);}
@media(max-width:860px){.eco-wrap{width:min(980px,96vw)} .eco-cards{gap:78px;padding:30px 0 24px} .eco-card{width:min(46%, 440px);min-height:138px;height:138px}}
@media(max-width:640px){
  .eco-top{margin-top:6px}
  .eco-wrap{width:92vw}
  .eco-cards{gap:64px;padding:28px 0 20px}
  .eco-card{width:88%;min-height:132px;height:132px;align-self:center !important;margin-left:0 !important;margin-right:0 !important;margin-left:34px !important;}
  .eco-card.eco-left,.eco-card.eco-right{margin-left:34px !important;margin-right:0 !important;}
}
@media(max-width:380px){.eco-cards{gap:52px} .eco-card{width:86%;min-height:122px;height:122px}}
@media(prefers-reduced-motion:reduce){.eco-top-pulse,.eco-end-pulse{animation:none !important} .eco-card{transition:none}}

/* ── Funnel Tree sesuai sketsa (apex → cabang melengkung halus → kotak + base) ── */
.funnel-tree{position:relative;width:min(1120px,96vw);margin:16px auto 0;padding:10px 0 18px;overflow:visible;}
.funnel-wrap{position:relative;width:100%;height:620px;overflow:visible;background:transparent;}
.funnel-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1;}
.funnel-branch{stroke-linecap:round;stroke-linejoin:round;stroke-width:2.15;filter:url(#funnelGlow);transition:filter 260ms ease,opacity 260ms ease;shape-rendering:geometricPrecision;}
.funnel-card{position:absolute;width:96px;height:96px;border-radius:10px;background:linear-gradient(180deg,rgba(22,26,34,0.92) 0%,rgba(14,18,28,0.96) 100%);border:1.6px solid #4a7cff;border-top:1.6px solid #5b8cff;box-shadow:0 0 0 1px rgba(74,124,255,0.18),0 10px 28px rgba(0,0,0,0.38),inset 0 1px 0 rgba(255,255,255,0.06);backdrop-filter:blur(10px) saturate(1.12);-webkit-backdrop-filter:blur(10px) saturate(1.12);transition:transform 260ms var(--ease-out),box-shadow 260ms ease,border-color 200ms ease;z-index:2;cursor:pointer;}
.funnel-card:hover,.funnel-card:focus-visible{transform:translateY(-3px) scale(1.02);box-shadow:0 0 0 1px rgba(74,124,255,0.32),0 16px 32px rgba(0,0,0,0.44),0 0 18px rgba(74,124,255,0.22);outline:none;}
.funnel-endpoint{pointer-events:none;}
/* posisi meniru sketsa: kiri atas, kanan tengah-atas, kiri tengah, kanan tengah-bawah, kiri bawah */
.funnel-c1{left:12.2%;top:13.5%;width:92px;height:92px;}
.funnel-c2{right:13.2%;top:22.5%;width:96px;height:104px;}
.funnel-c3{left:18.8%;top:36.2%;width:88px;height:88px;}
.funnel-c4{right:16.2%;top:46.8%;width:92px;height:100px;}
.funnel-c5{left:21.5%;top:62.5%;width:90px;height:90px;}
.funnel-base{position:absolute;left:50%;bottom:3.2%;transform:translateX(-50%);width:260px;height:56px;border-radius:10px;background:linear-gradient(180deg,rgba(22,26,34,0.96) 0%,rgba(14,18,28,0.98) 100%);border:1.6px solid #4a7cff;box-shadow:0 0 0 1px rgba(74,124,255,0.18),0 10px 28px rgba(0,0,0,0.38),inset 0 1px 0 rgba(255,255,255,0.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:2;cursor:pointer;transition:transform 260ms var(--ease-out),box-shadow 260ms ease;}
.funnel-base:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 0 0 1px rgba(74,124,255,0.32),0 16px 32px rgba(0,0,0,0.44);}
@media(max-width:860px){.funnel-wrap{height:560px} .funnel-card{width:84px;height:84px} .funnel-base{width:220px;height:50px}}
@media(max-width:640px){
  .funnel-wrap{height:720px}
  .funnel-card{width:78px;height:78px}
  .funnel-c1{left:8%;top:11%}
  .funnel-c2{right:8%;top:21%;width:84px;height:88px}
  .funnel-c3{left:10%;top:35%}
  .funnel-c4{right:10%;top:48%}
  .funnel-c5{left:12%;top:63%}
  .funnel-base{width:72%;height:52px;bottom:4%}
}
@media(max-width:380px){.funnel-card{width:68px;height:68px} .funnel-base{width:78%}}

/* ===== Quality Method — Velard glass (beda dari sumber, logika 100% sama) ===== */
.qm-card{
  width:100%; max-width:560px;
  background: linear-gradient(180deg, rgba(22,26,32,0.92) 0%, rgba(14,16,20,0.92) 100%);
  border:1px solid var(--glass-border); border-top:1px solid rgba(255,255,255,0.08);
  border-radius: var(--md-radius); padding:16px;
  display:flex; flex-direction:column; gap:12px;
  box-shadow: var(--shadow-card); backdrop-filter: blur(12px) saturate(1.08); -webkit-backdrop-filter: blur(12px) saturate(1.08);
  position:relative; overflow:hidden;
}
.qm-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.07), transparent 42%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition: opacity 200ms ease; pointer-events:none;
}
.qm-card:hover::before{ opacity:1; }
.qm-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; position:relative; z-index:1; }
.qm-title-wrap{ display:flex; align-items:center; gap:12px; }
.qm-icon-badge{
  position:relative; width:42px; height:42px; border-radius:12px;
  background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10);
  display:grid; place-items:center; color:var(--md-sys-color-primary); flex-shrink:0;
}
.qm-icon-badge .material-symbols-rounded{ font-size:20px; font-variation-settings:'FILL' 1; }
.qm-badge-ver{
  position:absolute; right:-6px; bottom:-6px;
  background:var(--md-sys-color-primary); color:#0a0e02; font-size:8px; font-weight:800; letter-spacing:0.04em;
  padding:2px 5px; border-radius:999px; line-height:1; border:1px solid var(--surface);
}
.qm-title{ font-size:15px; font-weight:800; letter-spacing:-0.02em; color:var(--text); line-height:1; }
.qm-subtitle{ font-size:11px; font-weight:600; color:var(--text-3); margin-top:2px; }
.qm-close{
  width:32px; height:32px; border-radius:50%;
  background: var(--surface-3); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--text-3); flex-shrink:0;
  transition: background 160ms ease, color 160ms ease;
}
.qm-close:hover{ background: rgba(255,255,255,0.08); color:var(--text); }
.qm-close .material-symbols-rounded{ font-size:18px; }

/* Drop zone — Velard dashed glass */
.qm-drop{
  border:1.5px dashed rgba(255,255,255,0.14); border-radius: var(--md-radius);
  background: rgba(255,255,255,0.02); padding:22px 14px; text-align:center; cursor:pointer;
  transition: all 180ms var(--ease-out); user-select:none; position:relative; z-index:1;
}
.qm-drop:hover, .qm-drop.dragging{
  border-color: hsla(0,0%,92%,0.42); background: hsla(0,0%,92%,0.06);
  box-shadow: 0 8px 22px hsla(0,0%,92%,0.06);
}
.qm-drop:focus-visible{ outline:2px solid var(--md-sys-color-primary); outline-offset:2px; }
.qm-drop.disabled{ pointer-events:none; opacity:0.5; cursor:not-allowed; }
.qm-drop-icon{ font-size:32px; color:var(--md-sys-color-primary); margin-bottom:6px; display:block; }
.qm-drop-title{ font-size:13px; font-weight:700; color:var(--text); letter-spacing:-0.01em; }
.qm-drop-sub{ font-size:11.5px; color:var(--text-3); margin-top:4px; }

.qm-file-info{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background: rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:12px; position:relative; z-index:1;
}
.qm-file-icon{ color:var(--md-sys-color-primary); font-size:22px; }
.qm-file-meta-wrap{ min-width:0; flex:1; }
.qm-file-name{ font-size:12.5px; font-weight:700; color:var(--text); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qm-file-meta{ font-size:11px; color:var(--text-3); }
.qm-file-remove{
  width:28px; height:28px; border-radius:50%; background: var(--surface-3); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--text-3); flex-shrink:0; cursor:pointer;
}
.qm-file-remove:hover{ background: rgba(255,255,255,0.08); color:var(--text); }
.qm-file-remove .material-symbols-rounded{ font-size:16px; }

.qm-group{ display:flex; flex-direction:column; gap:8px; position:relative; z-index:1; }
.qm-label{ font-size:10.5px; font-weight:800; letter-spacing:0.08em; color:var(--text-3); text-transform:uppercase; }
.qm-segmented{
  display:grid; grid-template-columns: repeat(3,1fr); gap:6px;
  background: rgba(255,255,255,0.04); border:1px solid var(--line);
  border-radius:999px; padding:4px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.qm-seg-btn{
  padding:8px 6px; border-radius:999px; font-size:12px; font-weight:800;
  color: var(--text-3); transition: all 160ms var(--ease-out); min-height:36px; letter-spacing:0.02em; cursor:pointer; position:relative; z-index:2;
}
.qm-seg-btn.active{ background:var(--md-sys-color-primary); color:#0a0e02; box-shadow: 0 2px 10px hsla(0,0%,92%,0.18); }
.qm-seg-btn:not(.active):hover{ color:var(--text); background: rgba(255,255,255,0.06); }

.qm-checkbox{
  display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
  font-size:11.5px; font-weight:700; letter-spacing:0.02em; color:var(--text-3); position:relative; z-index:1;
}
.qm-checkbox input{ position:absolute; opacity:0; pointer-events:none; }
.qm-check{
  width:16px; height:16px; border-radius:4px; border:1.5px solid var(--line); background: rgba(255,255,255,0.04);
  display:grid; place-items:center; flex-shrink:0; transition: all 160ms ease;
}
.qm-checkbox input:checked + .qm-check{ background:var(--md-sys-color-primary); border-color:var(--md-sys-color-primary); }
.qm-checkbox input:checked + .qm-check::after{ content:'✓'; font-size:11px; font-weight:900; color:#0a0e02; line-height:1; }

.qm-info-box{
  background: rgba(255,255,255,0.02); border:1px solid var(--line); border-radius:12px;
  padding:12px; display:flex; flex-direction:column; gap:8px; position:relative; z-index:1;
}
.qm-info-row{ display:flex; align-items:center; gap:8px; font-size:12.5px; }
.qm-info-row .material-symbols-rounded{ font-size:16px; color:var(--md-sys-color-primary); }
.qm-info-k{ color: var(--text-3); font-weight:600; }
.qm-info-v{ color:var(--text); font-weight:800; margin-left:4px; }
.qm-info-desc{
  margin-top:4px; padding:10px 12px; border-top:1px solid var(--line);
  font-size:11.5px; line-height:1.6; color:var(--text-3); background: rgba(255,255,255,0.02); border-radius:8px; display:flex; gap:8px;
}
.qm-info-desc::before{ content:'ⓘ'; color:var(--md-sys-color-primary); font-weight:800; flex-shrink:0; margin-top:1px; }
.qm-info-desc:empty{ display:none; }

/* keep legacy selectors for JS compat */
.upload-card{ display:none !important; }
.upload-area{ border-color: rgba(224,242,140,0.22); }
.file-info{ display:none !important; }
.toggle-row{ display:none !important; }
.segmented{ display:none !important; }
.method-desc{ display:none !important; }

.qm-process-btn{
  width:100%; min-height:44px; border-radius: var(--radius-pill);
  background: var(--text); color: var(--ink);
  font-weight:800; font-size:13px; letter-spacing:0.04em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.36); transition: transform 140ms ease, filter 160ms ease, opacity 160ms ease;
  position:relative; z-index:1;
}
.qm-process-btn:disabled{ opacity:0.42; cursor:not-allowed; }
.qm-process-btn:not(:disabled):hover{ transform: translateY(-1px); filter:brightness(0.97); }
.qm-process-btn:not(:disabled):active{ transform: scale(0.99); }

.qm-progress-wrap{ display:flex; align-items:center; gap:10px; position:relative; z-index:1; }
.qm-progress-track{ flex:1; height:6px; background: var(--surface-3); border:1px solid rgba(255,255,255,0.04); border-radius:999px; overflow:hidden; }
.qm-progress-bar{ height:100%; width:0%; background: linear-gradient(90deg, var(--md-sys-color-primary), #dfe4e9); border-radius:999px; transition: width 200ms ease; }
.qm-progress-label{ font-size:11.5px; font-weight:800; color:var(--md-sys-color-primary); min-width:34px; text-align:right; font-variant-numeric: tabular-nums; }

.qm-log-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; position:relative; z-index:1; }
.qm-log-title{ font-size:10.5px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-3); }
.qm-log-actions{ display:flex; align-items:center; gap:8px; }
.qm-icon-btn, .qm-copy-btn{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  border:1px solid var(--line); background: var(--surface-3); color:var(--text);
  font-size:11.5px; font-weight:700; min-height:30px; transition: background 150ms ease, border-color 150ms ease;
}
.qm-icon-btn{ padding:6px 8px; }
.qm-icon-btn:hover, .qm-copy-btn:hover{ background: hsla(0,0%,92%,0.08); border-color: hsla(0,0%,92%,0.14); }
.qm-log-area{
  height:130px; overflow-y:auto; padding:10px 12px;
  background: rgba(255,255,255,0.02); border:1px solid var(--line); border-radius:12px;
  font-family: var(--mono); font-size:11.5px; line-height:1.6; position:relative; z-index:1;
}
.tiktok-rec { color: #fff; font-weight: 750; }

/* Process button premium pill */
.process-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px;
  border-radius: var(--radius-pill); background: var(--text); color: var(--ink);
  font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(0,0,0,0.36); transition: transform 140ms ease, box-shadow 200ms ease, filter 160ms ease, opacity 160ms ease;
  position: relative; overflow: hidden;
}
.process-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: translateX(-100%); transition: transform 620ms ease;
}
.process-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0,0,0,0.48); filter: brightness(0.97); }
.process-btn:not(:disabled):hover::before { transform: translateX(100%); }
.process-btn:not(:disabled):active { transform: translateY(0) scale(0.99); }
.process-btn:disabled { opacity: 0.42; cursor: not-allowed; }

/* Progress + Log */
.progress-wrap { display: flex; align-items: center; gap: 12px; }
.progress-track { flex: 1; height: 7px; background: var(--surface-3); border-radius: var(--radius-pill); overflow: hidden; border: 1px solid rgba(255,255,255,0.04); }
.progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--md-sys-color-primary), #dfe4e9); border-radius: var(--radius-pill); transition: width 200ms ease; }
.progress-label { font-size: 12px; font-weight: 750; color: var(--md-sys-color-primary); min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
.log-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.log-title { font-size: 11.5px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }
.log-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn, .copy-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface-3); color: var(--text);
  font-size: 12px; font-weight: 600; transition: background 150ms ease, border-color 150ms ease; min-height: 30px;
}
.icon-btn { padding: 6px 8px; }
.icon-btn:hover, .copy-btn:hover { background: hsla(0, 0%, 92%, 0.1); border-color: hsla(0, 0%, 92%, 0.18); }
.log-area {
  height: 130px; overflow-y: auto; padding: 10px 12px;
  background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 12px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.6; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.log-area::-webkit-scrollbar { width: 6px; display: block; }
.log-area::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: var(--radius-pill); }
.log-line { color: var(--text); white-space: pre-wrap; word-break: break-word; }
.log-time { color: var(--text-3); margin-right: 8px; user-select: none; }

/* ---------- 7. Tools Grid Bento 21st.dev ---------- */
.tools-grid-new { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.tool-card-new {
  display: flex; align-items: center; gap: 14px; padding: 16px 16px;
  background: linear-gradient(180deg, rgba(22,26,32,0.86) 0%, rgba(14,16,20,0.86) 100%);
  border: 1px solid rgba(255,255,255,0.06); border-top: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; cursor: pointer; transition: all 220ms var(--ease-out);
  user-select: none; position: relative; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.03); overflow: hidden;
  min-height: 84px;
}
.tool-card-new::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), transparent 45%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 220ms ease; pointer-events: none;
}
.tool-card-new:hover { background: linear-gradient(180deg, rgba(28,32,40,0.92) 0%, rgba(18,20,26,0.92) 100%); border-color: hsla(0, 0%, 92%, 0.22); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.32), 0 2px 10px hsla(0, 0%, 92%, 0.08), inset 0 1px 0 rgba(255,255,255,0.05); }
.tool-card-new:hover::before { opacity: 1; }
.tool-card-new:active { transform: scale(0.985); }
.tool-icon-wrap {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  display: grid; place-items: center; flex-shrink: 0; color: var(--md-sys-color-primary); transition: all 220ms ease;
}
.tool-card-new:hover .tool-icon-wrap { background: hsla(0, 0%, 92%, 0.12); border-color: hsla(0, 0%, 92%, 0.2); transform: scale(1.04); }
.tool-icon-wrap .material-symbols-rounded { font-size: 22px; }
.tool-info-new { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tool-title-new { font-size: 13.5px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-desc-new { font-size: 12px; color: var(--text-3); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tool-arrow {
  width: 32px; height: 32px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--line);
  display: grid; place-items: center; flex-shrink: 0; color: var(--text-3); transition: transform 200ms ease, color 200ms ease, background 200ms ease;
}
.tool-card-new:hover .tool-arrow { transform: translateX(3px); color: var(--md-sys-color-primary); background: var(--surface); }
.tool-card-new.is-processing .tool-arrow {
  background: var(--md-sys-color-primary) !important; color: #0a0e02 !important; border-color: transparent;
  min-width: 46px; width: auto; padding: 0 8px; height: 28px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 800; transform: none !important;
}
.tool-card-new.is-processing .tool-arrow .material-symbols-rounded { display: none; }
.tool-card-progress-text { font-variant-numeric: tabular-nums; }



/* Tutorial scroll fix PC - biar bisa scroll dimanapun, tidak ketahan */
#panel-tutorial{ scroll-behavior:auto; overscroll-behavior:auto !important; overflow:visible !important; -webkit-overflow-scrolling:auto; pointer-events:auto !important; }
#panel-tutorial *{ scroll-behavior:auto !important; overscroll-behavior:auto !important; pointer-events:auto !important; }
body[data-view="tutorial"]{ overflow-y:auto !important; }
body[data-view="tutorial"] .app-container,
body[data-view="tutorial"] .app-main,
body[data-view="tutorial"] .slide-container.cube-viewport,
body[data-view="tutorial"] #panel-tutorial{ overflow:visible !important; }

/* ---------- 8. Tutorial / Donate / About ---------- */
.tutorial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.tutorial-grid .tutorial-card { height: 100%; }
@media (max-width: 860px) { .tutorial-grid { grid-template-columns: 1fr; } }
.tutorial-card { display: flex; flex-direction: column; gap: 16px; }

.tutorial-step { display: flex; gap: 12px; align-items: flex-start; }
.step-num {
  flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(135deg, #f2f4f6 0%, #d7dce2 100%); color: #0f1117; font-size: 13px; font-weight: 850; margin-top: 2px;
  box-shadow: 0 2px 8px rgba(255,255,255,0.12);
}
.tutorial-step h3 { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.tutorial-step p { font-size: 12.5px; color: var(--text-3); line-height: 1.62; }
.tutorial-step b { color: var(--md-sys-color-primary); }
.tut-section-title { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-sys-color-primary); padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }

.help-card { display: flex; align-items: flex-start; gap: 12px; }
.help-card-wide{
  grid-column: 1 / -1; margin-top: 2px;
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border: 1px dashed var(--line);
  min-height:72px; /* lock tinggi biar ID/EN sama */
  border-radius: var(--radius-l);
  background: rgba(255,255,255,0.02);
}
.help-card-wide > div:last-child{
  flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
}
.help-card-wide p{
  margin:0; line-height:1.5; font-size:13px;
  min-height:20px; /* cegah loncat tinggi saat ganti bahasa */
  display:block; width:100%;
}
@media (max-width: 860px) {
  .help-card-wide{ flex-direction:column; align-items:flex-start; gap:12px; padding:14px 16px; min-height:0; }
  .help-card-wide > div:last-child{ width:100%; }
  .help-card-wide .btn-main{ width:100%; justify-content:center; }
}
@media (max-width:640px){
  .help-card-wide{ padding:14px 16px; gap:12px; border-radius:14px; }
  .help-icon{ width:40px; height:40px; }
  .help-card p{ font-size:12.5px; }
  .help-card-wide .btn-main{ min-height:40px; font-size:12.5px; }
}
.help-icon { flex-shrink: 0; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-3); border: 1px solid var(--line); color: var(--md-sys-color-primary); }
.help-card p { font-size: 13px; color: var(--text-3); margin-bottom: 10px; line-height: 1.5; }
.btn-main {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 14px;
  border-radius: var(--radius-pill); background: var(--md-sys-color-primary); color: #0a0e02; font-size: 12.5px; font-weight: 750;
  transition: opacity 150ms ease, transform 150ms ease, box-shadow 200ms ease; position: relative; overflow: hidden;
  box-shadow: 0 4px 14px hsla(0, 0%, 92%, 0.18);
}
.btn-main::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent); transform: translateX(-100%); transition: transform 560ms ease; }
.btn-main:hover::before { transform: translateX(100%); }
.btn-main:hover { transform: translateY(-1px); box-shadow: 0 8px 20px hsla(0, 0%, 92%, 0.22); }
.btn-main:active { transform: translateY(0) scale(0.98); }
.btn-ghost {
  border: 1px solid var(--line); background: rgba(255,255,255,0.03); color: var(--text-3);
  border-radius: var(--radius-pill); padding: 10px 18px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: all 200ms ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover { color: var(--text); border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); }
.help-btn { background: linear-gradient(135deg, #f2f4f6 0%, #d7dce2 100%); color: #0f1117; border: none; }

.donate-card { text-align: center; display: flex; flex-direction: column; gap: 18px; }
.donate-hero { padding: 6px 0; }
.donate-icon { width: 50px; height: 50px; display: grid; place-items: center; margin: 0 auto 10px; border-radius: 50%; background: rgba(255,255,255,0.06); color: var(--md-sys-color-primary); border: 1px solid rgba(255,255,255,0.1); }
.donate-hero h2 { font-size: 17px; font-weight: 760; margin-bottom: 6px; color: var(--text); letter-spacing: -0.015em; }
.donate-hero p { color: var(--text-3); font-size: 12.5px; line-height: 1.6; max-width: 460px; margin: 0 auto; }
.qris-box { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,0.02); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.qris-image { position: relative; width: 210px; height: 210px; border-radius: 12px; background: #fff; padding: 10px; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--line); }
.qris-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.qris-fallback { position: absolute; inset: 0; display: none; place-items: center; text-align: center; color: #64748b; font-size: 12px; line-height: 1.6; padding: 16px; background: #f8fafc; }
.qris-image.missing img { display: none; }
.qris-image.missing .qris-fallback { display: grid; }
.qris-tip { color: var(--text-3); font-size: 11.5px; line-height: 1.5; }
.official-note { color: var(--text-3); font-size: 11px; line-height: 1.5; text-align: center; margin: 0; }

.about-warning { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid rgba(245,158,11,0.32); border-radius: 12px; background: rgba(245,158,11,0.07); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.about-warning-icon { font-size: 18px; line-height: 1.4; flex-shrink: 0; }
.about-warning-body { display: flex; flex-direction: column; gap: 6px; }
.about-warning-body h2 { font-size: 13.5px; font-weight: 750; margin: 0; color: #f59e0b; }
.about-warning-body p { font-size: 12.5px; line-height: 1.6; margin: 0; color: var(--text-3); }
.about-card { display: flex; flex-direction: column; gap: 18px; }
.about-intro { display: flex; flex-direction: column; gap: 8px; }
.about-intro p { font-size: 13px; line-height: 1.7; color: var(--text-3); }
.about-intro b { color: var(--text); font-weight: 700; }
.about-features { display: flex; flex-direction: column; gap: 10px; }
.feature-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 12px; transition: border-color 200ms ease, transform 200ms var(--ease-out); }
.feature-item:hover { border-color: rgba(255,255,255,0.1); transform: translateY(-1px); }
.feature-item svg { flex-shrink: 0; margin-top: 2px; color: var(--md-sys-color-primary); }
.feature-item h4 { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.feature-item p { font-size: 12.5px; line-height: 1.6; color: var(--text-3); }
.about-contact { border-top: 1px solid var(--line); padding-top: 16px; padding-bottom: 8px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
#panel-tentang{ padding-bottom: 28px; }
.about-contact h3 { font-size: 13px; font-weight: 700; color: var(--text); }
.about-contact p { font-size: 12.5px; line-height: 1.6; color: var(--text-3); }
.contact-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.contact-link { flex: none; width: auto; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-weight: 600; min-height: 34px; }

.handle { color: var(--md-sys-color-primary); font-weight: 600; text-decoration: none; transition: opacity 200ms; }
.handle:hover { opacity: 0.82; text-decoration: underline; }

/* ---------- 9. Floating Nav 21st.dev pill ---------- */
.floating-nav-bar {
  display: inline-flex; position: fixed; bottom: max(32px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  background: rgba(14,16,20,0.76); border: 1px solid rgba(255,255,255,0.08); border-top: 1px solid rgba(255,255,255,0.11);
  border-radius: var(--radius-pill); z-index: 44; align-items: center; padding: 6px; gap: 4px;
  max-width: min(94vw, 560px); width: max-content; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;
  backdrop-filter: blur(20px) saturate(1.25); -webkit-backdrop-filter: blur(20px) saturate(1.25);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 340ms var(--ease-spring), opacity 280ms ease; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.floating-nav-bar::-webkit-scrollbar { display: none; }
.floating-nav-indicator {
  position: absolute; top: 6px; bottom: 6px; left: 6px; width: 44px;
  background: var(--md-sys-color-primary); border-radius: var(--radius-pill); z-index: 1; pointer-events: none;
  transition: transform 420ms var(--ease-spring); will-change: transform;
  box-shadow: 0 2px 10px hsla(0, 0%, 92%, 0.35), inset 0 1px 0 rgba(255,255,255,0.4);
}
.floating-nav-item {
  position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 0.82rem; font-weight: 600; height: 38px; padding: 0 11px; border-radius: var(--radius-pill);
  white-space: nowrap; flex-shrink: 0; background: transparent; gap: 5px;
  transition: color 180ms ease, padding 320ms var(--ease-spring); user-select: none; -webkit-tap-highlight-color: transparent; min-width: 44px;
}
.floating-nav-item .nav-label { max-width: 0; opacity: 0; margin-left: 0; overflow: hidden; transition: opacity 180ms ease, margin-left 180ms ease; pointer-events: none; }
.floating-nav-item .material-symbols-rounded { font-size: 1.2rem; line-height: 1; flex-shrink: 0; }
.floating-nav-item.active { color: #000; font-weight: 800; padding: 0 15px 0 12px; }
.floating-nav-item.active .nav-label { max-width: 110px; opacity: 1; margin-left: 6px; pointer-events: auto; }
.floating-nav-item.active .material-symbols-rounded { font-variation-settings:'FILL' 1; }
.floating-nav-item:hover { color: #fff; }
.floating-nav-item:active { transform: scale(0.96); }

/* ---------- 10. Slide Edge-to-Edge PREMIUM smooth (spring + stagger) ---------- */
.slide-container.cube-viewport {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
  overflow-anchor: none;
  transition: min-height 0.64s var(--ease-spring-soft);
  will-change: min-height;
}
.slide-track.cube-3d-box {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  transition: transform 680ms var(--ease-spring-soft);
  will-change: transform;
  transform: translateX(0);
}
.slide-track.cube-3d-box.is-sliding {
  /* is-sliding hook no blur per request */
}
.slide-panel.cube-face {
  flex: 0 0 100vw;
  width: 100vw;
  max-width: 100vw;
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
  /* full layar, konten tengah max 560px */
  will-change: transform, opacity;
}
.slide-panel.cube-face > * {
  width: 100%;
  max-width: 560px;
  will-change: transform, opacity;
}

/* stagger premium: konten masuk halus setelah track settle tanpa blur */
.slide-panel.cube-face > * {
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 420ms ease, transform 640ms var(--ease-spring-soft);
}
.slide-panel.cube-face.active-panel > * {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.slide-panel.cube-face.active-panel > *:nth-child(1){ transition-delay: 68ms; }
.slide-panel.cube-face.active-panel > *:nth-child(2){ transition-delay: 128ms; }
.slide-panel.cube-face.active-panel > *:nth-child(3){ transition-delay: 188ms; }
.slide-panel.cube-face.active-panel > *:nth-child(4){ transition-delay: 246ms; }
.slide-panel.cube-face.active-panel > *:nth-child(5){ transition-delay: 304ms; }
/* Tools isi 5 kartu bounce smooth (transition, anti-blur, cepet pencet tetap smooth) */
#panel-tools .tool-card-new{
  opacity:0;
  transform: translateY(16px) scale(0.96);
  transition: opacity 380ms ease, transform 520ms var(--ease-spring-soft);
  will-change: transform, opacity;
}
#panel-tools.active-panel .tool-card-new{
  opacity:1;
  transform: translateY(0) scale(1);
}
#panel-tools.active-panel .tool-card-new:nth-child(1){ transition-delay: 70ms; }
#panel-tools.active-panel .tool-card-new:nth-child(2){ transition-delay: 130ms; }
#panel-tools.active-panel .tool-card-new:nth-child(3){ transition-delay: 190ms; }
#panel-tools.active-panel .tool-card-new:nth-child(4){ transition-delay: 250ms; }
#panel-tools.active-panel .tool-card-new:nth-child(5){ transition-delay: 310ms; }
/* matikan stagger panel > * khusus Tools biar tidak double (grid sudah handle) */
#panel-tools > *{ opacity:1 !important; transform:none !important; transition:none !important; }
#panel-tools .tools-grid-new{ opacity:1 !important; transform:none !important; }
@media(prefers-reduced-motion:reduce){
  #panel-tools .tool-card-new{ transition:none !important; opacity:1 !important; transform:none !important; }
}
.slide-panel.cube-face.active-panel {
  pointer-events: auto;
}
@media(prefers-reduced-motion:reduce){
  .slide-track.cube-3d-box, .slide-panel.cube-face > *{ transition:none !important; }
}
/* fallback for old slide logic */
.slide-container:not(.cube-viewport) { display: flex; flex-wrap: nowrap; width: 100%; overflow: hidden; position: relative; }
.slide-track:not(.cube-3d-box) { display: flex; flex-wrap: nowrap; transition: transform 520ms cubic-bezier(0.32,0.72,0,1); will-change: transform; width: 100%; }
@keyframes panelSlideIn { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }
.dot-indicator { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.18); cursor: pointer; transition: background 200ms ease, transform 200ms ease; }
.dot-indicator.active { background: var(--md-sys-color-primary); transform: scale(1.2); box-shadow: 0 0 10px hsla(0, 0%, 92%, 0.4); }

/* ---------- 11. Modals (glass) ---------- */
.modal-backdrop, #help-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.64); backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px) saturate(1.1);
  display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 100;
}
.modal-backdrop[hidden], #help-modal[hidden] { display: none; }
/* Donate popup harus paling atas setelah proses Tools selesai */
#donateModal{ z-index: 200 !important; }
#donateModal .modal{ z-index: 201; }
.modal {
  width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-top: 1px solid var(--line-highlight);
  border-radius: 18px; padding: 22px; text-align: center;
  box-shadow: 0 24px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.modal-icon { font-size: 36px; color: var(--md-sys-color-primary); filter: drop-shadow(0 0 10px hsla(0, 0%, 92%, 0.24)); }
.modal-title { font-size: 18px; font-weight: 800; margin-top: 8px; letter-spacing: -0.015em; }
.modal-file { font-size: 12.5px; color: var(--text-3); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.donate-text { font-size: 12.5px; color: var(--text-3); margin-top: 8px; line-height: 1.55; }
.analysis-list { list-style: none; margin-top: 18px; }
.analysis-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.analysis-row:last-child { border-bottom: none; }
.analysis-label { font-size: 13px; font-weight: 600; color: var(--text-3); text-align: left; }
.analysis-value { font-size: 13px; font-weight: 700; flex: 1; text-align: right; }
.analysis-icon { font-size: 18px; min-width: 24px; text-align: center; }
.analysis-note { display: flex; align-items: flex-start; gap: 6px; font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin-top: 14px; text-align: left; }
.analysis-note .material-symbols-rounded { font-size: 16px; flex: none; color: var(--md-sys-color-primary); }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.btn-cancel, .btn-proceed { flex: 1; min-height: 42px; border-radius: 12px; font-weight: 700; font-size: 13px; transition: opacity 150ms ease, transform 120ms ease; }
.btn-cancel { border: 1px solid var(--line); color: var(--text); background: var(--surface-3); }
.btn-proceed { background: var(--md-sys-color-primary); color: #0a0e02; box-shadow: 0 4px 14px hsla(0, 0%, 92%, 0.22); }
.btn-cancel:hover, .btn-proceed:hover { opacity: 0.88; }
.btn-cancel:active, .btn-proceed:active { transform: scale(0.98); }

/* Help modal */
.modal-card { width: 100%; max-width: 480px; background: var(--surface); border: 1px solid var(--line); border-top: 1px solid var(--line-highlight); border-radius: 18px; padding: 22px; box-shadow: var(--shadow-lift); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.modal-header h2 { font-size: 17px; font-weight: 800; letter-spacing: -0.015em; }
.modal-close { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-3); color: var(--text); transition: opacity 150ms ease; }
.modal-close:hover { opacity: 0.82; }
.modal-subtitle { font-size: 12.5px; color: var(--text-3); line-height: 1.55; margin-bottom: 14px; }
.modal-subtitle b { color: var(--md-sys-color-primary); }
.help-label { display: block; font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
#help-msg { width: 100%; resize: vertical; min-height: 120px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-3); color: var(--text); font-family: var(--md-font); font-size: 13px; line-height: 1.5; transition: border-color 160ms ease, box-shadow 160ms ease; }
#help-msg:focus { outline: none; border-color: hsla(0, 0%, 92%, 0.42); box-shadow: 0 0 0 3px hsla(0, 0%, 92%, 0.14); }
.help-note { font-size: 11.5px; color: var(--text-3); margin-top: 8px; line-height: 1.5; }
.help-status { font-size: 12.5px; font-weight: 600; min-height: 18px; margin-top: 10px; color: var(--md-sys-color-primary); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; margin: 0; overflow: hidden; }

/* Tool modal compact browser-friendly (desain premium kecil) */
.tool-modal-backdrop { position: fixed; inset: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.58); backdrop-filter: blur(8px); z-index: 150; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 260ms var(--ease-out), visibility 260ms ease; }
.tool-modal-backdrop.active { opacity: 1; visibility: visible; pointer-events: auto; }
.tool-modal-backdrop[hidden] { display: none !important; }
.tool-modal-card {
  position: fixed; background: var(--surface); border: 1px solid var(--line); border-top: 1px solid var(--line-highlight); border-radius: 16px;
  display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; z-index: 151; opacity: 0; visibility: hidden; pointer-events: none;
  contain: content; will-change: left, top, width, height, border-radius; box-shadow: 0 16px 36px rgba(0,0,0,0.42), 0 4px 12px rgba(0,0,0,0.28);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  max-height: none; height: auto; overflow: visible;
}
.tool-modal-card[hidden] { display: none !important; }
.tool-modal-card.expanded { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
.tool-modal-card.is-morphing * { transition: none !important; }
.tool-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid transparent; transition: border-color 260ms ease; }
.tool-modal-card.expanded .tool-modal-header { border-bottom-color: var(--line); }
.tool-modal-hero { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.tool-modal-hero .tool-icon-wrap { width: 36px; height: 36px; border-radius: 10px; }
.tool-modal-hero .tool-info-new { gap: 2px; }
.tool-modal-hero .tool-title-new { font-size: 13px; }
.tool-modal-hero .tool-desc-new { font-size: 11px; -webkit-line-clamp: 1; }
.tool-modal-close { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--line); display: grid; place-items: center; color: var(--text-3); flex-shrink: 0; transition: background 160ms ease, transform 160ms ease; }
.tool-modal-close:hover { background: var(--surface-4); transform: scale(1.05); color: var(--text); }
.tool-modal-close .material-symbols-rounded { font-size: 16px; }
.tool-modal-close.is-processing { background: var(--md-sys-color-primary) !important; color: #0a0e02 !important; border-color: transparent; min-width: 42px; width: auto; padding: 0 8px; height: 26px; border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 800; }
.tool-modal-body { padding: 16px 18px 18px; overflow: visible; display: flex; flex-direction: column; gap: 14px; max-height: none; scrollbar-width: none; -ms-overflow-style: none; }
.tool-modal-body::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.tool-drop-zone { border: 1.5px dashed var(--line); border-radius: 10px; padding: 14px 12px; background: rgba(255,255,255,0.02); display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; text-align: center; transition: border-color 160ms ease, background 160ms ease; }
.tool-drop-zone:hover, .tool-drop-zone.dragover { border-color: hsla(0, 0%, 92%, 0.42); background: hsla(0, 0%, 92%, 0.06); }
.tool-drop-zone .material-symbols-rounded { font-size: 24px; color: var(--md-sys-color-primary); }
.tool-drop-title { font-size: 12.5px; font-weight: 700; color: var(--text); }
.tool-drop-sub { font-size: 10.5px; color: var(--text-3); }
.tool-file-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--md-sys-color-primary); color: #0a0e02; padding: 6px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; max-width: 100%; }
.tool-file-badge .material-symbols-rounded{font-size:16px}
.tool-progress-section { display: flex; flex-direction: column; gap: 6px; }
.tool-progress-track { height: 6px; width: 100%; background: var(--surface-3); border-radius: var(--radius-pill); overflow: hidden; }
.tool-progress-fill { height: 100%; width: 0%; background: var(--md-sys-color-primary); border-radius: var(--radius-pill); transition: width 150ms ease; }
.tool-progress-labels { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 700; color: var(--text); }
.tool-modal-footer { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.tool-process-btn { width: 100%; height: 44px; background: var(--md-sys-color-primary); color: #0a0e02; border-radius: var(--radius-pill); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 18px hsla(0, 0%, 92%, 0.2); transition: transform 140ms ease, opacity 140ms ease; }
.tool-process-btn:disabled { opacity: 0.42; cursor: not-allowed; }
.tool-process-btn:not(:disabled):active { transform: scale(0.99); }
.tool-download-btn { width: 100%; height: 44px; background: var(--text); color: var(--ink); border-radius: var(--radius-pill); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; }

/* Tabel isi 1 tabel per menu Tools biar penuh premium */
.tool-fill-table { background: var(--surface-3); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.tool-table-row { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 11px; line-height: 1.4; }
.tool-table-row:last-child { border-bottom: none; }
.tool-table-row span { color: var(--text-3); font-weight: 600; white-space: nowrap; }
.tool-table-row strong { color: var(--text); font-weight: 700; text-align: right; font-size: 11px; }
/* Misc tool internals */
.tool-selected { display:block; font-size: 11.5px; color: var(--text); background: var(--surface-3); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; word-break: break-all; line-height: 1.4; min-height: 16px; }
.tool-selected:empty{ display:none; }
.tool-detected { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--text); background: var(--surface-3); border: 1px solid var(--line); padding: 7px 12px; border-radius: var(--radius-pill); width: fit-content; max-width:100%; word-break: break-all; }
.tool-detected[hidden] { display: none !important; }
.tool-label { font-size: 11.5px; font-weight: 700; color: var(--text-3); margin-top: 4px; padding-left: 2px; }
.tool-select { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-3); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 2px; }
.tool-input { flex: 1; min-width: 70px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-3); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600; text-align: center; }
.tool-time-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; }
.tool-time-grid[hidden] { display: none !important; }
.tool-time-field { display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.tool-time-head { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.tool-time-head .material-symbols-rounded { font-size: 16px; color: var(--md-sys-color-primary); flex: none; }
.tool-time-input { width: 100%; min-width: 0; padding: 12px 14px; font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-align: center; background: var(--surface-3); border: 1px solid var(--line); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease; }
.tool-time-input::placeholder { color: var(--text-3); opacity: 0.6; font-weight: 600; }
.tool-time-input:focus { border-color: var(--md-sys-color-primary); background: var(--surface); box-shadow: 0 0 0 3px hsla(0, 0%, 92%, 0.12); outline: none; }
.tool-time-sep { padding-bottom: 14px; color: var(--text-3); opacity: 0.5; font-weight: 700; font-size: 14px; line-height: 1; user-select: none; }
.tool-merge-list { display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow-y: auto; overflow-x: hidden; padding: 6px; width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 10px; scrollbar-width: none !important; -ms-overflow-style: none !important; }
.tool-merge-list::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.tool-merge-list[hidden] { display: none !important; }
.tool-merge-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--surface-3); border: 1px solid var(--line); border-radius: 10px; font-size: 11.5px; font-weight: 600; color: var(--text); flex-shrink: 0; }
.tool-merge-item .num { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--md-sys-color-primary); color: #0a0e02; font-size: 11px; font-weight: 800; }
.tool-merge-item .name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-merge-item .size { flex: none; color: var(--text-3); font-weight: 600; font-size: 11px; }
.tool-merge-item .remove { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--text-3); cursor: pointer; }
.tool-merge-item .remove:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.merge-limit-list { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; padding: 4px 2px; margin-top: 12px; text-align: left; }
.tool-status { font-size: 11.5px; min-height: 16px; color: var(--text-3); }
.tool-status.ok { color: var(--success); }
.tool-status.err { color: var(--danger); }
.tool-tip { font-size: 11.5px; color: var(--text-3); line-height: 1.55; padding: 8px 10px; background: rgba(255,255,255,0.02); border: 1px dashed var(--line); border-radius: 8px; }

/* Toast */
.toast { position: fixed; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%) translateY(12px); background: var(--surface-3); color: var(--text); border: 1px solid var(--line); padding: 10px 16px; border-radius: 12px; font-size: 12.5px; font-weight: 700; z-index: 300; opacity: 0; pointer-events: none; transition: opacity 220ms ease, transform 220ms ease; box-shadow: 0 12px 28px rgba(0,0,0,0.42); max-width: calc(100vw - 32px); text-align: center; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 12. Responsive & Compacts ---------- */
@media (max-width: 768px) {
  .app-main { padding: 44px 12px 112px; }
  .app-container { padding: 10px 10px; gap: 12px; }
  .tools-grid-new { grid-template-columns: 1fr; gap: 10px; }
  .tool-card-new { padding: 12px 14px; gap: 10px; min-height: 76px; }
  .tool-icon-wrap { width: 38px; height: 38px; }
  .tool-icon-wrap .material-symbols-rounded { font-size: 20px; }
  .kinetic-hero { padding: 10px 0 4px; gap: 10px; margin-bottom: 2px; }
  .kinetic-greeting-line { font-size: clamp(1.3rem, 6vw, 1.7rem); }
  .kinetic-name-line { font-size: clamp(1.9rem, 10vw, 2.8rem); }
  .tool-modal-card { border-radius: 18px 18px 0 0 !important; }
  .floating-nav-bar {
    bottom: max(18px, env(safe-area-inset-bottom)); padding: 6px; gap: 2px; max-width: 98vw;
    background: rgba(18,20,26,0.84); border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35);
    box-shadow: 0 18px 44px rgba(0,0,0,0.56), 0 6px 16px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .floating-nav-indicator {
    top: 6px; bottom: 6px;
    box-shadow: 0 3px 14px rgba(255,255,255,0.28), inset 0 1px 0 rgba(255,255,255,0.42);
  }
  .floating-nav-item { height: 40px; padding: 0 11px; font-size: 0.78rem; min-width: 42px; gap: 6px; }
  .floating-nav-item .material-symbols-rounded { font-size: 1.25rem; }
  .floating-nav-item.active { padding: 0 16px 0 13px; font-weight: 800; }
  .floating-nav-item.active .material-symbols-rounded { font-size: 1.3rem; }
}
@media (max-width: 420px) {
  .floating-nav-bar { padding: 4px; gap: 1px; max-width: 99vw; bottom: max(14px, env(safe-area-inset-bottom)); }
  .floating-nav-item { min-width: 40px; padding: 0 9px; height: 38px; }
  .floating-nav-item .nav-label { font-size: 0.74rem; }
}
@media (min-width: 769px) {
  .app-main { padding: 48px 14px 104px; }
  .app-container { padding: 16px 12px 118px; gap: 16px; justify-content: center; }
}
@media (max-width: 360px) {
  .app-container { padding: 12px 10px; gap: 14px; }
}
/* Mobile — anti bingung: nav jelas, hero ringkas, no zoom hitam, bahasa keliatan */
@media(max-width:640px){
  html, body{ overflow-x:hidden !important; max-width:100% !important; width:100% !important; }
  .slide-container.cube-viewport{
    width:100% !important; max-width:100% !important;
    margin-left:0 !important; margin-right:0 !important; left:0 !important; right:0 !important;
  }
  .slide-panel.cube-face{ width:100% !important; max-width:100% !important; flex:0 0 100% !important; }
  .slide-track.cube-3d-box{ width:100% !important; }
  .top-header{
    top:10px; right:10px; z-index:60 !important; display:flex !important; opacity:1 !important; visibility:visible !important;
  }
  .top-header .lang-toggle{ padding:2px; display:grid !important; min-height:30px; }
  .lang-btn{ font-size:10.5px; padding:0 10px; min-height:26px; min-width:36px; display:inline-flex !important; }
  /* Hero BERANDA mobile — tidak mepet kiri, teks singkat, HI VELARD BESAR */
  .kinetic-hero{ gap:10px; padding:12px 4px 10px 6px; min-height:auto !important; }
  .kinetic-stacked-title{ padding-left:2px; }
  .kinetic-greeting-line{ font-size: clamp(1.45rem, 6vw, 1.75rem); line-height:1.08; white-space:normal; }
  .kinetic-name-line{ font-size: clamp(2.6rem, 11vw, 3.2rem); line-height:0.9; white-space:normal; letter-spacing:-0.04em; }
  .hero-bio-text{
    font-size:12px; line-height:1.62; max-width:100%; padding-left:2px;
    display:block; overflow:visible; white-space:pre-line;
  }
  .hero-action-row{ gap:7px; flex-direction:column; align-items:stretch; }
  .hero-action-row .btn-main, .hero-action-row .btn-ghost{ min-height:38px; padding:0 14px; font-size:12px; width:100%; justify-content:center; }
  /* Beranda MY VIDEOS — mobile 2 kolom lega, tidak 4 kolom sempit */
  .tiktok-title{ font-size:1.45rem; letter-spacing:-0.03em; }
  /* Cards — kecilkan semua UI biar tidak kebesaran */
  .upload-card{ border-radius:12px; padding:10px; gap:8px; }
  .upload-area{ padding:12px 10px; border-width:1.3px; }
  .upload-area .upload-text{ font-size:12px; }
  .upload-area .upload-subtext{ font-size:11px; }
  .file-info{ padding:8px 10px; gap:8px; }
  .file-meta-wrap .file-name{ font-size:12px; }
  .segmented{ padding:2px; gap:2px; }
  .seg-btn{ padding:5px 9px; font-size:10.5px; min-height:30px; }
  .process-btn{ min-height:40px; font-size:12px; width:100%; }
  .method-desc{ font-size:11px; padding:8px 10px; }
  .tool-card-new{ min-height:60px; border-radius:12px; padding:9px 10px; gap:8px; }
  .tool-card-new .tool-title-new{ font-size:11.5px; }
  .tool-card-new .tool-desc-new{ font-size:10.2px; }
  .tool-icon-wrap{ width:34px; height:34px; }
  .tutorial-card{ border-radius:12px; padding:10px; gap:10px; }
  .tutorial-card h3{ font-size:12px; }
  .tutorial-card p{ font-size:11px; line-height:1.5; }
  .help-card-wide{ padding:10px; }
  .donate-card, .about-card{ border-radius:12px; padding:10px; gap:8px; }
  .donate-hero h2{ font-size:15px; }
  .donate-hero p{ font-size:11.5px; }
  .qris-box{ padding:10px; gap:8px; }
  .qris-image{ width:150px; height:150px; }
  .feature-item{ padding:8px 9px; }
  .feature-item h4{ font-size:12px; }
  .feature-item p{ font-size:11px; }
  /* Hapus komet & matikan efek berat di mobile biar tidak lag */
  .comets, .edge-flashes, .galaxy-particles{ display:none !important; }
  .streak-bg .galaxy-stars, .streak-bg .galaxy-stars2{ animation:none !important; opacity:0.32 !important; }
  .streak-bg .bumi-img, .streak-bg .blackhole-img, .streak-bg .bumi-glow, .streak-bg .blackhole-glow{ animation:none !important; will-change:auto !important; }
  .streak-bg .bumi-img{ filter:brightness(1.05) saturate(1.05) !important; }
  .streak-bg .blackhole-img{ filter:brightness(1) saturate(1) !important; }
  .card, .upload-card, .tool-card-new, .tutorial-card, .donate-card, .about-card, .feature-item{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  .card::before, .upload-card::before{ display:none !important; }
  .floating-nav-bar{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow: 0 8px 20px rgba(0,0,0,0.32) !important; }
  body::after{ opacity:0.008 !important; }
  /* Floating nav — MOBILE JELAS: 6 slot grid, icon atas label bawah, active jelas */
  .floating-nav-bar{
    display:grid; grid-template-columns: repeat(6, 1fr);
    width: min(96vw, 380px); max-width:96vw;
    padding:6px 4px; gap:2px;
    bottom: max(10px, env(safe-area-inset-bottom));
    background: rgba(16,18,24,0.92); backdrop-filter: blur(20px) saturate(1.3);
    border-radius:18px;
  }
  .floating-nav-indicator{ display:none !important; }
  .floating-nav-item{
    flex-direction:column; justify-content:center; align-items:center;
    height:48px; min-width:0; padding:4px 2px; gap:2px;
    font-size:9.5px; font-weight:600; line-height:1;
    border-radius:12px; background:transparent;
  }
  .floating-nav-item .material-symbols-rounded{ font-size:20px; line-height:1; }
  .floating-nav-item .nav-label{
    max-width:none !important; opacity:1 !important; margin-left:0 !important;
    font-size:8.5px; font-weight:700; letter-spacing:0.02em; line-height:1; pointer-events:auto;
    display:block; text-align:center; white-space:nowrap;
  }
  .floating-nav-item.active{
    background: #f2f4f6; color:#0b0e14; font-weight:800; padding:4px 2px;
    box-shadow: 0 2px 10px rgba(255,255,255,0.18);
}
}
/* Tablet 641-860 — iPad portrait: nav & hero & grid biar tidak bingung */
@media(min-width:641px) and (max-width:860px){
  html, body{ overflow-x:hidden !important; }
  .slide-container.cube-viewport{ width:100% !important; max-width:100% !important; margin:0 !important; }
  .top-header{ top:12px; right:12px; z-index:60 !important; }
  .kinetic-hero{ gap:10px; padding:14px 6px 10px; min-height:auto !important; }
  .kinetic-greeting-line{ font-size: clamp(1.25rem, 3.2vw, 1.55rem); }
  .kinetic-name-line{ font-size: clamp(2.2rem, 5.5vw, 2.8rem); }
  .hero-bio-text{ font-size:12.6px; max-width:560px; }
  .tiktok-grid{ grid-template-columns:repeat(3,1fr) !important; gap:10px !important; }
  .tutorial-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .floating-nav-bar{
    display:grid !important; grid-template-columns:repeat(6,1fr);
    width:min(92vw, 520px); max-width:92vw; padding:6px 4px; gap:3px;
    bottom:max(14px, env(safe-area-inset-bottom));
    background: rgba(16,18,24,0.92);
  }
  .floating-nav-indicator{ display:none !important; }
  .floating-nav-item{
    flex-direction:column; height:50px; padding:5px 3px; gap:3px;
    font-size:9.5px; border-radius:12px;
  }
  .floating-nav-item .material-symbols-rounded{ font-size:20px; }
  .floating-nav-item .nav-label{
    max-width:none !important; opacity:1 !important; margin-left:0 !important;
    font-size:8.8px; display:block; text-align:center;
  }
  .floating-nav-item.active{ background:#f2f4f6; color:#0b0e14; }
  .comets, .edge-flashes{ display:none !important; }
  .card, .upload-card, .tool-card-new{ backdrop-filter:none !important; }
}
/* Mobile perf - tingkatkan FPS, kurangi framedrop, tetap slide */
@media(max-width:768px){
  .bg-static{ background-attachment: scroll !important; background-size: cover !important; }
  .slide-track.cube-3d-box{ will-change: auto !important; transition: transform 280ms cubic-bezier(0.32,0.72,0,1) !important; }
  .slide-panel.cube-face > *,
  #panel-tools .tool-card-new{ will-change: auto !important; }
  .slide-panel.cube-face > *{ transform:none !important; opacity:1 !important; transition:none !important; }
  #panel-tools .tool-card-new{ transform:none !important; opacity:1 !important; transition: opacity 180ms ease !important; }
  .kinetic-hero .flip-char,
  .kinetic-hero .kinetic-flip-box,
  .slide-panel.cube-face,
  .floating-nav-bar{ will-change: auto !important; }
  .kinetic-name-line{ filter: drop-shadow(0 0 18px rgba(168,85,247,0.52)) drop-shadow(0 0 36px rgba(236,72,153,0.32)) drop-shadow(0 2px 14px rgba(0,0,0,0.45)) !important; text-shadow:none !important; }
  .name-box .flip-char{ filter: drop-shadow(0 0 14px rgba(168,85,247,0.62)) drop-shadow(0 0 28px rgba(236,72,153,0.42)) !important; text-shadow:none !important; }
  .tiktok-section{ will-change:auto !important; transform:none !important; transition: opacity 280ms ease !important; }
  .card, .qm-card, .about-card, .tutorial-card, .tool-card-new, .tool-modal-card, .modal{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  .floating-nav-bar{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background: rgba(14,16,20,0.92) !important; }
}
/* Mobile - tampilkan bio & center VELARD (fix gada & ga ditengah) */
@media(max-width:640px){
  #panel-beranda .kinetic-hero{ align-items:center; text-align:center; padding:18px 12px 14px; gap:12px; }
  #panel-beranda .kinetic-stacked-title{ align-items:center; text-align:center; width:100%; }
  #panel-beranda .kinetic-greeting-line,
  #panel-beranda .kinetic-name-line{ justify-content:center; text-align:center; width:100%; }
  #panel-beranda .kinetic-flip-box{ justify-content:center; }
  #panel-beranda .hero-bio-text{ display:block !important; font-size:12px; line-height:1.6; max-width:92%; margin:4px auto 0; text-align:center; opacity:0.92; }
  #panel-beranda .hero-action-row{ display:flex !important; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:8px; }
  #panel-beranda .tiktok-section{ display:flex !important; }
  .streak-bg, .streak-bg .bumi-img, .streak-bg .blackhole-img, .streak-bg .bumi-glow, .streak-bg .blackhole-glow, .bg-glow{ display:none !important; }
  .streak-bg svg{ display:none !important; }
}
/* PC/laptop — tutorial biar bisa scroll sampai laporan */
@media(min-width:1025px){
  #panel-tutorial{ padding-bottom:48px !important; }
  #panel-tutorial .help-card-wide{ margin-bottom:32px !important; }
  body:not([data-view="beranda"]) .app-container{ padding-bottom:140px !important; }
}
body.tool-modal-open .floating-nav-bar { transform: translateX(-50%) translateY(120px); opacity: 0; pointer-events: none; }

/* Compat: legacy grid */
.tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 768px) { .tools-grid { grid-template-columns: 1fr; } }

/* A11y: ensure min touch 44px for primary actions */
.process-btn, .tool-process-btn, .floating-nav-item, .lang-btn, .seg-btn { min-height: 38px; }
@media (pointer: coarse) { .floating-nav-item { min-width: 44px; min-height: 44px; } }

/* Tools search - below Alat tambahan (subtle, tidak ungu pekat) */
.tools-search-wrap{
  margin-top:14px; position:relative; display:flex; align-items:center; gap:8px;
  background: rgba(18,20,30,0.62); border:1px solid rgba(255,255,255,0.08);
  border-radius: 999px; padding:8px 12px 8px 14px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.tools-search-wrap:focus-within{ border-color: rgba(200,190,255,0.22); box-shadow: 0 0 0 3px rgba(200,190,255,0.10); }
.tools-search-icon{ color: rgba(220,222,235,0.85); font-size:18px; flex:none; }
#toolsSearch{ flex:1; background:transparent; border:0; outline:0; color:#f1eef8; font-size:13px; font-weight:500; }
#toolsSearch::placeholder{ color: rgba(225,228,240,0.55); }
#toolsSearch::-webkit-search-cancel-button{ display:none; }
.tools-search-clear{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.10); color:#e8e6f0; flex:none; }
.tools-search-clear .material-symbols-rounded{ font-size:16px; }
.tools-search-empty{ margin-top:10px; font-size:12.5px; color: rgba(225,228,240,0.68); text-align:center; }
.tools-cat-wrap{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 2px; }
.tools-cat-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.08); background: rgba(18,20,30,0.62);
  color: rgba(225,228,240,0.72); font-size:12px; font-weight:700;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.tools-cat-btn .material-symbols-rounded{ font-size:16px; }
.tools-cat-btn.active{ background:#eceef2; color:#0a0e14; border-color:transparent; }
.tools-cat-btn:hover{ border-color: rgba(255,255,255,0.14); }
@media(max-width:640px){
  .tools-cat-wrap{ gap:6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; padding-bottom:2px; -webkit-overflow-scrolling:touch; }
  .tools-cat-wrap::-webkit-scrollbar{ display:none; }
  .tools-cat-btn{ flex:0 0 auto; padding:5px 10px; font-size:11px; gap:4px; white-space:nowrap; }
  .tools-cat-btn .material-symbols-rounded{ font-size:14px; }
}

/* INIYA: semua menu kecuali home - kalem, tidak mencolok, dark glass netral */
.slide-panel:not(#panel-beranda){
  --primary-h: 0;
  --primary-s: 0%;
  --primary-l: 88%;
  --md-sys-color-primary: hsl(0 0% 88%);
  --md-sys-color-primary-container: hsl(0 0% 16%);
  --lime: hsl(0 0% 88%);
  --lime-strong: hsl(0 0% 92%);
}
.slide-panel:not(#panel-beranda) .panel-head-large .panel-title-large{ color: #eceef2; text-shadow: none; }
.slide-panel:not(#panel-beranda) .head-sub{ color: rgba(220,222,230,0.62); }
.slide-panel:not(#panel-beranda) .card,
.slide-panel:not(#panel-beranda) .qm-card,
.slide-panel:not(#panel-beranda) .donate-card,
.slide-panel:not(#panel-beranda) .about-card{
  background: rgba(14,16,20,0.68);
  border:1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.32);
}
.slide-panel:not(#panel-beranda) .tool-card-new{
  background: rgba(18,20,26,0.64);
  border:1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.slide-panel:not(#panel-beranda) .tool-card-new:hover{
  border-color: rgba(255,255,255,0.10); background: rgba(22,26,34,0.72);
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
}
.slide-panel:not(#panel-beranda) .tool-icon-wrap{
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.06);
  color: #d8dce6;
}
.slide-panel:not(#panel-beranda) .qm-segmented{ background: rgba(18,20,26,0.62); border-color: rgba(255,255,255,0.06); }
.slide-panel:not(#panel-beranda) .qm-seg-btn.active{ background: hsl(0 0% 88%); color:#0a0e14; }
.slide-panel:not(#panel-beranda) .qm-process-btn{ background: hsl(0 0% 88%); color:#0a0e14; box-shadow: 0 4px 14px rgba(0,0,0,0.22); }
.slide-panel:not(#panel-beranda) .qm-info-box{ background: rgba(18,20,26,0.52); border-color: rgba(255,255,255,0.06); }