/* --- CSS VARIABLES & THEMES --- */
:root {
    --bg-body: #F2F2F7;
    --bg-card: #FFFFFF;
    --bg-header: rgba(28, 28, 30, 0.85);
    --text-header: #FFC107;
    --text-main: #1D1D1F;
    --text-muted: #86868B;
    --primary: #FFC107;
    --btn-text: #000000;
    --border-card: rgba(0, 0, 0, 0.05);
    --shadow-card: 0 4px 24px rgba(0,0,0,0.06);
    --radius-card: 20px;
    --glow-color: rgba(255, 193, 7, 0.85);
    --danger: #FF3B30;
    --success: #34C759;
}

[data-theme="dark"] {
    --bg-body: #000000;
    --bg-card: #1C1C1E;
    --bg-header: rgba(18, 18, 18, 0.85);
    --text-header: #FFC107;
    --text-main: #F5F5F7;
    --text-muted: #A1A1A6;
    --primary: #FFD60A;
    --btn-text: #000000;
    --border-card: rgba(255, 255, 255, 0.1);
    --shadow-card: 0 4px 24px rgba(0,0,0,0.4);
    --glow-color: rgba(255, 214, 10, 0.5);
}

[data-theme="ui"] {
    --bg-body: #191919;
    --bg-card: #242424;
    --bg-header: rgb(255, 230, 0);
    --text-header: #212121;
    --text-main: #ffd900;
    --text-muted: #A1A1A6;
    --primary: #FFC107;
    --btn-text: #000000; 
    --border-card: rgba(0, 0, 0, 0.08);
    --shadow-card: 0 4px 24px rgba(255, 193, 7, 0.15);
    --glow-color: rgba(255, 193, 7, 0.6);
}

[data-theme="ui"] .theme-btn-text {
    color: #000000 !important;
    border-color: rgba(0, 0, 0, 0.4) !important;
}

[data-theme="ui"] .theme-btn-text:hover {
    background-color: #000000 !important;
    color: #FFC107 !important;
    border-color: #000000 !important;
}

[data-theme="ui"] footer {
    color: #000000 !important;
}

[data-theme="itb"] {
    --bg-body: #F0F8FF;
    --bg-card: #FFFFFF;
    --bg-header: rgba(0, 50, 115, 0.95);
    --text-header: #FFFFFF;
    --text-main: #0D1B2A;
    --text-muted: #415A77;
    --primary: #0056b3;
    --btn-text: #FFFFFF;
    --border-card: rgba(0, 86, 179, 0.1);
    --shadow-card: 0 4px 24px rgba(0, 50, 160, 0.1);
    --glow-color: rgba(0, 86, 179, 0.6);
}

[data-theme="ugm"] {
    --bg-body: #F5F0E6;
    --bg-card: #FFFFFF;
    --bg-header: rgba(60, 50, 40, 0.95);
    --text-header: #FFC107;
    --text-main: #3E3E3E;
    --text-muted: #8D8D8D;
    --primary: #D4A373;
    --btn-text: #000000;
    --border-card: rgba(0, 0, 0, 0.06);
    --shadow-card: 0 4px 24px rgba(60, 50, 40, 0.1);
    --glow-color: rgba(212, 163, 115, 0.6);
}

/* --- RESET & GLOBAL --- */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { background-color: var(--bg-body); color: var(--text-main); line-height: 1.6; transition: background-color 0.4s ease, color 0.3s ease; overflow-x: hidden; }

/* --- HEADER & NAV --- */
nav {
    display: flex; justify-content: flex-end; align-items: center;
    padding: 1.2rem 5%; background-color: var(--bg-header);
    backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 3px solid var(--primary); position: sticky; top: 0; z-index: 100;
    box-shadow: 0 4px 30px rgba(0,0,0,0.2);
    transition: border-color 0.3s ease, background-color 0.4s ease;
}

.logo {
    position: absolute; left: 50%; transform: translateX(-50%);
    font-size: 2rem; font-weight: 900; color: var(--text-header);
    text-transform: uppercase; letter-spacing: 2px; text-decoration: none; cursor: pointer; text-shadow: none;
    transition: color 0.3s ease;
}

.nav-right { display: flex; gap: 20px; align-items: center; z-index: 102; }

/* THEME DROPDOWN */
.theme-dropdown { position: relative; display: inline-block; }
.theme-btn-text {
    background: transparent; border: 1px solid rgba(255,255,255,0.2); color: #fff;
    padding: 8px 16px; border-radius: 50px; font-weight: 700; font-size: 0.9rem; cursor: pointer;
    text-transform: uppercase; letter-spacing: 1px; transition: 0.3s;
}
.theme-btn-text:hover { background: var(--primary); color: #000; border-color: var(--primary); }
[data-theme="itb"] .theme-btn-text:hover { color: #fff; }

.dropdown-content {
    display: none; position: absolute; right: 0; top: 120%; background-color: var(--bg-card);
    min-width: 160px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); border-radius: 12px;
    padding: 8px; z-index: 101; border: 1px solid var(--border-card); flex-direction: column; gap: 5px;
    animation: slideDown 0.2s ease;
}
.dropdown-content.show { display: flex; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.theme-option {
    background: transparent; border: none; text-align: left; padding: 10px 15px; font-weight: 600;
    color: var(--text-main); border-radius: 8px; cursor: pointer; display: flex; align-items: center;
    gap: 10px; font-size: 0.85rem; transition: 0.2s;
}
.theme-option:hover { background: rgba(128,128,128,0.1); }
.theme-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); }

/* --- FOOTER --- */
footer {
    text-align: center; padding: 3rem; background-color: var(--bg-header);
    backdrop-filter: saturate(180%) blur(15px); -webkit-backdrop-filter: saturate(180%) blur(15px);
    color: #fff; margin-top: 5rem; font-size: 0.9rem; border-top: 3px solid var(--primary);
    transition: background-color 0.4s ease, border-color 0.3s ease;
}
.footer-contact { margin-bottom: 1.5rem; }
.contact-label { font-size: 0.8rem; font-weight: 700; opacity: 0.6; margin-bottom: 0.5rem; letter-spacing: 1px; text-transform: uppercase; }
.contact-links { display: flex; justify-content: center; align-items: center; gap: 10px; }
.f-link { color: inherit; text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: all 0.3s ease; position: relative; }
.f-link:hover { color: var(--primary); transform: translateY(-2px); }
.divider { opacity: 0.3; font-size: 0.8rem; }
.footer-line { width: 50px; height: 2px; background-color: var(--primary); margin: 0 auto 1.5rem; opacity: 0.5; border-radius: 2px; }

[data-theme="ui"] .f-link:hover {
    color: #ffffff; background-color: #000; padding: 2px 8px; border-radius: 4px;
}