/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.0.1
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ======================================================
   1. VARIABLES & BASE
====================================================== */
:root {
  --navy: #0f172a;
  --side-gap: clamp(28px, 6vw, 270px);
  --header-h: 120px;
  --section-padding: 150px;
  --dev-notice-height: 30px;
  --header-height: 75px; /* sesuaikan header kamu */
  --top-offset: calc(var(--dev-notice-height) + var(--header-height));

  /* Brand Colors */
  --p-green: #22682a;
  --p-yellow: #fbc02d;
  --p-blue: #5bc0eb;

  /* Neutrals - Adjusted to #333333 Base */
  --white: #ffffff;
  --gray-50: #f9f9f9; /* Background section sangat tipis */
  --gray-100: #f5f5f5; /* Background box/How We Work */
  --gray-200: #e5e5e5; /* Garis border tipis / Divider */
  --gray-400: #a3a3a3; /* Placeholder atau ikon tidak aktif */
  --gray-600: #666666; /* Teks deskripsi (Muted text) */
  --gray-900: #333333; /* Teks judul (Warna Utama Judul) */

  /* Font Family */
  --font-primary: "Poppins", sans-serif;

  /* Font Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ======================================================
     FONT SIZE SCALE
  ====================================================== */

  /* HERO Desktop */
  --fs-hero-title: 52px;
  --fs-hero-desc: 32px;

  /* HERO Mobile */
  --fsm-hero-title: 40px;
  --fsm-hero-desc: 20px;

  /* LANDING PAGE Desktop */
  --fs-section-title: 42px;
  --fs-section-desc: 22px;

  /* LANDING PAGE Mobile */
  --fsm-section-title: 26px;
  --fsm-section-desc: 17px;

  /* CONTENT INSIDE SECTION */
  --fs-content-title: 28px;
  --fs-content-desc: 18px;

  /* CONTENT INSIDE SECTION Mobile */
  --fsm-content-title: 20px;
  --fsm-content-desc: 15px;

  /* HEADER / NAV */
  --fs-nav: 14px;

  /* HEADER / NAV Mobile */
  --fs-nav: 13px;

  /* CTA */
  --fs-cta: 15px;

  /* CTA Mobile */
  --fsm-cta: 14px;

  /* FAQ */
  --fs-faq-question: 18px;
  --fs-faq-answer: 16px;

  /* FAQ Mobile */
  --fs-faq-question: 17px;
  --fs-faq-answer: 15px;

  /* FOOTER */
  --fs-footer-title: 16px;
  --fs-footer-text: 14px;

  /* FOOTER Mobile*/
  --fs-footer-title: 15px;
  --fs-footer-text: 15px;

  /* SMALL TEXT */
  --fs-caption: 12px;
}

body,
html {
  width: 100%;
  overflow-x: hidden;
  background-color: #fff;
  font-family: var(--font-primary);
  color: #ffffff;
  scroll-behavior: smooth;
  max-width: 100vw;
  overflow-x: hidden;
  opacity: 1;
  padding-bottom: var(--dev-notice-height);
}

/*.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  pointer-events: none;  WAJIB: Biar kursor tidak menghalangi klik ke tombol 
  z-index: 9999;  Pastikan paling atas 
  mix-blend-mode: difference;  Efek inverted 
}*/

#canvas-container,
.dot-grid-overlay,
canvas {
  pointer-events: none !important;
}

/* ======================================================
   2. GRID SYSTEM (KONSISTENSI 270PX)
====================================================== */
.container-270,
.hero-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--side-gap);
  position: relative;
  box-sizing: border-box;
}

/* ======================================================
   3. SECTION SPACING
====================================================== */
#main-content-flow > section {
  position: relative;
  width: 100%;
}

#header,
.elementor-header,
header.site-header {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

/* Informasi banner */
.dev-notice {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 1000003;
  background: #f1c40f;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: center;
  padding-inline: 20px;
  padding: 12px 20px;
}

/* Header stays transparent */
.site-header {
  position: fixed;
  /* Informasi banner */
  top: var(--dev-notice-height);
  height: var(--header-height);
  /* top: 0 !important; */
  left: 0;
  right: 0;
  z-index: 900;
}

/* SELURUH PAGE CONTENT DIDORONG */
#page,
#content,
main {
  padding-top: var(--dev-notice-height);
}
/* ======================================================
   4. RESPONSIVE ADJUSTMENTS
====================================================== */
@media (max-width: 1200px) {
  .container-270,
  .hero-container,
  .header-container {
    padding: 0 50px;
  }
}

@media (max-width: 768px) {
  .container-270 {
    padding: 0 20px;
  }
}

/* ================================
   NAV UNDERLINE FIX (HOVER = ACTIVE)
================================ */

/* Pastikan anchor bisa punya pseudo element */
.elementor-nav-menu .menu-item > a {
  position: relative;
  display: inline-block;
}

/* Underline default (hidden) */
.elementor-nav-menu .menu-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

/* Hover */
.elementor-nav-menu .menu-item > a:hover::after {
  transform: scaleX(1);
}

/* Active (ALL WordPress states) */
.elementor-nav-menu .menu-item.current-menu-item > a::after,
.elementor-nav-menu .menu-item.current-menu-parent > a::after,
.elementor-nav-menu .menu-item.current-menu-ancestor > a::after,
.elementor-nav-menu .menu-item.current_page_item > a::after {
  transform: scaleX(1);
}