/* ============================================================
   Alpha Computer Grobogan — Modern Theme 2026
   Palet: navy #0f2440 · orange #f5822a · ice #e9f3fb
   ============================================================ */

:root{
  --navy:#0f2440;
  --navy-2:#173a63;
  --navy-3:#2a4d75;
  --orange:#f5822a;
  --orange-2:#d9691a;
  --orange-3:#ffb26b;
  --ice:#e9f3fb;
  --ice-2:#c9e2f7;
  --ink:#0f1e35;
  --muted:#6b7a90;
  --line:#e6ecf3;
  --soft:#f6f9fc;
  --green:#16a34a;
  --green-soft:#e7f7ee;
  --radius:16px;
  --radius-lg:24px;
  --radius-xl:32px;
  --shadow-sm:0 1px 2px rgba(15,36,64,.06);
  --shadow:0 6px 20px rgba(15,36,64,.08);
  --shadow-lg:0 18px 45px rgba(15,36,64,.14);
  --shadow-orange:0 10px 28px rgba(245,130,42,.32);
  --maxw:1280px;
  --pad:clamp(16px,3vw,32px);
  --t:.22s cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}

/* ============================================================
   BODY + ANIMATED BACKGROUND
   ============================================================ */
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15.5px;line-height:1.6;
  color:var(--ink);
  background:linear-gradient(-45deg,#eaf4fb 0%,#f5f9fd 35%,#fff7ed 70%,#ffe9d1 100%);
  background-size:400% 400%;
  animation:gradientShift 22s ease infinite;
  position:relative;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

@keyframes gradientShift{
  0%   {background-position:0% 50%}
  50%  {background-position:100% 50%}
  100% {background-position:0% 50%}
}

/* Blob dekorasi mengambang */
body::before,
body::after{
  content:"";position:fixed;border-radius:50%;
  filter:blur(90px);opacity:.5;pointer-events:none;z-index:0;
}
body::before{
  width:520px;height:520px;
  background:radial-gradient(circle,rgba(245,130,42,.4) 0%,transparent 70%);
  top:-120px;left:-120px;
  animation:blobFloat 24s ease-in-out infinite;
}
body::after{
  width:620px;height:620px;
  background:radial-gradient(circle,rgba(42,77,117,.38) 0%,transparent 70%);
  bottom:-180px;right:-180px;
  animation:blobFloat 30s ease-in-out infinite reverse;
}
@keyframes blobFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  33%    {transform:translate(80px,-60px) scale(1.15)}
  66%    {transform:translate(-60px,80px) scale(.9)}
}

/* Bubbles naik */
.bg-bubbles{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-bubbles span{
  position:absolute;bottom:-150px;border-radius:50%;
  background:rgba(245,130,42,.14);
  animation:bubbleUp linear infinite;
}
.bg-bubbles span:nth-child(1){left:6%;width:40px;height:40px;animation-duration:18s;animation-delay:0s}
.bg-bubbles span:nth-child(2){left:20%;width:24px;height:24px;animation-duration:22s;animation-delay:2s;background:rgba(42,77,117,.16)}
.bg-bubbles span:nth-child(3){left:36%;width:56px;height:56px;animation-duration:26s;animation-delay:4s}
.bg-bubbles span:nth-child(4){left:52%;width:32px;height:32px;animation-duration:20s;animation-delay:1s;background:rgba(42,77,117,.14)}
.bg-bubbles span:nth-child(5){left:66%;width:48px;height:48px;animation-duration:24s;animation-delay:3s}
.bg-bubbles span:nth-child(6){left:80%;width:28px;height:28px;animation-duration:28s;animation-delay:5s;background:rgba(42,77,117,.18)}
.bg-bubbles span:nth-child(7){left:92%;width:36px;height:36px;animation-duration:21s;animation-delay:2.5s}

@keyframes bubbleUp{
  0%  {transform:translateY(0) scale(.6);opacity:0}
  20% {opacity:.7}
  100%{transform:translateY(-110vh) scale(1.1);opacity:0}
}

/* Konten di atas background */
header,main,footer,.top-strip{position:relative;z-index:1}

/* ---------- RESET & TIPOGRAFI ---------- */
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none;transition:color var(--t)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid rgba(245,130,42,.45);outline-offset:3px;border-radius:8px;
}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(28px,4.5vw,52px);line-height:1.1;letter-spacing:-.02em;font-weight:800}
h2{font-size:clamp(22px,3vw,34px);line-height:1.2;letter-spacing:-.015em;font-weight:800}
h3{font-size:1.05rem;line-height:1.35;font-weight:700}

/* ---------- TOP STRIP ---------- */
.top-strip{
  background:linear-gradient(90deg,var(--navy),var(--navy-2));
  color:#dbe6f4;font-size:11.5px;letter-spacing:.4px;
  padding:9px var(--pad);
  display:flex;justify-content:space-between;gap:16px;
}
.top-strip b{color:#fff;font-weight:700}

/* ---------- HEADER ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  padding:14px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.05rem;color:var(--navy);letter-spacing:-.01em}
.brand img{height:44px;width:auto;border-radius:10px;object-fit:contain}
.brand span{display:flex;flex-direction:column;line-height:1.15}
.brand small{font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.3px;margin-top:2px}
nav{display:flex;align-items:center;gap:6px}
nav>a{padding:9px 14px;border-radius:10px;font-size:14px;font-weight:600;color:var(--navy-2);transition:background var(--t),color var(--t)}
nav>a:hover{background:var(--soft);color:var(--orange-2)}

/* ---------- MAIN ---------- */
main{max-width:var(--maxw);margin:0 auto;padding:28px var(--pad) 64px}

/* ---------- BUTTONS ---------- */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;min-height:46px;
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  color:#fff;font-weight:700;font-size:14px;
  border-radius:12px;border:0;white-space:nowrap;
  box-shadow:0 6px 16px rgba(15,36,64,.18),inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform var(--t),box-shadow var(--t),background var(--t);
}
.button:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(15,36,64,.25)}
.button:active{transform:translateY(0)}
.button.outline{background:transparent;color:var(--navy);border:1.5px solid var(--navy);box-shadow:none}
.button.outline:hover{background:var(--navy);color:#fff}
.button.small{min-height:38px;padding:8px 16px;font-size:13px}

/* Tombol orange (dipakai di filter & about) */
.button.orange{
  background:linear-gradient(135deg,var(--orange),#ff9640);
  box-shadow:var(--shadow-orange),inset 0 1px 0 rgba(255,255,255,.25);
}
.button.orange:hover{filter:brightness(1.08);box-shadow:0 14px 36px rgba(245,130,42,.42)}

/* ---------- EYEBROW ---------- */
.eyebrow{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.18em;
  color:var(--orange-2);text-transform:uppercase;margin-bottom:10px;
}

/* ---------- CAROUSEL ---------- */
.carousel{position:relative;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:64px;background:var(--navy);box-shadow:var(--shadow-lg)}
.carousel::after{
  content:"";position:absolute;bottom:-32px;left:0;right:0;
  height:60px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0,30 C360,60 720,0 1080,30 C1260,45 1380,40 1440,30 L1440,60 L0,60 Z' fill='%23ffffff'/></svg>") no-repeat center;
  background-size:100% 100%;
  pointer-events:none;
}
.store-slide{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:24px;padding:clamp(28px,4vw,56px);min-height:420px;position:relative}
.store-slide[hidden]{display:none}

.theme-navy{background:radial-gradient(circle at 78% 22%, var(--navy-3) 0%, var(--navy-2) 40%, var(--navy) 100%);color:#fff}
.theme-navy h1,.theme-navy h2,.theme-navy p{color:#fff}
.theme-navy .eyebrow{color:#f9b478}
.theme-orange{background:linear-gradient(135deg,#fff3e6 0%,#ffd9b0 100%);color:#4a2f12}
.theme-orange .eyebrow{color:#b85510}
.theme-ice{background:linear-gradient(135deg,var(--ice) 0%,var(--ice-2) 100%);color:var(--navy)}
.theme-ice .eyebrow{color:#1f6fb8}

.slide-copy{z-index:2;position:relative}
.slide-copy h1{font-size:clamp(28px,4vw,50px);max-width:600px;margin-bottom:16px}
.slide-copy p{font-size:1rem;opacity:.86;max-width:520px;margin-bottom:24px;line-height:1.55}
.slide-copy .button{background:#fff;color:var(--navy);box-shadow:0 8px 22px rgba(0,0,0,.18)}
.slide-copy .button:hover{background:#f6f9fc}
.theme-orange .slide-copy .button{background:var(--navy);color:#fff}
.theme-orange .slide-copy .button:hover{background:var(--navy-2)}
.slide-copy small{display:block;font-size:11.5px;opacity:.72;margin-top:16px;letter-spacing:.02em}

.slide-image{position:relative;display:flex;align-items:center;justify-content:center;min-height:280px}
.slide-image img{position:relative;z-index:2;max-height:clamp(180px,28vw,320px);width:auto;filter:drop-shadow(0 24px 22px rgba(0,0,0,.28))}
.image-halo{position:absolute;inset:8% 12%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 70%);z-index:1}
.theme-ice .image-halo{background:radial-gradient(circle,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 70%)}

.carousel-controls{position:absolute;left:clamp(20px,4vw,56px);right:clamp(16px,3vw,32px);bottom:18px;display:flex;justify-content:space-between;align-items:center;gap:16px;z-index:3;color:#fff}
.theme-orange .carousel-controls,.theme-ice .carousel-controls{color:var(--navy)}
.dots{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.28);backdrop-filter:blur(8px);padding:8px 12px;border-radius:999px}
.theme-orange .dots,.theme-ice .dots{background:rgba(255,255,255,.55)}
.dots button{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.55);transition:width var(--t),background var(--t)}
.theme-orange .dots button,.theme-ice .dots button{background:rgba(15,36,64,.25)}
.dots button[aria-current="true"]{width:22px;background:#fff}
.theme-orange .dots button[aria-current="true"],.theme-ice .dots button[aria-current="true"]{background:var(--navy)}
.slide-tools{display:flex;align-items:center;gap:4px;background:rgba(0,0,0,.28);backdrop-filter:blur(8px);padding:5px 8px;border-radius:999px;font-size:12px}
.theme-orange .slide-tools,.theme-ice .slide-tools{background:rgba(255,255,255,.55)}
.slide-tools button{color:inherit;padding:5px 9px;border-radius:8px;font-size:12px;font-weight:600;transition:background var(--t)}
.slide-tools button:hover{background:rgba(255,255,255,.18)}
.theme-orange .slide-tools button:hover,.theme-ice .slide-tools button:hover{background:rgba(15,36,64,.1)}

/* ---------- SERVICE STRIP ---------- */
.service-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0 36px}
.service-strip>div{display:flex;align-items:center;gap:14px;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.service-strip>div:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--orange-3)}
.service-icon{flex-shrink:0;width:48px;height:48px;display:grid;place-items:center;background:linear-gradient(135deg,#fff1e2,#ffe0c2);color:var(--orange-2);font-size:1.3rem;font-weight:800;border-radius:14px}
.service-strip strong{display:block;font-size:14px;font-weight:700;margin-bottom:2px}
.service-strip small{display:block;font-size:12px;color:var(--muted)}

/* ---------- CATEGORY TILES ---------- */
.category-tiles{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:36px 0}
.category-tiles a{position:relative;display:block;padding:32px;border-radius:var(--radius-lg);background:linear-gradient(135deg,#f1f6fb,#e4edf6);border:1px solid #dbe6f2;transition:transform var(--t),box-shadow var(--t);overflow:hidden}
.category-tiles a::after{content:"→";position:absolute;right:24px;bottom:20px;font-size:22px;opacity:.25;font-weight:300;transition:transform var(--t),opacity var(--t)}
.category-tiles a:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.category-tiles a:hover::after{transform:translateX(6px);opacity:.6}
.category-tiles a:nth-child(2){background:linear-gradient(135deg,#fff5eb,#ffe3c4);border-color:#ffe2c2}
.category-tiles span{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--orange-2);margin-bottom:12px;text-transform:uppercase}
.category-tiles h2{font-size:clamp(20px,2.4vw,26px);margin-bottom:14px;color:var(--navy)}
.category-tiles strong{font-size:13px;color:var(--navy);font-weight:700}

/* ---------- SECTION HEAD ---------- */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:36px 0 18px;flex-wrap:wrap}
.section-head h2{margin:0}
.section-head .eyebrow{margin-bottom:8px}
.muted,.updated{color:var(--muted);font-size:12.5px}
.updated{margin:14px 0 22px}

/* ---------- FILTERS ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;padding:14px;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:8px}
.filters input,.filters select{border:1px solid #d9e2ed;background:#fff;padding:12px 14px;border-radius:10px;min-height:46px;font-size:14px;transition:border var(--t),box-shadow var(--t)}
.filters input{flex:1 1 220px;min-width:180px}
.filters select{flex:0 1 auto}
.filters input:focus,.filters select:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(245,130,42,.15);outline:none}
.filters button{flex-shrink:0}

/* ---------- PRODUCT GRID ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.product{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.product:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:#d2deee}
.product-photo{position:relative;aspect-ratio:1.15;background:linear-gradient(135deg,#f6f9fc,#e9f1fa);display:flex;align-items:center;justify-content:center;padding:16px;overflow:hidden}
.product-photo img{width:100%;height:100%;object-fit:contain;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.product:hover .product-photo img{transform:scale(1.06)}
.no-photo{display:flex;flex-direction:column;align-items:center;gap:6px;color:#a3b3c6;font-size:2.4rem}
.no-photo span{font-size:11px}
.badge{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.04em;background:var(--green-soft);color:#166534;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.badge.gray{background:#e5eaf1;color:#475569}
.badge.green{background:var(--green-soft);color:#166534}
.badge.yellow{background:#fff3cf;color:#836319}
.badge.red{background:#fde6e5;color:#b33c3a}
.badge.amber{background:#fff3cf;color:#836319}
.product-info{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1;gap:6px}
.product-info small{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.product-info h3{font-size:1rem;color:var(--navy);margin:2px 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.product-info p{font-size:12.5px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.price{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:1.05rem;font-weight:800;color:var(--navy)}
.price span{font-size:11.5px;font-weight:500;color:var(--muted)}

/* ---------- EMPTY / PAGINATION ---------- */
.empty{text-align:center;padding:56px 24px;background:var(--soft);border:1px dashed var(--line);border-radius:var(--radius)}
.pagination{display:flex;justify-content:center;gap:6px;margin:32px 0 0;flex-wrap:wrap}
.pagination a{min-width:40px;height:40px;display:grid;place-items:center;padding:0 12px;border-radius:10px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:13.5px;transition:background var(--t),color var(--t),border-color var(--t)}
.pagination a:hover{background:var(--soft);border-color:#cbd7e6}
.pagination a[aria-current="page"],.pagination a[aria-current]{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------- ABOUT ---------- */
.about{margin-top:48px;padding:clamp(28px,4vw,52px);background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;border-radius:var(--radius-lg);text-align:center;position:relative;overflow:hidden}
.about::before{content:"";position:absolute;inset:-40% -20% auto auto;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(245,130,42,.25),transparent 70%);pointer-events:none}
.about .eyebrow{color:#f9b478}
.about h2{color:#fff;max-width:720px;margin:0 auto 14px}
.about p{max-width:640px;margin:0 auto 22px;color:#dbe6f4;opacity:.9}
.about .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.about .button{background:#fff;color:var(--navy);box-shadow:0 8px 22px rgba(0,0,0,.2)}
.about .button:hover{background:#f6f9fc}
.about .button.outline{background:transparent;color:#fff;border-color:#fff}
.about .button.outline:hover{background:#fff;color:var(--navy)}

/* ============================================================
   FOOTER 3 KOLOM MODERN
   ============================================================ */
footer{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);
  color:#c7d4e3;
  padding:56px var(--pad) 24px;
  margin-top:64px;
  position:relative;
  overflow:hidden;
}
footer::before{
  content:"";position:absolute;top:-50%;right:-10%;
  width:40%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(245,130,42,.15) 0%,transparent 70%);
  pointer-events:none;
}

.footer-grid{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:40px;
  position:relative;
  z-index:1;
  padding-bottom:32px;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.footer-col{display:flex;flex-direction:column}
.footer-col h4{color:#fff;font-size:1rem;font-weight:800;margin-bottom:16px;letter-spacing:.02em}
.footer-col a,.footer-col p{color:#c7d4e3;font-size:14px;line-height:1.7;margin:6px 0;transition:color var(--t),transform var(--t)}
.footer-col a:hover{color:var(--orange-3);transform:translateX(3px)}

.footer-brand strong{display:block;color:#fff;font-size:1.25rem;font-weight:800;margin-bottom:12px;letter-spacing:-.01em}
.footer-brand p{color:#b8c8dd;font-size:14px;margin-bottom:10px}
.footer-brand small{display:block;color:#8fa5c0;font-size:12px;margin-top:12px;line-height:1.6}

.footer-line{display:flex;align-items:flex-start;gap:10px;color:#c7d4e3;font-size:14px;line-height:1.6;margin:8px 0}
.footer-line span{flex-shrink:0;font-size:16px;line-height:1.4}
a.footer-line:hover{color:var(--orange-3)}

.footer-bottom{max-width:var(--maxw);margin:0 auto;padding-top:22px;text-align:center;position:relative;z-index:1}
.footer-bottom small{color:#8fa5c0;font-size:12.5px;letter-spacing:.02em}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
  .store-slide{min-height:380px}
}
@media (max-width:820px){
  .store-slide{grid-template-columns:1fr;padding:32px 24px 72px;text-align:left;min-height:auto}
  .slide-image{order:-1;min-height:200px;margin-bottom:8px}
  .slide-image img{max-height:200px}
  .service-strip{grid-template-columns:1fr;gap:12px}
  .category-tiles{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:520px){
  header{padding:12px 16px}
  .brand{font-size:.98rem}
  .brand img{height:38px}
  nav>a{padding:7px 10px;font-size:13px}
  main{padding:20px 16px 48px}
  .carousel{border-radius:20px;margin-bottom:48px}
  .store-slide{padding:28px 22px 72px}
  .slide-copy h1{font-size:26px}
  .slide-copy small{display:none}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .product-info{padding:12px 14px 16px}
  .product-info h3{font-size:.92rem}
  .price{font-size:.98rem}
  .price span{display:block;width:100%}
  .filters input,.filters select,.filters button{flex:1 1 100%;min-width:0}
  .about{padding:28px 20px}
  footer{padding:40px 20px 20px;margin-top:48px}
  .footer-grid{grid-template-columns:1fr;gap:28px;padding-bottom:24px}
  .footer-col h4{margin-bottom:12px}
  .footer-col a,.footer-col p{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ============================================================
   HALAMAN CEK GARANSI
   ============================================================ */

.warranty-header {
  max-width: 760px;
  margin: 32px auto 28px;
  text-align: center;
  padding: 0 8px;
}
.warranty-header .eyebrow {
  color: var(--orange-2);
  margin-bottom: 14px;
}
.warranty-header h1 {
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.1;
  letter-spacing: -.025em;
  margin-bottom: 16px;
  color: var(--navy);
}
.warranty-header p {
  color: var(--muted);
  font-size: 1rem;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

.warranty-box {
  max-width: 760px;
  margin: 0 auto 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--shadow);
}

.warranty-box form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.warranty-box label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: -6px;
}
.warranty-box input {
  width: 100%;
  border: 1.5px solid #d4dfec;
  background: #fff;
  padding: 14px 18px;
  border-radius: 12px;
  min-height: 52px;
  font-size: 15px;
  color: var(--navy);
  transition: border var(--t), box-shadow var(--t);
}
.warranty-box input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(245,130,42,.15);
  outline: none;
}
.warranty-box input::placeholder {
  color: #94a3b8;
}
.warranty-box .button {
  width: 100%;
  min-height: 52px;
  font-size: 15px;
  margin-top: 4px;
}

/* Hasil pencarian garansi */
.result {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 28px);
  margin-top: 24px;
  box-shadow: var(--shadow-sm);
}
.result .badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  margin-bottom: 16px;
  position: static;
  box-shadow: none;
}
.result .badge.green { background: var(--green-soft); color: #166534; }
.result .badge.amber,
.result .badge.yellow { background: #fff3cf; color: #836319; }
.result .badge.red { background: #fde6e5; color: #b33c3a; }
.result .badge.gray { background: #e5eaf1; color: #475569; }

.result h2 {
  font-size: 1.4rem;
  color: var(--navy);
  margin: 8px 0 6px;
}
.result > p {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 18px;
}
.result dl {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 10px 20px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
  font-size: 14px;
}
.result dt {
  color: var(--muted);
  font-weight: 600;
}
.result dd {
  margin: 0;
  color: var(--navy);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.result .notice {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.result .notice:first-of-type {
  border-top: 0;
  padding-top: 0;
}

/* Empty state */
.empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--soft);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  margin-top: 24px;
}
.empty h2 {
  font-size: 1.3rem;
  color: var(--navy);
  margin-bottom: 8px;
}
.empty p {
  color: var(--muted);
  font-size: 14px;
  max-width: 400px;
  margin: 0 auto;
}

/* Data terakhir diperbarui */
.updated {
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  margin: 24px auto 0;
  max-width: 760px;
}

/* Responsive garansi */
@media (max-width: 520px) {
  .warranty-header { margin: 20px auto 20px; }
  .warranty-header h1 { font-size: 28px; }
  .warranty-header h1 br { display: none; }
  .warranty-header p { font-size: 14px; }

  .warranty-box {
    padding: 20px 18px;
    border-radius: 18px;
  }
  .warranty-box input { min-height: 48px; padding: 12px 14px; font-size: 14.5px; }
  .warranty-box .button { min-height: 48px; font-size: 14.5px; }

  .result { padding: 20px 18px; }
  .result h2 { font-size: 1.2rem; }
  .result dl {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }
  .result dt { font-size: 12.5px; margin-top: 10px; }
  .result dd { margin-bottom: 6px; }
}

/* ============================================================
   MOBILE OPTIMIZATION
   ============================================================ */
@media (max-width: 640px) {

  /* Sembunyikan tagline brand */
  .brand small { display: none; }

  /* Header lebih ramping */
  header { padding: 10px 14px; gap: 10px; }
  .brand { font-size: .95rem; gap: 8px; }
  .brand img { height: 36px; }

  /* Nav lebih kecil & rapat */
  nav { gap: 2px; }
  nav > a { padding: 7px 10px; font-size: 12.5px; }

  /* Sembunyikan nomor HP di footer */
  .footer-line.phone { display: none; }

  /* WhatsApp button tetap tampil (buat konversi) */
  /* .about .button.outline { display: none; } */

  /* Garansi: sembunyikan "Terakhir diperbarui" */
  .updated { font-size: 11.5px; }
}

/* ============================================================
   HALAMAN DETAIL PRODUK
   ============================================================ */

.detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 24px;
}

/* Foto produk */
.detail .product-photo,
.detail-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.detail .product-photo img,
.detail-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}
.detail .no-photo,
.detail-photo .no-photo {
  font-size: 5rem;
  color: #b6c5d8;
}
.detail .no-photo span,
.detail-photo .no-photo span {
  font-size: 13px;
  color: var(--muted);
}

/* Info produk */
.detail-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 8px;
}

.detail .badge {
  position: static;
  align-self: flex-start;
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  margin-bottom: 4px;
  box-shadow: none;
}

.detail h1 {
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.1;
  color: var(--navy);
  margin-bottom: 4px;
}

.detail .brand-line {
  font-size: 14px;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
}

.detail .price {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  color: var(--navy);
  padding: 14px 0;
  border: 0;
  margin: 0;
  letter-spacing: -.02em;
}

.detail .stock-line {
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 8px;
}
.detail .stock-line strong {
  color: var(--navy);
}

/* Spesifikasi */
.detail .spec-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 12px;
  margin-bottom: 6px;
}

.detail .spec {
  white-space: pre-line;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink);
  padding: 14px 18px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.detail .note {
  font-size: 13px;
  color: var(--muted);
  padding: 12px 16px;
  background: #fff8ec;
  border-left: 3px solid var(--orange);
  border-radius: 8px;
  line-height: 1.6;
}

/* Tombol aksi */
.detail .actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.detail .actions .button {
  flex: 1 1 auto;
  min-width: 180px;
}

/* Link kembali */
.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 20px 0 8px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  transition: all var(--t);
}
.back:hover {
  background: var(--soft);
  color: var(--orange-2);
  border-color: var(--orange-3);
  transform: translateX(-3px);
}

/* Responsive */
@media (max-width: 820px) {
  .detail {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .detail .product-photo,
  .detail-photo {
    padding: 20px;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 520px) {
  .detail h1 { font-size: 26px; }
  .detail .price { font-size: 24px; }
  .detail .actions .button {
    flex: 1 1 100%;
    min-width: 0;
  }
  .detail .spec { padding: 12px 14px; font-size: 13.5px; }
}