:root{--navy:#510716;--navy-2:#610a1b;--blue:#9f0d2a;--blue-2:#be1436;--pale:#feeef1;--ice:#fff5f7;--ink:#330911;--muted:#77545b;--line:#eedde0;--teal:#119e95}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--ink);font-family:var(--font-geist), Arial, sans-serif;background:#fff;margin:0}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}svg{stroke-width:1.8px}.shell{width:min(1180px,100% - 44px);margin:0 auto}.topbar{color:#fff;background:linear-gradient(90deg,#4b0614,#660a1c);font-size:14px}.topbar-inner{justify-content:space-between;align-items:center;min-height:34px;display:flex}.topbar-inner span,.topbar-inner div,.topbar a{align-items:center;gap:8px;display:flex}.topbar svg{width:13px;height:13px}.topbar i{background:#ffffff38;width:1px;height:14px;margin:0 4px}.topbar button{color:#fff;background:0 0;border:0;padding:0;font-size:14px;font-weight:700}.topbar button[aria-pressed=true]{text-underline-offset:4px;text-decoration:underline;text-decoration-thickness:2px}.topbar b{opacity:.4}.header{z-index:30;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffff5;position:sticky;top:0;box-shadow:0 2px 14px #5107160d}.nav-row{align-items:center;gap:20px;min-height:82px;display:flex}.logo{flex:0 0 270px;align-items:center;gap:10px;display:flex}.logo img{object-fit:contain;width:55px;height:55px}.logo span{flex-direction:column;display:flex}.logo strong{letter-spacing:.02em;color:#930d28;font-size:27px;line-height:1}.logo small{text-transform:uppercase;color:#48262d;margin-top:5px;font-size:9px;font-weight:700;line-height:1.3}.desktop-nav{align-items:center;gap:23px;margin-left:auto;display:flex}.desktop-nav a{text-transform:uppercase;white-space:nowrap;align-items:center;gap:3px;padding:31px 0 27px;font-size:14px;font-weight:650;display:flex;position:relative}.desktop-nav a:hover,.desktop-nav a.active{color:var(--blue)}.desktop-nav a.active:after{content:"";background:var(--blue);height:2px;position:absolute;bottom:20px;left:0;right:0}.desktop-nav svg{width:11px;height:11px}.join-nav{background:var(--navy);color:#fff;text-transform:uppercase;border:0;border-radius:5px;flex:none;padding:13px 17px;font-size:14px;font-weight:800;box-shadow:0 6px 18px #51071633}.menu-toggle,.mobile-nav{display:none}.hero{border-bottom:1px solid #ebcad1;min-height:455px;position:relative;overflow:hidden}.hero-image{object-fit:cover;object-position:center;width:61%;height:100%;position:absolute;inset:0 0 0 39%}.hero-wash{background:linear-gradient(90deg,#fff 0%,#fff9fa 35%,#ffffffe8 44%,#ffffff57 62%,#0000 80%),linear-gradient(#51071608,#51071617);position:absolute;inset:0}.hero:after{content:"";opacity:.28;background-image:linear-gradient(30deg,#0000 24%,#b1123217 25% 26%,#0000 27% 74%,#b1123217 75% 76%,#0000 77%);background-size:54px 94px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,#000,#0000 50%);mask-image:linear-gradient(90deg,#000,#0000 50%)}.hero-content{z-index:2;align-items:center;min-height:455px;display:flex;position:relative}.hero-copy{width:58%;padding:48px 0 50px}.hero-kicker{text-transform:uppercase;letter-spacing:.13em;font-weight:800;color:var(--blue)!important;margin:0 0 12px!important;font-size:14px!important}.hero h1{letter-spacing:-.025em;color:#300911;max-width:650px;margin:0;font-size:clamp(40px,4vw,55px);font-weight:850;line-height:.98}.hero h2{color:#9e0d2a;margin:12px 0 0;font-size:clamp(18px,2vw,24px);font-weight:500}.hero-copy>p{color:#443034;max-width:565px;margin:18px 0 25px;font-size:18.4px;line-height:1.55}.hero-buttons{gap:12px;display:flex}.btn{border:1px solid var(--navy);border-radius:5px;justify-content:center;align-items:center;gap:10px;min-height:45px;padding:0 24px;font-size:15px;font-weight:800;display:inline-flex}.btn svg{width:16px;height:16px}.btn-primary{background:linear-gradient(135deg, var(--navy), #ad0e2e);color:#fff}.btn-outline{color:var(--navy);background:#ffffffc2}.credential-band{z-index:4;color:#fff;background:linear-gradient(90deg,#520716,#730b20,#520716);position:relative}.credential-grid{grid-template-columns:repeat(4,1fr);min-height:100px;display:grid}.credential-grid>div{grid-template-columns:54px 1fr;align-items:center;gap:14px;padding:18px 30px;display:grid}.credential-grid>div+div{border-left:1px solid #fff3}.credential-grid>div>span{border:1.5px solid #fff;border-radius:50%;place-items:center;width:48px;height:48px;display:grid}.credential-grid svg{width:29px;height:29px}.credential-grid p{gap:5px;margin:0;display:grid}.credential-grid strong{font-size:13.8px;line-height:1.35}.credential-grid small{color:#ffffffb8;font-size:12px}.section-pad{padding:48px 0 52px}.overview{background:#fff}.overview-grid{grid-template-columns:.98fr 1.02fr;gap:42px;display:grid}.section-title-row{justify-content:space-between;align-items:center;min-height:35px;display:flex}.section-title-row h2{color:#6a0d20;margin:0;font-size:18px}.section-title-row a{color:var(--blue);align-items:center;gap:5px;font-size:12px;font-weight:600;display:flex}.section-title-row svg{width:12px;height:12px}.course-feature{border:1px solid var(--line);background:#fff;border-radius:13px;grid-template-columns:43% 57%;min-height:266px;display:grid;overflow:hidden;box-shadow:0 5px 18px #51071612}.course-photo{min-height:266px;position:relative;overflow:hidden}.course-photo img{object-fit:cover;width:100%;height:100%}.course-photo:after{content:"";background:linear-gradient(#5e091a0d,#5e091a2e);position:absolute;inset:0}.date-badge{z-index:2;color:#fff;background:linear-gradient(#bf1335,#7d0b22);border-radius:8px;place-items:center;width:52px;padding:9px 4px;font-size:14px;font-weight:800;line-height:1.05;display:grid;position:absolute;top:15px;left:15px}.date-badge b{font-size:22px}.date-badge small{margin-top:3px;font-size:12px}.course-info{padding:18px 20px;position:relative}.course-code{color:var(--blue);background:#fee2e8;border-radius:5px;padding:5px 9px;font-size:12px;font-weight:800;display:inline-block}.course-info h3{margin:12px 0 10px;font-size:23px;line-height:1.02}.course-info ul{gap:6px;margin:0;padding:0;list-style:none;display:grid}.course-info li{color:#5f4147;align-items:center;gap:7px;font-size:12px;display:flex}.course-info li svg{width:13px;height:13px;color:var(--navy)}.tags{flex-wrap:wrap;gap:4px;margin-top:10px;display:flex}.tags span{color:#6a484f;background:#f8eef0;border-radius:4px;padding:4px 6px;font-size:12px}.course-actions{gap:9px;display:flex;position:absolute;bottom:14px;left:20px;right:20px}.small-btn{border:1px solid var(--blue);min-height:31px;color:var(--navy);text-transform:uppercase;background:#fff;border-radius:4px;padding:0 14px;font-size:12px;font-weight:800}.small-btn.filled{background:var(--navy);color:#fff}.service-grid{border:1px solid var(--line);background:#fff;border-radius:13px;grid-template-columns:1fr 1fr;display:grid;overflow:hidden;box-shadow:0 5px 18px #5107160d}.service-grid article{grid-template-columns:52px 1fr;align-items:start;gap:13px;min-height:132px;padding:24px 20px;display:grid}.service-grid article:nth-child(2n){border-left:1px solid var(--line)}.service-grid article:nth-child(n+3){border-top:1px solid var(--line)}.service-grid article>span{background:var(--navy);color:#fff;border-radius:50%;place-items:center;width:47px;height:47px;display:grid}.service-grid svg{width:27px;height:27px}.service-grid h3{color:#5c0b1b;margin:2px 0 7px;font-size:13.8px}.service-grid p{color:#583c42;margin:0;font-size:12px;line-height:1.5}.stats-band{background:linear-gradient(90deg,#feeff2,#fee2e8,#feeff2);border-block:1px solid #f7dce1}.stats-grid{grid-template-columns:1.1fr repeat(4,1fr);align-items:center;gap:10px;min-height:128px;display:grid}.stats-grid>h2{color:#780d22;margin:0;font-size:18px}.stat{align-items:center;gap:17px;display:flex}.stat>span{width:58px;height:58px;color:var(--blue);background:#ffffff59;border:1px solid #eba9b6;border-radius:50%;place-items:center;display:grid}.stat svg{width:32px;height:32px}.stat p{flex-direction:column;margin:0;display:flex}.stat strong{color:#960d28;font-size:24px;line-height:1}.stat b{margin-top:7px;font-size:12px}.stat small{color:var(--muted);margin-top:2px;font-size:12px}.activities{background:#fff}.activities-head{margin-bottom:20px}.activity-stage{position:relative}.activity-grid{grid-template-columns:repeat(4,1fr);gap:18px;display:grid}.activity-card{border:1px solid var(--line);background:#fff;border-radius:9px;overflow:hidden;box-shadow:0 4px 14px #5107160d}.activity-image{height:142px;position:relative;overflow:hidden}.activity-image img{object-fit:cover;width:100%;height:100%;transition:transform .3s}.activity-card:hover .activity-image img{transform:scale(1.04)}.activity-image span{background:var(--blue);color:#fff;border-radius:4px 4px 0 0;padding:5px 10px;font-size:12px;font-weight:800;position:absolute;bottom:0;left:15px}.activity-image span.teal{background:var(--teal)}.activity-info{padding:14px 15px 16px}.activity-info h3{color:#2c161a;margin:0 0 10px;font-size:14.9px}.activity-info p{color:#69484f;align-items:center;gap:6px;margin:5px 0;font-size:12px;display:flex}.activity-info p svg{width:11px;height:11px;color:var(--navy)}.activity-info a{color:var(--blue);align-items:center;gap:7px;margin-top:14px;font-size:12px;font-weight:700;display:flex}.activity-info a svg{width:11px;height:11px}.carousel-arrow{z-index:4;width:29px;height:29px;color:var(--navy);background:#fff;border:1px solid #d9bac0;border-radius:50%;place-items:center;display:grid;position:absolute;top:45%;box-shadow:0 3px 10px #5107161a}.carousel-arrow svg{width:14px;height:14px}.carousel-arrow.left{left:-38px}.carousel-arrow.right{right:-38px}.community-cta{color:#fff;background:linear-gradient(90deg,#9d0c29,#bf082d,#9d0c29);position:relative;overflow:hidden}.community-cta:before{content:"";opacity:.18;background-image:linear-gradient(30deg,#0000 24%,#fff 25% 26%,#0000 27% 74%,#fff 75% 76%,#0000 77%);background-size:50px 87px;position:absolute;inset:0}.cta-grid{grid-template-columns:78px 1fr auto;align-items:center;gap:20px;min-height:116px;display:grid;position:relative}.cta-icon{border:1px solid #fff;border-radius:50%;place-items:center;width:66px;height:66px;display:grid}.cta-icon svg{width:37px;height:37px}.cta-grid h2{margin:0 0 8px;font-size:20px}.cta-grid p{margin:0;font-size:15px}.cta-grid>button{min-height:46px;color:var(--blue);text-transform:uppercase;background:#fff;border:0;border-radius:5px;align-items:center;gap:14px;padding:0 28px;font-size:14px;font-weight:800;display:flex;box-shadow:0 8px 22px #51071633}.cta-grid>button svg{width:14px;height:14px}footer{color:#fff;background:linear-gradient(#63091b,#420612)}.footer-grid{grid-template-columns:1.45fr .95fr 1.2fr 1.25fr;gap:43px;padding:43px 0 35px;display:grid}.footer-grid>div+div{border-left:1px solid #ffffff29;padding-left:36px}.footer-grid h3{margin:0 0 14px;font-size:15px}.footer-grid p{color:#ffffffc7;margin:0 0 12px;font-size:12px;line-height:1.55}.footer-grid a,.footer-grid>div:nth-child(3)>span{align-items:center;gap:6px;margin:5px 0;font-size:12px;display:flex}.footer-grid svg{width:12px;height:12px}.socials{gap:8px;display:flex}.socials span{background:#b41232;border-radius:50%;place-items:center;width:22px;height:22px;font-size:14px;display:grid}.footer-grid form{gap:8px;display:grid}.footer-grid label{color:#8994a7;background:#fff;border-radius:5px;align-items:center;gap:8px;min-height:36px;padding:0 12px;display:flex}.footer-grid input{border:0;outline:none;width:100%;font-size:12px}.footer-grid form button{color:#fff;background:#ac1331;border:0;border-radius:5px;min-height:34px;font-size:12px;font-weight:800}.footer-bottom{color:#ffffffb3;border-top:1px solid #ffffff24;justify-content:space-between;align-items:center;min-height:45px;font-size:12px;display:flex}.footer-bottom span{align-items:center;gap:10px;display:flex}.footer-bottom i{background:#ffffff4d;width:1px;height:10px}.modal-backdrop{z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#32040db8;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.modal{background:#fff;border-radius:13px;width:min(480px,100%);padding:38px;position:relative;box-shadow:0 30px 80px #0000004d}.modal .close{background:var(--pale);width:34px;height:34px;color:var(--navy);border:0;border-radius:50%;place-items:center;display:grid;position:absolute;top:15px;right:15px}.modal .close svg{width:17px}.modal-kicker{color:var(--blue);text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px;font-size:12px;font-weight:800;display:block}.modal h2{color:var(--navy);margin:0;font-size:31px}.modal form>p,.success p{color:var(--muted);font-size:13.8px}.modal label{color:var(--navy);gap:6px;margin-top:15px;font-size:14px;font-weight:700;display:grid}.modal input,.modal select{border:1px solid var(--line);width:100%;min-height:42px;color:var(--ink);background:#fff;border-radius:5px;outline:none;padding:0 12px}.modal input:focus,.modal select:focus{border-color:var(--blue);box-shadow:0 0 0 3px #9f0d2a17}.modal form .btn{border:0;width:100%;margin-top:21px}.modal small{text-align:center;color:#8490a3;margin-top:11px;font-size:12px;display:block}.success{text-align:center;padding:22px 0 8px}.success>span{width:58px;height:58px;color:var(--blue);background:#fee3e8;border-radius:50%;place-items:center;margin:0 auto 20px;display:grid}.success .btn{margin-top:14px}@media (max-width:1180px){.desktop-nav{gap:12px}.desktop-nav a{font-size:12px}.logo{flex-basis:235px}.logo strong{font-size:24px}.carousel-arrow.left{left:-12px}.carousel-arrow.right{right:-12px}}@media (max-width:960px){.desktop-nav,.join-nav{display:none}.menu-toggle{color:var(--navy);background:0 0;border:0;place-items:center;margin-left:auto;display:grid}.mobile-nav{border-top:1px solid var(--line);padding:8px 22px 22px;display:grid}.mobile-nav a{border-bottom:1px solid var(--line);padding:12px 0;font-size:13.8px;font-weight:700}.mobile-nav button{background:var(--navy);color:#fff;border:0;border-radius:5px;min-height:42px;margin-top:14px;font-size:15px;font-weight:800}.hero-image{width:70%;left:30%}.hero-copy{width:70%}.credential-grid{grid-template-columns:1fr 1fr}.credential-grid>div:nth-child(3){border-top:1px solid #fff3;border-left:0}.credential-grid>div:nth-child(4){border-top:1px solid #fff3}.overview-grid{grid-template-columns:1fr}.course-feature{grid-template-columns:38% 62%}.stats-grid{grid-template-columns:1fr 1fr;padding:28px 0}.stats-grid>h2{grid-column:span 2}.activity-grid{grid-template-columns:1fr 1fr}.cta-grid{grid-template-columns:70px 1fr;padding:24px 0}.cta-grid>button{grid-column:2;justify-self:start}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:nth-child(3){border-left:0}.footer-grid>div:nth-child(n+3){border-top:1px solid #ffffff29;padding-top:28px}}@media (max-width:640px){.shell{width:calc(100% - 30px)}.topbar-inner{justify-content:center}.topbar-inner>span{display:none}.topbar-inner div{justify-content:space-between;width:100%}.nav-row{min-height:69px}.logo{flex-basis:auto}.logo img{width:43px;height:43px}.logo strong{font-size:21px}.logo small{font-size:9px}.hero{min-height:590px}.hero-image{object-position:center 33%;width:100%;height:46%;inset:0}.hero-wash{background:linear-gradient(#0000 0,#ffffff1a 34%,#fff 47% 100%)}.hero-content{align-items:flex-end;min-height:590px}.hero-copy{width:100%;padding:265px 0 44px}.hero-kicker{margin-bottom:8px!important}.hero h1{font-size:37px}.hero h2{font-size:19.5px;line-height:1.25}.hero-copy>p{font-size:14.9px}.hero-buttons{grid-template-columns:1fr 1fr;display:grid}.btn{padding-inline:10px;font-size:12px}.credential-grid{grid-template-columns:1fr}.credential-grid>div{min-height:83px;padding:14px 16px}.credential-grid>div+div{border-top:1px solid #fff3;border-left:0}.section-pad{padding:38px 0 42px}.section-title-row h2{font-size:18.4px}.course-feature{grid-template-columns:1fr}.course-photo{min-height:190px}.course-info{min-height:285px}.service-grid{grid-template-columns:1fr}.service-grid article:nth-child(2n){border-left:0}.service-grid article+article{border-top:1px solid var(--line)}.stats-grid{grid-template-columns:1fr}.stats-grid>h2{grid-column:auto}.stat{border-bottom:1px solid #eed0d6;min-height:70px}.activity-grid{grid-template-columns:1fr}.activity-card:nth-child(n+3){display:none}.activity-image{height:190px}.carousel-arrow{top:48%}.carousel-arrow.left{left:-9px}.carousel-arrow.right{right:-9px}.cta-grid{grid-template-columns:58px 1fr;gap:13px}.cta-icon{width:54px;height:54px}.cta-grid h2{font-size:17.2px}.cta-grid p{font-size:12px}.cta-grid>button{grid-column:span 2;justify-content:center;justify-self:stretch}.footer-grid{grid-template-columns:1fr;gap:28px}.footer-grid>div+div{border-top:1px solid #ffffff29;border-left:0;padding-top:25px;padding-left:0}.footer-bottom{flex-direction:column;align-items:flex-start;gap:8px;padding:16px 0}.modal{padding:35px 22px 23px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.activity-image img{transition:none}}

/* ============================================================
   MADOCS 2.0 — komponen tambahan (halaman dalaman)
   Ditambah di atas sistem reka bentuk asal (base.css).
   ============================================================ */

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--blue-2);outline-offset:2px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:var(--navy);padding:12px 18px;border-radius:0 0 6px 0;font-size:13.8px;font-weight:800}
.skip-link:focus{left:0}

/* ---------- sepanduk halaman ---------- */
.page-hero{color:#fff;background:linear-gradient(90deg,#520716,#730b20,#520716);position:relative;overflow:hidden}
.page-hero:before{content:"";position:absolute;inset:0;opacity:.16;background-image:linear-gradient(30deg,#0000 24%,#fff 25% 26%,#0000 27% 74%,#fff 75% 76%,#0000 77%);background-size:50px 87px}
.page-hero>.shell{padding:40px 0 44px;position:relative;z-index:2}
.crumbs{align-items:center;gap:9px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#ffffffb0;display:flex;flex-wrap:wrap}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs svg{width:11px;height:11px;opacity:.7}
.page-hero h1{letter-spacing:-.02em;margin:14px 0 0;font-size:clamp(26px,3.3vw,40px);line-height:1.06}
.page-hero p{color:#ffffffd9;max-width:790px;margin:13px 0 0;font-size:14.4px;line-height:1.65}
.page-hero .hero-buttons{margin-top:22px}

/* ---------- susun atur ---------- */
.content-wrap{padding:42px 0 54px}
.split{grid-template-columns:minmax(0,1fr) 322px;gap:36px;align-items:start;display:grid}
.split.lebar{grid-template-columns:minmax(0,1fr)}
.card{border:1px solid var(--line);background:#fff;border-radius:13px;padding:26px 28px;box-shadow:0 5px 18px #5107160d}
.card+.card{margin-top:20px}
.card>h2{color:#6a0d20;margin:0 0 13px;font-size:18px}
.card>h2:not(:first-child),.card>h3:not(:first-child){margin-top:26px}
.card h3{color:#5c0b1b;margin:20px 0 8px;font-size:14.9px}
.card h4{color:#5c0b1b;margin:16px 0 6px;font-size:13.8px}
.card>p:first-of-type{margin-top:0}

/* ---------- teks panjang ---------- */
.prose{color:#58353c;font-size:14.4px;line-height:1.78}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 14px;padding-left:20px}
.prose li{margin:0 0 7px}
.prose a{color:var(--blue);text-decoration:underline}
.prose strong{color:#360f17}
.prose blockquote{border-left:3px solid var(--blue);background:var(--ice);margin:0 0 14px;padding:14px 18px;border-radius:0 8px 8px 0}
.nota-isi{color:#6a788e;font-size:15px;font-style:italic}

/* ---------- grid kad umum ---------- */
.grid-2{grid-template-columns:1fr 1fr;gap:18px;display:grid}
.grid-3{grid-template-columns:repeat(3,1fr);gap:18px;display:grid}
.grid-4{grid-template-columns:repeat(4,1fr);gap:18px;display:grid}
.tile{border:1px solid var(--line);background:#fff;border-radius:13px;padding:22px 22px 24px;box-shadow:0 5px 18px #5107160d}
.tile>span.ikon{background:var(--navy);color:#fff;border-radius:50%;place-items:center;width:44px;height:44px;display:grid;margin-bottom:14px}
.tile>span.ikon svg{width:25px;height:25px}
.tile h3{color:#5c0b1b;margin:0 0 8px;font-size:14.9px}
.tile p{color:#583c42;margin:0;font-size:14px;line-height:1.6}
.tile ul{margin:10px 0 0;padding-left:17px;color:#583c42;font-size:14px;line-height:1.65}
.tile a.lebih{color:var(--blue);align-items:center;gap:6px;margin-top:12px;font-size:12px;font-weight:800;text-transform:uppercase;display:flex}
.tile a.lebih svg{width:12px;height:12px}

/* ---------- senarai kandungan (berita, aktiviti, sumber) ---------- */
.listing{display:grid;gap:18px}
.item{border:1px solid var(--line);background:#fff;border-radius:13px;grid-template-columns:264px minmax(0,1fr);display:grid;overflow:hidden;box-shadow:0 5px 18px #5107160d}
.item.no-photo{grid-template-columns:1fr}
.item-photo{min-height:186px;position:relative;overflow:hidden;background:var(--pale)}
.item-photo img{object-fit:cover;width:100%;height:100%}
.item-body{padding:20px 24px 22px}
.item-body h3{margin:8px 0 9px;font-size:19px;line-height:1.15;color:#360f17}
.item-body h3 a:hover{color:var(--blue)}
.item-meta{flex-wrap:wrap;gap:14px;display:flex}
.item-meta span,.item-meta time{color:#7f5c63;align-items:center;gap:6px;font-size:12px;display:flex}
.item-meta svg{width:12px;height:12px;color:var(--navy)}
.item-body p{color:#583c42;margin:10px 0 0;font-size:15px;line-height:1.65}
.item-body .lebih{color:var(--blue);align-items:center;gap:7px;margin-top:14px;font-size:12px;font-weight:800;text-transform:uppercase;display:flex}
.item-body .lebih svg{width:12px;height:12px}

/* ---------- status / tag ---------- */
.badge{background:#fee2e8;color:var(--blue);border-radius:5px;padding:5px 9px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;display:inline-block}
.badge.open{background:#dcf6ef;color:#0a7a68}
.badge.limited{background:#fff1d9;color:#9a6200}
.badge.closed,.badge.done{background:#f4ecee;color:#7f5c63}
.badge.member{background:#fae1e6;color:#a3364c}
.chips{flex-wrap:wrap;gap:6px;display:flex;margin:12px 0 0}
.chips span{background:#f8eef0;color:#6a484f;border-radius:4px;padding:5px 8px;font-size:12px}

/* ---------- jadual ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
table.data th,table.data td{border-bottom:1px solid var(--line);text-align:left;padding:12px 14px;vertical-align:top}
table.data thead th{color:#6a0d20;background:var(--ice);font-size:13px;text-transform:uppercase;letter-spacing:.06em}
table.data tbody tr:hover{background:#fffafb}
table.data td strong{color:#360f17}

/* ---------- senarai fakta (profil kursus) ---------- */
.facts{border:1px solid var(--line);border-radius:11px;overflow:hidden}
.facts div{border-bottom:1px solid var(--line);grid-template-columns:190px minmax(0,1fr);display:grid}
.facts div:last-child{border-bottom:0}
.facts dt,.facts .k{color:#7f5c63;background:var(--ice);margin:0;padding:11px 16px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.facts dd,.facts .v{margin:0;padding:11px 16px;font-size:15px;line-height:1.6}

/* ---------- sidebar ---------- */
.side .card{padding:22px 24px}
.side .card h3{margin-top:0}
.side-nav{display:grid;gap:2px;margin-top:4px}
.side-nav a{border-left:2px solid transparent;color:#58353c;padding:9px 12px;font-size:15px;font-weight:650;border-radius:0 6px 6px 0}
.side-nav a:hover{background:var(--ice);color:var(--blue)}
.side-nav a.aktif{background:var(--pale);border-left-color:var(--blue);color:var(--blue)}
.btn-blok{border:1px solid var(--navy);background:var(--navy);color:#fff;border-radius:5px;justify-content:center;align-items:center;gap:9px;min-height:42px;padding:0 18px;font-size:14px;font-weight:800;text-transform:uppercase;display:flex;width:100%}
.btn-blok.ghost{background:#fff;color:var(--navy)}
.btn-blok svg{width:14px;height:14px}
.btn-blok+.btn-blok{margin-top:9px}

/* ---------- FAQ ---------- */
.faq{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#fff}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;color:#360f17;justify-content:space-between;align-items:center;gap:14px;padding:16px 20px;font-size:13.8px;font-weight:700;display:flex;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--blue);flex:none;font-size:19.5px;font-weight:800;line-height:1}
.faq details[open] summary:after{content:"–"}
.faq details[open] summary{background:var(--ice)}
.faq .jawapan{border-top:1px solid var(--line);padding:16px 20px 18px;color:#583c42;font-size:16px;line-height:1.75}
.faq .jawapan p{margin:0 0 10px}
.faq .jawapan p:last-child{margin:0}

/* ---------- borang ---------- */
.form-grid{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.form-grid .penuh{grid-column:1 / -1}
.field{display:grid;gap:6px}
.field>label{color:var(--navy);font-size:14px;font-weight:800}
.field .hint{color:#7c8798;font-size:12px}
.field input,.field select,.field textarea{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:5px;width:100%;min-height:44px;padding:11px 13px;font-size:13.8px;outline:none}
.field textarea{min-height:132px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px #9f0d2a17}
.field .pilihan{align-items:flex-start;gap:9px;display:flex;font-size:15px;line-height:1.6;color:#58353c}
.field .pilihan input{width:auto;min-height:auto;margin-top:2px}
.form-note{color:#6a788e;background:var(--ice);border:1px solid var(--line);border-radius:8px;margin:0 0 20px;padding:14px 16px;font-size:14px;line-height:1.65}
.form-note b{color:#360f17}
.btn-hantar{border:0;background:linear-gradient(135deg,var(--navy),#ad0e2e);color:#fff;border-radius:5px;justify-content:center;align-items:center;gap:10px;min-height:46px;padding:0 26px;font-size:15px;font-weight:800;text-transform:uppercase;display:inline-flex;box-shadow:0 8px 22px #51071626}
.btn-hantar svg{width:15px;height:15px}

/* ---------- carian ---------- */
.search-bar{border:1px solid var(--line);background:#fff;border-radius:11px;align-items:center;gap:12px;padding:12px 16px;display:flex;box-shadow:0 5px 18px #5107160d}
.search-bar svg{width:18px;height:18px;color:var(--navy);flex:none}
.search-bar input{border:0;outline:none;flex:1;min-height:34px;font-size:14.9px}
.hasil{color:#6a788e;margin:16px 0 18px;font-size:14px}
mark{background:#fff2a8;padding:0 2px;border-radius:3px}

/* ---------- keadaan kosong ---------- */
.kosong{border:1px dashed #e7c4cb;background:var(--ice);border-radius:13px;text-align:center;padding:46px 26px}
.kosong span.ikon{background:#fff;color:var(--blue);border:1px solid #e7c4cb;border-radius:50%;place-items:center;width:58px;height:58px;margin:0 auto 16px;display:grid}
.kosong span.ikon svg{width:27px;height:27px}
.kosong h3{color:#6a0d20;margin:0 0 8px;font-size:17.2px}
.kosong p{color:#7f5c63;max-width:520px;margin:0 auto;font-size:16px;line-height:1.7}

/* ---------- garis masa ---------- */
.timeline{border-left:2px solid var(--line);margin:8px 0 0 6px;padding:0 0 0 22px;display:grid;gap:20px}
.timeline>div{position:relative}
.timeline>div:before{content:"";background:var(--blue);border:3px solid #fff;border-radius:50%;width:11px;height:11px;position:absolute;top:4px;left:-29px;box-shadow:0 0 0 1px var(--line)}
.timeline time{color:var(--blue);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.timeline strong{color:#360f17;margin:4px 0 3px;font-size:13.8px;display:block}
.timeline p{color:#6e4c53;margin:0;font-size:14px;line-height:1.65}

/* ---------- petikan pengesahan ---------- */
.pengesahan{background:#fff8e7;border:1px solid #f0dba6;color:#6b4d00;border-radius:11px;margin-bottom:20px;padding:15px 18px;font-size:14px;line-height:1.65}
.pengesahan b{color:#4a3400}

/* ---------- responsif ---------- */
@media (max-width:960px){
  .split{grid-template-columns:1fr}
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
  .item{grid-template-columns:1fr}
  .item-photo{min-height:200px}
  .facts div{grid-template-columns:150px minmax(0,1fr)}
}
@media (max-width:640px){
  .content-wrap{padding:30px 0 42px}
  .card{padding:22px 18px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .facts div{grid-template-columns:1fr}
  .facts dt,.facts .k{border-bottom:1px solid var(--line)}
  .page-hero>.shell{padding:30px 0 34px}
  .timeline{margin-left:2px;padding-left:18px}
  .timeline>div:before{left:-25px}
}

/* Label pada imej yang masih ilustrasi (belum gambar sebenar) — kawal melalui data/site.json → gambar_ilustrasi */
.chip-illustrasi{position:absolute;right:10px;bottom:10px;z-index:3;background:#ffffffe8;color:#510716;border:1px solid #51071633;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.activity-image span.chip-illustrasi,.course-photo span.chip-illustrasi,.item-photo span.chip-illustrasi{left:auto;right:10px;bottom:10px;background:#ffffffe8;color:#510716;border-radius:999px;padding:3px 9px;font-size:12px}
.hero .chip-illustrasi{right:16px;bottom:16px;font-size:14px}
@media (max-width:640px){.hero .chip-illustrasi{top:12px;bottom:auto;right:12px}}

/* Pepijat: media query .mobile-nav{display:grid} mengalahkan atribut [hidden], jadi menu mudah alih terpaksa
   ditutup secara manual. Peraturan ini memulihkan kelakuan togol dalam app.js. */
.mobile-nav[hidden]{display:none!important}

/* Navigasi: cegah limpahan mendatar antara 961px dan ~1340px.
   Teks nav yang lebih besar (kebolehbacaan) menyebabkan menu + butang melebihi lebar shell,
   jadi jarak dan saiz dikecilkan secara berperingkat sebelum menu mudah alih mengambil alih. */
.nav-row{flex-wrap:nowrap}
.logo{min-width:0}
.desktop-nav{flex:0 0 auto;min-width:0}
/* Shell maksimum 1180px, jadi bar navigasi mesti muat dalam 1180px pada SEMUA lebar skrin
   (bukan hanya pada skrin sempit) — jika tidak, kandungan melimpah keluar shell. */
.logo{flex:0 0 240px}
.logo strong{font-size:25px}
.desktop-nav{gap:11px}
.desktop-nav a{font-size:13.8px;padding:31px 0 27px}
.join-nav{padding:12px 13px;font-size:13.8px}
.tukar-bahasa{padding:8px 10px;font-size:16px;margin-left:9px}
/* Lapan pautan nav + logo + butang tidak lagi muat antara 961px dan 1180px walaupun dikecilkan —
   jadi menu mudah alih mengambil alih lebih awal daripada 960px (nilai dalam base.css). */
@media (max-width:1240px){
  .desktop-nav,.join-nav{display:none}
  /* pautan bahasa di sebelah butang menu, kedua-duanya di kanan (elak dua 'margin-left:auto' kongsi ruang) */
  .tukar-bahasa{order:2;margin-left:auto}
  .menu-toggle{color:var(--navy);background:0 0;border:0;place-items:center;margin-left:10px;display:grid;order:3}
  .mobile-nav{border-top:1px solid var(--line);padding:8px 22px 22px}
  .mobile-nav a{border-bottom:1px solid var(--line);padding:12px 0;font-size:17.2px;font-weight:700;display:block}
  .mobile-nav button{background:var(--navy);color:#fff;border:0;border-radius:5px;width:100%;min-height:44px;margin-top:14px;font-size:14.9px;font-weight:800}
  .logo{flex:0 1 250px}
  .logo strong{font-size:25px}
}

/* Pautan tukar bahasa (BM/EN) dalam bar navigasi */
.tukar-bahasa{flex:none;border:1px solid var(--navy);color:var(--navy);background:#fff;border-radius:5px;padding:9px 11px;font-size:13.8px;font-weight:800;letter-spacing:.06em;margin-left:10px}
.tukar-bahasa:hover{background:var(--navy);color:#fff}
@media (max-width:1240px){.tukar-bahasa{margin-left:auto;padding:8px 10px}}

/* ============================================================================
   Lapisan gerak + kemasan UI (2026-10-16)
   Prinsip: gerak sebagai nisbah isyarat — mengesahkan tindakan, menunjukkan
   kesinambungan antara halaman, tidak menangguhkan pengguna. Semua gerakan
   dimatikan apabila pengguna menetapkan prefers-reduced-motion: reduce.
   ============================================================================ */
:root{
  --r-sm:8px;--r-md:12px;--r-lg:18px;
  --sh-1:0 1px 2px #5107160f,0 2px 8px #5107160f;
  --sh-2:0 6px 18px #51071614,0 2px 6px #5107160d;
  --sh-3:0 18px 44px #51071621,0 6px 14px #51071614;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-1:.16s;--dur-2:.28s;--dur-3:.5s;
}

/* --- peralihan antara halaman (View Transitions API; pelayar lama abaikan) --- */
@view-transition{navigation:auto}
@keyframes vtKeluar{to{opacity:0;transform:translateY(-5px)}}
@keyframes vtMasuk{from{opacity:0;transform:translateY(7px)}}
::view-transition-old(root){animation:vtKeluar .19s var(--ease) both}
::view-transition-new(root){animation:vtMasuk .26s var(--ease-out) both}

/* --- tindak balas klik: butang, pautan, kad --- */
.btn,.small-btn,.join-nav,.tukar-bahasa,.cta-grid>button,.footer-grid form button,.mobile-nav button{
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),background-color var(--dur-1) linear,color var(--dur-1) linear;
}
.btn:hover,.small-btn:hover,.cta-grid>button:hover,.footer-grid form button:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn:active,.small-btn:active,.join-nav:active,.tukar-bahasa:active,.cta-grid>button:active,.footer-grid form button:active,.mobile-nav button:active{transform:translateY(1px) scale(.985);box-shadow:var(--sh-1);transition-duration:.06s}

/* --- fokus papan kekunci yang jelas (aksesibiliti) --- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid #9f0d2a59;outline-offset:2px;border-radius:4px;
}

/* --- kad: naik sedikit pada hover --- */
.course-feature,.activity-card,.item,.service-grid,.stats-grid,.card,.tile{
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) linear;
}
.course-feature{box-shadow:var(--sh-1)}
.activity-card,.item{box-shadow:var(--sh-1)}
@media (hover:hover){
  .course-feature:hover,.activity-card:hover,.item:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:#eac5cc}
  .activity-card:hover .activity-image img{transform:scale(1.05)}
}

/* --- pengepala mengecil sedikit selepas skrol --- */
.header{transition:box-shadow var(--dur-2) var(--ease)}
.header.kompak .nav-row{min-height:64px}
.header.kompak{box-shadow:0 6px 20px #51071614}

/* --- kemunculan lembut semasa skrol --- */
.mula{opacity:0;transform:translateY(16px)}
.muncul{opacity:1;transform:none;transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}

/* --- pengguna yang minta kurang gerakan: matikan semuanya --- */
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .mula,.muncul{opacity:1;transform:none;transition:none}
  .btn:hover,.small-btn:hover,.cta-grid>button:hover,.footer-grid form button:hover,
  .course-feature:hover,.activity-card:hover,.item:hover{transform:none}
  .btn:active,.small-btn:active,.join-nav:active,.tukar-bahasa:active,.mobile-nav button:active{transform:none}
}


/* ============================================================================
   GAYA A — "Lapang & tenang" (dipilih Doc 2026-10-16; rujukan: Stripe/Linear)
   Ruang lega, garis rambut nipis, tajuk berat sederhana, bayang hampir tiada.
   Blok ini SENGAJA tidak diskalakan oleh skala_fon() dalam build.py — semua
   saiz di bawah ialah nilai akhir. Ia ditulis selepas base.css supaya menang.
   ============================================================================ */
:root{
  --g-ink:#380d16; --g-teks:#6a474e; --g-muted:#7e5c63; --g-line:#f0e7e9;
  --g-permukaan:#fcf7f8; --g-biru:#bf1335; --g-biru-lembut:#feeff2;
  --g-r:14px; --g-r-kecil:10px; --g-r-besar:18px;
}
body{font-size:16px;line-height:1.6;color:var(--g-teks);background:#fff}
h1,h2,h3,h4{color:var(--g-ink);letter-spacing:-.018em}
p{color:var(--g-teks)}

/* --- pengepala --- */
.topbar{background:#38050f;font-size:12.5px}
.topbar-inner{min-height:38px}
.header{border-bottom:1px solid var(--g-line);box-shadow:none;background:#ffffffee}
.nav-row{min-height:76px}
.logo strong{font-size:24px;font-weight:700;color:var(--g-ink);letter-spacing:-.01em}
.logo small{font-size:9.5px;color:var(--g-muted)}
.desktop-nav a{font-size:14px;text-transform:none;font-weight:550;letter-spacing:0;padding:26px 0 23px;color:#502e35}
.desktop-nav a:hover,.desktop-nav a.active{color:var(--g-biru)}
.desktop-nav a.active:after{bottom:16px;background:var(--g-biru);height:2px;border-radius:2px}
.join-nav{background:var(--g-ink);border-radius:var(--g-r-kecil);padding:12px 18px;font-size:13.5px;text-transform:none;font-weight:600;letter-spacing:0;box-shadow:none}
.join-nav:hover{background:#571522}
.menu-toggle{color:var(--g-ink)}
.tukar-bahasa{border:1px solid var(--g-line);color:var(--g-ink);border-radius:var(--g-r-kecil);font-size:13px;font-weight:600;letter-spacing:.02em;padding:9px 12px}
.mobile-nav a{font-size:16px;font-weight:550}
.mobile-nav button{background:var(--g-ink);border-radius:var(--g-r-kecil);font-size:15px;text-transform:none;font-weight:600}

/* --- tajuk halaman (page hero) --- */
.page-hero{padding:44px 0 40px;background:linear-gradient(#fff9fa,#fff)}
.page-hero h1{font-size:clamp(30px,3.4vw,42px);font-weight:600;line-height:1.12;letter-spacing:-.022em}
.page-hero p{font-size:17px;font-weight:300;color:var(--g-teks);max-width:64ch}
.crumbs{font-size:13px;color:var(--g-muted)}
.hero-kicker{font-size:12px;letter-spacing:.14em;color:var(--g-biru)!important;font-weight:700!important}

/* --- hero laman utama --- */
.hero{min-height:520px;border-bottom:1px solid var(--g-line)}
.hero-content{min-height:520px}
.hero h1{font-size:clamp(34px,4.2vw,52px);font-weight:600;line-height:1.06;letter-spacing:-.026em;color:var(--g-ink)}
.hero h2{font-size:clamp(17px,1.8vw,21px);font-weight:400;color:#613f46;margin-top:14px;line-height:1.5}
.hero-copy>p{font-size:16.5px;font-weight:300;line-height:1.68;color:var(--g-teks);max-width:60ch}
.hero-copy{width:56%;padding:56px 0}
.hero-wash{background:linear-gradient(90deg,#fff 0%,#fffdfd 38%,#ffffffcc 52%,#ffffff40 76%,#0000 92%)}

/* --- butang --- */
.btn{border-radius:var(--g-r-kecil);min-height:50px;padding:0 24px;font-size:14px;font-weight:600;text-transform:none;letter-spacing:0;border:1px solid transparent}
.btn-primary{background:var(--g-ink);color:#fff;background-image:none}
.btn-primary:hover{background:#571522}
.btn-outline{background:#fff;color:var(--g-ink);border:1px solid #ebd8dc}
.small-btn{border-radius:var(--g-r-kecil);min-height:38px;padding:0 16px;font-size:13px;font-weight:600;text-transform:none;letter-spacing:0;border:1px solid #ebd8dc}
.small-btn.filled{background:var(--g-ink);border-color:var(--g-ink)}
.cta-grid>button,.footer-grid form button{border-radius:var(--g-r-kecil);font-size:13.5px;text-transform:none;font-weight:600;letter-spacing:0;box-shadow:none}

/* --- jalur kelayakan & statistik: cerah, bukan gelap --- */
.credential-band{background:var(--g-permukaan);color:var(--g-ink);border-block:1px solid var(--g-line)}
.credential-grid>div{border-left:1px solid var(--g-line)!important;padding:22px 26px;min-height:104px}
.credential-grid>div:first-child{border-left:0!important}
.credential-grid>div>span{width:44px;height:44px;border:1px solid #edd0d6;color:var(--g-biru);background:#fff}
.credential-grid svg{width:22px;height:22px}
.credential-grid strong{font-size:14px;font-weight:600}
.credential-grid small{font-size:12px;color:var(--g-muted)}
.stats-band{background:#fff;border-block:1px solid var(--g-line);background-image:none}
.stats-grid{min-height:118px}
.stats-grid>h2{font-size:20px;font-weight:600;color:var(--g-ink)}
.stat>span{width:50px;height:50px;border:1px solid #edd0d6;background:#fff;color:var(--g-biru)}
.stat strong{font-size:22px;font-weight:600;color:var(--g-ink)}
.stat b{font-size:13px;font-weight:600}
.stat small{font-size:12px}

/* --- seksyen --- */
.section-pad{padding:64px 0 70px}
.section-title-row{min-height:auto;margin-bottom:6px}
.section-title-row h2{font-size:24px;font-weight:600;text-transform:none;letter-spacing:-.02em;color:var(--g-ink)}
.section-title-row a{font-size:13.5px;font-weight:600;letter-spacing:0}
.overview-grid{gap:48px}

/* --- kad: garis rambut, sudut sederhana, tiada bayang --- */
.course-feature,.activity-card,.item,.card,.tile,.service-grid,.kosong{
  border:1px solid var(--g-line);border-radius:var(--g-r-besar);box-shadow:none;background:#fff;overflow:hidden;
}
.course-feature{min-height:280px}
.course-info{padding:24px 26px}
.course-info h3{font-size:22px;font-weight:600;letter-spacing:-.02em}
.course-info li{font-size:13.5px;color:var(--g-teks);gap:8px}
.course-code{font-size:11.5px;font-weight:700;letter-spacing:.06em;background:var(--g-biru-lembut);color:var(--g-biru);border-radius:999px;padding:5px 11px;text-transform:uppercase}
.tags span{font-size:12px;background:#faf2f4;color:var(--g-muted);border-radius:999px;padding:5px 10px}
.activity-image{height:168px}
.activity-image span,.badge{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:5px 11px;background:#fff;color:var(--g-ink);border:1px solid var(--g-line)}
.activity-image span.teal{background:#e8f6f4;color:#0f766e;border-color:#cfe9e5}
.activity-info{padding:18px 20px 20px}
.activity-info h3{font-size:16.5px;font-weight:600}
.activity-info p{font-size:13px;color:var(--g-muted)}
.activity-info a,.item .lebih{font-size:13px;font-weight:600}
.item-body{padding:22px 24px}
.item h3{font-size:18px;font-weight:600}
.item p{font-size:14.5px}
.course-photo:after{background:linear-gradient(#5e091a08,#5e091a1f)}
.date-badge{border-radius:var(--g-r-kecil);background:var(--g-ink);background-image:none;font-weight:600;font-size:12px}
.date-badge b{font-size:20px;font-weight:600}

/* --- ikon bulat perkhidmatan --- */
.service-grid article{padding:26px 24px;min-height:140px}
.service-grid article>span{background:var(--g-biru-lembut);color:var(--g-biru);width:46px;height:46px}
.service-grid h3{font-size:16px;font-weight:600;letter-spacing:-.01em}
.service-grid p{font-size:14px;line-height:1.6}

/* --- seruan komuniti --- */
.community-cta{background:var(--g-ink);background-image:none}
.community-cta:before{opacity:.07}
.cta-grid{min-height:132px}
.cta-grid h2{font-size:22px;font-weight:600}
.cta-grid p{font-size:15px;color:#edcad1}
.cta-icon{width:60px;height:60px;border-color:#ffffff59}
.cta-grid>button{min-height:48px;color:var(--g-ink);background:#fff;font-weight:600}

/* --- borang & kad bersisi --- */
.card{padding:26px 28px}
.facts dt{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--g-muted);font-weight:700}
.facts dd{font-size:15.5px;color:var(--g-ink)}
.prose h2{font-size:20px;font-weight:600;margin:26px 0 10px}
.prose p,.prose li{font-size:15.5px;line-height:1.7;color:var(--g-teks)}
.nota-isi{font-size:13.5px;background:#fdfafb;border:1px solid var(--g-line);border-left:3px solid var(--g-biru);border-radius:var(--g-r-kecil);padding:12px 14px;color:var(--g-muted)}
.pengesahan{font-size:14px;background:#fff9ec;border:1px solid #f0e2c4;border-radius:var(--g-r-kecil);padding:14px 16px}

/* --- borang input --- */
input,select,textarea{border-radius:var(--g-r-kecil)!important;border:1px solid #ebd8dc!important;min-height:46px;font-size:15px}
.modal{border-radius:var(--g-r-besar)}
.modal h2{font-size:26px;font-weight:600}
.modal label{font-size:13px;font-weight:600}
.modal form>p,.success p{font-size:14.5px}

/* --- jadual / senarai carian --- */
.hasil-info,#hasil-info{font-size:14.5px;color:var(--g-muted)}

/* --- kaki --- */
footer{background:#2e050d;background-image:none}
.footer-grid{gap:48px;padding:56px 0 40px}
.footer-grid h3{font-size:12px;letter-spacing:.14em;font-weight:700;color:#c4959e}
.footer-grid p,.footer-grid a,.footer-grid>div:nth-child(3)>span{font-size:14px;line-height:1.65;color:#edcad1}
.footer-grid label{border-radius:var(--g-r-kecil);min-height:44px}
.footer-grid input{font-size:14px}
.footer-bottom{font-size:12.5px;color:#be919a}

@media (max-width:1240px){
  .topbar-inner{min-height:36px}
  .nav-row{min-height:66px}
  .hero-copy{width:100%}
}
@media (max-width:640px){
  .section-pad{padding:44px 0 48px}
  .hero{min-height:auto}
  .hero-content{min-height:auto}
  .hero-copy{padding:0 0 34px}
  .page-hero{padding:30px 0 26px}
  .card{padding:20px 18px}
  .footer-grid{padding:40px 0 30px}
}

/* --- GAYA A: komponen yang tinggal (tile, keadaan kosong, garis masa, susun atur) --- */
.tile{border:1px solid var(--g-line);border-radius:var(--g-r-besar);box-shadow:none;padding:24px 24px 26px}
.tile>span.ikon{background:var(--g-biru-lembut);color:var(--g-biru);border:1px solid #fadae1;width:46px;height:46px}
.tile>span.ikon svg{width:22px;height:22px}
.tile h3{font-size:16.5px;font-weight:600;color:var(--g-ink);letter-spacing:-.01em}
.tile p{font-size:14.5px;line-height:1.65;color:var(--g-teks)}
.grid-3,.grid-4{gap:20px}
.kosong{border:1px solid var(--g-line);background:#fefbfc;border-radius:var(--g-r-besar);padding:54px 28px}
.kosong span.ikon{width:56px;height:56px;border-color:#fadae1;color:var(--g-biru);background:#fff}
.kosong h3{font-size:19px;font-weight:600;color:var(--g-ink)}
.kosong p{font-size:15px;line-height:1.7;color:var(--g-teks)}
.timeline{border-left:1px solid var(--g-line);padding-left:24px;gap:24px}
.timeline>div:before{background:var(--g-biru);box-shadow:0 0 0 1px var(--g-line)}
.timeline time{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--g-biru)}
.timeline strong{font-size:15px;font-weight:600;color:var(--g-ink);margin:5px 0 4px}
.timeline p{font-size:14.5px;line-height:1.65;color:var(--g-teks)}
.side-nav a{font-size:14.5px;padding:11px 0}
.listing{gap:20px}
.item-photo{min-height:200px}
.split{gap:44px}
.faq>div,.faq details{border-bottom:1px solid var(--g-line)}
.faq h3,.faq summary{font-size:16.5px;font-weight:600;color:var(--g-ink)}
.faq p{font-size:15px;line-height:1.7}
.page-hero+.content-wrap,.page-hero+.section-pad{padding-top:46px}
.content-wrap{padding:56px 0 64px}
.carian-medan input{font-size:16px}
@media (max-width:640px){
  .content-wrap{padding:34px 0 42px}
  .page-hero+.content-wrap,.page-hero+.section-pad{padding-top:28px}
  .tile{padding:18px 18px 20px}
  .kosong{padding:38px 20px}
}

/* --- penalaan mudah alih (gaya A) --- */
@media (max-width:640px){
  /* Hero telefon: foto jadi jalur di atas, teks di bawah atas latar putih.
     Sebelum ini foto dan teks bertindih dan tagline jatuh di atas bahagian foto
     yang cerah — sukar dibaca. Tiada lapisan kabur diperlukan lagi. */
  .hero{min-height:auto}
  .hero:after{display:none}
  .hero-image{inset:0 0 auto 0;left:0;right:0;width:100%;height:232px;object-position:center 42%}
  .hero-wash{display:none}
  .hero-content{align-items:flex-start;min-height:auto;margin-top:232px}
  .hero-copy{width:100%;padding:26px 0 34px}
  /* label ilustrasi (jika hero memakai imej ilustrasi) duduk di dalam jalur foto */
  .hero .chip-illustrasi{top:auto;bottom:auto;top:190px;right:12px}
  /* butang hero penuh lebar supaya teks tidak terpotong dua baris */
  .hero-buttons{grid-template-columns:1fr}
}

/* --- GAYA A: halaman Prakata Presiden --- */
.split-presiden{display:grid;grid-template-columns:336px minmax(0,1fr);gap:42px;align-items:start}
.kad-presiden{text-align:center;padding:28px 24px 26px}
.bulat-presiden{width:222px;height:222px;margin:0 auto 18px;border-radius:50%;overflow:hidden;
                background:var(--g-permukaan);border:1px solid var(--g-line)}
.bulat-presiden img{width:100%;height:100%;object-fit:cover;display:block}
.kad-presiden h3{font-size:21px;font-weight:700;color:var(--g-ink);margin:0 0 9px;letter-spacing:-.01em}
.pil-presiden{display:inline-block;background:var(--g-biru-lembut);color:var(--g-biru);border:1px solid #fadae1;
              border-radius:999px;padding:5px 13px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.kad-presiden .jawatan{font-size:14.5px;font-weight:600;color:var(--g-ink);margin:13px 0 4px}
.kad-presiden .organisasi{font-size:13.5px;color:var(--g-muted);margin:0;line-height:1.6}
.tunjang{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--g-line);display:grid;gap:9px;text-align:left}
.tunjang li{position:relative;padding-left:16px;font-size:13.5px;color:var(--g-teks)}
.tunjang li:before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--g-biru)}
.prakata .salam{font-size:16.5px;font-weight:600;color:var(--g-ink)}
.prakata p{font-size:16px;line-height:1.8}
.prakata .penutup{margin-bottom:0}
.tandatangan-prakata{margin-top:26px;padding-top:18px;border-top:1px solid var(--g-line)}
.tandatangan-prakata .nm{font-size:17px;font-weight:700;color:var(--g-ink)}
.tandatangan-prakata .jw{font-size:14px;color:var(--g-muted);margin-top:3px}
.nota-prakata{background:var(--g-permukaan)}
.nota-prakata h3{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--g-biru);margin:0 0 9px}
.nota-prakata p{font-size:15px;line-height:1.75;margin:0}
@media (max-width:960px){.split-presiden{grid-template-columns:1fr;gap:26px}.kad-presiden{padding:22px 18px}}

/* --- Fasa 1: butang WhatsApp + kotak bantuan kontekstual --- */
.btn-blok.wa{background:#128c7e;border-color:#128c7e;box-shadow:none}
.btn-blok.wa:hover{background:#0f7568;border-color:#0f7568}
.btn-blok.wa svg{width:15px;height:15px}
.kotak-bantuan{background:var(--g-permukaan)}
.kotak-bantuan h3{margin-top:0}
.kotak-bantuan p{font-size:14px;line-height:1.7;color:var(--g-teks);margin:0 0 16px}
.topbar a[href^="https://wa.me"]{font-weight:700}

/* --- GAYA A: blok promosi keahlian + nota sumber berita --- */
.promosi{display:grid;grid-template-columns:320px minmax(0,1fr);gap:34px;align-items:start;
         border:1px solid var(--g-line);border-radius:var(--g-r-besar);background:var(--g-permukaan);
         padding:26px}
.promosi-poster img{width:100%;height:auto;border-radius:var(--g-r-kecil);display:block;
                    border:1px solid var(--g-line)}
.promosi-isi h2{margin:8px 0 12px;font-size:24px;font-weight:600;color:var(--g-ink);letter-spacing:-.02em}
.promosi-isi>p{font-size:15px;line-height:1.7;color:var(--g-teks);margin:0 0 20px}
.promosi-chip{background:#e8f5ec;color:#1a7f45;border:1px solid #c9e7d4;margin-bottom:4px;display:inline-block}
.promosi-yuran{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.kad-yuran{border:1px solid var(--g-line);background:#fff;border-radius:var(--g-r-kecil);padding:14px 16px}
.kad-yuran small{display:block;font-size:12.5px;color:var(--g-teks);line-height:1.4;min-height:34px}
.kad-yuran s{display:block;font-size:13px;color:#b4949b;margin-top:6px}
.kad-yuran strong{display:block;font-size:23px;font-weight:700;color:var(--g-ink);letter-spacing:-.02em}
.promosi-bayaran{border-top:1px solid var(--g-line);padding-top:16px;margin-bottom:20px}
.promosi-bayaran h3{font-size:14px;font-weight:700;color:var(--g-ink);margin:0 0 10px}
.promosi-bayaran p{display:flex;gap:12px;font-size:14.5px;margin:4px 0;color:var(--g-ink)}
.promosi-bayaran p span{flex:0 0 132px;color:var(--g-teks);font-size:13px}
.sumber-berita{border-top:1px solid var(--g-line);margin-top:22px;padding-top:14px;font-size:13.5px;color:var(--g-teks)}
.sumber-berita a{color:var(--g-biru);text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){
  .promosi{grid-template-columns:1fr;padding:20px 18px}
  .promosi-poster{max-width:420px}
  .promosi-yuran{grid-template-columns:1fr}
  .kad-yuran small{min-height:0}
}

/* --- GAYA A: carta organisasi + amaran bayaran --- */
.struktur-ringkas{font-size:15px;line-height:1.7;color:var(--g-teks);margin:0 0 18px}
.struktur-jawatan{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:8px}
.struktur-jawatan li{display:flex;justify-content:space-between;gap:14px;border:1px solid var(--g-line);
                     background:#fff;border-radius:var(--g-r-kecil);padding:11px 15px;font-size:14.5px}
.struktur-jawatan li span{color:var(--g-ink);font-weight:600}
.struktur-jawatan li b{color:var(--g-teks);font-weight:500;font-size:13.5px}
.struktur-tugas{font-size:14px;line-height:1.7;color:var(--g-teks);border-left:3px solid var(--g-biru-lembut);
                padding-left:14px;margin:0 0 14px}
.amaran-bayaran{background:#fff8e6;border:1px solid #f2d99b;border-radius:var(--g-r-kecil);
                padding:12px 14px;font-size:13.5px;line-height:1.6;color:#6b5316;margin:0 0 16px}

/* --- GAYA A: galeri gambar + lightbox --- */
.album-ringkas{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:22px}
.album-pautan{border:1px solid var(--g-line);border-radius:var(--g-r-kecil);padding:13px 16px;background:#fff;
              display:flex;justify-content:space-between;align-items:center;gap:12px}
.album-pautan b{font-size:15px;font-weight:600;color:var(--g-ink);line-height:1.35}
.album-pautan span{font-size:13px;color:var(--g-teks);white-space:nowrap}
.album-pautan:hover{border-color:var(--g-biru);box-shadow:0 6px 18px #51071610}
.album-kepala{margin-bottom:20px}
.album-kepala h2{margin:10px 0 6px;font-size:26px;font-weight:600;color:var(--g-ink);letter-spacing:-.02em}
.album-meta{margin:0;font-size:14.5px;color:var(--g-teks)}
.galeri{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.galeri .gambar{padding:0;border:1px solid var(--g-line);border-radius:var(--g-r-kecil);overflow:hidden;
                background:var(--g-permukaan);cursor:zoom-in;display:block;aspect-ratio:4/3;width:100%}
.galeri .gambar img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.galeri .gambar:hover img{transform:scale(1.04)}
.galeri .gambar:focus-visible{outline:3px solid var(--g-biru);outline-offset:2px}
.lightbox{position:fixed;inset:0;z-index:200;background:#20080de6;display:flex;flex-direction:column;
          align-items:center;justify-content:center;padding:22px;gap:12px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(1180px,94vw);max-height:78vh;object-fit:contain;border-radius:var(--g-r-kecil);background:#2f0d14}
.lightbox .lb-kapsyen{color:#fae9ec;font-size:14.5px;margin:0;text-align:center;max-width:74ch;line-height:1.6}
.lightbox button{position:absolute;background:#ffffff1f;color:#fff;border:1px solid #ffffff40;border-radius:50%;
                 width:44px;height:44px;font-size:22px;line-height:1;display:grid;place-items:center;cursor:pointer}
.lightbox button:hover{background:#ffffff33}
.lightbox .lb-tutup{top:18px;right:18px}
.lightbox .lb-sebelum{left:18px;top:50%;transform:translateY(-50%)}
.lightbox .lb-selepas{right:18px;top:50%;transform:translateY(-50%)}
@media (max-width:900px){.galeri{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .galeri{grid-template-columns:1fr;gap:12px}
  .album-kepala h2{font-size:21px}
  .lightbox button{width:38px;height:38px;font-size:19px}
  .lightbox .lb-sebelum{left:8px} .lightbox .lb-selepas{right:8px}
}

/* --- GAYA A: carta organisasi + senarai jawatankuasa --- */
.org-carta{margin-bottom:24px}
.org-carta .gambar{padding:0;border:1px solid var(--g-line);border-radius:var(--g-r-kecil);overflow:hidden;
                   background:#fff;cursor:zoom-in;display:block;width:100%}
.org-carta .gambar img{width:100%;height:auto;display:block}
.org-carta .nota-isi{margin-top:10px}
.org-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:22px 16px}
.org-ahli{text-align:center}
.org-bulat{display:block;width:104px;height:104px;margin:0 auto 10px;border-radius:50%;overflow:hidden;
           background:var(--g-permukaan);border:1px solid var(--g-line)}
.org-bulat img{width:100%;height:100%;object-fit:cover;display:block}
.org-ahli b{display:block;font-size:14.5px;font-weight:600;color:var(--g-ink);line-height:1.35}
.org-ahli small{display:block;margin-top:3px;font-size:12.5px;color:var(--g-teks)}
@media (max-width:640px){
  .org-grid{grid-template-columns:repeat(2,1fr);gap:18px 12px}
  .org-bulat{width:88px;height:88px}
  .org-ahli b{font-size:13.5px}
}

/* --- GAYA A: jadual statistik keahlian --- */
.stat-keahlian h3{margin:0 0 12px;font-size:16px;font-weight:600;color:var(--g-ink)}
.stat-keahlian>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
                   border-bottom:1px solid var(--g-line);font-size:14.5px}
.stat-keahlian>div span{color:var(--g-teks)}
.stat-keahlian>div b{color:var(--g-ink);font-weight:600}
.stat-keahlian>div.baris-tebal{border-bottom:0;border-top:2px solid var(--g-ink);margin-top:6px;padding-top:11px}
.stat-keahlian>div.baris-tebal span,.stat-keahlian>div.baris-tebal b{font-weight:700;color:var(--g-ink)}
.stat-keahlian .nota-isi{margin:14px 0 0}

/* ============ POLISH MUDAH ALIH (semakan UI 2026-10-17) ============
   Punca utama: .grid-2/.grid-3 tidak runtuh pada telefon dan 1fr tidak boleh
   mengecil bawah min-content, jadi halaman melebar (carta paparan telefon zoom
   keluar dan semua teks jadi kecil). Selain itu: teks kecil <12px dan sasaran
   sentuh <44px. Blok ini membaiki semuanya. */
.grid-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
html{overflow-x:clip}

@media (max-width:900px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .grid-4{grid-template-columns:1fr}
  .grid-2,.grid-3{gap:14px}

  /* teks kecil: naikkan supaya boleh dibaca pada telefon */
  .logo small{font-size:11px}
  .course-code,.chip,.badge,.activity-image span,.date-badge small{font-size:12px}
  .item-meta,.activity-info p,.course-info li{font-size:12.5px}
  .lebih,.section-title-row a,.activity-info a,.item-body>a{font-size:12.5px}

  /* sasaran sentuh sekurang-kurangnya ~44px */
  .topbar-inner{min-height:40px}
  .topbar a,.topbar button{min-height:40px}
  .menu-toggle{width:44px;height:44px;margin-left:auto}
  .tukar-bahasa{min-height:44px;min-width:44px;justify-content:center}
  .small-btn{min-height:44px}
  .mobile-nav a{min-height:48px;display:flex;align-items:center}
  .mobile-nav button{min-height:46px}
  .section-title-row a,.lebih,.activity-info a,.item-body>a{min-height:44px;display:inline-flex;align-items:center}
  .btn{min-height:48px}
  .galeri .gambar,.org-carta .gambar{border-radius:var(--g-r-kecil)}
}

/* Jadual data pada telefon: jangan paksa lebar minimum — susun bertimbun supaya
   teks tidak keluar dari kad (punca halaman keahlian melebar sebelum ini). */
@media (max-width:640px){
  .table-wrap{overflow-x:visible}
  /* Guna 'table.data' (bukan '.data') supaya menang atas peraturan asas
     'table.data{min-width:520px}' yang lebih spesifik. */
  table.data{min-width:0;font-size:14px;border-collapse:separate;border-spacing:0}
  table.data thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.data,table.data tbody,table.data tr,table.data td{display:block;width:100%}
  table.data tr{border:1px solid var(--g-line);border-radius:var(--g-r-kecil);background:#fff;
                padding:12px 14px;margin-bottom:10px}
  table.data td{border:0;padding:3px 0}
  table.data td[data-label]:before{content:attr(data-label);display:block;font-size:11.5px;letter-spacing:.07em;
                                   text-transform:uppercase;color:var(--g-teks);margin-bottom:3px}
  table.data td:empty{display:none}
}

/* Nota sumber (contoh: kategori keahlian daripada brosur rasmi) */
.nota-sumber{border:1px solid var(--g-line);border-left:3px solid var(--g-biru);background:#fff7f9;
             border-radius:var(--g-r-kecil);padding:13px 16px;font-size:13.5px;line-height:1.65;color:var(--g-teks);
             margin-bottom:22px}

/* Ikon sosial footer: gaya asal menyasarkan 'span', tetapi penanda HTML guna 'a'
   — jadi ikon kelihatan mentah dan kecil. Betulkan supaya bulatan 40px (sasaran sentuh). */
.socials{gap:10px}
.socials a{width:40px;height:40px;background:#b41232;border-radius:50%;display:grid;place-items:center;flex:none}
.socials a:hover{background:#d0153a}
.socials a svg{width:18px;height:18px}

@media (max-width:640px){
  /* Bar atas: elak teks berbalut dua baris (nampak tidak sekata) */
  .topbar-inner{gap:8px;overflow:hidden}
  .topbar-inner div{gap:6px}
  .topbar a{white-space:nowrap;font-size:12px}
  .topbar a[href^="mailto:"]{display:none}
  .topbar i{display:none}
  /* pautan footer: sasaran sentuh lebih besar dan sekata */
  .footer-grid a,.footer-grid>div:nth-child(3)>span{min-height:40px;display:flex;align-items:center}
  .footer-bottom a{min-height:36px;display:inline-flex;align-items:center}
}

/* Sasaran sentuh: pautan navigasi (breadcrumb, senarai pintasan, tajuk kad) pada telefon */
@media (max-width:640px){
  .crumbs a{min-height:36px;display:inline-flex;align-items:center}
  nav a,.side-nav a,h3 a,h4 a,.item-body h3 a,.activity-info h3 a{min-height:40px;display:inline-flex;align-items:center}
}

/* Kad aktiviti tanpa gambar sebenar (contoh CCC8 — gambar belum diterima) */
.activity-image.tiada-gambar{background:linear-gradient(135deg,#feeff2,#fadce2);display:grid;place-items:center}
.activity-image.tiada-gambar .ikon-tiada{color:var(--g-biru);opacity:.55}
.activity-image.tiada-gambar .ikon-tiada svg{width:38px;height:38px}

/* --- CTA komuniti: pautan bergaya butang ---
   Bug: CSS lama menyasarkan `.cta-grid>button` sedangkan penanda HTML guna <a>, jadi
   pautan itu tidak mendapat gaya grid/butang — pada telefon ia terjatuh ke lajur ikon
   (58px) dan teks melimpah keluar kotak. Gaya penuh di sini. */
.cta-btn{min-height:48px;color:var(--g-biru);text-transform:uppercase;background:#fff;border-radius:var(--g-r-kecil);
         display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:0 26px;font-size:13px;
         font-weight:800;text-decoration:none;box-shadow:0 8px 22px #51071633;white-space:nowrap;line-height:1.2}
.cta-btn svg{width:15px;height:15px;flex:none}
.cta-btn:hover{background:#fef3f5}
.cta-btn:active{transform:translateY(1px)}
@media (max-width:900px){
  .cta-btn{grid-column:1 / -1;justify-self:stretch;width:100%;padding:13px 20px;white-space:normal;text-align:center}
}
@media (max-width:640px){
  .cta-grid{grid-template-columns:54px minmax(0,1fr)}
  .cta-btn{font-size:12.5px;letter-spacing:.02em}
}

/* --- Hero pada telefon: foto sebagai latar dengan gradien menegak ---
   Doc mahu gaya sama seperti desktop (foto + gradien), bukan jalur foto berasingan.
   Foto memenuhi seluruh hero; gradien putih dari bawah supaya teks tajuk kekal jelas. */
/* Hero desktop: kotak lebih tinggi supaya gambar tidak dipotong rapat (kurang "zoom"). */
.hero{min-height:600px}
.hero-content{min-height:600px}

@media (max-width:640px){
  /* Hero telefon: foto sebagai jalur di atas, tepi bawahnya melarut (gradien) ke putih,
     kemudian teks di atas latar putih. */
  .hero{min-height:auto}
  .hero:after{display:none}
  .hero-image{position:absolute;top:0;left:0;right:0;width:100%;height:340px;
              object-fit:cover;object-position:center 40%}
  .hero-wash{display:block;background:linear-gradient(180deg,#0000 0%,#0000 52%,#ffffffb3 80%,#fff 100%)}
  .hero-content{min-height:auto;align-items:flex-start;margin-top:340px}
  .hero-copy{width:100%;padding:26px 0 32px}
  .hero h1{font-size:34px}
  .hero h2{font-size:16.5px}
  .hero-copy>p{font-size:13.5px}
}

/* --- Roulette imej hero --- */
.hero-slaid{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.hero-slaid.aktif{opacity:1}
@media (prefers-reduced-motion: reduce){
  .hero-slaid{transition:none}
}

/* --- Ikon sosial 3D (bola berkilat, gaya cembung) --- */
/* Pemilih 'footer .socials a' (0,1,2) mengalahkan '.footer-grid a' (0,1,1) — termasuk
   salinan peraturan itu di dalam @media (max-width:640px) yang menjadikan ikon senget ke kiri. */
footer .socials a{
  display:grid;
  place-items:center;
  padding:0;
  background:radial-gradient(circle at 32% 26%, #fdd9e0 0%, #f08298 17%, #cd2244 52%, #8a0b25 82%, #580818 100%);
  border:1px solid #ffffff2e;
  box-shadow:0 4px 9px #30050e73, 0 1px 2px #30050e80, inset 0 2px 3px #ffffff8c, inset 0 -3px 7px #00000059;
  transition:transform .18s ease, box-shadow .18s ease;
}
footer .socials a svg{filter:drop-shadow(0 1px 1.5px #2c040c8c)}
footer .socials a:hover{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 7px 14px #30050e8c, inset 0 2px 3px #ffffff94, inset 0 -3px 7px #00000059;
}
footer .socials a:active{transform:translateY(0) scale(.97)}
@media (prefers-reduced-motion:reduce){footer .socials a{transition:none}}

/* ================= IKON 3D — diselaraskan seluruh laman =================
   Dua keluarga supaya ikon tidak hilang pada latar berbeza:
     • "bola cerah" (putih berkilat) — latar putih/terang
     • "bola biru" (biru berkilat) — latar navy/gelap
   Cahaya datang dari kiri atas, bayang lembut di bawah => nampak cembung (timbul). */

.credential-grid>div>span,
.service-grid article>span,
.stat>span,
.modal .close,
.success>span,
.kosong span.ikon,
.carousel-arrow,
.cta-icon{
  border:1px solid #ffffffd9;
  background:radial-gradient(circle at 32% 26%, #ffffff 0%, #fff7f9 40%, #f7e5e8 74%, #e9cdd3 100%);
  box-shadow:0 7px 15px #3e0d1720, 0 2px 4px #3e0d1733, 0 0 0 1px #edd0d6,
             inset 0 2px 3px #ffffff, inset 0 -4px 9px #d7b5bc66;
  transition:transform .18s ease, box-shadow .18s ease;
}
/* Bulatan pada jalur biru CTA: bola cerah + ikon biru supaya jelas */
.cta-icon{color:var(--navy)}
.cta-icon svg{filter:drop-shadow(0 1px 1.5px #3e0d172e)}
.credential-grid svg,.service-grid svg,.stat svg,.kosong span.ikon svg{filter:drop-shadow(0 1px 1.5px #3e0d172e)}

footer .socials a,
.tile>span.ikon{
  border:1px solid #ffffff2e;
  background:radial-gradient(circle at 32% 26%, #fdd9e0 0%, #f08298 17%, #cd2244 52%, #8a0b25 82%, #580818 100%);
  box-shadow:0 5px 11px #30050e73, 0 1px 2px #30050e80, inset 0 2px 3px #ffffff8c, inset 0 -3px 7px #00000059;
  transition:transform .18s ease, box-shadow .18s ease;
}
.tile>span.ikon svg{filter:drop-shadow(0 1px 1.5px #2c040c8c)}

/* Butang bulat di atas lapisan gelap + anak panah: sedikit timbul */
.lightbox button{box-shadow:0 5px 12px #00000059, inset 0 1px 2px #ffffff33}

/* Kesan sentuh/hover */
footer .socials a:hover,.tile:hover>span.ikon,.carousel-arrow:hover,.modal .close:hover{
  transform:translateY(-2px) scale(1.05);
}
@media (prefers-reduced-motion:reduce){
  .credential-grid>div>span,.service-grid article>span,.stat>span,.modal .close,
  .success>span,.kosong span.ikon,.carousel-arrow,.tile>span.ikon,footer .socials a{transition:none}
}

/* --- Kredit foto pihak ketiga (cth. Wikimedia Commons) --- */
.chip-kredit{position:absolute;right:8px;bottom:8px;z-index:3;background:#510716c2;color:#fff;
  border-radius:5px;padding:3px 7px;font-size:8px;line-height:1.35;max-width:86%;text-align:right;
  letter-spacing:.01em}
.item-photo{position:relative}
.kredit-foto{color:#77545b;margin:-14px 0 20px;font-size:9px;line-height:1.5}

/* --- Poster keahlian boleh klik + butang aksi promosi --- */
.promosi-poster a.poster-pautan{display:block;border-radius:12px;overflow:hidden}
.promosi-poster a.poster-pautan:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.promosi-aksi{display:grid;gap:10px;margin-top:14px}
.btn-blok.borang{background:linear-gradient(135deg,var(--navy),#b41232);color:#fff;
  box-shadow:0 8px 20px #51071638}
.nota-qr{color:#77545b;margin:10px 0 0;font-size:11px;line-height:1.55}

/* --- Halaman pengesahan sijil C&P --- */
.banner-draf{background:#fff8e6;border:1px solid #f0d18a;border-left:4px solid #d99b16;
  border-radius:8px;padding:12px 14px;margin:0 0 22px;font-size:13px;color:#4a3a10;display:flex;gap:9px;align-items:flex-start;line-height:1.5}
.banner-draf svg{width:17px;height:17px;flex:none;margin-top:2px;color:#b7791a}
.borang-sahkan{margin:0 0 8px}
.borang-sahkan label{display:block;font-weight:700;font-size:13px;color:var(--navy);margin-bottom:6px}
.baris-sahkan{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.baris-sahkan input{flex:1 1 240px;min-height:46px;border:1px solid var(--line);border-radius:6px;
  padding:0 14px;font-size:14px;font-family:inherit;background:#fff}
.baris-sahkan input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #9f0d2a17}
.baris-sahkan .btn{flex:0 0 auto}
.hasil-sahkan{margin:18px 0 6px}
.hasil-sahkan.jaya,.hasil-sahkan.gagal{border-radius:9px;padding:16px 18px}
.hasil-sahkan.jaya{background:#eefaf1;border:1px solid #a7e0bd;border-left:4px solid #1a9e52}
.hasil-sahkan.gagal{background:#fdf1f1;border:1px solid #f0b6b6;border-left:4px solid #cf3a3a}
.hasil-sahkan h3{margin:0 0 10px;font-size:16px}
.hasil-sahkan.jaya h3{color:#12683a}
.hasil-sahkan.gagal h3{color:#9c1f1f}
.senarai-sah{margin:0;display:grid;gap:7px}
.senarai-sah>div{display:grid;grid-template-columns:200px 1fr;gap:12px;align-items:baseline}
.senarai-sah dt{color:var(--muted);font-size:12px;font-weight:600}
.senarai-sah dd{margin:0;font-size:13px;word-break:break-word}
@media (max-width:640px){
  .senarai-sah>div{grid-template-columns:1fr;gap:2px}
  .baris-sahkan input,.baris-sahkan .btn{flex:1 1 100%}
}

/* --- seksyen Penasihat (di bawah jawatankuasa) --- */
.tajuk-penasihat{margin:36px 0 18px;font-size:18px;font-weight:700;color:var(--g-ink);text-align:center}

.org-grid.penasihat{grid-template-columns:1fr;max-width:320px;margin:6px auto 0;gap:22px}
@media (max-width:640px){.org-grid.penasihat{grid-template-columns:1fr;max-width:300px;gap:16px}}

.org-bulat-kosong{display:grid;place-items:center;font-weight:700;font-size:26px;color:var(--g-muted);background:var(--g-permukaan);border:1px solid var(--g-line)}

/* --- galeri: kad album (halaman indeks) --- */
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.album-kad{border:1px solid var(--g-line);border-radius:var(--g-r);overflow:hidden;background:#fff;
           display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.album-kad:hover{transform:translateY(-3px);box-shadow:0 12px 30px #51071612;border-color:var(--g-biru)}
.album-kad-gambar{display:block;aspect-ratio:4/3;background:var(--g-permukaan);overflow:hidden}
.album-kad-gambar img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.album-kad:hover .album-kad-gambar img{transform:scale(1.04)}
.album-kad-isi{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}
.album-kad-isi b{font-size:16px;font-weight:650;color:var(--g-ink);line-height:1.32}
.album-kad-isi small{font-size:13px;color:var(--g-teks)}
.album-kad-isi em{font-size:12.5px;font-style:normal;color:var(--g-muted);margin-top:2px}
.album-ringkas-teks{margin:12px 0 0;font-size:15px;line-height:1.65;color:var(--g-teks);max-width:70ch}
@media (max-width:640px){
  .album-grid{grid-template-columns:1fr;gap:14px}
  .album-kad-gambar{aspect-ratio:16/10}
}

.ikon-ganti{display:inline-block;width:1em;height:1em}