.top-right {
    position: absolute;
    top: 5px;
    right: 8px;
}
.skeleton-box {
    display: inline-block;
    height: 1em;
    position: relative;
    overflow: hidden;
    background-color: #DDDBDD;
    margin-right: 10px;
}

.animate-shimmer {
    animation : shimmer 2s infinite;
    background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
    background-size: 1000px 100%;
}
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}


/*------------------------------------------------------------------
[2. Masonry Grids]
*/
.grid-container{
    position: relative;
}
.grid-container .grid{
    max-width: 100%;
    min-height: 30rem;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: -3rem;
    visibility: hidden;
    z-index: 1;
}
.masonry.fade-in-progressively .grid-item,
.masonry.fade-in-progressively .masonry-stamp{
    opacity: 0;
}
.masonry .filtering{
    -webkit-transition-property: height;
    transition-property: height;
    -webkit-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.masonry .tm-loader{
    top: 6rem;
}

/* Grid - 30px Gutter */
.grid-container > .row > .column{
    padding-left: 0;
    padding-right: 0;
}
.grid-container .grid{
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}
.grid-container .grid .grid-item{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.grid-container .thumbnail{
    margin-bottom: 0;
    float: none;
}

/* Grid - 10px Gutter Grid */
.grid-container.small-margins > .row > .column{
    padding-left: 1rem;
    padding-right: 1rem;
}
.grid-container.small-margins.full-width > .row > .column{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
body.boxed .grid-container.small-margins.full-width > .row > .column{
    padding-left: 1rem;
    padding-right: 1rem;
}
.grid-container.small-margins.no-margins.full-width > .row > .column{
    padding-left: 0rem;
    padding-right: 0rem;
}
.grid-container.small-margins.full-width .grid{
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}
.grid-container.small-margins .grid{
    padding-left: 0;
    padding-right: 0;
    margin-top: -0.5rem;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: -0.5rem;
}
.grid-container.small-margins .grid .grid-item{
    margin-bottom: 0;
    padding: 0.5rem;
    position: relative;
}

/* Grid - No Gutter  */
.grid-container.no-margins > .row > .column{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.grid-container.no-margins .grid{
    margin-bottom: 0;
}
.grid-container.no-margins .grid,
.grid-container.no-margins .grid .grid-item{
    padding: 0 !important;
    margin: 0 !important;
}

/* Full Width Grid */
.grid-container.full-width .row{
    max-width: 100%;
}
.grid-container.full-width .grid{
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}
.grid-container.full-width > .row > .column{
    padding-left: 0;
    padding-right: 0;
}
.grid-container.full-width.no-margins{
    padding: 0 !important;
}
.grid-container.full-width.no-padding-bottom .grid{
    margin-bottom: 0;
}

/* Special Bottom Padding */
.masonry-set-dimensions.full-width.no-padding-bottom{
    padding-bottom: 1.5rem !important;
}
.masonry-set-dimensions.full-width.small-margins.no-padding-bottom{
    padding-bottom: 0.5rem !important;
}

/* Fixed Dimension Grid
   Wrap any content grid in .masonry-set-demensions
   to set grid item with and height. Use .large and .portrait on
   .grid-item to specify grid item format.
*/
.masonry-set-dimensions{
    padding-top: 7rem;
    padding-bottom: 6rem;
}

/* External Paddding */
.masonry-set-dimensions.full-width .row{
    max-width: 100%;
}
.masonry-set-dimensions.full-width .grid{
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}
.masonry-set-dimensions.full-width > .row > .column {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.masonry-set-dimensions.small-margins.full-width > .row > .column{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.masonry-set-dimensions.no-margins .grid,
.masonry-set-dimensions.no-margins .grid .grid-item{
    padding: 0 !important;
    margin: 0 !important;
}
.masonry-set-dimensions.full-width.no-margins{
    padding: 0;
}

/* Grid Fixed Dimensions - 30px Gutter */
.masonry > .row > .column,
.masonry-set-dimensions > .row > .column{
    padding-left: 0;
    padding-right: 0;
}
.masonry-set-dimensions .grid{
    padding-left: 0;
    padding-right: 0;
    margin-top: -1.5rem;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: -1.5rem;
}
.masonry-set-dimensions .grid .grid-item{
    margin-bottom: 0;
    padding: 1.5rem;
    position: relative;
}

/* Grid Fixed Dimensions - 10px Gutter */
.masonry-set-dimensions.small-margins > .row > .column{
    padding-left: 1rem;
    padding-right: 1rem;
}
.masonry-set-dimensions.small-margins .grid{
    margin-top: -0.5rem;
    margin-bottom: -0.5rem;
}
.masonry-set-dimensions.small-margins .grid .grid-item{
    padding: 0.5rem;
}

/* Grid Fixed Dimensions - No Gutter */
.masonry-set-dimensions.no-margins > .row > .column{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.masonry-set-dimensions.no-margins.full-width > .row > .column{
    padding-left: 0rem;
    padding-right: 0rem;
}
.masonry-set-dimensions .thumbnail{
    height: 100%;
    overflow: hidden;
    margin-bottom: 0;
}
.masonry-set-dimensions .grid-item img{
    width: 100%;
}

/* Grid Item Content Wrappers */
.masonry-set-dimensions .content-outer{
    width: 100%;
    height: 100%;
    display: table;
    position: relative;
    bottom: 0;
}
.masonry-set-dimensions .thumbnail + .content-outer{
    position: absolute;
}
.masonry-set-dimensions .content-inner{
    width: 100%;
    height: 100%;
    padding: 3rem;
    display: table-cell;
    vertical-align: middle;
}
.masonry-set-dimensions .content-inner > *:first-child{
    margin-top: 0;
}
.masonry-set-dimensions .content-inner > *:last-child{
    margin-bottom: 0;
}

/* Grid Item Media */
.masonry-set-dimensions .content-slider,
.masonry-set-dimensions video,
.masonry-set-dimensions iframe{
    width: 100% !important;
    height: 100% !important;
}
.masonry-set-dimensions .content-slider img{
    width: auto;
}
.masonry-set-dimensions .mejs-container{
    width: 20rem;
    height: 3rem;
    margin-left: -10rem;
    margin-top: -1.5rem;
    position: absolute;
    left: 50%;
    top: 50%;
}

/* Masonry Stamp */
.masonry-stamp{
    padding: 1.5rem;
}
.small-margins .masonry-stamp{
    padding: 0.5rem;
}
.no-margins .masonry-stamp{
    padding: 0;
}

/* Filter Menu */
.grid-filter-menu{
    padding-top: 3.5rem;
    padding-bottom: 0rem;
    text-align: center;
}
.grid-filter-menu.left{
    text-align: left;
}
.grid-filter-menu.left li:first-child a{
    padding-left: 0;
    margin-left: 0;
}
.grid-filter-menu.right{
    text-align: right;
}
.grid-filter-menu.right li:last-child a{
    padding-right: 0;
    margin-right: 0;
}
.grid-filter-menu ul{
    width: 100%;
    padding-top: 3.5rem;
    padding-bottom: 0rem;
    margin-bottom: 0;
    list-style: none;
}
.grid-filter-menu li{
    padding: 0 2rem;
    display: inline-block;
    font-size: 1.2rem;
    line-height: 1;
    text-transform: uppercase;
}
.grid-filter-menu a{
    padding: 1rem 0.8rem;
    -webkit-transition-property: background, border-color, color, opacity;
    transition-property: background, border-color, color, opacity;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
.grid-filter-menu a:hover{
    color: #333;
}
.grid-filter-menu a.active{
    color: #333;
    border-bottom: 1px solid #333;
}

/* Description */
.grid .project-title,
.grid .project-description{
    display: block;
}
.grid .project-title + .project-description{
    margin-top: 0.5rem;
}
.grid .postku-description{
    width: 100%;
    margin-top: 2rem;
}
.grid .postku-description .project-title{
    margin-top: 0;
    margin-bottom: 0.5rem;
}
.grid .postku-description *:last-child{
    margin-bottom: 0rem;
}

/* Isotope Item */
.isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

/* Isotope Animation Classes */
.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}
.isotope {
    -webkit-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    transition-property:         transform, opacity;
}
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
}

/* Grid Breakpoints */
@media only screen and (max-width: 1300px){
    .grid-container .content-grid-5 .grid-item,
    .grid-container .content-grid-6 .grid-item{
        width: 25%;
    }
}
@media only screen and (max-width: 1140px){
    .grid-container .grid .grid-item{
        width: 33.33333%;
    }
    .content-inner .grid-container .grid .grid-item,
    .grid-container .content-grid-2 .grid-item,
    .grid-container.full-width.small-margins .content-grid-2 .grid-item,
    .grid-container.full-width.no-margins .content-grid-2 .grid-item{
        width: 50%;
    }
}
@media only screen and (max-width: 960px){
    .content-inner .grid-container .grid .grid-item,
    .grid-container .grid .grid-item{
        width: 50%;
    }
    .grid-container.full-width.small-margins .grid .grid-item,
    .grid-container.full-width.no-margins .grid .grid-item{
        width: 33.33333%;
    }
}
@media only screen and (max-width: 768px){
    .grid-container .grid .grid-item.large,
    .grid-container .grid .grid-item.portrait.large{
        width: 100%;
    }
    .grid-container.full-width .grid .grid-item,
    .grid-container.full-width.small-margins .grid .grid-item,
    .grid-container.full-width.no-margins .grid .grid-item{
        width: 50%;
    }
}
@media only screen and (max-width: 600px){
    .content-inner .grid-container .grid .grid-item,
    .grid-container .grid .grid-item,
    .grid-container.full-width .grid .grid-item{
        width: 100%;
    }
}
@media only screen and (max-width: 480px){
    .grid-container.full-width.small-margins .grid .grid-item,
    .grid-container.full-width.no-margins .grid .grid-item{
        width: 100%;
    }
}

.videoWrapper {
    position: relative;
    padding-bottom: 45.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Media
----------------------------------------------------------*/
/* Images */
.image-box { position: relative; overflow: hidden; }
.image-box .image { position: relative; background: #000000; overflow: hidden; }
.image-box .image img { position: relative; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; width: 100%; z-index: 1; }
.image-box .hover { position: absolute; top: 50%; left: 30px; right: 30px; -moz-transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-filter: blur(5px); filter: blur(5px); color: #fff; z-index: 3; }
.image-box .hover .text-muted { color: rgba(255, 255, 255, 0.5); }
.image-box .content { position: absolute; top: 50%; left: 30px; right: 30px; -moz-transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); z-index: 2; }
.image-box .title { padding: 20px; }
.image-box .title h5 { font-size: 15px; }
.image-box > .label { position: absolute; top: 20px; right: 20px; z-index: 4; }
.image-box.image-hover .image img { -moz-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); }
.image-box.image-hover:hover .image img { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
.image-box.image-hover:hover .image .hover ~ img, .image-box.image-hover:hover .image .hover ~ a > img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=45); opacity: 0.45; }
.image-box.image-hover:hover .hover { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; -webkit-filter: blur(0); filter: blur(0); }
.image-box.inner-title .image:after { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC42NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))); background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65)); background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65)); background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65)); -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; content: ' '; visibility: hidden; z-index: 2; }
.image-box.inner-title .title { position: absolute; bottom: 0; left: 0; width: 100%; color: #fff; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; visibility: hidden; -webkit-filter: blur(5px); filter: blur(5px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px); z-index: 3; }
.image-box.inner-title .title .h5 { font-size: 17px; }
.image-box.inner-title .title .text-muted { color: rgba(255, 255, 255, 0.5); }
.image-box.inner-title:hover .image:after { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; visibility: visible; }
.image-box.inner-title:hover .title { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; -webkit-filter: blur(0); filter: blur(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); visibility: visible; }
.image-box.rounded { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }

/* Play Button */
.btn-play { position: relative; display: inline-block; font-size: 52px; width: 72px; height: 72px; font-size: 22px; vertical-align: middle; margin-bottom: 3px; color: #fff; }
.btn-play:before { position: absolute; top: 0; left: 0; bottom: 0; right: 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: 0px 5px 16px 0px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 5px 16px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 5px 16px 0px rgba(0, 0, 0, 0.5); -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; content: ' '; background: rgba(0, 0, 0, 0.5); }
.btn-play:after { position: absolute; top: 50%; left: 50%; -moz-transform: translate3d(-50%, -50%, 0); -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); -webkit-filter: blur(0); filter: blur(0); border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #ffffff; content: ' '; }
.btn-play:hover:before { -moz-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); }
.btn-play.btn-lg { width: 112px; height: 112px; }
.btn-play.btn-lg:after { border-width: 10px 0 10px 18px; }

/* Image */
.bg-image, .bg-parallax, .bg-slideshow {  top: 0; left: 0; width: 100%; height: 130px; background-position: center center; background-size: cover; background-repeat: no-repeat; z-index: 0; }

.bg-multiply { mix-blend-mode: multiply; }

.bg-slideshow .owl-wrapper-outer, .bg-slideshow .owl-wrapper, .bg-slideshow .owl-item { height: 100%; overflow: hidden; }

.bg-image > img { display: none; }

.bg-fixed { background-attachment: fixed; }

/* Video */
.bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.bg-video-placeholder { display: none; }

.bg-image + *, .bg-parallax + *, .bg-video + * { position: relative; }

.background-g1{
    background-image:linear-gradient(to bottom right, #757575, #494949);
    border-radius: 4px;
}
.background-g1:hover{
    background-image:linear-gradient(to bottom right, #424242, #6d6d6d);
}
.background-g2{
    background-image:linear-gradient(to bottom right, #ff7043, #c63f17);
}
.background-g-grey{
    background-image:linear-gradient(to bottom right, #b0bec5, #808e95);
}
.background-g-red{
    background-image:linear-gradient(to bottom right, #ef5350, #b61827);
}

.blink {
    animation: blink-animation 1s steps(2, start) infinite;
    -webkit-animation: blink-animation 1s steps(2, start) infinite;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

/* === Lucide icons (inline SVG) baseline ===
   Helper di core/lucide_helper.php auto-prepend class .lucide-icon ke <svg>.
   Rule baseline ini supaya icon align natural dengan text di context manapun.
   Per-context overrides (size, color) tetap di komponen masing-masing.
   Migration plan: docs/superpowers/plans/lucide-migration-CU-86exhfzzq-icons-refactor.md */
.lucide-icon {
    vertical-align: middle;
    flex-shrink: 0;
}

/* === Komentar Card v2 (spec 00007 redesign) ===
   Full card-based komentar/balasan UI. White card on light gray body bg,
   avatar 56px dengan tier frame ornament overlay, tier pill chip, loyalty
   crown icon, dan outline pill action buttons.

   Helper: _/komentar_tier_badge.php inject markup tier indicators. */

/* Card surface — shadow elevation prominent supaya card pop di body bg
   yang sering kali putih juga (bukan selalu gray). Triple layer:
   - Soft ambient (8px blur, large)
   - Direct shadow (3px blur, edge definition)
   - Hairline ring (alternatif border, definition tanpa heavy line) */
.komentar-card {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10),
                0 2px 6px rgba(15, 23, 42, 0.07),
                0 0 0 1px rgba(15, 23, 42, 0.04);
}
.komentar-card-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.komentar-card-body {
    flex: 1;
    min-width: 0;
}

/* Avatar 64px container — consistent both cases (frame & non-frame).
   Frame fill 64x64 inner ~40-42px → avatar 48px visible mostly.
   Non-frame: avatar 48px dengan 8px breathing space. */
.komentar-card .avatar {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    margin-right: 0;
}
/* Avatar pic 48x48 selalu — proportional smaller dari iterasi sebelumnya.
   Centered absolute supaya posisi sama persis di frame & non-frame case. */
.komentar-card .avatar > .avatar-tier-pic {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    z-index: 1;
}
/* Frame ornate overlay — fill 72x72 container, di atas avatar pic */
.komentar-card .avatar.avatar-tier-frame > .avatar-tier-frame-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
}

/* Header: nama + crown + tier pill (left) | time (right) */
.komentar-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.komentar-card-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}
.komentar-author {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #141515;
    line-height: 1.25;
}
.komentar-time {
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Tier pill chip — shield image (asset asli) + label, color variant per tier.
   Render khusus silver/gold/platinum (bronze excluded di helper level).
   Icon: <img> dari /assets/tier/v2/{code}-low.png ornate shield + crown +
   laurel. Pill bg tinted color khas tier untuk reinforce visual identity. */
.komentar-tier-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 6px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
}
.komentar-tier-pill .komentar-tier-pill-icon {
    /* Tied ke text height supaya pill chip nggak puffy. Shield asset ornate
       (crown+laurel+star) tetap recognizable di small size karena color
       khas tier. width auto supaya aspect ratio asset preserved. */
    max-height: 14px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}
.komentar-tier-pill-label {
    white-space: nowrap;
}

.komentar-tier-pill.tier-pill-silver {
    background: #f1f3f5;
    color: #495057;
    border-color: #dee2e6;
}
.komentar-tier-pill.tier-pill-silver:hover {
    background: #e9ecef;
}
.komentar-tier-pill.tier-pill-gold {
    background: #fff5d6;
    color: #92660a;
    border-color: #f5d97a;
}
.komentar-tier-pill.tier-pill-gold:hover {
    background: #ffeaa0;
}
.komentar-tier-pill.tier-pill-platinum {
    background: #ede9fe;
    color: #5b21b6;
    border-color: #ddd6fe;
}
.komentar-tier-pill.tier-pill-platinum:hover {
    background: #ddd6fe;
}

/* Body text */
.komentar-text {
    font-size: 14px;
    line-height: 1.6;
    color: #374151;
    word-wrap: break-word;
    margin-bottom: 14px;
}
.komentar-text br + br {
    /* paragraph spacing — 2 br consecutive jadi spacing yang jelas */
    line-height: 1.8em;
}

/* Action buttons: outline pill style + text link */
.komentar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.komentar-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #4b5563 !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    cursor: pointer;
}
.komentar-action-pill:hover,
.komentar-action-pill:focus {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #1f2937 !important;
    text-decoration: none;
}
.komentar-action-pill .komentar-action-icon {
    flex-shrink: 0;
}
.komentar-action-pill .komentar-action-icon.is-liked {
    fill: #ef4444;
    stroke: #ef4444;
}
.komentar-action-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 8px;
    color: #6b7280 !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}
.komentar-action-text:hover,
.komentar-action-text:focus {
    color: #1f2937 !important;
    text-decoration: none;
}

/* Balasan wrapper (popup balasan view) — gray bg supaya cards pop */
.komentar-balasan-wrap {
    background: #f3f4f6;
    margin: 16px -20px -20px;
    padding: 16px 20px;
    border-radius: 0 0 12px 12px;
}
.komentar-balasan-empty {
    text-align: center;
    padding: 24px 12px;
    color: #6b7280;
    font-size: 13px;
}

/* Sort toggle — segmented control (Populer | Terbaru) di atas list komentar.
   Mobile: full width supaya tap area generous + visual prominent.
   Desktop (>=768px): max-width 380px supaya nggak melebar berlebihan.

   Style: pill track shape (rounded-full container) dengan 2 pill 50/50.
   Active pill drakor brand red, inactive transparent text only. */

/* === Komentar action sheet (modal "Tulis Komentar") ===
   Redesign: header dgn close + subtitle, reward banner gold, textarea bigger,
   char counter, tip kecil, submit button big CTA dgn icon. */
.komentar-sheet {
    border-radius: 18px 18px 0 0;
    overflow: hidden;
}
/* Override Mobilekit .modal.action-sheet .modal-content .modal-header {display:block}
   pakai specificity setara (3 classes) + class kustom. */
.modal.action-sheet .modal-content .komentar-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.komentar-sheet-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
    text-align: left;
}
/* Override .modal.action-sheet .modal-content .modal-header .modal-title (4 classes).
   Pakai 4 classes juga dgn class kustom untuk menang. */
.modal.action-sheet .modal-content .komentar-sheet-header .komentar-sheet-title {
    margin: 0;
    padding: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: #1f2937;
    text-align: left;
    display: block;
}
.komentar-sheet-subtitle {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.komentar-sheet-close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: none;
    background: rgba(15, 23, 42, 0.06);
    color: #4b5563;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}
.komentar-sheet-close:hover,
.komentar-sheet-close:focus {
    background: rgba(15, 23, 42, 0.10);
    color: #1f2937;
    outline: none;
}
.komentar-sheet-close .lucide-icon {
    display: block;
}
/* Override Mobilekit .modal.action-sheet .modal-content .action-sheet-content
   (default padding 20px 16px + max-height 460px) — kita pakai padding sendiri
   biar bisa kontrol jarak dgn header. */
.komentar-sheet-body {
    padding: 0;
}
.modal.action-sheet .modal-content .komentar-sheet-body .action-sheet-content {
    padding: 14px 18px 18px;
    max-height: none;
    overflow: visible;
}

/* Reward banner inside sheet — gold gradient hint */
.komentar-reward-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    border-radius: 12px;
    margin-bottom: 14px;
    box-shadow: inset 0 0 0 1px rgba(255, 179, 0, 0.30);
}
.komentar-reward-banner-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.komentar-reward-banner-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(255, 152, 0, 0.30));
}
.komentar-reward-banner-text {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: #6d4c00;
}
.komentar-reward-banner-text strong {
    color: #b8860b;
    font-weight: 700;
}

/* Textarea wrapper */
.komentar-textarea-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.komentar-textarea {
    width: 100%;
    min-height: 130px;
    padding: 12px 14px;
    border-radius: 12px !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    background: #fafafa !important;
    font-size: 14px !important;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.komentar-textarea:focus {
    border-color: #f44336 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.12) !important;
    outline: none !important;
}
.komentar-textarea::placeholder {
    color: #9ca3af;
}
.komentar-textarea-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.3;
}
.komentar-textarea-tip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #6b7280;
    flex: 1;
    min-width: 0;
}
.komentar-textarea-tip .lucide-icon {
    color: #9ca3af;
    flex-shrink: 0;
}
.komentar-textarea-counter {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: #9ca3af;
    font-weight: 500;
}
.komentar-textarea-counter.is-warning {
    color: #f57c00;
}
.komentar-textarea-counter.is-full {
    color: #d32f2f;
    font-weight: 700;
}

/* Submit button — big CTA */
.komentar-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #f44336 0%, #e53935 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(244, 67, 54, 0.30),
                0 2px 4px rgba(15, 23, 42, 0.08);
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background 0.15s ease-out;
}
.komentar-submit-btn:hover:not(:disabled),
.komentar-submit-btn:focus:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(244, 67, 54, 0.36),
                0 3px 6px rgba(15, 23, 42, 0.10);
    outline: none;
}
.komentar-submit-btn:active:not(:disabled) {
    transform: translateY(0);
}
.komentar-submit-btn:disabled {
    background: linear-gradient(135deg, #cbd5e0 0%, #a0aec0 100%);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.85;
}
.komentar-submit-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.komentar-submit-icon .lucide-icon {
    color: #fff;
    display: block;
}
.komentar-submit-label {
    flex: 0 1 auto;
}

@media (prefers-reduced-motion: reduce) {
    .komentar-submit-btn {
        transition: none;
    }
    .komentar-submit-btn:hover:not(:disabled),
    .komentar-submit-btn:focus:not(:disabled) {
        transform: none;
    }
}

/* === Komentar tab dengan gift icon ===
   Hint reward sejak level tab biar user notice incentive sebelum buka. */
.komentar-tab-link {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
.komentar-tab-link .komentar-tab-icon {
    display: inline-flex;
    align-items: center;
    color: #f44336;
}
.komentar-tab-link .komentar-tab-icon .lucide-icon {
    display: block;
}

/* === Komentar CTA hero card (vertical layout) ===
   Replace plain outline button — primary CTA dengan reward incentive (poin info)
   + explicit "Klik di sini" button supaya user gak miss bahwa card-nya clickable.
   Whole card tetap clickable (single tap target), trigger #actionSheetKomentar modal. */
.komentar-cta-card,
.ulasan-cta-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #f44336 0%, #e53935 55%, #ff7043 100%);
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(244, 67, 54, 0.28),
                0 2px 6px rgba(15, 23, 42, 0.08);
    color: #fff;
    text-decoration: none;
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
    position: relative;
    overflow: hidden;
}
.komentar-cta-card::before,
.ulasan-cta-card::before {
    /* subtle radial highlight di kanan-atas biar gak flat */
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 70%);
    pointer-events: none;
}
.komentar-cta-card:hover,
.komentar-cta-card:focus,
.komentar-cta-card:active,
.ulasan-cta-card:hover,
.ulasan-cta-card:focus,
.ulasan-cta-card:active {
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(244, 67, 54, 0.34),
                0 3px 8px rgba(15, 23, 42, 0.10);
}
.komentar-cta-card:active,
.ulasan-cta-card:active {
    transform: translateY(0);
}
.komentar-cta-top {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}
.komentar-cta-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.20);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.komentar-cta-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}
.komentar-cta-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.komentar-cta-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    letter-spacing: 0.1px;
}
.komentar-cta-subtitle {
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.94);
}
.komentar-cta-subtitle strong {
    color: #ffe082;
    font-weight: 700;
}

/* Explicit "Klik di sini untuk tulis komentar" button — visual affordance
   biar user gak miss kalau card ini clickable. White-translucent pill style. */
.komentar-cta-button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 12px;
    color: #c62828;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10),
                inset 0 0 0 1px rgba(255, 255, 255, 0.50);
    position: relative;
    z-index: 1;
    animation: komentarCtaPulse 2.4s ease-in-out infinite;
}
.komentar-cta-button-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: #c62828;
}
.komentar-cta-button-icon .lucide-icon {
    display: block;
}
.komentar-cta-button-label {
    flex: 1;
    min-width: 0;
    text-align: left;
}
.komentar-cta-arrow {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f44336 0%, #e53935 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform 0.18s ease-out;
}
.komentar-cta-card:hover .komentar-cta-arrow,
.komentar-cta-card:focus .komentar-cta-arrow,
.ulasan-cta-card:hover .komentar-cta-arrow,
.ulasan-cta-card:focus .komentar-cta-arrow {
    transform: translateX(3px);
}
.komentar-cta-arrow .lucide-icon {
    color: #fff;
    display: block;
}

@keyframes komentarCtaPulse {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10),
                    inset 0 0 0 1px rgba(255, 255, 255, 0.50);
    }
    50% {
        box-shadow: 0 4px 16px rgba(255, 255, 255, 0.45),
                    0 2px 8px rgba(15, 23, 42, 0.12),
                    inset 0 0 0 1px rgba(255, 255, 255, 0.70);
    }
}

/* Reduced motion — disable hover transform + pulse */
@media (prefers-reduced-motion: reduce) {
    .komentar-cta-card,
    .ulasan-cta-card,
    .komentar-cta-arrow {
        transition: none;
    }
    .komentar-cta-card:hover,
    .komentar-cta-card:focus,
    .ulasan-cta-card:hover,
    .ulasan-cta-card:focus {
        transform: none;
    }
    .komentar-cta-card:hover .komentar-cta-arrow,
    .komentar-cta-card:focus .komentar-cta-arrow,
    .ulasan-cta-card:hover .komentar-cta-arrow,
    .ulasan-cta-card:focus .komentar-cta-arrow {
        transform: none;
    }
    .komentar-cta-button {
        animation: none;
    }
}

.komentar-sort-toggle {
    display: flex;
    width: 100%;
    padding: 4px;
    gap: 4px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06),
                0 0 0 1px rgba(15, 23, 42, 0.04);
}
.komentar-sort-pill {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #4b5563;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    min-width: 0; /* prevent flex overflow */
}
.komentar-sort-pill .komentar-sort-icon {
    flex-shrink: 0;
}
.komentar-sort-pill:hover,
.komentar-sort-pill:focus {
    color: #1f2937;
    background: rgba(15, 23, 42, 0.04);
    outline: none;
}
.komentar-sort-pill.is-active {
    background: linear-gradient(180deg, #f56358 0%, #f44336 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(244, 67, 54, 0.30);
}
.komentar-sort-pill.is-active:hover,
.komentar-sort-pill.is-active:focus {
    background: linear-gradient(180deg, #e85549 0%, #d33027 100%);
    color: #fff;
}

/* Desktop: segmented control jangan kepanjangan */
@media (min-width: 768px) {
    .komentar-sort-toggle {
        max-width: 380px;
    }
}

/* Mobile responsive — di bawah 360px header layout adjust */
@media (max-width: 360px) {
    .komentar-card {
        padding: 14px;
    }
    .komentar-card-row {
        gap: 10px;
    }
    .komentar-author {
        font-size: 15px;
    }
    .komentar-sort-pill {
        padding: 9px 10px;
        font-size: 13px;
    }
    .komentar-cta-card {
        padding: 14px;
        gap: 10px;
    }
    .komentar-cta-top {
        gap: 12px;
    }
    .komentar-cta-icon {
        width: 46px;
        height: 46px;
    }
    .komentar-cta-icon img {
        width: 32px;
        height: 32px;
    }
    .komentar-cta-title {
        font-size: 14px;
    }
    .komentar-cta-subtitle {
        font-size: 12px;
    }
    .komentar-cta-button {
        padding: 10px 12px;
        font-size: 12.5px;
        gap: 8px;
    }
    .komentar-cta-arrow {
        width: 24px;
        height: 24px;
    }
}

/* === Modal Balasan (Detail Komentar) ===
   Pakai pattern Mobilekit modalbox: header fixed atas (56px), body scroll,
   footer fixed bawah (.fixed-footer). Customisasi minimal supaya gak fight
   positioning Mobilekit. Master-vs-balasan visual hierarchy via indent +
   connector line. */
.balasan-modalbox .modal-content {
    background: #f3f4f6;
}
/* Header — pakai positioning Mobilekit (fixed atas, 56px), kita cuma
   custom title font + bg. Title left-align supaya rapi dgn close button kanan. */
.modalbox .modal-dialog .modal-content .balasan-sheet-header {
    background: #ffffff;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.modalbox .modal-dialog .modal-content .balasan-sheet-header .balasan-sheet-title {
    margin: 0;
    padding: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: #1f2937;
    text-align: left;
    flex: 1 1 auto;
    min-width: 0;
}
.balasan-sheet-close {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    color: #475569;
    border-radius: 50%;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.balasan-sheet-close:hover,
.balasan-sheet-close:focus {
    background: #f8fafc;
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
    outline: none;
}
/* Body — bg gray supaya cards pop, padding bottom besar untuk clear fixed-footer
   (chip ~28 + gap 8 + pill expand max ~152 + form padding 22 + safe-area = ~210px). */
.modalbox .modal-dialog .modal-content .balasan-sheet-body {
    padding: 16px 14px 220px;
    background: #f3f4f6;
}

/* Master comment card — sedikit prominent (border kiri merah halus + badge pill) */
.komentar-card-root {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-left: 3px solid #ef4444;
    border-radius: 12px;
    padding: 16px 14px 12px;
    margin-bottom: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.komentar-master-badge {
    position: absolute;
    top: -10px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.32);
}
.komentar-master-badge .lucide-icon,
.komentar-master-badge-icon {
    flex: 0 0 auto;
}

/* Balasan section header — count + target user */
.komentar-balasan-section-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 14px 4px 8px;
    margin-left: 28px;
    font-size: 12.5px;
    color: #6b7280;
}
.komentar-balasan-section-count {
    font-weight: 700;
    color: #1f2937;
}
.komentar-balasan-section-target {
    color: #6b7280;
}
.komentar-balasan-section-target::before {
    content: "·";
    margin-right: 4px;
    color: #cbd5e1;
}

/* Override base wrap — di-modal jadi seamless dgn body bg gray. */
.balasan-sheet-body .komentar-balasan-wrap {
    background: transparent;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

/* Balasan card — indent + left connector line */
.komentar-card-balasan {
    position: relative;
    margin-left: 28px;
    margin-top: 8px;
    margin-bottom: 0;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-radius: 10px;
    padding: 12px 14px 10px;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.02);
}
/* Connector vertical line dari root ke setiap balasan */
.komentar-card-balasan::before {
    content: "";
    position: absolute;
    top: -8px;
    left: -16px;
    width: 2px;
    height: calc(100% + 8px);
    background: linear-gradient(to bottom, #e5e7eb 0%, #f1f5f9 100%);
    border-radius: 1px;
}
/* Tee/elbow connector di balasan pertama supaya nyambung ke root */
.komentar-balasan-section-header + .komentar-card-balasan::before {
    top: -14px;
    height: calc(100% + 14px);
}
/* Horizontal connector dari vertical line ke avatar tiap balasan */
.komentar-card-balasan::after {
    content: "";
    position: absolute;
    top: 22px;
    left: -16px;
    width: 14px;
    height: 2px;
    background: #e5e7eb;
    border-bottom-left-radius: 8px;
}

/* "Membalas @user" badge di tiap balasan */
.komentar-reply-to {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    background: rgba(239, 68, 68, 0.06);
    padding: 3px 8px 3px 6px;
    border-radius: 999px;
    margin-bottom: 8px;
}
.komentar-reply-to strong {
    color: #ef4444;
    font-weight: 700;
}
.komentar-reply-to-icon {
    color: #94a3b8;
}

/* Empty state balasan */
.balasan-sheet-body .komentar-balasan-empty {
    margin-top: 16px;
    background: #ffffff;
    border: 1px dashed rgba(15, 23, 42, 0.12);
    border-radius: 10px;
}

/* === Footer reply (Mobilekit fixed-footer di-customize): reward chip + pill input + send icon ===
   Override .fixed-footer: hilangkan center-justify + min-height, ganti jadi
   block layout supaya chip + pill bisa stack vertical. */
.balasan-modalbox .modal-footer.fixed-footer.balasan-reply-footer {
    padding: 0;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    display: block;
    min-height: 0;
    box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.04);
}
.balasan-reply-form {
    width: 100%;
    margin: 0;
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.balasan-reward-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 4px 10px 4px 4px;
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 999px;
    font-size: 11.5px;
    color: #78350f;
    line-height: 1.3;
}
.balasan-reward-chip strong {
    color: #b45309;
    font-weight: 700;
}
.balasan-reward-chip-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 50%;
    flex: 0 0 auto;
}
.balasan-reward-chip-icon img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.balasan-reply-pill {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 6px 6px 6px 14px;
    transition: border-color 160ms ease, background 160ms ease;
}
.balasan-reply-pill:focus-within {
    background: #ffffff;
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
}
.balasan-reply-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    box-shadow: none;
    resize: none;
    font-size: 14px;
    line-height: 1.4;
    color: #1f2937;
    padding: 6px 0;
    min-height: 24px;
    /* JS auto-resize sampai BALASAN_MAX_HEIGHT (140px). max-height di sini
       sebagai backstop kalau JS gagal load. */
    max-height: 140px;
    overflow-y: auto;
    font-family: inherit;
}
.balasan-reply-input::placeholder {
    color: #94a3b8;
}
.balasan-reply-send {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.32);
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
.balasan-reply-send:hover:not(:disabled),
.balasan-reply-send:focus:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4);
    outline: none;
}
.balasan-reply-send:disabled {
    background: #cbd5e1;
    color: #ffffff;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.85;
}
.balasan-reply-send.is-loading {
    pointer-events: none;
    opacity: 0.7;
}
.balasan-reply-send.is-loading .balasan-reply-send-icon {
    animation: balasan-send-pulse 0.9s ease-in-out infinite;
}
.balasan-reply-send-icon {
    display: inline-flex;
    transform: translateX(1px);
}

@keyframes balasan-send-pulse {
    0%, 100% { transform: translateX(1px) scale(1); opacity: 1; }
    50%      { transform: translateX(1px) scale(0.85); opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
    .balasan-reply-send,
    .balasan-reply-send.is-loading .balasan-reply-send-icon {
        transition: none;
        animation: none;
    }
    .balasan-reply-send:hover:not(:disabled) {
        transform: none;
    }
}

/* Mobile small (<360px): tighten chip + hide arrow icon visual */
@media (max-width: 360px) {
    .balasan-reward-chip {
        font-size: 11px;
    }
    .komentar-card-balasan {
        margin-left: 22px;
    }
    .komentar-card-balasan::before,
    .komentar-card-balasan::after {
        left: -12px;
    }
    .komentar-card-balasan::after {
        width: 10px;
    }
    .komentar-balasan-section-header {
        margin-left: 22px;
    }
}

/* === Favorite FAB (heart overlay di poster movie) ===
   Pengganti tombol "Tandai Favorit" full-width yang dulu jadi block sendiri.
   Posisi absolute di pojok kanan-atas poster, bulat 44px, prominent tapi
   gak makan vertical space. State via class:
     idle (no class) : outline merah, bg putih
     .is-faved       : solid gradient merah + heartbeat animation
     .is-loading     : spinner berputar, pointer-events disabled
*/
.poster-fav-wrap {
    display: inline-block;
    margin-top: -80px;
    line-height: 0;
}
.poster-img {
    width: 130px;
    height: auto;
    border-radius: 4px;
    display: block;
}
/* Anchor card untuk FAB pojok kanan atas */
.fav-card-anchor {
    position: relative;
    overflow: visible;
}
.fav-fab {
    position: absolute;
    top: -22px;
    right: 14px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #ef4444;
    color: #ef4444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.28), 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
}
.fav-fab:hover,
.fav-fab:focus {
    outline: none;
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.36), 0 2px 4px rgba(0, 0, 0, 0.1);
}
.fav-fab:active {
    transform: scale(0.94);
}
.fav-fab .fav-fab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.fav-fab .fav-fab-icon .lucide-icon {
    transition: fill 180ms ease;
}

/* Faved state: filled merah + heartbeat */
.fav-fab.is-faved {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: #dc2626;
    color: #ffffff;
    animation: fav-heartbeat 1.6s ease-in-out infinite;
}
.fav-fab.is-faved .fav-fab-icon .lucide-icon {
    fill: currentColor;
}
.fav-fab.is-faved:hover,
.fav-fab.is-faved:focus {
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.5), 0 2px 4px rgba(0, 0, 0, 0.12);
}

/* Loading state: spinner di atas, icon redup */
.fav-fab.is-loading {
    pointer-events: none;
    cursor: wait;
}
.fav-fab.is-loading .fav-fab-icon {
    opacity: 0.25;
}
.fav-fab .fav-fab-spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 2px solid rgba(239, 68, 68, 0.25);
    border-top-color: #ef4444;
    border-radius: 50%;
    animation: fav-spin 0.7s linear infinite;
}
.fav-fab.is-loading .fav-fab-spinner {
    display: block;
}
.fav-fab.is-loading.is-faved .fav-fab-spinner {
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
}

@keyframes fav-heartbeat {
    0%, 100%   { transform: scale(1); }
    14%        { transform: scale(1.12); }
    28%        { transform: scale(1); }
    42%        { transform: scale(1.08); }
    70%        { transform: scale(1); }
}

@keyframes fav-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .fav-fab,
    .fav-fab.is-faved {
        animation: none;
        transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    }
    .fav-fab:hover,
    .fav-fab:focus,
    .fav-fab:active {
        transform: none;
    }
    .fav-fab .fav-fab-spinner {
        animation-duration: 1.4s;
    }
}

/* Mobile small (<360px): heart sedikit di-tarik ke dalam supaya gak ke-cut */
@media (max-width: 360px) {
    .fav-fab {
        right: 8px;
        width: 40px;
        height: 40px;
    }
}

/* ============================================
   Artist Detail Page (CU-86exhw7va)
   ============================================ */

/* Hero — cover backdrop + avatar overlap */
.artist-hero {
    position: relative;
    margin: 0 -15px 0;
    background: #fff;
}
.artist-hero-cover {
    width: 100%;
    aspect-ratio: 16 / 7;
    max-height: 220px;
    background: linear-gradient(135deg, #c62828 0%, #e53935 55%, #ff7043 100%) center/cover no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}
.artist-hero-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
}
.artist-hero-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0 16px 14px;
    position: relative;
    z-index: 1;
    background: #fff;
}
.artist-hero-avatar-wrap {
    width: 86px;
    height: 86px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    padding: 3px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
    border: 3px solid #fff;
    margin-top: -22px;
    position: relative;
    z-index: 2;
}
.artist-hero-avatar-wrap img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.artist-hero-info {
    flex: 1;
    min-width: 0;
    padding-top: 8px;
    display: flex;
    align-items: center;
    gap: 0;
}
.artist-hero-info-text {
    flex: 1;
    min-width: 0;
}
.artist-hero-info-action {
    flex-shrink: 0;
    padding-left: 12px;
    margin-left: 12px;
    border-left: 1px solid #e5e7eb;
    align-self: stretch;
    display: flex;
    align-items: center;
}
.artist-hero-name {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 3px;
    color: #1f2937;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.artist-hero-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: #6b7280;
    margin-bottom: 0;
}
.artist-hero-rating .lucide-icon {
    color: #f9b115;
    fill: currentColor;
}
.artist-hero-rating-empty {
    color: #9ca3af;
}
.artist-hero-rating-empty .lucide-icon {
    color: #9ca3af;
    fill: none;
}
.artist-hero-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12.5px;
    transition: all 0.18s ease-out;
    border: none;
    cursor: pointer;
}
.artist-hero-follow-btn .lucide-icon {
    width: 14px;
    height: 14px;
}
.artist-hero-follow-btn.is-not-following {
    background: linear-gradient(135deg, #c62828, #e53935);
    color: #fff;
    box-shadow: 0 4px 12px rgba(198, 40, 40, 0.28);
}
.artist-hero-follow-btn.is-following {
    background: #fff;
    color: #16a34a;
    border: 1.5px solid #16a34a;
}
.artist-hero-follow-btn:hover {
    transform: translateY(-1px);
}
.artist-hero-follow-btn.is-loading {
    pointer-events: none;
    opacity: 0.85;
    cursor: wait;
}
.artist-hero-follow-btn .btn-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: artistFollowSpin 0.7s linear infinite;
    vertical-align: middle;
}
@keyframes artistFollowSpin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .artist-hero-follow-btn,
    .artist-hero-follow-btn:hover {
        transform: none;
        transition: none;
    }
    .artist-hero-follow-btn .btn-spinner {
        animation: none;
        border-top-color: currentColor;
        opacity: 0.5;
    }
}

/* Stats card — 3 col with Lucide icons */
.artist-stats-card {
    background: #fff;
    border-radius: 16px;
    padding: 14px 8px;
    margin: 12px 0;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
    display: flex;
    align-items: stretch;
}
.artist-stats-item {
    flex: 1;
    text-align: center;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.artist-stats-item + .artist-stats-item {
    border-left: 1px solid rgba(15, 23, 42, 0.06);
}
.artist-stats-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #fff5f5;
    color: #c62828;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.artist-stats-icon .lucide-icon {
    width: 18px;
    height: 18px;
}
.artist-stats-number {
    font-size: 17px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.1;
}
.artist-stats-label {
    font-size: 11.5px;
    color: #6b7280;
    margin-top: 2px;
}

/* Biodata wrapper card */
.artist-bio-card {
    background: #fff;
    border-radius: 14px;
    padding: 16px 18px;
    margin: 6px 0 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    line-height: 1.65;
    color: #2d3436;
    font-size: 14px;
}
.artist-bio-card p { margin-bottom: 10px; }
.artist-bio-card p:last-child { margin-bottom: 0; }

/* Film grid */
.artist-film-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 6px 2px;
}
@media (min-width: 576px) {
    .artist-film-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 768px) {
    .artist-film-grid { grid-template-columns: repeat(6, 1fr); }
}
.artist-film-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    transition: transform 0.18s ease-out;
    text-decoration: none;
    color: inherit;
    display: block;
}
.artist-film-card:hover {
    color: inherit;
    text-decoration: none;
}
@media (hover: hover) {
    .artist-film-card:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
    .artist-film-card,
    .artist-film-card:hover { transform: none; transition: none; }
}
.artist-film-poster {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    display: block;
    background: #f3f4f6;
}
.artist-film-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    min-height: 32px;
    padding: 6px 8px 8px;
    color: #1f2937;
}
.artist-film-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 32px 16px;
    color: #6b7280;
    font-size: 13.5px;
}
.artist-film-empty .lucide-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
    color: #cbd5e1;
}

/* Ulasan rating stars (per review item) */
.ulasan-rating-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 4px 0 6px;
    color: #f9b115;
}
.ulasan-rating-stars .lucide-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
    stroke: currentColor;
}
.ulasan-rating-stars .star-empty {
    color: #d1d5db;
    fill: none;
}

/* VIP badge inline next to nama */
.ulasan-vip-badge {
    display: inline-flex;
    align-items: center;
    color: #f9b115;
    margin-left: 4px;
    vertical-align: middle;
}
.ulasan-vip-badge .lucide-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}
.komentar-card-header-left .ulasan-vip-badge {
    flex-shrink: 0;
    margin-left: 2px;
}

/* Empty state Tab Ulasan */
.ulasan-empty-state {
    text-align: center;
    padding: 28px 16px;
    color: #6b7280;
    font-size: 13.5px;
}
.ulasan-empty-state .lucide-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 8px;
    color: #cbd5e1;
}

/* ===== Desktop & Tablet responsive layout =====
   Mobile-first: no effect below 768px (mobile unchanged).
   Tablet (768-1023): wrapper longgar 880px, hilangkan phone-frame shadow.
   Desktop (>=1024): header full-width, container 1280px, bottom menu hidden,
   row carousel menampilkan lebih banyak poster (gaya streaming app modern). */

/* ----- Shared: tablet + desktop ----- */
@media (min-width: 768px) {
    body {
        background: #f8f9fb;
        min-height: 100vh;
    }

    .appHeader::before {
        display: none;
    }

    /* sliderUtama: 1 slide aktif menonjol + peek prev/next dengan jarak kecil.
       Active scale(1) + brightness 100% + drop shadow → menonjol dibanding
       peek yang scale(0.88) + brightness 50% (inline) + opacity 0.55. */
    #sliderUtama.owl-carousel .owl-stage-outer {
        padding: 8px 0 22px;
    }
    #sliderUtama.owl-carousel .owl-item .item {
        transition: transform 0.4s ease,
                    opacity 0.4s ease,
                    -webkit-filter 0.4s ease,
                    filter 0.4s ease,
                    box-shadow 0.4s ease;
        transform: scale(0.88);
        opacity: 0.55;
        border-radius: 14px;
        overflow: hidden;
    }
    #sliderUtama.owl-carousel .owl-item.active .item {
        transform: scale(1);
        opacity: 1;
        -webkit-filter: brightness(100%) !important;
        filter: brightness(100%) !important;
        box-shadow: 0 14px 32px rgba(15, 23, 42, 0.28),
                    0 4px 10px rgba(15, 23, 42, 0.14);
    }
    #sliderUtama.owl-carousel .owl-item .item img {
        display: block;
        width: 100%;
    }

    /* Custom prev/next arrows for sliderUtama */
    #sliderUtama.owl-carousel .owl-nav {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        pointer-events: none;
        margin: 0;
    }
    #sliderUtama.owl-carousel .owl-nav button.owl-prev,
    #sliderUtama.owl-carousel .owl-nav button.owl-next {
        pointer-events: auto;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.95);
        color: #1f2937;
        border: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22),
                    0 1px 3px rgba(15, 23, 42, 0.10);
        transition: transform 0.2s ease, background 0.2s ease;
        opacity: 1;
    }
    #sliderUtama.owl-carousel .owl-nav button.owl-prev { left: 6px; }
    #sliderUtama.owl-carousel .owl-nav button.owl-next { right: 6px; }
    #sliderUtama.owl-carousel .owl-nav button.owl-prev:hover,
    #sliderUtama.owl-carousel .owl-nav button.owl-next:hover {
        background: #fff;
        transform: translateY(-50%) scale(1.06);
    }
    #sliderUtama.owl-carousel .owl-nav button.owl-prev:active,
    #sliderUtama.owl-carousel .owl-nav button.owl-next:active {
        transform: translateY(-50%) scale(0.95);
    }
    #sliderUtama.owl-carousel .owl-nav button.disabled {
        opacity: 0.4;
        pointer-events: none;
    }
    #sliderUtama.owl-carousel .owl-nav button svg {
        display: block;
        width: 16px;
        height: 16px;
    }

    /* Prev/next nav arrows for movie-list carousels.
       Exclude sliderUtama which has its own nav styling. */
    #appCapsule .owl-carousel:not(#sliderUtama) .owl-nav {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        pointer-events: none;
        margin: 0;
    }
    #appCapsule .owl-carousel:not(#sliderUtama) .owl-nav button.owl-prev,
    #appCapsule .owl-carousel:not(#sliderUtama) .owl-nav button.owl-next {
        pointer-events: auto;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.95);
        color: #1f2937;
        border: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22),
                    0 1px 3px rgba(15, 23, 42, 0.10);
        transition: transform 0.2s ease, background 0.2s ease;
        cursor: pointer;
        z-index: 10;
    }
    #appCapsule .owl-carousel:not(#sliderUtama) .owl-nav button.owl-prev { left: 2px; }
    #appCapsule .owl-carousel:not(#sliderUtama) .owl-nav button.owl-next { right: 2px; }
    #appCapsule .owl-carousel:not(#sliderUtama) .owl-nav button.owl-prev:hover,
    #appCapsule .owl-carousel:not(#sliderUtama) .owl-nav button.owl-next:hover {
        background: #fff;
        transform: translateY(-50%) scale(1.06);
    }
    #appCapsule .owl-carousel:not(#sliderUtama) .owl-nav button.owl-prev:active,
    #appCapsule .owl-carousel:not(#sliderUtama) .owl-nav button.owl-next:active {
        transform: translateY(-50%) scale(0.95);
    }
    #appCapsule .owl-carousel:not(#sliderUtama) .owl-nav button.disabled {
        opacity: 0.3;
        pointer-events: none;
    }
    #appCapsule .owl-carousel:not(#sliderUtama) .owl-nav button svg {
        display: block;
        width: 14px;
        height: 14px;
    }
}

/* ----- Tablet only: 768-1023px ----- */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .appHeader {
        max-width: 880px;
        margin-left: auto;
        margin-right: auto;
        box-shadow: none;
    }

    #appCapsule {
        max-width: 880px;
        margin-left: auto;
        margin-right: auto;
        background: #fff;
        min-height: 100vh;
        box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04),
                    0 8px 24px rgba(15, 23, 42, 0.06);
    }
    body.dark-mode-active #appCapsule {
        background: #0c1624;
        box-shadow: none;
    }

    .appBottomMenu {
        max-width: 880px;
        margin-left: auto;
        margin-right: auto;
        box-shadow: none;
    }

    /* Grid film: 5 kolom di tablet (wrapper 880px) */
    #appCapsule .col-md-2,
    #appCapsule .col-lg-2 {
        flex: 0 0 20%;
        max-width: 20%;
    }

    /* Fixed-position components dicap selebar wrapper tablet */
    .notification-box {
        max-width: 880px;
        margin-left: auto;
        margin-right: auto;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
    }

    .toast-box.toast-top,
    .toast-box.toast-bottom {
        max-width: 880px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    }

    /* Modal action-sheet & modalbox tetap di-cap 600px (form readability),
       sekedar centered di tablet. */
    .modal.action-sheet .modal-dialog,
    .modalbox .modal-dialog {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 600px;
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
    }
    .modal.action-sheet .modal-content {
        border-radius: 14px 14px 0 0;
        overflow: hidden;
    }
    .modalbox .modal-dialog .modal-content .modal-header {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
    }
    .modalbox .modal-footer.fixed-footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
    }
    body .poin-detail-sheet {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ----- Desktop: >=1024px ----- */
@media (min-width: 1024px) {
    :root {
        --sidebar-width: 300px;
        --sidebar-width-collapsed: 60px;
    }

    /* Header full-width; zona kiri = lebar sidebar (logo), nav mulai sejajar konten */
    .appHeader {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 24px;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
        z-index: 101;
        justify-content: flex-start;
    }

    /* Content container — margin-left diatur via sidebar block di bawah */
    #appCapsule {
        max-width: none;
        margin-right: 0;
        background: #fff;
        min-height: 100vh;
    }

    /* Bottom menu di-hide di desktop — navigasi pindah ke top header */
    .appBottomMenu {
        display: none !important;
    }

    /* sliderUtama: stagePadding lebih besar untuk peek lebih luas di desktop wide */
    #sliderUtama.owl-carousel .owl-stage-outer {
        padding: 12px 0 26px;
    }

    /* Grid film: 6 kolom di desktop biasa */
    #appCapsule .col-md-2,
    #appCapsule .col-lg-2 {
        flex: 0 0 16.6666%;
        max-width: 16.6666%;
    }

    /* Fixed-position components dicap selebar container desktop */
    .notification-box {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
    }

    /* Toast tetap proporsional di desktop — jangan terlalu lebar supaya tetap
       terbaca dengan cepat. Cap di 720px. */
    .toast-box.toast-top,
    .toast-box.toast-bottom {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    }

    /* Modal/sheet tetap di-cap 600px di desktop biar form tidak kepanjangan. */
    .modal.action-sheet .modal-dialog,
    .modalbox .modal-dialog {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 600px;
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
    }
    .modal.action-sheet .modal-content {
        border-radius: 14px 14px 0 0;
        overflow: hidden;
    }
    .modalbox .modal-dialog .modal-content .modal-header {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
    }
    .modalbox .modal-footer.fixed-footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
    }
    body .poin-detail-sheet {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Body content tidak perlu padding bottom karena bottom menu di-hide */
    #appCapsule {
        padding-bottom: 24px;
    }
}

/* ----- Wide desktop: >=1440px — naikkan grid jadi 7 kolom ----- */
@media (min-width: 1440px) {
    #appCapsule {
        max-width: 1440px;
    }
    #appCapsule .col-md-2,
    #appCapsule .col-lg-2 {
        flex: 0 0 14.2857%;
        max-width: 14.2857%;
    }
    .notification-box {
        max-width: 1440px;
    }
}

/* Hide nav arrows on mobile. */
@media (max-width: 767.98px) {
    #sliderUtama.owl-carousel .owl-nav,
    #appCapsule .owl-carousel:not(#sliderUtama) .owl-nav {
        display: none;
    }
}

/* ===== Desktop header elements: default hidden =====
   Semua elemen desktop-only di-hide default (mobile & tablet).
   Tampil hanya di >=1024px lewat blok @media di bawah. */
.appHeader-desktop-nav,
.desktop-logo,
.desktop-search-bar,
.desktop-premium-btn,
.desktop-avatar,
.desktop-login-btn,
.desktop-only,
.hdr-sidebar-icon--expanded,
.hdr-sidebar-icon--collapsed {
    display: none;
}

/* Halaman detail (view/watch/download): tombol back di mobile, bukan menu sidebar */
.header-detail-goback {
    display: none;
}
@media (max-width: 1023.98px) {
    .header-detail-back .header-sidebar-toggle {
        display: none !important;
    }
    .header-detail-back .header-detail-goback {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ===== Desktop header redesign (>=1024px) =====
   Override header jadi background putih, logo berwarna, nav items gelap,
   search bar inline, Premium CTA, avatar user. Mobile tetap merah. */
@media (min-width: 1024px) {

    /* --- Override bg-primary + inline color putih --- */
    .appHeader.bg-primary {
        background: #fff !important;
        color: #333 !important;
        border-bottom: 1px solid #e5e7eb;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    /* Hamburger & icon warna gelap di desktop */
    .appHeader .left .headerButton,
    .appHeader .right .headerButton {
        color: #555 !important;
    }
    .appHeader .left .headerButton .lucide-icon,
    .appHeader .right .headerButton .lucide-icon {
        color: #555 !important;
    }

    /* Hide logo putih mobile (.pageTitle), show logo berwarna desktop */
    .appHeader .pageTitle {
        display: none;
    }
    .desktop-logo {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-left: 4px;
        text-decoration: none;
    }
    .desktop-logo-text {
        font-size: 16px;
        font-weight: 700;
        color: #f44336;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }

    /* Desktop sidebar toggle: panel icons (bukan menu 3 garis) */
    .header-sidebar-toggle .hdr-sidebar-icon--mobile {
        display: none;
    }
    .header-sidebar-toggle .hdr-sidebar-icon--collapsed {
        display: none;
    }
    body.sidebar-collapsed .header-sidebar-toggle .hdr-sidebar-icon--expanded {
        display: none;
    }
    body.sidebar-collapsed .header-sidebar-toggle .hdr-sidebar-icon--collapsed {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .header-sidebar-toggle .hdr-sidebar-icon--expanded {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .header-sidebar-toggle .lucide-icon {
        color: #555 !important;
    }

    /* Hide mobile search toggle, show desktop elements */
    .appHeader .mobile-only {
        display: none !important;
    }

    /* --- .left & .right: override dari position:absolute ke flex --- */
    .appHeader .left,
    .appHeader .right {
        position: static;
        top: auto;
        left: auto;
        right: auto;
    }
    .appHeader .left {
        display: flex;
        align-items: center;
        gap: 2px;
        flex: 0 0 var(--sidebar-width);
        width: var(--sidebar-width);
        max-width: var(--sidebar-width);
        padding-left: 12px;
        box-sizing: border-box;
    }
    .appHeader .right {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 0 0 auto;
        margin-left: auto;
    }

    body.sidebar-collapsed .appHeader .left {
        flex: 0 0 var(--sidebar-width-collapsed);
        width: var(--sidebar-width-collapsed);
        max-width: var(--sidebar-width-collapsed);
        padding-left: 8px;
    }

    /* --- Desktop top nav — start sejajar tepi kanan sidebar / awal #appCapsule --- */
    .appHeader-desktop-nav {
        display: flex;
        align-items: center;
        gap: 4px;
        margin: 0;
        flex: 0 1 auto;
        justify-content: flex-start;
        min-width: 0;
    }
    .appHeader-desktop-nav a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 16px;
        color: #555;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        border-radius: 999px;
        border: 1.5px solid transparent;
        transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
        white-space: nowrap;
    }
    .appHeader-desktop-nav a:hover {
        color: #333;
        background: #f3f4f6;
        text-decoration: none;
    }
    /* Active state: pill dengan border primary (merah) + teks primary */
    .appHeader-desktop-nav a.active {
        color: #f44336;
        border-color: #f44336;
        font-weight: 600;
        background: transparent;
    }

    /* --- Desktop search bar inline --- */
    .desktop-search-bar {
        display: flex;
        align-items: center;
    }
    .desktop-search-bar form {
        display: flex;
        align-items: center;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        border-radius: 999px;
        padding: 0 12px;
        height: 36px;
        gap: 8px;
        width: 240px;
        transition: border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .desktop-search-bar form:focus-within {
        border-color: #f44336;
        box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.10);
    }
    .desktop-search-bar .dsk-search-icon {
        color: #9ca3af;
        flex-shrink: 0;
    }
    .desktop-search-bar input {
        border: none;
        background: transparent;
        outline: none;
        font-size: 13px;
        color: #333;
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
        height: 100%;
    }
    .desktop-search-bar input::placeholder {
        color: #9ca3af;
    }
    .dsk-search-kbd {
        display: inline-flex;
        align-items: center;
        background: #e5e7eb;
        color: #888;
        font-size: 11px;
        font-family: inherit;
        padding: 2px 6px;
        border-radius: 4px;
        border: none;
        flex-shrink: 0;
        line-height: 1;
        white-space: nowrap;
    }

    /* --- Desktop Premium CTA button (gold) --- */
    .desktop-premium-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 16px;
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        border-radius: 999px;
        text-decoration: none;
        white-space: nowrap;
        transition: filter 0.18s ease, transform 0.1s ease;
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.30);
    }
    .desktop-premium-btn:hover {
        filter: brightness(1.08);
        color: #fff;
        text-decoration: none;
    }
    .desktop-premium-btn:active {
        transform: scale(0.97);
    }
    .desktop-premium-btn .lucide-icon {
        color: #fff;
    }

    /* --- Desktop avatar --- */
    .desktop-avatar {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        text-decoration: none;
        color: #555;
        padding: 2px;
        border-radius: 999px;
        transition: background 0.18s ease;
    }
    .desktop-avatar:hover {
        background: #f3f4f6;
        text-decoration: none;
        color: #333;
    }
    .desktop-avatar img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #e5e7eb;
    }
    .desktop-avatar .lucide-icon {
        color: #9ca3af;
    }

    /* --- Desktop login button (belum login) --- */
    .desktop-login-btn {
        display: inline-flex;
        align-items: center;
        padding: 6px 18px;
        background: #f44336;
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        border-radius: 999px;
        text-decoration: none;
        white-space: nowrap;
        transition: filter 0.18s ease;
    }
    .desktop-login-btn:hover {
        filter: brightness(1.08);
        color: #fff;
        text-decoration: none;
    }

    /* --- Dark mode: desktop navbar (menang override bg putih di atas) --- */
    body.dark-mode-active .appHeader.bg-primary {
        background: #0F1C2F !important;
        color: #FFFFFF !important;
        border-bottom-color: #1B283B !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
    }
    body.dark-mode-active .appHeader .left .headerButton,
    body.dark-mode-active .appHeader .right .headerButton {
        color: #FFFFFF !important;
    }
    body.dark-mode-active .appHeader .left .headerButton .lucide-icon,
    body.dark-mode-active .appHeader .right .headerButton .lucide-icon,
    body.dark-mode-active .header-sidebar-toggle .lucide-icon,
    body.dark-mode-active #headerSidebarToggle {
        color: #e2e8f0 !important;
    }
    body.dark-mode-active .appHeader-desktop-nav a {
        color: #8195a6;
    }
    body.dark-mode-active .appHeader-desktop-nav a:hover {
        color: #FFFFFF;
        background: #1B283B;
    }
    body.dark-mode-active .appHeader-desktop-nav a.active {
        color: #f44336;
        border-color: #f44336;
    }
    body.dark-mode-active .desktop-search-bar form {
        background: #1B283B;
        border-color: #2a3d56;
    }
    body.dark-mode-active .desktop-search-bar .dsk-search-icon {
        color: #8195a6;
    }
    body.dark-mode-active .desktop-search-bar input {
        color: #FFFFFF;
    }
    body.dark-mode-active .desktop-search-bar input::placeholder {
        color: #6b7c8f;
    }
    body.dark-mode-active .dsk-search-kbd {
        background: #2a3d56;
        color: #8195a6;
    }
    body.dark-mode-active .desktop-avatar {
        color: #e2e8f0;
    }
    body.dark-mode-active .desktop-avatar:hover {
        background: #1B283B;
        color: #FFFFFF;
    }
    body.dark-mode-active .desktop-avatar img {
        border-color: #2a3d56;
    }
    body.dark-mode-active .desktop-avatar .lucide-icon {
        color: #8195a6;
    }

    body.dark-mode-active #appCapsule {
        background: #0c1624;
        box-shadow: none;
    }
}

/* ===== sliderUtama: multi-active layout di tablet & desktop =====
   Mobile (<768px): tetap "1 active + peek prev/next dimmed" (config existing).
   Tablet+ (>=768px): tampilkan 2-3 banner sekaligus, SEMUA brightness 100%
   (no peek dimming), supaya banner tidak menjulang vertikal sendirian.
   Items count diatur dari owl responsive di index.php (getSliderUtama). */
@media (min-width: 768px) {
    /* Reset peek-state dimming: semua slide tampil full di tablet+ */
    #sliderUtama.owl-carousel .owl-item .item,
    #sliderUtama.owl-carousel .owl-item.active .item {
        transform: scale(1);
        opacity: 1;
        -webkit-filter: brightness(100%) !important;
        filter: brightness(100%) !important;
    }

    /* Override inline brightness:50% dari index_slider.php (semua slide ON) */
    #sliderUtama.owl-carousel .owl-item .item[style*="brightness(50%)"] {
        -webkit-filter: brightness(100%) !important;
        filter: brightness(100%) !important;
    }

    /* Shadow konsisten di semua slide (bukan hanya active) */
    #sliderUtama.owl-carousel .owl-item .item {
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18),
                    0 2px 6px rgba(15, 23, 42, 0.08);
    }
    #sliderUtama.owl-carousel .owl-item.active .item {
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18),
                    0 2px 6px rgba(15, 23, 42, 0.08);
    }

    /* Stage outer padding tetap tipis (no peek strip yang besar) */
    #sliderUtama.owl-carousel .owl-stage-outer {
        padding: 10px 0 20px;
    }
}


/* =================================================================
   SIDEBAR REDESIGN — Persistent Desktop + Overlay Mobile
   ================================================================= */

/* ----- Base: Desktop sidebar hidden di mobile (<1024px) ----- */
.app-sidebar {
    display: none;
}

/* ----- Mobile (<1024px): modal sidebar tetap berlaku, desktop aside hidden ----- */
@media (max-width: 1023.98px) {
    .app-sidebar {
        display: none !important;
    }
}

/* ----- Desktop (>=1024px): persistent sidebar, modal hidden ----- */
@media (min-width: 1024px) {
    :root {
        --sidebar-width: 300px;
        --sidebar-width-collapsed: 60px;
    }

    /* Hide Bootstrap modal sidebar di desktop */
    .panelbox-left#sidebarPanel,
    #sidebarPanel.panelbox {
        display: none !important;
    }

    /* ---- Persistent sidebar ---- */
    .app-sidebar {
        display: block;
        position: fixed;
        left: 0;
        top: 56px;
        bottom: 0;
        width: var(--sidebar-width);
        background: #fff;
        border-right: 1px solid #e5e7eb;
        z-index: 100;
        overflow: hidden;
        transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .app-sidebar-inner {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* ---- Sidebar Logo ---- */
    .sidebar-logo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        padding: 0 16px;
        border-bottom: 1px solid #f3f4f6;
        flex-shrink: 0;
    }
    .sidebar-logo-link {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        overflow: hidden;
    }
    .sidebar-logo-img {
        height: 28px;
        width: auto;
        flex-shrink: 0;
    }
    .sidebar-logo-text {
        font-size: 16px;
        font-weight: 700;
        color: #f44336;
        letter-spacing: 0.5px;
        white-space: nowrap;
        transition: opacity 0.2s ease, width 0.2s ease;
    }
    .sidebar-collapse-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        color: #9ca3af;
        border-radius: 8px;
        cursor: pointer;
        flex-shrink: 0;
        transition: background 0.18s ease, color 0.18s ease;
    }
    .sidebar-collapse-btn:hover {
        background: #f3f4f6;
        color: #555;
    }

    /* ---- Sidebar profile tier card (logged in) ---- */
    .sidebar-poin-card {
        --tier-accent: #D4A574;
        --tier-accent-strong: #B8865B;
        --tier-bg-1: #2a1a0f;
        --tier-bg-2: #0d0807;
        --tier-glow: rgba(212, 165, 116, 0.18);

        display: block;
        margin: 10px 12px;
        padding: 0;
        background:
            radial-gradient(circle at 92% 8%, var(--tier-glow) 0%, transparent 48%),
            radial-gradient(circle at 8% 92%, rgba(255,255,255,0.04) 0%, transparent 42%),
            linear-gradient(145deg, var(--tier-bg-1) 0%, var(--tier-bg-2) 100%);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 16px;
        color: #fff;
        text-decoration: none;
        box-shadow: 0 6px 18px rgba(0,0,0,0.28);
        overflow: hidden;
        flex-shrink: 0;
        transition: filter 0.15s ease, transform 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .sidebar-poin-card:hover {
        color: #fff;
        text-decoration: none;
        filter: brightness(1.06);
    }
    .sidebar-poin-card:active {
        transform: scale(0.995);
        filter: brightness(0.94);
    }
    .sidebar-poin-card.tier-bronze {
        --tier-accent: #D4A574;
        --tier-accent-strong: #B8865B;
        --tier-bg-1: #2a1a0f;
        --tier-bg-2: #0d0807;
        --tier-glow: rgba(212, 165, 116, 0.20);
    }
    .sidebar-poin-card.tier-silver {
        --tier-accent: #D9DDE2;
        --tier-accent-strong: #A8AEB6;
        --tier-bg-1: #1a1d22;
        --tier-bg-2: #0a0c0f;
        --tier-glow: rgba(217, 221, 226, 0.16);
    }
    .sidebar-poin-card.tier-gold {
        --tier-accent: #FFD66B;
        --tier-accent-strong: #D9A02E;
        --tier-bg-1: #2a1f08;
        --tier-bg-2: #0e0a04;
        --tier-glow: rgba(255, 214, 107, 0.22);
    }
    .sidebar-poin-card.tier-platinum {
        --tier-accent: #5EE7DA;
        --tier-accent-strong: #2C9C9C;
        --tier-bg-1: #0d1f1f;
        --tier-bg-2: #050d0d;
        --tier-glow: rgba(94, 231, 218, 0.20);
    }

    .sidebar-poin-card-top {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 14px 14px 10px;
        position: relative;
        z-index: 1;
    }
    .sidebar-poin-row-user {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }
    .sidebar-poin-avatar-wrap {
        position: relative;
        flex-shrink: 0;
        padding: 2px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--tier-accent), var(--tier-accent-strong));
        box-shadow: 0 2px 8px rgba(0,0,0,0.45);
    }
    .sidebar-poin-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
        display: block;
        border: 2px solid var(--tier-bg-2);
        background: var(--tier-bg-1);
    }
    .sidebar-poin-avatar-fallback {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid var(--tier-bg-2);
        background: var(--tier-bg-1);
        color: rgba(255,255,255,0.4);
    }
    .sidebar-poin-avatar-badge {
        position: absolute;
        right: -4px;
        bottom: -4px;
        width: 18px;
        height: 18px;
        object-fit: contain;
        z-index: 2;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)) drop-shadow(0 0 4px var(--tier-glow));
    }
    .sidebar-poin-user-main {
        flex: 1;
        min-width: 0;
        padding-top: 2px;
    }
    .sidebar-poin-name {
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        line-height: 1.3;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 4px;
        flex-wrap: wrap;
    }
    .sidebar-poin-crown {
        color: var(--tier-accent);
        flex-shrink: 0;
    }
    .sidebar-poin-row-account {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        width: 100%;
        box-sizing: border-box;
    }
    .sidebar-poin-status {
        font-size: 13px;
        font-weight: 600;
        color: var(--tier-accent);
        display: inline-flex;
        align-items: center;
        gap: 4px;
        line-height: 1.25;
    }
    .sidebar-poin-premium-icon {
        color: var(--tier-accent);
        flex-shrink: 0;
    }
    .sidebar-poin-expiry {
        font-size: 12px;
        font-weight: 500;
        color: rgba(255,255,255,0.58);
        line-height: 1.4;
        display: flex;
        align-items: flex-start;
        gap: 5px;
        width: 100%;
    }
    .sidebar-poin-expiry .lucide-icon {
        flex-shrink: 0;
        margin-top: 1px;
        opacity: 0.85;
        color: rgba(255,255,255,0.5);
    }
    .sidebar-poin-expiry-text {
        color: rgba(255,255,255,0.65);
        line-height: 1.4;
        min-width: 0;
    }
    .sidebar-poin-expiry-days {
        color: rgba(255,255,255,0.48);
    }
    .sidebar-poin-saldo-box {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 4px;
        min-width: 0;
        padding: 4px 8px;
        background: rgba(0,0,0,0.28);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 12px;
        align-self: start;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    }
    .sidebar-poin-coin {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        filter: drop-shadow(0 0 5px var(--tier-glow));
    }
    .sidebar-poin-saldo-text {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        line-height: 1.05;
    }
    .sidebar-poin-saldo-num {
        font-size: 15px;
        font-weight: 700;
        color: #fff;
        letter-spacing: -0.02em;
        font-variant-numeric: tabular-nums;
        line-height: 1;
    }
    .sidebar-poin-saldo-unit {
        font-size: 8px;
        font-weight: 500;
        color: rgba(255,255,255,0.52);
        text-align: right;
    }
    .sidebar-poin-card-divider {
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.1) 75%, transparent);
        margin: 0 14px;
    }
    .sidebar-poin-card-bottom {
        padding: 8px 14px 12px;
        position: relative;
        z-index: 1;
    }
    .sidebar-poin-progress-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
        margin-bottom: 5px;
    }
    .sidebar-poin-progress-label {
        font-size: 11px;
        font-weight: 600;
        color: var(--tier-accent);
        white-space: nowrap;
    }
    .sidebar-poin-progress-sisa {
        font-size: 10px;
        color: rgba(255,255,255,0.65);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    .sidebar-poin-progress-sisa strong {
        color: #fff;
        font-weight: 700;
    }
    .sidebar-poin-progress-row {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .sidebar-poin-progress-bar {
        flex: 1;
        height: 5px;
        background: rgba(255,255,255,0.12);
        border-radius: 5px;
        overflow: hidden;
    }
    .sidebar-poin-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--tier-accent-strong), var(--tier-accent));
        border-radius: 4px;
        transition: width 0.3s ease;
    }
    .sidebar-poin-tier-thumb {
        width: 24px;
        height: 24px;
        object-fit: contain;
        flex-shrink: 0;
        filter: drop-shadow(0 0 4px var(--tier-glow));
    }
    .sidebar-poin-progress-max {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 10px;
        font-weight: 600;
        color: var(--tier-accent);
        padding: 2px 0;
    }
    @media (prefers-reduced-motion: reduce) {
        .sidebar-poin-card,
        .sidebar-poin-progress-fill {
            transition: none;
        }
        .sidebar-poin-card:active {
            transform: none;
        }
    }

    /* ---- Sidebar Guest Card (belum login) ---- */
    .sidebar-guest-card {
        margin: 10px 12px;
        padding: 20px 16px;
        background: linear-gradient(135deg, #fef2f2 0%, #fff 100%);
        border: 1px solid #fecaca;
        border-radius: 12px;
        text-align: center;
        flex-shrink: 0;
        overflow: hidden;
    }
    .sidebar-guest-icon {
        color: #f44336;
        margin-bottom: 8px;
    }
    .sidebar-guest-icon .lucide-icon {
        color: #f44336;
    }
    .sidebar-guest-title {
        font-size: 14px;
        font-weight: 600;
        color: #1f2937;
        margin: 0 0 4px;
    }
    .sidebar-guest-desc {
        font-size: 12px;
        color: #6b7280;
        margin: 0 0 14px;
        line-height: 1.5;
    }
    .sidebar-guest-btn-login {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        padding: 9px 0;
        background: #f44336;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        border-radius: 10px;
        text-decoration: none;
        transition: filter 0.18s ease;
    }
    .sidebar-guest-btn-login:hover {
        filter: brightness(1.08);
        color: #fff;
        text-decoration: none;
    }
    .sidebar-guest-btn-login .lucide-icon {
        color: #fff;
    }
    .sidebar-register-link {
        display: block;
        margin-top: 10px;
        font-size: 12px;
        color: #6b7280;
        text-decoration: none;
    }
    .sidebar-register-link strong {
        color: #f44336;
    }
    .sidebar-register-link:hover {
        color: #333;
        text-decoration: none;
    }

    /* ---- Section label ---- */
    .sidebar-section-label {
        padding: 14px 16px 6px;
        font-size: 11px;
        font-weight: 600;
        color: #9ca3af;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
        overflow: hidden;
        transition: opacity 0.2s ease;
    }

    /* ---- Sidebar Menu ---- */
    .sidebar-menu {
        list-style: none;
        margin: 0;
        padding: 0 8px;
        flex: 1 1 auto;
    }
    .sidebar-menu li a.item,
    .sidebar-menu li .item {
        display: flex;
        align-items: center;
        padding: 10px 12px;
        color: #374151;
        font-size: 14px;
        text-decoration: none;
        border-radius: 8px;
        transition: background 0.15s ease, color 0.15s ease;
        gap: 10px;
        white-space: nowrap;
        overflow: hidden;
    }
    .sidebar-menu li a.item:hover {
        background: #f3f4f6;
        color: #1f2937;
        text-decoration: none;
    }
    .sidebar-menu li a.item .icon-box,
    .sidebar-menu li .item .icon-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        flex-shrink: 0;
    }
    .sidebar-menu li a.item .in,
    .sidebar-menu li .item .in {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-width: 0;
        overflow: hidden;
    }
    /* Dark mode toggle in sidebar */
    .sidebar-darkmode-item .item {
        cursor: default;
    }

    /* ---- Sidebar Upgrade Card ---- */
    .sidebar-upgrade-card {
        margin: 12px 12px 8px;
        padding: 18px 16px;
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
        border-radius: 12px;
        text-align: center;
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
    }
    .sidebar-upgrade-icon {
        margin-bottom: 6px;
    }
    .sidebar-upgrade-icon .lucide-icon {
        color: #92400e;
    }
    .sidebar-upgrade-card strong {
        display: block;
        font-size: 14px;
        font-weight: 700;
        color: #78350f;
        margin-bottom: 4px;
    }
    .sidebar-upgrade-card p {
        font-size: 12px;
        color: #92400e;
        margin: 0 0 12px;
        line-height: 1.4;
    }
    .sidebar-upgrade-btn {
        display: block;
        width: 100%;
        padding: 10px 0;
        background: linear-gradient(135deg, #f44336 0%, #e91e63 100%);
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        border-radius: 10px;
        text-decoration: none;
        text-align: center;
        transition: filter 0.18s ease, transform 0.1s ease;
        box-shadow: 0 4px 12px rgba(244, 67, 54, 0.35);
    }
    .sidebar-upgrade-btn:hover {
        filter: brightness(1.08);
        color: #fff;
        text-decoration: none;
    }
    .sidebar-upgrade-btn:active {
        transform: scale(0.97);
    }

    /* Kartu promo (whole-card link) — sama kelas dengan upgrade slot */
    a.sidebar-upgrade-card.sidebar-upgrade-card--promo-link {
        display: block;
        text-decoration: none;
        color: inherit;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        transition: filter 0.18s ease, transform 0.1s ease;
    }
    a.sidebar-upgrade-card.sidebar-upgrade-card--promo-link:hover {
        filter: brightness(1.03);
        color: inherit;
        text-decoration: none;
    }
    a.sidebar-upgrade-card.sidebar-upgrade-card--promo-link:focus {
        outline: none;
    }
    a.sidebar-upgrade-card.sidebar-upgrade-card--promo-link:focus-visible {
        outline: 2px solid #92400e;
        outline-offset: 3px;
    }
    a.sidebar-upgrade-card.sidebar-upgrade-card--promo-link:active {
        transform: scale(0.99);
    }
    .sidebar-upgrade-card--promo-link .sidebar-upgrade-btn {
        pointer-events: none;
    }

    /* ---- Sidebar Footer ---- */
    .sidebar-footer-desktop {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border-top: 1px solid #e5e7eb;
        padding: 4px 8px;
        flex-shrink: 0;
        margin-top: auto;
    }
    .sidebar-footer-desktop .button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        color: #6b7280;
        border-radius: 8px;
        text-decoration: none;
        transition: background 0.18s ease, color 0.18s ease;
    }
    .sidebar-footer-desktop .button:hover {
        background: #f3f4f6;
        color: #1f2937;
    }
    .sidebar-footer-desktop .button .lucide-icon {
        width: 22px;
        height: 22px;
    }

    /* ---- Layout offsets: navbar full-width; konten geser kanan sidebar ---- */
    #appCapsule {
        margin-left: var(--sidebar-width);
        max-width: none;
        padding-left: 16px;
        padding-right: 24px;
        box-sizing: border-box;
        transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Homepage: kartu poin/tier hanya mobile — markup tetap di index.php */
    #appCapsule .home-poin-card {
        display: none !important;
    }

    #headerSidebarToggle {
        color: #555 !important;
    }


    /* ===============================================
       COLLAPSED STATE  (body.sidebar-collapsed)
       =============================================== */
    body.sidebar-collapsed .app-sidebar {
        width: var(--sidebar-width-collapsed);
    }

    /* Profile / guest: sembunyikan saat sidebar collapsed */
    body.sidebar-collapsed .sidebar-poin-card,
    body.sidebar-collapsed .sidebar-guest-card {
        display: none !important;
    }

    /* Section label: hidden */
    body.sidebar-collapsed .sidebar-section-label {
        opacity: 0;
        height: 0;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    /* Menu items: icon-only, centered */
    body.sidebar-collapsed .sidebar-menu {
        padding: 0 4px;
    }
    body.sidebar-collapsed .sidebar-menu li a.item,
    body.sidebar-collapsed .sidebar-menu li .item {
        justify-content: center;
        padding: 10px 8px;
        gap: 0;
    }
    body.sidebar-collapsed .sidebar-menu li a.item .in,
    body.sidebar-collapsed .sidebar-menu li .item .in {
        display: none;
    }

    /* Upgrade card: hidden */
    body.sidebar-collapsed .sidebar-upgrade-card {
        display: none;
    }

    /* Dark mode item: show icon only */
    body.sidebar-collapsed .sidebar-darkmode-item .in {
        display: none !important;
    }

    /* Footer: icons only, centered */
    body.sidebar-collapsed .sidebar-footer-desktop {
        flex-direction: column;
        padding: 4px 4px;
    }
    body.sidebar-collapsed .sidebar-footer-desktop .button {
        width: 100%;
    }

    /* Layout offsets — collapsed */
    body.sidebar-collapsed #appCapsule {
        margin-left: var(--sidebar-width-collapsed);
    }

    /* Halaman detail: iframe tetap mengikuti lebar parent */
    body.page-detail #appCapsule .product-detail-header iframe {
        max-width: 100%;
    }

}

/* ---- Dark mode overrides for desktop sidebar ---- */
@media (min-width: 1024px) {
    body.dark-mode-active .app-sidebar {
        background: #0f172a;
        border-right-color: #1e293b;
    }
    body.dark-mode-active .desktop-logo-text {
        color: #f87171;
    }
    body.dark-mode-active .sidebar-collapse-btn {
        color: #64748b;
    }
    body.dark-mode-active .sidebar-collapse-btn:hover {
        background: #1e293b;
        color: #cbd5e1;
    }
    body.dark-mode-active .sidebar-poin-card {
        border-color: rgba(255,255,255,0.08);
        box-shadow: 0 6px 20px rgba(0,0,0,0.45);
    }
    body.dark-mode-active .sidebar-poin-saldo-box {
        background: rgba(0,0,0,0.35);
        border-color: rgba(255,255,255,0.1);
    }
    body.dark-mode-active .sidebar-guest-card {
        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
        border-color: #334155;
    }
    body.dark-mode-active .sidebar-guest-title {
        color: #f1f5f9;
    }
    body.dark-mode-active .sidebar-guest-desc {
        color: #94a3b8;
    }
    body.dark-mode-active .sidebar-section-label {
        color: #64748b;
    }
    body.dark-mode-active .sidebar-menu li a.item,
    body.dark-mode-active .sidebar-menu li .item {
        color: #cbd5e1;
    }
    body.dark-mode-active .sidebar-menu li a.item:hover {
        background: #1e293b;
        color: #f1f5f9;
    }
    body.dark-mode-active .sidebar-footer-desktop {
        border-top-color: #1e293b;
    }
    body.dark-mode-active .sidebar-footer-desktop .button {
        color: #94a3b8;
    }
    body.dark-mode-active .sidebar-footer-desktop .button:hover {
        background: #1e293b;
        color: #f1f5f9;
    }
    body.dark-mode-active .sidebar-upgrade-card {
        background: linear-gradient(135deg, #422006 0%, #78350f 50%, #92400e 100%);
    }
    body.dark-mode-active .sidebar-upgrade-card strong {
        color: #fde68a;
    }
    body.dark-mode-active .sidebar-upgrade-card p {
        color: #fcd34d;
    }

    body.dark-mode-active #appCapsule .owl-carousel:not(#sliderUtama) .owl-nav button.owl-prev,
    body.dark-mode-active #appCapsule .owl-carousel:not(#sliderUtama) .owl-nav button.owl-next {
        background: var(--dm-surface-elevated, #1B283B);
        border-color: var(--dm-line, #1B283B);
        color: var(--dm-ink, #fff);
    }
    body.dark-mode-active #sliderUtama.owl-carousel .owl-nav button.owl-prev,
    body.dark-mode-active #sliderUtama.owl-carousel .owl-nav button.owl-next {
        background: rgba(15, 28, 47, 0.85);
        color: #fff;
    }
}