/*
Theme Name: SuperCL
Theme URI: https://example.com
Author: Your Name
Author URI: https://example.com
Description: Super fast and lightweight WordPress theme
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: supercl
*/

* {margin:0;padding:0;box-sizing:border-box;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.6;color:#333;font-display:swap;background:#fff;}
.site-content{opacity:0;animation:fadeIn 0.3s forwards;}
@keyframes fadeIn{to{opacity:1;}}
img{max-width:100%;height:auto;display:block;border-radius:7px;}
a{color:#c41e3a;text-decoration:none;}
a:focus,a:hover{text-decoration:underline;}

p + p{margin-top:15px;}

.site-header{background:#fff;box-shadow:0 2px 4px rgba(0,0,0,0.1);}
.header-top{background:linear-gradient(135deg,#1b8cd9 0%,#2d64e0 40%,#4b4ed9 70%,#5a3fe0 100%);padding:8px 0;}
.header-container{max-width:970px;margin:0 auto;padding:0 15px;}
.header-main{display:flex;align-items:center;justify-content:space-between;padding:10px 0;}

.logo{font-size:24px;font-weight:bold;color:#000;text-transform:uppercase;display:flex;align-items:center;max-height:60px;}
.logo a,.logo img{max-height:60px;width:auto;color:#000;}

.main-nav{display:flex;align-items:center;gap:5px;flex:1;}
.main-nav ul{display:flex;list-style:none;gap:5px;flex-wrap:wrap;margin:0;padding:0;}
.main-nav li{position:relative;}
.main-nav a{display:block;padding:8px 12px;color:#ffffff;text-shadow:0 1px 3px rgba(0,0,0,0.25);font-size:13px;font-weight:500;white-space:nowrap;}
.main-nav a:hover{background:rgba(255,255,255,0.1);text-decoration:none;}

.main-nav ul ul{display:none;position:absolute;top:100%;left:0;background:#fff;min-width:200px;box-shadow:0 4px 6px rgba(0,0,0,0.1);flex-direction:column;gap:0;z-index:1000;}
.main-nav ul li:hover>ul{display:flex;}
.main-nav ul ul li{width:100%;}
.main-nav ul ul a{color:#333;padding:10px 15px;border-bottom:1px solid #eee;text-shadow:none;}
.main-nav ul ul a:hover{background:#f5f5f5;}
.main-nav ul ul ul{left:100%;top:0;}

.mobile-menu-toggle{display:none;background:none;border:none;font-size:15px;cursor:pointer;padding:5px;}
.search-toggle{background:none;border:none;font-size:17px;cursor:pointer;padding:5px;}

.search-form-container{display:none;padding:15px;background:#f5f5f5;border-top:1px solid #ddd;}
.search-form-container.active{display:block;}
.search-form{display:flex;max-width:400px;margin:0 auto;}
.search-form input[type="search"]{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:4px 0 0 4px;}
.search-form button{padding:8px 15px;background:#c41e3a;color:#fff;border:none;border-radius:0 4px 4px 0;cursor:pointer;}

.site-content{max-width:970px;margin:20px auto;padding:0 15px;}
.content-wrapper{display:flex;gap:20px;}
.main-content{flex:0 0 67%;max-width:67%;}
.sidebar{flex:0 0 34%;max-width:34%;min-height:400px;}

.post{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #eee;}
.post-title{font-size:28px;margin-bottom:10px;line-height:1.3;}
.post-meta{color:#666;font-size:14px;margin-bottom:15px;}
.post-content{line-height:1.8;}

.post-thumbnail{position:relative;background:#f0f0f0;margin-bottom:15px;overflow:hidden;width:100%;}
.post-thumbnail::before{content:'';display:block;padding-top:60%;}
.post-thumbnail a{display:block;position:absolute;top:0;left:0;width:100%;height:100%;}
.post-thumbnail img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}

.site-footer{background:#2d2d2d;color:#fff;margin-top:40px;}
.footer-menu{background:linear-gradient(135deg,#1b8cd9 0%,#2d64e0 40%,#4b4ed9 70%,#5a3fe0 100%);padding:15px 0;}
.footer-menu ul,.social-icons{display:flex;justify-content:center;flex-wrap:wrap;list-style:none;gap:15px;margin:0;padding:0;}
.footer-menu a,.footer-bottom a,.social-icons a{color:#fff;}
.footer-menu a{font-size:13px;}
.social-icons{font-size:18px;margin:10px 0;}
.footer-bottom{padding:20px 0;text-align:center;font-size:13px;}

.widget{margin-bottom:30px;padding:20px;background:#f9f9f9;border-radius:4px;min-height:150px;}
.widget-title{font-size:18px;margin-bottom:15px;padding-bottom:10px;border-bottom:2px solid #c41e3a;}

.posts-header{margin:0 0 20px 0;border-bottom:4px solid #004aad;display:inline-block;}
.section-title{font-size:1em;color:#333;margin:0;font-weight:600;}

.two-column-layout .post-grid{display:flex;gap:10px;}
.two-column-layout .post-thumbnail-column{flex:0 0 23%;}
.two-column-layout .post-content-column{flex:1;margin-top:0;padding-top:0;}
.two-column-layout .post-thumbnail-column img{width:100%;height:140px;object-fit:cover;display:block;}
.two-column-layout .post-meta-content{display:flex;line-height:1;gap:10px;margin-bottom:5px;font-size:13px;}
.post-meta-content .post-category a{color:#004aad;text-transform:uppercase;}
.two-column-layout .post-title{margin:0 0 5px 0;font-size:1.2em;line-height:1.3;color:#333;}
.two-column-layout .post-content{font-size:14px;line-height:1.5;}

.slider-container{position:relative;max-width:630px;margin:0 auto 30px;overflow:hidden;background:#000;height:420px;border-radius:7px;}
.slider-wrapper{position:relative;width:100%;height:100%;}
.slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity 0.5s ease;pointer-events:none;}
.slide.active{opacity:1;pointer-events:auto;}
.slide-image{position:relative;width:100%;height:100%;}
.slide-image img{width:100%;height:100%;object-fit:cover;}
.slide-overlay{position:absolute;bottom:0;left:0;right:0;height:60%;background:linear-gradient(to top,rgba(0,0,0,0.95) 0%,rgba(0,0,0,0.6) 70%,transparent 100%);}
.slide-content{position:absolute;bottom:30px;left:30px;right:30px;color:#fff;z-index:2;}
.slide-category{display:inline-block;background:#c41e3a;color:#fff;padding:5px 12px;font-size:10px;font-weight:600;text-transform:uppercase;margin-bottom:5px;border-radius:3px;}
.slide-title{font-size:25px;line-height:1.2;margin:5px 0;font-weight:700;}
.slide-title a{color:#fff;text-decoration:none;text-shadow:0 2px 4px rgba(0,0,0,0.3);}
.slide-title a:hover{text-decoration:underline;}
.slide-meta{font-size:14px;color:#ddd;}

.slider-prev,.slider-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.3);border:none;color:#fff;font-size:24px;width:45px;height:45px;cursor:pointer;z-index:3;transition:background 0.3s;border-radius:50%;}
.slider-prev:hover,.slider-next:hover{background:rgba(255,255,255,0.5);}
.slider-prev{left:15px;}
.slider-next{right:15px;}
.slider-dots{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3;}
.dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.5);cursor:pointer;transition:background 0.3s;}
.dot.active{background:#fff;}


/* Horizontal Grid Styles */
.horizontal-grid-section {
    margin: 0 0 20px 0;
    padding: 0 0 50px 0;
    border-bottom: 1px solid #e0e0e0;
}

.horizontal-grid-container {
    width: 100%;
}

/* Desktop - Tampil 3 kolom side by side */
.horizontal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* SELALU 3 KOLOM */
    gap: 20px;
    width: 100%;
}

.card-image {
    width: 100%;
    height: 130px;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-content {
    padding: 10px 0;
}

.card-category {
    font-size: 0.55em;
    font-weight: 600;
    color: #0073aa;
    text-transform: uppercase;
}

.card-title {
    margin: 0;
    font-size: 0.8em;
    line-height: 1.4;
}

.card-title a {
    color: #333;
    text-decoration: none;
}

.card-title a:hover {
    color: #0073aa;
}

/* Mobile - Tetap 3 kolom tapi bisa di-scroll horizontal */
@media (max-width: 768px) {
    .horizontal-grid {
        display: flex; /* Ganti ke flex untuk scroll horizontal */
        grid-template-columns: none;
        gap: 15px;
        overflow-x: auto;
        scroll-behavior: smooth;
        padding: 10px 0 20px 0;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }
    
    .horizontal-grid::-webkit-scrollbar {
        display: none; /* Chrome, Safari and Opera */
    }
    
    .grid-card {
        flex: 0 0 280px; /* Ukuran tetap seperti di PC */
        min-width: 280px; /* Pastikan ukuran konsisten */
    }
    
    .horizontal-grid-section {
        margin: 30px 0;
        padding: 15px 0;
    }
}


@media (max-width:768px){
    .mobile-menu-toggle{display:block;}
    .site-header{position:sticky!important;top:0!important;z-index:999!important;background:#fff;}
    .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:linear-gradient(135deg,#1b8cd9 0%,#2d64e0 40%,#4b4ed9 70%,#5a3fe0 100%);flex-direction:column;box-shadow:0 4px 6px rgba(0,0,0,0.1);}
    .main-nav.active{display:flex;}
    .main-nav ul{flex-direction:column;width:100%;gap:0;}
    .main-nav a{color:#fff;border-bottom:1px solid rgba(255,255,255,0.1);padding:12px 15px;}
    .main-nav ul ul{position:static;box-shadow:none;background:rgba(0,0,0,0.2);}
    .main-nav ul ul a{padding-left:30px;color:#fff;}
    .content-wrapper{flex-direction:column;}
    .main-content,.sidebar{flex:0 0 100%;max-width:100%;}
    .header-main{padding:15px 0 0 0;}
    .slider-container{height:200px;}
    .slide-content{bottom:20px;left:20px;right:20px;}
    .slide-title{font-size:16px;margin:5px 0;}
    .slide-category{font-size:7px;margin:0;padding:2px 5px;}
    .slide-meta{font-size:10px;margin:0;}
    .slider-prev,.slider-next{width:25px;height:25px;font-size:14px;}
    .two-column-layout .post-thumbnail-column img{height:85px;}
    .two-column-layout .post-meta-content{font-size:10px;}
    .two-column-layout .post-title{font-size:0.9em;line-height:1.3;}
    .two-column-layout .post-content{display:none;}
	.main-nav a{padding:15px 20px;min-height:44px;}
.slider-prev,.slider-next{width:44px;height:44px;font-size:20px;}
}