:root { --ink:#123c3d; --deep:#0a2c30; --teal:#146566; --gold:#e5b55d; --cream:#f8f4ea; --paper:#fffdf8; --line:#dfe5db; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:"DM Sans",sans-serif; overflow-x:hidden; }
.page-shell { max-width:1280px; margin:0 auto; background:var(--paper); min-height:100vh; box-shadow:0 0 60px rgba(12,47,46,.07); }
.hero { color:white; background:var(--deep); min-height:465px; position:relative; overflow:hidden; }
.hero-pattern { position:absolute; inset:0; opacity:.16; background-image:radial-gradient(circle at 10% 12%, transparent 0 52px, #83c8b6 53px 54px, transparent 55px), radial-gradient(circle at 94% 88%, transparent 0 120px, #83c8b6 121px 122px, transparent 123px); }
.topbar,.hero-content,.schedule-panel,.explore,footer { position:relative; padding-left:clamp(25px,7vw,92px); padding-right:clamp(25px,7vw,92px); }
.topbar { height:96px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:10px; color:white; text-decoration:none; font-size:13px; letter-spacing:.08em; line-height:1.25; }
.brand strong { font-size:17px; letter-spacing:.02em; }.brand-mark { color:var(--gold); font-size:36px; line-height:.8; }.year-tag { border:1px solid rgba(255,255,255,.42); padding:8px 11px; font-size:10px; font-weight:700; letter-spacing:.14em; }
.eyebrow { color:var(--gold); letter-spacing:.16em; font-size:10px; font-weight:700; margin:0 0 14px; }.teal { color:var(--teal); }
h1,h2 { font-family:"Playfair Display",serif; margin:0; }.hero h1 { font-size:clamp(38px,5vw,62px); line-height:1.1; letter-spacing:-.025em; }.hero h1 em { color:#f4cb7c; font-weight:600; }.hero-copy { color:#cbdfda; font-size:15px; max-width:410px; line-height:1.65; margin:20px 0 25px; }
.selectors { display:flex; gap:12px; flex-wrap:wrap; }.selectors label { display:grid; gap:5px; font-size:11px; font-weight:700; letter-spacing:.08em; color:#c9ddda; }.selectors select,.selectors input { appearance:none; -webkit-appearance:none; border:1px solid #659191; background:#fefdf8; color:var(--ink); min-height:46px; padding:12px 15px; font:600 14px "DM Sans",sans-serif; min-width:220px; border-radius:2px; }
.schedule-panel { margin:-22px 24px 0; padding-top:36px; padding-bottom:35px; background:white; box-shadow:0 15px 35px rgba(14,50,49,.1); }.schedule-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding-bottom:23px; }.schedule-heading h2,.explore h2 { font-size:30px; letter-spacing:-.02em; }.schedule-heading p:not(.eyebrow) { margin:5px 0 0; font-size:14px; color:#5c7573; }
.next-prayer { text-align:right; }.next-prayer span { display:block; font-size:10px; font-weight:700; color:#68817d; letter-spacing:.12em; margin-bottom:5px; }.next-prayer strong { font-family:"Playfair Display",serif; color:var(--teal); font-size:18px; }
.prayer-grid { display:grid; grid-template-columns:repeat(7,1fr); margin-top:27px; }.prayer { border-right:1px solid var(--line); padding:0 14px; }.prayer:first-child { padding-left:0; }.prayer:last-child { border:0; }.prayer-name { color:#66807b; font-size:11px; font-weight:700; letter-spacing:.09em; }.prayer-time { font-family:"Playfair Display",serif; font-size:clamp(20px,2.3vw,29px); margin-top:8px; color:var(--ink); }.prayer.is-next .prayer-time { color:#c28221; }.notice { border-top:1px solid var(--line); margin:28px 0 0; padding-top:15px; color:#738984; font-size:11px; line-height:1.5; }
.explore { padding-top:65px; padding-bottom:64px; display:flex; justify-content:space-between; align-items:start; gap:50px; }.district-pills { max-width:560px; display:flex; justify-content:flex-end; gap:9px; flex-wrap:wrap; }.district-pills button { cursor:pointer; background:transparent; border:1px solid #b6cac4; color:var(--teal); border-radius:30px; padding:9px 13px; font:600 12px "DM Sans",sans-serif; transition:.2s; }.district-pills button:hover,.district-pills button.active { color:white; background:var(--teal); border-color:var(--teal); }
.comparison { background:#edf4ef; padding:52px clamp(25px,7vw,92px) 58px; }.comparison-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:26px; }.comparison h2 { font-size:30px; letter-spacing:-.02em; }.comparison-heading p:not(.eyebrow) { margin:8px 0 0; color:#5c7573; font-size:13px; line-height:1.55; }.legend { white-space:nowrap; font-size:11px; color:#607975; }.legend-dot { display:inline-block; width:9px; height:9px; margin-right:5px; border-radius:50%; background:#d39833; }.comparison-table-wrap { overflow-x:auto; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; background:#fff; box-shadow:0 8px 18px rgba(14,50,49,.06); }.comparison-table { width:100%; border-collapse:collapse; min-width:670px; font-size:13px; }.comparison-table th { background:#134b4b; color:white; text-align:left; padding:14px 16px; font-size:11px; letter-spacing:.06em; }.comparison-table th small { display:block; margin-top:4px; color:#bbd5cf; font-weight:500; letter-spacing:0; }.comparison-table td { padding:13px 16px; border-bottom:1px solid #e2eae5; color:#284d4d; }.comparison-table tr:last-child td { border-bottom:0; }.comparison-table td:first-child { color:#617a75; font-weight:700; font-size:11px; letter-spacing:.06em; }.comparison-table .changed { color:#a36610; font-weight:700; background:#fff8e9; }.comparison-table .delta { display:block; font-size:10px; font-weight:600; margin-top:3px; }.comparison-table .delta.same { color:#718983; }.comparison-table .delta.later { color:#b37512; }
footer { display:flex; justify-content:space-between; padding-top:19px; padding-bottom:19px; background:#e7eee9; color:#65807a; font-size:11px; }
@media (max-width:1024px) { .topbar,.hero-content,.schedule-panel,.explore,footer { padding-left:clamp(22px,5vw,52px); padding-right:clamp(22px,5vw,52px); }.schedule-panel { margin-left:18px; margin-right:18px; }.prayer-grid { grid-template-columns:repeat(4,1fr); }.prayer { padding:15px 14px; border-bottom:1px solid var(--line); }.prayer:first-child { padding-left:0; }.prayer:nth-child(4n) { border-right:0; }.prayer:nth-child(4n + 1) { padding-left:0; }.prayer:nth-last-child(-n + 3) { border-bottom:0; }.explore { gap:30px; }.district-pills { max-width:450px; } }
@media (max-width:760px) { .page-shell { box-shadow:none; }.hero { min-height:0; padding-bottom:34px; }.topbar { height:78px; }.brand { font-size:11px; }.brand strong { font-size:15px; }.brand-mark { font-size:31px; }.year-tag { padding:7px 8px; font-size:9px; }.hero-content { padding-top:30px; }.hero h1 { font-size:clamp(36px,11vw,48px); }.hero-copy { margin:16px 0 22px; font-size:14px; }.selectors { display:grid; grid-template-columns:1fr; }.selectors label,.selectors select,.selectors input { width:100%; min-width:0; }.schedule-panel { margin:-12px 10px 0; padding-top:27px; padding-bottom:27px; }.schedule-heading,.comparison-heading { align-items:start; flex-direction:column; }.schedule-heading h2,.explore h2,.comparison h2 { font-size:27px; }.next-prayer { text-align:left; }.prayer-grid { grid-template-columns:repeat(2,1fr); margin-top:16px; }.prayer { min-height:84px; padding:15px 10px; }.prayer:nth-child(4n) { border-right:1px solid var(--line); }.prayer:nth-child(odd) { padding-left:0; border-right:1px solid var(--line); }.prayer:nth-child(even) { border-right:0; }.prayer:nth-child(n + 5) { border-bottom:0; }.prayer-time { font-size:26px; }.notice { margin-top:17px; }.comparison { padding:42px 20px 46px; }.comparison-heading { gap:12px; margin-bottom:20px; }.comparison-heading p:not(.eyebrow) { font-size:12px; }.legend { white-space:normal; }.comparison-table { min-width:570px; }.comparison-table th,.comparison-table td { padding:12px; }.comparison-table-wrap::after { content:'Leret untuk melihat jadual'; display:block; padding:8px 12px; color:#66807b; background:#f6faf7; font-size:10px; letter-spacing:.04em; }.explore { display:block; padding-top:48px; padding-bottom:48px; }.district-pills { justify-content:flex-start; margin-top:22px; gap:8px; }.district-pills button { min-height:40px; padding:8px 12px; } footer { gap:8px; flex-direction:column; } }
@media (max-width:380px) { .topbar,.hero-content,.schedule-panel,.explore,footer { padding-left:18px; padding-right:18px; }.year-tag { display:none; }.hero h1 { font-size:34px; }.schedule-panel { margin-left:7px; margin-right:7px; }.prayer { padding-right:7px; }.prayer-time { font-size:23px; }.comparison { padding-left:16px; padding-right:16px; } }
.selectors { align-items:end; }.location-button { min-height:46px; cursor:pointer; border:1px solid #f4cb7c; background:transparent; color:#fff2ce; border-radius:2px; padding:11px 14px; font:700 12px "DM Sans",sans-serif; letter-spacing:.02em; }.location-button:hover { background:#f4cb7c; color:var(--deep); }.location-button:disabled { cursor:wait; opacity:.65; }.schedule-heading .location-status { margin-top:7px; color:#8b7160; font-size:11px; }
@media (max-width:760px) { .selectors label,.selectors select,.selectors input,.location-button { width:100%; min-width:0; } }