/* =========================================================
   LP (Landing Page) System - JA Blockk / T4
   Reusable, scoped by .lp wrapper
   ========================================================= */

/* Base + Variables */
.lp{
  font-family:'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color:#334155;
  line-height:1.6;
  background:#f8fafc;
  width:100%;
  margin:0;
  box-sizing:border-box;

  /* Theme vars (default) */
  --hero1:#064e3b;
  --hero2:#047857;
  --accent:#059669;

  --title:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;

  --shadow:0 10px 25px rgba(0,0,0,.08);
}

.lp *{ box-sizing:border-box; }

/* Container */
.lp-container{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

/* =========================================================
   HERO
   ========================================================= */
.lp-hero{
  background:linear-gradient(135deg,var(--hero1) 0%, var(--hero2) 100%);
  padding:60px 20px 80px;
  text-align:center;
  color:#fff;
  border-radius:0 0 20px 20px;
  box-shadow:0 5px 15px -5px rgba(0,0,0,.20);
  position:relative;
  overflow:hidden;
}

.lp-hero-bg{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,.05) 0%, transparent 20%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.05) 0%, transparent 20%);
  pointer-events:none;
}

.lp-hero-inner{
  position:relative;
  z-index:2;
  max-width:1100px;
  margin:0 auto;
  padding:0 10px;
}

.lp-badge{
  display:inline-block;
  background:rgba(255,255,255,.15);
  padding:6px 14px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:900;
  letter-spacing:1px;
  border:1px solid rgba(255,255,255,.30);
  text-transform:uppercase;
}

.lp-title{
  font-size:2.2rem;
  font-weight:900;
  margin:15px 0 6px;
  text-transform:uppercase;
  letter-spacing:1px;
  text-shadow:0 4px 10px rgba(0,0,0,.30);
}

.lp-subtitle{
  font-size:1.3rem;
  font-weight:700;
  margin:0 0 18px;
  opacity:.95;
}

.lp-lead{
  max-width:780px;
  margin:0 auto 30px;
  font-size:1rem;
  opacity:.95;
  color:rgba(255,255,255,.92);
}

/* Search bar (UI only) */
.lp-search{
  max-width:600px;
  margin:0 auto;
  position:relative;
}

.lp-search input{
  width:100%;
  padding:15px 25px;
  border-radius:999px;
  border:none;
  font-size:.95rem;
  box-shadow:0 8px 25px rgba(0,0,0,.20);
  outline:none;
  color:#334155;
}

.lp-search button{
  position:absolute;
  right:5px;
  top:5px;
  background:var(--hero1);
  color:#fff;
  border:none;
  padding:10px 25px;
  border-radius:999px;
  cursor:pointer;
  font-weight:900;
  transition:filter .15s ease;
  font-size:.9rem;
  text-transform:uppercase;
}
.lp-search button:hover{ filter:brightness(.95); }

/* =========================================================
   SECTION + HEADING
   ========================================================= */
.lp-section{ padding:50px 0; }

.lp-heading{
  text-align:center;
  margin-bottom:40px;
}

.lp-heading h2{
  margin:0 0 10px;
  color:var(--hero1);
  font-weight:900;
  text-transform:uppercase;
  font-size:1.8rem;
}

.lp-divider{
  height:4px;
  width:70px;
  background:var(--accent);
  margin:0 auto 15px;
  border-radius:3px;
}

.lp-heading p{
  color:var(--muted);
  max-width:650px;
  margin:0 auto;
  font-size:1rem;
}

/* =========================================================
   QUICK ACTIONS (3 cards)
   ========================================================= */
.lp-overlap{
  margin-top:-50px;
  position:relative;
  z-index:10;
}

.lp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
}

.lp-card{
  background:#fff;
  padding:30px 20px;
  border-radius:14px;
  box-shadow:var(--shadow);
  text-align:center;
  border-bottom:4px solid var(--accent);
}

.lp-icon{
  width:80px;
  height:80px;
  border-radius:50%;
  margin:0 auto 15px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.3rem;
}

.lp-card h3{
  margin:0 0 10px;
  font-size:1.1rem;
  color:var(--title);
  font-weight:900;
}

.lp-card p{
  font-size:.9rem;
  color:var(--muted);
  margin:0 0 18px;
  line-height:1.5;
}

.lp-btn{
  display:inline-block;
  padding:10px 18px;
  border-radius:999px;
  text-decoration:none !important;
  font-weight:900;
  background:var(--accent);
  color:#fff !important;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.lp-btn:hover{ filter:brightness(.95); }

/* =========================================================
   AKSES INFORMASI PUBLIK (3 box list)
   ========================================================= */

/* FORCE grid (avoid being overridden by template) */
.lp .lp-list{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) !important;
  gap:20px !important;
  margin-top:10px !important;
}

.lp .lp-list a{
  display:block !important;
  text-decoration:none !important;
  color:inherit !important;
}

.lp .lp-list-item{
  display:flex !important;
  gap:15px !important;
  align-items:center !important;
  background:#fff !important;
  padding:20px !important;
  border-radius:12px !important;
  border:1px solid var(--border) !important;
  transition:transform .15s ease, box-shadow .15s ease;
}

.lp .lp-list-item:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}

.lp .lp-list-icon{
  min-width:52px !important;
  padding:12px !important;
  border-radius:10px !important;
  font-size:1.8rem !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.lp .lp-list-item h4{
  margin:0 0 5px !important;
  font-weight:900 !important;
  color:var(--title) !important;
  font-size:1.1rem !important;
}

.lp .lp-list-item p{
  margin:0 !important;
  font-size:.9rem !important;
  color:var(--muted) !important;
}

/* =========================================================
   FOOTER INFO
   ========================================================= */
.lp-footer{
  background:#1e293b;
  color:#94a3b8;
  padding:30px 20px;
  text-align:center;
  border-top:1px solid #334155;
}

.lp-footer-wrap{
  max-width:1000px;
  margin:0 auto;
}

.lp-footer-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
  font-size:.95rem;
}

.lp-footer-item{
  display:flex;
  align-items:center;
  gap:8px;
}

.lp-footer small{
  display:block;
  margin-top:20px;
  font-size:.8rem;
  opacity:.6;
}

/* =========================================================
   THEMES (by Menu Page Class)
   Set in Menu Item -> Page Display -> Page Class
   ========================================================= */
.page-ppid .lp{
  --hero1:#064e3b; --hero2:#047857; --accent:#059669; --title:#064e3b;
}

.page-regulasi .lp{
  --hero1:#064e3b; --hero2:#047857; --accent:#059669; --title:#064e3b;
}

.page-serta-merta .lp{
  --hero1:#991b1b; --hero2:#ef4444; --accent:#ef4444; --title:#7f1d1d;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 768px){
  .lp-title{ font-size:1.8rem; }
  .lp-subtitle{ font-size:1.05rem; }
  .lp-hero{ padding:50px 16px 70px; }
  .lp-search input{ padding:14px 18px; }
  .lp-search button{ padding:9px 16px; }
  .lp-overlap{ margin-top:-35px; }
}

@media (max-width: 420px){
  .lp-search button{ position:static; width:100%; margin-top:10px; }
  .lp-search{ text-align:left; }
}
/* =========================================================
   SERTA MERTA - Components (reuse lp base)
   ========================================================= */

/* Header block untuk halaman tanpa hero */
.lp-header{
  text-align:center;
  margin-bottom:50px;
}

.lp-pill{
  display:inline-block;
  font-size:.8rem;
  font-weight:900;
  padding:6px 16px;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:1px;
  border:1px solid transparent;
}

.lp-pill--danger{
  background:#fee2e2;
  color:#b91c1c;
  border-color:#fca5a5;
}

.lp-h2{
  margin-top:20px;
  margin-bottom:10px;
  font-size:2.2rem;
  font-weight:900;
  line-height:1.2;
  color:var(--hero1);
  text-transform:uppercase;
}

.lp-intro{
  max-width:900px;
  margin:0 auto 40px;
}

.lp-callout{
  background:#fff;
  border-left:5px solid var(--accent);
  padding:25px;
  box-shadow:0 4px 6px -1px rgba(0,0,0,0.05);
  border-radius:0 10px 10px 0;
}

.lp-callout p{
  margin:0;
  font-size:1rem;
  color:#475569;
}

/* Cards with top bar color */
.lp-scope{
  max-width:1000px;
  margin:0 auto 50px;
}

.lp-scope-title{
  text-align:center;
  color:var(--title);
  font-weight:900;
  margin-bottom:30px;
}

.lp-scope-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) !important;
  gap:25px !important;
}

.lp-scope-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:25px;
  position:relative;
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}

.lp-scope-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}

.lp-scope-card::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:5px;
  background:var(--bar,#ef4444);
}

.lp-scope-icon{
  font-size:2.5rem;
  margin-bottom:15px;
}

.lp-scope-card h4{
  margin:0 0 10px;
  font-weight:900;
  color:var(--hcolor,#b91c1c);
}

.lp-scope-card p{
  margin:0;
  font-size:.95rem;
  color:#475569;
}

/* CTA box */
.lp-cta{
  text-align:center;
  background:#fef2f2;
  padding:30px;
  border-radius:12px;
  border:1px dashed #f87171;
  max-width:900px;
  margin:0 auto;
}

.lp-cta h4{
  margin:0 0 10px;
  color:#b91c1c;
  font-weight:900;
}

.lp-cta p{
  margin:0;
  color:#7f1d1d;
}
/* =========================================================
   INFO PERKARA - Components (reuse lp base)
   ========================================================= */

.lp-panel{
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:12px;
  padding:30px;
}

.lp-panel-title{
  color:var(--title);
  margin:0 0 25px;
  font-weight:900;
  border-left:5px solid var(--accent);
  padding-left:15px;
}

.lp-info-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) !important;
  gap:20px !important;
}

.lp-info-item{
  display:flex;
  gap:15px;
  background:#fff;
  padding:15px;
  border-radius:10px;
  border:1px solid var(--border);
  align-items:flex-start;
}

.lp-info-icon{
  font-size:2rem;
  line-height:1;
}

.lp-info-item strong{
  display:block;
  color:var(--hero1);
  margin-bottom:5px;
  font-weight:900;
}

.lp-info-item span{
  font-size:.9rem;
  color:var(--muted);
}

/* Kategori Lainnya (link cards) */
.lp-link-title{
  text-align:center;
  margin-bottom:30px;
  font-weight:900;
  color:var(--title);
}

.lp-link-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) !important;
  gap:20px !important;
}

.lp-link-card{
  background:#fff;
  padding:25px;
  border-radius:12px;
  border:1px solid var(--border);
  border-bottom:4px solid var(--bar, var(--accent));
  transition:transform .15s ease, box-shadow .15s ease;
}

.lp-link-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}

.lp-link-icon{
  color:var(--bar, var(--accent));
  font-size:1.5rem;
  margin-bottom:10px;
}

.lp-link-card h4{
  margin:0 0 10px;
  color:var(--title);
  font-weight:900;
}

.lp-link-card p{
  margin:0;
  font-size:.9rem;
  color:var(--muted);
}

.lp-link-more{
  display:inline-block;
  margin-top:15px;
  color:var(--bar, var(--accent));
  font-weight:800;
  font-size:.9rem;
}
/* =========================================================
   REGULASI - Table Component (reuse lp base)
   ========================================================= */

.lp-table-wrap{
  max-width:1000px;
  margin:0 auto 50px;
}

.lp-table-card{
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 6px -1px rgba(0,0,0,0.05);
  background:#fff;
}

/* Responsive horizontal scroll for wide tables */
.lp-table-scroll{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.lp-table{
  width:100%;
  border-collapse:collapse;
  min-width:800px;
}

.lp-table thead tr{
  background:var(--hero1);
  color:#fff;
}

.lp-table th,
.lp-table td{
  padding:15px;
  vertical-align:middle;
}

.lp-table th{
  font-weight:900;
}

.lp-table th.is-center,
.lp-table td.is-center{
  text-align:center;
}

.lp-table th.col-no{ width:60px; }
.lp-table th.col-noper{ width:250px; }
.lp-table th.col-tahun{ width:100px; }
.lp-table th.col-aksi{ width:140px; }

.lp-table tbody{
  font-size:.95rem;
}

.lp-table tbody tr{
  border-bottom:1px solid #f1f5f9;
}

.lp-table tbody tr:nth-child(even){
  background:#f8fafc;
}

.lp-td-muted{ color:var(--muted); }
.lp-td-strong{ font-weight:800; color:var(--title); }
.lp-td-year{ color:var(--accent); font-weight:900; }
.lp-td-desc{ color:#475569; }

.lp-btn-sm{
  display:inline-block;
  background:var(--accent);
  color:#fff !important;
  text-decoration:none !important;
  padding:6px 15px;
  border-radius:8px;
  font-size:.85rem;
  font-weight:800;
  transition:filter .15s ease;
  white-space:nowrap;
}
.lp-btn-sm:hover{ filter:brightness(.95); }