/* --- FONTS & VARIABLES --- */
@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/montserrat-variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/montserrat-variable-italic.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
}

:root {
  /* Menggunakan warna asli Pudak Aerospace */
  --primary-blue: #1078ba; 
  --primary-dark: #005fa3;
  --text-dark: #1a1a1a;
  --text-gray: #666;
  --white: #ffffff;
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.5);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: #fafcfe;
  overflow-x: hidden;
  color: var(--text-dark);
}

/* --- NAVBAR (Modern Glass & Responsive) --- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.2rem 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  transition: transform 0.4s ease, background 0.4s ease, padding 0.4s ease;
  backdrop-filter: blur(0px);
  background: transparent;
}

.navbar.scrolled-up {
  transform: translateY(0);
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
  padding: 0.8rem 5%;
}

.navbar.scrolled-down {
  transform: translateY(-100%);
}

.nav-logo {
  display: flex;
  align-items: center;
}

.nav-logo img {
  height: 40px;
  width: auto;
}

.nav-links { 
  display: flex; 
  gap: 1.2rem; 
  list-style: none; 
}

.nav-links a { 
  text-decoration: none; 
  color: var(--text-dark); 
  font-weight: 400; 
  font-size: 0.95rem;
  transition: color 0.3s; 
}
.nav-links a:hover { color: var(--primary-blue); }

.nav-actions { display:flex; align-items:center; gap:20px; }

.btn-partner {
  min-width: 8.6rem;
  background: linear-gradient(to top, #1078ba, #1078ba); border:none; padding:10px 20px; border-radius:.5rem;
  cursor:pointer; font-weight: 400; color: white; transition:background .3s;
  text-decoration: none;
}
.btn-partner:hover { background: linear-gradient(to top, #21a0db, #1078ba 30%); }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-width: 2.8rem;
  color: #000;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
  text-align: start;
}

.lang-toggle .lucide {
  width: .75em;
  height: .75em;
  stroke-width: 0.12em;
}      

.lang-toggle:hover {
  color:#444;
  transition: 0.2s ease-in-out; }



  /* --- UPDATE CSS NAVBAR --- */

/* 1. Default (Desktop) */
.mobile-only-item {
  display: none; /* Sembunyikan item mobile di layar besar */
}

.nav-desktop-extra {
  display: flex; /* Munculkan tombol desktop */
}

/* 2. Responsive Mobile (Layar < 768px) */
@media (max-width: 768px) {
  
  /* Munculkan item tombol di dalam menu drawer */
  .mobile-only-item {
      display: block;
      width: 100%;
      text-align: center;
      margin-top: 10px;
  }

  /* Sembunyikan tombol yang di luar drawer (yang numpuk sama logo) */
  .nav-desktop-extra {
      display: none;
  }

  /* Perbaikan Tampilan Menu Drawer */
  .nav-links {
      gap: 20px; /* Beri jarak antar item */
      padding-top: 80px; /* Biar item paling atas gak ketabrak tombol close */
  }
}


/* --- HERO SECTION --- */
.hero {
  height: 100vh;
  max-height: 60rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  position: relative;
  background-color: #fafcfe;
  overflow: hidden;
  margin-bottom: 0; /* Fix margin issue */
}

/* Left Content */
.hero-content {
  flex: 1;
  max-width: 50%;
  padding-right: 2rem;
  padding-block: 2rem;
  z-index: 10;
  display: flex;
  flex-direction: column; /* 2. Susun vertikal */
  justify-content: space-between; /* 3. Sebar konten: Atas - Tengah - Bawah */
  gap: 5rem;
}

/* Animations */
.animate-entry {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s forwards;
}
.hero-title { animation-delay: 0.2s; }
.philosophy-wrapper { animation-delay: 0.4s; }
.hero-buttons { animation-delay: 0.6s; }

/* --- 1. KECILKAN HERO TITLE (Welcome) --- */

.hero-title h1 {
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--primary-blue);
  margin-bottom: 0.5rem;
  font-weight: 800;
}

.hero-title span { 
  color: var(--text-gray); /* Warna lebih pudar */
  font-size: 1rem; /* Turun drastis (tadinya 2rem+) */
  font-weight: 500; 
  display: block; 
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- 2. BESARKAN PHILOSOPHY (Teks Tengah) --- */
.philosophy-wrapper { 
  margin: 0; /* Hapus margin agar rapi di tengah layout flexbox baru */
  position: relative;
}

.philosophy-label {
  font-size: 1rem;
  color: #999;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
  display: block;
}

/* Container harus lebih tinggi untuk memuat font besar */
.text-rotator {
  height: 5rem;
  overflow: hidden; 
  position: relative;
}

.rotating-list {
  list-style: none;
  position: relative; /* <--- INI KUNCINYA AGAR BISA BERGERAK */
  top: 0;
  margin: 0;
  padding: 0;
  /* Transisi default (opsional, karena JS juga mengaturnya) */
  transition: top 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); 
}

.rotating-list li {
  height: 5rem; /* HARUS SAMA dengan .text-rotator */
  line-height: 5rem; /* Agar teks vertikal center */
  font-size: 2.6rem;
  color: var(--text-dark);
  white-space: nowrap;
  font-weight: 300; /* Tipis agar elegan */
  letter-spacing: -1px;
}

.rotating-list li strong { 
  font-weight: 800; 
  font-style: normal; /* Opsional: hapus italic agar lebih tegas */
  color: var(--primary-blue); 
}


/* Buttons */
.hero-buttons { display: flex; gap: 1.2rem; margin-top: 5rem; }

.btn {
  padding: 0.8rem 1.8rem;
  border-radius: .5rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
  font-size: 1rem;
  border: none; /* Hilangkan border bawaan browser */
  outline: none; /* Hilangkan garis fokus biru/hitam saat diklik */
  cursor: pointer; /* Pastikan kursor jadi telunjuk */
  font-family: inherit; /* Agar font mengikuti body */  
}

/* 1. KONDISI DEFAULT (DESKTOP) */
#openCertificate .btn-icon {
  display: none; /* Ikon sembunyi di desktop */
}

#openCertificate .btn-label {
  display: inline-block; /* Teks muncul di desktop */
  white-space: nowrap;   /* Teks dilarang turun baris */
}

.btn-primary {
  background: linear-gradient(to top, #1078ba, #1078ba);
  color: white;
}

.btn-primary:hover {
  background: linear-gradient(to top, #21a0db, #1078ba 30%);
  transform: translateY(-1px);
}

.btn-outline {
  background: #fafcfe;
  color: var(--text-dark);
  border: 2px solid #ddd;
}
.btn-outline:hover {
  background-color: white;
  transform: translateY(-1px);
}

/* Right Content (Slider) */
.hero-visual {
  flex: 1;
  height: 60vh;
  max-height: 36rem;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.slider-track { width: 100%; height: 100%; position: relative; }

.slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1;
}

.slide.active { opacity: 1; z-index: 2; }

.slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 6s linear;
}
.slide.active img { transform: scale(1.15); }

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  z-index: 20;
  opacity: 0.7;
  transition: opacity 0.5s ease;
}

.scroll-indicator:hover { opacity: 1; }

.scroll-indicator.hidden {
  opacity: 0;
  pointer-events: none; /* Penting: agar tidak bisa diklik saat sudah hilang */
}

.mouse {
  width: 26px; height: 42px;
  border: 2px solid var(--primary-blue);
  border-radius: 20px;
  position: relative;
}

.wheel {
  width: 4px; height: 8px;
  background: var(--primary-blue);
  border-radius: 2px;
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  animation: scrollWheel 1.5s infinite;
}
.scroll-text { font-size: 0.7rem; color: var(--primary-blue); letter-spacing: 2px; font-weight: 700; }


/* --- RESPONSIVE HAMBURGER & LAYOUT --- */
.hamburger {
  display: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 20px;
  z-index: 1100;
}
.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--text-dark);
  border-radius: 5px;
  transition: all 0.3s ease;
}


/* --- RESPONSIVE MOBILE MENU --- */
@media (max-width: 768px) {
/* 1. Container Hero Full Screen */
.hero { 
  display: flex;
  flex-direction: column; 
  justify-content: center; /* Konten vertikal di tengah */
  align-items: center;     /* Konten horizontal di tengah */
  height: 100vh;           /* Paksa tinggi selayar penuh */
  min-height: 600px;
  padding: 0 5%;
  position: relative;      /* Acuan untuk absolute background */
  padding-top: 80px;       /* Kompensasi tinggi navbar */
}

/* 2. Gambar Jadi Background (Absolute) */
.hero-visual { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: none; /* Reset max-height desktop */
  border-radius: 0; /* Hilangkan radius sudut */
  z-index: 0;       /* Posisi paling belakang */
}

/* 3. Efek Putih Transparan & Blur */
.hero-visual::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Putih transparan (85%) */
  background: rgba(255, 255, 255, 0.75); 
  /* Efek blur pada gambar di belakangnya */
  backdrop-filter: blur(4px); 
  -webkit-backdrop-filter: blur(4px);
  z-index: 5; /* Di atas gambar, di bawah teks */
}

/* Target Tombol Spesifik */
#openCertificate {
  width: 3.5rem !important;       /* Lebar fix */
  height: 3.5rem !important;      /* Tinggi fix */
  padding: 0 !important;          /* Hapus padding */
  
  /* Flexbox Center (Wajib biar ikon di tengah) */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  border-radius: 8px !important; /* Biar tidak terlalu bulat aneh */
}

/* PAKSA TEKS HILANG */
#openCertificate .btn-label {
  display: none !important; /* Hilang total */
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* PAKSA IKON MUNCUL */
#openCertificate .btn-icon {
  display: flex !important; /* Muncul */
  align-items: center;
  justify-content: center;
}

/* Pastikan ukuran SVG pas */
#openCertificate .btn-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Perbaikan Layout Container Tombol */
.hero-buttons {
  gap: 10px; /* Jarak antar tombol */
  align-items: stretch; /* Tinggi tombol sama */
}

/* Pastikan gambar memenuhi layar */
.slide img {
  object-fit: cover; 
  width: 100%; 
  height: 100%;
}

/* 4. Konten Teks (Floating Center) */
.hero-content { 
  position: relative;
  z-index: 10; /* Pastikan di atas lapisan putih */
  width: 100%;
  max-width: 100%; 
  padding: 0;
  height: auto; 
  text-align: center;
  justify-content: center;
  gap: 6rem;
}

/* Penyesuaian Ukuran Font Mobile */
.hero-title h1 { font-size: 1.4rem; }
.text-rotator { height: 3.5rem; }
.rotating-list li { height: 3rem; font-size: 2rem; line-height: 3rem; justify-content: center; }

/* Tombol Center */
.hero-buttons { 
  margin-top: 2rem; 
  justify-content: center; 
}

.scroll-indicator {
  bottom: 2.5rem;
  z-index: 20;
}

  /* 2. LOGIKA NAVBAR MOBILE (Sliding Drawer) */
  .hamburger { display: flex; }

  /* Sembunyikan tombol desktop actions agar tidak numpuk */
  .nav-mobile-extra.nav-actions { display: none; } 

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%; /* Sembunyi di kanan */
    height: 100vh;
    width: 75%;   /* Lebar menu */
    background: #ffffff; /* Background Putih Wajib */
    
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    
    transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    z-index: 9999; /* Pastikan di atas segalanya */
    padding-bottom: 50px;
  }

  /* Saat kelas 'active' ditambahkan oleh JS, geser ke 0 */
  .nav-links.active {
    right: 0; 
  }

  /* Hamburger Animation */
  .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .hamburger.active span:nth-child(2) { opacity: 0; }
  .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
  
  /* Agar item menu di HP lebih besar */
  .nav-links li a {
      font-size: 1.2rem;
      color: var(--text-dark);
  }
}

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scrollWheel {
  0% { top: 6px; opacity: 1; height: 8px; }
  100% { top: 20px; opacity: 0; height: 4px; }
}


/* What We Do Section */
.what-we-do {
    background-color: white;
    color: black;
    padding: 100px 0;
    margin-bottom: 2rem;
    text-align: center;
}

.what-we-do .section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.what-we-do .section-header p {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 60px;
}

.services-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  margin-block: 6rem;
  text-align: left;
  height: 600px; /* Adjust as needed */
}

.airplane-img {
    position: absolute;
    right: 25%;
    top: 50%;
    transform: translateY(-50%);
    width: 150%;
    height: auto;
}

.service-item {
    position: absolute;
    display: flex;
    align-items: center;
    width: 300px;
}

.service-img-container {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.service-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-text h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.service-text p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

#service-1 { top: -50px; left: 40%; }
#service-2 { top: 100px; left: 70%; }
#service-3 { top: 250px; left: 90%; }
#service-4 { top: 400px; left: 70%; }
#service-5 { top: 550px; left: 40%; }

/* Mobile layout */
@media (max-width: 768px) {
.services-container {
position: static;
height: auto;
margin-block: 2rem;
text-align: center;
}

.airplane-img {
position: static;
transform: none;
width: 100%;      /* full width */
height: auto;
margin-bottom: 2rem;
}

.service-item {
position: static;
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
max-width: 500px;
margin: 0 auto 1.5rem auto;
}

.service-img-container {
margin: 0 auto 1rem auto;   /* center di atas teks */
}

.service-item {
flex-direction: column;     /* gambar di atas, teks di bawah */
text-align: center;
}
}


/* Rest Section */

.rest-section {
display: flex;
gap: 3rem;
justify-content: center;
padding-block: 3rem;
}

@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}

.part:hover .part__slide {
animation-play-state: paused;
}

.part {
overflow: hidden;
white-space: nowrap;
position: relative;
width: 78rem;
color: #1a1a1a;
}

.part__slide {
display: inline-block;
animation: 45s slide infinite linear;
}

.part__slide .card__small {
height: 6rem;
margin: 1rem 3rem;
display: inline-block;
text-align: center;
}

.part::before,
.part::after {
content: "";
align-self: center;
position: absolute;
width: 10rem;
height: 20rem;
z-index: 2;
}

.part::before {
left: 0;
background: linear-gradient(to left, rgba(255, 255, 255, 0), #fafcfe);
}

.part::after {
right: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 0), #fafcfe);
}


/* Horizontal Line */
.horizontal__line {
width: 100%;
height: 1px; /* Line thickness */
background: linear-gradient(to right, 
rgba(16, 120, 186, 0),  /* Transparent start */
rgba(16, 120, 186, 0.7),
rgba(16, 120, 186, 1),    /* Opaque middle */
rgba(16, 120, 186, 0.7),
rgba(16, 120, 186, 0)   /* Transparent end */
);
z-index: -1;
}


/* Future of Manufacturing Section */
.future-manufacturing {
color: black;
padding: 100px 5%;
text-align: center;
}

.future-manufacturing .section-header h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
}

.future-manufacturing .section-header p {
font-size: 1.1rem;
color: #666;
margin-bottom: 60px;
}

.articles {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 80px;
}

.article {
display: flex;
gap: 5%;
align-items: center;
text-align: left;
}

.article-reverse {
flex-direction: row-reverse;
}

.article-image {
flex: 1;
border-radius: 8px;
overflow: hidden;
}

.article-image img {
transform: scale(1.02);
width: 100%;
transition: transform 0.4s ease;
}

.article-image img:hover {
transform: scale(1.1);
}

.article-content {
flex: 1;
color: black;
}

.article-content h3 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 20px;
}

.article-content p {
font-size: 1rem;
color: #666;
line-height: 1.6;
margin-bottom: 30px;
}


/* Responsive layout untuk smartphone */
@media (max-width: 768px) {
.future-manufacturing .section-header h2{
font-size: 1.8rem;
}
.article {
flex-direction: column;       /* sejajar kebawah */
text-align: center;           /* konten rata tengah */
}

.article-reverse {
flex-direction: column;       /* abaikan reverse di HP, biar img selalu dulu */
}

.article-content {
margin-top: 20px;             /* kasih jarak antara foto & teks */
text-align: left;             /* kalau mau teks tetap kiri */
}

.article-content h3 {
font-size: 1.4rem;
}
}


/* Excellence Section */
.excellence-section {
background-color: #1078ba;
color: white;
padding: 12rem 5%;
text-align: center;
}

.excellence-section .section-header h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
}

.excellence-section .section-header p {
font-size: 1.1rem;
color: #eee;
margin-bottom: 60px;
}

.excellence-cards {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}

.excellence-card {
background: rgba(255, 255, 255, 0.1);
border: 0.1rem solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
padding: 40px;
width: 16rem;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}

.excellence-card .lucide {
width: 3rem;
height: 3rem;
margin-bottom: 20px;
color: #a1d6f7;
position: relative;
z-index: 2;
stroke-width: 0.12em;
}

.excellence-card h3 {
font-size: 1.5rem;
font-weight: 500;
margin-bottom: 15px;
}

.excellence-card p {
font-size: 1rem;
line-height: 1.5;
font-weight: 300;
}

.excellence-card::before {
content: '';
position: absolute;
top: 0;
left: -150%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
z-index: 1;
}

.excellence-card:hover::before {
left: 150%;
transition: left 0.6s ease;
}

/* Responsive layout untuk smartphone */
@media (max-width: 768px) {
.excellence-section .section-header h2{
font-size: 1.8rem;
}
}




/* About Us Section */
.about-us-section {
--bg-size: 250%;
--color-one: hsl(203 84% 40%);
--color-two: hsl(203 83% 14%);
position: relative;
padding: 12rem 5%;
background: radial-gradient(
circle closest-side,
var(--color-one) 0%,
var(--color-two) 100%
);
background-repeat: no-repeat;
background-size: var(--bg-size) var(--bg-size);
background-position: 0% 0%;
animation: radial-move 80s ease-in-out infinite;
color: white;
overflow: hidden;
}

/* Animasi halus: pusat radial bergerak memutar */
@keyframes radial-move {
0% {
background-position: 0% 0%;
}
25% {
background-position: 100% 30%;
}
50% {
background-position: 50% 100%;
}
75% {
background-position: 0% 70%;
}
100% {
background-position: 0% 0%;
}
}

/* Denyutan lembut cahaya overlay */
.about-us-section::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at center,
rgba(255, 255, 255, 0.06) 0%,
transparent 70%
);
mix-blend-mode: overlay;
opacity: 0.25;
animation: pulse-light 10s ease-in-out infinite;
pointer-events: none;
}

@keyframes pulse-light {
0%, 100% {
opacity: 0.2;
transform: scale(1);
}
50% {
opacity: 0.4;
transform: scale(1.05);
}
}

/* Layout konten */
.about-us-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 5%;
position: relative;
z-index: 1;
}

.about-us-content {
flex: 1;
}

.about-us-content h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
}

.about-us-content p {
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 20px;
}

.about-us-image {
flex: 1;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.about-us-image img {
width: 100%;
display: block;
}


/* Responsive untuk mobile */
@media (max-width: 768px) {
.about-us-container {
  flex-direction: column;   /* urut ke bawah */
}

.about-us-content h2 {
font-size: 1.8rem;
  order: 1;                 /* judul dulu */
  width: 100%;
  text-align: left;
}

.about-us-image {
  order: 2;                 /* gambar setelah judul */
  width: 100%;
}

.about-us-content p {
  order: 3;                 /* paragraf terakhir */
  width: 100%;
  text-align: left;
}
}



/* Core Capabilities Section */
.core-capabilities {
display: flex;
background-color: #fafcfe;
width: 100%;
}

.capability-card {
position: relative;
flex: 1;
overflow: hidden;
cursor: pointer;
max-height: 30rem;
}

.capability-image-wrapper {
width: 100%;
height: 100%;
}

.capability-image-wrapper img {
width: 100%;
height: 100%;
transform: scale(1.02);
object-fit: cover;
filter: grayscale(100%);
transition: filter 0.5s ease, transform 0.5s ease;
}

.capability-card:hover .capability-image-wrapper img {
filter: grayscale(0%);
transform: scale(1.1);
}

.capability-detail {
position: absolute;
top: -3.25rem;
left: 50%;
transform: translateX(-50%);
background-color: white;
color: #1078ba;
padding: 10px 20px;
font-weight: 700;
font-size: .8rem;
border-radius: 2rem;
transition: top 0.5s ease;
z-index: 2;
text-align: center;
}

.capability-card:hover .capability-detail {
top: 20px;
}

.capability-footer {
position: absolute;
bottom: -3.25rem;
display: flex;
flex-direction: column;
width: 100%;
height: fit-content;
transition: bottom 0.5s ease;
z-index: 2;
}

.capability-card:hover .capability-footer {
bottom: 0;
}

.capability-label {
align-self: center;
width: 10rem;
text-align: center;
background-color: #1a75bb;
color: white;
padding: .8rem 2rem;
font-weight: 600;
clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
border-radius: 50px 50px 0 0;
transition: bottom 0.5s ease;
}

.capability-title {
text-align: center;
padding: 1rem;
color: #fff;
font-weight: 600;
background: linear-gradient(to top, #38a1db, #1078ba 25%);
}

/* Responsive untuk mobile */
@media (max-width: 768px) {
.core-capabilities {
  flex-direction: column;   /* arah ke bawah */
}

.capability-card {
  min-height: 280px;        /* kasih tinggi minimum biar rapi */
}

.capability-image-wrapper img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
}




/* Partners Section */
.partners-section {
padding: 10rem 5%;
text-align: center;
background-color: #fafcfe;
color: black;
}

.partners-section .section-header h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
}

.partners-section .section-header p {
font-size: 1.1rem;
color: #666;
margin-bottom: 60px;
}

.partners-grid {
  /* Ubah dari Grid ke Flexbox */
  display: flex;
  flex-wrap: wrap;         /* Agar item turun ke bawah jika penuh */
  justify-content: center; /* KUNCI: Agar semua item (termasuk sisa) mulai dari tengah */
  
  /* Sisa properti lama */
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}

/* Tambahkan ini agar logo tetap punya ukuran konsisten */
.partners-grid img {
  /* Kita set basis ukurannya agar mirip grid, tapi fleksibel */
  flex: 0 1 200px; /* shrink: yes, grow: no, basis: 200px */
  max-width: 200px;
  height: auto;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.partners-grid img:hover {
filter: grayscale(0%);
}

/* Tablet */
@media (max-width: 1024px) {
.partners-grid {
  grid-template-columns: repeat(3, 1fr); /* 3 logo per baris */
}
}

/* Mobile */
@media (max-width: 768px) {
.partners-grid {
  grid-template-columns: repeat(2, 1fr); /* minimal 2 logo terlihat */
  gap: 20px;
}
.partners-section .section-header h2{
  font-size: 1.8rem;
}
}


/* Footer */
.footer {
background-color: #0d1a26;
color: #a9b3c1;
}

.footer-contact-section {
justify-self: center;
display: flex;
align-items: center;
gap: 5%;
padding: 10% 5rem;
}

.footer-contact-info {
max-width: 40%;
flex: 1;
}

.footer-contact-info h2 {
font-size: 2.5rem;
color: white;
font-weight: 700;
margin-bottom: 20px;
}

.footer-contact-info p {
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 30px;
}

.footer-contact-info ul {
list-style: none;
}

.footer-contact-info li {
display: flex;
align-items: flex-start;
margin-bottom: 1rem;
}

.footer-contact-info li span {
line-height: 1.5;
}


.footer-contact-info .lucide {
width: 1.2em;
height: 1.2em;
min-width: 1.2em;
min-height: 1.2em;
flex-shrink: 0;
color: #1a75bb;
margin-right: 1rem;
}


.footer-contact-form {
width: 50%;
display: flex;
flex-direction: column;
background-color: #28303E;
padding: 2.5rem;
border: 1px solid #535965;
border-radius: .5rem;
}

.footer-contact-form h3 {
font-size: 1.8rem;
color: white;
font-weight: 600;
margin-bottom: 30px;
}

.form-row {
display: flex;
gap: 1.2rem;
}

.footer-contact-form input, .footer-contact-form textarea {
width: 100%;
display: block;
padding: 15px;
background-color: #3E4451;
border: 1px solid #535965;
border-radius: 5px;
color: white;
margin-bottom: 2rem;
}

.footer-contact-form textarea {
height: 120px;
resize: none;
}

/* Responsive Footer Contact Section */
@media (max-width: 768px) {
.footer-contact-info h2{
font-size: 1.8rem;
}

.footer-contact-form h3 {
font-size: 1.4rem;
}

.footer-contact-section {
  flex-direction: column;   /* stack ke bawah */
  align-items: stretch;     /* full width */
  padding: 2rem;
  gap: 2rem;
}

.footer-contact-info {
  max-width: 100%;
  text-align: left;         /* rata kiri, bukan center */
}

.footer-contact-info ul {
  padding: 0;
}

.footer-contact-form {
  width: 100%;              /* form full width */
}
}


.footer-main-container {
background-color: black;
}

.footer-main {
display: flex;
margin: 0 auto;
padding: 4rem 6%;
justify-content: space-between;
justify-self: center;
flex-wrap: wrap;
}

.footer-about {
flex: 2;
display: flex;
flex-direction: column;
gap: 2rem;
margin-right: 40px;
}

.footer-about img {
max-width: 200px;
}

.footer-social a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: #a9b3c1;
text-decoration: none;
margin-right: 1.2rem;
font-size: 1.1rem;
white-space: nowrap;
}

.footer-social {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}


.footer-social a:hover {
color: #1078ba;
transition: 0.2s ease-in-out;
}

.footer-links {
justify-items: center;
flex: 1;
line-height: 2rem;
}

.footer-links h4 {
font-size: 1.2rem;
color: white;
font-weight: 600;
margin-bottom: 20px;
}

.footer-links ul {
list-style: none;
}

.footer-links li {
margin-bottom: 10px;
}

.footer-links a {
color: #a9b3c1;
text-decoration: none;
}

.footer-links a:hover {
color: white;
transition: 0.2s ease-in-out;
}

.footer-certifications {
display: flex;
flex-direction: column;
flex: 1.5;
gap: 1rem;
text-align: end;
align-items: end;
}

.footer-certifications h4 {
font-size: 1.2rem;
color: white;
font-weight: 600;
margin-bottom: 20px;
}

.footer-certifications span {
color: #1a75bb;
}

.footer-certifications img {
max-width: 120px;
margin-bottom: 15px;
}

.footer-certifications img:hover {
transform: scale(1.2);
}

.back-to-top {
display: inline-block;
background-color: #36404a;
color: #fff;
padding: 10px 15px;
border-radius: 8px;
text-decoration: none;
margin-top: 20px;
font-weight: 500;
letter-spacing: 0.3px;
transition: 
background-color 0.3s ease,
transform 0.25s ease,
box-shadow 0.25s ease;
}

.back-to-top:hover {
background-color: #44505d;
transform: translateY(-3px);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

.footer-bottom {
text-align: center;
padding: 20px 5%;
background-color: black;
}

/* Responsive Footer Main */
@media (max-width: 768px) {
  .footer-main {
    flex-direction: column;  
    align-items: flex-start; 
    gap: 2rem;               
  }
  
  .footer-links {
    width: 100%;
    justify-items: start;
    flex: 1;
  }
  
  .footer-certifications {
    width: 100%;
    align-items: start;
    text-align: start;
  }
  
  .back-to-top {
  align-self: center;
  }
  }

/* --- Modal Styles 1 --- */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
backdrop-filter: blur(5px);
}

.modal-content {
background-color: white;
border-radius: 15px;
overflow: hidden;
width: 90%;
max-width: 800px;
color: #333;
box-shadow: 0 5px 20px rgba(0,0,0,0.3);
max-height: 85vh;
display: flex;
flex-direction: column;
}

.modal-header img {
width: 100%;
height: 20vh;
display: block;
object-fit: cover;
}

.modal-body {
padding: 30px 40px;
overflow-y: auto;
}

/* Custom Scrollbar */
.modal-body::-webkit-scrollbar {
width: 8px;
}

.modal-body::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
background: #555;
}

.modal-body h2 {
font-size: 2rem;
font-weight: 700;
color: #1a75bb;
margin-bottom: 5px;
}

.modal-body h3 {
font-size: 1.2rem;
font-weight: 600;
color: #666;
margin-bottom: 25px;
}

.modal-body p {
font-size: 1rem;
line-height: 1.7;
margin-bottom: 15px;
}

.modal-text-content-2 {
display: flex;
gap: 30px;
margin: 20px 0;
}

.modal-text-content-2 h4 {
font-size: 1.1rem;
font-weight: 700;
color: #1a75bb;
margin-bottom: 10px;
}

.modal-footer {
padding: 20px 40px;
text-align: right;
background-color: #f7f7f7;
border-top: 1px solid #eee;
}

body.modal-open {
overflow: hidden;
}


/* --- Modal Styles 2 --- */
.modal-overlay-b {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
backdrop-filter: blur(5px);
}

.modal-content-b {
background-color: white;
display: flex;
flex-direction: column;
border-radius: 1.5rem;
overflow: hidden;
width: 90%;
max-width: 800px;
color: #333;
box-shadow: 0 5px 20px rgba(0,0,0,0.3);
max-height: 64vh;
}

.modal-content-top {
padding: 2rem;
display: flex;
gap: 2rem;
overflow-y: auto;
}

.modal-header-b {
height: 100%;
}

.modal-header-b img {
margin-bottom: .8rem ;
border-radius: 1rem;
height: 14rem;
object-fit: cover;
}

.modal-body-b h4 {
font-size: 1.2rem;
font-weight: 700;
margin-top: 5px;
}

.modal-body-b h5 {
font-size: 1.2rem;
font-weight: 400;
color: #666;
}

.modal-body-b p {
font-size: 1rem;
line-height: 1.5;
}

.modal-text-content-b {
font-size: .9rem;
display: flex;
gap: 2rem;
}

.modal-text-content-b ol, .modal-text-content-b ul {
list-style-position: inside;
}

.modal-text-content-b h4 {
font-size: 1.1rem;
font-weight: 700;
color: #1a75bb;
margin-top: .5rem;
}

.modal-footer-b {
padding: 1rem 2rem;
text-align: right;
background-color: #f7f7f7;
border-top: 1px solid #eee;
}

.modal-close {
cursor: pointer;
}

body.modal-open {
overflow: hidden;
}

/* Custom Scrollbar */
.modal-body-b::-webkit-scrollbar {
width: 8px;
}

.modal-body-b::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

.modal-body-b::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}

.modal-body-b::-webkit-scrollbar-thumb:hover {
background: #555;
}

/* Responsive */
@media (max-width: 768px) {
.modal-content-top {
  display: flex;
  flex-direction: column;
  text-align: justify;
}
}



/* ===========================
Certificate Modal Styling
=========================== */
.modal-overlay {
display: none;                 /* hidden by default */
position: fixed;               /* selalu di atas layar */
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);   /* backdrop gelap */
z-index: 2000;                 /* pastikan di atas footer */
justify-content: center;
align-items: center;
overflow-y: auto;              /* scroll jika konten panjang */
padding: 2rem 1rem;            /* sedikit padding biar konten tidak nempel */
}

.modal-content-c {
  column-gap: 5rem;
  background: #fff;
  color: #000;
  max-width: 900px;
  width: 100%;
  border-radius: 12px;
  padding: 2rem;
  position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  animation: fadeInUp 0.35s ease;
}

.modal-content-c h2 {
font-size: 2rem;
margin-bottom: .5rem;
color: #1078ba;
}

.modal-content-c h4 {
font-size: 1rem;
margin-bottom: 1rem;
color: #333;
}

.certificate-grid {
margin: 4rem 0 2rem 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}

.certificate-item img {
width: 100%;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}

.certificate-item img:hover {
transform: scale(1.05);
}

.btn-close {
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 2rem;
  color: black;
  cursor: pointer;
  transition: color 0.2s;
}

.btn-close:hover{
  color: #333;
}

/* Animasi */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* Responsive */
@media (max-width: 768px) {
.modal-content-c {
  max-width: 768px;
  padding: 1.5rem;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
.certificate-grid {
grid-template-columns: 1fr;
}
}


/* ===========================
Become Partner Modal Styling
=========================== */
/* Partner Modal */
.partner-modal-content {
background: #fff;
max-width: 1000px;
width: 95%;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
animation: fadeInUp 0.35s ease;
}

.partner-modal-grid {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 500px;
}

.partner-modal-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.partner-modal-form {
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}

.partner-modal-form h2 {
margin: 0;
font-size: 2rem;
font-weight: 700;
color: #000;
}

.partner-modal-form .subtitle {
font-size: 1rem;
color: #666;
margin-bottom: 1.5rem;
}

.partner-modal-form input,
.partner-modal-form textarea {
width: 100%;
padding: 0.8rem;
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1rem;
}

.partner-modal-form textarea {
min-height: 120px;
resize: vertical;
}

/* Responsive */
@media (max-width: 768px) {
.partner-modal-grid {
grid-template-columns: 1fr;
}
.partner-modal-image {
display: none; /* hide image on small screen */
}
}


/* --- LOGIKA SWITCH TOMBOL (PASTI JALAN) --- */

/* 1. Kondisi Default (Desktop) */
#certDesktop {
  display: inline-flex; /* Munculkan tombol teks */
}

#certMobile {
  display: none; /* Sembunyikan tombol icon */
}

/* 2. Kondisi Mobile (Layar HP < 968px) */
@media (max-width: 768px) {
  
  /* Balik Logikanya */
  #certDesktop {
      display: none !important; /* Matikan tombol teks */
  }

  #certMobile {
      display: inline-flex !important; /* Hidupkan tombol icon */
      /* Bikin Kotak */
      padding: 0 !important;
      width: 3.5rem !important;
      height: 3.5rem !important;
      align-items: center;
      justify-content: center;
      border-radius: .5rem;
  }
  
  .hero-buttons {
      gap: 1rem;
      align-items: stretch;
  }
}

/* --- MODAL FIXES (Paste di bagian paling bawah) --- */

/* 1. Pastikan Modal Selalu Paling Atas (Di atas Navbar Mobile) */
.modal-overlay, .modal-overlay-b {
  z-index: 10001 !important; /* Navbar Mobile = 9999, ini harus lebih tinggi */
}

/* 2. Perbaiki Tombol Close "X" yang hilang */
.btn-close, .modal-close {
  cursor: pointer;
  z-index: 10002; /* Pastikan tombol close di atas konten modal */
}

/* 3. Fix Layout Modal di Mobile (Agar bisa klik 'Outside') */
@media (max-width: 768px) {
  
  /* Atur agar modal tidak 100% nempel layar, beri jarak biar bisa klik outside */
  .modal-content, .modal-content-b, .modal-content-c {
      width: 90% !important;       /* Jangan full 100% */
      max-height: 80vh !important; /* Jangan full tinggi layar */
      margin: auto;                /* Posisi tengah */
      border-radius: 12px;         /* Sudut membulat */
      overflow: hidden;            /* Rapikan isi */
      display: flex;
      flex-direction: column;
  }

  /* Khusus Modal Sertifikat (Content C) */
  .modal-content-c {
      padding: 1.5rem !important;
      overflow-y: auto; /* Aktifkan scroll di dalamnya */
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }

  .btn-partner {
    outline: solid red;
    margin: 0 5rem;
  }

  /* Pastikan tombol Close (X) Tetap di Pojok Kanan Atas & Tidak Ikut Scroll (Sticky) */
  .btn-close {
      position: fixed; /* Ubah ke fixed relatif terhadap viewport/modal wrapper */
      top: 20px;
      right: 20px;
      background: white; /* Beri latar putih biar jelas */
      border-radius: 50%;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
      color: #333;
      font-weight: bold;
      font-size: 1.5rem;
      z-index: 10003;
  }
}