/* =========================================================
   HEADER (FULL WIDTH + PUTIH)
   - Full width di semua monitor
   - Tidak pakai background biru
   - Responsif: laptop, macbook, ipad, iphone
   ========================================================= */

:root{
  --hd-gutter: clamp(14px, 2.2vw, 32px);
  --brand-blue: #0e4aa2;
}

.aak-header{
  width: 100%;
  position: relative;
  z-index: 10000;
  overflow: visible;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.aak-header__bg{ display: none !important; }
.aak-header__inner{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 10px var(--hd-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 10001;
  overflow: visible;
}

.aak-header.is-sticky{
  position: sticky;
  top: 0;
}

/* Brand */
.aak-brand{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;

  text-decoration: none;       /* pastikan tidak ada underline */
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Hover: warna lebih muda (tanpa garis bawah) */
.aak-brand:hover .aak-brand__title{
  color: rgba(14, 74, 162, .75);  /* lebih muda dari biru utama */
  text-decoration: none;
}
.aak-brand:hover .aak-brand__tag{
  color: rgba(14, 74, 162, .70);  /* ikut lebih muda */
}

/* Aksesibilitas: fokus keyboard */
.aak-brand:focus-visible{
  outline: 2px solid rgba(14, 74, 162, .55);
  outline-offset: 4px;
  border-radius: 10px;
}

.aak-brand__logo img{
  width: clamp(34px, 3.2vw, 46px);
  height: clamp(34px, 3.2vw, 46px);
  display: block;
  object-fit: contain;
}

.aak-brand__text{ 
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-width: 0; }

.aak-brand__title{
  margin: 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: clamp(18px, 2.2vw, 34px);
  line-height: 1.1;
  color: var(--brand-blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(62vw, 900px);
}

.aak-brand__tag{
  margin: 6px 0 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #fff;
  font-weight: 400;
  font-size: clamp(12px, 1.6vw, 18px);
  line-height: 1.2;
  background: var(--brand-blue);
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
}
.aak-brand__text:hover .aak-brand__title{
  color: rgba(14, 74, 162, .75);
}
.aak-brand__text:hover .aak-brand__tag{
  color: rgba(14, 74, 162, .70);
}

/* fokus keyboard */
.aak-brand__text:focus-visible{
  outline: 2px solid rgba(14, 74, 162, .55);
  outline-offset: 4px;
  border-radius: 10px;
}
@media (max-width: 980px){
  .aak-header__inner{
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* HP */
@media (max-width: 520px){
  .aak-header__inner{
    padding: 10px 14px;
  }

  .aak-brand{
    gap: 10px;
  }
}
/* Right area: call center di atas navbar */
.aak-header__right{
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* desktop: rata kanan */
  gap: 6px;
  min-width: 0;
}

/* Call center text */
.aak-callcenter{
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: clamp(12px, 1.4vw, 16px);
  line-height: 1.2;

  color: #ffd54a;              /* kuning */
  background: #c62828;         /* merah */
  display: inline-block;       /* biar background pas mengikuti teks */
  padding: 6px 10px;
  border-radius: 8px;

  white-space: nowrap;
}

/* Link tel: ikut gaya brand (tanpa underline) */
.aak-callcenter a{
  color: inherit;
  text-decoration: none;
  font-weight: 800;
}

/* Hover: kuning lebih muda (tanpa garis bawah) */
.aak-callcenter a:hover{
  color: rgba(255, 213, 74, .85);
}

/* Responsive: saat header wrap, area kanan turun & rata kiri */
@media (max-width: 980px){
  .aak-header__right{
    width: 100%;
    align-items: flex-start;
  }
  .aak-callcenter{
    white-space: normal; /* biar tidak kepotong di layar kecil */
  }
}

/* HP kecil: biar enak dibaca */
@media (max-width: 520px){
  .aak-callcenter{
    font-size: 12px;
    padding: 5px 8px;
    border-radius: 7px;
  }
}