* { box-sizing: border-box; } /* Atur variabel warna dasar (Default Light Mode) */ :root { /* VARIABEL MODAL TERANG (DEFAULT) */ --bg-halaman: #242e32; --bg-halaman-utama: #001a2228; --bg-kontainer: #1a2022; --bg-headerfooter: #001a22; --bg-kolom-kanan: #001a22; --bg-kolom-kiri: #001a226d; --bg-login-box: #2d3f3e; --bg-hover:#325f4e; --bg-hover-border:#2d7f60; --bg-lang-container:#d0cca3; --bg-layanan-head:#134a5fb5; --bg-daftar-head:#215b19c5; --bg-kontak-head:#563117d0; --bg-user-image:#cec06d; --bg-date: #b2b2b3; --bg-date-red: #ae9e98; --bg-date-indo: #98ae98; --bg-date-inter: #8cb3c5; --bg-date-kab: #b9b3a2; --bg-date-prov: #9c9288; --bg-date-other: #809180; --teks-instansi:#32c170 ; --teks-layanan: #bbcb2d; --teks-utama: #f5f6fa; --teks-terang: #d1e6e6; --teks-redup: #969f9f; --border-warna: #2d393f; --tab-aktif: #02987f; --btn-wa: #006e26; --btn-tema: #006367; --btn-music: #652626; --btn-scroll: #778003; --txt-h2layanan: #7691ff; --txt--h2daftar:#b1ffac; --txt-h2kontak: #ffb6b6; --txt-playanan: #c0dde0; --txt--pdaftar:#d1e1d1; --txt-pkontak: #e9cdcd; --txt-h3layanan: #09727d; --txt--h3daftar:#12620d; --txt-h3kontak: #690f0f; --txt-tanggal:#2fe5b4; --txt-jam:#f2d74d; --txt-zona:#cccdd0; --txt-salamdatang:#4385ef; --txt-salamdinamis:#cec06d; --bg-body: #121212; --bg-card: #121719; --bg-body-content: #121212c3; --bg-rjbtn1 : #293844; --bg-rjbtn2 : #00438a; --bg-input-border:#b1cae2; --bg-input:#11171eab; --btn-login:#0080cf; --btn-hower: #c8b700; --btn-bgdrop:#009e5a; --bg-wrapper: #0033316c; --text-main: #f5f5f5; --text-link: #00aeff; --text-tor: #e9e4bc; --text-footer: #ffffff; --text-appbar-title: #019155; --text-appbar-desc: #ffd900; --text-muted: #aa6060; --text-h3: #0087b0; --text-price: #d19999af; --text-input: #ffffff; --text-light: #d7d36e; --bg-section-light: #ffffffcd; --nav-bg: rgba(255, 255, 255, 0.95); --nav-text: #cccccc; --shadow-logo: #008985; --ogency-font: "Outfit", sans-serif; --heading-font: "Outfit", sans-serif; --ogency-color: #5d5d5d; --ogency-color-rgb: 93, 93, 93; --ogency-base: #02066f; --ogency-base-custom: linear-gradient(to right, rgba(42, 39, 101, 0.8), rgba(71, 102, 176, 0.8)); --ogency-base-rgb: 245, 144, 13; --ogency-black: #000000; --ogency-black-rgb: 0, 0, 0; --ogency-black2: #101010; --ogency-black2-rgb: 16, 16, 16; --ogency-black3: #1a1a1a; --ogency-black3-rgb: 26, 26, 26; --ogency-white: #000000; --ogency-white-rgb: 255, 255, 255; --dcliq-base: #02066f; --dcliq-color2: rgb(255, 152, 0); } /* KUNCI TEMA GELAP: Otomatis aktif jika kelas .dark-mode terpasang di tag */ [data-theme="light"] { --bg-halaman: #e1f6f0; --bg-halaman-utama: #3798a11e; --bg-kontainer: #dcdede; --bg-headerfooter: #37a19c; --bg-kolom-kanan: #37a19c; --bg-kolom-kiri: #37a19c9a; --bg-login-box: #74c1ae; --bg-hover:#04c47d; --bg-hover-border:#00ffa2; --bg-lang-container:#ffea00; --bg-layanan-head:#4dcafcb1; --bg-daftar-head:#79d46dad; --bg-kontak-head:#c48545ba; --bg-user-image:#e3e610; --bg-date: #ededef; --bg-date-red: #f0c7b8; --bg-date-indo: #b4f2b4; --bg-date-inter: #a8d9f0; --bg-date-kab: #eee1be; --bg-date-prov: #d5b696; --bg-date-other: #98b898; --teks-instansi:#00ff6e ; --teks-layanan: #e5ff00; --teks-utama: #000000; --teks-terang: #0d1010; --teks-redup: #202627; --border-warna: #c2cbcb; --tab-aktif: #00fed4; --btn-wa: #00d049; --btn-tema: #0090b5; --btn-music: #d36c5c; --btn-scroll: #e1f103; --txt-h2layanan: #021c81; --txt--h2daftar:#048224; --txt-h2kontak: #820606; --txt-playanan: #006876; --txt--pdaftar:#299428; --txt-pkontak: #680707; --txt-h3layanan: #0098a9; --txt--h3daftar:#0b8c02; --txt-h3kontak: #690f0f; --txt-tanggal:#08f730; --txt-jam:#d5fb00; --txt-zona:#f0f2f2; --txt-salamdatang:#005fdc; --txt-salamdinamis:#e3e610; --bg-body: #f4f7f6; --bg-card: #ffffffdd; --bg-body-content: #dcdcdcb8; --bg-rjbtn1 : #60a3d6; --bg-rjbtn2 : #023ef4; --bg-input-border:#1d1d1e; --bg-input:#d6dde2ac; --btn-login:#002afb; --btn-hower: #00cc0e; --btn-bgdrop:#0eb005; --bg-wrapper: #87ddda76; --text-main: #161616; --text-link: #1e00ff; --text-tor: #13120a; --text-footer: #000000; --text-appbar-title: #00fc00; --text-appbar-desc: #f6fe00; --text-muted: #f40000; --text-h3: #0050ef; --text-price: #231818cd; --text-input: #000000; --text-light: #eaff8d; --bg-section-light: #181818d5; --nav-bg: rgba(30, 30, 30, 0.95); --nav-text: #141414; --shadow-logo: #00a4fc; --ogency-font: "Outfit", sans-serif; --heading-font: "Outfit", sans-serif; --ogency-color: #5d5d5d; --ogency-color-rgb: 93, 93, 93; --ogency-base: #0008fb; --ogency-base-custom: linear-gradient(to right, rgba(42, 39, 101, 0.8), rgba(71, 102, 176, 0.8)); --ogency-base-rgb: 245, 144, 13; --ogency-black: #000000; --ogency-black-rgb: 0, 0, 0; --ogency-black2: #101010; --ogency-black2-rgb: 16, 16, 16; --ogency-black3: #1a1a1a; --ogency-black3-rgb: 26, 26, 26; --ogency-white: #000000; --ogency-white-rgb: 255, 255, 255; --dcliq-base: #02066f; --dcliq-color2: rgb(255, 152, 0); } /* 1. PERUBAHAN PADA PENGATURAN DASAR HALAMAN */ html, body { /* Menggunakan min-height agar jika konten lebih panjang dari layar, halaman bisa di-scroll dengan normal dan tidak merusak layout */ min-height: 100vh; margin: 0; background-color: var(--bg-halaman); /* Menggunakan variabel */ margin: 0; padding: 0; background-image: url('fetchBingWallpaper'); /* Mengubah susunan tubuh halaman menjadi vertikal agar footer terkunci di bawah */ display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; max-width: 100%; overflow-x: hidden; } /* Mengatur kanvas memenuhi area beranda dan berada di latar belakang */ #particle-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; /* Di belakang kotak login */ pointer-events: auto; /* Izinkan kanvas menangkap posisi kursor mouse */ } /* Beranda & Login Box Section */ .main-content { background: var(--bg-halaman); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 120px 20px 60px 20px; } /* HEADER FIXED & LOCK POSISI (ANTI-ZOOM DESTRUKTIF) */ .header-tetap { display: flex; flex-direction: column; transition: all 0.3s ease; /* Transisi halus saat berubah jadi sticky */ width:100vw; position: fixed; /* Selalu mengambang di atas layar saat di-scroll */ top:0 ; left:0 ; background-color: var(--bg-kolom-kanan); box-shadow: 0 2px 10px rgba(0,0,0,0.08); z-index: 1000; /* Di atas slideshow dan konten */ flex-shrink: 0; /* Mencegah gepeng saat di-zoom */ } .header-container { margin: 0 auto; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; width: 100%; padding:1px 50px 1px 50px; gap: 10px; } .header-container1 { margin: 0 auto; width: 100%; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,0.2); font-size: 12px; padding:1px 50px 1px 50px; box-sizing: border-box; flex-wrap: wrap; /* Izinkan elemen turun ke bawah saat layar sempit */ } /* BAGIAN IDENTITAS KIRI HEADER */ .header-identitas { display: flex; align-items: center; gap: 12px; margin-right: auto; } .logo-header { width: 45px; height: 45px; object-fit: contain; } .info-header { display: flex; flex-direction: column; } .instansi-header { margin: 0; font-size: 14px; font-weight: bold; color: var(--teks-instansi); } .layanan-header { margin: 2px 0 0 0; font-size: 12px; color: var(--teks-layanan); font-weight: bold; text-transform: ; } .jam-container { font-weight:600; text-shadow:0 0 0 rgba(0, 213, 255, 0.567); } .hari-tanggal { font-size:12px; font-weight:600; color: var(--txt-tanggal); } .waktu { font-size: 1em; font-weight: bold; color: var(--txt-jam); } .zona { font-size: 12px; color: var(--txt-zona); font-weight: bold; } /* --- Tambahkan kode ini di bagian paling bawah file style.css Anda --- */ PERBAIKAN TOTAL: SECTION LAYANAN RATALURUS TENGAH /* ================================================== */ html { scroll-behavior: smooth; } /* 1. INDUK UTAMA SECTION: Memaksa area mengambil lebar penuh */ .section-layanan { width: 100%; background-color:var(--bg-kontainer); padding: 80px 0; box-sizing: border-box; /* KUNCI 1: Memastikan section menjadi flex container untuk memusatkan isinya */ display: flex; justify-content: center; align-items: center; } /* 2. KONTAINER KHUSUS: Mengunci boks pembungkus tepat di tengah halaman */ .section-layanan .wrapper-konten { width: 100%; max-width: 1200px; padding: 0 20px; box-sizing: border-box; /* KUNCI 2: Memaksa isi kontainer (header teks & grid) selalu berada di tengah */ display: flex; flex-direction: column; align-items: center; justify-content: center; } /* Header Judul Layanan */ .layanan-header-text { text-align: center; margin-bottom: 50px; margin-top: 50px; width: 100%; padding : 20px 10px 20px 10px; /* background: linear-gradient(var(--bg-layanan-head)), url('../img/section/2.jpg'); */ } .layanan-header-text h2 { font-size: 20px; color: var(--txt-h2layanan); margin: 0 0 12px 0; font-weight: bold; } .layanan-header-text p { font-size: 16px; color: var(--txt-playanan); margin: 0; } /* 3. GRID PEMBUNGKUS KARTU: Dipusatkan secara horizontal di desktop */ .layanan-grid { display: flex; flex-direction: row; justify-content: center; /* KUNCI 3: Memosisikan barisan kartu tepat di tengah layar */ align-items: stretch; /* Membuat tinggi semua kartu sama rata */ gap: 30px; width: 100%; max-width: 1200px; /* Membatasi lebar grid agar boks kartu mengelompok rapi di tengah */ box-sizing: border-box; } .layanan-grid-empat { display: flex; flex-direction: row; flex-wrap: wrap; /* Mengizinkan kartu melorot ke baris baru jika lebih dari 2 */ justify-content: center; /* Kunci: Memusatkan seluruh barisan kartu tepat di tengah */ gap: 30px; width: 100%; max-width: 1200px; /* Membatasi ruang agar pas terbagi menjadi 2 kolom */ box-sizing: border-box; } /* KARTU LAYANAN INDIVIDUAL */ .layanan-card { background-color: var(--bg-card); border: 1px solid var(--border-warna); border-radius: 12px; padding: 35px 25px; /* Mengunci lebar boks di desktop agar terbagi rata menjadi 2 kolom seimbang */ flex: 0 0 calc(50% - 15px); max-width: calc(50% - 15px); box-sizing: border-box; transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; /* Wajib untuk penempatan overlay */ background-size: cover; background-position: center; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } /* Efek Hover Elegan */ .layanan-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); border-color: var(--bg-hover-border); background-color: var(--bg-hover); } /* Efek Hover Elegan */ .layanan-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); background-color: var(--bg-kontainer); } /* Mengubah warna pinggiran boks sesuai boks yang sedang disentuh */ .layanan-card:hover:has(.box-ikp) { border-color: #3498db;} .layanan-card:hover:has(.box-egov) { border-color: #e67e22; } .layanan-card:hover:has(.box-siber) { border-color: #e74c3c; } .layanan-card:hover:has(.box-statistik) { border-color: #9b59b6; } /* Bulatan Ikon Layanan */ /* BULATAN LOGO LAYANAN */ .layanan-icon-box { width: 65px; height: 65px; display: flex; justify-content: center; align-items: center; border-radius: 50%; margin-bottom: 20px; transition: all 0.3s ease; } .svg-layanan-icon { width: 30px; height: 30px; transition: fill 0.3s ease; } /* 1. Warna Informasi & Komunikasi Publik (Biru) */ .box-ikp { background-color: rgba(52, 152, 219, 0.15); } .box-ikp .svg-layanan-icon { fill: #3498db; } .layanan-card:hover .box-ikp { background-color: #3498db;} .layanan-card:hover .box-ikp .svg-layanan-icon { fill: #ffffff; } /* 2. Warna Aplikasi e-Government (Oranye) */ .box-egov { background-color: rgba(230, 126, 34, 0.15); } .box-egov .svg-layanan-icon { fill: #e67e22; } .layanan-card:hover .box-egov { background-color: #e67e22; } .layanan-card:hover .box-egov .svg-layanan-icon { fill: #ffffff; } /* 3. Warna Keamanan Informasi & Persandian (Merah Proteksi) */ .box-siber { background-color: rgba(231, 76, 60, 0.15); } .box-siber .svg-layanan-icon { fill: #e74c3c; } .layanan-card:hover .box-siber { background-color: #e74c3c; } .layanan-card:hover .box-siber .svg-layanan-icon { fill: #ffffff; } /* 4. Warna Statistik Sektoral (Ungu) */ .box-statistik { background-color: rgba(155, 89, 182, 0.15); } .box-statistik .svg-layanan-icon { fill: #9b59b6; } .layanan-card:hover .box-statistik { background-color: #9b59b6; } .layanan-card:hover .box-statistik .svg-layanan-icon { fill: #ffffff; } .layanan-card:hover .layanan-icon-box { background-color: #3498db; color: #ffffff; } /* Judul Sub-Menu Layanan */ .layanan-card h3 { font-size: 18px; color: var(--txt-h3layanan); margin: 0 0 15px 0; font-weight: bold; } /* Teks Deskripsi Sub-Menu Layanan */ .layanan-card p { font-size: 14px; color: var(--teks-terang); line-height: 1.6; margin: 0; text-align: center; /* Memastikan baris kalimat rapi di tengah */ } /* SECTION DAFTAR PENGGUNA UTAMA */ .section-daftar { width: 100%; background-color: var(--bg-halaman); /* Warna abu-abu lembut untuk membedakan dengan section layanan */ padding: 80px 0; box-sizing: border-box; display: flex; justify-content: center; align-items: center; } .section-daftar .wrapper-konten { width: 100%; max-width: 1200px; padding: 0 20px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; } .daftar-header-text { text-align: center; margin-bottom: 50px; margin-top: 50px; width: 100%; padding : 20px 10px 20px 10px; /* background: linear-gradient(var(--bg-daftar-head)), url('../img/section/4.jpg'); */ } .daftar-header-text h2 { font-size: 20px; color: var(--txt--h2daftar); margin: 0 0 12px 0; font-weight: bold; } .daftar-header-text p { font-size: 16px; color: var(--txt--pdaftar); margin: 0; } /* GRID PEMBUNGKUS KARTU */ .daftar-grid { display: flex; flex-direction: row; justify-content: center; align-items: stretch; gap: 30px; width: 100%; max-width: 1200px; box-sizing: border-box; } /* KARTU DAFTAR PENGGUNA */ .daftar-card { background-color: var(--bg-card); /* Putih kontras agar menonjol di atas latar f5f6fa */ border: 1px solid var(--border-warna); border-radius: 12px; padding: 40px 25px; flex: 1; max-width: 340px; box-sizing: border-box; transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; text-align: center; } /* Efek Hover */ .daftar-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); background-color: var(--bg-hover); border-color: var(--bg-hover-border); /* Warna hijau senada dengan tombol login aksen sukses */ } /* Bulatan Ikon Pengguna */ /* PENGATURAN DASAR IKON DAFTAR PENGGUNA */ .daftar-icon-box { width: 70px; height: 70px; display: flex; justify-content: center; align-items: center; border-radius: 50%; margin-bottom: 25px; transition: all 0.3s ease; } .svg-daftar-icon { width: 32px; height: 32px; transition: fill 0.3s ease; } /* 1. PEMBEDAAN WARNA KELOMPOK PNS (AKSEN BIRU) */ .icon-pns { background-color: rgba(52, 152, 219, 0.15); } .icon-pns .svg-daftar-icon { fill: #3498db; } /* Efek Hover PNS */ .daftar-card:hover .icon-pns { background-color: #3498db; } .daftar-card:hover .icon-pns .svg-daftar-icon { fill: #ffffff; } /* 2. PEMBEDAAN WARNA KELOMPOK PPPK (AKSEN UNGU) */ .icon-pppk { background-color: rgba(155, 89, 182, 0.15); } .icon-pppk .svg-daftar-icon { fill: #9b59b6; } /* Efek Hover PPPK */ .daftar-card:hover .icon-pppk { background-color: #9b59b6; } .daftar-card:hover .icon-pppk .svg-daftar-icon { fill: #ffffff; } /* 3. PEMBEDAAN WARNA KELOMPOK NON ASN (AKSEN HIJAU) */ .icon-nonasn { background-color: rgba(46, 204, 113, 0.15); } .icon-nonasn .svg-daftar-icon { fill: #2ecc71; } /* Efek Hover Non ASN */ .daftar-card:hover .icon-nonasn { background-color: #2ecc71; } .daftar-card:hover .icon-nonasn .svg-daftar-icon { fill: #ffffff; } /* KUSTOMISASI WARNA BORDER KARTU KETIKA DI-HOVER */ .daftar-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); background-color: var(--bg-kontainer); } /* Menyesuaikan warna border berdasarkan boks yang aktif saat didekati */ .daftar-card:hover:has(.icon-pns) { border-color: #3498db; } .daftar-card:hover:has(.icon-pppk) { border-color: #9b59b6; } .daftar-card:hover:has(.icon-nonasn) { border-color: #2ecc71; } .daftar-card:hover .daftar-icon-box { background-color: #2ecc71; color: #ffffff; } .daftar-card h3 { font-size: 18px; color: var(--txt--h3daftar); margin: 0 0 15px 0; font-weight: bold; } .daftar-card p { font-size: 16px; color: var(--teks-terang); line-height: 1.6; margin: 0; text-align: center; } /* --- Tambahkan kode ini di bagian paling bawah file style.css Anda --- */ /* SECTION KONTAK UTAMA */ .section-kontak { width: 100%; background-color: var(--bg-kontainer); padding: 80px 0; box-sizing: border-box; display: flex; justify-content: center; align-items: center; } .section-kontak .wrapper-konten { width: 100%; max-width: 1200px; padding: 0 20px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; } .kontak-header-text { text-align: center; margin-bottom: 50px; margin-top: 50px; width: 100%; padding : 20px 10px 20px 10px; /* background: linear-gradient(var(--bg-kontak-head)), url('../img/section/1.jpg'); */ } .kontak-header-text h2 { font-size: 20px; color: var(--txt-h2kontak); margin: 0 0 12px 0; font-weight: bold; } .kontak-header-text p { font-size: 16px; color: var(--txt-pkontak); margin: 0; } /* WADAH UTAMA STRUKTUR DUA KOLOM */ .kontak-container-box { display: flex; flex-direction: row; gap: 40px; width: 100%; align-items: stretch; } /* KOLOM KIRI: INFO & MAPS */ .kontak-info-maps { flex: 1; display: flex; flex-direction: column; gap: 25px; } .info-kartu-kontak { background-color: var(--bg-halaman); border: 1px solid var(--border-warna); padding: 25px; border-radius: 8px; display: flex; flex-direction: column; gap: 20px; } .item-info-kontak { display: flex; align-items: flex-start; gap: 15px; } .item-info-kontak i { font-size: 20px; color: #3498db; margin-top: 3px; width: 25px; text-align: center; } .item-info-kontak h4 { margin: 0 0 4px 0; font-size: 14px; color: var(--teks-utama); font-weight: bold; } .item-info-kontak p { margin: 0; font-size: 13px; color: var(--teks-redup); line-height: 1.4; } .item-info-kontak a { margin: 0; font-size: 13px; color: var(--teks-redup); line-height: 1.4; text-decoration: none; } .maps-wrapper { width: 100%; height: 250px; border-radius: 8px; overflow: hidden; border: 1px solid #eaeded; } /* KOLOM KANAN: FORM BOX PENGIRIMAN */ .kontak-form-box { flex: 1; background-color: var(--bg-halaman); /* Senada dengan warna sidebar login */ padding: 35px 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); box-sizing: border-box; } .input-form-kontak { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; width: 100%; } .input-form-kontak label { font-size: 12px; color: var(--teks-terang); font-weight: bold; } .input-form-kontak label i { margin-right: 5px; color: var(--teks-redup); } .input-form-kontak input, .input-form-kontak select, .input-form-kontak textarea { width: 100%; padding: 11px 12px; border: 1px solid rgba(255, 255, 255, 0.1); background-color: rgba(0, 0, 0, 0.15); color: var(--teks-utama); border-radius: 4px; box-sizing: border-box; font-size: 14px; font-family: inherit; } .input-form-kontak select option { background-color: var(--bg-halaman); color: var(--teks-terang); } .input-form-kontak input:focus, .input-form-kontak select:focus, .input-form-kontak textarea:focus { outline: none; border-color: #2ecc71; } /* TOMBOL KIRIM WHATSAPP */ .btn-kirim-wa { width: 100%; padding: 13px; background-color: var(--tab-aktif); color: var(--teks-terang); border: none; border-radius: 4px; font-weight: bold; font-size: 15px; cursor: pointer; transition: background-color 0.2s; margin-top: 10px; display: flex; justify-content: center; align-items: center; gap: 8px; } .btn-kirim-wa:hover { background-color: var(--bg-hover); } /* MENU NAVIGASI DESTOP */ .nav-menu { display: flex; gap: 10px; } .nav-link { color: var(--teks-terang); text-decoration: none; padding: 8px 14px; font-size: 13px; font-weight: bold; border-radius: 4px; transition: all 0.2s; } .nav-link i { margin-right: 4px; } .nav-link:hover, .nav-link.active { background-color: #3498db; color: #ffffff; } /* TOMBOL MENU HAMBURGER (Sembunyi di PC) */ .hamburger-menu { display: none; background: none; border: none; color: var(--teks-terang); font-size: 22px; cursor: pointer; padding: 0; margin: 0; } /* Memastikan konten utama mengambil ruang tersisa, mendorong footer ke dasar halaman */ .halaman-utama { flex: 1 0 auto; display: flex; justify-content: center; background: var(--bg-halaman-utama); align-items: center; /* Di layar besar, konten tetap di tengah vertikal */ width: 100%; /* Memberi padding atas sebesar 90px agar konten beranda tidak tertutup/tenggelam di bawah header fixed */ padding-top: 120px; padding-bottom: 50px; box-sizing: border-box; } body { display: flex; justify-content: center; /* Tetap di tengah secara horizontal */ align-items: center; /* Default layar besar: di tengah secara vertikal */ } /* 2. KONTAINER KHUSUS */ .wrapper-konten { width: 100%; max-width: 1200px; padding: 20px; /* Diubah dari padding: 0 20px agar ada jarak atas-bawah */ box-sizing: border-box; z-index:1 ; /* Di belakang kotak login */ } .container-row { display: flex; flex-direction: row; width: 100%; box-shadow: 0 4px 15px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; } .kolom { padding: 30px; box-sizing: border-box; } /* (Bagian style .header-instansi dan .garis-pemisah tetap sama seperti sebelumnya) */ .header-instansi { display: flex; align-items: center; gap: 15px; } .logo { width: 60px; height: 60px; object-fit: contain; } .info-instansi { display: flex; flex-direction: column; } .nama-instansi { margin: 0; font-size: 20px; font-weight: bold; color: #2c3e50; } .nama-layanan { margin: 4px 0 0 0; font-size: 14px; color: #7f8c8d; } .garis-pemisah { width: 100%; height: 2px; background-color: #eaeded; margin: 20px 0 25px 0; } button_XXXX { padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; margin-top: 15px; font-weight: bold; } .kiri { flex: 0 0 55%; background-color: var(--bg-kolom-kiri); color: var(--teks-utama); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .kanan { flex: 1 1 45%; background-color: var(--bg-kolom-kanan); color: var(--teks-terang); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* --- Tambahkan kode ini di bagian bawah file style.css Anda --- */ /* Bingkai luar slideshow untuk memposisikan tombol navigasi */ .slideshow-wrapper { position: relative; width: 100%; margin-bottom: 25px; touch-action: pan-y; /* Mengizinkan scroll vertikal halaman saat mengusap slideshow */ } /* KONTAINER SLIDESHOW UTAMA (Ukuran Terkunci) */ .slideshow-container { width: 100%; /* Default Layar Besar: Mengunci rasio 3:4 Landscape (Lebar 4 bagian, Tinggi 3 bagian) */ aspect-ratio: 4 / 3; background-color:; /* Warna ruang kosong di sekitar gambar */ border-radius: 6px; overflow: hidden; position: relative; } /* PENGATURAN GAMBAR SLIDESHOW */ .slideshow-container img { width: 100%; height: 100%; /* KUNCI: Gambar tampil 100% utuh tanpa terpotong/crop */ object-fit: contain; position: absolute; top: 0; left: 0; opacity: 0; z-index: 1; pointer-events: none; } /* Menampilkan gambar yang sedang aktif */ .slideshow-container img.aktif { opacity: 1; z-index: 2; animation: fadeAnim 0.8s ease-in-out; /* Jalankan animasi memudar selama 0.8 detik */ } @keyframes fadeAnim { from { opacity: 0; } to { opacity: 1; } } /* Tombol Panah Navigasi Manual (Opsional) */ .panah { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: white; padding: 12px; border: none; border-radius: 50%; cursor: pointer; font-size: 18px; z-index: 10; margin-top: 0; /* Mereset margin tombol bawaan sebelumnya */ transition: background-color 0.2s; display:none; } .panah:hover { background-color: rgba(0, 0, 0, 0.8); } .kiri-panah { left: 15px; } .kanan-panah { right: 15px; } /* WADAH TEKS CAPTION MELAYANG */ .slideshow-caption { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); /* Efek gradasi gelap agar teks jelas */ color: white; padding: 25px 20px 15px 20px; box-sizing: border-box; font-size: 16px; text-align: center; z-index: 5; /* Di atas gambar (z-index: 2) tapi di bawah panah (z-index: 10) */ opacity: 0; visibility: hidden; transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; } /* MENAMPILKAN CAPTION SAAT AKTIF DENGAN ANIMASI */ .slideshow-caption.aktif { opacity: 1; visibility: visible; animation: fadeCaption 0.8s ease-in-out; } /* Kunci Animasi Memudar Khusus Teks */ @keyframes fadeCaption { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* KONTAINER KHUSUS UMPAN BERITA */ .newsfeed-wrapper { width: 100%; /* Menjamin lebar sama dengan slideshow (100% dari kolom kiri) */ height: 120px; /* KUNCI: Mengunci tinggi agar pergantian baris berita tidak mengubah ukuran kontainer utama */ margin-bottom: 25px; /* Jarak ke konten di bawahnya */ border-radius: 6px; box-shadow: inset 0 0 0 1px #eaeded; /* Frame pembatas halus di sisi luar widget */ background-color: #ffffff; /* Latar belakang standar saat memuat feed */ overflow: hidden; /* Memotong konten tersembunyi jika feed mencoba melar */ box-sizing: border-box; } /* Memastikan elemen iframe di dalamnya mengisi ruang dengan patuh */ .newsfeed-wrapper iframe { display: block; width: 100% !important; height: 100% !important; } /* --- Tambahkan kode ini di bagian bawah file style.css Anda --- */ /* --- Perbarui atau tambahkan kode ini di style.css --- */ /* BOX UTAMA LOGIN (Memenuhi lebar penuh kolom kanan) */ .login-box { width: 100%; background-color: var(--bg-login-box); padding: 20px 20px; border-radius: 20px; margin-top:0px; box-sizing: border-box; position:relative; } .login-box h3 { margin: 0 0 5px 0; color: #ffffff; font-size: 20px; } .login-subtitle { font-size: 13px; color: var(--teks-terang); margin: 2px 0 2px 0; text-align: center; /* MENGUBAH TEKS MENJADI RATA TENGAH */ } /* SISTEM DUA TAB (Membagi ruang 50% - 50% penuh) */ .login-tabs { display: flex; background-color: rgba(0, 0, 0, 0.2); padding: 4px; border-radius: 6px; margin-bottom: 20px; width: 100%; box-sizing: border-box; } .tab-btn { flex: 1; /* Membuat kedua tab berukuran sama besar memenuhi container */ background: none; border: none; color: var(--teks-redup); padding: 10px 5px; font-size: 13px; font-weight: bold; cursor: pointer; border-radius: 4px; transition: all 0.2s; margin-top: 0; } .tab-btn.active { background-color: var(--btn-login); color: var(--teks-layanan); } .tab-content { display: none; } .tab-content.active { display: block; } /* INPUT FORM */ .input-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; width: 100%; border-radius: 25px; } .input-group label { font-size: 12px; color: var(--teks-redup); font-weight: bold; } .input-group input { width: 100%; padding: 11px 12px; border: 1px solid rgba(255, 255, 255, 0.1); background-color: rgba(0, 0, 0, 0.15); color: var(--teks-terang); border-radius: 25px; box-sizing: border-box; font-size: 14px; } /* KOTAK CENTANG SYARAT & KETENTUAN */ /* KOTAK CENTANG SYARAT & KETENTUAN */ .checkbox-group { display: flex; align-items: center; justify-content:center; gap: 10px; margin: 10px 0; width: 100%; } .checkbox-group input[type="checkbox"] { margin-top: 2px; cursor: pointer; } .checkbox-group label { font-size: 12px; color: var(--teks-redup); line-height: 1.4; cursor: pointer; } .checkbox-group label a { color: var(--text-link); text-decoration: none; } .checkbox-group label a:hover { text-decoration: underline; } /* TOMBOL LOGIN UTAMA */ .btn-login { width: 100%; padding: 12px; background-color: var(--bg-rjbtn2); color: var(--teks-utama); border: none; border-radius: 25px; font-weight: bold; font-size: 14px; cursor: pointer; transition: all 0.2s; margin: 10px 0px 10px 0px; } .btn-login:hover { background-color: var(--bg-hover); } /* Efek tombol ketika dikunci (belum centang syarat) */ .btn-login:disabled { background-color: #7f8c8d; color: #bdc3c7; cursor: not-allowed; opacity: 0.6; } /* STRUKTUR SEPARATOR DAN TOMBOL TAMU */ .pembatas-tamu { text-align: center; font-size: 11px; color: #7f8c8d; text-transform: uppercase; margin: 10px 0 10px 0; position: relative; } .divider { display: flex; align-items: center; text-align: center; color: var(--text-sub); font-size: 11px; margin: 8px 0; } .divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--input-border); } .divider:not(:empty)::before { margin-right: .5em; } .divider:not(:empty)::after { margin-left: .5em; } .btn-tamu { width: 100%; padding: 11px; background-color: var(--bg-rjbtn1); color: var(--teks-redup); border: 0px solid var(--btn-bgdrop); border-radius: 25px; font-weight: bold; font-size: 13px; cursor: pointer; display: block; text-align: center; text-decoration: none; box-sizing: border-box; transition: all 0.2s; } .btn-tamu:hover { background-color: var(--bg-hover); color: var(--teks-terang); } /* --- Tambahkan kode ini di bagian bawah style.css Anda --- */ /* Efek tombol Tamu ketika terkunci (belum centang syarat) */ .btn-tamu.disabled { border-color: #7f8c8d !important; color: #bdc3c7 !important; background-color: transparent !important; cursor: not-allowed !important; opacity: 0.6; /* Mematikan fungsi klik link pada browser */ pointer-events: none; } /* --- Tambahkan kode ini di bagian bawah style.css Anda --- */ /* AREA UCAPAN SELAMAT DATANG */ .welcome-section { margin-bottom: 12px; text-align: center; } /* Mengubah style judul bawaan sebelumnya agar tidak tabrakan */ .login-box h3.welcome-title { font-size: 18px; font-weight: bold; color: var(--txt-salamdatang); margin: 0; } .welcome-greeting { font-size: 16px; font-weight: 500; color: var(--txt-salamdinamis); /* Warna hijau cerah agar terlihat segar */ margin: 1px 0 0 0; text-transform: capitalize; } /* Mengatur ulang margin subtitle agar jaraknya pas */ .login-subtitle { text-align: center; /* MENGUBAH TEKS MENJADI RATA TENGAH */ padding: 5px; } .login-error-msg { margin-top: 15px; background-color: rgba(231, 76, 60, 0.2); border: 1px solid #e74c3c; color: #f1c40f; padding: 10px; border-radius: 4px; font-size: 12px; text-align: center; } /* --- Tambahkan kode ini di bagian bawah style.css Anda --- */ /* BINGKAI LUAR MODAL (Melayang Penuh se-Layar) */ .modal-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); /* Efek gelap transparan di luar kotak */ z-index: 9999; /* Memastikan berada di atas semua elemen termasuk footer */ display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; } /* Memunculkan modal dengan animasi memudar */ .modal-wrapper.show { opacity: 1; visibility: visible; } /* KOTAK DIALOG UTAMA */ .modal-box { background-color: var(--bg-halaman); width: 90%; max-width: 500px; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); overflow: hidden; display: flex; flex-direction: column; max-height: 80vh; /* Membatasi tinggi kotak agar tidak melebihi layar */ transform: scale(0.8); transition: transform 0.3s ease-in-out; color: var(--teks-utama); } .modal-wrapper.show .modal-box { transform: scale(1); } /* BAGIAN ATAS MODAL */ .modal-header { padding: 15px 20px; background-color: var(--bg-headerfooter); color: var(--teks-utama); display: flex; justify-content: space-between; align-items: center; } .modal-header h4 { margin: 0; font-size: 16px; } .modal-header h4 i { margin-right: 8px; color: var(--text-h3); } .btn-tutup-modal { background: none; border: none; color: var(--teks-terang); font-size: 24px; cursor: pointer; line-height: 1; } /* AREA ISI TEKS (BISA DI-SCROLL) */ .modal-body { padding: 20px; overflow-y: auto; /* KUNCI: Membuat teks bisa di-scroll jika panjang */ font-size: 13px; line-height: 1.6; } .modal-body h5 { margin: 0 0 5px 0; color: var(--teks-utama); font-size: 14px; font-weight: bold; } .modal-body p { margin: 0 0 15px 0; color: var(--teks-redup); text-align: justify; } /* BAGIAN BAWAH MODAL */ .modal-footer { padding: 15px 20px; background-color: var(--bg-halaman); border-top: 1px solid var(--bg-halaman-utama); display: flex; justify-content: flex-end; } .btn-setuju-modal { padding: 10px 20px; background-color: var(--bg-rjbtn2); color: var(--teks-terang); border: none; border-radius: 4px; font-weight: bold; cursor: pointer; transition: background-color 0.2s; } .btn-setuju-modal:hover { background-color: var(--bg-hover); } /* STRUKTUR UTAMA FOOTER */ .footer-tetap { flex-shrink: 0; /* Mencegah footer gepeng saat zoom */ width: 100%; background-color: var(--bg-headerfooter); /* Senada dengan warna kolom kanan/sidebar */ color: var(--teks-terang); padding: 15px 0; font-size: 14px; box-shadow: 0 -4px 10px rgba(0,0,0,0.05); } /* Kontainer dalam footer untuk mengatur posisi */ .footer-container { max-width: 1200px; /* Sejajar dengan kontainer khusus atas */ margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; /* Memisahkan sosmed di kiri dan teks di kanan */ align-items: center; box-sizing: border-box; } /* STRUKTUR UKURAN DAN WARNA IKON SVG FOOOTER */ .svg-icon { width: 16px; /* Ukuran proporsional lambang ikon */ height: 16px; fill: #ffffff; /* Warna default ikon putih murni */ transition: fill 0.2s ease; display: inline-block; vertical-align: middle; } /* Kelompok Ikon Sosial Media */ .footer-sosmed { display: flex; gap: 15px; } /* Memastikan tag anchor flexbox berpusat sempurna menampung SVG */ .footer-sosmed a { color: #ffffff; width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); transition: background-color 0.3s, transform 0.2s; text-decoration: none; } /* Efek saat ikon didekati kursor */ /* Efek saat boks bulatan didekati kursor */ .footer-sosmed a:hover { background-color: #3498db; /* Berubah aksen biru */ transform: translateY(-2px); } /* Opsional: Mengubah warna SVG menjadi sedikit berbeda saat di-hover */ .footer-sosmed a:hover .svg-icon { fill: #ffffff; } /* Penataan teks hak cipta agar pas di tengah layar besar */ .footer-hak-cipta { flex-grow: 1; text-align: center; margin-right: 140px; /* Mengimbangi ruang sosmed agar teks presisi di tengah layar */ color: var(--teks-layanan); font-size: 0.8em ; } /* --- Tambahkan atau Ganti kode bagian bawah style.css Anda dengan ini --- */ /* STRUKTUR UKURAN DAN WARNA IKON SVG INFORMASI KONTAK */ .svg-kontak-icon { width: 24px; /* Ukuran lebar ikon */ height: 24px; /* Ukuran tinggi ikon */ fill: #3498db; /* Warna biru aksen bawaan instansi */ flex-shrink: 0; /* Mencegah ikon menjadi lonjong/gepeng saat teks melar */ margin-top: 2px; /* Sedikit dorongan ke bawah agar sejajar rapi dengan judul h4 */ display: inline-block; } /* Memastikan susunan item informasi berjejer rapi di samping ikon */ .item-info-kontak { display: flex; align-items: flex-start; gap: 15px; /* Jarak antara ikon SVG dan blok teks di sampingnya */ width: 100%; } /* --- Tambahkan kode ini di bagian bawah style.css Anda --- */ /* KELOMPOK FITUR KANAN HEADER */ .header-aksi-kanan { display: flex; align-items: center; gap: 15px; /* Jarak antara menu bahasa dan tombol hamburger */ } /* CONTAINER DROPDOWN BAHASA */ .lang-selector { display: flex; align-items: center; background-color: var(--bg-lang-container); padding: 6px 10px; border-radius: 20px; border: 1px solid #dcdde1; gap: 6px; transition: all 0.2s ease; } .lang-selector:hover { border-color: #3498db; background-color: var(--bg-hover); } .lang-icon { color: var(--teks-utama); font-size: 14px; } /* ELEMEN SELECT DROPDOWN */ .lang-selector select { background: none; border: none; color: #2c3e50; font-size: 13px; font-weight: bold; cursor: pointer; outline: none; padding-right: 4px; font-family: inherit; } /* Menonaktifkan panah bawaan browser untuk estetika minimalis (Opsional) */ .lang-selector select::-ms-expand { display: none; } /* --- Tambahkan kode ini di bagian bawah style.css Anda --- */ /* MENATA KOTAK GOOGLE TRANSLATE AGAR SESUAI TEMA LAYOUT */ .lang-selector-google { display: inline-block; vertical-align: middle; } /* Merapikan select box bawaan google */ .goog-te-combo { padding: 6px 10px; border-radius: 20px; border: 1px solid #dcdde1; background-color: #f1f2f6; color: #2c3e50; font-size: 13px; font-weight: bold; outline: none; cursor: pointer; font-family: inherit; transition: all 0.2s ease; } .goog-te-combo:hover { border-color: #3498db; background-color: #ffffff; } /* Menyembunyikan banner "Google Translate" di bagian paling atas layar */ .goog-te-banner-frame.skiptranslate, .goog-te-banner-frame { display: none !important; } body { top: 0px !important; } /* Menyembunyikan tooltip pop-up saat kursor mengarah ke teks yang diterjemahkan */ .goog-text-highlight { background: none !important; box-shadow: none !important; } /* --- Tambahkan kode ini di bagian bawah style.css Anda --- */ /* INDIKATOR KARTU INTERAKTIF BISA DIKLIK */ .bisa-diklik { cursor: pointer !important; } /* Ukuran Ikon SVG WhatsApp */ .icon-wa { width: 20px; height: 20px; } /* --- Tambahkan atau sesuaikan kode ini di bagian bawah style.css Anda --- */ /* BINGKAI MAPS */ .maps-wrapper { width: 100%; height: 250px; border-radius: 8px; overflow: hidden; border: 1px solid #eaeded; background-color: var(--bg-halaman); /* Warna abu-abu khas dasar peta saat memuat */ position: relative; } /* GAYA VISUAL GAMBAR PETA OFFLINE */ .peta-offline-img { width: 100%; height: 100%; object-fit: cover; /* Menjamin gambar peta memenuhi boks secara proporsional */ display: block; transition: transform 0.3s ease, filter 0.3s ease; cursor: pointer; } /* Efek zoom-in halus saat peta didekati kursor (Desktop) */ .peta-offline-img:hover { transform: scale(1.03); filter: brightness(0.95); } /* --- Tambahkan atau Ganti kode bagian paling bawah style.css Anda dengan ini --- */ /* TOMBOL BULAT MELAYANG UTAMA */ .tombol-tema-melayang { position: fixed; bottom: 70px; /* Di atas footer desktop */ right: 25px; /* Pojok kanan bawah */ width: 50px; height: 50px; background-color: #3498db; color: #ffffff; border: none; border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); cursor: pointer; z-index: 999; display: flex; justify-content: center; align-items: center; font-size: 24px; /* Ukuran simbol Unicode diperbesar agar jelas */ transition: transform 0.2s ease, background-color 0.3s ease; overflow: hidden; } /* ELEMEN PEMBUNGKUS IKON UNTUK ANIMASI BERPUTAR */ .icon-putar { display: inline-block; line-height: 1; /* Efek animasi berputar pelan mengelilingi secara terus-menerus */ animation: rotasiMatahari 12s linear infinite; } /* Kunci Animasi Putar Garis-Garis Matahari */ @keyframes rotasiMatahari { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* KETIKA MODE GELAP AKTIF: Matikan animasi putar karena simbol berubah jadi Bulan */ body.dark-mode .icon-putar { animation: none; transform: rotate(0deg); } /* Efek sentuhan kursor pada tombol melayang */ .tombol-tema-melayang:hover { transform: scale(1.08); background-color: #2980b9; } ### 2. Penambahan CSS untuk Kotak Status (`style.css`) Tambahkan aturan penataan grid ringkas berikut ke bagian paling bawah file **`style.css`** Anda untuk merapikan baris detail data pemakaian kuota internet pengguna agar tersusun rapi. /* PENGATURAN AREA PANEL STATUS */ .status-box { border: 1px solid rgba(255, 255, 255, 0.1); } .status-user-welcome { font-size: 14px; color: #ecf0f1; text-align: center; margin: 10px 0 20px 0; } .user-highlight { color: #2ecc71; /* Sorotan warna hijau untuk nama user aktif */ font-size: 15px; } /* GRID INFORMASI PEMAKAIAN */ .status-info-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; width: 100%; } .status-item { display: flex; justify-content: space-between; /* Label di kiri, nilai angka di kanan */ align-items: center; padding: 10px 14px; background-color: rgba(0, 0, 0, 0.15); border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.05); box-sizing: border-box; } /* Desain baris khusus untuk sisa kuota waktu */ .status-item.highlight-status { background-color: rgba(230, 126, 34, 0.15); border-color: rgba(230, 126, 34, 0.3); } .status-label { font-size: 12px; color: #bdc3c7; font-weight: bold; } .status-label i { margin-right: 6px; color: #3498db; width: 15px; text-align: center; } .status-item.highlight-status .status-label i { color: #e67e22; } .status-value { font-size: 13.5px; color: #ffffff; font-family: 'Courier New', Courier, monospace; /* Gaya font mesin monospaced untuk angka kuota */ font-weight: bold; } /* TOMBOL LOGOUT HOTSPOT */ .btn-logout-hotspot { background-color: #e74c3c; /* Tombol putus koneksi berwarna merah cerah */ } .btn-logout-hotspot:hover { background-color: #c0392b; } /* PENGATURAN PANEL LOGOUT */ .logout-box-panel { border: 1px solid rgba(255, 255, 255, 0.1); } /* Desain boks khusus ringkasan total trafik data (gabungan unduh & unggah) */ .status-item.highlight-logout { background-color: rgba(46, 204, 113, 0.15); border-color: rgba(46, 204, 113, 0.3); } .status-item.highlight-logout .status-label i { color: #2ecc71; } /* TOMBOL MASUK KEMBALI */ .btn-relogin-hotspot { background-color: #3498db; /* Tombol masuk kembali berwarna biru aksen dinamis */ margin-bottom: 10px; } .btn-relogin-hotspot:hover { background-color: #2980b9; } /* PANEL GANGGUAN INFRASTRUKTUR */ .gangguan-box-panel { border: 1px solid #e74c3c; /* Bingkai merah tegas */ background-color: #2c3e50; display: flex; flex-direction: column; align-items: center; } /* Animasi Ikon Segitiga Kedap-Kedip Lembut */ .gangguan-icon-alert { font-size: 55px; color: #e74c3c; margin-bottom: 15px; animation: alertBlink 2s ease-in-out infinite; } @keyframes alertBlink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.96); } } .gangguan-text-p { font-size: 13.5px; color: #ecf0f1; text-align: center; line-height: 1.5; margin: 0 0 20px 0; } .item-gangguan-detail { border-left: 3px solid #e74c3c !important; /* Aksen penanda merah di sisi kiri baris info */ } .value-gangguan { color: #f1c40f !important; /* Teks detail berwarna kuning perhatian */ font-size: 12.5px !important; } /* TOMBOL REFRESH / CEK KEMBALI */ .btn-refresh-gangguan { background-color: #e67e22; /* Tombol segarkan berwarna jingga operasional */ display: flex; justify-content: center; align-items: center; gap: 8px; } .btn-refresh-gangguan:hover { background-color: #d35400; } .btn-refresh-gangguan i { font-size: 14px; } #intergramRoot iframe { width: 100%; height: 100%; float: none; /* optional, since container already positions it */ } /* ====== TOMBOL TEMA BULAT MELAYANG (FLOATING ACTION BUTTON) ====== */ .floating-theme-btn { position: fixed; bottom: 130px; right: 20px; width: 50px; height: 50px; border-radius: 50%; background-color: var(--btn-tema); border: none; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 9999; /* Memastikan berada di lapisan paling atas */ transition: transform 0.2s ease, background-color 0.3s; } .floating-theme-btn:hover { transform: scale(1.1); /* Efek sedikit membesar saat diarahkan kursor */ background-color: var(--bg-hover); } /* Membuat Ikon Menggunakan CSS murni (Bulan / Matahari) */ .theme-icon { position: relative; width: 20px; height: 20px; border-radius: 50%; transition: all 0.3s ease; } /* TAMPILAN IKON TEMA GELAP (Bentuk Bulan Sabit) */ :root .theme-icon { box-shadow: inset -6px -6px 0px 0px #fbee00; background-color: transparent; } /* TAMPILAN IKON TEMA TERANG (Bentuk Matahari) */ [data-theme="light"] .theme-icon { box-shadow: none; background-color: #ffffff; transform: scale(0.8); } /* Sinar Matahari */ [data-theme="light"] .theme-icon::before { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border: 2px dashed #ffffff; border-radius: 50%; animation: rotateSun 20s linear infinite; } @keyframes rotateSun { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .fixed-whatsapp { position: fixed; bottom: 75px; right: 20px; width: 50px; height: 50px; background-color: #25d366; border-radius: 50px; display: flex; justify-content: center; align-items: center; z-index: 100; transition: all 0.3s ease; text-decoration: none; color: var(--teks-terang); cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: all 0.3s ease; text-decoration: none; border: none; cursor: pointer; /* Memicu animasi denyut cahaya secara terus-menerus */ /*animation: pendaranOtomatis 2s infinite;*/ } @keyframes pendaranOtomatis { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7), 0 8px 15px rgba(0, 0, 0, 0.2); } 70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0), 0 8px 15px rgba(0, 0, 0, 0.2); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 8px 15px rgba(0, 0, 0, 0.2); } } .fixed-whatsapp:hover { transform: scale(1.1); /* Efek sedikit membesar saat diarahkan kursor */ background-color: var(--bg-hover); /* Efek cahaya berpendar (Glow Effect) */ box-shadow: 0px 0px 20px 10px rgba(37, 211, 102, 0.6), 0px 12px 20px rgba(0, 0, 0, 0.3); } .fixed-whatsapp svg { width: 35px; height: 35px; fill: var(--teks-utama); /* Mengubah warna ikon menjadi putih */ } /* --- KODE TOMBOL TELEGRAM --- */ .telegram-float { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; background-color: #0088cc; /* Warna biru Telegram */ color: #ffffff; border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 99; transition: all 0.3s ease; text-decoration: none; border: none; cursor: pointer; /* Memicu animasi denyut cahaya secara terus-menerus */ animation: pendaranTelegramOtomatis 2s infinite; } /* Efek saat kursor menyentuh tombol (Hover) */ .telegram-float:hover { background-color: #0077b5; transform: scale(1.1); /* Tombol sedikit membesar saat di-hover */ } /* --- KODE SVG --- */ .telegram-float svg { width: 32px; height: 32px; fill: #ffffff; /* Mengubah warna ikon menjadi putih */ transform: translate(-2px, 1px); /* Penyesuaian presisi posisi logo Telegram */ } /* --- ANIMASI BERDENYUT (PULSE EFFECT) --- */ @keyframes pendaranTelegramOtomatis { 0% { /* Bayangan awal rapat dengan tombol */ box-shadow: 0 0 0 0 rgba(0, 136, 204, 0.7), 0 8px 15px rgba(0, 0, 0, 0.2); } 70% { /* Bayangan melebar keluar dan mulai memudar (transparan) */ box-shadow: 0 0 0 15px rgba(0, 136, 204, 0), 0 8px 15px rgba(0, 0, 0, 0.2); } 100% { /* Bayangan menghilang total sebelum mengulang kembali */ box-shadow: 0 0 0 0 rgba(0, 136, 204, 0), 0 8px 15px rgba(0, 0, 0, 0.2); } } /* CONTAINER UTAMA UNTUK MENYUSUN VERTIKAL DARI ATAS KE BAWAH */ .panel-audio-vertikal { position: fixed; bottom: 250px; /* Sesuai dengan posisi bottom asli Anda */ right: 20px; /* Sesuai dengan posisi right asli Anda */ display: flex; flex-direction: column; /* Menyusun elemen dari atas ke bawah */ gap: 15px; /* Jarak vertikal antar tombol */ z-index: 999; } /* Base Style untuk Kedua Tombol (Mengadopsi .audio-control asli Anda) */ .audio-control { background: var(--btn-music); border: 1px solid var(--bg-halaman-utama); padding: 12px; border-radius: 50%; cursor: pointer; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.462); transition: all 0.3s ease; } .audio-control:hover { background: rgba(56, 239, 126, 0.838); border-color: #00ff62; transform: scale(1.1); } .audio-control svg { width: 24px; height: 24px; fill: var(--teks-redup); transition: fill 0.3s ease; } /* Style saat Musik Latar Aktif / Efek Suara Unmute (Menggunakan Animasi Pulse Asli Anda) */ .audio-control.playing { background: var(--text-appbar-title); border-color: var(--bg-halaman-utama); animation: pulse 2s infinite; } .audio-control.playing svg { fill: var(--teks-terang); } /* Teks Info Judul Lagu di Bawah (Tetap seperti asli Anda) */ .music-toast { display: none; position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); /* Mengetengahkan toast di layar */ background: var(--bg-kolom-kanan); padding: 10px 20px; border-radius: 20px; font-size: 0.85rem; color: var(--teks-layanan); border: 1px solid rgba(255, 255, 255, 0.318); box-shadow: 0 4px 15px rgba(0,0,0,0.5); z-index: 999; } /* Animasi berdenyut halus bawaan Anda */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(56, 239, 125, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(56, 239, 125, 0); } 100% { box-shadow: 0 0 0 0 rgba(56, 239, 125, 0); } } * Kustomisasi tambahan jika ikon tidak kontras dengan latar belakang website */ .uew-trigger-icon { box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3) !important; border-collapse: separate; } /* Gaya Tombol Kembali ke Atas (Tengah Bawah) */ .back-to-top-btn { position: fixed; bottom: 74px; /* Sejajar secara vertikal dengan tombol tema */ left: 50%; transform: translate(-50%, 50px); /* Mulai dari posisi agak ke bawah (tersembunyi) */ width: 50px; height: 50px; border-radius: 50%; background-color: var(--bg-login-box); color: var(--teks-terang); border: 2px solid var(--bg-halaman-utama); cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; /* Tersembunyi secara visual di awal */ pointer-events: none; /* Tidak bisa diklik saat tersembunyi */ transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease; } /* Modifikasi tombol saat berstatus aktif muncul */ .back-to-top-btn.visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); /* Bergeser naik ke posisi normal */ } .back-to-top-btn:hover { background-color: var(--bg-hover); } /* Modifikasi tombol saat berstatus aktif muncul */ .back-to-top-btn.visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); /* Bergeser naik ke posisi normal */ } .back-to-top-btn:hover { background-color: var(--bg-hover); } /* Dukungan Sinkronisasi Warna Mode Gelap untuk Tombol Atas */ [data-theme="dark"] .back-to-top-btn { background-color: var(--bg-login-box); color: var(--teks-terang); border-color: var(--bg-halaman-utama); } [data-theme="dark"] .back-to-top-btn:hover { background-color: var(--bg-hover); } .icon-arrow { width: 20px; height: 20px; } /* Container utama card */ .ikp { position: relative; /* Wajib untuk penempatan overlay */ width: 300px; height: 400px; background-color: #ffffff; /* Warna dasar sebelum hover */ background-size: cover; background-position: center; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); overflow: hidden; display: flex; align-items: flex-end; padding: 24px; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } /* Lapisan overlay agar teks selalu terbaca */ .ikp::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.05); /* Sedikit gelap di awal agar teks abu/gelap terbaca */ transition: background 0.4s ease; z-index: 1; } /* Bungkus konten agar selalu di atas overlay */ .ikp-content { position: relative; z-index: 2; transition: color 0.4s ease; color: #333333; /* Warna teks default (gelap) */ } /* Judul dan deskripsi */ .ikp-content h3 { margin: 0 0 8px 0; font-size: 1.4rem; } .ikp-content .description { margin: 0; font-size: 0.95rem; line-height: 1.4; } /* --- EFEK HOVER --- */ .ikp:hover { /* Ganti URL di bawah dengan gambar Anda */ background-image: url('./img/card/ikp.png'); transform: translateY(-5px); /* Card sedikit terangkat */ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); } /* Overlay menjadi lebih gelap saat hover agar gambar latar tidak menenggelamkan teks */ .ikp:hover::before { background: rgba(0, 0, 0, 0.6); /* Hitam transparan lebih pekat */ } /* Mengubah semua teks di dalam card menjadi putih saat hover */ .ikp:hover .card-content { color: #ffffff; } /* ================================================== 3. PERUBAHAN PADA RESPONSIF LAYAR KECIL (< 768px) ================================================== */ @media (max-width: 768px) { /* KUNCI UTAMA: Memaksa halaman HP mulai dari atas, bukan di tengah vertikal */ body { /* Mengubah posisi dari 'center' menjadi 'flex-start' khusus di HP agar halaman selalu dimulai dari atas saat dibuka */ align-items: flex-start; padding-top: 20px; /* Jarak tipis dari batas atas layar HP */ background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed; } /* Mengubah wadah utama menjadi susunan kolom vertikal */.container-row {display: flex;flex-direction: column;} /*TRICK ORDER FLEXBOX:Memaksa kolom kanan (Form Login) naik ke atas (order: 1)dan kolom kiri (Slideshow & Berita) turun ke paling bawah (order: 2)*/ .kanan {flex: 0 0 100%;order: 1;} .kiri {flex: 0 0 100%;order: 2;margin-top: 0px; /* Jarak antara form login dengan slideshow di bawahnya */} /* Memastikan tombol hamburger lama tidak muncul terpisah dari kelompok kanan */ .header-container > .hamburger-menu { display: none; } .hamburger-menu { display: block !important; background: none; border: none; color: #2c3e50; font-size: 22px; cursor: pointer; padding: 0; margin-top: 0; order: 2; } /* Jendela menu lungsur (drop-down) saat ikon 3 garis diklik */ .nav-menu { display: none; flex-direction: column; width: 100%; position: absolute; top: 65px; left: 0; background-color: var(--bg-halaman); padding: 15px; box-shadow: 0 8px 15px rgba(0,0,0,0.1); gap: 8px; box-sizing: border-box; z-index:999; } /* Memperkecil padding boks bahasa di HP agar ruang header tetap lega */ .lang-selector { padding: 4px 8px; order: 1; } .lang-selector select { font-size: 12px; } .header-aksi-kanan { display: flex; align-items: center; gap: 10px; /* Sedikit mempersempit jarak di HP agar hemat ruang */ } .waktu { font-weight: bold; padding-right: 30px; } .nav-menu.buka { display: flex; } .nav-link { width: 100%; box-sizing: border-box; padding: 12px; } .slideshow-container { aspect-ratio: 3 / 4; /* Kunci: Menampilkan penuh format HP vertikal tanpa ruang kosong */ } .panah { display: none; } .newsfeed-wrapper { height: 118px; width: 100%;} .footer-container { flex-direction: column; gap: 12px; justify-content: center; text-align: center; } .footer-sosmed { justify-content: center; } .footer-hak-cipta { margin-right: 0; } .goog-te-combo { padding: 5px 8px; font-size: 12px; } .section-layanan { padding: 50px 0; } /* Di layar HP, ubah barisan kartu menjadi satu kolom vertikal ke bawah */ .layanan-grid { flex-direction: column; align-items: center; gap: 25px; } .section-daftar { padding: 50px 0; } .daftar-grid { flex-direction: column; align-items: center; gap: 25px; } .daftar-card { width: 100%; max-width: 100%; padding: 30px 20px; } .section-kontak { padding: 50px 0; } /* Ubah orientasi menjadi satu kolom vertikal di HP */ .kontak-container-box { flex-direction: column; gap: 30px; } /* Naikkan form ke atas agar pengguna HP dapat langsung mengirim laporan */ .kontak-form-box { order: 1; padding: 25px 20px; } .kontak-info-maps { order: 2; } .tombol-tema-melayang { bottom: 120px; /* Di atas area footer sosmed HP */ right: 15px; width: 44px; height: 44px; font-size: 20px; } .layanan-grid-empat { flex-direction: column; align-items: center; gap: 20px; } .layanan-card { flex: 0 0 100%; max-width: 100%; padding: 25px 20px; } .text-slider-container { flex: 0 0 100%; order: 3; /* Melempar teks ke baris paling bawah */ margin-top: 8px; justify-content: center; } .text-slide { font-size: 12px; } .header-container1 { justify-content: space-between; padding: 1px 10px 10px 10px; } .header-container { padding:1px 10px 1px 10px; } .header-zona-waktu { flex: 0 0 100%; order: 2; /* Melempar teks ke baris paling bawah */ margin-top: 0px; justify-content: center; margin-right: 1px; } .jam-container { display: flex; align-items: center; gap: 12px; /* Jarak default antar elemen waktu */ } .zona { white-space: nowrap; margin-right: -4px; /* Trik margin minus agar lebih dekat ke jam di kanannya */ } .header-haritanggal { display: flex; flex: 0 0 100%; order: 1; /* Melempar teks ke baris paling bawah */ margin-top: 0px; justify-content: center; } .header-tetap { padding-top: 10px; } .instansi-header { font-size: 12px; } .layanan-header { font-size: 12px; } .halaman-utama { padding-top: 150px; } .info-popup { position:absolute ; top: 50%; left: 50%; transform: translate(-50%, 10%); width: 80%; /* Lebar responsif untuk layar kecil */ max-width: 300px; /* Lebar maksimal di layar besar */ max-height: 80vh; /* Mencegah popup lebih tinggi dari layar */ } } /* Kontainer Teks Berjalan/Berganti */ .text-slider-container { flex: 1; display: flex; justify-content: center; align-items: center; overflow: hidden; /* PERBAIKAN 1: Hapus height: 15px agar kontainer bisa membesar mengikuti teks yang turun */ min-height: 15px; height: auto; width: 100%; /* Pastikan kontainer memiliki lebar penuh */ } /* Gaya Teks dan Animasi Masuk dari Bawah ke Atas */ .text-slide { font-size: 12px; color: var(--teks-terang); font-weight: 500; /* PERBAIKAN 2: Ubah nowrap menjadi normal agar teks otomatis membuat baris baru */ white-space: normal; /* PERBAIKAN 3: Tambahkan pengaman jika ada kata/URL yang sangat panjang */ overflow-wrap: break-word; word-break: break-word; text-align: center; /* Menjaga teks tetap rapi di tengah saat membuat baris baru */ transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; transform: translateY(0); opacity: 1; } /* Definisi Gerakan dari Bawah ke Atas */ @keyframes slideUp { 0% { /* PERBAIKAN 4: Gunakan persen penuh agar animasi mulus dari luar batas bawah kontainer baru */ transform: translateY(100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .header-haritanggal { display: flex; align-items: center; gap: 10px; } .header-zona-waktu { display: flex; align-items: center; gap: 10px; /* Jarak antara menu bahasa dan tombol hamburger */ } footer a{text-decoration:none;color:var(--teks-utama);margin-bottom:10px;-webkit-transition:color .3s ease-in-out;transition:color .3s ease-in-out; position:relative; opacity: 1;} footer a:hover{color:#0681f4} .copy{color: var(--teks-layanan);font-size:0.8em} .shine{margin:0 auto 10px;font-weight:700;background:#e2d000 -webkit-gradient(linear,left top,right top,from(#b2b808),to(#0e50f7),color-stop(0.5,#27ff0b)) 0 0 no-repeat;-webkit-background-size:150px;color:rgba(0,171,250,0.3);-webkit-background-clip:text;-webkit-animation-name:shine;-webkit-animation-duration:4s;-webkit-animation-iteration-count:infinite;text-shadow:0 0 0 rgba(255,255,255,0)} .appbar-description{font-size:16px; margin:0;font-weight:600; color:var(--text-appbar-desc); text-shadow:0 0 0 rgb(60, 59, 59);auto} .appbar-title{font-size:24px;margin:0; color:var(--text-appbar-title); auto} .circular_image{width: 70px;height: 70px;border-radius: 50%;overflow: hidden; margin-top: 10px; background-color: var(--bg-user-image); display:inline-block;vertical-align:middle;padding:1px;} .circular_image img{width:100%;} .user-text {color: var(--teks-terang); font-size: 14px;} .welcome-section h3{color: var(--teks-terang); font-size: 14px;} /* Container Utama Widget Melayang */ .floating-date-widget { display: flex; flex-direction: column; align-items: flex-end; margin-left:auto; } /* Tombol Bulat Melayang Default (Warna Abu-abu/Hitam jika hari biasa) */ .date-button { width: 30px; height: 30px; background-color: var(--bg-date); border-radius: 10%; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; user-select: none; border: 1px solid var(--bg-input-border); } .date-button:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } .date-button:active { transform: scale(0.95); } .date-button .month-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--teks-utama); line-height: 1; margin-bottom: 2px; } .date-button .date-number { font-size: 24px; font-weight: 800; color: #222222; line-height: 1; } /* TEMA 1: MERAH (Hari Minggu / Hari Raya Libur Indonesia) */ .date-button.theme-red { border-color: #672b2c; background-color: var(--bg-date-red); } .date-button.theme-red .date-number { color: #9a0003; } /* TEMA 2: HIJAU (Hari Peringatan Indonesia - Bukan Libur) */ .date-button.theme-green { border-color: #396423; background-color: var(--bg-date-indo); } .date-button.theme-green .date-number { color: #266a05; } /* TEMA 3: BIRU (Hari Peringatan Internasional) */ .date-button.theme-blue { border-color: #335370; background-color: var(--bg-date-inter); } .date-button.theme-blue .date-number { color: #004a8f; } /* TEMA 4: GOLD (Hari Peringatan Kabupaten) */ .date-button.theme-gold { border-color: #bea201; background-color: var(--bg-date-kab); } .date-button.theme-gold .date-number { color: #927802; } /* TEMA 5: BROWN (Hari Peringatan regional/prov) */ .date-button.theme-brown { border-color: #6f3002; background-color: var(--bg-date-prov); } .date-button.theme-brown .date-number { color: #6b330b; } /* TEMA 6: SAGE (Hari Peringatan lainnya) */ .date-button.theme-sage { border-color: #37452e; background-color: var(--bg-date-other); } .date-button.theme-sage .date-number { color: #39502c; } /* Kelas Warna Tambahan */ .color-gold { background-color: #FFD700; color: #000000; } /* Kuning Emas */ .color-brown { background-color: #8B4513; color: #FFFFFF; } /* Coklat */ .color-sage { background-color: #87A96B; color: #FFFFFF; } /* Hijau Sage */ .title-provinsi-peringatan { color: #8B4513; } /* Teks judul coklat */ .title-kabupaten-peringatan { color: #D4AF37; } /* Teks judul kuning emas gelap agar terbaca */ .title-instansi-peringatan { color: #5B704E; } /* Teks judul hijau sage gelap */ /* Popup Deskripsi Peringatan */ .info-popup { position: absolute; top: 80px; width: 300px; background-color: var(--bg-halaman); border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); padding: 16px; display: none; animation: fadeInUp 0.3s ease; max-height: 60vh; overflow-y: auto; z-index:999; } .info-popup.show { display: block; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .popup-header { font-size: 14px; font-weight: 700; color: var(--teks-utama); margin-bottom: 12px; border-bottom: 2px solid #f0f0f0; padding-bottom: 6px; } .popup-section { margin-bottom: 12px; } .popup-section:last-child { margin-bottom: 0; } .section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .title-indonesia-libur { color: #ff4d4f; } .title-indonesia-peringatan { color: #52c41a; } .title-internasional { color: #1890ff; } /* Item di dalam popup */ .popup-item { font-size: 12px; padding: 6px 10px; border-radius: 6px; margin-bottom: 4px; border-left: 3px solid #ccc; } .popup-item.color-red { background-color: #fff1f0; border-left-color: #ff4d4f; color: #cf1322; font-weight: 600; } .popup-item.color-green { background-color: #f6ffed; border-left-color: #52c41a; color: #389e0d; } .popup-item.color-blue { background-color: #e6f7ff; border-left-color: #1890ff; color: #096dd9; } .no-event { font-size: 11px; color: var(--teks-terang); font-style: italic; } /* Klasifikasi elemen yang bisa bersuara */ .elemen-bersuara { cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .elemen-bersuara:active { transform: scale(0.95) !important; } /* Posisi dasar container TOMBOL BAHASA */ .lang-selector { position: relative; display: inline-flex; align-items: center; } /* Pola Bendera CSS (Global) */ .bg-id { background: linear-gradient(#FF0000 50%, #FFFFFF 50%); } .bg-en { background: linear-gradient(90deg, #00247D 33%, #FFFFFF 33%, #FFFFFF 66%, #CF142B 66%); } .bg-es { background: linear-gradient(#AA1521 25%, #FCD116 25%, #FCD116 75%, #AA1521 75%); } .bg-fr { background: linear-gradient(90deg, #0055A4 33%, #FFFFFF 33%, #FFFFFF 66%, #EF4135 66%); } .bg-ru { background: linear-gradient(#FFFFFF 33%, #0033A0 33%, #0033A0 66%, #DA291C 66%); } .bg-ja { background: radial-gradient(circle, #BC002D 40%, #FFFFFF 41%); color: #000 !important; text-shadow: none !important; } .bg-ko { background: radial-gradient(circle, #003472 40%, #FFFFFF 41%); } .bg-zh { background: #DE2910; } /* =================================================== KONDISI 1: TAMPILAN DESKTOP (Lebar layar di atas 768px) =================================================== */ @media (min-width: 769px) { .mobile-lang-wrapper { display: none !important; /* Sembunyikan elemen HP */ } .desktop-lang-wrapper { display: flex; /* Tampilkan elemen asli Anda */ align-items: center; } } /* =================================================== KONDISI 2: TAMPILAN HP / MOBILE (Lebar layar maks 768px) =================================================== */ @media (max-width: 768px) { .desktop-lang-wrapper { display: none !important; /* Sembunyikan elemen desktop */ } .mobile-lang-wrapper { display: block; position: relative; } /* Tombol Utama Bulat HP */ .lang-selector { background-color: rgba(255, 255, 255, 0); border-color: rgba(255, 255, 255, 0) ; } .lang-btn-custom { width: 25px; height: 25px; border-radius: 50%; border: 0px solid rgba(255, 255, 255, 0); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; color: var(--teks-utama); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.15); user-select: none; } /* Menu Dropdown HP */ .lang-dropdown-custom { display: none; position: absolute; right: 0; top: 20px; background-color: var(--bg-headerfooter); /* Warna gelap header */ border: 0px solid #2d3d4a; border-radius: 8px; min-width: 140px; z-index: 999; box-shadow: 0 4px 12px rgba(0,0,0,0.4); } .lang-dropdown-custom.buka { display: block; } /* List Menu Dropdown */ .lang-item-custom { display: flex; align-items: center; padding: 10px 14px; color: var(--teks-utama); font-size: 12px; cursor: pointer; border-bottom: 0px solid #1f2d3a; } .lang-item-custom:last-child { border-bottom: none; } .lang-item-custom:active { background-color: var(--bg-hover); } /* Mini Ikon Bulat di dalam Dropdown */ .lang-flag-mini { width: 30px; height: 30px; border-radius: 50%; margin-right: 10px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; color: var(--teks-terang); text-shadow: 1px 1px 2px rgba(0,0,0,0.8); } } /* Desain dasar tombol melayang */ .floating-btn { cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Efek transisi halus saat muncul/menghilang */ transition: opacity 0.5s ease, visibility 0.5s ease; opacity: 1; visibility: visible; z-index: 9; } /* Kelas yang akan dipicu oleh JavaScript */ .floating-btn.hidden { opacity: 0; visibility: hidden; pointer-events: none; /* Tombol tidak bisa diklik saat hilang */ } /*-------------------------------------------------------------- # Feature --------------------------------------------------------------*/ .feature-one { position: relative; background-color: var(--bg-body-content); padding: 19px 0 120px; } @media (max-width: 991px) { .feature-one { padding-bottom: 60px; } } .f1-item { position: relative; } @media (max-width: 991px) { .f1-item { margin-bottom: 30px; } } .f1-item__img { position: relative; margin-bottom: 30px; background-color: var(--bg-body-content); } .f1-item__img img { width: 100%; height: auto; mix-blend-mode: normal; } .f1-item__content { position: absolute; left: 0; right: 0; margin: auto; bottom: 20px; width: calc(100% - 60px); background-color: var(--bg-body-content); padding: 19px 30px 25px; -webkit-transition: -webkit-transform 400ms ease; transition: -webkit-transform 400ms ease; transition: transform 400ms ease; transition: transform 400ms ease, -webkit-transform 500ms ease; border-radius: 20px; } @media (max-width: 360px) { .f1-item__content { padding: 15px 20px 21px; } } @media (min-width: 992px) and (max-width: 1199px) { .f1-item__content { padding-left: 20px; } } .f1-item__content--title { font-size: 14px; font-weight: 100; line-height: 100%; letter-spacing: -1.0px; margin: 0; color: var(--teks-utama); font-weight: 600; } .f1-item__content--icon { width: 55px; height: 55px; border-radius: 50%; background-color: var(--bg-card) ; color: #0f172a; font-size: 24px; display: flex; align-items: center; justify-content: center; position: absolute; right: 40px; top: -40px; } @media (max-width: 360px) { .f1-item__content--icon { right: 15px; top: -35px; } } .f1-item:hover .f1-item__content { background-position: bottom left; -webkit-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: bottom center; transform-origin: bottom center; } .f1-item__hover-content { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; width: calc(100% - 0px); height: calc(100% - 0px); background-color: var(--bg-body-content); padding: 10px 20px 10px; background-position: bottom left; -webkit-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: bottom center; transform-origin: bottom center; -webkit-transition: -webkit-transform 500ms ease; transition: -webkit-transform 500ms ease; transition: transform 500ms ease; transition: transform 500ms ease, -webkit-transform 500ms ease; z-index: 2; border-radius: 20px; font-size:14px; } .f1-item__hover-content h3{ color:var(--teks-utama) } .f1-item__hover-content p{ color:var(--teks-terang) } @media (max-width: 768px) { .f1-item__hover-content { padding: 15px 20px 10px; } } @media (max-width: 360px) { .f1-item__hover-content { padding: 10px 20px 10px; font-size:12px; } } @media (min-width: 768px) and (max-width: 991px) { .f1-item__hover-content { padding: 25px; } } @media (min-width: 992px) and (max-width: 1199px) { .f1-item__hover-content { padding: 20px; } } .f1-item__hover-content--title { font-size: 22px; letter-spacing: -0.88px; margin: 0 0 16px; } @media (max-width: 360px) { .f1-item__hover-content--title { margin-bottom: 2px; } } @media (min-width: 992px) and (max-width: 1199px) { .f1-item__hover-content--title { margin-bottom: 8px; } } .f1-item__hover-content--text { margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid rgba(15, 23, 42, 0.10); font-weight: 300; line-height: 100%; } @media (max-width: 360px) { .f1-item__hover-content--text { margin: 0 0 5px; padding: 0 0 8px; line-height: 15px; } } @media (min-width: 768px) and (max-width: 991px) { .f1-item__hover-content--text { padding-bottom: 20px; } } @media (min-width: 992px) and (max-width: 1199px) { .f1-item__hover-content--text { padding-bottom: 15px; font-size: 14px; line-height: 24px; } } .f1-item__hover-content__btn { display: inline-block; color: #0f172a; font-size: 14px; text-transform: capitalize; } .f1-item__hover-content__btn span { display: inline-block; font-size: 18px; margin: 0 0 0 11px; top: 5px; position: relative; transition: transform 400ms ease; } .f1-item__hover-content__btn:hover { color: #004cff; } .f1-item__hover-content__btn:hover span { transform: rotate(-45deg); } .f1-item:hover .f1-item__hover-content { -webkit-transform: scale(1, 1); transform: scale(1, 1); } /*-- Service 3 --*/ .service-three { background-color: var(--ogency-black); position: relative; padding: 120px 0 90px; } .service-three__text { line-height: 30px; margin: 41px 10px 0 0; } @media (max-width: 1199px) { .service-three__text { margin-right: 0; } } @media (max-width: 767px) { .service-three__text { margin: 0 0 45px; } } @media (max-width: 1400px) { .service-three { padding-left: 0; padding-right: 0; } } @media (max-width: 767px) { .service-three { padding: 80px 0 50px; } } .service-three__container { max-width: 1632px; } .service-three--service-page { padding-bottom: 100px; } @media (max-width: 767px) { .service-three--service-page { padding-bottom: 80px; } } .service-three--service-page { padding: 80px 0 70px; } @media (max-width: 767px) { .service-three--service-page { padding: 130px 0 50px; } } .s3-item { position: relative; margin: 0 4px 30px; overflow: hidden; border-radius: 30px; width: 370px; height:430px; background-color: var(--bg-halaman); } @media (max-width: 420px) { .s3-item { margin-left: 0; margin-right: 0; width: 90vw; height:360px; } } @media (max-width: 991px) { .s3-item { margin-left: 0; margin-right: 0; } } @media (min-width: 1200px) and (max-width: 1500px) { .s3-item { margin-left: 0; margin-right: 0; } } .s3-item__thumb { position: relative; transition: 500ms ease; border-radius: 35px; } .s3-item__thumb img { width: 100%; height: auto; mix-blend-mode: normal; transition: 500ms ease; } .s3-item:hover .s3-item__thumb img { opacity: 0.3; } .s3-item__normal { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 256px; height: 256px; padding: 20px; background-color: var(--bg-card); border-radius: 50%; display: flex; align-items: center; justify-content: center; -webkit-transition: -webkit-transform 400ms ease; transition: -webkit-transform 400ms ease; transition: transform 400ms ease; transition: transform 400ms ease, -webkit-transform 500ms ease; } @media (max-width: 420px) { .s3-item__normal { width: 225px; height: 225px; } } @media (min-width: 1200px) and (max-width: 1500px) { .s3-item__normal { width: 265px; height: 265px; } } @media (min-width: 1200px) and (max-width: 1300px) { .s3-item__normal { width: 235px; height: 235px; } } .s3-item__normal__title { font-size: 20px; font-weight: 500; line-height:120%; letter-spacing: -1.0px; margin: 0; text-align: center; max-width: 200px; font-style: normal; transform: none; color: var(--teks-utama); cursor: ; } .s3-item:hover .s3-item__normal { background-position: bottom left; -webkit-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: bottom center; transform-origin: bottom center; } .s3-item__hover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; padding: 53px 60px 50px; visibility: hidden; opacity: 0; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @media (min-width: 1200px) and (max-width: 1500px) { .s3-item__hover { padding: 45px 45px 42px; } } @media (min-width: 1200px) and (max-width: 1300px) { .s3-item__hover { padding: 35px 30px 30px; } } @media (max-width: 768px) { .s3-item__hover { padding: 25px 20px 20px; } } .s3-item__hover__title { font-size: 10px; letter-spacing: -1.2px; margin: 0 0 23px; max-width: 200px; } .s3-item__hover__title a { font-size: 18px; color: var(--text-main); cursor: pointer; } .s3-item__hover__title a:hover { color: var(--text-link); } .s3-item__hover__text { color: var(--teks-terang); font-size: 14px; line-height: 120%; font-weight: 400; margin-right: 20px; } @media (max-width: 420px){ .s3-item__hover__text { color: var(--teks-terang); font-size: 13px; line-height: 110%; font-weight: 300; margin-right: 10px; } } .s3-item__hover__btn { display: inline-block; color: var(--text-link); font-size: 14px; text-transform: capitalize; border-top: 1px solid RGBA(var(--ogency-white-rgb), 0.1); padding-top: 10px; position: absolute; bottom: 30px; left: 60px; right: 60px; cursor: pointer; } @media (min-width: 1200px) and (max-width: 1500px) { .s3-item__hover__btn { bottom: 40px; left: 45px; right: 45px; } } .s3-item__hover__btn span { display: inline-block; font-size: 18px; color: #0f172a; margin: 0 0 0 11px; top: 5px; position: relative; transition: transform 400ms ease; } .s3-item__hover__btn:hover { color: #0047ee; } .s3-item__hover__btn:hover span { transform: rotate(-45deg); } .s3-item:hover .s3-item__hover { visibility: visible; opacity: 1; animation-delay: 0.3s; animation-name: fadeInDown; } .service-page__carousel { background-color: var(--ogency-black); position: relative; padding: 120px 0; } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @media (max-width: 767px) { .service-page__carousel { padding: 80px 0; } } .service-page__carousel .s3-item { margin: 0 0 10px; } .error-notification { background-color: rgba(231, 76, 60, 0.2); /* Merah transparan */ border: 1px solid #e74c3c; /* Garis tepi merah */ color: #f1c40f; /* Teks kuning cerah agar mudah dibaca */ padding: 10px; border-radius: 8px; margin-top: 10px; text-align: center; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; }