:root {
    --color-steel: #173f32;
    --color-concrete: #5d685f;
    --color-cement: #e8e0d2;
    --color-brick: #795033;
    --color-formwork: #5c3b27;
    --color-lime: #f7f4e9;
    --color-safety: #c49a4a;
    --color-white: #fffdf8;
    --color-danger: #9e2f26;
    --radius-sm: 0.35rem;
    --radius-md: 0.7rem;
    --shadow-line: 0 1px 0 rgba(32, 48, 56, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-lime); color: var(--color-steel); font-family: "Plus Jakarta Sans", system-ui, sans-serif; line-height: 1.6; }
h1, h2, h3 { margin: 0; font-family: "Roboto Slab", Georgia, serif; line-height: 1.2; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 8vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 5vw, 2.2rem); }
p { margin: 0 0 1rem; }
a { color: inherit; }
code { background: var(--color-cement); border-radius: 0.2rem; padding: 0.1rem 0.3rem; font-size: 0.9em; }
.container { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.skip-link { position: absolute; left: 0.75rem; top: -4rem; padding: 0.6rem 0.8rem; background: var(--color-steel); color: var(--color-white); z-index: 10; }
.skip-link:focus { top: 0.75rem; }
.site-header { position: relative; z-index: 5; border-bottom: 3px solid var(--color-safety); background: rgba(23, 63, 50, 0.98); color: var(--color-lime); box-shadow: 0 8px 24px rgba(30,47,37,.12); }
.site-header__inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 4.5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; font-weight: 700; }
.brand__mark { display: grid; place-items: center; width: 2.25rem; height: 2.45rem; border: 1px solid rgba(255,255,255,.35); border-radius: 1.2rem 1.2rem .3rem .3rem; background: var(--color-safety); color: var(--color-steel); font-family: "Roboto Slab", serif; font-size: 0.7rem; }
nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.65rem 1rem; font-size: 0.85rem; font-weight: 600; }
nav a { text-decoration: none; }
nav a:hover, nav a:focus-visible { color: #ead8aa; }
.page-content { padding-block: 2rem 4rem; }
.hero-block { display: grid; gap: 2rem; align-items: center; padding-block: 2rem 3rem; }
.hero-copy { max-width: 38rem; }
.eyebrow { margin-bottom: 0.6rem; color: var(--color-brick); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.hero-lede { max-width: 33rem; margin-top: 1rem; color: var(--color-concrete); font-size: 1.05rem; }
.button-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.7rem; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 0.55rem 0.9rem; font: inherit; font-size: 0.88rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(214, 138, 31, 0.55); outline-offset: 2px; }
.button--primary { background: var(--color-safety); color: var(--color-steel); }
.button--primary:hover { background: #bc7415; }
.button--secondary { border-color: var(--color-steel); background: transparent; color: var(--color-steel); }
.button--secondary:hover { background: var(--color-steel); color: var(--color-white); }
.button--full { width: 100%; }
.button--small { min-height: 2.1rem; padding: 0.35rem 0.65rem; font-size: 0.78rem; }
.button--ghost { border-color: rgba(255,255,255,0.3); background: transparent; color: inherit; }
.progress-visual { min-height: 15rem; border: 1px solid var(--color-concrete); background: linear-gradient(145deg, var(--color-cement), var(--color-lime)); padding: 1.25rem; display: flex; flex-direction: column; justify-content: flex-end; }
.progress-visual__silhouette { height: 8rem; border-bottom: 0.55rem solid var(--color-steel); border-left: 0.55rem solid var(--color-steel); border-right: 0.55rem solid var(--color-steel); background: repeating-linear-gradient(90deg, transparent 0 1.7rem, rgba(169, 71, 47, 0.42) 1.7rem 1.9rem); clip-path: polygon(0 35%, 12% 35%, 12% 0, 28% 0, 28% 35%, 45% 35%, 45% 17%, 64% 17%, 64% 35%, 100% 35%, 100% 100%, 0 100%); }
.progress-visual__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-top: 1px solid var(--color-concrete); margin-top: 1rem; padding-top: 0.7rem; }
.progress-visual__meta strong { font-family: "Roboto Slab", serif; font-size: 1.45rem; }
.progress-visual__meta span { color: var(--color-concrete); font-size: 0.8rem; }
.notice { border-left: 0.3rem solid; border-radius: var(--radius-sm); padding: 0.8rem 1rem; margin: 0 0 1.25rem; font-size: 0.88rem; }
.notice--warning { border-color: var(--color-safety); background: #fff4dc; }
.notice--error { border-color: var(--color-danger); background: #fce9e7; }
.notice--success { border-color: #2e6b51; background: #e4f2e9; }
.section-block { border-top: 1px solid var(--color-cement); padding-block: 2.5rem; }
.section-heading { margin-bottom: 1.3rem; }
.section-heading p { margin-bottom: 0.3rem; }
.stat-grid { display: grid; gap: 0.8rem; }
.stat-block { border-top: 0.25rem solid var(--color-steel); background: var(--color-white); padding: 1rem; }
.stat-block:nth-child(2) { border-top-color: var(--color-brick); }
.stat-block:nth-child(3) { border-top-color: var(--color-safety); }
.stat-block span, .stat-block small { display: block; color: var(--color-concrete); font-size: 0.78rem; }
.stat-block strong { display: block; margin: 0.3rem 0; font-family: "Roboto Slab", serif; font-size: 1.65rem; font-variant-numeric: tabular-nums; }
.split-block { display: grid; gap: 1.4rem; }
.empty-state { border: 1px dashed var(--color-concrete); background: rgba(255,255,255,0.45); padding: 1rem; }
.empty-state strong, .empty-state span { display: block; }
.empty-state span { margin-top: 0.25rem; color: var(--color-concrete); font-size: 0.88rem; }
.site-footer { border-top: 1px solid var(--color-cement); padding-block: 1.5rem; color: var(--color-concrete); font-size: 0.8rem; }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: var(--color-steel); }
.auth-main { width: min(100%, 28rem); }
.auth-brand { display: block; margin-bottom: 1rem; color: var(--color-lime); font-family: "Roboto Slab", serif; text-decoration: none; }
.auth-card { background: var(--color-lime); border-top: 0.4rem solid var(--color-safety); padding: 1.5rem; }
.auth-card h1 { font-size: 2rem; }
.muted { color: var(--color-concrete); }
.form-stack { display: grid; gap: 0.55rem; }
.form-stack label { margin-top: 0.55rem; font-size: 0.84rem; font-weight: 700; }
input, textarea, select { width: 100%; border: 1px solid var(--color-concrete); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-steel); padding: 0.65rem 0.7rem; font: inherit; }
.auth-footnote { margin-top: 1.3rem; color: var(--color-concrete); font-size: 0.78rem; }
.auth-footnote a { font-weight: 700; }
.error-state { max-width: 34rem; padding-block: 4rem; }
.error-state p:not(.eyebrow) { color: var(--color-concrete); }
.report-heading { max-width: 45rem; margin-bottom: 1.5rem; }
.report-heading > p:last-child { color: var(--color-concrete); }
.report-filters { display: grid; gap: 0.7rem; border-block: 1px solid var(--color-cement); padding-block: 1rem; margin-bottom: 1.2rem; }
.report-filters label { display: grid; gap: 0.25rem; color: var(--color-concrete); font-size: 0.76rem; font-weight: 700; }
.report-filters .button { align-self: end; }
.report-summary { display: grid; gap: 0.7rem; margin-bottom: 1.5rem; }
.report-summary > div { border-left: 0.25rem solid var(--color-steel); background: var(--color-white); padding: 0.8rem 1rem; }
.report-summary .summary-in { border-left-color: #2e6b51; }
.report-summary .summary-out { border-left-color: var(--color-brick); }
.report-summary span { display: block; color: var(--color-concrete); font-size: 0.76rem; }
.report-summary strong { display: block; font-family: "Roboto Slab", serif; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.chart-grid { display: grid; gap: 1rem; margin-bottom: 1.7rem; }
.chart-panel { border: 1px solid var(--color-cement); background: var(--color-white); padding: 1rem; }
.chart-panel h2, .report-table h2 { margin-bottom: 0.8rem; font-size: 1.25rem; }
.report-table { margin-bottom: 1.7rem; }
.count { color: var(--color-concrete); font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.75rem; font-weight: 500; }
.table-scroll { overflow-x: auto; background: var(--color-white); border: 1px solid var(--color-cement); }
table { width: 100%; min-width: 42rem; border-collapse: collapse; font-size: 0.82rem; }
th, td { border-bottom: 1px solid var(--color-cement); padding: 0.7rem; text-align: left; vertical-align: top; }
th { background: #edf0ed; color: var(--color-concrete); font-size: 0.72rem; font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }
.numeric { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pagination { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; border-top: 1px solid var(--color-cement); padding-top: 1rem; font-size: 0.82rem; }
.pagination a { font-weight: 700; }
.stage-list { display: grid; gap: 1.2rem; }.stage-card { border-top: .3rem solid var(--color-steel); background: var(--color-white); padding: 1rem; }.stage-card__head { display:flex;justify-content:space-between;gap:1rem;align-items:start; }.stage-card__head h2{font-size:1.35rem}.stage-card__head>strong{font:700 1.5rem "Roboto Slab",serif}.stage-progress{height:.55rem;background:var(--color-cement);margin:.6rem 0 1rem}.stage-progress span{display:block;height:100%;background:var(--color-safety)}.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}.gallery-grid figure{margin:0;background:var(--color-cement)}.gallery-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.gallery-grid figcaption{padding:.45rem;font-size:.72rem}.admin-gallery{grid-template-columns:repeat(3,1fr)}
@media (min-width: 46rem) { .report-filters { grid-template-columns: repeat(2, 1fr); align-items: end; } .filter-search { grid-column: span 2; } .report-summary { grid-template-columns: repeat(4, 1fr); } .chart-grid { grid-template-columns: 1.5fr 1fr; } }

@media (min-width: 46rem) {
    .container { width: min(100% - 3rem, 72rem); }
    .hero-block { grid-template-columns: 1.15fr 0.85fr; padding-block: 4rem 5rem; }
    .stat-grid { grid-template-columns: repeat(3, 1fr); }
    .split-block { grid-template-columns: 0.8fr 1.2fr; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.gallery-grid img{cursor:zoom-in}.gallery-grid a{display:grid;place-items:center;min-height:8rem;padding:1rem;color:var(--color-brick);font-weight:700}.lightbox{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:1rem;background:rgba(32,48,56,.92)}.lightbox[hidden]{display:none}.lightbox img{max-width:min(96vw,1000px);max-height:88vh;object-fit:contain}.lightbox button{position:absolute;top:1rem;right:1rem;border:1px solid #fff;background:transparent;color:#fff;padding:.5rem 1rem;font-size:1.2rem}
.post-grid,.event-list,.donation-methods{display:grid;gap:1rem}.post-card{border-top:.3rem solid var(--color-steel);background:var(--color-white);padding:1rem}.post-card h2{font-size:1.35rem}.post-card h2 a{text-decoration:none}.post-card h2 a:hover{color:var(--color-brick)}.post-card small,.event-row small,.article-meta{color:var(--color-concrete)}.event-row{display:grid;grid-template-columns:4.5rem 1fr;gap:1rem;border-top:1px solid var(--color-cement);padding:1rem 0}.event-row time{display:grid;align-content:start;justify-items:center;border-right:1px solid var(--color-cement)}.event-row time strong{font:700 1.8rem "Roboto Slab",serif}.event-row time span{font-size:.72rem}.event-row h2{font-size:1.3rem}.article{max-width:48rem}.article-content{margin:1.5rem 0;line-height:1.8}.article-content a{color:var(--color-brick)}.account-row{display:flex;justify-content:space-between;gap:1rem;align-items:center;border-top:1px solid var(--color-cement);padding:1rem 0}.account-row span,.account-row small{display:block}.qris-image{display:block;max-width:100%;width:18rem;aspect-ratio:1;object-fit:contain;border:1px solid var(--color-cement)}.honeypot{position:absolute!important;left:-9999px!important}.copy-button{white-space:nowrap}
.prayer-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}.prayer-grid div{background:var(--color-white);padding:.7rem;text-align:center;border-top:.2rem solid var(--color-steel)}.prayer-grid span,.prayer-grid strong{display:block}.prayer-grid span{font-size:.72rem;color:var(--color-concrete)}.prayer-grid strong{font:700 1.1rem "Roboto Slab",serif}
@media(min-width:46rem){.post-grid{grid-template-columns:repeat(2,1fr)}.donation-methods{grid-template-columns:1.2fr .8fr}}
@media(max-width:30rem){.site-header__inner{align-items:flex-start;flex-direction:column;padding-block:.8rem}.site-header nav{justify-content:flex-start}.prayer-grid{grid-template-columns:repeat(3,1fr)}}

/* Public home: warm mosque identity in forest green, cream, and wood brown. */
.public-shell {
    background:
        radial-gradient(circle at 15% 10%, rgba(196,154,74,.08) 0 1px, transparent 2px) 0 0 / 24px 24px,
        var(--color-lime);
}
.public-shell .page-content { padding-top: 1.5rem; }
.hero-block {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 1.4rem;
    background:
        radial-gradient(circle at 5% 0%, rgba(196,154,74,.2), transparent 28%),
        linear-gradient(135deg, #12382c 0%, #1d5944 68%, #2b664e 100%);
    color: var(--color-white);
    padding: 2rem 1.25rem;
    box-shadow: 0 24px 60px rgba(23,63,50,.18);
}
.hero-block::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .2;
    background-image: linear-gradient(30deg, transparent 48%, rgba(255,255,255,.15) 49% 51%, transparent 52%), linear-gradient(-30deg, transparent 48%, rgba(255,255,255,.15) 49% 51%, transparent 52%);
    background-size: 42px 72px;
}
.hero-copy,.mosque-visual { position: relative; z-index: 1; }
.hero-actions { position: relative; z-index: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: center; border: 1px solid rgba(234,216,170,.32); border-radius: 1rem; background: rgba(8,42,31,.32); padding: 1.25rem; }
.hero-actions__label { margin-bottom: .45rem; color: #ead8aa; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hero-actions__text { margin-bottom: 1.2rem; color: #e8eee9; font-size: .9rem; }
.hero-actions .button-row { display: grid; gap: .75rem; margin-top: 0; }
.hero-actions .button { width: 100%; }
.hero-copy h1 { max-width: 9em; color: #fffdf6; font-size: clamp(2.35rem, 8vw, 4rem); }
.hero-block .eyebrow { color: #ead8aa; }
.hero-lede { color: #e8eee9; font-size: clamp(1rem, 2.2vw, 1.18rem); }
.hero-values { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.35rem; }
.hero-values span { border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(255,255,255,.08); padding: .32rem .65rem; color: #f4ead2; font-size: .72rem; font-weight: 600; }
.hero-block .button--primary { background: #d2a957; color: #173f32; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.hero-block .button--primary:hover { background: #e0bd73; }
.hero-block .button--secondary { border-color: rgba(255,255,255,.7); color: #fff; }
.hero-block .button--secondary:hover { background: #fffdf8; color: #173f32; }
.mosque-visual { overflow: hidden; min-height: 20rem; border: 1px solid rgba(234,216,170,.48); border-radius: 10rem 10rem 1rem 1rem; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.14)); box-shadow: inset 0 0 0 .45rem rgba(255,255,255,.04); }
.mosque-visual__sky { position: relative; height: 16rem; }
.mosque-visual__star { position: absolute; top: 2.3rem; left: 25%; color: #efd58f; font-size: 2rem; text-shadow: 0 0 24px rgba(239,213,143,.75); }
.mosque-visual__building { position: absolute; right: 12%; bottom: 0; left: 12%; display: flex; align-items: end; justify-content: center; gap: 8%; height: 5.8rem; border-bottom: .65rem solid #543822; background: #d8c39a; box-shadow: 0 -10px 26px rgba(8,34,25,.2); }
.mosque-visual__building::before,.mosque-visual__building::after { content: ""; position: absolute; bottom: 0; width: 1rem; height: 6.5rem; background: #795033; }
.mosque-visual__building::before { left: -1rem; }.mosque-visual__building::after { right: -1rem; }
.mosque-visual__building i { width: 2.1rem; height: 3.7rem; border-radius: 1.1rem 1.1rem 0 0; background: #1a4b39; box-shadow: inset 0 0 0 .22rem rgba(255,255,255,.12); }
.mosque-visual__dome { position: absolute; z-index: 2; bottom: 5.7rem; left: 28%; width: 44%; height: 6.3rem; border-radius: 55% 55% 12% 12%; background: linear-gradient(135deg,#ecdcae,#bd9450); box-shadow: inset -12px -8px 20px rgba(92,59,39,.18); }
.mosque-visual__dome::before { content: ""; position: absolute; top: -1.8rem; left: calc(50% - .18rem); width: .36rem; height: 2rem; background: #d5b15d; }
.mosque-visual__dome::after { content: "☾"; position: absolute; top: -3.65rem; left: calc(50% - .58rem); color: #efd58f; font-size: 1.6rem; transform: rotate(-15deg); }
.mosque-visual__minaret { position: absolute; z-index: 3; right: 9%; bottom: 0; width: 2.25rem; height: 12.5rem; border-bottom: .65rem solid #543822; background: #c3aa79; box-shadow: inset -.45rem 0 rgba(92,59,39,.15); }
.mosque-visual__minaret::before { content: ""; position: absolute; top: -2.2rem; left: -.55rem; border-right: 1.65rem solid transparent; border-bottom: 2.3rem solid #d7bd82; border-left: 1.65rem solid transparent; }
.mosque-visual__minaret::after { content: ""; position: absolute; top: 3rem; left: -.4rem; width: 3.05rem; height: .55rem; background: #795033; }
.mosque-visual__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(255,255,255,.2); padding: .9rem 1.1rem 1rem; color: #f4ead2; }
.mosque-visual__meta span { font-size: .78rem; font-weight: 600; }
.mosque-visual__meta strong { color: #fff; font-family: "Roboto Slab",serif; font-size: 1.65rem; }
.section-block { border-top: 0; padding-block: 3.3rem; }
.section-block + .section-block { border-top: 1px solid rgba(121,80,51,.16); }
.section-heading { max-width: 43rem; }
.section-heading > p:last-child { color: var(--color-concrete); }
.stat-grid { gap: 1rem; }
.stat-block { border: 1px solid rgba(121,80,51,.14); border-top: .3rem solid #2b664e; border-radius: .8rem; background: rgba(255,253,248,.95); padding: 1.2rem; box-shadow: 0 12px 30px rgba(42,58,46,.07); }
.stat-block:nth-child(2) { border-top-color: #795033; }.stat-block:nth-child(3) { border-top-color: #c49a4a; }
.split-block { position: relative; border-radius: 1rem; background: rgba(255,253,248,.72); padding-inline: clamp(1rem,3vw,2rem); }
.split-block .empty-state { border: 0; border-left: .25rem solid var(--color-safety); border-radius: .55rem; background: #eee5d3; padding: 1.3rem; }
.post-card { border: 1px solid rgba(121,80,51,.14); border-top: .3rem solid #2b664e; border-radius: .7rem; box-shadow: 0 10px 24px rgba(42,58,46,.06); }
.prayer-grid div { border: 1px solid rgba(121,80,51,.14); border-top: .25rem solid var(--color-safety); border-radius: .6rem; background: #1d5944; color: #fffdf8; box-shadow: 0 8px 20px rgba(23,63,50,.1); }
.prayer-grid span { color: #ead8aa; }.prayer-grid strong { font-size: 1.25rem; }
.site-footer { border-top: .3rem solid var(--color-safety); background: #173f32; color: #e8eee9; }
@media (min-width:46rem) {
    .hero-block { gap: 3rem; padding: 3.5rem; }
}
@media (max-width:30rem) {
    .site-header nav { gap: .55rem .8rem; }
    .hero-block { border-radius: .8rem; }
    .hero-actions { padding: 1rem; }
}

@media print { .site-header,.site-footer,.report-filters,.chart-grid,.pagination,.button,.admin-topbar,.admin-sidebar { display:none !important; } .site-main,.admin-content { width:100% !important; padding:0 !important; } .report-table { break-inside:avoid; } body { background:#fff !important; color:#000 !important; } }