/* YagamiCell Dark Mode V2 - aktif hanya saat */ /* ========================================================= YAGAMICELL DARK MODE Hanya mengubah warna/background/border/shadow. Tidak mengubah layout, posisi, ukuran, margin, atau padding. ========================================================= */ html.dark-mode { color-scheme: dark; /* Override variabel navbar YagamiCell */ --ym-red: #e4472a; --ym-red-dark: #c7351b; --ym-red-soft: #2a1b18; --ym-orange: #f4a340; --ym-text: #e9edf2; --ym-muted: #9ba5b2; --ym-line: #343a43; --ym-bg: #111318; --ym-white: #191c22; --ym-shadow: 0 10px 35px rgba(0,0,0,.28); } html.dark-mode, html.dark-mode body { background: #111318; color: #d7dce2; } html.dark-mode body, html.dark-mode p, html.dark-mode li, html.dark-mode dt, html.dark-mode dd, html.dark-mode label, html.dark-mode .help-block, html.dark-mode .text-muted { color: #c9d0d8; } html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6, html.dark-mode strong, html.dark-mode b { color: #eef1f5; } html.dark-mode a { color: #f4a340; } html.dark-mode a:hover, html.dark-mode a:focus { color: #ffb65c; } html.dark-mode hr { border-top-color: #343a43; } /* ========================================================= PANEL / CARD / MAIN CONTENT ========================================================= */ html.dark-mode .panel, html.dark-mode .panel-default, html.dark-mode .box, html.dark-mode .main-content, html.dark-mode .well, html.dark-mode .thumbnail { background-color: #181b21; color: #d7dce2; border-color: #343a43; box-shadow: 0 8px 24px rgba(0,0,0,.16); } html.dark-mode .panel-default > .panel-heading, html.dark-mode .panel-heading { color: #eef1f5; background-color: #20242b; background-image: none; border-color: #343a43; } html.dark-mode .panel-heading h1, html.dark-mode .panel-heading h2, html.dark-mode .panel-heading h3, html.dark-mode .panel-heading h4, html.dark-mode .panel-heading h5, html.dark-mode .panel-heading h6 { color: #f3f5f7; } html.dark-mode .panel-body { background-color: #181b21; color: #d7dce2; } html.dark-mode .panel-footer { background-color: #15181d; color: #c9d0d8; border-top-color: #343a43; } /* ========================================================= BREADCRUMB ========================================================= */ html.dark-mode .breadcrumb { background: #181b21; background-image: none; border-color: #343a43; } html.dark-mode .breadcrumb > li, html.dark-mode .breadcrumb > .active { color: #aeb7c2; } html.dark-mode .breadcrumb > li + li:before { color: #6f7884; } /* ========================================================= FORMS ========================================================= */ html.dark-mode .form-control, html.dark-mode select.form-control, html.dark-mode textarea.form-control, html.dark-mode .left-menu-select .form-control { color: #e6eaf0; background-color: #171a20; border-color: #3a414b; box-shadow: none; } html.dark-mode .form-control:focus, html.dark-mode .left-menu-select .form-control:focus { color: #fff; background-color: #1b1f26; border-color: #e4472a; box-shadow: 0 0 0 2px rgba(228,71,42,.12); } html.dark-mode .form-control[disabled], html.dark-mode .form-control[readonly], html.dark-mode fieldset[disabled] .form-control { background-color: #22262d; color: #8f98a4; } html.dark-mode .form-control::-webkit-input-placeholder { color: #78828e; } html.dark-mode .form-control::-moz-placeholder { color: #78828e; } html.dark-mode .form-control:-ms-input-placeholder { color: #78828e; } html.dark-mode .form-control::placeholder { color: #78828e; } html.dark-mode .input-group-addon { color: #cfd5dc; background-color: #22262d; border-color: #3a414b; } /* ========================================================= TABLE ========================================================= */ html.dark-mode .table, html.dark-mode table { color: #d7dce2; } html.dark-mode .table > thead > tr > th, html.dark-mode .table > tbody > tr > th, html.dark-mode .table > tfoot > tr > th, html.dark-mode .table > thead > tr > td, html.dark-mode .table > tbody > tr > td, html.dark-mode .table > tfoot > tr > td { border-top-color: #343a43; } html.dark-mode .table > thead > tr > th { border-bottom-color: #414852; color: #eef1f5; } html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) { background-color: #1d2128; } html.dark-mode .table-striped > tbody > tr:nth-of-type(even) { background-color: #181b21; } html.dark-mode .table-hover > tbody > tr:hover { background-color: #252a32; } html.dark-mode .table-bordered, html.dark-mode .table-bordered > thead > tr > th, html.dark-mode .table-bordered > tbody > tr > th, html.dark-mode .table-bordered > tfoot > tr > th, html.dark-mode .table-bordered > thead > tr > td, html.dark-mode .table-bordered > tbody > tr > td, html.dark-mode .table-bordered > tfoot > tr > td { border-color: #343a43; } /* ========================================================= LIST GROUP ========================================================= */ html.dark-mode .list-group-item, html.dark-mode a.list-group-item, html.dark-mode button.list-group-item { color: #d7dce2; background-color: #181b21; border-color: #343a43; } html.dark-mode a.list-group-item:hover, html.dark-mode a.list-group-item:focus, html.dark-mode button.list-group-item:hover, html.dark-mode button.list-group-item:focus { color: #fff; background-color: #242930; } html.dark-mode .list-group-item.active, html.dark-mode .list-group-item.active:hover, html.dark-mode .list-group-item.active:focus { color: #fff; background-color: #d72500; border-color: #e4472a; } /* ========================================================= DROPDOWN ========================================================= */ html.dark-mode .dropdown-menu { background-color: #1b1f25; border-color: #343a43; box-shadow: 0 18px 45px rgba(0,0,0,.35); } html.dark-mode .dropdown-menu > li > a { color: #d7dce2; } html.dark-mode .dropdown-menu > li > a:hover, html.dark-mode .dropdown-menu > li > a:focus, html.dark-mode .dropdown-menu > .active > a, html.dark-mode .dropdown-menu > .active > a:hover, html.dark-mode .dropdown-menu > .active > a:focus { color: #fff; background: #d72500; background-image: none; } html.dark-mode .dropdown-menu .divider { background-color: #343a43; } html.dark-mode .navbar .navbar-nav > li > .dropdown-menu::after, html.dark-mode .subnavbar .dropdown > .dropdown-menu::after { border-bottom-color: #1b1f25; } /* ========================================================= NAVBAR KEREN - DESKTOP ========================================================= */ html.dark-mode .ym-navbar.navbar-inverse { background: rgba(22,25,31,.97); border-color: #303640; box-shadow: 0 5px 24px rgba(0,0,0,.28); } html.dark-mode .ym-navbar.navbar-inverse .navbar-nav > li > a { color: var(--ym-text); } html.dark-mode .ym-navbar .navbar-right > li > a { background: #1b1f25; border-color: var(--ym-line); } html.dark-mode .ym-navbar.navbar-inverse .navbar-nav > li > a:hover, html.dark-mode .ym-navbar.navbar-inverse .navbar-nav > li > a:focus, html.dark-mode .ym-navbar .navbar-right > li > a:hover, html.dark-mode .ym-navbar .navbar-right > li > a:focus { color: #ff694c; background: #2a1b18; border-color: #5a342d; } html.dark-mode .ym-navbar .dropdown-menu { background: #1b1f25; border-color: var(--ym-line); } html.dark-mode .ym-navbar .dropdown-menu > li > a { color: var(--ym-text); } html.dark-mode .ym-navbar .dropdown-menu > li > a:hover, html.dark-mode .ym-navbar .dropdown-menu > li.active > a, html.dark-mode .ym-navbar .dropdown-menu > li.active > a:hover { color: #ff694c; background: #2a1b18; } /* ========================================================= SUBNAVBAR / MENU UTAMA ========================================================= */ html.dark-mode .ym-subnavbar.subnavbar { background: linear-gradient(180deg,#14171c 0%,#181b21 100%); } html.dark-mode .ym-mainnav > li > a { color: var(--ym-text); } html.dark-mode .ym-mainnav > li > a:hover, html.dark-mode .ym-mainnav > li > a:focus { color: #ff694c; border-color: #4d312c; background: #2a1b18; } html.dark-mode .ym-rate-card { color: #d7dce2; background: linear-gradient(135deg,#1b1f25,#16191e); border-color: var(--ym-line); } html.dark-mode .ym-rate-info span { color: var(--ym-muted); } html.dark-mode .ym-rate-info strong { color: var(--ym-text); } /* ========================================================= MOBILE NAVBAR / COLLAPSE ========================================================= */ @media (max-width:767px) { html.dark-mode .ym-navbar .navbar-collapse { background: #171a20 !important; border-top-color: var(--ym-line) !important; box-shadow: 0 14px 30px rgba(0,0,0,.28); } html.dark-mode .ym-navbar.navbar-inverse .navbar-nav > li > a, html.dark-mode .ym-navbar .navbar-right > li > a { color: var(--ym-text) !important; background: #1b1f25 !important; border-color: #2f353e !important; } html.dark-mode .ym-navbar.navbar-inverse .navbar-nav > li > a:hover, html.dark-mode .ym-navbar.navbar-inverse .navbar-nav > li > a:focus, html.dark-mode .ym-navbar .navbar-right > li > a:hover, html.dark-mode .ym-navbar .navbar-right > li > a:focus { color: #ff694c !important; background: #2a1b18 !important; border-color: #5a342d !important; } html.dark-mode .ym-navbar.navbar-inverse .navbar-nav .open .dropdown-menu { background: #15181d !important; border-color: var(--ym-line) !important; } html.dark-mode .ym-navbar.navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: #d7dce2 !important; } html.dark-mode .subnavbar .ym-mainnav > li > a { color: var(--ym-text) !important; background: #1b1f25 !important; border-color: #303640 !important; } html.dark-mode .subnavbar .ym-mainnav > li > a:hover, html.dark-mode .subnavbar .ym-mainnav > li > a:focus { color: #ff694c !important; background: #2a1b18 !important; border-color: #5a342d !important; } html.dark-mode .subnavbar .ym-mainnav > li.active > a { color: #fff !important; background: linear-gradient(135deg,var(--ym-red),#ef4f2f) !important; border-color: transparent !important; } html.dark-mode .ym-subnavbar .subnav-collapse.collapse.in, html.dark-mode .ym-subnavbar .subnav-collapse.collapsing { background: #171a20 !important; border-color: var(--ym-line) !important; box-shadow: 0 12px 30px rgba(0,0,0,.28) !important; } html.dark-mode .subnavbar .ym-rate-card { background: #1b1f25 !important; border-color: #303640 !important; } } /* ========================================================= MODAL ========================================================= */ html.dark-mode .modal-content { color: #d7dce2; background-color: #181b21; border-color: #343a43; box-shadow: 0 18px 50px rgba(0,0,0,.45); } html.dark-mode .modal-header { border-bottom-color: #343a43; } html.dark-mode .modal-footer { border-top-color: #343a43; } html.dark-mode .close { color: #fff; text-shadow: none; opacity: .8; } /* ========================================================= ALERT ========================================================= */ html.dark-mode .alert { color: #dce2e8; background-image: none; border-color: #3a414b; } html.dark-mode .alert-warning { color: #ffd89a; background: #332719; border-color: #6b5129; } html.dark-mode .alert-info { color: #b9dcff; background: #172a3a; border-color: #2f5775; } html.dark-mode .alert-success { color: #bce7c5; background: #172b1d; border-color: #315b3b; } html.dark-mode .alert-danger { color: #ffc1be; background: #351b1b; border-color: #6b3331; } /* ========================================================= PAGINATION / NAV TABS ========================================================= */ html.dark-mode .pagination > li > a, html.dark-mode .pagination > li > span { color: #d7dce2; background-color: #1b1f25; border-color: #343a43; } html.dark-mode .pagination > li > a:hover, html.dark-mode .pagination > li > span:hover, html.dark-mode .pagination > li > a:focus, html.dark-mode .pagination > li > span:focus { color: #fff; background-color: #292e36; border-color: #444c57; } html.dark-mode .pagination > .active > a, html.dark-mode .pagination > .active > span, html.dark-mode .pagination > .active > a:hover, html.dark-mode .pagination > .active > span:hover { color: #fff; background-color: #d72500; border-color: #d72500; } html.dark-mode .nav-tabs { border-bottom-color: #343a43; } html.dark-mode .nav-tabs > li > a:hover { background-color: #242930; border-color: #343a43; } html.dark-mode .nav-tabs > li.active > a, html.dark-mode .nav-tabs > li.active > a:hover, html.dark-mode .nav-tabs > li.active > a:focus { color: #fff; background-color: #181b21; border-color: #343a43; border-bottom-color: transparent; } /* ========================================================= BUTTON DEFAULT ========================================================= */ html.dark-mode .btn-default { color: #dce1e7; background-color: #242930; background-image: none; border-color: #3a414b; text-shadow: none; } html.dark-mode .btn-default:hover, html.dark-mode .btn-default:focus, html.dark-mode .btn-default:active, html.dark-mode .btn-default.active { color: #fff; background-color: #303640; border-color: #4b535f; } /* ========================================================= CODE / PRE ========================================================= */ html.dark-mode code { color: #ffad9c; background-color: #282026; } html.dark-mode pre { color: #d7dce2; background-color: #15181d; border-color: #343a43; } /* ========================================================= FOOTER custom.css sebenarnya sudah dark; ini hanya menyamakan tone. ========================================================= */ html.dark-mode .extra { color: #adb5bf; background: #15181d; border-top-color: #303640; } html.dark-mode .extra a { color: #aeb7c2; } html.dark-mode .extra a:hover, html.dark-mode .extra a:focus { color: #f4a340; } html.dark-mode .footer { color: #99a2ae; background: #0d0f13; border-top-color: #262b32; } html.dark-mode .footer a, html.dark-mode .footer a:hover { color: #eef1f5; } html.dark-mode #footer-terms ul > li > a { color: #aeb7c2; background-color: #1c2026; } html.dark-mode #footer-terms ul > li > a:hover { color: #fff; background-color: #d72500; } /* ========================================================= TEXT HELPERS ========================================================= */ html.dark-mode .text-success { color: #52d273; } html.dark-mode .text-danger { color: #ff6964; } html.dark-mode .text-warning { color: #f4b85b; } html.dark-mode .text-info { color: #6db7ed; } /* Seleksi teks */ html.dark-mode ::selection { color: #fff; background: #b72c12; } /* ========================================================= PAGE: DAFTAR HARGA / RIWAYAT TRANSAKSI Override warna saja. Tidak mengubah layout/ukuran/posisi. ========================================================= */ /* Pastikan permukaan tabel tidak mewarisi background terang dari CSS page. */ html.dark-mode .table { background-color: #181b21; } html.dark-mode .table > thead > tr > th { background-color: #20242b; color: #eef1f5; border-color: #303640; } /* Komponen khusus harga.php */ html.dark-mode .produk-nominal { background-color: #20242b; color: #f4a340; } html.dark-mode .produk-deskripsi { background-color: #2a241b; color: #d7dce2; } html.dark-mode .produk-deskripsi .teks-alinea { color: #d7dce2; } html.dark-mode .status-tersedia { color: #52d273; } html.dark-mode .status-kosong { color: #ff6964; } /* harga.php mempunyai warna inline #666 pada nama provider versi mobile. */ html.dark-mode .table > tbody > tr > td.visible-xs > span[style*="color: #666"] { color: #a8b0bb !important; } /* Riwayat transaksi dapat diisi ulang lewat AJAX; jaga teks hasil refresh tetap terbaca. */ html.dark-mode #history_transaksi, html.dark-mode #history_transaksi font { color: #e8eaed; } /* ========================================================= PAGE HARGA - PENINGKATAN KONTRAS DARK MODE Hanya warna. Tidak mengubah layout/ukuran/posisi. ========================================================= */ /* Kolom desktop/tablet harga.php yang memakai hidden-xs. */ html.dark-mode .table > tbody > tr > td.hidden-xs { color: #e8eaed; } html.dark-mode .table > tbody > tr > td.hidden-xs strong { color: #f5f7fa; } /* Tombol "Tampilan 2 Klik Disini" tetap jelas di mode malam. Selector dibuat lebih spesifik agar tidak terkena warna link global dark mode. */ html.dark-mode a.btn-warning, html.dark-mode .btn-warning { color: #171a1f; background-color: #f0ad4e; background-image: none; border-color: #eea236; text-shadow: none; } html.dark-mode a.btn-warning:hover, html.dark-mode a.btn-warning:focus, html.dark-mode .btn-warning:hover, html.dark-mode .btn-warning:focus, html.dark-mode .btn-warning:active, html.dark-mode .btn-warning.active { color: #111318; background-color: #ffb84d; border-color: #f0a12f; } /* ========================================================= PAGE HISTORY VIEW - DARK MODE Hanya warna/background/border/shadow. Tidak mengubah layout, ukuran, posisi, form, atau logika. ========================================================= */ /* Rating bintang default perlu tetap terlihat di permukaan gelap. */ html.dark-mode .star-rating label { color: #78828e; } /* Hover/selected tetap memakai warna kuning bawaan page. */ html.dark-mode .star-rating input:not(:checked) ~ label:hover, html.dark-mode .star-rating input:not(:checked) ~ label:hover ~ label, html.dark-mode .star-rating input:checked ~ label, html.dark-mode span.fa.fa-star.checked { color: #ffc107; } /* Thumbnail/logo yang memakai Bootstrap .img-thumbnail. */ html.dark-mode .img-thumbnail { background-color: #20242b; border-color: #343a43; } /* Bootstrap popover pada tombol Komplain. */ html.dark-mode .popover { color: #d7dce2; background-color: #181b21; border-color: #343a43; box-shadow: 0 10px 30px rgba(0,0,0,.32); } html.dark-mode .popover-title { color: #eef1f5; background-color: #20242b; border-bottom-color: #343a43; } html.dark-mode .popover-content { color: #d7dce2; } html.dark-mode .popover-content a { color: #f4a340; } html.dark-mode .popover-content a:hover, html.dark-mode .popover-content a:focus { color: #ffb65c; } /* Arah panah popover Bootstrap. */ html.dark-mode .popover.top > .arrow { border-top-color: #343a43; } html.dark-mode .popover.top > .arrow:after { border-top-color: #181b21; } html.dark-mode .popover.bottom > .arrow { border-bottom-color: #343a43; } html.dark-mode .popover.bottom > .arrow:after { border-bottom-color: #181b21; } html.dark-mode .popover.left > .arrow { border-left-color: #343a43; } html.dark-mode .popover.left > .arrow:after { border-left-color: #181b21; } html.dark-mode .popover.right > .arrow { border-right-color: #343a43; } html.dark-mode .popover.right > .arrow:after { border-right-color: #181b21; } /* ========================================================= PAGE NEW_VIEW_INDEX - DARK MODE Hanya warna/background/border/shadow. Tidak mengubah layout, ukuran, posisi, grid, PHP, atau logika transaksi. ========================================================= */ /* Surface custom halaman transaksi mobile. */ html.dark-mode .yg-menu-judul, html.dark-mode .yg-menu-body, html.dark-mode .yg-bg-bdy, html.dark-mode .panel.panel-defaultsss, html.dark-mode .panel-bodysssssssssss, html.dark-mode .panel-bodygdgdgdgdgd, html.dark-mode .panel-bodysssssssssssdgdgdgdgdgd, html.dark-mode .panel-bodysa, html.dark-mode .panel-bodys { background-color: #181b21; color: #d7dce2; border-color: #303640; } html.dark-mode .panel.panel-defaultsss { box-shadow: 0 8px 24px rgba(0,0,0,.16); } html.dark-mode p90 { color: #a8b0bb; } html.dark-mode i.fa.fa-question-circle, html.dark-mode i.ada.fa.fa-question-circle, html.dark-mode i.fa.fa-question-circle.fa-1 { color: #6db7ed; } html.dark-mode i.fa.fa-copy, html.dark-mode .va_shopee.fa.fa-copy, html.dark-mode .bankbsi.fa.fa-copy { color: #ff6964; } /* Kotak verifikasi Token PLN memiliki warna inline terang. */ html.dark-mode div[style*="background: #fffcf5"] { background: #20242b !important; border-color: #55492f !important; color: #d7dce2 !important; } html.dark-mode div[style*="background: #fffcf5"] p[style*="color: #8a6d3b"] { color: #ffd89a !important; } html.dark-mode div[style*="background: #fffcf5"] p[style*="color: #333"] { color: #e8eaed !important; } html.dark-mode div[style*="background: #fffcf5"] p[style*="color: red"] { color: #ff6964 !important; } html.dark-mode .panel-defaultsss a:not(.btn), html.dark-mode .panel-bodysa a:not(.btn) { color: #f4a340; } html.dark-mode .panel-defaultsss a:not(.btn):hover, html.dark-mode .panel-defaultsss a:not(.btn):focus, html.dark-mode .panel-bodysa a:not(.btn):hover, html.dark-mode .panel-bodysa a:not(.btn):focus { color: #ffb65c; } html.dark-mode .copy-notification { background: rgba(24,27,33,.96) !important; color: #e8eaed !important; border: 1px solid #303640; } /* ========================================================= PAGE ABOUT - DARK MODE Hanya warna/background/border/shadow. Tidak mengubah layout, ukuran, posisi, PHP, SEO, atau query. ========================================================= */ /* Kotak kontak pemilik memakai background terang pada CSS normal page. */ html.dark-mode p.aloha { background-color: #20242b; color: #d7dce2; border-color: #303640; box-shadow: 0 1px 1px rgba(0,0,0,.18); } /* APK lama memberi background gradient langsung lewat inline style pada body. */ html.dark-mode body[style*="background: #4CA1AF"], html.dark-mode body[style*="background:#4CA1AF"] { background: #111318 !important; color: #d7dce2; } /* Pertahankan keterbacaan judul/link khusus halaman About. */ html.dark-mode p.aloha a { color: #f4a340; } html.dark-mode p.aloha a:hover, html.dark-mode p.aloha a:focus { color: #ffb65c; } /* ========================================================= PAGE: TERMS OF SERVICE / TOS Dark Mode global YagamiCell. Hanya warna, background, border, dan shadow. Layout/responsive/ukuran tetap berasal dari tos.php. ========================================================= */ html.dark-mode .ytos-page { --primary: #d72500; --primary-dark: #ed4a28; --primary-light: #34201b; --background: #111318; --card: #181b21; --text: #e8eaed; --text-soft: #c7cdd4; --muted: #a8b0bb; --border: #303640; --green: #b9e3c7; --green-bg: #17291f; --yellow: #f0d29a; --yellow-bg: #2b2518; --blue: #b8def7; --blue-bg: #132737; --red: #f1bcb1; --red-bg: #301c19; background: radial-gradient( circle at top left, rgba(215,37,0,.14), transparent 30% ), #111318; color: #e8eaed; } /* Sidebar */ html.dark-mode .ytos-sidebar { border-color: #303640; background: #181b21; box-shadow: 0 12px 35px rgba(0,0,0,.22); } html.dark-mode .ytos-sidebar-title { color: #a8b0bb; } html.dark-mode .ytos-sidebar a { color: #d7dce2; } html.dark-mode .ytos-sidebar a:hover { background: #2b201d; color: #ff8064; } html.dark-mode .ytos-sidebar a.ytos-active { background: #34201b; color: #ff8064; } html.dark-mode .ytos-nav-number { background: #20242b; color: #a8b0bb; } html.dark-mode .ytos-sidebar a:hover .ytos-nav-number, html.dark-mode .ytos-sidebar a.ytos-active .ytos-nav-number { background: #43251e; color: #ff8a70; } /* Cards dan teks utama */ html.dark-mode .ytos-card { border-color: #303640; background: #181b21; box-shadow: 0 10px 35px rgba(0,0,0,.20); } html.dark-mode .ytos-card h2, html.dark-mode .ytos-card h3, html.dark-mode .ytos-list strong, html.dark-mode .ytos-faq summary { color: #eef1f5; } html.dark-mode .ytos-card p, html.dark-mode .ytos-list > li { color: #c7cdd4; } html.dark-mode .ytos-card a { color: #ff8064; } html.dark-mode .ytos-card a:hover, html.dark-mode .ytos-card a:focus { color: #ff9a83; } html.dark-mode .ytos-label { color: #ff8064; } /* Ringkasan */ html.dark-mode .ytos-summary-item { border-color: #303640; background: #20242b; } html.dark-mode .ytos-summary-icon { background: #34201b; color: #ff8064; } html.dark-mode .ytos-summary-title { color: #a8b0bb; } html.dark-mode .ytos-summary-value { color: #eef1f5; } /* Alert khusus halaman TOS */ html.dark-mode .ytos-alert-info { color: #b8def7; border-color: #24465e; background: #132737; } html.dark-mode .ytos-alert-info .ytos-alert-icon { background: #19344a; color: #c8e8fb; } html.dark-mode .ytos-alert-warning { color: #f0d29a; border-color: #5a4930; background: #2b2518; } html.dark-mode .ytos-alert-warning .ytos-alert-icon { background: #3b311e; color: #ffe0a5; } html.dark-mode .ytos-alert-success { color: #b9e3c7; border-color: #2f5641; background: #17291f; } html.dark-mode .ytos-alert-success .ytos-alert-icon { background: #1f392b; color: #c9efd5; } html.dark-mode .ytos-alert-danger { color: #f1bcb1; border-color: #60342d; background: #301c19; } html.dark-mode .ytos-alert-danger .ytos-alert-icon { background: #44241f; color: #ffc9bd; } /* Daftar bernomor */ html.dark-mode .ytos-list > li { border-color: #303640; } html.dark-mode .ytos-list > li:before { background: #34201b; color: #ff8064; } /* Card khusus */ html.dark-mode .ytos-refund-card, html.dark-mode .ytos-security-card, html.dark-mode .ytos-illegal-card, html.dark-mode .ytos-agreement-card { background: #181b21; } html.dark-mode .ytos-refund-card, html.dark-mode .ytos-illegal-card, html.dark-mode .ytos-agreement-card { border-color: #513229; } html.dark-mode .ytos-security-card { border-color: #303640; } /* Jam refund */ html.dark-mode .ytos-hour { border-color: #303640; background: #20242b; } html.dark-mode .ytos-hour-open { border-color: #2f5641; background: #17291f; } html.dark-mode .ytos-hour-late { border-color: #5a4930; background: #2b2518; } html.dark-mode .ytos-hour-label { color: #a8b0bb; } html.dark-mode .ytos-hour-value { color: #eef1f5; } html.dark-mode .ytos-hour-desc { color: #c1c7ce; } /* FAQ */ html.dark-mode .ytos-faq details { border-color: #303640; } /* Bagian bawah */ html.dark-mode .ytos-bottom { color: #a8b0bb; } html.dark-mode .ytos-bottom strong { color: #ff8064; } /* ========================================================= PAGE: PROSES REFUND / KEBIJAKAN REFUND Hanya warna/background/border/shadow untuk mode malam. Layout, ukuran, posisi, responsive, konten, dan fungsi tetap. ========================================================= */ html.dark-mode body.yrefund-page { --primary: #e4472a; --primary-dark: #ff8064; --primary-soft: #2a1b18; --bg: #111318; --card: #181b21; --text: #e8eaed; --muted: #a8b0bb; --border: #303640; --green: #8fd6a5; --green-soft: #172b1d; --yellow: #f4c56c; --yellow-soft: #332719; --blue: #75b9ea; --blue-soft: #172a3a; background: radial-gradient(circle at top left, rgba(215,37,0,.12) 0, transparent 32%), #111318; color: #e8eaed; } /* Header merah tetap memakai identitas YagamiCell. */ html.dark-mode body.yrefund-page .hero { color: #fff; } html.dark-mode body.yrefund-page .hero h1, html.dark-mode body.yrefund-page .hero p, html.dark-mode body.yrefund-page .hero .updated, html.dark-mode body.yrefund-page .hero .badge { color: #fff; } html.dark-mode body.yrefund-page .hero .badge { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.20); } html.dark-mode body.yrefund-page .hero .badge-dot { background: #fff; } /* Sidebar navigasi halaman refund. */ html.dark-mode body.yrefund-page .sidebar { background: #181b21; border-color: #303640; box-shadow: 0 10px 35px rgba(0,0,0,.24); } html.dark-mode body.yrefund-page .sidebar-title { color: #a8b0bb; } html.dark-mode body.yrefund-page .sidebar a { color: #d7dce2; } html.dark-mode body.yrefund-page .sidebar a:hover, html.dark-mode body.yrefund-page .sidebar a:focus { background: #2a1b18; color: #ff8064; } html.dark-mode body.yrefund-page .nav-number { background: #20242b; color: #b9c1cb; } /* Card dan teks utama. */ html.dark-mode body.yrefund-page .card { background: #181b21; color: #e8eaed; border-color: #303640; box-shadow: 0 10px 35px rgba(0,0,0,.20); } html.dark-mode body.yrefund-page .card h2, html.dark-mode body.yrefund-page .card h3, html.dark-mode body.yrefund-page .timeline-title, html.dark-mode body.yrefund-page .fee-title, html.dark-mode body.yrefund-page summary { color: #eef1f5; } html.dark-mode body.yrefund-page .card p { color: #c7cdd4; } html.dark-mode body.yrefund-page .section-label { color: #ff8064; } /* Ringkasan. */ html.dark-mode body.yrefund-page .summary-item { background: #20242b; border-color: #303640; } html.dark-mode body.yrefund-page .summary-title { color: #a8b0bb; } html.dark-mode body.yrefund-page .summary-value { color: #eef1f5; } /* Notice / pemberitahuan. */ html.dark-mode body.yrefund-page .notice.warning { background: #332719; color: #f0d29a; border-color: #6b5129; } html.dark-mode body.yrefund-page .notice.warning .notice-icon { background: #49371d; color: #ffe0a5; } html.dark-mode body.yrefund-page .notice.warning strong { color: #ffe0a5; } html.dark-mode body.yrefund-page .notice.info { background: #172a3a; color: #b9dcff; border-color: #2f5775; } html.dark-mode body.yrefund-page .notice.info .notice-icon { background: #1f3a4f; color: #c9e7ff; } html.dark-mode body.yrefund-page .notice.info strong { color: #c9e7ff; } html.dark-mode body.yrefund-page .notice.success { background: #172b1d; color: #bce7c5; border-color: #315b3b; } html.dark-mode body.yrefund-page .notice.success .notice-icon { background: #213d2a; color: #c9efd1; } html.dark-mode body.yrefund-page .notice.success strong { color: #c9efd1; } /* Timeline proses refund. */ html.dark-mode body.yrefund-page .timeline-item:not(:last-child)::before { background: #343a43; } html.dark-mode body.yrefund-page .timeline-icon { background: #2a1b18; color: #ff8064; } html.dark-mode body.yrefund-page .timeline-text { color: #a8b0bb; } /* Biaya refund. */ html.dark-mode body.yrefund-page .fee { border-color: #303640; } html.dark-mode body.yrefund-page .fee.free { background: #172b1d; border-color: #315b3b; } html.dark-mode body.yrefund-page .fee.other { background: #20242b; } html.dark-mode body.yrefund-page .free .fee-status { color: #bce7c5; background: #213d2a; } html.dark-mode body.yrefund-page .other .fee-status { color: #c9d0d8; background: #2b3038; } html.dark-mode body.yrefund-page .fee-desc { color: #a8b0bb; } /* Daftar ketentuan. */ html.dark-mode body.yrefund-page .clean-list li { border-bottom-color: #303640; } html.dark-mode body.yrefund-page .check { background: #2a1b18; color: #ff8064; } /* FAQ. */ html.dark-mode body.yrefund-page details { border-bottom-color: #303640; } html.dark-mode body.yrefund-page details p { color: #c7cdd4; } /* Card persetujuan. */ html.dark-mode body.yrefund-page .agreement { background: linear-gradient(135deg,#221a18,#181b21); border-color: #513229; } html.dark-mode body.yrefund-page .agreement h2 { color: #ff8064; } html.dark-mode body.yrefund-page .agreement strong { color: #eef1f5; } /* Footer internal halaman refund: jangan terkena style footer situs global. */ html.dark-mode body.yrefund-page .content > .footer { color: #a8b0bb; background: transparent; border-top-color: transparent; } html.dark-mode body.yrefund-page .content > .footer .brand { color: #ff8064; } /* ========================================================= PAGE BLOG / ARTIKEL / KOMENTAR - DARK MODE Hanya warna/background/border/shadow. Tidak mengubah layout, ukuran, posisi, form action, PHP, atau logika komentar. ========================================================= */ /* Surface utama halaman blog. */ html.dark-mode body.yblog-page { background-color: #111318; color: #d7dce2; } /* Judul daftar artikel dan judul artikel. */ html.dark-mode body.yblog-page .blog-main .title { border-bottom-color: #4a4030; } html.dark-mode body.yblog-page .blog-main .title span { color: #eef1f5; border-bottom-color: #f4a340; } html.dark-mode body.yblog-page .blog-post-title, html.dark-mode body.yblog-page .blog-comments-title { color: #eef1f5; } html.dark-mode body.yblog-page a:hover .blog-post-title, html.dark-mode body.yblog-page a:focus .blog-post-title { color: #ffb65c !important; } /* Card artikel dan panel komentar/sidebar. */ html.dark-mode body.yblog-page .blog-post .panel, html.dark-mode body.yblog-page .blog-comments .panel, html.dark-mode body.yblog-page .sidebar-module .panel { background-color: #181b21; border-color: #303640; box-shadow: 0 8px 24px rgba(0,0,0,.18); } html.dark-mode body.yblog-page .blog-post .panel-body, html.dark-mode body.yblog-page .sidebar-module .panel-body { background-color: #181b21; color: #d7dce2; } /* view.php mempunyai background #f9f9f9 khusus area komentar. */ html.dark-mode body.yblog-page .blog-comments .panel-body.bgcol { background-color: #181b21 !important; color: #d7dce2; } /* Meta artikel dan teks isi. */ html.dark-mode body.yblog-page .blog-post-meta { color: #a8b0bb; border-bottom-color: #303640; } html.dark-mode body.yblog-page .blog-post-date, html.dark-mode body.yblog-page .total-comments { color: #a8b0bb; } html.dark-mode body.yblog-page .blog-post-content, html.dark-mode body.yblog-page .blog-post-content p, html.dark-mode body.yblog-page .blog-comments .media-body p { color: #cdd3da; } html.dark-mode body.yblog-page .blog-post-content h1, html.dark-mode body.yblog-page .blog-post-content h2, html.dark-mode body.yblog-page .blog-post-content h3, html.dark-mode body.yblog-page .blog-post-content h4, html.dark-mode body.yblog-page .blog-post-content h5, html.dark-mode body.yblog-page .blog-post-content h6 { color: #eef1f5; } /* Konten artikel lama kadang mempunyai warna terang/hitam lewat inline style. */ html.dark-mode body.yblog-page .blog-post-content [style*="color:#000"], html.dark-mode body.yblog-page .blog-post-content [style*="color: #000"], html.dark-mode body.yblog-page .blog-post-content [style*="color:#333"], html.dark-mode body.yblog-page .blog-post-content [style*="color: #333"], html.dark-mode body.yblog-page .blog-post-content [style*="color:#0b0a0a"], html.dark-mode body.yblog-page .blog-post-content [style*="color: #0b0a0a"] { color: #d7dce2 !important; } html.dark-mode body.yblog-page .blog-post-content [style*="background:#fff"], html.dark-mode body.yblog-page .blog-post-content [style*="background: #fff"], html.dark-mode body.yblog-page .blog-post-content [style*="background:white"], html.dark-mode body.yblog-page .blog-post-content [style*="background: white"], html.dark-mode body.yblog-page .blog-post-content [style*="background-color:#fff"], html.dark-mode body.yblog-page .blog-post-content [style*="background-color: #fff"] { background-color: #20242b !important; } /* Label kategori: tetap berbeda warnanya namun tidak menyilaukan. */ html.dark-mode body.yblog-page .label-light { color: #d7dce2; } html.dark-mode body.yblog-page .label-light.label-default, html.dark-mode body.yblog-page .label-light { background-color: #252a32; } html.dark-mode body.yblog-page .label-light.label-primary { color: #bfe9e4; background-color: #18302f; } html.dark-mode body.yblog-page .label-light.label-success { color: #bce7c5; background-color: #172b1d; } html.dark-mode body.yblog-page .label-light.label-info { color: #b9dcff; background-color: #172a3a; } html.dark-mode body.yblog-page .label-light.label-warning { color: #ffd4c8; background-color: #35221d; } html.dark-mode body.yblog-page .label-light.label-danger { color: #ffc1be; background-color: #351b1b; } html.dark-mode body.yblog-page .label-light a { color: inherit; } /* Widget blog dan komentar terbaru. */ html.dark-mode body.yblog-page .sidebar-module .media, html.dark-mode body.yblog-page .sidebar-module .media-body, html.dark-mode body.yblog-page #comment-lists .media, html.dark-mode body.yblog-page #comment-lists .media-body { color: #d7dce2; } html.dark-mode body.yblog-page .sidebar-module h3, html.dark-mode body.yblog-page .sidebar-module h4, html.dark-mode body.yblog-page .sidebar-module h5 { color: #eef1f5; } html.dark-mode body.yblog-page .sidebar-module .text-muted, html.dark-mode body.yblog-page #comment-lists .text-muted { color: #9fa8b4; } /* Pager daftar artikel. */ html.dark-mode body.yblog-page .pager > li > a, html.dark-mode body.yblog-page .pager > li > span { color: #d7dce2; background-color: #1b1f25; border-color: #343a43; } html.dark-mode body.yblog-page .pager > li > a:hover, html.dark-mode body.yblog-page .pager > li > a:focus { color: #fff; background-color: #292e36; border-color: #444c57; } /* Komentar. */ html.dark-mode body.yblog-page .blog-comments hr { border-top-color: #303640; } html.dark-mode body.yblog-page .blog-comments .badge { color: #eef1f5; background-color: #303640; } html.dark-mode body.yblog-page .blog-comments-title > .fa-comments { color: #f4a340; } html.dark-mode body.yblog-page #comment-form .form-control { color: #e8eaed; background-color: #171a20; border-color: #3a414b; } html.dark-mode body.yblog-page #comment-form .form-control:focus { color: #fff; background-color: #1b1f26; border-color: #e4472a; } html.dark-mode body.yblog-page #comment-form .input-group-addon { color: #cfd5dc; background-color: #22262d; border-color: #3a414b; } html.dark-mode body.yblog-page #comment-form .input-group-addon a { color: #f4a340; } /* Bintang rating form: belum dipilih dibuat redup, hover/checked tetap kuning. */ html.dark-mode body.yblog-page .star-rating label { color: #65707d; } html.dark-mode body.yblog-page .star-rating input:not(:checked) ~ label:hover, html.dark-mode body.yblog-page .star-rating input:not(:checked) ~ label:hover ~ label, html.dark-mode body.yblog-page .star-rating input:checked ~ label { color: #ffc107; } /* Bintang kosong pada daftar komentar lama memakai inline putih. */ html.dark-mode body.yblog-page #comment-lists span.fa.fa-star.checked[style*="color: #ffffff"], html.dark-mode body.yblog-page #comment-lists span.fa.fa-star.checked[style*="color:#ffffff"] { color: #65707d !important; -webkit-text-stroke-color: #303640 !important; } /* Bintang terisi tetap kuning dan lebih halus di permukaan gelap. */ html.dark-mode body.yblog-page #comment-lists span.fa.fa-star.checked[style*="color:#f90"], html.dark-mode body.yblog-page #comment-lists span.fa.fa-star.checked[style*="color: #f90"] { color: #ffc107 !important; -webkit-text-stroke-color: #4a3b13 !important; } /* Tombol Kirim Komentar / Read More tetap terbaca. */ html.dark-mode body.yblog-page a.btn-warning, html.dark-mode body.yblog-page button.btn-warning, html.dark-mode body.yblog-page .btn-warning { color: #171a1f; background-color: #f0ad4e; background-image: none; border-color: #eea236; text-shadow: none; } html.dark-mode body.yblog-page a.btn-warning:hover, html.dark-mode body.yblog-page a.btn-warning:focus, html.dark-mode body.yblog-page button.btn-warning:hover, html.dark-mode body.yblog-page button.btn-warning:focus, html.dark-mode body.yblog-page .btn-warning:hover, html.dark-mode body.yblog-page .btn-warning:focus { color: #111318; background-color: #ffb84d; border-color: #f0a12f; } /* Flashdata komentar ditampilkan tepat di atas form. */ html.dark-mode body.yblog-page .ym-comment-flash { box-shadow: none; } html.dark-mode body.yblog-page .ym-comment-feedback .alert-success { color: #bce7c5; background: #172b1d; border-color: #315b3b; } html.dark-mode body.yblog-page .ym-comment-feedback .alert-warning { color: #ffd89a; background: #332719; border-color: #6b5129; } html.dark-mode body.yblog-page .ym-comment-feedback .alert-info { color: #b9dcff; background: #172a3a; border-color: #2f5775; } html.dark-mode body.yblog-page .ym-comment-feedback .alert-danger, html.dark-mode body.yblog-page .ym-comment-flash.alert-danger { color: #ffc1be; background: #351b1b; border-color: #6b3331; } /* Elemen artikel Bootstrap lain yang sering berwarna terang. */ html.dark-mode body.yblog-page .blog-post-content blockquote { color: #c9d0d8; border-left-color: #4a515c; } html.dark-mode body.yblog-page .blog-post-content mark, html.dark-mode body.yblog-page .blog-post-content .mark { color: #f6ddb1; background-color: #382e1c; } /* BLOG COMMENT NOTIFY / FLASHDATA */ html.dark-mode body.yblog-page .notifyjs-bootstrap-base { color: #e8eaed !important; background-color: #20242b !important; background-image: none !important; border-color: #343a43 !important; text-shadow: none !important; box-shadow: 0 8px 24px rgba(0,0,0,.28) !important; } html.dark-mode body.yblog-page .notifyjs-bootstrap-success { color: #c9efd1 !important; background-color: #172b1d !important; border-color: #315b3b !important; } html.dark-mode body.yblog-page .notifyjs-bootstrap-warn { color: #ffe0a5 !important; background-color: #332719 !important; border-color: #6b5129 !important; } html.dark-mode body.yblog-page .notifyjs-bootstrap-error { color: #ffc7c7 !important; background-color: #351d1d !important; border-color: #6b3434 !important; } html.dark-mode body.yblog-page .notifyjs-bootstrap-info { color: #c9e7ff !important; background-color: #172a3a !important; border-color: #2f5775 !important; } /* ========================================================= BLOG VIEW - ISI POSTING / bp_deskripsi Menimpa background terang yang tersimpan di HTML artikel lama. Hanya aktif pada html.dark-mode dan tidak mengubah mode siang. ========================================================= */ html.dark-mode body.yblog-page .blog-post-content { background-color: #181b21 !important; color: #d7dce2; } /* Background putih / abu sangat terang dari inline style artikel lama. */ html.dark-mode body.yblog-page .blog-post-content [style*="background:#fff"], html.dark-mode body.yblog-page .blog-post-content [style*="background: #fff"], html.dark-mode body.yblog-page .blog-post-content [style*="background:#ffffff"], html.dark-mode body.yblog-page .blog-post-content [style*="background: #ffffff"], html.dark-mode body.yblog-page .blog-post-content [style*="background:#f9f9f9"], html.dark-mode body.yblog-page .blog-post-content [style*="background: #f9f9f9"], html.dark-mode body.yblog-page .blog-post-content [style*="background-color:#fff"], html.dark-mode body.yblog-page .blog-post-content [style*="background-color: #fff"], html.dark-mode body.yblog-page .blog-post-content [style*="background-color:#ffffff"], html.dark-mode body.yblog-page .blog-post-content [style*="background-color: #ffffff"], html.dark-mode body.yblog-page .blog-post-content [style*="background-color:#f9f9f9"], html.dark-mode body.yblog-page .blog-post-content [style*="background-color: #f9f9f9"], html.dark-mode body.yblog-page .blog-post-content [style*="background:white"], html.dark-mode body.yblog-page .blog-post-content [style*="background: white"], html.dark-mode body.yblog-page .blog-post-content [style*="background-color:white"], html.dark-mode body.yblog-page .blog-post-content [style*="background-color: white"], html.dark-mode body.yblog-page .blog-post-content [bgcolor="#fff"], html.dark-mode body.yblog-page .blog-post-content [bgcolor="#ffffff"], html.dark-mode body.yblog-page .blog-post-content [bgcolor="#f9f9f9"], html.dark-mode body.yblog-page .blog-post-content [bgcolor="white"] { background: #181b21 !important; background-color: #181b21 !important; color: #d7dce2 !important; } /* Variasi background terang Bootstrap/editor yang sering ikut tersimpan di posting lama. */ html.dark-mode body.yblog-page .blog-post-content .well, html.dark-mode body.yblog-page .blog-post-content .jumbotron, html.dark-mode body.yblog-page .blog-post-content .thumbnail, html.dark-mode body.yblog-page .blog-post-content .panel, html.dark-mode body.yblog-page .blog-post-content table, html.dark-mode body.yblog-page .blog-post-content td, html.dark-mode body.yblog-page .blog-post-content th { border-color: #343a43; } /* Teks gelap inline yang biasanya berpasangan dengan background putih artikel lama. */ html.dark-mode body.yblog-page .blog-post-content [style*="color:#000"], html.dark-mode body.yblog-page .blog-post-content [style*="color: #000"], html.dark-mode body.yblog-page .blog-post-content [style*="color:#000000"], html.dark-mode body.yblog-page .blog-post-content [style*="color: #000000"], html.dark-mode body.yblog-page .blog-post-content [style*="color:black"], html.dark-mode body.yblog-page .blog-post-content [style*="color: black"] { color: #d7dce2 !important; }