/* =============================================
   Public Layout (Portal Alumni)
   ============================================= */

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.hero-section {
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: rgba(255, 255, 255, 0.05);
    transform: rotate(-15deg);
    pointer-events: none;
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.85);
}

.navbar-brand i {
    vertical-align: middle;
}

.card {
    transition: transform .15s ease, box-shadow .15s ease;
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
}

.bg-primary.bg-opacity-10,
.bg-success.bg-opacity-10,
.bg-warning.bg-opacity-10,
.bg-danger.bg-opacity-10 {
    backdrop-filter: blur(4px);
}

@media (max-width: 768px) {
    .display-5 {
        font-size: 2rem;
    }
}

/* =============================================
   Rich-text content (berita & acara deskripsi)
   ============================================= */

.berita-content,
.acara-content {
    color: #2b2f33;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.berita-content > :first-child,
.acara-content > :first-child {
    margin-top: 0 !important;
}

.berita-content > :last-child,
.acara-content > :last-child {
    margin-bottom: 0 !important;
}

.berita-content p,
.acara-content p {
    margin-bottom: 1rem;
    line-height: 1.75;
}

.berita-content h1,
.berita-content h2,
.berita-content h3,
.berita-content h4,
.berita-content h5,
.berita-content h6,
.acara-content h1,
.acara-content h2,
.acara-content h3,
.acara-content h4,
.acara-content h5,
.acara-content h6 {
    margin-top: 1.75rem;
    margin-bottom: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
}

.berita-content h3,
.acara-content h3 {
    font-size: 1.35rem;
    color: #1a1d20;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--bs-primary-bg-subtle, #cfe2ff);
}

.berita-content h4,
.acara-content h4 {
    font-size: 1.15rem;
    color: #1a1d20;
}

.berita-content ul,
.berita-content ol,
.acara-content ul,
.acara-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.berita-content ul li,
.acara-content ul li {
    list-style-type: disc;
    margin-bottom: 0.35rem;
}

.berita-content ol li,
.acara-content ol li {
    list-style-type: decimal;
    margin-bottom: 0.35rem;
}

.berita-content li > ul,
.berita-content li > ol,
.acara-content li > ul,
.acara-content li > ol {
    margin-top: 0.35rem;
    margin-bottom: 0.35rem;
}

.berita-content a,
.acara-content a {
    color: var(--bs-primary, #0d6efd);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.berita-content a:hover,
.acara-content a:hover {
    color: var(--bs-primary-text-emphasis, #0a58ca);
    text-decoration-thickness: 2px;
}

.berita-content blockquote,
.acara-content blockquote {
    border-left: 4px solid var(--bs-primary, #0d6efd);
    background: var(--bs-primary-bg-subtle, #e7f1ff);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    border-radius: 0 0.375rem 0.375rem 0;
    font-style: italic;
    color: #2b2f33;
}

.berita-content blockquote p:last-child,
.acara-content blockquote p:last-child {
    margin-bottom: 0;
}

.berita-content strong,
.acara-content strong {
    font-weight: 700;
    color: #1a1d20;
}

.berita-content em,
.acara-content em {
    color: #495057;
}

.berita-content code,
.acara-content code {
    background: #f1f3f5;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
    color: #d63384;
}

.berita-content pre,
.acara-content pre {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.berita-content pre code,
.acara-content pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

.berita-content img,
.acara-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    margin: 0.5rem 0;
}

.berita-content table,
.acara-content table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.berita-content table th,
.berita-content table td,
.acara-content table th,
.acara-content table td {
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
}

.berita-content table th,
.acara-content table th {
    background: #f8f9fa;
    font-weight: 600;
}

/* =============================================
   Load Animations (Global)
   ============================================= */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-on-load {
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-1 { animation-delay: 0.05s; }
.delay-2 { animation-delay: 0.12s; }
.delay-3 { animation-delay: 0.20s; }
.delay-4 { animation-delay: 0.28s; }
.delay-5 { animation-delay: 0.36s; }
.delay-6 { animation-delay: 0.44s; }
.delay-7 { animation-delay: 0.52s; }
}