/* Tambahan kecil di atas template Yoda.
   Hanya untuk hal yang memang tidak disediakan Bootstrap/Yoda —
   bukan tempat menaruh ulang utility Tailwind. */

/* Kolom angka (uang, jam, jumlah) harus rata lebar per digit. */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Build Bootstrap milik Yoda tidak menyertakan fw-semibold. */
.fw-semibold {
    font-weight: 600 !important;
}

/* Bootstrap tidak punya ukuran teks di bawah .small. */
.text-xs {
    font-size: 12px;
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════════
   Jarak isi kartu

   Satu nilai untuk semua: apa pun isinya — teks, formulir, atau tabel — huruf
   pertamanya mulai pada jarak yang sama dari tepi kartu. Sebelumnya ada lima
   nilai berbeda di area staf (1px, 17px, 19px, 25px, 41px), sehingga kartu
   yang bersebelahan pada satu halaman tidak segaris.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --card-inset: 24px;
}

/* Tabel padat data: kepala kolom kecil dan tenang, baris cukup lega dibaca. */
.table > thead th {
    padding: 14px var(--card-inset);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    /* capitalize, bukan uppercase: kepala kolom ditulis biasa di view
       ("Gaji pokok"), dan aturan ini yang menaikkan huruf tiap katanya —
       jadi tidak perlu menyunting puluhan <th> satu per satu. */
    text-transform: capitalize;
    /* #b2bec3 hanya 1,81:1 di latar kepala tabel — pada 11px praktis samar. */
    color: #636e72;
    border-bottom: 1px solid #f0f3f5;
}
.table > tbody td {
    padding: 14px var(--card-inset);
    vertical-align: middle;
}
.table > tfoot td {
    padding: 14px var(--card-inset);
    font-weight: 600;
    border-top: 1px solid #f0f3f5;
}

/* Sel tabel yang berisi kontrol, bukan teks (kisi jadwal). Jaraknya lebih
   rapat dari sel biasa supaya tujuh kolom tetap muat, tapi cukup untuk memberi
   jeda antar kontrol — sebelumnya 4px, sehingga dropdown berhimpitan. Kolom
   terakhir memakai jarak tepi kartu yang normal supaya cincin fokusnya tidak
   terpotong oleh pemotongan sudut kartu. */
.table > tbody td.td-kontrol {
    padding: 8px;
}
.table > tbody td.td-kontrol:first-child {
    padding-left: var(--card-inset);
}
.table > tbody td.td-kontrol:last-child {
    padding-right: var(--card-inset);
}

/* Judul dan paragraf pengantar di dalam kartu tabel disejajarkan dengan sel di
   bawahnya. Hanya untuk kartu yang memang tidak berpadding sendiri — kartu isi
   biasa sudah punya 24px, dan menambahinya lagi menghasilkan 49px.

   Kartu .tabel-lepas termasuk yang berpadding sendiri: tabelnya yang ditarik
   keluar, bukan judulnya yang didorong masuk. Tanpa pengecualian ini judulnya
   berdiri 24px lebih ke kanan daripada kolom pertama tabel di bawahnya. */
.card:has(> .card-body) > h2,
.card:has(> .card-body) > p,
.card:has(> .table-responsive:not(.tabel-lepas)) > h2,
.card:has(> .table-responsive:not(.tabel-lepas)) > p,
.card:has(> table) > h2,
.card:has(> table) > p {
    padding-left: var(--card-inset);
    padding-right: var(--card-inset);
}
.card:has(> .card-body) > h2:first-child,
.card:has(> .table-responsive:not(.tabel-lepas)) > h2:first-child,
.card:has(> table) > h2:first-child {
    padding-top: 20px;
}

/* Kartu memotong isinya supaya semua yang menyentuh tepi ikut melengkung.
   Tanpa ini latar baris terakhir tabel (#fafafa) menimpa sudut membulat kartu
   dan terlihat sebagai sudut siku yang menyembul. Berlaku juga untuk lapisan
   bayangan gulir pada .table-responsive. */
.card {
    overflow: hidden;
}

/* Kartu yang memuat tabel secara langsung (tanpa .card-body) tidak boleh ikut
   berpadding: sel tabelnya sudah membawa jarak sendiri, dan keduanya bertumpuk
   menjadi 41px — hampir dua kali lipat kartu di sebelahnya.

   Pengecualiannya .tabel-lepas di bawah: kartu itu memang menyimpan padding
   supaya judulnya tetap segaris, dan tabelnya yang ditarik keluar. */
.card:not(:has(> .card-body)):has(> .table-responsive:not(.tabel-lepas)),
.card:not(:has(> .card-body)):has(> table),
.card.table-responsive {
    padding-left: 0;
    padding-right: 0;
}

/* Bayangan tepi pada tabel yang lebih lebar dari layarnya.
   Tanpa ini kolom aksi ("ubah", "hapus") berada jauh di luar layar ponsel dan
   tidak ada apa pun yang memberi tahu bahwa tabelnya bisa digeser.

   Dua lapis pertama berjangkar `local` sehingga ikut bergulir dan menutupi
   bayangan begitu sampai di ujung; dua lapis radial berjangkar `scroll`
   sehingga bayangannya hanya terlihat selama masih ada isi di arah itu. */
.table-responsive {
    background:
        linear-gradient(to right, #fff 30%, rgb(255 255 255 / 0)) left center,
        linear-gradient(to left, #fff 30%, rgb(255 255 255 / 0)) right center,
        radial-gradient(farthest-side at 0 50%, rgb(34 48 41 / 0.32), transparent) left center,
        radial-gradient(farthest-side at 100% 50%, rgb(34 48 41 / 0.32), transparent) right center;
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 22px 100%, 22px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* Yoda hanya memberi jarak mendatar pada area isi (margin: 0 32px) dan tidak
   sama sekali di bawah, sehingga kartu terakhir menempel ke tepi bawah layar.
   Jarak bawahnya disamakan dengan jarak sampingnya supaya ritmenya sama. */
.hp-main-layout-content {
    padding-bottom: 32px;
}

@media screen and (max-width: 767px) {
    /* Di lebar ini margin samping Yoda turun ke 16px; jarak bawah mengikuti. */
    .hp-main-layout-content {
        padding-bottom: 16px;
    }
}

/* Sidebar kita tidak memakai submenu, jadi tidak ada panah yang perlu ruang. */
.hp-sidebar .menu-arrow {
    display: none;
}

/* Tombol berikon di sidebar (lipat menu, keluar) berhenti di 40px — di bawah
   ambang sentuh. Ikonnya tetap seukuran semula, hanya area kliknya yang
   dilebarkan. */
.hp-sidebar .btn-icon-only,
.hp-mobile-sidebar .btn-icon-only {
    min-width: 44px;
    min-height: 44px;
}

/* Yoda menaruh padding di .card-body, sementara view kita kebanyakan mengisi
   .card langsung. Beri padding pada kartu yang TIDAK punya .card-body sendiri,
   supaya kartu tabel (yang sengaja memakai .card-body.p-0) tetap rapat. */
.card:not(:has(> .card-body)) {
    padding: 24px;
}

/* Judul di dalam kartu tabel menempel ke tepi; beri jarak bawah. */
.card > h2:first-child {
    margin-bottom: 12px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Warna merek: primary Yoda (#0010f7, biru elektrik) diganti hijau hutan
   yang sama dengan halaman landing, dengan emas sebagai aksen.

   Berkas ini dimuat paling akhir, jadi cukup menyamai spesifisitas aslinya.
   Kelas hp-* di Yoda memakai !important, jadi penggantinya ikut !important.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --brand-900: #223029;   /* hijau utama, sama dengan forest-900 di landing */
    --brand-800: #2d3e37;
    --brand-700: #3c514a;
    --brand-600: #526c62;
    --brand-tint: #eaf0ed;  /* latar lembut pengganti #ebfafa */
    --brand-gold: #c8964f;
    --brand-gold-soft: #f6efe2;
    --brand-cream: #f3f1e7;
}

/* ── Tombol ─────────────────────────────────────────────────────────────
   Yoda mendefinisikan .btn-primary dua kali — yang kedua ber-!important —
   dan components.min.css menambah .btn.btn-primary. Jadi penggantinya harus
   memakai !important dan spesifisitas yang setara, bukan sekadar urutan. */
.btn.btn-primary,
.btn-primary {
    background-color: var(--brand-900) !important;
    border-color: var(--brand-900) !important;
    color: var(--brand-cream) !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background: var(--brand-800) !important;
    background-color: var(--brand-800) !important;
    border-color: var(--brand-800) !important;
    color: var(--brand-cream) !important;
}
.btn.btn-primary:focus,
.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgb(200 150 79 / 0.35) !important;
}

.btn.btn-outline-primary,
.btn-outline-primary {
    color: var(--brand-900) !important;
    border-color: var(--brand-700) !important;
    background-color: transparent !important;
}
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:active,
.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: var(--brand-900) !important;
    border-color: var(--brand-900) !important;
    color: var(--brand-cream) !important;
}
.btn.btn-outline-primary:focus,
.btn-outline-primary:focus {
    box-shadow: 0 0 0 0.2rem rgb(200 150 79 / 0.3) !important;
}

/* Pilihan terpilih pada grup tombol radio (.btn-check). Bootstrap Yoda
   mewarnainya biru elektrik lewat selektornya sendiri, terpisah dari aturan
   :active di atas. */
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn.btn-outline-primary {
    background-color: var(--brand-900) !important;
    border-color: var(--brand-900) !important;
    color: var(--brand-cream) !important;
}
.btn-check:focus + .btn-outline-primary,
.btn-check:focus + .btn.btn-outline-primary {
    box-shadow: 0 0 0 0.2rem rgb(200 150 79 / 0.35) !important;
}

/* ── Teks, latar, garis ─────────────────────────────────────────────────── */
.text-primary { color: var(--brand-900) !important; }
.bg-primary,
.badge.bg-primary { background-color: var(--brand-900) !important; }

a { color: var(--brand-800); }
a:hover { color: var(--brand-900); }

.hp-text-color-primary-1 { color: var(--brand-900) !important; }
.hp-text-color-primary-2 { color: var(--brand-800) !important; }
.hp-text-color-primary-3 { color: var(--brand-600) !important; }
.hp-text-color-primary-4 { color: var(--brand-tint) !important; }

.hp-bg-color-primary-1 { background-color: var(--brand-900) !important; }
.hp-bg-color-primary-2 { background-color: var(--brand-800) !important; }
.hp-bg-color-primary-3 { background-color: var(--brand-600) !important; }
.hp-bg-color-primary-4 { background-color: var(--brand-tint) !important; }

.hp-border-color-primary-1 { border-color: var(--brand-900) !important; }
.hp-border-color-primary-2 { border-color: var(--brand-800) !important; }
.hp-border-color-primary-3 { border-color: var(--brand-600) !important; }
.hp-border-color-primary-4 { border-color: var(--brand-tint) !important; }

/* ── Isian formulir ─────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-700);
    box-shadow: 0 0 0 0.2rem rgb(200 150 79 / 0.25);
}
.form-check-input:checked {
    background-color: var(--brand-900);
    border-color: var(--brand-900);
}
.form-check-input:focus {
    border-color: var(--brand-700);
    box-shadow: 0 0 0 0.2rem rgb(200 150 79 / 0.25);
}

/* ── Menu sidebar ───────────────────────────────────────────────────────
   Yoda menandai halaman aktif lewat WARNA TEKS, bukan latar terisi, dan
   selektornya panjang (.hp-sidebar-container ... > ul > li > ul li a.active).
   Penggantinya harus menyamai kedalaman itu, bukan sekadar dimuat belakangan. */
/* Bentuk dasar item menu. Yoda memberinya `padding: 12px 0` tanpa sudut
   membulat, sehingga sorotan aktif menjadi pita selebar kolom bersudut siku —
   dan penanda emasnya jatuh tepat di x yang sama dengan ikon, tertimpa.
   Padding mendatar memberi ruang bagi penanda; margin negatif sebesar padding
   menjaga ikon tetap di posisi semula, jadi tidak ada yang bergeser. */
/* Keping sorotan digambar sebagai elemen semu yang melar 12px ke kiri-kanan,
   BUKAN lewat padding/margin pada <a>. Yoda memusatkan ikon di keadaan
   terlipat memakai geometri tautannya sendiri, jadi begitu box model-nya
   disentuh, ikon meleset dari sumbu saat sidebar menyempit. */
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a.active:after,
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a:hover:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -12px;
    right: -12px;
    border-radius: 8px;
    background: var(--brand-tint);
}

/* Isi tautan harus naik di atas keping itu; tanpa ini elemen semu menutupi
   ikon dan labelnya. */
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a > span {
    position: relative;
    z-index: 1;
}

.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a.active {
    color: var(--brand-900);
}

/* Satu-satunya sentuhan emas: penanda halaman yang sedang dibuka. Ditempel di
   tepi kiri keping, bukan sebagai inset shadow — shadow mengikuti lengkung
   sudut sehingga garis 3px-nya ikut melengkung dan terlihat penyok. */
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a.active:before {
    display: block;
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    z-index: 1;
    width: 3px;
    height: 20px;
    transform: translateY(-50%);
    border-radius: 0 3px 3px 0;
    background: var(--brand-gold);
}

/* Ikon dan label di dalam item aktif punya aturannya sendiri di Yoda —
   yang untuk <i> bahkan ber-!important, jadi harus ditiru persis. */
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a.active i {
    color: var(--brand-900) !important;
}
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a.active > span > span,
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li .submenu-children li > a.active > span {
    color: var(--brand-900);
}
.hp-sidebar-dropdown-container ul li a.active {
    color: var(--brand-900);
}

/* Hover. Yoda mewarnai biru elektrik lewat EMPAT aturan terpisah — <a>, <i>,
   > span, dan > span > span — dua di antaranya ber-!important. Mengganti yang
   pertama saja meninggalkan ikon dan teksnya tetap biru. */
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a:hover {
    color: var(--brand-900);
}
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a:hover i {
    color: var(--brand-900) !important;
}
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a:hover > span {
    color: var(--brand-900) !important;
}
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a:hover > span > span {
    color: var(--brand-900);
}
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a:hover .menu-arrow:before,
.hp-sidebar-container .hp-sidebar-header-menu > ul > li > ul li a:hover .menu-arrow:after {
    background-color: var(--brand-900);
}

/* ── Pesan flash ────────────────────────────────────────────────────────
   Yoda memberi alert teks neon di atas latar pucat sewarna: success terbaca
   1,4:1 dan warning 1,5:1 — di bawah ambang baca. Latarnya dipertahankan
   (warnanya menyampaikan makna); hanya teksnya yang digelapkan sampai lolos
   4,5:1, plus garis tepi supaya kotaknya punya batas jelas. */
.alert-success {
    color: #0b6b52 !important;
    border-color: rgb(11 107 82 / 0.25) !important;
}
.alert-warning {
    color: #7a5320 !important;
    border-color: rgb(122 83 32 / 0.25) !important;
}
.alert-danger {
    color: #b02a1f !important;
    border-color: rgb(176 42 31 / 0.25) !important;
}
.alert-info {
    color: #0b5c6d !important;
    border-color: rgb(11 92 109 / 0.25) !important;
}

/* Teks sekunder Yoda (#b2bec3) hanya 1,9:1 di atas putih, padahal dipakai
   untuk email, keterangan cabang, dan catatan kecil di seluruh area staf.
   Digelapkan ke nada abu Yoda berikutnya yang lolos ambang baca. */
.hp-text-color-black-60 {
    color: #636e72 !important;
}

/* Warna semantik untuk angka dan status. Nilai bawaan Yoda dibuat untuk latar
   gelap: #00f7bf hanya 1,34:1 di atas kartu putih — dan itulah warna angka
   "Laba operasional", angka terpenting di halaman laporan. Nadanya
   dipertahankan, kecerahannya diturunkan sampai lolos ambang baca. */
.text-success {
    color: #0b6b52 !important;
}
.text-danger {
    color: #b02a1f !important;
}
.text-warning {
    color: #7a5320 !important;
}

/* ── Badge status ───────────────────────────────────────────────────────
   Mint neon Yoda memberi teks abu-abu 3,76:1 pada ukuran 12px. Hijaunya
   dipertahankan karena membawa makna "aktif", tapi diturunkan jadi pil
   bernada lembut dengan teks gelap — pola yang sama dengan badge status di
   halaman publik. */
.badge.bg-success {
    color: #0a5f4a !important;
    background-color: #d6f5ea !important;
}
.badge.bg-secondary {
    color: #333d38 !important;
    background-color: #e6e9e7 !important;
}
.badge.bg-warning {
    color: #6b4a1c !important;
    background-color: #fbeed0 !important;
}

/* <code> mewarisi merah muda bawaan Bootstrap (#d63384) — melenceng dari palet
   dan hanya 4,29:1. Kode cabang dipakai sebagai penanda, bukan cuplikan kode. */
.card code,
.table code {
    color: var(--brand-800);
}

/* Keadaan nonaktif tombol. Penggantian warna merek di atas memakai !important
   sehingga menang atas gaya disabled bawaan Bootstrap — akibatnya tombol mati
   terlihat persis sama dengan yang hidup, dan pemakai hanya merasa kliknya
   tidak berfungsi. Ditegaskan ulang di sini. */
.btn:disabled,
.btn.disabled,
.btn[disabled] {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* ── Pengambil foto presensi ─────────────────────────────────────────────
   Panggung berasio tetap supaya tata letak tidak melompat saat kamera baru
   menyala atau saat pratinjau diganti hasil jepretan. */
.kamera-panggung {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 7px;
    background: #2d3436;
}
.kamera-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.kamera-cermin {
    transform: scaleX(-1);
}
.kamera-pesan {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: #fff;
}

/* Baris tabel yang disorot (mis. hari ini pada jadwal) memakai emas lembut. */
.table-active > * {
    background-color: var(--brand-gold-soft) !important;
}

/* Tombol hapus baris di kasir. Sebelumnya selebar 25px — terlalu sempit untuk
   jari, padahal aksinya membuang baris belanja. Merah sejak diam, karena
   btn-outline-primary membuatnya terbaca sebagai aksi biasa. */
.btn.btn-hapus-baris {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 20px;
    line-height: 1;
    color: #c0392b;
    background-color: transparent;
    border: 1px solid rgb(192 57 43 / 0.35);
}
.btn.btn-hapus-baris:hover,
.btn.btn-hapus-baris:focus {
    color: #fff;
    background-color: #c0392b;
    border-color: #c0392b;
}
.btn.btn-hapus-baris:focus {
    box-shadow: 0 0 0 0.2rem rgb(192 57 43 / 0.3);
}

/* ══════════════════════════════════════════════════════════════════════════
   Pengajuan (kasbon, reimburse, izin, lembur)
   ══════════════════════════════════════════════════════════════════════════ */

/* Formulir pengajuan menyembunyikan kolom yang tidak dipakai jenis terpilih
   lewat atribut `hidden`. Bootstrap tidak menegaskan aturannya, sehingga blok
   ber-.row tetap tampil karena `display:flex` menang atas UA stylesheet. */
[hidden] {
    display: none !important;
}

/* Satu pengajuan yang menunggu keputusan. Dikotakkan, bukan dibariskan di
   tabel: tiap kotak adalah satu keputusan yang dibaca utuh, bukan angka yang
   dibandingkan antar baris — dan di ponsel tidak ada yang perlu digeser. */
.pengajuan-item {
    padding: 16px;
    border: 1px solid #e4e8e6;
    border-radius: 7px;
}
.pengajuan-item:hover {
    border-color: var(--brand-600);
}

/* Penolakan memakai warna bahaya; teks putih di atas merah bawaan Bootstrap
   sudah cukup kontras, tapi nadanya disamakan dengan tombol hapus baris. */
.btn.btn-danger,
.btn.btn-danger:hover,
.btn.btn-danger:focus {
    color: #fff !important;
    background-color: #c0392b !important;
    border-color: #c0392b !important;
}
.btn.btn-danger:hover {
    background-color: #a93226 !important;
    border-color: #a93226 !important;
}

/* Pil status "Ditolak", senada dengan bg-success/bg-warning di atas. */
.badge.bg-danger {
    color: #93221a !important;
    background-color: #f8ddda !important;
}

/* Tabel penuh lebar di dalam kartu yang berpadding: ditarik keluar sejauh
   padding kartu, lalu jarak tepinya kembali dibawa sel tabel — sehingga judul
   kartu dan kolom pertama berdiri di garis yang sama. Tanpa ini keduanya
   meleset 24px, atau tabelnya berpadding dua kali. */
.card > .tabel-lepas {
    width: auto;
    margin-right: calc(var(--card-inset) * -1);
    margin-left: calc(var(--card-inset) * -1);
}

/* Tombol aksi merusak bergaris. Yoda memberi .btn-outline-danger merah neon
   #f02 — 3,9:1 di atas putih, di bawah ambang teks — dan pada hover menulis
   teks hitam di atas merah itu. Diturunkan ke merah palet yang sama dengan
   .text-danger, dengan aturan ber-!important dan spesifisitas setara supaya
   menang atas dua definisi bawaan Yoda. */
.btn.btn-outline-danger,
.btn-outline-danger {
    color: #b02a1f !important;
    border-color: rgb(176 42 31 / 0.45) !important;
    background-color: transparent !important;
}
.btn.btn-outline-danger:hover,
.btn.btn-outline-danger:active,
.btn-outline-danger:hover,
.btn-outline-danger:active {
    color: #fff !important;
    background-color: #b02a1f !important;
    border-color: #b02a1f !important;
}
.btn.btn-outline-danger:focus,
.btn-outline-danger:focus {
    box-shadow: 0 0 0 0.2rem rgb(176 42 31 / 0.3) !important;
}

/* Kode promo ditampilkan kapital saat diketik, tapi placeholder-nya tidak:
   text-transform mengenai keduanya, dan petunjuk yang ikut berteriak kapital
   terbaca seperti isian yang sudah ada. */
.kode-promo {
    text-transform: uppercase;
}
.kode-promo::placeholder {
    text-transform: none;
}