/* ==========================================
   RESET & FONT SETUP
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* ==========================================
   BODY (PREMIUM AMBIENT BACKGROUND)
   ========================================== */
body {
    font-family: 'Montserrat', sans-serif;
    /* Perpaduan warna hitam obsidian dan cokelat espresso ultra gelap */
    background: linear-gradient(135deg, #070707, #0f0e0c, #171512, #000000);
    background-size: 400% 400%;
    animation: luxuryGradient 25s ease infinite; /* Gerakan sangat lambat & anggun */
    color: #f5f5f7;
    position: relative;
}

/* Latar Belakang Cahaya Mewah (Soft Luxury Light Leaks) */
body::before,
body::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(160px);
    opacity: 0.18; /* Sangat halus, tidak menusuk mata */
    z-index: 0;
    pointer-events: none;
}

/* Cahaya Champagne Gold Atas */
body::before {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, #dfba73, #b89146);
    top: -150px;
    left: -100px;
    animation: luxuryOrb1 30s ease-in-out infinite alternate;
}

/* Cahaya Warm Silver Bawah */
body::after {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #a1a1a1, #4a4a4a);
    bottom: -150px;
    right: -100px;
    animation: luxuryOrb2 35s ease-in-out infinite alternate;
}

/* ==========================================
   SECTION & CONTAINER
   ========================================== */
.search-section {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: relative;
    z-index: 2;
}

.search-container {
    width: 100%;
    max-width: 680px; /* Sedikit lebih ramping agar terlihat proporsional & eksklusif */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ==========================================
   LOGO (METALLIC CHAMPAGNE GOLD)
   ========================================== */
.logo {
    font-family: 'Cinzel', serif;
    font-size: 80px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2px; /* Jarak antar huruf memberikan kesan megah */
    margin-bottom: 28px;
    
    /* Efek Gradasi Logam Emas Murni */
    background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Shadow lembut untuk efek dimensi */
    filter: drop-shadow(0px 4px 20px rgba(179, 135, 40, 0.15));
}

/* ==========================================
   SEARCH BOX & INPUT (DARK GLASSMORPHISM)
   ========================================== */
.search-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.search-box input {
    width: 100%;
    height: 60px;
    /* Border super tipis transparan melambangkan presisi */
    border: 1px solid rgba(255, 255, 255, 0.06); 
    outline: none;
    border-radius: 14px;
    padding: 0 24px;
    font-size: 15px;
    color: #ffffff;
    letter-spacing: 0.5px;
    
    /* Lapisan kaca gelap premium */
    background: rgba(15, 15, 15, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.6),
        inset 0 1px 1px rgba(255, 255, 255, 0.05);
    
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.search-box input::placeholder {
    color: #6e6e73; /* Warna abu-abu muted khas Apple */
    font-weight: 300;
}

/* INPUT FOCUS - GLOW EMAS HALUS */
.search-box input:focus {
    background: rgba(20, 19, 17, 0.85);
    border: 1px solid rgba(191, 149, 63, 0.4);
    box-shadow: 
        0 0 25px rgba(191, 149, 63, 0.1),
        0 20px 50px rgba(0, 0, 0, 0.8);
}

/* ==========================================
   BUTTON (SOLID GOLD LUXURY)
   ========================================== */
.search-box button {
    width: 100%;
    height: 60px;
    border-radius: 14px;
    border: none;
    
    /* Gradasi tombol emas satin */
    background: linear-gradient(135deg, #b38728, #dfba73);
    color: #0a0a0a; /* Teks gelap pekat agar kontras dan tajam */
    
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(179, 135, 40, 0.2);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.search-box button:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #dfba73, #f5e3b5);
    box-shadow: 0 12px 30px rgba(179, 135, 40, 0.35);
}

/* ==========================================
   ERROR, INFO, & FOOTER
   ========================================== */
.search-error {
    margin-top: 12px;
    color: #ff0000; /* Merah terang / menyala */
    font-size: 13.5px;
    font-weight: 600; /* Dibuat sedikit lebih tebal agar lebih tegas */
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(255, 0, 0, 0.7); /* Efek cahaya (glow) merah di sekeliling teks */
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.search-error.show {
    opacity: 1; /* Dibuat solid 100% agar warna merahnya keluar maksimal */
    transform: translateY(0);
}

.info {
    margin-top: 24px;
    color: #ffffff; /* Mengubah teks utama menjadi putih bersih */
    font-size: 13px;
    font-weight: 300;
    line-height: 1.8;
    max-width: 500px;
    letter-spacing: 0.2px;
}
.info strong {
    color: #fdcf03; /* Memberikan warna emas */
    font-weight: 1000; /* Menebalkan huruf */
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(223, 186, 115, 0.4); /* Efek cahaya (glow) emas yang tipis */
}
.footer {
    padding-top: 120px;
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #515154;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.5px;
}

.footer span {
    padding: 6px 18px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(255, 255, 255, 0.02);
    color: #929294;
    font-size: 11px;
}

/* ==========================================
   ANIMATIONS (SLOW & SMOOTH)
   ========================================== */
@keyframes luxuryGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes luxuryOrb1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, 30px) scale(1.1); }
}

@keyframes luxuryOrb2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-30px, -40px) scale(1.05); }
}

/* ==========================================
   RESPONSIVE DESIGN (RESPONSIF)
   ========================================== */
@media (max-width: 768px) {
    .logo { font-size: 60px; letter-spacing: 1px; }
    .search-box input, .search-box button { height: 56px; }
    body::before, body::after { width: 300px; height: 300px; filter: blur(120px); }
}

@media (max-width: 480px) {
    .logo { font-size: 46px; margin-bottom: 22px; }
    .search-box { gap: 14px; }
    .search-box input, .search-box button { height: 54px; font-size: 14px; }
    .info { font-size: 12px; max-width: 100%; }
    .footer { margin-top: 100px; }
}

/* ==========================================
   EFEK BINTANG ACAK MUNCUL & HILANG (MAGIC STARS)
   ========================================== */
.magic-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background-color: #dfba73; /* Bintang Emas */
    border-radius: 50%;
    box-shadow: 0 0 12px 2px rgba(223, 186, 115, 0.7);
    opacity: 0;
    z-index: 1;
    pointer-events: none; /* Agar tidak menghalangi kursor saat klik input */
    
    /* Durasi bintang hidup adalah 3 detik */
    animation: twinklePop 3s ease-in-out forwards;
}

/* Varian Bintang Perak/Putih */
.magic-star.silver {
    background-color: #ffffff;
    box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.7);
}

/* Animasi berkelip halus */
@keyframes twinklePop {
    0% { opacity: 0; transform: scale(0.2); }
    50% { opacity: 0.9; transform: scale(1.5); }
    100% { opacity: 0; transform: scale(0.2); }
}