/* ============================================================
   TEMA BUDI MANDIRI — bentuk & tata letak khas
   Terinspirasi gedung: balok miring biru + oranye, sudut tegas.
   Dimuat setelah modern.css (menimpa gaya bulat-lembut).
   ============================================================ */
:root { --radius: 6px; --radius-lg: 10px; --radius-xl: 14px; --cut: 14px; }
.btn { border-radius: 4px; letter-spacing: .01em; }
.btn-primary { background: var(--primary); color: #fff; }
.btn:not(.nav-spmb) { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); padding: 14px 30px; }

/* ---------- Header: garis balok biru + oranye ---------- */
.header-top { background: var(--primary-dark); }
.header { border-bottom: 0; background-color: var(--surface); background-image: linear-gradient(90deg, var(--primary) 0 72%, var(--accent) 72% 100%); background-size: 100% 4px; background-position: bottom; background-repeat: no-repeat; }
[data-theme="dark"] .header { background-color: var(--header-bg, var(--surface)); }
.logo i { border-radius: 4px; background: var(--primary); color: #fff; clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); }
.nav a, .nav-dd-btn { border-radius: 4px; }
.nav a::after, .nav-dd-btn::after { background: var(--accent); }
.nav a.nav-spmb { border-radius: 4px; background: var(--accent); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); padding-left: 20px; padding-right: 20px; }

/* ---------- Hero: foto gedung + sudut miring ---------- */
.hero { min-height: min(86vh, 760px); }
.hero.hero--photo { background: var(--hero-img) 78% 55% / cover no-repeat; }
.hero--photo::before { background: linear-gradient(100deg, rgba(20,26,43,.88) 0%, rgba(24,32,52,.78) 100%); opacity: 1; clip-path: polygon(0 0, 62% 0, 48% 100%, 0 100%); z-index: 1; }
.hero--photo .hero-shape--1 { display: block; position: absolute; inset: 0; z-index: 1; width: auto; height: auto; border: 0; border-radius: 0; filter: none; opacity: 1; transform: none; background: var(--accent); clip-path: polygon(62% 0, 63.4% 0, 49.4% 100%, 48% 100%); pointer-events: none; }
.hero--photo .hero-shape--2 { display: block; position: absolute; inset: 0; z-index: 1; width: auto; height: auto; border: 0; border-radius: 0; filter: none; opacity: 1; transform: none; background: var(--primary); clip-path: polygon(63.4% 0, 64.6% 0, 50.6% 100%, 49.4% 100%); pointer-events: none; }
.hero--photo { background-position: 78% 55%; }
.hero--photo .hero-content { max-width: 600px; }
@media (max-width: 900px) { .hero--photo::before { clip-path: none; background: linear-gradient(180deg, rgba(20,26,43,.9), rgba(20,26,43,.78)); } .hero--photo .hero-shape--1, .hero--photo .hero-shape--2 { display: none; } }
.hero:not(.hero--photo) { background: linear-gradient(115deg, #141a2b 0%, #232b40 55%, #1f5fc9 100%); }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 84px; z-index: 2; background: var(--surface); clip-path: polygon(0 100%, 100% 100%, 100% 0); pointer-events: none; }
.hero .container { position: relative; z-index: 3; }
.hero-badge { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 2px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; padding: 7px 16px; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.hero-badge i { color: var(--on-accent); }
.hero-content h1 { font-weight: 800; letter-spacing: -.03em; }
.hero-content h1 .text-gradient { color: var(--accent); }
.hero-content p { border-left: 4px solid var(--accent); padding-left: 16px; }
.hero-buttons .btn-primary { background: var(--accent); color: var(--on-accent); }
.hero-buttons .btn-ppdb { background: #fff; color: var(--primary); }
.btn-outline { border-radius: 4px; }
.hero-card-principal { border-radius: 4px 28px 4px 28px; border: 1px solid rgba(255,255,255,.28); border-top: 5px solid var(--accent); }
.hero-card-principal .hc-img { border-radius: 0; }

/* ---------- Statistik ---------- */
.counter-grid { border-radius: 8px; border: 0; border-top: 5px solid var(--primary); box-shadow: 0 22px 54px rgba(20,26,43,.2); position: relative; }
.counter-grid::before { content: ''; position: absolute; top: -5px; right: 0; width: 28%; height: 5px; background: var(--accent); }

/* ---------- Judul bagian ---------- */
.section-title .st-badge { background: var(--primary); color: #fff; padding: 6px 22px; margin-bottom: 14px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.section-title .st-badge::before { content: none; }
[data-theme="dark"] .section-title .st-badge { color: #fff; }
.section-title h2 { font-weight: 800; letter-spacing: -.025em; }
.section-title h2::after { content: ''; display: block; width: 86px; height: 5px; margin-top: 14px; background: linear-gradient(90deg, var(--primary) 0 62%, var(--accent) 62% 100%); }
.section.bg-surface { background: var(--bg); }

/* ---------- Kartu: sudut tegas + garis oranye di atas ---------- */
.programs-card, .extracurricular-card, .achievement-card, .testimonial-card, .news-card, .event-card, .faq-item, .ki-card, .teacher-card, .duo-col {
  border-radius: 4px; border: 1px solid var(--border); border-top: 4px solid var(--accent); background: var(--surface);
}
.programs-card:hover, .news-card:hover, .event-card:hover, .teacher-card:hover, .extracurricular-card:hover, .achievement-card:hover { border-color: var(--border); border-top-color: var(--primary); transform: translateY(-5px); box-shadow: 0 18px 40px rgba(20,26,43,.14); }
.pc-icon { border-radius: 4px; background: var(--primary); color: #fff; clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%); }
.programs-card:hover .pc-icon { background: var(--accent); color: var(--on-accent); }
.programs-card::after { color: var(--border); }
.mini-card, .ach-row, .tea-card, .tes-card { border-radius: 4px; background: var(--bg); }
.mini-card .ec-icon { border-radius: 4px; background: var(--primary); }
.tes-card { border-left: 5px solid var(--primary); border-radius: 4px; }
.bc-cat { border-radius: 2px; background: var(--primary); color: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); padding-right: 16px; }
.ac-date { border-radius: 4px; background: var(--primary); clip-path: polygon(0 0, 100% 0, 100% 86%, 86% 100%, 0 100%); }
.acd-day { color: var(--accent); }
.about-visi, .about-misi { border-left: 4px solid var(--primary); }
.ai-main { border-radius: 4px 40px 4px 40px; }
.ai-card { border-radius: 4px; background: var(--accent); }
.gallery-item { border-radius: 4px; }
.gi-overlay i { border-radius: 4px; }
.partner-logo, .mj-card, .gp-item { border-radius: 4px; }
.faq-item { border-top-width: 1px; border-left: 5px solid var(--accent); }
.faq-item.active { border-left-color: var(--primary); border-color: var(--border); }

/* ---------- Footer: slate gelap + garis biru/oranye ---------- */
.footer { background: #1b2236; box-shadow: inset 0 6px 0 var(--primary), inset 0 10px 0 var(--accent); padding-top: 22px; }
.footer-col h4 { text-transform: uppercase; font-size: .86rem; letter-spacing: .1em; }
.footer-col h4::after { width: 34px; height: 4px; border-radius: 0; background: var(--accent); }
.footer-social a { border-radius: 4px; }
.footer-contact { border-radius: 4px; background: rgba(255,255,255,.05); border-top: 4px solid var(--accent); }
.fc-info li i { border-radius: 4px; }
.footer-bottom { background: #131828; }
.back-to-top { border-radius: 4px; }

/* ---------- Halaman dalam ---------- */
.page-banner { background: linear-gradient(115deg, #141a2b 0%, #232b40 55%, #1f5fc9 100%); position: relative; }
.page-banner::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--primary) 0 72%, var(--accent) 72% 100%); }
.page-banner-badge { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 2px; font-weight: 800; }
.cx-contact, .section--teachers { border-radius: 4px; }
.section--teachers { background: linear-gradient(135deg, #141a2b, #232b40 60%, #1f5fc9); }

@media (max-width: 640px) { .hero::after { height: 46px; } .btn:not(.nav-spmb) { padding: 13px 24px; } }

/* ---------- Jurusan: foto dipotong miring ---------- */
.mj-card { border-radius: 4px; border-top: 4px solid var(--accent); box-shadow: none; }
.mj-card:hover { border-color: var(--border); border-top-color: var(--primary); box-shadow: 0 20px 44px rgba(20,26,43,.16); }
.mj-cover { height: 250px; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); margin-bottom: -22px; }
.mj-cover:not(.has-img) { background: linear-gradient(135deg, #141a2b 0%, #232b40 50%, #1f5fc9 100%); }
.mj-cover:not(.has-img)::before { content: ''; position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: linear-gradient(120deg, transparent 10%, #000 90%); mask-image: linear-gradient(120deg, transparent 10%, #000 90%); }
.mj-ico { border-radius: 4px; background: var(--accent); color: var(--on-accent); border: 0; clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); backdrop-filter: none; }
.mj-cover.has-img .mj-ico { border-radius: 4px; }
.mj-short { border-radius: 2px; background: var(--primary); color: #fff; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); padding: 6px 20px; }
.mj-body { padding-top: 34px; }
.mj-name { color: var(--text); font-weight: 800; }
.mj-skills i { color: var(--primary); }
.mj-more { color: var(--primary); }

/* ---------- Footer ---------- */
.footer-map { border-radius: 4px; border-top: 4px solid var(--accent); }
.footer-col .fl-line i { color: var(--accent); }