.hero{background:radial-gradient(1200px 400px at 10% -10%,rgba(var(--bs-primary-rgb),0.12),transparent 60%),radial-gradient(900px 380px at 100% 0%,rgba(var(--bs-success-rgb),0.10),transparent 55%);border-bottom:1px solid var(--bs-border-color);}
.py-lg-6{padding-top:4.5rem !important;padding-bottom:4.5rem !important;}
.feature-icon{display:flex;align-items:center;justify-content:center;width:3.25rem;height:3.25rem;}
.auth-wrap{min-height:calc(100vh - 180px);display:flex;align-items:center;padding:2.5rem 0;background:radial-gradient(1000px 420px at 50% -20%,rgba(var(--bs-primary-rgb),0.10),transparent 60%),radial-gradient(700px 300px at 90% 100%,rgba(var(--bs-info-rgb),0.08),transparent 55%);}
.stat-icon{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;font-size:1.35rem;flex-shrink:0;}
.navbar .nav-link.active{font-weight:600;}
.form-control:focus,.form-check-input:focus{border-color:var(--bs-primary);box-shadow:0 0 0 0.2rem rgba(var(--bs-primary-rgb),0.2);}
.slider-slide{position:relative;height:340px;background-size:cover;background-position:center;border-radius:1rem;overflow:hidden;}
.slider-grid{display:flex;gap:1rem;}
.slider-grid>a{flex:1 1 0;min-width:0;}
.slider-card{position:relative;display:block;height:340px;background-size:cover;background-position:center;border-radius:1rem;overflow:hidden;}
.slider-card-caption{position:absolute;left:0;right:0;bottom:0;padding:1.5rem;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.35) 60%,transparent);}
.slider-card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.slider-card-sum{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.slider-caption{position:absolute;left:0;right:0;bottom:0;padding:1.75rem;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.35) 60%,transparent);}
#sliderTerbaru .carousel-indicators button{width:28px;height:28px;border:0;padding:0;background:transparent;position:relative;opacity:1;}
#sliderTerbaru .carousel-indicators button::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;background-color:var(--bs-secondary);opacity:.55;}
#sliderTerbaru .carousel-indicators button.active::before{opacity:1;}
@media (max-width:575.98px){.slider-slide{height:230px;}
.slider-caption{padding:1rem;}
.slider-card{height:210px;}
.slider-card-caption{padding:.85rem;}
.slider-grid{gap:.6rem;}
.slider-card-title{font-size:.9rem;}
}
.post-cover{height:180px;object-fit:cover;}
@media (max-width:575.98px){.post-cover{height:110px;}
.post-card .card-body{padding:.7rem;}
.post-card .h5{font-size:.95rem;}
.post-card .badge{font-size:.65rem;}
.post-card .btn-sm{--bs-btn-padding-y:.2rem;--bs-btn-padding-x:.45rem;--bs-btn-font-size:.72rem;}
}
#customPosts{min-height:520px;}
[data-bs-theme="dark"] .text-secondary{color:#adb5bd!important;}
[data-bs-theme="dark"] .btn-outline-primary{--bs-btn-color:#6ea8fe;--bs-btn-border-color:#6ea8fe;}
.nav-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.blog-head{padding:3rem 0 1.5rem;background:radial-gradient(900px 320px at 15% -20%,rgba(var(--bs-primary-rgb),0.12),transparent 60%),radial-gradient(700px 280px at 95% 0%,rgba(var(--bs-success-rgb),0.10),transparent 55%);border-bottom:1px solid var(--bs-border-color);}
.prose{line-height:1.75;}
.prose h2{font-size:1.4rem;margin-top:2rem;margin-bottom:.75rem;}
.prose h3{font-size:1.2rem;margin-top:1.5rem;margin-bottom:.5rem;}
.prose h4{font-size:1.05rem;margin-top:1.25rem;margin-bottom:.5rem;}
.prose p{margin-bottom:1rem;}
.prose img{max-width:100%;height:auto;border-radius:.5rem;display: block;margin-right: auto;margin-left: auto;}
.prose blockquote{border-left:4px solid var(--bs-primary);background:var(--bs-tertiary-bg);padding:.6rem 1rem;margin:1rem 0;border-radius:0 .5rem .5rem 0;}
.prose code{background:var(--bs-tertiary-bg);padding:.15rem .4rem;border-radius:.3rem;font-size:.875em;}
.prose hr{margin:2rem 0;opacity:.25;}
.prose ul,.prose ol{padding-left:1.6rem;margin-bottom:1rem;}
.prose pre{background:var(--bs-tertiary-bg);border:1px solid var(--bs-border-color);border-radius:.5rem;padding:.8rem 1rem;overflow-x:auto;}
.prose pre code{background:none;padding:0;}
.prose table{margin-bottom:1rem;}
.post-card .card{transition:transform .15s ease,box-shadow .15s ease;}
.post-card .card:hover{transform:translateY(-3px);}
#themeToggle{width:2.2rem;}

/* ---------- slider radio streaming (beranda): 4 ikon per tampilan ---------- */
.radio-slider .radio-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;}
.radio-slider .radio-item{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%;padding:1rem .5rem .9rem;border:1px solid var(--bs-border-color-translucent);border-radius:1rem;background:var(--bs-body-bg);cursor:pointer;text-align:center;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.radio-slider .radio-item:hover,.radio-slider .radio-item:focus-visible{transform:translateY(-3px);box-shadow:0 .5rem 1.25rem rgba(0,0,0,.12);border-color:var(--bs-primary);}
.radio-slider .radio-item:focus-visible{outline:2px solid var(--bs-primary);outline-offset:2px;}
.radio-slider .radio-logo{position:relative;flex:0 0 auto;width:84px;height:84px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--bs-primary),var(--bs-info));display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--bs-border-color-translucent);}
.radio-slider .radio-logo img{width:100%;height:100%;object-fit:cover;}
.radio-slider .radio-logo .bi-broadcast{font-size:2rem;color:#fff;}
.radio-slider .radio-putar{position:absolute;right:0;bottom:0;width:30px;height:30px;border-radius:50%;background:var(--bs-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;box-shadow:0 .15rem .4rem rgba(0,0,0,.25);}
.radio-slider .radio-nama{font-weight:600;font-size:.9rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.radio-slider .radio-genre{font-size:.75rem;color:var(--bs-secondary);line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:991.98px){.radio-slider .radio-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:575.98px){.radio-slider .radio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;}.radio-slider .radio-item{padding:.75rem .35rem;}.radio-slider .radio-logo{width:66px;height:66px;}.radio-slider .radio-nama{font-size:.8rem;}}

/* ---------- Halaman CCTV ---------- */
.cctv-hero{background:linear-gradient(135deg,rgba(var(--bs-primary-rgb),.08),transparent);}
.cctv-peta{height:520px;background:var(--bs-tertiary-bg);}
.cctv-daftar{max-height:520px;overflow-y:auto;}
.cctv-item{display:block;width:100%;text-align:left;border:1px solid var(--bs-border-color-translucent);
  border-radius:.75rem;background:var(--bs-body-bg);padding:.6rem .75rem;margin-bottom:.5rem;
  cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;}
.cctv-item:hover,.cctv-item:focus-visible{border-color:var(--bs-primary);
  box-shadow:0 .25rem .75rem rgba(0,0,0,.1);}
.cctv-item:focus-visible{outline:2px solid var(--bs-primary);outline-offset:2px;}
.cctv-item .nama{font-weight:600;font-size:.9rem;line-height:1.25;}
.cctv-item .meta{font-size:.75rem;color:var(--bs-secondary);}
.cctv-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto;}
.cctv-hero .input-group{max-width:100%;}
@media (max-width:991.98px){.cctv-peta{height:380px;}.cctv-daftar{max-height:420px;}}

/* Thumbnail pratinjau pada kartu kamera */
.cctv-thumb{width:72px;height:44px;flex:0 0 auto;border-radius:.4rem;object-fit:cover;
  background:var(--bs-tertiary-bg);border:1px solid var(--bs-border-color-translucent);}
.cctv-item .min-width-0{min-width:0;}
.cctv-item .nama{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Pemutar di modal */
.cctv-pemutar{aspect-ratio:16/9;}
.cctv-pemutar img.cctv-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
#cctvPutar{box-shadow:0 .5rem 1.5rem rgba(0,0,0,.45);}
#cctvPutar:hover{transform:translate(-50%,-50%) scale(1.05);}
#cctvPutar{transition:transform .15s ease;}