/*
Theme Name: Bumibahasa
Theme URI: https://bumibahasa.com
Author: Bumibahasa / Sir Wara
Author URI: https://bumibahasa.com
Description: Premium editorial landing theme for Bumibahasa — online IELTS, TOEFL & TOEIC classes with Sir Wara. Bilingual (ID/EN), four color themes, customizer-driven content.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bumibahasa
Tags: education, one-column, custom-colors, custom-menu, custom-logo, featured-images, theme-options, translation-ready, editor-style, rtl-language-support
*/

:root{
  --ivory:#F4EFE6; --ivory-2:#EBE4D6; --ink:#17150F; --ink-soft:#3A352C;
  --mute:#8A8273; --hair:#D8CFBC; --paper:#FBF8F1;
  --clove:oklch(0.55 0.12 40); --clove-ink:oklch(0.35 0.10 40);

  --bg:var(--ivory); --fg:var(--ink); --card:var(--paper);
  --accent:var(--clove); --accent-ink:var(--clove-ink);

  --display:'Newsreader',Georgia,serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

html[data-theme="ivory"]{ --bg:#F4EFE6; --fg:#17150F; --card:#FBF8F1; --hair:#D8CFBC; --accent:oklch(0.55 0.12 40); --accent-ink:oklch(0.35 0.10 40); }
html[data-theme="oxford"]{ --bg:#0F1724; --fg:#EDE6D4; --card:#152034; --hair:#26324a; --mute:#8593ae; --accent:oklch(0.78 0.08 85); --accent-ink:oklch(0.85 0.10 85); --ink-soft:#c8c0ac; }
html[data-theme="mono"]{ --bg:#F6F5F2; --fg:#0A0A0A; --card:#FFFFFF; --hair:#E2DFD8; --accent:#0A0A0A; --accent-ink:#0A0A0A; }
html[data-theme="batik"]{ --bg:#EDE0C9; --fg:#2A1810; --card:#F6EBD5; --hair:#C9B48E; --accent:oklch(0.38 0.10 25); --accent-ink:oklch(0.28 0.10 25); --ink-soft:#5a3e2b; }

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:var(--bg); color:var(--fg); font-family:var(--body); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; }
body{ overflow-x:hidden; transition:background .35s ease, color .35s ease; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
img{ max-width:100%; height:auto; display:block; }

.wrap{ width:min(1280px,92vw); margin:0 auto; }
.mono{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.hair{ height:1px; background:var(--hair); width:100%; }

.nav{ position:sticky; top:0; z-index:40; background:color-mix(in oklab,var(--bg) 88%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--hair); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
.brand{ display:flex; align-items:baseline; gap:10px; }
.brand-mark{ font-family:var(--display); font-weight:500; font-size:22px; letter-spacing:-0.02em; }
.brand-mark i{ font-style:italic; font-weight:400; color:var(--accent); }
.brand-sub{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); }
.nav-links{ display:flex; gap:28px; font-size:13px; color:var(--ink-soft); list-style:none; }
.nav-links a:hover{ color:var(--accent); }
.nav-cta{ display:flex; gap:10px; align-items:center; }

.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; font-size:13px; font-weight:500; border-radius:999px; border:1px solid var(--hair); transition:all .2s ease; white-space:nowrap; }
.btn:hover{ border-color:var(--fg); }
.btn-primary{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.btn-primary:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-accent{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-accent:hover{ background:var(--accent-ink); border-color:var(--accent-ink); }
.btn-ghost{ background:transparent; }
.btn .arr{ font-family:var(--display); font-style:italic; }

.hero{ padding:70px 0 100px; position:relative; }
.hero-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:end; }
.eyebrow-row{ display:flex; align-items:center; gap:14px; margin-bottom:40px; }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block; }
h1.display{ font-family:var(--display); font-weight:400; font-size:clamp(54px,7.2vw,112px); line-height:.96; letter-spacing:-.025em; text-wrap:balance; }
h1.display i{ font-style:italic; font-weight:300; color:var(--accent); }
.hero-lede{ margin-top:32px; max-width:540px; font-size:17px; line-height:1.55; color:var(--ink-soft); }
.hero-lede b{ color:var(--fg); font-weight:500; }
.hero-ctas{ margin-top:36px; display:flex; gap:12px; flex-wrap:wrap; }
.hero-right{ display:flex; flex-direction:column; gap:0; }
.portrait{ aspect-ratio:4/5; background:var(--card); border:1px solid var(--hair); position:relative; overflow:hidden; border-radius:2px; }
.portrait img{ width:100%; height:100%; object-fit:cover; }
.portrait-ph{ position:absolute; inset:0; background:repeating-linear-gradient(135deg,transparent 0 14px,color-mix(in oklab,var(--hair) 60%,transparent) 14px 15px),linear-gradient(180deg,color-mix(in oklab,var(--accent) 12%,var(--card)),var(--card)); display:flex; align-items:flex-end; padding:24px; }
.portrait-ph .ph-label{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); line-height:1.5; }
.portrait-cap{ display:flex; justify-content:space-between; padding-top:14px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }

.scores{ display:grid; grid-template-columns:1fr 1fr 1fr; border-top:1px solid var(--hair); margin-top:64px; }
.score{ padding:24px 20px 20px; border-right:1px solid var(--hair); position:relative; }
.score:last-child{ border-right:0; }
.score-n{ font-family:var(--display); font-size:56px; font-weight:400; line-height:1; letter-spacing:-.02em; }
.score-n sup{ font-size:18px; vertical-align:top; margin-left:2px; color:var(--mute); }
.score-label{ margin-top:8px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.score-note{ margin-top:6px; font-size:12px; color:var(--mute); }
.score.ielts .score-n{ color:var(--accent); }

.inst{ padding:28px 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); overflow:hidden; }
.inst-row{ display:flex; align-items:center; gap:56px; white-space:nowrap; animation:marquee 38s linear infinite; }
.inst-row span{ font-family:var(--display); font-style:italic; font-size:22px; color:var(--ink-soft); font-weight:400; }
.inst-row .sep{ color:var(--mute); font-style:normal; }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

section.sec{ padding:110px 0; border-top:1px solid var(--hair); }
.sec-head{ display:grid; grid-template-columns:240px 1fr; gap:40px; align-items:start; margin-bottom:56px; }
.sec-num{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); padding-top:10px; }
.sec-title{ font-family:var(--display); font-weight:400; font-size:clamp(36px,4.5vw,58px); line-height:1.02; letter-spacing:-.02em; text-wrap:balance; max-width:860px; }
.sec-title i{ font-style:italic; color:var(--accent); font-weight:300; }

.programs{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--hair); }
.prog{ padding:40px 32px 36px; border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); display:flex; flex-direction:column; gap:18px; background:var(--bg); transition:background .25s ease; position:relative; }
.prog:nth-child(3n){ border-right:0; }
.prog:hover{ background:var(--card); }
.prog-tag{ display:flex; align-items:center; justify-content:space-between; }
.prog-price{ font-family:var(--display); font-size:22px; }
.prog-price small{ font-family:var(--body); font-size:12px; color:var(--mute); font-weight:400; margin-left:6px; }
.prog-name{ font-family:var(--display); font-size:34px; line-height:1.05; letter-spacing:-.015em; font-weight:400; }
.prog-name i{ font-style:italic; color:var(--accent); font-weight:300; }
.prog-desc{ font-size:14px; color:var(--ink-soft); line-height:1.55; }
.prog-meta{ display:flex; gap:16px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); padding-top:18px; border-top:1px solid var(--hair); margin-top:auto; }
.prog-meta span{ display:flex; align-items:center; gap:6px; }
.prog-meta .bul{ width:4px; height:4px; border-radius:50%; background:var(--accent); }
.prog.featured{ background:var(--fg); color:var(--bg); }
.prog.featured .prog-name i{ color:var(--accent); }
.prog.featured .prog-desc{ color:color-mix(in oklab,var(--bg) 75%,transparent); }
.prog.featured .prog-meta{ color:color-mix(in oklab,var(--bg) 60%,transparent); border-color:color-mix(in oklab,var(--bg) 18%,transparent); }
.prog.featured:hover{ background:var(--fg); }

.method{ display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.method-list{ display:flex; flex-direction:column; }
.m-item{ display:grid; grid-template-columns:64px 1fr; gap:24px; padding:26px 0; border-top:1px solid var(--hair); align-items:start; }
.m-item:last-child{ border-bottom:1px solid var(--hair); }
.m-num{ font-family:var(--display); font-size:38px; line-height:1; font-style:italic; color:var(--accent); font-weight:300; }
.m-title{ font-family:var(--display); font-size:22px; line-height:1.2; letter-spacing:-.01em; font-weight:400; margin-bottom:6px; }
.m-desc{ font-size:14px; line-height:1.55; color:var(--ink-soft); }
.method-visual{ position:relative; aspect-ratio:3/4; background:var(--card); border:1px solid var(--hair); padding:32px; display:flex; flex-direction:column; justify-content:space-between; }
.mv-top{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); display:flex; justify-content:space-between; }
.mv-quote{ font-family:var(--display); font-weight:300; font-size:clamp(28px,2.6vw,40px); line-height:1.15; letter-spacing:-.01em; text-wrap:pretty; }
.mv-quote i{ font-style:italic; color:var(--accent); font-weight:300; }
.mv-sig{ font-family:var(--display); font-style:italic; font-size:18px; color:var(--ink-soft); }

.testim{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--hair); }
.t-card{ padding:36px 32px; border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); display:flex; flex-direction:column; gap:20px; }
.t-card:nth-child(3n){ border-right:0; }
.t-score{ font-family:var(--display); font-size:46px; line-height:1; letter-spacing:-.02em; color:var(--accent); }
.t-score sup{ font-size:16px; color:var(--mute); margin-left:4px; vertical-align:top; }
.t-quote{ font-family:var(--display); font-size:18px; line-height:1.4; font-weight:400; text-wrap:pretty; }
.t-meta{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:16px; border-top:1px solid var(--hair); }
.t-avatar{ width:36px; height:36px; border-radius:50%; background:var(--ivory-2); border:1px solid var(--hair); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:15px; color:var(--ink-soft); }
.t-name{ font-size:13px; font-weight:500; }
.t-goal{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
.dest{ display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:56px; align-items:center; }
.dest span{ font-family:var(--display); font-style:italic; font-size:22px; color:var(--ink-soft); }
.dest .sep{ color:var(--hair); font-style:normal; font-size:14px; }

.essays{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--hair); }
.essay{ padding:36px 32px; border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; transition:background .2s ease; }
.essay:nth-child(2n){ border-right:0; }
.essay:hover{ background:var(--card); }
.essay-cat{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.essay-title{ font-family:var(--display); font-size:22px; line-height:1.2; font-weight:400; letter-spacing:-.01em; margin-bottom:6px; text-wrap:pretty; }
.essay-meta{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
.essay-arr{ font-family:var(--display); font-style:italic; font-size:28px; color:var(--ink-soft); opacity:.5; transition:all .2s ease; }
.essay:hover .essay-arr{ opacity:1; color:var(--accent); transform:translateX(4px); }

.batch{ display:grid; grid-template-columns:1fr 1fr; gap:40px; border:1px solid var(--hair); background:var(--card); }
.batch-left{ padding:56px 48px; border-right:1px solid var(--hair); }
.batch-right{ padding:56px 48px; display:flex; flex-direction:column; gap:20px; }
.batch-label{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:20px; }
.batch-title{ font-family:var(--display); font-size:clamp(36px,4vw,54px); line-height:1.02; letter-spacing:-.02em; font-weight:400; text-wrap:balance; }
.batch-title i{ font-style:italic; color:var(--accent); font-weight:300; }
.batch-desc{ margin-top:20px; color:var(--ink-soft); max-width:420px; line-height:1.55; }
.batch-price{ font-family:var(--display); font-size:80px; line-height:1; letter-spacing:-.03em; font-weight:400; }
.batch-price .k{ font-size:46px; color:var(--accent); }
.batch-price small{ font-family:var(--body); font-size:14px; color:var(--mute); font-weight:400; display:block; margin-top:8px; letter-spacing:0; }
.batch-incl{ list-style:none; display:flex; flex-direction:column; gap:10px; padding-top:20px; border-top:1px solid var(--hair); }
.batch-incl li{ display:flex; align-items:center; gap:12px; font-size:14px; color:var(--ink-soft); }
.batch-incl li::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.batch-cta-row{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }

.faq-list{ border-top:1px solid var(--hair); }
.q{ border-bottom:1px solid var(--hair); padding:28px 0; display:grid; grid-template-columns:60px 1fr 40px; gap:24px; align-items:start; cursor:pointer; transition:padding .2s ease; }
.q:hover{ padding-left:8px; }
.q-num{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--mute); padding-top:8px; }
.q-text{ font-family:var(--display); font-size:clamp(20px,2vw,26px); line-height:1.25; font-weight:400; letter-spacing:-.01em; }
.q-a{ overflow:hidden; max-height:0; transition:max-height .35s ease, margin-top .35s ease; }
.q.open .q-a{ max-height:400px; margin-top:18px; }
.q-a p{ max-width:70ch; color:var(--ink-soft); font-size:15px; line-height:1.6; padding-bottom:8px; }
.q-plus{ font-family:var(--display); font-size:28px; color:var(--accent); line-height:1; justify-self:end; transition:transform .3s ease; }
.q.open .q-plus{ transform:rotate(45deg); }

.finale{ padding:140px 0 120px; background:var(--fg); color:var(--bg); position:relative; overflow:hidden; border-top:0; }
.finale .finale-inner{ position:relative; z-index:2; }
.finale h2{ font-family:var(--display); font-size:clamp(54px,8vw,140px); line-height:.95; letter-spacing:-.03em; font-weight:300; text-wrap:balance; max-width:14ch; }
.finale h2 i{ font-style:italic; color:var(--accent); }
.finale-row{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:60px; flex-wrap:wrap; gap:40px; }
.finale .btn-primary{ background:var(--bg); color:var(--fg); border-color:var(--bg); }
.finale .btn-primary:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.finale-contacts{ display:flex; flex-direction:column; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in oklab,var(--bg) 65%,transparent); }
.finale-contacts a:hover{ color:var(--accent); }
.finale-big-wm{ position:absolute; right:-40px; bottom:-160px; font-family:var(--display); font-style:italic; font-size:520px; font-weight:300; line-height:1; opacity:.06; pointer-events:none; user-select:none; }

.foot{ padding:30px 0; background:var(--fg); color:color-mix(in oklab,var(--bg) 55%,transparent); border-top:1px solid color-mix(in oklab,var(--bg) 15%,transparent); font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
.foot .wrap{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }

/* Single / page / archive typography */
.single-main, .page-main, .archive-main{ padding:80px 0 120px; }
.entry-header{ max-width:800px; margin:0 auto 48px; }
.entry-title{ font-family:var(--display); font-size:clamp(36px,5vw,64px); font-weight:400; line-height:1.05; letter-spacing:-.02em; text-wrap:balance; }
.entry-meta{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-top:16px; }
.entry-content{ max-width:720px; margin:0 auto; font-size:17px; line-height:1.7; color:var(--ink-soft); }
.entry-content h2{ font-family:var(--display); font-size:32px; font-weight:400; margin:48px 0 16px; color:var(--fg); letter-spacing:-.01em; }
.entry-content h3{ font-family:var(--display); font-size:24px; font-weight:400; margin:32px 0 12px; color:var(--fg); }
.entry-content p{ margin-bottom:20px; }
.entry-content a{ color:var(--accent); border-bottom:1px solid color-mix(in oklab,var(--accent) 40%,transparent); }
.entry-content blockquote{ border-left:2px solid var(--accent); padding:8px 0 8px 24px; font-family:var(--display); font-size:24px; font-style:italic; color:var(--fg); margin:32px 0; }
.entry-content ul, .entry-content ol{ margin:20px 0 20px 24px; }
.entry-content li{ margin-bottom:8px; }
.archive-title{ font-family:var(--display); font-size:48px; font-weight:400; text-align:center; margin-bottom:48px; letter-spacing:-.02em; }
.post-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--hair); max-width:1080px; margin:0 auto; }
.post-list .essay{ text-align:left; }
.pagination{ margin-top:56px; display:flex; gap:8px; justify-content:center; font-family:var(--mono); font-size:12px; }
.pagination .page-numbers{ padding:8px 12px; border:1px solid var(--hair); border-radius:999px; color:var(--ink-soft); }
.pagination .current{ background:var(--fg); color:var(--bg); border-color:var(--fg); }

.tweaks{ position:fixed; right:20px; bottom:20px; width:300px; background:var(--paper); color:var(--ink); border:1px solid var(--hair); border-radius:6px; padding:18px; box-shadow:0 20px 40px -20px rgba(0,0,0,0.25); z-index:100; }
.tw-group{ margin-bottom:14px; }
.tw-label{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-bottom:8px; }
.tw-pills{ display:flex; flex-wrap:wrap; gap:6px; }
.tw-pill{ padding:6px 10px; border:1px solid var(--hair); border-radius:999px; font-size:11px; cursor:pointer; background:transparent; }
.tw-pill.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.tw-swatches{ display:flex; gap:8px; }
.tw-swatch{ width:26px; height:26px; border-radius:50%; border:2px solid var(--hair); cursor:pointer; }
.tw-swatch.active{ outline:2px solid var(--ink); outline-offset:2px; }
.tweaks h4{ font-family:var(--display); font-weight:400; font-size:18px; margin-bottom:14px; }

.en{ display:none; }
html[data-lang="en"] .en{ display:initial; }
html[data-lang="en"] .id{ display:none; }

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .sec-head{ grid-template-columns:1fr; gap:12px; }
  .programs{ grid-template-columns:1fr; }
  .prog{ border-right:0 !important; }
  .method{ grid-template-columns:1fr; gap:40px; }
  .testim{ grid-template-columns:1fr; }
  .t-card{ border-right:0 !important; }
  .essays, .post-list{ grid-template-columns:1fr; }
  .essay{ border-right:0 !important; }
  .batch{ grid-template-columns:1fr; }
  .batch-left{ border-right:0; border-bottom:1px solid var(--hair); padding:36px 28px; }
  .batch-right{ padding:36px 28px; }
  .nav-links{ display:none; }
  .scores{ grid-template-columns:1fr; }
  .score{ border-right:0; border-bottom:1px solid var(--hair); }
  .finale-big-wm{ font-size:260px; bottom:-80px; }
}

/* WP core alignment & gallery utilities */
.alignleft{ float:left; margin:8px 24px 8px 0; }
.alignright{ float:right; margin:8px 0 8px 24px; }
.aligncenter{ display:block; margin:16px auto; }
.wp-caption{ max-width:100%; }
.wp-caption-text{ font-family:var(--mono); font-size:11px; color:var(--mute); text-transform:uppercase; letter-spacing:.12em; text-align:center; margin-top:8px; }
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }