.beranda-hero{background:var(--white);border:1px solid var(--border);border-radius:20px;padding:56px 48px;display:flex;align-items:center;gap:56px;margin-bottom:32px;box-shadow:var(--shadow-sm)}
.hero-text{flex:1}
.hero-eyebrow{display:inline-block;background:var(--blue-light);color:var(--blue-primary);font-size:12px;font-weight:700;padding:6px 14px;border-radius:20px;margin-bottom:16px;letter-spacing:.05em}
.hero-text h1{font-size:44px;font-weight:800;line-height:1.2;color:var(--text-primary);margin-bottom:16px}
.hero-text p{font-size:18px;color:#64748b;line-height:1.8;margin-bottom:28px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn-primary{background:var(--blue-primary);color:#fff;border:none;border-radius:10px;padding:14px 28px;font-size:16px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:background .15s}
.btn-primary:hover{background:var(--blue-dark);color:#fff}
.btn-outline{background:#fff;color:var(--text-primary);border:1px solid var(--border);border-radius:10px;padding:14px 28px;font-size:16px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:background .15s}
.btn-outline:hover{background:var(--bg)}
.hero-image{flex:0 0 380px;background:var(--blue-light);border-radius:18px;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center}
.hero-image .map-icon{font-size:72px;color:var(--blue-primary);margin-bottom:16px}
.hero-image-label{display:flex;align-items:center;gap:8px;background:#fff;border-radius:10px;padding:10px 16px;margin-top:16px;font-size:13px;font-weight:600;color:var(--text-primary);box-shadow:var(--shadow-sm)}
.hero-image-label i{color:var(--blue-primary)}
.hero-image p{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--blue-primary);text-transform:uppercase;margin-bottom:4px}

.beranda-stats{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:32px}
.bstat-card{background:var(--white);border:1px solid var(--border);border-radius:18px;padding:28px;box-shadow:var(--shadow-sm)}
.bstat-card .growth{font-size:14px;font-weight:600;color:#16a34a}
.bstat-card .growth.max{color:#ef4444}
.bstat-card .bstat-label{font-size:15px;color:var(--text-muted);margin-top:6px}
.bstat-card .bstat-value{font-size:32px;font-weight:700;color:var(--text-primary)}
.bstat-card .bstat-top{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.bstat-card .bstat-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px}

.beranda-intro{
    background:#fff;
    border:1px solid var(--border);
    border-radius:28px;
    padding:48px 40px;
    margin:0 auto 32px;
    max-width:1300px;
    box-shadow:var(--shadow-sm);
}
.beranda-intro-header{text-align:center;max-width:760px;margin:0 auto 36px}
.intro-label{display:inline-flex;padding:8px 18px;border-radius:999px;background:rgba(59,130,246,.12);color:#1d4ed8;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px}
.intro-title{margin:0;font-size:40px;font-weight:800;color:#0f172a;line-height:1.1}
.intro-description{margin:18px auto 0;color:#475569;font-size:18px;line-height:1.8;max-width:660px}
.intro-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:36px}
.feature-box{
    background:#f8fafc;
    border:1px solid rgba(148,163,184,.24);
    border-radius:24px;
    padding:32px 28px;
    min-height:280px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:24px;
    text-align:center;
    transition:all .3s ease;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(0,0,0,.04);
}

.feature-box:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,.12);
    border-color:#3b82f6;
    background:#ffffff;
}

.feature-icon{
    width:72px;
    height:72px;
    border-radius:16px;
    background:rgba(59,130,246,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#1d4ed8;
    font-size:32px;
    transition:all .3s ease;
}

.feature-box:hover .feature-icon{
    transform:scale(1.15);
    background:#3b82f6;
    color:#fff;
}

.feature-box h3{
    margin:0;
    font-size:22px;
    font-weight:700;
    color:#0f172a;
    transition:color .3s ease;
}

.feature-box:hover h3{
    color:#2563eb;
}

.feature-box p{
    margin:0;
    color:#475569;
    font-size:16px;
    line-height:1.8;
}

.beranda-grid-section{margin:40px 0;max-width:1300px;margin-left:auto;margin-right:auto;padding:0 32px}
.grid-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;grid-auto-rows:auto}
@media(max-width:768px){.grid-cards{grid-template-columns:1fr}}
.grid-card{background:#fff;border:2px solid var(--border);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:20px;transition:all .2s}
.grid-card:hover{border-color:#3b82f6;box-shadow:0 12px 32px rgba(59,130,246,.15)}
.grid-card-large{grid-column:span 1}
@media(min-width:769px){.grid-card-large:first-child{grid-column:span 1;grid-row:span 2}.grid-card-large:last-child{grid-column:span 1;grid-row:span 2}}
.card-content{flex:1;display:flex;flex-direction:column;gap:12px}
.card-label{display:inline-block;font-size:12px;font-weight:700;color:#1d4ed8;text-transform:uppercase;letter-spacing:.05em}
.card-content h3{margin:0;font-size:24px;font-weight:700;color:#0f172a;line-height:1.3}
.card-content p{margin:0;color:#475569;font-size:16px;line-height:1.8}
.card-icon-area{width:100px;height:100px;border-radius:20px;background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(59,130,246,.05));display:flex;align-items:center;justify-content:center;color:#3b82f6;font-size:48px}

.map-preview-card{background:var(--white);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);margin-top:32px}
.map-preview-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border)}
.map-preview-header h3{font-size:18px;font-weight:600}
.map-preview-badges{display:flex;gap:8px}
.map-preview-map{height:280px;background:#dbeafe;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.map-placeholder-bg{width:100%;height:100%;background:linear-gradient(135deg,#bfdbfe 0%,#93c5fd 50%,#60a5fa 100%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px}
.map-placeholder-bg i{font-size:40px;color:var(--blue-dark);opacity:.4}
.map-placeholder-btn{position:absolute;bottom:20px;left:50%;transform:translateX(-50%)}


/* fornt */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --blue-primary: #1a56db;
      --blue-dark:    #1e3a8a;
      --blue-light:   #eff6ff;
      --blue-accent:  #2563eb;
      --text-primary: #111827;
      --text-muted:   #6b7280;
      --border:       #e5e7eb;
      --bg:           #f9fafb;
      --white:        #ffffff;
      --green:        #16a34a;
      --green-light:  #dcfce7;
      --radius:       10px;
      --shadow-sm:    0 1px 3px rgba(0,0,0,.08);
      --shadow-md:    0 4px 12px rgba(0,0,0,.1);
    }

    html { width:100%; min-height:100%; }
    body { width:100%; min-height:100vh; font-family:'Inter',sans-serif; background:var(--bg); color:var(--text-primary); display:flex; flex-direction:column; overflow-x:hidden; }

    /* NAVBAR */
    .top-nav { background:var(--white); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:500; box-shadow:var(--shadow-sm); }
    .nav-inner { width:100%; max-width:none; margin:0 auto; display:flex; align-items:center; gap:20px; padding:0 clamp(24px,4vw,56px); height:58px; }
    .nav-brand { font-size:15px; font-weight:700; color:var(--blue-primary); text-decoration:none; white-space:nowrap; }
    .nav-links { display:flex; gap:2px; list-style:none; flex:1; }
    .nav-links a { display:block; padding:6px 14px; border-radius:6px; text-decoration:none; font-size:13px; font-weight:500; color:var(--text-muted); transition:background .15s,color .15s; }
    .nav-links a:hover { background:var(--bg); color:var(--text-primary); }
    .nav-links a.active { color:var(--blue-primary); border-bottom:2px solid var(--blue-primary); border-radius:0; background:transparent; padding-bottom:4px; }
    .nav-search { display:flex; align-items:center; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:6px 12px; gap:8px; min-width:180px; }
    .nav-search input { border:none; background:transparent; outline:none; font-size:13px; color:var(--text-primary); width:100%; }
    .nav-search i { color:var(--text-muted); font-size:13px; }
    .btn-login { display:flex; align-items:center; gap:6px; background:var(--blue-primary); color:var(--white); border:none; border-radius:8px; padding:7px 16px; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .15s; }
    .btn-login:hover { background:var(--blue-dark); color:var(--white); }

    /* MAIN WRAPPER */
    .page-wrapper { width:100%; max-width:none; margin:0 auto; padding:32px clamp(24px,4vw,56px); flex:1; }
    .page-wrapper.full-width { max-width:100%; padding:0; }

    /* STAT CARDS */
    .stat-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:28px; }
    .stat-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; display:flex; align-items:center; gap:16px; box-shadow:var(--shadow-sm); }
    .stat-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
    .stat-icon.blue  { background:var(--blue-light); color:var(--blue-primary); }
    .stat-icon.green { background:var(--green-light); color:var(--green); }
    .stat-icon.gray  { background:#f3f4f6; color:#374151; }
    .stat-label { font-size:12px; color:var(--text-muted); margin-bottom:2px; }
    .stat-value { font-size:22px; font-weight:700; color:var(--text-primary); }

    /* PAGE HEADER */
    .page-header { margin-bottom:24px; }
    .page-header h1 { font-size:28px; font-weight:700; letter-spacing:-.5px; }
    .page-header p { font-size:14px; color:var(--text-muted); margin-top:4px; }

    /* TABLE */
    .table-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; margin-bottom:28px; }
    .table-toolbar { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
    .search-box { display:flex; align-items:center; border:1px solid var(--border); border-radius:8px; padding:7px 12px; gap:8px; flex:1; min-width:200px; }
    .search-box input { border:none; outline:none; font-size:13px; width:100%; color:var(--text-primary); }
    .search-box i { color:var(--text-muted); font-size:13px; }
    .btn-filter { display:flex; align-items:center; gap:6px; border:1px solid var(--border); background:var(--white); border-radius:8px; padding:7px 14px; font-size:13px; font-weight:500; cursor:pointer; color:var(--text-primary); transition:background .15s; }
    .btn-filter:hover { background:var(--bg); }
    .toolbar-right { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); }
    .sort-select { border:1px solid var(--border); border-radius:8px; padding:6px 10px; font-size:13px; outline:none; cursor:pointer; }

    .data-table { width:100%; border-collapse:collapse; }
    .data-table thead { background:var(--bg); }
    .data-table th { text-align:left; padding:12px 20px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); border-bottom:1px solid var(--border); }
    .data-table td { padding:14px 20px; font-size:13px; color:var(--text-primary); border-bottom:1px solid var(--border); vertical-align:middle; }
    .data-table tbody tr:last-child td { border-bottom:none; }
    .data-table tbody tr:hover td { background:var(--blue-light); }

    .school-name { display:flex; align-items:center; gap:10px; font-weight:500; }
    .school-icon { width:32px; height:32px; background:var(--blue-light); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--blue-primary); font-size:14px; flex-shrink:0; }

    .badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; }
    .badge-green { background:var(--green-light); color:var(--green); }
    .badge-blue  { background:var(--blue-light);  color:var(--blue-primary); }

    .akred-badge { width:26px; height:26px; border-radius:6px; background:var(--blue-primary); color:#fff; font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
    .akred-badge.b { background:#6b7280; }

    .table-footer { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; font-size:13px; color:var(--text-muted); border-top:1px solid var(--border); flex-wrap:wrap; gap:8px; }
    .pagination { display:flex; align-items:center; gap:4px; }
    .page-btn { width:32px; height:32px; border:1px solid var(--border); background:var(--white); border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:500; cursor:pointer; color:var(--text-primary); text-decoration:none; transition:background .15s; }
    .page-btn:hover { background:var(--bg); }
    .page-btn.active { background:var(--blue-primary); color:#fff; border-color:var(--blue-primary); }

    /* STATISTIK BANNER */
    .statistik-banner { background:linear-gradient(135deg,var(--blue-dark) 0%,var(--blue-accent) 100%); border-radius:var(--radius); padding:32px 36px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:28px; }
    .statistik-banner .icon-circle { width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:16px; }
    .statistik-banner h3 { font-size:20px; font-weight:700; margin-bottom:8px; }
    .statistik-banner p  { font-size:13px; opacity:.8; max-width:300px; line-height:1.5; }
    .badge-row { display:flex; gap:8px; margin-top:16px; }
    .badge-pill { background:rgba(255,255,255,.2); color:#fff; border-radius:20px; padding:4px 12px; font-size:12px; font-weight:600; }
    .banner-arrow { width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.2); border:none; color:#fff; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .15s; }
    .banner-arrow:hover { background:rgba(255,255,255,.3); }

    /* FOOTER */
    .main-footer { width:100%; background:var(--white); border-top:1px solid var(--border); padding:18px clamp(24px,4vw,56px); font-size:12px; color:var(--text-muted); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
    .main-footer a { color:var(--text-muted); text-decoration:none; }
    .main-footer a:hover { color:var(--blue-primary); }
    .footer-links { display:flex; gap:16px; }

    @media(max-width:768px){
      .nav-inner { padding:0 18px; }
      .page-wrapper { padding:24px 18px; }
      .nav-links,.nav-search { display:none; }
      .stat-cards { grid-template-columns:1fr 1fr; }
    }



    /* Peta halaman: full area map dengan panel kiri */
.peta-wrapper{position:relative;width:100%;height:calc(100dvh - 58px);min-height:620px;display:flex}
#map{flex:1;height:100%}

.peta-panel{
  position:absolute;top:16px;left:16px;z-index:1000;
  display:flex;flex-direction:column;gap:12px;
  width:min(280px,calc(100vw - 32px))
}

.panel-card{
  background:#fff;border-radius:10px;padding:16px;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
}

.panel-card h6{
  font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;
  display:flex;justify-content:space-between;align-items:center
}
.panel-card h6 a{font-size:11px;font-weight:600;color:var(--blue-primary);text-transform:none;letter-spacing:0;text-decoration:none}

.peta-search{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--border);border-radius:8px;padding:8px 10px;
  background:#fff
}
.peta-search input{border:none;outline:none;font-size:13px;width:100%}
.peta-search i{color:var(--text-muted);font-size:12px}

.filter-section{margin-bottom:10px}
.filter-label{font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:6px}
.jenjang-btns{display:flex;gap:6px}
.jenjang-btn{
  padding:5px 14px;border-radius:6px;font-size:12px;font-weight:600;
  border:1px solid var(--border);cursor:pointer;background:#fff;color:var(--text-muted);
  transition:all .15s
}
.jenjang-btn.active{background:var(--blue-primary);color:#fff;border-color:var(--blue-primary)}

.leaflet-popup-content{font-family:Inter,sans-serif;font-size:12px;line-height:1.45}
.popup-sekolah{min-width:190px}
.popup-sekolah img{width:100%;height:90px;object-fit:cover;border-radius:6px;margin-bottom:8px}
.popup-sekolah strong{display:block;font-size:13px;margin-bottom:4px;color:#111827}
.popup-sekolah span{display:block;color:#4b5563}
.default-school-marker{
  width:28px;height:28px;border-radius:50% 50% 50% 0;
  background:var(--blue-primary);border:2px solid #fff;
  transform:rotate(-45deg);box-shadow:0 2px 8px rgba(0,0,0,.25)
}
.default-school-marker::after{
  content:'';position:absolute;width:10px;height:10px;border-radius:50%;
  background:#fff;left:7px;top:7px
}

.kecamatan-select{
  width:100%;border:1px solid var(--border);border-radius:8px;
  padding:7px 10px;font-size:13px;outline:none;background:#fff;cursor:pointer
}

.toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;color:var(--text-primary);margin-top:8px
}
.toggle{position:relative;width:36px;height:20px}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{
  position:absolute;inset:0;background:#d1d5db;border-radius:20px;cursor:pointer;transition:.2s
}
.toggle input:checked + .toggle-slider{background:var(--blue-primary)}
.toggle-slider::before{
  content:'';position:absolute;height:14px;width:14px;left:3px;bottom:3px;
  background:#fff;border-radius:50%;transition:.2s
}
.toggle input:checked + .toggle-slider::before{transform:translateX(16px)}

@media(max-width:768px){
  .peta-wrapper{height:calc(100dvh - 58px);min-height:560px}
  .peta-panel{top:12px;left:12px;right:12px;width:auto}
  .panel-card{padding:12px}
  .jenjang-btns{overflow-x:auto;padding-bottom:2px}
  .jenjang-btn{white-space:nowrap}
}