/*
Theme Name: PULDAPII Hybrid
Theme URI: https://puldapii.or.id/
Author: PULDAPII Media & Komunikasi
Description: Theme ringan untuk website layanan PULDAPII (Hijau + Orange), mendukung Gutenberg dan CPT Layanan/Portofolio dari plugin puldapii-core.
Version: 1.0.0
License: GPLv2 or later
Text Domain: puldapii-hybrid
*/

:root{
  --green:#00804a;
  --orange:#f27c00;
  --bg:#f8f8f8;
  --card:#ffffff;
  --text:#191919;
  --muted:#5b5b5b;
  --border:#e5e5e5;
  --shadow: 0 12px 30px rgba(0,0,0,.06);
  --radius: 18px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.9}
img{max-width:100%; height:auto}

.pul-container{max-width:1160px; margin:0 auto; padding:0 18px}
.pul-card{
  background:var(--card);
  border:2px solid var(--border);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
}
.pul-header{
  position:sticky; top:0; z-index:20;
  background: rgba(248,248,248,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(0,0,0,.04);
}
.pul-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.pul-brand{display:flex; align-items:center; gap:12px}
.pul-brand img{height:38px; width:auto}
.pul-nav{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.pul-nav a{font-weight:600; color:#404040; padding:8px 10px; border-radius:14px}
.pul-nav a[aria-current="page"]{background:rgba(0,128,74,.10); color:var(--green)}

.pul-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:14px; font-weight:800;
  border:2px solid transparent; cursor:pointer;
}
.pul-btn-primary{background:var(--orange); color:#fff}
.pul-btn-outline{background:#fff; color:var(--green); border-color:var(--green)}

.pul-hero{padding:26px 0 18px}
.pul-hero-grid{display:grid; grid-template-columns: 1.25fr .75fr; gap:18px}
.pul-hero-left{padding:22px}
.pul-pill{
  display:inline-flex; gap:8px; align-items:center;
  padding:6px 12px; border-radius:999px;
  border:2px solid rgba(0,128,74,.35);
  background:rgba(0,128,74,.08);
  color:var(--green);
  font-weight:800; font-size:12px;
}
.pul-h1{font-size:40px; line-height:1.1; margin:14px 0 8px}
.pul-lead{color:var(--muted); font-size:16px; margin:0 0 16px}
.pul-hero-actions{display:flex; gap:12px; flex-wrap:wrap}
.pul-hero-right{padding:22px; background:rgba(0,128,74,.06); border-color:rgba(0,128,74,.20)}
.pul-stat{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:6px}
.pul-stat .k{font-weight:900; color:var(--green); font-size:18px}
.pul-stat .v{color:var(--muted); font-size:12px}

.pul-section{padding:18px 0}
.pul-section-title{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:0 0 12px}
.pul-section-title h2{margin:0; font-size:22px}
.pul-section-title p{margin:0; color:var(--muted)}

.pul-grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.pul-grid-4{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px}
.pul-grid-2{display:grid; grid-template-columns:repeat(2, 1fr); gap:18px}
.pul-item{padding:16px}
.pul-item h3{margin:6px 0 6px; font-size:18px}
.pul-item p{margin:0; color:var(--muted); font-size:14px}
.pul-tag{
  display:inline-flex; align-items:center; justify-content:center;
  padding:4px 10px; border-radius:999px; font-weight:900; font-size:11px;
  border:2px solid rgba(242,124,0,.45);
  color:var(--orange);
  background:rgba(242,124,0,.08);
}

.pul-form{padding:16px}
.pul-field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.pul-field label{font-size:12px; font-weight:900; color:#606060}
.pul-input, .pul-textarea, .pul-select{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:2px solid var(--border);
  background:#fafafa;
  outline:none;
}
.pul-textarea{min-height:92px; resize:vertical}

.pul-footer{padding:18px 0 26px; color:#777}
.pul-footer .pul-card{padding:14px}

.pul-breadcrumb{font-size:12px; color:#7b7b7b; margin:10px 0}
.pul-archive-head{padding:16px}
.pul-searchbar{display:flex; gap:10px; flex-wrap:wrap}
.pul-searchbar input{flex:1; min-width:220px}

@media (max-width: 980px){
  .pul-hero-grid{grid-template-columns: 1fr}
  .pul-grid-4{grid-template-columns:repeat(2, 1fr)}
  .pul-grid-3{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 640px){
  .pul-nav{display:none}
  .pul-h1{font-size:30px}
  .pul-grid-4,.pul-grid-3,.pul-grid-2{grid-template-columns:1fr}
  .pul-stat{grid-template-columns:1fr}
}


/* Hero background image (optional) */
.pul-hero-bg{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}
.pul-hero-bg::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(248,248,248,.92) 0%, rgba(248,248,248,.86) 55%, rgba(248,248,248,.80) 100%);
  pointer-events:none;
}
.pul-hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(600px 240px at 20% 30%, rgba(242,124,0,.12), transparent 60%),
              radial-gradient(700px 260px at 80% 25%, rgba(0,128,74,.12), transparent 60%);
  pointer-events:none;
}
.pul-hero-bg > *{
  position: relative;
  z-index: 1;
}


/* Full page background (optional) */
body.pul-has-site-bg{
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* Soft overlay so content stays readable */
body.pul-has-site-bg::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(248,248,248,.88);
  pointer-events: none;
  z-index: 0;
}
/* Ensure layout layers above overlay */
.pul-header, main, footer{
  position: relative;
  z-index: 1;
}
@media (max-width: 980px){
  body.pul-has-site-bg{
    background-attachment: scroll;
  }
}


/* Sticky header */
.pul-header{
  position: sticky;
  top: 0;
  z-index: 1100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
/* Add subtle shadow only when scrolled (class toggled via JS) */
.pul-header.is-scrolled{
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}


/* Mobile menu */
.pul-nav-toggle{
  display:none;
  width:44px; height:44px;
  height:44px;
  border-radius:14px;
  border:2px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.90);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
}
.pul-nav-toggle-bar{
  display:block;
  width:18px; height:2px;
  background:#1f1f1f;
  border-radius:2px;
}
@media (max-width: 900px){
  .pul-header .pul-nav-toggle{display:inline-flex;}
  /* hide desktop-ish inline nav by default on mobile */
  .pul-header .pul-nav{
    display:none;
    position:absolute;
    left:16px; right:16px;
    top:calc(100% + 10px);
    background:#fff;
    border:2px solid rgba(0,0,0,.08);
    border-radius:18px;
    padding:10px;
    box-shadow: 0 16px 30px rgba(0,0,0,.10);
  }
  .pul-header .pul-nav a{
    display:block;
    padding:10px 12px;
    border-radius:14px;
  }
  .pul-header .pul-nav a:hover{
    background: rgba(0,128,74,.08);
  }
  .pul-header.is-menu-open .pul-nav{display:block;}
}


/* Drawer mobile menu (premium) */
.pul-drawer-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 1050;
}
.pul-drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(360px, 88vw);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-left: 1px solid rgba(0,0,0,.08);
  transform: translateX(105%);
  transition: transform .25s ease;
  z-index: 1060;
  display: flex;
  flex-direction: column;
  padding: 14px;
  gap: 10px;
}
.pul-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 6px 4px 10px;
}
.pul-drawer-brand .custom-logo{
  max-height: 36px;
  width: auto;
}
.pul-drawer-close{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 2px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.9);
  font-weight: 900;
  cursor: pointer;
}
.pul-drawer .pul-nav{
  display:block !important;
  position: static !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
}
.pul-drawer .pul-nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-radius: 16px;
  font-weight: 800;
}
.pul-drawer .pul-nav a:hover{
  background: rgba(0,128,74,.08);
}
.pul-drawer-actions{
  margin-top: auto;
  display:grid;
  gap: 10px;
  padding-top: 8px;
}
.pul-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 16px;
  font-weight: 900;
  text-decoration:none;
  border: 2px solid transparent;
}
.pul-btn-primary{ background: var(--orange); color:#fff; }
.pul-btn-ghost{ background: rgba(0,128,74,.08); color: var(--green); border-color: rgba(0,128,74,.25); }

/* open state */
.pul-header.is-menu-open .pul-drawer-overlay{
  opacity: 1;
  pointer-events: auto;
}
.pul-header.is-menu-open .pul-drawer{
  transform: translateX(0);
}

@media (min-width: 901px){
  .pul-drawer, .pul-drawer-overlay{ display:none !important; }
}

.pul-header-actions{display:flex; align-items:center; gap:12px;}

@media (max-width: 900px){
  .pul-cta-desktop{ display:none !important; }
  .pul-nav-desktop{ display:none !important; }
}


/* ===== PULDAPII Pro / Elegant Surface Tuning ===== */
:root{
  --bg: #f6f7f8;
  --surface: rgba(255,255,255,.86);
  --surface-2: rgba(255,255,255,.74);
  --stroke: rgba(16,24,40,.10);
  --shadow: 0 16px 40px rgba(16,24,40,.10);
  --shadow-soft: 0 10px 24px rgba(16,24,40,.08);
  --text: #0f172a;
  --muted: rgba(15,23,42,.72);
}

/* Page background (even without custom bg) */
body{
  background: radial-gradient(1200px 600px at 15% 10%, rgba(0,128,74,.10), transparent 60%),
              radial-gradient(1200px 600px at 85% 0%, rgba(242,124,0,.10), transparent 55%),
              linear-gradient(180deg, var(--bg), #ffffff);
  color: var(--text);
}

/* If full-page background is set, make overlay more “glass” */
body.pul-has-site-bg::before{
  background: rgba(246,247,248,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Header looks more premium */
.pul-header{
  background: rgba(255,255,255,.82);
  border-bottom: 1px solid var(--stroke);
}
.pul-header.is-scrolled{
  box-shadow: var(--shadow-soft);
}

/* Cards / panels */
.pul-card{
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}
.pul-card--soft{
  background: var(--surface-2);
}

/* Buttons */
.pul-btn-primary{
  box-shadow: 0 10px 20px rgba(242,124,0,.20);
}
.pul-btn-ghost{
  background: rgba(0,128,74,.08);
  border-color: rgba(0,128,74,.22);
}

/* Drawer menu: more glass + depth */
.pul-drawer{
  background: rgba(255,255,255,.92);
  box-shadow: -18px 0 48px rgba(16,24,40,.18);
}
.pul-drawer-overlay{
  background: rgba(2,6,23,.38);
}


/* ===== Pro Background (v17): vignette + subtle grain ===== */
body{
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(0,128,74,.18), transparent 62%),
    radial-gradient(900px 520px at 82% 8%, rgba(242,124,0,.16), transparent 60%),
    radial-gradient(1200px 700px at 50% 110%, rgba(0,0,0,.08), transparent 60%),
    linear-gradient(180deg, #f4f6f7 0%, #ffffff 70%);
  color: var(--text);
}

/* Vignette + grain overlay for a more “premium” feel */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;
  /* vignette */
  background:
    radial-gradient(1200px 900px at 50% 35%, rgba(0,0,0,0), rgba(0,0,0,.12) 70%, rgba(0,0,0,.18) 100%);
  mix-blend-mode: multiply;
  opacity: .55;
}
/* grain layer (very subtle) */
body::before{
  /* keep existing site-bg overlay if enabled; this will be overridden below when pul-has-site-bg */
}
body:not(.pul-has-site-bg)::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  opacity: .08;
}

/* Ensure layout layers above overlays */
.pul-header, main, footer{ position: relative; z-index: 1; }

/* When full-page background image is set: use glass overlay + keep vignette */
body.pul-has-site-bg::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;
  background: rgba(246,247,248,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ===== Drawer z-index fix (v18) ===== */
.pul-header{ z-index: 2000; }
.pul-drawer-overlay{ z-index: 2998 !important; }
.pul-drawer{ z-index: 2999 !important; }

/* Keep main/content below drawer even if components create stacking contexts */
main, .pul-container, .pul-card{ position: relative; z-index: 1; }


/* ===== Nav toggle stability (v19) ===== */
.pul-nav-toggle{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:2px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.90);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
}
@media (min-width: 901px){
  .pul-nav-toggle{ display:none !important; }
}
@media (max-width: 900px){
  .pul-nav-toggle{ display:flex !important; }
}


/* ===== Drawer sizing stability (v23) ===== */
.pul-drawer{
  width: min(88vw, 420px);
  max-width: 420px;
  box-sizing: border-box;
  will-change: transform;
  transition: transform .22s ease, opacity .22s ease !important;
}


/* Prevent layout “jump” when locking scroll (desktop) */
.pul-header.is-menu-open{ padding-right: var(--pul-scrollbar, 0px); }
body.pul-lock-scroll{ padding-right: var(--pul-scrollbar, 0px); }


/* ===== Drawer fixed overlay (v24) ===== */
.pul-drawer{
  position: fixed !important;
  top: 0; right: 0; bottom: 0;
  left: auto;
  height: 100vh;
  overflow-y: auto;
  width: min(88vw, 420px);
  max-width: 420px;
  box-sizing: border-box;
  transform: translateX(110%);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transition: transform .22s ease, opacity .18s ease !important;
}

.pul-header.is-menu-open .pul-drawer{
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* Overlay always fixed */
.pul-drawer-overlay{
  position: fixed !important;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease !important;
}
.pul-header.is-menu-open .pul-drawer-overlay{
  opacity: 1;
  pointer-events: auto;
}


/* ===== Drawer hard override to prevent full-width flash (v25) ===== */
.pul-drawer{
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  inset: auto !important; /* cancel any inset:0 rules */
  height: 100vh !important;
  overflow-y: auto !important;
  width: min(88vw, 420px) !important;
  max-width: 420px !important;
  box-sizing: border-box !important;
  transform: translateX(110%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  will-change: transform, opacity;
  transition: transform .22s ease, opacity .18s ease !important;
}

.pul-header.is-menu-open .pul-drawer{
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  inset: auto !important;
  width: min(88vw, 420px) !important;
  max-width: 420px !important;
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.pul-drawer-overlay{
  position: fixed !important;
  inset: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .18s ease !important;
}
.pul-header.is-menu-open .pul-drawer-overlay{
  opacity: 1 !important;
  pointer-events: auto !important;
}


/* ===== Hero left card background (v26) ===== */
.pul-hero-left{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(16,24,40,.10);
  background:
    radial-gradient(900px 520px at 14% 12%, rgba(0,128,74,.14), transparent 55%),
    radial-gradient(900px 520px at 86% 18%, rgba(242,124,0,.12), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.80));
}

/* subtle texture (very light) */
.pul-hero-left::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(90deg, rgba(2,6,23,.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(2,6,23,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .06;
}

/* soft highlight edge */
.pul-hero-left::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,0));
  opacity:.55;
  mix-blend-mode: overlay;
}
.pul-hero-left > *{ position: relative; z-index: 1; }


/* ===== Global card background (v27) ===== */
/* Applies to all cards for a less “polos” look */
.pul-card{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(16,24,40,.10);
  background:
    radial-gradient(820px 520px at 12% 10%, rgba(0,128,74,.10), transparent 55%),
    radial-gradient(820px 520px at 88% 18%, rgba(242,124,0,.08), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
}

/* subtle grid texture on all cards */
.pul-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(90deg, rgba(2,6,23,.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(2,6,23,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .05;
}

/* soft highlight edge */
.pul-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,0));
  opacity:.45;
  mix-blend-mode: overlay;
}
.pul-card > *{ position: relative; z-index: 1; }

/* Keep hero slightly stronger (optional) */
.pul-hero-left{
  background:
    radial-gradient(900px 520px at 14% 12%, rgba(0,128,74,.14), transparent 55%),
    radial-gradient(900px 520px at 86% 18%, rgba(242,124,0,.12), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.80));
}


/* ===== Sticky header (v28) ===== */
.pul-header{
  position: sticky;
  top: 0;
  z-index: 2500; /* below drawer (2999), above content */
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(16,24,40,.08);
}

/* When scrolling a bit, add subtle shadow */
.pul-header.is-scrolled{
  box-shadow: 0 10px 30px rgba(2,6,23,.10);
}

/* Prevent parent containers from breaking sticky */
html, body{ overflow-x: clip; }


/* ===== Mobile menu clickability + z-layer fix (v29) ===== */
.pul-nav-toggle{
  position: relative;
  z-index: 2602;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.pul-drawer{ z-index: 2999; }
.pul-drawer-overlay{ z-index: 2400; pointer-events:none; }
.pul-header.is-menu-open .pul-drawer-overlay{ pointer-events:auto; }

html.pul-lock, body.pul-lock{
  overflow: hidden !important;
  height: 100%;
}