/* ============================
   PIONIR – CSS
   ============================ */
html{
scroll-behavior:smooth;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --navy:       #1a2340;
  --navy-dark:  #111827;
  --navy-mid:   #1e2d4a;
  --gold:       #f5c518;
  --gold-dark:  #d4a510;
  --white:      #ffffff;
  --gray-light: #f4f5f7;
  --gray-mid:   #e8eaed;
  --gray-text:  #6b7280;
  --text-dark:  #1a2340;
  --text-body:  #374151;

  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --shadow-sm:  0 2px 8px rgba(0,0,0,.07);
  --shadow-md:  0 6px 24px rgba(0,0,0,.10);
  --shadow-lg:  0 16px 40px rgba(0,0,0,.14);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================
   BUTTONS
   ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 26px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .22s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--gold);
  color: var(--navy-dark);
}
.btn-primary:hover { background: var(--gold-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(245,197,24,.35); }

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 1.8px solid rgba(255,255,255,.55);
}
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,.08); }

.btn-buy {
  width: 100%;
  justify-content: center;
  background: var(--gold);
  color: var(--navy-dark);
  font-size: 13px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
}
.btn-buy:hover { background: var(--gold-dark); transform: translateY(-1px); }

.btn-bundle-dark {
  width: 100%;
  justify-content: center;
  background: var(--navy-dark);
  color: var(--white);
  padding: 11px 20px;
  border-radius: var(--radius-sm);
}
.btn-bundle-dark:hover { background: var(--navy-mid); transform: translateY(-1px); }

.btn-bundle-yellow {
  width: 100%;
  justify-content: center;
  background: var(--gold);
  color: var(--navy-dark);
  padding: 11px 20px;
  border-radius: var(--radius-sm);
}
.btn-bundle-yellow:hover { background: var(--gold-dark); }

.btn-cart{

width:50px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
background:white;
border:1px solid #ddd;
border-radius:12px;
font-size:20px;
flex-shrink:0;
transition:.2s;
}

.btn-cart:hover{
background:#f5c518;
transform:translateY(-2px);
}

.btn-buy{
flex:1;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
color:#111;
}

   /* ============================
   NAVBAR
============================ */

.site-header{
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--navy-dark);
  width: 100%;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

/* TOP */

.nav-top{
  min-height:80px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.nav-top-inner{
max-width:1300px;
margin:auto;
padding:14px 30px;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}

/* LOGO */

.nav-logo{
  font-family:var(--font-display);
  font-size:28px;
  font-weight:800;
  color:var(--gold);
  letter-spacing:-.5px;
  flex-shrink:0;
}

.nav-hamburger{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    z-index:9999;
}

.nav-hamburger span{
    width:24px;
    height:3px;
    background:white;
    border-radius:10px;
}

/* KATEGORI */

.nav-kategori{
position:relative;
display:flex;
align-items:center;
flex-shrink:0;
}

.nav-kategori-btn{
height:48px;
padding:0 18px;
display:flex;
align-items:center;
gap:8px;
background:#222a3b;
color:white;
border:none;
border-radius:999px;
font-size:14px;
font-weight:600;
cursor:pointer;
transition:.2s;
}

.nav-kategori-btn:hover{
background:#2d3750;
}

/* SEARCH */

.nav-search{
  flex:1;
  display:flex;
  position:relative;
}

.nav-search input{
  width:100%;
  height:48px;
  padding:0 60px 0 20px;
  border:none;
  border-radius:999px;
  outline:none;
  font-size:14px;
  background:white;
}

.nav-search-btn{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border:none;
  border-radius:50%;
  background:var(--gold);
  cursor:pointer;
}

/* CART */

.nav-cart{
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#222a3b;
  border:none;
  border-radius:50%;
  color:white;
  position:relative;
  cursor:pointer;
  transition:.2s;
}

.nav-cart:hover{
  background:var(--gold);
  color:var(--navy);
}

.cart-badge{
  position:absolute;
  top:-4px;
  right:-4px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--gold);
  color:black;
  font-size:10px;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* ACTION */

.nav-actions{

  display:flex;

  align-items:center;

  margin-left:auto;

  gap:12px;

  flex-shrink:0;

}

.nav-btn-login,
.nav-btn-register{

  padding:12px 22px;

  border:none;

  border-radius:999px;

  font-weight:600;

  cursor:pointer;

  transition:.2s;

}

.nav-btn-login{

  background:white;

  color:var(--navy);

}

.nav-btn-login:hover{
  transform:translateY(-2px);
}

.nav-btn-register{

  background:var(--gold);

  color:var(--navy);

}

.nav-btn-register:hover{

  background:var(--gold-dark);

}

/* BOTTOM */

.nav-bottom{

  height:50px;

}

.nav-bottom-inner{

  max-width:1300px;

  margin:auto;

  padding:0 30px;

  height:100%;

  display:flex;

  align-items:center;

  gap:28px;

}

.nav-bottom a{

  color:rgba(255,255,255,.7);

  font-size:14px;

  transition:.2s;

}

.nav-bottom a:hover{

  color:var(--gold);

}

/* RESPONSIVE */

@media(max-width:900px){

    .nav-top-inner{
        flex-wrap:wrap;
        padding:15px;
    }

    .nav-hamburger{
        display:flex;
        order:2;
    }

    .nav-search{
        order:3;
        width:100%;
    }

    .nav-actions{
        margin-left:auto;
    }

   

    .nav-bottom{
        display:none;
        width:100%;
        height:auto;
        background:#111827;
    }

    .nav-bottom.active{
        display:block;
    }

    .nav-bottom-inner{
        flex-direction:column;
        align-items:flex-start;
        padding:15px;
        gap:15px;
    }

}

@media(max-width:640px){

.nav-logo{

font-size:22px;

}

.nav-btn-login,
.nav-btn-register{

padding:10px 16px;

font-size:13px;

}

}


/* ============================
   HERO
   ============================ */
.hero {
  background: linear-gradient(160deg, #1a2340 0%, #1e2d4a 55%, #243054 100%);
  padding: 88px 24px 96px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(245,197,24,.07) 0%, transparent 70%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  animation: fadeUp .7s ease both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 18px;
}

.hero-title .accent { color: var(--gold); }

.hero-sub {
  color: rgba(255,255,255,.6);
  font-size: 15px;
  margin-bottom: 36px;
  line-height: 1.7;
}

.hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================
   SECTIONS – shared
   ============================ */
.section {
  padding: 64px 0;
}

.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 36px;
}
.section-header.center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.section-header.left { align-items: flex-end; }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.section-sub {
  font-size: 14px;
  color: var(--gray-text);
  max-width: 440px;
}

.see-all {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gold-dark);
  white-space: nowrap;
  margin-top: 4px;
  transition: color .2s;
}
.see-all:hover { color: var(--navy); }

/* ============================
   CATEGORIES
   ============================ */
.categories { background: var(--white); }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform .22s;
}
.cat-item:hover { transform: translateY(-4px); }

.cat-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  background: var(--gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, box-shadow .2s;
}
.cat-icon svg {
  width: 28px;
  height: 28px;
  color: var(--text-dark);
}
.cat-item:hover .cat-icon {
  background: var(--gold);
  box-shadow: 0 4px 14px rgba(245,197,24,.3);
}
.cat-item:hover .cat-icon svg { color: var(--navy-dark); }

.cat-item span {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-body);
  text-align: center;
}

/* ============================
   STUDENT FAVORITES
   ============================ */
.favorites { background: var(--white); padding-top: 16px; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.product-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-mid);
  transition: box-shadow .25s, transform .25s;
}
.product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.product-img {
  height: 220px;
  overflow: hidden;
  background: var(--gray-light);
  width: 100%;
}
.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.product-card:hover .product-img img { transform: scale(1.05); }

.product-info {
  padding: 14px 16px 16px;
}

.product-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.product-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 12px;
}


/* ============================
   CURATED BUNDLES
   ============================ */
.bundles { background: #f8f9fb; }

.bundle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
}

.bundle-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-mid);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow .25s, transform .25s;
}
.bundle-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.bundle-card.featured {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
  color: var(--white);
  transform: scale(1.04);
  box-shadow: var(--shadow-lg);
}
.bundle-card.featured:hover { transform: scale(1.04) translateY(-4px); }

.bundle-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  background: var(--navy-dark);
  color: var(--white);
  padding: 4px 10px;
  border-radius: 4px;
  align-self: flex-start;
}
.featured-badge {
  background: var(--gold);
  color: var(--navy-dark);
}

.bundle-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: inherit;
}

.bundle-desc {
  font-size: 13.5px;
  color: var(--gray-text);
  line-height: 1.5;
  flex: 1;
}
.bundle-card.featured .bundle-desc { color: rgba(255,255,255,.6); }

.bundle-pricing {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0 8px;
  border-top: 1px solid var(--gray-mid);
}
.bundle-card.featured .bundle-pricing { border-color: rgba(255,255,255,.12); }

.price-old {
  font-size: 13px;
  color: var(--gray-text);
  text-decoration: line-through;
}
.bundle-card.featured .price-old { color: rgba(255,255,255,.4); }

.price-new {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-dark);
  font-family: var(--font-display);
}
.accent-price { color: var(--gold) !important; }

.bundle-card.featured .price-new { color: var(--white); }

.price-save {
  font-size: 12.5px;
  font-weight: 600;
  color: #e05252;
}
.bundle-card.featured .price-save { color: #ff8c8c; }

/* ============================
   TESTIMONIALS
   ============================ */
.testimonials { background: var(--white); }

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.testi-card {
  background: var(--gray-light);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--gray-mid);
}

.stars { color: var(--gold); font-size: 16px; letter-spacing: 2px; }

.testi-text {
  font-size: 13.5px;
  color: var(--text-body);
  line-height: 1.65;
  font-style: italic;
  flex: 1;
}

.testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
}
.testi-author strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-dark);
}
.testi-author span {
  font-size: 12px;
  color: var(--gray-text);
}

/* ============================
   FOOTER
   ============================ */
.footer {
  background: #0d1120;
  padding: 48px 0 0;
  color: rgba(255,255,255,.6);
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 12px;
}

.footer-tagline {
  font-size: 13px;
  line-height: 1.65;
  max-width: 220px;
  margin-bottom: 20px;
}

.footer-social {
  display: flex;
  gap: 14px;
}
.footer-social a {
  color: rgba(255,255,255,.55);
  transition: color .2s;
}
.footer-social a:hover { color: var(--gold); }

.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,.55);
  margin-bottom: 10px;
  transition: color .2s;
}
.footer-col a:hover { color: var(--white); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: 1140px;
  margin: 0 auto;
}
.footer-bottom p {
  font-size: 12.5px;
  color: rgba(255,255,255,.35);
}
.footer-bottom-icons {
  display: flex;
  gap: 14px;
  color: rgba(255,255,255,.3);
}

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 960px) {
  .cat-grid { grid-template-columns: repeat(5, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .bundle-grid { grid-template-columns: 1fr; }
  .bundle-card.featured { transform: none; }
  .bundle-card.featured:hover { transform: translateY(-4px); }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 640px) {
  .nav-links { display: none; }
  .cat-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .cat-icon { width: 54px; height: 54px; }
  .cat-icon svg { width: 22px; height: 22px; }
  .cat-item span { font-size: 11px; }
  .product-grid { grid-template-columns: 1fr 1fr; }
  .product-img { height: 160px; }
  .testi-grid { grid-template-columns: 1fr; }
  .newsletter-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .newsletter-form { flex-direction: column; width: 100%; }
  .newsletter-form input { min-width: unset; width: 100%; }
  .footer-inner { grid-template-columns: 1fr; }
  .hero { padding: 60px 20px 72px; }
}

/* ==========================
ALL PRODUCTS PAGE
========================== */

.products-page{
background:#f6f7fb;
min-height:100vh;
padding:40px 0 80px;
}

.products-wrapper{
max-width:1300px;
margin:auto;
padding:0 30px;
}

.products-header{
display:flex;
justify-content:space-between;
align-items:center;

margin-bottom:30px;
}

.products-title{
font-size:40px;
font-family:var(--font-display);
color:var(--navy);
}

.products-count{
color:#777;
}

.products-grid{

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(260px,1fr));

gap:24px;

}

.products-page .product-card{

background:white;

border-radius:22px;

padding:14px;

box-shadow:
0 8px 30px rgba(0,0,0,.06);

transition:.25s;

}

.products-page .product-card:hover{

transform:
translateY(-6px);

}

.products-page .product-img{

height:260px;

border-radius:16px;

overflow:hidden;

background:#f2f2f2;

}

.products-page .product-img img{

width:100%;

height:100%;

object-fit:cover;

}

.products-page .product-info{

padding:16px 4px 4px;

}

.products-page .product-name{

font-size:20px;

font-weight:700;

color:#1a2340;

}

.products-page .product-price{

margin-top:8px;

font-size:18px;

font-weight:700;

color:#d4a510;

}

.products-page .product-stock{

font-size:14px;

color:#666;

margin-top:8px;

}

.products-page .product-action{

display:flex;

gap:10px;

margin-top:18px;

}

.products-page .btn-detail,
.products-page .btn-buy{

flex:1;

padding:12px;

border-radius:14px;

font-weight:700;

text-align:center;

}

.products-page .btn-detail{

background:#fff;

border:1px solid #ddd;

}

.products-page .btn-buy{

background:#f5c518;

}

.products-page .btn-buy:hover{

background:#e3ad00;

}

@media(max-width:768px){

.products-grid{

grid-template-columns:
1fr 1fr;

}

.products-title{
font-size:28px;
}

}

/* ==========================
KATEGORI DROPDOWN CLEAN
========================== */

.nav-kategori{
  position:relative;
}

.nav-kategori-dropdown{
  position:absolute;

  top:58px;
  left:0;

  width:220px;

  display:none;

  flex-direction:column;

  background:#fff;

  border-radius:14px;

  padding:8px;

  box-shadow:0 10px 30px rgba(0,0,0,.12);

  z-index:999;
}

.nav-kategori:hover .nav-kategori-dropdown{
  display:flex;
}

.nav-kategori-dropdown a{
  padding:12px 16px;

  color:#1a2340;

  border-radius:10px;

  display:block;

  transition:.2s;
}

.nav-kategori-dropdown a:hover{
  background:#f5f5f5;

  color:#d4a510;
}

/* icon kosong ilang */
.kat-icon{
display:none;
}

/* ======================
ACCOUNT DROPDOWN FIX
====================== */

.nav-account{
  position:relative;
  flex-shrink:0;
}

.nav-account-btn{
  display:flex;
  align-items:center;
  gap:10px;

  height:48px;
  padding:0 18px;

  border:none;
  border-radius:999px;

  background:#222a3b;
  color:white;

  cursor:pointer;
}

.nav-account-dropdown{
  position:absolute;
  top:60px;
  right:0;

  width:240px;

  display:none;
  flex-direction:column;

  background:#fff;
  border-radius:14px;

  overflow:hidden;
  box-shadow:0 15px 40px rgba(0,0,0,.15);

  z-index:9999;
  pointer-events:auto;
}

.nav-account-dropdown a{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;

  padding:14px 18px;

  color:#1a2340;

  font-size:14px;

  white-space:nowrap;
}

/* .nav-account-dropdown a:hover{
  background:#f4f5f7;
}

.nav-account-dropdown hr{
  margin:6px 0;
} */

.logout-btn{
  color:#e53935 !important;
}

.product-stock{
color:#777;
margin-top:8px;
font-size:14px;
}

.product-action{
display:flex;
gap:10px;

margin-top:18px;
}

.product-actions{
    display:flex !important;
    flex-direction:row !important;
    align-items:center;
    gap:10px;
    width:100%;
}

.product-actions .btn-cart{
    width:50px !important;
    height:45px;
    flex:0 0 50px !important;
}

.product-actions .btn-buy{
    flex:1 !important;
    width:calc(100% - 60px) !important;
    height:45px;
    margin:0 !important;
}

.btn-buy{
flex:1;
padding:12px;
text-align:center;
border-radius:12px;
text-decoration:none;
font-weight:700;
transition:.2s;
}

.btn-detail{
border:1px solid #d6dae8;
color:#1a2340;
}

.btn-detail:hover{
background:#f5f6fa;
}

.btn-buy{
background:#f5c518;
color:#111;
}

.btn-buy:hover{
background:#e3ad00;
transform:translateY(-2px);
}

/* TOAST */

.toast{
position:fixed;
bottom:30px;
right:30px;
background:#111827;
color:white;
padding:14px 18px;
border-radius:14px;
box-shadow:
0 10px 30px
rgba(0,0,0,.2);
opacity:0;
transform:
translateY(20px);
transition:.3s;
z-index:99999;
}

.toast.show{
opacity:1;
transform:
translateY(0);
}