.elementor-1997 .elementor-element.elementor-element-ad45037{--display:flex;--min-height:100vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-1997 .elementor-element.elementor-element-ad45037:not(.elementor-motion-effects-element-type-background), .elementor-1997 .elementor-element.elementor-element-ad45037 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-684e0d0 );}.elementor-1997 .elementor-element.elementor-element-2a1f81f{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1997 .elementor-element.elementor-element-dfab06c{width:var( --container-widget-width, 60% );max-width:60%;--container-widget-width:60%;--container-widget-flex-grow:0;text-align:center;}.elementor-1997 .elementor-element.elementor-element-dfab06c .elementor-heading-title{font-size:2em;font-weight:700;color:var( --e-global-color-secondary );}.elementor-1997 .elementor-element.elementor-element-dfab06c .elementor-heading-title a:hover, .elementor-1997 .elementor-element.elementor-element-dfab06c .elementor-heading-title a:focus{color:#FFBE00;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-1997 .elementor-element.elementor-element-0e8dbee{width:var( --container-widget-width, 60% );max-width:60%;--container-widget-width:60%;--container-widget-flex-grow:0;text-align:center;font-family:"Plus Jakarta Sans", Sans-serif;font-size:1em;font-weight:400;color:var( --e-global-color-secondary );}.elementor-1997 .elementor-element.elementor-element-0e8dbee a{color:var( --e-global-color-primary );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1997 .elementor-element.elementor-element-4eef2e7 .elementor-button{background-color:var( --e-global-color-primary );font-size:1.2em;font-weight:700;fill:var( --e-global-color-de7e508 );color:var( --e-global-color-de7e508 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-primary );border-radius:6px 6px 6px 6px;}.elementor-1997 .elementor-element.elementor-element-4eef2e7 .elementor-button:hover, .elementor-1997 .elementor-element.elementor-element-4eef2e7 .elementor-button:focus{background-color:var( --e-global-color-accent );color:var( --e-global-color-de7e508 );border-color:var( --e-global-color-accent );}.elementor-1997 .elementor-element.elementor-element-4eef2e7 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-1997 .elementor-element.elementor-element-4eef2e7 .elementor-button .elementor-button-content-wrapper{gap:10px;}.elementor-1997 .elementor-element.elementor-element-4eef2e7 .elementor-button:hover svg, .elementor-1997 .elementor-element.elementor-element-4eef2e7 .elementor-button:focus svg{fill:var( --e-global-color-de7e508 );}@media(max-width:1024px){.elementor-1997 .elementor-element.elementor-element-dfab06c{width:var( --container-widget-width, 85% );max-width:85%;--container-widget-width:85%;--container-widget-flex-grow:0;text-align:center;}.elementor-1997 .elementor-element.elementor-element-dfab06c.elementor-element{--align-self:center;}.elementor-1997 .elementor-element.elementor-element-dfab06c .elementor-heading-title{font-size:2em;}.elementor-1997 .elementor-element.elementor-element-0e8dbee{width:100%;max-width:100%;text-align:center;}.elementor-1997 .elementor-element.elementor-element-4eef2e7.elementor-element{--order:99999 /* order end hack */;}}@media(max-width:767px){.elementor-1997 .elementor-element.elementor-element-ad45037{--gap:15px 15px;--row-gap:15px;--column-gap:15px;}.elementor-1997 .elementor-element.elementor-element-dfab06c{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-1997 .elementor-element.elementor-element-dfab06c .elementor-heading-title{font-size:2em;}.elementor-1997 .elementor-element.elementor-element-0e8dbee{text-align:center;}.elementor-1997 .elementor-element.elementor-element-4eef2e7{padding:0em 0em 0em 0em;}.elementor-1997 .elementor-element.elementor-element-4eef2e7.elementor-element{--align-self:stretch;}}/* Start custom CSS for html, class: .elementor-element-2a1f81f */@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   1. CONTAINER UTAMA & RESET (Terisolasi)
   ========================================================================== */
.winfor-character-section {
  width: 100%;
  max-width: 380px; /* Lebar maksimal container agar rapi di desktop */
  margin: 0 auto;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
}

.winfor-character-section * {
  box-sizing: border-box; /* Memastikan padding tidak merusak lebar elemen */
}

/* ==========================================================================
   2. AVATAR CARD (Frame Utama Animasi)
   ========================================================================== */
.winfor-character-section .avatar-card {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Memotong partikel yang keluar dari frame */
  
  /* Style & Warna (Winfor Tone) */
  background: linear-gradient(180deg, #1A2645 0%, #2B3F71 100%);
  border: 1px solid #4F6089;
  border-radius: 28px;
  box-shadow: 0 20px 40px rgba(26, 38, 69, 0.2);

  /* --- TINGGI DEFAULT (DESKTOP) --- */
  height: 450px; 
}

/* ==========================================================================
   3. ELEMEN LATAR BELAKANG (Canvas & Portal)
   ========================================================================== */

/* Canvas Partikel (Diatur lewat JS) */
.winfor-character-section #particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Di bawah karakter */
  pointer-events: none; /* Klik tembus ke elemen di bawahnya */
}

/* Busur Portal Glowing (Tone Kuning Winfor) */
.winfor-character-section .arch-portal {
  position: absolute;
  top: 25px;
  width: 220px;
  height: 350px;
  background: linear-gradient(180deg, rgba(254, 179, 1, 0.15) 0%, rgba(26, 38, 69, 0) 100%);
  border-radius: 110px 110px 0 0;
  border-top: 1.5px solid #FEB301;
  border-left: 1px solid rgba(254, 179, 1, 0.3);
  border-right: 1px solid rgba(254, 179, 1, 0.3);
  z-index: 2;
}

/* ==========================================================================
   4. UI BADGES (Label Melayang)
   ========================================================================== */
.winfor-character-section .ui-badge {
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid #EAECF1;
  color: #2B3F71;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8em;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Posisi Badge Kiri */
.winfor-character-section .badge-left {
  top: 80px;
  left: 8px;
  animation: winforFloatSmooth 4s ease-in-out infinite;
}

/* Posisi Badge Kanan */
.winfor-character-section .badge-right {
  top: 130px;
  right: 8px;
  animation: winforFloatSmooth 4s ease-in-out infinite 2s; /* Delay 2s */
}

/* Titik Status Glowing */
.winfor-character-section .status-dot {
  width: 7px;
  height: 7px;
  background-color: #FEB301;
  border-radius: 50%;
  box-shadow: 0 0 8px #FEB301;
  animation: winforPulse 2s infinite;
}

/* ==========================================================================
   5. KARAKTER SVG & PODIUM
   ========================================================================== */

/* Wrapper Karakter (Untuk Animasi Mengambang) */
.winfor-character-section .character-wrapper {
  position: relative;
  width: 240px;
  height: 300px;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: winforMainFloating 4s ease-in-out infinite;
}

/* Elemen SVG Asli */
.winfor-character-section .svg-avatar {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 15px 20px rgba(0,0,0,0.3));
}

/* Bagian Tangan yang Melambai (Dadah) */
.winfor-character-section .waving-arm {
  transform-origin: 145px 145px; /* Titik tumpu rotasi di bahu */
  animation: winforWaveSequence 4s ease-in-out infinite;
}

/* Container Podium */
.winfor-character-section .podium-container {
  position: absolute;
  bottom: 20px;
  width: 230px;
  height: 60px;
  z-index: 3;
}

/* Bagian Atas Podium (Kaca Glowing) */
.winfor-character-section .podium-glass-top {
  width: 100%;
  height: 35px;
  background: linear-gradient(135deg, rgba(254, 179, 1, 0.4), rgba(79, 96, 137, 0.6));
  border: 1.5px solid #FEB301;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(254, 179, 1, 0.3);
}

/* Bagian Bawah Podium */
.winfor-character-section .podium-glass-base {
  width: 82%;
  height: 25px;
  margin: -14px auto 0 auto;
  background: linear-gradient(180deg, rgba(79, 96, 137, 0.4), #1A2645);
  border-radius: 0 0 50% 50%;
  border-bottom: 1.5px solid #A8B0C5;
}

/* ==========================================================================
   6. KEYFRAME ANIMATIONS
   ========================================================================== */

/* Animasi Tangan Melambai (Looping 4 detik) */
@keyframes winforWaveSequence {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-22deg); }
  35% { transform: rotate(14deg); }
  55% { transform: rotate(-22deg); }
  75% { transform: rotate(10deg); }
}

/* Animasi Karakter Mengambang (Naik Turun Pelan) */
@keyframes winforMainFloating {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* Animasi Badge Mengambang (Lebih Halus) */
@keyframes winforFloatSmooth {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

/* Animasi Denyut Titik Status */
@keyframes winforPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

/* ==========================================================================
   7. RESPONSIVE MEDIA QUERIES (Penyesuaian Tinggi)
   ========================================================================== */

/* Tablet (Lebar layar 768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .winfor-character-section .avatar-card {
    height: 440px; /* Tinggi disesuaikan untuk Tablet */
  }
}

/* Mobile (Lebar layar di bawah 767px) */
@media (max-width: 767px) {
  .winfor-character-section .avatar-card {
    height: 400px; /* Tinggi disesuaikan untuk Mobile */
    border-radius: 24px; /* Sedikit penyesuaian radius */
  }
}/* End custom CSS */