/* =========================================
   0. Tokens & Global Notes
   - This file relies entirely on tokens.css
   - Colors, spacing, typography, and shadows
   ========================================= */


/* =========================================
   1. Header Shell
   ========================================= */

header {
  /* brand gradient + semantic surface alias */
  background: linear-gradient(135deg, var(--surface) 0%, var(--deep-moss) 100%);
  border-bottom: none;

  /* safe-areas + container padding tokens */
  padding-block: max(var(--space-2), var(--safe-top));
  padding-inline: calc(var(--container-pad-inline-desktop) + var(--safe-left));

  /* elevation mapped to token */
  box-shadow: var(--elevation-md);

  --header-logo-size: var(--logo-size-desktop);
  min-height: 56px;

  position: relative;
  z-index: var(--z-header);
  -webkit-tap-highlight-color: transparent;
}

/* Inner container (grid alignment) */
.header-container {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--container-max);
  margin-inline: auto;
}

/* Divider line between groups */
.header-divider {
  display: inline-block;
  width: 1px;
  height: var(--divider-height-desktop);
  background: var(--border);
  margin-inline: var(--space-2);
}


/* =========================================
   2. Brand (left)
   ========================================= */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}
.brand__logo {
  width: var(--header-logo-size);
  height: var(--header-logo-size);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}
.brand__name {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 0.35vw + 1rem, 1.25rem);
  font-weight: var(--weight-bold);
  color: var(--text);
  letter-spacing: 0.3px;
  display: none;
}


/* =========================================
   3. Right Actions (right cluster)
   ========================================= */

.right-actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--cluster-gap-desktop);
  flex-wrap: wrap;
  justify-content: flex-end;
}



/* =========================================
   4. Utility Links (About / Connect)
   ========================================= */

.utility-links {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4); /* daha geniş boşluk → premium nefes */
}

.utility-links__item {
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
  letter-spacing: 0.5px;      /* zarif premium boşluk */
  padding-bottom: 2px;        /* alt çizgi için yer */
  position: relative;         /* ::after underline için */
  transition:
    color var(--ease-standard),
    background var(--ease-standard),
    transform var(--ease-standard),
    border-color var(--ease-standard);
}

.utility-links__item:hover,
.utility-links__item:focus-visible {
  /* Gradient text effect (gold → copper) */
  background: var(--grad-gold-copper);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Subtle lift on hover */
  transform: translateY(-1px);

  text-decoration: none; /* varsayılan underline kapalı */
}

/* Premium underline (animasyonlu) */
.utility-links__item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 1px;
  background: var(--tree-gold);
  transition: width var(--ease-standard);
}

.utility-links__item:hover::after,
.utility-links__item:focus-visible::after {
  width: 100%;
}

/* Aktif sayfa linki */
.utility-links__item--active {
  color: var(--tree-gold);
  font-weight: var(--weight-semibold);
}

.utility-links__item--active::after {
  width: 100%; /* underline daima açık */
}



/* =========================================
   5. Language Switcher (compact + fallback)
   ========================================= */

/* Fallback: klasik select (compact DEĞİLSE) */
.language-switcher:not(.language-switcher--compact) { 
  display: flex; 
  align-items: center; 
}
.language-switcher:not(.language-switcher--compact) select{
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box;
  font: inherit;
  font-weight: var(--btn-font-weight);
  font-size: 0.9rem;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--tree-gold);
  border-radius: var(--radius-interactive);
  padding-block: 0.35rem;
  padding-inline: var(--space-2);
  line-height: 1.2;
  text-align: center;
  transition: background var(--ease-standard),
              box-shadow var(--ease-standard),
              border-color var(--ease-standard);
}
.language-switcher:not(.language-switcher--compact) select:hover,
.language-switcher:not(.language-switcher--compact) select:focus-visible{
  background: rgba(0,0,0,.18);
  outline: none;
  box-shadow: var(--accent-gold-ring);
  border-color: var(--tree-gold);
}

/* ── COMPACT: her boyutta kısa kod (EN/AR/… ) rozeti ───────────────── */

.language-switcher--compact{ display: inline-flex; }
.language-switcher--compact form{
  position: relative;
  display: inline-flex;
  align-items: center;
  width: auto;
}

/* Görünecek öğe: kısa kod rozeti (daha kompakt, utility ile uyumlu) */
.language-switcher--compact .lang-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* kompakt ölçüler */
  padding: 2px var(--space-2);
  min-width: auto;
  height: auto;

  border: 1px solid var(--tree-gold);
  border-radius: var(--radius-interactive);

  font-size: clamp(var(--fs-utility-min), 0.2vw + 0.85rem, var(--fs-utility-max));
  font-weight: var(--weight-medium);
  letter-spacing: 0.2px;
  color: var(--text);

  background: transparent;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;

  transition: background var(--ease-standard),
              border-color var(--ease-standard),
              box-shadow var(--ease-standard),
              transform var(--ease-standard);
}
.language-switcher--compact .lang-badge:hover{
  background: rgba(0,0,0,.14);
  border-color: var(--tree-gold);
  transform: translateY(-1px);
}

/* GörünMEsi gereken select: rozetin üzerinde görünmez overlay */
.language-switcher--compact select{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
  z-index: 2;
}

/* Focus efekti: overlay select focus olduğunda rozet parlasın */
.language-switcher--compact select:focus-visible + .lang-badge{
  box-shadow: var(--accent-gold-ring);
  outline: none;
}








/* =========================================
   Primary Row (dedicated line for flagship)
   ========================================= */
.primary-row{
  grid-column:1 / -1;
  display:flex;
  justify-content:space-between;   /* sol ve sağ uç */
  align-items:center;
  padding-block:var(--space-3);
  border-top:1px solid var(--border);
  box-shadow:inset 0 1px 0 var(--border);
}










/* =========================================
   Primary Nav (Core + Academy) — premium
   ========================================= */
.primary-nav{ display:inline-flex; align-items:center; gap:var(--space-7); }
.primary-nav__item{
  font-family:var(--font-heading);
  font-weight:var(--weight-bold);
  font-size:clamp(var(--fs-primary-min),0.6vw + 1rem,var(--fs-primary-max));
  letter-spacing:.2px;
  color:var(--text);
  text-decoration:none;
  position:relative;
  padding:2px 4px 6px;
  text-shadow:var(--accent-gold-glow); /* ← token kullanıldı */
  transition:transform var(--ease-standard), background var(--ease-standard), text-shadow var(--ease-standard);
}
/* Sadece anchor’larda gradient efekti */
a.primary-nav__item:hover,
a.primary-nav__item:focus-visible{
  background:var(--grad-gold-copper);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  transform:translateY(-1px);
  text-shadow:var(--accent-gold-glow);
  text-decoration:none;
}
.primary-nav__item::after,
.primary-nav__item::before{
  content:""; position:absolute; left:0; right:0; height:1px; transform-origin:left;
  transition:scaleX var(--ease-standard); scale:0 1;
}
.primary-nav__item::after{ bottom:-2px; background:var(--tree-gold); }
.primary-nav__item::before{ bottom:-4px; background:var(--border); } /* ← sabit rgba yerine token */
.primary-nav__item:hover::after,
.primary-nav__item:hover::before,
.primary-nav__item:focus-visible::after,
.primary-nav__item:focus-visible::before{ scale:1 1; }
.primary-nav__item--active{ color:var(--tree-gold); -webkit-text-fill-color:initial; background:none; }
.primary-nav__item--active::after,
.primary-nav__item--active::before{ scale:1 1; }















/* =========================================
   Profile Menu (sağ blok)
   ========================================= */
.profile-menu{ position:relative; display:inline-flex; align-items:center; }

/* Tetikçi (Profile) — nav ile uyumlu görünsün */
.profile-trigger{
  background:none; border:0; cursor:pointer; font:inherit;
  font-weight:var(--weight-bold); color:var(--text);
  padding:2px 6px; border-radius:var(--radius-interactive);
  transition:background var(--ease-standard), color var(--ease-standard);
  -webkit-text-fill-color:currentColor; /* metin kaybolmasın */
}
/* Butonda sade altın vurgusu (gradient yok) */
.profile-trigger:hover,
.profile-trigger:focus-visible{
  background:color-mix(in srgb, var(--text) 16%, transparent);
  color:var(--tree-gold);
  -webkit-text-fill-color:currentColor; /* iOS/WebKit güvenliği */
  outline:none;
}
/* Menü açıkken altın kalsın */
.profile-trigger[aria-expanded="true"]{
  color:var(--tree-gold);
  -webkit-text-fill-color:currentColor;
}
/* Butonda alt-çizgi animasyonlarını kapat */
.profile-trigger::before,
.profile-trigger::after{ display:none; }

/* Panel */
.profile-dropdown{
  position:absolute; top:100%; right:0; margin-top:var(--space-2);
  background:var(--surface-elevated);
  border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--elevation-lg);
  padding:var(--space-2); min-width:200px; z-index:var(--z-overlay);
}
.profile-dropdown[hidden]{ display:none; }

/* İçerik öğeleri (link + button) */
.profile-dropdown .profile-item,
.profile-dropdown form button.profile-item{
  width:100%;
  display:flex; align-items:center; justify-content:flex-start;
  gap:var(--space-2);
  padding:10px 12px;
  border-radius:var(--radius-interactive);
  border:0; background:transparent; color:var(--text);
  font:inherit; text-align:left; cursor:pointer;
  transition:background var(--ease-standard), color var(--ease-standard);
}
.profile-dropdown .profile-item:hover,
.profile-dropdown .profile-item:focus-visible{
  background:color-mix(in srgb, var(--text) 16%, transparent);
  color:var(--tree-gold); outline:none;
}

/* Tehlike tonu (Logout) */
.profile-dropdown .profile-item--danger{
  color:color-mix(in srgb, var(--ritual-fire-glow) 85%, var(--ivory-bone));
}
.profile-dropdown .profile-item--danger:hover,
.profile-dropdown .profile-item--danger:focus-visible{
  background:color-mix(in srgb, var(--ritual-fire-glow) 24%, transparent);
  color:var(--ivory-bone);
}

/* Dropdown içindeki formun boşluk ayarı */
.profile-dropdown form{ margin:0; }



.profile-dropdown[hidden] { display: none !important; }









/* =========================================
   7. Responsive Adjustments (token-driven)
   ========================================= */

/* ─────────────────────────────────────────
   7.1  Large Tablet / Small Laptop  (≤1280)
   ───────────────────────────────────────── */
@media (max-width: 1280px) {
  /* Biraz daha sıkı aralıklar; genişlik artınca hâlâ ferah */
  .right-actions { gap: calc(var(--cluster-gap-desktop) - var(--space-1)); }
  .primary-nav   { gap: calc(var(--space-7) - var(--space-1)); }
}

/* ─────────────────────────────────────────
   7.2  Tablet  (≤1024)
   ───────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Logo token küçültme + header iç pad’i tablet değerine çek */
  header {
    --header-logo-size: var(--logo-size-tablet);
    padding-inline: calc(var(--container-pad-inline-tablet) + var(--safe-left));
  }

  /* Gruplar arası boşluğu token’dan daralt */
  .right-actions { gap: var(--cluster-gap-tablet); }

  /* Utility linkler bir tık yakın */
  .utility-links { gap: var(--space-3); }

  /* Divider daha kısa (token) */
  .header-divider { height: var(--divider-height-desktop); }

  /* Flagship satır kompakt */
  .primary-row { padding-block: var(--space-2); }

  /* Core / Academy aralığı tablet ritmine */
  .primary-nav { gap: var(--space-5); }
}

/* ─────────────────────────────────────────
   7.3  Mobile  (≤640)
   ───────────────────────────────────────── */
@media (max-width: 640px) {
  /* Logo, pad ve grup boşlukları mobil token’lara iner */
  header {
    --header-logo-size: var(--logo-size-mobile);
    padding-inline: calc(var(--container-pad-inline-mobile) + var(--safe-left));
  }

  .right-actions {
    gap: var(--cluster-gap-mobile);
    justify-self: end;
    flex-wrap: wrap;
  }

  /* Utility: daha sıkı aralık + hafif iç boşluk (dokunma için) */
  .utility-links { gap: var(--space-2); }
  .utility-links__item {
    font-size: clamp(var(--fs-utility-min), 1vw + 0.8rem, var(--fs-utility-max));
    padding-inline: 2px;
    min-height: var(--touch-min);
    display: inline-flex;
    align-items: center;
  }

  /* İnce ayraçları mobilde kaldır → gürültü azalır */
  .header-divider { display: yes; }

  /* Dil seçici: okunaklı ve taşmayan */
  .language-switcher select {
    font-size: 0.9rem;
    padding-block: 0.4rem;
    padding-inline: var(--space-2);
    max-width: 52vw;
    box-shadow: none; /* mobilde ring sade */
  }

  /* CTA’lar: yeterli dokunma hedefi */
  .user-actions .signup-link {
    padding: var(--space-1) calc(var(--space-2) + 2px);
    min-height: var(--touch-min);
    display: inline-flex;
    align-items: center;
  }
  .user-actions a,
  .logout-btn {
    font-size: 0.9rem;
    padding: calc(var(--space-1) - 1px) var(--space-2);
    min-height: var(--touch-min);
    display: inline-flex;
    align-items: center;
  }

  /* Grid düzeni korunur; sağ blok sağda kalır */
  .header-container { grid-template-columns: auto 1fr; }

  /* Flagship (Core/Academy): mobil ritim ve ışıma yumuşatma */
  .primary-row { padding-block: var(--space-2); }
  .primary-nav  { gap: var(--space-3); flex-wrap: wrap; }
  .primary-nav__item {
    font-size: clamp(var(--fs-primary-min), 1vw + 0.95rem, var(--fs-primary-max));
    /* token tabanlı yumuşak ışıma */
    text-shadow: 0 0 8px color-mix(in srgb, var(--tree-gold) 16%, transparent);
    min-height: var(--touch-min);
    display: inline-flex;
    align-items: center;
  }

  /* Küçük ekran ritmi (aynı satırda kalsın; aralıklar daralsın) */
  .primary-nav{ gap: var(--space-4); }
}

/* ─────────────────────────────────────────
   7.4  Small Phones (≤400) — mikro düzeltmeler
   ───────────────────────────────────────── */
@media (max-width: 400px) {
  /* Cluster’lar iyice yaklaşır; taşma riski azalır */
  .right-actions { gap: var(--space-1); }
  .utility-links { gap: var(--space-1); }
  .language-switcher select { max-width: 58vw; }
}

/* ─────────────────────────────────────────
   7.5  Short Viewports (≤480px height)
   ───────────────────────────────────────── */
@media (max-height: 480px) and (max-width: 768px) {
  /* Yüksekliği kısa cihazlarda dikey yoğunluğu azalt */
  header { padding-block: max(var(--space-1), var(--safe-top)); }
  .primary-row { padding-block: var(--space-1); }
}

/* =========================================
   8. Hover Capability Adjustments
   ========================================= */
@media (hover: none) {
  /* Dokunmatiklerde aşırı hover efektlerini yumuşat (metin kaybını önler) */
  a.primary-nav__item:hover,
  a.primary-nav__item:focus-visible {
    -webkit-text-fill-color: currentColor;
    background: none;
    transform: none;
    text-shadow: var(--accent-gold-glow);
  }

  .profile-trigger,
  .profile-trigger:hover,
  .profile-trigger:focus,
  .profile-trigger:active,
  .profile-trigger:focus-visible {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--text);
  }
}

/* =========================================
   9. Motion Preferences
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}