/* =========================================================================
   PENERBIT ITPI — Design System
   Palet elegan, tipografi modern, komponen konsisten di seluruh situs.
   ========================================================================= */

:root{
  /* Warna utama */
  --primary-50:#eef3fc;
  --primary-100:#dbe6f8;
  --primary:#14417f;
  --primary-600:#0f3468;
  --primary-dark:#0a2650;
  --primary-900:#071b3a;
  --accent:#eda63c;
  --accent-dark:#cf8a24;
  --accent-light:#fbe4bb;

  /* Netral & teks */
  --ink:#1a2233;
  --ink-soft:#3b4457;
  --muted:#6b7688;
  --border-soft:#e7ecf5;
  --bg-soft:#f6f8fc;
  --bg-soft-2:#eef2f9;
  --surface:#ffffff;

  /* Radius & bayangan */
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:22px;
  --radius-pill:999px;
  --shadow-sm:0 2px 10px rgba(15,23,42,.06);
  --shadow:0 10px 28px rgba(15,23,42,.08);
  --shadow-lg:0 22px 50px rgba(15,23,42,.14);
  --shadow-brand:0 16px 36px rgba(20,65,127,.22);

  /* Override variabel Bootstrap agar seluruh utilitas (text-primary, bg-primary,
     border-primary, dst) otomatis mengikuti palet baru tanpa mengubah markup */
  --bs-primary:var(--primary);
  --bs-primary-rgb:20,65,127;
  --bs-body-font-family:'Plus Jakarta Sans','Poppins',sans-serif;
  --bs-body-color:var(--ink-soft);
  --bs-link-color:var(--primary);
  --bs-link-hover-color:var(--primary-dark);
  --bs-border-radius:var(--radius-sm);
  --bs-border-radius-lg:var(--radius);
  --bs-border-radius-xl:var(--radius-lg);
  --light-bg:var(--bg-soft); /* kompatibilitas dengan referensi lama */
}

*{scrollbar-width:thin;scrollbar-color:var(--primary-100) transparent;}
html{scroll-behavior:smooth;}
body{
  font-family:'Plus Jakarta Sans','Poppins',sans-serif;
  color:var(--ink-soft);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;transition:color .2s ease;}
h1,h2,h3,h4,h5,h6{color:var(--ink);letter-spacing:-.01em;}
::selection{background:var(--accent-light);color:var(--primary-dark);}

/* ---------- Top bar ---------- */
.top-bar{background:var(--primary-dark);color:#fff;letter-spacing:.2px;}
.top-bar a{color:#c9d6ee;transition:.2s;}
.top-bar a:hover{color:#fff;transform:translateY(-1px);}

/* ---------- Navbar ---------- */
.navbar{
  background:rgba(255,255,255,.9)!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
  padding-top:.7rem;padding-bottom:.7rem;
  transition:box-shadow .25s ease;
}
.brand-badge{width:38px;height:38px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;}
.brand-logo{height:44px;width:auto;object-fit:contain;}
.brand-text{font-size:.95rem;letter-spacing:.6px;color:var(--primary-dark);font-weight:700;}
.navbar-brand{color:var(--primary-dark)!important;font-size:1.3rem;}
.navbar-nav .nav-link{
  font-weight:600;color:var(--ink-soft)!important;margin:0 4px;padding:.55rem .85rem!important;
  border-radius:var(--radius-pill);position:relative;transition:.2s ease;
}
.navbar-nav .nav-link:hover{color:var(--primary)!important;background:var(--primary-50);}
.navbar-nav .nav-link.active{color:var(--primary)!important;background:var(--primary-50);}

/* ---------- Tombol "Daftar Anggota" di navbar ---------- */
.btn-nav-daftar{
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#221604!important;font-weight:700;border-radius:var(--radius-pill);
  padding:9px 22px;font-size:.9rem;box-shadow:0 8px 18px rgba(237,166,60,.35);
  border:none;transition:.25s ease;
}
.btn-nav-daftar:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(237,166,60,.45);color:#1a1204!important;}

/* ---------- Hero Slider (carousel beranda) ---------- */
.hero-slider{position:relative;}
.hero-slider .carousel-item{position:relative;}
.hero-slider .carousel-item img{width:100%;height:560px;object-fit:cover;display:block;filter:saturate(1.05);}
.hero-slider .carousel-item::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,27,58,.15) 0%,rgba(7,27,58,.55) 100%);
}
.hero-slider .carousel-control-prev,.hero-slider .carousel-control-next{width:6%;opacity:0;transition:.25s;}
.hero-slider:hover .carousel-control-prev,.hero-slider:hover .carousel-control-next{opacity:.95;}
.hero-slider .carousel-control-prev-icon,.hero-slider .carousel-control-next-icon{
  background-color:rgba(255,255,255,.18);backdrop-filter:blur(4px);border-radius:50%;padding:18px;background-size:45%;
}
.hero-slider .carousel-indicators{margin-bottom:1.1rem;}
.hero-slider .carousel-indicators [data-bs-target]{background-color:var(--accent);width:9px;height:9px;border-radius:50%;opacity:.55;transition:.2s;}
.hero-slider .carousel-indicators .active{opacity:1;width:26px;border-radius:5px;}
@media (max-width:768px){.hero-slider .carousel-item img{height:300px;}}

.hero{background:linear-gradient(120deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;padding:90px 0 110px;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;top:-120px;right:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(237,166,60,.28),transparent 70%);}
.hero::after{content:'';position:absolute;bottom:-160px;left:-100px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%);}
.hero h1{font-weight:800;font-size:2.7rem;position:relative;z-index:2;}
.hero p.lead{color:#dbe6f8;position:relative;z-index:2;}
.hero .btn-accent{background:linear-gradient(135deg,var(--accent),var(--accent-dark));border:none;color:#221604;font-weight:700;border-radius:var(--radius-pill);padding:.7rem 1.6rem;box-shadow:0 10px 24px rgba(237,166,60,.35);position:relative;z-index:2;}
.hero .btn-accent:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(237,166,60,.45);color:#1a1204;}

/* ---------- Judul seksi ---------- */
.section-title{font-weight:800;color:var(--primary-dark);}
.section-sub{color:var(--muted);}
h6.text-uppercase.text-primary{letter-spacing:1.6px;font-size:.78rem;}

/* ---------- Kartu umum (berita, kegiatan, dsb) ---------- */
.card-org{border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:.3s ease;height:100%;background:var(--surface);overflow:hidden;}
.card-org:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.card-org img{border-radius:0;height:200px;object-fit:cover;width:100%;transition:.4s ease;}
.card-org:hover img{transform:scale(1.05);}

/* ---------- Kotak statistik ---------- */
.stat-box{background:var(--surface);border-radius:var(--radius-lg);padding:30px 26px;box-shadow:var(--shadow);text-align:center;border:1px solid var(--border-soft);}
.stat-box .num{font-size:2.3rem;font-weight:800;background:linear-gradient(135deg,var(--primary),var(--primary-600));-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ---------- Badge kategori ---------- */
.badge-cat{background:var(--accent-light);color:var(--accent-dark);font-weight:700;font-size:.72rem;letter-spacing:.3px;border-radius:var(--radius-pill);padding:.35em .85em!important;}

/* ---------- Kartu pengurus ---------- */
.pengurus-card{text-align:center;border:none;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:.3s ease;background:var(--surface);}
.pengurus-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px);}
.pengurus-card img{width:100%;height:240px;object-fit:cover;background:var(--bg-soft-2);}

/* ---------- Timeline (sejarah) ---------- */
.timeline-item{border-left:3px solid var(--primary-100);padding-left:24px;margin-bottom:26px;position:relative;}
.timeline-item::before{content:'';position:absolute;left:-9px;top:2px;width:15px;height:15px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 4px var(--accent-light);}

/* ---------- Footer ---------- */
.footer-site{background:linear-gradient(180deg,var(--primary-dark) 0%,var(--primary-900) 100%);position:relative;}
.footer-site h5,.footer-site h6{letter-spacing:.3px;}
.footer-links li{margin-bottom:10px;}
.footer-links a{color:#b7c6e6;transition:.2s;}
.footer-links a:hover{color:#fff;padding-left:4px;}
.footer-site .bi{transition:.2s;}
.footer-site a:hover .bi{transform:translateY(-2px);color:var(--accent);}

/* ---------- Banner halaman dalam ---------- */
.page-banner{background:linear-gradient(120deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;padding:60px 0;position:relative;overflow:hidden;}
.page-banner::before{content:'';position:absolute;top:-100px;right:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(237,166,60,.25),transparent 70%);}
.page-banner h1{font-weight:800;position:relative;z-index:2;}
.page-banner .breadcrumb,.page-banner p{position:relative;z-index:2;}

/* ---------- Galeri ---------- */
.gallery-item{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
.gallery-item img{border-radius:var(--radius);height:230px;object-fit:cover;width:100%;cursor:pointer;transition:.35s ease;}
.gallery-item img:hover{transform:scale(1.06);}

/* ---------- Formulir ---------- */
.form-control,.form-select{border-radius:var(--radius-sm);border-color:var(--border-soft);padding:.65rem .9rem;}
.form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 .2rem rgba(20,65,127,.14);}
.form-label{font-weight:600;color:var(--ink);font-size:.92rem;}

/* ---------- Tombol ---------- */
.btn{border-radius:var(--radius-pill);font-weight:600;padding:.62rem 1.5rem;transition:.2s ease;}
.btn-primary{background:var(--primary);border-color:var(--primary);}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-brand);}
.btn-outline-primary{color:var(--primary);border-color:var(--primary);}
.btn-outline-primary:hover{background:var(--primary);border-color:var(--primary);transform:translateY(-1px);}
.btn-dark{background:var(--ink);border-color:var(--ink);}
.btn-dark:hover{background:#000;border-color:#000;}
.btn-lg{padding:.85rem 2rem;}

/* ---------- Reveal saat scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.active{opacity:1;transform:translateY(0);}

/* ---------- Tombol WhatsApp mengambang ---------- */
.wa-float{position:fixed;bottom:26px;right:26px;background:#25D366;color:#fff;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 10px 26px rgba(37,211,102,.4);z-index:1050;transition:.25s ease;}
.wa-float:hover{transform:scale(1.08) translateY(-2px);color:#fff;}

/* ---------- Tombol kembali ke atas ---------- */
.back-to-top{position:fixed;bottom:26px;right:96px;background:var(--primary);color:#fff;width:46px;height:46px;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:20px;box-shadow:var(--shadow);z-index:1050;border:none;transition:.25s ease;}
.back-to-top.show{display:flex;}
.back-to-top:hover{background:var(--primary-dark);transform:translateY(-3px);}

/* ---------- Accordion FAQ ---------- */
.accordion-item{border:1px solid var(--border-soft);border-radius:var(--radius)!important;overflow:hidden;margin-bottom:14px;}
.accordion-button{font-weight:700;color:var(--ink);}
.accordion-button:not(.collapsed){background:var(--primary-50);color:var(--primary-dark);box-shadow:none;}
.accordion-button:focus{box-shadow:none;border-color:rgba(20,65,127,.15);}

/* ---------- CTA banner keanggotaan ---------- */
.cta-daftar{background:linear-gradient(120deg,var(--accent) 0%,var(--accent-dark) 100%);border-radius:var(--radius-lg);color:#221604;position:relative;overflow:hidden;box-shadow:0 20px 46px rgba(237,166,60,.3);}
.cta-daftar::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.35),transparent 55%);}
.cta-daftar>*{position:relative;z-index:2;}

/* ---------- Hover-lift generik ---------- */
.hover-lift{transition:.3s ease;}
.hover-lift:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}

/* ---------- Progress step pendaftaran ---------- */
.step-badge{width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;}

/* ---------- Loading state tombol form ---------- */
.btn-loading{position:relative;pointer-events:none;opacity:.75;}

/* ---------- Kartu bg-light (Visi/Misi & sejenis) ---------- */
.bg-light{background:var(--bg-soft)!important;}
.rounded-4{border-radius:var(--radius)!important;}

/* ---------- Badge notifikasi ---------- */
.badge.bg-danger{border-radius:var(--radius-pill);}


/* ---------- Identitas logo ITPI (navbar & footer) ---------- */
.navbar-brand{gap:.7rem;padding:0;margin-right:1rem;}
.brand-logo{height:46px;width:auto;object-fit:contain;transition:transform .3s ease;}
.navbar-brand:hover .brand-logo{transform:scale(1.04);}
.brand-text{display:flex;flex-direction:column;line-height:1.1;letter-spacing:0;}
.brand-name{font-size:1.45rem;font-weight:800;letter-spacing:.04em;color:#0a3560;}
.brand-sub{font-size:.66rem;font-weight:600;color:var(--muted);margin-top:3px;max-width:15rem;}
@media (max-width:575.98px){.brand-logo{height:40px;}}
.footer-logo-plate{display:inline-block;background:#fff;border-radius:var(--radius);padding:12px 16px;box-shadow:0 10px 24px rgba(0,0,0,.25);}
.footer-logo-plate img{display:block;height:auto;width:100%;max-width:230px;}
.navbar-brand:focus-visible,.footer-logo-plate:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--radius-sm);}