/* ============================================================================
   PERBAIKAN HASIL QA INTERNAL — DEVELOPER_TASK_BUG_FIX_LIST_ooh.co.id.docx
   Dikerjakan: 11 Agustus 2026

   File ini SENGAJA terpisah dari main.css (file bawaan tema), dan dimuat
   SESUDAHNYA. Alasannya: main.css adalah berkas tema pihak ketiga -- kalau
   temanya suatu saat diperbarui, semua perbaikan di dalamnya akan hilang
   tanpa jejak. Dengan dipisah begini, perbaikan tetap aman dan mudah
   ditelusuri siapa pun yang membaca kode ini nanti.

   Mencakup tiket: UI-01, UI-02, UI-03.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   UI-02 (P0) — Tombol "Masuk" teksnya tidak terlihat sebelum hover
   ---------------------------------------------------------------------------
   AKAR MASALAH (bukan sekadar warna teks yang kurang kontras):

   Struktur HTML-nya begini --
       <header class="header-section header-2">     <- 'header-2' di SINI
           <div id="header-sticky">                 <- class 'sticky' di SINI

   JavaScript menambahkan class 'sticky' ke <div id="header-sticky">, yaitu
   elemen ANAK. Sementara di main.css ada aturan:

       .sticky            { background-color: var(--white); }   /* #fff  */
       .sticky.header-2   { background-color: var(--theme); }   /* merah */

   Aturan kedua menuntut KEDUA class berada di elemen yang SAMA, padahal
   'sticky' dan 'header-2' ada di dua elemen berbeda -- jadi aturan itu
   TIDAK PERNAH AKTIF. Hasilnya header jadi PUTIH saat di-scroll, sementara
   tombol "Masuk" memakai warna teks putih (#fff) dengan latar transparan.
   Putih di atas putih = tidak terlihat sama sekali.

   CATATAN PENTING soal saran di dokumen QA:
   Dokumen menyarankan mengubah warna teks tombol jadi #1A1A1A (hitam).
   Saran itu TIDAK dipakai karena akan memindahkan masalahnya, bukan
   menyelesaikannya: saat header BELUM di-scroll, latarnya gelap/transparan
   di atas hero -- teks hitam justru jadi tidak terbaca di kondisi itu.

   Yang diperbaiki di sini adalah PENYEBABNYA: mengembalikan warna latar
   header saat sticky sesuai maksud desain aslinya (merah tema), sehingga
   teks putih tetap terbaca di KEDUA kondisi. Kontrasnya #fff di atas
   #E20935 = 4.9:1, lolos WCAG AA (syarat >= 4.5:1) sesuai permintaan tiket.
   --------------------------------------------------------------------------- */
.header-section.header-2 #header-sticky.sticky {
    background-color: var(--theme);
}

/* Jaring pengaman: kalau suatu saat latar header berubah jadi terang lagi,
   tombol tetap terbaca karena punya latar sendiri yang kontras, bukan
   mengandalkan warna latar header. */
.header-section.header-2 #header-sticky.sticky .header-right .theme-btn {
    border-color: #fff;
    color: #fff;
}


/* ---------------------------------------------------------------------------
   UI-01 (P1) — Menu "Kontak" turun baris (wrapping) di desktop
   ---------------------------------------------------------------------------
   Menu utama memakai layout mendatar tanpa pengaman anti-turun-baris. Saat
   lebar layar mengecil (atau teks menunya bertambah panjang), item terakhir
   -- "Kontak" -- terdorong ke baris kedua.

   Diperbaiki dengan melarang pembungkusan baris pada daftar menunya, dan
   sedikit merapatkan jarak antar-tombol di kanan supaya ruang untuk menu
   tetap cukup. Padding tombol juga sedikit dikurangi HANYA di rentang lebar
   yang rawan (1200-1499px), bukan di semua ukuran -- supaya tampilan di
   layar besar tidak ikut berubah.
   --------------------------------------------------------------------------- */
.header-2 .header-main .main-menu > nav > ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.header-2 .header-main .main-menu > nav > ul > li > a {
    white-space: nowrap;
}

@media (min-width: 1200px) and (max-width: 1499px) {
    /* Jarak bawaan tema di rentang ini terlalu longgar sehingga menu
       kehabisan ruang. 40px -> 20px cukup mengembalikan "Kontak" ke barisnya
       tanpa membuat tombol terlihat berdempetan. */
    .header-2 .header-main .header-right {
        gap: 20px;
    }

    .header-2 .header-main .header-right .theme-btn {
        padding: 18px 24px;
        font-size: 15px;
    }
}


/* ---------------------------------------------------------------------------
   UI-03 (P1) — Ikon & teks meluber keluar lingkaran step 1-7
   ---------------------------------------------------------------------------
   AKAR MASALAH: isi step diletakkan absolut di tengah lingkaran dengan
   `width: 100%` -- yaitu selebar DIAMETER lingkaran. Padahal ruang yang
   benar-benar muat di dalam lingkaran adalah persegi di dalamnya, yang
   lebarnya cuma sekitar 70% diameter (diameter dibagi akar 2).

   Akibatnya judul panjang seperti "Belajar dengan AI Tutor 24/7" melebar
   sampai ke tepi lingkaran lalu menyembul keluar, apalagi di layar kecil
   ketika lingkarannya mengecil jadi 190px tapi ukuran hurufnya tidak ikut
   mengecil sebanding.

   Diperbaiki dengan: (1) membatasi lebar isi ke ruang yang memang muat,
   (2) ukuran huruf yang menyesuaikan lebar layar lewat clamp(), (3) jarak
   ikon ke judul dirapatkan, (4) pemenggalan kata untuk judul yang sangat
   panjang. `overflow: hidden` SENGAJA TIDAK dipakai -- itu akan memotong
   teks jadi terpenggal separuh, yang justru lebih buruk daripada meluber.
   --------------------------------------------------------------------------- */
.process-items .content {
    /* 72% ~ ruang persegi yang muat di dalam lingkaran, plus sedikit napas. */
    width: 72%;
    left: 50%;
    padding: 0 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.process-items .content h3 {
    /* Menggantikan tiga aturan font-size bertingkat di main.css dengan satu
       aturan yang menyesuaikan lebar layar secara mulus. */
    font-size: clamp(14px, 1.15vw + 8px, 22px);
    line-height: 1.3;
    margin-top: 10px;
    margin-bottom: 0;
    overflow-wrap: break-word;
    hyphens: auto;
}

.process-items .icon {
    margin-bottom: 0 !important;
    line-height: 1;
}

.process-items .icon i {
    font-size: clamp(22px, 2vw + 6px, 34px);
}

@media (max-width: 575px) {
    .process-items .content {
        width: 76%;
    }
}


/* ---------------------------------------------------------------------------
   TEMUAN UJI 11 Agustus 2026 — Hiasan segitiga menutupi nomor telepon
   ---------------------------------------------------------------------------
   Di footer ada dua gambar hiasan (`arrow-shape-1` dan `arrow-shape-2`) yang
   dipasang `position: absolute` TANPA pengaturan lapisan. Karena keduanya
   muncul belakangan di dalam HTML, browser menaruhnya DI ATAS teks — dan di
   lebar layar tertentu posisinya persis menimpa nomor telepon kontak,
   sehingga angkanya tertutup separuh dan sulit dibaca.

   Diperbaiki dengan tiga hal sekaligus:
   1. `z-index: 0` pada hiasan + `z-index: 1` pada isi footer -> teks selalu
      di atas hiasan, berapa pun lebar layarnya.
   2. `pointer-events: none` -> hiasan tidak lagi "menangkap" klik. Tanpa ini,
      nomor telepon yang tertimpa jadi tidak bisa diklik di HP walaupun sudah
      terlihat -- masalah yang lebih halus dan lebih mudah lolos pengujian
      daripada sekadar tampilan tertutup.
   3. Hiasan disembunyikan di layar sempit (<= 1399px tema sudah melakukannya,
      tapi blok kontak juga muncul di lebar menengah) -- ditegaskan ulang di
      bawah supaya tidak bergantung pada urutan aturan tema.

   Hiasannya TIDAK dihapus: fungsinya murni dekoratif dan masih dipakai di
   rancangan visual aslinya. Yang salah bukan keberadaannya, tapi lapisannya.
   --------------------------------------------------------------------------- */
.footer-section .arrow-shape-1,
.footer-widgets-wrapper .arrow-shape-2 {
    z-index: 0;
    pointer-events: none;
}

.footer-section .container,
.footer-widgets-wrapper .container,
.footer-section .footer-widgets-wrapper > .container {
    position: relative;
    z-index: 1;
}

/* Blok kontak (ikon + nomor telepon) dipastikan berada di lapisan teratas. */
.footer-section .footer-content,
.footer-section .contact-info-items,
.footer-section .footer-widgets-wrapper .single-footer-widget {
    position: relative;
    z-index: 2;
}


/* ===========================================================================
   REVISI 11 Agustus 2026 (sore) — hasil uji visual Faza
   =========================================================================== */


/* ---------------------------------------------------------------------------
   Segitiga hiasan MASIH menutupi nomor telepon (perbaikan pertama belum cukup)
   ---------------------------------------------------------------------------
   Perbaikan sebelumnya menaikkan lapisan isi footer, TAPI hiasannya sendiri
   masih tergambar di atas sebagian teks. Sebabnya: z-index hanya berpengaruh
   pada elemen yang punya position DAN berada di konteks penumpukan yang sama.
   Blok kontak ternyata berada di pembungkus lain, sehingga tidak pernah
   benar-benar naik ke atas hiasan.

   Sekarang diselesaikan dari sisi yang berlawanan dan pasti: hiasannya
   DITURUNKAN ke lapisan negatif, sehingga selalu berada di belakang apa pun.
   --------------------------------------------------------------------------- */
.footer-section .arrow-shape-1,
.footer-widgets-wrapper .arrow-shape-2 {
    z-index: -1 !important;
    pointer-events: none;
}

.footer-section,
.footer-widgets-wrapper {
    isolation: auto;
}

/* Blok kontak dipastikan punya lapisan sendiri di atas hiasan. */
.footer-section .contact-info-items,
.footer-section .contact-info-items * {
    position: relative;
    z-index: 3;
}

/* Di layar sempit hiasan disembunyikan sepenuhnya — ruangnya terlalu sempit
   untuk hiasan besar, dan risiko menutupi teks jadi jauh lebih tinggi. */
@media (max-width: 1599px) {
    .footer-section .arrow-shape-1,
    .footer-widgets-wrapper .arrow-shape-2 {
        display: none !important;
    }
}


/* ---------------------------------------------------------------------------
   Tombol header tidak terlihat sebelum hover
   ---------------------------------------------------------------------------
   MASALAH: tombol Masuk/Daftar/Dashboard/Keluar memakai latar transparan
   dengan teks putih. Di header yang latarnya juga terang, teksnya praktis
   tidak terbaca sampai kursor diarahkan ke sana.

   Artinya pengunjung harus MENEBAK di mana tombolnya. Untuk tombol "Daftar" —
   pintu masuk utama produk ini — itu kerugian langsung.

   PERBAIKAN: beri latar & garis tepi yang jelas SEJAK AWAL. Animasi
   pergantian warna saat hover TETAP dipertahankan (permintaan Faza) — yang
   berubah hanya keadaan awalnya, dari "tidak terlihat" jadi "terlihat jelas".
   --------------------------------------------------------------------------- */

/* Tombol SEKUNDER (Masuk / Dashboard / Keluar) — garis tepi jelas, teks merah */
.header-section .header-right .theme-btn,
.header-section .header-right button.theme-btn {
    background-color: #fff !important;
    border: 2px solid var(--theme) !important;
    color: var(--theme) !important;
    font-weight: 700;
}

/* Tombol UTAMA (Daftar) tetap solid supaya paling menonjol. Dikenali lewat
   gaya sebaris background #FF5722 yang sudah ada di HTML. */
.header-section .header-right .theme-btn[style*="FF5722"],
.header-section .header-right .theme-btn[style*="ff5722"] {
    background-color: #FF5722 !important;
    border-color: #FF5722 !important;
    color: #fff !important;
}

/* Animasi hover bawaan tema dipertahankan; warna teks disesuaikan supaya
   tetap terbaca sepanjang animasi berjalan. */
.header-section .header-right .theme-btn:hover {
    color: #fff !important;
    border-color: var(--header) !important;
}

.header-section .header-right .theme-btn::before,
.header-section .header-right .theme-btn::after {
    background-color: var(--header);
}

/* Saat header menempel (sticky) latarnya jadi merah tema — tombol sekunder
   dibalik jadi putih-di-atas-merah supaya tetap kontras di kondisi itu. */
.header-section.header-2 #header-sticky.sticky .header-right .theme-btn {
    background-color: transparent !important;
    border-color: #fff !important;
    color: #fff !important;
}

.header-section.header-2 #header-sticky.sticky .header-right .theme-btn[style*="FF5722"],
.header-section.header-2 #header-sticky.sticky .header-right .theme-btn[style*="ff5722"] {
    background-color: #FF5722 !important;
    border-color: #FF5722 !important;
    color: #fff !important;
}


/* ---------------------------------------------------------------------------
   WIDGET PILIHAN PROGRAM di hero (Non-IELTS vs IELTS Owner)
   ---------------------------------------------------------------------------
   Gaya dibuat menyatu dengan komponen lain di situs: sudut membulat, warna
   aksen #FF5722, transisi 0.3s yang sama dengan kartu layanan.

   Latarnya semi-transparan gelap karena berada DI ATAS gambar hero yang ramai —
   kartu putih solid akan terasa seperti tempelan dan menutupi terlalu banyak
   foto. Efek blur menjaga teks tetap terbaca berapa pun isi fotonya.
   --------------------------------------------------------------------------- */
.pilihan-program {
    display: block;
    height: 100%;
    padding: 20px;
    border-radius: 14px;
    background: rgba(12, 16, 26, 0.62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1.5px solid rgba(255, 255, 255, 0.16);
    transition: all 0.3s ease-in-out;
}

.pilihan-program:hover {
    border-color: #FF5722;
    background: rgba(12, 16, 26, 0.78);
    transform: translateY(-4px);
}

.pilihan-program-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.pilihan-program-ikon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 11px;
    background: rgba(255, 87, 34, 0.16);
    color: #FF5722;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.pilihan-program-judul {
    display: block;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

.pilihan-program-sub {
    display: block;
    color: rgba(255, 255, 255, 0.62);
    font-size: 12.5px;
    margin-top: 2px;
}

.pilihan-program-list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
}

.pilihan-program-list li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    line-height: 1.5;
}

/* Centang digambar lewat CSS, bukan ikon tambahan — mengurangi ketergantungan
   pada pustaka ikon yang dimuat dari luar. */
.pilihan-program-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 5px;
    width: 5px;
    height: 9px;
    border-right: 2px solid #FF5722;
    border-bottom: 2px solid #FF5722;
    transform: rotate(45deg);
}

.pilihan-program-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #FF5722;
    font-size: 13.5px;
    font-weight: 700;
}

.pilihan-program-cta i {
    transition: transform 0.3s ease-in-out;
    font-size: 12px;
}

.pilihan-program:hover .pilihan-program-cta i {
    transform: translateX(4px);
}

@media (max-width: 991px) {
    .pilihan-program {
        padding: 16px;
    }
    .pilihan-program-judul {
        font-size: 15.5px;
    }
}


/* ===========================================================================
   REVISI KEDUA 11 Agustus 2026 — hasil uji visual Faza (putaran 2)
   =========================================================================== */


/* ---------------------------------------------------------------------------
   Tombol header: tinggi tidak seragam + warna belum sesuai
   ---------------------------------------------------------------------------
   DUA MASALAH yang terlihat di tangkapan layar:

   1. Saat sudah masuk akun, tombol "Dashboard" tampak LEBIH TINGGI daripada
      "Keluar". Penyebabnya: "Dashboard" adalah <a>, sedangkan "Keluar" adalah
      <button> di dalam <form>. Keduanya punya perhitungan tinggi baris bawaan
      yang berbeda, dan <button> juga membawa padding bawaan peramban.

   2. Warnanya masih merah tema, sedangkan Faza ingin oranye (#FF5722) seperti
      komponen lain.

   Perbaikannya menyeragamkan KEDUANYA lewat tinggi tetap + flexbox, sehingga
   tidak lagi bergantung pada perhitungan tinggi baris masing-masing elemen.
   --------------------------------------------------------------------------- */
.header-section .header-right .theme-btn,
.header-section .header-right button.theme-btn {
    /* Tinggi & perataan diseragamkan — ini yang menyelesaikan beda tinggi. */
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    line-height: 1;
    box-sizing: border-box;
    border-radius: 6px;

    /* Oranye, sesuai permintaan. */
    background-color: #fff !important;
    border: 2px solid #FF5722 !important;
    color: #FF5722 !important;
    font-weight: 700;
    font-size: 15px;
}

/* <form> pembungkus tombol Keluar ikut disejajarkan supaya tidak menambah
   tinggi sendiri. */
.header-section .header-right form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.header-section .header-right .header-button {
    display: inline-flex;
    align-items: center;
}

/* Tombol UTAMA (Daftar) tetap solid oranye — paling menonjol. */
.header-section .header-right .theme-btn[style*="FF5722"],
.header-section .header-right .theme-btn[style*="ff5722"] {
    background-color: #FF5722 !important;
    border-color: #FF5722 !important;
    color: #fff !important;
}

/* Animasi hover dipertahankan; lapisan gelapnya diganti jadi oranye gelap
   supaya tetap satu keluarga warna. */
.header-section .header-right .theme-btn:hover {
    color: #fff !important;
    border-color: #E64A19 !important;
}

.header-section .header-right .theme-btn::before,
.header-section .header-right .theme-btn::after {
    background-color: #E64A19;
}

/* Saat header menempel (sticky), latarnya jadi merah tema — tombol dibalik
   jadi putih supaya tetap kontras. */
.header-section.header-2 #header-sticky.sticky .header-right .theme-btn {
    background-color: transparent !important;
    border-color: #fff !important;
    color: #fff !important;
}

.header-section.header-2 #header-sticky.sticky .header-right .theme-btn[style*="FF5722"],
.header-section.header-2 #header-sticky.sticky .header-right .theme-btn[style*="ff5722"] {
    background-color: #FF5722 !important;
    border-color: #FF5722 !important;
    color: #fff !important;
}


/* ---------------------------------------------------------------------------
   Menu samping (offcanvas, tombol 4 titik): tombol "Masuk" tidak terlihat
   ---------------------------------------------------------------------------
   Sama persis penyebabnya dengan tombol header sebelumnya: latar transparan
   dengan teks putih di atas panel yang latarnya juga terang. Baru terbaca
   setelah kursor diarahkan ke sana.

   Diseragamkan dengan permintaan Faza: hitam pekat untuk tombol sekunder
   (Masuk), oranye solid untuk tombol utama (Daftar Sekarang) — sama seperti
   yang sudah tampil benar di tangkapan layar.
   --------------------------------------------------------------------------- */
.offcanvas__contact .header-button .theme-btn,
.offcanvas__contact .header-button button.theme-btn {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 20px;
    line-height: 1;
    box-sizing: border-box;
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;

    /* Tombol sekunder: hitam pekat, terbaca sejak awal. */
    background-color: #0F172A !important;
    border: 2px solid #0F172A !important;
    color: #fff !important;
}

/* Tombol utama (Daftar Sekarang) — oranye solid. */
.offcanvas__contact .header-button .theme-btn[style*="FF5722"],
.offcanvas__contact .header-button .theme-btn[style*="ff5722"] {
    background-color: #FF5722 !important;
    border-color: #FF5722 !important;
    color: #fff !important;
}

.offcanvas__contact .header-button form {
    margin: 0;
    width: 100%;
}

/* Hover: sedikit menggelap, tetap terbaca. */
.offcanvas__contact .header-button .theme-btn:hover {
    background-color: #1e293b !important;
    border-color: #1e293b !important;
    color: #fff !important;
}

.offcanvas__contact .header-button .theme-btn[style*="FF5722"]:hover,
.offcanvas__contact .header-button .theme-btn[style*="ff5722"]:hover {
    background-color: #E64A19 !important;
    border-color: #E64A19 !important;
}

/* Lapisan animasi tema dimatikan di menu samping — di panel sempit begini
   animasi naik-turunnya justru membuat teks berkedip sulit dibaca. */
.offcanvas__contact .header-button .theme-btn::before,
.offcanvas__contact .header-button .theme-btn::after {
    display: none;
}

/* Ikon jam di daftar kontak sempat tampil sebagai kotak silang karena kelas
   ikonnya tidak ada di pustaka yang dimuat. Diganti ke kelas yang tersedia
   lewat penimpaan di berkas tampilan; aturan di bawah menjaga ukurannya
   seragam dengan ikon lain. */
.offcanvas__contact-icon i,
.offcanvas__contact-icon .fa,
.offcanvas__contact-icon .fas,
.offcanvas__contact-icon .far,
.offcanvas__contact-icon .fal {
    font-size: 15px;
    line-height: 1;
}


/* ===========================================================================
   REVISI KETIGA 11 Agustus 2026 — hasil uji visual Faza (putaran 3)

   ⚠️ Blok ini PALING BAWAH di berkas, jadi menimpa semua aturan tombol header
   dari revisi sebelumnya. Aturan lama sengaja dibiarkan (tidak dihapus) supaya
   riwayat perbaikannya tetap bisa ditelusuri.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   Animasi hover tombol header disamakan dengan tombol hero
   ---------------------------------------------------------------------------
   ACUAN YANG BENAR: tombol "Mulai Pre-Test" dan "Konsultasi Program" di hero.
   Keduanya memakai animasi bawaan tema — lapisan GELAP (var(--header),
   #16171A) yang naik dari atas & bawah saat disentuh kursor.

   Revisi sebelumnya keliru memakai oranye gelap (#E64A19) sebagai lapisannya.
   Untuk tombol "Masuk" (latar putih) efeknya masih terlihat, tapi untuk
   "Daftar" yang latarnya SUDAH oranye (#FF5722), lapisan oranye gelap nyaris
   tidak terlihat bedanya — animasinya seolah tidak jalan.

   Sekarang keduanya memakai lapisan gelap yang sama persis dengan hero.
   --------------------------------------------------------------------------- */
.header-section .header-right .theme-btn::before,
.header-section .header-right .theme-btn::after {
    background-color: var(--header) !important;
}

.header-section .header-right .theme-btn:hover {
    color: #fff !important;
    border-color: var(--header) !important;
}


/* ---------------------------------------------------------------------------
   Tombol "Masuk" hilang saat halaman digulir (header menempel)
   ---------------------------------------------------------------------------
   MASALAH: saat header menempel, aturan sebelumnya mengubah tombol jadi
   latar transparan + teks putih, dengan asumsi latar headernya berubah gelap.
   Ternyata latar header saat menempel tetap PUTIH — sehingga teks putih di
   atas putih, dan tombol "Masuk" hilang lagi. Persis masalah yang sudah
   diperbaiki di keadaan normal, terulang di keadaan menempel.

   PERBAIKAN: hapus perbedaan itu sama sekali. Tombol tampil SAMA PERSIS baik
   header sedang menempel maupun tidak. Selain menyelesaikan masalahnya, ini
   juga menghilangkan satu sumber kesalahan di masa depan — tidak ada lagi
   dua keadaan yang harus dijaga tetap benar sendiri-sendiri.
   --------------------------------------------------------------------------- */
.header-section.header-2 #header-sticky.sticky .header-right .theme-btn,
.header-section.header-2 #header-sticky.sticky .header-right button.theme-btn {
    background-color: #fff !important;
    border: 2px solid #FF5722 !important;
    color: #FF5722 !important;
}

.header-section.header-2 #header-sticky.sticky .header-right .theme-btn[style*="FF5722"],
.header-section.header-2 #header-sticky.sticky .header-right .theme-btn[style*="ff5722"] {
    background-color: #FF5722 !important;
    border-color: #FF5722 !important;
    color: #fff !important;
}

/* Hover saat menempel pun sama dengan keadaan normal. */
.header-section.header-2 #header-sticky.sticky .header-right .theme-btn:hover {
    color: #fff !important;
    border-color: var(--header) !important;
}