/*
Theme Name: Haramain
Theme URI: https://klinikharamain.my
Author: Blindspot
Description: Tema khas Klinik Haramain 24 Jam, Jenjarom. Dibina mengikut Content Architecture Blueprint v1.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: Proprietary
Text Domain: haramain
*/

:root{
  --paper:#FFFFFF;
  --ground:#F0ECEB;
  --headline:#5C100A;
  --body:#4A4241;
  --muted:#7A6E6C;
  --accent:#D9231A;
  --deep:#A8170F;
  --rule:#E2D8D6;
  --chip:#FBEAE8;
  --open:#1B7340;
  --sans:"Plus Jakarta Sans","KH Sans Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Source Serif 4","KH Serif Fallback",Georgia,"Times New Roman",serif;
  --maxw:1280px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--sans);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;padding-bottom:78px}
@media(min-width:900px){body{padding-bottom:0}}
h1,h2,h3,h4{margin:0;font-family:var(--serif);color:var(--headline);line-height:1.12;letter-spacing:-.015em;font-weight:600;text-wrap:balance}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.narrow{max-width:940px;margin-inline:auto}
.center{text-align:center}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;background:#fff;padding:12px 18px;border-radius:99px;z-index:200}

/* nav */
.navshell{position:sticky;top:14px;z-index:60;padding-inline:16px;margin-top:14px}
.navpill{position:relative;max-width:1360px;margin-inline:auto;background:#fff;border-radius:44px;box-shadow:0 1px 2px rgba(60,20,16,.06),0 14px 40px -18px rgba(60,20,16,.3);display:flex;align-items:center;gap:18px;padding:13px 16px 13px 22px;min-height:78px}
.navlinks{display:none;gap:4px;flex:1;list-style:none;margin:0;padding:0;max-width:calc(50% - 150px);flex-wrap:nowrap}
@media(min-width:1180px){.navlinks{display:flex}}
.navlinks a{font-size:15.5px;font-weight:600;color:var(--body);padding:9px 14px;border-radius:99px;text-decoration:none;display:block}
.navlinks a:hover,.navlinks .current-menu-item>a{background:var(--chip);color:var(--deep)}
.navlinks li{position:relative}
.navlinks .sub-menu{display:block;visibility:hidden;opacity:0;transform:translateY(-6px);position:absolute;top:calc(100% + 8px);left:0;background:#fff;border-radius:18px;box-shadow:0 14px 40px -14px rgba(60,20,16,.35);padding:10px;min-width:260px;list-style:none;margin:0;z-index:5;transition:opacity .15s ease,transform .15s ease,visibility 0s linear .25s}
.navlinks .sub-menu:before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.navlinks li:hover>.sub-menu,.navlinks li:focus-within>.sub-menu{visibility:visible;opacity:1;transform:none;transition:opacity .15s ease,transform .15s ease,visibility 0s linear 0s}
@media(prefers-reduced-motion:reduce){.navlinks .sub-menu{transition:visibility 0s linear .25s}.navlinks li:hover>.sub-menu,.navlinks li:focus-within>.sub-menu{transition:visibility 0s linear 0s}}
.navlinks .sub-menu a{border-radius:12px;font-size:15px;font-weight:500}
.navbrand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto}
@media(min-width:1180px){.navpill .navbrand{position:absolute;left:50%;transform:translateX(-50%)}}
.sitefoot .navbrand{position:static;transform:none;margin-bottom:16px}
.navbrand svg{width:32px;height:30px;flex:0 0 auto}
.navbrand b{display:block;font-family:var(--serif);font-size:17px;font-weight:700;color:var(--headline);line-height:1.1}
.navbrand span{display:block;font-size:9px;font-weight:700;letter-spacing:.2em;color:var(--muted)}
.navright{display:flex;align-items:center;gap:10px;margin-left:auto}
.tel-link{display:none;font-weight:700;font-size:15px;color:var(--body);text-decoration:none}
@media(min-width:760px){.tel-link{display:inline}}
.burger{display:inline-flex;background:none;border:1.6px solid var(--rule);border-radius:99px;padding:10px 17px;font:inherit;font-weight:700;font-size:14.5px;cursor:pointer;color:var(--body)}
@media(min-width:1180px){.burger{display:none}}
.drawer{max-width:1360px;margin:10px auto 0;background:#fff;border-radius:26px;box-shadow:0 14px 40px -18px rgba(60,20,16,.3);padding:12px;display:none}
.drawer.open{display:block}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer{max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.drawer li.menu-item-has-children{position:relative}
.drawer .sub-menu{display:none;margin:4px 0 12px 22px;padding:4px 0 4px 14px;border-left:2px solid var(--rule)}
.drawer li.open>.sub-menu{display:block}
.drawer li.menu-item-has-children>a{padding-right:54px}
.drawer .subtoggle{position:absolute;top:3px;right:6px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:14px;padding:0;cursor:pointer;color:var(--muted)}
.drawer .subtoggle:hover,.drawer .subtoggle:focus-visible{background:var(--chip);color:var(--deep)}
.drawer .subtoggle svg{width:13px;height:9px;transition:transform .18s ease}
.drawer li.open>.subtoggle svg{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.drawer .subtoggle svg{transition:none}}
.drawer a{display:block;font-size:16px;font-weight:600;padding:13px 16px;border-radius:16px;color:var(--body);text-decoration:none}
.drawer a:hover{background:var(--chip);color:var(--deep)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:15.5px;border-radius:99px;padding:13px 26px;border:1.6px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--deep);color:#fff}
.btn-outline{border-color:var(--rule);color:var(--body);background:transparent}
.btn-outline:hover{border-color:var(--accent);color:var(--deep)}
.btn-white{background:#fff;color:#5C100A}
.btn-clear{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.btn-clear:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-sm{font-size:14.5px;padding:10px 20px}

/* sections */
/* Padding seksyen dikecilkan 23/10/2026. Sebelum ini 7vw, iaitu 100.8px
   pada skrin 1440. Jurang antara seksyen ialah 0, jadi padding bertindih:
   101 bawah + 101 atas = 202px ruang kosong berterusan setiap sempadan.
   Pada laman utama itu 1052px daripada 5448px, 19.3% halaman jadi padding
   semata. Sekarang 4.4vw, iaitu 63px pada 1440, jurang 126px. */
section{padding-block:clamp(42px,4.4vw,70px)}
section.ground{background:var(--ground)}
.h-display{font-size:clamp(34px,5.4vw,62px);line-height:1.06;letter-spacing:-.025em}
.h-section{font-size:clamp(29px,3.9vw,46px)}
.h-sub{font-size:clamp(23px,2.7vw,31px)}
.lede{font-size:clamp(17px,1.5vw,19.5px);color:var(--muted);max-width:60ch}
.center .lede{margin-inline:auto}
.eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:block}

/* hero */
.hero{position:relative;margin-top:-92px;padding-top:150px;padding-bottom:clamp(56px,6.4vw,96px);background:linear-gradient(175deg,#2A0D0A 0%,#6B1109 48%,#A8170F 100%);color:#fff;overflow:hidden}
.hero>*{position:relative}
.hero h1{color:#fff}
.hero .lede{color:#F0D9D6;font-size:clamp(17px,1.6vw,20px)}
.badge{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);border-radius:99px;padding:8px 18px;font-size:13.5px;font-weight:700;margin-bottom:26px;color:#fff}
.dot{width:8px;height:8px;border-radius:50%;background:#79F2A8;box-shadow:0 0 0 0 rgba(121,242,168,.75);animation:pulse 2.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(121,242,168,0)}100%{box-shadow:0 0 0 0 rgba(121,242,168,0)}}
@media(prefers-reduced-motion:reduce){.dot{animation:none}}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.center .actions{justify-content:center}
.heroshot{margin-top:clamp(44px,5vw,72px);border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.05);min-height:clamp(220px,32vw,400px);display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:22px;text-align:left}
.heroshot b{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#FFB9B2}
.heroshot span{font-size:14px;color:#EBD3D0;max-width:70ch;line-height:1.5}
.heroshot img{border-radius:26px;width:100%}

/* tabs */
.tabs{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.tabs button{font:inherit;font-size:12.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;background:none;border:0;border-bottom:3px solid transparent;padding:0 2px 13px;cursor:pointer;color:var(--muted)}
.tabs button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.tabrule{height:2px;background:var(--headline);opacity:.85;margin-top:-2px}
.tabpanel{padding-top:clamp(34px,4vw,54px)}
.tabpanel[hidden]{display:none}
.split{display:grid;gap:34px;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:60px}}
.stats{display:flex;gap:44px;flex-wrap:wrap;margin-top:30px}
.stats div b{display:block;font-family:var(--serif);font-size:clamp(38px,4.6vw,56px);color:var(--accent);line-height:1;font-weight:700}
.stats div span{font-size:14.5px;color:var(--muted);display:block;margin-top:7px;max-width:20ch}

/* cards */
.cards{display:grid;gap:clamp(28px,3.4vw,48px);margin-top:clamp(38px,4.6vw,62px)}
@media(min-width:700px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.cards.c3{grid-template-columns:repeat(3,1fr)}}
.cardimg{border-radius:20px;aspect-ratio:16/10;width:100%;border:1.5px dashed var(--rule);background:var(--chip);display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:15px;margin-bottom:20px;overflow:hidden}
.cardimg b{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--deep)}
.cardimg span{font-size:12.5px;color:var(--muted);line-height:1.45}
.cardimg img{border-radius:20px;width:100%;height:100%;object-fit:cover}
.card h3{font-size:22px;margin-bottom:10px}
.card p{font-size:16px}
.arrowlink{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:700;font-size:15.5px;color:var(--accent);text-decoration:none}
.arrowlink:after{content:"\2192";font-size:17px}
.arrowlink:hover{color:var(--deep)}

/* content pages */
.crumb{font-size:14px;color:var(--muted);padding-top:30px}
.crumb a{color:var(--muted)}
.article{display:grid;gap:44px;align-items:start}
@media(min-width:1040px){.article{grid-template-columns:minmax(0,1fr) 320px;gap:58px}}
.prose{max-width:68ch;min-width:0}
.prose h2{font-size:clamp(25px,2.7vw,33px);margin-top:46px;margin-bottom:14px}
.prose h3{font-size:20px;margin-top:26px;margin-bottom:6px}
.prose p{margin-top:15px}
.prose ul,.prose ol{margin:15px 0 0;padding-left:22px}
.prose li{margin-bottom:9px}
.byline{display:flex;gap:15px;align-items:center;background:var(--chip);border-radius:20px;padding:18px 22px;margin-top:26px}
.byline .av{width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;flex:0 0 auto;font-size:15px}
.byline b{display:block;font-size:15.5px;color:var(--headline);font-family:var(--serif);font-weight:700}
.byline p{font-size:14px;color:var(--muted);margin:0}
.quick{font-family:var(--serif);font-size:clamp(20px,2.1vw,24px);line-height:1.48;color:var(--headline);border-left:4px solid var(--accent);padding:6px 0 6px 24px;margin-top:32px}
table{width:100%;border-collapse:collapse;margin-top:20px;font-size:15.5px}
th{text-align:left;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);padding:0 14px 11px 0;border-bottom:2px solid var(--headline)}
td{padding:14px 14px 14px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.scroller{overflow-x:auto}
.faq{margin-top:14px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:19px 0;font-family:var(--serif);font-weight:600;font-size:19px;color:var(--headline);list-style:none;display:flex;justify-content:space-between;gap:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--accent);font-weight:700;font-size:23px;line-height:1;font-family:var(--sans)}
.faq details[open] summary:after{content:"\2212"}
.faq p{padding-bottom:20px;color:var(--muted);font-size:16px}
.disclaimer{margin-top:34px;font-size:14px;color:var(--muted);border-top:1px solid var(--rule);padding-top:18px}
.rail{display:grid;gap:16px;position:sticky;top:112px}
.railcard{background:var(--ground);border-radius:22px;padding:24px}
.railcard h4{font-family:var(--serif);font-size:19px;color:var(--headline);margin:0 0 10px;font-weight:600}
.railcard p{font-size:15px;color:var(--muted)}
.railcard .btn{width:100%;margin-top:14px}
.pill{display:inline-flex;align-items:center;gap:8px;color:var(--open);font-size:13.5px;font-weight:800}
.pill i{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
.linklist{display:grid;gap:11px;margin-top:16px}
.linklist a{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:16px 19px;font-weight:600;font-size:16px;color:var(--body);display:flex;justify-content:space-between;gap:14px;align-items:center;text-decoration:none}
.linklist a:hover{border-color:var(--accent);color:var(--deep)}
.linklist em{color:var(--muted);font-weight:500;font-size:13.5px;font-style:normal}
.band{background:linear-gradient(160deg,#2A0D0A,#8E1309);color:#fff;border-radius:30px;padding:clamp(34px,4.6vw,62px);text-align:center;margin-top:clamp(44px,5vw,70px)}
.band h2{color:#fff}
.band p{color:#F0D9D6;margin-top:14px}
.note{background:var(--chip);border-radius:20px;padding:20px 24px;font-size:16px;margin-top:22px}
.note b{color:var(--deep)}

/* panel checker */
.checker{background:#fff;border-radius:24px;padding:26px;box-shadow:0 1px 2px rgba(60,20,16,.05),0 18px 44px -26px rgba(60,20,16,.4)}
.checker label{font-size:13.5px;font-weight:700;color:var(--headline);display:block;margin-bottom:9px}
.checker input{width:100%;font:inherit;font-size:16.5px;padding:15px 18px;border-radius:99px;border:1.6px solid var(--rule);background:#fff;color:var(--body)}
.checker input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
#panelout{margin-top:15px;display:grid;gap:9px}
.hit{display:flex;gap:12px;align-items:flex-start;background:var(--ground);border-radius:16px;padding:13px 17px;font-size:15.5px}
.hit .tick{color:var(--open);font-weight:800}
.hit .cross{color:var(--muted);font-weight:800}

/* footer */
.sitefoot{background:var(--ground)}
.sitefoot .wrap{display:grid;gap:32px;padding-block:clamp(44px,5vw,72px)}
@media(min-width:780px){.sitefoot .wrap{grid-template-columns:1.5fr 1fr 1fr}}
.sitefoot h4{font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--accent);margin:0 0 14px;font-family:var(--sans);font-weight:800}
.sitefoot p,.sitefoot li{font-size:15.5px;color:var(--muted)}
.sitefoot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sitefoot a{color:var(--muted);text-decoration:none}
.sitefoot a:hover{color:var(--deep)}
.legal{border-top:1px solid var(--rule);padding-block:22px;font-size:13.5px;color:var(--muted)}

/* sticky bar */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:10px;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-top:1px solid var(--rule);padding:11px 16px;padding-bottom:calc(11px + env(safe-area-inset-bottom,0px))}
.actionbar .btn{flex:1;padding-block:14px}
@media(min-width:900px){.actionbar{display:none}}


/* Imej sebenar dalam slot */
.heroshot.has-img{padding:0;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);display:block;min-height:0}
.heroshot.has-img img{display:block;width:100%;height:clamp(240px,42vw,560px);object-fit:cover;object-position:50% 50%;border-radius:26px}
.cardimg.has-img{padding:0;border:1px solid var(--rule);background:var(--chip);display:block}
.cardimg.has-img img{display:block;width:100%;height:100%;object-fit:cover;border-radius:20px}

/* Panel maklumat, ganti slot yang belum ada gambar sebenar klinik */
.infopanel{border:1px solid var(--rule);border-radius:20px;background:var(--paper);padding:clamp(22px,2.4vw,30px)}
.infopanel h4{font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--deep);margin:0 0 18px}
.infopanel dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:12px 18px;align-items:baseline}
.infopanel dt{font-size:14.5px;color:var(--muted)}
.infopanel dd{margin:0;font-size:15px;font-weight:650;color:var(--headline);text-align:right}
.infopanel ul{margin:0;padding:0;list-style:none;display:grid;gap:13px}
.infopanel li{font-size:15px;line-height:1.5;color:var(--body);padding-left:27px;position:relative}
.infopanel li:before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:50%;background:var(--chip);border:2px solid var(--accent)}
.infopanel .note{margin:20px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}


/* Toggle bahasa BM / EN */
.langtoggle{display:none;align-items:center;gap:2px;font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.langtoggle a{color:var(--muted);text-decoration:none;padding:4px 6px;border-radius:8px;transition:background .15s,color .15s}
.langtoggle a:hover,.langtoggle a:focus-visible{color:var(--deep);background:var(--chip)}
.langtoggle b{color:var(--headline);padding:4px 6px}
.langtoggle span{color:var(--rule)}
@media(min-width:760px){.langtoggle{display:flex}}
.langtoggle-drawer{display:flex;margin-top:16px;padding-top:16px;border-top:1px solid var(--rule)}
@media(min-width:760px){.langtoggle-drawer{display:none}}


/* Mobile: butang WhatsApp dalam navbar berulang dengan actionbar bawah skrin, jadi sembunyikan */
@media(max-width:899px){.navright>.btn{display:none}}

/* Mobile: toggle bahasa kekal nampak dalam navbar, versi ringkas (papar bahasa sasaran sahaja) */
@media(max-width:759px){
.navright .langtoggle{display:flex;flex:0 0 auto}
.navright .langtoggle b,.navright .langtoggle span{display:none}
.navright .langtoggle a{border:1.5px solid var(--rule);padding:7px 11px;border-radius:99px;color:var(--headline);font-size:12.5px}
.navright .langtoggle a:hover,.navright .langtoggle a:focus-visible{border-color:var(--accent);background:var(--chip);color:var(--deep)}
}


/* Drawer: bezakan menu induk dengan submenu */
.drawer>ul>li>a{font-size:17px;font-weight:700;color:var(--headline);letter-spacing:-.01em}
.drawer>ul>li+li{margin-top:2px}
.drawer li.open>a{background:var(--chip);color:var(--deep)}
.drawer .sub-menu a{font-size:14.5px;font-weight:500;color:var(--body);padding:10px 14px;border-radius:12px}
.drawer .sub-menu a:hover,.drawer .sub-menu a:focus-visible{background:var(--chip);color:var(--deep)}
.drawer .current-menu-item>a{color:var(--deep);font-weight:700;background:var(--chip)}


/* ---------- Struktur CTA dan navbar, rujukan nabilaarisco.my ---------- */
/* Butang jadi blok segi empat, huruf besar, berjarak. Bukan pill. */
.btn{border-radius:4px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;font-size:13.5px;padding:17px 30px}
.btn-sm{font-size:12px;letter-spacing:.09em;padding:13px 22px}
.btn-nav{font-size:12px;letter-spacing:.09em;padding:15px 24px;border-radius:4px}

/* Bar penuh melebar, bukan pill terapung */
.navshell{position:sticky;top:0;z-index:60;margin-top:0;padding-inline:clamp(16px,3vw,40px);background:#fff;border-bottom:1px solid var(--rule)}
.navpill{max-width:1360px;margin-inline:auto;background:transparent;border-radius:0;box-shadow:none;gap:clamp(14px,2vw,30px);padding:0;min-height:76px}

/* Jenama kiri, kekal statik pada semua saiz */
.navpill .navbrand{position:static;transform:none;flex:0 0 auto;margin-right:auto}

/* Link tolak ke kanan, tiada had lebar buatan */
.navlinks{max-width:none;flex:0 1 auto;gap:2px}
.navlinks a{font-size:15px;padding:9px 13px;border-radius:4px}

/* Toggle bahasa jadi kotak berbingkai */
.langtoggle{border:1.4px solid var(--rule);border-radius:4px;padding:0;gap:0;overflow:hidden}
.langtoggle a,.langtoggle b{padding:9px 11px;border-radius:0;font-size:11.5px;letter-spacing:.08em}
.langtoggle b{background:var(--chip);color:var(--deep)}
.langtoggle span{display:none}
.langtoggle a:hover{background:var(--chip)}

/* Burger sepadan dengan bahasa blok */
.burger{border-radius:4px;text-transform:uppercase;letter-spacing:.09em;font-size:12px;font-weight:800;padding:13px 18px}

/* Drawer duduk rapat bawah bar */
.drawer{margin:0 auto;max-width:1360px;border-radius:0;box-shadow:none;border-top:1px solid var(--rule);padding:14px 0}

/* Action bar bawah skrin guna bentuk sama */
.actionbar .btn{border-radius:4px}


/* ---------- Halaman dalaman. Mobile first. ---------- */
.phero{padding-top:clamp(30px,6vw,56px);padding-bottom:clamp(22px,4vw,34px)}
.h-page{font-family:var(--serif);font-size:clamp(30px,7vw,52px);line-height:1.1;font-weight:700;color:var(--headline);margin:12px 0 0;letter-spacing:-.015em}
.phero .lede{margin-top:16px}
.phero .actions{margin-top:24px}
.tight{padding-top:0}

/* Byline */
.byline{margin-top:28px;padding:16px 18px;border:1px solid var(--rule);border-radius:6px;background:var(--paper);display:grid;gap:3px}
.byline .bl-label{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.byline b{font-size:16px;color:var(--headline)}
.byline span{font-size:13.5px;color:var(--muted);line-height:1.5}
.byline .bl-tarikh{font-size:12.5px}
.byline-pending{background:var(--chip);border-color:var(--accent)}
.byline-pending b{color:var(--deep)}

/* Kotak jawapan ringkas */
.answerbox{border-left:3px solid var(--accent);background:var(--chip);border-radius:0 8px 8px 0;padding:18px 20px}
.answerbox h2{font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--deep);margin:0 0 8px}
.answerbox p{margin:0;font-size:17px;line-height:1.6;color:var(--headline)}

/* Prose */
.prose h2{font-family:var(--serif);font-size:clamp(23px,4.5vw,32px);color:var(--headline);margin:clamp(30px,5vw,44px) 0 12px;line-height:1.2}
.prose p{margin:0 0 14px}
.ticklist{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.ticklist li{position:relative;padding-left:28px;line-height:1.55}
.ticklist li:before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--accent)}

/* Kad simptom */
.card.symptom h3{margin-top:0}

/* Langkah proses */
.steps{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:16px;counter-reset:s}
.steps li{display:flex;gap:14px;align-items:flex-start}
.stepno{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;line-height:1;text-align:center}
.steps b{display:block;color:var(--headline);font-size:16.5px;margin-bottom:2px}
/* Ditulis '.steps div span', BUKAN '.steps span'. Sebab: .stepno juga sebuah
   <span> di dalam .steps. '.steps span' (0,1,1) mengalahkan '.stepno' (0,1,0),
   jadi bulatan nombor kehilangan display:flex, color:#fff dan font-size dia.
   Nombor jadi gelap, melekat di kiri atas, terkeluar dari bulatan. Dikesan
   20/10/2026. Jangan tukar balik jadi '.steps span'. */
.steps div span{display:block;color:var(--body);font-size:15px;line-height:1.55}

/* Jadual, boleh skrol pada telefon */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0}
.ktable{width:100%;min-width:480px;border-collapse:collapse;font-size:15px}
.ktable th{background:var(--chip);color:var(--deep);text-align:left;padding:11px 13px;border:1px solid var(--rule);font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.ktable td{padding:11px 13px;border:1px solid var(--rule);vertical-align:top}

/* FAQ, guna details supaya tiada JS */
.faq{display:grid;gap:10px;margin-top:8px}
.faq details{border:1px solid var(--rule);border-radius:6px;background:var(--paper);overflow:hidden}
.faq summary{cursor:pointer;padding:15px 44px 15px 17px;font-weight:700;color:var(--headline);font-size:16px;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";position:absolute;right:18px;top:21px;width:9px;height:9px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .18s ease}
.faq details[open] summary:after{transform:rotate(-135deg);top:25px}
.faq details p{margin:0;padding:0 17px 16px;color:var(--body);line-height:1.6}

/* Kotak CTA dalam badan */
.ctabox{margin-top:26px;padding:22px;border-radius:8px;background:var(--chip);border:1px solid var(--rule)}
.ctabox b{display:block;font-size:18px;color:var(--headline);margin-bottom:6px}
.ctabox p{margin:0 0 16px;color:var(--body);font-size:15.5px;line-height:1.55}

/* Grid pautan berkaitan */
.linkgrid{display:grid;gap:12px;margin-top:8px}
.linkgrid a{display:block;padding:16px 18px;border:1px solid var(--rule);border-radius:6px;text-decoration:none;background:var(--paper);transition:border-color .15s,background .15s}
.linkgrid a:hover{border-color:var(--accent);background:var(--chip)}
.linkgrid b{display:block;color:var(--headline);font-size:16.5px;margin-bottom:3px}
.linkgrid span{display:block;color:var(--muted);font-size:14px;line-height:1.5}

/* Penafian */
.disclaimer{font-size:13px;line-height:1.6;color:var(--muted);padding:18px 0 34px;border-top:1px solid var(--rule);margin-top:10px}

.center-actions{justify-content:center}

@media(min-width:760px){
.linkgrid{grid-template-columns:repeat(2,1fr)}
.steps{gap:20px}
}

/* ---------- Breadcrumb ---------- */
.crumbs{background:var(--paper);border-bottom:1px solid var(--rule);font-size:13px;color:var(--muted)}
.crumbs>div{padding:11px 0}
.crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.crumbs .breadcrumb_last{color:var(--body);font-weight:600}
@media (min-width:900px){.crumbs{font-size:13.5px}}

/* ---------- Selaraskan dengan Garis Panduan Jenama v1.0 ----------
   Merah Haramain #D9231A, Merah Tua #A8170F, Merah Lembut #FCE7E4,
   Dakwat #1F1A1A, Kelabu Hangat #5E5656, Putih Hangat #FFF7F5.
   --headline dikekalkan merah tua sebagai keputusan reka bentuk, belum diselaraskan. */
:root{--paper:#FFF7F5;--ground:#F7E9E6;--body:#1F1A1A;--muted:#5E5656;--chip:#FCE7E4;--rule:#EFDFDC}

/* Petunjuk jadual boleh diskrol mendatar di skrin sempit */
.tablewrap{position:relative}
.tablewrap::after{content:'';position:absolute;top:0;right:0;width:26px;height:100%;pointer-events:none;background:linear-gradient(to right,rgba(255,247,245,0),rgba(255,247,245,.95));}
.tablewrap.tablewrap-hint::after{display:none}
@media (min-width:900px){.tablewrap::after{display:none}}

/* ============================================================
   PENANDA kh-botnav
   Bar navigasi bawah mobile lima slot + borang lead WhatsApp.
   Markup dan JS dalam inc-botnav.php. Simpanan dalam inc-lead.php.
   Diport daripada nabilaarisco.my, warna ditukar kepada merah Haramain.
   Bar bawah MENGGANTIKAN .actionbar di bawah 900px.

   PENTING: BAR itu mobile sahaja, tetapi BORANG dan backdrop berfungsi pada
   SEMUA lebar. Arahan Lukman 09/10/2026 ialah semua butang WhatsApp di seluruh
   site guna borang yang sama, termasuk butang WhatsApp dalam navbar desktop.
   Kalau sheet dihadkan kepada mobile, pengendali klik tetap preventDefault pada
   desktop dan butang WhatsApp desktop jadi MATI. Jangan pindahkan .khb-sheet
   atau .khb-bg masuk ke dalam media query mobile.
   ============================================================ */
.khb{display:none}
.khb *,.khb-sheet *{box-sizing:border-box}
body.khb-lock{overflow:hidden}

/* ---- backdrop dan sheet: semua lebar ---- */
.khb-bg{display:block;position:fixed;inset:0;z-index:78;background:rgba(31,26,26,.5);
  opacity:0;transition:opacity .22s ease}
.khb-bg.is-open{opacity:1}

.khb-sheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;
  border-top-left-radius:18px;border-top-right-radius:18px;
  padding:12px 16px calc(20px + env(safe-area-inset-bottom,0px));
  transform:translateY(100%);transition:transform .26s cubic-bezier(.22,.8,.3,1);
  box-shadow:0 -10px 34px rgba(92,16,10,.2);max-height:92vh;overflow-y:auto}
.khb-sheet.is-open{transform:translateY(0)}
.khb-grip{width:38px;height:4px;border-radius:4px;background:var(--rule);margin:0 auto 14px}

.khb-lang{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--rule);border-radius:10px;padding:11px 14px;margin-bottom:14px;text-decoration:none}
.khb-lang b{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--body)}
.khb-lang i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--accent)}

.khb-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.khb-grid a{display:flex;align-items:center;gap:9px;padding:13px 12px;text-decoration:none;
  border:1px solid var(--rule);border-radius:10px;background:var(--paper);
  font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--body);line-height:1.3}
.khb-grid a svg{width:17px;height:17px;flex:0 0 17px;color:var(--accent)}

/* ---- borang lead ---- */
.khb-t{font-family:var(--serif);font-size:20px;color:var(--headline);margin:0 0 4px;line-height:1.2}
.khb-sub{font-size:13px;color:var(--muted);line-height:1.5;margin:0 0 14px}
.khb-form{display:flex;flex-direction:column;gap:11px}
.khb-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.khb-f{display:flex;flex-direction:column;gap:5px}
.khb-f>span{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.khb-f input,.khb-f select,.khb-f textarea{width:100%;font-family:var(--sans);font-size:16px;color:var(--body);
  background:var(--paper);border:1px solid var(--rule);border-radius:9px;padding:11px 12px;line-height:1.35}
.khb-f textarea{resize:vertical;min-height:52px}
.khb-f input:focus,.khb-f select:focus,.khb-f textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.khb-chk{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.45;color:var(--body)}
.khb-chk input{width:19px;height:19px;flex:0 0 19px;margin-top:1px;accent-color:var(--accent)}
.khb-chk a{color:var(--accent)}
.khb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.khb-err{font-size:12.5px;color:var(--deep);background:var(--chip);border-radius:8px;padding:9px 11px;margin:0;line-height:1.45}
.khb-send{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:2px;
  background:linear-gradient(180deg,var(--accent) 0%,var(--deep) 100%);color:#fff;border:0;
  border-radius:10px;padding:15px;cursor:pointer;font-family:var(--sans);
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.khb-send svg{width:17px;height:17px}
.khb-send:disabled,.khb-send.is-sending{opacity:.62}
.khb-skip{display:block;text-align:center;margin-top:12px;font-size:12.5px;color:var(--muted);text-decoration:underline}

/* ---- bar bawah: mobile sahaja ---- */
@media (max-width:899.98px){
  .actionbar{display:none !important}

  .khb{display:flex;align-items:stretch;position:fixed;left:0;right:0;bottom:0;z-index:70;
    height:calc(62px + env(safe-area-inset-bottom,0px));
    padding-bottom:env(safe-area-inset-bottom,0px);
    background:rgba(255,247,245,.96);backdrop-filter:blur(12px);
    border-top:1px solid var(--rule);box-shadow:0 -2px 14px rgba(92,16,10,.08)}
  .khb-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    text-decoration:none;color:var(--muted);background:none;border:0;padding:0;cursor:pointer;
    font-family:var(--sans);-webkit-tap-highlight-color:transparent;transition:color .16s ease}
  .khb-item svg{width:21px;height:21px;display:block}
  .khb-item span{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;line-height:1}
  .khb-item.is-on,.khb-item:active{color:var(--accent)}

  .khb-mid{position:relative;flex:1}
  .khb-fab{position:absolute;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
    width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(180deg,var(--accent) 0%,var(--deep) 100%);
    border:3px solid var(--paper);color:#fff;text-decoration:none;
    box-shadow:0 7px 18px rgba(168,23,15,.38);transition:transform .16s ease}
  .khb-fab:active{transform:translateX(-50%) scale(.94)}
  .khb-fab svg{width:28px;height:28px}
  .khb-mid em{position:absolute;left:50%;bottom:calc(13px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
    font-style:normal;font-size:9.5px;line-height:1;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
    color:var(--accent);white-space:nowrap}
}

/* ---- desktop: sheet jadi modal di tengah, bukan naik dari bawah ---- */
@media (min-width:900px){
  .khb-sheet{left:50%;right:auto;bottom:auto;top:50%;width:min(460px,92vw);
    border-radius:16px;padding:18px 22px 24px;
    transform:translate(-50%,-46%) scale(.97);opacity:0;
    transition:transform .2s ease,opacity .2s ease;
    box-shadow:0 24px 60px rgba(92,16,10,.26)}
  .khb-sheet.is-open{transform:translate(-50%,-50%) scale(1);opacity:1}
  .khb-grip{display:none}
}

@media print{.khb,.khb-sheet,.khb-bg{display:none !important}}
@media (prefers-reduced-motion:reduce){.khb-sheet,.khb-bg,.khb-fab,.khb-item{transition:none}}

/* [hidden] mesti menang atas display:block di atas, kalau tidak backdrop tak
   nampak tetapi ia tetap menyekat semua klik pada halaman. */
.khb[hidden],.khb-sheet[hidden],.khb-bg[hidden]{display:none}
/* ============ HUJUNG PENANDA kh-botnav ============ */

/* ============================================================
   PENANDA kh-khgrid
   Grid kad untuk hub servis dan rawatan-kulit. Dirender oleh blok indeks
   dalam page.php bila kunci indeks_kad ditetapkan. Data dalam inc-hub-indeks.php.
   Corak mengikut nabilaarisco.my/servis/ yang Lukman tunjuk 09/10/2026:
   seluruh kad ialah pautan, label kategori kecil di atas, tajuk, perenggan,
   dan afordan baca selanjutnya di bawah.
   ============================================================ */
.khgrid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.khgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.khgrid{grid-template-columns:repeat(3,1fr)}}

.khcell{display:flex;flex-direction:column;gap:8px;
  background:var(--paper);border:1px solid var(--rule);border-radius:14px;
  padding:20px 20px 18px;text-decoration:none;color:var(--body);
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.khcell:hover{border-color:var(--accent);box-shadow:0 10px 26px -14px rgba(92,16,10,.4);transform:translateY(-2px)}
.khcell:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.khcell-k{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--accent)}
.khcell h2{font-family:var(--serif);font-size:19px;line-height:1.25;color:var(--headline);margin:0}
.khcell p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0;flex:1}
.khcell-m{margin-top:4px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}

@media(max-width:899.98px){
  .khcell{padding:17px 17px 15px;border-radius:12px}
  .khcell h2{font-size:17.5px}
  .khcell p{font-size:14px}
  /* Kesan hover tak berguna pada skrin sentuh dan ia melekat selepas tap */
  .khcell:hover{transform:none;box-shadow:none;border-color:var(--rule)}
}
@media (prefers-reduced-motion:reduce){.khcell{transition:none}}
/* ============ HUJUNG PENANDA kh-khgrid ============ */

/* ============================================================
   PENANDA kh-kadimej
   Imej dalam kad hub. Markup oleh blok indeks dalam page.php, padanan imej
   oleh inc-kad-imej.php. Kad tanpa imej render macam biasa tanpa ruang kosong.
   ============================================================ */
.khcell-pic{display:block;margin:-20px -20px 14px;border-radius:14px 14px 0 0;overflow:hidden;background:var(--ground);aspect-ratio:3/2}
.khcell-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.khcell:hover .khcell-pic img{transform:scale(1.03)}

@media(max-width:899.98px){
  .khcell-pic{margin:-17px -17px 12px;border-radius:12px 12px 0 0}
  .khcell:hover .khcell-pic img{transform:none}
}
@media (prefers-reduced-motion:reduce){.khcell-pic img{transition:none}}
/* ============ HUJUNG PENANDA kh-kadimej ============ */


/* ====================================================================
   SKALA BULATAN SUDUT. Ditambah 23/10/2026.

   Sebab blok ini wujud: stylesheet ini ada DUA era. Era awal guna sudut
   bulat (99px pill, 26px, 22px, 20px). Era kedua sengaja segi-empatkan
   semula, ada komen "butang jadi blok segi empat, huruf besar, berjarak.
   Bukan pill" dan tetapkan .btn 4px, .navpill 0, .drawer 0. Hasilnya 22
   nilai border-radius berbeza merata fail dan tiada token langsung.

   Lukman minta sudut melengkung di semua tempat, 23/10/2026. Daripada
   menyunting 61 pengisytiharan satu per satu, blok ini diletak di HUJUNG
   fail supaya ia menang cascade. Nak patah balik: padam blok ini sahaja.

   Empat nilai sahaja. Jangan tambah nilai kelima tanpa sebab.
   50% dikekalkan untuk bulatan sebenar (nombor langkah, avatar, bullet). */

:root{
  --r-sm:10px;   /* input, toggle, pautan kecil, faq, linkgrid */
  --r-md:16px;   /* butang, kad, kotak kandungan */
  --r-lg:22px;   /* permukaan besar: drawer, gambar, band, panel */
  --r-pill:999px;/* lencana dan chip status sahaja, bukan butang lebar */
}

/* Butang: melengkung, bukan pill penuh. Butang lebar seperti
   "WHATSAPP KLINIK" nampak pelik bila hujungnya separuh bulatan. */
.btn,
.btn-nav,
.actionbar .btn,
.khb-send{border-radius:var(--r-md)}

/* Navigasi dan kawalan kecil */
.navpill{border-radius:var(--r-md)}
.navlinks a,
.langtoggle,
.langtoggle a,
.langtoggle b,
.burger,
.khb-grip,
.khb-lang,
.khb-grid a{border-radius:var(--r-sm)}

.navlinks .sub-menu{border-radius:var(--r-lg)}
.navlinks .sub-menu a,
.drawer .sub-menu a,
.drawer .subtoggle,
.drawer a{border-radius:var(--r-sm)}

/* Permukaan besar */
.drawer,
.heroshot,
.heroshot img,
.heroshot.has-img img,
.band,
.checker,
.infopanel,
.note,
.railcard{border-radius:var(--r-lg)}

/* Kad dan kotak kandungan */
.cardimg,
.cardimg img,
.cardimg.has-img img,
.byline,
.ctabox,
.khcell,
.khkad,
.hit,
.linklist a,
.rujukan{border-radius:var(--r-md)}

.khcell-pic{border-radius:var(--r-md) var(--r-md) 0 0}
.answerbox{border-radius:0 var(--r-md) var(--r-md) 0}

/* Elemen teks kecil */
.faq details,
.linkgrid a,
.khb-err,
.khb-f input,
.khb-f select,
.khb-f textarea{border-radius:var(--r-sm)}

/* Lencana dan chip status kekal pill */
.badge,
.skip:focus{border-radius:var(--r-pill)}

@media(max-width:899.98px){
  .khcell{border-radius:var(--r-md)}
  .khcell-pic{border-radius:var(--r-md) var(--r-md) 0 0}
}

/* 24/10/2026 - .stats asalnya flex dengan gap 44px. Di bawah 900px .split jadi
   satu lajur, jadi tiga stat itu bertindan menegak dan meninggalkan ruang kosong
   besar pada telefon. Grid auto-fit beri dua lajur pada telefon, tiga pada lebar
   penuh, tanpa mengubah rupa desktop. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:26px 30px}
.stats div span{max-width:22ch}


/* ========================================================
   PENANDA kh-paging
   Paging untuk blog. Ditambah 27/10/2026 selepas didapati 14 post tetapi
   had 12 sepage, jadi dua post tidak boleh dicapai langsung.
   Sasaran sentuh 44px pada desktop dan 42px pada telefon.
   ======================================================== */
.navigation.pagination{margin-top:36px;padding-top:26px;border-top:1px solid var(--rule)}
.navigation.pagination .nav-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.navigation.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 14px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--paper);color:var(--body);text-decoration:none;font-size:15px;font-weight:600;line-height:1}
.navigation.pagination a.page-numbers:hover{border-color:var(--accent);color:var(--deep)}
.navigation.pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:#fff}
.navigation.pagination .page-numbers.dots{border-color:transparent;background:none;min-width:22px;padding:0;color:var(--muted)}
.navigation.pagination .page-numbers:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.navigation.pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media(max-width:560px){
  .navigation.pagination{margin-top:28px;padding-top:20px}
  .navigation.pagination .nav-links{gap:6px}
  .navigation.pagination .page-numbers{min-width:42px;height:42px;padding:0 11px;font-size:14px}
}
/* ============ HUJUNG PENANDA kh-paging ============ */