/* ===========================
   Tema Hijau Muda + Putih
   =========================== */
:root{
  --brand: #22c55e;       /* hijau utama */
  --brand-2:#86efac;      /* hijau muda (mint) */
  --brand-dark:#16a34a;   /* hover */
  --ink:#12221a;          /* teks utama */
  --muted:#5b6b62;        /* teks sekunder */
  --line:#e7f5eb;         /* garis halus */
  --bg:#ffffff;           /* putih bersih */
  --card:#ffffff;         /* kartu putih */
  --soft:#f4fbf6;         /* latar lembut */
}

*{box-sizing:border-box}
html,body{height:100%}

/* ====== Latar dasar: 1 hamparan (tanpa gradien putih) ====== */
html{
  background: var(--brand-2);           /* ✅ hilangkan gradien di root */
}

body{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);

  background: var(--brand-2);           /* ✅ hilangkan gradien di body */
  background-attachment: scroll;        /* pastikan tidak bikin seam */
  position: relative;                   /* anchor untuk watermark */
  overflow-x: hidden; 
  min-height: 100vh;
  isolation: isolate;                   /* pisahkan stacking context */

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Watermark logo — menempel viewport agar tak terpotong */
body::before{
  content:'';
  position: fixed;                      /* ✅ fixed ke viewport */
  inset: 0;
  background-image: url('/assets/logo_pangsoed.png'); /* pastikan file ada */
  background-repeat: repeat;
  background-position: center center;
  background-size: 120px;
  opacity: .04;
  z-index: 0;                           /* di atas latar, di bawah konten */
  pointer-events: none;
}

/* ====== Pastikan wrapper transparan (tidak memotong latar) ====== */
section,
.section,
#pricing, #clients, #contact,
.container, .container-fluid,
.row{
  background-color: transparent !important;
  position: relative;
  z-index: 2;
}

/* Garis horizontal jangan bikin “belang” */
hr { border-color: transparent !important; }

/* ----------------- Topbar & Navbar ----------------- */
.topbar { background: var(--brand); color: #fff; font-size: 0.9rem; }
.topbar a { color: #fff; text-decoration: none; }

.topbar .social-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background: var(--brand-2); color: var(--brand-dark);
  font-size:.9rem; transition: all .2s ease;
}
.topbar .social-icon:hover{ background: var(--brand-dark); color:#fff; }
.topbar .social-group{ display:flex; gap:8px; }

.nav-glass{
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.main-nav{ align-items:center; gap:.25rem; }
.main-nav .nav-link{
  padding:.5rem .7rem; border-radius:.5rem;
  color:#2f3e37; font-weight:500; white-space:nowrap; transition:.2s ease;
}
.main-nav .nav-link:hover,
.main-nav .nav-link:focus{ background: var(--soft); color: var(--brand-dark); }
.main-nav .nav-link.active{ background: var(--brand-2); color: var(--brand-dark); }
@media (min-width: 992px){ .main-nav{ flex-wrap: nowrap; } }

.navbar .dropdown-menu{ border:1px solid var(--line); border-radius:.75rem; }
.navbar .dropdown-item:hover{ background: var(--soft); color: var(--brand-dark); }

/* ----------------- Hero ----------------- */
.hero-banner{ position:relative; }
.hero-img{ width:100%; height:60vh; object-fit:cover; display:block; }

.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.55) 55%, rgba(0,0,0,.65));
}

.hero-content{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:1rem;
}

.hero-textbox{
  background: linear-gradient(to bottom right, rgba(0,0,0,.45), rgba(0,0,0,.25));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 1rem 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  max-width: 900px;
}

.hero-title{ color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.45); letter-spacing:.2px; margin-bottom:.35rem; }
.hero-subtitle{ color:#f8f9fa; opacity:.95; text-shadow:0 1px 6px rgba(0,0,0,.45); }
.hero-search{ width:100%; max-width:720px; margin-top:.75rem; }
.btn-brand{ background:#0d6efd; color:#fff; border:none; }
.btn-brand:hover{ opacity:.9; }

/* ----------------- Tombol ----------------- */
.btn-brand{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-color: #ffffff;
}
.btn-success{ background: var(--brand); border:0; color:#fff; }
.btn-success:hover{ background: var(--brand-dark); color:#fff }

/* ----------------- Section & Tiles ----------------- */
.section{ padding:72px 0 }
.container-narrow{ max-width:1200px }

.section-title h2{
  font-weight:700; letter-spacing:.2px; color:#173127;
  position:relative; display:inline-block; padding-bottom:.35rem;
}
.section-title h2::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:48%;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
  border-radius:2px;
}

.feature-tile{
  background:#fff; border:1px solid var(--line);
  border-radius:1rem; padding:1.25rem; min-height:180px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 4px 14px rgba(34,197,94,.06);
}
.feature-tile i{ color: var(--brand); }
.feature-tile:hover{ transform: translateY(-4px); border-color: var(--brand-2); box-shadow: 0 10px 26px rgba(34,197,94,.12); }

/* ----------------- Card Artikel ----------------- */
.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: 1rem;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
  height: 100%;
}
.card:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.08) }
.card img{ object-fit:cover; width:100%; height:180px }
.card .card-title{ font-size:1.05rem; line-height:1.35; margin-bottom:.35rem; color:#163726 }
.card .card-subtitle{ color: var(--muted) }
.card .card-footer{ background:#fff; border-top:1px solid var(--line); color: var(--muted) }

/* ----------------- Why Us & Video ----------------- */
#why-us{
  /* aksen radian halus tapi tetap menyatu */
  background: radial-gradient(900px 420px at 90% -10%, rgba(134,239,172,.25), transparent 60%);
}
.video-card{
  position:relative; border-radius:1.25rem; overflow:hidden;
  background: linear-gradient(180deg,#0b132b 0%, #1c2541 100%);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
.video-thumb{ position:relative; }
.video-img{ width:100%; height:100%; object-fit:cover; display:block; transition:filter .25s ease; }
.video-card:hover .video-img{ filter:saturate(1.06) brightness(1.03); }

	video-gradient{
  position:absolute; left:0; right:0; bottom:0; height:46%;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  z-index:1;
}
.video-badge{
  position:absolute; top:12px; left:12px; z-index:2;
  background:rgba(0,0,0,.58); color:#fff; font-weight:600;
  border-radius:.5rem; padding:.25rem .5rem; font-size:.75rem;
  backdrop-filter: blur(6px);
}

/* **PERBAIKAN** anchor & play button */
#why-us .ratio a.glightbox{ position:absolute; inset:0; }

#why-us .video-box{
  position: relative; width: 100%; height: 100%;
  background-size: cover; background-position: center;
  border-radius: 1.25rem; overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

#why-us .video-box::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%);
  pointer-events:none;
}

#why-us .video-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  background: rgba(0,0,0,.58); color:#fff; font-weight:600;
  border-radius:.5rem; padding:.25rem .5rem; font-size:.75rem;
  backdrop-filter: blur(6px);
}

#why-us .play-btn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:84px; height:84px; border-radius:50%;
  display:grid; place-items:center;
  background: radial-gradient(var(--brand) 60%, rgba(34, 197, 94, .35) 62%);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  z-index:10; text-decoration:none;
}
#why-us .play-btn::before{
  content:""; border-style:solid; border-width:14px 0 14px 22px;
  border-color: transparent transparent transparent #ffffff;
  margin-left:6px;
}
#why-us .play-btn::after{
  content:""; position:absolute; inset:0;
  border:2px solid rgba(255,255,255,.85); border-radius:50%;
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%{ transform:scale(.65); opacity:.95 }
  70%{ transform:scale(1.28); opacity:0 }
  100%{ opacity:0 }
}

/* ----------------- Swiper ----------------- */
.swiper-pagination-bullet{ background:#cdebd8 }
.swiper-pagination-bullet-active{ background: var(--brand) }

/* ----------------- Footer ----------------- */
.site-footer{
  background:var(--soft);
  border-top: 1px solid var(--line);
}
.site-footer .footer-top{ padding: 2.25rem 0; }
.site-footer h5{ color:#143027; font-weight:600; letter-spacing:.2px; }

.footer-line{ border:0; border-top:1px solid var(--line); }
.site-footer a{ color: var(--muted); text-decoration: none; }
.site-footer a:hover{ color: var(--brand-dark); text-decoration: underline; }
.site-footer ul{ list-style:none; padding-left:0; margin:0; }
.site-footer li{ margin-bottom:.55rem; }
.site-footer .rp_num{ font-weight:700; color:#0a5f43; }

.site-footer .btn-social{
  width:44px; height:44px; border-radius:50%;
  display:inline-grid; place-items:center;
  background:#fff; color:var(--brand-dark);
  border:1px solid var(--line);
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.site-footer .btn-social i{ font-size:1.15rem; line-height:1; }
.site-footer .btn-social:hover{
  transform: translateY(-2px);
  background: var(--brand); color: #fff; border-color: var(--brand);
  box-shadow: 0 8px 22px rgba(34,197,94,.22);
}

.site-footer .copyright{
  display:block !important;
  text-align:center !important;
  padding:.9rem 0 1.1rem;
}
.site-footer .copyright .copy-text{
  display:inline-block; letter-spacing:.2px;
}

/* ----------------- Utilitas ----------------- */
.small-muted{ color: var(--muted) }

/* ============= TYPOGRAPHY COLOR OVERRIDES (ELEGAN) ============= */
/* Hanya mengatur warna font agar lebih mewah dan nyaman dibaca */
:root{
  --ink:  #0e1a14;  /* hijau-hitam dalam: teks utama */
  --muted:#3a6154;  /* teal tua: teks sekunder */
}

/* Heading lebih berwibawa */
h1, h2, h3, h4, h5, h6{
  color:#0f2a1f;
  letter-spacing:.2px;
}

/* Link elegan + hover tetap brand dark */
a{ color:#0f7a4f; text-decoration:none; }
a:hover, a:focus{ color: var(--brand-dark); text-decoration: underline; }

/* Navbar mengikuti palet teks elegan */
.main-nav .nav-link{ color: var(--ink); }
.main-nav .nav-link.active{ color: var(--brand-dark); }

/* Konsistensi judul dan teks sekunder */
.section-title h2{ color:#0f2a1f; }
.card .card-title{ color:#0f2a1f; }
.card .card-subtitle,
.site-footer a,
.small-muted{ color: var(--muted); }

/* Footer heading selaras */
.site-footer h5{ color:#0f2a1f; }

/* Hero tetap kontras di atas foto */
.hero-title{ color:#ffffff; }
.hero-subtitle{ color:#f2f7f4; }

/* Komponen putih tetap pakai warna teks utama */
.feature-tile h3,
.feature-tile,
.contact-card,
.list-group-item{ color: var(--ink); }
/* ===========================
   Navbar center & symmetry
   =========================== */
.navbar .container{
  display:flex;
  align-items:center;
}

/* Toggler tetap di kanan pada mobile */
.navbar .navbar-toggler{
  margin-left:auto;
}

/* Desktop: menu persis di tengah, brand dorong ke kiri */
@media (min-width: 992px){
  .navbar .navbar-brand{ margin-right:auto; }
  .navbar .navbar-collapse{
    flex-grow:0;             /* jangan mengambil sisa lebar */
    justify-content:center;  /* pusatkan isi collapse */
  }
  .navbar .main-nav{
    gap:.5rem;
    align-items:center;
    justify-content:center;  /* pastikan ul juga center */
  }
}

/* Mobile/Tablet: menu melebar & rata tengah saat dibuka */
@media (max-width: 991.98px){
  .navbar .navbar-collapse{
    justify-content:center;
    text-align:center;
  }
  .navbar .main-nav{
    width:100%;
    justify-content:center;
  }
  .navbar .nav-link{
    padding:.6rem 1rem;
  }
}