/**
 * @charset UTF-8;
 *
 * Croloze Website Stylesheet
 *
 * Version: 1.0.0
 * Author: Croloze Team (Generated by AI)
 * Description: Stylesheet ini berisi semua gaya kustom untuk situs web Croloze.
 * Ini mencakup gaya global, utilitas, komponen, dan gaya spesifik halaman
 * yang telah digabungkan dari berbagai sumber HTML dan file CSS asli.
 *
 * Daftar Isi:
 * 1.  Variabel Global & Root Styles
 * 2.  Reset Dasar & Tipografi
 * 3.  Animasi Global (Keyframes)
 * 4.  Gaya Utilitas Umum
 * - Progress Bar
 * - Tombol Interaktif
 * - Input Interaktif
 * - Tautan Footer
 * - Efek Hitung Naik (Count Up)
 * - Efek Parallax & Float
 * - Efek Mengetik (Typing Effect)
 * - Kartu Balik (Flip Card)
 * - Marquee
 * 5.  Gaya Komponen Spesifik
 * - Logo Klien (Client Logos)
 * - Placeholder Gambar Hero
 * - Placeholder Ikon Fitur
 * - Item Layanan (Service Item)
 * - Placeholder Swirl
 * - Input Form Kontak
 * - Penanda Judul (Title Marker)
 * - Avatar Profil
 * - Placeholder Ikon CTA
 * 6.  Gaya Spesifik Halaman (Jika ada yang tidak tercakup oleh Tailwind atau komponen umum)
 * - Homepage Styles (Beberapa mungkin sudah terintegrasi)
 * - Service Page Styles (Beberapa mungkin sudah terintegrasi)
 * - Contact Us Page Styles (Beberapa mungkin sudah terintegrasi)
 * - About Us Page Styles (Beberapa mungkin sudah terintegrasi)
 */

/* ============================================= */
/* 1. Variabel Global & Root Styles              */
/* ============================================= */

:root {
    --color-primary: #ffcf00; /* Kuning Utama */
    --color-secondary: #ffffff; /* Putih Sekunder */
    --color-third: #000000; /* Hitam Tersier */
    --color-text-primary: #1f2937; /* Abu-abu tua untuk teks utama (Gray-800) */
    --color-text-secondary: #6b7280; /* Abu-abu sedang untuk teks sekunder (Gray-500) */
    --color-text-on-primary: #000000; /* Teks hitam di atas latar kuning */
    --color-text-on-dark: #ffffff; /* Teks putih di atas latar gelap */
    --color-border-light: #e5e7eb; /* Abu-abu terang untuk border (Gray-200) */
    --color-border-medium: #d1d5db; /* Abu-abu sedang untuk border (Gray-300) */
}

/* ============================================= */
/* 2. Reset Dasar & Tipografi                    */
/* ============================================= */

html {
    scroll-behavior: smooth; /* Perilaku scroll halus untuk navigasi dalam halaman */
}

body {
    font-family: 'Inter', sans-serif; /* Font default untuk seluruh situs */
    background-color: var(--color-secondary); /* Latar belakang utama putih */
    color: var(--color-third); /* Warna teks default hitam */
    overflow-x: hidden; /* Mencegah scroll horizontal yang tidak diinginkan */
    min-height: 100%; /* Memastikan body mengisi setidaknya tinggi viewport */
    display: flex; /* Memungkinkan penggunaan flexbox untuk layout footer lengket */
    flex-direction: column; /* Mengatur item flex secara vertikal */
}

main {
    flex-grow: 1; /* Memungkinkan konten utama tumbuh dan mendorong footer ke bawah */
}

/* ============================================= */
/* 3. Animasi Global (Keyframes)                 */
/* ============================================= */

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Untuk efek marquee logo klien */
    }
}

@keyframes fadeInOut {
    0%, 100% {
        opacity: 0;
    }
    10%, 90% {
        opacity: 1; /* Untuk efek fade in/out pada teks hero */
    }
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px); /* Animasi mengambang halus */
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%; /* Animasi efek mengetik */
    }
}

@keyframes blink-caret {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: var(--color-primary); /* Kursor berkedip untuk efek mengetik */
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1); /* Animasi denyut untuk ikon */
    }
    100% {
        transform: scale(1);
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%); /* Animasi marquee umum */
    }
}

@keyframes marquee-text {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%); /* Animasi marquee untuk teks */
    }
}

/* ============================================= */
/* 4. Gaya Utilitas Umum                         */
/* ============================================= */

/**
 * Progress Bar
 * Bilah progres di bagian atas halaman yang menunjukkan posisi scroll.
 */
#progress {
    position: fixed; /* Tetap di atas saat scroll */
    top: 0;
    left: 0;
    height: 0.25rem; /* Ketebalan 4px (h-1 di Tailwind) */
    background-color: var(--color-primary); /* Warna utama (kuning) */
    width: 0; /* Lebar awal 0, diubah oleh JavaScript */
    z-index: 100; /* Pastikan di atas elemen lain */
    transition: width 0.1s ease-out; /* Transisi halus saat lebar berubah */
}

/**
 * Tombol Interaktif
 * Gaya untuk tombol yang memiliki efek saat ditekan atau dihover.
 */
.btn-interactive:hover {
    transform: scale(1.05); /* Sedikit membesar saat dihover */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Bayangan halus untuk efek kedalaman */
}

.btn-interactive:active {
    transform: scale(0.98); /* Sedikit mengecil saat ditekan */
    transition: transform 0.1s ease-out; /* Transisi cepat untuk responsivitas */
}

/**
 * Input Interaktif
 * Gaya untuk elemen input yang memiliki efek saat fokus.
 */
.interactive-input {
    transition: all 0.3s ease; /* Transisi untuk border, shadow, dll. */
    /* Hapus transform scale dari input individu jika wrapper yang akan di-scale */
}

/* Efek scaling sekarang diterapkan pada wrapper */
.input-icon-wrapper {
    position: relative; /* Pastikan ini ada, Tailwind 'relative' class seharusnya sudah cukup */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.input-icon-wrapper:focus-within {
    transform: scale(1.02);
    z-index: 20; /* Untuk stacking context saat aktif */
    /* Jika Anda menggunakan ring atau shadow pada wrapper saat fokus, definisikan di sini */
    /* box-shadow: 0 0 0 2px var(--color-primary); */
}

/* Styling untuk input di dalam wrapper */
.input-icon-wrapper .contact-input {
    /* padding-left pada .contact-input sudah diatur di HTML/Tailwind untuk memberi ruang ikon */
}

.input-icon-wrapper .contact-input:focus {
     border-color: var(--color-primary) !important; /* Paksa border color saat fokus */
     box-shadow: 0 0 0 2px var(--color-primary); /* Tambahkan ring/shadow langsung ke input */
     outline: none;
     /* Hapus transform scale dari input individu jika wrapper yang di-scale */
}

/* Styling untuk ikon di dalam wrapper */
.input-icon-wrapper > div[class*="absolute"] { /* Target div ikon yang absolut */
    /* Ikon seharusnya sudah diposisikan dengan benar oleh kelas Tailwind */
    /* Pastikan pointer-events: none; agar klik bisa tembus ke input */
    pointer-events: none;
    /* Tidak perlu z-index spesifik di sini jika wrapper sudah punya z-index saat focus-within */
}

/**
 * Tautan Footer
 * Gaya dasar untuk tautan di bagian footer.
 */
.footer-link {
    text-decoration: none; /* Hapus garis bawah default */
    color: var(--color-text-secondary); /* Warna abu-abu sedang */
    transition: color 0.3s; /* Transisi warna halus */
    display: block; /* Membuat tautan menjadi blok agar margin-bottom berfungsi */
    margin-bottom: 0.5rem; /* Jarak antar tautan */
}

.footer-link:hover {
    color: var(--color-primary); /* Warna utama (kuning) saat dihover */
}

/**
 * Efek Hitung Naik (Count Up)
 * Gaya untuk angka yang dianimasikan (misalnya, statistik).
 * Menggunakan font-variant-numeric untuk menjaga lebar angka tetap saat berubah.
 */
.count-up {
    font-variant-numeric: tabular-nums;
}

/**
 * Efek Parallax & Float
 * Gaya untuk elemen dengan efek parallax atau mengambang.
 */
.parallax {
    background-attachment: fixed; /* Gambar latar tetap saat scroll */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hover-float {
    transition: transform 0.3s ease-out;
}

.hover-float:hover {
    transform: translateY(-8px); /* Mengambang ke atas saat dihover */
}

.floating {
    animation: float 5s ease-in-out infinite; /* Animasi mengambang berkelanjutan */
}

/**
 * Efek Mengetik (Typing Effect)
 * Gaya untuk teks yang muncul seolah-olah sedang diketik.
 */
.typing-effect {
    overflow: hidden; /* Sembunyikan teks yang belum "diketik" */
    border-right: 3px solid var(--color-primary); /* Kursor mengetik */
    white-space: nowrap; /* Pastikan teks tetap dalam satu baris */
    margin: 0 auto; /* Pusatkan jika diperlukan */
    letter-spacing: 0.15em; /* Jarak antar huruf */
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; /* Gabungkan animasi mengetik dan kursor */
}

/**
 * Kartu Balik (Flip Card)
 * Gaya untuk komponen kartu yang dapat dibalik saat dihover.
 */
.flip-card {
    perspective: 1000px; /* Perspektif 3D untuk efek balik */
    height: 100%;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: transform 0.8s; /* Durasi animasi balik */
    transform-style: preserve-3d; /* Pertahankan transformasi 3D anak-anak */
    backface-visibility: hidden; /* Sembunyikan sisi belakang saat tidak terlihat */
    border-radius: 1rem; /* Sudut membulat */
    padding: 1rem 1.25rem;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg); /* Balik kartu secara horizontal */
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Untuk Safari */
    backface-visibility: hidden;
    border-radius: 1rem;
    padding: 1.25rem;
}

.flip-card-front {
    background-color: var(--color-secondary); /* Latar depan putih */
    display: flex;
    align-items: start;
    gap: 1rem;
}

.flip-card-back {
    background-color: var(--color-primary); /* Latar belakang kuning */
    color: var(--color-text-on-primary); /* Teks hitam */
    transform: rotateY(180deg); /* Awalnya terbalik */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.icon-container { /* Digunakan dalam flip card */
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Lingkaran */
    background-color: rgba(255, 207, 0, 0.1); /* Kuning transparan */
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.flip-card:hover .icon-container {
    transform: scale(1.1); /* Perbesar ikon saat kartu dihover */
    background-color: rgba(255, 207, 0, 0.2); /* Kuning lebih pekat */
}

.pulse-icon {
    animation: pulse 2s infinite; /* Animasi denyut untuk ikon */
}

/**
 * Marquee
 * Gaya untuk elemen yang bergerak secara horizontal (marquee).
 */
.marquee-container {
    overflow: hidden; /* Sembunyikan konten yang keluar dari batas */
    white-space: nowrap; /* Pastikan item tetap dalam satu baris */
}

.animate-marquee {
    display: inline-block;
    animation: marquee 30s linear infinite; /* Animasi marquee untuk logo */
    padding-left: 100%; /* Mulai dari luar layar */
}

.animate-marquee-text {
    display: inline-block;
    animation: marquee-text 40s linear infinite; /* Animasi marquee untuk teks */
    padding-left: 100%;
}

.logo-item { /* Digunakan dalam marquee teks */
    color: var(--color-text-secondary); /* Abu-abu */
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 500;
    font-size: 1.1rem;
    display: inline-block;
    margin: 0 2rem; /* Jarak antar item */
    vertical-align: middle;
}

.marquee-text-item { /* Digunakan dalam marquee teks */
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-secondary); /* Abu-abu */
    margin: 0 2rem;
}

/* ============================================= */
/* 5. Gaya Komponen Spesifik                     */
/* ============================================= */

/**
 * Logo Klien (Client Logos)
 * Gaya untuk menampilkan logo klien dalam format carousel atau grid.
 */
.client-logos-wrapper {
    overflow: hidden; /* Sembunyikan bagian logo yang keluar dari kontainer */
    position: relative;
    width: 100%;
}

.client-logos-container {
    display: flex; /* Susun logo secara horizontal */
    flex-wrap: nowrap; /* Jangan biarkan logo pindah ke baris baru */
    width: max-content; /* Lebar sesuai dengan total lebar logo */
    animation: scroll-left 30s linear infinite; /* Animasi scroll ke kiri */
    align-items: center; /* Pusatkan logo secara vertikal */
}

/* Responsif untuk logo klien (contoh, jika ingin grid di layar besar) */
/* @media(min-width:768px){
    .client-logos-container{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        width:100%;
        animation:none;
        gap:2rem;
    }
}
@media(min-width:1024px){
    .client-logos-container{
        grid-template-columns:repeat(5,minmax(0,1fr));
    }
} */

.client-logo {
    flex-shrink: 0; /* Jangan biarkan logo menyusut */
    width: 150px; /* Lebar tetap untuk setiap logo */
    margin-right: 2rem; /* Jarak antar logo */
    text-align: center; /* Pusatkan gambar logo jika lebih kecil dari width */
}

.client-logo img {
    filter: grayscale(100%); /* Awalnya abu-abu */
    transition: filter .3s ease-in-out, transform .3s ease-in-out; /* Transisi halus */
    max-height: 60px; /* Tinggi maksimum logo */
    width: auto; /* Lebar otomatis menyesuaikan tinggi */
    display: inline-block;
}

.client-logo:hover img {
    filter: grayscale(0); /* Berwarna saat dihover */
    transform: scale(1.05); /* Sedikit membesar */
}

.client-logos-container > .client-logo:last-child {
    margin-right: 0; /* Hapus margin kanan pada logo terakhir */
}

/* Responsif untuk logo klien (lanjutan) */
/* @media(min-width:768px){
    .client-logo{
        width:auto;
        margin-right:0;
    }
} */


/**
 * Placeholder Gambar Hero
 * Gaya untuk placeholder gambar di bagian hero.
 * Menggunakan gradien dan mask jika ada gambar SVG/PNG mask.
 */
.hero-image-placeholder {
    background: linear-gradient(135deg, #fde047, #facc15); /* Gradien kuning lembut */
    /* mask-image: url('...'); /* Hapus atau ganti dengan path yang benar jika menggunakan mask */
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    width: 100%;
    height: 100%;
    max-width: 400px; /* Lebar maksimum placeholder */
    max-height: 400px; /* Tinggi maksimum placeholder */
    aspect-ratio: 1 / 1; /* Rasio aspek 1:1 (persegi) */
    border-radius: 1rem; /* Sudut membulat */
}

/**
 * Placeholder Ikon Fitur
 * Gaya untuk ikon placeholder pada bagian fitur.
 */
.feature-icon-placeholder {
    width: 3rem; /* Lebar 48px */
    height: 3rem; /* Tinggi 48px */
    border-radius: 0.5rem; /* Sudut membulat */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem; /* Jarak bawah */
}

/**
 * Item Layanan (Service Item)
 * Gaya untuk daftar layanan, terutama pada halaman Services.
 * Termasuk efek hover dan status aktif.
 */
.service-item {
    cursor: pointer; /* Ubah kursor menjadi pointer */
    transition: color 0.3s ease; /* Transisi warna halus */
    position: relative;
    /* padding-right: 180px; /* Dihapus untuk kesederhanaan, bisa ditambahkan jika layout rusak */
}

.service-item h3 {
    transition: color 0.3s ease;
    color: var(--color-text-secondary); /* Warna awal abu-abu */
}

.service-item.active h3 {
    color: var(--color-primary); /* Warna aktif kuning */
}

/**
 * Placeholder Swirl
 * Gaya untuk elemen dekoratif berbentuk swirl.
 */
.swirl-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%; /* Lingkaran */
    background: radial-gradient(circle, rgba(255, 207, 0, 0.2) 0%, rgba(255, 255, 255, 0) 70%); /* Gradasi kuning transparan */
}

/**
 * Input Form Kontak
 * Gaya khusus untuk input pada formulir kontak.
 * Termasuk ikon di dalam input dan efek fokus.
 */
.contact-input { /* Umum untuk halaman Kontak dan Homepage */
    width: 100%;
    padding: 0.75rem 1rem; /* py-3 px-4 */
    border-width: 1px;
    border-color: var(--color-border-light); /* border-gray-200 */
    border-radius: 0.5rem; /* rounded-lg */
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    background-color: var(--color-secondary); /* bg-white */
    color: var(--color-third); /* text-dark */
}
.contact-input::placeholder {
    color: var(--color-text-secondary); /* placeholder-medium-gray */
}
.contact-input:hover {
    border-color: var(--color-border-medium); /* hover:border-gray-300 */
}
.contact-input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-color: var(--color-primary); /* focus:ring-primary */
    box-shadow: 0 0 0 2px var(--tw-ring-color); /* Efek ring saat fokus */
    border-color: transparent; /* Sembunyikan border default saat ring aktif */
}

/* Gaya input spesifik untuk halaman Contact Us dengan ikon di kiri */
#contact-us-section .contact-input {
    padding-left: 2.5rem; /* pl-10, ruang untuk ikon */
    /* Gaya lain diwarisi atau didefinisikan oleh Tailwind */
}

/**
 * Penanda Judul (Title Marker)
 * Gaya untuk penanda kecil di sebelah kiri judul pada halaman About Us.
 */
.title-marker::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: var(--color-primary); /* Warna utama (kuning) */
    margin-right: 8px; /* Jarak kanan dari teks */
    vertical-align: middle; /* Sejajarkan dengan teks */
}

/**
 * Avatar Profil
 * Gaya untuk gambar avatar tim pada halaman About Us.
 */
.avatar-profile {
    width: 64px; /* Ukuran default */
    height: 64px;
    flex-shrink: 0; /* Mencegah avatar menyusut */
}
@media (min-width: 768px) { /* Ukuran lebih besar di layar md ke atas */
    .avatar-profile {
        width: 80px;
        height: 80px;
    }
}

/**
 * Placeholder Ikon CTA
 * Gaya untuk ikon placeholder pada bagian Call to Action di halaman About Us.
 */
.cta-icon-placeholder {
    width: 120px;
    height: 100px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fef9c3; /* Warna kuning muda (yellow-100) */
    color: #facc15; /* Warna kuning lebih tua (yellow-400) */
}
@media (max-width: 640px) { /* Sembunyikan di layar kecil */
    .cta-icon-placeholder {
        display: none;
    }
}

/* ============================================= */
/* 6. Gaya Spesifik Halaman                      */
/* ============================================= */

/**
 * Gaya Umum Warna (jika belum ter-cover Tailwind atau untuk override)
 * Ini adalah fallback atau cara untuk memastikan konsistensi warna
 * jika variabel CSS tidak selalu digunakan oleh kelas Tailwind secara langsung.
 */
.bg-primary { background-color: var(--color-primary); }
.text-primary { color: var(--color-primary); }
.border-primary { border-color: var(--color-primary); }
.hover\:bg-primary-dark:hover { background-color: #eab308; } /* Kuning lebih gelap untuk hover */
.focus\:ring-primary:focus { --tw-ring-color: var(--color-primary); ring-width: 2px; }
.focus\:border-primary:focus { border-color: var(--color-primary); }

.bg-secondary { background-color: var(--color-secondary); }
.text-secondary { color: var(--color-secondary); }

.bg-third { background-color: var(--color-third); }
.text-third { color: var(--color-third); }

.text-main { color: var(--color-text-primary); }
.text-muted { color: var(--color-text-secondary); }
.text-on-primary { color: var(--color-text-on-primary); }
.text-on-dark { color: var(--color-text-on-dark); }

.border-light { border-color: var(--color-border-light); }
.border-medium { border-color: var(--color-border-medium); }

/**
 * Gaya Input Form Umum (jika ada yang belum ter-cover)
 * Untuk memastikan konsistensi pada semua input teks dan textarea.
 */
input[type="text"],
input[type="email"],
textarea {
    border-color: var(--color-border-medium); /* Border abu-abu sedang */
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
     border-color: var(--color-primary); /* Border kuning saat fokus */
     --tw-ring-color: var(--color-primary); /* Warna ring kuning */
     ring-width: 1px; /* Lebar ring tipis */
     outline: none; /* Hapus outline default browser */
}

/**
 * Penanda Navigasi Aktif
 * Gaya untuk menandai tautan navigasi yang aktif.
 * Ini diterapkan melalui JavaScript, tetapi gaya dasarnya ada di sini.
 * Contoh untuk halaman Contact Us (jika tidak menggunakan JS untuk ini):
 */
/*
nav a[href="contact-us.html"].desktop-link,
#mobile-menu a[href="contact-us.html"].mobile-link {
   color: var(--color-primary);
   font-weight: 600; // Tailwind: font-semibold
}
*/

/**
 * Card Placeholder (jika digunakan di suatu tempat)
 * Gaya untuk placeholder kartu.
 */
.card-placeholder {
    border: 1px dashed var(--color-border-medium);
    background-color: #f9fafb; /* Gray-50 */
    border-radius: 0.375rem; /* rounded-md */
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

/* ========================= */
/* Meta Title Description AI */
/* ========================= */

.loader {
    border: 3px solid #e5e7eb; /* gray-200 */
    border-top: 3px solid #3b82f6; /* blue-500 */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 0.8s linear infinite;
    display: none;
    margin-right: 10px;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Custom Scrollbar for Meta Tool */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #f3f4f6; /* gray-100 */
}
::-webkit-scrollbar-thumb {
    background: #d1d5db; /* gray-300 */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #9ca3af; /* gray-400 */
}

.custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236b7280%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 0.6rem auto;
    padding-right: 2.5rem;
}

.input-field {
    background-color: #f9fafb; /* gray-50 */
    border: 1px solid #d1d5db; /* gray-300 */
    color: #1f2937; /* gray-800 */
}
.input-field:focus {
    border-color: #3b82f6; /* blue-500 */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    outline: none;
}

.btn-primary {
    background-color: #ffcf00;
    color: black;
}
.btn-primary:hover {
    background-color: #f0c200;
}

.btn-copy {
    background-color: #e5e7eb; /* gray-200 */
    color: #4b5563; /* gray-600 */
}
.btn-copy:hover {
    background-color: #d1d5db; /* gray-300 */
}

.result-display {
    background-color: #f3f4f6; /* gray-100 */
    color: #1f2937; /* gray-800 */
    border: 1px solid #e5e7eb; /* gray-200 */
}

.toast-success {
    background-color: #10b981; /* emerald-500 */
    color: white;
}
.toast-error {
    background-color: #ef4444; /* red-500 */
    color: white;
}

.h1-black {
    color: #000 !important;
}

/* Akhir dari stylesheet */