/* layout/header.css — locked header colors (final) */

:root {
  --header-bg: rgba(0,0,0,0.85);  /* LOCKED - tidak berubah oleh tema */
  --header-text: #ffffff;
  --header-border: rgba(255,255,255,0.06);
}

.apple-header {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: var(--header-bg);
  backdrop-filter: blur(10px);
  z-index: 1050;
  margin:0;
}

.apple-header .container-fluid {
  max-width: 1200px;
  height: 48px; /* IDEAL */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  margin: 0 auto;
  position: relative;
}

/* logo */
.apple-header .logo img{
  height: 28px; /* visually match Apple smaller logo */
  display:block;
}

/* ensure header controls & nav inherit header text color */
.apple-header,
.apple-header a,
.apple-header .nav-btn,
.apple-header .icon-btn,
.apple-header .lang-btn {
  color: var(--header-text) !important;
}

/* make sure header has no bottom gap */
.apple-header { margin-bottom: 0; }

/* ==========================================================
   MOBILE HEADER — SPACING FIX (APPLE STYLE)
   ========================================================== */

/* Container aksi header (search, lang, theme, menu) */
.header-actions {
    position: relative;
    z-index: 5000;
    display: flex;
    align-items: center;
    gap: 18px;   /* JARAK ANTAR IKON — Apple style */
}

/* Pada layar kecil, tambah jarak lagi */
@media (max-width: 768px) {
    .header-actions {
        gap: 22px;   /* Tambah jarak lebih besar */
    }

    /* Ikon spesifik */
    .icon-btn.small i,
    .menu-toggle span {
        font-size: 20px;
    }

    /* Language toggle spacing */
    .lang-toggle {
        gap: 10px; /* ID | EN lebih longgar */
    }

    /* Menu toggle jarak kiri */
    #menuToggle {
        margin-left: 6px;
    }

    /* Search icon spacing */
    #searchToggle {
        margin-right: 4px;
    }

    /* Theme button spacing */
    #themeToggle {
        margin-right: 4px;
    }
}