/* ======================== HEADER.CSS FINAL ======================== */
/* File ini berisi styling untuk header website (desktop & mobile) */

/* === GLOBAL STYLES === */
/* Mengatur box-sizing untuk konsistensi ukuran elemen */
* {
  box-sizing: border-box;
}

/* === VERSI DESKTOP === */
/* Header utama (fixed di atas layar) */
.main-header {
  padding: 5px 20px !important; /* !important untuk override Padding atas-bawah 15px, kiri-kanan 20px */
  background: #fff;           /* Latar belakang putih */
  border-bottom: 1px solid #ddd; /* Garis bawah tipis */
  position: fixed;            /* Tetap di atas saat scroll */
  top: 0;                     /* Posisi di paling atas */
  left: 0;                    /* Mulai dari kiri layar */
  width: 100%;                /* Lebar penuh */
  z-index: 1000;              /* Pastikan header selalu di atas elemen lain */
}

/* Kontainer utama header (menggunakan grid untuk tata letak 3 kolom) */
.header-container {
  display: grid;              /* Menggunakan CSS Grid */
  grid-template-columns: auto 1fr auto; /* Kolom: kiri (auto) - tengah (fleksibel) - kanan (auto) */
  align-items: center;       /* Rata tengah vertikal */
  gap: 20px;                 /* Jarak antar kolom */
  width: 100%;               /* Lebar penuh */
}

/* --- Bagian Kiri Header (Logo & Nama Situs) --- */
.header-left {
  display: flex;             /* Flexbox untuk tata letak horizontal */
  align-items: center;      /* Rata tengah vertikal */
  gap: 10px;                /* Jarak antara logo dan teks */
}

.logo {
  width: 45px;              /* Ukuran logo */
  height: auto;             /* Tinggi menyesuaikan proporsi */
  border-radius: 50%;       /* Bentuk bulat */
}

.site-name {
  font-size: 22px;          /* Ukuran font */
  margin: 0;                /* Hilangkan margin default */
  color: #333;              /* Warna teks */
}

/* --- Bagian Tengah Header (Search Bar) --- */
.header-center {
  max-width: 500px;         /* Lebar maksimum search bar */
  width: 100%;              /* Lebar fleksibel */
  justify-self: center;     /* Posisi di tengah grid */
}

.search-form {
  display: flex;            /* Flexbox untuk tata letak search box & button */
  width: 100%;              /* Lebar penuh */
}

.search-box {
  flex: 1;                  /* Mengisi sisa ruang */
  padding: 8px 15px;        /* Padding dalam input */
  border: 1px solid #ccc;   /* Border abu-abu */
  border-right: none;       /* Hilangkan border kanan (untuk menyatu dengan button) */
  border-radius: 25px 0 0 25px; /* Border radius kiri bulat, kanan persegi */
  font-size: 14px;          /* Ukuran font */
}

.search-button {
  padding: 8px 15px;        /* Padding dalam button */
  border: none;             /* Hilangkan border */
  background: #ADD8E6;      /* Warna biru muda */
  border-radius: 0 25px 25px 0; /* Border radius kanan bulat, kiri persegi */
  cursor: pointer;          /* Pointer cursor saat hover */
  transition: background 0.2s; /* Animasi perubahan warna */
}

.search-button:hover {
  background: #87CEEB;      /* Warna biru lebih terang saat hover */
}

/* --- Bagian Kanan Header (Ikon & Dropdown) --- */
.header-right {
  display: flex;            /* Flexbox untuk tata letak horizontal */
  align-items: center;      /* Rata tengah vertikal */
  gap: 20px;                /* Jarak antar elemen */
}

.icon-group {
  display: flex;            /* Flexbox untuk grup ikon */
  gap: 15px;                /* Jarak antar ikon */
}

.icon-button {
  color: #333;              /* Warna ikon */
  font-size: 20px;          /* Ukuran ikon */
  text-decoration: none;    /* Hilangkan underline */
  transition: color 0.2s;   /* Animasi perubahan warna */
  display: flex;            /* Flexbox untuk alignment */
  align-items: center;     /* Rata tengah vertikal */
}

.icon-button:hover {
  color: #ADD8E6;           /* Warna biru muda saat hover */
}

/* Styling untuk ikon (menggunakan ion-icons) */
ion-icon {
  width: 1em;               /* Ukuran sesuai font */
  height: 1em;              /* Ukuran sesuai font */
  vertical-align: middle;   /* Rata tengah vertikal */
}

/* --- Dropdown Marketplace --- */
.dropdown {
  position: relative;       /* Diperlukan untuk positioning dropdown */
}

.market-link {
  background: none;         /* Hilangkan background */
  color: #000;              /* Warna teks hitam */
  border: none;             /* Hilangkan border */
  padding: 8px 14px;        /* Padding dalam button */
  border-radius: 20px;      /* Border radius bulat */
  cursor: pointer;          /* Pointer cursor saat hover */
  font-weight: 400;         /* Tebal font */
  font-size: 16px !important;          /* Ukuran font */
  display: flex;            /* Flexbox untuk alignment */
  align-items: center;     /* Rata tengah vertikal */
  gap: 5px;                /* Jarak antara teks dan ikon */
  transition: background 0.2s; /* Animasi perubahan background */
}

.market-link:hover {
  background: #87CEEB;      /* Warna biru muda saat hover */
}

/* Konten dropdown (tersembunyi default) */
.dropdown-content {
  display: none;            /* Awalnya tersembunyi */
  position: absolute;       /* Positioning absolut relatif terhadap parent */
  right: 0;                 /* Posisi di kanan */
  background-color: white;  /* Latar belakang putih */
  border-radius: 10px;      /* Border radius */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Bayangan halus */
  padding: 8px;             /* Padding dalam dropdown */
  grid-template-columns: repeat(1, 4fr); /* Grid layout (1 kolom) */
  gap: 8px;                /* Jarak antar item */
  z-index: 1000;           /* Pastikan di atas elemen lain */
  width: max-content;       /* Lebar menyesuaikan konten */
}

/* Item dalam dropdown */
.dropdown-content a {
  background: #f9f9f9;      /* Latar belakang abu-abu muda */
  border-radius: 8px;       /* Border radius */
  padding: 6px;             /* Padding dalam item */
  display: flex;            /* Flexbox untuk alignment */
  justify-content: center;  /* Rata tengah horizontal */
  align-items: center;     /* Rata tengah vertikal */
  transition: background 0.2s; /* Animasi perubahan background */
}

.dropdown-content a:hover {
  background: #e0f0ff;      /* Warna biru muda saat hover */
}

.dropdown-content img {
  width: 60px;              /* Lebar gambar */
  height: auto;             /* Tinggi menyesuaikan */
  object-fit: contain;      /* Pastikan gambar tidak terdistorsi */
}

/* Class untuk menampilkan dropdown */
.dropdown-content.show {
  display: grid;            /* Tampilkan sebagai grid */
}

/* === VERSI MOBILE === */
/* 1. Hapus margin/padding header utama */
.main-header {
  padding: 0;  /* Hilangkan padding */
  margin: 0;   /* Hilangkan margin */
}


/* Footer navigasi mobile (fixed di bawah layar) */

.mobile-footer {
  position: fixed;          /* Tetap di bawah saat scroll */
  bottom: 0;                /* Posisi di paling bawah */
  left: 0;                  /* Mulai dari kiri layar */
  width: 100%;              /* Lebar penuh */
  background: #fff;         /* Latar belakang putih */
  border-top: 1px solid #ddd; /* Garis atas tipis */
  display: flex;            /* Flexbox untuk tata letak horizontal */
  justify-content: space-around; /* Jarak merata antar ikon */
  align-items: center;     /* Rata tengah vertikal */
  padding: 10px 0;         /* Padding atas-bawah */
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05); /* Bayangan halus di atas */
  height: 50px;
  margin: 0;
  border-top: none; /* coba hilangkan border dulu */
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 1100;
}

/* Ikon di footer mobile */
.mobile-footer .footer-icon {
  text-decoration: none;    /* Hilangkan underline */
  color: #555;              /* Warna abu-abu */
  font-size: 12px;          /* Ukuran font kecil */
  display: flex;            /* Flexbox untuk alignment */
  flex-direction: column;   /* Tata letak vertikal (ikon di atas teks) */
  align-items: center;     /* Rata tengah horizontal */
}

.mobile-footer .footer-icon ion-icon {
  font-size: 20px;          /* Ukuran ikon */
  margin-bottom: 4px;       /* Jarak antara ikon dan teks */
}

.mobile-footer .footer-icon:hover {
  color: #ADD8E6;           /* Warna biru muda saat hover */
}

/* --- Dropdown Marketplace (Mobile) --- */
.dropdown-mobile-banner {
  text-align: center;       /* Teks rata tengah */
  margin: 15px 0;           /* Margin atas-bawah */
  padding: 0 15px;          /* Padding kiri-kanan */
  background: #f9f9f9;      /* Latar belakang abu-abu muda */
  position: relative;       /* Diperlukan untuk z-index */
  z-index: 20;              /* Pastikan di atas elemen lain */
}

/* Tombol dropdown di mobile */
.dropdown-mobile-banner .market-link {
  background: none;         /* Hilangkan background */
  color: #000;              /* Warna teks hitam */
  border: none;             /* Hilangkan border */
  padding: 8px 16px;        /* Padding dalam button */
  border-radius: 20px;      /* Border radius bulat */
  font-weight: 600;         /* Tebal font */
  display: inline-flex;     /* Flexbox inline */
  align-items: center;     /* Rata tengah vertikal */
  gap: 5px;                /* Jarak antara teks dan ikon */
  margin-bottom: 10px;      /* Jarak bawah */
}

/* Konten dropdown di mobile */
.dropdown-mobile-banner .dropdown-content {
  display: none;            /* Awalnya tersembunyi */
  grid-template-columns: repeat(4, auto); /* Grid 4 kolom */
  gap: 10px;                /* Jarak antar item */
  padding: 10px;            /* Padding dalam dropdown */
  margin-top: 10px;         /* Jarak dari tombol */
  background: #f9f9f9;      /* Latar belakang abu-abu muda */
  border-radius: 10px;      /* Border radius */
  justify-content: center;  /* Rata tengah horizontal */
  justify-items: center;    /* Rata tengah item */
  text-align: center;       /* Teks rata tengah */
}

/* Item dalam dropdown mobile */
.dropdown-mobile-banner .dropdown-content a {
  background: #fff;         /* Latar belakang putih */
  padding: 5px;             /* Padding dalam item */
  border-radius: 5px;       /* Border radius */
  transition: transform 0.2s; /* Animasi scaling */
}

.dropdown-mobile-banner .dropdown-content a:hover {
  transform: scale(1.05);   /* Sedikit membesar saat hover */
}

.dropdown-mobile-banner .dropdown-content img {
  width: 100%;              /* Lebar penuh */
  height: auto;             /* Tinggi menyesuaikan */
  max-width: 60px;          /* Lebar maksimum */
}

/* === RESPONSIVE BREAKPOINTS === */
/* Tablet & Mobile (max-width: 768px) */
@media (max-width: 768px) {

  .main-header {
    display: flex;
    flex-wrap: nowrap;
    padding: 8px 10px;
    align-items: center;
  }

  /* Sembunyikan elemen desktop */
  .desktop-only {
    display: none !important;
  }

  /* Perkecil logo & teks */
  .logo {
    width: 30px;
    height: 30px;
  }

  .site-name {
    font-size: 14px;
  }

  .header-left {
    flex: auto;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* 1. Perkecil container search bar */
  .header-center {
    max-width: 200px !important; /* Lebar maksimal diperkecil */
    width: auto !important;      /* Lebar menyesuaikan konten */
  }

  /* 2. Perkecil input search */
  .search-box {
    padding: 5px 10px !important; /* Padding lebih kecil */
    font-size: 12px !important;    /* Ukuran font diperkecil */
    height: 30px !important;       /* Tinggi input */
  }

  /* 3. Perkecil tombol search */
  .search-button {
    padding: 5px 10px !important;
    height: 30px !important;       /* Tinggi tombol disamakan */
  }
}

  /* Perkecil tombol marketplace */
  .market-link {
    padding: 6px 10px;
    font-size: 12px;
    background: none;
  }

  /* Perkecil jarak & ukuran ikon */
  .header-right {
    gap: 10px;
  }

  .icon-button {
    font-size: 16px;
  }

/* Desktop (min-width: 769px) */
@media (min-width: 769px) {
  /* Sembunyikan elemen mobile */
  .mobile-footer,
  .dropdown-mobile-banner {
    display: none;
  }
}

/* === PERBAIKAN DROPDOWN MOBILE === */
.dropdown-mobile-banner {
  text-align: center;
  margin: 10px 0 5px 0;     /* Margin lebih rapat */
  padding: 0 15px;
  position: relative;
  z-index: 20;
}

/* Dropdown mobile yang lebih rapi */
.dropdown-mobile-banner .dropdown-content {
  display: none;
  grid-template-columns: repeat(4, auto);
  gap: 10px;
  padding: 8px;             /* Padding lebih kecil */
  margin-top: -10px;        /* Margin negatif untuk menyatu dengan tombol */
  background: #f9f9f9;
  border-radius: 10px;
  justify-content: center;
  justify-items: center;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* Posisi tepat di tengah */
  width: calc(100% - 30px); /* Lebar disesuaikan dengan padding parent */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Bayangan lebih halus */
}