/* =========================
   2Z Landing Page (CI4)
   Color:
   - Green: #A4C639
   - Dark : #1C1C1C
   ========================= */

:root{
  --green:#A4C639;
  --dark:#1C1C1C;
  --text:#111;
  --muted:#6b6b6b;
  --white:#fff;
  --ph:#d9d9d9;

  /* Typography sizes (px) */
  --fs-hero:64px;
  --fs-section:32px;
  --fs-cta:22px;
  --fs-card:16px;
  --fs-body:14px;
  --fs-nav:14px;
  --fs-btn-primary:12px;
  --fs-btn-small:11px;

  --fs-footer-heading:14px;
  --fs-footer-link:12px;
  --fs-footer-desc:12px;
  --fs-footer-contact:12px;
  --fs-copyright:11px;

  /* Heights */
  --h-navbar:80px;
  --h-hero:800px;
  --h-layanan:700px;
  --h-tentang:650px;
  --h-cta:350px;
  --h-portofolio:650px;
  --h-galeri:700px;
  --h-footer:350px;

  /* Layout */
  --wrap:1980px;
  --side-pad:clamp(16px,4vw,120px);
}

*{
 box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#fff;
  color:var(--text);
}

/* lock scroll when mobile nav is open */
body.nav-lock{ overflow:hidden; }

a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding-left:var(--side-pad);
  padding-right:var(--side-pad);
}

/* ---------- Topbar ---------- */
.topbar{
  background:var(--green);
  height:36px;
  display:flex;
  align-items:center;
}
.topbar-right{
  width:100%;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  font-size:12px;
  letter-spacing:0.5px;
  font-weight:600;
  color:#fff;
}
.topbar-item{ opacity:0.95; }
.topbar-sep{ opacity:0.85; }

/* ---------- Navbar ---------- */
.site-header{ position:relative; z-index:2000; }
.navbar{
  background:var(--dark);
  height:var(--h-navbar);
  display:flex;
  align-items:center;
  border-bottom:none; /* pastikan garis panjang hilang */
}

.navbar-inner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  font-weight:700;
  color:#fff;
  font-size:18px;
  letter-spacing:0.2px;
}

.navlinks{
  display:flex;
  align-items:center;
  gap:24px;
}
.navlink{
  position:relative;
  display:inline-block;
  font-size:var(--fs-nav);
  font-weight:600;
  letter-spacing:0.6px;
  color:#fff;                 /* default putih */
  padding:10px 2px;
  text-transform:uppercase;
  opacity:0.9;
  transition:color .15s ease, opacity .15s ease;
}
.navlink::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  background:var(--green);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .15s ease;
}
.navlink:hover{
  color:var(--green);
  opacity:1;
}
.navlink:hover::after{
  transform:scaleX(1);
}
.navlink.active{
  color:var(--green);        /* ← INI KUNCI */
  opacity:1;
}
.navlink.active::after{
  transform:scaleX(1);
}
/* ---------- Sections Base ---------- */
.section{
  width:100%;
  display:flex;
  align-items:center;
}
.section.dark{
  background:var(--dark);
  color:#fff;
}

.section-title{
  font-size:var(--fs-section);
  letter-spacing:1px;
  font-weight:800;
  margin:0 0 14px 0;
  text-transform:uppercase;
}
.section-title.center{ text-align:center; }
.section-title.left{ text-align:left; }
.section-title.right{ text-align:left; }

.body-text{
  font-size:var(--fs-body);
  line-height:1.65;
  margin:0 0 16px 0;
  color:rgba(255,255,255,0.78);
}
.section:not(.dark) .body-text{
  color:#2a2a2a;
}
.center{ text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:0;
  cursor:pointer;
  font-weight:700;
  letter-spacing:0.6px;
  text-transform:uppercase;
  transition:transform .12s ease, opacity .12s ease;
}
.btn:active{ transform:translateY(1px); }

.btn-primary{
  background:var(--green);
  color:#fff;
  font-size:var(--fs-btn-primary);
  padding:10px 18px;
}
.btn-small{
  background:var(--green);
  color:#fff;
  font-size:var(--fs-btn-small);
  padding:8px 14px;
}

/* ---------- Hero ---------- */

/* === Image utilities (shared) === */
.img-real{
  display:block;
  object-fit:cover;
  border-radius:22px; /* samakan dengan placeholder */
}

.img-ph{
  background:var(--ph);
  border-radius:22px;
}

.img-450{
  width:450px;
  height:450px;
}

.img-280{
  width:280px;
  height:280px;
}

/* ===== FOOTER (match desain kamu) ===== */

/* ===== FOOTER (fix tinggi & jarak) ===== */

.site-footer{
  background:#242424;
  color:#fff;
  padding:40px 0 0;        /* sebelumnya 60px -> jadi lebih pendek */
}

/* 4 kolom seperti desain */
.footer-grid{
  display:grid;
  grid-template-columns: 2.2fr 1fr 1fr 0.9fr;
  gap:40px;                /* sebelumnya 70px -> jarak antar kolom mengecil */
  align-items:start;
}

/* brand + desc */
.footer-brand{
  font-size:14px;
  font-weight:800;
  margin-bottom:10px;      /* sebelumnya 14px */
}

.footer-desc{
  font-size:12px;
  line-height:1.7;         /* lebih rapat */
  color:rgba(255,255,255,0.80);
  max-width:520px;
  margin:0 0 14px;         /* sebelumnya 18px */
}

/* icon 25x25 */
.footer-social{
  display:flex;
  gap:14px;
  align-items:center;
}
.footer-social-link{
  color:#fff;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.footer-social-link svg{
  width:25px;
  height:25px;
}
.footer-social-link:hover{
  color:var(--green);
}

/* heading */
.footer-heading{
  font-size:14px;
  font-weight:800;
  margin-bottom:10px;      /* sebelumnya 14px */
}

/* IMPORTANT: override CSS global yang bikin LI/Link jaraknya jauh */
.footer-links{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;                /* jarak antar item rapat */
}

.footer-links li{
  margin:0 !important;     /* kalau ada global li margin */
  padding:0 !important;
  line-height:1.2;
}

.footer-links a{
  font-size:12px;
  color:rgba(255,255,255,0.80);
  text-decoration:none;
  line-height:1.2;         /* rapat */
  padding:0 !important;    /* kalau global kasih padding */
  margin:0 !important;     /* kalau global kasih margin */
  display:inline-block;
}

.footer-links a:hover{
  color:var(--green);
}

/* tombol kontak kanan */
.footer-col-contact{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.footer-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 18px;
  border-radius:999px;
  background:var(--green);
  color:#1c1c1c;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
  letter-spacing:0.6px;
  text-transform:uppercase;
}

/* copyright bar */
.footer-bottom{
  margin-top:26px;         
  background:#2a2a2a;
  padding:16px 0;
}
.footer-copy{
  text-align:center;
  font-size:11px;
  color:rgba(255,255,255,0.80);
}

/* responsive */
@media (max-width: 1100px){
  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
}
@media (max-width: 650px){
  .footer-grid{
    grid-template-columns:1fr;
  }
}
/* Kontak: semuanya rata kiri */
.footer-col-contact{
  display:flex;
  flex-direction:column;
  align-items:flex-start;   /* kiri */
  text-align:left;          /* kiri */
  gap:12px;
}

.footer-col-contact .footer-cta{
  margin:0;                 
}
.img-real{
  display:block;
  object-fit:cover;
  border-radius:22px; /* samakan dengan placeholder */
}

.img-real.img-280{
  width:280px;
  height:280px;
}

.img-real.img-450{
  width:450px;
  height:450px;
}

/* === Shared responsive utilities === */
@media (max-width: 900px){
  :root{ --side-pad: 18px; }
  .wrap{ padding-left: var(--side-pad); padding-right: var(--side-pad); }
}


/* ---------- Responsive Helpers ---------- */
img{ max-width:100%; height:auto; display:block; }
.wrap{
  padding-left: clamp(16px, 4vw, 120px);
  padding-right: clamp(16px, 4vw, 120px);
}

/* ---------- Mobile Nav ---------- */
.nav-toggle{
  display:none;
  border:0;
  background:transparent;
  color:#fff;
  width:44px;
  height:44px;
  border-radius:12px;
}
.nav-toggle:focus{ outline:2px solid rgba(255,255,255,.5); outline-offset:2px; }
.nav-toggle-lines{
  position:relative;
  display:block;
  width:22px;
  height:2px;
  background:currentColor;
  margin:0 auto;
}
.nav-toggle-lines::before,
.nav-toggle-lines::after{
  content:"";
  position:absolute;
  left:0;
  width:22px;
  height:2px;
  background:currentColor;
  transition: transform .2s ease, top .2s ease, opacity .2s ease;
}
.nav-toggle-lines::before{ top:-7px; }
.nav-toggle-lines::after{ top:7px; }

@media (max-width: 900px){
  .brand{ max-width: 70%; line-height:1.1; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .navbar-inner{ position:relative; }
  .navlinks{
    position:absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* bikin dropdown nutup 1 layar penuh, supaya konten bawah gak "tembus" */
    height: calc(100vh - var(--h-navbar) - 36px);

    display:none;
    flex-direction:column;
    gap: 8px;
    padding: 22px 16px 26px;
    background: rgba(28,28,28,.98);
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
    overflow-y: auto;
    align-items: center;
  }
  .navbar-inner.nav-open .navlinks{ display:flex; }
  .navlinks > li{ width: min(420px, 100%); }
  .navlink{
    width:100%;
    padding: 14px 12px;
    border-radius: 12px;
    text-align: center;
  }
  .navlink.active::after{ display:none; } /* biar gak aneh di mobile */
  .navbar-inner.nav-open .nav-toggle-lines{ background:transparent; }
  .navbar-inner.nav-open .nav-toggle-lines::before{ top:0; transform: rotate(45deg); }
  .navbar-inner.nav-open .nav-toggle-lines::after{ top:0; transform: rotate(-45deg); }
}