/* ============================================
   Peta Hukum — Nav & Footer (ported from public/jsx/home)
   Scoped under .ph-nav / .ph-footer so it tidak bentrok
   dengan Bootstrap / home.css di master layout.
   ============================================ */
:root {
  --ph-ink: #0F0F14;
  --ph-ink-soft: #1E1E2A;
  --ph-canvas: #FAFAF7;
  --ph-canvas-warm: #F2F1EC;
  --ph-graphite: #5A5A66;
  --ph-line: #E5E3DC;
  --ph-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --ph-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- NAV ---------- */
.ph-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  background: rgba(250, 250, 247, 0.78);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ph-ease), background 0.2s var(--ph-ease);
  font-family: var(--ph-font-sans);
}
.ph-nav.scrolled { border-bottom-color: var(--ph-line); background: rgba(250, 250, 247, 0.92); }
.ph-nav .nav-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.ph-nav .wordmark {
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: 20px;
  color: var(--ph-ink);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  text-decoration: none;
}
.ph-nav .wordmark-mark { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; }
.ph-nav .nav-links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
  justify-content: center;
}
.ph-nav .nav-links a { color: var(--ph-graphite); text-decoration: none; transition: color 0.15s; }
.ph-nav .nav-links a:hover,
.ph-nav .nav-links a.active { color: var(--ph-ink); }
.ph-nav .nav-right { display: flex; align-items: center; gap: 14px; justify-content: flex-end; font-size: 14px; }
.ph-nav .lang-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--ph-graphite); font-weight: 500; font-size: 13px; }
.ph-nav .lang-toggle .active { color: var(--ph-ink); font-weight: 600; }
.ph-nav .nav-user { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ph-ink); white-space: nowrap; }
.ph-nav .nav-logout-form { margin: 0; }
.ph-nav .nav-counter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ph-graphite);
  padding: 6px 12px;
  background: rgba(168, 221, 193, 0.18);
  border: 1px solid rgba(168, 221, 193, 0.45);
  border-radius: 999px;
  white-space: nowrap;
}
.ph-nav .nav-counter-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #3B9D6A;
  animation: ph-pulse-dot 1.8s ease-in-out infinite;
}
@keyframes ph-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* CTA button (renamed dari .btn agar tidak bentrok dgn Bootstrap) */
.ph-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  background: var(--ph-ink);
  color: #fff;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s var(--ph-ease), background 0.18s var(--ph-ease), box-shadow 0.25s var(--ph-ease);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 8px 22px -10px rgba(15, 15, 20, 0.35);
}
.ph-cta:hover { background: var(--ph-ink-soft); transform: translateY(-1px); color: #fff; }

/* Secondary CTA (mis. tombol "Keluar" saat sudah login) — cocok dgn .btn-secondary landing */
.ph-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  background: #fff;
  color: var(--ph-ink);
  border: 1px solid var(--ph-line);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 0.18s var(--ph-ease), background 0.18s var(--ph-ease);
}
.ph-cta-secondary:hover { background: var(--ph-canvas-warm); color: var(--ph-ink); transform: translateY(-1px); }

.ph-nav-toggle { display: none; background: none; border: 0; padding: 8px; font-size: 20px; color: var(--ph-ink); }

@media (max-width: 1100px) { .ph-nav .nav-counter { display: none; } }
@media (max-width: 900px) {
  .ph-nav .nav-inner { grid-template-columns: 1fr auto; }
  .ph-nav .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    background: rgba(250, 250, 247, 0.98);
    padding: 16px clamp(20px, 4vw, 40px);
    gap: 18px;
    border-bottom: 1px solid var(--ph-line);
  }
  .ph-nav.open .nav-links { display: flex; }
  .ph-nav-toggle { display: inline-flex; align-items: center; }
}

/* ---------- FOOTER ---------- */
.ph-footer {
  background: var(--ph-ink);
  color: rgba(255, 255, 255, 0.7);
  padding: clamp(60px, 7vw, 88px) clamp(20px, 4vw, 56px) 32px;
  font-family: var(--ph-font-sans);
}
.ph-footer .ph-footer-container { max-width: 1240px; margin: 0 auto; }
.ph-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 40px;
  padding-bottom: 48px;
}
@media (max-width: 980px) {
  .ph-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-footer .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .ph-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ph-footer .wordmark {
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.04em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ph-footer .footer-brand .wordmark-mark { width: 40px; height: 40px; object-fit: contain; }
.ph-footer .desc {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  max-width: 280px;
}
.ph-footer .footer-col h5,
.ph-footer .footer-col .footer-col__title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 18px;
}
.ph-footer .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.ph-footer .footer-col a { font-size: 14px; color: rgba(255, 255, 255, 0.75); text-decoration: none; transition: color 0.15s; }
.ph-footer .footer-col a:hover { color: #fff; }
.ph-footer .footer-bottom {
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.6;
}
.ph-footer .footer-bottom .disclaimer { max-width: 720px; }
.ph-footer .footer-social { display: flex; gap: 18px; margin-top: 22px; }
.ph-footer .footer-social a { color: rgba(255, 255, 255, 0.7); font-size: 20px; }
.ph-footer .footer-social a:hover { color: #fff; }

/* ============================================
   Portal berita — penyesuaian nav & footer
   Navigasi tumbuh dari 5 anchor jadi 6 kategori konten + pencarian + 2 CTA,
   jadi titik lipat menu mobile dinaikkan dari 900px ke 1100px.
   ============================================ */
.ph-nav .nav-inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(12px, 2vw, 28px); }
.ph-nav .nav-links { gap: clamp(14px, 1.7vw, 26px); flex-wrap: nowrap; }
.ph-nav .nav-links a { white-space: nowrap; }
.ph-nav .nav-right { gap: 10px; }

/* Kotak pencarian peraturan — GET biasa ke /peraturan, bukan navigasi JS. */
.ph-nav-search { display: flex; align-items: center; margin: 0; }
.ph-nav-search__field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 13px;
  height: 40px;
  border: 1px solid var(--ph-line);
  border-radius: 999px;
  background: #fff;
  transition: border-color 0.15s var(--ph-ease), box-shadow 0.2s var(--ph-ease);
}
.ph-nav-search__field:focus-within { border-color: var(--ph-ink); box-shadow: 0 0 0 3px rgba(15, 15, 20, 0.06); }
.ph-nav-search input {
  width: clamp(120px, 14vw, 190px);
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ph-ink);
}
.ph-nav-search input::placeholder { color: #8A8A95; }
.ph-nav-search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--ph-ink);
  color: #fff;
  cursor: pointer;
  flex: none;
}
.ph-nav-search button:hover { background: var(--ph-ink-soft); }

.ph-nav-toggle svg { display: block; }
.ph-nav .nav-mobile-only { display: none; }

@media (max-width: 1240px) { .ph-nav .lang-toggle { display: none; } }

@media (max-width: 1100px) {
  .ph-nav .nav-inner { grid-template-columns: 1fr auto; }
  .ph-nav .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: rgba(250, 250, 247, 0.985);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    padding: 8px clamp(20px, 4vw, 40px) 22px;
    gap: 0;
    border-bottom: 1px solid var(--ph-line);
    max-height: calc(100vh - 68px);
    overflow-y: auto;
  }
  .ph-nav.open .nav-links { display: flex; }
  .ph-nav .nav-links > a {
    padding: 14px 2px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ph-ink);
    border-bottom: 1px solid var(--ph-line);
  }
  .ph-nav-toggle { display: inline-flex; align-items: center; }
  /* Pencarian & CTA pindah ke dalam menu supaya tetap terjangkau di mobile. */
  .ph-nav .nav-right > .ph-nav-search,
  .ph-nav .nav-right > .ph-cta,
  .ph-nav .nav-right > .ph-cta-secondary,
  .ph-nav .nav-right > .nav-user,
  .ph-nav .nav-right > .nav-logout-form { display: none; }
  .ph-nav .nav-mobile-only { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; }
  .ph-nav .nav-mobile-only .ph-nav-search { width: 100%; }
  .ph-nav .nav-mobile-only .ph-nav-search__field { width: 100%; height: 46px; }
  .ph-nav .nav-mobile-only .ph-nav-search input { width: 100%; font-size: 15px; }
  .ph-nav .nav-mobile-only .ph-cta,
  .ph-nav .nav-mobile-only .ph-cta-secondary { justify-content: center; min-height: 46px; }
  .ph-nav .nav-mobile-only form { margin: 0; }
  .ph-nav .nav-mobile-only .ph-cta-secondary { width: 100%; }
}

/* Footer: kolom lebih banyak + ikon sosial berupa SVG inline (bukan font ikon,
   supaya halaman portal tidak perlu memuat Font Awesome 500 KB). */
.ph-footer .footer-social a { display: inline-flex; }
.ph-footer .footer-social svg { width: 20px; height: 20px; display: block; }
.ph-footer .footer-col ul li { line-height: 1.35; }
.ph-footer .footer-note { margin-top: 10px; font-size: 12.5px; color: rgba(255, 255, 255, 0.45); }
@media (max-width: 1180px) {
  .ph-footer .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ph-footer .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .ph-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; } }