/*
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;
}
img {max-width:100%;height:auto;display:block;}
a {color:#c41e3a;text-decoration:none;}
a:hover {text-decoration:underline;}

/* Header */
.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 */
.logo {
    font-size:24px;
    font-weight:bold;
    color:#000;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    max-height:60px; /* ← Batasi tinggi di parent */
}
.logo a {
    color:#000;
}
.logo img {
    max-height:60px;
    width:auto;
}

/* Navigation */
.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;}

/* Dropdown Submenu */
.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 */
.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 */
.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;}

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

/* Posts */
.post {margin-bottom:30px;padding-bottom:30px;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 - Fixed aspect ratio untuk prevent CLS */
.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;
}

/* Footer */
.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 {display:flex;flex-wrap:wrap;justify-content:center;list-style:none;gap:15px;margin:0;padding:0;}
.footer-menu a {color:#fff;font-size:13px;}
.footer-bottom {padding:20px 0;text-align:center;font-size:13px;}
.footer-bottom a {color:#fff;}
.social-icons {display:flex;justify-content:center;gap:10px;margin:10px 0;}
.social-icons a {color:#fff;font-size:18px;}

/* Widget - Fixed min-height untuk prevent CLS */
.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;}

/* Responsive */
@media (max-width:768px) {
    .mobile-menu-toggle {display:block;}
    
    /* Pastikan header sticky */
    .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;}
}