/* =========================
   1) Variabel warna & reset
   ========================= */
:root{
  --green-polije: #103727;
  --green-darker: #082017;
  --orange-cta: #C25D3C;
  --white: #ffffff;
  --cream-bg: #f5f3ec;
  --text-dark: #263225;
  --text-muted: #e0e0e0;
  --text-gray: #666;
}

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

html{ scroll-behavior: smooth; }

body{
  font-family: 'Poppins', sans-serif;
  background-color: var(--cream-bg);
  color: var(--text-dark);
  overflow-x: hidden;
}

/* sesuaikan container bootstrap supaya konsisten */
.container{
  width: 90% !important;
  max-width: 1200px !important;
  margin: 0 auto;
  padding: 0;
}

/* =========================
   2) Header — Top bar + Navbar
   ========================= */

/* pembungkus header (sticky + bayangan ringan) */
.header-wrapper{
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Top bar untuk info kontak / sosial */
.top-bar{
  background-color: var(--green-darker);
  color: rgba(255,255,255,0.8);
  padding: 8px 0;
  font-size: 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.top-bar-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-contact{ display: flex; gap: 20px; }
.top-contact span{ display:flex; align-items:center; gap:8px; }
.top-contact i{ color: var(--orange-cta); }

.top-socials{ display:flex; gap:15px; }
.top-socials a{ color: rgba(255,255,255,0.8); transition: .3s; text-decoration: none; }
.top-socials a:hover{ color: var(--orange-cta); }

/* Navbar utama */
.navbar{
  background-color: var(--green-polije) !important;
  padding: 15px 0;
  transition: .3s;
}

/* tombol hamburger (toggler) */
.navbar-toggler{
  border: 1px solid rgba(255,255,255,0.3);
  outline: none;
  box-shadow: none !important;
}

/* ikon hamburger putih */
.navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* logo / brand */
.logo{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo img{ height:48px; width:auto; }

.brand{
  font-family: 'Poppins', sans-serif;
  font-weight:600;
  font-size:1.1rem;
  letter-spacing:.5px;
  color: var(--white);
  line-height:1.2;
}
.brand span{ font-weight:300; font-size:.8rem; opacity:.8; display:block; }

/* daftar link navigasi */
.nav-links{
  list-style:none;
  display:flex;
  gap:30px;
  align-items:center;
  margin:0;
  padding:0;
}

.nav-links > li > a{
  text-decoration:none;
  color: rgba(255,255,255,0.9);
  font-size:.9rem;
  font-weight:500;
  transition:.3s;
  position:relative;
  display:block;
  padding:5px 0;
}

/* efek hover / active */
.nav-links > li > a:hover,
.nav-links > li > a.active{
  color: var(--white);
  font-weight:600;
}
.nav-links > li > a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--orange-cta);
  transition: width 0.3s;
}

.nav-links > li > a:hover::after,
.nav-links > li > a.active::after {
  width: 100%;
}

.nav-links > li > a:hover,
.nav-links > li > a.active {
  color: var(--white);
}

/* dropdown kustom untuk menu yang butuh submenu */
.nav-item-dropdown{ position: relative; height:100%; display:flex; align-items:center; }

.dropbtn{
  display:flex;
  align-items:center;
  cursor:pointer;
  color: rgba(255,255,255,0.9);
  font-size:.9rem;
  text-decoration:none;
}
.dropbtn i{ font-size:.7rem; margin-left:5px; color:var(--orange-cta); transition:.3s; }
.nav-item-dropdown:hover .dropbtn i{ transform: rotate(180deg); }

/* konten dropdown (desktop) */
.dropdown-content-custom{
  display:none;
  position:absolute;
  top:100%;
  left:-15px;
  background-color: var(--green-polije);
  min-width:200px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index:999;
  border-radius:8px;
  padding:10px 0;
  margin-top:20px;
  border: 1px solid rgba(255,255,255,0.1);
}

/* area transparan untuk memberi jarak visual */
.dropdown-content-custom::before{
  content: "";
  position:absolute;
  top:-20px;
  left:0;
  width:100%;
  height:20px;
  background:transparent;
}

/* tampilkan dropdown pada layar besar saat hover */
@media (min-width: 992px){
  .nav-item-dropdown:hover .dropdown-content-custom{
    display:block;
    animation: fadeInUpSmall .3s ease;
  }
}

.dropdown-content-custom a{
  color: rgba(255,255,255,0.9);
  padding:12px 25px;
  text-decoration:none;
  display:block;
  font-size:.9rem;
  transition:.3s;
}
.dropdown-content-custom a:hover{
  color: var(--orange-cta);
  background-color: rgba(255,255,255,0.05);
}

/* tombol profil (lingkaran) */
.user-btn{
  width:40px;
  height:40px;
  background: rgba(255,255,255,0.1);
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  cursor:pointer;
  transition:.3s;
  border:1px solid rgba(255,255,255,0.2);
  text-decoration:none;
  flex-shrink:0;
}
.user-btn:hover{
  background: var(--orange-cta);
  border-color: var(--orange-cta);
  transform: scale(1.05);
}
.user-btn i{ color: var(--white); font-size:16px; }

/* animasi kecil untuk dropdown */
@keyframes fadeInUpSmall{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

/* =========================
   3) Responsive — navbar & mobile fixes
   - Pengaturan khusus untuk <= 991px
   ========================= */
@media (max-width: 991px){
  .navbar-collapse{
    background-color: var(--green-polije);
    padding:20px;
    margin-top:15px;
    border-radius:10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.05);
  }

  .nav-links{ flex-direction: column; align-items: flex-start; width:100%; gap:15px; }
  .nav-links > li{ width:100%; }
  .nav-links > li > a{ padding:10px 0; display:block; width:100%; }

  /* dropdown jadi blok vertikal di mobile */
  .nav-item-dropdown{ flex-direction: column; align-items: flex-start; height:auto; }
  .dropdown-content-custom{
    position: relative;
    top:0;
    left:0;
    margin-top:5px;
    width:100%;
    box-shadow:none;
    background: rgba(0,0,0,0.2);
    display:none;
  }
  .nav-item-dropdown:hover .dropdown-content-custom{ display:block; }
  .dropdown-content-custom::before{ display:none; }

  .user-btn{ margin-top:20px; }
  .top-bar{ display:none; }
  .nav-right{ display:block; width:100%; } /* Bootstrap collapse tetap mengatur visibilitas */
}

/* =========================
   4) Page header / hero untuk halaman tentang
   ========================= */
.page-header{
  background-color: var(--green-polije);
  padding: 80px 0 120px 0;
  text-align:center;
  color: var(--white);
  position: relative;
  overflow: hidden;
}

/* tekstur tipis agar tidak polos */
.page-header::before{
  content: '';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image: url('https://www.transparenttextures.com/patterns/ag-square.png');
  opacity: .05;
}

.page-title{
  font-family: 'Playfair Display', serif;
  font-size: 3.5rem;
  font-weight:700;
  margin-bottom:10px;
  letter-spacing:2px;
  position:relative;
  z-index:1;
  animation: fadeInUp 1s ease;
}

.bre{
  font-size:1rem;
  text-align: center;
  color: rgba(255,255,255,0.7);
  position:relative;
  z-index:1;
  animation: fadeInUp 1.2s ease;
}

/* =========================
   5) Utilities animasi & reveal
   - Untuk efek masuk saat scroll
   ========================= */
.reveal{
  opacity:0;
  transform: translateY(30px);
  transition: all .8s ease-out;
}
.reveal.active{
  opacity:1;
  transform: translateY(0);
}

/* =========================
   6) About section — konten utama halaman tentang
   ========================= */
.about-section{ padding:100px 0; }

.about-grid{ display:flex; align-items:center; gap:80px; }

.about-image{ flex:1; position:relative; }
.about-image img{
  width:100%;
  border-radius:20px;
  box-shadow: -20px 20px 0 rgba(16,55,39,0.1);
  transition: transform .5s;
}
.about-image:hover img{ transform: scale(1.02); }

.about-text{ flex:1; }

.sub-title{
  color: var(--orange-cta);
  font-weight:700;
  font-size:.9rem;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:15px;
  display:block;
}

.main-title{
  font-family: 'Playfair Display', serif;
  font-size:3rem;
  color: var(--green-polije);
  line-height:1.2;
  margin-bottom:30px;
}

.description{
  color: var(--text-gray);
  line-height:1.8;
  margin-bottom:25px;
  font-size:1.05rem;
}

/* =========================
   7) Visi & Misi
   ========================= */
.visi-misi-section{
  background-color: var(--white);
  padding:100px 0;
}

.vm-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:50px; }

.vm-card{
  padding:40px;
  border:1px solid #eee;
  border-radius:20px;
  background:#fff;
  transition:.4s;
  position:relative;
  overflow:hidden;
}

.vm-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:5px;
  height:0;
  background: var(--orange-cta);
  transition:.4s;
}

.vm-card:hover{
  box-shadow: 0 20px 40px rgba(0,0,0,0.05);
  transform: translateY(-10px);
}
.vm-card:hover::before{ height:100%; }

.vm-icon{
  width:70px;
  height:70px;
  background: rgba(16,55,39,0.05);
  color: var(--green-polije);
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:28px;
  margin-bottom:25px;
}

.vm-title{
  font-family: 'Playfair Display', serif;
  font-size:1.8rem;
  color: var(--green-polije);
  margin-bottom:20px;
}

.vm-list{ list-style:none; padding:0; }
.vm-list li{
  margin-bottom:12px;
  position:relative;
  padding-left:30px;
  color: var(--text-gray);
  font-size:1rem;
}
.vm-list li::before{
  content:'\f00c';
  font-family: "Font Awesome 5 Free";
  font-weight:900;
  color: var(--orange-cta);
  position:absolute;
  left:0;
  top:2px;
}

/* =========================
   8) Team section
   ========================= */
.team-section{ padding:100px 0; text-align:center; }

.team-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  gap:30px;
  margin-top:50px;
}

.team-card{
  background: var(--white);
  border-radius:20px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transition:.4s;
}
.team-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.team-img-box{ position:relative; overflow:hidden; height:320px; }
.team-img-box img{ width:100%; height:100%; object-fit:cover; transition:.5s; }
.team-card:hover .team-img-box img{ transform: scale(1.1); }

/* overlay sosial muncul saat hover */
.team-social{
  position:absolute;
  bottom:-50px;
  left:0;
  width:100%;
  background: rgba(255,255,255,0.9);
  padding:15px;
  display:flex;
  justify-content:center;
  gap:15px;
  transition:.4s;
}
.team-card:hover .team-social{ bottom:0; }

.team-social a{ color: var(--green-polije); font-size:1.1rem; transition:.3s; }
.team-social a:hover{ color: var(--orange-cta); }

.team-info{ padding:25px; }
.team-name{
  font-family: 'Playfair Display', serif;
  font-size:1.3rem;
  color: var(--green-polije);
  font-weight:700;
  margin-bottom:5px;
}
.team-role{
  color: var(--orange-cta);
  font-size:.9rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1px;
}

/* =========================
   9) Footer
   ========================= */
footer{
  background-color: var(--green-darker);
  color: var(--white);
  padding:80px 0 30px 0;
  position:relative;
  overflow:hidden;
}

footer::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
  opacity:.03;
  pointer-events:none;
}

.footer-content{
  display:grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap:40px;
  margin-bottom:60px;
  position:relative;
  z-index:1;
}

.f-logo-flex{ display:flex; align-items:center; gap:15px; margin-bottom:25px; }
.f-logo-circle{ width:60px; height:60px; background: var(--white); border-radius:50%; display:flex; justify-content:center; align-items:center; }
.f-logo-circle img{ width:40px; height:auto; }

.f-brand-name{ font-size:1.3rem; font-weight:700; line-height:1.2; letter-spacing:1px; }
.f-desc{ font-size:.95rem; opacity:.7; line-height:1.8; margin-bottom:30px; }

.f-socials{ display:flex; gap:15px; }
.social-link{
  width:45px; height:45px;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:50%;
  display:flex; justify-content:center; align-items:center;
  color: var(--white); text-decoration:none; transition:.3s;
}
.social-link:hover{ background: var(--orange-cta); border-color: var(--orange-cta); transform: translateY(-3px); }

.f-heading{
  font-size:1.2rem; font-weight:600; margin-bottom:30px; position:relative; display:inline-block;
}
.f-heading::after{
  content: ''; position:absolute; bottom:-10px; left:0; width:40px; height:2px; background: var(--orange-cta);
}

.f-links ul, .f-contact ul{ list-style:none; padding:0; }
.f-links li{ margin-bottom:15px; }
.f-links a{
  color: rgba(255,255,255,0.7); text-decoration:none; font-size:.95rem; transition:.3s; display:inline-flex; align-items:center;
}
.f-links a:hover{ color: var(--white); padding-left:8px; }
.f-links a::before{ content: '\203A'; margin-right:8px; color: var(--orange-cta); opacity:0; transition:.3s; transform: translateX(-5px); }
.f-links a:hover::before{ opacity:1; transform: translateX(0); }

.f-contact li{ margin-bottom:25px; }
.contact-row{ display:flex; align-items:flex-start; gap:15px; color: rgba(255,255,255,0.8); transition:.3s; text-decoration:none; }
.contact-row:hover{ color: var(--orange-cta); }
.contact-row i{ font-size:1.3rem; color: var(--orange-cta); margin-top:3px; }

.contact-text h5{ font-size:.95rem; font-weight:600; margin-bottom:3px; color: var(--white); }
.contact-text span{ font-size:.9rem; opacity:.8; line-height:1.5; display:block; }

.newsletter-form input{
  width:100%; padding:15px 20px; border-radius:50px; border:1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.1); color: white; outline:none;
}

.newsletter-form{ position:relative; }
.newsletter-btn{
  position:absolute; right:5px; top:5px; width:40px; height:40px; background: var(--orange-cta); border:none; border-radius:50%; color:white; cursor:pointer; transition:.3s;
}
.newsletter-btn:hover{ background:#a84d31; transform: rotate(15deg); }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:30px; text-align:center; font-size:.9rem; opacity:.6;
}

@keyframes fadeInUp{
  from{ opacity:0; transform: translateY(30px); }
  to{ opacity:1; transform: translateY(0); }
}

/* =========================
   10) Mobile breakpoints untuk konten selain navbar
   - Penyesuaian layout untuk layar kecil
   ========================= */
@media (max-width: 991px){
  .about-grid, .vm-grid{
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-grid{ flex-direction: column; }

  .footer-content{ grid-template-columns: 1fr; gap: 40px; }
  .f-col{ text-align:center; }

  .f-heading::after{ left:50%; transform: translateX(-50%); }
  .f-logo-flex, .f-socials, .contact-row, .f-links a{ justify-content:center; }
  .contact-row{ text-align:center; }
}