:root {
    --primary-dark: #081f4d;
    --primary-medium: #123b8e;
    --primary-light: #4ea1ff;
    --accent-soft: #d9e8ff;
    --accent: #79b3ff;
    --bg-soft: #f4f8ff;
    --surface: #ffffff;
    --text-dark: #10213d;
    --text-muted: #66738f;
    --border-soft: rgba(11, 41, 97, 0.08);
    --shadow-soft: 0 20px 45px rgba(9, 33, 79, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
    color: var(--text-dark);
}

a { text-decoration: none; }
img { max-width: 100%; }

.navbar-modern {
    background: rgba(6, 24, 61, 0.84);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(121,179,255,.25));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}

.brand-small { font-size: .62rem; letter-spacing: .18em; }

.navbar-modern .nav-link {
    color: rgba(255,255,255,.84);
    font-weight: 500;
    padding: .72rem 1rem;
    border-radius: 999px;
    transition: .25s ease;
}
.navbar-modern .nav-link:hover,
.navbar-modern .nav-link.active {
    color: #fff;
    background: rgba(255,255,255,.08);
}

.hero-section {
    position: relative;
    overflow: hidden;
    padding: 120px 0 90px;
    background:
      radial-gradient(circle at top right, rgba(121,179,255,.35), transparent 20%),
      radial-gradient(circle at left center, rgba(78,161,255,.16), transparent 18%),
      linear-gradient(135deg, rgba(8,31,77,.95), rgba(18,59,142,.9));
    color: #fff;
}
.hero-section::before,
.hero-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(4px);
}
.hero-section::before {
    width: 240px; height: 240px; right: -60px; top: 80px;
    background: rgba(255,255,255,.06);
}
.hero-section::after {
    width: 360px; height: 360px; left: -120px; bottom: -120px;
    background: rgba(78,161,255,.08);
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem 1rem;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.12);
    font-size: .95rem;
    margin-bottom: 1rem;
}

.hero-title {
    font-size: clamp(2.3rem, 5vw, 4.6rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.04em;
}
.hero-lead {
    font-size: 1.08rem;
    color: rgba(255,255,255,.78);
    max-width: 640px;
}

.hero-showcase {
    position: relative;
    padding: 1.15rem;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(12px);
    box-shadow: 0 25px 50px rgba(3, 15, 40, .22);
}

.hero-showcase .floating-card,
.card-custom,
.glass-card,
.dashboard-panel,
.contact-card {
    border-radius: 26px;
    border: 1px solid var(--border-soft);
    background: rgba(255,255,255,.88);
    box-shadow: var(--shadow-soft);
}

.floating-card {
    padding: 1.1rem;
    animation: floatY 4s ease-in-out infinite;
}
.floating-card.delay { animation-delay: 1.2s; }
@keyframes floatY {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.hero-grid-stat {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 1.5rem;
}
.hero-stat {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 22px;
    padding: 1rem;
}
.hero-stat h3 { font-size: 1.5rem; margin-bottom: .2rem; }
.hero-stat p { font-size: .92rem; margin-bottom: 0; color: rgba(255,255,255,.72); }

.section-space { padding: 92px 0; }
.section-title {
    color: var(--primary-dark);
    font-weight: 800;
    font-size: clamp(1.8rem, 3.2vw, 2.8rem);
    letter-spacing: -.03em;
    margin-bottom: .9rem;
}
.section-subtitle { color: var(--text-muted); max-width: 680px; }

.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: linear-gradient(135deg, var(--accent-soft), #fff);
    color: var(--primary-dark);
    font-weight: 700;
    border: 1px solid rgba(18,59,142,.08);
}

.card-custom {
    transition: transform .28s ease, box-shadow .28s ease;
    overflow: hidden;
}
.card-custom:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(9, 33, 79, 0.12);
}

.icon-box {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-dark);
    background: linear-gradient(135deg, var(--accent-soft), #fff);
}

.info-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .68rem 1rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border-soft);
    color: var(--primary-dark);
    box-shadow: 0 10px 24px rgba(9, 33, 79, 0.05);
}

.btn-primary-custom {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-medium));
    border: none;
    color: #fff;
    padding: .9rem 1.4rem;
    border-radius: 999px;
    box-shadow: 0 15px 30px rgba(18,59,142,.22);
}
.btn-primary-custom:hover { color: #fff; transform: translateY(-1px); }

.page-header {
    position: relative;
    overflow: hidden;
    padding: 92px 0 52px;
    background:
      radial-gradient(circle at top left, rgba(121,179,255,.22), transparent 22%),
      linear-gradient(135deg, var(--primary-dark), var(--primary-medium));
    color: #fff;
}
.page-header p { color: rgba(255,255,255,.8); max-width: 680px; }

.kajur-photo {
    width: 100%;
    max-width: 460px;
    height: 500px;
    object-fit: cover;
    border-radius: 32px;
    box-shadow: 0 30px 70px rgba(4, 18, 44, .22);
}
.quote-mark { color: var(--primary-light); font-size: 3rem; }
.gallery-img {
    width: 100%;
    height: 245px;
    object-fit: cover;
}
.teacher-photo {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    object-fit: cover;
}
.facility-hero {
    min-height: 100%;
    background: linear-gradient(135deg, rgba(8,31,77,.96), rgba(18,59,142,.9));
    color: #fff;
}

.metric-card h3,
.dashboard-stat h3 {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: .25rem;
}
.metric-card p,
.dashboard-stat p { color: var(--text-muted); margin-bottom: 0; }

.footer-section {
    background: linear-gradient(135deg, #05142f, #0b255d);
}
.footer-links a { color: rgba(255,255,255,.68); }
.footer-links a:hover { color: #fff; }

.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: radial-gradient(circle at top left, rgba(121,179,255,.2), transparent 20%), linear-gradient(135deg, #eef4ff, #dfeaff);
}
.form-control, .form-select, textarea {
    border-radius: 16px;
    border-color: rgba(10, 37, 89, .12);
    min-height: 48px;
}
textarea.form-control { min-height: 120px; }
.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 .2rem rgba(18,59,142,.12);
    border-color: rgba(18,59,142,.25);
}

.table-admin th {
    background: var(--primary-dark);
    color: #fff;
    white-space: nowrap;
}
.dashboard-panel { padding: 1.4rem; }
.dashboard-sidebar { position: sticky; top: 92px; }
.dashboard-menu .list-group-item {
    border: none;
    border-radius: 16px;
    margin-bottom: .45rem;
    color: var(--text-dark);
}
.dashboard-menu .list-group-item.active {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-medium));
}
.inline-thumb {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    object-fit: cover;
}

.reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s ease, transform .7s ease;
}
.reveal-up.show {
    opacity: 1;
    transform: translateY(0);
}

.timeline-card {
    position: relative;
    padding-left: 1.2rem;
}
.timeline-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: .45rem;
    bottom: .45rem;
    width: 3px;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--primary-medium), var(--primary-light));
}

@media (max-width: 991.98px) {
    .hero-section { padding-top: 96px; }
    .hero-grid-stat { grid-template-columns: 1fr; }
    .section-space { padding: 72px 0; }
    .dashboard-sidebar { position: static; }
}

@media (max-width: 767.98px) {
    .hero-title { font-size: 2.35rem; }
    .hero-showcase { margin-top: 1rem; }
    .gallery-img { height: 220px; }
    .kajur-photo { height: 360px; }
}

/* Dynamic premium banner slider */
.hero-slider-section {
    padding: 0;
    min-height: 680px;
}
.hero-slider-section .carousel,
.hero-slider-section .carousel-inner,
.hero-slider-section .carousel-item {
    min-height: 680px;
}
.min-vh-hero {
    min-height: 680px;
    padding: 132px 0 96px;
}
.hero-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.03);
}
.carousel-item.active .hero-slide-bg {
    animation: slowZoom 8s ease-out forwards;
}
@keyframes slowZoom {
    from { transform: scale(1.08); }
    to { transform: scale(1.01); }
}
.hero-slider-section .carousel-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(78,161,255,.22), transparent 32%), linear-gradient(90deg, rgba(5,18,48,.82), rgba(5,18,48,.08));
    pointer-events: none;
}
.hero-slider-section .container { z-index: 2; }
.hero-indicators { justify-content: flex-start; margin-left: calc((100vw - min(1140px, 92vw))/2); margin-bottom: 2rem; }
.hero-indicators [data-bs-target] { width: 42px; height: 5px; border-radius: 999px; border: 0; }
.hero-control { width: 56px; height: 56px; top: auto; bottom: 32px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); opacity: 1; }
.hero-control.carousel-control-prev { left: auto; right: 104px; }
.hero-control.carousel-control-next { right: 32px; }
.hero-grid-stat-slider { max-width: 620px; }
@media (max-width: 768px) {
    .hero-slider-section, .hero-slider-section .carousel, .hero-slider-section .carousel-inner, .hero-slider-section .carousel-item { min-height: 620px; }
    .min-vh-hero { min-height: 620px; padding: 112px 0 78px; }
    .hero-control { display: none; }
    .hero-indicators { margin-left: 1rem; }
}

.page-hero {
    position: relative;
    overflow: hidden;
    padding: 110px 0 90px;
    color: #fff;
    background: radial-gradient(circle at top left, rgba(65, 118, 255, .45), transparent 34%), linear-gradient(135deg, #071832 0%, #0b2a5b 55%, #123f8c 100%);
}
.page-hero::after {
    content: "";
    position: absolute;
    inset: auto -120px -160px auto;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 {
    max-width: 900px;
    font-size: clamp(2.2rem, 5vw, 4.8rem);
    line-height: .98;
    font-weight: 900;
    letter-spacing: -.05em;
}
.page-hero p {
    max-width: 760px;
    color: rgba(255,255,255,.78);
    font-size: 1.08rem;
}
.news-card {
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.news-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 70px rgba(7, 24, 50, .14);
}
.article-hero-img { max-height: 520px; object-fit: cover; }
.article-content {
    font-size: 1.05rem;
    line-height: 1.9;
    color: #475569;
}
@media (max-width: 768px) {
    .page-hero { padding: 86px 0 68px; }
}

/* =========================================================
   FINAL OCEAN BLUE THEME - FRONTEND + ADMIN
   Dominan warna biru laut untuk MPLB premium
   ========================================================= */
:root {
    --primary-dark: #003B5C;
    --primary-medium: #005B8F;
    --primary-light: #00A6D6;
    --accent-soft: #D9F3FF;
    --accent: #27C3F3;
    --ocean-deep: #002B45;
    --ocean-navy: #001D33;
    --ocean-cyan: #2DD4FF;
    --bg-soft: #EEF9FF;
    --surface: #ffffff;
    --text-dark: #07324A;
    --text-muted: #5F7484;
    --border-soft: rgba(0, 91, 143, 0.12);
    --shadow-soft: 0 22px 54px rgba(0, 59, 92, 0.12);
}

body {
    background:
      radial-gradient(circle at 8% 0%, rgba(45, 212, 255, .18), transparent 32%),
      linear-gradient(180deg, #F7FDFF 0%, #EAF8FF 100%);
}

.navbar-modern {
    background: rgba(0, 43, 69, 0.92) !important;
    box-shadow: 0 14px 40px rgba(0, 29, 51, .18);
}

.brand-mark,
.icon-box {
    background: linear-gradient(135deg, rgba(45,212,255,.24), rgba(255,255,255,.96));
    color: var(--primary-dark);
}

.navbar-modern .nav-link:hover,
.navbar-modern .nav-link.active {
    background: rgba(45, 212, 255, .16);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.hero-section,
.page-header,
.facility-hero,
.page-hero {
    background:
      radial-gradient(circle at top right, rgba(45,212,255,.32), transparent 26%),
      radial-gradient(circle at left center, rgba(0,166,214,.18), transparent 22%),
      linear-gradient(135deg, #001D33 0%, #003B5C 52%, #0077A8 100%) !important;
}

.hero-slider-section .carousel-item::after {
    background:
      radial-gradient(circle at 18% 28%, rgba(45,212,255,.26), transparent 34%),
      linear-gradient(90deg, rgba(0, 29, 51, .90), rgba(0, 59, 92, .34), rgba(0, 59, 92, .06));
}

.hero-tag,
.hero-stat,
.hero-showcase {
    border-color: rgba(217, 243, 255, .18);
    background: rgba(217, 243, 255, .09);
}

.badge-soft,
.info-chip {
    background: linear-gradient(135deg, #E5FAFF, #FFFFFF);
    color: var(--primary-dark);
    border-color: rgba(0, 166, 214, .16);
}

.card-custom,
.glass-card,
.dashboard-panel,
.contact-card {
    background: rgba(255,255,255,.93);
    border-color: rgba(0, 91, 143, .10);
    box-shadow: 0 20px 52px rgba(0, 59, 92, .10);
}

.card-custom:hover,
.news-card:hover {
    box-shadow: 0 26px 76px rgba(0, 91, 143, .18);
}

.btn-primary-custom,
.dashboard-menu .list-group-item.active {
    background: linear-gradient(135deg, #003B5C 0%, #0077A8 70%, #00A6D6 100%) !important;
    color: #fff !important;
    border: none;
    box-shadow: 0 16px 34px rgba(0, 119, 168, .26);
}

.btn-primary-custom:hover {
    filter: brightness(1.06);
    box-shadow: 0 18px 42px rgba(0, 119, 168, .35);
}

.table-admin th {
    background: linear-gradient(135deg, #002B45, #005B8F) !important;
}

.footer-section {
    background: linear-gradient(135deg, #001D33 0%, #003B5C 62%, #005B8F 100%) !important;
}

.login-wrapper {
    background:
      radial-gradient(circle at top left, rgba(45,212,255,.24), transparent 24%),
      radial-gradient(circle at bottom right, rgba(0,91,143,.16), transparent 30%),
      linear-gradient(135deg, #F2FBFF, #DFF6FF) !important;
}

body.bg-light {
    background:
      radial-gradient(circle at top left, rgba(45,212,255,.15), transparent 24%),
      linear-gradient(180deg, #F5FCFF 0%, #EAF8FF 100%) !important;
}

.dashboard-stat {
    position: relative;
    overflow: hidden;
}
.dashboard-stat::after {
    content: '';
    position: absolute;
    right: -36px;
    bottom: -36px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(45, 212, 255, .14);
}

.dashboard-menu .list-group-item {
    transition: .22s ease;
}
.dashboard-menu .list-group-item:not(.active):hover {
    background: #E5FAFF;
    color: var(--primary-dark);
    transform: translateX(3px);
}

.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 .22rem rgba(0, 166, 214, .14);
    border-color: rgba(0, 166, 214, .38);
}

.timeline-card::before {
    background: linear-gradient(180deg, #00A6D6, #003B5C);
}

.hero-indicators [data-bs-target] {
    background-color: #2DD4FF;
}

.hero-control {
    background: rgba(0, 59, 92, .42);
    border-color: rgba(217, 243, 255, .28);
}

@media (max-width: 991.98px) {
    .navbar-modern .navbar-collapse {
        margin-top: .9rem;
        padding: .8rem;
        border-radius: 22px;
        background: rgba(0, 29, 51, .72);
    }
}