/*
Theme Name: Madinah Al Hijrah V2
Theme URI: https://example.com/
Author: OpenAI
Description: Tema WordPress responsif untuk Pondok Pesantren Madinah Al Hijrah, mengikuti wireframe hijau-putih yang diberikan.
Version: 2.0.2
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: madinah-al-hijrah-v2
*/
:root{--green:#36734f;--green-dark:#24563a;--green-light:#edf5ef;--ink:#203b35;--muted:#64756f;--line:#dce6e0;--paper:#fff;--soft:#f6f9f7;--radius:12px;--shadow:0 8px 28px rgba(28,65,44,.07)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.65;background:#fff;font-size:15px}a{color:var(--green);text-decoration:none}a:hover{color:var(--green-dark)}img{max-width:100%;height:auto}button,input,textarea{font:inherit}.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}.site-header{background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:99;backdrop-filter:blur(12px)}.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px;min-width:210px;color:var(--ink)}.brand img{width:58px;height:58px;object-fit:contain}.brand-name{font-weight:800;line-height:1.15;font-size:17px;letter-spacing:-.3px}.brand-name small{display:block;font-size:10px;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:5px}.primary-nav ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}.primary-nav a{font-size:12px;font-weight:650;color:#344a42}.primary-nav a:hover{color:var(--green)}.header-actions{display:flex;gap:10px;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:8px;background:var(--green);color:#fff;border:1px solid var(--green);font-size:13px;font-weight:700;transition:.2s}.btn:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff;transform:translateY(-1px)}.btn-outline{background:transparent;color:var(--green)}.btn-outline:hover{color:white}.menu-toggle{display:none;background:white;border:1px solid var(--line);padding:8px 11px;border-radius:8px;color:var(--ink)}.hero{background:linear-gradient(100deg,#f2f7f3 0%,#f5f8f6 42%,rgba(246,249,247,.68) 100%);overflow:hidden}.hero-grid{min-height:390px;display:grid;grid-template-columns: .92fr 1.08fr;align-items:center;gap:30px}.hero-copy{padding:56px 0}.eyebrow{display:inline-block;background:#e1eee5;border:1px solid #c8ddce;border-radius:99px;padding:5px 12px;color:var(--green-dark);font-size:11px;font-weight:700;margin-bottom:15px}.hero h1{font-size:clamp(32px,4vw,48px);line-height:1.12;letter-spacing:-1.3px;margin:0 0 17px;max-width:570px}.hero p{color:#596d64;max-width:480px;margin:0 0 23px}.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}.hero-art{height:390px;position:relative;align-self:stretch;overflow:hidden;border-radius:0 0 0 100px;background:linear-gradient(135deg,#d8e3dc,#aabeb1)}.hero-art:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(242,247,243,.1),rgba(35,71,48,.06)),url('') center/cover}.hero-art img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.65)}.hero-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:35px;color:#456451;font-weight:700;background:radial-gradient(circle at 70% 30%,#f7faf7,transparent 35%),linear-gradient(135deg,#dfeae2,#a9c2b1)}.section{padding:52px 0}.section-soft{background:var(--soft)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}.section-heading h2{font-size:25px;line-height:1.2;margin:0 0 7px;letter-spacing:-.5px}.section-heading p{margin:0;color:var(--muted);font-size:13px;max-width:600px}.text-link{font-size:12px;font-weight:750;white-space:nowrap}.grid{display:grid;gap:20px}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:white;transition:.2s}.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}.card-image{height:150px;background:linear-gradient(135deg,#e4e8e6,#cbd3cf);overflow:hidden}.card-image img{width:100%;height:100%;object-fit:cover;display:block}.card-body{padding:17px}.tag{display:inline-block;background:#e5f0e8;color:#386849;border-radius:5px;padding:3px 7px;font-size:10px;font-weight:700;margin-bottom:8px}.card h3{font-size:15px;line-height:1.4;margin:0 0 8px}.card p{font-size:12px;color:var(--muted);margin:0 0 12px}.meta{font-size:11px;color:#718078}.gallery-card .card-image{height:128px}.gallery-card .card-body{padding:12px 15px}.gallery-card h3{font-size:12px;margin:0}.program-card .card-image{height:90px}.program-icon{display:inline-flex;width:30px;height:30px;border-radius:8px;align-items:center;justify-content:center;background:#e4efe7;color:var(--green);font-weight:800;margin-bottom:8px}.program-card .card-body{padding:17px}.impact-band{background:linear-gradient(105deg,#f0f6f1,#e6efe8);padding:35px 0}.impact-band h2{font-size:25px;margin:0 0 6px}.impact-band p{color:var(--muted);font-size:13px;margin:0;max-width:620px}.impact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}.impact-item{background:white;border:1px solid #e4ece6;border-radius:10px;padding:18px;display:flex;gap:14px;align-items:center}.impact-icon{font-size:22px;color:var(--green)}.impact-item strong{display:block;font-size:13px}.impact-item small{color:var(--muted);font-size:11px}.progress-list{display:grid;gap:16px}.progress-row{display:grid;grid-template-columns:74px 1fr 38px;gap:14px;align-items:center}.progress-thumb{height:48px;background:#e1e7e3;border-radius:7px;overflow:hidden}.progress-thumb img{width:100%;height:100%;object-fit:cover}.progress-info{font-size:12px;color:var(--muted)}.progress-track{height:7px;border-radius:99px;background:#e9efeb;margin-top:7px;overflow:hidden}.progress-track span{height:100%;display:block;background:linear-gradient(90deg,#4d8a63,#36734f);border-radius:99px}.progress-number{font-size:11px;color:var(--muted);text-align:right}.story-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:center}.story-image{height:170px;background:#e1e8e3;border-radius:10px;overflow:hidden}.story-image img{width:100%;height:100%;object-fit:cover}.quote{font-size:14px;color:#53685d;font-style:italic}.quote:before{content:"“";font-size:34px;line-height:0;color:var(--green);font-weight:800;margin-right:7px}.quote cite{display:block;font-size:11px;font-style:normal;margin-top:10px;color:var(--muted)}.cta-band{background:linear-gradient(110deg,#245d3b,#3b7950);color:white;padding:27px 0;position:relative;overflow:hidden}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}.cta-copy{display:flex;align-items:center;gap:18px}.cta-symbol{font-size:35px}.cta-band h2{font-size:20px;margin:0 0 3px}.cta-band p{font-size:12px;color:#e0eee4;margin:0}.btn-light{background:#fff;border-color:#fff;color:var(--green-dark);border-radius:99px}.btn-light:hover{background:#f0f7f2;color:var(--green-dark)}.site-footer{background:#f8faf8;border-top:1px solid var(--line);padding:35px 0;color:#52655b}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:28px}.footer-brand{display:flex;gap:10px;align-items:center}.footer-brand img{width:55px;height:55px;object-fit:contain}.footer-brand strong{font-size:14px;line-height:1.2;color:var(--ink)}.footer-title{font-size:12px;font-weight:800;color:var(--ink);margin-bottom:8px}.site-footer p,.site-footer a{font-size:11px;color:#65766d;margin:0 0 5px}.footer-bottom{border-top:1px solid var(--line);padding-top:14px;margin-top:25px;font-size:10px;color:#829087}.page-header{background:var(--soft);padding:44px 0}.page-header h1{margin:0 0 7px;font-size:34px}.page-header p{margin:0;color:var(--muted)}.content-area{padding:42px 0}.post-content{max-width:800px}.post-content h2,.post-content h3{line-height:1.3}.post-content p{color:#4d6157}.post-thumbnail{border-radius:12px;overflow:hidden;margin-bottom:25px}.pagination{margin-top:28px}.pagination .page-numbers{display:inline-block;padding:8px 12px;border:1px solid var(--line);border-radius:6px;margin-right:5px}.pagination .current{background:var(--green);color:#fff}.empty-state{padding:28px;border:1px dashed var(--line);border-radius:10px;color:var(--muted)}.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden}
@media(max-width:980px){.primary-nav ul{gap:14px}.brand{min-width:auto}.hero-grid{grid-template-columns:1fr 1fr}.hero h1{font-size:36px}.grid-4{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.container{width:min(100% - 28px,600px)}.header-inner{min-height:70px;flex-wrap:wrap}.brand img{width:48px;height:48px}.brand-name{font-size:15px}.menu-toggle{display:block}.primary-nav{display:none;order:5;width:100%;padding:0 0 15px}.primary-nav.is-open{display:block}.primary-nav ul{display:flex;align-items:stretch;flex-direction:column;gap:0}.primary-nav li{border-top:1px solid var(--line);padding:10px 0}.header-actions .btn{padding:9px 12px;font-size:11px}.hero-grid{grid-template-columns:1fr;gap:0}.hero-copy{padding:40px 0 28px}.hero h1{font-size:34px}.hero-art{height:230px;border-radius:0 0 0 60px;margin-left:28px}.section{padding:38px 0}.section-heading{align-items:start;flex-direction:column;gap:10px}.section-heading h2,.impact-band h2{font-size:22px}.grid-3{grid-template-columns:1fr}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card-image{height:160px}.gallery-card .card-image{height:105px}.card-body{padding:14px}.impact-grid{grid-template-columns:1fr}.progress-row{grid-template-columns:58px 1fr 34px;gap:10px}.story-grid{grid-template-columns:1fr;gap:18px}.cta-inner{align-items:flex-start;flex-direction:column}.cta-copy{align-items:flex-start}.footer-grid{grid-template-columns:1fr 1fr;gap:22px}.page-header h1{font-size:28px}}
@media(max-width:420px){.header-actions .btn{padding:8px 9px}.hero h1{font-size:30px}.grid-4{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr}.brand{gap:7px}.brand img{width:42px;height:42px}}