/* =====================================================================
   TOKO LISENSI DIGITAL — Tema Profesional (Indigo/Blue) + Mobile First
   ===================================================================== */

:root{
  --navy:#0f1b3d;
  --navy-2:#16214a;
  --indigo:#4338ca;
  --indigo-light:#6366f1;
  --blue:#2563eb;
  --accent:#f59e0b;
  --green:#16a34a;
  --red:#ef4444;
  --bg:#f4f6fb;
  --card-bg:#ffffff;
  --text:#1e2432;
  --text-muted:#6b7280;
  --border:#e6e9f2;
  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 2px 10px rgba(20,24,50,.06);
  --shadow-md:0 10px 30px rgba(20,24,50,.10);
  --shadow-lg:0 20px 50px rgba(20,24,50,.16);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  font-family:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ text-decoration:none; }

h1,h2,h3,h4,h5,h6{ letter-spacing:-0.02em; }

::selection{ background:var(--indigo-light); color:#fff; }

/* ---- Scrollbar (desktop, subtle) ---- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#c7cce0; border-radius:20px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---------------------------------------------------------------------
   NAVBAR
   --------------------------------------------------------------------- */
.navbar-brand-custom{
  background:linear-gradient(100deg,var(--navy) 0%, var(--indigo) 100%);
  box-shadow:0 2px 20px rgba(15,27,61,.25);
  padding-top:.7rem; padding-bottom:.7rem;
}
.navbar-brand-custom .navbar-brand{ font-size:1.25rem; letter-spacing:-0.01em; }
.navbar-brand-custom .navbar-brand i{ color:var(--accent); margin-right:.25rem; }
.navbar-brand-custom .nav-link{
  color:rgba(255,255,255,.85)!important; font-weight:500; padding:.5rem .9rem!important;
  border-radius:8px; transition:.15s;
}
.navbar-brand-custom .nav-link:hover{ color:#fff!important; background:rgba(255,255,255,.08); }
.navbar-brand-custom .btn-outline-light{ border-color:rgba(255,255,255,.5); }
.navbar-brand-custom .btn-outline-light:hover{ background:rgba(255,255,255,.15); border-color:#fff; }
#cartCountBadge{ font-size:.65rem; }

@media (max-width: 991.98px){
  .navbar-brand-custom .navbar-collapse{
    background:var(--navy-2); margin-top:.75rem; padding:1rem; border-radius:12px;
  }
  .navbar-brand-custom .d-flex{ flex-wrap:wrap; margin-top:.75rem; gap:.5rem!important; }
  .navbar-brand-custom .d-flex > *{ flex:1 1 auto; }
}

/* ---------------------------------------------------------------------
   HERO
   --------------------------------------------------------------------- */
.hero-section{
  background:
    radial-gradient(circle at 15% 20%, rgba(99,102,241,.35), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(245,158,11,.18), transparent 40%),
    linear-gradient(135deg, var(--navy) 0%, var(--indigo) 100%);
  color:#fff; padding:72px 0 90px; position:relative; overflow:hidden;
}
.hero-section h1{ font-weight:800; text-shadow:0 2px 20px rgba(0,0,0,.15); }
.hero-section .lead{ color:rgba(255,255,255,.85); font-size:1.1rem; }
.hero-section .btn-light{ font-weight:700; box-shadow:var(--shadow-md); }
.hero-section .btn-outline-light{ border-width:2px; font-weight:600; }
.hero-section .btn-outline-light:hover{ background:rgba(255,255,255,.12); }

@media (max-width: 767.98px){
  .hero-section{ padding:48px 0 64px; text-align:center; }
  .hero-section h1{ font-size:1.85rem; }
  .hero-section .lead{ font-size:1rem; }
  .hero-section .d-flex{ flex-direction:column; }
  .hero-section .btn{ width:100%; }
}

/* ---------------------------------------------------------------------
   SECTION / TYPOGRAPHY HELPERS
   --------------------------------------------------------------------- */
.section-title{
  font-weight:800; color:var(--navy); margin-bottom:1.5rem; position:relative;
  padding-bottom:.6rem; font-size:1.6rem;
}
.section-title::after{
  content:''; position:absolute; left:0; bottom:0; width:52px; height:4px;
  background:linear-gradient(90deg,var(--indigo),var(--blue)); border-radius:4px;
}
@media (max-width: 575.98px){ .section-title{ font-size:1.35rem; text-align:center; } .section-title::after{ left:50%; transform:translateX(-50%); } }

/* ---------------------------------------------------------------------
   PRODUCT CARDS
   --------------------------------------------------------------------- */
.product-card{
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease;
  height:100%; background:var(--card-bg); display:flex; flex-direction:column;
}
.product-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.product-card .card-img-top{
  height:170px; object-fit:cover; background:linear-gradient(135deg,#eef1ff,#f7f8ff);
}
.product-card .card-body{ display:flex; flex-direction:column; flex-grow:1; padding:1rem; }
.product-card .card-title{ font-weight:700; font-size:.95rem; line-height:1.3; min-height:2.4em; }
.product-card .btn{ margin-top:auto; }

@media (max-width: 575.98px){
  .product-card .card-img-top{ height:130px; }
  .product-card .card-title{ font-size:.85rem; min-height:2.2em; }
  .product-card .card-body{ padding:.75rem; }
}

.badge-discount{ background:linear-gradient(90deg,#ef4444,#f97316); color:#fff; font-weight:700; letter-spacing:.03em; }
.badge-stock-out{ background:#6b7280; color:#fff; }
.price-old{ text-decoration:line-through; color:#9aa1b2; font-size:.82rem; }
.price-new{ color:var(--indigo); font-weight:800; font-size:1.15rem; }
@media (max-width: 575.98px){ .price-new{ font-size:1rem; } }

/* ---------------------------------------------------------------------
   BUTTONS (global overrides for a more premium look)
   --------------------------------------------------------------------- */
.btn{ border-radius:10px; font-weight:600; }
.btn-primary{
  background:linear-gradient(100deg,var(--indigo) 0%, var(--blue) 100%);
  border:none; box-shadow:0 4px 14px rgba(67,56,202,.28);
}
.btn-primary:hover, .btn-primary:focus{
  background:linear-gradient(100deg,#372fb0 0%, #1d4ed8 100%);
  box-shadow:0 6px 18px rgba(67,56,202,.38);
}
.btn-success{ background:linear-gradient(100deg,#15803d,var(--green)); border:none; }
.btn-lg{ border-radius:12px; }

/* ---------------------------------------------------------------------
   CARDS / FORMS (general)
   --------------------------------------------------------------------- */
.card{ border-radius:var(--radius); border:1px solid var(--border); }
.form-control, .form-select{
  border-radius:10px; border:1px solid var(--border); padding:.6rem .9rem;
}
.form-control:focus, .form-select:focus{
  border-color:var(--indigo-light); box-shadow:0 0 0 .2rem rgba(99,102,241,.15);
}
.form-label{ font-weight:600; font-size:.9rem; color:#374151; }

/* Auth cards (login/register) */
.auth-card{ border-radius:var(--radius); box-shadow:var(--shadow-lg); border:none; overflow:hidden; }
.auth-card .card-body{ padding:2rem; }
@media (max-width: 575.98px){ .auth-card .card-body{ padding:1.5rem; } }

/* ---------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------- */
.footer-custom{ background:var(--navy); color:#cbd5e1; }
.footer-custom h5, .footer-custom h6{ color:#fff; }
.footer-link{ color:#aab3cc; text-decoration:none; transition:.15s; }
.footer-link:hover{ color:#fff; padding-left:2px; }
.text-light-50{ color:rgba(255,255,255,.65)!important; }
.border-light-50{ border-color:rgba(255,255,255,.15)!important; }
@media (max-width: 767.98px){ .footer-custom{ text-align:center; } .footer-custom .d-flex{ justify-content:center; } }

/* ---------------------------------------------------------------------
   HOW-IT-WORKS STEPS
   --------------------------------------------------------------------- */
.step-card{ text-align:center; padding:1.5rem 1rem; }
.step-number{
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--indigo),var(--blue)); color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.15rem;
  margin:0 auto 1rem; box-shadow:0 6px 16px rgba(67,56,202,.3);
}

/* ---------------------------------------------------------------------
   SKELETON / EMPTY STATE
   --------------------------------------------------------------------- */
.skeleton{ background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%); background-size:200% 100%; animation:skeleton-loading 1.2s infinite; border-radius:8px; }
@keyframes skeleton-loading{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

.empty-state{ text-align:center; padding:4rem 1rem; color:var(--text-muted); }
.empty-state i{ font-size:3rem; margin-bottom:1rem; color:#c7d2fe; }

/* ---------------------------------------------------------------------
   LICENSE KEY BOX
   --------------------------------------------------------------------- */
.license-key-box{
  font-family:'Courier New',monospace; font-size:1.05rem; background:var(--navy); color:#4ade80;
  padding:.75rem 1rem; border-radius:10px; letter-spacing:1px; display:inline-block;
  word-break:break-all; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
@media (max-width: 575.98px){ .license-key-box{ font-size:.85rem; width:100%; } }

/* ---------------------------------------------------------------------
   TABLES
   --------------------------------------------------------------------- */
.table{ border-radius:var(--radius-sm); overflow:hidden; }
.table thead{ background:#f1f3fb; }
.table thead th{ font-weight:700; color:var(--navy); border-bottom:2px solid var(--border); white-space:nowrap; }
.table-responsive{ border-radius:var(--radius-sm); }

/* ---------------------------------------------------------------------
   ADMIN PANEL
   --------------------------------------------------------------------- */
.admin-shell{ min-height:100vh; }
.admin-topbar{
  background:var(--navy); color:#fff; padding:.75rem 0; position:sticky; top:0; z-index:1030;
  box-shadow:0 2px 12px rgba(0,0,0,.15);
}
.admin-sidebar{
  background:linear-gradient(180deg,var(--navy),var(--navy-2)); min-height:100vh; color:#fff; width:250px;
}
.admin-sidebar a{ color:#c3c9e0; text-decoration:none; display:block; padding:.7rem 1rem; border-radius:10px; margin-bottom:.15rem; font-weight:500; transition:.15s; }
.admin-sidebar a:hover, .admin-sidebar a.active{ background:rgba(255,255,255,.12); color:#fff; }
.admin-content{ min-width:0; }
.stat-card{ border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:.2s; }
.stat-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.stat-card h4{ font-weight:800; color:var(--navy); }

@media (max-width: 991.98px){
  .admin-sidebar{ width:280px; }
  .admin-sidebar:not(.showing){ }
}

/* ---------------------------------------------------------------------
   MISC / RESPONSIVE FIXES
   --------------------------------------------------------------------- */
.container{ max-width:1200px; }

@media (max-width: 575.98px){
  h1{ font-size:1.6rem; }
  .display-5{ font-size:1.9rem; }
  .card-body{ padding:1rem; }
}

/* Keep flash alerts readable & tidy on mobile */
.alert{ border-radius:12px; border:none; box-shadow:var(--shadow-sm); }

/* Sticky checkout / cart summary looks better with a subtle border */
.summary-box{ border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow-sm); }