.elementor-kit-8{--e-global-color-primary:#FF3D2E;--e-global-color-secondary:#111111;--e-global-color-text:#222222;--e-global-color-accent:#F4F4F4;--e-global-color-554d0d8:#E63946;--e-global-color-82922ac:#FF6B6B;--e-global-color-dd985e1:#F3F4F6;--e-global-color-ea6e956:#FFFFFF;--e-global-typography-primary-font-family:"Outfit";--e-global-typography-primary-font-size:32px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.3em;--e-global-typography-primary-letter-spacing:0em;--e-global-typography-secondary-font-family:"Outfit";--e-global-typography-secondary-font-size:24px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:1.4em;--e-global-typography-secondary-letter-spacing:-0.01em;--e-global-typography-text-font-family:"Mulish";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-family:"Mulish";--e-global-typography-accent-font-size:14px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:uppercase;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:5px;}.elementor-element{--widgets-spacing:5px 5px;--widgets-spacing-row:5px;--widgets-spacing-column:5px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-8{--e-global-typography-primary-font-size:26px;--e-global-typography-primary-line-height:1.3em;--e-global-typography-secondary-font-size:24px;--e-global-typography-secondary-line-height:1.6em;--e-global-typography-text-font-size:16px;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-size:13px;--e-global-typography-accent-line-height:1.2em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* --- STYLE TRENDING TAGS: CATCHY PILLS --- */

/* 1. Container Utama (Wadah) */
.analisa-trending-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: nowrap; /* Agar memanjang ke samping (Horizontal Scroll) */
    overflow-x: auto; /* Aktifkan scroll samping jika tag banyak */
    gap: 12px; /* Jarak antar kapsul */
    padding: 10px 5px; /* Memberi ruang napas atas bawah */
    scrollbar-width: none; /* Sembunyikan scrollbar di Firefox */
    -ms-overflow-style: none;  /* Sembunyikan scrollbar di IE/Edge */
    
    /* Garis pemisah atas-bawah tipis biar rapi */
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    background-color: #fff;
}

/* Sembunyikan Scrollbar di Chrome/Safari */
.analisa-trending-wrapper::-webkit-scrollbar {
    display: none;
}

/* 2. Label "TRENDING" (Icon Style) */
.trend-label {
    background-color: #FF3D2E; /* Merah Brand Analisa */
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 4px; /* Kotak sedikit tumpul */
    white-space: nowrap; /* Jangan dipotong */
    display: flex;
    align-items: center;
    box-shadow: 0 4px 10px rgba(255, 61, 46, 0.3); /* Bayangan merah */
}

/* Menambahkan Icon Petir/Grafik via CSS (Opsional tapi keren) */
.trend-label::before {
    content: "⚡"; /* Ikon Petir */
    margin-right: 6px;
    font-size: 14px;
}

/* 3. Kapsul Tag (Tombol Berita) */
a.analisa-trend-pill {
    display: inline-block;
    background-color: #ffffff; /* Warna dasar putih */
    color: #333; /* Teks Hitam */
    font-family: 'Mulish', sans-serif;
    font-size: 14px; /* Ukuran nyaman mata orang tua */
    font-weight: 600;
    text-decoration: none;
    padding: 6px 18px; /* Padding luas biar tombol terlihat besar */
    border-radius: 50px; /* Bentuk Bulat Kapsul Penuh */
    border: 1px solid #e0e0e0; /* Garis tepi abu halus */
    white-space: nowrap; /* Teks satu baris */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Animasi membal halus */
}

/* 4. Efek Hover (Saat Disentuh) */
a.analisa-trend-pill:hover {
    background-color: #FF3D2E; /* Berubah Merah */
    color: #ffffff !important; /* Teks Putih */
    border-color: #FF3D2E;
    transform: translateY(-3px); /* Tombol melayang naik */
    box-shadow: 0 5px 15px rgba(255, 61, 46, 0.25); /* Bayangan glow */
}

/* 5. Tampilan Mobile */
@media (max-width: 767px) {
    .analisa-trending-wrapper {
        padding-left: 15px; /* Memberi jarak start di HP */
        padding-right: 15px;
    }
    .trend-label {
        font-size: 11px;
        padding: 5px 10px;
    }
    a.analisa-trend-pill {
        font-size: 13px;
        padding: 5px 14px;
    }
}
/* --- STYLE POPULER LIST: ANALISA NEWS VERSION --- */

/* 1. Reset Counter Ranking */
.analisa-populer-list {
    counter-reset: analisa-ranking;
    padding-top: 10px;
}

/* 2. Container Item Berita */
.populer-item {
    position: relative;
    /* Memberi ruang kosong di kiri selebar 65px untuk Nomor Besar */
    padding-left: 65px; 
    padding-right: 0;
    margin-bottom: 25px; /* Jarak antar berita */
    border-bottom: 1px solid #f0f0f0; /* Garis pemisah halus */
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 50px;
}

/* Hapus garis pada item terakhir */
.populer-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* 3. NOMOR RANKING (Gaya Outline Catchy) */
.populer-item::before {
    counter-increment: analisa-ranking;
    content: counter(analisa-ranking);
    
    /* Posisi Mutlak di Kiri Atas */
    position: absolute;
    left: -5px; /* Sedikit offset ke kiri biar dinamis */
    top: -8px;  /* Naik sedikit ke atas */
    
    /* Tipografi Angka */
    font-family: 'Outfit', sans-serif; /* Gunakan Font Judul Utama */
    font-size: 52px; /* Ukuran Besar */
    font-weight: 900; /* Paling Tebal */
    font-style: italic; /* Miring agar kesan cepat/trending */
    line-height: 1;
    
    /* Styling Garis Tepi (Outline) */
    color: transparent; /* Tengahnya transparan */
    -webkit-text-stroke: 2px #e0e0e0; /* Garis tepi abu muda (Default) */
    
    /* Transisi Halus */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
}

/* 4. Judul Berita */
.populer-title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 18px; /* Ukuran Font Judul diperbesar (Friendly Orang Tua) */
    font-weight: 700; /* Bold */
    line-height: 1.35;
    color: #111111; /* Hitam Pekat */
    z-index: 2;
    transition: color 0.3s ease;
}

/* Link Wrapper */
.populer-item a {
    text-decoration: none;
    display: block;
}

/* --- 5. EFEK INTERAKSI (HOVER) --- */

/* Saat mouse menyentuh kotak berita: */
.populer-item:hover .populer-title {
    color: #FF3D2E; /* Judul berubah jadi Merah Brand */
}

.populer-item:hover::before {
    /* Nomor berubah drastis */
    color: #FF3D2E; /* Isi penuh warna Merah */
    -webkit-text-stroke: 0px; /* Hapus garis tepi */
    transform: translateX(10px) scale(1.1); /* Geser kanan & membesar */
    opacity: 0.2; /* Dibuat agak transparan biar tidak menutupi teks */
}

/* --- 6. WARNA KHUSUS RANKING 1, 2, 3 --- */

/* Ranking 1: EMAS (Spesial) */
.populer-item:nth-child(1)::before {
    color: #D4AF37; /* Emas Solid */
    -webkit-text-stroke: 0px;
    opacity: 1; /* Tetap jelas */
    font-size: 60px; /* Paling besar */
}
/* Ranking 1 Hover */
.populer-item:nth-child(1):hover::before {
    transform: translateX(5px);
    opacity: 0.3; /* Memudar saat hover */
}

/* Ranking 2 & 3: Abu Tua (Lebih tegas dari 4 dst) */
.populer-item:nth-child(2)::before,
.populer-item:nth-child(3)::before {
    -webkit-text-stroke: 2px #999; /* Garis lebih gelap */
}

/* --- STYLE JUDUL 1: POWER LINE (VERTICAL) --- */
.analisa-title-1 .elementor-heading-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800; /* Sangat Tebal agar jelas */
    font-size: 24px; /* Ukuran Besar */
    text-transform: uppercase;
    color: #111;
    margin-bottom: 20px;
    
    /* Garis Merah di Kiri */
    border-left: 6px solid #FF3D2E; 
    padding-left: 15px; /* Jarak teks dari garis */
    line-height: 1;
    
    /* Trik Visual: Background samar biar lebih 'timbul' */
    background: linear-gradient(to right, #FFF5F5 0%, rgba(255,255,255,0) 80%);
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 0 50px 50px 0; /* Sudut kanan membulat manis */
}

/* --- HEADER MOBILE: LOGO + POPUP SEARCH --- */

@media (max-width: 767px) {
    
    /* 1. CONTAINER HEADER (Rapi Sejajar) */
    .elementor-location-header .e-con,
    .elementor-location-header .elementor-container {
        display: flex;
        justify-content: space-between !important;
        align-items: center !important;
        padding-top: 10px;
        padding-bottom: 5px;
        /* Opsional: Sticky Header */
        /* position: sticky; top: 0; z-index: 99; background: #fff; */
    }

    /* 2. LOGO (Ukuran Pas) */
    .elementor-widget-theme-site-logo {
        flex-grow: 1; /* Ambil sisa ruang */
        width: auto !important; 
    }
    .elementor-widget-theme-site-logo img {
        height: 38px !important; /* Tinggi logo ideal di HP */
        width: auto !important;
    }

    /* 3. TOMBOL SEARCH (ICON ONLY) */
    .elementor-search-form__toggle {
        background-color: transparent !important; /* Hapus background kotak */
        color: #333 !important; /* Warna Ikon Hitam */
        font-size: 24px !important; /* Ukuran Ikon Besar */
        padding: 10px !important; /* Area sentuh luas */
        border: none !important;
    }
    
    /* Ikon Search jadi Merah saat disentuh/aktif */
    .elementor-search-form__toggle:hover,
    .elementor-search-form--opened .elementor-search-form__toggle {
        color: #FF3D2E !important; /* Merah Brand */
    }

    /* --- TAMPILAN POPUP (SAAT IKON DIKLIK) --- */
    
    /* Background Layar Penuh */
    .elementor-search-form__container {
        background-color: rgba(255, 255, 255, 0.98) !important; /* Putih agak transparan */
        backdrop-filter: blur(5px); /* Efek blur modern di belakang */
    }

    /* Input Teks Pencarian */
    .elementor-search-form__input {
        background-color: transparent !important;
        border: none !important;
        border-bottom: 2px solid #FF3D2E !important; /* Garis bawah merah */
        border-radius: 0 !important;
        font-family: 'Outfit', sans-serif !important;
        font-size: 24px !important; /* Teks yang diketik besar */
        font-weight: 700 !important;
        color: #333 !important;
        padding: 20px 0 !important;
    }
    
    /* Placeholder (Tulisan 'Search...') */
    .elementor-search-form__input::placeholder {
        color: #ccc;
        font-weight: 400;
    }

    /* Tombol Close (X) */
    .dialog-close-button {
        color: #FF3D2E !important; /* Silang merah */
        font-size: 30px !important;
    }
}

/* --- FIX JARAK LOGO & MENU MOBILE (COMPACT MODE) --- */
@media (max-width: 767px) {
    
    /* 1. Hapus Jarak Bawah pada Widget Logo */
    .elementor-widget-theme-site-logo {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 2. Hapus Jarak pada Container Pembungkus (Penyebab utama biasanya disini) */
    .elementor-location-header .elementor-container,
    .elementor-location-header .e-con {
        gap: 0 !important; /* Mematikan gap bawaan 20px Elementor */
        row-gap: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 3. Tarik Menu Scroll agar Rapat ke Atas */
    .analisa-mobile-scroll-menu {
        margin-top: -5px !important; /* Tarik sedikit ke atas */
        padding-top: 0 !important;
    }
    
    .analisa-mobile-scroll-menu ul {
        margin-top: 0 !important; /* Reset margin list */
    }

    /* 4. Pastikan Tombol Search juga tidak punya jarak bawah */
    .elementor-widget-html {
        margin-bottom: 0 !important;
    }
}

/* --- BATASI JUDUL 3 BARIS (AUTO CLAMP) --- */

.analisa-limit-title .elementor-post__title,
.analisa-limit-title h3, 
.analisa-limit-title h4, .analisa-limit-title h2 {
    /* Logika Pemotong Baris */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Maksimal 3 Baris */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Munculkan titik-titik (...) */
    
    /* Agar Potongan Rapi */
    line-height: 1.4em; /* Jarak antar baris */
    max-height: 4.2em;  /* (1.4em x 3 baris) = 4.2em. Menjaga tinggi tetap konsisten */
    
    /* Styling Tambahan (Opsional) */
    margin-bottom: 10px;
    padding-right: 5px; /* Sedikit jarak agar huruf di kanan tidak terpotong kasar */
}

/* --- FIX UNTUK MOBILE (OPSIONAL) --- */
@media (max-width: 767px) {
    .analisa-limit-title .elementor-post__title {
        font-size: 16px; /* Pastikan font tidak terlalu besar di HP */
        line-height: 1.35em;
        max-height: 4.05em; /* Sesuaikan tinggi maskimal di HP */
    }
}/* End custom CSS */