:root{
      --brand-green:#2e7d32;
      --brand-green-2:#1b5e20;
      --soft-bg:#eef3ff;
      --card-border:#dfe7ff;
      --muted:#6c757d;

      /* GANTI INI dengan background hero Anda */
      --hero-bg: url("../images/banner.jpg");
    }

    body{ background:#f6f8ff; }
    .topbar{
      height:36px;
      background:#1f232a;
      color:#fff;
      font-size:.9rem;
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
    }
    .topbar a{
      color:#fff; text-decoration:none;
      position:absolute; right:18px;
      font-weight:500;
    }
    .topbar a:hover{ text-decoration:underline; }

    .navbar-wr{
      background:#fff;
      border-bottom:1px solid rgba(0,0,0,.06);
    }
    .brand{
      display:flex; gap:10px; align-items:center;
    }
    .brand .logo{
      width:34px; height:34px; border-radius:6px;
      background:linear-gradient(135deg, #2e7d32, #7cb342);
      display:grid; place-items:center; color:#fff;
      font-weight:700;
    }
    .brand .title{
      line-height:1.1;
    }
    .brand .title b{ display:block; font-size:1rem; letter-spacing:.2px; }
    .brand .title small{ display:block; color:var(--muted); font-size:.78rem; }

    .hero{
      position:relative;
      background-image: var(--hero-bg);
      background-size:cover;
      background-position:center;
      min-height:545px;
      display:flex;
      align-items:center;
      padding:56px 0 44px;
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute; inset:0;
      background:rgba(0,0,0,.45);
    }
    .hero .container{ position:relative; z-index:1; }
    .hero h1{
      color:#fff;
      font-weight:600;
      letter-spacing:.2px;
      text-align:center;
      margin-bottom:10px;
    }
    .hero p{
      color:rgba(255,255,255,.9);
      text-align:center;
      margin-bottom:22px;
    }

    .searchbar{
      max-width:760px;
      margin:0 auto;
      background:#fff;
      border-radius:999px;
      padding:10px 12px;
      display:flex;
      gap:10px;
      align-items:center;
      box-shadow:0 12px 30px rgba(0,0,0,.22);
    }
    .searchbar input{
      border:none;
      outline:none;
      padding:10px 14px;
      width:100%;
      border-radius:999px;
      font-size:1rem;
    }
    .btn-search{
      background:var(--brand-green);
      border:none;
      border-radius:999px;
      padding:10px 22px;
      font-weight:600;
      white-space:nowrap;
      color: white;
    }
    .btn-search:hover{ 
      background:var(--brand-green-2); 
      color: white;
    }

    .btn-adv{
      display:block;
      width:max-content;
      margin:10px auto 0;
      background:#fff;
      color:#222;
      border:1px solid rgba(255,255,255,.65);
      border-radius:999px;
      padding:7px 14px;
      font-size:.86rem;
      box-shadow:0 10px 24px rgba(0,0,0,.18);
      text-decoration:none;
    }
    .btn-adv:hover{ 
      color:#000; 
      background:#f8f9fa;
    }

    .browse-strip{
      background: var(--soft-bg);
      padding:24px 0 28px;
    }
    .browse-card{
      background:#fff;
      border:1px solid rgba(0,0,0,.05);
      border-radius:14px;
      padding:16px 12px;
      text-align:center;
      transition:.15s ease;
      height:100%;
    }
    .browse-card:hover{
      transform:translateY(-2px);
      box-shadow:0 10px 26px rgba(0,0,0,.08);
    }
    .browse-icon{
      width:44px; height:44px;
      border-radius:10px;
      display:grid; place-items:center;
      margin:0 auto 10px;
      border:1px solid rgba(46,125,50,.35);
      color:var(--brand-green);
      background:rgba(46,125,50,.06);
      font-size:22px;
    }
    .browse-card .small{ color:var(--muted); font-size:.86rem; }
    .browse-card b{ display:block; margin-top:2px; }

    .section-title{
      margin-top:28px;
      margin-bottom:6px;
      font-weight:700;
      color:#2b2f36;
    }
    .section-sub{
      color:var(--muted);
      font-size:.92rem;
      margin-bottom:14px;
    }

    .item-card{
      background:#fff;
      border:1px solid rgba(0,0,0,.06);
      border-radius:12px;
      padding:14px;
      height:100%;
    }
    .item-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:8px;
    }
    .badge-type{
      background:rgba(46,125,50,.12);
      color:var(--brand-green);
      border:1px solid rgba(46,125,50,.25);
      font-weight:600;
      padding: 4px 10px;
      font-size: 0.85em;
    }
    .doc-ico{
      color:#6c8cff;
      font-size:22px;
    }
    .item-title{
      font-size:.95rem;
      font-weight:600;
      margin:8px 0 10px;
      color:#2b2f36;
      line-height:1.25;
      min-height:44px;
    }
    .item-author{
      color:var(--muted);
      font-size:.9rem;
      margin:0;
    }

    footer{
      margin-top:34px;
      background:#1f232a;
      color:#cfd6e4;
      padding:36px 0 14px;
    }
    footer h6{
      color:#fff;
      font-weight:700;
      margin-bottom:10px;
    }
    footer a{
      color:#cfd6e4;
      text-decoration:none;
      font-size:.92rem;
    }
    footer a:hover{ 
      text-decoration:underline; 
      color: white;
    }
    .footer-hr{
      border-color:rgba(255,255,255,.12);
      margin:18px 0 10px;
    }
    .license{
      color:rgba(255,255,255,.7);
      font-size:.88rem;
      text-align:center;
      margin:0;
      padding-bottom:10px;
    }

    /* modal */
    .modal-header{
      border-bottom:1px solid rgba(0,0,0,.06);
    }
    .modal-footer{
      border-top:1px solid rgba(0,0,0,.06);
    }
    
    /* Navbar toggler icon */
    .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }