* ==========================================================================
    HOME — KHUSUS HALAMAN INDEX.HTML
    ========================================================================== */

  /* ==========================================================================
      5. HERO SECTION
      ========================================================================== */

    .hero-section {
      position: relative;
      min-height: 83vh;
      display: flex;
      align-items: center;
      overflow: hidden;

      background:
        radial-gradient(
          circle at 12% 30%,
          rgba(214, 40, 40, 0.08),
          transparent 28%
        ),
        linear-gradient(
          120deg,
          #ffffff 0%,
          #f8fbff 48%,
          #edf5fc 100%
        );
    }

    .hero-row {
      min-height: 78vh;
    }

    .hero-content {
      position: relative;
      z-index: 3;
      max-width: 700px;
      padding: 50px 0;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 25px;
      padding: 10px 18px;
      color: var(--dce-blue);
      background-color: var(--dce-white);
      border: 1.5px solid rgba(214, 40, 40, 0.5);
      border-radius: 999px;
      font-size: 0.82rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.35px;
      box-shadow: 0 9px 22px rgba(15, 61, 110, 0.1);
    }

    .hero-title {
  margin-bottom: 24px;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(3.6rem, 5vw, 4.9rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -2px;
}

.hero-title-navy {
  display: block;

  color: #0F3D6E;
  font-weight: 900;

  text-shadow:
    0 3px 12px rgba(15, 61, 110, 0.16);
}

.hero-title-accent {
  display: block;

  margin-top: 12px;

  color: #D62828;
  font-weight: 800;

  text-shadow:
    0 3px 10px rgba(214, 40, 40, 0.14);
}

    .hero-title-accent strong {
      color: var(--dce-red);
      font-weight: 800;
    }

    .hero-description {
      max-width: 650px;
      margin-bottom: 34px;
      color: var(--text-body);
      font-size: 1.06rem;
      line-height: 1.85;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    .hero-actions .btn {
      min-width: 205px;
      padding: 14px 27px;
    }

    .hero-aircraft-wrapper{
        position: absolute;

        right: 0;
        bottom: 0;   /* ini yang membuat maskot menempel ke bawah */

        width: 52%;
        margin-right: 80px;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }

    .hero-aircraft {
      position: relative;
      z-index: 1;

      width: 1300px;   /* sebelumnya 930px */

      max-width: none;
      opacity: 1;

      filter:
        contrast(1.12)
        saturate(1.08)
        drop-shadow(0 35px 32px rgba(15, 23, 42, 0.2));

      transform: translateX(40px) translateY(20px);

      animation: aircraft-floating 5s ease-in-out infinite;
    }
    @keyframes aircraft-floating {
      0%,
      100% {
        transform: translateX(20px) translateY(0);
      }

      50% {
        transform: translateX(20px) translateY(-10px);
      }
    }

    /* ==========================================================================
      6. STATISTIK
      ========================================================================== */

    .statistics-section{

    background:linear-gradient(
    135deg,
    var(--dce-blue-dark),
    var(--dce-blue)
    );
    }

    .statistic-item {
      position: relative;
      padding: 10px 20px;
    }

    .statistic-item::after {
      content: '';
      position: absolute;
      top: 10%;
      right: 0;
      width: 1px;
      height: 80%;
      background-color: rgba(255, 255, 255, 0.13);
    }

    .statistic-last::after {
      display: none;
    }

    .statistic-item h3 {
      margin-bottom: 4px;
      color: #ef4444;
      font-size: clamp(1.8rem, 3vw, 2.5rem);
      font-weight: 800;
    }

    .statistic-item p {
      color: rgba(255, 255, 255, 0.68);
      font-size: 0.87rem;
    }

    /* ==========================================================================
      7. JUDUL SECTION
      ========================================================================== */

    .section-heading {
      max-width: 760px;
      margin: 0 auto 50px;
    }

    .section-heading h2,
    .routes-header h2 {
      margin-top: 7px;
      color: var(--dce-blue);
      font-size: clamp(1.8rem, 3vw, 2.4rem);
    }

    .section-heading p {
      margin-top: 12px;
      color: var(--text-muted);
    }

    /* ==========================================================================
      8. KEUNGGULAN
      ========================================================================== */

    .advantages-section {
      padding: 85px 0;
      background-color: var(--bg-light);
    }

    .advantage-card {
      height: 100%;
      padding: 30px;
      background-color: var(--dce-white);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      box-shadow: var(--shadow-small);
      transition: var(--transition-fast);
    }

    .advantage-card:hover {
      border-color: rgba(214, 40, 40, 0.4);
      transform: translateY(-8px);
      box-shadow: var(--shadow-large);
    }

    .feature-icon-box {
      width: 62px;
      height: 62px;
      margin-bottom: 20px;

      display: flex;
      align-items: center;
      justify-content: center;

      color: var(--dce-blue-medium);
      background-color: var(--dce-blue-soft);

      border-radius: 15px;
      font-size: 1.6rem;
      transition: var(--transition-fast);
    }

    .advantage-card:hover .feature-icon-box {
      color: var(--dce-white);
      background-color: var(--dce-blue-medium);
      transform: translateY(-2px) scale(1.05);
    }

    .advantage-card h3 {
      margin-bottom: 11px;
      font-size: 1.15rem;
    }

    .advantage-card p {
      color: var(--text-muted);
      font-size: 0.91rem;
    }

    /* ==========================================================================
      9. RUTE
      ========================================================================== */

    .routes-section {
      padding: 85px 0;
      background-color: var(--bg-light);
    }

    .routes-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 45px;
    }

    .all-routes-link {
      color: var(--dce-red);
      font-weight: 700;
    }

    .all-routes-link:hover {
      color: var(--dce-red-dark);
      transform: translateX(4px);
    }

    .route-card {
      height: 100%;
      padding: 30px;
      background-color: var(--dce-white);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      box-shadow: var(--shadow-small);
      transition: var(--transition-fast);
    }

    .route-card:hover {
      border-color: var(--dce-red);
      transform: translateY(-8px);
      box-shadow: var(--shadow-large);
    }

    .route-code {
      display: inline-block;
      margin-bottom: 18px;
      padding: 7px 12px;

      color: var(--dce-white);
      background-color: var(--dce-blue);

      border-radius: 999px;
      font-size: 0.78rem;
      font-weight: 600;
    }

    .route-card h3 {
      margin-bottom: 6px;
      font-size: 1.18rem;
    }

    .route-card p {
      min-height: 50px;
      color: var(--text-muted);
      font-size: 0.88rem;
    }

    .route-card hr {
      margin: 20px 0;
      border-color: var(--border-color);
      opacity: 1;
    }

    .route-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .price-label {
      display: block;
      color: var(--text-muted);
      font-size: 0.8rem;
    }

    .route-price {
      color: var(--dce-red);
      font-size: 1.35rem;
      font-weight: 800;
    }

    .route-price small {
      color: var(--text-muted);
      font-size: 0.8rem;
      font-weight: 400;
    }

    /* ==========================================================================
      10. CTA
      ========================================================================== */

    .cta-section {
      position: relative;
      overflow: hidden;
      padding: 75px 0;
      color: var(--dce-white);
      background: linear-gradient(135deg, var(--dce-blue), var(--dce-blue-medium));
    }

    .cta-section::before {
      content: '';
      position: absolute;
      top: -100px;
      left: -80px;
      width: 280px;
      height: 280px;
      border: 50px solid rgba(255, 255, 255, 0.05);
      border-radius: 50%;
    }

    .cta-section::after {
      content: '';
      position: absolute;
      right: -90px;
      bottom: -130px;
      width: 350px;
      height: 350px;
      border: 55px solid rgba(255, 255, 255, 0.05);
      border-radius: 50%;
    }

    .cta-section .container {
      position: relative;
      z-index: 2;
    }

    .cta-section h2 {
      margin-bottom: 15px;
      color: rgb(255, 255, 255);
      font-size: clamp(2rem, 4vw, 2.8rem);
    }

    .cta-section p {
      max-width: 850px;
      margin: 0 auto 28px;
      color: rgba(255, 255, 255, 0.85);
    }

  /* ==========================================================================
      13. RESPONSIVE TABLET
      ========================================================================== */

    @media (max-width: 991.98px) {
      .hero-section {
        min-height: auto;
      }

      .hero-row {
        min-height: auto;
        padding: 40px 0 70px;
      }

      .hero-content {
        max-width: 750px;
        margin: auto;
        padding: 55px 0 20px;
        text-align: center;
      }

      .hero-description {
        margin-right: auto;
        margin-left: auto;
      }

      .hero-actions {
        justify-content: center;
      }

      .hero-aircraft-wrapper{
        width:100%;
        margin-left:0;
        position:relative;
    }

    .hero-aircraft{
      width:100%;
      max-width:430px;
      height:auto;
  }

      @keyframes aircraft-floating {
        0%,
        100% {
          transform: translateY(0);
        }

        50% {
          transform: translateY(-8px);
        }
      }

      .routes-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
      }
    }

  /* ==========================================================
      MITRA SERVICE
      ========================================================== */

    .partners-section {
        padding: 90px 0;
        position: relative;
        overflow: hidden;

        background: linear-gradient(
            180deg,
            #1B4F8C 0%,
            #255E9F 45%,
            #2D6FB8 100%
        );
    }

    .section-label {
        display: inline-block;

        font-size: 1.4rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 3px;

        color: #d33636; 

        margin-bottom: 14px;
    }

    .partners-heading {
      max-width: 760px;
      margin: 0 auto 45px;
    }


    .partners-heading h2 {
      margin-top: 8px;
      color: var(--dce-white);
      font-size: clamp(2rem, 4vw, 2.8rem);
    }

    .partners-heading p {
        margin-top: 10px;

        color: rgba(255,255,255,.95);

        font-size: 1.1rem;
        line-height: 1.8;
        font-weight: 400;

        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }

    .partner-card {
      height: 130px;
      padding: 22px;

      display: flex;
      align-items: center;
      justify-content: center;

      background-color: var(--dce-white);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 15px;

      box-shadow: 0 12px 28px rgba(8, 27, 44, 0.2);
      transition: var(--transition-fast);
    }

    .partner-card:hover {
      transform: translateY(-7px);
      box-shadow: 0 20px 38px rgba(8, 27, 44, 0.28);
    }

    .partner-card img {
      width: 100%;
      max-width: 180px;
      max-height: 75px;
      object-fit: contain;
      filter: grayscale(12%);
      transition: var(--transition-fast);
    }

    .partner-card:hover img {
      filter: grayscale(0%);
      transform: scale(1.05);
    }

    @media (max-width: 767.98px) {
      .partners-section {
        padding: 65px 0;
      }

      .partner-card {
        height: 105px;
        padding: 16px;
      }

      .partner-card img {
        max-height: 58px;
      }
    }

    .tracking-link {
      display: inline-block;
      margin-top: 14px;

      color: var(--dce-red);
      font-size: 0.86rem;
      font-weight: 700;
    }

    .tracking-link:hover {
      color: var(--dce-red-dark);
      transform: translateX(4px);
    }

  /* ==========================================================================
      PROMO PENGIRIMAN
      ========================================================================== */

    .promo-section {
    position: relative;
    overflow: hidden;

    padding: 105px 0 90px;

    background:
        linear-gradient(
          135deg,
          rgba(15, 61, 110, 0.97),
          rgba(30, 95, 168, 0.93)
        );
  }

    .promo-header {
      max-width: 780px;
      margin: 0 auto 60px;
      text-align: center;
    }

    .promo-header h2 {
      margin-top: 10px;
      margin-bottom: 15px;

      color: var(--dce-blue);
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 800;
      line-height: 1.2;
    }

    .promo-header p {
      color: #fff;
      font-size: 1.05rem;
      line-height: 1.8;
    }

    .promo-title{

        display:inline-flex;
        align-items:center;
        justify-content:center;

        padding:16px 40px;

        margin:18px auto 20px;

        
      background: linear-gradient(
        135deg,
        #e53935,
        #c62828
      );

        color:#fff !important;

        border-radius:16px;

        font-size:clamp(2rem,4vw,3rem);
        font-weight:800;

        box-shadow:0 12px 28px rgba(26,90,166,.25);
    }

    /* Kartu promo */

    .promo-card {
      position: relative;
      height: 100%;
      padding: 32px;

      display: flex;
      flex-direction: column;

      background-color: var(--dce-white);
      border: 1px solid var(--border-color);
      border-radius: 18px;

      box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
      transition: var(--transition-fast);
    }

    .promo-card:hover {
      border-color: rgba(214, 40, 40, 0.35);
      transform: translateY(-8px);
      box-shadow: 0 22px 48px rgba(15, 23, 42, 0.14);
    }

    /* Badge promo */

    .promo-badge{
        display: flex;
        align-items: center;
        justify-content: center;

        width: fit-content;
        min-width: 170px;
        height: 46px;

        padding: 0 24px;
        margin: 0 auto 22px;   /* Membuat badge berada di tengah */

        background: linear-gradient(
            135deg,
            var(--dce-red),
            var(--dce-red-dark)
        );

        color: #fff;

        border-radius: 999px;

        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;

        box-shadow: 0 8px 20px rgba(214,40,40,.25);
    }
    /* Judul kartu */

    .promo-card h3 {
      margin: 0 0 12px;

      color: var(--dce-blue);
      font-size: 1.2rem;
      font-weight: 700;
      line-height: 1.4;
    }

    /* Deskripsi */

    .promo-card > p {
      min-height: 78px;
      margin-bottom: 0;

      color: var(--text-muted);
      font-size: 0.91rem;
      line-height: 1.75;
    }

    /* Periode promo */

    .promo-period {
      display: flex;
      align-items: center;
      gap: 8px;

      margin-top: 18px;

      color: var(--dce-blue-medium);
      font-size: 0.82rem;
      font-weight: 600;
    }

    .promo-period i {
      flex-shrink: 0;
      color: var(--dce-blue-medium);
      font-size: 0.95rem;
    }

    .promo-header .section-label{
        color: #fff;
        font-size:1.5rem;
        font-weight:700;
        letter-spacing:2px;
        text-transform:uppercase;
    }

    /* Garis pemisah */

    .promo-card hr {
      width: 100%;
      margin: 22px 0;

      border-color: var(--border-color);
      opacity: 1;
    }

    /* Bagian harga dan tombol */

    .promo-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;

      margin-top: auto;
    }

    .promo-label {
      display: block;
      margin-bottom: 2px;

      color: var(--text-muted);
      font-size: 1.2rem;
    }

    .promo-price {
      color: var(--dce-red);
      font-size: 1.5rem;
      font-weight: 800;
      line-height: 1.2;
    }

    .promo-price small {
      color: var(--text-muted);
      font-size: 0.8rem;
      font-weight: 400;
    }

    /* Tombol Ambil Promo */

    .promo-bottom .btn {
      flex-shrink: 0;
      padding: 7px 16px;

      color: var(--dce-red);
      background-color: var(--dce-white);
      border: 1.5px solid var(--dce-red);
      border-radius: 999px;

      font-size: 0.84rem;
      font-weight: 700;
    }

    .promo-bottom .btn:hover {
      color: var(--dce-white);
      background-color: var(--dce-red);
      border-color: var(--dce-red);
      transform: translateY(-2px);
    }

    /* ==========================================================================
      RESPONSIVE PROMO
      ========================================================================== */

    @media (max-width: 991.98px) {
      .promo-section {
        padding: 85px 0 75px;
      }

      .promo-card {
        padding: 28px;
      }
    }

    @media (max-width: 767.98px) {
      .promo-section {
        padding: 70px 0 60px;
      }

      .promo-header {
        margin-bottom: 42px;
      }

      .promo-header p {
        font-size: 0.95rem;
      }

      .promo-card {
        padding: 25px;
      }

      .promo-card > p {
        min-height: auto;
      }

      .promo-bottom {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    @media (max-width: 480px) {
      .promo-badge {
        min-width: 100px;
        min-height: 38px;
        padding: 8px 16px;
        font-size: 0.78rem;
      }

      .promo-card h3 {
        font-size: 1.08rem;
      }

      .promo-price {
        font-size: 1.35rem;
      }
    }

/* ==========================================================
   HERO MOBILE FINAL DCE
   ========================================================== */

@media (max-width: 767.98px) {

  .hero-section {
    position: relative;
    min-height: 650px;
    padding: 88px 0 22px;
    margin: 0;
    overflow: hidden;

    background-image:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.90) 0%,
        rgba(255, 255, 255, 0.72) 45%,
        rgba(255, 255, 255, 0.35) 72%,
        rgba(239, 247, 255, 0.10) 100%
      ),
      url("../assets/images/bg-home-mobile1.png");

    background-size: cover;
    background-position: center top;  
    background-repeat: no-repeat;
  }

  .hero-section .container {
    position: relative;
    z-index: 2;
  }

  .hero-row {
    min-height: auto;
    margin: 0;
    padding: 0;
  }

  .hero-content {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 0 8px;
    text-align: center;
  }

  .hero-badge {
    margin: 0 auto 17px;
    padding: 8px 14px;

    font-size: 0.68rem;
    letter-spacing: 0.03em;
  }

  .hero-title {
    margin-bottom: 19px;

    font-size: clamp(2.45rem, 8.7vw, 3rem);
    font-weight: 900;
    line-height: 1.07;
    letter-spacing: -1.8px;

    text-align: center;
    text-wrap: balance;
  }

  .hero-title-navy,
  .hero-title-accent {
    display: block;
  }

  .hero-title-accent {
    margin-top: 8px;
    font-size: 0.96em;
  }

  .hero-description {
    max-width: 440px;
    margin: 0 auto 24px;
    padding: 0 4px;

    color: #42546b;
    font-size: 0.9rem;
    line-height: 1.68;
  }

  .hero-actions {
    display: flex;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;

    flex-direction: column;
    gap: 12px;
  }

  .hero-actions .btn {
    width: 100%;
    min-width: 0;
    min-height: 51px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 18px;
    font-size: 0.92rem;
  }

  /* Gambar desktop disembunyikan di mobile */
  .hero-aircraft-wrapper,
  .hero-aircraft {
    display: none !important;
  }

  /* Menghilangkan jarak menuju section berikutnya */
  .hero-section + section {
    margin-top: 0;
  }
}


/* ==========================================================
   MOBILE KECIL
   ========================================================== */

@media (max-width: 575.98px) {

  .hero-section {
    min-height: 650px;
    padding-top: 82px;
    padding-bottom: 20px;
  }

  .hero-content {
    max-width: 100%;
    padding-right: 5px;
    padding-left: 5px;
  }

  .hero-badge {
    margin-bottom: 15px;
    padding: 7px 12px;
    font-size: 0.62rem;
  }

  .hero-title {
    margin-bottom: 17px;

    font-size: clamp(2.3rem, 8.6vw, 2.65rem);
    line-height: 1.08;
    letter-spacing: -1.5px;
  }

  .hero-title-accent {
    margin-top: 7px;
  }

  .hero-description {
    margin-bottom: 22px;

    font-size: 0.85rem;
    line-height: 1.65;
  }

  .hero-actions .btn {
    min-height: 50px;
    font-size: 0.9rem;
  }
}


/* ==========================================================
   MOBILE SANGAT KECIL
   ========================================================== */

@media (max-width: 390px) {

  .hero-section {
    min-height: 630px;
    padding-top: 74px;
    padding-bottom: 18px;
  }

  .hero-badge {
    font-size: 0.57rem;
  }

  .hero-title {
    font-size: 2.05rem;
    line-height: 1.09;
    letter-spacing: -1.2px;
  }

  .hero-description {
    font-size: 0.81rem;
    line-height: 1.62;
  }

  .hero-actions .btn {
    font-size: 0.86rem;
  }
}