:root{color-scheme:light}
html{scroll-behavior:smooth;scroll-padding-top:22px}
body{margin:0;background:#F7F9F5;color:#193F33;font:15px/1.6 'Inter',Arial,sans-serif}
.kh27{--forest:#193F33;--emerald:#176B4D;--green:#217856;--gold:#CBA55A;--line:#DBE7DE;--soft:#EFF7F0;--muted:#5E7467;min-height:100vh;overflow-x:clip}
.kh27 *{box-sizing:border-box}
.kh27 button,.kh27 select{font:inherit}.kh27 button{cursor:pointer}.kh27 a{color:var(--emerald)}
.kh27 a:focus-visible,.kh27 button:focus-visible,.kh27 select:focus-visible{outline:3px solid #D0A34B;outline-offset:3px}
.kh27 h1,.kh27 h2,.kh27 h3{font-family:'DM Serif Display',Georgia,serif;font-weight:400;line-height:1.25;letter-spacing:-.015em;margin:0;color:var(--forest)}
.kh27 p{margin:0}.kh27 .container{width:min(1080px,calc(100% - 30px));margin-inline:auto}
.site-header{background:#FFFDF7;border-bottom:1px solid #E2E9DD}.header-inner{min-height:73px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--forest)!important}.brand-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:var(--emerald);color:#FFFBE9;font-size:26px}.brand strong{display:block;font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:21px;line-height:1.1}.brand small{display:block;color:#6A8676;font-size:9px;font-weight:800;letter-spacing:.17em}.header-link{font-size:12px;border:1px solid #DCE7DD;background:#fff;border-radius:10px;padding:9px 12px;text-decoration:none;font-weight:700;white-space:nowrap}
.hero{background:radial-gradient(circle at 92% 0%,#3A8C6C 0%,transparent 33%),linear-gradient(118deg,#124C3B,#176B4D);color:#fff;position:relative;overflow:hidden}
.hero-inner{min-height:242px;display:flex;justify-content:space-between;align-items:center;gap:18px;padding-block:35px}
.eyebrow{display:inline-block;color:#F6DBA0;background:#FFFFFF16;border:1px solid #FFFFFF30;padding:5px 13px;border-radius:40px;font-size:10px;font-weight:800;letter-spacing:.12em}
.hero h1{margin:12px 0 0;color:#fff;font-size:clamp(32px,5vw,49px)}.hero-year{font-family:'DM Serif Display',Georgia,serif;font-size:25px;line-height:1.25;color:#F5DCA0;margin:2px 0 12px!important}.hero p:last-child{max-width:615px;color:#E2F2E8;font-size:14px}
.hero-moon{width:135px;height:135px;flex:0 0 135px;border:1px solid #FFFFFF66;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 16px #FFFFFF12,0 0 0 33px #FFFFFF08}.hero-moon span{font-size:84px;line-height:1;color:#F4DBA3}
.main-content{padding-top:25px;padding-bottom:110px}.tools{display:flex;align-items:end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.state-field{flex:1;min-width:min(100%,260px)}.state-field label{display:block;font-size:13px;font-weight:800;margin-bottom:6px}.state-field select{width:min(100%,370px);background:#fff;border:1px solid #C4D8C9;border-radius:11px;padding:11px 37px 11px 13px;color:var(--forest);min-height:46px}.state-field small{display:block;color:var(--muted);font-size:11px;margin-top:5px}
.today-button{border:1px solid var(--emerald);background:#FFFDF8;color:var(--emerald);padding:12px 17px;border-radius:11px;font-weight:800;min-height:45px}
.section-caption{font:700 13px/1.4 'Inter',sans-serif!important;margin:0 0 10px!important}.month-picker{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;margin-bottom:20px}.month-picker button{border:1px solid #D6E4D9;background:#fff;border-radius:8px;color:var(--forest);padding:10px 2px;font-size:12px;font-weight:700;min-width:0}.month-picker button[aria-current='true']{background:var(--emerald);color:#fff;border-color:var(--emerald)}
.calendar,.event-panel,.info-panel,.affiliate-section{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 29px #173B2910;overflow:hidden}
.calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:18px 21px;background:#F2F8F1;border-bottom:1px solid var(--line)}
.calendar-heading .month-name{text-align:center;min-width:0}.calendar-heading h2{font-size:clamp(25px,3.5vw,36px)}.calendar-heading p{font-size:13px;font-weight:700;color:var(--emerald);margin-top:2px}.arrow{flex:0 0 42px;width:42px;height:42px;background:#fff;color:var(--emerald);border:1px solid #C9DDCF;border-radius:11px;font-size:25px;line-height:1}.arrow:disabled{opacity:.35;cursor:not-allowed}
.calendar-content{padding:0 17px 16px}.weekdays,.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.weekdays{margin:16px 0 7px}.weekdays span{background:var(--emerald);border-radius:7px;padding:8px 2px;text-align:center;color:#fff;font-weight:700;font-size:12px}
.day{display:flex;flex-direction:column;align-items:flex-start;text-align:left;position:relative;gap:4px;border:1px solid #E4EDE6;border-radius:10px;padding:8px;min-width:0;min-height:98px;background:#fff;color:var(--forest)}
.day.empty{border-color:transparent;background:transparent;pointer-events:none}.day:not(.empty):hover{border-color:#8EBDA3;background:#F8FCF8}.day.islam{background:#E8F5EC;border-color:#B7DDC1}.day.holiday{box-shadow:inset 0 -4px #CBA55A}.day.today{outline:3px solid #D3A245;outline-offset:-3px}
.day .day-number{font-size:22px;font-weight:800;line-height:1.15;letter-spacing:-.03em}.day.sunday .day-number{color:#BD503F}.day .hijri-number{font-size:11px;color:#24734F;font-weight:700;line-height:1.2}.day .hijri-number small{font-size:9px;font-weight:600}.day .day-label{font-size:10px;line-height:1.2;font-weight:800;background:#D4ECDD;color:#185B3F;border-radius:4px;padding:3px 4px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;width:100%}
.day .public-dot{position:absolute;right:7px;top:9px;width:8px;height:8px;background:var(--gold);border-radius:50%;border:1px solid #A17B2B}.legend{display:flex;gap:17px;align-items:center;flex-wrap:wrap;padding:13px 19px;background:#FCFDF9;border-top:1px solid var(--line);font-size:11px;font-weight:600;color:#4E6758}.legend i{display:inline-block;width:10px;height:10px;vertical-align:middle;margin-right:5px;border-radius:3px}.legend-islam{background:#63B587}.legend-public{background:var(--gold)}.legend-today{border:2px solid #D3A245}.calendar-tip{padding:0 18px 14px;font-size:12px;color:var(--muted);background:#FCFDF9}
.event-panel,.affiliate-section{padding:19px;margin-top:21px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:11px;margin-bottom:12px}.panel-head h2{font-size:23px}.count-badge{background:#EDF6ED;color:#276444;border-radius:40px;padding:4px 10px;font-size:11px;font-weight:800;flex:0 0 auto}.panel-intro{font-size:13px;color:var(--muted);margin-bottom:13px!important}
.event-list,.important-list{display:grid;gap:9px}.event-item{display:grid;grid-template-columns:67px minmax(0,1fr);gap:12px;align-items:start;border:1px solid #E8EEE8;background:#FCFDFB;border-radius:12px;padding:12px}.event-day{font-size:12px;font-weight:800;color:var(--emerald);text-align:center;padding:7px 3px;border-radius:9px;background:#E8F4EA}.event-day strong{display:block;font-size:20px;line-height:1}.event-body{min-width:0}.event-body strong{font-size:14px;display:block;line-height:1.4}.event-body small{display:block;font-size:11px;color:var(--muted);margin-top:3px}.event-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}.event-tag{font-size:10px;border-radius:4px;padding:2px 7px;background:#E4F3E9;color:#19623F;font-weight:800}.event-tag.holiday-tag{background:#FAECCD;color:#775314}.event-tag.tentative{background:#FFF4E5;color:#84531F}.empty-note{color:var(--muted);font-size:13px;padding:14px 0}
.important-row{display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;align-items:start;padding:11px 0;border-bottom:1px solid #E7EEE6}.important-row:last-child{border-bottom:0}.important-date{font-weight:800;color:var(--emerald);font-size:12px;line-height:1.4}.important-row strong{font-size:13px;display:block}.important-row small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.info-panel{margin-top:21px;padding:22px}.info-panel h2{font-size:24px;margin-bottom:12px}.info-panel p{font-size:13px;color:#4B6656;line-height:1.75;margin:9px 0}.info-panel strong{color:var(--forest)}.source-line{font-size:12px!important}
.affiliate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.affiliate-card{border:1px solid var(--line);border-radius:13px;background:#fff;overflow:hidden;display:grid;grid-template-columns:120px minmax(0,1fr)}.affiliate-card img{width:100%;height:100%;min-height:145px;object-fit:cover}.affiliate-copy{padding:12px;min-width:0}.affiliate-copy strong{display:block;font-size:14px;line-height:1.4}.affiliate-copy p{font-size:12px;color:var(--muted);margin-top:6px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}.affiliate-copy a{display:inline-block;margin-top:10px;background:var(--emerald);padding:8px 12px;border-radius:8px;color:white;text-decoration:none;font-size:12px;font-weight:700}.ad-badge{font-size:10px;color:#786038;letter-spacing:.1em}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:50;background:#FFFDF9;border-top:1px solid #DCE6DD;box-shadow:0 -8px 23px #1C412220;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:6px max(10px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}.bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:5px 0;color:#597061;text-decoration:none;border-radius:10px;font-weight:800}.bottom-nav a span{font-size:24px;line-height:1.2}.bottom-nav a small{font-size:11px}.bottom-nav a[aria-current='page']{background:#E5F2E9;color:var(--emerald)}
.day-dialog{width:min(480px,calc(100% - 24px));max-height:min(80vh,690px);overflow-y:auto;padding:0;border:1px solid #CFE0D2;border-radius:18px;box-shadow:0 22px 95px #0C2D1B55;color:var(--forest);background:#fff}.day-dialog::backdrop{background:#11281EC0}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px;background:#EAF5EC;border-bottom:1px solid var(--line)}.dialog-head h2{font-size:23px}.dialog-head button{background:#fff;border:1px solid #D0E0D2;border-radius:9px;width:38px;height:38px;font-size:26px;color:var(--forest)}#kh27-detail-body{padding:18px 20px;font-size:14px}#kh27-detail-body p{margin:6px 0}#kh27-detail-body h3{font:700 13px/1.5 'Inter',sans-serif;margin:16px 0 4px}#kh27-detail-body ul{padding-left:20px;margin:5px 0}#kh27-detail-body li{margin:5px 0}.dialog-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 20px 20px}.dialog-actions button{background:var(--emerald);color:#fff;border:0;border-radius:10px;padding:10px 15px;font-weight:700;font-size:12px}.dialog-actions span{font-size:11px;color:var(--muted)}
@media(max-width:750px){.month-picker{grid-template-columns:repeat(6,minmax(0,1fr))}.affiliate-grid{grid-template-columns:1fr}.calendar-content{padding:0 8px 9px}.weekdays,.days{gap:4px}.day{padding:6px;min-height:84px}.day .day-number{font-size:18px}.day .hijri-number{font-size:10px}.hero-moon{width:95px;height:95px;flex-basis:95px}.hero-moon span{font-size:58px}}
@media(max-width:520px){.kh27 .container{width:calc(100% - 24px)}.header-inner{min-height:63px}.brand-icon{width:36px;height:36px;font-size:22px}.brand strong{font-size:18px}.header-link{padding:7px 9px;font-size:10px}.hero-inner{padding-block:30px;min-height:210px}.hero h1{font-size:31px}.hero-year{font-size:22px}.hero-moon{display:none}.tools{align-items:stretch;gap:11px}.today-button{width:100%}.state-field select{width:100%}.month-picker{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.month-picker button{padding:8px 1px}.calendar-heading{padding:14px 9px}.calendar-heading h2{font-size:24px}.calendar-heading p{font-size:11px}.arrow{flex-basis:34px;width:34px;height:36px}.calendar-content{padding:0 5px 6px}.weekdays,.days{gap:3px}.weekdays{margin:10px 0 5px}.weekdays span{font-size:10px;padding:6px 0}.day{border-radius:7px;min-height:71px;gap:2px;padding:4px 3px}.day .day-number{font-size:16px}.day .hijri-number{font-size:clamp(8px,2.6vw,10px);letter-spacing:-.02em}.day .hijri-number small{font-size:8px}.day .day-label{font-size:clamp(7px,2.1vw,9px);line-height:1.1;padding:2px}.day .public-dot{width:6px;height:6px;right:3px;top:4px}.legend{gap:9px;padding:11px;font-size:10px}.calendar-tip{padding:0 10px 12px;font-size:11px}.event-panel,.affiliate-section{padding:14px}.event-panel h2{font-size:21px}.event-item{grid-template-columns:56px minmax(0,1fr);gap:9px;padding:9px}.event-day strong{font-size:18px}.important-row{grid-template-columns:68px minmax(0,1fr);gap:8px}.info-panel{padding:17px}.info-panel h2{font-size:22px}}
@media(max-width:350px){.day{padding:3px 2px;min-height:67px}.calendar-content{padding:0 3px 6px}.weekdays,.days{gap:2px}.day .hijri-number{font-size:8px}.day .day-number{font-size:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Nama bulan Hijrah kekal jelas dalam setiap kotak tanpa membesarkan grid. */
.day .hijri-number{display:block;width:100%;font-size:10px;line-height:1.25;overflow-wrap:anywhere;word-break:normal}
.day .hijri-day{font-weight:800;margin-right:2px}
.day .hijri-month{font-weight:700}
.day.hijri-start{background:#EFFAF1;border-color:#439966;box-shadow:inset 0 0 0 1px #9CCFAE}
.day.hijri-start .hijri-number{color:#115D37;font-weight:800}
.legend-new-month{background:#EFFAF1;border:2px solid #439966}
@media(max-width:520px){.day .hijri-number{font-size:9px;line-height:1.16;letter-spacing:-.02em}}
@media(max-width:350px){.day .hijri-number{font-size:8px;line-height:1.13}}