
/* ============================================================
   HOME PAGE — tampilan minimalis ala npmx.dev: putih ruang kosong
   lega, tanpa gradient tebal, tanpa kartu besar/glow. Fokus ke satu
   search box dan daftar fitur polos.
   ============================================================ */

.home-hero{
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;
  flex:1;
  min-height:0;
  padding-top:clamp(24px,4vw,40px);
  padding-bottom:clamp(40px,7vw,64px);
}
.home-hero h1{
  font-family:'Inter',sans-serif;font-weight:600;
  font-size:clamp(32px,5.5vw,48px);line-height:1;letter-spacing:-.01em;
  color:#fff;background:none;-webkit-text-fill-color:initial;
}
.home-hero h1 .ex-accent{color:var(--emerald);}
.home-hero h1 .blink-dot{
  display:inline-block;
  animation:blink-cursor 1s step-start infinite;
}
@keyframes blink-cursor{
  50%{opacity:0;}
}
@media(prefers-reduced-motion:reduce){
  .home-hero h1 .blink-dot{animation:none;}
}
.home-hero p.lede{
  margin:14px auto 0;max-width:460px;
  color:var(--slate);font-size:15px;line-height:1.6;
}

.home-search-wrap{width:100%;max-width:520px;margin:32px auto 0;}
.home-search-wrap .search-form{max-width:520px;margin:0 auto;}

.home-stats-line{
  margin-top:22px;
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--slate);
}
.home-stats-line strong{color:var(--mint);font-weight:600;}
.home-stats-line em{color:var(--slate);font-style:normal;}
.home-stats-line .dot{opacity:.5;}

/* Search bar bergaya npmx.dev — kotak datar minimalis, ikon di kiri,
   badge shortcut keyboard "/" di kanan, tanpa efek neon/glow. */
.npmx-search{
  display:flex;align-items:center;gap:12px;width:100%;
  background:var(--bg-mid);
  border:1px solid var(--line);
  border-radius:10px;
  padding:13px 16px;
  overflow:visible;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:none;
  transition:border-color .2s ease;
}
.npmx-search:hover{border-color:rgba(203,56,55,0.28);}
.npmx-search:focus-within{border-color:var(--emerald);}
.npmx-search-icon{flex-shrink:0;color:var(--slate);}
.npmx-search input{
  flex:1;min-width:0;background:none;border:none;outline:none;
  color:var(--mint);font-family:'Inter',sans-serif;font-size:14.5px;font-weight:500;
}
.npmx-search input::placeholder{color:var(--slate);}
.npmx-search-kbd{
  flex-shrink:0;font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;
  color:var(--emerald);border:1px solid rgba(203,56,55,0.3);background:rgba(203,56,55,0.08);
  border-radius:5px;
  padding:2px 8px;line-height:1.6;
}

/* Section fitur — daftar polos, tanpa kartu besar/border tebal. */
.home-section{
  max-width:640px;margin:0 auto;
  margin-top:auto;
  padding:20px clamp(20px,5vw,32px) 72px;
}

.feature-list{display:flex;flex-direction:column;}
.feature-row{
  display:flex;gap:16px;align-items:flex-start;
  padding:18px 0;
  border-top:1px solid var(--line);
}
.feature-row:last-child{border-bottom:1px solid var(--line);}
.feature-row svg{
  flex-shrink:0;width:18px;height:18px;margin-top:3px;color:var(--emerald);
}
.feature-row h3{
  font-family:'Inter',sans-serif;font-weight:700;font-size:14.5px;color:#fff;
  display:flex;align-items:center;gap:8px;
}
.feature-row p{margin-top:4px;color:var(--slate);font-size:13px;line-height:1.6;}
.feature-badge{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(233,185,77,0.35);background:rgba(233,185,77,0.08);
  border-radius:5px;padding:2px 6px;font-weight:500;
}

/* Di layar PC/desktop lebar, konten dilebarkan supaya tidak jadi
   satu kolom sempit di tengah area kosong — daftar fitur pindah
   jadi 2 kolom (grid): 2 kiri, 2 kanan. Di HP tetap 1 kolom. */
@media(min-width:768px){
  .home-section{max-width:880px;}
  .feature-list{
    display:grid;grid-template-columns:repeat(2,1fr);
    column-gap:40px;
  }
  .feature-row{border-bottom:none;}
  .feature-row:nth-last-child(-n+2){border-bottom:1px solid var(--line);}
}

/* Mode PC (layar besar): perbesar judul, teks, search box, dan
   daftar fitur di halaman Home supaya proporsional, tidak kecil. */
@media(min-width:1024px){
  .home-hero{padding-top:clamp(56px,7vw,84px);padding-bottom:clamp(72px,10vw,112px);}
  .home-hero h1{font-size:clamp(72px,8vw,116px);}
  .home-hero p.lede{margin-top:24px;max-width:780px;font-size:21px;line-height:1.75;}

  .home-search-wrap{max-width:760px;margin-top:46px;}
  .home-search-wrap .search-form{max-width:760px;}
  .npmx-search{padding:21px 26px;gap:18px;border-radius:13px;}
  .npmx-search input{font-size:19px;}
  .npmx-search-icon{width:21px;height:21px;}
  .npmx-search-kbd{font-size:14px;padding:4px 12px;}

  .home-stats-line{font-size:16px;margin-top:34px;gap:12px;}

  .home-section{max-width:1080px;padding-top:32px;padding-bottom:96px;}
  .feature-list{column-gap:64px;}
  .feature-row{padding:26px 0;gap:22px;}
  .feature-row svg{width:25px;height:25px;margin-top:4px;}
  .feature-row h3{font-size:18px;gap:11px;}
  .feature-row p{margin-top:7px;font-size:15.5px;line-height:1.65;}
  .feature-badge{font-size:11px;padding:3px 9px;}
}

[aria-disabled="true"]{pointer-events:none;cursor:default;opacity:.55;}
