:root{
  --apel-primary:#0d6efd;
  --apel-bg:#f5f7fb;
  --apel-border:#e5e9f0;
  --apel-text:#1f2937;
  --apel-muted:#6b7280;
}
html,body{min-height:100%}
body{
  background:var(--apel-bg);
  color:var(--apel-text);
  font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
}
.navbar{
  min-height:68px;
  z-index:1040;
}
.brand-icon{
  width:38px;height:38px;border-radius:11px;
  display:inline-grid;place-items:center;
  background:linear-gradient(135deg,#0d6efd,#084298);
  color:#fff;font-weight:800;
  box-shadow:0 .35rem .9rem rgba(13,110,253,.18);
}
.search-holder{max-width:720px}
.search-input{
  min-height:42px;
  padding-left:40px;
  border-color:var(--apel-border);
  background:#f8fafc;
}
.search-input:focus{
  background:#fff;
  border-color:#86b7fe;
  box-shadow:0 0 0 .2rem rgba(13,110,253,.10);
}
.search-icon{
  position:absolute;left:14px;top:50%;
  transform:translateY(-50%);
  color:#7b8797;z-index:3;
}
.search-results{
  position:absolute;left:0;right:0;top:calc(100% + 8px);
  display:none;max-height:430px;overflow:auto;z-index:1050;
  border:1px solid var(--apel-border);
}
.search-result{
  display:block;padding:.7rem .85rem;
  border-bottom:1px solid #eef1f5;
  color:inherit;text-decoration:none;
}
.search-result:hover{background:#f8fbff}
.search-result strong{display:block;font-size:.85rem}
.search-result small{color:var(--apel-muted)}

.app-layout{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  min-height:calc(100vh - 100px);
}
.sidebar-wrap{
  position:sticky;top:88px;height:calc(100vh - 100px);
  background:#fff;border-right:1px solid var(--apel-border);
  z-index:1020;
}
.sidebar-wrap .nav-link{
  color:#4b5563;
  border-radius:.55rem;
  padding:.52rem .65rem;
  font-size:.84rem;
  display:flex;align-items:center;
}
.sidebar-wrap .nav-link i{
  width:20px;text-align:center;color:#748094;
}
.sidebar-wrap .nav-link:hover{
  color:var(--apel-primary);
  background:#f1f6ff;
}
.sidebar-wrap .nav-link.active{
  color:var(--apel-primary);
  background:#eaf3ff;
  font-weight:600;
}
.sidebar-wrap .nav-link.active i{color:var(--apel-primary)}
.sidebar-body::-webkit-scrollbar{width:7px}
.sidebar-body::-webkit-scrollbar-thumb{background:#dce2ea;border-radius:10px}
.main-area{min-width:0}
.content-container{max-width:1120px;margin:0 auto}
.content-card{
  background:#fff;
  border:1px solid var(--apel-border);
  border-radius:1rem;
  box-shadow:0 .4rem 1.5rem rgba(31,41,55,.045);
}
.article-header{
  padding:2rem 2rem 1.5rem;
  background:linear-gradient(135deg,#fff 55%,#f5f9ff);
  border-bottom:1px solid var(--apel-border);
  border-radius:1rem 1rem 0 0;
}
.breadcrumb{font-size:.78rem}
.article-title{
  font-size:clamp(1.8rem,3vw,2.45rem);
  font-weight:750;letter-spacing:-.025em;
}
.article-lead{color:#667085;font-size:1rem;max-width:850px}
.article-body{padding:1rem 2rem 2.4rem}
.article-body h2{
  margin-top:2rem;padding-bottom:.55rem;
  font-size:1.35rem;font-weight:700;
  border-bottom:1px solid #eef1f5;
}
.article-body h3{margin-top:1.5rem;font-size:1.05rem;font-weight:700}
.article-body p,.article-body li{font-size:.94rem;color:#3f4a5a}
.article-body code{
  background:#f1f3f5;border:1px solid #e5e7eb;
  padding:.12rem .35rem;border-radius:.3rem;font-size:.84em;
}
.article-body pre{
  background:#111827;color:#e5e7eb;border-radius:.75rem;
  padding:1rem;overflow:auto;
}
.article-body table{
  --bs-table-bg:#fff;
  font-size:.86rem;
}
.article-body img{max-width:100%;height:auto;border-radius:.65rem}
.toc-card{
  position:sticky;top:88px;
  border:1px solid var(--apel-border);
}
.toc-card a{
  display:block;color:#687386;text-decoration:none;
  padding:.25rem 0;font-size:.78rem;
}
.toc-card a:hover{color:var(--apel-primary)}
.toc-card a.active{color:var(--apel-primary);font-weight:600}
.page-footer-note{font-size:.76rem;color:#7b8492}
.badge{font-weight:600}
.feature-card{
  height:100%;text-decoration:none;color:inherit;
  border:1px solid var(--apel-border);
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.feature-card:hover{
  transform:translateY(-2px);
  box-shadow:0 .5rem 1.4rem rgba(31,41,55,.08);
  border-color:#cfe0f7;
}
.feature-icon{
  width:46px;height:46px;border-radius:12px;
  display:grid;place-items:center;
  background:#eaf3ff;color:var(--apel-primary);
  font-size:1.25rem;
}
.callout{border-left:4px solid var(--apel-primary)}
.callout-warning{border-left-color:#ffc107;background:#fff9e6}
.callout-success{border-left-color:#198754;background:#edf9f2}
.mobile-overlay{
  display:none;position:fixed;inset:0;background:rgba(15,23,42,.4);
  z-index:1020;
}
@media(max-width:991.98px){
  .app-layout{display:block;min-height:calc(100vh - 68px)}
  .main-area{margin-left:0}
  .sidebar-wrap{
    position:fixed;
    left:10px;
    top:84px;
    bottom:10px;
    width:min(310px,88vw);
    height:auto;
    border-radius:16px;
    transform:translateX(-115%);
    transition:transform .22s ease;
    box-shadow:0 1rem 3rem rgba(15,23,42,.22);
    z-index:1070;
  }
  body.sidebar-open .sidebar-wrap{transform:translateX(0)}
  body.sidebar-open .mobile-overlay{display:block}
  .article-header{padding:1.5rem 1.25rem 1.2rem}
  .article-body{padding:.8rem 1.25rem 1.8rem}
}
@media(max-width:575.98px){
  .navbar{min-height:60px}
  .app-layout{min-height:calc(100vh - 60px)}
  .sidebar-wrap{top:60px}
  .search-input{min-height:40px;font-size:.84rem}
  .content-card{border-radius:.75rem}
  .article-title{font-size:1.75rem}
  .article-body h2{font-size:1.2rem}
  .article-body p,.article-body li{font-size:.9rem}
}

/* Ruang untuk header floating */
@media(max-width:991.98px){
  }
@media(max-width:575.98px){
  }

/* Floating sidebar polish */
.sidebar-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}

/* =========================================================
   FLOATING HEADER + SIDEBAR
   Footer tetap normal di bawah konten
   ========================================================= */

.site-header-sticky{
  position:fixed !important;
  top:12px;
  left:12px;
  right:12px;
  width:auto;
  min-height:64px;
  border:1px solid rgba(219,226,236,.96) !important;
  border-radius:14px;
  box-shadow:0 .55rem 1.8rem rgba(31,41,55,.12);
  z-index:1080;
  background:rgba(255,255,255,.97) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

/* Sidebar floating, visually part of the same navigation system as header */
.sidebar-wrap{
  position:fixed !important;
  left:12px;
  top:88px;
  bottom:12px;
  width:270px;
  height:auto !important;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(219,226,236,.96);
  border-radius:14px;
  box-shadow:0 .55rem 1.8rem rgba(31,41,55,.10);
  overflow:hidden;
  z-index:1020;
}

/* The content starts beside the floating sidebar */
.app-layout{
  display:block;
  min-height:calc(100vh - 68px);
}
.main-area{
  min-width:0;
  margin-left:294px;
}

/* Space reserved only for the fixed header */
.floating-header-space{
  height:88px;
}

/* Footer is NOT floating.
   It belongs visually to the content column and never extends under the sidebar. */
.site-footer-floating{
  position:static !important;
  width:auto;
  margin-left:294px;
  margin-right:12px;
  margin-bottom:12px;
  border:1px solid var(--apel-border) !important;
  border-radius:14px;
  box-shadow:0 .4rem 1.4rem rgba(31,41,55,.055);
  background:#fff !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Remove the old footer spacer because footer is now in normal document flow */
.floating-footer-space{
  display:none !important;
}

@media(max-width:991.98px){
  .app-layout{
    display:block;
    min-height:calc(100vh - 68px);
  }

  .main-area{
    margin-left:0;
  }

  .sidebar-wrap{
    position:fixed !important;
    left:10px;
    top:82px;
    bottom:10px;
    width:min(310px,88vw);
    height:auto !important;
    border-radius:14px;
    transform:translateX(-115%);
    transition:transform .22s ease;
    box-shadow:0 1rem 3rem rgba(15,23,42,.22);
    z-index:1070;
  }

  body.sidebar-open .sidebar-wrap{
    transform:translateX(0);
  }

  body.sidebar-open .mobile-overlay{
    display:block;
  }

  .site-footer-floating{
    position:static !important;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:10px;
    border-radius:14px;
  }
}

@media(max-width:575.98px){
  .site-header-sticky{
    top:8px;
    left:8px;
    right:8px;
    min-height:58px;
    border-radius:12px;
  }

  .floating-header-space{
    height:74px;
  }

  .sidebar-wrap{
    top:76px;
    left:8px;
    bottom:8px;
    border-radius:12px;
  }

  .site-footer-floating{
    margin-left:8px;
    margin-right:8px;
    margin-bottom:8px;
    border-radius:12px;
  }
}


/* =========================================================
   FINAL NAVIGATION — EDGE TO EDGE
   Header dan sidebar tetap fixed/floating, tetapi menempel
   ke tepi viewport tanpa rounded corner.
   ========================================================= */

/* Header */
.site-header-sticky{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  min-height:68px;
  margin:0 !important;
  border-radius:0 !important;
  border-top:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  border-bottom:1px solid var(--apel-border) !important;
  box-shadow:0 .35rem 1.1rem rgba(31,41,55,.08);
  background:rgba(255,255,255,.98) !important;
}

/* Sidebar */
.sidebar-wrap{
  position:fixed !important;
  left:0 !important;
  top:68px !important;
  bottom:0 !important;
  width:280px !important;
  height:auto !important;
  margin:0 !important;
  border-radius:0 !important;
  border-left:0 !important;
  border-bottom:0 !important;
  border-top:0 !important;
  border-right:1px solid var(--apel-border) !important;
  box-shadow:0 .35rem 1.1rem rgba(31,41,55,.06);
  background:#fff !important;
}

/* Content starts after the edge-to-edge sidebar */
.main-area{
  margin-left:300px !important;
}

/* Footer remains normal, only under the content column */
.site-footer-floating{
  position:static !important;
  margin-left:300px !important;
  margin-right:20px !important;
  margin-bottom:20px !important;
  border-radius:.75rem !important;
}

/* Header spacing */
.floating-header-space{
  height:84px !important;
}

/* Desktop content aligns cleanly with navigation */
@media(min-width:992px){
  .main-area .container-fluid{
    padding-left:10px !important;
    padding-right:20px !important;
  }
}

/* Tablet/mobile */
@media(max-width:991.98px){
  .site-header-sticky{
    min-height:60px;
  }

  .floating-header-space{
    height:74px !important;
  }

  .sidebar-wrap{
    top:60px !important;
    left:0 !important;
    bottom:0 !important;
    width:min(310px,88vw) !important;
    border-radius:0 !important;
    border-right:1px solid var(--apel-border) !important;
    box-shadow:1rem 0 3rem rgba(15,23,42,.16);
  }

  .main-area{
    margin-left:0 !important;
  }

  .site-footer-floating{
    margin-left:10px !important;
    margin-right:10px !important;
    margin-bottom:10px !important;
  }
}

@media(max-width:575.98px){
  .site-header-sticky{
    top:0 !important;
    left:0 !important;
    right:0 !important;
    border-radius:0 !important;
  }

  .floating-header-space{
    height:68px !important;
  }

  .sidebar-wrap{
    top:60px !important;
    left:0 !important;
    bottom:0 !important;
    border-radius:0 !important;
  }

  .site-footer-floating{
    margin-left:8px !important;
    margin-right:8px !important;
    margin-bottom:8px !important;
  }
}

/* Screenshot form dari Aset foto.zip */
.form-screenshot .card{
  background:#fff;
  border-color:var(--apel-border) !important;
  border-radius:.75rem;
}
.form-screenshot img{
  display:block;
  width:100%;
  height:auto;
  background:#f8fafc;
}
.form-screenshot figcaption{
  line-height:1.5;
}

/* Hasil pencarian: tampilkan nama halaman saja, tanpa alamat file HTML */
.search-result strong{
  display:block;
  font-size:.88rem;
  line-height:1.35;
}
.search-result{
  text-decoration:none !important;
}