/* ==========================================================================
   MTD Performance - home.css
   index.html only, loaded after site.css and pages.css. Everything the
   restyle's new front-page sections need and nothing else: the product
   carousel, the Electrical Upgrade Series feature block with its photo row
   and callout, the use-case cards, the function rows, the specification
   sheet and the warranty card.

   The shared decoration utilities (.section--pattern, .aura-top, .glow-r,
   .glow-l, .h-bar) belong to site.css and the hero belongs to pages.css.
   Nothing here redeclares either; section 0 below says what this file leans
   on and the two small places it extends.

   Table of contents
    0. What this file does not own (site.css and pages.css do)
    1. 01 PRODUK UNGGULAN: the carousel
    2. 02 ELECTRICAL UPGRADE SERIES: feature, photo row, callout
    3. 04 DAPAT DIGUNAKAN PADA: use cards and the function rows
    4. 05 SPESIFIKASI: the sheet and the fit card
    5. 06 GARANSI: the warranty card
    6. Living elements, short screens, reduced motion
   ========================================================================== */


/* ==========================================================================
   0. What this file does NOT own
   site.css carries the five shared decoration utilities this page reaches for
   by name (.section--pattern, .aura-top, .glow-r, .glow-l, .h-bar) and
   pages.css carries the hero's centred composition (.hs-copy, .hs-headline,
   .hl-red and the rest of section 4.1 of the brief). Nothing below redeclares
   any of them. The only additions here are the two places this page needs a
   utility to behave slightly differently: the red bar heading wants the
   reference's h3 register rather than the page's display h2 scale, and two of
   those headings carry a shield icon, which needs a flex line.

   .glow-r and .glow-l are drawn on the ::after of the block they are put on,
   so they are classes on .feature-split and .spec-split in the markup, never
   empty spans.
   ========================================================================== */

#penggunaan .h-bar,
#spesifikasi .h-bar,
#garansi .h-bar{
  font-family:var(--display);
  font-size:clamp(20px,1.7vw,25px);
  font-weight:700;font-style:normal;
  line-height:1.2;
  letter-spacing:.004em;
}
#garansi .h-bar--sub{font-size:clamp(17px,1.2vw,19px)}

/* the two shield headings in Garansi: the bar stays where .h-bar puts it and
   the icon rides the line in front of the words */
.h-bar--ico{display:flex;align-items:center;gap:10px}
.h-ico{
  flex:none;width:24px;height:24px;
  display:inline-flex;align-items:center;justify-content:center;
}
.h-ico svg{width:21px;height:21px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linejoin:round}



/* ==========================================================================
   1. 01 PRODUK UNGGULAN: the carousel
   A scroll-snap track. Four cards at 1240, three from 1000, two from 720,
   1.2 below it. No autoplay: the arrows and the keyboard move it, nothing
   else does.
   ========================================================================== */

.carousel{position:relative}

.carousel-track{
  --pc-gap:18px;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 3 * var(--pc-gap)) / 4);
  gap:var(--pc-gap);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-block:4px 18px;
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
  overscroll-behavior-x:contain;
}
.carousel-track::-webkit-scrollbar{height:6px}
.carousel-track::-webkit-scrollbar-track{background:transparent}
.carousel-track::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
.carousel-track:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.pcard{
  scroll-snap-align:start;
  position:relative;
  display:flex;flex-direction:column;
  min-width:0;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  color:var(--text-primary);
  text-decoration:none;
  transition:transform .4s var(--ease-out),border-color .4s var(--ease-out),
             box-shadow .4s var(--ease-out);
}
.pcard:hover{
  transform:translateY(-3px);
  border-color:var(--line-strong);
  box-shadow:0 26px 48px -32px rgba(0,0,0,.95);
}
.pcard:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.pcard-media{
  display:block;position:relative;
  aspect-ratio:1;
  background:#0a0a0a;
  overflow:hidden;
}
.pcard-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease-out);
}
.pcard:hover .pcard-media img{transform:scale(1.04)}

.pcard-body{
  display:flex;flex-direction:column;gap:10px;
  padding:16px 16px 18px;
  flex:1 1 auto;
}
.pcard-name{
  font-family:var(--body);font-weight:600;font-size:15px;line-height:1.35;
  color:var(--text-secondary);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(2 * 1.35em);
}
.pcard:hover .pcard-name{color:var(--text-primary)}
.pcard-price{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-weight:600;font-size:15px;color:var(--text-primary);
  margin-top:auto;
}
.pcard-was{
  color:var(--accent-label);
  font-weight:400;font-size:.82em;
  margin-left:.6em;
  text-decoration:line-through;
}
.pcard-ask{
  font-family:var(--mono);font-size:13px;letter-spacing:.03em;
  color:var(--accent-label);font-weight:600;margin-top:auto;
}

.pcard-go{
  position:absolute;right:12px;top:12px;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);
  border:1px solid var(--line-strong);
  opacity:0;
  transition:opacity .3s var(--ease-out),border-color .3s var(--ease-out);
}
.pcard-go svg{width:15px;height:15px;fill:none;stroke:var(--text-primary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pcard:hover .pcard-go,.pcard:focus-visible .pcard-go{opacity:1;border-color:var(--accent)}

/* the two round 44px controls. They scroll the track by one card. */
.carousel-arrow{
  position:absolute;top:calc(50% - 34px);z-index:3;
  width:44px;height:44px;
  transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-interactive);border-radius:50%;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--text-primary);
  cursor:pointer;
  transition:color .26s var(--ease-out),border-color .26s var(--ease-out),
             background-color .26s var(--ease-out),opacity .26s var(--ease-out);
}
.carousel-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.carousel-arrow:hover{border-color:var(--accent);background:rgba(0,0,0,.9)}
.carousel-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.carousel-arrow[disabled]{opacity:.3;cursor:default}
.carousel-arrow[disabled]:hover{border-color:var(--line-interactive);background:rgba(0,0,0,.72)}
.carousel-prev{left:-6px}
.carousel-next{right:-6px}

@media (max-width:1239px){
  .carousel-track{grid-auto-columns:calc((100% - 2 * var(--pc-gap)) / 3)}
}
@media (max-width:999px){
  .carousel-track{grid-auto-columns:calc((100% - var(--pc-gap)) / 2)}
}
@media (max-width:719px){
  .carousel-track{--pc-gap:14px;grid-auto-columns:78%}
  .carousel-prev{left:-4px}
  .carousel-next{right:-4px}
  .pcard-name{font-size:14.5px}
}

.section-foot{margin-top:clamp(28px,3vw,40px)}


/* ==========================================================================
   2. 02 ELECTRICAL UPGRADE SERIES
   Copy left, the installed unit right under one red glow; then the three
   photo cards, then the callout bar.
   ========================================================================== */

.feature-split{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(30px,4vw,56px);
  align-items:center;
}
@media (min-width:900px){
  .feature-split{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr)}
}

.feature-h{
  font-family:var(--display);
  font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:clamp(34px,4.4vw,56px);
  letter-spacing:-.01em;
  line-height:1.02;
  padding-bottom:.06em;
}
.feature-copy .lede{margin-top:20px;max-width:56ch}
.feature-copy .btn-row{margin-top:28px}

.feature-media{position:relative}
.feature-frame{
  position:relative;
  margin:0;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
  aspect-ratio:1.12;
}
.feature-frame img{width:100%;height:100%;object-fit:cover;display:block}
.pill-best{
  position:absolute;top:14px;left:14px;z-index:2;
  padding:7px 12px;border-radius:8px;
  background:var(--accent-fill);
  color:#fff;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;
}

/* --- the three photo cards ------------------------------------------- */

.photo-row{
  margin-top:clamp(40px,5vw,72px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
}
@media (max-width:860px){.photo-row{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.photo-row{grid-template-columns:1fr}}

.photo-card{
  position:relative;
  margin:0;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:var(--panel);
}
.photo-card img{
  display:block;width:100%;height:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
  transition:transform .7s var(--ease-out);
}
.photo-card:hover img{transform:scale(1.03)}
/* the source photographs carry the catalog's own burned-in captions along
   their bottom edge, so the band has to do two jobs: carry our caption at
   4.5:1 and put the printed line behind it out of the way. Measured on the
   composited pixels of all seven cards with our own caption hidden, the
   brightest pixel anywhere on a caption glyph row is luminance .053, which
   is 10.2:1 for the white label. */
.photo-card figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:64px 16px 16px;
  font-family:var(--body);font-weight:600;font-size:15px;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
  background:linear-gradient(to top,
    rgba(0,0,0,.97) 0%,rgba(0,0,0,.93) 26%,rgba(0,0,0,.72) 48%,
    rgba(0,0,0,.34) 72%,rgba(0,0,0,0) 100%);
  pointer-events:none;
}

/* --- the callout bar -------------------------------------------------- */

.callout{
  margin-top:clamp(34px,4vw,56px);
  display:flex;align-items:center;gap:18px;
  padding:20px clamp(18px,2.2vw,28px);
  border:1px solid rgba(233,32,42,.6);
  border-radius:12px;
  background:#000;
}
.callout-ico{
  flex:none;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--accent);
  background:rgba(233,32,42,.12);
}
.callout-ico svg{width:20px;height:20px;fill:var(--accent-label)}
.callout p{
  margin:0;
  color:var(--text-primary);
  font-size:clamp(14.5px,.3vw + 14px,16px);
  line-height:1.65;
  max-width:88ch;
}
.callout strong{font-weight:600;color:#fff}
@media (max-width:520px){
  .callout{flex-direction:column;align-items:flex-start;gap:14px}
}


/* ==========================================================================
   3. 04 DAPAT DIGUNAKAN PADA: the four use cards and the function rows
   ========================================================================== */

#penggunaan .kicker{margin-bottom:26px}

.use-row{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
}
@media (max-width:900px){.use-row{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.use-row{grid-template-columns:1fr}}

.fn-head{margin-top:clamp(44px,5vw,74px)}

.fn-grid{
  margin-top:22px;
  list-style:none;padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:820px){.fn-grid{grid-template-columns:1fr}}

.fn-row{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  color:var(--text-primary);
  font-size:15px;
  line-height:1.5;
}
.fn-check{
  flex:none;
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-fill);
}
.fn-check svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fn-check--sm{width:22px;height:22px}
.fn-check--sm svg{width:13px;height:13px}


/* ==========================================================================
   4. 05 SPESIFIKASI: the sheet and the fit card
   ========================================================================== */

#spesifikasi .kicker{margin-bottom:26px}

.spec-split{
  display:grid;grid-template-columns:1fr;
  gap:clamp(18px,2.2vw,28px);
  align-items:start;
}
@media (min-width:900px){
  .spec-split{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
}

.spec-card,.fit-card{
  border-radius:12px;
  background:var(--panel);
  padding:clamp(20px,2.4vw,30px);
}
.spec-card{border:1px solid var(--accent)}
.fit-card{border:1px solid var(--line-strong)}

.spec-sheet{
  width:100%;
  margin-top:22px;
  border-collapse:collapse;
  font-size:14px;
}
.spec-sheet th,.spec-sheet td{
  padding:13px 0;
  border-bottom:1px solid var(--line);
  vertical-align:baseline;
}
.spec-sheet tr:last-child th,
.spec-sheet tr:last-child td{border-bottom:0}
.spec-sheet th{
  text-align:left;
  font-family:var(--body);font-weight:400;
  color:var(--text-secondary);
  white-space:nowrap;
  padding-right:16px;
}
.spec-sheet td{
  text-align:right;
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-weight:600;
  color:var(--text-primary);
}

.dot-list{
  list-style:none;margin:22px 0 0;padding:0;
  display:flex;flex-direction:column;gap:14px;
}
.dot-list li{
  display:flex;gap:12px;align-items:baseline;
  color:var(--text-primary);font-size:15px;line-height:1.55;
}
.dot-list li::before{
  content:"";flex:none;
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
  transform:translateY(-2px);
}


/* ==========================================================================
   5. 06 GARANSI: one card, the shield heads, the return terms under them
   ========================================================================== */

#garansi .kicker{margin-bottom:26px}

.warranty-card{
  border:1px solid var(--line-strong);
  border-radius:12px;
  background:var(--panel);
  padding:clamp(22px,2.6vw,34px);
}
.h-bar--sub{margin-top:clamp(26px,3vw,38px)}

.check-list{
  list-style:none;margin:18px 0 0;padding:0;
  display:flex;flex-direction:column;gap:13px;
}
.check-list li{
  display:flex;gap:12px;align-items:flex-start;
  color:var(--text-primary);font-size:15px;line-height:1.6;
}

.retur-block{
  margin-top:clamp(28px,3.2vw,40px);
  padding-top:24px;
  border-top:1px solid var(--line);
}
.retur-block h3{
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-label);
  font-stretch:normal;
}
.retur-block ul{
  list-style:none;margin:16px 0 0;padding:0;
  display:flex;flex-direction:column;gap:10px;
}
.retur-block li{
  position:relative;
  padding-left:18px;
  color:var(--text-secondary);
  font-size:14.5px;line-height:1.6;
}
.retur-block li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:1px;background:var(--accent-muted);
}


/* ==========================================================================
   6. Living elements, short screens, reduced motion
   One whisper-level cycle for this file, on the callout's icon ring, paused
   off-screen by .anim-on and on hidden tabs by body.paused, exactly like
   every other living element on the page.
   ========================================================================== */

.callout-ico::after{
  content:"";position:absolute;
  width:44px;height:44px;border-radius:50%;
  box-shadow:0 0 0 6px rgba(233,32,42,.16);
  opacity:0;
}
.callout-ico{position:relative}
.anim-on .callout-ico::after{
  animation:callout-ring 7s var(--ease-in-out) infinite;
  animation-delay:-2.3s;
}
@keyframes callout-ring{0%,100%{opacity:0}50%{opacity:1}}

/* the entrance retirement the standard asks for: once a stagger has run,
   the delays go, so a hover on the third card never lags behind the second */
.stagger.in.done > .pcard,
.stagger.in.done > .photo-card,
.stagger.in.done > .fn-row{transition-delay:0ms}

@media (prefers-reduced-motion:reduce){
  .carousel-track{scroll-behavior:auto}
  .callout-ico::after{display:none}
  .pcard-go{opacity:1}
}
body.pinned .callout-ico::after{display:none}
body.pinned .pcard-go{opacity:1}

/* ==========================================================================
   Series blocks (Nitro, Dudukan Plat, Stoplamp): the feature heading over a
   grid of product cards that reuse the carousel card, plus the fitment chips.
   ========================================================================== */
.series-head{max-width:880px}
.series-head .lede{margin-top:20px;max-width:64ch}
.series-grid{
  margin-top:clamp(28px,3.4vw,44px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
}
.series-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.series-card .pcard-body{gap:8px}
.series-name{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.1;color:var(--text-primary)}
.series-tag{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--accent-label)}
.series-desc{font-size:14.5px;line-height:1.55;color:var(--text-secondary)}
.series-card:hover .series-desc{color:var(--text-primary)}
.series-go{
  display:inline-flex;align-items:center;gap:8px;margin-top:6px;
  font-family:var(--body);font-weight:600;font-size:14px;color:var(--text-primary);
}
.series-go svg{width:16px;height:16px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease-out)}
.series-card:hover .series-go svg{transform:translateX(4px)}
.model-pick{margin-top:clamp(24px,3vw,36px)}
.model-pick-label{margin:0 0 12px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.model-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.model-chip{
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--panel);color:var(--text-primary);
  font-family:var(--body);font-weight:600;font-size:14px;text-decoration:none;
  transition:border-color .3s var(--ease-out),background-color .3s var(--ease-out),transform .3s var(--ease-out);
}
.model-chip:hover{border-color:var(--accent);background:var(--panel-2);transform:translateY(-2px)}
.model-chip:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:1000px){.series-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.series-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.series-grid,.series-grid--4{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.model-chip:hover,.series-card:hover .series-go svg{transform:none}}