/* ================================================================
   90matik - Sayfa duzeni

   Masaustunde uc kolon (PRD 5.3):
     sol menu | orta icerik | sag widget alani

   Ekran daraldikca once sag kolon, sonra sol menu gizlenir.
   Mobilde alt navigasyon cubugu devreye girer (PRD 46.4).
   ================================================================ */

/* ================================================================
   UST CUBUK
   ================================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  background: var(--glass-header);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

/* --- Logo --- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  letter-spacing: -0.04em;
  color: var(--text);
  white-space: nowrap;
}

.logo:hover { color: var(--text); }
.logo__mark { color: var(--brand-ink); }

.logo__badge {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  border-radius: var(--r-md);
  letter-spacing: -0.05em;
}

/* --- Arama --- */
.header__search {
  flex: 1;
  max-width: 420px;
  position: relative;
}

.header__search input {
  width: 100%;
  height: 34px;
  padding: 0 var(--sp-4) 0 38px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  color: var(--text);
  font-size: var(--fs-sm);
  transition: background var(--t-fast), border-color var(--t-fast);
}

.header__search input::placeholder { color: var(--text-dim); }

.header__search input:focus {
  background: var(--surface-1);
  border-color: var(--border-brand);
}

.header__search svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  pointer-events: none;
}

/* Arama onerileri */
.header__results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  max-height: 60dvh;
  overflow-y: auto;
  padding: var(--sp-2);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}

.header__results[hidden] { display: none; }

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}


/* --- Kullanici menusu --- */
.usermenu { position: relative; }

.usermenu__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 40px;
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background var(--t-fast);
}

.usermenu__trigger:hover { background: var(--surface-2); }

.usermenu__name {
  max-width: 130px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.usermenu__panel {
  min-width: 268px;
  padding: 0;
  overflow: hidden;
}

.usermenu__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
}

.usermenu__ident {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}

.usermenu__display {
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  max-width: 165px;
}

.usermenu__xp {
  padding: 0 var(--sp-4) var(--sp-4);
}

.usermenu__xptext {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-dim);
}

.usermenu__links {
  padding: var(--sp-2);
  border-top: 1px solid var(--border);
}

.usermenu__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: background var(--t-fast), color var(--t-fast);
}

.usermenu__link:hover { background: var(--surface-3); color: var(--text); }
.usermenu__link--danger { color: var(--danger); }
.usermenu__link--danger:hover { background: var(--danger-dim); color: var(--danger); }

.usermenu__sep {
  height: 1px;
  margin: var(--sp-2) 0;
  background: var(--border);
}


/* ================================================================
   ANA IZGARA
   ================================================================ */
.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4);
  /* Mobil alt menunun icerigi ortmemesi icin */
  padding-bottom: calc(var(--mobilenav-h) + var(--sp-8));
}

@media (min-width: 1080px) {
  .shell {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    padding-bottom: var(--sp-10);
  }
}

@media (min-width: 1300px) {
  .shell {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--widgets-w);
  }
}

/* Tek kolonlu sayfalar (ayarlar, kupon, mac…). Genis ekranda solda
   ince bir menu rayi acilir; kurallari "INCE MENU (RAY)" bolumunde. */
.shell--narrow {
  max-width: 860px;
  grid-template-columns: minmax(0, 1fr);
}


/* ================================================================
   SOL MENU
   ================================================================ */
.sidebar {
  display: none;
}

@media (min-width: 1080px) {
  .sidebar {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
    align-self: start;
    max-height: calc(100dvh - var(--header-h) - var(--sp-10));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
}

.nav__item:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav__item.is-active {
  background: var(--brand-dim);
  color: var(--brand-ink);
  font-weight: var(--fw-semibold);
}

.nav__item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--brand);
  border-radius: 0 var(--r-full) var(--r-full) 0;
}

/* Uyelere ozel bolum: kilit isareti. Baglanti tiklanabilir kalir
   (giris ekranina gider), yalniz solgun gorunur. */
.nav__lock {
  margin-left: auto;
  display: inline-flex;
  color: var(--text-dim);
}

.nav__item.is-locked > span:first-of-type { color: var(--text-muted); }
.nav__item.is-locked:hover > span:first-of-type { color: var(--text); }

.nav__count {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 11px;
  font-weight: var(--fw-bold);
  border-radius: var(--r-full);
}

.nav__divider {
  height: 1px;
  background: var(--border);
  margin: var(--sp-3) var(--sp-4);
}


/* --- Sol menu alt bloklari --- */
.sidebar-progress,
.sidebar-cta {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
}

.sidebar-progress__top {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.sidebar-progress__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}

.sidebar-progress__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: 6px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.sidebar-cta__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-2);
}

.sidebar-cta__text {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}

.sidebar-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-6);
  padding: 0 var(--sp-4) var(--sp-4);
  font-size: var(--fs-xs);
}

.sidebar-foot a { color: var(--text-dim); }
.sidebar-foot a:hover { color: var(--brand-ink); }

.sidebar-foot__copy {
  flex-basis: 100%;
  color: var(--text-dim);
}

.nav__label {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}


/* ================================================================
   INCE MENU (RAY)
   ----------------------------------------------------------------
   Kupon, mac, ayarlar gibi tek kolonlu sayfalarda sol menu tumden
   kalkiyordu; baska bir bolume gecmenin tek yolu tarayicinin geri
   tusuydu. Simdi ayni menu ince bir ray olarak duruyor: yalnizca
   simgeler gorunuyor, dugmeye basilinca yazilariyla aciliyor.

   Acilan ray icerigin ustune binmiyor, kolonu genisletiyor. Ustune
   binen bir menu, altindaki metni okunamaz hale getiriyor ve fareyi
   cekince kayboldugu icin tiklamasi zor oluyordu. Sayfanin ustteki
   sinirini da buyuttugumuz icin orta kolon ayni genislikte kaliyor:
   ray acilip kapanirken metin yeniden dizilmiyor.
   ================================================================ */
.sidebar--ray { display: none; }

@media (min-width: 1080px) {
  .shell--narrow {
    /* Ray kapaliyken bir simge sutunu, acikken tam menu. */
    --ray-w: 60px;

    grid-template-columns: var(--ray-w) minmax(0, 1fr);
    max-width: calc(860px + var(--ray-w) + var(--sp-6));
  }

  [data-ray="acik"] .shell--narrow { --ray-w: var(--sidebar-w); }

  .sidebar--ray { display: block; }
}

/* Kapali ray: yalnizca simgeler. */
[data-ray="kapali"] .sidebar--ray .nav__item {
  justify-content: center;
  padding-inline: 0;
}

[data-ray="kapali"] .sidebar--ray .nav__item > span:not(.nav__count),
[data-ray="kapali"] .sidebar--ray .nav__lock,
[data-ray="kapali"] .sidebar--ray .sidebar-progress,
[data-ray="kapali"] .sidebar--ray .sidebar-cta,
[data-ray="kapali"] .sidebar--ray .social,
[data-ray="kapali"] .sidebar--ray .sidebar-foot {
  display: none;
}

/* Okunmamis bildirim sayisi dar rayda satira sigmiyor; simgenin
   kosesinde bir isaret olarak duruyor. Sayinin kendisi yazilar
   acildiginda geri geliyor. */
[data-ray="kapali"] .sidebar--ray .nav__count {
  position: absolute;
  top: 4px;
  right: 6px;
  min-width: 8px;
  height: 8px;
  padding: 0;
  font-size: 0;
}

[data-ray="kapali"] .sidebar--ray .nav__divider { margin-inline: var(--sp-2); }

/* Ac/kapa dugmesi. Rayin en ustunde, menu ogeleriyle ayni hizada
   duruyor ki bir menu ogesiymis gibi okunmasin diye solgun. */
.ray-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  margin-bottom: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.ray-toggle:hover {
  background: var(--surface-2);
  color: var(--text);
}

.ray-toggle__ikon { display: inline-flex; }

[data-ray="kapali"] .ray-toggle {
  justify-content: center;
  padding-inline: 0;
}

[data-ray="kapali"] .ray-toggle__yazi { display: none; }


/* ================================================================
   ORTA ALAN
   ================================================================ */
.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.main--feed { max-width: var(--feed-max); width: 100%; }

@media (min-width: 1080px) {
  .main--feed { max-width: none; }
}

/* Sag widget kolonu daha gorunmedigi araligda orta kolon serbest kalir ve
   satirlar okunamayacak kadar uzar. Metin genisligini sinirliyoruz;
   1300px'ten sonra widget kolonu bu bosluğu dolduruyor. */
@media (min-width: 1080px) and (max-width: 1299px) {
  .shell:not(.shell--narrow) > .main { max-width: 700px; }
}


/* ================================================================
   SAG WIDGET KOLONU
   ================================================================ */
.widgets {
  display: none;
}

/* Kolon sayfayla birlikte kayiyor: yapisik (sticky) durup kendi icinde
   kaydirilmiyor.

   Eskiden ekran yuksekligi kadar bir sinir vardi. Kutular esnek kutu
   ogesi oldugu icin sigmayinca kendileri buzusuyordu ve .card'in
   "overflow: hidden" kurali icerigi ortasindan kesiyordu: puan tablosu
   iki satirda, son sonuclar yarim macta bitiyordu. Uste kolonun kendi
   kaydirma cubugu cikiyor, alttaki kutulara ulasmak zorlasiyordu. */
@media (min-width: 1300px) {
  .widgets {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    align-self: start;
    padding-bottom: var(--sp-4);
  }

  /* Ileride bir sinir konursa kutular yine buzusmesin */
  .widgets > * { flex-shrink: 0; }
}

/* Sag kolon cizilmediginde oradaki bir kutuyu orta kolonda gostermek
   icin: dar ekranda gorunur, genis ekranda gizlenir. */
@media (min-width: 1300px) {
  .narrow-only { display: none; }
}


/* ================================================================
   SOSYAL MEDYA SERIDI
   ----------------------------------------------------------------
   Ayni serit iki yerde: masaustunde sol menunun altinda, mobilde
   sayfanin dibindeki alt bilgide. Ikisini ayni anda gostermek ayni
   baglantilari tekrar etmek olurdu, bu yuzden her biri otekinin
   gorunmedigi genislikte cikiyor.
   ================================================================ */
.social {
  padding: 0 var(--sp-4);
}

.social__label {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--text-dim);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

.social__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.social__item {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-muted);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.social__item:hover {
  border-color: var(--border-brand);
  background: var(--surface-3);
  color: var(--brand-ink);
}

/* Sol menudeki serit: menu zaten gizliyken cizilmesin. */
@media (max-width: 1079px) {
  .social--menu { display: none; }
}

/* Alt bilgideki serit: sol menu goruntudeyken gereksiz. */
@media (min-width: 1080px) {
  .social--footer { display: none; }
}

/* Ust cubuk: her genislikte gorunur, yazi yok yalnizca ikon. */
.social--header {
  padding: 0;
}

.social--header .social__label { display: none; }

.social--header .social__list { gap: 4px; flex-wrap: nowrap; }

.social--header .social__item {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
}

.social--header .social__item:hover {
  background: var(--surface-2);
  color: var(--text);
}


/* ================================================================
   SAYFA ALT BILGISI (mobil)
   ----------------------------------------------------------------
   Masaustunde bu bilgiler sol menunun altinda duruyor; orada
   gorunurken burada ikinci kez cizilmesinin anlami yok.
   ================================================================ */
.sitefoot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);

  /* Alt navigasyon ekranin dibine sabit: alt bilgi onun altinda
     kalmasin diye bosluk birakiliyor. */
  margin: var(--sp-8) 0 calc(var(--mobilenav-h) + var(--sp-6));
  padding: var(--sp-5) var(--sp-4) 0;
  border-top: 1px solid var(--border);
  text-align: center;
}

@media (min-width: 1080px) {
  .sitefoot { display: none; }
}

.sitefoot__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
}

.sitefoot__links a { color: var(--text-dim); }
.sitefoot__links a:hover { color: var(--brand-ink); }

.sitefoot__copy {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--fs-xs);
}


/* ================================================================
   MOBIL ALT NAVIGASYON (PRD 46.4)
   ================================================================ */
.mobilenav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  height: calc(var(--mobilenav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--glass-nav);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
}

@media (min-width: 1080px) {
  .mobilenav { display: none; }
}

.mobilenav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: var(--fw-medium);
  /* Dokunmatik hedef en az 44px olmali (erisilebilirlik) */
  min-height: 44px;
  transition: color var(--t-fast);
  position: relative;
}

.mobilenav__item.is-active { color: var(--brand-ink); }

.mobilenav__item.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  width: 28px;
  height: 2px;
  background: var(--brand);
  border-radius: 0 0 var(--r-full) var(--r-full);
}

.mobilenav__lock {
  position: absolute;
  top: 7px;
  right: calc(50% - 18px);
  display: inline-flex;
  color: var(--text-dim);
}

.mobilenav__dot {
  position: absolute;
  top: 8px;
  right: calc(50% - 16px);
  width: 7px;
  height: 7px;
  background: var(--danger);
  border: 1.5px solid var(--bg);
  border-radius: var(--r-full);
}


/* ================================================================
   MOBIL YAN MENU (cekmece)
   ================================================================ */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  visibility: hidden;
  pointer-events: none;
}

.drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity var(--t-base);
}

.drawer.is-open .drawer__backdrop { opacity: 1; }

.drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(300px, 84vw);
  background: var(--surface-1);
  border-right: 1px solid var(--border);
  padding: var(--sp-4);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--t-slow);
}

.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
}


/* ================================================================
   BOLUM BASLIKLARI
   ================================================================ */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-1);
}

.section-head__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}

.section-head__link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

.section-head__link:hover { color: var(--brand-ink); }

/* Baslikta birden fazla dugme: dar ekranda alta kaymasin diye
   kendi satirinda toplaniyor. */
.section-head__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}


/* ================================================================
   SAYFA BASLIGI
   ================================================================ */
.page-head {
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.page-head__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.03em;
}

.page-head__sub {
  margin-top: var(--sp-1);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}