/* OLD Slider */
        .containerv2 {
            border-radius: 0px;
            padding: 0px;   
            background-color: #fff;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: -30px;
        }

        .sliderv2 .slick-slide {
            border: solid 1px #19b3ac;
            border-radius: 5px;
        }

        .sliderv2 .slick-slide img {
            width: 100%;
        }

        /* make button larger and change their positions */
        .slick-prev, .slick-next {
            width: 50px;
            height: 50px;
            z-index: 1;
        }
        .slick-prev {
            left: 5px;
        }
        .slick-next {
            right: 5px;
        }
        .slick-prev:before, 
        .slick-next:before {
            font-size: 35px;
            text-shadow: 0 0 10px rgba(0,0,0,0.5);
        }
        
        /* move dotted nav position */
        .slick-dots {
            bottom: 10px;
        }
        /* enlarge dots and change their colors */
        .slick-dots li button:before {
            font-size: 10px;
            color: #fff;
            text-shadow: 0 0 10px rgba(0,0,0,0.5);
            opacity: 1;
        }
        .slick-dots li.slick-active button:before {
            color: #dedede;
        }

        /* hide dots and arrow buttons when slider is not hovered */
        .sliderv2:not(:hover) .slick-arrow,
        .sliderv2:not(:hover) .slick-dots {
            opacity: 0;
        }
        /* transition effects for opacity */
        .slick-arrow,
        .slick-dots {
            transition: opacity 0.5s ease-out;
        }

        .container1 {
          position: relative;
        }

        .bottomleft {
          position: absolute;
          bottom: 20px;
          left: 5px;
          font-size: 8pt;
          font-family:"arial";
          background-color: rgba(255, 255, 255, 1.0);
          border-radius: 4px;
          padding: 1px 5px 1px 5px;
        }

    /* NEW Slider */
        .slider-wrapper {
            position: relative;
            border-radius: 5px 5px 5px 5px; /* begian yang berbeda */
            border: 1px solid #19b3ac;
            padding: 0px;
            background-color: #fff;
            margin-left: 0px;
            margin-right: auto;        
        }

        /* Slider Utama */
        .main-slider {
            width: 100%;
            overflow: hidden;
            position: relative;
            border: 0px solid #19b3ac;
            border-radius: 0px;
            min-height: 0px; /* agar tinggi tetap ada walau semua slide opacity 0 */
        }

        .slide {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            opacity: 0;
            z-index: 1;
            transition: opacity 0.7s; /* durasi fade bisa diubah */
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 4px 4px 0 0; /* begian yang berbeda */
            pointer-events: none; /* agar hanya slide aktif yang bisa di klik */
        }

        .slide.active {
            opacity: 1;
            z-index: 2;
            pointer-events: auto;
        }

        .slide img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* Panah Navigasi */
        .arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            text-shadow: 0 0 10px rgba(0,0,0,0.5);
            font-size: 30px;
            color: rgba(255, 255, 255, 0.7);
            padding: 0 14px;
            cursor: pointer;
            user-select: none;
            z-index: 10;
            opacity: 0;
            pointer-events: none;
            transition: 
                opacity 0.3s,
                color 0.3s,
                background 0.3s,
                box-shadow 0.3s,
                transform 0.3s;
        }

        .main-slider:hover .arrow {
            opacity: 1;
            pointer-events: auto;
        }

        .arrow.left {
            left: 5px;
        }

        .arrow.right {
            right: 5px;
        }

        .arrow:hover {
            color: #fff;
        }

        /* Navigasi Pratinjau (Thumbnail) */
        .thumbnail-nav {
            display: flex;
            justify-content: space-between; /* thumbnail merata kiri-kanan */
            align-items: stretch;
            gap: 0; /* hilangkan jarak antar thumbnail */
            margin-top: 0;
            padding: 0;
            border-radius: 0 0 4px 4px;
            overflow: hidden;
            background: #000; /* warna latar belakang seperti tab */
            border-top: 1px solid #fff;
        }

        .thumb {
            flex: 1 1 0;
            min-width: 0;
            height: 80px;
            border-radius: 0;
            border: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            cursor: pointer;
            opacity: 0.6;
            filter: grayscale(30%);
            transition: 
                opacity 0.3s,
                filter 0.3s,
                box-shadow 0.3s,
                border-color 0.3s;
            box-shadow: none;
            border-right: 1px solid #fff;
            background: #f5f5f5;
        }

        @media (max-width: 600px) {
        .thumb {
            height: 35px;
        }
        }

        .thumb:last-child {
            border-right: none;
        }

        .thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none;
            display: block;
        }

        .thumb.active,
        .thumb:active,
        .thumb:hover {
            opacity: 1;
            filter: none;
            background: #19b3ac;
            box-shadow: 0 2px 8px #19b3ac33;
            z-index: 2;
        }


    /* Marquee */
       .info-terkini-bar {
            display: flex;
            width: 100%;
            height: 30px;
            background: #008B8B;
            align-items: center;
            font-family: Arial, sans-serif;
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 10px;
            position: relative;
        }

        .info-terkini-label {
            background: #eb193a;
            color: #fff;
            padding: 0 10px;
            height: 100%;
            display: flex;
            align-items: center;
            font-weight: bold;
            font-size: 13px;
            white-space: nowrap;
            z-index: 10; /* Agar label tetap di depan teks */
            position: relative;
            
        }

        .info-terkini-marquee {
            flex: 1;
            height: 100%;
            overflow: hidden;
            position: relative;
            display: flex;
            align-items: center;
        }

        .marquee-inner {
            display: inline-block;
            white-space: nowrap;
            position: absolute;
            left: 100%; /* Mulai tepat di batas kanan area berita */
            animation: marquee-logic 50s linear infinite;
            will-change: transform;
        }

        /* Logika agar tidak ada jeda: 
        Mulai dari luar kanan (left: 100%) 
        Berakhir saat teks sepenuhnya keluar ke kiri (translateX(-100%)) */
        @keyframes marquee-logic {
            0% {
                transform: translateX(0);
                left: 100%;
            }
            100% {
                transform: translateX(-100%);
                left: 0;
            }
        }

        .info-terkini-marquee:hover .marquee-inner {
            animation-play-state: paused;
        }

        .info-terkini-marquee a {
            color: #fff;
            text-decoration: none;
            padding: 0 15px;
            font-size: 14px;
        }

        .info-terkini-marquee a:hover {
            color: #d2ff04;
            text-decoration: underline;
        }

        .marquee-separator {
            color: #d2ff04;
            font-weight: bold;
        }


        /* WEATHER CARD */
        #weatherCard {
            position: relative;
            width: 100%;
            height: 125px;
            border-radius: 8px;
            color: white;
            padding: 15px;
            box-sizing: border-box;
            border: #d7d7d7 solid 1px;
            overflow: hidden;
            transition: background 2s linear;
            transform: translateZ(0);
        }

        canvas,
        #clouds,
        #fog {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        #starsCanvas { z-index: 1; }
        #rainCanvas { z-index: 2; }
        #lightningCanvas { z-index: 3; }
        #clouds { z-index: 4; }
        #fog { z-index: 5; }
        canvas {
            transform: translateZ(0);
        }

        #sun, #moon {
            position: absolute;
            top: 20px;
            right: 20px;
            border-radius: 50%;
            display: none;
            z-index: 6;
        }

        #sun {
            width: 60px;
            height: 60px;
            background: radial-gradient(circle, #FFD93D, orange);
            box-shadow: 0 0 30px rgba(255,200,0,0.8);
        }

        #moon {
            width: 50px;
            height: 50px;
            background: #eee;
            box-shadow: 0 0 20px rgba(255,255,255,0.5);
        }

        #clouds {
            width: 200%;
            background: url('https://pngimg.com/uploads/cloud/cloud_PNG16.png');
            background-repeat: repeat-x;
            background-size: contain;
            top: 20%;
            opacity: 0.8;
            display: none;
            filter: blur(2px);
            will-change: transform;
            transform: translateZ(0);
        }

        #fog {
            backdrop-filter: blur(4px);
            background: rgba(255,255,255,0.15);
            opacity: 0;
            z-index: 5;
            transition: 0.5s;
            transform: translateZ(0);
        }

        .top {
            position: absolute;
            top: 10px;
            left: 15px;
            z-index: 20;
            font-family: arial;
            font-size: 14px;
            text-shadow:
                0 2px 4px rgba(0,0,0,0.7),
                0 0 10px rgba(255,255,255,0.3);
        }

        #dateTime {
            font-size: 10px;
            position: relative;
            z-index: 21;
            transform: translateZ(0);
            will-change: transform;
        }

        #temp {
            margin-top: 5px;
            font-size: 14px;
        }

        #weatherCard::after {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15), transparent);
            pointer-events: none;
        }