/* =================================================================== */ /* KODE CSS FINAL & BERSIH UNTUK CAPCUS PHOTOWORKS (PENGUNJUNG) */ /* (VERSI DENGAN PENINGKATAN ANIMASI) */ /* =================================================================== */ /* --- FONT GOOGLE --- */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); /* --- Variabel Warna & Font --- */ :root { --text-color-main: #1a1a1a; --text-color-soft: #333; /* Warna teks yang sedikit lebih lembut */ --bg-color-main: #ffffff; --bg-light-gray: #f8f9fa; --link-color-main: #333; --link-hover-main: #000; --accent-color: #1a1a1a; --border-color: #e5e7eb; --primary-blue: #22a7f0; font-family: 'Poppins', sans-serif; } /* --- Pengaturan Global & Scroll Halus --- */ html { scroll-behavior: smooth; } body { margin: 0; padding: 0; background-color: var(--bg-color-main); color: var(--text-color-soft); /* Menggunakan warna teks yang lebih lembut */ line-height: 1.6; overflow-x: hidden; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* * --- PERBAIKAN ANIMASI (AOS) --- * Sembunyikan elemen yang akan dianimasikan * AOS akan membuatnya 'visible' saat di-scroll */ [data-aos] { opacity: 0; transition: opacity 0.5s ease-in-out; } /* =========================================================== */ /* GAYA HALAMAN UTAMA (NAVBAR, HERO, SECTION, DLL) */ /* =========================================================== */ .navbar { background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 998; transition: box-shadow 0.3s ease-in-out; /* Transisi untuk shadow */ } /* --- EFEK BARU: Shadow di Navbar saat scroll --- */ .navbar.scrolled { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); } .navbar .container { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; padding-bottom: 12px; } .logo-img { height: 40px; width: auto; vertical-align: middle; } #auth-section-desktop, #auth-section-mobile { display: contents; } .nav-links-container-desktop .nav-links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; } .nav-links-container-desktop .nav-links li { margin-left: 35px; } .nav-links-container-desktop .nav-links a { color: var(--link-color-main); text-decoration: none; font-weight: 500; font-size: 0.95rem; padding-bottom: 5px; transition: color 0.3s ease, border-bottom 0.3s ease; border-bottom: 2px solid transparent; } .nav-links-container-desktop .nav-links a:hover, .nav-links-container-desktop .nav-links a.active { color: var(--link-hover-main); border-bottom: 2px solid var(--link-hover-main); } .mobile-actions, .nav-links-container-mobile { display: none; } .hamburger-menu, .close-sidebar-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-color-main); } /* --- Hero Section --- */ .hero-section { position: relative; height: 90vh; width: 100%; overflow: hidden; color: #fff; display: flex; justify-content: center; align-items: center; text-align: center; } .slider-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease-in-out; z-index: 1; } /* --- EFEK BARU: Ken Burns (Zoom-in) pada Slide --- */ .slide .ken-burns { width: 100%; height: 100%; background-size: cover; background-position: center; transform: scale(1.15); /* Mulai dari sedikit zoom-in */ transition: transform 10s ease-out; /* Animasi zoom selama 10 detik */ } .slide.active { opacity: 1; z-index: 2; } /* Mengaktifkan efek Ken Burns saat slide aktif */ .slide.active .ken-burns { transform: scale(1); /* Kembali ke ukuran normal (efek zoom-out) */ } /* --- EFEK BARU: Gradient overlay agar teks lebih mudah dibaca --- */ .slide::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%); } .hero-content { position: relative; z-index: 3; text-shadow: 1px 1px 10px rgba(0,0,0,0.5); padding: 20px; } .hero-content h1 { font-size: 4.5rem; margin: 0; line-height: 1.2; font-weight: 700; } .hero-content p { font-size: 1.5rem; margin-top: 10px; font-weight: 400; } .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.5); color: white; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; transition: background-color 0.3s ease; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; padding: 0; } .slider-btn:hover { background: rgba(255, 255, 255, 0.4); } .prev-btn { left: 30px; } .next-btn { right: 30px; } /* --- Section Styling & Lainnya --- */ .section { padding: 80px 0; text-align: center; } .section-title { font-size: 2.5em; margin-bottom: 15px; color: #1a1a1a; font-weight: 700;} .section-subtitle { font-size: 1.1em; color: #555; margin-bottom: 50px; max-width: 600px; margin-left: auto; margin-right: auto; } .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; text-align: center; } .info-card { background-color: #fff; border-radius: 12px; padding: 40px 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.07); } .pricelist-grid, .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin-top: 20px; } .pricelist-item { background-color: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.07); text-align: left; display: flex; flex-direction: column; transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; /* Transisi untuk hover */ } /* --- EFEK BARU: Card "mengangkat" saat di-hover --- */ .pricelist-item:hover { transform: translateY(-5px); /* Mengangkat kartu */ box-shadow: 0 15px 35px rgba(0,0,0,0.1); /* Bayangan lebih jelas */ } .pricelist-item img { width: 100%; height: 250px; object-fit: cover; transition: transform 0.4s ease-out; /* Animasi zoom gambar */ } /* --- EFEK BARU: Zoom gambar di dalam kartu saat di-hover --- */ .pricelist-item:hover img { transform: scale(1.05); } .item-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; } .item-content h3 { margin-top: 0; font-size: 1.8em; font-weight: 600; } .item-content .item-price { font-size: 1.4rem; font-weight: bold; color: var(--primary-blue); margin-top: -10px; margin-bottom: 15px;} .item-content p { color: #555; flex-grow: 1; } .item-content .btn-order-package { background-color: var(--accent-color); color: #fff; text-align: center; padding: 12px; border-radius: 6px; text-decoration: none; font-weight: 600; margin-top: 20px; transition: background-color 0.3s, transform 0.2s ease; /* Transisi untuk hover */ } /* --- EFEK BARU: Tombol membesar sedikit saat di-hover --- */ .item-content .btn-order-package:hover { background-color: #333; transform: scale(1.03); /* Membesar sedikit */ } .form-card { background-color: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); max-width: 600px; margin: 30px auto; text-align: left; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 600; } .form-group input, .form-group textarea { width: 100%; padding: 12px; border: 1px solid var(--border-color); border-radius: 5px; box-sizing: border-box; font-size: 1em; } .btn-submit { background-color: var(--accent-color); color: #fff; padding: 12px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 1em; transition: background-color 0.3s ease; width: 100%; margin-top: 10px; } .footer { background-color: #1a1a1a; color: #a0a0a0; padding: 60px 0 20px 0; text-align: left; font-size: 15px; } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; margin-bottom: 40px; } .footer-heading { color: #ffffff; font-size: 1.4em; margin-bottom: 20px; font-weight: 600;} .footer-links, .footer-contact { list-style: none; padding: 0; margin: 0; } .footer-links a, .footer-contact a { color: #a0a0a0; text-decoration: none; transition: color 0.3s; } .footer-links a:hover, .footer-contact a:hover { color: #fff; } .footer-bottom { border-top: 1px solid #333; padding-top: 20px; text-align: center; font-size: 14px; } .whatsapp-float { position: fixed; bottom: 20px; right: 20px; background-color: #25D366; color: #FFF; border-radius: 50px; padding: 12px 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 16px; font-weight: bold; z-index: 100; transition: all 0.3s ease; } .overlay { display: none !important; } .social-links-footer a { color: #a0a0a0; margin-right: 15px; font-size: 1.2rem; } .portfolio-filters { margin-bottom: 40px; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; } .filter-btn { background-color: #f0f0f0; border: none; border-radius: 20px; padding: 8px 20px; cursor: pointer; font-weight: 500; transition: background-color 0.3s, color 0.3s, transform 0.2s ease; } .filter-btn:hover { background-color: #ddd; transform: translateY(-2px); } .filter-btn.active { background-color: var(--accent-color); color: #fff; } /* =========================================================== */ /* ATURAN DESAIN RESPONSIVE (MOBILE) */ /* =========================================================== */ @media (max-width: 768px) { .section { padding: 60px 20px; } .hero-content h1 { font-size: 2.5em; } .section-title { font-size: 2em; } .d-none-mobile { display: none; } /* Navigasi Mobile */ .nav-links-container-desktop { display: none; } .mobile-actions { display: flex; align-items: center; gap: 15px; } #auth-section-mobile a { color: var(--link-color-main); text-decoration: none; font-weight: 500; font-size: 0.95rem; } .hamburger-menu { display: block; } .nav-links-container-mobile { display: flex; flex-direction: column; position: fixed; top: 0; left: -300px; width: 300px; height: 100vh; background-color: #ffffff; box-shadow: 2px 0 10px rgba(0,0,0,0.1); transition: left 0.3s ease-in-out; z-index: 9999; padding-top: 20px; box-sizing: border-box; } .nav-links-container-mobile.active { left: 0; } .sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; } .sidebar-logo { height: 35px; } .nav-links-container-mobile .nav-links { flex-direction: column; align-items: flex-start; list-style: none; padding: 20px; margin: 0; flex-grow: 1; } .nav-links-container-mobile .nav-links li { margin: 0 0 25px 0; width: 100%; } .nav-links-container-mobile .nav-links a { font-size: 1.1rem; padding: 0; border-bottom: none !important; color: var(--link-color-main); text-decoration: none; display: flex; align-items: center; gap: 15px; } .nav-links-container-mobile .nav-links a i { font-size: 1.2rem; width: 25px; text-align: center; } .sidebar-footer { padding: 20px; border-top: 1px solid var(--border-color); } .sidebar-footer p { font-weight: bold; margin: 0 0 10px 0; } /* Grid & Lainnya */ .info-grid, .pricelist-grid, .portfolio-grid, .footer-grid { grid-template-columns: 1fr; } .whatsapp-float { width: 60px; height: 60px; padding: 0; border-radius: 50%; justify-content: center; } .slider-btn { width: 35px; height: 35px; background: rgba(0, 0, 0, 0.2); border: none; font-size: 1rem; opacity: 0.7; } .slider-btn:hover { background: rgba(0, 0, 0, 0.4); opacity: 1; } .prev-btn { left: 15px; } .next-btn { right: 15px; } } /* =========================================================== */ /* GAYA HALAMAN ORDER, PROFIL, DAN MODAL ADMIN */ /* =========================================================== */ .order-page-wrapper, .profile-page-wrapper { background-color: #f0f2f5; padding: 60px 20px; min-height: 80vh; } .order-form-container, .profile-container { max-width: 800px; margin: 0 auto; background-color: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .order-form-container h2, .profile-container h2 { text-align: center; font-size: 2.5rem; margin-bottom: 30px; font-weight: 600; } .profile-container h3 { font-size: 1.8rem; margin-top: 30px; margin-bottom: 20px; border-bottom: 2px solid #f0f0f0; padding-bottom: 10px; font-weight: 600; } .progress-bar { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; position: relative; } .progress-bar::before { content: ''; position: absolute; top: 20px; left: 0; transform: translateY(-50%); height: 4px; width: 100%; background-color: #e0e0e0; z-index: 1; } .progress-bar .step { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 2; width: 100px;} .progress-bar .step-circle { width: 40px; height: 40px; border-radius: 50%; background-color: #e0e0e0; color: #999; border: 4px solid #f0f2f5; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 1.2rem; transition: all 0.4s ease; } .progress-bar .step-label { margin-top: 10px; font-size: 0.9rem; color: #999; font-weight: 500; transition: all 0.4s ease; } .progress-bar .step.active .step-circle { background-color: var(--primary-blue); color: #fff; border-color: var(--primary-blue); } .progress-bar .step.active .step-label { color: var(--primary-blue); font-weight: bold; } .form-step { display: none; } .form-step.active { display: block; } .form-step h3 { margin-bottom: 20px; font-size: 1.8rem; border-bottom: 2px solid #f0f0f0; padding-bottom: 10px; color: var(--text-color-main); font-weight: 600; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; } .order-form-group { margin-bottom: 20px; text-align: left; } .order-form-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.95rem; } .order-form-group input, .order-form-group select, .order-form-group textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; font-size: 1rem; font-family: 'Poppins', sans-serif; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .order-form-group input:focus, .order-form-group select:focus, .order-form-group textarea:focus { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(34, 167, 240, 0.2); } .order-form-group.full-width { grid-column: 1 / -1; } .form-buttons { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; gap: 15px; } .form-btn { padding: 12px 30px; border: none; border-radius: 6px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .btn-prev { background-color: #e0e0e0; color: #555; max-width: 200px; flex: 1; } .btn-prev:hover { background-color: #ccc; } .btn-next { background-color: var(--primary-blue); color: #fff; } .btn-next:hover { background-color: #1a8ccb; } .btn-submit { background-color: #28a745; color: #fff; max-width: 300px; flex: 2; } .btn-submit:hover { background-color: #218838; } @media (max-width: 768px) { .form-grid { grid-template-columns: 1fr; } .order-form-container, .profile-container { padding: 20px; } .order-form-container h2, .profile-container h2 { font-size: 2rem; } .progress-bar .step-label { font-size: 0.7rem; } .form-buttons { flex-direction: column-reverse; } .form-btn, .btn-prev, .btn-submit { max-width: 100%; width: 100%;} } /* --- GAYA MODAL LOGIN ADMIN --- */ .admin-modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); justify-content: center; align-items: center; } .admin-modal.show { display: flex; } .admin-modal-content { background-color: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); position: relative; max-width: 450px; width: 90%; } .close-admin-modal { color: #aaa; position: absolute; top: 10px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; } .admin-login-wrapper { padding: 20px 0; } .admin-login-container { display: flex; } .admin-login-right { flex: 1; text-align: center; } .admin-login-right h2 { font-size: 2rem; margin-bottom: 10px; font-weight: 600; } .admin-login-subtitle { font-size: 0.95rem; color: #666; margin-bottom: 25px; } .admin-modal-login-btn { width: 100%; padding: 12px; background-color: #1a1a1a; color: #ffffff; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease; margin-top: 10px; } .admin-modal-login-btn:hover { background-color: #333333; } /* =========================================================== */ /* KODE PENYEMPURNAAN: KARTU TESTIMONI ELEGAN */ /* =========================================================== */ /* Kartu Testimoni Individual */ .testimonial-card-item { background-color: #f8f9fa; /* Background kartu sedikit abu-abu */ border-radius: 10px; /* Sudut lebih rounded */ padding: 35px 30px 30px; /* Padding: top, right/left, bottom */ box-shadow: 0 8px 25px rgba(0,0,0,0.06); /* Shadow halus */ border: 1px solid #e9ecef; /* Border tipis */ display: flex; flex-direction: column; height: 100%; /* Kartu sama tinggi */ position: relative; /* Penting untuk posisi ikon kutipan */ text-align: left; /* Teks dalam kartu rata kiri */ transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; overflow: hidden; /* Sembunyikan overflow ikon */ } .testimonial-card-item:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); } /* Ikon Petik Besar (Elemen Kunci Elegansi) */ .testimonial-card-item .quote-icon { font-size: 5rem; /* Ukuran ikon petik */ font-family: 'Times New Roman', Times, serif; /* Font serif untuk kutipan */ color: #e9ecef; /* Warna ikon SANGAT TERANG/PUDAR */ position: absolute; top: 15px; /* Posisi dari atas */ left: 20px; /* Posisi dari kiri */ line-height: 1; z-index: 1; /* Di BAWAH teks */ opacity: 0.8; /* Sedikit transparan */ user-select: none; /* Agar tidak bisa dipilih */ } /* Teks Testimoni */ .testimonial-card-item .testimonial-text { font-size: 1rem; color: #444; /* Warna teks */ line-height: 1.8; /* Jarak baris */ font-style: normal; flex-grow: 1; /* Mendorong author ke bawah */ margin-bottom: 25px; /* Jarak ke author */ position: relative; /* Agar di ATAS ikon */ z-index: 2; padding-top: 10px; /* Beri sedikit ruang dari ikon di atasnya */ } /* Bagian Author */ .testimonial-author { display: flex; align-items: center; gap: 12px; /* Jarak avatar dan nama */ margin-top: auto; /* Pastikan selalu di bawah */ border-top: 1px solid #e0e0e0; /* Garis pemisah halus */ padding-top: 20px; position: relative; /* Agar di ATAS ikon */ z-index: 2; background-color: #f8f9fa; /* Samakan background kartu agar garis pemisah tidak transparan */ } /* Avatar Inisial (Bulat) */ .testimonial-author .author-avatar { width: 45px; height: 45px; border-radius: 50%; /* Membuatnya bulat */ background-color: var(--accent-color); /* Warna hitam */ color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.2rem; flex-shrink: 0; /* Agar tidak menyusut */ } /* Nama Author */ .testimonial-author .client-name { font-size: 0.95rem; font-weight: 600; /* Nama tebal */ color: var(--text-color-main); text-align: left; margin: 0; } .testimonial-form-container { background-color: #ffffff; padding: 40px; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.07); max-width: 700px; margin: 40px auto; text-align: left; } .testimonial-form-container h3 { font-size: 1.8rem; font-weight: 600; margin-top: 0; margin-bottom: 20px; text-align: center; } #testimonialForm .form-group { margin-bottom: 20px; } #testimonialForm textarea { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--border-color); font-size: 1rem; min-height: 120px; resize: vertical; font-family: 'Poppins', sans-serif; } #testimonialForm .btn-submit { width: 100%; padding: 15px; font-size: 1.1rem; font-weight: 600; border-radius: 8px; background-color: var(--accent-color); color: #fff; cursor: pointer; transition: background-color 0.3s; } #testimonialForm .btn-submit:hover { background-color: #333; } .status-badge { padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; text-transform: capitalize; color: #fff; } .status-badge.status-pending { background-color: #ffc107; color: #000; } .status-badge.status-dp_received, .status-badge.status-confirmed { background-color: #17a2b8; } .status-badge.status-completed { background-color: #28a745; } .status-badge.status-cancelled { background-color: #dc3545; } /* --- Gaya Halaman Pesanan Saya (My Orders) --- */ .my-orders-list { display: grid; grid-template-columns: 1fr; gap: 20px; } .order-card { background-color: #ffffff; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); padding: 20px; text-decoration: none; color: var(--text-color-main); transition: transform 0.2s ease, box-shadow 0.2s ease; border-left: 5px solid var(--primary-blue); } .order-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); } .order-card-header, .order-card-footer { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; color: #777; } .order-card-header { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); } .order-card-body strong { font-size: 1.5rem; font-weight: 600; display: block; margin-bottom: 5px; } .order-card-footer { margin-top: 15px; padding-top: 10px; border-top: 1px solid var(--border-color); } /* --- Gaya Halaman Detail Pesanan --- */ .order-detail-wrapper { background-color: var(--bg-light-gray); padding: 60px 20px; } .back-link { display: inline-block; margin-bottom: 30px; color: var(--text-color-main); text-decoration: none; font-weight: 600; } #order-detail-content { background-color: #fff; padding: 30px; border-radius: 8px; margin-bottom: 40px; box-shadow: 0 8px 25px rgba(0,0,0,0.07); } .order-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px 30px; } .order-detail-grid p { margin: 0; padding: 10px 0; border-bottom: 1px solid #f0f0f0; } .gallery-title { text-align: center; font-size: 2.2rem; margin-bottom: 30px; } /* --- GAYA BARU: Konfirmasi Pesanan --- */ #confirmation-details { text-align: left; background-color: var(--bg-light-gray); padding: 30px; border-radius: 8px; border: 1px solid var(--border-color); } .confirmation-intro { text-align: center; font-size: 1.05rem; color: #555; margin-bottom: 25px; } .confirmation-notice { text-align: center; font-size: 0.9rem; color: #777; margin-top: 25px; background-color: #e9f5ff; padding: 10px; border-radius: 6px; } .confirmation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .confirmation-section h4 { font-size: 1.3rem; font-weight: 600; border-bottom: 2px solid var(--primary-blue); padding-bottom: 10px; margin-top: 0; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .confirmation-item { margin-bottom: 15px; } .confirmation-item span { display: block; font-size: 0.9rem; color: #666; margin-bottom: 4px; } .confirmation-item p { font-size: 1.05rem; font-weight: 500; color: var(--text-color-main); margin: 0; word-wrap: break-word; } .confirmation-total { grid-column: 1 / -1; text-align: right; margin-top: 20px; padding-top: 20px; border-top: 2px solid var(--border-color); } .confirmation-total h4 { font-size: 1.5rem; font-weight: bold; } @media (max-width: 768px) { .confirmation-grid { grid-template-columns: 1fr; } } /* --- Perbaikan untuk Logo di Footer --- */ .footer-logo { height: 80px; /* Atur tinggi logo agar tidak terlalu besar */ width: auto; margin-bottom: 20px; /* Beri sedikit jarak ke teks di bawahnya */ } /* =========================================================== */ /* KODE PENINGKATAN UI/UX */ /* =========================================================== */ /* --- Perbaikan Final V3 untuk Halaman Tentang Kami (Pasti Tengah & Tanpa Scroll) --- */ .about-us-section { padding: 20px; /* Padding minimal agar tidak terlalu mepet di layar kecil */ display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 160px); /* Tinggi section = tinggi layar - (tinggi header + footer) */ box-sizing: border-box; } .about-us-section .container { max-width: 800px; margin: 0 auto; text-align: center; /* WAJIB: Ini yang membuat judul dan logo berada di TENGAH */ } .about-us-section .section-title { margin-bottom: 20px; font-size: 2.5em; /* Mengembalikan ukuran font judul */ } .about-us-section .about-us-logo { max-width: 200px; height: auto; margin-bottom: 20px; } .about-us-section .section-subtitle { text-align: justify; line-height: 1.7; max-width: 700px; margin-left: auto; /* Memastikan blok paragraf juga di tengah */ margin-right: auto; /* Memastikan blok paragraf juga di tengah */ } /* --- Peningkatan Navigasi: Tombol Order Menonjol --- */ .nav-links-container-desktop .nav-links a[data-page="order"] { background-color: var(--accent-color); color: #ffffff; padding: 8px 18px; border-radius: 20px; border-bottom: 2px solid transparent; transition: background-color 0.3s, color 0.3s, transform 0.2s; } .nav-links-container-desktop .nav-links a[data-page="order"]:hover { background-color: #333; color: #ffffff; transform: translateY(-2px); } /* --- Peningkatan Alur Pengguna: CTA di Halaman Pricelist --- */ .cta-section { background-color: var(--bg-light-gray); border-radius: 12px; padding: 40px; margin-top: 60px; text-align: center; border: 1px solid var(--border-color); } .cta-section h3 { font-size: 2em; font-weight: 600; margin-top: 0; margin-bottom: 15px; } .cta-section p { max-width: 600px; margin-left: auto; margin-right: auto; margin-bottom: 30px; color: #555; } .btn-cta { background-color: #25D366; /* Warna WhatsApp */ color: #ffffff; padding: 15px 30px; border-radius: 30px; text-decoration: none; font-weight: 600; font-size: 1.1em; display: inline-flex; align-items: center; gap: 10px; transition: background-color 0.3s, transform 0.2s; cursor: pointer; border: none; } .btn-cta:hover { background-color: #128C7E; transform: translateY(-3px); } /* --- Peningkatan Interaksi: Efek Hover Portofolio --- */ /* (Sudah ditangani oleh .pricelist-item:hover) */ .portfolio-grid .pricelist-item::after { background-color: rgba(0,0,0,0.3); } .portfolio-grid .pricelist-item .item-content { display: none; /* Sembunyikan jika tidak ada konten */ } /* --- Peningkatan UX: Validasi Form Real-time --- */ .input-group input.valid { border-color: #28a745; /* Hijau untuk valid */ } .input-group input.invalid { border-color: #dc3545; /* Merah untuk tidak valid */ } .input-group .error-message { color: #dc3545; font-size: 0.8em; text-align: left; margin-top: 5px; display: none; /* Sembunyikan secara default */ } /* --- Peningkatan Kinerja: Tombol Load More --- */ .btn-load-more { background-color: var(--accent-color); color: #ffffff; border: none; border-radius: 30px; padding: 12px 30px; font-size: 1em; font-weight: 600; cursor: pointer; margin-top: 40px; transition: background-color 0.3s, transform 0.2s; } .btn-load-more:hover { background-color: #333; transform: translateY(-2px); } /* --- Peningkatan Interaksi: Slider Testimoni --- */ .testimonial-slider-container { position: relative; max-width: 100%; margin: 0 auto; } .testimonial-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; /* Untuk scrolling halus di iOS */ padding-bottom: 20px; /* Jarak untuk scrollbar */ gap: 30px; /* Jarak antar kartu */ } /* Sembunyikan scrollbar */ .testimonial-grid::-webkit-scrollbar { display: none; } .testimonial-grid { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .testimonial-card-item { flex: 0 0 100%; /* Setiap kartu mengambil 100% lebar container */ scroll-snap-align: start; } @media (min-width: 768px) { .testimonial-card-item { flex: 0 0 calc(50% - 15px); /* Tampilkan 2 kartu di layar medium */ } } @media (min-width: 1024px) { .testimonial-card-item { flex: 0 0 calc(33.33% - 20px); /* Tampilkan 3 kartu di layar besar */ } } .testimonial-slider-container .slider-btn { display: none; /* Sembunyikan di mobile, gunakan swipe */ } @media (min-width: 768px) { .testimonial-slider-container .slider-btn { display: flex; /* Tampilkan tombol di desktop */ background: #fff; color: var(--text-color-main); border: 1px solid var(--border-color); box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .testimonial-slider-container .prev-btn { left: -25px; } .testimonial-slider-container .next-btn { right: -25px; } } /* --- Peningkatan UX: Dropdown Menu Pengguna (dengan FIX Alignment) --- */ .nav-links-container-desktop .nav-links > li { display: flex; align-items: center; } .dropdown-container { position: relative; } .dropdown-toggle { cursor: pointer; display: flex; align-items: center; gap: 5px; padding-bottom: 0 !important; /* Memaksa hapus padding bawah agar sejajar */ border-bottom: 2px solid transparent !important; /* Pastikan tidak ada border bawah */ } .dropdown-toggle:hover { border-bottom: 2px solid transparent !important; } .dropdown-toggle i { transition: transform 0.3s ease; } .dropdown-menu { display: none; position: absolute; top: 150%; right: 0; background-color: #ffffff; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1); z-index: 10; list-style: none; padding: 10px 0; border-radius: 8px; opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease, top 0.3s ease; } .dropdown-menu.show { display: block; opacity: 1; transform: translateY(0); top: 120%; } .dropdown-menu li a { color: var(--text-color-main); padding: 12px 20px; text-decoration: none; display: block; font-size: 0.9em; border-bottom: none !important; } .dropdown-menu li a:hover { background-color: var(--bg-light-gray); color: var(--text-color-main); } /* =========================================================== */ /* KODE BARU: FORM LOGIN & REGISTER (DESAIN MODERN & CENTERED) */ /* =========================================================== */ .login-page-wrapper { display: flex; justify-content: center; align-items: center; padding: 40px 20px; background-color: #f6f5f7; min-height: calc(100vh - 80px); /* Tinggi viewport dikurangi tinggi navbar */ box-sizing: border-box; } /* --- Kontainer Utama --- */ .login-page-wrapper .container-auth { background-color: #fff; border-radius: 12px; /* Membuat container lebih rounded */ box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.1); position: relative; overflow: hidden; width: 768px; max-width: 100%; min-height: 500px; /* Sedikit lebih tinggi */ } /* --- Area Form (Bagian Putih) --- */ .form-container { position: absolute; top: 0; height: 100%; transition: all 0.6s ease-in-out; } .sign-in-container { left: 0; width: 50%; z-index: 2; } .sign-up-container { left: 0; width: 50%; opacity: 0; z-index: 1; } /* Form (Login & Register) - CENTERED */ .login-page-wrapper form { background-color: #FFFFFF; display: flex; align-items: center; /* DIUBAH: Menjadi rata tengah */ justify-content: center; flex-direction: column; padding: 0 50px; height: 100%; text-align: center; /* DIUBAH: Menjadi rata tengah */ } .login-page-wrapper .auth-title { font-weight: 700; margin: 0 0 25px 0; /* Tambah margin bawah */ color: #333; font-size: 2.2rem; /* Sedikit lebih besar */ } .login-page-wrapper .auth-p { font-size: 16px; /* Teks lebih besar */ line-height: 22px; letter-spacing: 0.5px; margin: 20px 0 30px; } /* --- Style Input Baru (Sesuai Gambar) --- */ .login-page-wrapper .auth-input-field { background-color: #f0f5ff; /* Warna biru muda */ border: none; border-radius: 10px; /* Radius lebih kecil */ padding: 15px 20px; /* Padding lebih besar */ margin: 8px 0; width: 100%; box-sizing: border-box; font-size: 14px; } .login-page-wrapper .auth-input-field::placeholder { color: #a0aec0; /* Warna placeholder */ } /* --- Style Tombol Baru (Sesuai Gambar) --- */ .login-page-wrapper .auth-btn { border-radius: 10px; /* Radius lebih kecil, kotak */ border: none; background-color: #1a1a1a; color: #FFFFFF; font-size: 14px; font-weight: bold; padding: 15px 50px; /* Padding baru */ letter-spacing: 1px; text-transform: uppercase; transition: transform 80ms ease-in, background-color 0.3s; cursor: pointer; margin-top: 15px; /* Jarak dari input */ } .login-page-wrapper .auth-btn:hover { background-color: #333; } .login-page-wrapper .auth-btn:active { transform: scale(0.95); } /* Tombol "LOGIN" di panel hitam */ .login-page-wrapper .auth-btn.ghost { background-color: transparent; border: 2px solid #FFFFFF; /* Border lebih tebal */ border-radius: 10px; /* Samakan radius */ padding: 15px 50px; /* Samakan padding */ } .login-page-wrapper .auth-btn.ghost:hover { background-color: rgba(255, 255, 255, 0.1); } /* --- Area Overlay (Bagian Hitam) --- */ .overlay-container { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; overflow: hidden; transition: transform 0.6s ease-in-out; z-index: 100; } .overlay-auth { background: #1a1a1a; color: #FFFFFF; position: relative; left: -100%; height: 100%; width: 200%; transform: translateX(0); transition: transform 0.6s ease-in-out; border-radius: 0; /* Desain lurus, bukan S-curve */ } /* Panel Overlay (Teks) - CENTERED */ .overlay-panel { position: absolute; display: flex; align-items: center; /* DIUBAH: Menjadi rata tengah */ justify-content: center; flex-direction: column; padding: 0 50px; text-align: center; /* DIUBAH: Menjadi rata tengah */ top: 0; height: 100%; width: 50%; transform: translateX(0); transition: transform 0.6s ease-in-out; } .overlay-auth .auth-title { color: #FFFFFF; } .overlay-auth .auth-p { color: #e0e0e0; font-size: 16px; } .overlay-left { transform: translateX(-20%); } .overlay-right { right: 0; transform: translateX(0); } /* --- Logika Sliding (Tidak berubah) --- */ .container-auth.right-panel-active .sign-in-container { transform: translateX(100%); opacity: 0; } .container-auth.right-panel-active .sign-up-container { transform: translateX(100%); opacity: 1; z-index: 5; animation: show 0.6s; } .container-auth.right-panel-active .overlay-container{ transform: translateX(-100%); } .container-auth.right-panel-active .overlay-auth { transform: translateX(50%); } .container-auth.right-panel-active .overlay-left { transform: translateX(0); } .container-auth.right-panel-active .overlay-right { transform: translateX(20%); } @keyframes show { 0%, 49.99% { opacity: 0; z-index: 1; } 50%, 100% { opacity: 1; z-index: 5; } } /* --- Tampilan Mobile (Sudah Rata Tengah) --- */ @media (max-width: 768px) { .login-page-wrapper { align-items: flex-start; padding-top: 60px; } .container-auth { box-shadow: none; width: 100%; min-height: auto; border-radius: 0; overflow: hidden; } .overlay-container { display: none; } .form-container { position: static; width: 100%; height: auto; transition: transform 0.6s ease-in-out; opacity: 1 !important; transform: none !important; } .auth-slider { display: flex; width: 200%; transition: transform 0.6s ease-in-out; } .auth-slider > .form-container { width: 50%; flex-shrink: 0; } .container-auth.right-panel-active .auth-slider { transform: translateX(-50%); } .login-page-wrapper form { padding: 0 30px; /* Kurangi padding di mobile */ align-items: center; /* Pastikan rata tengah di mobile */ text-align: center; /* Pastikan rata tengah di mobile */ } .login-page-wrapper .auth-title { text-align: center; } .mobile-toggle-auth { display: block !important; margin-top: 25px; font-size: 0.9rem; color: #555; } .mobile-toggle-auth a { font-weight: bold; color: var(--text-color-main); cursor: pointer; } } /* KODE BARU UNTUK LIGHTBOX */ .portfolio-grid .pricelist-item img, #client-gallery-grid .pricelist-item img { cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; } .portfolio-grid .pricelist-item:hover img, #client-gallery-grid .pricelist-item:hover img { box-shadow: 0 8px 25px rgba(0,0,0,0.2); /* Dihapus agar tidak konflik dengan hover kartu transform: scale(1.03); */ } .lightbox { display: none; position: fixed; z-index: 1001; padding-top: 60px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.9); } .lightbox-content { margin: auto; display: block; max-width: 80%; max-height: 80vh; animation-name: zoom; animation-duration: 0.6s; } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } .lightbox-close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; cursor: pointer; } .lightbox-close:hover, .lightbox-close:focus { color: #bbb; text-decoration: none; cursor: pointer; } .lightbox-prev, .lightbox-next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } .lightbox-next { right: 0; border-radius: 3px 0 0 3px; } .lightbox-prev:hover, .lightbox-next:hover { background-color: rgba(255,255,255,0.2); } .lightbox-caption { text-align: center; color: #ccc; padding: 10px 0; height: 30px; font-size: 1rem; margin-top: 15px; } /* =========================================================== */ /* KODE BARU: OPTIMASI KINERJA PORTOFOLIO */ /* =========================================================== */ /* Memberikan placeholder abu-abu untuk item portofolio */ .portfolio-grid .pricelist-item { background-color: #f0f0f0; /* Warna latar belakang sementara */ aspect-ratio: 1 / 1; /* Menjaga bentuk kotak saat gambar dimuat (opsional) */ overflow: hidden; } /* Memastikan gambar mengisi placeholder setelah dimuat */ .portfolio-grid .pricelist-item img { width: 100%; height: 100%; object-fit: cover; } /* =========================================================== */ /* KODE BARU: GAYA UNTUK HOMEPAGE BARU */ /* =========================================================== */ .hero-section .hero-content .btn-cta-hero { background-color: #fff; color: #1a1a1a; padding: 12px 30px; text-decoration: none; font-weight: 600; border-radius: 30px; margin-top: 30px; display: inline-block; transition: background-color 0.3s, color 0.3s, transform 0.2s ease; } .hero-section .hero-content .btn-cta-hero:hover { background-color: #f0f0f0; transform: scale(1.05); /* Tombol membesar saat di-hover */ } .featured-gallery-item { position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; /* Transisi untuk hover */ } /* --- EFEK BARU: Kartu Galeri "mengangkat" --- */ .featured-gallery-item:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.15); } .featured-gallery-item img { width: 100%; display: block; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .featured-gallery-item:hover img { transform: scale(1.05); } .featured-gallery-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: white; padding: 40px 20px 20px 20px; text-align: left; } .featured-gallery-overlay h3 { margin: 0; font-size: 1.8em; font-weight: 600; } /* =========================================================== */ /* KODE BARU: Perbaikan Grid Testimoni Homepage */ /* =========================================================== */ .homepage-testimonial-grid { display: grid; /* Menggunakan layout grid yang responsif, sama seperti pricelist */ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin-top: 50px; /* Menambah jarak dari judul "Apa Kata Mereka?" */ } /* Memastikan kartu di homepage memiliki tinggi yang konsisten */ .homepage-testimonial-grid .testimonial-card-item { display: flex; flex-direction: column; height: 100%; /* Membuat semua kartu sama tinggi */ } .homepage-testimonial-grid .testimonial-text { flex-grow: 1; /* Mendorong author ke bagian bawah kartu */ } /* =========================================================== */ /* PERBAIKAN TOTAL UNTUK LOGIN PAGE MOBILE (ROMBAK DARI NOL) */ /* =========================================================== */ @media (max-width: 768px) { .login-page-wrapper { align-items: flex-start; padding-top: 60px; } .container-auth { box-shadow: none; width: 100%; min-height: auto; border-radius: 0; overflow: hidden; /* Ganti ke hidden untuk sliding effect */ } /* Hapus panel geser overlay di mobile */ .overlay-container { display: none; } .form-container { position: static; /* Hapus positioning absolut */ width: 100%; height: auto; transition: transform 0.6s ease-in-out; /* Tambahkan transisi untuk sliding */ opacity: 1 !important; transform: none !important; } /* Buat container slider untuk form */ .auth-slider { display: flex; width: 200%; /* Lebar total 2x lipat untuk 2 form */ transition: transform 0.6s ease-in-out; } /* Atur setiap form agar lebarnya 50% dari slider */ .auth-slider > .form-container { width: 50%; flex-shrink: 0; } /* Geser slider saat panel register aktif */ .container-auth.right-panel-active .auth-slider { transform: translateX(-50%); } .login-page-wrapper form { padding: 0 20px; } /* Tampilkan link toggle di mobile */ .mobile-toggle-auth { display: block !important; margin-top: 25px; font-size: 0.9rem; color: #555; } .mobile-toggle-auth a { font-weight: bold; color: var(--text-color-main); cursor: pointer; } } /* =========================================================== */ /* KODE BARU: GAYA PROFESIONAL UNTUK HALAMAN INVOICE */ /* =========================================================== */ .invoice-page-wrapper { background-color: var(--bg-light-gray); padding: 60px 20px; box-sizing: border-box; } .invoice-container { max-width: 800px; margin: 0 auto; background-color: #fff; padding: 50px; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); border: 1px solid var(--border-color); } .invoice-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; } .invoice-logo { height: 50px; } .invoice-header .header-text { text-align: right; } .invoice-header h2 { margin: 0; font-size: 2.8rem; font-weight: 700; color: #333; letter-spacing: 1.5px; } .invoice-header p { margin: 5px 0 0; font-size: 0.9rem; color: #666; } .invoice-header p span { font-weight: 500; color: #333; } .invoice-details { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 2px solid var(--border-color); } .detail-section h4 { font-size: 0.8rem; color: #888; margin-bottom: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .detail-section p { margin: 4px 0; font-size: 1rem; line-height: 1.6; } .invoice-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; } .invoice-table th, .invoice-table td { padding: 15px; text-align: left; border-bottom: 1px solid var(--border-color); } .invoice-table th { background-color: var(--bg-light-gray); font-weight: 600; color: #555; font-size: 0.9rem; } .invoice-table td:last-child, .invoice-table th:last-child { text-align: right; } .invoice-table tbody tr:last-child td { border-bottom: none; } .invoice-summary-wrapper { display: flex; justify-content: flex-end; margin-top: -20px; } .invoice-summary { width: 50%; max-width: 350px; } .invoice-summary p, .invoice-summary h3 { display: flex; justify-content: space-between; margin: 15px 0; font-size: 1rem; } .invoice-summary p span { font-weight: 500; } .invoice-summary h3 { font-size: 1.4rem; font-weight: 700; color: var(--accent-color); padding-top: 15px; border-top: 2px solid var(--accent-color); } .invoice-footer { text-align: center; padding-top: 30px; margin-top: 40px; border-top: 2px solid var(--border-color); } .invoice-footer h4 { font-size: 1.2rem; margin-bottom: 10px; } .invoice-footer p { color: #666; font-size: 0.9rem; max-width: 600px; margin: 0 auto 15px; } .contact-info { font-size: 0.85rem; color: #555; } .contact-info span { margin: 0 10px; } .invoice-actions { text-align: center; margin-top: 30px; } .btn-secondary-action { background-color: #e0e0e0; color: #333; padding: 15px 30px; border-radius: 30px; text-decoration: none; font-weight: 600; font-size: 1.1em; display: inline-block; margin-left: 15px; } /* =========================================================== */ /* KODE BARU: PERBAIKAN TOTAL UNTUK PRINT INVOICE (v5 - Final) */ /* =========================================================== */ @media print { /* Pengaturan halaman dasar */ @page { size: A4; margin: 1.5cm; /* Margin halaman cetak */ } /* Reset dasar untuk cetak */ body, html { background: #fff !important; color: #000 !important; font-family: 'Poppins', sans-serif; font-size: 10pt; line-height: 1.4; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; /* Pastikan tidak ada scrollbar tersembunyi */ } /* --- STRATEGI PENYEMBUNYIAN BARU (v5) --- */ /* Sembunyikan SEMUA elemen body secara default */ body > * { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: none !important; } /* Tampilkan HANYA container cetak dan isinya */ #print-invoice-container, #print-invoice-container * { display: block !important; /* Atau display lain yang sesuai */ visibility: visible !important; position: static !important; float: none !important; width: auto !important; height: auto !important; overflow: visible !important; color: #000 !important; background: transparent !important; text-shadow: none !important; box-shadow: none !important; border: revert !important; margin: revert !important; padding: revert !important; } /* Pastikan container utama print mengambil lebar penuh */ #print-invoice-container { width: 100% !important; } /* --- Styling Cetak (Target elemen di dalam #print-invoice-container) --- */ /* Pastikan elemen struktural invoice terlihat */ #print-invoice-container .invoice-header, #print-invoice-container .invoice-details, #print-invoice-container .invoice-table, #print-invoice-container .invoice-summary-wrapper, #print-invoice-container .invoice-sk, #print-invoice-container .invoice-footer { display: block !important; /* Atau flex/grid sesuai kebutuhan */ visibility: visible !important; width: 100% !important; /* Ambil lebar penuh */ margin-bottom: 20px !important; /* Beri jarak antar section */ } /* Styling Header */ #print-invoice-container .invoice-header { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; padding-bottom: 15px !important; border-bottom: 2px solid #000 !important; page-break-after: avoid !important; } #print-invoice-container .invoice-logo { height: 45px !important; width: auto !important; display: block !important; visibility: visible !important; } #print-invoice-container .header-text { text-align: right !important; } #print-invoice-container .header-text h2 { margin: 0 0 5px 0 !important; font-size: 20pt !important; font-weight: 700 !important; letter-spacing: 1px; } #print-invoice-container .header-text p { margin: 2px 0 0 !important; font-size: 9pt !important; color: #333 !important; } #print-invoice-container .header-text p span { font-weight: 500; color: #000 !important; } /* Styling Detail */ #print-invoice-container .invoice-details { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; padding-bottom: 15px !important; border-bottom: 1px solid #ccc !important; page-break-inside: avoid !important; } #print-invoice-container .detail-section h4 { font-size: 8pt !important; color: #555 !important; margin-bottom: 8px !important; font-weight: 600 !important; text-transform: uppercase; } #print-invoice-container .detail-section p { margin: 3px 0 !important; font-size: 10pt !important; line-height: 1.5; } #print-invoice-container .detail-section p strong { font-weight: 600 !important; } /* Styling Tabel */ #print-invoice-container .invoice-table { display: table !important; width: 100% !important; border-collapse: collapse !important; page-break-inside: auto !important; } #print-invoice-container .invoice-table thead { display: table-header-group !important; } #print-invoice-container .invoice-table tbody { display: table-row-group !important; } #print-invoice-container .invoice-table tr { display: table-row !important; page-break-inside: avoid !important; page-break-after: auto !important; } #print-invoice-container .invoice-table th, #print-invoice-container .invoice-table td { display: table-cell !important; padding: 10px 8px !important; text-align: left !important; border: 1px solid #ccc !important; font-size: 10pt !important; vertical-align: top !important; word-wrap: break-word; } #print-invoice-container .invoice-table th { background-color: #f0f0f0 !important; font-weight: 600 !important; } #print-invoice-container .invoice-table td:last-child, #print-invoice-container .invoice-table th:last-child { text-align: right !important; } #print-invoice-container .invoice-table tr td { border-top: none !important; } #print-invoice-container .invoice-table tbody tr:first-child td { border-top: 1px solid #ccc !important; } /* Styling Ringkasan */ #print-invoice-container .invoice-summary-wrapper { display: flex !important; justify-content: flex-end !important; page-break-inside: avoid !important; } #print-invoice-container .invoice-summary { width: 45% !important; max-width: 280px !important; display: block !important; } #print-invoice-container .invoice-summary p, #print-invoice-container .invoice-summary h3 { display: flex !important; justify-content: space-between !important; margin: 8px 0 !important; font-size: 10pt !important; } #print-invoice-container .invoice-summary p span { font-weight: 500 !important; } #print-invoice-container .invoice-summary h3 { font-size: 11pt !important; font-weight: 700 !important; padding-top: 10px !important; margin-top: 10px !important; border-top: 2px solid #000 !important; } /* Styling S&K */ #print-invoice-container .invoice-sk { margin-top: 30px !important; font-size: 8pt !important; color: #444 !important; page-break-before: auto !important; page-break-inside: avoid !important; display: block !important; } #print-invoice-container .invoice-sk h4 { font-size: 9pt !important; font-weight: 600; margin-bottom: 5px; display: block !important;} #print-invoice-container .invoice-sk p { line-height: 1.5; display: block !important;} /* Styling Footer */ #print-invoice-container .invoice-footer { text-align: center !important; padding-top: 20px !important; margin-top: 30px !important; border-top: 1px solid #ccc !important; page-break-before: auto !important; page-break-inside: avoid !important; display: block !important; } #print-invoice-container .invoice-footer h4 { font-size: 10pt !important; font-weight: 600; margin-bottom: 8px; display: block !important;} #print-invoice-container .invoice-footer p { color: #333 !important; font-size: 9pt !important; margin: 5px auto !important; max-width: 100%; display: block !important;} #print-invoice-container .invoice-footer .print-thankyou { margin-top: 15px; font-style: italic; color: #555 !important;} #print-invoice-container .invoice-footer .print-contact { font-size: 8pt !important; color: #555 !important; margin-top: 10px;} #print-invoice-container .invoice-footer .print-contact span { margin: 0 8px; display: inline !important;} #print-invoice-container .invoice-footer i { visibility: visible !important; margin-right: 3px; font-size: 8pt !important; display: inline !important;} /* Sembunyikan status badge background */ #print-invoice-container .status-badge { border: 1px solid #ccc !important; background-color: transparent !important; color: #000 !important; padding: 2px 6px !important; font-weight: normal !important; font-size: 9pt !important; } } /* --- Sistem Notifikasi Toast --- */ #toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; } .toast { background-color: #ffffff; color: #333; padding: 15px 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 10px; border-left: 5px solid #22a7f0; /* Default: Info */ opacity: 0; transform: translateX(100%); transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); } .toast.show { opacity: 1; transform: translateX(0); } .toast.hide { opacity: 0; transform: translateX(100%); } .toast i { font-size: 1.2rem; } .toast.success { border-left-color: #28a745; /* Hijau */ } .toast.success i { color: #28a745; } .toast.error { border-left-color: #dc3545; /* Merah */ } .toast.error i { color: #dc3545; } /* --- GAYA KARTU INFORMASI BARU --- */ .info-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; text-align: center; } .info-card-item { background-color: #ffffff; border-radius: 12px; padding: 40px 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.07); border-top: 4px solid var(--accent-color); transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; /* Transisi untuk hover */ } /* --- EFEK BARU: Kartu Info "mengangkat" --- */ .info-card-item:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); } .info-card-item i { font-size: 3rem; color: var(--accent-color); margin-bottom: 20px; } .info-card-item h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 15px; } .info-card-item p { color: #555; line-height: 1.7; min-height: 80px; /* Menyamakan tinggi teks */ } .btn-info { display: inline-block; margin-top: 20px; background-color: var(--accent-color); color: #fff; padding: 10px 25px; border-radius: 25px; text-decoration: none; font-weight: 500; transition: background-color 0.3s, transform 0.2s; } .btn-info:hover { background-color: #333; transform: translateY(-2px); } /* --- Responsif untuk Mobile --- */ @media (max-width: 768px) { #toast-container { top: 10px; left: 10px; right: 10px; width: auto; } } /* === STYLE UNTUK HARGA DISKON === */ .price-container { display: flex; align-items: center; gap: 10px; margin-top: -10px; margin-bottom: 5px; flex-wrap: wrap; /* Agar rapi di mobile */ } .original-price { text-decoration: line-through; color: #888; font-size: 1rem; } .discount-badge { background-color: #ff4757; /* Warna merah untuk diskon */ color: white; padding: 3px 8px; border-radius: 5px; font-size: 0.8rem; font-weight: bold; } /* Mengatur agar harga diskon tetap besar */ .item-price.current-price { margin-top: 0 !important; } /* === GAYA UNTUK DESKRIPSI YANG BISA DIPERLUAS (READ MORE) === */ .description-container .full-text { display: none; } .description-container .more-text-dots { display: inline; } .read-more-btn { display: inline-block; background: none; border: none; color: var(--primary-blue); font-weight: 600; cursor: pointer; padding: 5px 0; margin-top: 5px; font-size: 0.9em; text-decoration: none; } .read-more-btn:hover { text-decoration: underline; } /* Aturan saat deskripsi diperluas */ .description-container.expanded .full-text { display: inline; } .description-container.expanded .more-text-dots { display: none; } /* Menyamakan tinggi minimal konten agar kartu sejajar */ .item-content { display: flex; flex-direction: column; } .item-content .description-container { flex-grow: 1; /* Ini akan mendorong tombol "Pesan Paket" ke bawah */ } /* === GAYA UNTUK KOTAK DESKRIPSI PAKET DI FORM ORDER === */ .package-description-box { background-color: #f8f9fa; /* Warna abu-abu muda */ border-left: 4px solid var(--primary-blue); padding: 0 15px; margin-top: 0; border-radius: 0 4px 4px 0; max-height: 0; opacity: 0; overflow: hidden; transition: all 0.4s ease-in-out; box-sizing: border-box; } .package-description-box.active { margin-top: 15px; padding: 15px; max-height: 200px; /* Atur tinggi maksimal agar tidak terlalu panjang */ opacity: 1; } .package-description-box strong { display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-color-main); } .package-description-box p { font-size: 0.9rem; color: #555; line-height: 1.6; margin: 0; } /* GAYA UNTUK PRICELIST YANG DIKELOMPOKKAN (VERSI FINAL) */ /* =========================================================== */ #pricelist-container { width: 100%; } .pricelist-category-group { margin-bottom: 60px; /* Jarak antar kategori */ } .category-title { font-size: 2.2rem; font-weight: 700; text-align: left; margin-bottom: 25px; padding-bottom: 10px; border-bottom: 2px solid var(--border-color); color: var(--text-color-main); } .pricelist-grid-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; } /* =========================================================== */ /* KODE BARU: GAYA UNTUK LINK DETAIL PAKET DI PRICELIST GRID */ /* =========================================================== */ .package-detail-link { display: block; text-decoration: none; color: inherit; } .item-content h3 a { text-decoration: none; color: inherit; transition: color 0.3s ease; } .item-content h3 a:hover { color: var(--primary-blue); } /* =========================================================== */ /* KODE BARU: GAYA HALAMAN DETAIL PAKET (GAMBAR 2) */ /* =========================================================== */ .package-detail-wrapper { background-color: var(--bg-light-gray); padding: 60px 20px; } #package-detail-content { background-color: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 8px 25px rgba(0,0,0,0.07); max-width: 1000px; margin: 0 auto; } .package-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: flex-start; } .package-detail-image-container img { width: 100%; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .package-detail-title { font-size: 2.5rem; font-weight: 700; margin-top: 0; margin-bottom: 10px; } .package-detail-tabs { display: flex; border-bottom: 2px solid var(--border-color); margin-bottom: 20px; margin-top: 20px; } .tab-link { background: none; border: none; padding: 10px 20px; cursor: pointer; font-size: 1rem; font-weight: 500; color: var(--text-secondary); border-bottom: 3px solid transparent; margin-bottom: -2px; /* Agar border menimpa border-bottom container */ transition: color 0.3s, border-color 0.3s; } .tab-link:first-child { padding-left: 0; } .tab-link.active { color: var(--text-color-main); border-bottom-color: var(--primary-blue); } .tab-content { display: none; font-size: 0.95rem; line-height: 1.7; color: #555; animation: fadeIn 0.5s; } .tab-content.active { display: block; } /* =========================================================== */ /* KODE BARU: PENYEMPURNAAN GAYA HALAMAN DETAIL PAKET V3 (CENTERED PRICE) */ /* =========================================================== */ /* Wrapper Utama */ .package-detail-wrapper { background-color: #f8f9fa; padding: 50px 20px; /* Sedikit tambah padding */ } /* Tombol Kembali */ .package-detail-wrapper .back-link { display: block; text-align: center; margin-bottom: 25px; /* Tambah margin bawah */ color: #555; /* Sedikit lebih gelap */ font-weight: 500; text-decoration: none; transition: color 0.3s ease; font-size: 0.95rem; } .package-detail-wrapper .back-link:hover { color: var(--primary-blue); } .package-detail-wrapper .back-link i { /* Styling icon panah (jika ditambahkan) */ margin-right: 5px; } /* Kontainer Konten Utama */ #package-detail-content { background-color: #fff; padding: 35px 40px; /* Sesuaikan padding */ border-radius: 12px; /* Lebih rounded */ box-shadow: 0 12px 35px rgba(0,0,0,0.07); /* Shadow lebih halus */ max-width: 980px; margin: 0 auto; border: 1px solid #e9ecef; /* Border lebih terang */ } /* Grid Layout */ .package-detail-grid { display: grid; grid-template-columns: minmax(320px, 1.1fr) 1.5fr; /* Rasio kolom disesuaikan */ gap: 45px; /* Jarak lebih besar */ align-items: flex-start; } /* Gambar Paket */ .package-detail-image-container img { width: 100%; border-radius: 10px; /* Samakan dengan container */ box-shadow: 0 8px 20px rgba(0,0,0,0.1); height: auto; /* <-- BARU: Biarkan tinggi gambar otomatis */ /* aspect-ratio: 4 / 3; <-- DIHAPUS: Hapus pemaksaan rasio */ /* object-fit: cover; <-- DIHAPUS: Hapus pemotongan gambar */ } /* Kolom Informasi Teks */ .package-detail-info { display: flex; flex-direction: column; } /* Judul Paket */ .package-detail-title { font-size: 2.3rem; font-weight: 700; margin-top: 5px; /* Sedikit margin atas */ margin-bottom: 15px; /* Jarak ke harga */ line-height: 1.3; text-align: center; /* Judul rata tengah */ color: var(--text-color-main); } /* --- PENYESUAIAN HARGA (CENTERED) --- */ .package-detail-price-block { /* Wrapper baru untuk harga */ text-align: center; /* Membuat semua elemen di dalamnya rata tengah */ margin-bottom: 30px; /* Jarak ke tabs */ } .package-detail-price-block .price-container { display: flex; /* Aktifkan flexbox */ justify-content: center; /* Pusatkan item (harga coret & badge) */ align-items: baseline; /* Sejajarkan baseline */ margin-bottom: 5px; /* Jarak ke harga utama */ gap: 10px; /* Jarak antara harga coret dan badge */ } .package-detail-price-block .original-price { font-size: 1.1rem; color: #999; font-weight: 400; text-decoration: line-through; /* Pastikan ada coretan */ } .package-detail-price-block .discount-badge { font-size: 0.8rem; padding: 4px 8px; /* margin-left: 10px; <-- Dihapus, gunakan gap */ background-color: #e74c3c; color: white; border-radius: 4px; /* Sedikit border radius */ font-weight: 500; } .package-detail-price-block .item-price { font-size: 3rem; /* Ukuran harga utama bisa sedikit lebih besar */ font-weight: 700; color: var(--text-color-main); margin: 0; /* Hapus margin default */ line-height: 1; } /* --- AKHIR PENYESUAIAN HARGA --- */ /* Styling Tabs */ .package-detail-tabs { display: flex; justify-content: center; /* Tabs rata tengah */ border-bottom: 2px solid #e9ecef; /* Border lebih terang */ margin-bottom: 25px; /* Jarak ke konten tab */ } .tab-link { background: none; border: none; padding: 12px 5px; /* Kurangi padding horizontal */ margin: 0 18px; /* Jarak antar tab */ cursor: pointer; font-size: 1rem; font-weight: 600; color: #888; /* Warna non-aktif lebih abu */ border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color 0.3s, border-color 0.3s; white-space: nowrap; /* Mencegah teks tab wrap */ } .tab-link:hover { color: #333; /* Warna hover */ } .tab-link.active { color: var(--accent-color); /* Warna aktif (hitam) */ border-bottom-color: var(--accent-color); /* Border aktif (hitam) */ } /* Styling Konten Tab */ .tab-content { display: none; font-size: 0.98rem; /* Sedikit besarkan font konten */ line-height: 1.8; color: #555; /* Warna teks konten */ animation: fadeIn 0.4s ease; padding-top: 10px; text-align: left; /* Konten tetap rata kiri */ min-height: 100px; /* Beri tinggi minimum agar layout stabil */ } .tab-content p:first-child, .tab-content ul:first-child, .tab-content ol:first-child { margin-top: 0; } .tab-content.active { display: block; } .tab-content ul, .tab-content ol { padding-left: 25px; margin-bottom: 1em; } .tab-content li { margin-bottom: 10px; } .tab-content i { /* Styling untuk pesan "tidak tersedia" */ color: #999; font-style: italic; } /* Tombol Pesan Paket */ .package-detail-info .btn-order-package { width: 100%; text-align: center; margin-top: 35px; /* Jarak dari konten tab */ padding: 15px 20px; font-size: 1.1rem; font-weight: 600; background-color: var(--accent-color); color: #fff; border-radius: 8px; /* Samakan dengan elemen lain */ text-decoration: none; transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .package-detail-info .btn-order-package:hover { background-color: #333; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); } /* Responsive */ @media (max-width: 900px) { /* Sedikit lebih awal breakpointnya */ .package-detail-grid { grid-template-columns: 1fr; /* Tumpuk di tablet/mobile */ gap: 30px; } .package-detail-title { font-size: 2rem; margin-top: 20px; /* Beri jarak dari gambar saat tertumpuk */ } .package-detail-price-block .item-price { font-size: 2.5rem; } #package-detail-content { padding: 30px; } } @media (max-width: 500px) { .package-detail-title { font-size: 1.8rem; } .package-detail-price-block .item-price { font-size: 2.2rem; } #package-detail-content { padding: 25px; } .tab-link { margin: 0 12px; font-size: 0.95rem; } } /* Animasi Fade In (Tetap sama) */ @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* =========================================================== */ /* KODE BARU: GAYA UNTUK FILTER KATEGORI PRICELIST */ /* =========================================================== */ #pricelist-category-filters { margin-bottom: 40px; /* Jarak dari daftar paket */ display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; /* Jarak antar tombol */ } /* Menggunakan kembali style dari .portfolio-filters .filter-btn */ #pricelist-category-filters .filter-btn { background-color: #f0f0f0; border: none; border-radius: 20px; padding: 10px 22px; /* Sedikit lebih besar */ cursor: pointer; font-weight: 500; font-size: 0.95rem; /* Sedikit besarkan font */ transition: background-color 0.3s, color 0.3s, transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Tambah shadow tipis */ } #pricelist-category-filters .filter-btn:hover { background-color: #e0e0e0; /* Warna hover lebih jelas */ transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.08); } #pricelist-category-filters .filter-btn.active { background-color: var(--accent-color); /* Warna hitam (sesuai tema) */ color: #fff; box-shadow: 0 3px 7px rgba(0,0,0,0.1); } /* Penyesuaian judul kategori agar ada ruang dari atas saat discroll */ .pricelist-category-group .category-title { scroll-margin-top: 100px; /* Sesuaikan angka ini (tinggi navbar + sedikit margin) */ } .tab-content p { text-align: left; /* Membuat paragraf di dalam tab rata kiri */ } /* Opsional: Jika S&K Anda menggunakan list (