<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">

<style>
body{
    font-family:'Poppins', sans-serif;
    background: linear-gradient(135deg,#f4f6f9,#eef2f7);
    transition:.3s;
}
body.dark-mode{
    background:#0f172a;
    color:#fff;
}

.page-header{
    padding:25px 40px;
    font-size:22px;
    font-weight:600;
    letter-spacing:1px;
}

.unit-card{
    background:#fff;
    border-radius:18px;
    padding:25px 20px;
    text-align:center;
    transition: all .4s ease;
    box-shadow:0 5px 20px rgba(0,0,0,0.06);
    opacity:0;
    transform: translateY(20px);
    animation: fadeUp .8s ease forwards;
}
body.dark-mode .unit-card{
    background:#1e293b;
    box-shadow:0 5px 25px rgba(0,0,0,0.4);
}

@keyframes fadeUp{
    to{ opacity:1; transform: translateY(0); }
}

.unit-card:hover{
    transform: translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,0.12);
}

.unit-icon{
    font-size:26px;
    margin-bottom:12px;
    color:#4e73df;
}

.unit-card h6{
    font-weight:600;
    margin-bottom:10px;
}

.unit-stats{
    font-size:12px;
    margin-bottom:18px;
    opacity:.8;
}

.btn-detail{
    padding:8px 20px;
    border-radius:30px;
    font-size:13px;
    font-weight:500;
    text-decoration:none;
    background:#4e73df;
    color:#fff;
    transition:.3s;
}
.btn-detail:hover{
    transform:scale(1.05);
    box-shadow:0 6px 18px rgba(78,115,223,0.4);
}

.toggle-dark{
    position:fixed;
    top:20px;
    right:20px;
    cursor:pointer;
    font-size:20px;
}
</style>
</head>
<body>

<div class="toggle-dark" onclick="toggleDark()">
    <i class="bi bi-moon-fill"></i>
</div>

<div class="page-header">
    BRANCH OFFICE KUDUS
</div>

<div class="container pb-5">
<div class="row g-4">

<!-- 1 -->
<div class="col-6 col-md-3"><div class="unit-card">
<div class="unit-icon"><i class="bi bi-building"></i></div>
<h6>Unit Kudus Kota</h6>
<a href="https://docs.google.com/spreadsheets/d/13AV0cs5osGUi4i21pNSndc4vasQNZM1JrNDiiXR7yRo/edit?usp=drive_link" target="_blank" class="btn-detail">Lihat Detail</a>
</div></div>

<!-- 2 -->
<div class="col-6 col-md-3"><div class="unit-card">
<div class="unit-icon"><i class="bi bi-building"></i></div>
<h6>Unit Jati</h6>
<a href="https://docs.google.com/spreadsheets/d/193aT-TfbTwa6kxvQZvcWKY0TPhsluCXRqbuKfk4ZOtQ/edit?usp=drive_link" target="_blank" class="btn-detail">Lihat Detail</a>
</div></div>

<!-- 3 -->
<div class="col-6 col-md-3"><div class="unit-card">
<div class="unit-icon"><i class="bbi bi-building"></i></div>
<h6>Unit Bae</h6>
<a href="https://docs.google.com/spreadsheets/d/1CQuaHBp-0Ee8_3zY57CP2DIMI5QQzAMBLnvPzH4fAcY/edit?usp=drive_link" target="_blank" class="btn-detail">Lihat Detail</a>
</div></div>

<!-- 4 -->
<div class="col-6 col-md-3"><div class="unit-card">
<div class="unit-icon"><i class="bi bi-building"></i></div>
<h6>Unit Gebog</h6>
<a href="https://docs.google.com/spreadsheets/d/1Nh3kJTYjaVEyvgPH0mVjokcosvvoKJXco0ReZvt7bK4/edit?usp=drive_link" target="_blank" class="btn-detail">Lihat Detail</a>
</div></div>

<!-- 5 -->
<div class="col-6 col-md-3"><div class="unit-card">
<div class="unit-icon"><i class="bi bi-building"></i></div>
<h6>Unit Dawe</h6>
<a href="https://docs.google.com/spreadsheets/d/1LM1H0rYr3A0W2jDyrg0myCPaIvuN2AMmFQoP4NZL4wk/edit?usp=drive_link" target="_blank" class="btn-detail">Lihat Detail</a>
</div></div>

<!-- 6 -->
<div class="col-6 col-md-3"><div class="unit-card">
<div class="unit-icon"><i class="bi bi-building"></i></div>
<h6>Unit Kaliwungu</h6>
<a href="https://docs.google.com/spreadsheets/d/1R3De4UlUP9xxnoAeMQCDV_64Sk7Vtmf7TD04gEGgYR0/edit?usp=drive_link" target="_blank" class="btn-detail">Lihat Detail</a>
</div></div>

<!-- 7 -->
<div class="col-6 col-md-3"><div class="unit-card">
<div class="unit-icon"><i class="bi bi-building"></i></div>
<h6>Unit Mejobo</h6>
<a href="https://docs.google.com/spreadsheets/d/1U2j446kRqw3pILFXF0KXhehDWMTFFDmzxrrA6h1gKtk/edit?usp=drive_link" target="_blank" class="btn-detail">Lihat Detail</a>
</div></div>

<!-- 8 -->
<div class="col-6 col-md-3"><div class="unit-card">
<div class="unit-icon"><i class="bi bi-building"></i></div>
<h6>Unit Undaan</h6>
<a href="https://docs.google.com/spreadsheets/d/1iMLx211ssTer5g5SM1JiWtTsJJg6M6UnLnHRT6A1cIo/edit?usp=drive_link" target="_blank" class="btn-detail">Lihat Detail</a>
</div></div>

<!-- 9-16 (lanjutan) -->
<div class="col-6 col-md-3"><div class="unit-card">
  <div class="unit-icon"><i class="bi bi-building"></i></div>
  <h6>Unit Gondosari</h6>
  <a href="https://docs.google.com/spreadsheets/d/1O2AYmmgoT01HSNzEVhXF6Jw-VqgZJlt9q4izCvvaC5Q/edit?usp=drive_link" target="_blank" class="btn-detail">Lihat Detail</a>
</div></div>

<div class="col-6 col-md-3"><div class="unit-card">
  <div class="unit-icon"><i class="bi bi-building"></i></div>
  <h6>Unit Ngetuk</h6>
  <a href="https://docs.google.com/spreadsheets/d/1Zg-SMsgfcICJIshEMl0qlln3tTa97xKsklEuZG9LVCA/edit?usp=drive_link" target="_blank" class="btn-detail">Lihat Detail</a>
</div></div>

<div class="col-6 col-md-3"><div class="unit-card">
  <div class="unit-icon"><i class="bi bi-building"></i></div>
  <h6>Unit Jati I</h6>
  <a href="https://docs.google.com/spreadsheets/d/193aT-TfbTwa6kxvQZvcWKY0TPhsluCXRqbuKfk4ZOtQ/edit?usp=drive_link" target="_blank" class="btn-detail">Lihat Detail</a></div></div>

<div class="col-6 col-md-3"><div class="unit-card">
  <div class="unit-icon"><i class="bi bi-building"></i></div>
  <h6>Unit Jati II</h6>
  <a href="https://docs.google.com/spreadsheets/d/1wm_PeBX52Dm8WaXf-yn1iXeXn71xF4DxLsMVcU0JFtQ/edit?usp=drive_link" target="_blank" class="btn-detail">Lihat Detail</a></div></div>

<div class="col-6 col-md-3"><div class="unit-card">
  <div class="unit-icon"><i class="bi bi-building"></i></div>
  <h6>Unit Gulang</h6>
  <a href="https://docs.google.com/spreadsheets/d/1QncnLpKdl2FYBFpPrHCDeCgNehv2MGM65N_5v_X7hko/edit?usp=drive_link" target="_blank" class="btn-detail">Lihat Detail</a></div></div>

<div class="col-6 col-md-3"><div class="unit-card">
  <div class="unit-icon"><i class="bi bi-building"></i></div>
  <h6>Unit Colo</h6>
  <a href="https://docs.google.com/spreadsheets/d/1EQN8eK1GRckQYz7aNR_bgEB1i2NlpZeVLJNkvLQCy98/edit?usp=drive_link" target="_blank" class="btn-detail">Lihat Detail</a></div></div>

<div class="col-6 col-md-3"><div class="unit-card">
  <div class="unit-icon"><i class="bi bi-building"></i></div>
  <h6>Unit Wates</h6>
  <a href="#" target="_blank" class="btn-detail">Lihat Detail</a></div></div>

<div class="col-6 col-md-3"><div class="unit-card">
  <div class="unit-icon"><i class="bi bi-building"></i></div>
  <h6>Unit Jekulo</h6>
  <a href="https://docs.google.com/spreadsheets/d/1mCUnOBge0MBdMybnFqTUOszEebzGqBWp2v2XE6SsNGY/edit?usp=drive_link" target="_blank" class="btn-detail">Lihat Detail</a></div></div>

</div>
</div>

<script>
function toggleDark(){
    document.body.classList.toggle("dark-mode");
}
</script>

</body>
</html>