/* =========================================================
   FASTSHOT STUDIO - Gaya utama
   Sistem visual:
   - Tema tunggal: dark tech (off-black #030509) dengan satu aksen cyan
   - Radius: pill (badge), 12px (tombol/input), 16-24px (kartu), 28px (panel besar)
   - Font: Poppins (display/body), JetBrains Mono (label teknis)
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; color-scheme: dark; }

body {
  background: #030509;
  color: #fff;
  font-family: Poppins, Inter, system-ui, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

a { text-decoration: none; color: inherit; }

:focus-visible {
  outline: 2px solid #35d8ff;
  outline-offset: 2px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #35d8ff;
  color: #030509;
  padding: 10px 16px;
  border-radius: 0 0 12px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Scroll progress bar (animasi antar section, CSS scroll-driven) */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, #35d8ff, #8ef4ff);
  box-shadow: 0 0 12px rgba(53, 216, 255, 0.7);
  z-index: 60;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: progressGrow linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes progressGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Starfield ambient */
.stars {
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  z-index: 0;
}

/* ---------------------------------------------------------
   Tombol
   --------------------------------------------------------- */
.btn-glow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  background: linear-gradient(to top, #9ad9ec 1px, #61daef 4px, #14a8c6 6px, #038aa8 8px, #006180 10px, #073746 16px, #0a111d 34px, #0a111d 100%);
  box-shadow: inset 0 3px 3px -2px rgba(180, 228, 255, 0.15), inset 1px 0 0 rgba(255, 255, 255, 0.12), inset -1px 0 0 rgba(255, 255, 255, 0.12), 0 0 16px rgba(60, 190, 235, 0.25), 0 2px 8px -3px rgba(90, 220, 255, 0.5);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  cursor: pointer;
  color: #fff;
}
.btn-glow::before {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  top: 1px;
  height: 1.8px;
  filter: blur(0.5px);
  background: linear-gradient(90deg, transparent 0%, rgba(120, 225, 255, 0.8) 50%, transparent 100%);
}
.btn-glow:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(200, 245, 255, 0.6), 0 8px 28px rgba(20, 180, 225, 0.5);
  filter: brightness(1.12);
}
.btn-glow:active { transform: translateY(0) scale(0.985); }

.btn-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  color: #e2e8f0;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.btn-secondary:hover {
  background: rgba(53, 216, 255, 0.08);
  border-color: rgba(53, 216, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(53, 216, 255, 0.15);
}
.btn-secondary:active { transform: translateY(0) scale(0.985); }

/* ---------------------------------------------------------
   Kartu kaca
   --------------------------------------------------------- */
.glass-card {
  background: linear-gradient(180deg, rgba(16, 24, 39, 0.6) 0%, rgba(8, 13, 22, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.glass-card:hover {
  border-color: rgba(53, 216, 255, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -12px rgba(0, 0, 0, 0.7), 0 0 20px -5px rgba(53, 216, 255, 0.12);
}

/* ---------------------------------------------------------
   Hero stage + korsel 3D
   --------------------------------------------------------- */
.hero-stage {
  position: relative;
  width: 100%;
  height: 460px;
  overflow: hidden;
  mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 78%, transparent 100%);
}
.ring-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 30px;
  width: 1180px;
  height: 420px;
  perspective: 900px;
  perspective-origin: 590px 420px;
  transform-style: preserve-3d;
  pointer-events: none;
}
.card-cyl {
  position: absolute;
  left: 590px;
  top: 235px;
  width: 138px;
  height: 286px;
  margin: -143px 0 0 -69px;
  border-radius: 14px;
  overflow: hidden;
  background: #0d121c;
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.7), 0 0 15px rgba(53, 216, 255, 0.1);
  backface-visibility: hidden;
  will-change: transform;
}
.card-cyl img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-cyl::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  pointer-events: none;
}

/* ---------------------------------------------------------
   Floating WhatsApp
   --------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: grid;
  place-items: center;
  z-index: 999;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  transition: transform 0.25s ease;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.55);
  animation: pulseWa 2.8s ease-out infinite;
}
@keyframes pulseWa {
  0% { transform: scale(1); opacity: 0.75; }
  70% { transform: scale(1.45); opacity: 0; }
  100% { opacity: 0; }
}

/* ---------------------------------------------------------
   Animasi masuk saat scroll (antar section)
   --------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}
[data-reveal="left"] { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Pemisah antar section dengan garis bercahaya */
.section-divider {
  position: relative;
  height: 1px;
  max-width: 72rem;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(53, 216, 255, 0.35), transparent);
  overflow: hidden;
}
.section-divider::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -30%;
  width: 30%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(142, 244, 255, 0.9), transparent);
  animation: dividerSweep 6s ease-in-out infinite;
}
@keyframes dividerSweep {
  0% { left: -30%; }
  55% { left: 100%; }
  100% { left: 100%; }
}

/* Orb latar lembut, bergerak perlahan */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  animation: orbFloat 16s ease-in-out infinite;
}
@keyframes orbFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -28px, 0); }
}

/* ---------------------------------------------------------
   Komponen lain
   --------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: rgba(53, 216, 255, 0.08);
  border: 1px solid rgba(53, 216, 255, 0.2);
  color: #7fe4ff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: marqueeMove 26s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeMove {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.counter-value { font-variant-numeric: tabular-nums; }

/* Akordeon FAQ */
.faq-item summary { cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform 0.25s ease; }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  opacity: 0;
}
.faq-item[open] .faq-answer { max-height: 640px; opacity: 1; }

/* Prose artikel blog */
.prose-fs { color: #cbd5e1; font-size: 0.95rem; line-height: 1.85; }
.prose-fs h2 { color: #fff; font-size: 1.35rem; font-weight: 700; margin: 2rem 0 0.75rem; }
.prose-fs h3 { color: #fff; font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
.prose-fs p { margin: 0 0 1rem; }
.prose-fs ul, .prose-fs ol { margin: 0 0 1rem 1.25rem; }
.prose-fs li { margin-bottom: 0.4rem; }
.prose-fs a { color: #7fe4ff; text-decoration: underline; }
.prose-fs strong { color: #fff; }
.prose-fs blockquote {
  border-left: 3px solid #35d8ff;
  padding-left: 1rem;
  color: #e2e8f0;
  font-style: italic;
  margin: 1.25rem 0;
}

/* Input error state */
.input-error {
  border-color: rgba(248, 113, 113, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
}

/* Slider geser (scroll-snap) */
.snap-slider {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(53, 216, 255, 0.4) transparent;
}
.snap-slider::-webkit-scrollbar { height: 6px; }
.snap-slider::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 999px; }
.snap-slider::-webkit-scrollbar-thumb { background: rgba(53, 216, 255, 0.4); border-radius: 999px; }
.snap-slide {
  flex: 0 0 clamp(240px, 78vw, 340px);
  scroll-snap-align: start;
}
.slider-nav-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  color: #e2e8f0;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.slider-nav-btn:hover { border-color: rgba(53, 216, 255, 0.45); background: rgba(53, 216, 255, 0.08); transform: translateY(-1px); }
.slider-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

/* Flash message */
.flash-message {
  position: fixed;
  top: 5.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 12px;
  font-size: 0.8rem;
  background: rgba(9, 14, 23, 0.95);
  border: 1px solid rgba(53, 216, 255, 0.4);
  color: #d7f6ff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: flashIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.flash-success { border-color: rgba(52, 211, 153, 0.5); color: #d1fae5; }
.flash-error { border-color: rgba(248, 113, 113, 0.5); color: #fee2e2; }
.flash-close { background: none; border: 0; color: inherit; font-size: 1.1rem; cursor: pointer; line-height: 1; }
@keyframes flashIn {
  from { opacity: 0; transform: translate(-50%, -12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.6rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8rem;
  color: #cbd5e1;
  transition: all 0.2s ease;
}
.pagination a:hover { border-color: rgba(53, 216, 255, 0.5); color: #7fe4ff; }
.pagination .current { background: rgba(53, 216, 255, 0.15); border-color: rgba(53, 216, 255, 0.5); color: #bff6ff; }

/* Breadcrumb */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: #94a3b8; }
.breadcrumb a:hover { color: #7fe4ff; }
.breadcrumb .sep { opacity: 0.5; }

/* Kartu portofolio */
.portfolio-thumb { position: relative; overflow: hidden; }
.portfolio-thumb img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.portfolio-thumb:hover img { transform: scale(1.06); }

/* Reduced motion: matikan semua animasi */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none !important; }
  .scroll-progress { display: none; }
}

/* Fallback transparansi bila backdrop-filter tidak didukung */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .glass-card { background: #0a1019; }
}

@media (max-width: 768px) {
  .hero-stage { height: 380px; }
  .ring-wrap { width: 760px; perspective-origin: 380px 360px; }
  .card-cyl { left: 380px; width: 112px; height: 232px; margin: -116px 0 0 -56px; }
}