/* ============================================
   STYLE.CSS - PERUBAHAN UNTUK DARK MODE
   ============================================ */

/* ============================================
   1. TAMBAHKAN CSS VARIABLES BARU
   ============================================ */
:root {
   --primary-color: #052C49;
   --primary1-color: #51585f;
   --primary2-color: #68ABDB;
   --secondary-color: #ffffff;
   --secondary1-color: #DC6D35;
   --secondary2-color: #74A953;
   --secondary3-color: #C74332;
   --accent-color: #0a4168;
   --light-bg: #f8f9fa;

   /* ⬇️ TAMBAHKAN VARIABLES BARU UNTUK DARK MODE ⬇️ */
   --text-color: #333333;
   --text-muted: #6c757d;
   --card-bg: #ffffff;
   --border-color: #dee2e6;
   --shadow-color: rgba(0, 0, 0, 0.08);
   --body-bg: #ffffff;
}

/* ============================================
   2. TAMBAHKAN VARIABLES DARK MODE
   ============================================ */
.dark-mode,
[data-theme="dark"] {
   --primary-color: #e8eef5;
   --primary1-color: #2a2d32;
   --primary2-color: #4a9fd4;
   --secondary-color: #1a1d23;
   --secondary1-color: #e87d4d;
   --secondary2-color: #84b963;
   --secondary3-color: #d65342;
   --accent-color: #c5dae8;
   --light-bg: #1a1d23;
   
   /* Variables baru untuk dark mode */
   --text-color: #e8eef5;
   --text-muted: #9ca3af;
   --card-bg: #252a33;
   --border-color: #3a3f4a;
   --shadow-color: rgba(0, 0, 0, 0.4);
   --body-bg: #12151a;
}

/* ============================================
   3. UBAH body - TAMBAHKAN TRANSITION
   ============================================ */
body {
   font-family: 'Poppins', sans-serif;
   color: var(--text-color);           /* ⬅️ UBAH dari #333 */
   background-color: var(--body-bg);   /* ⬅️ TAMBAHKAN */
   transition: background-color 0.3s ease, color 0.3s ease;  /* ⬅️ TAMBAHKAN */
}

/* ============================================
   4. UBAH Navbar - TAMBAHKAN DARK MODE STYLE
   ============================================ */
.navbar {
   background-color: var(--primary-color) !important;
   padding: 1rem 0;
   transition: all 0.3s ease;          /* ⬅️ SUDAH ADA */
}

/* ⬇️ TAMBAHKAN DARK MODE UNTUK NAVBAR ⬇️ */
.dark-mode .navbar,
[data-theme="dark"] .navbar {
   background-color: #1a1d23 !important;
   border-bottom: 1px solid var(--border-color);
}

.dark-mode .navbar-brand,
[data-theme="dark"] .navbar-brand {
   color: var(--primary-color) !important;
}

.dark-mode .navbar-nav .nav-link,
[data-theme="dark"] .navbar-nav .nav-link {
   color: rgba(232, 238, 245, 0.85) !important;
}

.dark-mode .navbar-nav .nav-link:hover,
[data-theme="dark"] .navbar-nav .nav-link:hover {
   color: var(--primary-color) !important;
}

.dark-mode .navbar .btn-quote,
[data-theme="dark"] .navbar .btn-quote {
   background-color: var(--secondary3-color);
   color: #fff !important;
}

/* ============================================
   5. UBAH Section Title - TAMBAHKAN DARK MODE
   ============================================ */
.section-title {
   font-weight: 700;
   color: var(--primary-color);        /* ⬅️ SUDAH PAKAI VARIABLE */
   position: relative;
   padding-bottom: 15px;
   margin-bottom: 50px;
}

.section-title::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 80px;
   height: 4px;
   background-color: var(--primary-color);  /* ⬅️ SUDAH PAKAI VARIABLE */
}

/* ⬇️ DARK MODE SUDAH OTOMATIS MENGIKUTI VARIABLE ⬇️ */
/* Tidak perlu tambahan, karena sudah pakai var(--primary-color) */

/* ============================================
   6. UBAH Project Card - TAMBAHKAN DARK MODE
   ============================================ */
.project-card {
   border: none;
   border-radius: 10px;
   box-shadow: 0 4px 15px var(--shadow-color);  /* ⬅️ UBAH ke variable */
   overflow: hidden;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   background-color: var(--card-bg);    /* ⬅️ TAMBAHKAN */
}

.project-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 25px var(--shadow-color);  /* ⬅️ UBAH ke variable */
}

/* ⬇️ TAMBAHKAN DARK MODE UNTUK PROJECT CARD ⬇️ */
.dark-mode .project-card .card-title,
[data-theme="dark"] .project-card .card-title {
   color: var(--secondary1-color);
}

.dark-mode .project-card .card-body p,
[data-theme="dark"] .project-card .card-body p {
   color: var(--text-color);
}

.dark-mode .project-card .text-muted,
[data-theme="dark"] .project-card .text-muted {
   color: var(--text-muted) !important;
}

/* ============================================
   7. UBAH Service Card - TAMBAHKAN DARK MODE
   ============================================ */
.service-card {
   border: none;
   border-radius: 10px;
   box-shadow: 0 4px 15px var(--shadow-color);  /* ⬅️ UBAH ke variable */
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   height: 100%;
   overflow: hidden;
   background-color: var(--card-bg);    /* ⬅️ TAMBAHKAN */
}

/* ⬇️ TAMBAHKAN DARK MODE UNTUK SERVICE CARD ⬇️ */
.dark-mode .service-card .card-title,
[data-theme="dark"] .service-card .card-title {
   color: var(--primary-color);
}

.dark-mode .service-card .card-text,
[data-theme="dark"] .service-card .card-text {
   color: var(--text-muted);
}

/* ============================================
   8. UBAH Testimonial Card - TAMBAHKAN DARK MODE
   ============================================ */
.testimonial-card {
   border: none;
   border-radius: 10px;
   box-shadow: 0 5px 20px var(--shadow-color);  /* ⬅️ UBAH ke variable */
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   height: 100%;
   background-color: var(--card-bg);    /* ⬅️ TAMBAHKAN */
}

/* ⬇️ TAMBAHKAN DARK MODE UNTUK TESTIMONIAL ⬇️ */
.dark-mode .testimonial-card .card-text,
[data-theme="dark"] .testimonial-card .card-text {
   color: var(--text-muted);
}

.dark-mode .testimonial-footer,
[data-theme="dark"] .testimonial-footer {
   border-top-color: var(--border-color);
}

/* ============================================
   9. UBAH Clients Section - DARK MODE
   ============================================ */
.client-logo {
   filter: grayscale(100%);
   opacity: 0.7;
   transition: all 0.3s ease;
   max-height: 60px;
   margin: 20px;
}

/* ⬇️ TAMBAHKAN DARK MODE UNTUK CLIENT LOGO ⬇️ */
.dark-mode .client-logo,
[data-theme="dark"] .client-logo {
   filter: grayscale(100%) brightness(0.8);
   opacity: 0.6;
}

.dark-mode .client-logo:hover,
[data-theme="dark"] .client-logo:hover {
   filter: grayscale(0%) brightness(1);
   opacity: 1;
}

/* ============================================
   10. UBAH CTA Section - DARK MODE
   ============================================ */
.cta-section {
   background-color: var(--primary1-color);
   color: var(--secondary-color);
}

/* ⬇️ TAMBAHKAN DARK MODE UNTUK CTA ⬇️ */
.dark-mode .cta-section,
[data-theme="dark"] .cta-section {
   background-color: #1a1d23;
}

/* ============================================
   11. UBAH Footer - TAMBAHKAN DARK MODE
   ============================================ */
footer {
   background-color: var(--primary-color);
   color: var(--secondary-color);
   padding: 40px 0 20px 0;
}

/* ⬇️ TAMBAHKAN DARK MODE UNTUK FOOTER ⬇️ */
.dark-mode footer,
[data-theme="dark"] footer {
   background-color: #12151a;
   border-top: 1px solid var(--border-color);
}

.dark-mode footer h5,
[data-theme="dark"] footer h5 {
   color: var(--primary-color);
}

.dark-mode footer p,
[data-theme="dark"] footer p {
   color: rgba(232, 238, 245, 0.8);
}

.dark-mode .footer-bottom,
[data-theme="dark"] .footer-bottom {
   border-top-color: var(--border-color);
}

.dark-mode .footer-bottom p,
[data-theme="dark"] .footer-bottom p {
   color: rgba(232, 238, 245, 0.7);
}

/* ============================================
   12. TAMBAHKAN UNTUK ELEMEN LAINNYA
   ============================================ */

/* Hero Section */
.dark-mode .hero-section,
[data-theme="dark"] .hero-section {
   background-color: #12151a;
}

.dark-mode .hero-title,
[data-theme="dark"] .hero-title {
   color: var(--primary-color);
}

.dark-mode .hero-subtitle,
.dark-mode .hero-service-desc,
[data-theme="dark"] .hero-subtitle,
[data-theme="dark"] .hero-service-desc {
   color: var(--text-muted);
}

/* Testimonials Section Background */
.dark-mode #testimonials,
[data-theme="dark"] #testimonials {
   background-color: #1a1d23;
}

/* Feature Box */
.feature-box {
   background-color: #fff;
   padding: 2rem;
   border-radius: 10px;
   box-shadow: 0 4px 15px var(--shadow-color);
   height: 100%;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dark-mode .feature-box,
[data-theme="dark"] .feature-box {
   background-color: var(--card-bg);
}

.dark-mode .feature-icon,
[data-theme="dark"] .feature-icon {
   color: var(--primary2-color);
}

/* Stats Section */
.dark-mode .stats-section,
[data-theme="dark"] .stats-section {
   background-color: #1a1d23;
}

/* Portfolio Overlay */
.dark-mode .portfolio-overlay,
[data-theme="dark"] .portfolio-overlay {
   background: rgba(26, 29, 35, 0.9);
}

/* Blockquote */
.dark-mode .blockquote-custom,
[data-theme="dark"] .blockquote-custom {
   border-left-color: var(--primary2-color);
   color: var(--text-muted);
}

/* Form Controls */
.dark-mode .form-control,
[data-theme="dark"] .form-control {
   background-color: var(--card-bg);
   border-color: var(--border-color);
   color: var(--text-color);
}

.dark-mode .form-control:focus,
[data-theme="dark"] .form-control:focus {
   background-color: var(--card-bg);
   border-color: var(--primary2-color);
   color: var(--text-color);
}

.dark-mode .form-control::placeholder,
[data-theme="dark"] .form-control::placeholder {
   color: var(--text-muted);
}

/* Buttons */
.dark-mode .btn-logos,
[data-theme="dark"] .btn-logos {
   background-color: var(--secondary3-color);
}

.dark-mode .btn-outline-light,
[data-theme="dark"] .btn-outline-light {
   border-color: var(--border-color);
   color: var(--text-color);
}

.dark-mode .btn-outline-light:hover,
[data-theme="dark"] .btn-outline-light:hover {
   background-color: var(--card-bg);
   border-color: var(--primary2-color);
   color: var(--text-color);
}

/* Background Light */
.dark-mode .bg-light,
[data-theme="dark"] .bg-light {
   background-color: #1a1d23 !important;
}

/* Lead Text */
.dark-mode .lead,
[data-theme="dark"] .lead {
   color: var(--text-muted);
}

/* Text Muted */
.dark-mode .text-muted,
[data-theme="dark"] .text-muted {
   color: var(--text-muted) !important;
}

/* Paragraph */
.dark-mode p,
[data-theme="dark"] p {
   color: var(--text-color);
}

/* Strong */
.dark-mode strong,
[data-theme="dark"] strong {
   color: var(--primary-color);
}

/* Carousel Controls */
.dark-mode .carousel-control-prev-icon,
.dark-mode .carousel-control-next-icon,
[data-theme="dark"] .carousel-control-prev-icon,
[data-theme="dark"] .carousel-control-next-icon {
   filter: invert(0.8);
}

.dark-mode .carousel-indicators [data-bs-target],
[data-theme="dark"] .carousel-indicators [data-bs-target] {
   background-color: var(--primary-color);
}

/* ============================================
   13. TAMBAHKAN TOGGLE BUTTON STYLE
   ============================================ */
.theme-toggle-btn {
   position: fixed;
   bottom: 30px;
   right: 30px;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   border: none;
   background: linear-gradient(135deg, var(--secondary3-color), var(--secondary1-color));
   color: white;
   font-size: 1.5rem;
   cursor: pointer;
   z-index: 9999;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
   transition: all 0.3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
}

.theme-toggle-btn:hover {
   transform: scale(1.1) rotate(15deg);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.theme-toggle-btn:active {
   transform: scale(0.95);
}

.theme-toggle-btn i {
   transition: transform 0.5s ease;
}

.dark-mode .theme-toggle-btn i,
[data-theme="dark"] .theme-toggle-btn i {
   transform: rotate(360deg);
}

/* ============================================
   14. TAMBAHKAN TRANSITION UNTUK SMOOTH CHANGE
   ============================================ */
body,
.navbar,
.card,
.project-card,
.service-card,
.testimonial-card,
footer,
.hero-section,
.cta-section,
.feature-box,
.form-control,
.btn {
   transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}