/* ============================================
   app.css — Tutorial Meeting
   Mobile-First (375px+), Dark Mode (default) + Light Mode
   ============================================ */

:root {
  /* Enhanced color system */
  --bg:          #0f0c29;
  --bg2:         #302b63;
  --bg3:         #24243e;
  --surface:     rgba(255,255,255,0.04);
  --surface2:    rgba(255,255,255,0.07);
  --border:      rgba(255,255,255,0.08);
  --border-hl:   rgba(108,99,255,0.3);
  --text:        #e0e0e0;
  --text2:       #a0a0b0;
  --text3:       #888;
  --accent:      #6c63ff;
  --accent-hover: #5850e6;
  --accent-light: rgba(108,99,255,0.1);
  --accent2:     #a78bfa;
  --success:     #4ade80;
  --warning:     #facc15;
  --error:       #f87171;
  
  /* Enhanced spacing (8px-based) */
  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:    12px;
  --space-lg:    16px;
  --space-xl:    24px;
  --space-xxl:   32px;
  --space-xxxl:  48px;
  
  /* Enhanced border radius */
  --radius:      12px;
  --radius-sm:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  
  /* Enhanced shadows with glow */
  --shadow:      0 2px 8px rgba(0,0,0,0.1);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.15);
  --shadow-glow: 0 4px 24px rgba(108,99,255,0.2);
  
  /* Touch target */
  --tap-min:     48px;
  
  /* Transitions (GPU-accelerated easing) */
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
}

html.light {
  --bg:          #f4f5f9;
  --bg2:         #ffffff;
  --bg3:         #ffffff;
  --surface:     #ffffff;
  --surface2:    #f0f0f5;
  --border:      #e5e7eb;
  --border-hl:   rgba(108,99,255,0.25);
  --text:        #1a1a2e;
  --text2:       #555;
  --text3:       #777;
  --shadow:      0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.1);
  --shadow-glow: 0 4px 24px rgba(108,99,255,0.15);
}

/* ─── Reset ─────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: linear-gradient(135deg, var(--bg), var(--bg2), var(--bg3));
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  /* Safe area for notched phones */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  overflow-x: hidden;
}

a, button { touch-action: manipulation; }

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px 16px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

/* ─── Dark Toggle ───────────────────────────────── */
.dark-toggle {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  min-width: var(--tap-min) !important;
  min-height: var(--tap-min) !important;
}

/* ─── Page Top (Back Link) ─────────────────────── */
.page-top {
  margin-bottom: 20px;
}
.back-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  min-height: var(--tap-min);
}

.breadcrumb { display:flex; gap:4px; flex-wrap:wrap; align-items:center; margin-top:6px; }
.bc-item { font-size:0.78rem; color:var(--text3); }
.bc-item.bc-active { color:var(--text); font-weight:600; }
.bc-sep { font-size:0.78rem; color:var(--text3); }

/* ─── Room Badge ────────────────────────────────── */
.room-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(108,99,255,0.08);
  border: 1px solid rgba(108,99,255,0.15);
  border-radius: 50px;
  padding: 10px 22px;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 28px;
  min-height: var(--tap-min);
}

/* ─── Home Page ─────────────────────────────────── */
.home-hero {
  text-align: center;
  padding: 40px 16px 32px;
}
.home-hero h1 {
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #fff, var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
  line-height: 1.2;
}
html.light .home-hero h1 {
  background: linear-gradient(135deg, #1a1a2e, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-hero p { 
  color: var(--text2); 
  font-size: 1rem; 
  line-height: 1.5;
  font-weight: 400;
}

/* ─── Room Grid ─────────────────────────────────── */
.room-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding-bottom: 20px;
}
.room-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 16px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 130px;
  justify-content: center;
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
}

.room-card:hover {
  background: var(--surface2);
  border-color: var(--border-hl);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.room-card:active {
  transform: translateY(0);
  box-shadow: var(--shadow-md);
}

.room-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.room-card-icon {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 4px;
}
.room-card h3 { 
  font-size: 1.05rem; 
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.room-card p { 
  font-size: 0.8rem; 
  color: var(--text3); 
  line-height: 1.4;
  font-weight: 400;
}

@media (min-width: 480px) {
  .room-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ─── Function Grid ─────────────────────────────── */
.func-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding-bottom: 20px;
}
.func-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 16px;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  min-height: var(--tap-min);
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
}

.func-card:hover {
  background: var(--surface2);
  border-color: var(--border-hl);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.func-card:active {
  transform: translateY(0);
  box-shadow: var(--shadow-md);
}

.func-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.func-icon i{font-size:1.6rem;color:var(--accent)}
.svg-icon-wrap{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:#fff;border-radius:10px;padding:6px}
.func-icon .platform-logo{width:100%;height:100%;object-fit:contain}
.func-card h3 { font-size: 1rem; font-weight: 700; }
.func-card p  { font-size: 0.82rem; color: var(--text3); line-height: 1.5; }

/* ─── Role Select ───────────────────────────────── */
.role-select {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 20px;
}
.role-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  text-decoration: none;
  color: var(--text);
  min-height: 72px;
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
}

.role-card:hover {
  background: var(--surface2);
  border-color: var(--border-hl);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.role-card:active {
  transform: translateY(0);
  box-shadow: var(--shadow-md);
}

.role-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.role-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(108,99,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--accent);
  flex-shrink: 0;
}
.role-info { flex:1; }
.role-info strong { display:block; font-size:0.95rem; margin-bottom:2px; }
.role-info span { font-size:0.8rem; color:var(--text3); }
.role-card .fa-chevron-right { color:var(--text3); font-size:0.8rem; margin-left:auto; }

/* ─── Page Title ────────────────────────────────── */
.page-title {
  font-size: 1.75rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  line-height: 1.25;
}
.page-sub { 
  color: var(--text2); 
  font-size: 0.95rem; 
  margin-bottom: 24px;
  font-weight: 400;
  line-height: 1.5;
}

/* ─── Progress ──────────────────────────────────── */
.progress-wrap { margin-bottom: 24px; }
.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.8rem;
}
.pi-label { color:var(--text3); flex:1; margin-right:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pi-count { color:var(--accent); font-weight:600; white-space:nowrap; }

.progress-bar {
  height: 5px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 3px;
  transition: width 0.4s ease;
}

.progress-dots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}
.pdot {
  width: 32px;
  height: 8px;
  border-radius: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text3);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
  cursor: pointer;
}

.pdot:hover {
  background: var(--surface2);
  border-color: var(--accent);
}

.pdot.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  width: 48px;
}
}
.pdot-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.15);
  box-shadow: 0 0 14px rgba(108,99,255,0.35);
}
.pdot-done {
  background: rgba(74,222,128,0.12);
  border-color: var(--success);
  color: var(--success);
  font-size: 0.65rem;
}

/* ─── Step Card ─────────────────────────────────── */
.step-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  transition: all var(--duration-normal) var(--ease-out);
  box-shadow: var(--shadow);
}

.step-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.step-card.swipe-out {
  opacity: 0;
  transform: translateX(-50px);
}

.step-card.swipe-out.right {
  transform: translateX(50px);
}

.step-header { margin-bottom: 20px; }

.step-num {
  display: inline-block;
  background: rgba(108,99,255,0.08);
  color: var(--accent);
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

.step-title {
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 12px;
}

.step-title i { 
  color: var(--accent); 
  margin-right: 8px; 
  font-size: 1.2rem;
}

.step-text {
  line-height: 1.75;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 18px;
  white-space: pre-line;
  font-weight: 400;
}

.step-text strong { 
  color: #fff; 
  font-weight: 500;
}

html.light .step-text strong { 
  color: #1a1a2e; 
}

.step-img { margin-bottom: 18px; text-align: center; }
.step-img img { 
  max-width: 100%; 
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-normal) var(--ease-out);
}

.step-img img:hover {
  transform: scale(1.01);
}

/* ─── Sub-Steps (Accordion) ─────────────────────── */
.substeps-wrap { margin-top: 20px; }
.substep-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  color: var(--text);
  transition: all var(--duration-fast) var(--ease-out);
  cursor: pointer;
  min-height: 60px;
}

.substep-toggle:hover {
  background: var(--surface2);
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}

.substep-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
  min-height: var(--tap-min);
}
.substep-toggle:active { background: rgba(108,99,255,0.12); }
.toggle-arrow { margin-left:auto; transition:transform 0.2s; }

.substeps-box {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0;
}
.substeps-box.open {
  max-height: 2000px;
  padding: 12px 0 0 0;
}
.substep-item {
  background: var(--surface2);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  font-size: 0.88rem;
  line-height: 1.6;
}
.substep-item img { margin-top:10px; border-radius:8px; max-width:100%; }
.substep-num {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.75rem;
  margin-bottom: 4px;
}
.substep-text { color: var(--text); }

/* ─── Step Navigation (Sticky Bottom) ───────────── */
.step-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--bg);
  background: linear-gradient(to top, var(--bg) 80%, transparent);
  z-index: 100;
  border-top: 1px solid var(--border);
}
.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  height: 56px;
  border-radius: var(--radius-lg);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
  font-family: inherit;
  border: none;
  flex: 1;
  min-height: var(--tap-min);
}

.nav-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav-prev {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text2);
}
.nav-prev:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--shadow-glow);
}
.nav-prev:active { transform: scale(0.97); }
.nav-next {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  box-shadow: var(--shadow-md);
}
.nav-next:hover {
  filter: brightness(1.1);
  box-shadow: var(--shadow-glow);
}
.nav-next:active { transform: scale(0.97); }
.nav-done {
  background: linear-gradient(135deg, var(--success), #22d3ee);
  color: #fff;
}
.nav-done:hover { filter: brightness(1.08); box-shadow: 0 4px 24px rgba(74,222,128,0.25); }
.nav-done:active { transform: scale(0.97); }

@keyframes swipeHint {
  0%, 100% { transform:translateX(0); opacity:0.5; }
  50%      { transform:translateX(8px); opacity:1; }
}
.step-card[data-swipe-hint="true"]::after {
  content: 'Geser untuk lanjut →';
  display: block;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text3);
  margin-top: 14px;
  animation: swipeHint 2s ease-in-out infinite;
}

.step-title .optional-badge{display:inline-block;font-size:0.7rem;font-weight:600;color:#fbbf24;background:rgba(251,191,36,0.12);padding:2px 10px;border-radius:20px;margin-left:8px;vertical-align:middle;letter-spacing:0.3px}
/* ─── Step Carousel ─────────────────────────── */
.step-carousel{position:relative;margin:16px -16px 4px;border-radius:0;overflow:hidden;background:rgba(0,0,0,.2)}
.step-carousel .carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.step-carousel .carousel-track::-webkit-scrollbar{display:none}
.step-carousel .carousel-slide{flex:0 0 100%;scroll-snap-align:start;cursor:pointer}
.step-carousel .carousel-slide img,.step-carousel img{width:100%;display:block;background:rgba(0,0,0,.15);border-radius:10px;max-height:60vh;object-fit:contain}
.carousel-dots{display:flex;justify-content:center;gap:8px;padding:10px 0 8px}
.carousel-dots .c-dot{width:10px;height:10px;border-radius:50%;background:var(--text3);opacity:.4;transition:all .25s;cursor:pointer}
.carousel-dots .c-dot.active{width:26px;border-radius:6px;background:var(--accent);opacity:1}
.carousel-counter{position:absolute;bottom:28px;right:10px;font-size:.7rem;color:var(--text2);background:rgba(0,0,0,.4);padding:2px 10px;border-radius:20px;backdrop-filter:blur(4px)}

/* ─── Image Arrows — chevron segitiga miring dalam LINGKARAN tipis, lebih transparan ── */
.car-arrow,.lb-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:14;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.4);color:#fff;box-shadow:none;-webkit-tap-highlight-color:transparent;transition:background .18s,border-color .18s,opacity .18s}
.car-arrow:hover,.lb-arrow:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.75)}
.car-arrow:active,.lb-arrow:active{opacity:.6;transform:translateY(-50%) scale(.9)}
.car-arrow:focus-visible,.lb-arrow:focus-visible{outline:none;border-color:#fff}
.car-arrow i,.lb-arrow i{font-size:1.6rem;line-height:1;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.car-prev,.lb-prev{left:8px}
.car-next,.lb-next{right:8px}
.lb-arrow{width:56px;height:56px;z-index:15}
.lb-arrow i{font-size:1.75rem}
.lb-arrow:disabled{opacity:.2;transform:translateY(-50%)}

/* ─── Lightbox ────────────────────────────────── */
.lightbox-overlay{position:fixed;inset:0;z-index:99999;background:rgba(5,3,20,0.94);display:flex;align-items:center;justify-content:center;flex-direction:column;backdrop-filter:blur(12px)}
.lightbox-close{position:absolute;top:calc(16px + env(safe-area-inset-top));right:16px;z-index:10;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.12);color:#fff;width:48px;height:48px;min-width:48px;min-height:48px;border-radius:50%;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--duration-fast) var(--ease-out)}
.lightbox-close:hover{background:rgba(255,255,255,0.2);border-color:var(--accent)}
.lightbox-close:active{transform:scale(.92)}
.lightbox-content{display:flex;align-items:center;justify-content:center;width:94vw;height:82vh}
.lightbox-content img{max-width:min(94vw, 100%);max-height:82vh;object-fit:contain;border-radius:var(--radius-lg);will-change:transform}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.12);color:#fff;width:48px;height:48px;min-width:48px;min-height:48px;border-radius:50%;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--duration-fast) var(--ease-out)}
.lightbox-nav:hover{background:rgba(255,255,255,0.22);border-color:var(--accent)}
.lightbox-nav:active{transform:translateY(-50%) scale(.92)}
.lightbox-prev{left:10px}
.lightbox-next{right:10px}
.lightbox-dots{display:flex;gap:6px;margin-top:18px;padding:0 16px}
.lb-dot{width:32px;height:7px;border-radius:4px;background:rgba(255,255,255,0.2);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}
.lb-dot-active{background:#fff;width:48px}
.lightbox-counter{color:rgba(255,255,255,0.65);font-size:0.8rem;margin-top:10px;font-variant-numeric:tabular-nums;letter-spacing:0.3px}

/* ─── Responsive (Tablet+) ──────────────────────── */
@media (min-width: 600px) {
  .container { max-width: 700px; padding:24px 24px; }
  .home-hero { padding:60px 24px 36px; }
  .home-hero h1 { font-size:2.2rem; }
  .step-card { padding:28px 24px; }
  .step-title { font-size:1.25rem; }
}

/* ─── Footer ───────────────────────────────────────────── */
.app-footer{text-align:center;padding:24px 16px calc(28px + env(safe-area-inset-bottom));margin-top:32px}
.app-footer::before{content:'';display:block;width:48px;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px;margin:0 auto 16px;opacity:.7}
.app-footer p{font-size:0.78rem;color:var(--text3);letter-spacing:0.5px;font-weight:400}
html.light .app-footer p{color:#999}

/* ─── Back to Top Button ─────────────────────────── */
.back-to-top{
  position:fixed;bottom:24px;right:20px;z-index:199;
  width:44px;height:44px;border-radius:50%;border:none;
  background:rgba(99,102,241,.9);color:#fff;
  font-size:1.1rem;cursor:pointer;
  box-shadow:0 4px 14px rgba(99,102,241,.35);
  opacity:0;transform:translateY(20px) scale(.8);
  transition:opacity .25s,transform .25s;
  pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
.back-to-top.btt-visible{
  opacity:1;transform:translateY(0) scale(1);
  pointer-events:auto;
}
.back-to-top:active{transform:scale(.9)}
html.light .back-to-top{background:rgba(99,102,241,.95)}

/* ─── Enhanced Buttons ──────────────────────────── */
.btn-primary {
  background: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: var(--radius);
  padding: 12px 24px;
  min-height: var(--tap-min);
  font-weight: 500;
  font-size: 1rem;
  transition: all var(--duration-fast) var(--ease-out);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--shadow);
}

.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-md);
  opacity: 0.95;
}

.btn-primary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 10px 20px;
  min-height: var(--tap-min);
  font-weight: 500;
  font-size: 0.9rem;
  transition: all var(--duration-fast) var(--ease-out);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-secondary:hover {
  background: var(--accent-light);
  border-color: var(--accent-hover);
  color: var(--accent-hover);
}

.btn-secondary:active {
  background: rgba(108,99,255,0.15);
  transform: translateY(0);
}

.btn-secondary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-icon {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-out);
  cursor: pointer;
}

.btn-icon:hover {
  background: var(--surface2);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--shadow-glow);
}

.btn-icon:active {
  transform: scale(0.95);
}

.btn-icon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── Port Buttons (Galeri per tombol) — plain + glow "menyala" ── */
.port-btns-wrap{display:flex;flex-direction:column;gap:10px;margin:4px 0 20px}
.port-btn{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:14px 18px;background:var(--surface);border:1px solid rgba(108,99,255,.35);border-radius:var(--radius-lg);color:var(--text);font-family:inherit;font-size:.98rem;text-align:left;cursor:pointer;transition:border-color .2s ease, box-shadow .2s ease, transform .12s ease;box-shadow:0 0 0 1px rgba(108,99,255,.06), 0 0 14px rgba(108,99,255,.18), inset 0 0 18px rgba(108,99,255,.07)}
.port-btn::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,rgba(167,139,250,.14),transparent 55%);pointer-events:none}
.port-btn:hover:not(:disabled){border-color:rgba(167,139,250,.65);box-shadow:0 0 0 1px rgba(167,139,250,.12), 0 0 22px rgba(108,99,255,.35), inset 0 0 24px rgba(108,99,255,.1)}
.port-btn:active:not(:disabled){transform:scale(.985)}
.port-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.port-btn:disabled{opacity:.35;cursor:not-allowed;border-color:var(--border);box-shadow:none}
.port-btn:disabled::after{display:none}
.pb-label{flex:1;font-weight:600;letter-spacing:-.01em;line-height:1.3}

.lightbox-title{position:absolute;top:max(16px, env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:11;margin-right:-24px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:.9rem;font-weight:600;letter-spacing:.2px;padding:8px 18px;border-radius:var(--radius-full);backdrop-filter:blur(8px);max-width:70vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ─── Image Skeleton Shimmer ────────────────────── */
.img-skeleton{position:relative;background:var(--surface2);border-radius:var(--radius-lg);overflow:hidden}
.img-skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(108,99,255,.07) 45%,rgba(167,139,250,.11) 55%,transparent 100%);transform:translateX(-100%);animation:shimmer 1.4s ease-in-out infinite;will-change:transform}
@keyframes shimmer{to{transform:translateX(100%)}}
.img-skeleton img{opacity:0;transition:opacity .35s var(--ease-out)}
.img-skeleton img.loaded{opacity:1}
.img-skeleton.loaded::after{animation:none;display:none}
.step-img.img-wrap,.step-carousel .img-wrap{display:block;line-height:0}

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