/*!
Theme Name: tese
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: tese
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.

tese 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/
*/

/* 1. Reset Dasar & Font */
body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    margin: 0;
    padding: 0;
}

/* 2. Layout Container (Agar Konten di Tengah) */
.site-main, .site-header .container, .site-footer .container {
    max-width: 800px; /* Lebar artikel yang nyaman dibaca */
    margin: 0 auto;
    padding: 0 20px;
}

/* 3. Header & Navigasi */
.site-header {
    border-bottom: 2px solid #000;
    padding: 20px 0;
    margin-bottom: 40px;
    text-align: center;
}

.main-navigation ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.main-navigation a {
    text-decoration: none;
    color: #000;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
}

/* 4. Bagian Judul Artikel */
.entry-header {
    margin-bottom: 30px;
    text-align: left;
}

.entry-title {
    font-family: 'Lora', serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    margin: 10px 0;
    color: #111;
}

.entry-meta {
    font-size: 13px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 5. Gambar Utama (Featured Image) */
.post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 30px;
}

/* 6. Isi Artikel */
.entry-content p {
    font-size: 19px;
    line-height: 1.8;
    margin-bottom: 25px;
    color: #2c2c2c;
}

/* 7. Responsif untuk HP */
@media (max-width: 600px) {
    .entry-title {
        font-size: 28px;
    }
    .entry-content p {
        font-size: 17px;
    }
}

/* Layout Grid untuk Homepage */
.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 kolom sama rata */
    gap: 30px; /* Jarak antar kotak berita */
    margin-top: 40px;
}

.grid-item {
    background: #fff;
    display: flex;
    flex-direction: column;
}

/* Ukuran Gambar di Grid */
.grid-item .post-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* Agar gambar tidak gepeng */
    margin-bottom: 15px;
}

/* Judul di Grid */
.grid-item .entry-title {
    font-size: 20px;
    line-height: 1.3;
    margin: 10px 0;
}

.grid-item .entry-title a {
    text-decoration: none;
    color: #000;
}

.grid-item .entry-title a:hover {
    color: #d21; /* Merah saat di-hover */
}

/* Responsif HP (Jadi 1 Kolom saja) */
@media (max-width: 768px) {
    .post-grid {
        grid-template-columns: 1fr;
    }
}
.entry-category {
    border-top: 4px solid #000; /* Garis hitam di atas kategori */
    padding-top: 5px;
    display: inline-block;
}

/* Layout Header Flexbox */
.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

.site-branding .site-title a {
    text-decoration: none;
    color: #000;
    font-size: 32px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.main-navigation ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    gap: 25px;
}

.main-navigation a {
    text-decoration: none;
    color: #333;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    transition: color 0.2s;
}

.main-navigation a:hover {
    color: #d21; /* Warna merah saat kursor menempel */
}

/* Footer Style */
.site-footer {
    background: #000;
    color: #fff;
    padding: 50px 0;
    margin-top: 60px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.site-footer a {
    color: #fff;
    text-decoration: underline;
}