/*
Theme Name: Firva Agency
Theme URI: https://firvaagency.com
Author: Firva Agency
Author URI: https://firvaagency.com
Description: Tema profesional untuk bisnis dan digital marketing dengan fitur auto publish artikel.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.7
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: firva-agency
Tags: blog, business, digital-marketing, professional
*/

/* === RESET === */
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif;}
body{background:#f5f7fa;color:#333;line-height:1.8;}

/* === HEADER === */
header{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.1);position:sticky;top:0;z-index:1000;}
.navbar{max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:20px;}
.logo{font-size:28px;font-weight:bold;color:#0d6efd;text-decoration:none;}
nav ul{display:flex;list-style:none;gap:30px;}
nav a{text-decoration:none;color:#333;font-weight:600;transition:.3s;}
nav a:hover{color:#0d6efd;}

/* === HERO === */
.hero{height:500px;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url('https://images.unsplash.com/photo-1499750310107-5fef28a66643');background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;text-align:center;color:white;padding:20px;}
.hero-content h1{font-size:50px;margin-bottom:20px;}
.hero-content p{font-size:20px;max-width:700px;margin:auto;}

/* === MAIN LAYOUT === */
.container{max-width:1200px;margin:80px auto;padding:20px;display:grid;grid-template-columns:2fr 1fr;gap:40px;}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;}

/* === CARDS === */
.card{background:white;border-radius:15px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.08);transition:.3s;}
.card:hover{transform:translateY(-10px);}
.card img{width:100%;height:220px;object-fit:cover;}
.card-content{padding:25px;}
.card-content h2{margin-bottom:15px;font-size:22px;}
.card-content h2 a{text-decoration:none;color:#333;transition:.3s;}
.card-content h2 a:hover{color:#0d6efd;}
.card-content p{color:#666;margin-bottom:20px;}
.card-meta{font-size:13px;color:#999;margin-bottom:10px;}
.card-category{display:inline-block;padding:3px 10px;background:#e8f0fe;color:#0d6efd;border-radius:20px;font-size:12px;font-weight:bold;margin-bottom:10px;}
.btn{display:inline-block;padding:12px 25px;background:#0d6efd;color:white;text-decoration:none;border-radius:50px;font-weight:bold;transition:.3s;}
.btn:hover{background:#084298;}

/* === NO POSTS === */
.no-posts{background:white;padding:40px;border-radius:15px;text-align:center;color:#666;}

/* === SIDEBAR === */
.sidebar{display:flex;flex-direction:column;gap:30px;}
.widget{background:white;padding:30px;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,0.08);}
.widget h3{margin-bottom:20px;color:#0d6efd;}
.widget ul{list-style:none;}
.widget li{margin-bottom:12px;}
.widget a{text-decoration:none;color:#555;}
.widget a:hover{color:#0d6efd;}
.search-form input{width:100%;padding:10px 15px;border:1px solid #ddd;border-radius:50px;outline:none;}
.search-form button{margin-top:10px;width:100%;padding:10px;background:#0d6efd;color:white;border:none;border-radius:50px;cursor:pointer;font-weight:bold;}

/* === SINGLE POST === */
.single-post{background:white;border-radius:15px;padding:40px;box-shadow:0 10px 30px rgba(0,0,0,0.08);}
.single-post h1{font-size:32px;margin-bottom:20px;line-height:1.4;}
.post-meta{color:#999;font-size:14px;margin-bottom:30px;}
.post-thumbnail{width:100%;max-height:450px;object-fit:cover;border-radius:10px;margin-bottom:30px;}
.post-content{color:#444;font-size:16px;line-height:1.9;}
.post-content p{margin-bottom:20px;}
.post-content h2,.post-content h3{margin:25px 0 15px;color:#222;}
.post-content img{max-width:100%;border-radius:8px;}
.post-tags{margin-top:30px;}
.post-tags a{display:inline-block;padding:5px 12px;background:#f0f0f0;border-radius:20px;color:#555;text-decoration:none;margin:3px;font-size:13px;}
.post-nav{display:flex;justify-content:space-between;margin-top:40px;gap:20px;}
.post-nav a{padding:12px 20px;background:#0d6efd;color:white;text-decoration:none;border-radius:50px;font-size:14px;transition:.3s;}
.post-nav a:hover{background:#084298;}

/* === PAGINATION === */
.pagination{display:flex;justify-content:center;gap:10px;margin-top:40px;flex-wrap:wrap;}
.pagination a,.pagination span{padding:10px 18px;background:white;border-radius:8px;text-decoration:none;color:#333;box-shadow:0 2px 8px rgba(0,0,0,.08);}
.pagination .current{background:#0d6efd;color:white;}
.pagination a:hover{background:#0d6efd;color:white;}

/* === FOOTER === */
footer{background:#111827;color:white;padding:50px 20px;text-align:center;margin-top:80px;}
footer h2{font-size:28px;margin-bottom:10px;}
footer p{opacity:.8;margin-top:10px;}
footer a{color:#6ea8fe;text-decoration:none;}

/* === RESPONSIVE === */
@media(max-width:900px){
  .container{grid-template-columns:1fr;}
  .hero-content h1{font-size:32px;}
  nav ul{gap:15px;font-size:14px;}
}
@media(max-width:600px){
  .navbar{flex-direction:column;gap:15px;}
  .hero-content h1{font-size:26px;}
  .hero{height:380px;}
}