/*!
Theme Name: DIYNews
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: diynews
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

DIYNews is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* Reset Dasar */
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #ffffff; padding-top:90px; }
        /* ==========================================================
           GLOBAL LINK CLEANER: MENGHAPUS GARIS BAWAH PADA SEMUA LINK
           ========================================================== */
        a {
            text-decoration: none !important;
        }
        
        /* Memastikan efek hover tetap bersih, atau Anda bisa beri efek warna saja */
        


        /* Container */
        .container { max-width: 1200px; margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; }

        /* 1. Container Utama */
.breaking-news-fullwidth {
    background: #d32f2f;
    width: 100%;
    padding: 8px 0;
	margin-top: 20px;
    margin-bottom: 20px;
}

/* 2. Pembungkus Ticker (Wajib ada overflow: hidden) */
/* Pastikan ini ada di CSS Anda */
.news-ticker {
    height: 25px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.ticker-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    height: 100%;
}

.ticker-list li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    /* DIUBAH: Durasi total dipercepat dari 15s menjadi 10s */
    animation: fadeEffect 10s infinite; 
}

/* DIUBAH: Keyframe disesuaikan agar teks cepat muncul lalu cepat berganti */
@keyframes fadeEffect {
    0%, 25%, 100% { opacity: 0; }
    5%, 20% { opacity: 1; }
}

/* DIUBAH: Jeda waktu masuk (delay) dipercepat menjadi kelipatan 2 detik */
.ticker-list li:nth-child(1) { animation-delay: 0s; }
.ticker-list li:nth-child(2) { animation-delay: 2s; }
.ticker-list li:nth-child(3) { animation-delay: 4s; }
.ticker-list li:nth-child(4) { animation-delay: 6s; }
.ticker-list li:nth-child(5) { animation-delay: 8s; }

/* Styling Teks */
.ticker-list li a { 
    color: #fff; 
    text-decoration: none; 
    font-size: 0.9rem; 
    font-weight: 500;
    display: block;
}


/* Memastikan main konten punya ruang minimal agar footer tetap di bawah */
.main-min-height {
    min-height: 400px; /* Ubah angka ini sesuai kebutuhan konten Anda */
    padding-bottom: 50px; /* Jarak antara konten dan footer */
}

/* Jika footer Anda naik ke atas, tambahkan ini ke footer */
footer {
    margin-top: 50px;
    padding: 30px 0;
    border-top: 1px solid #ddd;
}

/* ==========================================================
   CSS HEROES1 - RESPONSIVE EDITION
   ========================================================== */

/* Layout Utama Dua Kolom */
.main-grid { 
    display: grid; 
    grid-template-columns: 2fr 1fr; 
    gap: 30px; 
    width: 100%;
}

.hero-main { 
    background: #fff; 
    padding: 10px; 
    border-radius: 8px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Wadah Gambar Utama */
.hero-wrapper {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    width: 100%;
}

.main-img { 
    width: 100%; 
    height: 380px; /* Ditinggikan sedikit agar lebih proporsional di PC */
    object-fit: cover; 
    border-radius: 4px; 
    transition: opacity 0.5s ease; 
}

/* Grid 4 Tombol Thumbnail Bawah */
.thumbnail-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 10px; 
    margin-top: 15px; 
}

.thumb-item { 
    cursor: pointer; 
    border: 2px solid transparent; 
    transition: 0.3s; 
    border-radius: 4px;
    overflow: hidden;
}

.thumb-item img { 
    width: 100%; 
    height: 80px; 
    object-fit: cover; 
    display: block;
}

.thumb-item.active { 
    border-color: #7b1fa2; 
    transform: scale(1.02); /* Diperkecil dari 1.05 agar tidak merusak layout grid sampingnya */
}

/* Lapisan Teks Overlay di Atas Gambar */
.hero-overlay {
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    padding: 24px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    color: white;
}

.hero-overlay h2 {
    font-size: 1.75rem; /* Ditambahkan penata ukuran judul utama */
    font-weight: 800;
    line-height: 1.3;
    margin: 5px 0;
}

.hero-category { 
    font-size: 0.75rem; 
    background: #7b1fa2; 
    padding: 3px 8px; 
    border-radius: 4px; 
    display: inline-block; 
    font-weight: 700;
    text-transform: uppercase;
}

.hero-date { 
    font-size: 0.75rem; 
    opacity: 0.8; 
    margin-top: 5px; 
}

/* Sektor Komponen Berita Lainnya */
.latest-news-section { 
    margin-top: 30px; 
    background: #fff; 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
}

.section-title { 
    font-size: 1.5rem; 
    margin-bottom: 20px; 
    border-left: 4px solid #d32f2f; 
    padding-left: 15px; 
    font-weight: 700;
}

.news-card { 
    display: flex; 
    gap: 15px; 
    padding: 15px; 
    border-bottom: 1px solid #eee; 
}

/* ==========================================================
   MEDIA QUERIES (BREAKPOINTS ADJUSTMENT)
   ========================================================== */

/* 1. Layar Ukuran Tablet & Laptop Kecil (max-width: 992px) */
@media (max-width: 992px) {
    .main-grid {
        grid-template-columns: 1fr; /* Sidebar otomatis jatuh ke bawah */
        gap: 20px;
    }
    .main-img {
        height: 320px; /* Gambar mengecil di tablet */
    }
    .hero-overlay h2 {
        font-size: 1.4rem; /* Judul menyusut proporsional */
    }
}

/* 2. Layar Ukuran Ponsel / HP (max-width: 576px) */
@media (max-width: 576px) {
    .main-grid {
        gap: 15px;
    }
    
    .hero-main {
        padding: 6px; /* Mempersempit ruang padding di HP agar layar luas */
    }

    .main-img {
        height: 240px; /* Tinggi gambar pas untuk genggaman layar HP */
    }

    .hero-overlay {
        padding: 15px; /* Mengurangi padding dalam teks */
    }

    .hero-overlay h2 {
        font-size: 1.1rem; /* Judul kompak agar tidak memakan ruang gambar */
        line-height: 1.4;
    }

    .hero-category {
        font-size: 0.7rem;
        padding: 2px 6px;
    }

    /* Modifikasi Thumbnail Baris Bawah di HP */
    .thumbnail-grid {
        gap: 6px; /* Memperapat jarak antar kotak */
        margin-top: 10px;
    }

    .thumb-item img {
        height: 55px; /* Tinggi kotak tombol kecil dikurangi agar tidak memakan layar */
    }
}


		/* Menghapus grid lama, menggunakan list vertikal */
/* ==========================================================
   DIYNEWS LATEST NEWS GRID - RESPONSIVE EDITION
   ========================================================== */

/* Container Utama List */
.latest-news-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

/* Item Baris Berita */
.news-list-item {
    display: flex;
    flex-direction: row; /* Tetap berjejer ke samping secara default */
    align-items: flex-start; 
    gap: 15px;
    padding: 12px 10px;
    border-bottom: 1px solid #c4bfbf;
    width: 100%;
}

/* Gambar Sisi Kiri (100px) */
.list-img-wrapper {
    flex: 0 0 120px; /* Dinaikkan ke 120px agar lebih proporsional di PC/Tablet */
    height: 80px;    
    overflow: hidden;
    border-radius: 4px;
}

.list-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

/* Efek Zoom Gambar saat Item Di-hover */
.news-list-item:hover .list-img {
    transform: scale(1.05);
}

/* Konten Teks Sisi Kanan */
.list-content {
    flex: 1; 
    min-width: 0; /* Mencegah teks mendesak kontainer keluar layar */
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Judul Artikel */
.list-content h3 {
    font-size: 1.05rem; /* Ukuran font dioptimalkan untuk PC */
    margin: 0;
    line-height: 1.4;
    font-weight: 700;
}

.list-content h3 a {
    color: #212529 !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.news-list-item h3 a:hover {
    color: #d32f2f !important; 
}

/* Komponen Card Meta */
.card-body { 
    padding: 0; /* Dihilangkan padding bawaan agar sejajar dengan flex text */
}

.cat-label { 
    font-size: 0.7rem; 
    color: #d32f2f; 
    font-weight: bold; 
    text-transform: uppercase; 
    display: inline-block;
}

.date { 
    font-size: 0.75rem; 
    color: #888; 
}

/* ==========================================================
   MEDIA QUERIES (OPTIMASI KHUSUS MOBILE / HP)
   ========================================================== */
@media (max-width: 576px) {
    .news-list-item {
        padding: 10px 0; /* Mengurangi padding samping di layar HP yang sempit */
        gap: 12px; /* Memperdekat jarak gambar dan teks */
    }

    /* Ukuran gambar disesuaikan agar teks di kanan tidak terlalu sempit */
    .list-img-wrapper {
        flex: 0 0 100px; /* Kembali ke 100px khusus di HP */
        height: 70px;
    }

    .list-content h3 {
        font-size: 0.95rem; /* Font mengecil secara pas di layar smartphone */
        line-height: 1.3;
        
        /* Membatasi judul maksimal 2 baris agar layout seragam di HP */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .date {
        font-size: 0.7rem; /* Mengecilkan teks tanggal di HP */
    }
}

        /* Carousel */
        /* Sekarang CSS Anda aman dari Bootstrap karena namanya unik */
/* ===========================
   DIY CAROUSEL
=========================== */

.diy-carousel-section{
    margin-top:30px;

    position:relative;
    overflow:visible; /* jangan hidden */
    border-radius:8px;
    width: 100%;
    background:linear-gradient(80deg,#d9091b 0%,#3920c9 100%);
    box-shadow:0 2px 5px rgba(0,0,0,.1);
}

.diy-carousel-header{
    padding: 20px;
}

.diy-carousel-header h3{
    color:#fff;
    font-size:1.3rem;
    font-weight:700;
}

.diy-carousel-container{
    position:relative;
    width:100%;
    padding:20px;
    overflow:hidden;
}

.diy-carousel-track{
    display:flex;
    gap:20px;
    transition:transform .45s ease;
    will-change:transform;
}

.diy-carousel-item{
    flex:0 0 calc(20% - 16px);
    position:relative;
    flex-shrink:0;
}

.diy-carousel-item a{
    display:block;
    text-decoration:none;
}

.diy-carousel-item img{
    display:block;
}

.diy-img-fit{
    width:100%;
    height:160px;
    object-fit:cover;
    border-radius:8px;
    transition:transform .35s ease;
}

.diy-carousel-item:hover .diy-img-fit{
    transform:scale(1.05);
}

.diy-carousel-item h5{
    margin-top:10px;
    color:#fff;
    font-size:.95rem;
    line-height:1.4;
    font-weight:600;
    text-shadow:1px 1px 3px rgba(0,0,0,.7);

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;

    /*transition:.3s;*/
}

.diy-carousel-item:hover h5{
    color:#ffe082;
}

/* ===========================
   CATEGORY
=========================== */

.diy-carousel-cat{
    position:absolute;
    top:10px;
    left:10px;

    padding:4px 10px;

    border-radius:4px;

    background:rgba(211,47,47,.9);

    color:#fff;

    font-size:.7rem;

    font-weight:600;

    text-transform:uppercase;

    z-index:5;
}

/* ===========================
   DIY NAVIGATION
=========================== */

.diy-nav-btn{

    position:absolute;

    top:50%;

    /*transform:translateY(-50%);*/

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#222;

    cursor:pointer;

    z-index:9999;

    box-shadow:0 5px 12px rgba(0,0,0,.2);

    display:flex;

    justify-content:center;

    align-items:center;
}

.diy-nav-btn.prev{

    left:0;

}

.diy-nav-btn.next{

    right:0;

}
/* ===========================
   ANIMATION CLASS
=========================== */

.diy-slide-left{

    transform:translateX(-100px);

}

.diy-slide-right{

    transform:translateX(100px);

}

@media(max-width:768px){

.diy-nav-prev{

    left:6px;

}

.diy-nav-next{

    right:6px;

}

.diy-nav-btn{

    width:36px;

    height:36px;

    font-size:18px;

}

}
		
		/* Sidebar */
        .sidebar { position: sticky; top: 20px; }
        .ad-slot { width: 100%; height: 600px; background: #e0e0e0; border: 2px dashed #999; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: #666; font-weight: bold; }
        /* Mode Mobile: Slide Horisontal */
		@media (max-width: 768px) {
			.navbar .container {
				padding: 0 10px; /* Sedikit padding agar tidak mepet layar */
			}

			.nav-menu {
				display: flex !important;
				flex-wrap: nowrap !important; /* Mencegah menu turun ke bawah */
				overflow-x: auto !important;  /* Mengaktifkan slide */
				white-space: nowrap !important; /* Teks menu tetap satu baris */
				
				/* Menghilangkan scrollbar agar terlihat bersih */
				scrollbar-width: none;  /* Firefox */
				-ms-overflow-style: none; /* IE/Edge */
			}

			/* Hilangkan scrollbar di Chrome/Safari */
			.nav-menu::-webkit-scrollbar {
				display: none;
			}

			/* Memberikan sedikit ruang di awal dan akhir menu */
			.nav-menu {
				padding: 0 15px !important;
			}
			.header-tools {
				display: none !important;
			}
			/*main gri*/
			.main-grid { grid-template-columns: 1fr;}
		}
@media (max-width: 768px) {
    .diy-carousel-item {
        flex: 0 0 45%; /* 2 item per layar agar terlihat proporsional */
    }
}

@media (max-width: 480px) {
    .diy-carousel-item {
        flex: 0 0 80%; /* 1 item utama + sedikit preview item sebelah */
    }
    .sidebar {
        position:static !important;
    }
}

/* Memastikan tombol navigasi tidak menutupi konten di HP */
@media (max-width: 768px) {
    .diy-nav-btn {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
}




@media (max-width:991px){
    .site-main{
        grid-template-columns:1fr;
    }

    .sidebar{
        position:static !important;
        margin-top:32px;
    }
}
		
/* =========================================================================
   DESAIN AREA KOMENTAR MODERN & RESPONSIF
   ========================================================================= */
diy-comments-section { background: #fff; padding: 30px; border-radius: 12px; border: 1px solid #eee; margin-top: 40px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
        .diy-section-title { font-size: 1.5rem; margin-bottom: 25px; color: #1a1a1a; font-weight: 700; border-left: 5px solid #dc2626; padding-left: 15px; }
        
        .diy-comment-form { display: flex; flex-direction: column; gap: 20px; }
        .diy-form-group { display: flex; flex-direction: column; gap: 8px; }
        .diy-label { font-size: 0.9rem; font-weight: 600; color: #444; }
        .diy-input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 0.95rem; transition: border-color 0.2s; }
        .diy-input:focus { border-color: #dc2626; outline: none; }
        
        .diy-checkbox-group { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
        .diy-checkbox-group input { margin-top: 4px; }
        .diy-checkbox-text { font-size: 0.85rem; color: #666; }

        .diy-btn-submit { background: #dc2626; color: #fff; border: none; padding: 14px 25px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 1rem; align-self: flex-start; transition: background 0.2s; }
        .diy-btn-submit:hover { background: #b91c1c; }

        .diy-required { color: #dc2626; }