:root{

  --primary:#0B4D9A;
  --secondary:#14C7B2;
  --accent:#FFD54F;

  --dark:#1A1A1A;
  --light:#FFFFFF;

  --radius:24px;
}

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

body{
  font-family:'Poppins',sans-serif;
  background:#f7fafc;
  color:var(--dark);
}

.container{
  width:min(1100px,90%);
  margin:auto;
}

.hero{

  min-height:100vh;

  position:relative;

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

  overflow:hidden;

  text-align:center;

  color:white;

  background:
  linear-gradient(
  135deg,
  #0B4D9A,
  #14C7B2
  );
}

.hero-bg{

  position:absolute;
  inset:0;

  background:url("logo.png") center/100% no-repeat;

  opacity:.08;

  filter:grayscale(100%);

  pointer-events:none;
}

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

.badge{

  display:inline-block;

  background:white;
  color:var(--primary);

  padding:.8rem 1.4rem;

  border-radius:999px;

  font-weight:600;

  margin-bottom:1.5rem;
}

.hero h1{

  font-size:clamp(3rem,8vw,6rem);

  line-height:.95;

  font-weight:800;

  margin-bottom:1rem;
}

.hero h1 span{
  display:block;
}

.hero p{

  font-size:clamp(1rem,2vw,1.3rem);

  margin-bottom:2rem;
}

.cta-group{

  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}

.btn{

  text-decoration:none;

  padding:1rem 2rem;

  border-radius:999px;

  font-weight:700;

  transition:.3s;
}

.primary{
  background:var(--accent);
  color:#111;
}

.secondary{
  background:white;
  color:var(--primary);
}

.info-section{
  padding:4rem 0;
}

.info-section .container{

  display:grid;
  gap:1rem;

  grid-template-columns:
  repeat(auto-fit,minmax(250px,1fr));
}

/* --- ABOUT / DESKRIPSI SECTION (FLOATING CARD) --- */
.about-section {
    /* Kita buat margin atasnya minus agar kotaknya naik menabrak header */
    margin-top: -80px; 
    position: relative;
    z-index: 10;
    padding: 0 10%;
    margin-bottom: 3rem;
}

.about-card {
    background: white;
    padding: 3rem 2rem;
    border-radius: var(--radius); /* Memakai sudut melengkung 24px milikmu */
    box-shadow: 0 15px 40px rgba(0,0,0,0.08); /* Efek bayangan lembut */
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.about-card h2 {
    color: var(--primary);
    font-size: 2rem;
    margin-bottom: 1.2rem;
}

.about-card p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1rem;
}

/* Menghilangkan jarak di paragraf terakhir agar kotaknya rapi */
.about-card p:last-child {
    margin-bottom: 0;
}

/* Penyesuaian Mobile agar tidak terlalu mepet */
@media(max-width: 768px) {
    .about-section {
        margin-top: -40px;
        padding: 0 5%;
    }
    .about-card {
        padding: 2rem 1.5rem;
    }
    .about-card h2 {
        font-size: 1.5rem;
    }
}
.info-card{

  background:white;

  padding:1.5rem;

  border-radius:var(--radius);

  box-shadow:
  0 10px 30px rgba(0,0,0,.08);

  text-align:center;
}

.program-section{
  padding:2rem 0 5rem;
}

.cards{

  display:grid;

  gap:2rem;

  grid-template-columns:
  repeat(auto-fit,minmax(320px,1fr));
}

.card{

  background:white;

  padding:2rem;

  border-radius:var(--radius);

  box-shadow:
  0 10px 30px rgba(0,0,0,.08);
}

.card h2{

  color:var(--primary);

  margin-bottom:1rem;
}

.card ul{

  margin-bottom:1.5rem;
  padding-left:1.2rem;
}

.card li{
  margin-bottom:.5rem;
}

footer{

  padding:2rem;

  text-align:center;

  color:#666;
}

/* Mobile */

@media(max-width:768px){

  .hero{
    min-height:90vh;
  }

  .btn{
    width:100%;
    max-width:320px;
  }

  .cta-group{
    flex-direction:column;
    align-items:center;
  }
}
.contact-section{

    padding:5rem 0;

    background:white;
}

.contact-section h2{

    text-align:center;
    margin-bottom:1rem;

    color:var(--primary);
}

.contact-section p{

    text-align:center;

    max-width:600px;
    margin:auto auto 2rem;
}

.contact-grid {
    display: grid;
    gap: 1rem;
    /* Lebar minimal diperkecil jadi 200px agar muat 3 kotak & tidak kebesaran */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    justify-content: center;
}

.contact-card {
    color: white;
    text-decoration: none;
    /* Padding diperkecil agar kotaknya lebih ramping */
    padding: 0.6rem 1rem; 
    height: 60px;
    border-radius: 12px; 
    display: flex;
    align-items: center;
    gap: 0.8rem;
    transition: .3s;
}

.contact-card h3 {
    font-size: 1.1rem; /* Ukuran font sedikit diperkecil */
    margin-bottom: 0rem;
    line-height: 1.1;
}

.contact-card small {
    font-size: 0.8rem;
    opacity: 0.9;
    display: block;
    margin-top: 0px;
    line-height: 1;
}

/* --- WARNA KHUSUS WHATSAPP --- */
.contact-card.wa {
    background: #25D366;
}

.contact-card.wa:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(37, 211, 102, .3);
}

/* --- WARNA KHUSUS INSTAGRAM --- */
.contact-card.ig {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.contact-card.ig:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(220, 39, 67, .3);
}

section{
padding:80px 10%;
}


/* --- COUNTDOWN DI HERO SECTION --- */
.hero-countdown {
    margin-top: 3rem;
}

.countdown-boxes {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap; /* Aman kalau dibuka di layar HP yang sempit */
}

.time-box {
    background: white; /* Memberi kotak putih belakangnya */
    color: var(--primary); /* Angkanya berwarna biru gelap agar senada */
    padding: 15px 20px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* Efek melayang */
    min-width: 95px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.time-box span {
    font-size: 3rem; /* Ukurannya pas, tidak kebesaran */
    font-weight: 800;
    line-height: 1;
    margin-bottom: 5px;
}

.time-box small {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #666; /* Teks hari/jam warna abu-abu elegan */
}

/* Penyesuaian untuk layar HP / Mobile */
@media(max-width: 768px) {
    .countdown-boxes {
        gap: 10px;
    }
    .time-box {
        min-width: 75px;
        padding: 12px 15px;
        border-radius: 12px;
    }
    .time-box span {
        font-size: 2.2rem;
    }
    .time-box small {
        font-size: 0.75rem;
        letter-spacing: 1px;
    }
}

/* FAQ STYLE */
.faq {
  padding: 4rem 10%;
}

.faq h2 {
  text-align: center;
  color: var(--primary);
  margin-bottom: 2rem;
}

.faq-item {
  margin-bottom: 1rem;
}

.faq-btn {
  width: 100%;
  text-align: left;
  padding: 1.2rem 1.5rem;
  background: white;
  border: none;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--dark);
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  font-family: 'Poppins', sans-serif;
  transition: 0.3s;
}

.faq-btn:hover {
  color: var(--primary);
}

.faq-content {
  padding: 1rem 1.5rem;
  background: #e2e8f0;
  border-radius: 0 0 12px 12px;
  margin-top: -5px;
  font-size: 0.95rem;
  line-height: 1.6;
}