:root{--green:#075b3e;--green2:#178746;--blue:#1467d8;--purple:#7137b8;--ink:#12201b;--muted:#52615b;--line:#dfe7e3;--surface:#fff;--bg:#eef3f1}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:16px;line-height:1.5}.page-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(28px,5vw,76px);background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:10}.brand{display:flex;align-items:center;gap:14px;color:#0f1714;text-decoration:none}.brand img{width:52px;height:52px;object-fit:contain}.brand strong{display:block;font-size:17px;line-height:1.12;text-transform:uppercase;font-weight:800;letter-spacing:.01em}.topnav{display:flex;align-items:center;gap:38px}.topnav>a{color:#111;text-decoration:none;font-size:15px;font-weight:600}.topnav>a:hover{color:var(--green)}.top-meta{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid #d9e2de;border-radius:22px;color:#53615c;font-size:12px}.top-meta b{width:4px;height:4px;border-radius:50%;background:#8ca098}main{flex:1}.hero-draft{position:relative;min-height:610px;padding:54px clamp(30px,7vw,112px) 34px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:linear-gradient(90deg,rgba(247,251,249,.98) 0%,rgba(247,251,249,.88) 34%,rgba(247,251,249,.25) 68%,rgba(247,251,249,.05) 100%),linear-gradient(135deg,#eaf2ef,#d8e4df)}.hero-draft:before{content:"";position:absolute;inset:0;background-image:url('../img/gedung-pn-sambas.jpg');background-size:cover;background-position:center 43%;opacity:.72}.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,.08) 0%,rgba(255,255,255,.02) 56%,rgba(237,245,241,.76) 100%)}.hero-content,.portal-grid{position:relative;z-index:2}.hero-content{max-width:680px}.welcome{font-size:19px;margin:0 0 4px;color:#111}.hero-content h1{font-size:clamp(38px,4vw,57px);line-height:1.06;letter-spacing:-.035em;margin:0;color:#063d2e;font-weight:800}.lead{max-width:590px;margin:20px 0 0;font-size:17px;line-height:1.65;color:#17221e}.portal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}.portal-card{min-height:190px;padding:22px 24px;display:grid;grid-template-columns:88px 1fr;gap:22px;align-items:start;background:rgba(255,255,255,.94);border:1px solid rgba(215,225,220,.9);border-radius:18px;box-shadow:0 13px 30px rgba(20,48,38,.12);backdrop-filter:blur(8px)}.portal-icon{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#55b95f,#18893e);color:#fff;border:7px solid #dff1e1;box-shadow:0 4px 12px rgba(18,104,53,.2)}.portal-aph .portal-icon{background:linear-gradient(145deg,#338af0,#075ecb);border-color:#d9eaff}.portal-internal .portal-icon{background:linear-gradient(145deg,#8b4dcc,#5f279e);border-color:#eadcf8}.portal-icon svg{width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.portal-copy h2{font-size:22px;margin:4px 0 9px;font-weight:800}.portal-copy p{min-height:50px;margin:0 0 17px;font-size:14px;line-height:1.55;color:#222}.portal-action{height:42px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;border-radius:7px;background:linear-gradient(90deg,#188b43,#2ca64e);color:#fff;text-decoration:none;font-size:14px;font-weight:800;box-shadow:0 6px 14px rgba(18,115,56,.16)}.portal-aph .portal-action{background:linear-gradient(90deg,#0965d5,#2478e2)}.portal-internal .portal-action{background:linear-gradient(90deg,#7132ad,#8b47c6)}.portal-action strong{font-size:25px;line-height:1}.benefit-strip{margin:0 clamp(30px,7vw,112px) 34px;padding:22px 26px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px rgba(23,52,42,.06)}.benefit-strip>div{display:flex;align-items:center;gap:15px;padding:2px 22px;border-right:1px solid #e5ebe8}.benefit-strip>div:last-child{border-right:0}.benefit-icon{font-size:31px;color:#16884a;line-height:1}.benefit-strip p{margin:0}.benefit-strip strong,.benefit-strip small{display:block}.benefit-strip strong{font-size:15px;margin-bottom:4px}.benefit-strip small{font-size:12px;line-height:1.45;color:#4e5c56}.institution-footer{min-height:66px;padding:14px clamp(30px,4vw,62px);display:grid;grid-template-columns:1.4fr .8fr 1fr 1.4fr;align-items:center;gap:24px;background:linear-gradient(90deg,#004c39,#006149);color:#fff;font-size:12px}.institution-footer span:last-child{text-align:right;color:#d9ebe5}@media(max-width:1100px){.portal-card{grid-template-columns:70px 1fr;padding:20px}.portal-icon{width:64px;height:64px}.portal-icon svg{width:34px;height:34px}.portal-copy h2{font-size:19px}.topnav{gap:20px}.top-meta{display:none}}@media(max-width:900px){body{font-size:16px}.topbar{height:78px;padding:0 22px}.topnav>a{display:none}.hero-draft{min-height:auto;padding:42px 22px 30px}.hero-content h1{font-size:42px}.lead{font-size:16px}.portal-grid{grid-template-columns:1fr;margin-top:36px}.portal-card{min-height:160px;grid-template-columns:78px 1fr}.benefit-strip{grid-template-columns:1fr 1fr;margin:0 22px 28px}.benefit-strip>div{border-right:0;border-bottom:1px solid #e5ebe8;padding:16px}.institution-footer{grid-template-columns:1fr 1fr;text-align:center}.institution-footer span:last-child{text-align:center}}@media(max-width:560px){.brand img{width:44px;height:44px}.brand strong{font-size:14px}.hero-content h1{font-size:35px}.welcome{font-size:17px}.lead{font-size:15px}.portal-card{grid-template-columns:1fr}.portal-icon{width:64px;height:64px}.portal-copy h2{font-size:21px}.portal-copy p{font-size:14px}.benefit-strip{grid-template-columns:1fr}.institution-footer{grid-template-columns:1fr;font-size:11px}}


/* =========================================================
   Hero Readability + Benefit Icons v0.1.3
   Visual treatment follows the approved reference while
   preserving the existing page structure and original photo.
   ========================================================= */

/* Keep the original courthouse photograph untouched. */
.hero-draft:before{
  opacity:.78;
}

/* Localized readability layer: protects copy without washing out the whole photo. */
.hero-content{
  position:relative;
  max-width:760px;
  padding:20px 24px 22px 0;
  isolation:isolate;
}
.hero-content:before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-26px;
  left:-44px;
  right:-72px;
  bottom:-28px;
  border-radius:30px;
  background:
    radial-gradient(ellipse at 34% 42%,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.82) 38%,
      rgba(255,255,255,.56) 62%,
      rgba(255,255,255,0) 82%);
  filter:blur(2px);
  pointer-events:none;
}
.welcome{
  color:#0d1714;
  font-weight:500;
  text-shadow:
    0 1px 0 rgba(255,255,255,.96),
    0 0 8px rgba(255,255,255,.78);
}
.hero-content h1{
  color:#063d2e;
  text-shadow:
    0 1px 0 rgba(255,255,255,.98),
    0 0 9px rgba(255,255,255,.9),
    0 2px 10px rgba(255,255,255,.72);
}
.lead{
  max-width:660px;
  color:#14211d;
  font-weight:500;
  text-shadow:
    0 1px 0 rgba(255,255,255,.98),
    0 0 7px rgba(255,255,255,.86);
}

/* Approved icon treatment: consistent outlined SVGs inside soft circular medallions. */
.benefit-strip{
  padding:26px 28px;
  border-radius:18px;
  box-shadow:0 12px 30px rgba(23,52,42,.08);
}
.benefit-strip>div{
  gap:18px;
  padding:4px 24px;
}
.benefit-icon{
  flex:0 0 56px;
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(145deg,#edf8f1,#e3f2e8);
  border:1px solid #d2eadb;
  color:#11864a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
}
.benefit-icon svg{
  width:29px;
  height:29px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.benefit-strip strong{
  font-size:16px;
  line-height:1.3;
  color:#12201b;
}
.benefit-strip small{
  margin-top:5px;
  font-size:13px;
  line-height:1.5;
  color:#46564f;
}

/* Slightly strengthen separators so each benefit reads as a discrete item. */
.benefit-strip>div{
  border-right-color:#dfe7e3;
}

@media(max-width:900px){
  .hero-content{
    padding-right:0;
  }
  .hero-content:before{
    left:-26px;
    right:-26px;
    opacity:.94;
  }
  .benefit-strip>div{
    gap:16px;
  }
}

@media(max-width:560px){
  .hero-content:before{
    top:-18px;
    left:-18px;
    right:-18px;
    bottom:-18px;
    background:rgba(255,255,255,.72);
    border-radius:22px;
    filter:blur(.5px);
  }
  .benefit-icon{
    width:50px;
    height:50px;
    flex-basis:50px;
  }
  .benefit-icon svg{
    width:26px;
    height:26px;
  }
}


/* =========================================================
   Footer + Admin Config v0.2.0
   ========================================================= */
.institution-footer{
  display:block;
  min-height:auto;
  padding:20px clamp(30px,4vw,62px);
  font-size:13px;
}

.footer-primary,
.footer-secondary{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.footer-primary{
  gap:12px 24px;
}

.footer-primary span,
.footer-primary a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#fff;
  text-decoration:none;
}

.footer-primary b{
  font-weight:650;
}

.footer-primary a:hover{
  text-decoration:underline;
}

.footer-secondary{
  gap:8px 18px;
  margin-top:13px;
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.18);
  color:#d9ebe5;
  font-size:12px;
}

.ui-icon{
  flex:0 0 auto;
}

/* Admin configuration */
.admin-config-body{
  min-height:100vh;
  background:#eef3f1;
  padding:32px 20px;
}

.admin-config-shell{
  max-width:1050px;
  margin:0 auto;
}

.admin-config-head{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-start;
  margin-bottom:22px;
}

.admin-config-head h1{
  margin:10px 0 6px;
  font-size:32px;
  color:#063d2e;
}

.admin-config-head p{
  margin:0;
  color:#52615b;
}

.admin-back{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#075b3e;
  text-decoration:none;
  font-weight:700;
}

.admin-config-user{
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
}

.admin-config-user a{
  color:#075b3e;
  text-decoration:none;
  font-weight:700;
}

.admin-config-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 12px 30px rgba(23,52,42,.08);
  padding:28px;
}

.config-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.config-grid label{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.config-grid label span{
  font-size:14px;
  font-weight:800;
  color:#344054;
}

.config-grid input,
.config-grid textarea{
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border:1px solid #d7dfdb;
  border-radius:9px;
  font:inherit;
  color:#12201b;
  background:#fff;
}

.config-grid textarea{
  resize:vertical;
}

.config-grid small{
  color:#667085;
  line-height:1.45;
}

.config-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:22px;
}

.config-save{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:10px 16px;
  border:0;
  border-radius:9px;
  background:#075b3e;
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

.config-flash{
  margin-bottom:16px;
  padding:12px 14px;
  border-radius:9px;
}

.config-flash.success{
  background:#ecfdf3;
  color:#067647;
}

.config-flash.error{
  background:#fff1f2;
  color:#b42318;
}

@media(max-width:760px){
  .footer-primary,
  .footer-secondary{
    justify-content:flex-start;
    align-items:flex-start;
  }

  .footer-primary{
    flex-direction:column;
    gap:10px;
  }

  .admin-config-head{
    flex-direction:column;
  }

  .config-grid{
    grid-template-columns:1fr;
  }

  .admin-config-user{
    width:100%;
    justify-content:space-between;
  }

  .config-actions .config-save{
    width:100%;
    justify-content:center;
  }
}


/* =========================================================
   Top Navigation Simplification v0.2.2
   APP berfungsi sebagai gateway aplikasi, bukan duplikasi website utama.
   ========================================================= */
.topnav{
  gap:18px;
}

.main-site-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 12px;
  border:1px solid #d9e2de;
  border-radius:22px;
  color:#344054 !important;
  background:#fff;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1;
  white-space:nowrap;
  transition:.18s ease;
}

.main-site-link:hover{
  color:var(--green) !important;
  border-color:#b6d4c5;
  background:#f5faf7;
}

.main-site-link .ui-icon{
  color:var(--green);
}

@media(max-width:900px){
  .topnav{
    gap:10px;
  }

  .main-site-link{
    display:inline-flex !important;
  }
}

@media(max-width:620px){
  .main-site-link span{
    display:none;
  }

  .main-site-link{
    width:38px;
    height:38px;
    padding:0;
    justify-content:center;
    border-radius:50%;
  }
}