/* ─── BK Growspace Main CSS ─────────────────────────────────────────────── */
:root {
  --bk-green:       #2e7d32;
  --bk-green-light: #4caf50;
  --bk-green-dark:  #1b5e20;
  --bk-gold:        #f9a825;
  --bk-gold-light:  #ffd54f;
  --bk-white:       #ffffff;
  --bk-gray:        #f5f7f5;
  --bk-text:        #212121;
  --bk-muted:       #757575;
  --bk-border:      #e0e0e0;
  --bs-font-sans-serif: 'Poppins', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; color: var(--bk-text); background: #fff; }
h1,h2,h3,h4,h5,h6 { font-weight: 700; }

/* ── NAVBAR ── */
.bk-navbar { background: linear-gradient(135deg, var(--bk-green-dark) 0%, var(--bk-green) 100%); box-shadow: 0 2px 20px rgba(46,125,50,.4); padding: 0.6rem 0; }
.bk-navbar .brand-icon { width:40px; height:40px; background:var(--bk-gold); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--bk-green-dark); }
.bk-navbar .brand-name { font-size:1.1rem; font-weight:700; color:#fff; line-height:1.2; }
.bk-navbar .brand-sub { font-size:0.65rem; color:rgba(255,255,255,0.7); }
.bk-navbar .nav-link { color:rgba(255,255,255,0.85) !important; font-weight:500; font-size:0.87rem; border-radius:8px; padding:0.45rem 0.75rem !important; transition:all .2s; }
.bk-navbar .nav-link:hover, .bk-navbar .nav-link.active { color:#fff !important; background:rgba(255,255,255,0.15); }
.bk-dropdown { border:none; border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,.15); padding:0.5rem; }
.bk-dropdown .dropdown-item { border-radius:8px; font-size:0.87rem; font-weight:500; padding:0.5rem 1rem; transition:all .15s; }
.bk-dropdown .dropdown-item:hover { background:var(--bk-green); color:#fff; }
.btn-konsultasi { background:var(--bk-gold); color:var(--bk-green-dark); font-weight:700; font-size:0.85rem; border:none; border-radius:50px; padding:0.45rem 1.2rem; transition:all .2s; box-shadow:0 2px 10px rgba(249,168,37,.4); }
.btn-konsultasi:hover { background:var(--bk-gold-light); transform:translateY(-2px); box-shadow:0 4px 15px rgba(249,168,37,.5); }

/* ── HERO ── */
.hero-section { min-height: 88vh; background: linear-gradient(135deg, var(--bk-green-dark) 0%, var(--bk-green) 50%, #388e3c 100%); position: relative; overflow: hidden; display: flex; align-items: center; }
.hero-section::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.hero-badge { display:inline-flex; align-items:center; gap:0.5rem; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); border-radius:50px; padding:0.35rem 1rem; font-size:0.8rem; color:#fff; backdrop-filter:blur(10px); margin-bottom:1.5rem; }
.hero-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight:800; color:#fff; line-height:1.2; }
.hero-title span { color:var(--bk-gold); }
.hero-desc { font-size:1.05rem; color:rgba(255,255,255,.85); line-height:1.8; }
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }
.btn-hero-primary { background:var(--bk-gold); color:var(--bk-green-dark); font-weight:700; border-radius:50px; padding:0.75rem 2rem; border:none; transition:all .3s; box-shadow:0 4px 20px rgba(249,168,37,.4); }
.btn-hero-primary:hover { transform:translateY(-3px); box-shadow:0 8px 30px rgba(249,168,37,.5); color:var(--bk-green-dark); }
.btn-hero-outline { background:transparent; color:#fff; font-weight:600; border:2px solid rgba(255,255,255,.5); border-radius:50px; padding:0.75rem 2rem; transition:all .3s; }
.btn-hero-outline:hover { background:rgba(255,255,255,.15); color:#fff; border-color:#fff; }
.hero-card { background:rgba(255,255,255,.12); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.2); border-radius:20px; padding:1.5rem; text-align:center; color:#fff; transition:transform .3s; }
.hero-card:hover { transform:translateY(-5px); }
.hero-card .num { font-size:2rem; font-weight:800; color:var(--bk-gold); }
.hero-card .label { font-size:0.8rem; opacity:.8; }

/* ── SECTION HEADERS ── */
.section-badge { display:inline-block; background:rgba(46,125,50,.1); color:var(--bk-green); border-radius:50px; padding:0.3rem 1rem; font-size:0.8rem; font-weight:600; margin-bottom:0.75rem; }
.section-title { font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; color:var(--bk-text); }
.section-title span { color:var(--bk-green); }
.section-divider { width:60px; height:4px; background:linear-gradient(90deg,var(--bk-green),var(--bk-gold)); border-radius:2px; margin:1rem auto; }

/* ── CARDS ── */
.bk-card { background:#fff; border-radius:20px; box-shadow:0 4px 20px rgba(0,0,0,.07); border:1px solid var(--bk-border); transition:all .3s; overflow:hidden; }
.bk-card:hover { transform:translateY(-6px); box-shadow:0 12px 40px rgba(46,125,50,.15); }
.bk-card-icon { width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.6rem; }
.icon-green { background:rgba(46,125,50,.1); color:var(--bk-green); }
.icon-gold { background:rgba(249,168,37,.1); color:var(--bk-gold); }
.icon-blue { background:rgba(21,101,192,.1); color:#1565c0; }
.icon-orange { background:rgba(230,81,0,.1); color:#e65100; }

/* ── GURU CARD ── */
.guru-card { text-align:center; }
.guru-card img { width:110px; height:110px; border-radius:50%; object-fit:cover; border:4px solid var(--bk-green); padding:3px; background:#fff; }
.guru-card .guru-name { font-weight:700; font-size:0.95rem; margin-top:1rem; }
.guru-card .guru-spec { font-size:0.8rem; color:var(--bk-green); background:rgba(46,125,50,.1); border-radius:50px; padding:0.2rem 0.8rem; display:inline-block; margin-top:0.3rem; }

/* ── ORGANIGRAM ── */
.org-chart { display:flex; flex-direction:column; align-items:center; gap:0; }
.org-node { background:var(--bk-green); color:#fff; border-radius:14px; padding:0.8rem 2rem; font-weight:600; font-size:0.9rem; text-align:center; min-width:200px; box-shadow:0 4px 15px rgba(46,125,50,.3); position:relative; }
.org-node.gold { background:var(--bk-gold); color:var(--bk-green-dark); }
.org-connector { width:2px; height:30px; background:var(--bk-green); margin:0 auto; }
.org-row { display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; }
.org-row-connector { display:flex; justify-content:center; }

/* ── TABS ── */
.bk-tabs .nav-link { color:var(--bk-muted); font-weight:600; border-radius:10px 10px 0 0; padding:0.75rem 1.5rem; }
.bk-tabs .nav-link.active { color:var(--bk-green); background:rgba(46,125,50,.08); border-bottom:3px solid var(--bk-green); }

/* ── FORMS ── */
.bk-form-card { background:#fff; border-radius:20px; padding:2rem; box-shadow:0 4px 25px rgba(0,0,0,.08); border:1px solid var(--bk-border); }
.form-control:focus, .form-select:focus { border-color:var(--bk-green); box-shadow:0 0 0 0.2rem rgba(46,125,50,.15); }
.btn-bk-primary { background:linear-gradient(135deg,var(--bk-green),var(--bk-green-light)); color:#fff; border:none; border-radius:50px; padding:0.6rem 2rem; font-weight:600; transition:all .3s; }
.btn-bk-primary:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(46,125,50,.4); color:#fff; }
.btn-bk-outline { border:2px solid var(--bk-green); color:var(--bk-green); border-radius:50px; padding:0.5rem 1.5rem; font-weight:600; transition:all .2s; }
.btn-bk-outline:hover { background:var(--bk-green); color:#fff; }

/* ── STATUS BADGES ── */
.badge-pending { background:rgba(255,152,0,.15); color:#e65100; border:1px solid rgba(255,152,0,.3); padding:0.3rem 0.8rem; border-radius:50px; font-size:0.75rem; font-weight:600; }
.badge-terjadwal { background:rgba(21,101,192,.1); color:#1565c0; border:1px solid rgba(21,101,192,.2); padding:0.3rem 0.8rem; border-radius:50px; font-size:0.75rem; font-weight:600; }
.badge-selesai { background:rgba(46,125,50,.1); color:var(--bk-green); border:1px solid rgba(46,125,50,.2); padding:0.3rem 0.8rem; border-radius:50px; font-size:0.75rem; font-weight:600; }

/* ── BERITA CARD ── */
.berita-card img { width:100%; height:200px; object-fit:cover; border-radius:14px; }
.berita-card .category-badge { background:rgba(46,125,50,.1); color:var(--bk-green); font-size:0.75rem; font-weight:600; border-radius:50px; padding:0.2rem 0.8rem; display:inline-block; margin-bottom:0.5rem; }

/* ── INFO CARDS (PTN, Beasiswa) ── */
.ptn-card { border-radius:18px; border:2px solid transparent; transition:all .3s; }
.ptn-card:hover { border-color:var(--bk-green); }
.ptn-rank { width:36px; height:36px; background:var(--bk-green); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem; flex-shrink:0; }

/* ── CALENDAR ── */
.calendar-wrapper { background:#fff; border-radius:20px; box-shadow:0 4px 20px rgba(0,0,0,.08); overflow:hidden; }
.calendar-header { background:var(--bk-green); color:#fff; padding:1.5rem; display:flex; align-items:center; justify-content:space-between; }
.calendar-header h5 { margin:0; font-weight:700; }
.calendar-nav { background:rgba(255,255,255,.2); border:none; color:#fff; border-radius:8px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; transition:.2s; cursor:pointer; }
.calendar-nav:hover { background:rgba(255,255,255,.3); }
.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; padding:1rem; }
.cal-day-name { text-align:center; font-size:0.75rem; font-weight:700; color:var(--bk-muted); padding:0.5rem 0; }
.cal-day { text-align:center; padding:0.5rem; border-radius:10px; font-size:0.85rem; cursor:default; transition:.2s; }
.cal-day.today { background:var(--bk-green); color:#fff; font-weight:700; }
.cal-day.holiday { background:rgba(244,67,54,.12); color:#d32f2f; font-weight:600; }
.cal-day.empty { opacity:0; pointer-events:none; }
.holiday-legend { margin:0 1rem 1rem; }
.holiday-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }

/* ── DATA SISWA ── */
.tingkat-header { background:linear-gradient(135deg,var(--bk-green-dark),var(--bk-green)); color:#fff; border-radius:12px; padding:0.75rem 1.5rem; font-weight:700; margin-bottom:0.75rem; }
.total-row { background:rgba(46,125,50,.05); font-weight:700; }
.grand-total { background:var(--bk-green); color:#fff; border-radius:10px; padding:0.75rem 1.5rem; font-weight:700; }

/* ── FOOTER ── */
.bk-footer { background:linear-gradient(135deg, var(--bk-green-dark) 0%, #1a3d1c 100%); }
.footer-links { list-style:none; padding:0; margin:0; }
.footer-links a { color:rgba(255,255,255,0.65); text-decoration:none; font-size:0.87rem; display:block; padding:0.2rem 0; transition:.2s; }
.footer-links a:hover { color:#fff; }
.footer-links i { font-size:0.65rem; margin-right:0.3rem; }
.footer-contact-item { display:flex; align-items:center; gap:0.75rem; background:rgba(255,255,255,.06); border-radius:10px; padding:0.6rem 0.9rem; }
.footer-contact-item i { font-size:1.3rem; }

/* ── KONSULTASI OPERASIONAL ── */
.jam-ops { background:linear-gradient(135deg,var(--bk-green),var(--bk-green-light)); color:#fff; border-radius:20px; padding:2rem; text-align:center; }
.jam-ops .time { font-size:2.5rem; font-weight:800; }

/* ── MATERI ARTIKEL ── */
.artikel-img { height:180px; object-fit:cover; width:100%; border-radius:14px 14px 0 0; }
.kategori-badge { font-size:0.72rem; font-weight:700; border-radius:50px; padding:0.2rem 0.7rem; }
.kat-kesehatan { background:rgba(229,57,53,.1); color:#c62828; }
.kat-potensi { background:rgba(21,101,192,.1); color:#1565c0; }
.kat-sosial { background:rgba(230,81,0,.1); color:#bf360c; }

/* ── PAGE HEADER ── */
.page-header { background:linear-gradient(135deg, var(--bk-green-dark), var(--bk-green)); padding:4rem 0 3rem; color:#fff; }
.page-header h1 { font-size:clamp(1.8rem,3vw,2.5rem); font-weight:800; }
.breadcrumb-item a { color:rgba(255,255,255,.7); }
.breadcrumb-item.active, .breadcrumb-item+.breadcrumb-item::before { color:rgba(255,255,255,.9); }

/* ── ANIMATIONS ── */
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
.fade-up { animation: fadeInUp .6s ease forwards; }
.fade-up-delay-1 { animation-delay: .1s; opacity:0; }
.fade-up-delay-2 { animation-delay: .2s; opacity:0; }
.fade-up-delay-3 { animation-delay: .3s; opacity:0; }

/* ── UTILITIES ── */
.bg-bk { background:var(--bk-green) !important; }
.text-bk { color:var(--bk-green) !important; }
.border-bk { border-color:var(--bk-green) !important; }
.rounded-xl { border-radius:16px !important; }
.shadow-bk { box-shadow:0 8px 30px rgba(46,125,50,.2); }