/* ========== RESET & VARIABLES ========== */
:root{--navy-blue:#2D3748;--navy-dark:#1A202C;--navy-light:#4A5568;--vibrant-orange:#ED8936;--vibrant-orange-dark:#C05621;--vibrant-orange-light:#F6AD55;--light-teal:#B2F5EA;--light-teal-dark:#81E6D9;--light-teal-light:#E6FFFA;--off-white:#F8F9FA;--white:#FFFFFF;--primary:var(--navy-blue);--primary-dark:var(--navy-dark);--primary-light:var(--navy-light);--secondary:var(--vibrant-orange);--secondary-light:var(--vibrant-orange-light);--accent:var(--light-teal);--accent-dark:var(--light-teal-dark);--dark:var(--navy-blue);--dark-light:var(--navy-light);--medium:#718096;--light:var(--off-white);--lighter:var(--off-white);--success:#38A169;--warning:#DD6B20;--error:#E53E3E;--shadow:0 4px 6px -1px rgba(45,55,72,.12);--shadow-hover:0 20px 25px -5px rgba(45,55,72,.18);--radius:.5rem;--radius-lg:1rem;--radius-full:9999px;--transition:all .35s cubic-bezier(.4,0,.2,1)}
*,::before,::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;line-height:1.7;color:var(--dark);background:linear-gradient(135deg,var(--lighter),var(--light));overflow-x:hidden;font-size:16px;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--secondary);text-decoration:none;transition:var(--transition);position:relative}
a:hover{color:var(--vibrant-orange-dark)}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
.anim-text{display:inline-block;background-image:linear-gradient(90deg,#065ba5,#d630f2,#ff002f,#e4ff00,#d630f2,#065ba5);background-size:300%;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;animation:animate 8s linear infinite}
@keyframes animate{0%{background-position:0 0}100%{background-position:300% 0}}
/* ========== NAVBAR ========== */
.topnav{overflow:hidden;background:linear-gradient(135deg,var(--navy-blue),var(--navy-dark));position:sticky;top:0;z-index:1000;box-shadow:var(--shadow);display:flex;flex-wrap:wrap;align-items:center}
.topnav a{flex:0 0 auto;display:block;color:var(--light);text-align:center;padding:14px 16px;text-decoration:none;font-size:15px;font-weight:500;transition:var(--transition);position:relative;overflow:hidden}
.topnav a::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transform:skewX(-20deg);transition:left .5s ease;pointer-events:none}
.topnav a:hover::before{left:100%}
.topnav a:hover{background-color:rgba(237,137,54,.18);color:var(--secondary-light)!important}
.topnav a.active{background-color:#000000!important;color:var(--white)!important}
.topnav a.home{background:linear-gradient(135deg,var(--secondary),var(--secondary-light));font-weight:600;color:var(--navy-blue)!important}
.topnav a.login{background:linear-gradient(135deg,var(--vibrant-orange),var(--vibrant-orange-dark));font-weight:600;color:var(--white)!important}
.topnav .icon{display:none;color:var(--light);font-size:20px;padding:14px 16px;cursor:pointer;margin-left:auto;position:relative;overflow:hidden}
@media screen and (max-width:768px){.topnav a:not(.home):not(.login):not(.icon){display:none;flex:100%;text-align:left;padding-left:2rem}.topnav a.icon{display:block}.topnav.responsive a:not(.home):not(.login):not(.icon){display:block}.topnav.responsive a.icon{position:absolute;right:0;top:0}}
/* ========== LOGO ========== */
.misntv-tv-logo{position:absolute;top:20px;right:20px;width:clamp(90px,10.5vw,170px);height:auto;z-index:110;pointer-events:none;isolation:isolate;transform:translateZ(0);transition:opacity .3s ease}
@media (max-width: 768px){.misntv-tv-logo{top:12px;right:12px;width:clamp(70px,12vw,100px)}}
.misntv-logo-container{position:relative;width:100%;display:block;border-radius:4px;contain:layout style;overflow:hidden}
.misntv-logo-img{display:block;width:100%;height:auto;object-fit:contain;image-rendering:-webkit-optimize-contrast;transition:transform .3s ease;will-change:transform;transform:translateZ(0);backface-visibility:hidden}
.misntv-tv-logo:hover .misntv-logo-img{transform:translateZ(0) scale(1.02)}
.light-sweep-layer{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:url('https://upload.wikimedia.org/wikipedia/commons/1/14/LOGO_MISNTV.png');mask-image:url('https://upload.wikimedia.org/wikipedia/commons/1/14/LOGO_MISNTV.png');-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:transparent;overflow:hidden;border-radius:4px}
.light-sweep-layer::before{content:'';position:absolute;top:0;left:-150%;width:100px;height:100%;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.35) 45%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0.35) 55%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);animation:gentleSweep 4.5s ease-in-out infinite;filter:blur(0.6px)}
@keyframes gentleSweep{0%{left:-150%;opacity:0}15%{opacity:0.6}35%{left:150%;opacity:0.6}50%{left:150%;opacity:0}100%{left:-150%;opacity:0}}
/* ========== PLAYLIST INFO ========== */
.playlist-info{position:absolute;top:85px;left:50%;transform:translateX(-50%) translateY(-10px);z-index:106;background:rgba(166,3,3,0.88);backdrop-filter:blur(10px);border-radius:40px;padding:8px 22px;color:#fff;font-size:13px;text-align:center;font-family:'Poppins',sans-serif;box-shadow:0 4px 15px rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.2);pointer-events:none;width:auto;display:inline-block;max-width:90%;white-space:nowrap;overflow:visible;opacity: 0;visibility: hidden;will-change: opacity, transform, visibility;}
.playlist-info.show {animation: playlistInfoShowHide 4s ease forwards;pointer-events: none;}
@keyframes playlistInfoShowHide {0% {opacity: 0;visibility: visible;transform: translateX(-50%) translateY(-10px);}10% {opacity: 1;visibility: visible;transform: translateX(-50%) translateY(0);}90% {opacity: 1;visibility: visible;transform: translateX(-50%) translateY(0);}100% {opacity: 0;visibility: hidden;transform: translateX(-50%) translateY(-10px);}}
.playlist-info.hidden {opacity: 0 !important;visibility: hidden !important;animation: none !important;}
.playlist-info span{position:relative;z-index:2;display:inline-block;white-space:nowrap;}
.playlist-info .light-sweep-soft{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;border-radius:40px;pointer-events:none;}
.playlist-info .light-sweep-soft::before{content:'';position:absolute;top:0;left:-100%;width:80px;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25) 45%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0.25) 55%,transparent);transform:skewX(-15deg);animation:softSweep 6s ease-in-out infinite;filter:blur(1px);}
@keyframes softSweep{0%{left:-100%;opacity:0}20%{opacity:0.5}40%{left:100%;opacity:0.5}60%{left:100%;opacity:0}100%{left:-100%;opacity:0}}
@media (max-width:768px){.playlist-info{top:70px;padding:6px 16px;font-size:11px;border-radius:30px}.playlist-info .light-sweep-soft{border-radius:30px}}
/* ========== VIDEO WRAPPER ========== */
#tvStreamWidget{position:relative;width:100%;background:#000;overflow:hidden;font-family:'Poppins',sans-serif;margin:0;line-height:1.4;display:none;display:flex;flex-direction:column}
#tvStreamWidget.active{display:flex!important}
.tv-video-wrapper{position:relative;width:100%;padding-bottom:56.25%;background:#000;cursor:none;transition:cursor .2s ease;will-change:transform;z-index:1}
.tv-video-wrapper.controls-visible{cursor:default}
.tv-video-wrapper .video-js{position:absolute!important;top:0!important;left:0!important;width:100% !important;height:100%!important;background:#000}
.tv-video-wrapper .video-js .vjs-control-bar{background:rgba(0,0,0,0.7)!important}
.tv-video-wrapper .video-js .vjs-volume-level{background-color:#a60303!important}
.tv-video-wrapper .video-js video{object-fit:cover!important}
.tv-video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;background:#000}
/* ========== CLOCK CONTAINER ========== */
.clock-container{position:absolute;top:20px;left:20px;z-index:100;pointer-events:auto}
@media (max-width:768px){.clock-container{top:12px;left:12px}}
.live-clock{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.65);backdrop-filter:blur(8px);padding:6px 12px;border-radius:30px;font-family:'Poppins',sans-serif;font-size:0.85rem;font-weight:500;letter-spacing:0.3px;color:#fff;border:1px solid rgba(255,255,255,.15);white-space:nowrap}
@media (max-width:768px){.live-clock{padding:4px 10px;font-size:0.75rem;gap:6px}}
.live-clock.hidden-clock{display:none!important}
.clock-views-wrap{position:relative;width:auto;min-width:140px;height:1.5em;overflow:hidden;display:inline-flex;align-items:center;justify-content:center}
@media (max-width:768px){.clock-views-wrap{min-width:120px}}
.clock-view{position:absolute;left:0;top:0;width:100%;text-align:center;opacity:0;transform:translateY(20px);transition:opacity 0.5s cubic-bezier(0.4,0,0.2,1),transform 0.5s cubic-bezier(0.4,0,0.2,1);pointer-events:none;white-space:nowrap;visibility:hidden}
.clock-view.active{opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible;z-index:2}
.clock-view.clock-view-playlist.clock-view-marquee {width: auto !important;text-align: left !important;padding-left: 100% !important;display: inline-block !important;white-space: nowrap !important;animation: marqueeScrollLinear var(--marquee-duration, 12s) linear infinite;}
@keyframes marqueeScrollLinear {0% { transform: translateX(0); }100% { transform: translateX(var(--marquee-distance, -100%)); }}
.clock-time,.clock-date,.clock-playlist{font-family:'Poppins',sans-serif;font-size:0.85rem;font-weight:500;display:inline-block}
@media (max-width:768px){.clock-time,.clock-date,.clock-playlist{font-size:0.75rem}}
.clock-seconds{animation:blinkColor 1s step-end infinite;color:#fff}
@keyframes blinkColor{0%,49%{color:#fff}50%,100%{color:transparent}}
.live-clock .broadcast-icon{font-weight:900!important;font-size:0.85rem!important;color:#ff6b6b}
/* ========== TV CONTROLS ========== */
.tv-controls-wrapper {position: absolute;bottom: 80px;left: 0;right: 0;display: flex;justify-content: center;align-items: center;gap: 12px;z-index: 105;transition: opacity 0.3s ease, transform 0.3s ease;pointer-events: auto;}
.tv-controls-wrapper.hidden {opacity: 0;pointer-events: none;transform: translateY(20px);}
.tv-controls {display: flex;align-items: center;gap: 12px;background: rgba(0,0,0,0.7);backdrop-filter: blur(8px);padding: 8px 16px;border-radius: 50px;border: 1px solid rgba(255,255,255,0.2);}
.tv-controls button {background: rgba(0,0,0,0.5);border: 1px solid rgba(255,255,255,0.2);color: #fff;font-size: 0.85rem;cursor: pointer;padding: 8px 16px;border-radius: 30px;transition: all 0.2s ease;display: inline-flex;align-items: center;justify-content: center;gap: 8px;font-weight: 500;min-width: 44px;min-height: 44px;flex-shrink: 0;white-space: nowrap;}
.tv-controls button:hover { background: rgba(255,255,255,0.2);transform: scale(1.02);}
.tv-controls button i {font-size: 1rem;}
.next-player-indicator {display: inline-flex;align-items: center;justify-content: center;background: rgba(0, 0, 0, 0.6);border: 1px solid rgba(212, 175, 55, 0.4);color: #f7e6b5;padding: 6px 14px;border-radius: 30px;font-size: 0.8rem;font-weight: 600;font-family: 'Courier New', monospace;pointer-events: none;backdrop-filter: blur(4px);gap: 8px;box-shadow: 0 4px 10px rgba(0,0,0,0.3);}
.next-player-indicator i {color: #d4af37;font-size: 0.9rem;}
@media (max-width: 768px) {.tv-controls-wrapper { bottom: 70px; }.tv-controls { gap: 8px; padding: 6px 12px; }.tv-controls button { padding: 6px 12px; font-size: 0.7rem; min-width: 36px; min-height: 36px; }.tv-controls button i { font-size: 0.8rem; }.next-player-indicator { padding: 4px 10px; font-size: 0.7rem; gap: 6px; }.next-player-indicator i { font-size: 0.8rem; }}
/* ========== FULLSCREEN MODE ========== */
.tv-video-wrapper:fullscreen, .tv-video-wrapper.fs-active {position: fixed !important;top: 0 !important;left: 0 !important;width: 100vw !important;height: 100vh !important;padding-bottom: 0 !important;background: #000;z-index: 9999;}
.tv-video-wrapper:fullscreen #tvStreamWidget, .tv-video-wrapper.fs-active #tvStreamWidget {position: fixed !important;top: 0 !important;left: 0 !important;width: 100% !important;height: 100vh !important;display: flex !important;flex-direction: column !important;z-index: 9999 !important;background: #000 !important;}
.tv-video-wrapper:fullscreen .tv-video-wrapper, .tv-video-wrapper.fs-active .tv-video-wrapper {flex: 1 !important;padding-bottom: 0 !important;height: calc(100vh - auto) !important;}
.tv-video-wrapper:fullscreen .clock-container, .tv-video-wrapper.fs-active .clock-container {position: fixed !important;top: 20px !important;left: 20px !important;z-index: 10002 !important;pointer-events: auto !important;}
.tv-video-wrapper:fullscreen .misntv-tv-logo, .tv-video-wrapper.fs-active .misntv-tv-logo {position: fixed !important;top: 20px !important;right: 20px !important;z-index: 10002 !important;width: clamp(90px, 10.5vw, 170px) !important;pointer-events: none !important;}
.tv-video-wrapper:fullscreen .playlist-info, .tv-video-wrapper.fs-active .playlist-info {position: fixed !important;top: 85px !important;left: 50% !important;transform: translateX(-50%) !important;z-index: 10002 !important;}
.tv-video-wrapper:fullscreen .tv-controls-wrapper, .tv-video-wrapper.fs-active .tv-controls-wrapper {position: fixed !important;bottom: 70px !important;left: 0 !important;right: 0 !important;z-index: 10002 !important;}
.tv-video-wrapper:fullscreen .tv-overlay-ticker, .tv-video-wrapper.fs-active .tv-overlay-ticker {position: fixed !important;bottom: 0 !important;left: 0 !important;right: 0 !important;z-index: 10001 !important;background: rgba(0,0,0,0.9) !important;display: block !important;}
.tv-video-wrapper:fullscreen #prayerWidgetContainer, .tv-video-wrapper.fs-active #prayerWidgetContainer {position: fixed !important;bottom: 60px !important;left: 15px !important;z-index: 10001 !important;max-width: 380px !important;min-width: 260px !important;}
.tv-video-wrapper:fullscreen .video-progress-container, .tv-video-wrapper.fs-active .video-progress-container {position: fixed !important;bottom: 0 !important;left: 0 !important;right: 0 !important;z-index: 10000 !important;}
.tv-video-wrapper:fullscreen .buffer-indicator, .tv-video-wrapper.fs-active .buffer-indicator {position: fixed !important;bottom: 80px !important;left: 50% !important;transform: translateX(-50%) !important;z-index: 10002 !important;}
.fullscreen-exit { display: none !important; }
.tv-video-wrapper.fs-active .fullscreen-exit { display: inline-flex !important; }
.tv-video-wrapper.fs-active .enter-fullscreen { display: none !important; }
@media (max-width: 768px) and (orientation: landscape) {.tv-video-wrapper:fullscreen .clock-container, .tv-video-wrapper.fs-active .clock-container { top: 8px !important; left: 8px !important; transform: scale(0.8) !important; transform-origin: top left !important; }.tv-video-wrapper:fullscreen .misntv-tv-logo, .tv-video-wrapper.fs-active .misntv-tv-logo { top: 8px !important; right: 8px !important; width: 60px !important; transform: scale(0.8) !important; transform-origin: top right !important; }.tv-video-wrapper:fullscreen .playlist-info, .tv-video-wrapper.fs-active .playlist-info { top: 55px !important; padding: 4px 12px !important; font-size: 10px !important; white-space: nowrap !important; }.tv-video-wrapper:fullscreen .tv-controls-wrapper, .tv-video-wrapper.fs-active .tv-controls-wrapper { bottom: 60px !important; transform: scale(0.8) !important; transform-origin: bottom center !important; }.tv-video-wrapper:fullscreen .tv-controls button, .tv-video-wrapper.fs-active .tv-controls button { padding: 4px 10px !important; font-size: 0.65rem !important; min-width: 30px !important; min-height: 30px !important; }.tv-video-wrapper:fullscreen .tv-controls button i, .tv-video-wrapper.fs-active .tv-controls button i { font-size: 0.7rem !important; }.tv-video-wrapper:fullscreen .next-player-indicator, .tv-video-wrapper.fs-active .next-player-indicator { padding: 4px 10px !important; font-size: 0.65rem !important; }.tv-video-wrapper:fullscreen .next-player-indicator i, .tv-video-wrapper.fs-active .next-player-indicator i { font-size: 0.7rem !important; }.tv-video-wrapper:fullscreen #prayerWidgetContainer, .tv-video-wrapper.fs-active #prayerWidgetContainer { bottom: 55px !important; left: 8px !important; max-width: 280px !important; min-width: 200px !important; transform: scale(0.85) !important; transform-origin: bottom left !important; }.tv-video-wrapper:fullscreen .jadwal-sholat .panel-content, .tv-video-wrapper.fs-active .jadwal-sholat .panel-content { padding: 6px 12px !important; }.tv-video-wrapper:fullscreen .jadwal-sholat .main-slider, .tv-video-wrapper.fs-active .jadwal-sholat .main-slider { min-height: 50px !important; }.tv-video-wrapper:fullscreen .jadwal-sholat .prayer-name-big, .tv-video-wrapper.fs-active .jadwal-sholat .prayer-name-big { font-size: 0.9rem !important; }.tv-video-wrapper:fullscreen .jadwal-sholat .prayer-time-big, .tv-video-wrapper.fs-active .jadwal-sholat .prayer-time-big { font-size: 0.8rem !important; padding: 2px 8px !important; }.tv-video-wrapper:fullscreen .tv-overlay-ticker, .tv-video-wrapper.fs-active .tv-overlay-ticker { font-size: 0.7rem !important; }.tv-video-wrapper:fullscreen #universal-ticker .ticker-content, .tv-video-wrapper.fs-active #universal-ticker .ticker-content { padding: 0.4rem 0.6rem !important; min-height: 1.8rem !important; }}
@media (max-width: 768px) and (orientation: portrait) {.tv-video-wrapper:fullscreen .clock-container, .tv-video-wrapper.fs-active .clock-container { top: 12px !important; left: 12px !important; transform: scale(0.9) !important; transform-origin: top left !important; }.tv-video-wrapper:fullscreen .misntv-tv-logo, .tv-video-wrapper.fs-active .misntv-tv-logo { top: 12px !important; right: 12px !important; width: 70px !important; }.tv-video-wrapper:fullscreen .playlist-info, .tv-video-wrapper.fs-active .playlist-info { top: 70px !important; padding: 6px 16px !important; font-size: 11px !important; }.tv-video-wrapper:fullscreen #prayerWidgetContainer, .tv-video-wrapper.fs-active #prayerWidgetContainer { bottom: 70px !important; left: 10px !important; max-width: 320px !important; }}
/* ========== BUFFER & PROGRESS ========== */
.buffer-indicator{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);backdrop-filter:blur(8px);padding:8px 16px;border-radius:30px;display:none;align-items:center;gap:10px;z-index:30;font-size:.8rem;color:#fff;pointer-events:none}
.buffer-indicator.show{display:flex!important}
.buffer-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#e50914;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.video-progress-container{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.2);z-index:26;cursor:pointer;transition:opacity .3s ease,height .2s ease;pointer-events:auto;opacity:1}
.video-progress-container:hover{height:5px}
.video-progress-bar{width:0%;height:100%;background:#e50914;transition:width .1s linear;position:relative;z-index:2}
.video-buffered-bar{position:absolute;top:0;left:0;height:100%;background:rgba(255,255,255,.3);width:0%;pointer-events:none;z-index:1}
/* ========== CONTROL AUTO-HIDE ========== */
.tv-video-wrapper.controls-hidden{ cursor:none!important; }
.tv-video-wrapper.controls-hidden .tv-controls-wrapper{ opacity:0!important; pointer-events:none!important; transform: translateY(20px)!important; transition:opacity 0.4s ease,transform 0.4s ease!important; }
.tv-video-wrapper.controls-hidden .video-progress-container{ opacity:0!important; pointer-events:none!important; transition:opacity 0.4s ease!important; }
.tv-video-wrapper:fullscreen.controls-hidden .tv-controls-wrapper, .tv-video-wrapper.fs-active.controls-hidden .tv-controls-wrapper{ opacity:0!important; pointer-events:none!important; }
.tv-video-wrapper.controls-hidden .clock-container, .tv-video-wrapper.controls-hidden .misntv-tv-logo, .tv-video-wrapper.controls-hidden .tv-overlay-ticker, .tv-video-wrapper.controls-hidden #prayerWidgetContainer{ opacity:1!important; visibility:visible!important; }
/* ========== TICKER ========== */
.tv-overlay-ticker{ position:absolute; bottom:0; left:0; right:0; width:100%; z-index:95; background:transparent; pointer-events:none; }
#universal-ticker{ width:100%; background:rgba(0,0,0,0.85); border-top:1px solid rgba(255,255,255,0.2); border-bottom:1px solid rgba(255,255,255,0.1); z-index:96; pointer-events:auto; overflow:hidden; }
#universal-ticker.hidden-ticker{display:none!important}
#universal-ticker .ticker-content{position:relative;min-height:2.5rem;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0.8rem 1rem;color:white}
#universal-ticker .ticker-item{position:absolute;width:100%;text-align:center;opacity:0;transition:opacity 0.5s ease;pointer-events:none;padding:0 1rem;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#universal-ticker .ticker-item.active{opacity:1;pointer-events:auto;z-index:97}
#universal-ticker .ticker-item a{color:#ffde9c;text-decoration:none;font-weight:600;transition:color 0.3s ease;display:inline-block;pointer-events:auto;padding:8px 12px;margin:-8px -12px;border-radius:4px}
#universal-ticker .ticker-item a:hover{color:#ffffff;background:rgba(255,255,255,0.1)}
@media (max-width:768px){#universal-ticker .ticker-content{padding:0.6rem 0.8rem}#universal-ticker .ticker-item{white-space:normal;font-size:0.8rem;line-height:1.4}}
/* ========== PRAYER WIDGET ========== */
#prayerWidgetContainer { position: absolute; bottom: 52px; left: 15px; right: auto; width: auto; max-width: 380px; min-width: 260px; z-index: 92; pointer-events: auto; }
#prayerWidgetContainer.hidden-prayer { display: none !important; }
/* ========== MOBILE PORTRAIT - LAYOUT NORMAL (TIDAK OVERLAY) ========== */
@media (max-width: 991px) and (orientation: portrait) {
#tvStreamWidget { display: flex !important; flex-direction: column !important; position: relative !important; margin-bottom: 0 !important; padding-bottom: 0 !important; overflow: visible !important; background: #000 !important; }
.tv-video-wrapper { order: 1 !important; position: relative !important; width: 100% !important; height: 0 !important; padding-bottom: 56.25% !important; overflow: hidden !important; }
.tv-overlay-ticker { order: 2 !important; position: relative !important; top: auto !important; bottom: auto !important; left: 0 !important; right: 0 !important; width: 100% !important; margin: 0 !important; background: rgba(0, 0, 0, 0.95) !important; z-index: 20 !important; pointer-events: auto !important; }
#universal-ticker { position: relative !important; width: 100% !important; margin: 0 !important; border-top: 1px solid rgba(212, 175, 55, 0.3) !important; }
#prayerWidgetContainer { order: 3 !important; position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; width: 100% !important; max-width: 100% !important; min-width: auto !important; margin: 0 !important; padding: 10px 0 !important; display: block !important; background: linear-gradient(135deg, #1a1a2e, #0f0f1a) !important; z-index: 20 !important; pointer-events: auto !important; }
.jadwal-sholat .panel-content { border-radius: 0 !important; padding: 15px 20px !important; background: transparent !important; border-left: none !important; border-right: none !important; border-top: 1px solid rgba(212, 175, 55, 0.3) !important; border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important; box-shadow: none !important; backdrop-filter: none !important; }
.jadwal-sholat .broadcast-svg { display: none !important; }
.jadwal-sholat .panel-header { margin-bottom: 12px !important; padding-bottom: 10px !important; }
.jadwal-sholat .main-slider { min-height: 70px !important; }
.jadwal-sholat .prayer-name-big { font-size: 1.1rem !important; }
.jadwal-sholat .prayer-time-big { font-size: 1rem !important; padding: 4px 12px !important; }
.section-jadwal, .section-program, .section-testimonial { margin-top: 0 !important; padding-top: 40px !important; padding-bottom: 40px !important; }
body { background: #000 !important; }
}
/* ========== JADWAL SHOLAT WIDGET STYLE ========== */
.jadwal-sholat { all: initial; display: block; font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; position: relative; width: 100%; height: auto; min-height: 170px; background: transparent !important; pointer-events: none; }
.jadwal-sholat * { margin: 0; padding: 0; box-sizing: border-box; color:#d4af37; }
.jadwal-sholat .tv-broadcast { position: relative; width: 100%; height: auto; min-height: 170px; overflow: hidden; background: transparent !important; pointer-events: none; }
.jadwal-sholat .video-area { display: none; }
.jadwal-sholat .lowerthird-broadcast { position: relative; bottom: auto; left: auto; right: auto; width: 100%; max-width: 100%; background: transparent; pointer-events: none; }
.jadwal-sholat .broadcast-svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.jadwal-sholat .panel-content { position: relative; z-index: 10; background: linear-gradient(135deg, rgba(0,0,0,0.85), rgba(0,0,0,0.75)); backdrop-filter: blur(12px); border-radius: 20px; padding: 12px 18px; border-left: 4px solid #d4af37; border-right: 1px solid rgba(212, 175, 55, 0.3); border-top: 1px solid rgba(212, 175, 55, 0.2); border-bottom: 1px solid rgba(212, 175, 55, 0.2); pointer-events: auto; box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
.jadwal-sholat .panel-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(212, 175, 55, 0.35); flex-wrap: wrap; }
.jadwal-sholat .islamic-icon { width: 38px; height: 38px; background: #d4af37; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: #000; box-shadow: 0 0 10px rgba(212, 175, 55, 0.3); flex-shrink: 0; }
@media (max-width: 550px) { .jadwal-sholat .islamic-icon { width: 32px; height: 32px; font-size: 0.85rem; } }
.jadwal-sholat .brand-container { flex: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
@media (max-width: 550px) { .jadwal-sholat .brand-container { flex-direction: column; gap: 2px; } }
.jadwal-sholat .brand-name .misntv { font-size: clamp(0.85rem, 4vw, 1.4rem); font-weight: 800; letter-spacing: 2px; color: #d4af37; font-family: 'Playfair Display', serif; text-shadow: 0 0 3px rgba(212, 175, 55, 0.3); }
.jadwal-sholat .brand-name .misntv span { color: #d4af37; font-weight: 900; }
.jadwal-sholat .brand-tagline { font-size: clamp(0.6rem, 2.5vw, 0.8rem); letter-spacing: 1px; }
.jadwal-sholat .brand-tagline a { color: #f7e6b5; text-decoration: none; transition: opacity 0.2s ease; display: inline-flex; align-items: center; gap: 4px; }
.jadwal-sholat .brand-tagline a:hover { opacity: 0.8; text-decoration: underline; }
.jadwal-sholat .brand-tagline a i { color: #d4af37; font-size: 0.7em; }
.jadwal-sholat .date-badge { display: flex; align-items: center; gap: 8px; background: rgba(212, 175, 55, 0.12); padding: 4px 12px; border-radius: 30px; border: 1px solid rgba(212, 175, 55, 0.3); }
.jadwal-sholat .date-badge i { font-size: 0.75rem; color: #d4af37; }
.jadwal-sholat .date-badge .date-text { font-size: 0.65rem; font-weight: 500; color: #f7e6b5; letter-spacing: 0.5px; font-family: 'Poppins', monospace; white-space: nowrap; }
@media (max-width: 550px) { .jadwal-sholat .date-badge .date-text { white-space: normal; font-size: 0.6rem; } }
.jadwal-sholat .main-slider { min-height: 80px; display: flex; align-items: center; }
.jadwal-sholat .slide-item { width: 100%; animation: jadwalFadeSlide 0.4s ease forwards; }
@keyframes jadwalFadeSlide { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.jadwal-sholat .prayer-slide { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.jadwal-sholat .prayer-name-big { font-size: clamp(1rem, 4.5vw, 1.6rem); font-weight: 700; color: #f7e6b5; font-family: 'Poppins', sans-serif; letter-spacing: 0.5px; }
.jadwal-sholat .prayer-time-big { font-size: clamp(0.9rem, 3.5vw, 1.3rem); font-family: 'Courier New', monospace; font-weight: 700; color: #ffffff; background: rgba(212, 175, 55, 0.2); padding: 4px 14px; border-radius: 50px; letter-spacing: 1px; }
.jadwal-sholat .prayer-sub { font-size: 0.65rem; color: rgba(255,255,255,0.6); margin-top: 4px; }
.jadwal-sholat .prayer-sub i { color: #d4af37; }
.jadwal-sholat .location-slide { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.jadwal-sholat .location-main { display: flex; align-items: center; gap: 10px; }
.jadwal-sholat .location-main i { font-size: 1.3rem; color: #d4af37; }
.jadwal-sholat .location-main .city { font-size: clamp(0.9rem, 3.5vw, 1.2rem); font-weight: 600; color: #fff; }
.jadwal-sholat .location-detail { font-size: 0.7rem; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jadwal-sholat .location-detail i { color: #d4af37; font-size: 0.7rem; }
.jadwal-sholat .date-slide { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.jadwal-sholat .date-card { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.4); padding: 6px 14px; border-radius: 12px; flex: 1; min-width: 140px; border-left: 2px solid #d4af37; }
@media (max-width: 550px) { .jadwal-sholat .date-card { min-width: 120px; padding: 5px 10px; } }
.jadwal-sholat .date-card i { font-size: 1rem; color: #d4af37; }
.jadwal-sholat .date-card .date-label { font-size: 0.6rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1px; }
.jadwal-sholat .date-card .date-value { font-size: 0.7rem; color: #f7e6b5; font-family: monospace; font-weight: 500; }
.jadwal-sholat .countdown-slide { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.jadwal-sholat .countdown-box { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.jadwal-sholat .countdown-label-box { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1.5px; color: #d4af37; font-weight: 500; }
.jadwal-sholat .countdown-label-box i { margin-right: 4px; }
.jadwal-sholat .countdown-timer-big { font-size: clamp(0.9rem, 3.5vw, 1.2rem); font-family: 'Courier New', monospace; font-weight: 800; color: #f7e6b5; letter-spacing: 2px; }
.jadwal-sholat .next-prayer-box { font-size: 0.7rem; color: rgba(255,255,255,0.7); background: rgba(212, 175, 55, 0.15); padding: 4px 12px; border-radius: 30px; }
.jadwal-sholat .next-prayer-box i { color: #d4af37; margin-right: 4px; }
.jadwal-sholat .custom-alert { display: none; position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #d4af37, #b8942e); color: #0a0a0a; padding: 10px 24px; border-radius: 50px; z-index: 10000; font-weight: bold; font-size: 0.85rem; box-shadow: 0 5px 20px rgba(0,0,0,0.4); white-space: nowrap; animation: jadwalSlideUpAlert 0.4s ease; }
@keyframes jadwalSlideUpAlert { from { opacity: 0; transform: translateX(-50%) translateY(30px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.jadwal-sholat .close-btn { background: none; border: none; font-size: 1.1rem; margin-left: 10px; cursor: pointer; color: #0a0a0a; font-weight: bold; }
.jadwal-sholat .toggle-prayer-btn { position: absolute; top: 10px; right: 10px; background: rgba(212, 175, 55, 0.2); border: 1px solid #d4af37; color: #d4af37; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 20; transition: all 0.3s ease; }
.jadwal-sholat .toggle-prayer-btn:hover { background: #d4af37; color: #000; }
@media (max-width: 550px) { .jadwal-sholat .prayer-slide, .jadwal-sholat .date-slide, .jadwal-sholat .countdown-slide, .jadwal-sholat .location-slide { flex-direction: column; align-items: flex-start; } .jadwal-sholat .panel-header { gap: 8px; } }
/* ========== JADWAL TAYANG SECTION ========== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto+Condensed:wght@400;500;700&display=swap');
.section-jadwal { padding: 0; background: transparent; color: #fff; position: relative; }
.section-jadwal.hidden-section { display: none !important; }
.tv-schedule { position: relative; width: 100%; min-height: 500px; overflow: hidden; background: linear-gradient(90deg, rgba(55,0,120,.95) 0%, rgba(55,0,120,.88) 35%, rgba(20,0,40,.35) 100%), url("https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?q=80&w=1600"); background-size: contain; background-position: center; background-repeat: repeat; background-color: #2c0b3e; padding: 60px 0; }
.tv-schedule::before{content: " ";position:absolute;inset:0;background:radial-gradient(circle at top left,rgba(161,70,255,.55),transparent 45%);pointer-events:none;}
.channel-logo{position:absolute;top:25px;left: 35px;color:#ffffff;font-family: 'Oswald', sans-serif;font-size: clamp(32px, 5vw, 48px);font-weight: 700;letter-spacing: 2px;text-transform:uppercase;z-index:5;text-shadow: 0 2px 10px rgba(0,0,0,0.5);}
.schedule-day{position:absolute;top:35px;right:40px;color:rgba(255,255,255,.9);font-family: 'Roboto Condensed', sans-serif;font-size: clamp(18px, 2.5vw, 24px); font-weight: 600;letter-spacing: 1.5px;text-transform: uppercase;z-index:5;background: rgba(212, 175, 55, 0.15);padding: 8px 20px;border-radius: 30px;border: 1px solid rgba(212, 175, 55, 0.4);backdrop-filter: blur(10px);}
.schedule-list{position:relative;max-width:1100px;margin:80px auto 0;padding:0 40px;z-index:5;}
.schedule-item{position:relative;display:flex;align-items:center;min-height:100px;margin-bottom:15px;padding: 20px 35px;backdrop-filter:blur(10px);background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.08);border-radius: 8px;transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);gap: 24px;}
.schedule-item:hover{transform:translateX(10px);background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,.08));border-top-color: rgba(212, 175, 55, 0.4);border-bottom-color: rgba(212, 175, 55, 0.3);}
.time{flex-shrink: 0;width: clamp(100px, 12vw, 160px);color:#fff;font-family: 'Oswald', sans-serif;font-size: clamp(32px, 4.5vw, 52px);font-weight: 500;letter-spacing: -1px;line-height: 1;text-shadow: 0 2px 8px rgba(0,0,0,0.3);}
.program{flex: 1;min-width: 0;display: flex;flex-direction: column;justify-content: center;gap: 6px;}
.program-title{color:#fff;font-family: 'Roboto Condensed', sans-serif;font-size: clamp(18px, 2.5vw, 32px);font-weight: 700;line-height: 1.3;letter-spacing: 0.5px;text-transform: uppercase;white-space: normal;word-wrap: break-word;overflow-wrap: break-word;text-shadow: 0 2px 6px rgba(0,0,0,0.4);}
.program-desc{color:rgba(255,255,255,.85);font-family: 'Roboto Condensed', sans-serif;font-size: clamp(14px, 1.8vw, 20px);font-weight: 400;letter-spacing: 0.3px;white-space: normal;word-wrap: break-word;overflow-wrap: break-word;}
.status-badge {flex-shrink: 0;padding: 8px 20px;border-radius: 30px;font-family: 'Roboto Condensed', sans-serif;font-size: clamp(12px, 1.2vw, 15px);font-weight: 700;text-transform: uppercase;letter-spacing: 1px;white-space: nowrap;box-shadow: 0 4px 12px rgba(0,0,0,0.3);align-self: center;z-index: 2;}
.status-badge.sedang-tayang {background: linear-gradient(135deg, #d4af37, #f7e6b5);color: #000;position: relative;overflow: hidden;box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);}
.status-badge.sedang-tayang::before {content: '';position: absolute;top: 0;left: -100%;width: 50%;height: 100%;background: linear-gradient(90deg,transparent,rgba(255, 255, 255, 0.7),transparent);transform: skewX(-20deg);animation: calmLightSweep 4s ease-in-out infinite;z-index: -1;}
@keyframes calmLightSweep {0% { left: -100%; opacity: 0; }10% { opacity: 0.8; }40% { left: 150%; opacity: 0.8; }50% { left: 150%; opacity: 0; }100% { left: 150%; opacity: 0; }}
.status-badge.akan-datang {background: rgba(74, 85, 104, 0.7);color: #cbd5e0;border: 1px solid rgba(255, 255, 255, 0.25);}
.status-badge.telah-tayang { background: rgba(100, 100, 100, 0.5);color: #a0aec0;border: 1px solid rgba(255, 255, 255, 0.15);}
@media(max-width:768px){ .tv-schedule{min-height:420px;padding: 40px 0;} .channel-logo{font-size: 28px;top: 15px;left: 15px;} .schedule-day{font-size: 16px;top: 20px;right: 15px;padding: 6px 16px;} .schedule-list{margin-top: 60px;padding: 0 15px;} .schedule-item {min-height: auto;padding: 20px;flex-direction: column;align-items: flex-start;gap: 12px;} .schedule-item:hover {transform: none;} .time{width: auto;font-size: 28px;} .program{width: 100%;} .program-title{font-size: 20px;} .program-desc{font-size: 14px;} .status-badge {font-size: 11px;padding: 6px 14px;align-self: flex-start;margin-top: 4px;} }
/* ========== PROGRAM SECTION (DESAIN BARU) ========== */
.section-program { padding: 70px 0 100px; overflow: hidden; position: relative; background: radial-gradient(circle at top, #12386d 0%, #08172e 35%, #030813 100%); }
.section-program.hidden-section { display: none !important; }
.section-title { text-align: center; margin-bottom: 60px; padding: 0 15px; }
.section-title h2 { font-size: clamp(32px, 5vw, 60px); font-weight: 900; letter-spacing: 3px; background: linear-gradient(90deg, #ffffff, #9fe7ff, #42d9ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.section-title p { color: #c6def3; margin-top: 10px; font-size: 1.1rem; font-weight: 500; }
.slide-item { padding: 0 12px; }
.slide-card { position: relative; overflow: hidden; border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(20px); transition: box-shadow 0.4s ease; }
.slide-card img { width: 100%; height: 620px; object-fit: cover; display: block; transition: transform 2s ease, filter 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.slide-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.82)); z-index: 1; pointer-events: none; }
.slide-card .channel-logo { position: absolute; top: 20px; left: 20px; z-index: 10; padding: 10px 18px; border-radius: 50px; background: rgba(255, 255, 255, 0.12); color: #fff; font-weight: 700; backdrop-filter: blur(15px); font-size: 0.85rem; letter-spacing: 1px; }
.slide-content { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; padding: 45px; color: #fff; background: linear-gradient(180deg, transparent 0%, rgba(3, 15, 35, 0.35) 45%, rgba(3, 10, 25, 0.97) 100%); transform: translateY(-100%); opacity: 0; transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.5s ease; pointer-events: none; }
.slide-content::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, #00c6ff, #00ffe5, #ffffff); border-radius: 3px; }
.program-tag { display: inline-block; width: max-content; padding: 10px 18px; border-radius: 50px; background: rgba(0, 198, 255, 0.15); border: 1px solid rgba(0, 198, 255, 0.4); margin-bottom: 15px; font-size: 12px; font-weight: 700; letter-spacing: 1px; backdrop-filter: blur(4px); }
.slide-content h3 { font-size: clamp(22px, 4vw, 48px); font-weight: 900; margin-bottom: 15px; line-height: 1.2; }
.slide-content p { max-width: 700px; line-height: 1.8; color: #dcecff; font-size: 1rem; }
.slide-btn { margin-top: 25px; width: max-content; padding: 14px 28px; border-radius: 50px; text-decoration: none; font-weight: 700; color: #fff; background: linear-gradient(135deg, #00a8ff, #00ffe0); box-shadow: 0 10px 30px rgba(0, 200, 255, 0.25); transition: transform 0.2s ease, box-shadow 0.2s; pointer-events: auto; }
.slide-btn:hover { transform: translateY(-3px); box-shadow: 0 18px 35px rgba(0, 200, 255, 0.4); }
.section-program .slick-list { overflow: visible !important; }
.section-program .slick-track { padding: 40px 0; }
.section-program .slick-slide { opacity: 0.35; transform: scale(0.86); transition: all 1.2s cubic-bezier(0.2, 0.9, 0.4, 1.1); }
.section-program .slick-center { opacity: 1; transform: scale(1); }
.section-program .slick-center .slide-card { box-shadow: 0 30px 120px rgba(0, 180, 255, 0.2); }
.section-program .slick-center:hover img { transform: scale(1.06); filter: sepia(0.85) contrast(1.2) brightness(0.95) saturate(1.1); }
.section-program .slick-center:hover .slide-content { transform: translateY(0); opacity: 1; }
.section-program .slick-prev, .section-program .slick-next { z-index: 9999; width: 60px; height: 60px; }
.section-program .slick-prev { left: 25px; }
.section-program .slick-next { right: 25px; }
.section-program .slick-prev:before, .section-program .slick-next:before { font-size: 55px; color: #ffffff; opacity: 1; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); transition: opacity 0.2s; }
.section-program .slick-prev:hover:before, .section-program .slick-next:hover:before { opacity: 0.85; }
@media (max-width: 991px) { .slide-card img { height: 450px; } .slide-content { padding: 35px; } .section-program .slick-prev, .section-program .slick-next { width: 50px; height: 50px; } .section-program .slick-prev:before, .section-program .slick-next:before { font-size: 45px; } }
@media (max-width: 768px) { .section-program { padding: 40px 0 70px; } .slide-card { border-radius: 20px; } .slide-card img { height: 340px; } .slide-content { padding: 22px; } .slide-content p { font-size: 14px; line-height: 1.6; } .slide-content h3 { font-size: 26px; } .program-tag { padding: 6px 14px; font-size: 10px; } .slide-btn { padding: 10px 22px; margin-top: 18px; font-size: 0.85rem; } .section-program .slick-prev, .section-program .slick-next { width: 45px; height: 45px; } .section-program .slick-prev:before, .section-program .slick-next:before { font-size: 36px; } .section-program .slick-prev { left: 12px; } .section-program .slick-next { right: 12px; } .slide-card .channel-logo { top: 14px; left: 14px; padding: 6px 14px; font-size: 0.7rem; } }
@media (max-width: 932px) and (orientation: landscape) { .slide-card img { height: 320px; } .slide-content { padding: 20px; } .slide-content h3 { font-size: 22px; } .slide-content p { font-size: 13px; line-height: 1.5; } .slide-btn { padding: 8px 20px; margin-top: 12px; } .section-program .slick-prev, .section-program .slick-next { width: 42px; height: 42px; } .section-program .slick-prev:before, .section-program .slick-next:before { font-size: 32px; } }
/* ========== TESTIMONIAL SECTION (DESAIN BARU - BROADCAST) ========== */
.section-testimonial { position: relative; padding: 70px 20px 80px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background: radial-gradient(ellipse at 20% 30%, #05070f 0%, #010101 100%); overflow: hidden; font-family: 'Inter', 'Space Grotesk', sans-serif; }
.section-testimonial.hidden-section { display: none !important; }
.section-testimonial::before { content: " "; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 255, 255, 0.02) 0px, rgba(0, 255, 255, 0.02) 1px, transparent 1px, transparent 4px); z-index: 1; }
.testi-bg-overlay { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.7) 95%); z-index: 0; }
.testi-inner { position: relative; z-index: 2; max-width: 1200px; width: 100%; text-align: center; }
.testi-top-bar { display: flex; justify-content: space-between; align-items: center; max-width: 1000px; margin: 0 auto 30px; padding: 0 12px; }
.testi-dots { display: flex; gap: 8px; }
.testi-dot { width: 12px; height: 12px; border-radius: 50%; }
.testi-dot.red { background: #ef4444; box-shadow: 0 0 6px #ff3366; }
.testi-dot.yellow { background: #facc15; }
.testi-dot.green { background: #4ade80; box-shadow: 0 0 5px lime; }
.testi-badge { display: flex; align-items: center; gap: 8px; font-size: 11px; font-family: monospace; letter-spacing: 0.2em; color: #67e8f9; background: rgba(0,0,0,0.4); padding: 6px 16px; border-radius: 50px; backdrop-filter: blur(8px); border: 1px solid rgba(0,255,255,0.4); }
.testi-pulse { display: inline-block; width: 8px; height: 8px; background: #22d3ee; border-radius: 50%; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.testi-clock { font-size: 11px; font-family: monospace; color: rgba(103,232,249,0.6); background: rgba(0,0,0,0.3); padding: 4px 8px; border-radius: 4px; }
@media (max-width: 640px) { .testi-clock { display: none; } .testi-badge { font-size: 9px; padding: 4px 10px; } }
.testi-header { margin-bottom: 40px; position: relative; }
.testi-suite-badge { display: inline-block; padding: 8px 24px; border-radius: 50px; background: rgba(0,0,0,0.5); backdrop-filter: blur(12px); border: 1px solid rgba(0,255,255,0.6); color: #67e8f9; font-family: monospace; font-size: 12px; font-weight: bold; letter-spacing: 0.25em; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.testi-title { font-size: clamp(36px, 8vw, 80px); font-weight: 900; margin-top: 12px; letter-spacing: -2px; font-family: 'Space Grotesk', monospace; animation: glitchFlicker 3s infinite; }
.testi-title span { background: linear-gradient(to right, #ffffff, #a5f3fc, #a5b4fc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)); }
@keyframes glitchFlicker { 0%, 100% { text-shadow: 0.5px 0 0 rgba(0,255,255,0.3), -0.5px 0 0 rgba(255,0,255,0.2); } 50% { text-shadow: -0.8px 0 0 cyan, 0.8px 0 0 magenta; } }
.testi-subtitle { color: rgba(207,250,254,0.7); max-width: 600px; margin: 20px auto 0; font-size: clamp(14px, 2vw, 18px); font-weight: 500; letter-spacing: 0.5px; border-left: 4px solid rgba(0,255,255,0.7); padding-left: 20px; text-align: left; }
.testi-subtitle .font-mono { font-family: monospace; color: #67e8f9; }
@media (min-width: 768px) { .testi-subtitle { text-align: center; border-left: none; padding-left: 0; } }
.testi-divider { height: 1px; width: 128px; background: linear-gradient(to right, transparent, #22d3ee, transparent); margin: 24px auto 0; }
.testi-carousel { display: grid; grid-template-columns: 1fr; gap: 24px; width: 100%; transition: opacity 0.4s ease; }
@media (min-width: 768px) { .testi-carousel { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .testi-carousel { grid-template-columns: repeat(3, 1fr); } }
.testi-loading { grid-column: 1 / -1; text-align: center; padding: 60px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.testi-spinner { width: 40px; height: 40px; border: 2px solid #22d3ee; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; }
.testi-loading p { color: rgba(103,232,249,0.7); font-family: monospace; letter-spacing: 1px; }
.testi-card { position: relative; overflow: hidden; border-radius: 16px; padding: 24px; backdrop-filter: blur(14px); background: rgba(8, 10, 18, 0.7); border: 1px solid rgba(0, 255, 255, 0.3); transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1); box-shadow: 0 0 12px rgba(0, 255, 255, 0.2), 0 8px 28px rgba(0,0,0,0.6); display: flex; flex-direction: column; height: 100%; }
.testi-card:hover { border-color: rgba(0, 255, 255, 0.8); box-shadow: 0 20px 35px -12px rgba(0, 255, 255, 0.35), 0 0 0 1px rgba(0,255,255,0.2) inset; transform: translateY(-5px); }
.testi-card::before { content: ''; position: absolute; inset: 0; border-radius: 16px; padding: 1px; background: linear-gradient(to right, #22d3ee, #6366f1); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.7s; pointer-events: none; }
.testi-card:hover::before { opacity: 1; }
.testi-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.testi-quote { font-family: 'Space Grotesk', monospace; font-size: 60px; font-weight: 900; color: rgba(34,211,238,0.4); line-height: 1; transition: all 0.3s; }
.testi-card:hover .testi-quote { color: rgba(103,232,249,0.7); text-shadow: 0 0 6px cyan; }
.testi-quality { font-size: 9px; font-family: monospace; color: rgba(34,211,238,0.3); background: rgba(0,0,0,0.3); padding: 2px 8px; border-radius: 4px; letter-spacing: 1px; }
.testi-message { color: #e5e7eb; line-height: 1.7; font-size: clamp(14px, 1.5vw, 18px); font-weight: 500; letter-spacing: 0.3px; flex-grow: 1; }
.testi-separator { display: flex; align-items: center; gap: 8px; margin: 20px 0; }
.testi-separator .line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(34,211,238,0.4)); }
.testi-separator .line.right { background: linear-gradient(to left, transparent, rgba(34,211,238,0.4)); }
.testi-separator .diamond { width: 6px; height: 6px; background: rgba(34,211,238,0.8); transform: rotate(45deg); }
.testi-author { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.testi-avatar-wrap { position: relative; flex-shrink: 0; }
.testi-avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(34,211,238,0.8); box-shadow: 0 0 10px rgba(0,255,255,0.5); background: rgba(0,0,0,0.3); backdrop-filter: blur(4px); }
.testi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testi-avatar-dot { position: absolute; bottom: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; background: #06b6d4; border: 1px solid #000; box-shadow: 0 0 4px rgba(0,0,0,0.3); }
.testi-author-info h4 { font-weight: bold; color: #fff; font-size: 18px; letter-spacing: -0.5px; display: flex; align-items: center; gap: 6px; }
.testi-gender-badge { font-size: 10px; font-family: monospace; background: rgba(6,182,212,0.3); color: #67e8f9; padding: 2px 6px; border-radius: 4px; }
.testi-author-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.testi-live { font-size: 9px; font-family: monospace; color: rgba(103,232,249,0.7); letter-spacing: 1px; text-transform: uppercase; }
.testi-position { font-size: 12px; color: rgba(207,250,254,0.6); font-weight: 500; }
.testi-footer { margin-top: 50px; }
.testi-status-row { display: flex; justify-content: center; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.testi-status-badge { font-size: 10px; font-family: monospace; color: rgba(34,211,238,0.6); background: rgba(0,0,0,0.4); padding: 4px 12px; border-radius: 50px; backdrop-filter: blur(4px); border: 1px solid rgba(34,211,238,0.3); }
.testi-status-info { font-size: 12px; font-family: monospace; color: rgba(103,232,249,0.5); display: flex; align-items: center; gap: 8px; }
.testi-pulse-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #22d3ee; animation: pulse 1.5s infinite; }
.testi-meta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; font-size: 10px; font-family: monospace; color: rgba(103,232,249,0.4); letter-spacing: 1px; }
.testi-copyright { margin-top: 12px; text-align: center; font-size: 9px; color: rgba(34,211,238,0.2); }
/* ========== SMOOTH REVEAL ANIMATIONS ========== */
.reveal-section { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.reveal-section.visible { opacity: 1; transform: translateY(0); }
.skeleton-loader { width: 100%; height: 120px; background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; border-radius: 12px; }
@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* ========== BUTTONS ========== */
#back-to-top,#back-to-home{all:unset;position:fixed;right:20px;background-color:#192a56;color:#fff;border:none;border-radius:50%;width:60px;height:60px;cursor:pointer;opacity:0;transition:opacity .5s ease,transform .5s ease;display:flex;align-items:center;justify-content:center;transform:translateY(20px);box-shadow:0 4px 6px rgba(0,0,0,.1);z-index:2000;pointer-events:auto}
#back-to-home{background-color:#4CAF50;bottom:100px}#back-to-top{bottom:30px}
#back-to-top.show,#back-to-home.show{opacity:1;transform:translateY(0)}
#back-to-top svg,#back-to-home svg{width:32px;height:32px;fill:#fff;transition:transform .5s ease}
#back-to-top:hover,#back-to-home:hover{background-color:#273c75}#back-to-home:hover{background-color:#45a049}
#back-to-top:hover svg,#back-to-home:hover svg{transform:rotate(360deg)}
@media(max-width:768px){#back-to-top,#back-to-home{width:50px;height:50px;bottom:80px}#back-to-home{bottom:140px}}
/* ========== FOOTER ========== */
footer{background-color:#1a1a2e;padding:30px 20px;text-align:center;color:#fff;margin-top:auto;border-top:2px solid #00bcd4}
footer p{margin:0;font-size:14px}
/* ========== FEATHER TRANSITIONS ANTAR SECTION ========== */
.section-jadwal::after{content:'';position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(to bottom,transparent,rgba(20,0,40,1));pointer-events:none;z-index:2;}
.section-program::before{content:'';position:absolute;top:0;left:0;right:0;height:120px;background:linear-gradient(to top,transparent,rgba(44,11,62,0.9));pointer-events:none;z-index:2;}
.section-program::after{content:'';position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(to bottom,transparent,#05070f);pointer-events:none;z-index:2;}