/* ============================================================
   BASE HEADER STYLES (Masaüstü varsayılanları)
   ============================================================ */
header{
  position:fixed;top:30px;left:50%;transform:translateX(-50%);
  width:1080px;height:86px;padding:19px 33px;
  display:flex;align-items:center;justify-content:space-between;
  border-radius:16px;background:transparent;box-shadow:none;z-index:999;opacity:1;
  will-change: transform, background-color, box-shadow;
}

.header-logo{
  width:67px; height:34px;
  background:url('/static/images/logo.png') left center / contain no-repeat;
  margin-right:54px; cursor:pointer;
}

.header-nav-links{display:flex;gap:40px}
.header-nav-links a{
  color:#000;text-decoration:none;font-weight:700;letter-spacing:-.42px;transition:color .25s ease;
}
.header-nav-links a.dimmed{color:#9e9e9e}

/* sağ blok → dropdown sağa hizalansın */
.header-content{
  display:flex;align-items:center;gap:16px;position:relative;z-index:1000;
  flex:1;justify-content:flex-end;min-width:0;
}

/* === Avatar (Bana Ulaş Butonu) === */
.header-avatar{
  width:47px;height:47px;border-radius:50%;background:#19171c;
  display:flex;align-items:center;justify-content:center;gap:8px;
  color:#fff;font:800 16px/1 'Manrope';letter-spacing:-.16px;cursor:pointer;
  transition:width .28s cubic-bezier(.22,.61,.36,1),
             border-radius .28s cubic-bezier(.22,.61,.36,1),
             padding .28s cubic-bezier(.22,.61,.36,1),
             transform .18s ease;
  overflow:hidden;
}
.label-user{display:block}

/* "Bana Ulaş" metni */
.label-event{
  display:none;background:transparent;border:0;padding:0;margin:0;
  color:#fff;cursor:pointer;font:800 14px/1 'Manrope';
  white-space:nowrap;letter-spacing:-.16px;text-decoration:none !important;
  transition:opacity .15s ease, transform .15s ease;
}
.label-event:hover{ opacity:.92; transform:translateY(-0.5px); }
.label-event:focus{ outline:none; text-decoration:none; }

/* event-mode animasyonu */
.header-avatar.event-mode{
  width:150px;border-radius:10px;padding:0 22px;
  pointer-events:auto;
}
.header-avatar.event-mode .label-user{display:none}
.header-avatar.event-mode .label-event{display:block; pointer-events:auto;}

/* Hamburger (Varsayılan olarak gizli/animasyonlu) */
.header-menu-btn{
  width:47px;height:47px;border-radius:50%;background:#19171c;display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:absolute;right:0;opacity:0;transform:scale(.9);pointer-events:none;border:0;
  transition:opacity .18s ease, transform .18s ease;
}
.header-menu-btn svg{stroke:#fff}

/* Dropdown (Dil Seçimi - Masaüstü) */
.header-dropdown{
  position:absolute; right:0; top:calc(100% + 14px); z-index:1001;
  background:#fff;border-radius:12px;box-shadow:0 6px 12px rgba(0,0,0,.1);
  padding:12px 0;opacity:0;pointer-events:none;min-width:260px;transform-origin: top right;
}

.flag-icon {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  margin-right: 8px; box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.lang-item:hover .flag-icon { transform: scale(1.06); box-shadow: 0 0 0 2px rgba(0,0,0,0.12); }

.header-dropdown a{
  display:flex;align-items:center;gap:10px;padding:10px 24px;text-decoration:none;color:#000;
  font-size:14px;font-weight:600;transition:background .18s ease;
}
.header-dropdown a:hover{background:#f5f5f5}
.header-dropdown img{width:16px;height:16px}

/* Ara ölçü düzenlemesi */
@media (max-width:1140px){
  header{width:calc(100% - 40px)}
}

@media (prefers-reduced-motion: reduce){
  .header-avatar, .label-event, .header-menu-btn{ transition:none; }
}

/* ============================================================
   MOBILE MENU (BOTTOM SHEET) STYLES
   ============================================================ */

/* Overlay: Tüm ekranı kapla ve içeriği EN ALTA it */
.mobile-menu-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 99999;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(5px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
  
  /* Flex ile en alta hizalama */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Panel en altta durur */
  align-items: center;
}

.mobile-menu-overlay.is-open { opacity: 1; visibility: visible; }

/* Sheet: Beyaz Panel */
.mobile-menu-sheet {
  width: 100%;
  max-width: 100%; 
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 12px 24px 40px; /* iPhone bar boşluğu */
  
  /* Animasyon başlangıcı: Ekranın altında saklı */
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
  
  position: relative;
  max-height: 85vh; 
  overflow-y: auto;
}

.mobile-menu-overlay.is-open .mobile-menu-sheet { transform: translateY(0); }

/* Tutamaç */
.sheet-handle-area {
  width: 100%; height: 30px;
  display: flex; justify-content: center; align-items: center;
  margin-bottom: 10px; cursor: grab;
}
.sheet-handle {
  width: 40px; height: 5px; background: #E5E7EB; border-radius: 10px;
}

/* Linkler */
.mobile-nav { display: flex; flex-direction: column; }
.m-link {
  display: block; padding: 18px 0;
  font-size: 18px; font-weight: 700; color: #111;
  text-decoration: none; border-bottom: 1px solid #f5f5f5; text-align: left;
}
.m-link.special { color: #AE8BF4; border-bottom: none; }

.mobile-divider { border: 0; height: 1px; background: #f5f5f5; margin: 10px 0; }

/* Dil Alanı */
.mobile-lang { margin-top: 10px; }
.lang-label { display:block; margin-bottom:12px; font-size: 14px; color: #888; font-weight: 600; }
.lang-options { display: flex; gap: 10px; }
.lang-btn {
  flex: 1; padding: 14px; border-radius: 14px; border: 1px solid #eee;
  background: #f9f9f9; font-weight: 700; font-size: 14px; color: #333; cursor: pointer;
}
.lang-btn.active { background: #000; color: #fff; border-color: #000; }


/* ============================================================
   VISIBILITY LOGIC (MASAÜSTÜ vs MOBİL AYRIMI)
   ============================================================ */

/* 1. MASAÜSTÜ (1025px ve üzeri) */
@media (min-width: 1025px) {
  /* Mobil menüyü tamamen yok et */
  .mobile-menu-overlay { display: none !important; }

  /* Hamburger butonu gizle */
  .header-menu-btn { display: none !important; }

  /* Normal linkler ve avatar görünsün */
  .header-nav-links { display: flex !important; }
  #avatar { display: flex !important; }
}

/* 2. MOBİL / TABLET (1024px ve altı) */
@media (max-width: 1024px) {
  
  /* Header ayarları */
  header {
    width: calc(100% - 32px) !important;
    padding: 12px 20px !important;
  }

  /* Masaüstü linkleri ve avatarı gizle */
  .header-nav-links { display: none !important; }
  #avatar { display: none !important; }

  /* Hamburger menü butonunu göster */
  .header-menu-btn {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: scale(1) !important;
    position: relative !important;
    right: auto !important;
    display: flex !important;
    background: #19171c !important;
    margin-left: auto;
  }

  /* Mobil menü overlay (DOM'da var olsun, JS ile açılacak) */
  .mobile-menu-overlay { display: flex !important; }
}