/* =====================================================================
   PT Heksa Nenggala Indonusa — Organized Stylesheet
   - Grouped by component/section
   - Media queries consolidated at the end
   - All original rules preserved (reordered only)
   ===================================================================== */


/* =========================
   1. GLOBAL RESET & BASE
========================= */
*{margin: 0;
  padding: 0;
  box-sizing: border-box;}

body{font-family: 'Poppins', sans-serif;
  background: #fff;
  color: #111;
  line-height: 1.6;}

a{text-decoration: none;}


/* =========================
 2. NAVBAR & LANGUAGE TOGGLE
========================= */
.navbar{position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background-color: rgba(19, 30, 61, 0.6); /* dark blue with 60% opacity */
  z-index: 1000; /* higher than the overlay */
  position: absolute;

  height: 80px; /* fixed height */
  overflow: visible;}

.navbar .logo{height: 75px;
  width: 75px;
  object-fit: contain;}

.navbar ul{display: flex;
  gap: 30px;
  list-style: none;}

.navbar a{color: #fff;
  font-weight: 500;}

.navbar a.active{color: #5adb7a; /* green */
  background-color: rgba(255, 255, 255, 0.1); /* subtle dark overlay */
  padding: 6px 12px;
  border-radius: 8px;
  transition: 0.3s;}

/* LANGUAGE TOGGLE BAR */
/* Ensure nav items stay in a row */
.navbar ul{display: flex; gap: 30px; align-items: center;}

/* Dropdown container must be positioning context */
.navbar .dropdown{position: relative;}

/* Button (pill) */
.lang-btn{display: inline-block;
padding: 6px 12px;
border-radius: 999px;
border: 1.5px solid rgba(255,255,255,0.6);
color: #fff;
background: transparent;
font-weight: 600;
font-size: 0.9rem;
line-height: 1;
cursor: pointer;
white-space: nowrap;            /* keep “ID ▾” in one line */
transition: background-color .2s, border-color .2s, transform .06s;}

.lang-btn:hover{background: rgba(255,255,255,.12); border-color: #fff;}

/* Parent stays positioning context */
.navbar .dropdown{position: relative;}

/* Auto-width language menu */
.lang-menu{position: absolute;
right: 0;                    /* opens inward from the right edge of the pill */
width: max-content;          /* <-- grow to fit content */
min-width: 180px;            /* but never smaller than this */
max-width: calc(100vw - 32px); /* safety for tiny screens */
list-style: none;
margin: 0;
padding: 12px 0;             /* taller box */
background: rgba(19,30,61,.95);
border: 1px solid rgba(255,255,255,.15);
border-radius: 10px;
display: none !important;
z-index: 1001;
overflow: hidden;            /* clip hover bg to rounded corners */}

.lang-menu li{padding: 10px 20px;
text-align: left;
white-space: nowrap;         /* keep each option on a single line */}

.lang-menu a{color: #fff;
text-decoration: none;
display: block;}

.lang-menu a:hover{background: rgba(255,255,255,.1);
border-radius: 6px;}

/* open state */
.dropdown.open .lang-menu{display: block !important;    top: calc(100% + 4px); /* super tight gap on small screens */
}

/* === Responsive Navbar & Layout Enhancements (added by ChatGPT) === */
.nav-toggle{display: none; background: transparent; border: 1px solid rgba(255,255,255,0.4); color: #fff; border-radius: 8px; width: 42px; height: 42px; align-items: center; justify-content: center; font-size: 22px;}


/* =========================
 3. HERO SECTIONS (Generic & Career)
========================= */
/* --- NAVBAR: turn into hamburger on small screens --- */

/* --- HERO TEXT scaling --- */
.hero-text h1, .montserrat{font-size: clamp(1.8rem, 6vw, 5rem);}

.hero-text p{font-size: clamp(1rem, 3vw, 1.2rem);}

/* --- PRODUCTS grid: stack on small --- */

/* Smaller product images on small screens */

/* --- CAREER flex: stack content --- */

/* --- MINI-INDEX: hide or move for mobile --- */


.hero-dots{position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 2;}

.hero-dot{width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;}

.hero-dot.active{background-color: #fff;}

.hero-tagline{text-align: center;
  position: relative;

  z-index: 2; /* must be higher than ::before which is 1 */}

.hero-tagline p{display: inline-block;
  font-size: 1.2rem;
  color: white;
  margin: 0;}

.hero-line{height: 1px;
  background-color: #f5c85c;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
  z-index: 4; /* higher than the overlay */

  /* ✅ Width matches the paragraph below */
  width: auto;
  padding-left: 10px;
  padding-right: 10px;}

.hero-subline{display: inline-block;
  text-align: center;}

.hero-subline .hero-line{width: 100%;
  height: 2px;
  background-color: #f5c85c;
  margin-bottom: 8px;}

.hero-subline p{margin: 0;
  font-size: 1.2rem;
  color: white;}

.hero{position: relative;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  background-image: url('assets/stock.jpg'); /* optional */
  background-size: cover;
  background-position: center;
  overflow: hidden;}

.hero::before{content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(19, 30, 61, 0.6); /* dark blue with 60% opacity */
  z-index: 1;}

.hero h1{position: relative;
  z-index: 2;}

.hero-text h1{font-size: 2.5rem;
  font-weight: 700;
  line-height: 1; /* Try values between 0.8 to 1.2 depending on how tight you want it */}

.hero-text p{font-size: 1.1rem;
  margin-top: 10px;
  opacity: 0.9;
  color: white;}

.montserrat{font-family: 'Montserrat', sans-serif;
  font-size: 5rem ;
  font-weight: 700;}

/* Hero/title class you use elsewhere */
.montserrat{font-size: clamp(2rem, 8vw, 5rem);
line-height: 1.1;}

/* KARIRR */
/* =========================
 CAREERS SECTION
 ========================= */
 .career-hero{width: 100%;
  height: 60vh; /* half the screen */
  overflow: hidden;
  margin: 0; /* no extra gap */}

.career-hero-img{width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* removes inline-gap */}

/* Hero Heading scales with screen size */
.hero-text h1,
.montserrat{font-size: clamp(2rem, 8vw, 5rem); /* min 2rem, grows with viewport, max 5rem */
line-height: 1.1;}

/* Subheading or tagline */
.hero-text p{font-size: clamp(1rem, 3vw, 1.25rem); /* min 1rem, max ~1.25rem */}


/* =========================
 4. PRODUK HERO / SECTION
========================= */
/* Mobile: stack columns */


/* Produk Kami — scroll-triggered zoom */
#produk {
  position: relative;
  height: 75vh;
  overflow: hidden;
}
#produk::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('assets/stock1.jpg');
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 10s ease-out;  /* ⬅️ slower zoom */
  z-index: -2;
}

#produk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(19, 30, 61, 0.05); /* dark navy @ 55% opacity */
  z-index: -1;
}

/* Active zoom state */
#produk.zoomed::before {
  transform: scale(1.15); /* zoomed in */
}

/* Mobile: swap to single hero image */
/* Desktop: 3 columns (as you have) */

/* Mobile: 3 rows */

/* Mobile: only 2 stacked images */


.produk-overlay{background-color: rgba(19, 30, 61, 0.6); /* dark blue with 60% opacity */

  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 20px;}

.produk-content{text-align: center;
  color: white;
  max-width: 800px;}

.produk-content h2{font-size: 3rem;
  font-weight: 800;
  margin-bottom: 30px;}

.produk-content p{text-align: justify;
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 20px;}

.produk-content .button{margin-top: 20px;}

.hero-produk{position: relative;
  width: 100%;
  height:600px; /* adjust as needed */
  background: url("assets/final2.jpg") center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;}

.hero-produk .hero-overlay{background: rgba(0,0,0,0.4); /* dark overlay for readability */
  padding: 40px 20px;
  text-align: center;
  border-radius: 12px;}

.hero-produk h1{color: #fff;
  font-size: 2.5rem;
  margin-bottom: 10px;
  font-weight: 700;}

.hero-produk p{color: #f1f1f1;
  font-size: 1.2rem;
  margin: 0;}


/* =========================
 5. MINI INDEX (Tentang Kami)
========================= */
/* Desktop / Mac view */
.content-wrapper{max-width: 1400px;            /* expand total width */
margin: 0 auto;
padding: 40px 35;
display: grid;
grid-template-columns: 360px 1fr; /* wider rectangle: 360px, rest for text */
gap: 48px;                     /* bigger space between */
align-items: start;
}

.mini-index{background: #fff;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0,0,0,.08);
padding: 35px 35px;
}

.mini-index ul{list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 3px;   /* current spacing */}

.mini-index a{display: block;
font-weight: 600;
padding: 12px 14px;
border-radius: 8px;
text-decoration: none;
color: #111;
transition: background-color .18s ease;}

.mini-index a:hover{background: #f4f6fb;}

/* Make main text take more width */
.main-content{max-width: 1000px;            /* more generous line length */
line-height: 1.7;
font-size: 1.05rem;
padding-left: 35px;       /* ⬅️ small internal padding if needed */
padding-right: 35px;
padding-top: 35px}


/* =========================
 6. PRODUCTS
========================= */
/* produk */
.product-page{margin-top: 100px;
  padding: 0 20px;
  padding-top: 10px;  /* default is probably larger, reduce it */}

.product-wrapper{display: flex;
  justify-content: center;
  align-items: stretch; /* ensures both cards match height */
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;}

.product-title{font-size: 32px;
  text-align: center;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  color: #333;
  margin-bottom: 30px; /* space BELOW the title only */
  margin-top: 0;        /* remove default top margin */}

.product-container{display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;}

.product-card{display: flex;
  align-items: flex-start;
  gap: 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 20px;
  flex: 1;}

.product-image{width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;}

.product-info{padding: 15px;
  color: #333;}

.product-grid{display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  justify-content: center;}

.product-container .product-card:nth-of-type(9){grid-column: 1 / -1;
  justify-self: center;}

/* .product-card{display: flex;
  align-items: flex-start;
  gap: 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 20px;
  flex: 1;}

.product-info{flex: 1;}

*/

.product-name{text-align: center;
  margin: 0 0 12px;
  font-size: 1.4rem;
  font-weight: bold;}

.product-desc{text-align: justify;
  font-size: 1rem;
  line-height: 1.6;}


/* =========================
 7. CAREER
========================= */
.career-content{display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: center;
  text-align: left;}

.career-content img{max-width: 400px;
  border-radius: 10px;}

.career-content > div{max-width: 500px;}

.career-flex{display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;}

.career-img img{max-width: 500px;
  width: 100%;
  border-radius: 10px;}

.career-text{max-width: 600px;
  color: #f0f0f0;
  text-align: justify;}

.career-text h2{font-size: 2.5rem;
  font-weight: 700;
  font-style: italic;
  margin-bottom: 20px;
  font-family: 'Montserrat', sans-serif;}

.career-text p{font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 20px;}

.career-page{text-align: center;
  padding: 32px 20px; /* smaller padding */}

.career-stack{text-align: left;

  max-width: 1000px;
  margin: 0 auto;}

.career-stack h2,
.career-stack h1,
.career-stack p{text-align: left;

  margin: 6px 0;     /* remove large default margins */
  line-height: 1.3;  /* tighter spacing */}

/* top 10px, bottom 30px (more spacing before paragraph) */


.career-email a{display: inline-block; /* keeps it neatly centered */
  color: #5adb7a;
  font-weight: bold;
  font-size: 1.8rem;
  text-decoration: none;}

.career-email a:hover{text-align: left;

  text-decoration: underline;}

.career-desc{font-size: 1rem;
  line-height: 1.35; /* readable but tighter */
  color: #333;
  text-align: center; /* override global justify */}

.career-page .career-email{display: block;
  text-align: left;
  margin: 0 0 30px;   /* <-- increase this number for more space */}

.career-page .career-desc{text-align: justify;     /* keep it justified */
  line-height: 1.6;        /* readability */
  max-width: 1500px;       /* make the text block wider */
  margin-left: auto;       /* keep it centered */
  margin-right: auto;
  margin: 0 0 40px;   /* <-- increase this number for more space */}

.career-subtitle{font-size: 1.5rem;
  font-weight: 600;
  margin: 100px 0 30px;   /* top 10px, right-left 0, bottom 30px */}

.career-title{font-size: 2rem;
  font-weight: 700;
  margin-top: 100px;   /* keep some space above */
  margin-bottom: 10px;}

.career-page{background: #fff;       /* keep white background */
  padding-top: 70px;      /* more space above subtitle */
  padding-bottom: 60px;   /* more space below paragraph */}


/* =========================
 8. CLIENTS / DAFTAR KLIEN
========================= */
/*DAFTAR CLIENT */
.daftar-klien{text-align: left;
  padding: 40px 0px 20px 0px;}

.clients-grid{display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  align-items: center;
  justify-items: center;}

.clients-grid img{max-width: 150px;
  max-height: 80px;
  object-fit: contain;
  filter: grayscale(20%);
  transition: filter 0.3s ease;}

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

/* Responsive: stack into 2 columns on smaller screens */


.clients-grid img{max-width: 150px;
  max-height: 80px;
  object-fit: contain;
  filter: grayscale(20%);
  transition: filter 0.3s ease;}

/* Make HKI and Servo bigger */
.clients-grid img[alt="PT Hutama Karya Infrastruktur"],
.clients-grid img[alt="PT Servo Lintas Raya"]{max-width: 350px; /* bigger width */
  max-height: 170px; /* slightly taller */}


/* =========================
 9. FOOTER
========================= */
footer{background-color: #131e3d;
  color: white;
  font-family: 'Poppins', sans-serif;
  padding: 165px 40px; /* was 60px — more vertical padding */
  box-sizing: border-box;}

/* Columns */
.footer-column{min-width: 0;}

.footer-column hr{border: none;
  border-top: 1px solid #999;
  margin: 0 0 15px 0;
  max-width: 525px;}

.footer-text-block{max-width: 525px;}

/* Icon/text alignment */
.footer-item{position: relative;
  padding-left: 36px;
  margin-bottom: 10px;
  text-align: left;}

.footer-icon{position: absolute;
  left: 0;
  top: 2px;
  width: 24px; height: 24px;
  font-size: 18px;
  line-height: 24px;}

.footer-item img.footer-icon-img{position: absolute;
  left: 0; top: 2px;
  width: 20px; height: 20px;
  object-fit: contain;
  display: block;}

.footer-item p{margin: 0; line-height: 1.4;}

.footer-separator {
  border: none;
  margin: 0;
}

.footer-header{max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 10px;
  text-align: left; /* make subheading left-aligned too */}

/* Two-column area */
.footer-content{display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding-right: 20px;
  padding-bottom: 1px; /* smaller space below columns */
  padding-left: 20px;    
  background-color: #131e3d;}


/* =========================
 10. UTILITIES
========================= */
.section{padding: 80px 40px;
  width: 100vw;
  max-width: none;
  margin: 0;
  text-align: center;}

.section.dark{background-color: #131e3d;
  color: #f0f0f0;}

.mitra-right .button{margin-top: 20px;}

.button{display: inline-block;
  background-color: #fff;
  color: #001f3f;
  padding: 10px 20px;
  margin-top: 20px;
  border-radius: 5px;
  font-weight: 600;}

.button.light{background-color: #f5c85c;
  color: #001f3f;}

/* Make sure we’re not offsetting the email column anymore */
.email-column{margin-top: 0;}

/*tentang kami */
.sebaran-img{width: 100%;
  height: auto;
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}

/* Products grid stack on small */

/* Career section stack */

/* Mini index / sidebar adjustments if present */

/* Ensure images and videos are responsive globally */
img, video{max-width: 100%; height: auto;}


/* =========================
 11. MISC (Uncategorized)
========================= */
nav a.active{background-color: #1a2b48;
  color: #5adb7a;}

nav a.active{background-color: #1a2b48;
color: #5adb7a;}

/* MITRA TERPERCAYA — layout + sizing */
section.mitra .mitra-container{
  /* center the block and make 2 columns */
  width: min(1200px, 100% - 48px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(240px, 420px) minmax(0,1fr);
  gap: 48px;
  align-items: start;           /* align tops so they line up */
}

section.mitra .mitra-left h2{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.2rem); /* smaller than before */
  line-height: 1.1;
  margin: 0;
}

section.mitra .mitra-right{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

section.mitra .mitra-right p{
  margin: 0;
  max-width: 720px;            /* tidy line length */
  line-height: 1.7;
}

section.mitra .mitra-right .button.light{
  align-self: center;    /* button centered under the paragraph */
  margin-top: 6px;
}



/* Big page titles */
section h2{font-size: clamp(1.4rem, 3.5vw, 1.8rem);
line-height: 1.2;}

/* Labels + dividers */
.label{font-size: 0.9rem;
  color: #ccc;
  margin-bottom: 5px;}

.contact-heading{font-size: 2.5rem; /* much smaller */
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 10px;
  text-align: left; /* align to the left */}

.contact-subheading{font-size: 1rem;
  font-weight: 400;
  color: #ccc;
  margin-bottom: 20px;
  line-height: 1.5;
  text-align: left;}

p{text-align: justify;}

.vertical-divider{width: 1px;
  background-color: #ddd;
  margin: 20px 0;}

/* MISI */
.misi-heading{text-align: center;
  text-decoration: underline;
  font-size: 1.2rem;
  margin-bottom: 20px;}



.misi-item{flex: 1;
  max-width: 300px;}

.misi-icon{width: 60px;
  height: 60px;
  margin-bottom: 10px;}

.misi-line{width: 75px; /* short line */
  height: 1px; /* thin line */
  background-color: #000; /* black, or your brand color */
  border: none;
  margin: 0 auto 20px auto; /* center and space below */}


/* =========================
 12. RESPONSIVE MEDIA QUERIES
========================= */

/* ---- max-width: 992px ---- */
@media (max-width: 992px) {
.mini-index {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}
.main-content {
  flex: 1;
  max-width: 900px;
  margin: 0 auto;        /* center the content */  
  padding-top: 20px}
}

@media (max-width: 992px){
.mini-index { position: relative; left: 0; right: 0; width: 100%; margin: 0 0 16px 0; }
}

@media (max-width: 992px) {
.content-wrapper {
  display: block;
  padding: 24px 16px;
}
.mini-index {
  max-width: 720px;
  margin: -20px auto 32px auto;  /* center below hero */
}
.main-content {
  margin: 0 auto;
}
}

/* ---- max-width: 900px ---- */
@media (max-width: 900px){
.navbar { padding: 16px 20px; }
.navbar .logo { height: 56px; width: 56px; }
.nav-toggle { display: inline-flex; }
.navbar ul {
  display: none;
  position: absolute;
  top: 80px; left: 0; right: 0;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
  background: #131e3d;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.navbar ul.open { display: flex; }
.navbar a { padding: 10px 6px; }
}

/* ---- max-width: 768px ---- */
@media (max-width: 768px) {
.navbar ul {
  display: none; /* hide menu initially */
  flex-direction: column;
  background: #131e3d;
  position: absolute;
  top: 80px; left: 0; right: 0;
  padding: 20px;
}
.navbar ul.open {
  display: flex;
}
.navbar .logo {
  height: 60px; width: 60px;
}
.nav-toggle {
  display: block;
  cursor: pointer;
  font-size: 1.5rem;
  color: white;
}
}

@media (max-width: 768px) {
.product-container {
  grid-template-columns: 1fr;
}
.product-card {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.product-image {
  width: 100%;
  height: auto;
}
}

@media (max-width: 768px) {
.career-flex {
  flex-direction: column;
  gap: 20px;
}
.career-text {
  text-align: left;
  padding: 0 10px;
}
}

/* iPhone / small screens: stack top→bottom */
@media (max-width: 768px){
  section.mitra .mitra-container{
    grid-template-columns: 1fr; /* single column */
    gap: 16px;
  }
  section.mitra .mitra-left{
    text-align: center;
  }
  section.mitra .mitra-right{
    align-items: center;
    text-align: center;
  }
  section.mitra .button.light{
    align-self: center;
  }
  section.mitra .mitra-left h2{
    font-size: 2rem;            /* smaller on phones */
  }
}





@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
  }
  .contact-heading { font-size: 2.5rem; }
}

@media (max-width: 768px){
#produk {
  background-image:
    url('assets/stock1.jpg'),
    url('assets/stock2.jpg');   /* pick which 2 you want */
  background-size: 100% 50%, 100% 50%;  /* each takes half height */
  background-position: top, bottom;     /* one on top, one on bottom */
  background-repeat: no-repeat;
  height: 100vh; /* full viewport height, adjust as needed */
}
}

@media (max-width: 768px) {
  .career-flex {
    flex-direction: column;
    align-items: flex-start;
  }

  .career-text h2 {
    font-size: 2rem;
  }

  .career-text {
    text-align: left;
  }
}

@media (max-width: 600px) {
  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
    width: 150px;
    margin-left: -30px;
  }
  
}

@media (max-width: 768px){
.product-container { grid-template-columns: 1fr; }
.product-card { flex-direction: column; align-items: center; text-align: center; }
.product-image { width: 100%; max-width: 320px; height: auto; }
}

@media (max-width: 768px){
.career-flex { flex-direction: column; gap: 20px; }
.career-text { text-align: left; padding: 0 10px; }
}

/* ---- max-width: 600px ---- */
@media (max-width: 600px){
.product-image img {
  max-width: 180px;   /* shrink width */
  height: auto;
  margin: 0 auto;     /* keep centered */
  display: block;
}
}

@media (max-width: 600px){
.product-card {
  padding: 16px;      /* less padding on small view */
}
.product-card h3 {
  font-size: 1.1rem;  /* slightly smaller titles */
}
}

@media (max-width: 600px) {
.mini-index {
  max-width: 100%;
  margin: -12px 0 24px 0;
  border-radius: 12px;
  margin-bottom: 30px;   /* add extra gap below the card */

}
.main-content {
  margin: -12px 40px 10px 5px;  /* no left/right margin */
  width: 375px;
  padding-top: 20px;
  margin-right: 75px;
}
}

@media (max-width: 600px){
.hero-text h1,
.montserrat {
  font-size: clamp(1.6rem, 8vw, 2.4rem); /* min 1.6rem, max 2.4rem */
  line-height: 1.15;
}

.hero-text p {
  font-size: clamp(0.9rem, 3.5vw, 1rem);
}
}

/* === Cinematic Hero (cross-fade + Ken Burns) === */
.hero-cinema{ position: relative; min-height: 88vh; overflow: hidden; isolation: isolate; }
.hero-cinema .hero-bg{ position: absolute; inset: 0; z-index: -1; }
.hero-cinema .hero-bg img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;           /* no squish */
  opacity: 0; transform: scale(1.05);
  transition: opacity 1.2s ease;
}
.hero-cinema .hero-bg img.active{ opacity: 1; animation: kb-hero 18s ease-in-out infinite alternate; }
.hero-cinema::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.45));
  z-index: -1;
}
.hero-cinema .hero-inner{
  width: min(1100px, 100% - 40px);
  margin: 0 auto;
  padding: clamp(40px, 10vw, 120px) 0;
  text-align: center;
  color: #fff;
}
.hero-cinema .hero-title{
  font-size: clamp(2rem, 11vw, 5rem);
  line-height: 1.05;
  margin: 0;
}
.hero-cinema .hero-divider{
  width: 140px; height: 3px; background: #e4c87a; opacity: .9;
  margin: clamp(12px, 2vw, 18px) auto;
}
.hero-cinema .hero-tagline{
  letter-spacing: .06em; font-weight: 600; opacity: .95;
  font-size: clamp(0.9rem, 2.6vw, 1.1rem);
}

/* Smaller hero on small phones */
@media (max-width: 600px){
  .hero-cinema{ min-height: 72vh; }
  .hero-cinema .hero-title{ font-size: clamp(1.8rem, 10vw, 2.4rem); }
  .hero-cinema .hero-divider{ width: 110px; }
  .hero-cinema .hero-tagline{ font-size: clamp(0.85rem, 3.5vw, 1rem); }
}

/* Ken Burns zoom animation */
@keyframes kb-hero{
  0%{ transform: scale(1.05); }
  100%{ transform: scale(1.15); }
}


/* === KARIR (final, canonical) === */

/* Section wrapper */
#karir{
  margin:0;
  padding:0;
  background:#fff;
}

/* 2-column layout on desktop */
.karir-container{
  display:flex;
  align-items:stretch;       /* make columns equal height */
  gap:0;
  max-width:1200px;
  margin:0 auto;
  padding:0;
}

/* IMAGE COLUMN — give it height so the <img> can fill it */
.karir-img{
  flex:1;
  min-height:60vh;           /* <— this is the “taller” part */
  overflow:hidden;
}
.karir-img img{
  width:100%;
  height:100%;               /* now works because parent has min-height */
  object-fit:cover;
  display:block;
}

/* TEXT COLUMN */
.karir-text{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:40px;
  max-width:680px;           /* aligns with your footer rhythm */
  margin:0 auto;
  text-align:left;
}
.karir-text h2{ margin:0 0 18px; font-size:2rem; }
.karir-text p{  margin:0 0 18px; }

.karir-text .button {
  display: inline-block;   /* shrink to fit text */
  width: auto;             /* not full width */
  padding: 10px 18px;      /* just some space inside */
  margin: 0 0 24px 0;       /* 👈 24px space below */
  align-self: flex-start;  /* forces it left within the text block */
  text-align: left;        /* ensures text aligns left inside */
}


/* === Mobile === */
@media (max-width:768px){
  .karir-container{ display:block; }
  .karir-img{
    min-height:auto;
    aspect-ratio:16/9;       /* fixed rectangle banner on phones */
  }
  .karir-text{
    padding:0;
    width:min(680px, 100% - 32px);
    margin:16px auto 0;
  }
}


/* === Align Karir, Produk, Mitra with footer gutters === */
@media (max-width: 1200px) {
  /* KARIR */
  #karir .karir-text {
    width: 100%;
    max-width: 1200px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 55px;   /* same as footer */
    padding-right: 55px;  /* same as footer */
  }

  /* PRODUK KAMI */
  #produk .produk-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 30px;
    padding-left: 25px;   /* same as footer */
    padding-right: 25px;  /* same as footer */
    text-align: center;     /* match footer instead of centered */
  }

  /* MITRA TERPERCAYA */
  section.mitra .mitra-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 30px;
    padding-left: 5px;   /* same as footer */
    padding-right: 5px;  /* same as footer */
  }
}

body {
  font-family: 'Poppins', sans-serif;
  background: #fff;
  color: #111;
  line-height: 1.6;   /* 👈 base line spacing */
  font-size: 16px;    /* 👈 add this if not set */
}

h1,
.hero-text h1,
.montserrat {
  font-size: clamp(4rem, 5.5vw, 5rem) ;
  line-height: 1;
}
.hero-tagline h1 {
  margin: 0 0 18px 0;   /* only 8px bottom space */
  line-height: 0.8;    /* keeps the two lines snug */
}

/* Subline spacing */
.hero-subline {
  margin-top: 5px;     /* shrink gap before "TEPAT KUALITAS…" */
  line-height: 1;    /* keeps the two lines snug */

}


/* === Mobile: shrink headings for iPhone view === */
@media (max-width: 600px) {
  h1,
  .hero-text h1,
  .montserrat {
    font-size: clamp(2.5rem, 5.5vw, 3rem) ;
    line-height: 0.4;
  }

  h2,
  .karir-text h2,
  .produk-content h2,
  section.mitra .mitra-left h2 {
    font-size: 2rem;   /* smaller subheadings */
    line-height: 1.3;
  }

  h3 {
    font-size: 1rem;
    line-height: 1.3;
  }
  /* Hero headline spacing fix */
.hero-tagline h1 {
  margin: 0 0 4px 0;   /* only 8px bottom space */
  line-height: 0.2;    /* keeps the two lines snug */
}

/* Subline spacing */
.hero-subline {
  margin-top: 4px;     /* shrink gap before "TEPAT KUALITAS…" */
  line-height: 0.2;    /* keeps the two lines snug */
  font-size: 0.5rem;

}
.hero-line{
  margin-top: 4px;
}

}

/* MOBILE: Produk = single image, vertically cropped */
@media (max-width: 768px){
  /* kill the two-image background applied to #produk */
  #produk{
    background: none !important;
    height: 100vh;               /* tweak as you like */
  }
  /* use the same single image via ::before */
  #produk::before{
    background-image: url('assets/stock1.jpg') !important;
    background-size: cover;      /* fill vertically */
    background-position: 50% 25%;/* "crop" – move focus up/down: 0% top … 100% bottom */
    transform: scale(1);         /* keep your zoom animation if desired */
  }
}


/* Mobile: tighten spacing for the Tentang Kami mini index */
@media (max-width: 600px){
  .mini-index {
    padding: 12px 14px;       /* less inner space */
    margin: -8px 40px 60px 40px;  /* ⬅️ auto left/right centers the box */
    border-radius: 10px;
    width: 300px;         /* ✅ remove any desktop max-width limit */
    align-items: center;
  }

  .mini-index ul {
    gap: 10px;                 /* reduce vertical gap between list items */
  }

  .mini-index a {
    padding: 8px 10px;        /* make each link less tall */
    font-size: 0.95rem;       /* slightly smaller font */
  }


}

/* Mobile: add more left/right padding for career section */
@media (max-width: 600px){
  .career-page {
    padding-left: 60px;   /* increase side spacing */
    padding-right: 60px;
  }

  .career-text {
    padding-left: 60px;
    padding-right: 60px;
    
  }
}

/* Mobile: adjust career email size & spacing */
@media (max-width: 600px){
  .career-email a {
    font-size: 1.6rem;     /* smaller text */
    word-break: break-word; /* allows wrapping mid-word if too long */
    line-height: 1.4;      /* more breathing space */
    display: block;        /* full-width so it wraps neatly */
    text-align: left;      /* keeps alignment with paragraphs */
  }

  .career-email {
    margin-bottom: 10px;   /* add space below the email block */
  }
}

/* Add space between the subheading and the email line */
.career-page h2 {
  margin-bottom: 20px;   /* ⬅️ increase this number for more gap */
}

.career-email {
  margin-top: 10px;      /* optional: also push the email down */
}

@media (max-width: 768px) {
  .lang-menu li {
    padding: 1px 2px;   /* smaller vertical padding */
  }

  .lang-menu a {
    font-size: 1rem;   /* make text a bit smaller if needed */
    line-height: 0.8;    /* tighter line spacing */
  }
}

/* Extra small: iPhone-sized screens */
@media (max-width: 600px) {
  h1,
  .hero-text h1,
  .montserrat {
    font-size: clamp(3rem, 6vw, 5rem);  /* smaller range */
    line-height: 1.1;                       /* keeps lines snug */
  }

  .hero-tagline h1 {
    font-size: clamp(2rem, 5vw, 2.5rem);    /* tagline slightly smaller */
    line-height: 1.0;
  }
}
#karir .karir-text {
  color: #131e3d; /* dark blue */
}

#tentang-kami,
#tentang-kami .main-content,
#tentang-kami .mini-index,
#tentang-kami .mini-index a {
  color: #131e3d;   /* dark blue */
}

#tentang-kami .mini-index a:hover {
  background: rgba(19,30,61,0.1); /* subtle hover still dark blue friendly */
  color: #131e3d;
}
.stats-section{
  display:flex; gap:40px; justify-content:space-around; flex-wrap:wrap;
  padding:60px 20px; text-align:center; background:#fff; align-items: center;
}

.stat-box{flex:1; min-width:220px; color:#131e3d; align-items: center; text-align: center;}
.stat-box img{display:block; margin:0 auto 12px; width:72px; height:72px;}
.stat-box h2{margin:0; font-weight:800; font-size:2.8rem; color:#131e3d;}
.stat-box p{margin-top:8px; font-size:1.05rem; color:#131e3d; text-align: center;}

@media (max-width: 600px) {
  /* Stats Section */
  .stats-section {
    flex-direction: column;  /* stack vertically */
    gap: 24px;              /* less gap */
    padding: 40px 10px;
  }

  .stat-box {
    min-width: auto;      /* remove forced min-width */
    text-align: center;
  }

  .stat-box img {
    width: 56px;          /* smaller icon */
    height: 56px;
    margin-bottom: 8px;
  }

  .stat-box h2 {
    font-size: 2rem;      /* smaller number */
  }

  .stat-box p {
    font-size: 0.9rem;    /* smaller caption */
    margin-top: 6px;
  }
/* Make every contact row use the same two-column grid */


  .misi-icon {
    display: block;
    margin: 0 auto 12px auto;  /* centers icon above text */
  }

  .misi-item p {
    text-align: justify;      /* match visi style */
    margin: -12px 0px 10px 5px;  /* no left/right margin */
    width: 300px;
    padding-top: 20px;
    padding-left: 0px;
    margin-left:0px;
    margin-right: 75px;
  
  }

    /* Default (desktop/tablet) */




 
  

}

/* === Visi & Misi layout === */
.misi-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items:start;
  margin-top: 12px;
}

.misi-item{
  text-align:left;
}

.misi-icon{
  width:48px;
  height:auto;
  display:block;
  margin: 4px 0 10px;
}

/* --- Mobile: stack vertically (iPhones) --- */
@media (max-width: 600px){
  .misi-grid{
    grid-template-columns: 1fr;   /* one column */
    gap: 16px;
  }

  .misi-item{
    display:flex;                 /* icon left, text right */
    align-items:flex-start;
    gap:12px;
  }

  .misi-icon{
    width:40px;                   /* slightly smaller on phones */
    margin:0;                     /* no extra top/bottom margin */
    flex:0 0 40px;
  }

  /* optional: center the "Misi" heading + line on mobile */
  .misi-line{
    width:60px;
    margin:8px auto 16px;
  }
}


/* === Visi & Misi layout (canonical) === */
.misi-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: 12px;
}

.misi-item{
  text-align: left;
}

.misi-icon{
  width: 48px;
  height: auto;
  display: block;
  margin: 4px 0 10px;
}
/* --- Mobile: stack vertically with centered icons --- */
@media (max-width: 600px){
  .misi-grid{
    grid-template-columns: 1fr;  /* one per row */
    gap: 24px;
  }

  .misi-item{
    display: block;              /* no flex row */
    text-align: center;          /* center icon */
    max-width: 100%;             /* allow full width text */
  }

  .misi-icon{
    width: 48px;
    height: auto;
    margin: 0 auto 12px auto;    /* center above text */
    display: block;
  }

  .misi-item p{
    text-align: justify;         /* match Visi style */
    max-width: 100%;             /* full width text */
    margin: 0 auto;
    padding: 0 8px;              /* small padding for breathing room */
  }

}

/* Desktop / tablet: 2-column grid */
.footer-content{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.footer-column{ margin: 0; }              /* kill stray margins */

/* Place items: office left, email right, site spans full width under */
.footer-office{ grid-column: 1; }
.footer-email{  grid-column: 2; }
.footer-site{   grid-column: 1 / -1; }    /* full row below the two */

/* Tighten dividers and labels a bit */
.footer-column .label{ margin-bottom: 8px; }
.footer-text-block hr{ margin: 6px 0 10px; }

/* iPhone / small screens: stack in DOM order with small gaps */
@media (max-width: 600px){
  .footer-content{
    display: block;            /* stack vertically */
    padding: 0 20px;
  }
  .footer-column{ margin: 0 0 16px 0; }
  .footer-column:last-child{ margin-bottom: 0; }

  .footer-text-block hr{ margin: 4px 0 8px; }
}

/* Desktop/tablet: two columns
   Left column: Office (top) + Site (bottom)
   Right column: Email (spans both rows) */
   .footer-content{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    column-gap: 48px;
    row-gap: 28px;
    grid-template-areas:
      "office email"
      "site   email";
  }
  
  .footer-column{ margin:0; }           /* remove stray margins */
  
  .footer-office{ grid-area: office; }
  .footer-site  { grid-area: site; }
  .footer-email { grid-area: email; }
  
  /* iPhone/small: stack in order Office → Site → Email */
  @media (max-width: 600px){
    .footer-content{
      display:grid;
      grid-template-columns: 1fr;
      grid-template-areas:
        "office"
        "site"
        "email";
      row-gap:16px;
      column-gap:0;
      padding: 0 20px;  .footer-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:48px; row-gap:28px;
    grid-template-areas:
      "office email"
      "site   email";
  }
  .footer-office{ grid-area: office; }
  .footer-site  { grid-area: site; }
  .footer-email { grid-area: email; }
  
  @media (max-width:600px){
    .footer-content{
      grid-template-columns:1fr;
      grid-template-areas:
        "office"
        "site"
        "email";
    }
  }
  
    }
  }