/* ====================================================== */
/* HERO SECTION */
/* Bagian pertama yang dilihat pengunjung */
/* ====================================================== */

.hero{

/* gradient background */
background:linear-gradient(
160deg,
var(--primary-900),
var(--primary-700),
var(--primary-500)
);

/* spacing */
padding:100px 0;

/* text color */
color:white;

position:relative;

overflow-x: clip;  /* clip horizontal saja, vertikal bebas */

}

/* pattern overlay */

.hero::before{

content:"";

position:absolute;

inset:0;

/* hex / network pattern */

background-image:url("/assets/img/pattern-science.svg");

background-size:600px;

background-repeat:repeat;

/* sangat halus */

opacity:0.06;

pointer-events:none;

}


/* ====================================================== */
/* GRID HERO */
/* layout 2 kolom */
/* ====================================================== */

.hero-grid{

display:grid;

grid-template-columns:1.1fr 0.9fr;

align-items:center;

gap:48px;

}


/* ====================================================== */
/* BADGE */
/* ====================================================== */

.hero-badge{

display:inline-block;

padding:6px 16px;

border-radius:50px;

opacity:1;

background:rgba(0,200,180,0.15);
border:1px solid rgba(0,200,180,0.4);

font-size:24px;

color:var(--accent-400);

margin-bottom:20px;

}


/* ====================================================== */
/* HEADLINE */
/* ====================================================== */

.hero h1{

font-size:46px;

line-height:1.2;

margin-bottom:20px;

/* font-family:var(--font-heading); */
color: white;
}

.hero h1 span{

color:var(--accent-400);

}


/* ====================================================== */
/* DESCRIPTION */
/* ====================================================== */

.hero p{

font-size:18px;

max-width:520px;

opacity:0.8;

margin-bottom:30px;

}


/* ====================================================== */
/* CTA BUTTONS */
/* ====================================================== */

.hero-buttons{

display:flex;

flex-wrap:wrap;

gap:16px;

}


/* ====================================================== */
/* HERO VISUAL CARD */
/* ====================================================== */

.hero-visual{

display:flex;
align-items:flex-start;
justify-content:center;
max-width:420px;
width:100%;

}

/* ── Hero Photo Mosaic (Pak Kholis innovations) ────── */
.hero-photo-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  /* height ditentukan oleh aspect-ratio hero-photo-main */
}

.hero-photo-main {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 3 / 4;   /* proporsi natural foto potret */
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}

.hero-photo-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  display: block;
  transition: transform 0.4s ease;
}

.hero-photo-main:hover img {
  transform: scale(1.04);
}

.hero-photo-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: stretch;   /* ikut tinggi kolom kiri */
}

.hero-photo-sm {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  flex: 1;
  box-shadow: 0 6px 20px rgba(0,0,0,0.30);
}

.hero-photo-sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.hero-photo-sm:hover img {
  transform: scale(1.05);
}

.hero-photo-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px 10px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.72));
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  line-height: 1.3;
}

.hero-card{
padding:40px;
width:320px;

height:260px;

border-radius:24px;

background:rgba(255,255,255,0.08);

backdrop-filter:blur(10px);

border:1px solid rgba(255,255,255,0.2);

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

}

.hero-icon{

font-size:46px;

margin-bottom:10px;

}

.hero-text{

max-width:560px;

}


/* ====================================================== */
/* RESPONSIVE - TABLET */
/* ====================================================== */

@media (max-width: 992px) {

  .hero {
    padding: 70px 0 80px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  .hero-text {
    max-width: 100%;
  }

  .hero h1 {
    font-size: 36px;
  }

  .hero p {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero-visual {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
  }

  .hero-photo-grid {
    max-width: 100%;
    width: 100%;
    /* height auto dari aspect-ratio */
  }

}

/* ====================================================== */
/* RESPONSIVE - MOBILE */
/* ====================================================== */

/* ── Medium mobile: 577–768px — foto lebih compact ── */
@media (min-width: 577px) and (max-width: 768px) {
  .hero {
    padding: 56px 0 40px;
  }

  .hero-grid {
    gap: 28px;
  }

  .hero-photo-grid {
    /* height auto */
  }
}

/* ── Small mobile: ≤576px ── */
@media (max-width: 576px) {

  .hero {
    padding: 36px 0 40px;
  }

  .hero-grid {
    gap: 20px;
  }

  .hero h1 {
    font-size: 26px;
  }

  .hero p {
    font-size: 14px;
  }

  .hero-badge {
    font-size: 13px;
    padding: 5px 12px;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .hero-visual {
    display: flex;
    max-width: 100%;
    width: 100%;
  }

  /* Mobile: 2 kolom simetris */
  .hero-photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
    width: 100%;
    gap: 8px;
    /* height auto dari aspect-ratio */
  }

  /* Sembunyikan foto stack (2 foto kecil) — tampilkan sbg 1 foto saja */
  .hero-photo-stack {
    display: contents;  /* anak-anaknya masuk langsung ke grid */
  }

  /* Hanya foto pertama di stack yang tampil */
  .hero-photo-sm:last-child {
    display: none;
  }

  .hero-photo-label {
    font-size: 9px;
    padding: 12px 8px 6px;
  }

}

/* ── Very small mobile: ≤375px ── */
@media (max-width: 375px) {

  .hero h1 {
    font-size: 23px;
  }

  .hero-photo-grid {
    gap: 6px;
  }

  .hero-photo-label {
    font-size: 8px;
  }

}