:root{
  --tan:#C6AE94;        /* bar & aksen panel */
  --brown:#5A4636;      /* teks gelap */
  --ink:#1A1A1A;
  --bg:#f3f1ee;         /* body background */
  --nav:#bfa585;        /* topbar bg (cokelat muda) */
  --nav-ink:#2a1f15;    /* teks/menu di nav */
  --nav-ink-muted:#4a3a2d;
  --footer:#3c2718;     /* footer cokelat gelap */
  --footer-ink:#eee;
  --btn:#212529;        /* tombol hitam */
}

/* ===== Background global ===== */
.bg-body, .member-bg{ background: var(--bg); }

/* ===== NAV (Header) ===== */
.pit-nav{
  background: var(--nav);
  color: var(--nav-ink);
  position: sticky; 
  top:0; 
  z-index: 1030;
  padding: 0;
  overflow: visible !important;
}

.pit-nav .navbar {
  padding: 0.5rem 0;
  overflow: visible !important;
}

.pit-nav .container {
  overflow: visible !important;
}

.pit-nav .navbar-brand {
  color: var(--nav-ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pit-nav .navbar-brand:hover {
  color: var(--nav-ink);
}

.pit-nav .brand{ 
  color:var(--nav-ink); 
  font-weight:800; 
  letter-spacing:.3px; 
}

.pit-nav .nav-link{ 
  color:var(--nav-ink); 
  font-weight:600; 
  text-decoration:none;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
  border-radius: 6px;
}

.pit-nav .nav-link:hover{ 
  color:var(--nav-ink-muted); 
  background: rgba(255,255,255,0.2);
}

.pit-nav .nav-link.active {
  background: rgba(255,255,255,0.25);
  font-weight: 700;
}

/* Navbar Toggler */
.pit-nav .navbar-toggler {
  border-color: rgba(0,0,0,0.2);
  padding: 0.5rem;
}

.pit-nav .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(139, 111, 71, 0.25);
}

.pit-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(42, 31, 21, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile Navbar Collapse */
@media (max-width: 767.98px) {
  .pit-nav .navbar-collapse {
    background: rgba(198, 174, 148, 0.98);
    margin: 1rem -0.5rem 0;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    overflow: visible !important;
  }
  
  .pit-nav .navbar-nav {
    margin-bottom: 1rem;
  }
  
  .pit-nav .nav-item {
    margin-bottom: 0.25rem;
  }
  
  .pit-nav .nav-link {
    padding: 0.75rem 1rem;
  }
  
  .pit-nav .dropdown {
    width: 100%;
    margin-top: 0.5rem;
  }
  
  .pit-nav .btn-ghost {
    width: 100%;
    text-align: left;
    justify-content: space-between;
    display: flex;
    align-items: center;
  }
  
  .pit-nav .dropdown-menu {
    width: 100%;
    position: static !important;
    transform: none !important;
    margin-top: 0.25rem;
  }
  
  .logo {
    height: 32px;
  }
  
  .pit-nav .brand {
    font-size: 0.95rem;
  }
}

/* Desktop - ensure dropdown is visible */
@media (min-width: 768px) {
  .pit-nav .dropdown {
    display: block !important;
  }
  
  .pit-nav .dropdown-menu {
    position: absolute !important;
  }
}

.logo{ height:36px; width:auto; }
.logo-sm{ height:48px; width:auto; }

.btn-ghost{
  background: rgba(255,255,255,.25);
  border:1px solid rgba(0,0,0,.1);
  color:var(--nav-ink);
  font-weight: 500;
  transition: all 0.2s ease;
}
.btn-ghost:hover{
  background: rgba(255,255,255,.35);
  color:var(--nav-ink);
  border-color: rgba(0,0,0,.15);
}
.btn-ghost:focus,
.btn-ghost:active {
  background: rgba(255,255,255,.35);
  color:var(--nav-ink);
  border-color: rgba(0,0,0,.2);
  box-shadow: 0 0 0 0.2rem rgba(139, 111, 71, 0.25);
}

/* Dropdown Menu */
.pit-nav .dropdown {
  position: relative;
  z-index: 1040;
}

.pit-nav .dropdown-menu {
  z-index: 1050 !important;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border: 1px solid rgba(0,0,0,0.1);
  min-width: 200px;
  margin-top: 0.5rem;
  background-color: white !important;
  display: none;
}

.pit-nav .dropdown-menu.show {
  display: block !important;
}

.pit-nav .dropdown.show .dropdown-menu {
  display: block !important;
}

.pit-nav .dropdown-item {
  padding: 0.625rem 1rem;
  color: var(--nav-ink);
  font-weight: 500;
  transition: all 0.2s ease;
}

.pit-nav .dropdown-item:hover {
  background-color: rgba(198, 174, 148, 0.15);
  color: var(--brown);
}

.pit-nav .dropdown-item.active {
  background-color: rgba(198, 174, 148, 0.2);
  color: var(--brown);
  font-weight: 600;
}

.pit-nav .dropdown-divider {
  margin: 0.5rem 0;
  border-color: rgba(0,0,0,0.1);
}

/* --- HERO FINAL - Responsive & Full Width tidak kepotong --- */
body.member-bg section.hero-band{
  background:
    linear-gradient(0deg, rgba(0,0,0,.25), rgba(0,0,0,.25)),
    url('/member/assets/img/bannernew.png?v=20260209')
      center top / 100% auto no-repeat !important;  /* Full width, height auto, tidak kepotong */
  color:#fff;
  padding: 24px 0;
  min-height: 100px;
}

/* Tablet: tinggi lebih besar */
@media (min-width: 768px){
  body.member-bg section.hero-band{ 
    min-height: 350px;
    padding: 32px 0;
  }
}

/* Desktop: tinggi optimal untuk banner full */
@media (min-width: 992px){
  body.member-bg section.hero-band{ 
    min-height: 420px;
    padding: 48px 0;
  }
}

/* Large desktop: banner lebih tinggi lagi */
@media (min-width: 1400px){
  body.member-bg section.hero-band{ 
    min-height: 710px;
  }
}

.hero-band h1{ font-size:1.8rem; font-weight:800; }
/* transisi halus saat breakpoint berubah */
body.member-bg section.hero-band{ transition: background-size .2s ease, min-height .2s ease, padding .2s ease; }

/* ===== CARD aksi ===== */
.action-card{
  border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition: transform .15s ease;
}
.action-card:hover{ transform: translateY(-3px); }
.action-img{ height:180px; background-size:cover; background-position:center; }

/* ===== Panel generik (register/login) ===== */
.form-label{ font-weight:600; color:var(--brown); }
.btn-dark{ background:var(--btn); border-color:var(--btn); }
.panel{ border-radius:16px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.15); background:#fff; }
.panel-head{ background:var(--tan); color:#fff; display:flex; align-items:center; gap:12px; padding:12px 16px; }
.panel-head img{ height:36px; width:auto; }

/* TomSelect tweaks (kalau dipakai di register) */
.ts-control { background-color:#fff; }
.ts-dropdown .option { padding:.375rem .5rem; }
.ts-control input[type="text"]::placeholder { color:#999; }

/* Util */
.text-shadow-sm{ text-shadow:0 1px 2px rgba(0,0,0,.24); }

/* ===== FOOTER (bg besar responsif + overlay) ===== */
.pit-footer{
  position: relative;
  color: var(--footer-ink);
  background: var(--footer) url('/wp-content/uploads/2025/10/BG-Footer-1.png') center/cover no-repeat;
}
.pit-footer .footer-overlay{
  position: relative;
  z-index: 1;
  background: rgba(0,0,0,.35);   /* bantu kontras teks di atas gambar */
}
.pit-footer a{ color:var(--footer-ink); text-decoration:none; }
.pit-footer a:hover{ text-decoration:underline; }

/* ===== Footer: list dengan panah "›" ===== */
.footer-list{ margin:0; padding:0; list-style:none; }
.footer-list li{ position:relative; padding-left:18px; margin:.35rem 0; }
.footer-list li::before{
  content: "›";               /* panah */
  position:absolute; left:0; top:0; line-height:1.2;
  color: var(--footer-ink); opacity:.85;
  font-weight: 700;
}

/* Heading kolom footer */
.footer-heading{
  font-weight: 800; text-transform: uppercase;
  letter-spacing: .4px; font-size: .95rem;
  margin-bottom: .5rem;
}

/* Ikon sosial bulat */
.social-round{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--footer-ink); text-decoration:none;
  transition: transform .12s ease, background .12s ease;
}
.social-round:hover{ transform: translateY(-2px); background: rgba(255,255,255,.25); }

/* Tombol cokelat seperti contoh */
.btn-amber{
  background: #7a522f; border: 0; color: #fff;
}
.btn-amber:hover{ background: #6a492a; color: #fff; }

/* Spasi antar kolom di layar kecil */
@media (max-width: 767.98px){
  .footer-cols > [class*="col-"]{ margin-bottom: 1rem; }
}

/* Responsif: fokus gambar */
@media (min-width: 1200px){
  .pit-footer{ background-position: center right; }
}
@media (max-width: 767.98px){
  .pit-footer{ background-position: center; }
}

/* === Logo sizes (lebih besar) === */
.logo{ height:56px; width:auto; }        /* header */
.logo-sm{ height:84px; width:auto; }     /* footer */

/* Konsistensi tombol & link di header/footer */
.btn-amber{
  background:#7a522f; border:0; color:#fff; font-weight:700; letter-spacing:.2px;
}
.btn-amber:hover{ background:#6a492a; color:#fff; }

.btn-outline-light{
  border-color:rgba(255,255,255,.6); color:#fff;
}
.btn-outline-light:hover{
  background:rgba(255,255,255,.15); color:#fff; border-color:rgba(255,255,255,.8);
}

/* Footer list panah (tetap) */
.footer-list{ margin:0; padding:0; list-style:none; }
.footer-list li{ position:relative; padding-left:18px; margin:.35rem 0; }
.footer-list li::before{
  content:"›"; position:absolute; left:0; top:0; line-height:1.2;
  color:var(--footer-ink); opacity:.85; font-weight:700;
}

/* Sosial bulat (tetap) */
.social-round{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--footer-ink); text-decoration:none;
  transition: transform .12s ease, background .12s ease;
}
.social-round:hover{ transform: translateY(-2px); background: rgba(255,255,255,.25); }

/* Warna & layout footer sesuai mockup */
.pit-footer {
  background: #3b2413; /* cokelat gelap footer */
  color: #eee;
  position: relative;
}
.pit-footer .footer-overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.0) 60%, rgba(0,0,0,.0) 100%);
}
.pit-footer .logo-sm {
  width: 86px;
  height: auto;
  display: block;
  border-radius: 50%;
  box-shadow: 0 0 0 0 transparent;
}
.footer-heading {
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: .5rem;
  color: #fff;
}
.footer-list { list-style: none; padding-left: 0; margin: 0; }
.footer-list li { display: flex; gap: .5rem; align-items: baseline; margin: .3rem 0; }
.footer-list li::before {
  content: '›';
  font-weight: 700;
  color: #e5c39a; /* aksen krem */
  line-height: 1;
}
.footer-list a {
  color: #f2e9dd;
  text-decoration: none;
}
.footer-list a:hover { color: #fff; text-decoration: underline; }

.footer-address { color: #f2e9dd; }
.footer-bottom { background: rgba(0,0,0,.25); color: #f2e9dd; }

/* Tombol amber (sesuai mockup) */
.btn-amber {
  background: #9a683b; /* cokelat-amber */
  color: #fff;
  border: none;
}
.btn-amber:hover { background: #885d35; color: #fff; }

/* Social round */
.social-round {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: #6b4a31; /* cokelat medium */
  color: #fff;
  text-decoration: none;
  transition: transform .15s ease, background .2s ease;
}
.social-round:hover { transform: translateY(-2px); background: #7a5538; }

/* Responsif spacing */
@media (max-width: 767.98px){
  .footer-cols { text-align: left; }
  .pit-footer .logo-sm { width: 72px; }
}