.hero { position: relative; min-height: 640px; overflow: hidden; color: var(--white); background: var(--blue); }
.hero-bg { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(11,35,74,0.96) 0%, rgba(11,35,74,0.84) 42%, rgba(11,35,74,0.34) 72%), url("../images/placeholders/hero-campus.jpg"), url("../images/hero/bayang-hero.png"); background-position: center; background-size: cover; background-repeat: no-repeat; }
.hero-content { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 56px; align-items: center; min-height: 640px; padding: 72px 0 120px; }
.hero-copy { max-width: 680px; }
.hero-copy h1 { margin: 12px 0 18px; font-size: clamp(40px, 6vw, 70px); line-height: 1.08; }
.hero-copy p { max-width: 660px; margin: 0 0 30px; color: rgba(255,255,255,0.88); font-size: 20px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-panel { padding: 28px; background: rgba(255,255,255,0.95); border-top: 4px solid var(--gold); box-shadow: var(--shadow); color: var(--blue); }
.hero-panel h2 { margin: 0 0 18px; font-size: 22px; }
.hero-panel ul { display: grid; gap: 14px; padding: 0; margin: 0; list-style: none; }
.hero-panel li { padding-bottom: 14px; border-bottom: 1px solid var(--line); font-weight: 800; }
.hero-panel li:last-child { padding-bottom: 0; border-bottom: 0; }
.hero-panel span { margin-right: 10px; color: var(--gold-dark); }
.section-overlap { position: relative; z-index: 5; padding-top: 0; margin-top: -58px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); }
.stats-grid div { padding: 26px 24px; border-right: 1px solid var(--line); }
.stats-grid div:last-child { border-right: 0; }
.stats-grid strong { display: block; color: var(--blue); font-size: 30px; line-height: 1.1; }
.stats-grid span { color: var(--subtext); }
.program-card, .plain-card, .teacher-card, .env-card, .contact-form, .contact-info, .value-panel, .notice-panel { background: var(--white); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 10px 26px rgba(11,35,74,0.06); }
.program-card, .plain-card, .value-panel, .notice-panel { padding: 26px; }
.highlight-panel { border-top: 4px solid var(--teal); }
.program-card span, .program-row span, .teacher-card span, .news-page-list span { color: var(--gold-dark); font-weight: 800; font-size: 14px; }
.program-card h3, .plain-card h3 { margin: 8px 0 10px; color: var(--blue); font-size: 22px; line-height: 1.3; }
.program-card p, .plain-card p, .teacher-card p, .program-row p, .service-list p, .notice-panel p { color: var(--subtext); }
.program-card a { color: var(--blue); font-weight: 800; }
.value-panel h3 { margin: 0 0 8px; color: var(--blue); }
.value-panel p + h3 { margin-top: 20px; }
.value-panel p { color: var(--subtext); }
.teacher-mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.teacher-mini-grid article { padding: 22px; background: var(--white); border-left: 4px solid var(--gold); box-shadow: 0 10px 26px rgba(11,35,74,0.06); }
.avatar, .teacher-photo { display: grid; place-items: center; color: var(--white); background: var(--blue); font-weight: 800; }
.avatar { width: 48px; height: 48px; margin-bottom: 12px; }
.teacher-mini-grid h3 { margin: 0 0 4px; color: var(--blue); }
.teacher-mini-grid p { margin: 0; color: var(--subtext); }
.image-slot { position: relative; display: grid; min-height: 180px; place-items: center; overflow: hidden; border: 1px solid rgba(216,222,232,0.9); background-image: linear-gradient(135deg, rgba(11,35,74,0.78), rgba(35,107,102,0.54)), var(--slot-image), linear-gradient(135deg, #eef3f8, #fbf7ef); background-position: center; background-size: cover; background-repeat: no-repeat; color: var(--white); text-align: center; font-weight: 800; }
.image-slot::after { position: absolute; inset: 14px; border: 1px dashed rgba(255,255,255,0.58); content: ""; }
.image-slot span { position: relative; z-index: 1; max-width: 80%; padding: 8px 12px; background: rgba(11,35,74,0.58); }
.visual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.visual-grid .image-slot:first-child { grid-row: span 2; min-height: 376px; }
.service-list { display: grid; gap: 14px; }
.service-list article { padding: 18px 20px; background: var(--white); border-left: 4px solid var(--teal); }
.service-list h3 { margin: 0 0 6px; color: var(--blue); }
.service-list p { margin: 0; }
.result-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.result-list article { padding: 24px; background: var(--white); border-top: 4px solid var(--gold); box-shadow: 0 10px 26px rgba(11,35,74,0.06); }
.result-list span { color: var(--gold-dark); font-size: 28px; font-weight: 800; }
.result-list p { margin: 8px 0 0; color: var(--subtext); }
.news-list { display: grid; gap: 14px; }
.news-list a, .news-page-list article { display: grid; grid-template-columns: 120px 1fr 110px; gap: 20px; align-items: center; padding: 22px; background: var(--white); border: 1px solid var(--line); }
.news-list h3, .news-page-list h2 { margin: 0; color: var(--blue); font-size: 20px; line-height: 1.35; }
.news-list time, .news-page-list time { color: var(--subtext); }
.cta-band { padding: 44px 0; color: var(--white); background: linear-gradient(90deg, var(--blue), var(--teal)); }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cta-inner h2 { margin: 4px 0 0; font-size: 30px; }
.cta-inner p { margin: 6px 0 0; color: rgba(255,255,255,0.82); }
.page-hero { padding: 76px 0; color: var(--white); background-image: linear-gradient(90deg, rgba(11,35,74,0.95), rgba(11,35,74,0.76)), url("../images/placeholders/page-hero.jpg"), url("../images/hero/bayang-hero.png"); background-position: center; background-size: cover; }
.page-hero h1 { margin: 10px 0; font-size: 44px; line-height: 1.15; }
.page-hero p { max-width: 720px; margin: 0; color: rgba(255,255,255,0.88); }
.program-list { display: grid; gap: 20px; }
.program-row { display: grid; grid-template-columns: 84px 1fr 1.2fr auto; gap: 24px; align-items: center; padding: 28px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 10px 26px rgba(11,35,74,0.05); }
.program-index { color: var(--gold-dark); font-size: 34px; font-weight: 800; }
.program-row h2 { margin: 4px 0 8px; color: var(--blue); line-height: 1.25; }
.program-row ul { display: grid; gap: 5px; margin: 0; padding-left: 18px; color: var(--subtext); }
.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.path-grid span { display: grid; min-height: 64px; place-items: center; padding: 10px; color: var(--blue); background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--gold); font-weight: 800; text-align: center; }
.teacher-card { display: grid; grid-template-columns: 116px 1fr; gap: 24px; padding: 26px; }
.teacher-photo { width: 116px; height: 148px; font-size: 38px; border-bottom: 5px solid var(--gold); }
.teacher-card h2 { margin: 4px 0 10px; color: var(--blue); line-height: 1.3; }
.environment-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 22px; }
.env-card { overflow: hidden; }
.env-card.large { grid-row: span 2; }
.env-card.wide { grid-column: span 2; }
.env-card .image-slot { min-height: 220px; }
.env-card.large .image-slot { min-height: 440px; }
.env-card h2, .env-card p { margin-right: 22px; margin-left: 22px; }
.env-card h2 { color: var(--blue); }
.env-card p { margin-bottom: 22px; color: var(--subtext); }
.env-card .image-slot { display: block; min-height: 220px; margin: 0; border: 0; background: #0b234a; }
.env-card .image-slot::after { display: none; }
.env-card .image-slot img { width: 100%; height: 220px; object-fit: cover; transition: transform 0.55s ease, filter 0.55s ease; }
.env-card.large .image-slot img { height: 440px; }
.env-card.wide .image-slot img { height: 300px; }
.env-card:hover .image-slot img { transform: scale(1.045); filter: saturate(1.08) contrast(1.03); }
.environment-showcase { overflow: hidden; background: radial-gradient(circle at 12% 20%, rgba(200,155,60,0.22), transparent 30%), linear-gradient(135deg, #081a36 0%, #12355f 46%, #205f5b 100%); }
.env-marquee { position: relative; overflow: hidden; padding: 8px 0; }
.env-marquee::before, .env-marquee::after { position: absolute; top: 0; bottom: 0; z-index: 2; width: 120px; pointer-events: none; content: ""; }
.env-marquee::before { left: 0; background: linear-gradient(90deg, #081a36, rgba(8,26,54,0)); }
.env-marquee::after { right: 0; background: linear-gradient(270deg, #205f5b, rgba(32,95,91,0)); }
.env-marquee-track { display: flex; width: max-content; gap: 18px; animation: env-marquee 38s linear infinite; }
.env-marquee:hover .env-marquee-track { animation-play-state: paused; }
.env-gallery-card { flex: 0 0 360px; height: 240px; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; box-shadow: 0 22px 50px rgba(0,0,0,0.28); background: rgba(255,255,255,0.08); }
.env-gallery-card img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
@keyframes env-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - 9px)); }
}
.timeline-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.timeline-grid article { padding: 24px; background: var(--warm); border-left: 4px solid var(--teal); }
.timeline-grid span { color: var(--gold-dark); font-weight: 800; }
.timeline-grid h3 { margin: 8px 0; color: var(--blue); }
.timeline-grid p { margin: 0; color: var(--subtext); }
.news-page-list { display: grid; gap: 18px; }
.news-page-list article { grid-template-columns: 130px 1fr; }
.news-page-list p { margin: 8px 0 0; color: var(--subtext); }
.article-detail h1 { margin: 8px 0 22px; color: var(--blue); font-size: 34px; line-height: 1.3; }
.article-detail p { color: #344057; font-size: 18px; }
.article-meta { color: var(--gold-dark); font-weight: 800; }
.article-cta { margin-top: 24px; }
.contact-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 24px; }
.contact-info, .contact-form { padding: 28px; }
.contact-form { display: grid; align-content: start; gap: 18px; }
.contact-form h2 { margin: 0; color: var(--blue); }
.contact-form p { margin: 0; color: var(--subtext); }
.contact-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.consult-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.consult-fields span { padding: 12px 14px; color: var(--blue); background: var(--muted); border: 1px solid var(--line); font-weight: 800; }
.map-panel { grid-column: span 2; display: grid; min-height: 280px; place-items: center; color: var(--white); font-size: 24px; font-weight: 800; text-align: center; background-image: linear-gradient(135deg, rgba(11,35,74,0.86), rgba(35,107,102,0.62)), url("../images/placeholders/map.jpg"), linear-gradient(135deg, #eef3f8, #fbf7ef); background-position: center; background-size: cover; border: 1px solid var(--line); }
.notice-panel { text-align: center; }
.notice-panel h2 { margin: 8px 0 12px; color: var(--blue); }
@media (max-width: 980px) {
    .hero-content { grid-template-columns: 1fr; gap: 28px; }
    .hero-panel { max-width: 560px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid div:nth-child(2) { border-right: 0; }
    .program-row, .news-list a, .news-page-list article, .contact-grid, .result-list, .timeline-grid { grid-template-columns: 1fr; }
    .map-panel { grid-column: auto; }
    .program-row { align-items: start; }
}
@media (max-width: 700px) {
    .hero, .hero-content { min-height: auto; }
    .hero-content { padding: 64px 0 96px; }
    .hero-copy p { font-size: 17px; }
    .stats-grid, .teacher-mini-grid, .environment-grid, .visual-grid, .path-grid, .consult-fields { grid-template-columns: 1fr; }
    .stats-grid div { border-right: 0; border-bottom: 1px solid var(--line); }
    .stats-grid div:last-child { border-bottom: 0; }
    .visual-grid .image-slot:first-child, .env-card.large, .env-card.wide { grid-row: auto; grid-column: auto; }
    .visual-grid .image-slot:first-child, .env-card.large .image-slot { min-height: 220px; }
    .teacher-card { grid-template-columns: 1fr; }
    .cta-inner { align-items: stretch; flex-direction: column; }
    .page-hero h1 { font-size: 34px; }
}

@media (max-width: 700px) {
    .env-card .image-slot img, .env-card.large .image-slot img, .env-card.wide .image-slot img { height: 220px; }
    .environment-showcase { padding: 46px 0; }
    .env-marquee::before, .env-marquee::after { width: 54px; }
    .env-gallery-card { flex-basis: 260px; height: 176px; }
}