/* ============================================================
   PATCH: Intro Screen — Logo HP Besar + Background 3D Animated
   ============================================================ */

/* Override intro icon — tampilkan logo HP 3D proporsional */
#sp-intro .iico {
  width: 110px !important;
  height: 110px !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  animation: none !important;
  font-size: 0 !important;
  perspective: 300px !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 2rem !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Perbesar tulisan SmartPick di intro */
#sp-intro .il1 {
  font-size: clamp(2.6rem, 7vw, 4.8rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.06em !important;
}

#sp-intro .il2 {
  font-size: clamp(0.75rem, 1.8vw, 1.1rem) !important;
  letter-spacing: 0.35em !important;
  font-weight: 600 !important;
}

#sp-intro .itag {
  font-size: clamp(0.5rem, 1vw, 0.65rem) !important;
  letter-spacing: 0.2em !important;
  color: rgba(0, 229, 255, 0.45) !important;
}

#sp-intro .idiv {
  height: 3px !important;
  border-radius: 2px !important;
}

/* ============================================================
   PATCH: INTRO LOADING TEXT — "Rekomendasi Cerdas" BESAR
   ============================================================ */
.loading-logo {
  font-size: clamp(1.6rem, 3.5vw, 2.5rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  margin-bottom: 2.5rem !important;
}

/* ============================================================
   PATCH: HERO — Sempurna + Untukmu warna sama, hapus garis
   ============================================================ */

/* Hapus garis bawah .hero-highlight sepenuhnya */
.hero-highlight::after {
  display: none !important;
}

/* Warnakan seluruh h1 baris kedua sama */
.hero h1 .hero-highlight {
  background: linear-gradient(135deg, #00e5ff 0%, #8b5cf6 50%, #ffd166 100%) !important;
  background-size: 200% 200% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: gradientShift 4s ease-in-out infinite !important;
}

/* "Untukmu" — pastikan ikut warna gradient yang sama
   Caranya: wrap semua setelah Sempurna juga jadi highlight via JS patch
   Untuk fallback CSS: force semua teks di h1 baris 2 ikut style */
.hero h1 {
  /* tidak ada garis di mana pun */
  text-decoration: none !important;
}

/* ============================================================
   PATCH: HERO 3D PHONE — Tidak terpotong
   ============================================================ */

/* Pastikan hero overflow visible */
.hero {
  overflow: visible !important;
}

#hero3dPhone {
  position: absolute !important;
  right: clamp(1.5rem, 6vw, 7rem) !important;
  /* Ganti top: 50% + transform ke fixed dari atas agar tidak terpotong */
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: clamp(140px, 15vw, 220px) !important;
  /* Kurangi tinggi supaya masuk viewport */
  height: clamp(250px, 30vw, 400px) !important;
  z-index: 5 !important;
  pointer-events: none !important;
  perspective: 1200px !important;
  overflow: visible !important;
}

/* Animasi float — range kecil supaya tidak kepotong */
.phone3d-wrap {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  transform-style: preserve-3d !important;
  animation: phone3dFloatSafe 7s ease-in-out infinite !important;
  transform-origin: center 50% !important;
}

@keyframes phone3dFloatSafe {
  0%,  100% { transform: translateY(0px)   rotateY(-5deg) rotateX(2deg); }
  35%        { transform: translateY(-10px) rotateY(8deg)  rotateX(-3deg); }
  65%        { transform: translateY(7px)   rotateY(-8deg) rotateX(4deg); }
}

/* Orbit rings ikut sesuai */
#hero-orbit {
  right: clamp(0rem, 3vw, 4rem) !important;
  width: clamp(240px, 30vw, 440px) !important;
  height: clamp(240px, 30vw, 440px) !important;
  overflow: visible !important;
}

/* Hero chip tidak terpotong */
.hero-chip {
  overflow: visible !important;
  white-space: nowrap !important;
}

/* ============================================================
   PATCH: Background intro — floating phone silhouettes
   ============================================================ */

#sp-intro-phones-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.intro-phone-float {
  position: absolute;
  opacity: 0;
  animation: introPhoneRise linear infinite;
}

@keyframes introPhoneRise {
  0%   { transform: translateY(110vh) rotate(var(--rot)) scale(var(--sc)); opacity: 0; }
  8%   { opacity: var(--op); }
  90%  { opacity: var(--op); }
  100% { transform: translateY(-20vh) rotate(calc(var(--rot) + 15deg)) scale(var(--sc)); opacity: 0; }
}

/* Horizontal scan stripes on intro */
#sp-intro-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 229, 255, 0.012) 3px,
    rgba(0, 229, 255, 0.012) 4px
  );
  animation: scanlinesDrift 8s linear infinite;
}

@keyframes scanlinesDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 0 100px; }
}

/* Hex grid overlay on intro */
#sp-intro-hexgrid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpolygon points='28,2 54,17 54,47 28,62 2,47 2,17' fill='none' stroke='%2300e5ff' stroke-width='0.8'/%3E%3C/svg%3E");
  background-size: 56px 100px;
  animation: hexFade 6s ease-in-out infinite alternate;
}

@keyframes hexFade {
  0%   { opacity: 0.025; }
  100% { opacity: 0.06; }
}

/* Radial energy rings on intro */
#sp-intro-rings {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  width: clamp(400px, 80vw, 900px);
  height: clamp(400px, 80vw, 900px);
}

.intro-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 229, 255, 0.07);
  animation: introRingExpand linear infinite;
  transform-origin: center;
}

.intro-ring:nth-child(1) { animation-duration: 4s; animation-delay: 0s;  border-color: rgba(0,229,255,0.12); }
.intro-ring:nth-child(2) { animation-duration: 4s; animation-delay: -1s; border-color: rgba(139,92,246,0.08); }
.intro-ring:nth-child(3) { animation-duration: 4s; animation-delay: -2s; border-color: rgba(255,209,102,0.06); }
.intro-ring:nth-child(4) { animation-duration: 4s; animation-delay: -3s; border-color: rgba(0,229,255,0.05); }

@keyframes introRingExpand {
  0%   { transform: scale(0.2); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Circuit lines on intro */
#sp-intro-circuit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
}

/* ============================================================
   PATCH: Footer — Social Media Section Decoration
   ============================================================ */

footer .footer-social-section {
  position: relative;
  margin: 1.5rem 0;
  padding: 1.5rem 0;
}

.footer-signal-dot {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: signalFloat ease-in-out infinite alternate;
}

@keyframes signalFloat {
  0%   { transform: translateY(0px) scale(1); opacity: 0.6; }
  100% { transform: translateY(-14px) scale(1.2); opacity: 1; }
}

.footer-shimmer-bar {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,229,255,0.15) 20%,
    rgba(139,92,246,0.3) 40%,
    rgba(255,209,102,0.2) 60%,
    rgba(0,229,255,0.15) 80%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmerBarMove 3s linear infinite;
  margin: 1.2rem 0;
  width: 100%;
}

@keyframes shimmerBarMove {
  0%   { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

.footer-float-phone {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: footerPhoneAppear ease-in-out infinite;
}

@keyframes footerPhoneAppear {
  0%   { opacity: 0; transform: translateY(20px) rotate(var(--rot)); }
  20%  { opacity: 0.12; }
  80%  { opacity: 0.08; }
  100% { opacity: 0; transform: translateY(-20px) rotate(calc(var(--rot) + 10deg)); }
}

.footer-dot-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle, rgba(0,229,255,0.15) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.08;
  animation: dotGridPulse 4s ease-in-out infinite;
  border-radius: 12px;
}

@keyframes dotGridPulse {
  0%, 100% { opacity: 0.06; transform: scale(1); }
  50%       { opacity: 0.14; transform: scale(1.02); }
}

.footer-wave-bg {
  position: absolute;
  left: 0; right: 0;
  height: 60px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.footer-wave-bg::before,
.footer-wave-bg::after {
  content: '';
  position: absolute;
  left: -100%;
  width: 300%;
  height: 100%;
  border-radius: 50%;
}

.footer-wave-bg::before {
  top: -30px;
  background: rgba(0,229,255,0.04);
  animation: waveDrift1 8s linear infinite;
}

.footer-wave-bg::after {
  top: -20px;
  background: rgba(139,92,246,0.03);
  animation: waveDrift2 11s linear infinite reverse;
}

@keyframes waveDrift1 {
  0%   { transform: translateX(0) scaleY(1); }
  50%  { transform: translateX(20%) scaleY(1.3); }
  100% { transform: translateX(0) scaleY(1); }
}
@keyframes waveDrift2 {
  0%   { transform: translateX(0) scaleY(1); }
  50%  { transform: translateX(-15%) scaleY(1.2); }
  100% { transform: translateX(0) scaleY(1); }
}

footer a[href*="wa.me"]:hover,
footer a[href*="instagram"]:hover,
footer a[href*="maps"]:hover {
  box-shadow: 0 0 20px currentColor, 0 0 40px rgba(0,229,255,0.1) !important;
  transform: translateY(-3px) scale(1.04) !important;
  transition: all 0.3s cubic-bezier(0.23,1,0.32,1) !important;
}

/* ============================================================
   PATCH: Intro Logo 3D Phone CSS Support
   ============================================================ */

.intro-phone-3d-wrap {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  animation: intro3dPhoneSpin 8s ease-in-out infinite;
  perspective: 400px;
}

@keyframes intro3dPhoneSpin {
  0%   { transform: rotateY(0deg) rotateX(0deg); }
  20%  { transform: rotateY(30deg) rotateX(-10deg); }
  40%  { transform: rotateY(-25deg) rotateX(8deg); }
  60%  { transform: rotateY(20deg) rotateX(-5deg); }
  80%  { transform: rotateY(-15deg) rotateX(10deg); }
  100% { transform: rotateY(0deg) rotateX(0deg); }
}

footer {
  position: relative;
  overflow: hidden;
}

.footer-sosmed-container {
  position: relative;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.5rem 0;
  padding: 1.2rem;
  border-radius: 16px;
}

.footer-sosmed-container::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(37,211,102,0.2),
    rgba(139,92,246,0.2),
    rgba(234,67,53,0.15),
    rgba(0,229,255,0.2)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: sosmedBorderRotate 6s linear infinite;
  background-size: 300% 300%;
}

@keyframes sosmedBorderRotate {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================================
   PATCH: Intro background gradient animated
   ============================================================ */

#sp-intro {
  background: #020408 !important;
}

#sp-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 45% at 30% 40%, rgba(0,229,255,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 70% 60%, rgba(139,92,246,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 50% 20%, rgba(255,209,102,0.04) 0%, transparent 50%);
  animation: introMeshShift 12s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes introMeshShift {
  0%   { opacity: 0.7; filter: hue-rotate(0deg); }
  50%  { opacity: 1;   filter: hue-rotate(20deg); }
  100% { opacity: 0.8; filter: hue-rotate(-10deg); }
}

/* ============================================================
   PATCH: Footer bottom decoration
   ============================================================ */

.footer-bottom-deco {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(0,229,255,0.3),
    rgba(139,92,246,0.4),
    rgba(255,209,102,0.25),
    rgba(0,229,255,0.3),
    transparent
  );
  background-size: 200% 100%;
  animation: footerBottomShimmer 4s linear infinite;
}

@keyframes footerBottomShimmer {
  0%   { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

@keyframes signalIconFloat {
  0%   { opacity: 0; transform: translateY(10px) scale(0.8); }
  30%  { opacity: 0.4; }
  70%  { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(-30px) scale(1.1); }
}

/* ============================================================
   FIX BARU: Hero teks "Untukmu" ikut warna gradient Sempurna
   ============================================================ */

/* Seluruh teks pada h1 di baris yang sama dengan .hero-highlight
   akan dibungkus via JS patch. CSS fallback: pastikan tidak ada
   -webkit-text-fill-color yang memaksa warna berbeda pada span biasa */
.hero h1 > span:not(.hero-highlight),
.hero h1 > br + * {
  /* reset kalau ada override */
  color: inherit;
}

/* Khusus: class hero-gradient-text yang akan diinject oleh patch_app.js */
.hero-gradient-text {
  background: linear-gradient(135deg, #00e5ff 0%, #8b5cf6 50%, #ffd166 100%) !important;
  background-size: 200% 200% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: gradientShift 4s ease-in-out infinite !important;
  display: inline !important;
}

/* ============================================================
   FIX: Loading text "Rekomendasi Cerdas" — jauh lebih besar
   ============================================================ */
.loading-logo {
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  margin-bottom: 2.5rem !important;
}