/* Website design showcase (/web-design/ and /ms/reka-bentuk-web/)
   Uses the tokens from style.css. Every selector here starts with wd-, wdm- or wdp-
   so nothing clashes with the rest of the site. */

/* ---------- hero with the 3D template stage ---------- */
.wd-hero{position:relative;overflow:hidden}
.wd-hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:80%;background:radial-gradient(55% 60% at 50% 58%,rgba(30,123,242,.24),transparent 72%);pointer-events:none}
.wd-hero .phead{padding:clamp(26px,3.6vw,52px) 0 clamp(14px,2.4vw,28px)}
.wd-hero .phead h1{font-size:clamp(2.2rem,4.8vw,3.7rem);max-width:21ch}
html[lang="ms"] .wd-hero .phead h1{font-size:clamp(2rem,4.3vw,3.3rem)}
.wd-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;position:relative;z-index:1}
.wd-stagewrap{position:relative;padding-bottom:clamp(40px,6vw,72px)}
.wd-stage{--w:min(66vw,820px);--sp:60%;position:relative;height:calc(var(--w)*.625 + 44px);perspective:1800px;perspective-origin:50% 35%}
@media (max-width:700px){.wd-stage{--w:86vw;--sp:58%}}
.wd-slide{position:absolute;left:50%;top:14px;width:var(--w);height:calc(var(--w)*.625);--d:0;--ad:0;cursor:pointer;
  transform:translateX(calc(-50% + var(--d)*var(--sp))) translateZ(calc(var(--ad)*-260px)) rotateY(calc(var(--d)*-26deg)) scale(calc(1 - var(--ad)*.06));
  opacity:calc(1 - var(--ad)*.34);transition:transform 1.1s var(--ease),opacity 1.1s;will-change:transform}
.wd-slide.is-active{cursor:default}
.wd-slide .wd-frame{height:100%;box-shadow:0 46px 80px -34px rgba(6,18,43,.7),0 0 0 1px rgba(6,18,43,.1)}
.wd-slide.is-active .wdm-pg{transform:translateY(-30%);transition:transform 3.6s cubic-bezier(.45,0,.25,1) .6s}
.wd-ui{position:relative;display:flex;align-items:center;justify-content:center;gap:18px;margin-top:6px}
.wd-nb{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--text);display:grid;place-items:center;transition:border-color .2s,transform .25s var(--ease)}
.wd-nb:hover{border-color:var(--blue);transform:translateY(-2px)}
.wd-nb svg{width:18px;height:18px}
.wd-cap{min-width:min(300px,52vw);text-align:center}
.wd-cap strong{display:block;font:800 1.2rem/1.2 var(--display);letter-spacing:-.02em}
.wd-cap span{display:block;font-size:.92rem;color:var(--muted)}
.wd-dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
.wd-dots button{width:10px;height:10px;padding:0;border:0;border-radius:999px;background:var(--line);transition:width .3s var(--ease),background .3s}
.wd-dots button[aria-current="true"]{width:32px;background:var(--blue)}

/* ---------- template mockups (sizes scale with the container width) ---------- */
.wd-frame{display:flex;border-radius:14px;overflow:hidden;background:#fff}
.wdm{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;container-type:inline-size;background:var(--mb);color:var(--mi);font-family:var(--body);line-height:1.2;
  --mb:#fff;--mi:#14202B;--ma:#14202B;--mo:#fff;--mg:#ddd;--ms1:#fff;--ms2:#999;--mc:#fff;--mr:2cqw;--mg2:#e5e5e5;--msr:22%}
.wdm-bar{display:flex;align-items:center;gap:1.1cqw;padding:1.5cqw 2.4cqw;background:#E9EDF3;flex:none}
.wdm-bar i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:#C4CCD8}
.wdm-bar span{margin-left:2cqw;flex:1;background:#fff;border-radius:2cqw;padding:.6cqw 2cqw;font-size:1.8cqw;color:#6B7686}
.wdm-vp{flex:1;min-height:0;overflow:hidden}
.wdm-pg{min-height:100cqw;transition:transform .8s ease}
.wdm-nav{display:flex;align-items:center;justify-content:space-between;padding:2.6cqw 4cqw}
.wdm-logo{font-family:var(--display);font-weight:800;font-size:3cqw}
.wdm-links{display:flex;gap:2.4cqw}
.wdm-links b{font-weight:500;font-size:2cqw;opacity:.7}
.wdm-cta{font-size:1.9cqw;padding:1cqw 2.2cqw;border-radius:3cqw;background:var(--ma);color:var(--mo);font-weight:700}
.wdm-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:3cqw;align-items:center;padding:3cqw 4cqw 5cqw}
.wdm-hero.rev{grid-template-columns:1fr 1.1fr}.wdm-hero.rev>div:first-child{order:2}
.wdm-hero h4{font:800 5.4cqw/1.04 var(--display);letter-spacing:-.02em;margin:0 0 2cqw}
.wdm-hero p{font-size:2.2cqw;opacity:.72;margin:0 0 3cqw;max-width:32cqw}
.wdm-btn{display:inline-block;font-size:2.1cqw;padding:1.3cqw 3cqw;border-radius:3cqw;background:var(--ma);color:var(--mo);font-weight:700}
.wdm-img{position:relative;overflow:hidden;aspect-ratio:1/1.05;border-radius:var(--mr);background:var(--mg)}
.wdm-img::before{content:"";position:absolute;width:56%;aspect-ratio:1;border-radius:50%;background:var(--ms1);right:-10%;top:-8%;opacity:.9}
.wdm-img::after{content:"";position:absolute;width:44%;height:40%;border-radius:var(--msr);background:var(--ms2);left:12%;bottom:10%}
.wdm-hero.center{grid-template-columns:1fr;text-align:center;justify-items:center}
.wdm-hero.center p{margin-inline:auto}
.wdm-hero.center .wdm-img{width:100%;aspect-ratio:16/6}
.wdm-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw;padding:0 4cqw 4cqw}
.wdm-card{border-radius:2cqw;background:var(--mc);padding:1.8cqw;font-size:2.1cqw;font-weight:700}
.wdm-card .t{aspect-ratio:4/3;border-radius:1.4cqw;background:var(--mg2);margin-bottom:1.4cqw}
.wdm-card small{display:block;font-weight:500;opacity:.65;font-size:1.8cqw;margin-top:.5cqw}
.wdm-band{margin:0 4cqw 4cqw;padding:3.6cqw 4cqw;border-radius:2cqw;background:var(--ma);color:var(--mo);font:800 3.2cqw/1.1 var(--display);display:flex;justify-content:space-between;align-items:center;gap:2cqw}
.wdm-band span{font:700 2cqw var(--body);padding:1.2cqw 2.6cqw;border-radius:3cqw;background:var(--mo);color:var(--ma);white-space:nowrap}
.wdm-foot{padding:3cqw 4cqw 6cqw;font-size:1.8cqw;opacity:.6;display:flex;gap:3cqw}
/* template themes */
.wdm-batik{--mb:#fff;--mi:#2A1124;--ma:#C2386B;--mg:linear-gradient(160deg,#F9D7E2,#E88FAE);--ms1:#5B1B4D;--ms2:#fff;--mg2:linear-gradient(135deg,#FBE6ED,#F2B3C7);--mc:#FDF3F6;--mr:40cqw 40cqw 2cqw 2cqw;--msr:50%}
.wdm-klinik{--mb:#F2FBFA;--mi:#0D3B3A;--ma:#0B8F86;--mg:linear-gradient(200deg,#C9F1EE,#8FDCD5);--ms1:#fff;--ms2:#0B8F86;--mg2:linear-gradient(135deg,#D9F4F1,#B5E8E3);--mc:#fff;--mr:50%;--msr:50%}
.wdm-kopi{--mb:#1A120D;--mi:#F5E9D9;--ma:#C8823F;--mo:#1A120D;--mg:linear-gradient(160deg,#6B3A1C,#2A160B);--ms1:#C8823F;--ms2:#8A3B1C;--mg2:linear-gradient(135deg,#4A2A16,#2A160B);--mc:#261B14;--mr:3cqw;--msr:50%}
.wdm-bina{--mb:#EEF1F4;--mi:#14202B;--ma:#F26B1D;--mg:linear-gradient(135deg,#9FB1C2,#5F7489);--ms1:#14202B;--ms2:#F26B1D;--mg2:linear-gradient(135deg,#B9C6D3,#8DA0B3);--mc:#fff;--mr:.6cqw;--msr:0}
.wdm-lumi{--mb:#FFF1F3;--mi:#3A1F2B;--ma:#D6457A;--mg:linear-gradient(135deg,#FFD2DE,#F7A8C0);--ms1:#fff;--ms2:#D6457A;--mg2:linear-gradient(135deg,#FFE3EA,#F9BFD1);--mc:#fff;--mr:3cqw}
.wdm-bright{--mb:#F5F9FF;--mi:#102A5C;--ma:#1E7BF2;--mg:linear-gradient(135deg,#FFE28A,#FFC83D);--ms1:#1E7BF2;--ms2:#fff;--mg2:linear-gradient(135deg,#FFF0BE,#FFE28A);--mc:#fff;--mr:4cqw}

/* ---------- live project feature ---------- */
.wd-real{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.wd-shot{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -30px rgba(6,18,43,.55),0 0 0 1px var(--line)}
.wd-shot .wdm-bar{padding:10px 14px;gap:6px}
.wd-shot .wdm-bar i{width:10px;height:10px}
.wd-shot .wdm-bar span{font-size:.78rem;padding:3px 12px;margin-left:10px;border-radius:12px}
.wd-shot img{display:block;width:100%;height:auto}
.wd-real h3{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.wd-real h3 small{display:inline-block;margin-left:10px;font:600 .8rem var(--body);letter-spacing:0;color:var(--blue);background:var(--sky);padding:4px 10px;border-radius:999px;vertical-align:middle}
.wd-real p{margin-top:14px;color:var(--muted);max-width:46ch}
.wd-real .wd-cta{margin-top:22px}
@media (max-width:860px){.wd-real{grid-template-columns:1fr}}

/* ---------- concepts gallery ---------- */
.wd-head{max-width:46rem;margin-bottom:clamp(28px,4vw,46px)}
.wd-head .lede{margin-top:14px}
.wd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3vw,40px) clamp(18px,2.4vw,30px)}
.wd-tcard .wd-frame{aspect-ratio:4/3;border-radius:12px;box-shadow:0 22px 40px -24px rgba(6,18,43,.55),0 0 0 1px var(--line)}
.wd-tcard:hover .wdm-pg,.wd-tcard:focus-within .wdm-pg{transform:translateY(-27%);transition:transform 3s cubic-bezier(.45,0,.25,1)}
.wd-meta{padding-top:16px}
.wd-meta h3{font-size:1.3rem}
.wd-type{margin:2px 0 6px;font-weight:600;color:var(--blue);font-size:.95rem}
.wd-meta p.wd-line{color:var(--muted);font-size:.98rem;margin-bottom:10px}
.wd-link{font-weight:600;border-bottom:2px solid var(--green);padding-bottom:1px;transition:border-color .2s}
.wd-link:hover{border-color:var(--blue)}
@media (max-width:980px){.wd-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.wd-grid{grid-template-columns:1fr}}

/* ---------- poster wall ---------- */
.wd-posters{background:var(--tint);padding-bottom:clamp(88px,10vw,128px)}
.wdp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,34px)}
.wdp{display:flex;flex-direction:column;aspect-ratio:4/5.5;padding:clamp(18px,2vw,26px);border-radius:6px;color:var(--pt);background:var(--pb);box-shadow:0 30px 44px -26px rgba(6,18,43,.6);transition:transform .45s var(--ease)}
.wdp-art{flex:none;margin-bottom:18px}
.wdp h3{font-size:clamp(1.5rem,2.5vw,2.05rem);line-height:1.02;letter-spacing:-.025em;margin-bottom:10px}
.wdp p{font-size:.98rem;line-height:1.42;opacity:.9;max-width:34ch}
.wdp-foot{margin-top:auto;padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.82rem;font-weight:700;border-top:1.5px solid color-mix(in srgb,currentColor 25%,transparent)}
.wdp-brand{display:flex;align-items:center;gap:8px}
.wdp-brand img{width:24px;height:24px;object-fit:contain;border-radius:6px;background:#fff;padding:2px}
.wdp-more{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.wdp-seo{--pb:#0A2A66;--pt:#fff}
.wdp-ads{--pb:#FFC83D;--pt:#06122B}
.wdp-dm{--pb:#1E7BF2;--pt:#fff}
.wdp-social{--pb:#FF6B57;--pt:#06122B}
.wdp-gbp{--pb:#0E7C4A;--pt:#fff}
.wdp-content{--pb:#fff;--pt:#0A2A66}
@media (min-width:900px){
  .wdp-grid{padding-bottom:42px}
  .wdp:nth-child(3n+1){transform:rotate(-1.1deg)}
  .wdp:nth-child(3n+2){transform:translateY(42px) rotate(.7deg)}
  .wdp:nth-child(3n){transform:rotate(.5deg)}
  .wdp:hover,.wdp:focus-visible{transform:translateY(-8px) rotate(0)}
  .wdp:nth-child(3n+2):hover{transform:translateY(32px) rotate(0)}
}
@media (max-width:899px){
  .wdp-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:6px 24px 22px;margin-inline:-24px}
  .wdp{flex:0 0 min(78%,340px);scroll-snap-align:center}
}

/* ---------- included list ---------- */
.wd-inc{border-top:2px solid var(--text)}
.wd-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:10px 32px;padding:22px 0;border-bottom:1px solid var(--line)}
.wd-row h3{font-size:1.3rem}
.wd-row p{color:var(--muted)}
@media (max-width:700px){.wd-row{grid-template-columns:1fr;gap:4px}}

@media (prefers-reduced-motion:reduce){
  .wd-slide,.wdp,.wd-dots button,.wd-nb{transition:none!important}
  .wd-slide.is-active .wdm-pg,.wd-tcard:hover .wdm-pg{transform:none!important}
}

/* long button labels (Bahasa Malaysia) wrap instead of overflowing on phones */
.wd-cta .btn{white-space:normal;text-align:center;justify-content:center;max-width:100%}