/* @import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap);
:root{
--body-font:"Poppins",sans-serif;
--main-color:#6d519d;
--main-color-dark:#553f7b;
--text-color:#3a4166;
--text-color-light:#a9afb8;
--text-main:#fff;
--header-height:3rem;
--body-color:#fff;
--container-color:#f6fbff}*,:after,:before{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background-color:var(--body-color);
color:var(--text-color);
font-family:var(--body-font);
font-size:var(--normal-font-size);
line-height:1.6;margin:var(--header-height) 0 0 0}
@media screen and 
(min-width:768px)
{body
{margin:0}
}h1,h2,h3,p,ul
{margin:0}
ul{list-style:none;
padding:0}
a{text-decoration:none}
img{height:auto;max-width:100%}
.as-nav{
align-items:center;
display:flex;
height:var(--header-height);
justify-content:space-between;
max-width:1024px}
@media screen and (min-width:768px)
{.as-nav{height:calc(var(--header-height) + 1.5rem)}}
@media screen and (max-width:768px)
{.as-nav__menu{
background-color:var(--body-color);
border-radius:0 0 1rem 1rem;
box-shadow:0 4px 4px rgba(0,0,0,.1);
left:0;
padding:1.5rem 0 1rem;
position:fixed;
text-align:center;
top:-100%;
transition:.4s;width:100%;z-index:100}}.as-nav__list{display:block}@media screen and (min-width:768px){.as-nav__list{display:flex}}.as-nav__item{margin-bottom:1rem}@media screen and (min-width:768px){.as-nav__item{margin-bottom:0;margin-left:2.5rem}}.as-nav__link,.as-nav__toggle{color:var(--text-color);font-weight:500}.as-nav__logo{color:var(--text-color);font-size:clamp(2rem,5vw,2.25rem);font-weight:600}.as-nav__logo:hover{color:var(--main-color)}.as-nav__link{transition:.3s}.as-nav__link:hover{color:var(--main-color)}.as-nav__toggle{cursor:pointer;font-size:clamp(1rem,5vw,1.3rem)}@media screen and (min-width:768px){.as-nav__toggle{display:none}}.show-menu{top:var(--header-height)}.active-link{color:var(--main-color)}.scroll-header{box-shadow:0 2px 4px rgba(0,0,0,.1)}.as-hero__containerr{align-content:center;height:calc(100vh - var(--header-height))}@media screen and (min-width:576px){.as-hero__container{align-items:center;display:grid;grid-template-columns:repeat(2,1fr)}}@media screen and (min-height:721px){.as-hero__container{height:640px}}@media screen and (min-width:768px){.as-hero__container{height:100vh;justify-items:center}}.as-hero__title{color:var(--text-color);font-size:clamp(2.5rem,5vw,3rem);margin-bottom:.5rem;margin-top:8rem}.as-hero__subtitle{color:var(--text-color);font-size:clamp(1rem,5vw,1.25rem);margin-bottom:2rem}.as-hero__img{justify-self:center;width:100%}@media screen and (min-width:960px){.as-hero__img{width:500px}}.as-container{margin-left:1rem;margin-right:1rem;max-width:960px;width:calc(100% - 2rem)}@media screen and (min-width:960px){.as-container{margin-left:auto;margin-right:auto}}.as-header{background-color:var(--body-color);left:0;position:fixed;top:0;width:100%;z-index:100}.as-button,.as-grid__button{background-color:var(--main-color);border-radius:32px;color:var(--text-main);display:inline-block;font-size:clamp(.875rem,5vw,1rem);padding:.75rem 2rem;transition:.3s}.as-button:hover,.as-grid__button:hover{background-color:var(--main-color-dark)}.as-footer{background:url(/src/img/pattern.webp),var(--main-color-dark);background-position:50%;background-repeat:repeat-x}@media screen and (min-width:576px){.as-footer{background-repeat:round}}.as-footer__container{align-items:center;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));row-gap:2rem}@media screen and (min-width:576px){.as-footer__container{gap:.875rem}}.as-footer__title{color:var(--text-main);display:block;font-size:clamp(.875rem,5vw,1rem);margin:.25rem 0 1.5rem}.as-footer__social{color:var(--text-main);font-size:clamp(1.25rem,5vw,1.5rem);margin-right:1rem}.as-footer__link{color:var(--text-main);display:inline-block;margin-bottom:.5rem}.as-footer__link:hover{color:var(--text-color-light)}.as-footer__copy{color:var(--text-main);font-size:clamp(.75rem,5vw,.875rem);margin-top:3.5rem;text-align:center}.as-service__container{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));row-gap:2.5rem}.as-service__content{text-align:center}.as-service__img{fill:var(--main-color);height:64px;margin-bottom:1rem;width:64px}.as-service__title{color:var(--text-color);font-size:clamp(1rem,5vw,1.25rem);margin-bottom:.5rem}.as-service__description{padding:0 1.5rem}.as-section{padding:4rem 0 3rem}@media screen and (min-width:768px){.as-section{padding-top:5rem}}.as-section-white{background-color:var(--body-color)}.as-section-soft{background-color:var(--container-color)}.as-section__description,.as-section__title{text-align:center}.as-section__title{font-size:clamp(1.5rem,5vw,2rem);margin-bottom:.5rem}.as-section__description{display:block;font-size:clamp(.875rem,5vw,1rem);font-weight:500;margin-bottom:3rem}.as-flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;justify-content:space-around;list-style:none;margin:0;padding:0}.as-flex__item{height:80px;margin-top:10px;text-align:center;width:200px}@media screen and (max-width:970px){.as-flex__item{height:80px;margin-top:10px;text-align:center;width:140px}}.as-flex__image{filter:gray;-webkit-filter:grayscale(1);margin:0 30px 40px 0;max-width:100%;opacity:.4;-webkit-transition:all .3s}.as-flex__image:hover{filter:none;-webkit-filter:grayscale(0);opacity:unset}.as-grid{grid-gap:20px;align-items:stretch;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.as-grid__card{background-color:var(--body-color);border-radius:.5rem;box-shadow:0 2px 4px rgba(3,74,40,.15)}.as-grid__card-wrapper{padding:1rem}.as-grid__image{border-radius:.5rem .5rem 0 0;max-width:100%}.as-grid__title{font-size:clamp(1rem,5vw,1.25rem);letter-spacing:-.02em;margin-bottom:1rem;margin-top:1rem}.as-grid__description{font-size:clamp(.75rem,5vw,.875rem);letter-spacing:.005em;line-height:1.5rem}.as-grid__button-wrapper{margin-bottom:28px;margin-top:24px}
.square {
    height: 350px;
    width: 100%;
    background-color: #F8F8F8;
  }
  .square3 {
    height: 150px;
    width: 100%;
    background-color: #F8F8F8;
  }
  .square2 {
    height: 450px;
    width: 100%;
    background-color: #F8F8F8;
  } */

  /* === Import Font Poppins dari Google Fonts === */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* === Root Variables === */
:root {
  --body-font: 'Poppins', sans-serif;
  --main-color: #6d519d;
  --main-color-dark: #553f7b;
  --text-color: #3a4166;
  --text-color-light: #a9afb8;
  --text-main: #fff;
  --header-height: 3rem;
  --body-color: #fff;
  --container-color: #f6fbff;
}

/* === Reset dan Global Styles === */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--body-color);
  color: var(--text-color);
  font-family: var(--body-font);
  font-size: var(--normal-font-size, 16px);
  line-height: 1.6;
  margin: var(--header-height) 0 0 0;
}

@media screen and (min-width: 768px) {
  body {
    margin: 0;
  }
}

h1, h2, h3, p, ul {
  margin: 0;
}

ul {
  list-style: none;
  padding: 0;
}

a {
  text-decoration: none;
}

img {
  height: auto;
  max-width: 100%;
}

/* === Header dan Navigasi === */
.as-header {
  background-color: var(--body-color);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  z-index: 100;
}

.as-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 50px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 999;
  /* height: var(--header-height);
  max-width: 1024px; */
}

@media screen and (min-width: 768px) {
  .as-nav {
    height: calc(var(--header-height) + 1.5rem);
  }
}

/* .as-nav__menu { kode ori
  background-color: var(--body-color);
  border-radius: 0 0 1rem 1rem;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  padding: 1.5rem 0 1rem;
  position: fixed; 
  top: -100%;
  /* left: 0; */
  /* width: 100%;
  text-align: center;
  transition: 0.4s;
  z-index: 100; 
}

baru 
.as-nav__menu .nav-link{
  color: var(--text-color);
  padding: 0.5rem 1rem;
}

@media screen and (min-width: 768px) {
  .as-nav__menu {
    position: static;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    text-align: left;
    background-color: transparent;
  }
} */

/* Default: menu hidden di mobile */
.as-nav__menu {
  display: none;
  flex-direction: column;
  background: white;
  position: absolute;
  top: 60px;
  right: 10px;
  width: 200px;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Kalau aktif (dari JS) */
.as-nav__menu.show-menu {
  display: flex;
}

/* Icon toggle hanya muncul di mobile */
#nav-toggle {
  display: none;
  font-size: 2rem;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .as-nav__list {
    flex-direction: column;
    gap: 10px;
  }

  #nav-toggle {
    display: block;
  }
}
/* Default (Desktop) */
.as-nav__menu {
  display: flex;
  flex-direction: row;
  gap: 20px;
  position: static;
  background: none;
  box-shadow: none;
  padding: 0;
  width: auto;
}

/* Icon hamburger hidden di desktop */
#nav-toggle {
  display: none;
}

/* Mobile mode */
@media screen and (max-width: 768px) {
  .as-nav__menu {
    display: none; /* default hidden */
    flex-direction: column;
    background: white;
    position: absolute;
    top: 60px;
    right: 10px;
    width: 200px;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }

  /* Jika toggle aktif */
  .as-nav__menu.show-menu {
    display: flex;
  }

  #nav-toggle {
    display: block;
    font-size: 2rem;
    cursor: pointer;
  }
}

/* ini untuk menu kontak */
/* Default sembunyi di mobile */
.as-nav__menu {
  display: none;
}

/* Saat toggle aktif */
.as-nav__menu.show-menu {
  display: block;
  position: absolute;
  top: 60px; /* sesuaikan tinggi nav */
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.as-nav__list {
  display: flex;
  gap: 30px;
  margin: 10px;
  padding: 0;
  list-style: none;
}

@media screen and (min-width: 768px) {
  .as-nav__list {
    display: flex;
  }
}

.as-nav__item {
  display: flex;
  align-items: center;
  /* margin-bottom: 1rem; */
}

@media screen and (min-width: 768px) {
  .as-nav__item {
    margin: 0 0 0 2.5rem;
  }
}

.as-nav__logo {
  font-size: 1.8rem;
  /* font-size: clamp(2rem, 5vw, 2.25rem); */
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-color);
}

.as-nav__logo:hover,
.as-nav__link:hover {
  color: #007bff;
  /* color: var(--main-color); */
}

.as-nav__link,
.as-nav__toggle {
  text-decoration: none;
  color: #333;
  font-size: 1rem;
  /* color: var(--text-color); */
  font-weight: 500;
  padding: 8px 12px;
  transition: color 0.3s ease;
}

.as-nav__toggle {
  cursor: pointer;
  font-size: clamp(1rem, 5vw, 1.3rem);
}

@media screen and (min-width: 768px) {
  .as-nav__toggle {
    display: none;
  }
}

.show-menu {
  top: var(--header-height);
}

.active-link {
  color: var(--main-color);
}

.scroll-header {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* === Hero Section === */
.as-hero__container {
  align-content: center;
  height: calc(100vh - var(--header-height));
}

@media screen and (min-width: 576px) {
  .as-hero__container {
    display: grid;
    /* grid-template-columns: repeat(2, 1fr); */
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2rem;
  }
}

@media screen and (min-height: 721px) {
  .as-hero__container {
    height: 640px;
  }
}

@media screen and (min-width: 768px) {
  .as-hero__container {
    height: 100vh;
    justify-items: center;
  }
}

.as-hero__title {
  font-size: clamp(2.5rem, 5vw, 3rem);
  color: var(--text-color);
  margin: 8rem 0 0.5rem;
}

.as-hero__subtitle {
  font-size: clamp(1rem, 5vw, 1.25rem);
  color: var(--text-color);
  margin-bottom: 2rem;
}

.as-hero__img {
  justify-self: center;
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

@media screen and (min-width: 960px) {
  .as-hero__img {
    width: 500px;
    max-width: 400px;
  }
}

/* === Container Utility === */
.as-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;
}

/* === Buttons === */
.as-button,
.as-grid__button {
  display: inline-block;
  background-color: var(--main-color);
  color: var(--text-main);
  padding: 0.75rem 2rem;
  font-size: clamp(0.875rem, 5vw, 1rem);
  border-radius: 32px;
  transition: 0.3s;
}

.as-button:hover,
.as-grid__button:hover {
  background-color: var(--main-color-dark);
}

/* === Services Section === */
.as-service__container {
  display: grid;
  row-gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.as-service__content {
  text-align: center;
}

.as-service__img {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  fill: var(--main-color);
}

.as-service__title {
  font-size: clamp(1rem, 5vw, 1.25rem);
  color: var(--text-color);
  margin-bottom: 0.5rem;
}

.as-service__description {
  padding: 0 1.5rem;
}

/* === Section Padding Utility === */
.as-section {
  padding: 4rem 0 3rem;
}

@media screen and (min-width: 768px) {
  .as-section {
    padding-top: 5rem;
  }
}

.as-section-white {
  background-color: var(--body-color);
}

.as-section-soft {
  background-color: var(--container-color);
}

.as-section__title,
.as-section__description {
  text-align: center;
}

.as-section__title {
  font-size: clamp(1.5rem, 5vw, 2rem);
  margin-bottom: 0.5rem;
}

.as-section__description {
  font-size: clamp(0.875rem, 5vw, 1rem);
  font-weight: 500;
  margin-bottom: 3rem;
}

/* === Flex Section === */
.as-flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  list-style: none;
  margin: 0;
  padding: 0;
}

.as-flex__item {
  height: 80px;
  width: 200px;
  text-align: center;
  margin-top: 10px;
}

@media screen and (max-width: 970px) {
  .as-flex__item {
    width: 140px;
  }
}

.as-flex__image {
  max-width: 100%;
  margin: 0 30px 40px 0;
  filter: grayscale(1);
  opacity: 0.4;
  transition: all 0.3s;
}

.as-flex__image:hover {
  filter: none;
  opacity: 1;
}

/* === Grid Section === */
.as-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  align-items: stretch;
}

.as-grid__card {
  background-color: var(--body-color);
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(3, 74, 40, 0.15);
}

.as-grid__card-wrapper {
  padding: 1rem;
}

.as-grid__image {
  max-width: 100%;
  border-radius: 0.5rem 0.5rem 0 0;
}

.as-grid__title {
  font-size: clamp(1rem, 5vw, 1.25rem);
  margin: 1rem 0;
  letter-spacing: -0.02em;
}

.as-grid__description {
  font-size: clamp(0.75rem, 5vw, 0.875rem);
  line-height: 1.5rem;
  letter-spacing: 0.005em;
}

.as-grid__button-wrapper {
  margin: 24px 0 28px;
}

/* === Custom Square Sections === */
.square,
.square2,
.square3 {
  width: 100%;
  background-color: #F8F8F8;
}

.square {
  height: 350px;
}

.square2 {
  height: 450px;
}

.square3 {
  height: 150px;
}

/* new style */
.table-header {
  background-color: #04AA6D;
  color: white;
}

.table a {
  color: #007bff;
  text-decoration: none;
}

.table a:hover {
  text-decoration: underline;
}

.table td, .table th {
  vertical-align: middle;
}

.table-hover tbody tr:hover {
  background-color: #f1f1f1;
}

/* === Sponsorship & Media Partner === */
.as-section-soft {
  padding: 30px 0;
  text-align: center;
}

.as-section__title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 15px;
}

.as-section__description {
  margin-bottom: 20px;
}

/* Flex container untuk logo */
.as-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Item logo */
.as-flex__item {
  flex: 0 1 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Gambar logo */
.as-flex__image {
  max-width: 100%;
  max-height: 80px; /* tinggi maksimal logo */
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

.as-flex__image:hover {
  opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .as-flex__item {
    flex: 0 1 80px;
  }
  .as-flex__image {
    max-height: 60px;
  }
}

/* === Footer === */
.as-footer {
  background: url('/src/img/pattern.webp'), #1d1d1d;
  background-repeat: round;
  color: #00aaff; /* biru untuk teks default */
  padding: 8px 0; /* tipis */
  font-size: 0.9rem;
  text-align: center;
}

.as-footer__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.as-footer__content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Link dan icon sosial */
.as-footer__link,
.as-footer__copy,
.as-footer__social i {
  color: #00aaff;
  text-decoration: none;
  transition: color 0.3s;
}

.as-footer__link:hover,
.as-footer__social i:hover {
  color: #0088cc; /* biru lebih gelap saat hover */
}

/* Ikon sosial */
.as-footer__social {
  font-size: clamp(1.25rem, 5vw, 1.5rem);
}

/* Copyright */
.as-footer__copy {
  font-size: clamp(0.75rem, 5vw, 0.875rem);
  text-align: center;
  margin-top: 5px;
}

/* Responsif */
@media (max-width: 768px) {
  .as-footer__container {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}