/* ===========================================================================
 * ZIYARETCI KABUGU
 *
 * WebReport projesindeki `hh-nav` tasariminin bu platformun tema
 * token'larina tasinmis hali: sayfanin ustunde YUZEN, yuvarlak koseli,
 * yarisaydam bir panel; ortada hap bicimli baglanti grubu.
 *
 * Disi (`.gnav`) saydamdir, ici (`.gnav__inner`) panelin kendisidir.
 * Boylece panel sayfa kenarina yapismaz ve kaydirirken arkasindaki icerik
 * bulaniklasarak gecer.
 * ========================================================================= */

.gnav {
  position: sticky;
  top: 0;
  z-index: var(--z-dropdown);
  padding: var(--shell-nav-pad) clamp(12px, 2vw, 22px);
  isolation: isolate;
}

.gnav__inner {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 1.4vw, 18px);
  width: min(100%, var(--shell-nav-max));
  height: var(--shell-nav-h);
  margin: 0 auto;
  padding: 0 10px 0 12px;
  border: 1px solid var(--shell-glass-border);
  border-radius: 14px;
  background:
    linear-gradient(135deg, var(--shell-highlight), transparent 38%),
    var(--shell-glass);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  transition: background var(--transition-base), box-shadow var(--transition-base),
              border-color var(--transition-base);
}

/*
 * Sayfa kaydirilinca panel biraz daha opak olur.
 * Sinif JS tarafindan eklenir; JS calismazsa panel ilk halinde kalir ve
 * hicbir sey bozulmaz.
 */
.gnav.is-scrolled .gnav__inner {
  background:
    linear-gradient(135deg, var(--shell-highlight), transparent 34%),
    var(--shell-glass-strong);
  box-shadow: var(--shadow-lg);
}

/* Panelin altindan sizan yumusak renk halesi. */
.gnav__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-primary) 24%, transparent),
    color-mix(in srgb, var(--color-info) 14%, transparent));
  opacity: .2;
  filter: blur(14px);
  transform: translateY(10px) scaleX(.97);
  pointer-events: none;
}

/* ─── Marka ─────────────────────────────────────────────────────────────── */

.gnav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 4px 4px;
  border-radius: 14px;
  color: var(--color-text);
  font-size: var(--font-size-lg);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.gnav__brand:hover { background: var(--color-row-hover); transform: translateY(-1px); }

.gnav__brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background:
    radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--color-surface) 90%, transparent), transparent 40%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--color-primary) 18%, transparent),
      color-mix(in srgb, var(--color-info) 12%, transparent));
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  font-weight: 800;
  flex-shrink: 0;
}

/* ─── Orta: hap bicimli baglanti grubu ──────────────────────────────────── */

.gnav__links {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 3px;
  width: max-content;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--border-color-subtle);
  border-radius: var(--radius-full);
  background: var(--shell-sunken);
}

.gnav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.gnav__link:hover { background: var(--color-surface); color: var(--color-text); }
.gnav__link.is-active {
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}
.gnav__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ─── Sag: eylemler ─────────────────────────────────────────────────────── */

.gnav__actions { display: flex; align-items: center; gap: 6px; }

.gnav__login {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-size: var(--font-size-base);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 30%, transparent);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.gnav__login:hover { background: var(--color-primary-hover); transform: translateY(-1px); }

.gnav__avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: var(--color-avatar-bg);
  color: var(--color-avatar-text);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.gnav__avatar:hover { border-color: var(--color-primary); }

/* Dar ekranda gorunen sag blok. */
.gnav__mobile { display: none; align-items: center; gap: 6px; }

@media (max-width: 900px) {
  .gnav__links,
  .gnav__actions { display: none; }

  /*
   * Hamburger, bosalan orta sutunu devralir ve SAGA yaslanir.
   * `justify-self` olmadan 1fr sutunun soluna, markanin hemen yanina
   * yapisirdi.
   */
  .gnav__mobile { display: flex; justify-self: end; }
  .gnav__inner { grid-template-columns: auto 1fr; }
}

/* ===========================================================================
 * MOBIL CEKMECE
 * ========================================================================= */

.gdrawer__section {
  margin: 0 0 6px;
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.gdrawer__section + .gdrawer__link { margin-top: 0; }

.gdrawer__link {
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
}
.gdrawer__link:hover { background: var(--color-row-hover); }
.gdrawer__link.is-active { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; }

.gdrawer__divider { height: 1px; margin: var(--spacing-md) 0; background: var(--border-color-subtle); border: 0; }

/* ===========================================================================
 * ZIYARETCI GOVDESI
 *
 * Altbilginin kisa sayfalarda ekranin ortasinda asili kalmamasi icin govde
 * tam yukseklikte bir sutundur ve icerik alani buyumeyi ustlenir.
 * ========================================================================= */

.gshell { display: flex; flex-direction: column; min-height: 100vh; }
.gshell__main { flex: 1; padding: var(--spacing-lg) 0 var(--spacing-xl); }


/* ─── Dil gostergesi (ust cubuk) ──────────────────────────────────────────
 * Ekran goruntusundeki gibi: kure simgesi + iki harfli kod.
 */
.gnav__lang {
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs); font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.gnav__lang:hover { background: var(--color-row-hover); color: var(--color-text); }

/*
 * Tek dil etkinken TIKLANABILIR DEGIL.
 * Imleci "tiklanir" gostermek, tiklayip hicbir sey olmamasina yol acardi.
 */
.gnav__lang--static { cursor: default; }
.gnav__lang--static:hover { background: transparent; color: var(--color-text-muted); }

/* Dar ekranda kod gizlenir, simge kalir */
@media (max-width: 640px) {
  .gnav__lang span { display: none; }
  .gnav__lang { padding: 0 8px; }
}