/* =========================================================
   AIVARA ID - FINAL CLEAN TRUE 100% FIT
   Tujuan:
   - Browser 100% harus tampil penuh.
   - Tidak pakai zoom hack.
   - Layout dipadatkan, teks tetap kebaca.
   - Visual taste tidak diubah.
   ========================================================= */

html,
body {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  zoom: 1 !important;
  transform: none !important;
  overflow-x: hidden !important;
  background: #f8fafc !important;
}

* {
  box-sizing: border-box;
}

.aivara-page-shell {
  width: 100% !important;
  max-width: 100% !important;
  min-height: auto !important;
  margin: 0 auto !important;
  padding: 18px 32px 24px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* HEADER */
.aivara-header {
  height: 50px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 20px !important;
}

.aivara-logo {
  font-size: clamp(31px, 2.1vw, 38px) !important;
  white-space: nowrap !important;
}

.aivara-nav {
  min-width: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(20px, 2.4vw, 36px) !important;
  font-size: 14.8px !important;
  white-space: nowrap !important;
}

.aivara-product-trigger {
  font-size: 14.8px !important;
  white-space: nowrap !important;
}

.aivara-top-cta {
  flex: 0 0 auto !important;
  padding: 11px 21px !important;
  font-size: 14.8px !important;
  white-space: nowrap !important;
}

/* MAIN GRID */
.aivara-main {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns:
    minmax(0, 0.92fr)
    minmax(0, 1.34fr)
    minmax(0, 0.78fr) !important;
  gap: 18px !important;
  margin-top: 22px !important;
  align-items: start !important;
}

.aivara-main > * {
  min-width: 0 !important;
}

/* LEFT HERO */
.aivara-hero {
  min-width: 0 !important;
  min-height: auto !important;
  padding-top: 24px !important;
}

.aivara-pill {
  min-height: 31px !important;
  padding: 7px 13px !important;
  font-size: 13.5px !important;
}

.aivara-hero h1 {
  max-width: 335px !important;
  margin: 19px 0 16px !important;
  font-size: clamp(39px, 3.05vw, 49px) !important;
  line-height: 0.99 !important;
  letter-spacing: -0.064em !important;
}

.aivara-hero p {
  max-width: 325px !important;
  font-size: 15px !important;
  line-height: 1.58 !important;
}

.aivara-hero-actions {
  margin-top: 23px !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.aivara-btn-primary {
  min-width: 174px !important;
  padding: 12px 18px !important;
  font-size: 14.6px !important;
}

.aivara-btn-secondary {
  min-width: 118px !important;
  padding: 11px 16px !important;
  font-size: 14px !important;
}

.aivara-trust-row {
  margin-top: 29px !important;
  padding-top: 14px !important;
  max-width: 340px !important;
  gap: 11px !important;
  flex-wrap: wrap !important;
  font-size: 12.4px !important;
}

/* CENTER VIDEO CARD */
.aivara-video-card {
  min-width: 0 !important;
  padding: 14px !important;
  border-radius: 20px !important;
}

.aivara-card-badges {
  margin-bottom: 10px !important;
  gap: 10px !important;
}

.aivara-badge-red,
.aivara-badge-green {
  padding: 7px 14px !important;
  font-size: 13.4px !important;
}

.aivara-video-frame {
  width: 100% !important;
  aspect-ratio: 16 / 7.75 !important;
  border-radius: 13px !important;
}

.aivara-selector-grid {
  margin-top: 10px !important;
  gap: 9px !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

.aivara-select-card {
  min-width: 0 !important;
  min-height: 56px !important;
  padding: 9px 30px 9px 12px !important;
  border-radius: 12px !important;
}

.aivara-select-card small {
  font-size: 12.3px !important;
}

.aivara-select-card strong {
  font-size: 13.8px !important;
  line-height: 1.24 !important;
}

.aivara-summary-row {
  margin-top: 9px !important;
  gap: 10px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.aivara-summary-row h2 {
  font-size: 13px !important;
  margin-bottom: 5px !important;
}

.aivara-summary-row p {
  font-size: 12.8px !important;
  line-height: 1.42 !important;
}

.aivara-btn-coral {
  min-width: 134px !important;
  padding: 11px 13px !important;
  font-size: 13.5px !important;
}

.aivara-mini-features {
  margin-top: 9px !important;
  gap: 8px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.aivara-mini-features article {
  min-width: 0 !important;
  min-height: 54px !important;
  padding: 9px !important;
  gap: 8px !important;
  border-radius: 12px !important;
}

.feature-icon {
  width: 33px !important;
  height: 33px !important;
  flex-basis: 33px !important;
}

.aivara-mini-features strong {
  font-size: 13px !important;
}

.aivara-mini-features small {
  font-size: 12px !important;
}

/* RIGHT CARD */
.aivara-link-card {
  min-width: 0 !important;
  padding: 18px !important;
  border-radius: 20px !important;
  min-height: auto !important;
}

.aivara-link-card h2 {
  margin: 18px 0 13px !important;
  font-size: clamp(26px, 1.95vw, 31px) !important;
  line-height: 0.99 !important;
  letter-spacing: -0.058em !important;
}

.aivara-link-card > p {
  margin-bottom: 13px !important;
  font-size: 13.8px !important;
  line-height: 1.46 !important;
}

.aivara-profile-module {
  padding: 10px !important;
  border-radius: 16px !important;
}

.aivara-profile-url {
  margin-bottom: 9px !important;
  font-size: 13.3px !important;
}

.aivara-profile-card {
  min-height: 58px !important;
  padding: 8px !important;
  margin-bottom: 9px !important;
  gap: 10px !important;
}

.aivara-profile-card img {
  width: 42px !important;
  height: 42px !important;
  flex-basis: 42px !important;
}

.aivara-profile-card strong {
  font-size: 16px !important;
}

.aivara-profile-card small {
  font-size: 12px !important;
}

.aivara-link-row {
  padding: 10px !important;
  margin-top: 7px !important;
  font-size: 13.3px !important;
  border-radius: 12px !important;
}

.aivara-link-cta {
  height: 40px !important;
  margin-top: 16px !important;
  font-size: 14.4px !important;
}

/* BOTTOM BENEFITS */
.aivara-benefits {
  margin-top: 8px !important;
  padding: 17px 20px !important;
  border-radius: 18px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.aivara-benefits article {
  min-width: 0 !important;
  min-height: 62px !important;
  gap: 11px !important;
  padding: 0 12px !important;
}

.benefit-icon {
  width: 45px !important;
  height: 45px !important;
  flex-basis: 45px !important;
}

.aivara-benefits h3 {
  font-size: 15.2px !important;
  margin-bottom: 4px !important;
}

.aivara-benefits p {
  font-size: 13px !important;
  line-height: 1.34 !important;
}

/* AIVARA THE SERIES */
.aivara-series-chip,
.aivara-series-inline {
  display: none !important;
}

.benefit-youtube {
  background: #ff0033 !important;
  color: #fff !important;
  position: relative !important;
  box-shadow: 0 16px 34px rgba(255, 0, 51, .22) !important;
}

.benefit-youtube i {
  width: 0 !important;
  height: 0 !important;
  display: block !important;
  margin-left: 3px !important;
  border-top: 8px solid transparent !important;
  border-bottom: 8px solid transparent !important;
  border-left: 14px solid #fff !important;
}

/* WINDOWS / LAPTOP SEMPIT */
@media (min-width: 1180px) and (max-width: 1390px) {
  .aivara-page-shell {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .aivara-main {
    grid-template-columns:
      minmax(0, 0.88fr)
      minmax(0, 1.30fr)
      minmax(0, 0.74fr) !important;
    gap: 14px !important;
  }

  .aivara-nav {
    gap: 22px !important;
  }

  .aivara-hero h1 {
    max-width: 305px !important;
    font-size: clamp(37px, 2.78vw, 44px) !important;
  }

  .aivara-hero p {
    max-width: 300px !important;
  }

  .aivara-video-card {
    padding: 13px !important;
  }

  .aivara-link-card {
    padding: 17px !important;
  }
}

/* TABLET/MOBILE fallback */
@media (max-width: 1179px) {
  .aivara-page-shell {
    padding: 22px !important;
  }

  .aivara-main {
    grid-template-columns: 1fr !important;
  }

  .aivara-benefits {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 760px) {
  .aivara-benefits {
    grid-template-columns: 1fr !important;
  }
}