/* =========================
   🔴 HEADER - ANA ÜST BAR
========================= */
header{
  background:#000;
  color:#fff;
  padding:16px 20px;
  display:flex;
  align-items:center;
  position:relative;
  z-index:10000;
}

/* =========================
   🟠 LOGO
========================= */
.logo{
  font-size:22px;
  font-weight:bold;
}

/* =========================
   🟡 HEADER RIGHT AREA
========================= */
.right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

/* =========================
   🟢 AUTH BUTTONS
========================= */
.auth{
  display:flex;
  gap:10px;
}

/* =========================
   🔵 BURGER ICON
========================= */
.menu-icon{
  font-size:24px;
  cursor:pointer;
  color:#fff;
  width:30px;
  text-align:center;
  display:inline-block;
  position:relative;
  z-index:10001;
}

/* =========================
   🟣 ACCOUNT MENU
========================= */
.account-menu{
  position:absolute;
  top:70px;
  left:0;
  width:100%;
  background:#fff;
  display:none;
  z-index:9998;
}

/* =========================
   🔴 BURGER MENU (ACCOUNT GİBİ)
========================= */
.burger-menu{
  position:fixed; /* 🔥 ANA FIX */

  top:70px; /* header altı */
  left:0;
  right:0;

  height:calc(100vh - 70px);

  background:#fff;

  padding:20px;
  box-sizing:border-box;

  display:none;
  z-index:9999;

  overflow-y:auto;
}

/* =========================
   ⚫ ORTAK MENU ITEM
========================= */
.account-menu a,
.account-item,
.burger-menu a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px;
  font-size:18px;
  font-weight:bold;
  text-decoration:none;
  color:#000;
  border-bottom:1px solid #eee;
}

.burger-menu a:last-child,
.account-item:last-child{
  border-bottom:none;
}

/* =========================
   🔥 ACTIVE STATES
========================= */
.account-menu.active{
  display:block;
}

.burger-menu.active{
  display:block;
}

/* =========================
   ⚫ ICON
========================= */
.icon{
  width:24px;
  height:24px;
  fill:#000;
}

/* =========================
   🟡 ACCOUNT BUTTON FIX
========================= */
.section .btn{
  display:block !important;
  width:fit-content !important;
}

.create-account{
  border-bottom:1px solid #ddd;
  display:inline-block;
  padding-bottom:4px;
}

#guestMenu,
#userMenu{
  display:flex;
  align-items:center;
  gap:10px;
}

#userAccountBtn{
  max-width:170px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}