:root{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#102343;background:#f2f6fc;--muted:#52637b}
*{box-sizing:border-box}body{margin:0;line-height:1.5}a{color:inherit}
header{color:white;padding:22px 24px;background:radial-gradient(ellipse at 14% 80%,#0876ba77,transparent 40%),linear-gradient(130deg,#061a38,#0a3264 55%,#061a38);position:relative;overflow:hidden}
header:before{content:"";position:absolute;inset:0;opacity:.2;background-image:linear-gradient(#67bcff38 1px,transparent 1px),linear-gradient(90deg,#67bcff38 1px,transparent 1px);background-size:34px 34px;pointer-events:none}
.header-inner{position:relative;width:min(1280px,100%);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:18px;min-width:0}.brand-copy{min-width:0}
.logo{width:68px;height:68px;display:grid;place-items:center;flex:0 0 68px;border-radius:20px;background:linear-gradient(145deg,#20d2fa,#0870ee);font-weight:900;font-size:25px;box-shadow:0 10px 30px #009cff42}
.logo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
h1{margin:0;font-size:clamp(1.65rem,4vw,3rem);line-height:1.05;letter-spacing:-.05em;color:white}h1 span{color:#20c6f4}
.tagline{margin:6px 0 0;color:#dcecff;font-size:clamp(.82rem,1.5vw,1.05rem)}
.headline{display:none}
main{width:min(1240px,calc(100% - 30px));margin:20px auto}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
.card{min-width:0;padding:clamp(17px,2.4vw,27px);border-radius:23px;border:1px solid;display:flex;flex-direction:column;box-shadow:0 10px 30px #0d30570d}
.layer{background:linear-gradient(145deg,#e0f3ff,#f5fbff 75%);border-color:#c8e7ff}
.solid{background:linear-gradient(145deg,#fff0d9,#fffaf0 75%);border-color:#ffe0b9}
.title-row{display:flex;align-items:center;gap:14px;margin-bottom:13px}
.icon{width:60px;height:60px;flex:0 0 60px;border-radius:17px;display:grid;place-items:center;color:white;font-size:30px;font-weight:900}
.layer .icon{background:linear-gradient(145deg,#1bc5f7,#0758e8)}.solid .icon{background:linear-gradient(145deg,#ffb323,#ff5007)}
h2{margin:0;font-size:clamp(1.6rem,2.8vw,2.35rem);line-height:1.1;letter-spacing:-.045em}
.sub{margin:6px 0 0;color:var(--muted);font-size:.9rem}
.showcase{display:block;margin:8px 0 15px;min-height:0}.showcase.lifestyle{overflow:hidden;border-radius:14px;border:1px solid #d4dfeb;box-shadow:0 8px 22px #15324b12}.showcase.lifestyle img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center}
.laptop{min-width:0;position:relative;padding:8px 8px 13px;background:linear-gradient(145deg,#24364d,#071426);border:2px solid #6d8298;border-radius:13px 13px 7px 7px;box-shadow:0 12px 22px #15324b25}
.laptop:before{content:"";position:absolute;top:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:#8fa5ba}
.laptop img{display:block;width:100%;aspect-ratio:1.5;object-fit:cover;object-position:center top;border-radius:4px;background:#fff}
.laptop-base{position:absolute;left:-5%;right:-5%;bottom:-9px;height:8px;border-radius:2px 2px 9px 9px;background:linear-gradient(#cbd5df,#718297);box-shadow:0 4px 6px #15324b20}
.showcase-person{width:100%;height:auto;display:block;filter:drop-shadow(0 5px 4px #15324b12)}
.description{margin:0 0 15px;font-size:.95rem;color:#253a56}
.people{display:grid;grid-template-columns:108px 1fr;gap:13px;align-items:center;padding:12px;border-radius:16px;background:#ffffffb8;margin-bottom:15px}
.person-art{width:108px;max-width:100%;height:auto;display:block}
.people strong{font-size:.94rem;display:block}.people p{margin:4px 0 0;color:var(--muted);font-size:.82rem}
.audience{background:#ffffffad;border-radius:16px;padding:15px;flex:1}
.audience h3{margin:0 0 11px;font-size:1.03rem}.layer h3{color:#075bdb}.solid h3{color:#d84b0a}
.row{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:start;margin-top:11px;min-width:0}.row:first-of-type{margin-top:0}.row .emoji{display:flex;width:32px;min-height:25px;align-items:center;justify-content:center;font-size:20px;line-height:1.2;white-space:nowrap;overflow:visible}.row>div{min-width:0}.row strong{display:block;font-size:.91rem;line-height:1.4}.row p{margin:2px 0 0;color:var(--muted);font-size:.81rem;line-height:1.5}
.cta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 17px;border-radius:15px;margin-top:15px;color:white;text-decoration:none;font-weight:750;box-shadow:0 8px 18px #0c2d582b;transition:transform .18s,filter .18s}
.cta:hover{transform:translateY(-2px);filter:brightness(1.06)}.cta:focus-visible{outline:3px solid #102343;outline-offset:3px}
.layer .cta{background:linear-gradient(100deg,#0aa9ef,#064de6)}.solid .cta{background:linear-gradient(100deg,#ff9417,#ff4509)}
.cta small{display:block;font-weight:450;font-size:.81rem;opacity:.94}.arrow{font-size:1.9rem}
.disclaimer{display:flex;gap:16px;align-items:flex-start;margin-top:18px;padding:20px clamp(18px,4vw,36px);border:1px solid #dce5f1;border-radius:19px;background:linear-gradient(110deg,#e5ebf5,#f3f6fc)}
.shield{font-size:33px}.disclaimer h2{font-size:1.08rem;letter-spacing:0}.disclaimer p{margin:5px 0 0;color:#3e4f66;font-size:.85rem}
footer{text-align:center;color:#75849a;font-size:.78rem;padding:0 18px 24px}
@media(max-width:760px){header{padding:18px 14px}.logo{width:52px;height:52px;flex-basis:52px;border-radius:15px;font-size:20px}.header-inner{gap:12px;align-items:center}.brand{gap:10px}.headline{display:none}.grid{grid-template-columns:1fr;gap:15px}main{width:min(570px,calc(100% - 22px));margin-top:14px}.card{padding:19px;border-radius:20px}.showcase{grid-template-columns:minmax(0,1fr) 92px;gap:8px;min-height:0}.people{grid-template-columns:95px 1fr}.person-art{width:95px}.disclaimer{padding:17px;gap:11px}}
@media(max-width:480px){.header-inner{align-items:center}.brand{gap:8px}.logo{width:42px;height:42px;flex-basis:42px;font-size:16px;border-radius:12px}.brand-copy h1{font-size:clamp(1.15rem,5vw,1.5rem);letter-spacing:-.05em}.tagline{font-size:.68rem;margin-top:4px}.headline{display:none}}
@media(max-width:390px){h1{font-size:1.95rem}.tagline{font-size:.88rem}.showcase{grid-template-columns:minmax(0,1fr) 78px}.people{grid-template-columns:78px 1fr}.person-art{width:78px}}
@media(prefers-reduced-motion:reduce){.cta{transition:none}}

.platform-logo{padding:0;overflow:hidden;background:transparent!important}
.platform-logo img{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit}


.image-link{display:block;color:inherit;text-decoration:none;cursor:pointer}
.image-link:focus-visible{outline:3px solid #0878ef;outline-offset:4px}
.image-link:hover img{filter:brightness(1.035)}
.image-link img{transition:filter .18s ease}
@media(prefers-reduced-motion:reduce){.image-link img{transition:none}}

/* Reka3D: label apabila tetikus berada di atas gambar */
.image-link {
    position: relative;
    overflow: hidden;
}

.image-link::after {
    content: attr(data-hover-text);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(8, 38, 77, 0.76);
    color: #fff;
    font-size: clamp(16px, 2vw, 22px);
    font-weight: 700;
    text-align: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.image-link:hover::after,
.image-link:focus-visible::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .image-link::after {
        transition: none;
    }
}

/* Reka3D: kotak affiliate Shopee di bahagian kanan header */
.header-inner{align-items:center}
.affiliate-heading{margin-bottom:12px}
.affiliate-kicker{display:block;margin-bottom:3px;color:#8ce7ff;font-size:.64rem;font-weight:800;letter-spacing:.14em}
.affiliate-heading h2{color:#fff;font-size:clamp(.95rem,1.6vw,1.22rem);line-height:1.25;letter-spacing:-.02em}
.affiliate-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.affiliate-product{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;align-items:center;min-width:0;padding:9px;border:1px solid #ffffff22;border-radius:13px;background:#ffffff0d}
.affiliate-product-image{display:grid;place-items:center;width:76px;height:76px;overflow:hidden;border-radius:9px;background:#fff;text-decoration:none}
.affiliate-product-image img{display:block;width:100%;height:100%;object-fit:contain}
.affiliate-placeholder{font-size:2rem}
.affiliate-product-info{min-width:0}
.affiliate-category{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 6px;border-radius:5px;background:#ffffff1c;color:#b9e9ff;font-size:.62rem;font-weight:700}
.affiliate-product h3{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:5px 0 8px;color:#fff;font-size:.78rem;line-height:1.35;font-weight:700;overflow-wrap:anywhere}
.affiliate-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 9px;border-radius:7px;background:#ee4d2d;color:#fff;text-decoration:none;font-size:.7rem;font-weight:800;line-height:1.2}
.affiliate-button:hover{background:#ff6546;transform:translateY(-1px)}
.affiliate-button:focus-visible,.affiliate-product-image:focus-visible{outline:2px solid #8ce7ff;outline-offset:3px}
.affiliate-note{margin:10px 0 0;color:#d5e8ff;font-size:.65rem;line-height:1.4}
.affiliate-empty{padding:14px;border:1px dashed #ffffff45;border-radius:10px;color:#d5e8ff;font-size:.78rem}
@media(max-width:900px){
}
@media(max-width:520px){
}

/* Reka3D affiliate: satu produk berada DI DALAM setiap kad platform */
.header-inner{align-items:center}
.platform-affiliate{margin-top:18px;padding:13px;border:1px solid #ee4d2d35;border-radius:13px;background:linear-gradient(135deg,#fff,#fff8f4)}
.platform-affiliate-label{display:block;margin-bottom:9px;color:#d94324;font-size:.66rem;font-weight:800;letter-spacing:.1em}
.affiliate-card{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:center;min-width:0;padding:10px;border:1px solid #f2d8ce;border-radius:11px;background:#fff}
.affiliate-card-image{display:grid;place-items:center;width:88px;height:88px;overflow:hidden;border-radius:8px;background:#f7f8fa}
.affiliate-card-image img{display:block;width:100%;height:100%;object-fit:contain}
.affiliate-placeholder{font-size:2rem}
.affiliate-card-copy{min-width:0}
.affiliate-category{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 7px;border-radius:5px;background:#fff0e9;color:#b9381f;font-size:.64rem;font-weight:700}
.affiliate-card h3{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:6px 0 9px;color:#172b46;font-size:.86rem;line-height:1.35;font-weight:800;overflow-wrap:anywhere}
.affiliate-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 11px;border-radius:7px;background:#ee4d2d;color:#fff;text-decoration:none;font-size:.74rem;font-weight:800;line-height:1.2}
.affiliate-button:hover{background:#d94324;transform:translateY(-1px)}
.affiliate-button:focus-visible{outline:2px solid #0b70c9;outline-offset:3px}
.affiliate-note{margin:9px 0 0;color:#69788b;font-size:.66rem;line-height:1.45}
.affiliate-empty{padding:12px;border:1px dashed #e9b9a9;border-radius:9px;color:#69788b;font-size:.78rem;background:#fff}
@media(max-width:520px){
 .platform-affiliate{margin-top:15px;padding:10px}
 .affiliate-card{grid-template-columns:72px minmax(0,1fr);gap:10px;padding:8px}
 .affiliate-card-image{width:72px;height:72px}
 .affiliate-card h3{font-size:.82rem}
}


/* Harga daripada teks affiliate Shopee */
.affiliate-price{margin:-3px 0 9px;color:#d94324;font-size:.9rem;font-weight:800}