/* Patched styles: header sticky, hero layout and CTA, footer tweaks.
   This file is intentionally additive: include it AFTER your original styles.css
   It will not be linked on article-single.html or product-single.html per request.
*/

/* Make header sticky and responsive */
header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(255,255,255,0.98); /* slightly opaque to match existing header */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Ensure top header and nav align correctly on small screens */
.header-top .container, .navbar .container {
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}


/* Hero section full-width with background */
#hero.hero-landing {
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: #fff;
  text-align: center;
  overflow: hidden;
}


#hero.hero-landing .hero-bg {
  position: absolute;
  
  background-size: cover;
  background-position: center;
  filter: saturate(0.95) contrast(0.95) brightness(0.6);
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: transparent !important; /* hilangkan hitam */
  filter: none !important;
   z-index: 1;
}



/* Hero content centered */
#hero.hero-landing .hero-content {
  position: relative;
  
}

/* CTA buttons */
.hero-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-cta-primary {
  background: linear-gradient(180deg,#ff9a34,#ff7a1a);
  border: none;
  color: #fff;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(255,120,40,0.18);
  transition: transform .12s ease, box-shadow .12s ease;
  text-decoration: none;
}

.btn-cta-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(255,120,40,0.20); }

.btn-cta-secondary {
  background: linear-gradient(180deg,#2bb3a9,#208f87);
  border: none;
  color: #fff;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(20,140,140,0.12);
  transition: transform .12s ease, box-shadow .12s ease;
  text-decoration: none;
}

.btn-cta-secondary:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20,140,140,0.18); }

/* Footer minor polish */
footer { background: #083b4a; color: #e9f7fa; padding: 40px 0; }
footer a { color: #e9f7fa; text-decoration: underline; }

/* Responsive adjustments */
@media (max-width: 991px) {
  #hero.hero-landing h1 { font-size: 2.2rem; }
  .header-top .left span { display: none; } /* reduce clutter on small */
}

@media (max-width: 576px) {
  #hero.hero-landing { min-height: 58vh; padding-top: 40px; padding-bottom: 40px; }
  #hero.hero-landing h1 { font-size: 1.8rem; }
  .header-top .left img { height: 30px; width: auto; }
  .navbar-brand img { height: 36px; }
}


/* Industrial Premium additions */
:root{
  --brand-ink:#071a2f;
  --brand-blue:#0b4a83;
  --brand-accent:#0f74d0;
}
#produk { background: linear-gradient(180deg, rgba(11,26,63,0.03), rgba(15,23,42,0.02)); padding-top:40px; padding-bottom:40px; }
.card-produk {
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(11,74,131,0.08);
}
.card-produk .card-img-wrap{ height:220px; overflow:hidden; }
.card-produk .card-img-wrap img{ width:100%; height:100%; object-fit:cover; transition: transform .8s ease; }
.card-produk:hover .card-img-wrap img{ transform: scale(1.07) rotate(-0.5deg); }
.card-produk .card-body { padding:16px; }
.modal-backdrop-custom{ backdrop-filter: blur(6px); background: rgba(2,6,23,0.6); }

@media (max-width:768px){
  .card-produk .card-img-wrap{ height:160px; }
}


/* APPENDED: image fixes */

/* ===== Image handling improvements (added to fix hero/background cropping and global image responsiveness) ===== */

/* Ensure all img elements keep aspect ratio and are responsive */
img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  -o-object-fit: contain;
  object-fit: contain; /* default: show whole product without stretching */
}

/* For product cards where we want fill behavior keep existing cover but make explicit */
.card-produk .card-img-wrap img,
.card-custom img,
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Hero background behavior: tuned for site layout 3:2 hero container.
   Use cover to fill but bias the focal point lower (60%) to keep product bases visible.
*/
#hero .hero-bg,
.hero-bg {
  background-size: cover !important;
  background-position: center 60% !important; /* bias toward lower center where products often sit */
  background-repeat: no-repeat !important;
  width: 100%;
  min-height: 480px; /* desktop baseline */
  max-height: 1000px;
  transition: background-position .35s ease;
}

/* Make overlay and content stacking explicit */
#hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3,35,60,0.38), rgba(3,35,60,0.5));
  pointer-events: none;
}

/* Ensure hero content stays above background */
#hero .hero-content {
  position: relative;
  z-index: 2;
  padding-top: 56px;
  padding-bottom: 56px;
}

/* Mobile / narrow screens: bring focal point up so text and product both visible */
@media (max-width: 991px) {
  #hero .hero-bg { background-position: center 45% !important; min-height: 380px; }
  #hero.hero-landing h1 { font-size: 2.0rem; line-height:1.05; }
}

@media (max-width: 576px) {
  #hero .hero-bg { background-position: center 35% !important; min-height: 320px; }
  #hero.hero-landing h1 { font-size: 1.6rem; }
  /* Reduce potential cropping by adding small padding so background covers less aggressively */
  #hero .hero-content { padding-top: 28px; padding-bottom:28px; }
}

/* Utility: if a background image is a product photo that needs full visibility, author can set .bg-contain */
.bg-contain { background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; }

/* For inline img elements used as hero product (fallback) */
.hero-img-fallback { width:100%; max-width:860px; margin:0 auto; display:block; object-fit:contain; }