/*
Theme Name: Pilihan Blog
Theme URI: https://example.com/pilihan-blog
Author: Pilihan Blog
Author URI: https://example.com
Description: Tema blog ringan dan siap Elementor. Homepage bawaan menampilkan Pilihan Unggulan Minggu Ini (layout Gambar 1), Artikel Pilihan Pembaca dengan filter kategori (Gambar 2), dan Jelajahi Semua Kategori (Gambar 3). Mendukung kategori apa pun: Lifestyle, Travel, Edukasi, dan sebagainya. Jika halaman depan dibuat dengan Elementor, tema otomatis menampilkan halaman Elementor tersebut.
Version: 1.0.8
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pilihan-blog
Tags: blog, custom-menu, featured-images, translation-ready, custom-logo, threaded-comments
*/
/* ============================================================
Pilihan Blog — gaya utama
Warna & radius disamakan dengan referensi screenshot:
biru primer #0b66ff, latar section 1 #e9f1fe,
kartu #ffffff / #f5f7fa, teks #1c2430
============================================================ */
:root{
--pilihan-blue:#0b66ff;
--pilihan-blue-dark:#084fc4;
--pilihan-blue-soft:#eef5ff;
--pilihan-bg:#e9f1fe;
--pilihan-card:#f5f7fa;
--pilihan-text:#1c2430;
--pilihan-muted:#667085;
--pilihan-border:#e2e8f0;
--pilihan-radius:16px;
--pilihan-radius-sm:12px;
--pilihan-shadow:0 10px 30px rgba(16,42,87,.10);
--pilihan-shadow-sm:0 4px 16px rgba(16,42,87,.08);
--pilihan-container:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
color:var(--pilihan-text);
background:#fff;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
a{color:var(--pilihan-blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{line-height:1.25;margin:0 0 .5em}
p{margin:0 0 1em}
button{font:inherit;cursor:pointer}
/* ---------- Layout dasar ---------- */
.pilihan-container{max-width:var(--pilihan-container);margin:0 auto;padding-left:20px;padding-right:20px}
.pilihan-main{padding:0 0 20px}
.alignwide{max-width:var(--pilihan-container);margin-left:auto;margin-right:auto}
.wp-block-image img,.entry-content img{border-radius:12px}
/* ---------- Header ---------- */
.pilihan-header{
position:sticky;top:0;z-index:50;
background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
border-bottom:1px solid var(--pilihan-border);
}
.pilihan-header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px;flex-wrap:nowrap}
.pilihan-brand{flex:0 0 auto;display:flex;align-items:center;min-width:0}
.pilihan-logo{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--pilihan-text)}
.pilihan-logo:hover{text-decoration:none}
.pilihan-logo span{color:var(--pilihan-blue)}
/* v1.0.1: the_custom_logo() mengeluarkan img.custom-logo (bukan .pilihan-logo img),
jadi tanpa aturan ini logo tampil sebesar file aslinya dan mendorong menu. */
.pilihan-logo img,
.custom-logo-link{display:flex;align-items:center}
.custom-logo,
.pilihan-brand img{
max-height:52px !important;
width:auto !important;
height:auto !important;
max-width:240px;
object-fit:contain;
}
.pilihan-nav{flex:1 1 auto;min-width:0}
.pilihan-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;flex-wrap:nowrap}
.pilihan-nav a{color:var(--pilihan-text);font-weight:600;font-size:15px}
.pilihan-nav a:hover{color:var(--pilihan-blue);text-decoration:none}
.pilihan-search{display:flex;gap:8px;flex:0 0 auto}
.pilihan-search input{
border:1px solid var(--pilihan-border);border-radius:999px;padding:9px 14px;
font:inherit;font-size:14px;min-width:180px;background:#f8fafc;
}
.pilihan-search button{
border:0;background:var(--pilihan-blue);color:#fff;border-radius:999px;padding:9px 18px;font-weight:700;
}
.pilihan-search button:hover{background:var(--pilihan-blue-dark)}
.pilihan-menu-toggle{display:none;border:1px solid var(--pilihan-border);background:#fff;border-radius:10px;padding:8px 14px;font-weight:700}
/* ---------- Footer ---------- */
.pilihan-footer{border-top:1px solid var(--pilihan-border);background:#f8fafc;margin-top:40px}
.pilihan-footer-inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:28px 0}
.pilihan-footer p{margin:0;color:var(--pilihan-muted);font-size:14px}
.pilihan-footer nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;flex-wrap:wrap}
.pilihan-footer nav a{color:var(--pilihan-muted);font-size:14px}
/* ============================================================
SECTION 1 — Pilihan Unggulan Minggu Ini (Gambar 1)
Kiri: kartu besar bergambar + kartu putih melayang
Kanan atas: kartu biru solid (Pinned)
Kanan bawah: kartu bergambar + kartu putih melayang
============================================================ */
.pilihan-hero{background:var(--pilihan-bg);padding:36px 0 44px}
.pilihan-hero h2,.pilihan-section-title{font-size:32px;font-weight:800;letter-spacing:-.02em;margin:0 0 22px}
.pilihan-hero-grid{display:grid;grid-template-columns:1.9fr 1fr;gap:20px;align-items:stretch}
.pilihan-hero-main,.pilihan-hero-side-card{position:relative;border-radius:var(--pilihan-radius);overflow:hidden;min-height:300px}
.pilihan-hero-main{min-height:520px}
/* v1.0.6: HANYA foto utama kartu yang absolut. Selector lama
(.pilihan-hero-... img) menangkap SEMUA img di dalam kartu, termasuk
![]()
hasil konversi emoji WordPress/Twemoji di dalam
badge — emoji itu terlepas dari teks, menempel di pojok kartu, dan
badge-nya jadi melebar. Foto utama dibungkus anak langsung
article, jadi selector >a>img hanya mengenai foto itu. */
.pilihan-hero-main>a>img,.pilihan-hero-side-card>a>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pilihan-hero-main::after,.pilihan-hero-side-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.15));pointer-events:none}
.pilihan-hero-side{display:flex;flex-direction:column;gap:20px}
.pilihan-hero-side-card{flex:1}
.pilihan-hero-side-card--blue{background:var(--pilihan-blue);color:#fff}
.pilihan-hero-side-card--blue::after{display:none}
/* Kartu putih melayang di atas gambar */
.pilihan-float{position:absolute;left:20px;bottom:20px;right:20px;z-index:2;max-width:400px}
.pilihan-float .pilihan-badge{margin-bottom:10px}
.pilihan-float-card{
background:#fff;border-radius:var(--pilihan-radius-sm);padding:16px 18px;
box-shadow:var(--pilihan-shadow);
}
.pilihan-float-card .pilihan-readtime{margin-bottom:6px}
.pilihan-float-card h3{font-size:17px;line-height:1.4;margin:0 0 6px}
.pilihan-float-card h3 a{color:var(--pilihan-text)}
.pilihan-float-card h3 a:hover{color:var(--pilihan-blue);text-decoration:none}
.pilihan-float-card p{margin:0;color:var(--pilihan-muted);font-size:14px}
/* Kartu biru */
.pilihan-blue-card{position:relative;z-index:2;padding:30px 28px;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.pilihan-blue-card .pilihan-readtime{color:rgba(255,255,255,.85)}
.pilihan-blue-card h3{font-size:19px;line-height:1.4;margin:10px 0 8px}
.pilihan-blue-card h3 a{color:#fff}
.pilihan-blue-card h3 a:hover{text-decoration:none;opacity:.92}
.pilihan-blue-card p{color:rgba(255,255,255,.9);font-size:14px;margin:0}
/* Badge & meta */
.pilihan-badge{
display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap;
width:fit-content;max-width:100%;
background:#fff;color:var(--pilihan-blue);font-weight:700;font-size:13px;
padding:7px 13px;border-radius:999px 999px 999px 4px;box-shadow:var(--pilihan-shadow-sm);
}
/* Kartu biru adalah flex column: tanpa ini badge (flex item) meregang
selebar kartu. align-self:flex-start membuat pill-nya sekecil teks. */
.pilihan-blue-card .pilihan-badge{align-self:flex-start}
/* Emoji di dalam badge — baik sebagai karakter Unicode maupun sebagai
![]()
hasil konversi WordPress — harus tetap inline
1em di samping teks, tidak pernah absolut / selebar kartu. */
.pilihan-badge .pilihan-badge-emoji{display:inline-flex;align-items:center;flex:0 0 auto;line-height:1}
.pilihan-badge img.emoji,.pilihan-badge img.wp-smiley,.pilihan-badge .pilihan-badge-emoji img{
position:static !important;display:inline-block !important;
width:1em !important;height:1em !important;max-width:1em;
flex:0 0 auto;vertical-align:-0.1em;object-fit:contain;
}
.pilihan-badge--on-blue{background:#fff}
.pilihan-readtime{color:var(--pilihan-blue);font-size:13px;font-weight:600}
.pilihan-readtime--light{color:rgba(255,255,255,.85)}
.pilihan-empty{
background:#fff;border:1px dashed var(--pilihan-border);border-radius:var(--pilihan-radius);
padding:32px;text-align:center;color:var(--pilihan-muted);
}
/* ============================================================
SECTION 2 — Artikel Pilihan (Gambar 2)
============================================================ */
.pilihan-picks{padding:56px 0 10px}
.pilihan-picks .pilihan-section-title{text-align:center}
.pilihan-filters{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 0 26px;padding:0;list-style:none}
.pilihan-filter{
border:1px solid #dbe3ec;background:#fff;color:#344054;
border-radius:999px;padding:8px 17px;font-size:14px;font-weight:500;
}
.pilihan-filter:hover{border-color:var(--pilihan-blue);color:var(--pilihan-blue)}
.pilihan-filter.is-active{border-color:var(--pilihan-blue);color:var(--pilihan-blue);background:var(--pilihan-blue-soft);font-weight:600}
.pilihan-filter.is-hidden{display:none}
.pilihan-grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.pilihan-card{
background:var(--pilihan-card);border-radius:14px;overflow:hidden;
display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease;
}
.pilihan-card:hover{transform:translateY(-3px);box-shadow:var(--pilihan-shadow-sm)}
.pilihan-card:hover a{text-decoration:none}
.pilihan-card-thumb{aspect-ratio:4/5;overflow:hidden;background:linear-gradient(135deg,#cfe2ff,#e9f1fe)}
.pilihan-card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.pilihan-card:hover .pilihan-card-thumb img{transform:scale(1.04)}
.pilihan-card-body{padding:16px 16px 18px}
.pilihan-card-body .pilihan-readtime{display:block;margin-bottom:7px}
.pilihan-card-body h3{font-size:15px;line-height:1.45;margin:0}
.pilihan-card-body h3 a{color:var(--pilihan-text)}
.pilihan-card-body h3 a:hover{color:var(--pilihan-blue)}
.pilihan-more{text-align:center;margin:30px 0 10px}
.pilihan-btn{
display:inline-block;background:var(--pilihan-blue);color:#fff !important;
font-weight:700;font-size:15px;padding:12px 24px;border-radius:10px;border:0;
}
.pilihan-btn:hover{background:var(--pilihan-blue-dark);text-decoration:none}
/* ============================================================
SECTION 3 — Jelajahi Semua Kategori (Gambar 3)
============================================================ */
.pilihan-categories{padding:48px 0 56px}
.pilihan-categories .pilihan-section-title{text-align:center}
.pilihan-cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.pilihan-cat-card{
display:block;background:#fff;border:1px solid var(--pilihan-border);border-radius:14px;
padding:26px 14px 24px;text-align:center;color:var(--pilihan-text);
transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.pilihan-cat-card:hover{transform:translateY(-3px);box-shadow:var(--pilihan-shadow-sm);border-color:#c7d8f5;text-decoration:none}
.pilihan-cat-icon{height:104px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.pilihan-cat-icon svg{width:92px;height:92px}
.pilihan-cat-icon img.pilihan-cat-icon-img{width:92px;height:92px;object-fit:contain}
.pilihan-cat-card h3{font-size:16px;margin:0 0 2px}
.pilihan-cat-count{color:var(--pilihan-muted);font-size:13px;margin:0}
/* ---------- Verified By (Seedbacklink) — di bawah Section 3 ---------- */
.pilihan-verified{background:#fff;padding:4px 0 40px}
.pilihan-verified-inner{display:flex;align-items:center;justify-content:center;gap:16px}
.pilihan-verified-label{font-size:18px;font-weight:800;color:var(--pilihan-text);line-height:1.2}
.pilihan-verified-badge{flex:0 0 auto;width:120px;line-height:0}
.pilihan-verified-badge:hover{text-decoration:none}
.pilihan-verified-badge img{width:100%;height:auto}
/* ---------- Loop arsip / single / page ---------- */
.pilihan-archive-head{padding:36px 0 8px}
.pilihan-archive-head h1{font-size:34px;font-weight:800}
.pilihan-archive-head p{color:var(--pilihan-muted)}
.pilihan-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:20px 0 40px}
.pilihan-list .pilihan-card{background:#fff;border:1px solid var(--pilihan-border)}
.pilihan-list .pilihan-card-thumb{aspect-ratio:16/10}
.pilihan-entry{max-width:760px;margin:0 auto;padding:36px 0 56px}
.pilihan-entry h1{font-size:38px;font-weight:800}
.pilihan-entry-meta{color:var(--pilihan-muted);font-size:14px;margin-bottom:20px}
.pilihan-entry-thumb{border-radius:16px;overflow:hidden;margin-bottom:24px}
.pilihan-entry-thumb img{width:100%}
.entry-content{font-size:17px}
.entry-content h2{font-size:26px;margin-top:1.4em}
.entry-content h3{font-size:21px;margin-top:1.3em}
.pilihan-pagination{text-align:center;padding:10px 0 40px}
.pilihan-pagination .page-numbers{display:inline-block;padding:8px 14px;border:1px solid var(--pilihan-border);border-radius:10px;color:var(--pilihan-text);margin:2px}
.pilihan-pagination .page-numbers.current{background:var(--pilihan-blue);border-color:var(--pilihan-blue);color:#fff}
.pilihan-comments{max-width:760px;margin:0 auto;padding:0 0 56px}
.comment-form input,.comment-form textarea{width:100%;border:1px solid var(--pilihan-border);border-radius:10px;padding:10px 12px;font:inherit}
.comment-form .submit{background:var(--pilihan-blue);color:#fff;border:0;border-radius:10px;padding:11px 22px;font-weight:700}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
/* Elementor: jangan paksa lebar container di dalam canvas */
.elementor-page .pilihan-container{max-width:none}
/* ---------- Responsif ---------- */
@media (max-width:1020px){
.pilihan-hero-grid{grid-template-columns:1fr}
.pilihan-hero-main{min-height:420px}
.pilihan-grid-5{grid-template-columns:repeat(3,1fr)}
.pilihan-cat-grid{grid-template-columns:repeat(3,1fr)}
.pilihan-list{grid-template-columns:repeat(2,1fr)}
.pilihan-search input{min-width:120px}
}
@media (max-width:680px){
.pilihan-header-inner{flex-wrap:wrap;padding:12px 0}
.pilihan-nav{order:3;width:100%;display:none}
.pilihan-nav.is-open{display:block}
.pilihan-nav ul{flex-direction:column;gap:10px}
.pilihan-menu-toggle{display:inline-block}
.pilihan-search{display:none}
.pilihan-hero{padding:24px 0 32px}
.pilihan-hero h2,.pilihan-section-title{font-size:26px}
.pilihan-hero-main{min-height:360px}
.pilihan-float{left:14px;right:14px;bottom:14px}
.pilihan-grid-5{grid-template-columns:repeat(2,1fr)}
.pilihan-cat-grid{grid-template-columns:repeat(2,1fr)}
.pilihan-list{grid-template-columns:1fr}
.pilihan-entry h1{font-size:30px}
}