/* Halaman awam — reka bentuk "Elegant Ramadan" (Emerald & Champagne Gold).
 * Asas reka bentuk dicadangkan oleh ChatGPT, disesuaikan untuk templat PHP & CSP ketat (tiada CDN, tiada onclick).
 * Dimuatkan SELEPAS app.css; hanya digunakan oleh susun atur awam (body.awam). */
body.awam {
  --emerald: #173F32; --green: #285B42; --gold: #D6B66B; --ivory: #F8F3E8; --charcoal: #493D2B;
  --muted: #827966; --border: #E9E1D1; --soft-green: #EDF3ED; --soft-gold: #F5EEDC;
  --radius: 18px; --shadow: 0 5px 22px rgba(23,63,50,.07);
  --font-heading: Georgia, "Times New Roman", serif;
  --hijau: #285B42; --hijau2: #285B42; --hijau3: #EDF3ED; --latar: #F8F3E8;
  background: var(--ivory); color: var(--charcoal); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
html { scroll-behavior: smooth; scroll-padding-top: 85px; }
body.awam a { color: inherit; text-decoration: none; }
body.awam a.pautan { color: var(--green); text-decoration: underline; }
.awam .container { width: min(1120px, calc(100% - 32px)); margin-inline: auto; }
.awam .section { padding: 55px 0; }
.awam .section-heading { text-align: center; max-width: 620px; margin: 0 auto 30px; }
.awam .section-eyebrow { display: inline-block; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 8px; }
.awam .section-title { font-family: var(--font-heading); font-size: clamp(27px, 5vw, 38px); color: var(--emerald); line-height: 1.2; margin: 0 0 10px; font-weight: 700; }
.awam .section-description { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 0; }
.awam .icon { width: 21px; height: 21px; flex-shrink: 0; }

/* butang */
.awam .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 12px; padding: 13px 21px;
  font-size: 14px; font-weight: 750; transition: .2s ease; text-align: center; min-height: 48px; background: var(--green); color: #fff; line-height: 1.2; }
.awam .btn:hover { transform: translateY(-2px); filter: none; }
.awam .btn-primary { background: var(--gold); color: var(--emerald); }
.awam .btn-green { background: var(--green); color: #fff; }
.awam .btn-outline, .awam .btn-line { border: 1px solid var(--green); color: var(--green); background: transparent; }
.awam .btn-white { background: #fff; color: var(--emerald); }
.awam .btn-block { width: 100%; }
.awam .btn-sm { min-height: 38px; padding: 8px 12px; font-size: 12px; }
.awam .btn-whatsapp { background: #198754; color: #fff; max-width: 300px; width: 100%; }
.awam .btn[disabled] { background: #D8D4CA; color: #777; cursor: not-allowed; transform: none; }

/* kepala */
.site-header { background: var(--emerald); color: #fff; position: sticky; top: 0; z-index: 100; box-shadow: 0 3px 15px rgba(0,0,0,.12); }
.header-inner { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.awam .brand { display: flex; align-items: center; gap: 11px; color: #fff; }
.awam .brand-logo { width: 45px; height: 45px; object-fit: contain; background: rgba(255,255,255,.92); border-radius: 50%; padding: 2px; }
.brand-name { font-weight: 800; font-size: 13px; line-height: 1.35; text-transform: uppercase; }
.brand-name small { display: block; color: var(--gold); font-size: 10px; font-weight: 500; letter-spacing: .5px; }
.header-nav { display: none; align-items: center; gap: 23px; font-size: 12px; font-weight: 650; color: rgba(255,255,255,.85); }
.header-nav a:hover { color: var(--gold); }
.header-share { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.1); color: #fff !important; border: 1px solid rgba(255,255,255,.2); padding: 9px 12px; border-radius: 30px; font-size: 11px; font-weight: 700; }

/* hero */
.hero { position: relative; overflow: hidden; color: #fff; padding: 58px 0 65px;
  background: radial-gradient(circle at 85% 20%, rgba(214,182,107,.16), transparent 30%), linear-gradient(135deg, #173F32 0%, #20513B 55%, #285B42 100%); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .09; pointer-events: none; background-size: 70px 70px;
  background-image: url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35 2L43 27L68 35L43 43L35 68L27 43L2 35L27 27Z' fill='none' stroke='%23D6B66B' stroke-width='1'/%3E%3Ccircle cx='35' cy='35' r='12' fill='none' stroke='%23D6B66B'/%3E%3C/svg%3E"); }
.hero::after { content: ""; position: absolute; width: 280px; height: 280px; right: -130px; bottom: -160px; border: 1px solid rgba(214,182,107,.25); border-radius: 50%;
  box-shadow: 0 0 0 25px rgba(214,182,107,.04), 0 0 0 50px rgba(214,182,107,.04), 0 0 0 75px rgba(214,182,107,.04); }
.hero-content { position: relative; z-index: 2; max-width: 760px; margin: auto; text-align: center; }
.hero-label { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 19px; }
.crescent { width: 30px; height: 30px; display: inline-block; }
.hero h1 { font-family: var(--font-heading); font-size: clamp(36px, 8vw, 58px); line-height: 1.12; font-weight: 500; letter-spacing: -.8px; color: #FFF9EA; margin: 0 0 18px; }
.hero-subtitle { color: rgba(255,255,255,.88); font-size: 15px; max-width: 560px; margin: 0 auto 24px; line-height: 1.8; }
.hadith-box { max-width: 570px; margin: 0 auto 29px; padding: 17px 20px; border-top: 1px solid rgba(214,182,107,.5); border-bottom: 1px solid rgba(214,182,107,.5); }
.hadith-text { font-family: var(--font-heading); font-size: 17px; font-style: italic; line-height: 1.65; color: #F5E7C4; margin: 0; }
.hadith-reference { color: var(--gold); font-size: 11px; margin-top: 8px; font-weight: 650; }
.hero-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.hero-cta .btn { min-width: 175px; }
.hero-progress { max-width: 510px; margin: auto; padding: 19px; text-align: left; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; backdrop-filter: blur(8px); }
.progress-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 12px; }
.progress-label { font-size: 11px; color: rgba(255,255,255,.7); }
.progress-amount { font-family: var(--font-heading); color: var(--gold); font-size: 26px; font-weight: 700; }
.progress-target { font-size: 13px; color: rgba(255,255,255,.85); text-align: right; font-weight: 700; }
.progress-track { height: 9px; border-radius: 30px; overflow: hidden; background: rgba(255,255,255,.17); }
.progress-fill { height: 100%; background: linear-gradient(90deg, #D6B66B, #F4E2A9); border-radius: inherit; min-width: 4px; }
.progress-bottom { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.8); margin-top: 9px; }

/* impak */
.impact-section { position: relative; z-index: 3; margin-top: -25px; }
.impact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 20px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.impact-item { text-align: center; padding: 12px 5px; }
.impact-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; margin: 0 auto 8px; background: var(--soft-gold); color: var(--green); }
.impact-number { font-family: var(--font-heading); color: var(--emerald); font-size: 26px; font-weight: 700; line-height: 1.3; }
.impact-label { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* suapan penderma */
.feed-section { padding: 35px 0 15px; }
.feed-card { display: flex; align-items: center; gap: 13px; background: #F1EBDD; border: 1px solid var(--border); border-radius: 14px; padding: 13px 15px; max-width: 720px; margin: auto; }
.feed-live { width: 9px; height: 9px; background: #3C9964; border-radius: 50%; box-shadow: 0 0 0 4px rgba(60,153,100,.12); flex-shrink: 0; animation: denyut 2s infinite; }
@keyframes denyut { 50% { box-shadow: 0 0 0 7px rgba(60,153,100,.05); } }
.feed-heading { font-size: 11px; font-weight: 800; color: var(--green); margin-bottom: 6px; letter-spacing: .4px; }
.feed-list { display: flex; flex-direction: column; gap: 7px; }
.feed-item { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.feed-item strong { font-weight: 750; }
.feed-time { color: var(--muted); white-space: nowrap; font-size: 10px; }

/* kategori */
.category-section { padding-top: 45px; }
.category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.category-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 17px 14px; box-shadow: var(--shadow); min-width: 0; transition: .2s ease; }
.category-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.category-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; margin-bottom: 13px; background: var(--soft-green); color: var(--green); }
.category-card h3 { font-family: var(--font-heading); font-size: 18px; color: var(--emerald); line-height: 1.3; margin: 0 0 6px; }
.category-card p { font-size: 12px; color: var(--muted); line-height: 1.7; flex-grow: 1; margin: 0 0 14px; }
.category-price { color: var(--green); font-weight: 850; font-size: 17px; margin-bottom: 2px; }
.category-detail { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.category-bar { height: 6px; background: #EFE8D8; border-radius: 6px; overflow: hidden; margin-bottom: 12px; }
.category-bar span { display: block; height: 100%; background: var(--gold); border-radius: 6px; }
.category-card .btn { width: 100%; min-height: 42px; font-size: 12px; padding: 9px; }

/* kalendar iftar */
.calendar-section { background: #F2EBDD; }
.calendar-container { max-width: 950px; margin: auto; }
.calendar-intro { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.calendar-intro h3 { font-family: var(--font-heading); color: var(--emerald); font-size: 23px; margin: 0; }
.calendar-price { background: var(--soft-gold); color: var(--green); padding: 7px 12px; border-radius: 30px; font-size: 11px; font-weight: 800; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 20px; font-size: 11px; color: var(--muted); }
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--green); }
.legend-dot.available { background: var(--gold); }
.legend-dot.pending { background: #C9A227; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.6) 0 2px, transparent 2px 4px); }
.legend-dot.full { background: #D8D4CA; }
.urgency { background: #fff; border-left: 4px solid var(--gold); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 20px; }
.week-block { margin-bottom: 25px; }
.week-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--emerald); font-size: 13px; font-weight: 800; }
.week-title::after { content: ""; height: 1px; flex: 1; background: #DCD2BD; }
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.day-card { background: #fff; border: 1px solid var(--border); border-radius: 11px; min-width: 0; padding: 8px 4px; text-align: center; transition: .2s ease; display: flex; flex-direction: column; color: inherit; }
.day-card.has-available { border: 1.5px solid var(--gold); background: #FFFCF4; }
.day-card.has-available:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.day-card.is-full, .day-card.is-closed { opacity: .5; transform: scale(.96); background: #F2F0EA; }
.day-card.is-full .slot-mini { background: #C8C5BC; }
.day-name { font-size: 9px; color: var(--muted); font-weight: 700; }
.day-number { font-family: var(--font-heading); font-size: 22px; color: var(--emerald); font-weight: 700; line-height: 1.4; }
.day-date { font-size: 8px; color: var(--muted); }
.day-status { display: block; font-size: 8px; color: var(--green); font-weight: 800; margin: 2px 0 6px; min-height: 12px; }
.day-card.is-full .day-status, .day-card.is-closed .day-status { color: #898579; }
.slot-mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; }
.slot-mini { height: 5px; border-radius: 5px; background: var(--gold); }
.slot-mini.taken { background: var(--green); }
.slot-mini.pending { background: #C9A227; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.6) 0 2px, transparent 2px 4px); }
.day-select { display: block; background: var(--green); color: #fff; font-size: 9px; font-weight: 750; border-radius: 6px; padding: 5px 2px; margin-top: 7px; }
.day-card.is-full .day-select, .day-card.is-closed .day-select { display: none; }

/* moreh */
.moreh-section { background: #fff; }
.moreh-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.moreh-card { border: 1px solid var(--border); border-radius: 15px; padding: 15px; background: #FFFCF6; display: flex; flex-direction: column; }
.moreh-card.is-full { opacity: .55; }
.moreh-date { color: var(--green); font-weight: 800; font-size: 12px; margin-bottom: 4px; }
.moreh-day { font-family: var(--font-heading); font-size: 21px; color: var(--emerald); }
.moreh-capacity { color: var(--muted); font-size: 11px; margin: 4px 0 12px; }
.moreh-slots { display: flex; gap: 4px; margin-bottom: 12px; }
.moreh-slots span { flex: 1; height: 7px; border-radius: 8px; background: var(--gold); }
.moreh-slots span.taken { background: var(--green); }
.moreh-slots span.pending { background: #C9A227; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.6) 0 2px, transparent 2px 4px); }
.moreh-card .btn { width: 100%; min-height: 40px; font-size: 12px; margin-top: auto; }

/* infaq bebas */
.free-section { background: var(--ivory); }
.free-card { max-width: 750px; margin: auto; background: var(--emerald); border-radius: 23px; padding: 28px 20px; color: #fff; text-align: center; position: relative; overflow: hidden; }
.free-card::before { content: "✧"; position: absolute; right: 18px; top: -28px; font-size: 130px; color: rgba(214,182,107,.13); pointer-events: none; }
.free-card h3 { font-family: var(--font-heading); color: var(--gold); font-size: 27px; margin: 0 0 8px; }
.free-card p { color: rgba(255,255,255,.8); font-size: 13px; max-width: 470px; margin: 0 auto 18px; }
.free-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; position: relative; }
.free-tab, .amount-btn { position: relative; cursor: pointer; display: block; }
.free-tab input, .amount-btn input { position: absolute; opacity: 0; pointer-events: none; }
.free-tab span { display: block; border: 1px solid rgba(255,255,255,.3); border-radius: 12px; padding: 10px 8px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.85); }
.free-tab span small { display: block; font-weight: 500; font-size: 10px; opacity: .8; margin-top: 2px; }
.free-tab input:checked + span { background: rgba(214,182,107,.18); border-color: var(--gold); color: var(--gold); }
.quick-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 14px; position: relative; }
.amount-btn span { display: block; border: 1px solid rgba(214,182,107,.55); color: var(--gold); background: rgba(255,255,255,.07); border-radius: 10px; padding: 11px 5px; font-size: 14px; font-weight: 800; }
.amount-btn input:checked + span { background: var(--gold); color: var(--emerald); border-color: var(--gold); }
.amount-btn input:focus-visible + span, .free-tab input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.free-card .custom-amount { width: 100%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.09); border-radius: 10px; padding: 13px; color: #fff; outline: none; margin-bottom: 14px; position: relative; font-size: 15px; }
.free-card .custom-amount::placeholder { color: rgba(255,255,255,.6); }
.free-card .btn { position: relative; width: 100%; }
.free-progress { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: rgba(255,255,255,.75); margin-top: 14px; flex-wrap: wrap; position: relative; }

/* amanah */
.trust-section { background: #F2EBDD; }
.trust-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.trust-card { display: flex; align-items: flex-start; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 17px; }
.trust-icon { width: 43px; height: 43px; flex-shrink: 0; display: grid; place-items: center; background: var(--soft-green); border-radius: 12px; color: var(--green); }
.trust-card h4 { color: var(--emerald); font-size: 14px; margin: 0 0 4px; }
.trust-card p { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 0; }

/* kongsi */
.share-section { padding: 40px 0; }
.share-card { background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: var(--radius); padding: 23px 18px; text-align: center; }
.share-card h3 { font-family: var(--font-heading); color: var(--emerald); font-size: 24px; margin: 0 0 7px; }
.share-card p { color: var(--muted); font-size: 13px; margin: 0 0 17px; }

/* soalan lazim */
.faq-section { background: #fff; }
.faq-list { max-width: 750px; margin: auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { cursor: pointer; list-style: none; padding: 17px 5px; font-weight: 750; color: var(--emerald); font-size: 14px; display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 22px; color: var(--gold); font-weight: 400; }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 0 5px 17px; color: var(--muted); font-size: 13px; line-height: 1.8; }

/* kaki */
.site-footer { background: var(--emerald); color: #fff; padding: 42px 0 95px; text-align: center; }
.footer-logo { width: 60px; height: 60px; object-fit: contain; margin-bottom: 12px; background: rgba(255,255,255,.92); border-radius: 50%; padding: 3px; }
.footer-title { font-family: var(--font-heading); font-size: 22px; color: var(--gold); margin: 0 0 7px; }
.footer-description { color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.8; max-width: 420px; margin: auto; }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 17px; margin: 22px 0; font-size: 12px; color: rgba(255,255,255,.8); }
.footer-links a:hover { color: var(--gold); }
.footer-divider { border: 0; border-top: 1px solid rgba(255,255,255,.14); margin: 20px 0; }
.footer-copyright { font-size: 11px; color: rgba(255,255,255,.55); margin: 0; }

/* CTA terapung (telefon) */
.floating-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(248,243,232,.96); border-top: 1px solid var(--border); backdrop-filter: blur(10px); display: flex; align-items: center; gap: 12px; }
.floating-info { flex: 1; min-width: 0; }
.floating-info strong { display: block; color: var(--emerald); font-size: 13px; }
.floating-info small { color: var(--muted); font-size: 11px; }
.floating-cta .btn { padding: 11px 17px; min-height: 45px; white-space: nowrap; }

/* halaman borang / bayar / status dalam tema baharu */
.halaman { padding: 26px 0 60px; }
.awam .borang-awam { max-width: 640px; margin: 0 auto 16px; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); background: #fff; }
.awam .borang-awam .ph { background: var(--emerald); color: var(--gold); font-family: var(--font-heading); font-size: 20px; font-weight: 700; padding: 16px 20px; }
.awam .borang-awam .pb { padding: 18px 20px; }
.awam .ringkas-hari { background: var(--soft-gold); border-radius: 12px; }
.awam .slot-opt { border-radius: 12px; border-color: var(--border); background: #FFFCF6; }
.awam .slot-opt:has(input:checked) { border-color: var(--gold); background: #FFF6DE; }
.awam .jumlah-bayar { background: var(--soft-green); border-color: #D5E4D5; border-radius: 12px; color: var(--emerald); }
.awam label { color: var(--charcoal); font-size: 13px; }
.awam input[type=text], .awam input[type=email], .awam input[type=tel], .awam textarea { border-color: var(--border); border-radius: 10px; padding: 11px 12px; font-size: 15px; }
.awam input:focus, .awam textarea:focus { outline: 2px solid rgba(214,182,107,.6); border-color: var(--gold); }
.awam .kembali { display: inline-block; color: var(--green); font-weight: 700; font-size: 13px; margin-bottom: 14px; }
.awam .alert { border-radius: 12px; }
.awam .status-besar { font-family: var(--font-heading); border-radius: 14px; }
.awam .tbl.kv th { background: #FBF8F1; color: var(--muted); }
.awam .qr-box img { border-radius: 16px; border-color: var(--border); }

@media (min-width: 600px) {
  .awam .section { padding: 70px 0; }
  .impact-grid { grid-template-columns: repeat(4, 1fr); padding: 22px; }
  .impact-item + .impact-item { border-left: 1px solid var(--border); }
  .category-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .moreh-grid { grid-template-columns: repeat(3, 1fr); }
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
  .trust-card { flex-direction: column; }
  .site-footer { padding-bottom: 42px; }
  .floating-cta { display: none; }
  .free-tabs { max-width: 480px; margin-inline: auto; }
}
@media (min-width: 850px) {
  .header-nav { display: flex; }
  .hero { padding: 85px 0; }
  .hero-subtitle { font-size: 16px; }
  .hadith-text { font-size: 19px; }
  .category-card { padding: 23px 20px; }
  .category-card h3 { font-size: 21px; }
  .week-grid { gap: 12px; }
  .day-card { padding: 12px 8px; border-radius: 13px; }
  .day-number { font-size: 27px; }
  .day-name, .day-date { font-size: 11px; }
  .day-status { font-size: 10px; }
  .slot-mini { height: 7px; }
  .day-select { font-size: 11px; padding: 7px; }
}
@media (max-width: 374px) {
  .awam .container { width: calc(100% - 24px); }
  .hero h1 { font-size: 34px; }
  .hero-cta .btn { width: 100%; }
  .category-card { padding: 13px 10px; }
  .category-card h3 { font-size: 16px; }
  .day-number { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Penyesuaian mengikut mockup gambar ChatGPT ─────────────────── */
.hero.hero-v2 { padding: 34px 0 80px; text-align: left; }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; }
.hero-v2 .hero-label { margin-bottom: 12px; }
.hero-v2 h1 { color: #E9CD84; font-weight: 700; font-size: clamp(32px, 8.5vw, 56px); margin-bottom: 14px; text-shadow: 0 2px 14px rgba(0,0,0,.18); }
.hero-v2 .hadith-box { margin: 0 0 6px; padding: 0; border: 0; max-width: 520px; }
.hero-v2 .hadith-text { font-size: 14px; color: #F3E6C3; }
.hero-v2 .hadith-reference { margin-top: 4px; }
.hero-art { position: absolute; right: -14px; top: 6px; width: 46%; max-width: 330px; opacity: .95; pointer-events: none; }
.hero-v2 .hero-text { position: relative; z-index: 2; max-width: 62%; }
.progress-card-wrap { position: relative; z-index: 5; margin-top: -58px; }
.progress-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 10px 30px rgba(23,63,50,.14); padding: 16px 18px; max-width: 640px; margin: auto; }
.progress-card .pc-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-bottom: 8px; }
.progress-card .pc-label { font-size: 11px; color: var(--muted); font-weight: 600; }
.progress-card .pc-amount { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--emerald); line-height: 1.2; }
.progress-card .pc-amount.gold { color: #B8913A; text-align: right; }
.pc-track { position: relative; height: 16px; border-radius: 20px; background: #ECE6DA; overflow: hidden; margin: 6px 0 14px; }
.pc-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1F6B47, #2E8B57); min-width: 28px; display: flex; align-items: center; justify-content: flex-end; padding-right: 7px; color: #fff; font-size: 10px; font-weight: 800; }
.progress-card .btn { width: 100%; background: linear-gradient(180deg, #DCBF75, #C9A452); color: #fff; font-size: 16px; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.tajuk-hiasan { display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--font-heading); color: var(--emerald); font-size: 20px; font-weight: 700; margin: 0 0 14px; text-align: center; }
.tajuk-hiasan::before, .tajuk-hiasan::after { content: ""; height: 1.5px; width: 34px; background: var(--gold); }
.impact-v2 { padding: 30px 0 6px; }
.impact-v2 .impact-grid { background: transparent; box-shadow: none; padding: 0; }
.impact-v2 .impact-icon { background: transparent; width: auto; height: auto; color: #B8913A; margin-bottom: 2px; }
.impact-v2 .impact-icon .icon { width: 28px; height: 28px; }
.feed-v2 .feed-card { background: #fff; display: block; padding: 0; overflow: hidden; }
.feed-v2 .feed-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--border); background: #FBF8F1; }
.feed-v2 .feed-head b { font-family: var(--font-heading); color: var(--emerald); font-size: 16px; display: flex; align-items: center; gap: 8px; }
.feed-v2 .feed-head .icon { color: #B8913A; }
.feed-v2 .feed-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 9px 15px; border-bottom: 1px solid #F1ECE0; font-size: 12px; }
.feed-v2 .feed-row:last-child { border-bottom: 0; }
.feed-v2 .feed-row .icon { width: 18px; height: 18px; color: var(--green); }
.feed-v2 .feed-amt { text-align: right; font-weight: 800; color: var(--emerald); line-height: 1.2; }
.feed-v2 .feed-amt small { display: block; font-weight: 500; color: var(--muted); font-size: 10px; }
.category-grid.v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.category-card.v2 { padding: 14px; background: #FFFCF6; border-color: #EADFC6; }
.category-card.v2 .cc-top { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.category-card.v2 .category-icon { background: transparent; width: 40px; height: 40px; margin: 0; color: #B8913A; flex: none; }
.category-card.v2 .category-icon .icon { width: 34px; height: 34px; }
.category-card.v2 h3 { font-size: 16px; margin: 0 0 5px; }
.harga-pil { display: inline-block; background: #EBD08E; color: var(--emerald); font-weight: 800; font-size: 12px; border-radius: 20px; padding: 3px 10px; }
.category-card.v2 p { margin: 0 0 10px; font-size: 12px; }
.category-card.v2 .cc-anak-panah { align-self: flex-end; width: 26px; height: 26px; border-radius: 50%; background: #C9A452; color: #fff; display: grid; place-items: center; margin-top: auto; }
.category-card.v2 .cc-anak-panah .icon { width: 14px; height: 14px; }
.category-card.v2.featured { background: linear-gradient(160deg, #1F5A40, #173F32); border-color: #173F32; color: #fff; }
.category-card.v2.featured h3 { color: #F3DFA6; }
.category-card.v2.featured p, .category-card.v2.featured .category-detail { color: rgba(255,255,255,.85); }
.category-card.v2.featured .category-icon { color: #E9CD84; }
.category-card.v2 .category-bar { margin: 0 0 8px; }
.kal-v2 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 10px 6px; }
.kal-hari { text-align: center; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kal-hari .kh-kepala { font-size: 10px; line-height: 1.3; color: var(--charcoal); margin-bottom: 3px; min-height: 40px; white-space: nowrap; }
.kal-hari .kh-kepala b { display: block; font-size: 11px; }
.kal-hari .kh-kepala small { display: block; color: var(--muted); font-size: 9px; }
.slot-pil { display: block; border-radius: 8px; font-size: 9.5px; font-weight: 700; padding: 4px 0; border: 1.5px solid #6FB08A; color: var(--green); background: #F2FAF4; white-space: nowrap; overflow: hidden; }
a.slot-pil:hover { background: var(--green); color: #fff; }
.slot-pil.penuh { border-color: #D3CFC6; background: #E8E5DE; color: #8C877B; }
.slot-pil.proses { border-color: #E2C36F; background: #FFF6DC; color: #9A7A20; }
.slot-pil.tutup { border-color: #E5E1D8; background: #F5F3EE; color: #B0AB9F; }
.kal-hari.lepas .kh-kepala { opacity: .55; }
.kal-legenda { display: flex; justify-content: center; gap: 16px; font-size: 11px; color: var(--muted); margin: 10px 0 22px; flex-wrap: wrap; }
.kal-legenda i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #6FB08A; background: #F2FAF4; vertical-align: -1px; margin-right: 5px; }
.kal-legenda i.p { border-color: #D3CFC6; background: #E8E5DE; }
.kal-legenda i.k { border-color: #E2C36F; background: #FFF6DC; }
.floating-cta.v2 { background: transparent; border: 0; backdrop-filter: none; padding: 0 14px calc(12px + env(safe-area-inset-bottom)); pointer-events: none; }
.floating-cta.v2 .btn { pointer-events: auto; width: 100%; border-radius: 30px; min-height: 52px; font-size: 16px; background: linear-gradient(180deg, #2A6B4B, #173F32); box-shadow: 0 8px 22px rgba(23,63,50,.35); border: 2px solid rgba(214,182,107,.7); }
@media (min-width: 600px) {
  .category-grid.v2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kal-v2 { gap: 10px; padding: 14px; }
  .slot-pil { font-size: 11px; padding: 6px 0; }
  .kal-hari .kh-kepala { font-size: 12px; }
}
@media (min-width: 850px) {
  .hero.hero-v2 { padding: 60px 0 100px; }
  .hero-v2 .hadith-text { font-size: 17px; }
  .hero-art { right: 0; top: -10px; width: 40%; max-width: 380px; }
}

/* ── Elemen Islamik & interaktif ─────────────────────────────────── */
.arab { font-family: "Amiri", "Scheherazade New", "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic", "Arabic Typesetting", "Times New Roman", serif; }
.hero-foto { background: linear-gradient(180deg, rgba(12,38,30,.60) 0%, rgba(23,63,50,.78) 50%, rgba(23,63,50,.96) 100%), var(--foto) center 35% / cover no-repeat; }
@media (max-width: 700px) { .hero-foto { background-image: linear-gradient(180deg, rgba(12,38,30,.60) 0%, rgba(23,63,50,.78) 50%, rgba(23,63,50,.96) 100%), var(--foto-kecil); } }
.hero-foto .hero-text { max-width: 680px; }
.bismillah { color: var(--gold); font-size: 22px; margin: 0 0 10px; line-height: 1.6; text-shadow: 0 2px 10px rgba(0,0,0,.25); }
.hadith-arab { color: #F6E3B0; font-size: 20px; line-height: 1.9; margin: 0 0 6px; text-align: right; }
.hero-v2 .hadith-box { border-right: 3px solid var(--gold); padding-right: 14px; }
.kiraan-detik { margin-top: 20px; display: inline-flex; flex-direction: column; gap: 8px; background: rgba(0,0,0,.22); border: 1px solid rgba(214,182,107,.45); border-radius: 16px; padding: 12px 14px; backdrop-filter: blur(6px); }
.kd-tajuk { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); font-weight: 800; }
.kd-ramadan { font-family: var(--font-heading); font-size: 26px; color: #FFF4D6; }
.kd-kotak { display: flex; gap: 8px; }
.kd-kotak span { min-width: 58px; text-align: center; background: rgba(255,255,255,.08); border-radius: 10px; padding: 6px 4px; }
.kd-kotak b { display: block; font-family: var(--font-heading); font-size: 24px; color: #FFF4D6; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kd-kotak small { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.7); }

/* tanglung berayun */
.tanglung { position: absolute; top: -6px; width: 42px; height: 105px; z-index: 3; transform-origin: 50% 0; animation: ayun 4.5s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255,217,120,.35)); }
.tanglung.t-kiri { left: 4%; }
.tanglung.t-kanan { right: 5%; top: -14px; width: 34px; height: 85px; animation-delay: -2s; animation-duration: 5.2s; }
.tanglung .nyala { animation: nyala 2.6s ease-in-out infinite; }
@keyframes ayun { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes nyala { 0%, 100% { opacity: .85; } 50% { opacity: .45; } }
.bintang-langit { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.bintang-langit i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #FFE9AE; box-shadow: 0 0 6px #FFE9AE; animation: kelip 3s ease-in-out infinite; }
.bintang-langit i:nth-child(1) { top: 12%; left: 22%; } .bintang-langit i:nth-child(2) { top: 8%; left: 58%; animation-delay: -.6s; }
.bintang-langit i:nth-child(3) { top: 22%; left: 78%; animation-delay: -1.2s; } .bintang-langit i:nth-child(4) { top: 30%; left: 40%; animation-delay: -1.8s; }
.bintang-langit i:nth-child(5) { top: 16%; left: 88%; animation-delay: -2.4s; } .bintang-langit i:nth-child(6) { top: 5%; left: 33%; animation-delay: -.9s; }
.bintang-langit i:nth-child(7) { top: 26%; left: 64%; animation-delay: -1.5s; } .bintang-langit i:nth-child(8) { top: 18%; left: 8%; animation-delay: -2.1s; }
@keyframes kelip { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.2); } }

/* bahagian surau */
.surau-section { background: #fff; padding-top: 50px; }
.surau-grid { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
.surau-gerbang { margin: 0 auto; width: min(100%, 420px); aspect-ratio: 4 / 4.6; border-radius: 210px 210px 18px 18px; overflow: hidden; border: 6px solid #fff; outline: 2px solid var(--gold); outline-offset: 4px; box-shadow: 0 18px 40px rgba(23,63,50,.18); }
.surau-gerbang img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block; transition: transform 6s ease; }
.surau-gerbang:hover img { transform: scale(1.06); }
.surau-teks .section-title { text-align: left; }
.surau-teks p { color: var(--muted); font-size: 14px; line-height: 1.85; margin: 0 0 12px; }
.surau-alamat { color: var(--green) !important; font-weight: 600; }
.surau-fakta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.surau-fakta span { flex: 1 1 110px; background: var(--soft-gold); border-radius: 14px; padding: 10px 12px; font-size: 11px; color: var(--charcoal); }
.surau-fakta b { display: block; font-family: var(--font-heading); font-size: 24px; color: var(--emerald); }
.ornamen { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 6px 0; color: var(--gold); background: #fff; }
.ornamen::before, .ornamen::after { content: ""; height: 1px; width: min(28vw, 180px); background: linear-gradient(90deg, transparent, var(--gold)); }
.ornamen::after { background: linear-gradient(90deg, var(--gold), transparent); }
.ornamen svg { width: 30px; height: 30px; animation: putar 24s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }
.tajuk-hiasan::before, .tajuk-hiasan::after { width: 26px; height: 2px; }

/* ikon berbingkai gerbang masjid */
.category-icon.gerbang { border-radius: 22px 22px 6px 6px !important; background: var(--soft-gold) !important; width: 44px !important; height: 50px !important; border: 1.5px solid #E2C982; }
.category-card.v2.featured .category-icon.gerbang { background: rgba(233,205,132,.14) !important; border-color: rgba(233,205,132,.6); }
.category-card.v2 .category-icon.gerbang .icon { width: 26px; height: 26px; }

/* ayat al-Quran pada kad infaq */
.ayat-arab { font-size: 22px !important; line-height: 2 !important; color: #F3DFA6 !important; margin: 0 auto 6px !important; max-width: 560px !important; }
.ayat-terjemah { font-family: var(--font-heading); font-style: italic; font-size: 13px !important; color: rgba(255,255,255,.82) !important; margin: 0 auto 18px !important; }
.ayat-terjemah span { color: var(--gold); font-style: normal; font-size: 11px; display: block; margin-top: 4px; }

/* animasi masuk (hanya jika JS aktif) */
[data-reveal] { transition: opacity .7s ease, transform .7s ease; }
[data-reveal].sembunyi { opacity: 0; transform: translateY(26px); }
.pc-fill { transition: width 1.6s cubic-bezier(.2,.8,.2,1); }
.category-card.v2, .slot-pil, .day-card { transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
a.category-card.v2:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(23,63,50,.14); }
a.slot-pil:active, .btn:active { transform: scale(.96); }
@media (min-width: 850px) {
  .surau-grid { grid-template-columns: 1fr 1.1fr; gap: 48px; }
  .bismillah { font-size: 28px; }
  .hadith-arab { font-size: 24px; }
  .tanglung.t-kiri { left: 2%; width: 56px; height: 140px; }
  .tanglung.t-kanan { right: 3%; width: 46px; height: 115px; }
}
@media (max-width: 600px) {
  .tanglung.t-kiri { left: auto; right: 22%; width: 30px; height: 76px; }
  .tanglung.t-kanan { right: 6%; width: 36px; height: 90px; }
  .kd-kotak span { min-width: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .tanglung, .tanglung .nyala, .bintang-langit i, .ornamen svg, .feed-live { animation: none !important; }
  [data-reveal].sembunyi { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
  .category-card.v2 .cc-top { flex-direction: column; gap: 8px; }
  .category-card.v2 h3 { font-size: 16px; overflow-wrap: anywhere; }
  .harga-pil { font-size: 11px; white-space: nowrap; padding: 3px 9px; }
}