/* ============================================================
   SETTING SLIDER — 50 MODEL v2.1
   Hanya mengatur tampilan HERO slider; data gambar tidak berubah.
   Berlaku lintas 25 template.
   ============================================================ */
.hero-slider[class*="slider-model-"]{
    --sm-radius:0px;
    --sm-margin-x:0px;
    --sm-margin-y:0px;
    --sm-border:0px;
    --sm-border-color:transparent;
    --sm-shadow:none;
    --sm-height:min(38vw,560px);
    --sm-bg:#0d1b2a;

    position:relative !important;
    width:auto !important;
    height:var(--sm-height) !important;
    min-height:var(--sm-height) !important;
    max-height:none !important;
    margin:var(--sm-margin-y) var(--sm-margin-x) !important;
    border-radius:var(--sm-radius) !important;
    border:var(--sm-border) solid var(--sm-border-color) !important;
    box-shadow:var(--sm-shadow) !important;
    background:var(--sm-bg) !important;
    overflow:hidden !important;
    isolation:isolate;
}
.hero-slider[class*="slider-model-"] .hero-slide{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
}
.hero-slider[class*="slider-model-"] .hero-slide img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:cover !important;
}
.hero-slider[class*="slider-model-"] .hero-prev,
.hero-slider[class*="slider-model-"] .hero-next{z-index:8 !important;cursor:pointer}
.hero-slider[class*="slider-model-"] .hero-dots{z-index:9 !important}

@media(max-width:760px){
 .hero-slider[class*="slider-model-"]{
    --sm-margin-x:0px !important;
    --sm-height:260px !important;
    margin-left:0 !important;
    margin-right:0 !important;
 }
}
.hero-slider.slider-model-01{--sm-radius:0;}

.hero-slider.slider-model-02{--sm-radius:18px;--sm-margin-x:18px;--sm-margin-y:12px;--sm-shadow:0 10px 28px rgba(15,39,71,.12);}

.hero-slider.slider-model-03{--sm-radius:34px;--sm-margin-x:24px;--sm-margin-y:14px;--sm-shadow:0 14px 34px rgba(15,39,71,.14);}

.hero-slider.slider-model-04{--sm-radius:999px;--sm-margin-x:34px;--sm-margin-y:18px;--sm-height:min(31vw,470px);}

.hero-slider.slider-model-05{--sm-radius:16px;--sm-margin-x:5vw;--sm-margin-y:20px;--sm-border:8px;--sm-border-color:#fff;--sm-shadow:0 12px 30px rgba(15,39,71,.14);}

.hero-slider.slider-model-06{--sm-radius:22px;--sm-margin-x:4vw;--sm-margin-y:24px;--sm-shadow:0 22px 45px rgba(8,28,58,.22);}

.hero-slider.slider-model-07{--sm-radius:16px;--sm-margin-x:22px;--sm-margin-y:16px;--sm-border:2px;--sm-border-color:#d5a62e;--sm-shadow:0 8px 24px rgba(213,166,46,.15);}

.hero-slider.slider-model-08{--sm-radius:14px;--sm-margin-x:22px;--sm-margin-y:18px;--sm-border:5px;--sm-border-color:#fff;--sm-shadow:0 0 0 2px var(--a,#1769e0),0 12px 28px rgba(15,39,71,.13);}

.hero-slider.slider-model-09{--sm-radius:14px;--sm-margin-x:20px;--sm-margin-y:18px;--sm-shadow:0 28px 52px rgba(3,19,42,.3);}

.hero-slider.slider-model-10{--sm-radius:6px;--sm-margin-x:16px;--sm-margin-y:8px;}

.hero-slider.slider-model-11{--sm-radius:46px 46px 8px 8px;--sm-margin-x:20px;--sm-margin-y:15px;}

.hero-slider.slider-model-12{--sm-radius:8px 8px 46px 46px;--sm-margin-x:20px;--sm-margin-y:15px;}

.hero-slider.slider-model-13{--sm-margin-x:20px;--sm-margin-y:14px;clip-path:polygon(4% 0,100% 0,100% 100%,0 100%,0 12%);}

.hero-slider.slider-model-14{--sm-margin-x:20px;--sm-margin-y:14px;clip-path:polygon(0 0,96% 0,100% 12%,100% 100%,0 100%);}

.hero-slider.slider-model-15{--sm-margin-x:22px;--sm-margin-y:14px;clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);}

.hero-slider.slider-model-16{--sm-margin-x:22px;--sm-margin-y:14px;clip-path:polygon(0 0,97% 0,100% 100%,3% 100%);}

.hero-slider.slider-model-17{--sm-margin-x:24px;--sm-margin-y:16px;clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%);}

.hero-slider.slider-model-18{--sm-margin-x:24px;--sm-margin-y:16px;clip-path:polygon(3% 0,97% 0,100% 8%,100% 92%,97% 100%,3% 100%,0 92%,0 8%);}

.hero-slider.slider-model-19{--sm-radius:14px;--sm-margin-x:24px;--sm-margin-y:16px;--sm-border:2px;--sm-border-color:#dce5f0;}
.hero-slider.slider-model-19:before,.hero-slider.hero-slider.slider-model-19:after{content:"";position:absolute;top:50%;width:24px;height:24px;border-radius:50%;background:#fff;z-index:12}.hero-slider.slider-model-19:before{left:-12px}.hero-slider.slider-model-19:after{right:-12px}
.hero-slider.slider-model-20{--sm-margin-x:18px;--sm-margin-y:14px;clip-path:polygon(0 0,100% 0,100% 92%,90% 96%,80% 93%,70% 98%,60% 94%,50% 100%,40% 94%,30% 98%,20% 93%,10% 96%,0 92%);}

.hero-slider.slider-model-21{--sm-margin-x:18px;--sm-margin-y:14px;clip-path:polygon(0 8%,10% 4%,20% 7%,30% 2%,40% 6%,50% 0,60% 6%,70% 2%,80% 7%,90% 4%,100% 8%,100% 100%,0 100%);}

.hero-slider.slider-model-22{--sm-height:min(30vw,430px);--sm-margin-x:20px;--sm-margin-y:18px;--sm-radius:12px;--sm-shadow:0 16px 32px rgba(0,0,0,.18);}

.hero-slider.slider-model-23{--sm-height:min(24vw,350px);--sm-margin-x:10px;--sm-margin-y:12px;--sm-radius:8px;}

.hero-slider.slider-model-24{--sm-height:min(25vw,380px);--sm-margin-x:5vw;--sm-margin-y:18px;--sm-radius:18px;}

.hero-slider.slider-model-25{--sm-height:min(45vw,660px);--sm-margin-y:8px;}

.hero-slider.slider-model-26{--sm-radius:22px;--sm-margin-x:28px;--sm-margin-y:18px;--sm-border:1px;--sm-border-color:rgba(255,255,255,.65);--sm-shadow:0 12px 36px rgba(15,39,71,.13);backdrop-filter:blur(10px);}

.hero-slider.slider-model-27{--sm-radius:14px;--sm-margin-x:24px;--sm-margin-y:18px;--sm-border:2px;--sm-border-color:#62d9ff;--sm-shadow:0 0 18px rgba(70,200,255,.42),0 14px 30px rgba(15,39,71,.16);}

.hero-slider.slider-model-28{--sm-radius:16px;--sm-margin-x:22px;--sm-margin-y:16px;--sm-border:3px;--sm-border-color:#e0b440;--sm-shadow:0 16px 34px rgba(4,31,67,.25);--sm-bg:#072b5b;}

.hero-slider.slider-model-29{--sm-radius:14px;--sm-margin-x:30px;--sm-margin-y:20px;--sm-border:10px;--sm-border-color:#fff;--sm-shadow:0 12px 28px rgba(15,39,71,.15);}

.hero-slider.slider-model-30{--sm-radius:14px;--sm-margin-x:30px;--sm-margin-y:20px;--sm-border:10px;--sm-border-color:#101a29;--sm-shadow:0 14px 34px rgba(0,0,0,.24);}

.hero-slider.slider-model-31{--sm-radius:20px;--sm-margin-x:22px;--sm-margin-y:16px;--sm-shadow:inset 6px 6px 0 var(--a,#1769e0),inset -6px -6px 0 #e0b440;}

.hero-slider.slider-model-32{--sm-radius:28px 4px 28px 4px;--sm-margin-x:22px;--sm-margin-y:16px;--sm-shadow:0 12px 28px rgba(15,39,71,.12);}

.hero-slider.slider-model-33{--sm-margin-x:24px;--sm-margin-y:16px;clip-path:polygon(2% 0,98% 0,100% 8%,98% 16%,100% 24%,98% 32%,100% 40%,98% 48%,100% 56%,98% 64%,100% 72%,98% 80%,100% 88%,98% 100%,2% 100%,0 88%,2% 80%,0 72%,2% 64%,0 56%,2% 48%,0 40%,2% 32%,0 24%,2% 16%,0 8%);}

.hero-slider.slider-model-34{--sm-radius:18px;--sm-margin-x:34px;--sm-margin-y:24px;--sm-shadow:0 0 0 6px #fff,0 0 0 9px rgba(23,105,224,.25),0 18px 35px rgba(15,39,71,.15);}

.hero-slider.slider-model-35{--sm-radius:20px;--sm-margin-x:24px;--sm-margin-y:18px;--sm-shadow:0 0 28px rgba(23,105,224,.18);}

.hero-slider.slider-model-36{--sm-radius:20px;--sm-margin-x:24px;--sm-margin-y:18px;--sm-shadow:0 0 38px rgba(23,105,224,.38),0 18px 35px rgba(15,39,71,.15);}

.hero-slider.slider-model-37{--sm-radius:4px;--sm-margin-x:8vw;--sm-margin-y:26px;--sm-border:12px;--sm-border-color:#fff;--sm-shadow:0 18px 35px rgba(15,39,71,.18);transform:rotate(-.35deg);}

.hero-slider.slider-model-38{--sm-radius:2px;--sm-margin-x:9vw;--sm-margin-y:18px;--sm-height:min(40vw,610px);--sm-shadow:0 18px 38px rgba(15,39,71,.2);}

.hero-slider.slider-model-39{--sm-radius:0;--sm-margin-x:5vw;--sm-margin-y:22px;--sm-border:1px;--sm-border-color:#d6dde8;--sm-shadow:8px 8px 0 #eef2f7;}

.hero-slider.slider-model-40{--sm-radius:10px;--sm-margin-x:5vw;--sm-margin-y:24px;--sm-border:6px;--sm-border-color:#f4f6f8;--sm-shadow:0 14px 28px rgba(15,39,71,.14);}

.hero-slider.slider-model-41{--sm-radius:32px 8px 32px 8px;--sm-margin-x:26px;--sm-margin-y:16px;clip-path:polygon(1.5% 0,100% 0,98.5% 100%,0 100%);}

.hero-slider.slider-model-42{--sm-radius:0;--sm-margin-x:20px;--sm-margin-y:14px;--sm-border:4px;--sm-border-color:var(--a,#1769e0);}

.hero-slider.slider-model-43{--sm-radius:18px;--sm-margin-x:28px;--sm-margin-y:20px;--sm-border:1px;--sm-border-color:#d5aa42;--sm-shadow:0 15px 35px rgba(5,25,55,.19),inset 0 0 0 5px rgba(255,255,255,.12);}

.hero-slider.slider-model-44{--sm-radius:8px;--sm-margin-x:22px;--sm-margin-y:14px;clip-path:polygon(0 0,94% 0,100% 16%,100% 100%,6% 100%,0 84%);--sm-shadow:0 10px 25px rgba(23,105,224,.18);}

.hero-slider.slider-model-45{--sm-margin-x:24px;--sm-margin-y:18px;clip-path:polygon(0 8%,8% 0,92% 0,100% 14%,98% 90%,90% 100%,7% 97%,0 86%);--sm-shadow:0 14px 30px rgba(15,39,71,.16);}

.hero-slider.slider-model-46{--sm-radius:20px;--sm-margin-x:22px;--sm-margin-y:14px;--sm-shadow:0 8px 26px rgba(15,39,71,.1);}

.hero-slider.slider-model-47{--sm-radius:26px;--sm-margin-x:32px;--sm-margin-y:20px;--sm-border:1px;--sm-border-color:rgba(14,62,120,.18);--sm-shadow:0 16px 36px rgba(15,39,71,.12);}

.hero-slider.slider-model-48{--sm-radius:20px;--sm-margin-x:28px;--sm-margin-y:20px;--sm-border:2px;--sm-border-color:rgba(213,170,66,.8);--sm-shadow:0 20px 42px rgba(5,25,55,.18);}

.hero-slider.slider-model-49{--sm-margin-x:25px;--sm-margin-y:18px;--sm-radius:18px;clip-path:polygon(0 0,47% 0,50% 2.5%,53% 0,100% 0,100% 100%,53% 100%,50% 97.5%,47% 100%,0 100%);--sm-shadow:0 14px 30px rgba(15,39,71,.16);}

.hero-slider.slider-model-50{--sm-radius:28px;--sm-margin-x:3vw;--sm-margin-y:22px;--sm-height:min(41vw,620px);--sm-border:2px;--sm-border-color:rgba(255,255,255,.72);--sm-shadow:0 24px 52px rgba(5,25,55,.26);}

/* Arrow styles by families */
.slider-model-01 .hero-prev,.slider-model-01 .hero-next,
.slider-model-10 .hero-prev,.slider-model-10 .hero-next{border-radius:8px!important;background:rgba(7,31,66,.55)!important}
.slider-model-02 .hero-prev,.slider-model-02 .hero-next,
.slider-model-03 .hero-prev,.slider-model-03 .hero-next,
.slider-model-46 .hero-prev,.slider-model-46 .hero-next{background:rgba(255,255,255,.88)!important;color:#17335a!important;border:0!important;box-shadow:0 6px 18px rgba(0,0,0,.12)!important}
.slider-model-04 .hero-prev,.slider-model-04 .hero-next{width:52px!important;height:52px!important;background:#fff!important;color:#17335a!important;border:0!important}
.slider-model-07 .hero-prev,.slider-model-07 .hero-next,
.slider-model-28 .hero-prev,.slider-model-28 .hero-next,
.slider-model-43 .hero-prev,.slider-model-43 .hero-next,
.slider-model-48 .hero-prev,.slider-model-48 .hero-next{border-color:#e0b440!important;background:#082e61!important;color:#ffd56a!important}
.slider-model-22 .hero-prev,.slider-model-22 .hero-next,
.slider-model-23 .hero-prev,.slider-model-23 .hero-next{width:58px!important;border-radius:7px!important;background:rgba(0,0,0,.58)!important}
.slider-model-27 .hero-prev,.slider-model-27 .hero-next,
.slider-model-36 .hero-prev,.slider-model-36 .hero-next{border:1px solid #66dbff!important;box-shadow:0 0 14px rgba(75,205,255,.5)!important}
.slider-model-29 .hero-prev,.slider-model-29 .hero-next{background:#fff!important;color:#17335a!important;border-color:#dfe5ec!important}
.slider-model-30 .hero-prev,.slider-model-30 .hero-next{background:#111a28!important;border-color:#566170!important}
.slider-model-42 .hero-prev,.slider-model-42 .hero-next{border-radius:0!important;background:var(--a,#1769e0)!important;border:0!important}
.slider-model-50 .hero-prev,.slider-model-50 .hero-next{width:54px!important;height:54px!important;background:rgba(7,31,66,.72)!important;border:2px solid rgba(255,255,255,.7)!important}

/* Dot styles */
.slider-model-07 .hero-dots button,.slider-model-28 .hero-dots button,.slider-model-43 .hero-dots button,.slider-model-48 .hero-dots button{background:#e0b440!important}
.slider-model-27 .hero-dots button,.slider-model-36 .hero-dots button{background:#63d9ff!important}
.slider-model-42 .hero-dots button{border-radius:0!important}


/* ============================================================
   FINAL SYNC HARDENING v3.0
   Model aktif dari admin selalu mengalahkan styling 25 template.
   ============================================================ */
.hero-slider[data-slider][class*="slider-model-"]{
    box-sizing:border-box !important;
    transition:border-radius .22s ease,margin .22s ease,box-shadow .22s ease,clip-path .22s ease,height .22s ease !important;
}
.hero-slider[data-slider][class*="slider-model-"] > .hero-slide,
.hero-slider[data-slider][class*="slider-model-"] > .hero-slide > img{
    border-radius:inherit !important;
}
/* Models with visibly different silhouettes, repeated directly with !important so theme rules cannot cancel them. */
.hero-slider[data-slider].slider-model-02{border-radius:18px !important;margin:12px 18px !important;box-shadow:0 10px 28px rgba(15,39,71,.12) !important}
.hero-slider[data-slider].slider-model-03{border-radius:34px !important;margin:14px 24px !important;box-shadow:0 14px 34px rgba(15,39,71,.14) !important}
.hero-slider[data-slider].slider-model-04{border-radius:999px !important;margin:18px 34px !important;height:min(31vw,470px) !important;min-height:min(31vw,470px) !important}
.hero-slider[data-slider].slider-model-05{border-radius:16px !important;margin:20px 5vw !important;border:8px solid #fff !important;box-shadow:0 12px 30px rgba(15,39,71,.14) !important}
.hero-slider[data-slider].slider-model-07{border-radius:16px !important;margin:16px 22px !important;border:2px solid #d5a62e !important;box-shadow:0 8px 24px rgba(213,166,46,.15) !important}
.hero-slider[data-slider].slider-model-13{margin:14px 20px !important;clip-path:polygon(4% 0,100% 0,100% 100%,0 100%,0 12%) !important}
.hero-slider[data-slider].slider-model-14{margin:14px 20px !important;clip-path:polygon(0 0,96% 0,100% 12%,100% 100%,0 100%) !important}
.hero-slider[data-slider].slider-model-17{margin:16px 24px !important;clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%) !important}
.hero-slider[data-slider].slider-model-18{margin:16px 24px !important;clip-path:polygon(3% 0,97% 0,100% 8%,100% 92%,97% 100%,3% 100%,0 92%,0 8%) !important}
.hero-slider[data-slider].slider-model-20{margin:14px 18px !important;clip-path:polygon(0 0,100% 0,100% 92%,90% 96%,80% 93%,70% 98%,60% 94%,50% 100%,40% 94%,30% 98%,20% 93%,10% 96%,0 92%) !important}
.hero-slider[data-slider].slider-model-21{margin:14px 18px !important;clip-path:polygon(0 8%,10% 4%,20% 7%,30% 2%,40% 6%,50% 0,60% 6%,70% 2%,80% 7%,90% 4%,100% 8%,100% 100%,0 100%) !important}
.hero-slider[data-slider].slider-model-22{height:min(30vw,430px) !important;min-height:min(30vw,430px) !important;margin:18px 20px !important;border-radius:12px !important;box-shadow:0 16px 32px rgba(0,0,0,.18) !important}
.hero-slider[data-slider].slider-model-23{height:min(24vw,350px) !important;min-height:min(24vw,350px) !important;margin:12px 10px !important;border-radius:8px !important}
.hero-slider[data-slider].slider-model-25{height:min(45vw,660px) !important;min-height:min(45vw,660px) !important;margin:8px 0 !important}
.hero-slider[data-slider].slider-model-27{border-radius:14px !important;margin:18px 24px !important;border:2px solid #62d9ff !important;box-shadow:0 0 18px rgba(70,200,255,.42),0 14px 30px rgba(15,39,71,.16) !important}
.hero-slider[data-slider].slider-model-28{border-radius:16px !important;margin:16px 22px !important;border:3px solid #e0b440 !important;box-shadow:0 16px 34px rgba(4,31,67,.25) !important;background:#072b5b !important}
.hero-slider[data-slider].slider-model-29{border-radius:14px !important;margin:20px 30px !important;border:10px solid #fff !important;box-shadow:0 12px 28px rgba(15,39,71,.15) !important}
.hero-slider[data-slider].slider-model-30{border-radius:14px !important;margin:20px 30px !important;border:10px solid #101a29 !important;box-shadow:0 14px 34px rgba(0,0,0,.24) !important}
.hero-slider[data-slider].slider-model-32{border-radius:28px 4px 28px 4px !important;margin:16px 22px !important;box-shadow:0 12px 28px rgba(15,39,71,.12) !important}
.hero-slider[data-slider].slider-model-34{border-radius:18px !important;margin:24px 34px !important;box-shadow:0 0 0 6px #fff,0 0 0 9px rgba(23,105,224,.25),0 18px 35px rgba(15,39,71,.15) !important}
.hero-slider[data-slider].slider-model-37{border-radius:4px !important;margin:26px 8vw !important;border:12px solid #fff !important;box-shadow:0 18px 35px rgba(15,39,71,.18) !important;transform:rotate(-.35deg) !important}
.hero-slider[data-slider].slider-model-38{border-radius:2px !important;margin:18px 9vw !important;height:min(40vw,610px) !important;min-height:min(40vw,610px) !important;box-shadow:0 18px 38px rgba(15,39,71,.2) !important}
.hero-slider[data-slider].slider-model-42{border-radius:0 !important;margin:14px 20px !important;border:4px solid var(--a,#1769e0) !important}
.hero-slider[data-slider].slider-model-44{border-radius:8px !important;margin:14px 22px !important;clip-path:polygon(0 0,94% 0,100% 16%,100% 100%,6% 100%,0 84%) !important}
.hero-slider[data-slider].slider-model-45{margin:18px 24px !important;clip-path:polygon(0 8%,8% 0,92% 0,100% 14%,98% 90%,90% 100%,7% 97%,0 86%) !important}
.hero-slider[data-slider].slider-model-49{margin:18px 25px !important;border-radius:18px !important;clip-path:polygon(0 0,47% 0,50% 2.5%,53% 0,100% 0,100% 100%,53% 100%,50% 97.5%,47% 100%,0 100%) !important}
.hero-slider[data-slider].slider-model-50{border-radius:28px !important;margin:22px 3vw !important;height:min(41vw,620px) !important;min-height:min(41vw,620px) !important;border:2px solid rgba(255,255,255,.72) !important;box-shadow:0 24px 52px rgba(5,25,55,.26) !important}
@media(max-width:760px){
  .hero-slider[data-slider][class*="slider-model-"]{margin-left:0 !important;margin-right:0 !important;height:260px !important;min-height:260px !important;transform:none !important}
}

/* ============================================================
   RESPONSIVE WIDTH FIX v3.1
   Memutus max-width bawaan 25 template HANYA untuk hero slider
   yang sedang memakai model dari Setting Slider.
   Tidak mengubah tinggi, bentuk, navigasi, gambar, atau modul lain.
   ============================================================ */
.hero-slider[data-slider][class*="slider-model-"]{
    /* Beberapa theme-signatures memberi max-width 1440-1540px.
       Ketika margin model memakai !important, slider menjadi menempel
       di kiri dan menyisakan ruang kosong. Model aktif harus mengikuti
       lebar viewport/container, bukan max-width template lama. */
    max-width:none !important;
    min-width:0 !important;
    box-sizing:border-box !important;
}

/* width:auto + margin kiri/kanan membuat block mengisi sisa lebar
   secara natural. Tegaskan agar tidak ada template yang menetapkan
   width/max-inline-size tetap pada breakpoint tertentu. */
body[class*="theme-"] .hero-slider[data-slider][class*="slider-model-"]{
    width:auto !important;
    max-width:none !important;
    max-inline-size:none !important;
}

/* Tablet/HP: selalu gunakan seluruh lebar layar. Aturan ini hanya
   menetralkan margin horizontal model; bentuk slider lain tetap aman. */
@media(max-width:760px){
    body[class*="theme-"] .hero-slider[data-slider][class*="slider-model-"]{
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
}