/* =====================================================================
   sharecode.id — Modern SaaS theme (global override)
   Dibuat: 2026-06-30. Memodernkan AdminLTE/Bootstrap4 tanpa ubah markup.
   ===================================================================== */

:root{
  --brand:#2563eb; --brand-2:#3b82f6; --brand-ink:#1d4ed8;
  --accent:#f59e0b;
  --bg:#f4f7fb; --surface:#ffffff;
  --ink:#0f172a; --ink-2:#334155; --muted:#64748b;
  --line:#e7edf4;
  --radius:14px; --radius-lg:22px; --radius-sm:10px;
  --sh-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --sh:0 6px 20px rgba(16,24,40,.08);
  --sh-lg:0 16px 40px rgba(16,24,40,.14);
  --grad:linear-gradient(135deg,#2563eb 0%,#4f46e5 55%,#7c3aed 100%);
}

/* ---------- Base ---------- */
body,.content-wrapper{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;
  background:var(--bg) !important;
  color:var(--ink-2);
  -webkit-font-smoothing:antialiased;
  letter-spacing:.1px;
}
.wrapper{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important; }
/* hero inner pakai class .wrapper juga -> pastikan transparan & tanpa shadow */
.home-section .wrapper{ background:transparent !important; box-shadow:none !important; max-width:780px !important; }
h1,h2,h3,h4,h5,.section-title{
  font-family:'Plus Jakarta Sans','Inter',sans-serif !important;
  color:var(--ink); font-weight:800; letter-spacing:-.4px;
}
a{ color:var(--brand); transition:color .15s ease; }
a:hover{ color:var(--brand-ink); }
::selection{ background:rgba(37,99,235,.18); }
html{ scroll-behavior:smooth; }
.container{ max-width:1180px; }

/* ---------- Top utility bar ---------- */
.top-header,.top-header.bg-light{
  background:#f1f5f9 !important; color:#0f172a !important; font-size:.82rem; padding:8px 0;
  border-bottom:1px solid var(--line) !important;
}
.top-header a,.top-header.bg-light a{ color:#0f172a !important; font-weight:600; }
.top-header a:hover{ color:var(--brand) !important; }
.top-header i{ color:var(--brand); }

/* ---------- Navbar ---------- */
.main-header.navbar,.main-header.navbar.navbar-white{
  background:rgba(255,255,255,.85) !important;
  backdrop-filter:saturate(160%) blur(10px);
  border:0 !important;
  box-shadow:0 1px 0 var(--line),0 6px 18px rgba(16,24,40,.04);
  padding:.55rem 0;
}
.navbar-brand img{ width:168px !important; }
.main-header .navbar-nav .nav-link{
  color:var(--ink-2) !important; font-weight:600; border-radius:10px;
  padding:.5rem .85rem !important; margin:0 2px; transition:all .15s ease;
}
.main-header .navbar-nav .nav-link:hover{
  color:var(--brand) !important; background:rgba(37,99,235,.08);
}
.navbar-badge{ border-radius:999px; padding:.2em .45em; font-weight:700; }
.dropdown-menu{
  border:1px solid var(--line) !important; border-radius:16px !important;
  box-shadow:var(--sh-lg) !important; padding:.5rem !important; margin-top:.5rem !important;
}
.dropdown-item{ border-radius:10px; padding:.55rem .8rem; font-weight:500; }
.dropdown-item:hover{ background:rgba(37,99,235,.08); color:var(--brand); }
.dropdown-item.text-danger:hover{ background:rgba(239,68,68,.1); }

/* ---------- Buttons ---------- */
.btn{
  border-radius:12px; font-weight:600; letter-spacing:.2px;
  padding:.55rem 1.1rem; transition:transform .12s ease,box-shadow .15s ease,background .15s ease;
  border:1px solid transparent;
}
.btn:active{ transform:translateY(0); }
.btn-lg{ padding:.8rem 1.6rem; border-radius:14px; font-size:1rem; }
.btn-sm{ border-radius:9px; padding:.35rem .7rem; }
.btn-primary{
  background:var(--grad) !important; border:0 !important; color:#fff !important;
  box-shadow:0 6px 16px rgba(37,99,235,.32);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(37,99,235,.42); }
.btn-success{ background:#16a34a !important; border:0 !important; box-shadow:0 6px 16px rgba(22,163,74,.28); }
.btn-success:hover{ transform:translateY(-2px); }
.btn-danger{ background:#ef4444 !important; border:0 !important; }
.btn-warning{ background:var(--accent) !important; border:0 !important; color:#1f2937 !important; }
.btn-info{ background:#0ea5e9 !important; border:0 !important; }
.btn-outline-primary{ border:1.5px solid var(--brand) !important; color:var(--brand) !important; background:transparent !important; }
.btn-outline-primary:hover{ background:var(--brand) !important; color:#fff !important; transform:translateY(-2px); }
.btn-outline-light{ border:1.5px solid rgba(255,255,255,.7) !important; color:#fff !important; }
.btn-outline-light:hover{ background:#fff !important; color:var(--brand) !important; }
.btn-light{ background:#fff !important; border:1px solid var(--line) !important; color:var(--ink) !important; }

/* ---------- Cards (umum + produk) ---------- */
.card{
  border:1px solid var(--line) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--sh-sm); background:var(--surface);
  overflow:hidden;
}
.card.rounded-0{ border-radius:var(--radius-lg) !important; }
.card-header{ background:transparent; border-bottom:1px solid var(--line); font-weight:700; }
.card-footer{ background:transparent; border-top:1px solid var(--line) !important; }

/* tinggi kartu seragam secara natural: judul di-clamp 2 baris + gambar rasio tetap */
.sc-list{ margin-bottom:24px; }
.sc-list .card{
  height:auto !important;
  border-radius:18px !important; box-shadow:var(--sh-sm);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
/* matikan pemuaian flex bawaan Bootstrap supaya footer menempel di bawah judul */
.sc-list .card-body{ flex:0 0 auto !important; }
.sc-list .card-footer{ flex:0 0 auto !important; }
.sc-list .card:hover{
  transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:rgba(37,99,235,.35) !important;
}
.sc-list .sc-thumbnail{ overflow:hidden; }
.sc-list .card-img-top{
  border-radius:0 !important; aspect-ratio:16/10; object-fit:cover; width:100%;
  transition:transform .35s ease;
}
.sc-list .card:hover .card-img-top{ transform:scale(1.06); }
.sc-list .card-body{ padding:.9rem 1.05rem .65rem !important; min-height:auto !important; }
.sc-list .author{ color:var(--muted); font-size:.78rem; font-weight:600; }
.sc-list .sc-title{ margin-top:.4rem; }
.sc-list .sc-title a{
  color:var(--ink) !important; font-weight:700; font-size:.95rem; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.66em;
}
.sc-list .sc-title a:hover{ color:var(--brand) !important; }
.sc-list .card-body .badge{ font-size:.7rem; }
.sc-list .card-footer{ padding:.55rem 1.05rem !important; font-weight:700; font-size:.88rem; }
.sc-list .card-footer .text-success{ color:#16a34a !important; font-weight:800 !important; font-size:.95rem; }

/* ribbon free/pro -> badge pill modern */
.ribbon-wrapper{ width:auto; height:auto; top:12px; right:12px; overflow:visible; }
.ribbon{
  transform:none !important; left:auto !important; right:auto !important; top:auto !important;
  position:static; width:auto; padding:.28em .7em; border-radius:999px;
  font-size:.68rem; font-weight:800; letter-spacing:.6px; box-shadow:var(--sh-sm);
}

/* ---------- Hero (modern, terang, 2 kolom) ---------- */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%,#eef4ff 100%);
  padding:64px 0 72px; border-bottom:1px solid var(--line);
}
.hero-blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; z-index:0; }
.hero-blob-1{ width:420px; height:420px; background:rgba(37,99,235,.18); top:-120px; right:-80px; }
.hero-blob-2{ width:340px; height:340px; background:rgba(124,58,237,.14); bottom:-150px; left:-110px; }
.hero .container{ position:relative; z-index:2; }
.hero-copy{ padding-right:20px; }
.hero-pill{
  display:inline-flex; align-items:center; gap:8px; background:#fff;
  border:1px solid var(--line); color:var(--brand-ink); font-weight:700; font-size:.82rem;
  padding:.45rem .9rem; border-radius:999px; box-shadow:var(--sh-sm); margin-bottom:18px;
}
.hero-pill i{ font-size:.5rem; color:#22c55e; }
.hero-h1{
  font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.18; letter-spacing:-.5px; margin:0 0 14px;
  color:var(--ink); font-weight:800; font-family:'Plus Jakarta Sans','Inter',sans-serif;
}
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-lead{ color:var(--muted); font-size:1.08rem; line-height:1.7; max-width:540px; margin-bottom:22px; }
.hero-search{
  display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:8px; box-shadow:var(--sh); max-width:560px; position:relative;
}
.hero-search .hs-ic{ position:absolute; left:20px; color:var(--muted); }
.hero-search input[type=text]{
  flex:1; border:0; outline:0; padding:.7rem .8rem .7rem 2.4rem; font-size:1rem; background:transparent; color:var(--ink);
}
.hero-search .btn{ border-radius:12px; padding:.7rem 1.5rem; white-space:nowrap; }
.hero-checks{ display:flex; flex-wrap:wrap; gap:18px; margin:18px 0 16px; color:var(--ink-2); font-weight:600; font-size:.92rem; }
.hero-checks i{ color:#22c55e; margin-right:6px; }
.hero-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.hero-tags span{
  background:#fff; border:1px solid var(--line); color:var(--ink-2); font-weight:600;
  font-size:.78rem; padding:.32rem .75rem; border-radius:999px;
}
/* ilustrasi code window */
.hero-art{ position:relative; min-height:340px; display:flex; align-items:center; justify-content:center; }
.code-window{
  width:100%; max-width:440px; background:#0f172a; border-radius:20px; box-shadow:var(--sh-lg);
  overflow:hidden; border:1px solid rgba(255,255,255,.08); position:relative; z-index:2;
}
.cw-bar{ display:flex; align-items:center; gap:7px; padding:12px 14px; background:#111c33; }
.cw-bar i{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.cw-bar i:nth-child(1){ background:#ff5f57; } .cw-bar i:nth-child(2){ background:#febc2e; } .cw-bar i:nth-child(3){ background:#28c840; }
.cw-url{ margin-left:10px; background:#0b1424; color:#7c8aa5; font-size:.75rem; padding:.2rem .7rem; border-radius:8px; }
.cw-body{ padding:46px 24px 54px; text-align:center; background:radial-gradient(600px 200px at 50% 0,rgba(59,130,246,.22),transparent 70%); }
.cw-glyph{ font-family:'JetBrains Mono',monospace; font-size:2.6rem; font-weight:800; color:#60a5fa; }
.cw-text{ font-family:'Plus Jakarta Sans',sans-serif; font-size:1.7rem; font-weight:800; color:#fff; letter-spacing:3px; margin-top:6px; }
.cw-lines{ margin-top:26px; display:flex; flex-direction:column; gap:9px; align-items:center; }
.cw-lines span{ height:9px; border-radius:6px; background:rgba(255,255,255,.12); }
.cw-lines span:nth-child(1){ width:70%; } .cw-lines span:nth-child(2){ width:52%; } .cw-lines span:nth-child(3){ width:62%; }
.chip{
  position:absolute; font-weight:800; font-size:.8rem; color:#fff; padding:.45rem .8rem; border-radius:12px;
  box-shadow:var(--sh-lg); z-index:3; animation:floaty 4s ease-in-out infinite;
}
.chip-1{ background:#777bb3; top:8%; left:2%; }
.chip-2{ background:#ef4444; top:0; right:14%; animation-delay:.6s; }
.chip-3{ background:#f59e0b; top:46%; right:-2%; animation-delay:1.2s; }
.chip-4{ background:#2563eb; bottom:8%; left:0; animation-delay:.9s; }
.chip-5{ background:#0ea5e9; bottom:2%; right:18%; animation-delay:1.5s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@media (max-width:991px){
  .hero{ padding:44px 0 52px; text-align:center; }
  .hero-copy{ padding-right:0; }
  .hero-lead{ margin-left:auto; margin-right:auto; }
  .hero-search,.hero-checks,.hero-tags{ justify-content:center; margin-left:auto; margin-right:auto; }
  .hero-art{ margin-top:40px; }
}

/* ---------- Page header (banner halaman dalam) ---------- */
.content-header{
  background:linear-gradient(120deg,#1e3a8a 0%,#2563eb 45%,#6d28d9 100%) !important;
  color:#fff !important; position:relative; overflow:hidden;
}
.content-header::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(420px 200px at 88% -20%,rgba(255,255,255,.22),transparent 60%),
    radial-gradient(360px 220px at 12% 120%,rgba(255,255,255,.12),transparent 60%);
}
.content-header::after{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);
  background-size:18px 18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 35%,#000 100%);
          mask-image:linear-gradient(90deg,transparent,#000 35%,#000 100%);
}
.content-header .page-title{
  color:#fff !important; font-weight:800;
  font-family:'Plus Jakarta Sans','Inter',sans-serif; position:relative; z-index:2;
  text-shadow:0 2px 16px rgba(2,6,23,.18);
}
.content-header .page-desc{ color:rgba(255,255,255,.88) !important; position:relative; z-index:2; }

/* ---------- Stat / info-box ---------- */
.widget .container.bg-white{
  border-radius:var(--radius-lg) !important; box-shadow:var(--sh) !important;
  border:1px solid var(--line); padding:.6rem .4rem !important;
}
.info-box{
  border-radius:16px; background:transparent; box-shadow:none !important;
  min-height:auto; padding:.6rem; margin-bottom:.5rem;
}
.info-box-icon{
  border-radius:16px !important; width:58px; height:58px; font-size:1.3rem;
  box-shadow:var(--sh-sm);
}
.info-box-icon.bg-info{ background:var(--grad) !important; color:#fff; }
.info-box-icon.bg-success{ background:linear-gradient(135deg,#16a34a,#22c55e) !important; }
.info-box-icon.bg-warning{ background:linear-gradient(135deg,#f59e0b,#fbbf24) !important; }
.info-box-icon.bg-danger{ background:linear-gradient(135deg,#ef4444,#f87171) !important; }
.info-box-number{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.5rem; color:var(--ink); }
.info-box-text{ color:var(--muted); font-weight:600; text-transform:none; }

/* ---------- Section heading di konten ---------- */
.content .section-title,#heading-separator .section-title,#heading-separator h2{
  position:relative; display:inline-block;
}
#heading-separator{ margin-bottom:1.2rem; }

/* ---------- Badges ---------- */
.badge{ border-radius:999px; font-weight:600; padding:.4em .7em; }
.badge-danger{ background:#ef4444; }
.badge-warning{ background:var(--accent); color:#1f2937; }
.badge-success{ background:#16a34a; }
.badge-info{ background:#0ea5e9; }

/* ---------- Forms ---------- */
.form-control,.custom-select{
  border-radius:12px; border:1.5px solid var(--line); padding:.6rem .9rem; height:auto;
  background:#fff; color:var(--ink); transition:border-color .15s ease,box-shadow .15s ease;
}
.form-control:focus,.custom-select:focus{
  border-color:var(--brand); box-shadow:0 0 0 4px rgba(37,99,235,.14); outline:0;
}
.input-group-text{ border-radius:12px; border:1.5px solid var(--line); background:#f8fafc; }
label{ font-weight:600; color:var(--ink-2); }

/* ---------- Tables (dashboard user) ---------- */
.table thead th{ border:0; color:var(--muted); font-weight:700; text-transform:uppercase; font-size:.74rem; letter-spacing:.5px; }
.table td,.table th{ border-color:var(--line); vertical-align:middle; }
.table-striped tbody tr:nth-of-type(odd){ background:#f8fafc; }

/* ---------- Alerts ---------- */
.alert{ border:0; border-radius:14px; box-shadow:var(--sh-sm); }

/* ---------- Pagination ---------- */
.pagination .page-link{ border:1px solid var(--line); color:var(--ink-2); margin:0 3px; border-radius:10px; }
.pagination .page-item.active .page-link{ background:var(--brand); border-color:var(--brand); }

/* ---------- Footer ---------- */
.main-footer,footer.main-footer{ background:#0b1220 !important; color:#94a3b8; border:0; }
.main-footer a{ color:#cbd5e1 !important; }
.main-footer a:hover{ color:#fff !important; }
footer .content-footer,.content-footer{ background:#0f172a; color:#94a3b8; }
footer h5,.content-footer h5,.content-footer h6{ color:#fff !important; }

/* ---------- Scroll-to-top ---------- */
.scroltop{
  border-radius:14px !important; width:44px; height:44px; border:0;
  background:var(--grad) !important; box-shadow:var(--sh-lg) !important; color:#fff;
}

/* ---------- Content wrapper spacing ---------- */
.content-wrapper{ min-height:60vh; }
.content.p-0{ padding-top:0; }
section.content{ padding:2.2rem 0; }

/* ---------- Misc utilities ---------- */
.shadow,.shadow-sm{ box-shadow:var(--sh) !important; }
.rounded,.rounded-0{ border-radius:var(--radius) !important; }
.bg-primary{ background:var(--brand) !important; }
.text-primary{ color:var(--brand) !important; }
.bg-light{ background:var(--bg) !important; }