:root{
  --purple:#7B2D8E;
  --purple-deep:#571F62;
  --purple-light:#F5EAF8;
  --purple-soft:#EFE0F3;
  --ink:#141416;
  --ink-soft:#26262B;
  --gray:#5F6672;
  --fog:#F7F7F9;
  --line:#EAE7EC;
  --white:#FFFFFF;
  --line-dark: rgba(255,255,255,0.1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  line-height:1.15;
  color:var(--ink);
  margin:0;
}
.mono{font-family:'Roboto Mono', monospace;}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
ul{list-style:none; margin:0; padding:0;}

/* ============ REVEAL ANIMATION ============ */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ============ REVEAL INSTAN (langsung muncul saat halaman dibuka,
   tanpa nunggu discroll — dipakai di konten utama Detail Artikel) ============ */
.reveal-instant{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal-instant.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal-instant{opacity:1; transform:none; transition:none;}
}

/* ============ NAVBAR ============ */
.navbar-jaguar{
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:12px 0;
}
.navbar-jaguar .navbar-brand img{height:32px; width:auto;}
.navbar-jaguar .nav-link{
  color:var(--ink-soft); font-size:0.92rem; font-weight:500;
  position:relative; padding:8px 0; margin:0 4px;
  transition:color .2s;
}
.navbar-jaguar .nav-link::after{
  content:''; position:absolute; left:0; bottom:2px; width:0; height:2px;
  background:var(--purple); transition:width .25s;
}
.navbar-jaguar .nav-link:hover{color:var(--purple);}
.navbar-jaguar .nav-link:hover::after{width:100%;}
.navbar-jaguar .nav-link.active{color:var(--purple); font-weight:600;}
.navbar-jaguar .nav-link.active::after{width:100%;}
.navbar-toggler{border:none; box-shadow:none !important; padding:4px 6px;}

.btn-nav{
  padding:9px 16px;
  font-size:0.78rem;
}
@media (max-width:400px){
  .btn-nav{padding:8px 12px; font-size:0.72rem;}
}

/* ============ BUTTONS ============ */
.btn-jaguar-primary{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:13px 26px; font-size:0.86rem; font-weight:600;
  border-radius:999px; border:2px solid var(--purple);
  background:var(--purple); color:#fff;
  transition:all .2s;
}
.btn-jaguar-primary:hover{background:var(--purple-deep); border-color:var(--purple-deep); color:#fff; transform:translateY(-1px);}
.btn-jaguar-outline{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:13px 26px; font-size:0.86rem; font-weight:600;
  border-radius:999px; border:2px solid var(--line); color:var(--ink);
  transition:all .2s; background:transparent;
}
.btn-jaguar-outline:hover{border-color:var(--purple); color:var(--purple);}
.btn-jaguar-white{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:13px 26px; font-size:0.86rem; font-weight:600;
  border-radius:999px; border:2px solid #fff; background:#fff; color:var(--purple);
  transition:all .2s;
}
.btn-jaguar-white:hover{background:var(--purple-light); color:var(--purple-deep);}
.cta-banner .btn-jaguar-outline{border-color:rgba(255,255,255,0.55); color:#fff;}
.cta-banner .btn-jaguar-outline:hover{border-color:#fff; color:#fff; background:rgba(255,255,255,0.1);}

/* ============ BANNER SLIDER (HERO) ============ */
.banner-hero{
  position:relative;
  padding-top:66px;
  background:var(--white);
}
.banner-carousel{
  width:100%;
  overflow:hidden;
  position:relative;
}
.banner-track{
  display:flex;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
  touch-action:pan-y;
  cursor:grab;
}
.banner-carousel.dragging .banner-track{cursor:grabbing;}
.banner-slide{
  flex:0 0 100%;
  max-width:100%;
  aspect-ratio:1820/860;
}
.banner-slide img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
}
.banner-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  padding:16px 0;
}
.banner-dots .app-dot{background:var(--purple-soft);}

/* ============ STATS ============ */
.stats{background:var(--purple-light); padding:36px 0;}
.stat-icon{
  width:52px; height:52px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px; box-shadow:0 6px 16px rgba(123,45,142,0.12);
  color:var(--purple); font-size:24px;
}
.stat-num{font-family:'Poppins'; font-size:2rem; font-weight:800; color:var(--purple);}
.stat-label{color:var(--ink-soft); font-size:0.85rem; margin-top:6px;}

/* ============ CORPORATE HONORS (dalam section Pabrik Kami) ============ */
.honor-item{display:flex; gap:16px; align-items:flex-start; margin-bottom:22px;}
.honor-item:last-child{margin-bottom:0;}
.honor-num{font-family:'Poppins'; font-weight:800; font-size:2rem; color:var(--purple); line-height:1; min-width:64px;}
.honor-item h4{font-size:0.95rem; margin-bottom:4px;}
.honor-item p{font-size:0.85rem; color:var(--gray); margin:0;}

/* ============ SECTION HEADERS ============ */
.section{padding:56px 0;}
.section-tight{padding:44px 0;}
.sec-head{max-width:640px; margin-bottom:32px;}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.sec-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem);}
.sec-head p{color:var(--gray); margin-top:16px; font-size:1.02rem;}

/* ============ ABOUT ============ */
.about-img{position:relative;}
.about-img img{width:100%; height:auto; display:block; border-radius:16px;}
.about-img::before{
  content:''; position:absolute; top:20px; left:20px; right:-20px; bottom:-20px;
  background:var(--purple-light); border-radius:16px; z-index:-1;
}
.about h3{font-size:1.35rem; margin-bottom:18px;}
.about p{color:var(--gray); margin-bottom:18px;}
.about-point{
  display:flex; gap:12px; align-items:flex-start; height:100%;
  padding:18px; background:var(--fog); border-radius:12px;
}
.about-point .dot{width:8px; height:8px; border-radius:50%; background:var(--purple); margin-top:7px; flex-shrink:0;}
.about-point b{display:block; font-family:'Poppins'; font-size:0.92rem; margin-bottom:3px;}
.about-point span{font-size:0.86rem; color:var(--gray);}

/* ============ PRODUCTS ============ */
.products{background:var(--fog);}
.prod-card{
  background:#fff; border-radius:16px; height:100%;
  position:relative; overflow:hidden;
  transition:transform .25s, box-shadow .25s;
  box-shadow:0 2px 10px rgba(20,20,22,0.04);
}
.prod-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(123,45,142,0.14);}
.prod-img{
  height: 200px;  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#fff, var(--purple-light));
  padding:6px;
}
.prod-img img{height:100%; width:100%; object-fit:contain;}
.prod-body{padding:22px 24px 26px;}
.prod-tag{
  font-family:'Roboto Mono'; font-size:0.7rem; color:var(--purple);
  text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px; display:block;
}
.prod-body h4{font-size:1.02rem; margin-bottom:12px; font-weight:600;}
.prod-link{
  font-size:0.82rem; font-weight:600; color:var(--purple);
  display:inline-flex; align-items:center; gap:6px;
}
.prod-link::after{content:'→'; transition:transform .2s;}
.prod-card:hover .prod-link::after{transform:translateX(4px);}
.prod-cta-wrap{text-align:center; margin-top:44px;}

/* ============ APPLICATIONS CAROUSEL ============ */
.applications{background:var(--white);}
.sec-head-app{margin-bottom:0; max-width:none;}
.app-carousel{
  width:100%;
  overflow:hidden;
  position:relative;
}
.app-track{
  display:flex;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
  touch-action:pan-y;
  cursor:grab;
}
.app-carousel.dragging .app-track{cursor:grabbing;}
.app-slide{
  flex:0 0 100%;
  max-width:100%;
}
.app-slide-inner{
  display:grid;
  grid-template-columns:1fr;
}
@media (min-width:768px){
  .app-slide-inner{grid-template-columns:1.1fr 1fr; align-items:center; min-height:320px;}
}
.app-img{height:200px; overflow:hidden;}
@media (min-width:768px){.app-img{height:100%; min-height:320px;}}
.app-img img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;}
.app-copy{
  padding:24px;
  display:flex; flex-direction:column; gap:16px; justify-content:center;
}
@media (min-width:768px){
  .app-copy{padding:28px 32px;}
}
@media (min-width:992px){
  .app-copy{padding:32px 36px;}
}
.app-copy p{
  display:flex; gap:10px; align-items:flex-start;
  color:var(--ink-soft); font-size:0.9rem; line-height:1.65; margin:0;
}
.app-copy .bullet{
  width:7px; height:7px; border-radius:50%; background:var(--purple);
  margin-top:8px; flex-shrink:0;
}
.app-copy .btn{align-self:flex-start;}
.btn-jaguar-primary.btn-sm{padding:11px 22px; font-size:0.82rem;}

/* ---- Slider dots ---- */
.app-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:20px;
}
.app-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--purple-soft);
  border:none; padding:0; cursor:pointer;
  transition:background .25s, width .25s;
}
.app-dot.active{
  background:var(--purple);
  width:22px; border-radius:5px;
}

/* ============ COMPANY NEWS ============ */
.news{background:var(--fog); padding-bottom:24px;}
.news-card{
  position:relative;
  background:#fff; border-radius:16px; overflow:visible; height:100%;
  box-shadow:0 2px 10px rgba(20,20,22,0.04);
  transition:transform .25s, box-shadow .25s;
  display:flex; flex-direction:column;
}
.news-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(123,45,142,0.14);}
.news-img{position:relative; height:200px; overflow:hidden; border-radius:16px 16px 0 0;}
.news-img img{width:100%; height:100%; object-fit:cover;}
.news-date{
  position:absolute; left:16px; top:186px;
  display:inline-flex; align-items:center; gap:6px;
  background:var(--purple); color:#fff;
  font-family:'Roboto Mono'; font-size:0.72rem; letter-spacing:0.02em;
  padding:7px 14px; border-radius:8px;
  box-shadow:0 8px 16px rgba(87,31,98,0.28);
  z-index:2;
}
.news-body{padding:28px 22px 24px;}
.news-body h4{font-size:1.02rem; font-weight:600; margin-bottom:14px; line-height:1.4;}
.news-link{
  font-size:0.82rem; font-weight:600; color:var(--purple);
  display:inline-flex; align-items:center; gap:6px;
}
.news-link span{transition:transform .2s;}
.news-card:hover .news-link span{transform:translateX(4px);}

/* ============ PARTNERS MARQUEE ============ */
.partners{background:var(--white); overflow:hidden;}
.marquee{
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display:flex;
  width:max-content;
  gap:14px;
  touch-action:pan-y;
  cursor:grab;
  will-change:transform;
}
.marquee.dragging .marquee-track{cursor:grabbing;}
.marquee-item{
  flex:0 0 auto;
  background:var(--purple-light);
  color:var(--purple-deep);
  font-family:'Poppins'; font-weight:600; font-size:0.92rem;
  padding:16px 30px;
  border-radius:999px;
  white-space:nowrap;
  user-select:none;
}

/* ============ ADVANTAGES ============ */
.advantages{background:var(--fog); padding-top:24px;}
.adv-card{
  background:#fff; padding:32px 22px; border-radius:16px; height:100%;
  transition:transform .2s, box-shadow .2s;
}
.adv-card:hover{transform:translateY(-4px); box-shadow:0 16px 32px rgba(20,20,22,0.06);}
.adv-icon{
  width:52px; height:52px; background:var(--purple-light);
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  margin-bottom:20px; color:var(--purple); font-size:24px;
}
.adv-card h4{font-size:1rem; margin-bottom:10px;}
.adv-card p{font-size:0.88rem; color:var(--gray); margin:0;}

/* ============ CTA BANNER ============ */
.cta-banner{background:var(--purple); padding:44px 0;}
.cta-inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:26px;}
.cta-inner h3{color:#fff; font-size:1.5rem; max-width:520px;}
.cta-inner p{color:rgba(255,255,255,0.82); margin-top:8px; font-size:0.95rem;}
.cta-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* ============ FOOTER ============ */
footer{background:var(--ink); color:#a9a8ad; padding:56px 0 0;}
.foot-grid-row{padding-bottom:36px; border-bottom:1px solid var(--line-dark);}
.foot-logo{margin-bottom:14px;}
.foot-logo img{height:24px; filter:brightness(0) invert(1);}
.foot-about-text{font-size:0.85rem; line-height:1.6; max-width:320px; margin:0 0 14px;}
.foot-social{display:flex; gap:10px; margin-top:20px;}
.foot-social a{
  width:36px; height:36px; border:1px solid var(--line-dark); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:16px;
  color:#a9a8ad; transition:all .2s;
}
.foot-social a:hover{background:var(--purple); border-color:var(--purple); color:#fff;}
.foot-col h5{
  color:#fff; font-family:'Poppins'; font-size:0.92rem; font-weight:600;
  margin-bottom:18px; padding-bottom:14px;
  position:relative;
}
.foot-col h5::after{
  content:''; position:absolute; left:0; bottom:0;
  width:32px; height:2px; background:var(--purple);
}
.foot-col ul li{margin-bottom:10px;}
.foot-col ul a{font-size:0.88rem; color:#a9a8ad; transition:color .2s;}
.foot-col ul a:hover{color:#fff;}
.foot-contact li{font-size:0.88rem; margin-bottom:12px; display:flex; gap:10px; align-items:flex-start;}
.foot-contact li iconify-icon{
  color:var(--purple);
  font-size:16px;
  flex-shrink:0;
  margin-top:2px;
}
.foot-bottom{
  padding:16px 0; display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:8px; font-size:0.76rem;
}

/* ============ WA FLOAT ============ */
/* ============ WA FLOAT ============ */
.wa-float{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:90;

  width:48px;
  height:48px;
  border-radius:50%;

  background:#25D366;
  border:4px solid #1FAF55;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:
    0 8px 18px rgba(0,0,0,0.22),
    inset 0 0 0 2px rgba(255,255,255,0.08);

  animation:none;
}

.wa-float iconify-icon{
  color:#fff;
  font-size:22px;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,0.5);}
  70%{box-shadow:0 0 0 14px rgba(37,211,102,0);}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}
}
@media (prefers-reduced-motion: reduce){.wa-float{animation:none;}}

/* ============ WA FORM MODAL ============ */
.wa-form-hint{color:var(--gray); font-size:0.88rem; margin-bottom:20px;}
#waFormModal .modal-content{border-radius:16px; border:none;}
#waFormModal .modal-title{font-family:'Poppins'; font-size:1.1rem;}
#waFormModal .form-label{font-size:0.85rem; font-weight:600; color:var(--ink-soft);}
#waFormModal .form-control{border-radius:10px; border-color:var(--line); padding:10px 14px;}
#waFormModal .form-control:focus{border-color:var(--purple); box-shadow:0 0 0 0.2rem rgba(123,45,142,0.15);}

a:focus-visible, button:focus-visible{outline:2px solid var(--purple); outline-offset:3px;}

/* ================================================================
   ABOUT PAGE — TAMBAHAN CSS
   Tempel/append blok ini ke akhir file style.css yang sudah ada.
   Semua variabel (--purple, --gray, dll) mengikuti :root di style.css utama.
================================================================ */

/* ============ ABOUT PAGE — PAGE HEADER ============ */
.page-header{
  padding:64px 0 40px;
  background:var(--purple-light);
  text-align:center;
}
.page-header .crumb{
  font-family:'Roboto Mono'; font-size:0.78rem; color:var(--purple);
  text-transform:uppercase; letter-spacing:0.06em; margin-bottom:10px; display:block;
}
.page-header h1{font-size:clamp(1.8rem,3.6vw,2.7rem);}
.page-header p{color:var(--gray); max-width:620px; margin:14px auto 0; font-size:1rem;}

/* ============ TIMELINE ============ */
.timeline{position:relative; padding-left:28px;}
.timeline::before{
  content:''; position:absolute; left:5px; top:6px; bottom:6px; width:2px;
  background:var(--line);
}
.timeline-item{position:relative; padding-bottom:38px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-dot{
  position:absolute; left:-28px; top:4px; width:12px; height:12px; border-radius:50%;
  background:var(--purple); box-shadow:0 0 0 4px var(--purple-light);
}
.timeline-year{
  font-family:'Poppins'; font-weight:800; font-size:1.3rem; color:var(--purple); margin-bottom:6px;
}
.timeline-card{
  background:var(--fog); border-radius:14px; padding:20px 22px;
  display:grid; grid-template-columns:1fr; gap:16px;
}
@media (min-width:576px){
  .timeline-card{grid-template-columns:180px 1fr; align-items:center;}
}
.timeline-card img{width:100%; height:auto; max-height:180px; object-fit:contain; filter:drop-shadow(0 14px 18px rgba(158, 100, 185, 0.2));}
.timeline-card h4{font-size:0.98rem; margin-bottom:8px;}
.timeline-card p{font-size:0.86rem; color:var(--gray); margin:0;}

/* ============ CERTIFICATIONS ============ */
.certs{background:var(--fog);}
.cert-card{
  background:#fff; border-radius:14px; overflow:hidden; height:100%;
  box-shadow:0 2px 10px rgba(20,20,22,0.05);
}
.cert-card img{width:100%; height:auto; object-fit:contain; background:#fff; padding:10px; border-bottom:1px solid var(--line);}
.cert-card span{
  display:block; text-align:center; padding:12px 10px;
  font-family:'Poppins'; font-weight:600; font-size:0.85rem; color:var(--purple-deep);
}

/* ============ INDUSTRY / APPLICATION ============ */
.industry-card{
  text-align:center; height:100%;
}
.industry-img{
  width:120px; height:120px; border-radius:50%; overflow:hidden; margin:0 auto 18px;
  box-shadow:0 10px 24px rgba(123,45,142,0.16);
}
.industry-img img{width:100%; height:100%; object-fit:cover;}
.industry-card h4{font-size:0.98rem; margin-bottom:10px;}
.industry-card p{font-size:0.85rem; color:var(--gray); margin:0;}

/* ============ CASE STUDIES ============ */
.case-card{
  display:grid; grid-template-columns:1fr; gap:24px; align-items:center;
  background:var(--fog); border-radius:16px; padding:24px; margin-bottom:24px;
}
@media (min-width:768px){
  .case-card{grid-template-columns:1fr 1.15fr; padding:28px;}
  .case-card.reverse{grid-template-columns:1.15fr 1fr;}
  .case-card.reverse .case-img{order:2;}
}
.case-img{border-radius:12px; overflow:hidden; height:260px;}
.case-img img{width:100%; height:100%; object-fit:cover;}
.case-tag{
  display:inline-block; font-family:'Roboto Mono'; font-size:0.72rem; color:#fff;
  background:var(--purple); padding:5px 14px; border-radius:999px; margin-bottom:12px;
}
.case-copy h4{font-size:1.1rem; margin-bottom:12px;}
.case-copy p{font-size:0.9rem; color:var(--gray); margin-bottom:0;}

/* ============ PRODUCTION MARKET / NETWORK ============ */
.network{background:var(--purple-light);}
.network-num{font-family:'Poppins'; font-weight:800; font-size:2.4rem; color:var(--purple);}
.network-item{padding:8px 0;}
.network-item h4{font-size:0.95rem; margin:6px 0 8px;}
.network-item p{font-size:0.85rem; color:var(--gray); margin:0;}

@media (max-width:576px){
  .banner-dots{padding:8px 0;}
  .about.section{padding-top:28px;}
}
/* =========================================================
   CONTACT PAGE
   ========================================================= */

.contact-page{
  background:var(--white);
}


/* =========================================================
   CONTACT HERO
   FIX UTAMA:
   - Tidak menggunakan background-size cover
   - Tidak menggunakan height fixed
   - Tidak menggunakan aspect-ratio parent
   - Gambar mengikuti rasio asli 2048 x 481
   - Navbar fixed tidak menutupi gambar
   ========================================================= */

.contact-hero{
  position:relative;
  width:100%;
  margin-top:77px;
  padding:0;
  overflow:hidden;
  background:#17121a;
}

.contact-hero img {
    display: block;
    width: calc(100% + 3px) !important;
    max-width: none !important;
    height: auto;
    margin-left: -3px !important;
    padding: 0;
}
.contact-hero::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:5px;
  background:linear-gradient(
    90deg,
    var(--purple-deep),
    var(--purple),
    #9d49ad
  );
}


/* =========================================================
   CONTACT MAIN
   ========================================================= */

.contact-section{
  padding:76px 0 82px;
  background:var(--fog);
}

.contact-shell{
  position:relative;
}

.contact-info-card{
  height:100%;
  min-height:590px;
  position:relative;
  overflow:hidden;
  padding:38px;
  border-radius:22px;
  background:linear-gradient(
    150deg,
    var(--purple) 0%,
    var(--purple-deep) 100%
  );
  color:#fff;
  box-shadow:0 22px 55px rgba(87,31,98,.18);
}

.contact-info-card::before,
.contact-info-card::after{
  content:'';
  position:absolute;
  border:1px solid rgba(255,255,255,.13);
  border-radius:50%;
  pointer-events:none;
}

.contact-info-card::before{
  width:260px;
  height:260px;
  right:-120px;
  top:-100px;
}

.contact-info-card::after{
  width:180px;
  height:180px;
  left:-90px;
  bottom:-80px;
}

.contact-info-content{
  position:relative;
  z-index:1;
}

.contact-info-card h2{
  color:#fff;
  font-size:clamp(1.7rem,3vw,2.25rem);
  margin-bottom:14px;
}

.contact-info-card>p{
  color:rgba(255,255,255,.8);
  font-size:.94rem;
  line-height:1.75;
  margin-bottom:34px;
}

.contact-info-list{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.contact-info-item{
  display:flex;
  gap:15px;
  align-items:flex-start;
}

.contact-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-size:21px;
}

.contact-info-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-size:21px;
}

.contact-info-item small{
  display:block;
  color:rgba(255,255,255,.62);
  font-family:'Roboto Mono';
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:4px;
}

.contact-info-item span{
  display:block;
}

.contact-info-item strong{
  display:block;
  color:#fff;
  font-family:'Poppins';
  font-size:.92rem;
  font-weight:600;
  line-height:1.5;
}

.contact-info-item a{
  color:#fff;
  transition:opacity .2s;
}

.contact-info-item a:hover{
  opacity:.75;
}

.contact-info-bottom{
  margin-top:34px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.15);
}

.contact-info-bottom span{
  display:block;
  color:rgba(255,255,255,.62);
  font-size:.78rem;
  margin-bottom:5px;
}

.contact-info-bottom strong{
  display:block;
  color:#fff;
  font-family:'Poppins';
  font-size:.86rem;
}

.contact-info-bottom p{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:.82rem;
}

.contact-social{
  display:flex;
  gap:9px;
  margin-top:14px;
}

.contact-social a{
  width:35px;
  height:35px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  transition:.2s;
}

.contact-social a:hover{
  background:#fff;
  color:var(--purple);
  border-color:#fff;
}


/* =========================================================
   CONTACT FORM
   ========================================================= */

.contact-form-card{
  height:100%;
  padding:38px;
  border-radius:22px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 14px 38px rgba(20,20,22,.06);
}

.contact-form-head{
  margin-bottom:26px;
}

.contact-form-head .sec-eyebrow{
  margin-bottom:9px;
}

.contact-form-head h2{
  font-size:clamp(1.65rem,3vw,2.2rem);
}

.contact-form-head p{
  color:var(--gray);
  font-size:.9rem;
  margin:12px 0 0;
  max-width:720px;
}

.contact-form .form-label{
  font-family:'Poppins';
  font-size:.78rem;
  font-weight:600;
  color:var(--ink-soft);
  margin-bottom:7px;
}

.contact-form .form-control{
  min-height:48px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fbfbfc;
  padding:11px 14px;
  font-size:.86rem;
  color:var(--ink);
  transition:
    border-color .2s,
    box-shadow .2s,
    background .2s;
}

.contact-form textarea.form-control{
  min-height:160px;
  resize:vertical;
}

.contact-form .form-control::placeholder{
  color:#9a9da5;
}

.contact-form .form-control:focus{
  background:#fff;
  border-color:var(--purple);
  box-shadow:0 0 0 .2rem rgba(123,45,142,.12);
}

.contact-form .form-check-input:checked{
  background-color:var(--purple);
  border-color:var(--purple);
}

.contact-form .form-check-label{
  font-size:.77rem;
  color:var(--gray);
}

.contact-submit{
  min-width:180px;
}

.contact-note{
  font-size:.74rem;
  color:#8a8d95;
  margin:12px 0 0;
}


/* =========================================================
   MAP
   ========================================================= */

.map-heading{
  max-width:640px;
  margin:0 auto 32px;
  text-align:center;
}

.contact-map-section{
  padding:0 0 78px;
  background:var(--fog);
}

.contact-map-wrap{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  background:#ddd;
  border:1px solid var(--line);
  box-shadow:0 14px 38px rgba(20,20,22,.06);
}

.contact-map-wrap iframe{
  width:100%;
  height:560px;
  border:0;
  display:block;
  filter:saturate(.9);
}

.contact-map-label{
  position:absolute;
  left:22px;
  top:22px;
  z-index:2;
  max-width:300px;
  background:rgba(255,255,255,.95);
  border-radius:13px;
  padding:13px 16px;
  box-shadow:0 10px 25px rgba(20,20,22,.12);
  border-left:4px solid var(--purple);
}

.contact-map-label strong{
  font-family:'Poppins';
  font-size:.82rem;
  display:block;
}

.contact-map-label span{
  font-size:.72rem;
  color:var(--gray);
  display:block;
  margin-top:3px;
}


/* =========================================================
   CONTACT CTA
   ========================================================= */

.contact-page .cta-banner{
  padding:52px 0;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:991.98px){

  .contact-info-card{
    min-height:auto;
  }

}

@media(max-width:575.98px){

  /*
   * Banner tetap FULL.
   * Tidak ada crop.
   */

  .contact-hero{
    margin-top:70px;
  }

  .contact-hero img{
    width:100%;
    height:auto;
  }

  .contact-section{
    padding:52px 0 58px;
  }

  .contact-info-card,
  .contact-form-card{
    padding:26px 20px;
    border-radius:17px;
  }

  .contact-info-card{
    min-height:auto;
  }

  .contact-map-wrap,
  .contact-map-wrap iframe{
    border-radius:17px;
  }

  .contact-map-wrap iframe{
    height:330px;
  }

  .contact-map-label{
    left:12px;
    top:12px;
    right:12px;
    max-width:none;
  }

  .contact-submit{
    width:100%;
  }

  .contact-page .cta-banner{
    padding:42px 0;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }

  .wa-float{
    animation:none;
  }
}

/* =========================================================
   PAGE HERO + BREADCRUMB (dipakai di halaman Pengetahuan)
   ========================================================= */
.page-hero{position:relative;}
.page-hero img{width:100%; height:auto; display:block;}
.breadcrumb-card{
  position:absolute; left:0; bottom:0;
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; padding:14px 28px;
  border-radius:0 14px 0 0;
  box-shadow:0 6px 20px rgba(20,20,22,0.08);
  font-size:0.9rem; color:var(--gray);
}
.breadcrumb-card a{color:var(--gray); transition:color .2s;}
.breadcrumb-card a:hover{color:var(--purple);}
.breadcrumb-card .sep{color:var(--line); font-weight:600;}
.breadcrumb-card .current{color:var(--purple); font-weight:600;}
@media(max-width:576px){
  .breadcrumb-card{padding:10px 16px; font-size:0.8rem; border-radius:0 10px 0 0;}
}
.breadcrumb-bar .breadcrumb-card{
  position: static;
}
 
/* =========================================================
   HALAMAN PENGETAHUAN (KNOWLEDGE LISTING)
   ========================================================= */
.know-section{padding:56px 0;}
.know-list{display:flex; flex-direction:column; gap:22px;}
 
/* ============ KNOWLEDGE CARD (versi kompak) ============ */
.know-card{
  display:grid;
  grid-template-columns:220px 1fr;
  grid-template-rows:auto auto;
  column-gap:24px;
  background:#fff;
  border:none; border-radius:16px; overflow:hidden;
  box-shadow:0 4px 18px rgba(20,20,30,0.06);
  transition:transform .25s, box-shadow .25s;
}
.know-card:hover{transform:translateY(-4px); box-shadow:0 18px 36px rgba(123,45,142,0.14);}

.know-img{
  grid-column:1; grid-row:1 / 3;
  width:100%; height:100%; min-height:180px;
  overflow:hidden; background:var(--purple-light);
}
.know-img img{width:100%; height:100%; object-fit:cover; transition:transform .35s;}
.know-card:hover .know-img img{transform:scale(1.06);}

.know-body{
  grid-column:2; grid-row:1;
  padding:22px 22px 0 0;
  display:flex; flex-direction:column; justify-content:center;
}
.know-date{
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.76rem; color:var(--gray); margin-bottom:8px;
}
.know-date svg{flex-shrink:0; color:var(--purple);}

.know-body h3{
  font-size:1rem; font-weight:600; line-height:1.4; margin-bottom:8px;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}
.know-body h3 a{color:var(--ink); transition:color .2s;}
.know-card:hover .know-body h3 a{color:var(--purple);}

.know-excerpt{
  color:var(--gray); font-size:0.85rem; line-height:1.6; margin:0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}

/* link "Selengkapnya" — otomatis ditambahkan lewat CSS, tanpa ubah HTML */
.know-arrow{
  grid-column:2; grid-row:2;
  justify-self:start; align-self:end;
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 0 20px 0;
  font-size:0.82rem; font-weight:600; color:var(--purple);
  background:none; width:auto; height:auto; border-radius:0;
}
.know-arrow::before{content:"Selengkapnya";}
.know-arrow iconify-icon{transition:transform .2s;}
.know-card:hover .know-arrow iconify-icon{transform:translateX(4px);}

@media(max-width:767px){
  .know-card{grid-template-columns:1fr; grid-template-rows:auto auto auto;}
  .know-img{grid-row:1; height:190px; min-height:0;}
  .know-body{grid-column:1; grid-row:2; padding:18px 18px 0;}
  .know-arrow{grid-column:1; grid-row:3; padding:6px 18px 18px;}
}

.know-link{
  align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  font-size:0.86rem; font-weight:600; color:var(--purple);
}
.know-link iconify-icon{transition:transform .2s;}
.know-card:hover .know-link iconify-icon{transform:translateX(4px);}
 
@media(max-width:767px){
  .know-card{flex-direction:column;}
  .know-img{flex-basis:auto; width:100%; height:190px;}
  .know-body{padding:22px 22px 26px;}
}
 
/* Pagination */
.know-pagination{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px; margin-top:40px;
}
.know-pagination a, .know-pagination span.know-page-num{
  min-width:44px; height:44px; padding:0 6px;
  border-radius:12px; border:none; background:var(--fog);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:0.9rem; font-weight:700; color:var(--ink);
  transition:background .2s, color .2s;
}
.know-pagination a.know-edge{
  width:auto; height:auto; min-width:0; padding:0 6px;
  background:transparent; font-weight:600; color:var(--ink);
}
.know-pagination a.know-edge:hover{color:var(--purple);}
.know-pagination a:hover{background:rgba(123,45,142,0.14); color:var(--purple);}
.know-pagination .active{background:var(--purple); color:#fff;}
.know-pagination span.know-page-num.active{background:var(--purple); color:#fff;}
.know-pagination .disabled{color:#c3c5cc; pointer-events:none;}
.know-page-count{
  font-size:0.85rem; color:var(--gray);
  margin-left:8px;
}
@media(max-width:575px){
  .know-page-count{width:100%; text-align:center; margin-left:0; margin-top:8px;}
}
 
/* Sidebar widgets */
.know-widget{background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; margin-bottom:24px;}
.know-widget h5{font-size:1.05rem; position:relative; padding-bottom:12px; margin-bottom:16px;}
.know-widget h5::after{content:''; position:absolute; left:0; bottom:0; width:32px; height:2px; background:var(--purple);}
 
.cat-list{display:flex; flex-direction:column; list-style:none; margin:0; padding:0;}
.cat-list li{border-bottom:1px solid var(--line);}
.cat-list li:last-child{border-bottom:none;}
.cat-list a{
  display:flex; align-items:center; gap:10px; padding:12px 2px;
  font-size:0.86rem; color:var(--ink-soft); transition:color .2s;
}
.cat-list a:hover{color:var(--purple);}
.cat-list a iconify-icon.cat-ic{font-size:16px; color:var(--purple); flex-shrink:0;}
.cat-list a iconify-icon.cat-chev{margin-left:auto; font-size:16px; color:var(--gray); flex-shrink:0;}
 
.know-search{position:relative;}
.know-search input{
  width:100%; border:1px solid var(--line); border-radius:10px;
  padding:12px 46px 12px 16px; font-size:0.88rem; background:var(--fog);
}
.know-search input:focus{outline:none; border-color:var(--purple); background:#fff;}
.know-search button{
  position:absolute; right:5px; top:5px; bottom:5px; width:36px;
  border:none; border-radius:8px; background:var(--purple); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
 
.latest-prod-item{display:flex; gap:14px; align-items:center;}
.latest-prod-item + .latest-prod-item{margin-top:16px; padding-top:16px; border-top:1px solid var(--line);}
.latest-prod-img{
  width:64px; height:64px; flex-shrink:0; border-radius:10px;
  background:var(--purple-light); display:flex; align-items:center; justify-content:center; padding:6px;
}
.latest-prod-img img{width:100%; height:100%; object-fit:contain;}
.latest-prod-item span{font-size:0.85rem; font-weight:600; line-height:1.4; color:var(--ink); transition:color .2s;}
.latest-prod-item:hover span{color:var(--purple);}
 
.mini-form .form-label{font-size:0.78rem; font-weight:600; color:var(--ink-soft); margin-bottom:6px;}
.mini-form .form-control{
  min-height:44px; border:1px solid var(--line); border-radius:10px;
  background:#fbfbfc; padding:10px 14px; font-size:0.85rem; color:var(--ink);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.mini-form textarea.form-control{min-height:100px; resize:vertical;}
.mini-form .form-control::placeholder{color:#9a9da5;}
.mini-form .form-control:focus{background:#fff; border-color:var(--purple); box-shadow:0 0 0 .2rem rgba(123,45,142,.12); outline:none;}
.mini-form .btn{width:100%; justify-content:center;}


/* ============ DETAIL ARTIKEL — CARD ============ */
/* Membuat halaman artikel memakai card putih seperti News Detail,
   tanpa mengubah isi artikel maupun struktur sidebar. */
.artikel-detail-section{
  background:#f7f7f9;
  padding:55px 0 75px;
}

.artikel-detail-card{
  background:#fff;
  border-radius:22px;
  padding:34px 36px 42px;
  box-shadow:0 4px 18px rgba(20,20,22,.035);
}

.artikel-detail-card h1{
  font-family:'Poppins',sans-serif;
  color:#26262B;
  font-size:clamp(1.8rem,3.5vw,2.8rem) !important;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.025em;
  margin:0 0 16px !important;
}

.artikel-detail-card #artImage{
  width:100%;
  height:auto;
  max-height:560px;
  object-fit:cover;
  border-radius:16px;
  margin-bottom:28px !important;
}

@media(max-width:991.98px){
  .artikel-detail-section{padding-top:42px;}
}

@media(max-width:767.98px){
  .artikel-detail-section{padding:35px 0 55px;}
  .artikel-detail-card{
    padding:25px 22px 30px;
    border-radius:18px;
  }
  .artikel-detail-card h1{font-size:1.75rem !important;}
}

/* ============ DETAIL ARTIKEL ============ */
.artikel-content h4{margin:26px 0 10px; font-size:1.05rem; color:var(--purple-deep);}
.artikel-content p{margin-bottom:14px; color:var(--ink-soft);}
.artikel-content table{margin:18px 0;}

.artikel-meta{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.artikel-meta .know-date{
  margin:0;
}

.app-carousel .app-slide{
  display:flex;
  justify-content:center;
  align-items:center;
  
}
.app-carousel .app-slide img{
  max-height:500px;
  max-width:100%;
  width:auto;
  object-fit:contain;
  pointer-events:none;
}

.artikel-leave-msg{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--purple);
  font-weight:600;
  cursor:pointer;
  transition:color .2s;
}
.artikel-leave-msg:hover{
  color:var(--purple-deep);
  text-decoration:underline;
}

#formPertanyaan{
  scroll-margin-top: 100px; /* biar gak ketutup navbar fixed */
}

/* =========================================================
   BERITA / NEWS FEATURE (digabungkan dari proyek jaguar_yesha)
   ========================================================= */

/* =========================
   DROPDOWN BERITA
   ========================= */

.news-dropdown {
    position: relative;
}

.news-dropdown-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
}

/* Panah tetap menghadap ke bawah */
.dropdown-arrow {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    position: relative;
    top: -5px;
    transition: none;
}

/* JANGAN putar panah saat hover */
.news-dropdown:hover .dropdown-arrow {
    transform: none;
}

/* Dropdown */
.news-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(0);

    width: 252px;
    background: #000;
    padding: 10px 0;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    z-index: 9999;

    transition: opacity .2s ease, visibility .2s ease;
}

/* Tampilkan dropdown */
.news-dropdown:hover .news-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Item dropdown */
.news-dropdown-menu a {
    display: block;
    padding: 14px 16px;

    color: #fff !important;
    font-size: 0.92rem;
    font-weight: 400;

    white-space: nowrap;

    transition:
        background-color .2s ease,
        color .2s ease;
}

/* Saat diarahkan ke pilihan */
.news-dropdown-menu a:hover {
    background: var(--purple);
    color: #fff !important;
}

/* Jangan kasih garis bawah bawaan navbar */
.news-dropdown-toggle::after {
    display: none !important;
}

/* =========================================================
   NEWS PAGE - Bootstrap 5 + Jaguar custom styling
   Navbar & footer mengikuti CSS lama tanpa perubahan desain.
   ========================================================= */

/* News dropdown: mempertahankan desain navbar lama */
.news-dropdown{position:relative;}
.news-dropdown-toggle{display:inline-flex!important;align-items:center;gap:7px;}
.dropdown-arrow{font-size:18px;font-weight:600;line-height:1;position:relative;top:-5px;}
.news-dropdown-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  width:252px;background:#000;padding:10px 0;
  opacity:0;visibility:hidden;pointer-events:none;z-index:9999;
  transition:opacity .2s ease,visibility .2s ease;
}
.news-dropdown:hover .news-dropdown-menu{opacity:1;visibility:visible;pointer-events:auto;}
.news-dropdown-menu a{
  display:block;padding:14px 16px;color:#fff!important;font-size:.92rem;
  font-weight:400;white-space:nowrap;transition:background-color .2s ease;
}
.news-dropdown-menu a:hover{background:var(--purple);color:#fff!important;}
.news-dropdown-toggle::after{display:none!important;}

/* =========================================================
   NEWS PAGE
   ========================================================= */

.news-page{
  padding-top:0px;
  background:#fff;
}

.news-hero,
.news-hero-photo,
.news-hero-photo img{
  margin:0 !important;
  padding:0 !important;
}

/* =========================================================
   NEWS HERO — FULL BANNER IMAGE
   ========================================================= */

.news-hero{
  position:relative;
  width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#fff;

  /* garis ungu di bawah banner */
  border-bottom:6px solid #7b2d8e;
}

.news-hero-banner{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  margin:0;
  padding:0;
  object-fit:contain;
}
/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:767.98px){

  .news-page{
    padding-top:70px;
  }

  .news-hero-banner{
    width:100%;
    height:auto;
  }

}
/* Breadcrumb */
.news-breadcrumb{display:flex;align-items:center;gap:7px;min-height:54px;font-size:.8rem;color:#888d96;}
.news-breadcrumb a{color:var(--purple);font-weight:600;}
.news-breadcrumb iconify-icon{font-size:15px;color:#a4a6ac;}

/* Content */
.news-content{padding:54px 0 76px;background:#fff;}
.section-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:26px;}
.section-kicker,.sidebar-title span{
  display:block;font-family:'Roboto Mono',monospace;color:var(--purple);font-size:.67rem;
  font-weight:600;letter-spacing:.11em;text-transform:uppercase;margin-bottom:7px;
}
.section-intro h2{font-size:clamp(1.65rem,3vw,2.2rem);}
.news-count{color:#a1a3a9;font-family:'Roboto Mono',monospace;font-size:.72rem;white-space:nowrap;}

/* Featured */
.featured-news-card{overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 12px 35px rgba(20,20,22,.06);transition:transform .25s,box-shadow .25s;}
.featured-news-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(123,45,142,.12);}
.featured-news-image{height:340px;position:relative;overflow:hidden;background-color:#ddd;background-position:center;background-size:cover;}
.image-label{position:absolute;left:20px;top:20px;padding:7px 12px;border-radius:999px;background:#fff;color:var(--purple);font-family:'Roboto Mono',monospace;font-size:.65rem;font-weight:600;letter-spacing:.08em;box-shadow:0 7px 20px rgba(0,0,0,.12);}
.featured-news-body{padding:28px 30px 30px;}
.article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:9px;color:#858993;font-family:'Roboto Mono',monospace;font-size:.68rem;}
.article-meta span:first-child{display:inline-flex;align-items:center;gap:5px;}
.article-meta iconify-icon{color:var(--purple);font-size:15px;}
.meta-dot{width:4px;height:4px;border-radius:50%;background:#c8c9ce;}
.featured-news-body h3{margin:13px 0 12px;font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.35;}
.featured-news-body p,.news-list-body p{margin:0 0 18px;color:var(--gray);font-size:.88rem;}
.read-more{display:inline-flex;align-items:center;gap:7px;color:var(--purple);font-size:.78rem;font-weight:700;}
.read-more iconify-icon{transition:transform .2s;}
.read-more:hover{color:var(--purple-deep);}
.read-more:hover iconify-icon{transform:translateX(4px);}

/* List */
.news-list{display:flex;flex-direction:column;gap:18px;margin-top:22px;}
.news-list-card{display:grid;grid-template-columns:250px 1fr;min-height:205px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;transition:transform .25s,box-shadow .25s,border-color .25s;}
.news-list-card:hover{transform:translateY(-3px);border-color:rgba(123,45,142,.2);box-shadow:0 16px 35px rgba(20,20,22,.07);}
.news-list-image{min-height:205px;background-color:#e9e9ed;background-position:center;background-size:cover;}
.news-list-body{display:flex;flex-direction:column;justify-content:center;padding:25px 27px;}
.news-list-body h3{font-size:1.08rem;line-height:1.38;margin:10px 0;}
.news-list-body p{font-size:.83rem;margin-bottom:14px;}
.news-list-body .read-more{margin-top:auto;}

/* Images */
.image-exhibition{background:linear-gradient(120deg,rgba(34,20,52,.15),rgba(123,45,142,.05)),url("assets/images/news/vietnam-exhibition.webp") center/cover;}
.image-campus{background:linear-gradient(120deg,rgba(123,45,142,.08),rgba(255,255,255,.05)),url("assets/images/news/company-campus.webp") center/cover;}
.image-vacuum{background:linear-gradient(120deg,rgba(90,57,31,.08),rgba(255,255,255,.04)),url("assets/images/news/vacuum-pumps.webp") center/cover;}
.image-ptc{background:linear-gradient(120deg,rgba(76,113,155,.08),rgba(255,255,255,.05)),url("assets/images/news/ptc-2024.webp") center/cover;}
.image-canton{background:linear-gradient(120deg,rgba(35,35,35,.08),rgba(255,255,255,.03)),url("assets/images/news/canton-fair.webp") center/cover;}
.image-sjtu{background:linear-gradient(120deg,rgba(123,45,142,.10),rgba(0,0,0,.05)),url("assets/images/news/sjtu.webp") center/cover;}
.image-underground{background:linear-gradient(120deg,rgba(30,35,45,.10),rgba(123,45,142,.05)),url("assets/images/news/underground.webp") center/cover;}

/* Sidebar */
.news-sidebar{display:flex;flex-direction:column;gap:22px;}
.sidebar-card{border:1px solid var(--line);background:#fff;border-radius:18px;padding:25px 24px;box-shadow:0 8px 25px rgba(20,20,22,.035);}
.sidebar-title{padding-bottom:16px;border-bottom:1px solid var(--line);}
.sidebar-title h3{font-size:1.35rem;}
.sidebar-news-item{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);}
.sidebar-news-item:last-child{border-bottom:0;padding-bottom:3px;}
.sidebar-news-item small{display:block;color:var(--purple);font-family:'Roboto Mono',monospace;font-size:.63rem;margin-bottom:6px;}
.sidebar-news-item strong{display:block;font-family:'Poppins',sans-serif;font-size:.84rem;line-height:1.45;font-weight:600;}
.sidebar-news-item iconify-icon{flex:0 0 auto;color:#888;font-size:18px;margin-top:3px;transition:transform .2s,color .2s;}
.sidebar-news-item:hover strong{color:var(--purple);}
.sidebar-news-item:hover iconify-icon{color:var(--purple);transform:translate(2px,-2px);}

.product-mini {
  display: grid !important;
  grid-template-columns: 102px minmax(0, 1fr) 18px !important;
  align-items: center !important;
  column-gap: 16px !important;

  width: 100% !important;
  min-width: 0 !important;

  padding: 20px 0 !important;
  box-sizing: border-box !important;
}
.product-mini:last-child{border-bottom:0;padding-bottom:2px;}
.product-mini strong{font-family:'Poppins',sans-serif;font-size:.8rem;line-height:1.45;font-weight:600;}
.product-mini>iconify-icon{color:#999;font-size:17px;transition:transform .2s,color .2s;}
.product-mini:hover strong{color:var(--purple);}
.product-mini:hover>iconify-icon{color:var(--purple);transform:translateX(3px);}
.product-mini-image {
  width: 102px !important;
  height: 86px !important;

  flex-shrink: 0 !important;

  background: #fff !important;

  border: 1px solid #dedee2 !important;
  border-radius: 10px !important;

  overflow: hidden !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;

  position: relative !important;

  box-shadow: none !important;
}

/* Hilangkan dekorasi/kotak lama */
.product-mini-image::before,
.product-mini-image::after {
  content: none !important;
  display: none !important;
}

/* Foto produk */
.product-mini-image img {
  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;
  object-position: center !important;

  display: block !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Teks tidak boleh ketiban gambar */
.product-mini strong {
  min-width: 0 !important;
  max-width: 100% !important;

  overflow: hidden !important;

  font-size: 16px !important;
  line-height: 1.45 !important;
}

/* Panah */
.product-mini > iconify-icon {
  flex-shrink: 0 !important;
  font-size: 20px !important;
  color: #999 !important;
}
/* Inquiry - Bootstrap form controls */
.inquiry-card form{margin-top:18px;}
.inquiry-card .form-control{border:0;background:#f6f6f7;border-radius:0;padding:14px;font-family:'Inter',sans-serif;font-size:.82rem;color:var(--ink);outline:none;box-shadow:none;}
.inquiry-card .form-control:focus{background:#fff;box-shadow:0 0 0 2px rgba(123,45,142,.15);}
.inquiry-card .form-control::placeholder{color:#666b73;opacity:1;}
.inquiry-card textarea.form-control{min-height:120px;resize:vertical;}
.inquiry-card .btn-inquiry{border:0;background:var(--ink);color:#fff;padding:14px 23px;font-family:'Poppins',sans-serif;font-size:.8rem;font-weight:600;border-radius:0;transition:background .2s,transform .2s;}
.inquiry-card .btn-inquiry:hover{background:var(--purple);transform:translateY(-1px);}

/* Bootstrap pagination, dengan warna Jaguar */
.news-pagination{margin-top:38px;}
.news-pagination .pagination{gap:8px;flex-wrap:wrap;}
.news-pagination .page-link{min-width:48px;height:48px;display:flex;align-items:center;justify-content:center;padding:0 15px;border:0;border-radius:0!important;background:#f5f6f7;color:var(--ink);font-size:.8rem;}
.news-pagination .page-link:hover{background:var(--purple-soft);color:var(--purple);}
.news-pagination .page-item.active .page-link{background:var(--purple);color:#fff;}
.news-pagination .page-item.disabled .page-link{color:#b6b7bb;background:#f5f6f7;pointer-events:none;}
.news-pagination .page-total{color:#a2a3a8;font-family:'Roboto Mono',monospace;font-size:.72rem;display:flex;align-items:center;height:48px;padding:0 5px;}

/* CTA: wrapper mengikuti Bootstrap container/row, style lama tetap */
.cta-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:26px;}
.cta-inner h3{color:#fff;font-size:1.5rem;max-width:520px;}
.cta-inner p{color:rgba(255,255,255,.82);margin-top:8px;font-size:.95rem;}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;}

/* Mobile */
@media(max-width:991.98px){
  .news-hero{padding:60px 0;}
  .news-hero-card{margin:0;max-width:none;}
  .news-list-card{grid-template-columns:210px 1fr;}
}
@media(max-width:767.98px){
  .news-page{padding-top:70px;}
  .news-hero{padding:48px 0 52px;}
  .news-hero h1{font-size:2.25rem;}
  .news-content{padding:42px 0 58px;}
  .featured-news-image{height:250px;}
  .featured-news-body{padding:23px;}
  .news-list-card{grid-template-columns:1fr;}
  .news-list-image{min-height:210px;}
  .news-list-body{padding:22px;}
  .news-list-body .read-more{margin-top:4px;}
  .section-intro{align-items:flex-start;}
  .news-pagination .page-link{min-width:43px;height:43px;padding:0 11px;}
  .cta-inner{align-items:flex-start;}
}
@media(max-width:575.98px){
  .navbar-jaguar .navbar-brand img{height:29px;}
  .btn-nav{padding:8px 12px;font-size:.72rem;}
  .news-hero p{font-size:.88rem;}
  .news-hero-card{padding:22px;}
  .news-breadcrumb{padding-left:3px;}
  .featured-news-image{height:205px;}
  .featured-news-body h3{font-size:1.18rem;}
  .news-pagination .pagination{gap:5px;}
  .news-pagination .page-link{font-size:.72rem;min-width:38px;height:40px;padding:0 9px;}
}
/* =========================================================
   NEWS CARD — MODERN PROFESSIONAL STYLE
   Hanya mengubah tampilan CARD pada news.html
   ========================================================= */

/* Font utama */
.news-page{
  font-family:'Inter', sans-serif;
}

/* Heading lebih modern */
.news-page h1,
.news-page h2,
.news-page h3,
.news-page h4,
.news-page strong{
  font-family:'Manrope', sans-serif;
}


/* =========================================================
   BACKGROUND AREA CARD
   ========================================================= */

.news-content{
  background:#f7f7f9;
}


/* =========================================================
   FEATURED NEWS CARD
   ========================================================= */

.featured-news-card{
  background:#fff;
  border:0 !important;
  border-radius:22px !important;
  overflow:hidden;
  box-shadow:0 4px 18px rgba(20,20,22,.035) !important;
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.featured-news-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(20,20,22,.07) !important;
}

.featured-news-image{
  border-radius:0;
}

.featured-news-body{
  padding:30px 32px 32px;
}

.featured-news-body h3{
  font-size:clamp(1.25rem,2.2vw,1.65rem);
  font-weight:700;
  line-height:1.4;
  letter-spacing:-.02em;
}

.featured-news-body p{
  font-size:.9rem;
  line-height:1.75;
  color:#626873;
}


/* =========================================================
   LABEL UTAMA
   ========================================================= */

.image-label{
  left:20px;
  top:20px;
  padding:7px 12px;
  border-radius:10px;
  background:#f5eaf8;
  color:var(--purple);
  box-shadow:none;
  font-family:'Manrope', sans-serif;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.04em;
}


/* =========================================================
   LIST NEWS CARD
   ========================================================= */

.news-list{
  gap:18px;
}

.news-list-card{
  grid-template-columns:250px 1fr;
  min-height:205px;

  background:#fff;

  border:0 !important;
  border-radius:20px;

  box-shadow:0 4px 18px rgba(20,20,22,.035);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.news-list-card:hover{
  transform:translateY(-3px);
  border-color:transparent !important;
  box-shadow:0 14px 32px rgba(20,20,22,.065);
}

.news-list-image{
  min-height:205px;
  border-radius:0;
}

.news-list-body{
  padding:27px 30px;
}

.news-list-body h3{
  font-family:'Manrope', sans-serif;
  font-size:1.08rem;
  font-weight:700;
  line-height:1.45;
  letter-spacing:-.015em;
  color:#141416;
  margin:10px 0;
}

.news-list-body p{
  color:#666b74;
  font-size:.84rem;
  line-height:1.7;
}


/* =========================================================
   META
   ========================================================= */

.article-meta{
  font-family:'Inter', sans-serif;
  font-size:.67rem;
  color:#8b9098;
}

.article-meta iconify-icon{
  color:var(--purple);
}

.meta-dot{
  background:#d8d9dd;
}


/* =========================================================
   READ MORE
   ========================================================= */

.read-more{
  font-family:'Manrope', sans-serif;
  font-size:.78rem;
  font-weight:700;
  color:var(--purple);
}

.read-more:hover{
  color:var(--purple-deep);
}


/* =========================================================
   SIDEBAR CARD
   ========================================================= */

.sidebar-card{
  background:#fff;
  border:0 !important;
  border-radius:20px !important;

  padding:27px 25px;

  box-shadow:0 4px 18px rgba(20,20,22,.035);

  transition:
    box-shadow .25s ease,
    transform .25s ease;
}

.sidebar-card:hover{
  box-shadow:0 12px 28px rgba(20,20,22,.055);
}

.sidebar-title{
  padding-bottom:18px;
  border-bottom:1px solid #eeeeF1;
}

.sidebar-title span{
  font-family:'Manrope', sans-serif;
  font-size:.67rem;
  font-weight:700;
  letter-spacing:.1em;
}

.sidebar-title h3{
  font-family:'Manrope', sans-serif;
  font-size:1.25rem;
  font-weight:700;
  letter-spacing:-.02em;
}


/* =========================================================
   SIDEBAR BERITA
   ========================================================= */

.sidebar-news-item{
  padding:18px 0;
  border-bottom:1px solid #eeeeF1;
}

.sidebar-news-item small{
  font-family:'Inter', sans-serif;
  color:var(--purple);
  font-size:.65rem;
}

.sidebar-news-item strong{
  font-family:'Manrope', sans-serif;
  font-size:.83rem;
  font-weight:650;
  line-height:1.5;
  color:#24252a;
}

.sidebar-news-item:hover strong{
  color:var(--purple);
}


/* =========================================================
   PRODUCT MINI CARD
   ========================================================= */

.product-mini{
  padding:17px 0;
  border-bottom:1px solid #eeeeF1;
}

.product-mini strong{
  font-family:'Manrope', sans-serif;
  font-size:.79rem;
  font-weight:650;
  line-height:1.5;
}


/* =========================================================
   INQUIRY CARD
   ========================================================= */

.inquiry-card .form-control{
  background:#f7f7f9;
  border-radius:10px;
  padding:13px 14px;

  font-family:'Inter', sans-serif;
  font-size:.8rem;

  transition:
    background .2s ease,
    box-shadow .2s ease;
}

.inquiry-card .form-control:focus{
  background:#fff;
  box-shadow:0 0 0 2px rgba(123,45,142,.12);
}

.inquiry-card .btn-inquiry{
  border-radius:10px;
  font-family:'Manrope', sans-serif;
  font-weight:700;
  padding:12px 22px;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.news-pagination .page-link{
  border-radius:10px !important;
  font-family:'Manrope', sans-serif;
  font-weight:600;
}

.news-pagination .page-item.active .page-link{
  background:var(--purple);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:767.98px){

  .featured-news-card,
  .news-list-card,
  .sidebar-card{
    border-radius:18px !important;
  }

  .featured-news-body{
    padding:24px;
  }

  .news-list-body{
    padding:23px;
  }

}
/* =========================================================
   SIDEBAR — PRODUK TERBARU
   ========================================================= */
/* =========================================================
   NEWS CARD MOBILE — FOTO DI ATAS, TEKS DI BAWAH
   ========================================================= */

@media (max-width: 767.98px){

  .news-list-card{
    display:flex !important;
    flex-direction:column !important;
    width:100%;
    min-height:0 !important;
    overflow:hidden;
  }

  .news-list-image{
    width:100% !important;
    height:230px !important;
    min-height:230px !important;
    flex:none !important;
    background-size:cover;
    background-position:center;
  }

  .news-list-body{
    width:100% !important;
    padding:22px 22px 24px !important;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }

  .news-list-body .article-meta{
    margin-bottom:6px;
  }

  .news-list-body h3{
    margin:8px 0 10px;
    font-size:1.15rem;
    line-height:1.4;
  }

  .news-list-body p{
    margin:0 0 16px;
    font-size:.86rem;
    line-height:1.7;
  }

  .news-list-body .read-more{
    margin-top:0 !important;
    align-self:flex-start;
  }
}
.dropdown-arrow {
    font-size: 16px;
    margin-left: 4px;
    vertical-align: middle;
    position: relative;
    top: 2.5px;
}

/* Saat dropdown dibuka */
.news-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}
#detail-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
}

#detail-body table th,
#detail-body table td {
  border: 1px solid #d9d9d9;
  padding: 14px 16px;
  vertical-align: middle;
}

#detail-body table th {
  text-align: center;
  color: #7B2D8E;
  background: #F5EAF8;
  font-weight: 700;
}

#detail-body table td {
  text-align: left;
  background: #ffffff;
}
/* =========================================================
   KHUSUS BERITA 2
   ========================================================= */

body.is-berita-2 .detail-description {
  margin: 0 0 12px !important;
}

body.is-berita-2 .detail-image-wrap {
  display: none !important;
}

body.is-berita-2 .detail-body {
  line-height: 1.7 !important;
}

body.is-berita-2 .detail-body p {
  margin: 0 0 10px !important;
}

body.is-berita-2 .detail-body .news-opening {
  margin: 0 0 14px !important;
}

body.is-berita-2 .detail-body h2 {
  margin: 20px 0 10px !important;
  line-height: 1.4 !important;
}

body.is-berita-2 .detail-body .news-table-wrapper {
  margin: 12px 0 18px !important;
  overflow-x: auto;
}

body.is-berita-2 .detail-body .news-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

body.is-berita-2 .detail-body .news-table th,
body.is-berita-2 .detail-body .news-table td {
  border: 1px solid #d9d9d9;
  padding: 14px 18px;
  vertical-align: middle;
  text-align: left;
}

body.is-berita-2 .detail-body .news-table th {
  background: #F5EAF8;
  color: #7B2D8E;
  text-align: center;
  font-weight: 700;
}

body.is-berita-2 .detail-body .news-table th:first-child {
  width: 34%;
}

body.is-berita-2 .detail-body .news-table th:nth-child(2),
body.is-berita-2 .detail-body .news-table th:nth-child(3) {
  width: 33%;
}

body.is-berita-2 .detail-body .news-table td {
  background: #ffffff;
}

body.is-berita-2 .detail-body .news-table td:first-child,
body.is-berita-2 .detail-body .news-table td:nth-child(2),
body.is-berita-2 .detail-body .news-table td:nth-child(3) {
  text-align: left;
}

body.is-berita-2 .detail-body .news-list {
  margin: 4px 0 0 !important;
  padding-left: 24px;
}

body.is-berita-2 .detail-body .news-list li {
  margin-bottom: 10px !important;
}

body.is-berita-2 .detail-body .company-address {
  margin: 5px 0 8px !important;
  padding: 10px 14px;
  background: #F5EAF8;
  border-left: 3px solid #7B2D8E;
  color: #571F62;
  font-weight: 600;
}

body.is-berita-2 .detail-body .news-signature {
  margin-top: 18px !important;
  padding-top: 12px !important;
  border-top: 1px solid #EAE7EC;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.is-berita-2 .detail-body .news-signature strong {
  color: #7B2D8E;
}

body.is-berita-2 .detail-body .news-signature span {
  color: #5F6672;
  font-size: 14px;
}
/* =========================================
   SLIDER BERITA 3 - POMPA VAKUM
   ========================================= */

.vacuum-pump-track {
  display: flex;
  width: 100%;
  transition: transform 0.5s ease;
}
.vacuum-pump-slider {
  position: relative;
  width: 100%;
  margin: 35px 0;
  overflow: hidden;
  border-radius: 14px;
}

.vacuum-pump-slides {
  display: flex;
  width: 100%;
  transition: transform 0.5s ease;
}

.vacuum-pump-slides img {
  display: block;
  width: 100%;
  min-width: 100%;
  height: 420px;
  flex: 0 0 100%;
  object-fit: cover;
  border-radius: 14px;
}

/* Tombol kiri kanan */

.vacuum-pump-prev,
.vacuum-pump-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 42px;
  height: 42px;

  border: none;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.9);
  color: #7b2c91;

  font-size: 30px;
  line-height: 42px;

  cursor: pointer;
  z-index: 5;

  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.vacuum-pump-prev {
  left: 15px;
}

.vacuum-pump-next {
  right: 15px;
}

.vacuum-pump-prev:hover,
.vacuum-pump-next:hover {
  background: #7b2c91;
  color: white;
}

/* ================================
   DOT SLIDER
   ================================ */

.vacuum-pump-dots {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.vacuum-dot {
  width: 10px !important;
  height: 10px !important;

  min-width: 10px !important;
  padding: 0 !important;

  border: none !important;
  border-radius: 50% !important;

  background: #eadcf0;

  cursor: pointer !important;

  opacity: 1;

  transition:
    width 0.25s ease,
    background 0.25s ease;
}

/* FOTO YANG AKTIF */

.vacuum-dot.active {
  width: 57px !important;
  height: 10px !important;

  min-width: 57px !important;

  border-radius: 20px !important;

  background: #7b2c91;

  opacity: 1;
}

/* Mobile */

@media (max-width: 768px) {

  .vacuum-pump-slide img {
    height: 280px;
  }

  .vacuum-pump-prev,
  .vacuum-pump-next {
    width: 36px;
    height: 36px;
    font-size: 25px;
    line-height: 36px;
  }

}
/* =========================================
   SLIDER BERITA 3
   ========================================= */

.vacuum-pump-slider {
  position: relative;
  width: 100%;
  margin: 35px 0;
  overflow: hidden;
  border-radius: 14px;
}

.vacuum-pump-track {
  display: flex;
  width: 100%;
  transition: transform 0.5s ease;
}

.vacuum-pump-slide {
  min-width: 100%;
  width: 100%;
  flex-shrink: 0;
}

.vacuum-pump-slide img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 14px;
}

/* Tombol kiri */
.vacuum-pump-prev,
.vacuum-pump-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 42px;
  height: 42px;

  border: none;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.9);
  color: #7b2c91;

  font-size: 30px;
  line-height: 42px;

  cursor: pointer;
  z-index: 10;

  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.vacuum-pump-prev {
  left: 15px;
}

.vacuum-pump-next {
  right: 15px;
}

.vacuum-pump-prev:hover,
.vacuum-pump-next:hover {
  background: #7b2c91;
  color: white;
}

/* Titik slider */
.vacuum-pump-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.vacuum-pump-dot {
  width: 9px;
  height: 9px;

  padding: 0;
  border: none;
  border-radius: 50%;

  background: #c7c7c7;
  cursor: pointer;

  transition: all 0.3s ease;
}

.vacuum-pump-dot.active {
  width: 24px;
  border-radius: 10px;
  background: #7b2c91;
}

@media (max-width: 768px) {

  .vacuum-pump-slide img {
    height: 280px;
  }

}
/* ===== BANNER NEWS FULL / TIDAK CROP ===== */

.news-hero {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

.news-hero-photo {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.news-hero-photo img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
}
/* HILANGKAN PUTIH DI SEKITAR BANNER NEWS */

.news-hero {
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
}

.news-hero-photo {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.news-hero-photo img {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hilangkan area putih tepat setelah banner,
   tapi posisi isi Berita Terbaru tetap */
.news-content {
    background: #f7f7f9 !important;
}
.detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  color: #526985;
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  margin-bottom: 18px;
}

.detail-date,
.detail-views,
.detail-leave-msg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.detail-meta iconify-icon {
  color: #7B2D8E;
  font-size: 17px;
}

.detail-leave-msg {
  color: #7B2D8E;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}

.detail-leave-msg:hover {
  color: #60206f;
}
ul {
    list-style-type: disc;
    padding-left: 20px;
}

li {
    display: list-item;
}


/* =========================================================
   NEWS HERO — DISAMAKAN DENGAN CONTACT HERO
   Full width, tanpa space kiri/kanan, garis ungu di bawah
   ========================================================= */
.news-page {
  padding-top: 77px !important;
  margin: 0 !important;
  background: #fff;
}

.news-hero {
  position: relative;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background: #17121a;
  border: none !important;
}

.news-hero-banner {
  display: block;
  width: calc(100% + 3px) !important;
  max-width: none !important;
  height: auto;
  margin-left: -3px !important;
  margin-right: 0 !important;
  padding: 0 !important;
  object-fit: contain;
}

.news-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--purple-deep),
    var(--purple),
    #9d49ad
  );
}

@media (max-width: 767.98px) {
  .news-page {
    padding-top: 70px !important;
  }

  .news-hero-banner {
    width: 100% !important;
    margin-left: 0 !important;
    height: auto;
  }
}

/* =========================================================
   SEARCH SIDEBAR
   TAMBAHAN SAJA
   ========================================================= */

.sidebar-search-wrap {
  width: 100%;
  margin-bottom: 28px;
}

.sidebar-search {
  width: 100%;
  height: 56px;

  display: flex;
  align-items: center;

  background: #f8f7f9;

  border: 1px solid #e4e1e7;
  border-radius: 12px;

  overflow: hidden;
}

.sidebar-search input {
  flex: 1;
  min-width: 0;

  height: 100%;

  border: none;
  outline: none;

  background: transparent;

  padding: 0 18px 0 21px;

  color: #18213a;

  font-family: 'Poppins', sans-serif;
  font-size: 16px;
}

.sidebar-search input::placeholder {
  color: #777b88;
  opacity: 1;
}

.sidebar-search button {
  width: 46px;
  height: 46px;

  flex: 0 0 46px;

  margin-right: 5px;

  border: none;
  border-radius: 11px;

  background: var(--purple, #7b2d8e);

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  font-size: 20px;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.sidebar-search button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.sidebar-search-empty {
  display: none;

  padding: 10px 2px 0;

  color: #777b88;

  font-size: 13px;
}

@media (max-width: 575.98px) {

  .sidebar-search {
    height: 54px;
  }

  .sidebar-search input {
    font-size: 15px;
    padding-left: 17px;
  }

}
.product-mini.product-search-hidden {
  display: none !important;
}