/*
Theme Name: UlasanPilihan Core
Theme URI: https://ulasanpilihan.com
Author: Jipeng
Description: Theme super ringan, mobile-first, SEO-centric untuk affiliate marketing. 2026 Standards.
Version: 1.1 (Rank Math Ready)
Text Domain: ulasanpilihan
*/

:root {
    /* Palet Warna sesuai Blueprint */
    --color-primary: #0056b3; /* Trust Blue */
    --color-cta: #28a745;     /* Energetic Green */
    --color-text: #333333;    /* Dark Grey for readability */
    --color-light: #f8f9fa;   /* Background section */
    --color-border: #e2e8f0;
    --color-white: #ffffff;
    
    /* Spacing & Layout */
    --container-width: 1100px;
    --spacing-unit: 1rem;
}

/* --- 1. Reset & Typography (System Fonts - Zero Load Time) --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--color-text);
    line-height: 1.6;
    background-color: var(--color-white);
    font-size: 18px; /* Mobile readability base */
}

a { text-decoration: none; color: var(--color-primary); }
img { max-width: 100%; height: auto; display: block; }

/* --- 2. Utility Classes & Structure --- */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-unit);
}

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    text-align: center;
    transition: opacity 0.2s;
}

.btn-cta {
    background-color: var(--color-cta);
    color: white;
}
.btn-cta:hover { opacity: 0.9; color: white; }

/* --- 3. Header & Navigation --- */
.site-header {
    border-bottom: 1px solid var(--color-border);
    padding: 1rem 0;
    background: white;
}
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.site-branding h1 { font-size: 1.5rem; margin: 0; }

/* --- 4. Front Page Sections --- */
/* Hero */
.hero-section {
    padding: 4rem 0;
    background: var(--color-light);
    text-align: center;
}
.hero-title { font-size: 2.5rem; margin-bottom: 1rem; color: #1a202c; }
.hero-subtitle { font-size: 1.25rem; color: #4a5568; margin-bottom: 2rem; }

/* Category Grid */
.category-nav { padding: 2rem 0; }
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
    text-align: center;
}
.cat-item {
    border: 1px solid var(--color-border);
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Product Cards (Grid) */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.product-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s;
}
.product-card:hover { transform: translateY(-3px); }
.card-body { padding: 1.5rem; }
.card-title { font-size: 1.2rem; margin-bottom: 0.5rem; line-height: 1.4; }

/* --- 5. Single Post (Review Focus) --- */
.single-post-header { margin: 2rem 0; }
.post-meta { font-size: 0.9rem; color: #666; margin-top: 0.5rem; }

/* === Rank Math & Breadcrumbs Compatibility === */
.rank-math-breadcrumb, 
.native-breadcrumb,
#breadcrumbs {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1rem;
}
.rank-math-breadcrumb a,
.native-breadcrumb a { 
    color: inherit; 
    text-decoration: underline;
    text-decoration-color: #ddd;
}
.rank-math-breadcrumb .last,
.native-breadcrumb .current { 
    color: #333; 
    font-weight: normal; 
    text-decoration: none;
}
.native-breadcrumb .sep {
    margin: 0 5px;
    color: #ccc;
}
/* =========================================== */

/* Product Summary Box (The Money Maker) */
.product-summary-box {
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
    background: #f0f7ff;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
}
.summary-image { flex: 0 0 150px; }
.summary-details { flex: 1; }
.rating-stars { color: #f6ad55; font-size: 1.2rem; }
.price-range { font-weight: bold; font-size: 1.25rem; margin: 0.5rem 0; }

/* Pros & Cons */
.pros-cons-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
}
.pc-box { padding: 1.5rem; border-radius: 8px; }
.pc-box.pros { background: #f0fff4; border: 1px solid #c6f6d5; }
.pc-box.cons { background: #fff5f5; border: 1px solid #fed7d7; }
.pc-title { font-weight: bold; margin-bottom: 1rem; display: block; }

/* --- 6. Mobile Optimization --- */
@media (max-width: 768px) {
    .hero-title { font-size: 2rem; }
    .product-summary-box { flex-direction: column; text-align: center; }
    .btn-cta { width: 100%; display: block; } /* Thumb-friendly full width */
    .pros-cons-grid { grid-template-columns: 1fr; }
}
@media (min-width: 769px) {
    .pros-cons-grid { grid-template-columns: 1fr 1fr; }
}