/*
Theme Name: Review Bogor Economist
Theme URI: https://reviewbogor.com
Author: Review Bogor x Economist Edition
Description: Theme minimal premium ala The Economist dengan DNA warna logo reviewbogor.com - hitam #0F1419 dan hijau #1E7A34. Versi 3 Mobile Fix dengan hamburger.
Version: 3.0 Mobile Fix
*/

:root{
  --rb-black:#0F1419;
  --rb-green:#1E7A34;
  --rb-green-hover:#145A26;
  --rb-border:#E5E5E5;
  --rb-bg:#FFFFFF;
  --rb-text:#121212;
  --rb-muted:#6B6B6B;
  --rb-serif: Georgia, 'Times New Roman', serif;
  --rb-sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html{overflow-x:hidden}
body{margin:0;background:var(--rb-bg);color:var(--rb-text);font-family:var(--rb-serif);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:hover{color:var(--rb-green)}

/* Topbar */
.rb-topbar{background:var(--rb-black);color:#fff;font-family:var(--rb-sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;padding:8px 24px}
.rb-topbar a{color:#fff;opacity:.9;margin-right:16px}
.rb-topbar a:hover{opacity:1;text-decoration:underline}
.rb-btn{border:1px solid #fff;padding:6px 14px;border-radius:999px;font-weight:600}
.rb-topbar-left span.hide-mobile{display:inline}
.rb-topbar-right{display:flex;align-items:center}

/* Header */
.rb-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--rb-border)}
.rb-header-inner{max-width:1280px;margin:0 auto;padding:14px 24px;display:flex;flex-direction:column;align-items:center;position:relative}
.rb-logo-wrap{display:flex;justify-content:center;width:100%}
.rb-logo, img.custom-logo, .custom-logo{height:48px !important;width:auto !important;max-width:320px !important;object-fit:contain;display:block}
.rb-tagline{font-family:var(--rb-sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--rb-muted);margin-top:8px;text-align:center}
.rb-kicker{font-family:var(--rb-sans);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rb-green)}
.rb-title{font-family:var(--rb-serif);font-weight:800;line-height:1.1;letter-spacing:-.01em}
.rb-title a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--rb-green)}
.rb-excerpt{font-family:var(--rb-sans);font-size:14.5px;line-height:1.5;color:var(--rb-muted)}
.rb-meta{font-family:var(--rb-sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8a8a8a}
.rb-rule{height:1px;background:var(--rb-border);margin:16px 0}
.rb-mostread-num{font-family:var(--rb-serif);font-weight:800;color:var(--rb-green);font-size:28px;line-height:1}

/* Desktop Nav */
.rb-nav{margin-top:14px;display:flex;gap:20px;font-family:var(--rb-sans);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;border-top:1px solid var(--rb-border);padding-top:12px;width:100%;justify-content:center}
.rb-nav ul, .rb-nav .menu{list-style:none !important;margin:0 !important;padding:0 !important;display:flex !important;gap:22px !important;justify-content:center;flex-wrap:wrap}
.rb-nav li{list-style:none !important;margin:0 !important}
.rb-nav li::before{content:none !important}
.rb-nav li a{white-space:nowrap;position:relative;padding-bottom:2px}
.rb-nav li a:after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--rb-green);transition:width .2s}
.rb-nav li a:hover:after{width:100%}

/* Hamburger - hidden desktop */
.rb-hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;position:absolute;right:16px;top:18px}
.rb-hamburger span{display:block;width:22px;height:2px;background:var(--rb-black);margin:4px 0;transition:.2s}
.rb-hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.rb-hamburger.active span:nth-child(2){opacity:0}
.rb-hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Grids */
.rb-grid-top{display:grid;grid-template-columns:2fr 1fr;gap:32px}
.rb-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.rb-sidebar{border-left:1px solid var(--rb-border);padding-left:24px}

/* MOBILE FIXES */
@media(max-width:900px){
  .rb-topbar{padding:6px 16px;font-size:10px}
  .rb-topbar-left span.hide-mobile{display:none}
  .rb-header-inner{padding:10px 16px 0 16px}
  .rb-logo, img.custom-logo, .custom-logo{height:28px !important;max-width:180px !important}
  .rb-tagline{font-size:9px;letter-spacing:.15em;margin-top:4px}
  .rb-hamburger{display:block}
  .rb-nav{
    display:none !important;
    flex-direction:column;
    border-top:1px solid var(--rb-border);
    margin-top:10px;
    padding:0;
    width:100%;
    background:#fff;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:100;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
  }
  .rb-nav.open{display:flex !important}
  .rb-nav ul, .rb-nav .menu{
    flex-direction:column !important;
    gap:0 !important;
    width:100%;
  }
  .rb-nav li{
    width:100%;
    border-bottom:1px solid #f0f0f0;
  }
  .rb-nav li a{
    display:block;
    padding:14px 24px;
    font-size:13px;
  }
  .rb-nav li a:after{display:none}
  .rb-grid-top{grid-template-columns:1fr;gap:20px}
  .rb-sidebar{border-left:none !important;border-top:1px solid var(--rb-border);padding-left:0;padding-top:20px}
  .rb-grid-4{grid-template-columns:1fr;gap:20px}
  main{padding:16px !important}
  .rb-card-large .rb-title{font-size:26px !important}
}
@media(min-width:901px) and (max-width:1100px){
  .rb-grid-4{grid-template-columns:repeat(2,1fr)}
}