/* BLACK & WHITE THEME - Override untuk semua section (kecuali landing page) */

/* Buttons */
.btn {
    background: #000000;
    color: white;
    border: 2px solid #000000;
}

.btn:hover {
    background: #ffffff;
    color: #000000;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Work Section */
.work {
    /* background removed - show space background */
}

.work-item {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.work-item:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
}

.work-item h3 {
    color: #ffffff;
}

.work-period {
    color: #cccccc;
}

.work-item p:last-child {
    color: #e0e0e0;
}

.work-icon {
    /* Keep icons colored */
}

.section-title {
    color: #ffffff;
    font-weight: 900;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

/* About Me Section (New) */
.about-me {
    /* background removed - show space background */
    color: #ffffff;
}

.about-me .section-title {
    color: #ffffff;
}

.about-intro h3 {
    color: #ffffff;
}

.about-intro p {
    color: #e0e0e0;
}

.skills-section h3 {
    color: #ffffff;
}

.skill-item {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.skill-item:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
}

.skill-logo img {
    filter: none; /* Keep original colors */
}

.skill-item:hover .skill-logo img {
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4));
}

.skill-name {
    color: #ffffff;
    font-weight: 700;
}

/* What I Do Section - REMOVED */
/* About Section - REMOVED */

/* Selengkapnya Section with Video */
.selengkapnya {
    /* background removed - show space background */
}

.selengkapnya-subtitle {
    color: #ffffff;
}

.video-wrapper {
    box-shadow: 0 15px 60px rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.video-description {
    background: rgba(255, 255, 255, 0.1);
    border-left: 5px solid rgba(255, 255, 255, 0.5);
}

.video-description h3 {
    color: #ffffff;
}

.video-description p {
    color: #e0e0e0;
}

.video-highlights {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.video-highlights h4 {
    color: #ffffff;
}

.video-highlights li {
    color: #e0e0e0;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.additional-videos h4 {
    color: #ffffff;
}

.video-card {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.video-card:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
}

.video-card-title {
    color: #ffffff;
    background: transparent;
}

/* Awards Section */
.awards {
    /* background removed - show space background */
    color: #ffffff;
}

.award-card {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.award-card:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
}

.award-image {
    background: linear-gradient(135deg, #333333 0%, #000000 100%);
}

.award-image img {
    filter: none;
}

.award-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.award-info {
    background: transparent;
}

.award-year {
    color: #ffffff;
}

.award-info h3 {
    color: #ffffff;
}

.award-issuer {
    color: #cccccc;
}

.award-info p {
    color: #e0e0e0;
}

/* Training Section */
.training {
    /* background removed - show space background */
    color: #ffffff;
}

.training-card {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.training-card::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.3) 100%);
}

.training-card:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
}

.training-card h3 {
    color: #ffffff;
}

.training-provider {
    color: #cccccc;
}

.training-year {
    color: #e0e0e0;
}

.training-badge {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.training-icon {
    /* Keep icons colored */
}

/* Projects Section */
.projects {
    /* background removed - show space background */
}

.project-card {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.project-card:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
}

.project-image {
    background: #e5e7eb;
}

.placeholder-image {
    background: linear-gradient(135deg, #333333 0%, #000000 100%);
    color: #ffffff;
}

.project-info h3 {
    color: #ffffff;
}

.project-info p {
    color: #e0e0e0;
}

.project-link {
    color: #ffffff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}

.project-link:hover {
    color: #cccccc;
}

/* Contact Section */
.contact {
    /* background removed - show space background */
    color: #ffffff;
}

.contact-form input,
.contact-form textarea {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.contact-form input:focus,
.contact-form textarea:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
}

.contact-item h3 {
    color: #ffffff;
}

.contact-item p {
    color: #e0e0e0;
}

/* Footer */
footer {
    /* Keep dark background for footer */
    background: rgba(0, 0, 0, 0.9);
    border-top: 2px solid #333333;
}

.social-links a {
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
}

.social-links a:hover {
    color: #cccccc;
    border-bottom-color: #ffffff;
}


/* CV Download Buttons - Ensure Visibility */
.cv-download-section {
    display: flex !important;
    gap: 15px;
    margin-top: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-download-cv,
.btn-view-cv {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

.btn-download-cv:hover,
.btn-view-cv:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}