@charset "utf-8";
/* 
Theme Name: Jadul Tech
Description: Minimalis Linux/Tech Theme
Version: 1.0
Author: Anto
Tags: simple, fixed width, two columns
*/


/* --- LAYOUT UTAMA --- */
body {text-align:center; background: #eef2f5; border:0px; margin-top: 0; background-attachment: fixed;}
#content {width:780px; margin:5px auto; border:1px solid #ccc; background:#FFF; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); border-radius: 10px; overflow: hidden; font-size: 12px; line-height: 1;}

/* --- NAVIGASI --- */
#navigation {border-top:1px solid #ccc; background:#2c3e50; text-align:left; font-family:Arial, Helvetica, sans-serif; position:relative;}
.nav-toggle {display:none; width:100%; background:#34495e; color:#fff; border:none; padding:10px; font-size:16px; font-weight:bold; cursor:pointer; text-align:left;}
#nav-list {margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap;}
#nav-list li {margin:0; border-right:1px solid #fff;}
#nav-list li a {display:block; padding:10px 15px; color:#fff; text-decoration:none; font-weight:bold; font-size:12px;}
#nav-list li:hover {background:#007acc;}
#nav-list li:hover a {color:#FFF; text-decoration:none; font-weight:bold;}

/* --- KONTEN ARTIKEL (Typography) --- */
.posts-content p {font-size: 16px; line-height: 1.7em; margin-bottom: 20px; text-align: left; color: #333;}
.posts-content img {border: none; margin: 5px; max-width: 100%; height: auto;}
.posts-content blockquote {margin: 1em 20px; padding-left: 50px; max-width: 90%; font-size: 13px; color: #0077FF; font-family: "arial black", trebucet, georgia; background: transparent url(blockquote.gif) no-repeat;}

/* --- LAYOUT LAINNYA --- */
#left-content {float:left; width:520px; background:#fff; border-right:1px solid #ccc; border-top:1px solid #CCCCCC; text-align:left; padding: 15px 20px 20px 20px; box-sizing: border-box;}
#right-content {float:right; width:218px; border-top:1px solid #ccc; text-align:left; padding:0px 10px 10px 10px;}
#nav-tag a:hover{text-decoration:underline; color:#cc0000; }
#search {width:100%; float:right;}
form.search {float:right; margin-right:10px; border:1px}
#nav-space {height:90px; background:#f4f4f4;}
#nav-space h2 {margin:15px; text-align:left; font-family:Georgia, "Times New Roman", Times, serif; font-size:30px; margin-top:20px;}
#nav-tag {color:#2c3e50; text-align:left; font:10px Verdana, Arial, Helvetica, sans-serif; margin:5px;}
#nav-tag a{color:#2c3e50; text-decoration:none;}
#heading {margin:15px; text-align:left; background:#fff;}
#heading h1, #heading h2 {font-family:Georgia, "Times New Roman", Times, serif; font-size:30px; margin-top:20px;}
#heading h1 a, #heading h2 a {text-decoration:none; color:#000;}
#left-content .posts {font-family:Georgia, "Times New Roman", Times, serif;}
#left-content hr {border:1px solid #ccc;}
.posts h1, .posts h1 a {font-size:28px; font-weight:normal; margin-top:10px; color:#2c3e50;}
.posts h2 {font-size:20px; font-weight:normal; margin-top:10px;}
.posts h3 {font-size:18px; font-weight:normal; margin-top:10px;}
.posts-cate {margin-bottom:10px;}
h1,h2 {font-family:Georgia, "Times New Roman", Times, serif; font-size:30px; margin-top:20px;}
h1 a, h2 a{text-decoration:none; background:#fff; color:#2c3e50;}
h1 a:hover, h2 a:hover{ color:#007acc; text-decoration:none; border-bottom:none; }
.posts a {color:#007acc; text-decoration:none;} 
.posts .posts-content {font-size:14px; line-height:2.0em;}
.posts-content h4 {font-size:16px;}
.posts-content h5 {font-size:14px;}
.posts-content h2 {font-family:Georgia, "Times New Roman", Times, serif; font-size:20px; margin-top:5px; color:#2c3e50;}
.posts-content h2 a {font-family:Georgia, "Times New Roman", Times, serif; font-size:20px; margin-top:5px; color:#2c3e50;text-decoration:underline;}
.posts-content ul {list-style:square;}
.posts-content a{color:#007acc; text-decoration:none;}
.posts-content a:hover {text-decoration:underline;}
.posts-meta {font:12px Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase;}
.posts-meta ul {margin:10px 0px 5px 0px; padding:0px 0px 0px 0px; list-style:none;}
.posts-meta ul li {margin-right:20px; display:inline;}
.posts-meta a{color:#007acc; text-decoration:none;}
#Post_Navigation a {color:#007acc; text-decoration:none; font-size:12px; font-weight:bold;}
#Next_Posts {float:right; width:200px; text-align:right;}
#Prev_Posts {float:left; width:200px;}
#sm-space {float:right; width:329px; text-align:left; padding:5px 0px 5px 10px; font:13px Georgia, "Times New Roman", Times, serif; background:#f4f4f4;}
#footer {color:#000; width:780px; margin:0px auto; padding:5px 0px 5px 0px; margin-top:10px; text-align:center; font:10px Verdana, Arial, Helvetica, sans-serif;}
#footer a{color:#000; text-decoration:none;}
#footer a:hover{text-decoration:underline; color:#cc0000; }
.aligncenter {display: block; margin-left: auto; margin-right: auto;}
.alignleft {float: left;}
.alignright {float: right;}
.wp-caption {border: 1px solid #ddd;text-align: center;background-color: #f3f3f3;padding: 4px 0 0 0;margin: 10px;border-radius: 3px;}
.wp-caption-dd {font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0;}
.clear {clear:both;}
.left-widget-column {width:160px; float:left;}
.right-widget-column {float:right; width:155px;}
.widgets {font-family:Georgia, "Times New Roman", Times, serif;}
.widgets img{border:none;}
.widgets h3 {font-size:18px; font-weight:normal; margin-top:10px;}
.widgets ul {margin:0px; padding:0px; list-style:none; border-top:1px solid #ddd;}
.widgets ul li {color:#2c3e50; padding:5px 0px 5px 5px; line-height:1.5em; border-bottom:1px solid #ddd;}
.widgets ul li a:hover{text-decoration:underline; color:#007acc; }
.widgets a {color:#007acc; text-decoration:none;}
.widgets .widget-content, .widget-two-column {margin-top:10px;padding:0px 0px 10px 0px; font-size:13px; line-height:1.5em;}
.widgets .widget-content h2 {font-family:Georgia, "Times New Roman", Times, serif; font-size:14px; margin-top:20px;}
#comments-wrapper { width:300px;font-family:Georgia, "Times New Roman", Times, serif; line-height:1.5em;}
#comments-wrapper .comments-block { font-size:13px; padding:10px 0px 10px 0px; border-bottom:1px solid #ddd;}
#comments-wrapper a{ color:#007acc; text-decoration:none;}
#comments-wrapper p{ line-height:1.5em;}
.comments-author { width:150px; float:left; }
.comments-data { float:right; width:460px;}
#Comment-Form label { padding-bottom:5px; margin-top:10px; display:block;}
.moderation { color:#666666;}
.posts-date { font-size:13px; text-transform:uppercase; color:#666666; margin-top:10px; text-align:right;}
.posts-author a , .posts-cate a { color:#007acc; font:11px Arial, Helvetica, sans-serif; text-decoration:none;}
.posts-author, .posts-cate { color:#666666; font-size:13px;}

/* --- MOBILE RESPONSIVE --- */
@media only screen and (max-width: 500px) { 
  li {line-height:200%;}
  body {text-align:center; background: #eef2f5; border:0px; margin-top: 0;}
  #content {width:98%; margin:5px auto; border:1px solid #ccc; background:#FFF; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); border-radius: 10px; overflow: hidden; }
  #search {width:100%; float:right;}
  #left-content {float:left; width:100%; background:#fff; border-right:1px solid #ccc; border-top:1px solid #CCCCCC; text-align:left; padding:10px; box-sizing: border-box;}
  .widgets .widget-content h2 {font-family:Georgia, "Times New Roman", Times, serif; font-size:14px; margin:10px;}
  #left-content .posts {font-family:Georgia, "Times New Roman", Times, serif;margin:5px;}
  #sm-space {float:right; width:100%; text-align:left; padding:0px; font:13px Georgia, "Times New Roman", Times, serif; background:#f4f4f4;}
  #right-content {float:right; width:100%; border-top:1px solid #ccc; text-align:left; padding:0px;}
  #footer {color:#000; width:100%; margin:0px auto; padding:0px; margin-top:10px; text-align:center; font:10px Verdana, Arial, Helvetica, sans-serif;}
  #Next_Posts {float:right; text-align:right;margin-right:20px;}
  #Prev_Posts {float:left; margin-left:20px;}
  .nav-toggle { display: block; }
  #nav-list { display: none; flex-direction: column; border-top: 1px solid #fff; }
  #nav-list li { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.2); }
}


/* --- HEADER & SEARCH (Baru) --- */
#heading {
    display: flex;
    justify-content: space-between; /* Judul kiri, Search kanan */
    align-items: center;            /* Menjajarkan vertikal */
    padding: 15px 20px;
    background: #fff;
}

#header-search {
    flex-shrink: 0; /* Agar tidak gepeng saat layar kecil */
    margin-left: 20px;
}

#header-search input {
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 150px;
}

#header-search button {
    padding: 6px 10px;
    background: #2c3e50;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

/* --- NAVIGASI (Berdiri Sendiri) --- */
#navigation {
    border-top: 1px solid #ccc;
    background: #2c3e50;
    text-align: left;
    position: relative;
}

/* --- PENYESUAIAN MOBILE --- */
@media only screen and (max-width: 500px) {
    #heading {
        flex-direction: column; /* Search turun ke bawah di HP */
        text-align: center;
    }
    #header-search {
        margin: 10px 0 0 0;
        width: 100%;
    }
    #header-search input {
        width: 70%;
    }
    
    /* Menu tetap Dropdown */
    .nav-toggle { display: block; }
    #nav-list { display: none; flex-direction: column; }
}




@media only screen and (max-width: 500px) {
    /* 1. Header: Memaksa tetap sebaris (row) agar hemat tempat */
    #heading {
        flex-direction: row !important;
        padding: 10px 5px !important;
        justify-content: space-between;
        align-items: center;
    }

    #heading h2 {
        font-size: 16px !important; /* Sedikit mengecilkan font judul di HP */
        margin: 0;
    }

    /* 2. Search: Disesuaikan agar pas dengan nama blog 9 karakter */
    #header-search {
        margin: 0;
        width: auto;
    }

    #header-search input {
        width: 80px; /* Lebar input lebih ramping */
        padding: 4px;
        font-size: 11px;
    }

    #header-search button {
        padding: 4px 6px;
        font-size: 11px;
    }

    /* 3. Navigasi: Mengurangi padding agar lebih ringkas */
    #navigation {
        padding: 0;
    }
}