/*
Theme Name: Akhi.AI Theme
Theme URI: https://bot.yaakhi.id
Author: Kawan Ngoding
Author URI: https://bot.yaakhi.id
Description: Tema kustom untuk landing page Asisten Digital WhatsApp.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: landing-page, tailwindcss, one-page
Text Domain: akhiai-theme
*/

/* ==========================================================================
   Menu Navigasi
   ========================================================================== */

/* Kontainer utama menu */
.primary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Menggunakan flexbox untuk perataan */
    align-items: center;
}

/* Item menu individual */
.primary-menu .menu-item {
    display: inline-block;
}

/* Link di dalam item menu (Style Default) */
.primary-menu .menu-item a {
    color: #475569; /* text-slate-600 */
    padding: 0.5rem 0.75rem; /* px-3 py-2 */
    border-radius: 0.375rem; /* rounded-md */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: all 0.3s ease-in-out;
    background-color: transparent; /* Pastikan defaultnya transparan */
}

/* Efek hover pada link biasa */
.primary-menu .menu-item:not(.menu-button-cta) a:hover {
    color: var(--primary-color, #4f46e5); 
}

/* Jarak antar item menu */
.primary-menu:not(.mobile-menu) .menu-item + .menu-item {
    margin-left: 1rem;
}


/* --- Styling Khusus untuk Tombol di Menu (INI PERBAIKANNYA) --- */

/* Tombol Login */
.primary-menu .menu-item.menu-button-login a svg {
    margin-right: 0.5rem;
	    padding-left: 1rem;
    padding-right: 1rem;
    height: 1.25rem;
    width: 1.25rem;
}

/* Tombol Call to Action (Hubungi Kami) */
.primary-menu .menu-item.menu-button-cta a {
    background-color: var(--primary-color, #4f46e5) !important; /* Paksa background color */
    color: white !important; /* Paksa warna teks menjadi putih */
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Hover khusus untuk Tombol CTA */
.primary-menu .menu-item.menu-button-cta a:hover {
    color: white !important; /* Pastikan teks tetap putih saat di-hover */
    filter: brightness(0.9);
}


/* --- Styling Khusus untuk Menu Mobile --- */
.mobile-menu {
    display: block; /* Tampilan default untuk mobile */
}
.mobile-menu .menu-item {
    display: block;
    margin-left: 0;
    margin-bottom: 0.25rem;
}
.mobile-menu .menu-item a {
    padding: 0.5rem 0.75rem;
}

/* ==========================================================================
   Hero Slider Kustom
   ========================================================================== */
.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.slider-dot.active-dot {
    background-color: white;
}

/* ==========================================================================
   Logo Kustom Responsif
   ========================================================================== */

/* Ini menargetkan link pembungkus logo */
.custom-logo-link {
    display: inline-block;
    /* Mencegah ada ruang ekstra di bawah logo */
    line-height: 1; 
}

/* Ini menargetkan gambar logo itu sendiri */
.custom-logo {
    /* Ini adalah baris terpenting. Atur tinggi maksimal logo */
    max-height: 48px; 
    
    /* Ini membuat lebar menyesuaikan secara otomatis agar logo tidak gepeng */
    width: auto;      
}

/* Styling untuk Badge Ikon Cart */
.cart-count-badge {
    line-height: 1;
}
/* ==========================================================================
   Menu Dropdown
   ========================================================================== */

/* Pastikan item menu yang punya anak bisa jadi 'group' untuk hover */
.primary-menu .menu-item-has-children {
    position: relative; /* Diperlukan untuk positioning sub-menu */
}

/* Styling dasar untuk sub-menu (dropdown) */
.primary-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0; /* py-2 */
    position: absolute;
    top: 100%; /* Muncul tepat di bawah item induk */
    left: 0;
    background-color: white;
    min-width: 200px; /* Lebar dropdown */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
    z-index: 50;
    
    /* Sembunyikan default & siapkan transisi */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease-in-out;
}

/* Menampilkan dropdown saat item induk di-hover */
.primary-menu .menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* * ===================================================================
 * KODE PERBAIKAN ADA DI SINI
 * ===================================================================
 */
/* Styling untuk setiap item di dalam dropdown */
.primary-menu .sub-menu .menu-item {
    display: block; /* Paksa item jadi blok vertikal */
    width: 100%;
    margin-left: 0 !important; /* Hapus margin kiri dari menu utama */
}
/* =================================================================== */


.primary-menu .sub-menu .menu-item a {
    color: #334155; /* text-slate-700 */
    padding: 0.5rem 1rem; /* py-2 px-4 */
    display: block; /* Pastikan link memenuhi seluruh lebar item */
    width: 100%;
    font-size: 0.875rem; /* text-sm */
    font-weight: normal;
    border-radius: 0; /* Hapus border-radius dari link menu utama */
}

.primary-menu .sub-menu .menu-item a:hover {
    background-color: #f1f5f9; /* bg-slate-100 */
    color: var(--primary-color, #4f46e5); /* Warna utama Anda */
}

/* Styling untuk Link di dalam item menu */
.primary-menu .menu-item a {
    display: flex; /* <-- TAMBAHKAN INI */
    align-items: center; /* <-- DAN INI */
    color: #475569; /* text-slate-600 */
    padding: 0.5rem 0.75rem; /* px-3 py-2 */
    border-radius: 0.375rem; /* rounded-md */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}