/* ============================================================
   THEME.CSS — Day / Night Mode
   Override style.css hardcoded values via data-theme attribute
   ============================================================ */

/* ============================================================
   NAV WRAPPER — fixed row: navbar center + toggle right
   ============================================================ */
.nav-wrapper {
    position:        fixed;
    top:             20px;
    left:            50%;
    transform:       translateX(-50%);
    z-index:         1000;

    display:         flex;
    align-items:     center;
    gap:             12px;

    /* lebar cukup untuk navbar + gap + button */
    width:           fit-content;
    max-width:       92vw;
}

/* Navbar tetap style liquid glass seperti semula,
   tapi HAPUS position fixed karena sudah di wrapper */
.navbar-custom {
    position:  static !important;   /* override style.css */
    top:       unset  !important;
    left:      unset  !important;
    transform: none   !important;
    flex:      1;
    min-width: 0;
}

/* ── THEME TOGGLE BUTTON ── */
.theme-toggle {
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;

    width:           48px;
    height:          48px;
    border-radius:   999px;

    /* liquid glass — identik dengan navbar */
    background:      rgba(255,255,255,.18);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border:          1px solid rgba(255,255,255,.45);
    box-shadow:
        inset 0  1px 1px rgba(255,255,255,.90),
        inset 0 -1px 1px rgba(255,255,255,.15),
        0 20px 50px rgba(0,0,0,.08),
        0  0  40px rgba(255,255,255,.25);

    color:           #111827;
    font-size:       17px;
    cursor:          pointer;
    transition:      transform .2s ease, box-shadow .25s ease, background .3s ease, border-color .3s ease;
}

.theme-toggle:hover {
    transform:  translateY(-2px);
    background: rgba(255,255,255,.28);
    box-shadow:
        inset 0  1px 1px rgba(255,255,255,.90),
        0 25px 50px rgba(0,0,0,.12),
        0  0  40px rgba(255,255,255,.30);
}

/* ── Icon visibility ── */
.theme-icon { display: none; pointer-events: none; line-height: 1; }

[data-theme="light"] .theme-icon--moon { display: block; }
[data-theme="light"] .theme-icon--sun  { display: none;  }
[data-theme="dark"]  .theme-icon--sun  { display: block; }
[data-theme="dark"]  .theme-icon--moon { display: none;  }
html:not([data-theme]) .theme-icon--moon { display: block; }

[data-theme="dark"]  .theme-icon--moon { display: none;  }

/* Default (no attribute yet) — show moon */
html:not([data-theme]) .theme-icon--moon { display: block; }

/* ── TRANSITION semua elemen saat switch ── */
body, .glass-card, .navbar-custom, .education-card,
.badge-tag, .section-title, .section-subtitle, .section-label,
.about-description p, .exp-desc, .exp-company, .exp-date,
.modal-list li, .contact-value, .contact-label, .footer,
.skill-item, .cert-title, .cert-desc, .cert-id, .hero-text h1,
.hero-text h2, .hero-text p, .photo-badge, .btn-cv {
    transition:
        background       0.35s ease,
        background-color 0.35s ease,
        border-color     0.35s ease,
        color            0.35s ease,
        box-shadow       0.35s ease !important;
}

/* ============================================================
   LIGHT MODE (default — style.css sudah light)
   Tidak perlu override, biarkan style.css yang handle
   ============================================================ */
[data-theme="light"] body {
    background:
        radial-gradient(circle at 0% 0%,    rgba(96,165,250,.22),  transparent 35%),
        radial-gradient(circle at 100% 0%,   rgba(255,255,255,.25), transparent 25%),
        radial-gradient(circle at 100% 100%, rgba(59,130,246,.18),  transparent 35%),
        linear-gradient(135deg, #f8fafc 0%, #eef2ff 35%, #f8fafc 70%, #dbeafe 100%);
}

[data-theme="light"] .theme-toggle {
    background:      rgba(255,255,255,.18);
    border-color:    rgba(255,255,255,.45);
    color:           #111827;
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] body {
    background:
        radial-gradient(circle at 0% 0%,    rgba(99,102,241,.15),  transparent 40%),
        radial-gradient(circle at 100% 0%,   rgba(139,92,246,.10), transparent 30%),
        radial-gradient(circle at 100% 100%, rgba(59,130,246,.12),  transparent 40%),
        linear-gradient(135deg, #05050d 0%, #0a0a18 40%, #060610 70%, #0d0d1f 100%);
    color: #e8e8f0;
}

/* Body glow overlays */
[data-theme="dark"] body::before {
    background: radial-gradient(circle, rgba(99,102,241,.12), transparent 70%);
}
[data-theme="dark"] body::after {
    background: radial-gradient(circle, rgba(139,92,246,.10), transparent 70%);
}

/* ── Navbar dark ── */
[data-theme="dark"] .navbar-custom {
    background:      rgba(15,15,25,.70) !important;
    border-color:    rgba(255,255,255,.10) !important;
    box-shadow:
        inset 0  1px 1px rgba(255,255,255,.07),
        inset 0 -1px 1px rgba(255,255,255,.03),
        0 20px 50px rgba(0,0,0,.40),
        0  0  40px rgba(99,102,241,.08) !important;
}

[data-theme="dark"] .nav-links a {
    color: rgba(220,220,235,.75);
}

[data-theme="dark"] .nav-links a:hover {
    color: #fff;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border-color: rgba(255,255,255,.12);
    box-shadow:
        inset 0  1px 1px rgba(255,255,255,.12),
        0 8px 20px rgba(0,0,0,.30);
}

[data-theme="dark"] .nav-links a.active {
    color: #fff;
    background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.06));
    border-color: rgba(255,255,255,.18);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.15),
        0 10px 25px rgba(0,0,0,.30);
}

/* ── Theme toggle dark ── */
[data-theme="dark"] .theme-toggle {
    background:   rgba(15,15,25,.70);
    border-color: rgba(255,255,255,.10);
    color:        #e8e8f0;
    box-shadow:
        inset 0  1px 1px rgba(255,255,255,.07),
        0 20px 50px rgba(0,0,0,.40);
}

[data-theme="dark"] .theme-toggle:hover {
    background:   rgba(25,25,40,.80);
    border-color: rgba(255,255,255,.18);
}

/* ── Glass cards dark ── */
[data-theme="dark"] .glass-card {
    background:      rgba(255,255,255,.05) !important;
    border-color:    rgba(255,255,255,.10) !important;
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.07),
        0 8px 32px rgba(0,0,0,.35) !important;
}

[data-theme="dark"] .glass-card:hover {
    background:      rgba(255,255,255,.08) !important;
    border-color:    rgba(99,102,241,.30) !important;
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.10),
        0 16px 40px rgba(0,0,0,.45) !important;
}

/* ── Hero text dark ── */
[data-theme="dark"] .hero-text h1 { color: #f0f0f8; }
[data-theme="dark"] .hero-text h2 { color: #c8c8d8; }
[data-theme="dark"] .hero-text p  { color: rgba(200,200,220,.70); }
[data-theme="dark"] .cursor        { color: #818cf8; }

/* ── Section text dark ── */
[data-theme="dark"] .section-title    { color: #f0f0f8; }
[data-theme="dark"] .section-subtitle { color: rgba(200,200,220,.65); }
[data-theme="dark"] .section-label    { color: #818cf8; }

/* ── Experience & general text dark ── */
[data-theme="dark"] .glass-card h3     { color: #f0f0f8; }
[data-theme="dark"] .exp-company       { color: rgba(200,200,220,.60); }
[data-theme="dark"] .exp-desc          { color: rgba(200,200,220,.70); }
[data-theme="dark"] .exp-date          { color: rgba(200,200,220,.45); }
[data-theme="dark"] .modal-list li     { color: rgba(200,200,220,.70); }

/* ── Badge tag dark ── */
[data-theme="dark"] .badge-tag {
    background:   rgba(99,102,241,.15);
    color:        #a5b4fc;
    border-color: rgba(99,102,241,.25);
}

/* ── Education cards dark ── */
[data-theme="dark"] .education-card {
    background:
        rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.10) !important;
    box-shadow:
        inset 0  1px 1px rgba(255,255,255,.07),
        0 15px 40px rgba(0,0,0,.35) !important;
}

[data-theme="dark"] .education-card::before {
    background: linear-gradient(180deg, rgba(255,255,255,.07), transparent);
}

[data-theme="dark"] .education-card h3   { color: #f0f0f8; }
[data-theme="dark"] .education-card span { color: #818cf8; }
[data-theme="dark"] .education-card p    { color: rgba(200,200,220,.55); }

/* ── About photo & description dark ── */
[data-theme="dark"] .about-photo {
    background:   rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.10);
    box-shadow:   0 15px 40px rgba(0,0,0,.35);
}

[data-theme="dark"] .photo-badge {
    background: rgba(255,255,255,.12);
    color:      #e8e8f0;
}

[data-theme="dark"] .about-description p { color: rgba(200,200,220,.70); }

/* ── CV button dark ── */
[data-theme="dark"] .btn-cv {
    background:   rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.15);
    color:        #e8e8f0;
    box-shadow:   0 10px 25px rgba(0,0,0,.25);
}

[data-theme="dark"] .btn-cv:hover {
    background:   rgba(255,255,255,.13);
    color:        #fff;
}

[data-theme="dark"] .btn-cv i { color: #818cf8; }

/* ── CV Dropdown dark ── */
[data-theme="dark"] .cv-dropdown-menu {
    background:   rgba(15,15,25,.85);
    border-color: rgba(255,255,255,.10);
    box-shadow:   0 8px 24px rgba(0,0,0,.50);
}

[data-theme="dark"] .cv-dropdown-item       { color: #e8e8f0; }
[data-theme="dark"] .cv-dropdown-item:hover { background: rgba(255,255,255,.08); }

/* ── Certification page dark ── */
[data-theme="dark"] .cert-title  { color: #f0f0f8; }
[data-theme="dark"] .cert-desc   { color: rgba(200,200,220,.65); }
[data-theme="dark"] .cert-id     { color: rgba(200,200,220,.40); }
[data-theme="dark"] .cert-skills-title { color: #f0f0f8; }

[data-theme="dark"] .cert-view-btn {
    background:   rgba(129,140,248,.10);
    border-color: rgba(129,140,248,.25);
    color:        #a5b4fc;
}

[data-theme="dark"] .cert-view-btn:hover {
    background:   rgba(129,140,248,.20);
    border-color: rgba(129,140,248,.45);
}

[data-theme="dark"] .cert-verify { color: #818cf8; }
[data-theme="dark"] .cert-verify:hover { color: #a5b4fc; }

[data-theme="dark"] .skill-item {
    background:   rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color:        rgba(220,220,235,.80);
}

[data-theme="dark"] .skill-item i { color: #818cf8; }

[data-theme="dark"] .skill-item:hover {
    background:   rgba(99,102,241,.12);
    border-color: rgba(99,102,241,.25);
}

/* ── Cert icon dark ── */
[data-theme="dark"] .cert-icon--microsoft { background: rgba(0,120,212,.15);  color: #60a5fa; }
[data-theme="dark"] .cert-icon--certnexus  { background: rgba(99,102,241,.15); color: #a5b4fc; }
[data-theme="dark"] .cert-icon--coursera   { background: rgba(139,92,246,.15); color: #c4b5fd; }
[data-theme="dark"] .cert-icon--google     { background: rgba(234,67,53,.12);  color: #fca5a5; }
[data-theme="dark"] .cert-icon--gns3       { background: rgba(0,188,212,.12);  color: #67e8f9; }

/* ── Cert modal dark ── */
[data-theme="dark"] .cert-modal-box {
    background:   rgba(15,15,25,.92);
    border-color: rgba(255,255,255,.10);
}

[data-theme="dark"] .cert-modal-header h4 { color: #f0f0f8; }
[data-theme="dark"] .cert-modal-header    { border-bottom-color: rgba(255,255,255,.08); }
[data-theme="dark"] .cert-modal-footer    { border-top-color:    rgba(255,255,255,.08); }

[data-theme="dark"] .cert-modal-close {
    background: rgba(255,255,255,.08);
    color:      #e8e8f0;
}

[data-theme="dark"] .cert-modal-close:hover {
    background: rgba(255,255,255,.14);
}

/* ── Contact page dark ── */
[data-theme="dark"] .contact-label  { color: rgba(200,200,220,.45); }
[data-theme="dark"] .contact-value  { color: #f0f0f8; }
[data-theme="dark"] .contact-action { color: #818cf8; }
[data-theme="dark"] .contact-cta p  { color: rgba(200,200,220,.60); }

[data-theme="dark"] .contact-icon--github { color: #d1d5db; background: rgba(255,255,255,.08); }

/* ── Footer dark ── */
[data-theme="dark"] .footer {
    border-top-color: rgba(255,255,255,.06);
    color:            rgba(200,200,220,.45);
}

/* ── Scrollbar dark ── */
[data-theme="dark"] ::-webkit-scrollbar-track { background: #08080f; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(99,102,241,.40); border-radius: 4px; }

/* ── Profile card home dark ── */
[data-theme="dark"] .profile-card {
    background:   rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    box-shadow:   0 15px 40px rgba(0,0,0,.40);
}

/* ── Buttons dark ── */
[data-theme="dark"] .btn-primary-custom {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff;
}

[data-theme="dark"] .btn-primary-custom:hover {
    box-shadow: 0 10px 25px rgba(99,102,241,.35);
}


/* ── Responsive nav-wrapper ── */
@media (max-width: 768px) {
    .nav-wrapper {
        top:     12px;
        gap:     8px;
        max-width: 96vw;
    }

    .theme-toggle {
        width:  40px;
        height: 40px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .theme-toggle {
        width:  36px;
        height: 36px;
        font-size: 13px;
    }
}