/* FOOTER — DESKTOP */
.footer{background:var(--primary-dark);color:#dbe9f8;padding:56px 0 24px}
.footer-top{display:grid;grid-template-columns:1.2fr 1fr;gap:48px}
.footer-brand{display:flex;gap:14px;align-items:center;color:#fff}
.footer-logo{width:52px;height:52px;color:#fff;flex:none}
.footer-name{font-weight:800;font-size:var(--fs-lg);line-height:1.25}
.footer-role{font-size:var(--fs-sm);color:#b9d3ee}
.footer-desc{margin-top:16px;max-width:460px}
.footer-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.footer-item{display:flex;gap:12px;align-items:center}
.footer-item svg{width:22px;height:22px;flex:none;color:var(--accent)}
.footer-link{color:#fff}
.footer-link:hover{color:var(--accent)}
.footer-social{display:flex;gap:18px;margin-top:20px}
.footer-social a{width:44px;height:44px;display:grid;place-items:center;color:#fff;border-radius:50%;border:1px solid rgba(255,255,255,.3)}
.footer-social a:hover{background:var(--accent);color:var(--primary-dark);border-color:var(--accent)}
.footer-social svg{width:20px;height:20px}
.footer-copy{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.2);font-size:var(--fs-sm);color:#b9d3ee;text-align:center}
.footer-top-btn{position:fixed;right:20px;bottom:20px;width:48px;height:48px;border-radius:50%;border:0;background:var(--primary);color:#fff;box-shadow:var(--shadow-hover);cursor:pointer;opacity:0;pointer-events:none;transition:.2s;font-size:20px}
.footer-top-btn.is-visible{opacity:1;pointer-events:auto}
/* FOOTER — TABLET */
@media (max-width:1024px){.footer-top{gap:32px}}
/* FOOTER — MOBILE */
@media (max-width:767px){.footer{padding:40px 0 20px}.footer-top{grid-template-columns:1fr;gap:28px}}

/* FOOTER WAVE */

.footer-wave {
  width: 100%;
  height: 75px;
  line-height: 0;
  overflow: hidden;
  background: #f3f8fd;
}

.footer-wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .footer-wave {
    height: 45px;
  }
}

/* DECORATIVE WAVES AT FOOTER BOTTOM */

.footer {
  position: relative;
  overflow: hidden;
  padding-bottom: 0;
}

.footer-bottom-wave {
  width: 100%;
  height: 125px;
  line-height: 0;
  margin-top: 24px;
}

.footer-bottom-wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .footer-bottom-wave {
    height: 90px;
    margin-top: 20px;
  }
}

/* FOOTER BOTTOM WAVE — CLAUDE VERSION */

.footer-bottom-wave {
  width: 100%;
  height: clamp(90px, 11vw, 160px);
  margin-top: 24px;
  line-height: 0;
  pointer-events: none;
}

.footer-bottom-wave svg {
  display: block;
  width: 100%;
  height: 100%;
}


/* WAVE — DEEPER LAYERED COMPOSITION */

.footer-bottom-wave {
  height: clamp(125px, 11vw, 165px) !important;
  margin-top: 24px;
  overflow: hidden;
}

.footer-bottom-wave svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 767px) {
  .footer-bottom-wave {
    height: 130px !important;
  }
}


/* =========================================
   FOOTER — THREE COLUMN DESKTOP
========================================= */

@media (min-width: 768px) {
  .footer-top {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) 120px;
    gap: 48px;
    align-items: start;
  }

  /* Lepaskan wrapper kontak agar menjadi kolom grid */
  .footer-top > div:nth-child(2) {
    display: contents;
  }

  .footer-top > div:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .footer-desc {
    max-width: 300px;
    margin-top: 12px;
  }

  .footer-list {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .footer-social {
    grid-column: 3;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(2, 44px);
    gap: 12px;
    margin-top: 0;
    justify-content: end;
  }
}

/* Reset layout for tablet and mobile */
@media (max-width: 767px) {
  .footer-top > div:nth-child(2) {
    display: block;
  }

  .footer-social {
    display: flex;
    flex-wrap: wrap;
  }
}