/* ============================================================
   SLIDERNEWS-NEW.CSS - Slider Headline Media Positif
   Disusun ulang 17 Juli 2026
   ============================================================

   >>> BREAKPOINT FILE INI <<<
     (tanpa media query)         Desktop, 992px ke atas
     @media (max-width: 991px)   Tablet
     @media (max-width: 767px)   HP
     @media (max-width: 480px)   HP kecil
   Definisi lengkap & alasannya ada di global-new.css bagian atas.

   ------------------------------------------------------------
   >>> NAMA KELAS TIDAK DIUBAH - INI DISENGAJA <<<
   Slider digerakkan assets/js/slidernews-new.js yang mencari
   .slider-slide, .slider-dot, .slider-prev, .slider-next,
   data-index, dan .active. Kalau diganti nama, slider mati.
   Beda dengan header (yang saya beri awalan mp-), di sini nama
   lama HARUS dipertahankan sampai file JS-nya bisa saya periksa.

   ------------------------------------------------------------
   YANG DIBERESKAN 17 Juli 2026:

   [A] SLIDER SEJAJAR DENGAN KONTEN.
       Dulu: margin-left/right 1.25rem (angka mati) -> slider
       nempel 20px dari kiri layar, sementara konten di bawahnya
       pakai "margin: 0 auto" alias di tengah. Di layar 1920px
       selisihnya ratusan piksel.
       Sekarang: margin auto + lebar ikut var(--container-max),
       jadi tepi kiri-kanan slider persis segaris dengan kolom
       artikel di bawahnya. Ini yang kamu sebut "kanan kiri bersih".

   [B] ATURAN KEMBAR DIHAPUS.
       Di blok 480px, .slider-news dulu ditulis DUA KALI dengan
       min-height berbeda (15.625rem lalu 18.625rem). Yang kedua
       yang menang. Sekarang tinggal satu (18.625rem) - hasil
       tampilannya sama persis, cuma tidak membingungkan lagi.

   [C] BLOK 320px DIHAPUS.
       Di luar standar, dan layar 320px praktis sudah punah. Aturan
       480px sudah menanganinya. Isi lamanya: height 35vh,
       min-height 13.75rem, title 1.5rem, padding 1rem 0.75rem.

   [D] URUTAN DIRAPIKAN: kerangka -> isi -> kontrol -> responsive.
       Tiap aturan hanya muncul di SATU tempat.
   ============================================================ */


/* ============================================================
   [1] KERANGKA
   ============================================================ */
.slider-news {
    position: relative;

    /* Lebar & posisi mengikuti .container di global-new.css.
       1200px hanyalah cadangan kalau global-new.css gagal termuat.
       >> Mau ubah lebar? Ubah --container-max di global-new.css,
          slider DAN konten ikut serentak. Jangan ubah di sini. */
    max-width: var(--container-max, 1200px);
    margin: 1.25rem auto 0;      /* auto kiri-kanan = di tengah */

    height: 75vh;
    min-height: 25rem;
    max-height: 37.5rem;

    overflow: hidden;
    background: #000;
}

.slides-container {
    position: relative;
    width: 100%;
    height: 100%;
}


/* ============================================================
   [2] BADGE HEADLINE (kiri atas)
   ============================================================ */
.slider-badge {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(0.25rem);
}

.badge-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: #dc2626;
    animation: pulse 2s infinite;
}

.badge-text {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.0625rem;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}


/* ============================================================
   [3] SLIDE & GAMBAR
   ============================================================ */
.slider-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* Kelas ini dipasang & dilepas oleh slidernews-new.js. Jangan
   diganti nama, jangan dihapus. */
.slider-slide.active {
    opacity: 1;
    visibility: visible;
}

.slide-figure {
    margin: 0;
    width: 100%;
    height: 100%;
}

.slide-link {
    display: block;
    width: 100%;
    height: 100%;
}

.slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* isi penuh tanpa gepeng, sisanya dipotong */
    display: block;
}


/* ============================================================
   [4] OVERLAY & TEKS
   ============================================================ */
.slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
    width: 80%;
    max-width: 50.75rem;
    height: 100%;
    padding: 8rem 6rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;

    /* Gelap di kiri, memudar ke kanan - supaya judul tetap terbaca
       tanpa menutupi gambar. */
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.7) 50%,
        rgba(0, 0, 0, 0.4) 80%,
        transparent 100%
    );
}

.slide-title {
    margin: 0 0 1rem;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

.slide-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.slide-title a:hover {
    color: #60a5fa;
}

.slide-meta {
    margin-top: 0.5rem;
}

.slide-date {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
}

.slide-date svg {
    width: 0.875rem;
    height: 0.875rem;
    flex: 0 0 auto;
}

/* Tampilan kalau belum ada berita headline sama sekali */
.slide-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.5);
}


/* ============================================================
   [5] PANAH NAVIGASI
   ============================================================ */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(0.25rem);
    transition: background 0.3s ease, transform 0.3s ease;
}

.slider-nav:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-50%) scale(1.1);
}

.slider-nav svg {
    width: 1.5rem;
    height: 1.5rem;
}

.slider-prev { left: 1.5rem; }
.slider-next { right: 1.5rem; }


/* ============================================================
   [6] TITIK INDIKATOR (kanan bawah)
   ============================================================ */
.slider-dots {
    position: absolute;
    bottom: 1.5rem;
    right: 2rem;
    z-index: 10;
    display: flex;
    gap: 0.5rem;
}

.slider-dot {
    width: 0.75rem;
    height: 0.75rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

.slider-dot:hover {
    background: rgba(255, 255, 255, 0.8);
}

/* Dipasang & dilepas oleh slidernews-new.js. Jangan diganti nama. */
.slider-dot.active {
    background: #fff;
    transform: scale(1.2);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ====== [7] TABLET (max-width: 991px) ====== */
@media (max-width: 991px) {
    .slider-news {
        height: 50vh;
        min-height: 21.875rem;
    }

    .slide-content {
        width: 70%;
        padding: 2rem;
    }

    .slide-title {
        font-size: 1.7rem;
    }
}


/* ====== [8] HP (max-width: 767px) ====== */
@media (max-width: 767px) {

    /* ============================================================
       TAMPILAN HP ALA PSYCHOLOGY TODAY - v2, dirombak 19 Juli 2026
       ------------------------------------------------------------
       Perbaikan dari v1 (yang bikin gambar jadi kotak hitam):
       [1] GAMBAR HITAM DIPERBAIKI. Penyebabnya .slide-link & .slide-figure
           masih height:100% dari aturan umum, jadi gambar 15rem mengambang
           di area hitam. Sekarang figure & link ikut tinggi gambar.
       [2] KOTAK PUTIH NAIK MENUMPUK ke bawah gambar (margin-top negatif),
           persis PT - gambar tetap terlihat luas, kotak sedikit overlap.
       [3] SPACE KIRI-KANAN kotak putih (margin samping) biar cantik spt PT.
       [4] TANGGAL DISEMBUNYIKAN di slider (hanya ada di detailberita).

       HTML & JS tetap TIDAK diubah. Hanya CSS blok HP ini.
       ============================================================ */

    .slider-news {
        height: auto;
        min-height: 0;
        margin: 1rem auto 0;
        background: transparent;   /* wadah tak berwarna, biar tak ada hitam nyasar */
        overflow: visible;         /* biar kotak putih yang menonjol tak terpotong */
        box-shadow: none;
    }

    .slides-container {
        height: auto;
        overflow: visible;
    }

    /* ⚠️ PERBAIKAN PENTING (19 Juli, v3):
       Masalah "gambar lompat-lompat, kotak putih kadang atas/bawah, jarak
       ke Kesehatan jauh" - SEMUANYA dari satu sebab: semua 6 slide tampil
       bertumpuk sekaligus.

       Kenapa: slider ini menyembunyikan slide non-aktif lewat CSS
       (.slider-slide { opacity:0; visibility:hidden; position:absolute }).
       JS cuma menambah/menghapus kelas .active. Di versi mobile sebelumnya
       aku timpa jadi "position:relative; display:block" UNTUK SEMUA slide -
       jadi mekanisme sembunyinya rusak, keenam slide muncul memanjang.

       Perbaikan: slide non-aktif tetap disembunyikan seperti aturan umum.
       HANYA slide .active yang dibuat "relative" supaya dia mengalir normal
       (dan kotak putihnya bisa menumpuk). Tinggi wadah otomatis mengikuti
       slide aktif saja - tidak lagi menjumlah semua slide. */

    /* Slide non-aktif: sembunyi & tidak makan tempat (ikut aturan umum) */
    .slider-slide {
        position: absolute;
        inset: 0;
        height: auto;
        opacity: 0;
        visibility: hidden;
    }

    /* Slide aktif: tampil & mengalir normal, jadi wadah setinggi dia saja */
    .slider-slide.active {
        position: relative;
        inset: auto;
        opacity: 1;
        visibility: visible;
    }

    /* ---- GAMBAR: utuh & luas, sudut atas membulat ---- */
    .slide-figure {
        position: relative;
        width: 100%;
        height: 15rem;             /* 240px - tinggi gambar */
        margin: 0;
        border-radius: 0.75rem;
        overflow: hidden;
        /* Latar lembut: kalau gambar telat/gagal dimuat, yang terlihat
           abu tipis - BUKAN kotak hitam/putih kosong yang jelek.
           (19 Juli: sebagian slide gambarnya tak ada di localhost.) */
        background: #eef1f4;
    }

    .slide-link {
        display: block;
        width: 100%;
        height: 100%;              /* ikut figure, bukan mengambang */
    }

    .slide-image {
        width: 100%;
        height: 100%;              /* penuhi figure 240px */
        object-fit: cover;
        object-position: center;
        display: block;
    }

    /* ---- KOTAK PUTIH JUDUL: naik menumpuk + space kiri-kanan ---- */
    .slide-content {
        position: relative;        /* mengalir di bawah gambar */
        z-index: 5;
        width: auto;               /* tidak full - beri margin samping */
        max-width: 100%;
        height: auto;
        margin: -2.5rem 1.25rem 0;  /* NAIK 40px menumpuk gambar + space kiri-kanan 20px */
        padding: 1.25rem 1.25rem 1.5rem;
        background: #ffffff;
        border-radius: 0.75rem;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);  /* melayang halus spt PT */
        color: #1a1a1a;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .slide-title {
        font-size: 1.3rem;
        line-height: 1.3;
        margin: 0;
        color: #1a2b3c;
    }

    .slide-title a {
        color: inherit;
    }

    /* [4] Tanggal disembunyikan di slider */
    .slide-meta,
    .slide-date {
        display: none;
    }

    /* ---- BADGE HEADLINE: pojok kiri-atas gambar ---- */
    .slider-badge {
        top: 0.75rem;
        left: 0.75rem;
        padding: 0.35rem 0.7rem;
        z-index: 6;
    }

    .badge-text {
        font-size: 0.7rem;
    }

    /* ---- PANAH: di tengah GAMBAR (240px/2 = 120px = 7.5rem) ---- */
    .slider-nav {
        top: 7.5rem;
        transform: translateY(-50%);
        width: 2.25rem;
        height: 2.25rem;
        background: rgba(0, 0, 0, 0.35);
    }

    .slider-nav svg {
        width: 1.1rem;
        height: 1.1rem;
    }

    .slider-prev { left: 0.75rem; }
    .slider-next { right: 0.75rem; }

    /* ---- DOTS: di bawah kotak putih, warna gelap ---- */
    .slider-dots {
        position: static;
        transform: none;
        display: flex;
        justify-content: center;
        gap: 0.4rem;
        margin-top: 0.875rem;
        padding: 0;
    }

    .slider-dot {
        width: 0.5rem;
        height: 0.5rem;
        background: rgba(0, 0, 0, 0.2);
    }

    .slider-dot.active {
        background: rgba(0, 0, 0, 0.6);
    }
}


/* ====== [9] HP KECIL (max-width: 480px) ====== */
@media (max-width: 480px) {
    /* HP kecil: ikut gaya PT dari blok 767, cuma diperkecil.
       Gambar 200px, tinggi figure ikut, kotak putih tetap overlap. */
    .slider-news {
        height: auto;
        min-height: 0;
    }

    /* Gambar sedikit lebih pendek. figure & image dua-duanya diset
       biar gambar tidak mengambang di area hitam. */
    .slide-figure {
        height: 12.5rem;       /* 200px */
    }

    .slide-image {
        height: 100%;
    }

    /* Panah ikut ke tengah gambar baru (200px/2 = 100px = 6.25rem) */
    .slider-nav {
        top: 6.25rem;
    }

    /* Kotak putih: overlap sedikit lebih kecil, margin samping sedikit
       lebih rapat di layar mungil. */
    .slide-content {
        margin: -2rem 1rem 0;
        padding: 1rem 1rem 1.25rem;
    }

    .slide-title {
        font-size: 1.15rem;
    }

    .slider-badge {
        top: 0.6rem;
        left: 0.6rem;
        padding: 0.3rem 0.6rem;
    }

    .badge-dot {
        width: 0.5rem;
        height: 0.5rem;
    }
}


/* ====== [10] SAFE AREA (iPhone berponi / layar melengkung) ====
   Mencegah judul tertutup lekukan layar saat mode landscape.
   ============================================================== */
@supports (padding: max(0px)) {
    @media (max-width: 767px) {
        .slide-content {
            padding-left: max(1rem, env(safe-area-inset-left));
            padding-right: max(1rem, env(safe-area-inset-right));
        }

        .slider-badge {
            left: max(1rem, env(safe-area-inset-left));
        }
    }
}