/* 1. Custom properties */
:root{--bg:#fff;--bg2:#f5f5f7;--text:#1d1d1f;--text2:#6e6e73;--accent:#0071e3;--line:#d2d2d7;
--s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2.5rem;--s5:4.5rem;--max:1120px;
--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
/* 2. Reset and base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
.skip{position:absolute;left:-999px}.skip:focus{left:var(--s2);top:var(--s2);background:#fff;padding:var(--s1);z-index:99}
/* 3. Typography */
h1{font-size:clamp(2.25rem,7vw,4.5rem);font-weight:600;line-height:1.05;letter-spacing:-.02em;margin:0 0 var(--s2)}
h2{font-weight:600;letter-spacing:-.01em;margin:0 0 var(--s2)}
h3{font-size:1.0625rem;font-weight:600;margin:var(--s2) 0 .25rem}
.lead{font-size:clamp(1.0625rem,2.4vw,1.375rem);color:var(--text2);margin:0 0 var(--s3);max-width:34em}
.muted{color:var(--text2);margin:0}
.price{font-weight:500;margin:.5rem 0 0}.price small{color:var(--text2);font-weight:400}
.big-price{font-size:1.75rem}
.sec{font-size:clamp(1.5rem,4vw,2rem)}
.note{background:var(--bg2);border-left:3px solid var(--accent);padding:var(--s2);margin:var(--s3) 0;font-size:.9375rem}
/* 4. Container and layout */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s3)}
.block{padding-top:var(--s5);padding-bottom:var(--s5)}
.alt{background:var(--bg2)}
/* 5. Header and navigation */
.site-header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.bar{display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand tools" "nav nav";align-items:center;column-gap:var(--s3);max-width:var(--max);margin:0 auto;padding:.5rem var(--s3) 0}
.wordmark{grid-area:brand;font-weight:700;font-size:1.25rem;letter-spacing:-.02em;margin:0;display:inline-flex;align-items:center;gap:.2rem}.wordmark span{font-weight:400}
.brand-logo{height:1.65rem;width:auto;display:inline-block;vertical-align:middle;object-fit:contain}
.site-nav{grid-area:nav;min-width:0;display:flex;gap:var(--s3);overflow-x:auto;white-space:nowrap;scrollbar-width:none;font-size:.9375rem}
.site-nav a,.tools a{padding:.6rem 0;display:inline-block;color:var(--text2)}
.site-nav a:hover,.tools a:hover{color:var(--text)}
[aria-current=page]{color:var(--text)!important;box-shadow:inset 0 -2px 0 var(--accent)}
.tools{grid-area:tools;justify-self:end;display:flex;gap:var(--s2);font-size:.9375rem}
/* 6. Buttons and links */
.actions{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;margin:0}
.btn{background:var(--accent);color:#fff;padding:.8rem 1.5rem;border-radius:980px;font-weight:500;display:inline-block;transition:background .2s}
.btn:hover{background:#0062c4}
.link{color:var(--accent);font-weight:500}.link:hover{text-decoration:underline}.link.inv{color:#6cb4ff}
a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
/* 7. Hero and editorial */
.hero{background:var(--bg2);padding:var(--s5) 0 var(--s4);text-align:center}
.hero-in{display:grid;gap:var(--s4);justify-items:center}.hero .lead{margin-inline:auto}.hero .actions{justify-content:center}
.editorial{padding:var(--s5) 0;text-align:center}.editorial h2{font-size:clamp(1.75rem,5vw,3.25rem);line-height:1.1}.editorial .lead{margin-inline:auto}.editorial .actions{justify-content:center;margin-bottom:var(--s4)}
.dark{background:var(--text);color:#fff}.dark .lead{color:#a1a1a6}
.split{background:#fff;text-align:left}.split-in{display:grid;gap:var(--s4);align-items:center}
.cathero{background:var(--bg2);padding:var(--s5) 0 var(--s4)}
.c-store .lead,.cathero .lead{margin-bottom:0}
.c-mac{background:var(--text);color:#fff}.c-mac .lead{color:#a1a1a6}
.c-watch,.c-accessories{background:#fff;border-bottom:1px solid var(--line)}
.c-airpods{background:var(--bg2);text-align:center}.c-airpods .lead{margin-inline:auto}
/* 8. Category navigation */
.category-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
.cat{background:var(--bg2);border-radius:18px;padding:var(--s3) var(--s2);text-align:center;font-weight:600;transition:transform .2s}
.cat:hover{transform:translateY(-3px)}
/* 9. Product cards and grids */
.product-grid{display:grid;grid-template-columns:1fr;gap:var(--s3);margin-bottom:var(--s4)}
.product-card a{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;padding:var(--s3);height:100%;transition:box-shadow .2s}
.alt .product-card a{border-color:transparent}
.product-card a:hover{box-shadow:0 6px 24px rgba(0,0,0,.08)}
.fig{aspect-ratio:4/3;display:grid;place-items:center;background:var(--bg2);border-radius:12px;overflow:hidden;position:relative}
.product-card .fig{background:transparent;padding:var(--s1)}
.cat .fig{background:transparent;padding:.25rem}
.fig.big{width:100%;max-width:560px;aspect-ratio:1/1;background:transparent}.dark .fig,.split .fig{aspect-ratio:16/10}
.fig.small{aspect-ratio:1/1;max-height:110px;margin:0 auto var(--s1)}
.dev{display:block;background:linear-gradient(160deg,#f2f2f4,#c7c7cc);border:2px solid #8e8e93;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.dev-phone{width:34%;aspect-ratio:9/19;border-radius:14%/7%}
.dev-laptop{width:62%;aspect-ratio:16/10;border-radius:6px 6px 2px 2px;border-bottom-width:8px}
.dev-tablet{width:56%;aspect-ratio:4/3;border-radius:6%}
.dev-watch{width:30%;aspect-ratio:1/1.15;border-radius:28%}
.dev-buds{width:22%;aspect-ratio:1/1.4;border-radius:50% 50% 45% 45%}
.dev-acc{width:34%;aspect-ratio:1/1;border-radius:50%}
.dark .dev,.c-mac .dev{border-color:#555}
/* 10. Product detail */
.crumb{font-size:.875rem;color:var(--text2);margin-bottom:var(--s3)}.crumb a:hover{color:var(--accent)}
.product-detail{display:grid;gap:var(--s4);margin-bottom:var(--s4)}
.product-detail .fig.big{background:var(--bg2);border-radius:18px;padding:var(--s2)}
dl{display:grid;grid-template-columns:max-content 1fr;gap:.4rem var(--s3);margin:var(--s3) 0}dt{color:var(--text2)}dd{margin:0}
.hl{display:grid;gap:var(--s2);margin-bottom:var(--s3)}.hl li{border-top:1px solid var(--line);padding-top:var(--s2)}
.svc{display:grid;gap:var(--s3)}
/* 11. Shopping bag */
.tablewrap{overflow-x:auto;margin:var(--s3) 0}
table{width:100%;border-collapse:collapse;min-width:520px}th,td{text-align:left;padding:var(--s2);border-bottom:1px solid var(--line)}
tfoot th,tfoot td{font-weight:600;border-bottom:0}
.info{border:1px solid var(--line);border-radius:12px;padding:var(--s2);margin:var(--s3) 0}.info summary{cursor:pointer;font-weight:500}
/* 12. Footer */
.site-footer{background:var(--bg2);padding:var(--s4) 0;font-size:.875rem;color:var(--text2)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}.fgrid h2{font-size:.875rem;color:var(--text)}.fgrid li{margin-bottom:.4rem}.fgrid a:hover{color:var(--text)}
.fgrid>div:first-child{grid-column:1/-1}.site-footer .wordmark{color:var(--text)}
.legal{border-top:1px solid var(--line);padding-top:var(--s2);margin-top:var(--s3)}
/* 13. Responsive breakpoints */
@media(min-width:768px){
.bar{grid-template-columns:1fr auto 1fr;grid-template-areas:"brand nav tools";padding-top:0;min-height:3.5rem}.site-nav{justify-content:center}
.category-grid{grid-template-columns:repeat(3,1fr)}.product-grid{grid-template-columns:repeat(2,1fr)}
.split-in{grid-template-columns:1fr 1fr}.product-detail{grid-template-columns:1fr 1fr;align-items:start}
.svc{grid-template-columns:repeat(2,1fr)}.fgrid{grid-template-columns:1.4fr 1fr 1fr 1fr}.fgrid>div:first-child{grid-column:auto}}
@media(min-width:1024px){.category-grid{grid-template-columns:repeat(6,1fr)}.product-grid{grid-template-columns:repeat(3,1fr)}.svc{grid-template-columns:repeat(4,1fr)}
.hero-in{grid-template-columns:1fr 1fr;text-align:left;justify-items:start}.hero .actions{justify-content:flex-start}.hero .lead{margin-inline:0}}
/* 14. Accessibility and reduced motion */
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* 15. Foto produk nyata & backwards compatibility */
.product-img{width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain;object-position:center;display:block;margin:auto;mix-blend-mode:multiply;transition:transform .3s ease;position:relative;z-index:2}
.dark .fig{aspect-ratio:auto;max-width:560px;margin:var(--s3) auto 0;overflow:visible}
.dark .product-img{mix-blend-mode:normal;background:#fff;border-radius:20px;padding:var(--s3);width:100%;max-width:480px;height:auto;aspect-ratio:16/11;object-fit:contain;box-shadow:0 16px 40px rgba(0,0,0,.35)}
.product-card a:hover .product-img{transform:scale(1.04)}
.cat:hover .product-img{transform:scale(1.08)}
.fig:has(.product-img) .dev{display:none}
.fig[style*="--img"] .dev{display:none}
.fig::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:var(--img);background-position:center;background-size:contain;background-repeat:no-repeat;pointer-events:none;z-index:2}

/* 16. Navbar "Dynamic Island": header menyusut jadi pill putih saat halaman di-scroll.
   Murni CSS (scroll-driven animation). Browser tanpa dukungan tetap memakai header biasa. */
@property --k{syntax:"<number>";inherits:true;initial-value:0}
@keyframes island{from{--k:0}to{--k:1}}
@supports (animation-timeline:scroll()) and (color:color-mix(in srgb,red,blue)){
.site-header{animation:island linear both;animation-timeline:scroll(root);animation-range:0 140px;
background:rgba(255,255,255,calc(.96*(1 - var(--k))));
border-bottom-color:color-mix(in srgb,var(--line) calc((1 - var(--k))*100%),transparent);
padding-top:calc(var(--k)*10px)}
.bar{margin-inline:auto;padding-bottom:calc(var(--k)*.4rem);
border-radius:calc(var(--k)*999px);
background:rgba(255,255,255,calc(var(--k)*.94));
-webkit-backdrop-filter:blur(calc(var(--k)*16px));backdrop-filter:blur(calc(var(--k)*16px));
box-shadow:0 0 0 calc(var(--k)*1px) rgba(0,0,0,.08),0 10px 30px rgba(0,0,0,calc(var(--k)*.14))}
.wordmark span{display:inline-block;overflow:hidden;white-space:nowrap;max-width:calc((1 - var(--k))*4rem);opacity:calc(1 - var(--k))}
.site-nav{gap:calc(var(--s3) - var(--k)*.5rem)}
@media(max-width:767px){.bar{margin-inline:calc(var(--k)*.5rem);border-radius:calc(var(--k)*28px)}}
@media(min-width:768px){
.bar{max-width:calc(var(--max) - var(--k)*(var(--max) - 760px));min-height:calc(3.5rem - var(--k)*.75rem);padding-inline:calc(var(--s3) + var(--k)*.75rem)}}
}